diff --git a/.github/pull_request_title_conventions.md b/.github/pull_request_title_conventions.md
index 8808000e3b330..0fc951d0e4475 100644
--- a/.github/pull_request_title_conventions.md
+++ b/.github/pull_request_title_conventions.md
@@ -11,19 +11,19 @@ A PR title consists of these elements:
   |       |                        Capitalized
   |       |                        No period at the end.
   │       │
-  │       └─⫸ Scope: API|core|editor|* Node
+  │       └─⫸ Scope: API|core|editor|* Node|benchmark
   │
   └─⫸ Type: build|ci|docs|feat|fix|perf|refactor|test
 ```
 
 - PR title
-    - type
-    - scope (*optional*)
-    - summary
+  - type
+  - scope (_optional_)
+  - summary
 - PR description
-    - body (optional)
-    - blank line
-    - footer (optional)
+  - body (optional)
+  - blank line
+  - footer (optional)
 
 The structure looks like this:
 
@@ -46,13 +46,14 @@ If the prefix is `feat`, `fix` or `perf`, it will appear in the changelog. H
 
 The scope should specify the place of the commit change as long as the commit clearly addresses one of the following supported scopes. (Otherwise, omit the scope!)
 
-- `API` - changes to the *public* API
+- `API` - changes to the _public_ API
 - `core` - changes to the core / private API / backend of n8n
 - `editor` - changes to the Editor UI
 - `* Node` - changes to a specific node or trigger node (”`*`” to be replaced with the node name, not its display name), e.g.
-    - mattermost → Mattermost Node
-    - microsoftToDo  → Microsoft To Do Node
-    - n8n → n8n Node
+  - mattermost → Mattermost Node
+  - microsoftToDo → Microsoft To Do Node
+  - n8n → n8n Node
+- `benchmark` - changes to the Benchmark cli
 
 ### **Summary**
 
@@ -60,8 +61,8 @@ The summary contains succinct description of the change:
 
 - use the imperative, present tense: "change" not "changed" nor "changes"
 - capitalize the first letter
-- *no* dot (.) at the end
-- do *not* include Linear ticket IDs etc. (e.g. N8N-1234)
+- _no_ dot (.) at the end
+- do _not_ include Linear ticket IDs etc. (e.g. N8N-1234)
 - suffix with “(no-changelog)” for commits / PRs that should not get mentioned in the changelog.
 
 ### **Body (optional)**
@@ -95,7 +96,7 @@ Closes #<pr number>
 A Breaking Change section should start with the phrase "`BREAKING CHANGE:` " followed by a summary of the breaking change, a blank line, and a detailed description of the breaking change that also includes migration instructions.
 
 > 💡 A breaking change can additionally also be marked by adding a “`!`” to the header, right before the “`:`”, e.g. `feat(editor)!: Remove support for dark mode`
-> 
+>
 > This makes locating breaking changes easier when just skimming through commit messages.
 
 > 💡 The breaking changes must also be added to the [packages/cli/BREAKING-CHANGES.md](https://github.com/n8n-io/n8n/blob/master/packages/cli/BREAKING-CHANGES.md) file located in the n8n repository.
@@ -109,4 +110,4 @@ If the commit reverts a previous commit, it should begin with `revert:` , foll
 The content of the commit message body should contain:
 
 - information about the SHA of the commit being reverted in the following format: `This reverts commit <SHA>`,
-- a clear description of the reason for reverting the commit message.
\ No newline at end of file
+- a clear description of the reason for reverting the commit message.
diff --git a/.github/workflows/benchmark-destroy-nightly.yml b/.github/workflows/benchmark-destroy-nightly.yml
new file mode 100644
index 0000000000000..f77e305571a30
--- /dev/null
+++ b/.github/workflows/benchmark-destroy-nightly.yml
@@ -0,0 +1,40 @@
+name: Destroy Benchmark Env
+
+on:
+  schedule:
+    - cron: '30 4 * * *'
+  workflow_dispatch:
+
+permissions:
+  id-token: write
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    environment: benchmarking
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4.1.1
+
+      - name: Azure login
+        uses: azure/login@v2.1.1
+        with:
+          client-id: ${{ secrets.BENCHMARK_ARM_CLIENT_ID }}
+          tenant-id: ${{ secrets.BENCHMARK_ARM_TENANT_ID }}
+          subscription-id: ${{ secrets.BENCHMARK_ARM_SUBSCRIPTION_ID }}
+
+      - run: Setup node
+      - uses: actions/setup-node@v4.0.2
+        with:
+          node-version: 20.x
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Destroy cloud env
+        if: github.event.inputs.debug == 'true'
+        run: pnpm destroy-cloud-env
+        working-directory: packages/@n8n/benchmark
diff --git a/.github/workflows/benchmark-nightly.yml b/.github/workflows/benchmark-nightly.yml
new file mode 100644
index 0000000000000..eb5aacbd0f81b
--- /dev/null
+++ b/.github/workflows/benchmark-nightly.yml
@@ -0,0 +1,69 @@
+name: Run Nightly Benchmark
+run-name: Benchmark ${{ inputs.n8n_tag }}
+
+on:
+  schedule:
+    - cron: '0 2 * * *'
+  workflow_dispatch:
+    inputs:
+      debug:
+        description: 'Use debug logging'
+        required: true
+        default: 'false'
+      n8n_tag:
+        description: 'Name of the n8n docker tag to run the benchmark against.'
+        required: true
+        default: 'nightly'
+      benchmark_tag:
+        description: 'Name of the benchmark cli docker tag to run the benchmark with.'
+        required: true
+        default: 'latest'
+
+env:
+  ARM_CLIENT_ID: ${{ secrets.BENCHMARK_ARM_CLIENT_ID }}
+  ARM_SUBSCRIPTION_ID: ${{ secrets.BENCHMARK_ARM_SUBSCRIPTION_ID }}
+  ARM_TENANT_ID: ${{ secrets.BENCHMARK_ARM_TENANT_ID }}
+  K6_API_TOKEN: ${{ secrets.K6_API_TOKEN }}
+
+permissions:
+  id-token: write
+  contents: read
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    environment: benchmarking
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4.1.1
+
+      - uses: hashicorp/setup-terraform@v3
+        with:
+          terraform_version: '1.8.5'
+
+      - run: corepack enable
+      - uses: actions/setup-node@v4.0.2
+        with:
+          node-version: 20.x
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Azure login
+        uses: azure/login@v2.1.1
+        with:
+          client-id: ${{ env.ARM_CLIENT_ID }}
+          tenant-id: ${{ env.ARM_TENANT_ID }}
+          subscription-id: ${{ env.ARM_SUBSCRIPTION_ID }}
+
+      - name: Run the benchmark with debug logging
+        if: github.event.inputs.debug == 'true'
+        run: pnpm run-in-cloud sqlite --debug
+        working-directory: packages/@n8n/benchmark
+
+      - name: Run the benchmark
+        if: github.event.inputs.debug != 'true'
+        run: pnpm run-in-cloud sqlite
+        working-directory: packages/@n8n/benchmark
diff --git a/.github/workflows/docker-images-benchmark.yml b/.github/workflows/docker-images-benchmark.yml
index cf9d7359a5fe2..b0aa6e997decc 100644
--- a/.github/workflows/docker-images-benchmark.yml
+++ b/.github/workflows/docker-images-benchmark.yml
@@ -4,7 +4,7 @@ on:
   workflow_dispatch:
   push:
     branches:
-      - main
+      - master
     paths:
       - 'packages/@n8n/benchmark/**'
       - 'pnpm-lock.yaml'
diff --git a/packages/@n8n/benchmark/.eslintrc.js b/packages/@n8n/benchmark/.eslintrc.js
index 99c277f212ac9..463a7d2f52599 100644
--- a/packages/@n8n/benchmark/.eslintrc.js
+++ b/packages/@n8n/benchmark/.eslintrc.js
@@ -12,7 +12,7 @@ module.exports = {
 		project: './tsconfig.json',
 	},
 
-	ignorePatterns: ['scenarios/**'],
+	ignorePatterns: ['scenarios/**', 'scripts/**'],
 
 	rules: {
 		'n8n-local-rules/no-plain-errors': 'off',
diff --git a/packages/@n8n/benchmark/.gitignore b/packages/@n8n/benchmark/.gitignore
new file mode 100644
index 0000000000000..ee041668579c9
--- /dev/null
+++ b/packages/@n8n/benchmark/.gitignore
@@ -0,0 +1,4 @@
+**/.terraform/*
+**/*.tfstate*
+**/*.tfvars
+privatekey.pem
diff --git a/packages/@n8n/benchmark/README.md b/packages/@n8n/benchmark/README.md
index 569bcf897febd..a16e03572a393 100644
--- a/packages/@n8n/benchmark/README.md
+++ b/packages/@n8n/benchmark/README.md
@@ -40,6 +40,14 @@ N8N_USER_EMAIL=user@n8n.io N8N_USER_PASSWORD=password ./bin/n8n-benchmark run
 K6_PATH=/opt/homebrew/bin/k6 N8N_USER_EMAIL=user@n8n.io N8N_USER_PASSWORD=password ./bin/n8n-benchmark run
 ```
 
+## Running in the cloud
+
+There's a script to run the performance tests in a cloud environment. The script provisions a cloud environment, sets up n8n in the environment, runs the tests and destroys the environment.
+
+```sh
+pnpm run-in-cloud
+```
+
 ## Configuration
 
 The configuration options the cli accepts can be seen from [config.ts](./src/config/config.ts)
diff --git a/packages/@n8n/benchmark/infra/.terraform.lock.hcl b/packages/@n8n/benchmark/infra/.terraform.lock.hcl
new file mode 100644
index 0000000000000..30125168613f2
--- /dev/null
+++ b/packages/@n8n/benchmark/infra/.terraform.lock.hcl
@@ -0,0 +1,60 @@
+# This file is maintained automatically by "terraform init".
+# Manual edits may be lost in future updates.
+
+provider "registry.terraform.io/hashicorp/azurerm" {
+  version     = "3.115.0"
+  constraints = "~> 3.115.0"
+  hashes = [
+    "h1:O7C3Xb+MSOc9C/eAJ5C/CiJ4vuvUsYxxIzr9ZurmHNI=",
+    "zh:0ea93abd53cb872691bad6d5625bda88b5d9619ea813c208b36e0ee236308589",
+    "zh:26703cb9c2c38bc43e97bc83af03559d065750856ea85834b71fbcb2ef9d935c",
+    "zh:316255a3391c49fe9bd7c5b6aa53b56dd490e1083d19b722e7b8f956a2dfe004",
+    "zh:431637ae90c592126fb1ec813fee6390604275438a0d5e15904c65b0a6a0f826",
+    "zh:4cee0fa2e84f89853723c0bc72b7debf8ea2ffffc7ae34ff28d8a69269d3a879",
+    "zh:64a3a3c78ea877515365ed336bd0f3abbe71db7c99b3d2837915fbca168d429c",
+    "zh:7380d7b503b5a87fd71a31360c3eeab504f78e4f314824e3ceda724d9dc74cf0",
+    "zh:974213e05708037a6d2d8c58cc84981819138f44fe40e344034eb80e16ca6012",
+    "zh:9a91614de0476074e9c62bbf08d3bb9c64adbd1d3a4a2b5a3e8e41d9d6d5672f",
+    "zh:a438471c85b8788ab21bdef4cd5ca391a46cbae33bd0262668a80f5e6c4610e1",
+    "zh:bf823f2c941b336a1208f015466212b1a8fdf6da28abacf59bea708377709d9e",
+    "zh:f569b65999264a9416862bca5cd2a6177d94ccb0424f3a4ef424428912b9cb3c",
+  ]
+}
+
+provider "registry.terraform.io/hashicorp/random" {
+  version = "3.6.2"
+  hashes = [
+    "h1:VavG5unYCa3SYISMKF9pzc3718M0bhPlcbUZZGl7wuo=",
+    "zh:0ef01a4f81147b32c1bea3429974d4d104bbc4be2ba3cfa667031a8183ef88ec",
+    "zh:1bcd2d8161e89e39886119965ef0f37fcce2da9c1aca34263dd3002ba05fcb53",
+    "zh:37c75d15e9514556a5f4ed02e1548aaa95c0ecd6ff9af1119ac905144c70c114",
+    "zh:4210550a767226976bc7e57d988b9ce48f4411fa8a60cd74a6b246baf7589dad",
+    "zh:562007382520cd4baa7320f35e1370ffe84e46ed4e2071fdc7e4b1a9b1f8ae9b",
+    "zh:5efb9da90f665e43f22c2e13e0ce48e86cae2d960aaf1abf721b497f32025916",
+    "zh:6f71257a6b1218d02a573fc9bff0657410404fb2ef23bc66ae8cd968f98d5ff6",
+    "zh:78d5eefdd9e494defcb3c68d282b8f96630502cac21d1ea161f53cfe9bb483b3",
+    "zh:9647e18f221380a85f2f0ab387c68fdafd58af6193a932417299cdcae4710150",
+    "zh:bb6297ce412c3c2fa9fec726114e5e0508dd2638cad6a0cb433194930c97a544",
+    "zh:f83e925ed73ff8a5ef6e3608ad9225baa5376446349572c2449c0c0b3cf184b7",
+    "zh:fbef0781cb64de76b1df1ca11078aecba7800d82fd4a956302734999cfd9a4af",
+  ]
+}
+
+provider "registry.terraform.io/hashicorp/tls" {
+  version = "4.0.5"
+  hashes = [
+    "h1:zeG5RmggBZW/8JWIVrdaeSJa0OG62uFX5HY1eE8SjzY=",
+    "zh:01cfb11cb74654c003f6d4e32bbef8f5969ee2856394a96d127da4949c65153e",
+    "zh:0472ea1574026aa1e8ca82bb6df2c40cd0478e9336b7a8a64e652119a2fa4f32",
+    "zh:1a8ddba2b1550c5d02003ea5d6cdda2eef6870ece86c5619f33edd699c9dc14b",
+    "zh:1e3bb505c000adb12cdf60af5b08f0ed68bc3955b0d4d4a126db5ca4d429eb4a",
+    "zh:6636401b2463c25e03e68a6b786acf91a311c78444b1dc4f97c539f9f78de22a",
+    "zh:76858f9d8b460e7b2a338c477671d07286b0d287fd2d2e3214030ae8f61dd56e",
+    "zh:a13b69fb43cb8746793b3069c4d897bb18f454290b496f19d03c3387d1c9a2dc",
+    "zh:a90ca81bb9bb509063b736842250ecff0f886a91baae8de65c8430168001dad9",
+    "zh:c4de401395936e41234f1956ebadbd2ed9f414e6908f27d578614aaa529870d4",
+    "zh:c657e121af8fde19964482997f0de2d5173217274f6997e16389e7707ed8ece8",
+    "zh:d68b07a67fbd604c38ec9733069fbf23441436fecf554de6c75c032f82e1ef19",
+    "zh:f569b65999264a9416862bca5cd2a6177d94ccb0424f3a4ef424428912b9cb3c",
+  ]
+}
diff --git a/packages/@n8n/benchmark/infra/benchmark-env.tf b/packages/@n8n/benchmark/infra/benchmark-env.tf
new file mode 100644
index 0000000000000..eff8fa12a93d1
--- /dev/null
+++ b/packages/@n8n/benchmark/infra/benchmark-env.tf
@@ -0,0 +1,54 @@
+
+data "azurerm_resource_group" "main" {
+  name = var.resource_group_name
+}
+
+# Random prefix for the resources
+resource "random_string" "prefix" {
+  length  = 8
+  special = false
+}
+
+# SSH key pair
+resource "tls_private_key" "ssh_key" {
+  algorithm = "RSA"
+  rsa_bits  = 4096
+}
+
+# Dedicated Host Group & Hosts
+
+resource "azurerm_dedicated_host_group" "main" {
+  name                        = "${random_string.prefix.result}-hostgroup"
+  location                    = var.location
+  resource_group_name         = data.azurerm_resource_group.main.name
+  platform_fault_domain_count = 1
+  automatic_placement_enabled = false
+  zone                        = 1
+
+	tags = local.common_tags
+}
+
+resource "azurerm_dedicated_host" "hosts" {
+  name                    = "${random_string.prefix.result}-host"
+  location                = var.location
+  dedicated_host_group_id = azurerm_dedicated_host_group.main.id
+  sku_name                = var.host_size_family
+  platform_fault_domain   = 0
+
+	tags = local.common_tags
+}
+
+# VM
+
+module "test_vm" {
+  source = "./modules/benchmark-vm"
+
+  location            = var.location
+  resource_group_name = data.azurerm_resource_group.main.name
+  prefix              = random_string.prefix.result
+  dedicated_host_id   = azurerm_dedicated_host.hosts.id
+  ssh_public_key      = tls_private_key.ssh_key.public_key_openssh
+  vm_size             = var.vm_size
+
+  tags = local.common_tags
+}
diff --git a/packages/@n8n/benchmark/infra/modules/benchmark-vm/output.tf b/packages/@n8n/benchmark/infra/modules/benchmark-vm/output.tf
new file mode 100644
index 0000000000000..4660ebf4136ab
--- /dev/null
+++ b/packages/@n8n/benchmark/infra/modules/benchmark-vm/output.tf
@@ -0,0 +1,7 @@
+output "vm_name" {
+  value = azurerm_linux_virtual_machine.main.name
+}
+
+output "ip" {
+  value = azurerm_public_ip.main.ip_address
+}
diff --git a/packages/@n8n/benchmark/infra/modules/benchmark-vm/vars.tf b/packages/@n8n/benchmark/infra/modules/benchmark-vm/vars.tf
new file mode 100644
index 0000000000000..d671253006e37
--- /dev/null
+++ b/packages/@n8n/benchmark/infra/modules/benchmark-vm/vars.tf
@@ -0,0 +1,31 @@
+variable "location" {
+  description = "Region to deploy resources"
+  default     = "East US"
+}
+
+variable "resource_group_name" {
+  description = "Name of the resource group"
+}
+
+variable "prefix" {
+  description = "Prefix to append to resources"
+}
+
+variable "dedicated_host_id" {
+  description = "Dedicated Host ID"
+}
+
+variable "ssh_public_key" {
+  description = "SSH Public Key"
+}
+
+variable "vm_size" {
+  description = "VM Size"
+  # 4 vCPUs, 16 GiB memory
+  default = "Standard_DC4s_v2"
+}
+
+variable "tags" {
+  description = "Tags to apply to all resources created by this module"
+  type        = map(string)
+}
diff --git a/packages/@n8n/benchmark/infra/modules/benchmark-vm/vm.tf b/packages/@n8n/benchmark/infra/modules/benchmark-vm/vm.tf
new file mode 100644
index 0000000000000..651a9d2a0bdc4
--- /dev/null
+++ b/packages/@n8n/benchmark/infra/modules/benchmark-vm/vm.tf
@@ -0,0 +1,136 @@
+# Network
+
+resource "azurerm_virtual_network" "main" {
+  name                = "${var.prefix}-vnet"
+  location            = var.location
+  resource_group_name = var.resource_group_name
+  address_space       = ["10.0.0.0/16"]
+
+  tags = var.tags
+}
+
+resource "azurerm_subnet" "main" {
+  name                 = "${var.prefix}-subnet"
+  resource_group_name  = var.resource_group_name
+  virtual_network_name = azurerm_virtual_network.main.name
+  address_prefixes     = ["10.0.0.0/24"]
+}
+
+resource "azurerm_network_security_group" "ssh" {
+  name                = "${var.prefix}-nsg"
+  location            = var.location
+  resource_group_name = var.resource_group_name
+
+  security_rule {
+    name                       = "AllowSSH"
+    priority                   = 1001
+    direction                  = "Inbound"
+    access                     = "Allow"
+    protocol                   = "Tcp"
+    source_port_range          = "*"
+    destination_port_range     = "22"
+    source_address_prefix      = "*"
+    destination_address_prefix = "*"
+  }
+
+  tags = var.tags
+}
+
+resource "azurerm_public_ip" "main" {
+  name                = "${var.prefix}-pip"
+  location            = var.location
+  resource_group_name = var.resource_group_name
+  allocation_method   = "Static"
+  sku                 = "Standard"
+
+  tags = var.tags
+}
+
+resource "azurerm_network_interface" "main" {
+  name                = "${var.prefix}-nic"
+  location            = var.location
+  resource_group_name = var.resource_group_name
+
+  ip_configuration {
+    name                          = "${var.prefix}-ipconfig"
+    subnet_id                     = azurerm_subnet.main.id
+    private_ip_address_allocation = "Dynamic"
+    public_ip_address_id          = azurerm_public_ip.main.id
+  }
+
+  tags = var.tags
+}
+
+resource "azurerm_network_interface_security_group_association" "ssh" {
+  network_interface_id      = azurerm_network_interface.main.id
+  network_security_group_id = azurerm_network_security_group.ssh.id
+}
+
+# Disk
+
+resource "azurerm_managed_disk" "data" {
+  name                 = "${var.prefix}-disk"
+  location             = var.location
+  resource_group_name  = var.resource_group_name
+  storage_account_type = "PremiumV2_LRS"
+  create_option        = "Empty"
+  disk_size_gb         = "16"
+  zone                 = 1
+
+  tags = var.tags
+}
+
+resource "azurerm_virtual_machine_data_disk_attachment" "data" {
+  managed_disk_id    = azurerm_managed_disk.data.id
+  virtual_machine_id = azurerm_linux_virtual_machine.main.id
+  lun                = "1"
+  caching            = "None"
+}
+
+# VM
+
+resource "azurerm_linux_virtual_machine" "main" {
+  name                  = "${var.prefix}-vm"
+  location              = var.location
+  resource_group_name   = var.resource_group_name
+  network_interface_ids = [azurerm_network_interface.main.id]
+  dedicated_host_id     = var.dedicated_host_id
+  zone                  = 1
+
+  size = var.vm_size
+
+  admin_username = "benchmark"
+
+  admin_ssh_key {
+    username   = "benchmark"
+    public_key = var.ssh_public_key
+  }
+
+  os_disk {
+    caching              = "ReadWrite"
+    storage_account_type = "Premium_LRS"
+  }
+
+  source_image_reference {
+    publisher = "Canonical"
+    offer     = "0001-com-ubuntu-server-jammy"
+    sku       = "22_04-lts-gen2"
+    version   = "latest"
+  }
+
+	identity {
+		type = "SystemAssigned"
+	}
+
+  tags = var.tags
+}
+
+resource "azurerm_virtual_machine_extension" "entra_login" {
+  name                 = "AADSSHLoginForLinux"
+  virtual_machine_id   = azurerm_linux_virtual_machine.main.id
+  publisher            = "Microsoft.Azure.ActiveDirectory"
+  type                 = "AADSSHLoginForLinux"
+  type_handler_version = "1.0"
+
+  tags = var.tags
+}
diff --git a/packages/@n8n/benchmark/infra/output.tf b/packages/@n8n/benchmark/infra/output.tf
new file mode 100644
index 0000000000000..5caa0adce3e55
--- /dev/null
+++ b/packages/@n8n/benchmark/infra/output.tf
@@ -0,0 +1,3 @@
+output "vm_name" {
+  value = module.test_vm.vm_name
+}
diff --git a/packages/@n8n/benchmark/infra/providers.tf b/packages/@n8n/benchmark/infra/providers.tf
new file mode 100644
index 0000000000000..1ce880f5cdadb
--- /dev/null
+++ b/packages/@n8n/benchmark/infra/providers.tf
@@ -0,0 +1,23 @@
+
+terraform {
+  required_providers {
+    azurerm = {
+      source  = "hashicorp/azurerm"
+      version = "~> 3.115.0"
+    }
+
+    random = {
+      source = "hashicorp/random"
+    }
+  }
+
+  required_version = "~> 1.8.5"
+}
+
+provider "azurerm" {
+  features {}
+
+  skip_provider_registration = true
+}
+
+provider "random" {}
diff --git a/packages/@n8n/benchmark/infra/vars.tf b/packages/@n8n/benchmark/infra/vars.tf
new file mode 100644
index 0000000000000..379bafe80baa0
--- /dev/null
+++ b/packages/@n8n/benchmark/infra/vars.tf
@@ -0,0 +1,34 @@
+variable "location" {
+  description = "Region to deploy resources"
+  default     = "East US"
+}
+
+variable "resource_group_name" {
+  description = "Name of the resource group"
+  default     = "n8n-benchmarking"
+}
+
+variable "host_size_family" {
+  description = "Size Family for the Host Group"
+  default     = "DCSv2-Type1"
+}
+
+variable "vm_size" {
+  description = "VM Size"
+  # 2 vCPUs, 8 GiB memory
+  default = "Standard_DC2s_v2"
+}
+
+variable "number_of_vms" {
+  description = "Number of VMs to create"
+  default     = 1
+}
+
+locals {
+  common_tags = {
+    Id        = "N8nBenchmark"
+    Terraform = "true"
+    Owner     = "Catalysts"
+		CreatedAt = timestamp()
+  }
+}
diff --git a/packages/@n8n/benchmark/package.json b/packages/@n8n/benchmark/package.json
index 2a3ad1c214151..81588845b759a 100644
--- a/packages/@n8n/benchmark/package.json
+++ b/packages/@n8n/benchmark/package.json
@@ -10,6 +10,8 @@
     "start": "./bin/n8n-benchmark",
     "test": "echo \"Error: no test specified\" && exit 1",
     "typecheck": "tsc --noEmit",
+    "run-in-cloud": "zx scripts/runInCloud.mjs",
+    "destroy-cloud-env": "zx scripts/destroyCloudEnv.mjs",
     "watch": "concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\""
   },
   "engines": {
diff --git a/packages/@n8n/benchmark/scripts/destroyCloudEnv.mjs b/packages/@n8n/benchmark/scripts/destroyCloudEnv.mjs
new file mode 100644
index 0000000000000..1ffc852aeaab8
--- /dev/null
+++ b/packages/@n8n/benchmark/scripts/destroyCloudEnv.mjs
@@ -0,0 +1,90 @@
+#!/usr/bin/env zx
+/**
+ * Script that deletes all resources created by the benchmark environment
+ * and that are older than 2 hours.
+ *
+ * Even tho the environment is provisioned using terraform, the terraform
+ * state is not persisted. Hence we can't use terraform to delete the resources.
+ * We could store the state to a storage account, but then we wouldn't be able
+ * to spin up new envs on-demand. Hence this design.
+ *
+ * Usage:
+ * 	 zx scripts/deleteCloudEnv.mjs
+ */
+// @ts-check
+import { $ } from 'zx';
+
+const EXPIRE_TIME_IN_H = 2;
+const EXPIRE_TIME_IN_MS = EXPIRE_TIME_IN_H * 60 * 60 * 1000;
+const RESOURCE_GROUP_NAME = 'n8n-benchmarking';
+
+async function main() {
+	const resourcesResult =
+		await $`az resource list --resource-group ${RESOURCE_GROUP_NAME} --query "[?tags.Id == 'N8nBenchmark'].{id:id, createdAt:tags.CreatedAt}" -o json`;
+
+	const resources = JSON.parse(resourcesResult.stdout);
+
+	const now = Date.now();
+
+	const resourcesToDelete = resources
+		.filter((resource) => {
+			if (resource.createdAt === undefined) {
+				return true;
+			}
+
+			const createdAt = new Date(resource.createdAt);
+			const resourceExpiredAt = createdAt.getTime() + EXPIRE_TIME_IN_MS;
+
+			return now > resourceExpiredAt;
+		})
+		.map((resource) => resource.id);
+
+	if (resourcesToDelete.length === 0) {
+		if (resources.length === 0) {
+			console.log('No resources found in the resource group.');
+		} else {
+			console.log(
+				`Found ${resources.length} resources in the resource group, but none are older than ${EXPIRE_TIME_IN_H} hours.`,
+			);
+		}
+
+		return;
+	}
+
+	await deleteResources(resourcesToDelete);
+}
+
+async function deleteResources(resourceIds) {
+	// We don't know the order in which resource should be deleted.
+	// Here's a poor person's approach to try deletion until all complete
+	const MAX_ITERATIONS = 100;
+	let i = 0;
+	const toDelete = [...resourceIds];
+
+	console.log(`Deleting ${resourceIds.length} resources...`);
+	while (toDelete.length > 0) {
+		const resourceId = toDelete.shift();
+		const deleted = await deleteById(resourceId);
+		if (!deleted) {
+			toDelete.push(resourceId);
+		}
+
+		if (i++ > MAX_ITERATIONS) {
+			console.log(
+				`Max iterations reached. Exiting. Could not delete ${toDelete.length} resources.`,
+			);
+			process.exit(1);
+		}
+	}
+}
+
+async function deleteById(id) {
+	try {
+		await $`az resource delete --ids ${id}`;
+		return true;
+	} catch (error) {
+		return false;
+	}
+}
+
+main();
diff --git a/packages/@n8n/benchmark/scripts/runInCloud.mjs b/packages/@n8n/benchmark/scripts/runInCloud.mjs
new file mode 100755
index 0000000000000..9d6f2b9556da3
--- /dev/null
+++ b/packages/@n8n/benchmark/scripts/runInCloud.mjs
@@ -0,0 +1,200 @@
+#!/usr/bin/env zx
+/**
+ * Script to run benchmarks on the cloud benchmark environment.
+ * This script will:
+ * 	1. Provision a benchmark environment using Terraform.
+ * 	2. Run the benchmarks on the VM.
+ * 	3. Destroy the cloud environment.
+ *
+ * NOTE: Must be run in the root of the package.
+ *
+ * Usage:
+ * 	 zx scripts/runBenchmarksOnCloud.mjs [--debug] <n8n setup to use>
+ *
+ */
+// @ts-check
+import fs from 'fs';
+import minimist from 'minimist';
+import { $, sleep, which } from 'zx';
+import path from 'path';
+import { SshClient } from './sshClient.mjs';
+import { TerraformClient } from './terraformClient.mjs';
+
+/**
+ * @typedef {Object} BenchmarkEnv
+ * @property {string} vmName
+ */
+
+const RESOURCE_GROUP_NAME = 'n8n-benchmarking';
+
+const paths = {
+	n8nSetupsDir: path.join(path.resolve('scripts'), 'runOnVm', 'n8nSetups'),
+};
+
+async function main() {
+	const config = await parseAndValidateConfig();
+	await ensureDependencies();
+
+	console.log('Using n8n tag', config.n8nTag);
+	console.log('Using benchmark cli tag', config.benchmarkTag);
+
+	const terraformClient = new TerraformClient({
+		privateKeyPath: paths.privateKeyPath,
+		isVerbose: config.isVerbose,
+	});
+
+	try {
+		const benchmarkEnv = await terraformClient.provisionEnvironment();
+
+		await runBenchmarksOnVm(config, benchmarkEnv);
+	} catch (error) {
+		console.error('An error occurred while running the benchmarks:');
+		console.error(error);
+	} finally {
+		await terraformClient.destroyEnvironment();
+	}
+}
+
+async function ensureDependencies() {
+	await which('terraform');
+	await which('az');
+}
+
+/**
+ *
+ * @param {Config} config
+ * @param {BenchmarkEnv} benchmarkEnv
+ */
+async function runBenchmarksOnVm(config, benchmarkEnv) {
+	console.log(`Setting up the environment for ${config.n8nSetupToUse}...`);
+
+	const sshClient = new SshClient({
+		vmName: benchmarkEnv.vmName,
+		resourceGroupName: RESOURCE_GROUP_NAME,
+		verbose: config.isVerbose,
+	});
+
+	await ensureVmIsReachable(sshClient);
+
+	const scriptsDir = await transferScriptsToVm(sshClient);
+
+	// Bootstrap the environment with dependencies
+	console.log('Running bootstrap script...');
+	const bootstrapScriptPath = path.join(scriptsDir, 'bootstrap.sh');
+	await sshClient.ssh(`chmod a+x ${bootstrapScriptPath} && ${bootstrapScriptPath}`);
+
+	// Give some time for the VM to be ready
+	await sleep(1000);
+
+	console.log('Running benchmarks...');
+	const runScriptPath = path.join(scriptsDir, 'runOnVm.mjs');
+
+	const flags = {
+		n8nDockerTag: config.n8nTag,
+		benchmarkDockerTag: config.benchmarkTag,
+		k6ApiToken: config.k6ApiToken,
+	};
+
+	const flagsString = Object.entries(flags)
+		.filter(([, value]) => value !== undefined)
+		.map(([key, value]) => `--${key}=${value}`)
+		.join(' ');
+
+	await sshClient.ssh(`npx zx ${runScriptPath} ${flagsString} ${config.n8nSetupToUse}`, {
+		// Test run should always log its output
+		verbose: true,
+	});
+}
+
+async function ensureVmIsReachable(sshClient) {
+	await sshClient.ssh('echo "VM is reachable"');
+}
+
+/**
+ * @returns Path where the scripts are located on the VM
+ */
+async function transferScriptsToVm(sshClient) {
+	await sshClient.ssh('rm -rf ~/n8n');
+
+	await sshClient.ssh('git clone --depth=1 https://github.com/n8n-io/n8n.git');
+
+	return '~/n8n/packages/@n8n/benchmark/scripts/runOnVm';
+}
+
+function readAvailableN8nSetups() {
+	const setups = fs.readdirSync(paths.n8nSetupsDir);
+
+	return setups;
+}
+
+/**
+ * @typedef {Object} Config
+ * @property {boolean} isVerbose
+ * @property {string} n8nSetupToUse
+ * @property {string} n8nTag
+ * @property {string} benchmarkTag
+ * @property {string} [k6ApiToken]
+ *
+ * @returns {Promise<Config>}
+ */
+async function parseAndValidateConfig() {
+	const args = minimist(process.argv.slice(2), {
+		boolean: ['debug'],
+	});
+
+	const n8nSetupToUse = await getAndValidateN8nSetup(args);
+	const isVerbose = args.debug || false;
+	const n8nTag = args.n8nTag || process.env.N8N_DOCKER_TAG || 'latest';
+	const benchmarkTag = args.benchmarkTag || process.env.BENCHMARK_DOCKER_TAG || 'latest';
+	const k6ApiToken = args.k6ApiToken || process.env.K6_API_TOKEN || undefined;
+
+	return {
+		isVerbose,
+		n8nSetupToUse,
+		n8nTag,
+		benchmarkTag,
+		k6ApiToken,
+	};
+}
+
+/**
+ * @param {minimist.ParsedArgs} args
+ */
+async function getAndValidateN8nSetup(args) {
+	// Last parameter is the n8n setup to use
+	const n8nSetupToUse = args._[args._.length - 1];
+
+	if (!n8nSetupToUse) {
+		printUsage();
+		process.exit(1);
+	}
+
+	const availableSetups = readAvailableN8nSetups();
+
+	if (!availableSetups.includes(n8nSetupToUse)) {
+		printUsage();
+		process.exit(1);
+	}
+
+	return n8nSetupToUse;
+}
+
+function printUsage() {
+	const availableSetups = readAvailableN8nSetups();
+
+	console.log('Usage: zx scripts/runInCloud.mjs <n8n setup name>');
+	console.log('   eg: zx scripts/runInCloud.mjs sqlite');
+	console.log('');
+	console.log('Options:');
+	console.log('  --debug              Enable verbose output');
+	console.log('  --n8nTag             Docker tag for n8n image. Default is latest');
+	console.log('  --benchmarkTag       Docker tag for benchmark cli image. Default is latest');
+	console.log(
+		'  --k6ApiToken         API token for k6 cloud. Default is read from K6_API_TOKEN env var. If omitted, k6 cloud will not be used.',
+	);
+	console.log('');
+	console.log('Available setups:');
+	console.log(`  ${availableSetups.join(', ')}`);
+}
+
+main().catch(console.error);
diff --git a/packages/@n8n/benchmark/scripts/runOnVm/bootstrap.sh b/packages/@n8n/benchmark/scripts/runOnVm/bootstrap.sh
new file mode 100644
index 0000000000000..9a5ffbe25319e
--- /dev/null
+++ b/packages/@n8n/benchmark/scripts/runOnVm/bootstrap.sh
@@ -0,0 +1,38 @@
+#!/bin/bash
+#
+# Script to initialize the benchmark environment on a VM
+#
+
+set -euo pipefail;
+
+CURRENT_USER=$(whoami)
+
+# Mount the data disk
+if [ -d "/n8n" ]; then
+	echo "Data disk already mounted. Clearing it..."
+	rm -rf /n8n/*
+	rm -rf /n8n/.[!.]*
+else
+	sudo mkdir -p /n8n
+	sudo parted /dev/sdc --script mklabel gpt mkpart xfspart xfs 0% 100%
+	sudo mkfs.xfs /dev/sdc1
+	sudo partprobe /dev/sdc1
+	sudo mount /dev/sdc1 /n8n
+fi
+
+# Allow the current user to write to the data disk
+sudo chmod a+rw /n8n
+
+# Include nodejs v20 repository
+curl -fsSL https://deb.nodesource.com/setup_20.x -o nodesource_setup.sh
+sudo -E bash nodesource_setup.sh
+
+# Install docker, docker compose and nodejs
+sudo DEBIAN_FRONTEND=noninteractive apt-get update
+sudo DEBIAN_FRONTEND=noninteractive apt-get install -y docker.io docker-compose nodejs
+
+# Add the current user to the docker group
+sudo usermod -aG docker "$CURRENT_USER"
+
+# Install zx
+npm install zx
diff --git a/packages/@n8n/benchmark/scripts/runOnVm/n8nSetups/sqlite/docker-compose.yml b/packages/@n8n/benchmark/scripts/runOnVm/n8nSetups/sqlite/docker-compose.yml
new file mode 100644
index 0000000000000..02b61961f1b4a
--- /dev/null
+++ b/packages/@n8n/benchmark/scripts/runOnVm/n8nSetups/sqlite/docker-compose.yml
@@ -0,0 +1,17 @@
+services:
+  n8n:
+    image: ghcr.io/n8n-io/n8n:${N8N_VERSION:-latest}
+    environment:
+      - N8N_DIAGNOSTICS_ENABLED=false
+      - N8N_USER_FOLDER=/n8n
+    ports:
+      - 5678:5678
+    volumes:
+      - /n8n:/n8n
+  benchmark:
+    image: ghcr.io/n8n-io/n8n-benchmark:${N8N_BENCHMARK_VERSION:-latest}
+    depends_on:
+      - n8n
+    environment:
+      - N8N_BASE_URL=http://n8n:5678
+      - K6_API_TOKEN=${K6_API_TOKEN}
diff --git a/packages/@n8n/benchmark/scripts/runOnVm/runOnVm.mjs b/packages/@n8n/benchmark/scripts/runOnVm/runOnVm.mjs
new file mode 100755
index 0000000000000..e3402e70c58bd
--- /dev/null
+++ b/packages/@n8n/benchmark/scripts/runOnVm/runOnVm.mjs
@@ -0,0 +1,55 @@
+#!/usr/bin/env zx
+/**
+ * This script runs the benchmarks using a given docker compose setup
+ */
+
+import { $ } from 'zx';
+
+const [n8nSetupToUse] = argv._;
+
+if (!n8nSetupToUse) {
+	printUsage();
+	process.exit(1);
+}
+
+function printUsage() {
+	console.log('Usage: zx runOnVm.mjs <envName>');
+	console.log('   eg: zx runOnVm.mjs sqlite');
+}
+
+async function main() {
+	const composeFilePath = path.join(__dirname, 'n8nSetups', n8nSetupToUse);
+	const n8nTag = argv.n8nDockerTag || process.env.N8N_DOCKER_TAG || 'latest';
+	const benchmarkTag = argv.benchmarkDockerTag || process.env.BENCHMARK_DOCKER_TAG || 'latest';
+	const k6ApiToken = argv.k6ApiToken || process.env.K6_API_TOKEN || undefined;
+
+	const $$ = $({
+		cwd: composeFilePath,
+		verbose: true,
+		env: {
+			N8N_VERSION: n8nTag,
+			BENCHMARK_VERSION: benchmarkTag,
+			K6_API_TOKEN: k6ApiToken,
+		},
+	});
+
+	try {
+		await $$`docker-compose up -d n8n`;
+
+		await $$`docker-compose run benchmark run`;
+	} catch (error) {
+		console.error('An error occurred while running the benchmarks:');
+		console.error(error);
+		console.error('');
+		await dumpN8nInstanceLogs($$);
+	} finally {
+		await $$`docker-compose down`;
+	}
+}
+
+async function dumpN8nInstanceLogs($$) {
+	console.error('n8n instance logs:');
+	await $$`docker-compose logs n8n`;
+}
+
+main();
diff --git a/packages/@n8n/benchmark/scripts/sshClient.mjs b/packages/@n8n/benchmark/scripts/sshClient.mjs
new file mode 100644
index 0000000000000..033312f48ed77
--- /dev/null
+++ b/packages/@n8n/benchmark/scripts/sshClient.mjs
@@ -0,0 +1,28 @@
+// @ts-check
+import { $ } from 'zx';
+
+export class SshClient {
+	/**
+	 *
+	 * @param {{ vmName: string; resourceGroupName: string; verbose?: boolean }} param0
+	 */
+	constructor({ vmName, resourceGroupName, verbose = false }) {
+		this.vmName = vmName;
+		this.resourceGroupName = resourceGroupName;
+		this.verbose = verbose;
+
+		this.$$ = $({
+			verbose,
+		});
+	}
+
+	/**
+	 * @param {string} command
+	 * @param {{ verbose?: boolean }} [options]
+	 */
+	async ssh(command, options = {}) {
+		const $$ = options?.verbose ? $({ verbose: true }) : this.$$;
+
+		await $$`az ssh vm -n ${this.vmName} -g ${this.resourceGroupName} --yes -- -o StrictHostKeyChecking=accept-new ${command}`;
+	}
+}
diff --git a/packages/@n8n/benchmark/scripts/terraformClient.mjs b/packages/@n8n/benchmark/scripts/terraformClient.mjs
new file mode 100644
index 0000000000000..1ba4fcedb468e
--- /dev/null
+++ b/packages/@n8n/benchmark/scripts/terraformClient.mjs
@@ -0,0 +1,53 @@
+// @ts-check
+
+import path from 'path';
+import { $, fs } from 'zx';
+
+const paths = {
+	infraCodeDir: path.resolve('infra'),
+	terraformStateFile: path.join(path.resolve('infra'), 'terraform.tfstate'),
+};
+
+export class TerraformClient {
+	constructor({ privateKeyPath, isVerbose = false }) {
+		this.privateKeyPath = privateKeyPath;
+		this.isVerbose = isVerbose;
+		this.$$ = $({
+			cwd: paths.infraCodeDir,
+			verbose: isVerbose,
+		});
+	}
+
+	/**
+	 * @typedef {Object} BenchmarkEnv
+	 * @property {string} vmName
+	 *
+	 * @returns {Promise<BenchmarkEnv>}
+	 */
+	async provisionEnvironment() {
+		console.log('Provisioning cloud environment...');
+
+		await this.$$`terraform init`;
+		await this.$$`terraform apply -input=false -auto-approve`;
+
+		return {
+			vmName: await this.getTerraformOutput('vm_name'),
+		};
+	}
+
+	async destroyEnvironment() {
+		if (!fs.existsSync(paths.terraformStateFile)) {
+			console.log('No cloud environment to destroy. Skipping...');
+			return;
+		}
+
+		console.log('Destroying cloud environment...');
+
+		await this.$$`terraform destroy -input=false -auto-approve`;
+	}
+
+	async getTerraformOutput(key) {
+		const output = await this.$$`terraform output -raw ${key}`;
+		return output.stdout.trim();
+	}
+}
diff --git a/packages/@n8n/benchmark/src/commands/run.ts b/packages/@n8n/benchmark/src/commands/run.ts
index d69b4a54d4afd..3d9a3bf803e45 100644
--- a/packages/@n8n/benchmark/src/commands/run.ts
+++ b/packages/@n8n/benchmark/src/commands/run.ts
@@ -25,7 +25,11 @@ export default class RunCommand extends Command {
 		const scenarioRunner = new ScenarioRunner(
 			new N8nApiClient(config.get('n8n.baseUrl')),
 			new ScenarioDataFileLoader(),
-			new K6Executor(config.get('k6ExecutablePath'), config.get('n8n.baseUrl')),
+			new K6Executor({
+				k6ExecutablePath: config.get('k6.executablePath'),
+				k6ApiToken: config.get('k6.apiToken'),
+				n8nApiBaseUrl: config.get('n8n.baseUrl'),
+			}),
 			{
 				email: config.get('n8n.user.email'),
 				password: config.get('n8n.user.password'),
diff --git a/packages/@n8n/benchmark/src/config/config.ts b/packages/@n8n/benchmark/src/config/config.ts
index 896ecc9296da0..2fa8d9249bf8f 100644
--- a/packages/@n8n/benchmark/src/config/config.ts
+++ b/packages/@n8n/benchmark/src/config/config.ts
@@ -31,11 +31,19 @@ const configSchema = {
 			},
 		},
 	},
-	k6ExecutablePath: {
-		doc: 'The path to the k6 binary',
-		format: String,
-		default: 'k6',
-		env: 'K6_PATH',
+	k6: {
+		executablePath: {
+			doc: 'The path to the k6 binary',
+			format: String,
+			default: 'k6',
+			env: 'K6_PATH',
+		},
+		apiToken: {
+			doc: 'The API token for k6 cloud',
+			format: String,
+			default: undefined,
+			env: 'K6_API_TOKEN',
+		},
 	},
 };
 
diff --git a/packages/@n8n/benchmark/src/n8nApiClient/n8nApiClient.ts b/packages/@n8n/benchmark/src/n8nApiClient/n8nApiClient.ts
index b1ec2d5162bb1..a188c4eefe913 100644
--- a/packages/@n8n/benchmark/src/n8nApiClient/n8nApiClient.ts
+++ b/packages/@n8n/benchmark/src/n8nApiClient/n8nApiClient.ts
@@ -49,6 +49,12 @@ export class N8nApiClient {
 		} else if (response.status === 400) {
 			if (responsePayload.message === 'Instance owner already setup')
 				console.log('Owner already set up');
+		} else if (response.status === 404) {
+			// The n8n instance setup owner endpoint not be available yet even tho
+			// the health endpoint returns ok. In this case we simply retry.
+			console.log('Owner setup endpoint not available yet, retrying in 1s...');
+			await this.delay(1000);
+			await this.setupOwnerIfNeeded(loginDetails);
 		} else {
 			throw new Error(
 				`Owner setup failed with status ${response.status}: ${responsePayload.message}`,
diff --git a/packages/@n8n/benchmark/src/testExecution/k6Executor.ts b/packages/@n8n/benchmark/src/testExecution/k6Executor.ts
index 176f1c15bb693..a9ab325b5f572 100644
--- a/packages/@n8n/benchmark/src/testExecution/k6Executor.ts
+++ b/packages/@n8n/benchmark/src/testExecution/k6Executor.ts
@@ -1,38 +1,103 @@
-import { $, which } from 'zx';
+import fs from 'fs';
+import path from 'path';
+import { $, which, tmpfile } from 'zx';
 import type { Scenario } from '@/types/scenario';
 
+export type K6ExecutorOpts = {
+	k6ExecutablePath: string;
+	k6ApiToken?: string;
+	n8nApiBaseUrl: string;
+};
+
+/**
+ * Flag for the k6 CLI.
+ * @example ['--duration', '1m']
+ * @example ['--quiet']
+ */
+type K6CliFlag = [string] | [string, string];
+
 /**
  * Executes test scenarios using k6
  */
 export class K6Executor {
-	constructor(
-		private readonly k6ExecutablePath: string,
-		private readonly n8nApiBaseUrl: string,
-	) {}
+	/**
+	 * This script is dynamically injected into the k6 test script to generate
+	 * a summary report of the test execution.
+	 */
+	private readonly handleSummaryScript = `
+import { textSummary } from 'https://jslib.k6.io/k6-summary/0.0.2/index.js';
+export function handleSummary(data) {
+	return {
+		stdout: textSummary(data),
+		'{{scenarioName}}.summary.json': JSON.stringify(data),
+	};
+}
+`;
+
+	constructor(private readonly opts: K6ExecutorOpts) {}
 
 	async executeTestScenario(scenario: Scenario) {
-		// For 1 min with 5 virtual users
-		const stage = '1m:5';
+		const augmentedTestScriptPath = this.augmentSummaryScript(scenario);
+		const runDirPath = path.dirname(augmentedTestScriptPath);
+
+		const flags: K6CliFlag[] = [['--quiet'], ['--duration', '1m'], ['--vus', '5']];
+
+		if (this.opts.k6ApiToken) {
+			flags.push(['--out', 'cloud']);
+		}
+
+		const flattedFlags = flags.flat(2);
 
 		const k6ExecutablePath = await this.resolveK6ExecutablePath();
 
 		const processPromise = $({
-			cwd: scenario.scenarioDirPath,
+			cwd: runDirPath,
 			env: {
-				API_BASE_URL: this.n8nApiBaseUrl,
+				API_BASE_URL: this.opts.n8nApiBaseUrl,
+				K6_CLOUD_TOKEN: this.opts.k6ApiToken,
 			},
-		})`${k6ExecutablePath} run --quiet --stage ${stage} ${scenario.scriptPath}`;
+		})`${k6ExecutablePath} run ${flattedFlags} ${augmentedTestScriptPath}`;
 
 		for await (const chunk of processPromise.stdout) {
 			console.log((chunk as Buffer).toString());
 		}
+
+		this.loadEndOfTestSummary(runDirPath, scenario.name);
+	}
+
+	/**
+	 * Augments the test script with a summary script
+	 *
+	 * @returns Absolute path to the augmented test script
+	 */
+	private augmentSummaryScript(scenario: Scenario) {
+		const fullTestScriptPath = path.join(scenario.scenarioDirPath, scenario.scriptPath);
+		const testScript = fs.readFileSync(fullTestScriptPath, 'utf8');
+		const summaryScript = this.handleSummaryScript.replace('{{scenarioName}}', scenario.name);
+
+		const augmentedTestScript = `${testScript}\n\n${summaryScript}`;
+
+		const tempFilePath = tmpfile(`${scenario.name}.ts`, augmentedTestScript);
+
+		return tempFilePath;
+	}
+
+	private loadEndOfTestSummary(dir: string, scenarioName: string): K6EndOfTestSummary {
+		const summaryReportPath = path.join(dir, `${scenarioName}.summary.json`);
+		const summaryReport = fs.readFileSync(summaryReportPath, 'utf8');
+
+		try {
+			return JSON.parse(summaryReport);
+		} catch (error) {
+			throw new Error(`Failed to parse the summary report at ${summaryReportPath}`);
+		}
 	}
 
 	/**
 	 * @returns Resolved path to the k6 executable
 	 */
 	private async resolveK6ExecutablePath(): Promise<string> {
-		const k6ExecutablePath = await which(this.k6ExecutablePath, { nothrow: true });
+		const k6ExecutablePath = await which(this.opts.k6ExecutablePath, { nothrow: true });
 		if (!k6ExecutablePath) {
 			throw new Error(
 				'Could not find k6 executable based on your `PATH`. Please ensure k6 is available in your system and add it to your `PATH` or specify the path to the k6 executable using the `K6_PATH` environment variable.',
diff --git a/packages/@n8n/benchmark/src/testExecution/k6Summary.ts b/packages/@n8n/benchmark/src/testExecution/k6Summary.ts
new file mode 100644
index 0000000000000..c40b0cae97526
--- /dev/null
+++ b/packages/@n8n/benchmark/src/testExecution/k6Summary.ts
@@ -0,0 +1,255 @@
+/**
+Example JSON:
+
+{
+	"options": {
+		"summaryTrendStats": ["avg", "min", "med", "max", "p(90)", "p(95)"],
+		"summaryTimeUnit": "",
+		"noColor": false
+	},
+	"state": { "isStdOutTTY": false, "isStdErrTTY": false, "testRunDurationMs": 23.374 },
+	"metrics": {
+		"http_req_tls_handshaking": {
+			"type": "trend",
+			"contains": "time",
+			"values": { "avg": 0, "min": 0, "med": 0, "max": 0, "p(90)": 0, "p(95)": 0 }
+		},
+		"checks": {
+			"type": "rate",
+			"contains": "default",
+			"values": { "rate": 1, "passes": 1, "fails": 0 }
+		},
+		"http_req_sending": {
+			"type": "trend",
+			"contains": "time",
+			"values": {
+				"p(90)": 0.512,
+				"p(95)": 0.512,
+				"avg": 0.512,
+				"min": 0.512,
+				"med": 0.512,
+				"max": 0.512
+			}
+		},
+		"http_reqs": {
+			"contains": "default",
+			"values": { "count": 1, "rate": 42.78257893385813 },
+			"type": "counter"
+		},
+		"http_req_blocked": {
+			"contains": "time",
+			"values": {
+				"avg": 1.496,
+				"min": 1.496,
+				"med": 1.496,
+				"max": 1.496,
+				"p(90)": 1.496,
+				"p(95)": 1.496
+			},
+			"type": "trend"
+		},
+		"data_received": {
+			"type": "counter",
+			"contains": "data",
+			"values": { "count": 269, "rate": 11508.513733207838 }
+		},
+		"iterations": {
+			"type": "counter",
+			"contains": "default",
+			"values": { "count": 1, "rate": 42.78257893385813 }
+		},
+		"http_req_waiting": {
+			"type": "trend",
+			"contains": "time",
+			"values": {
+				"p(95)": 18.443,
+				"avg": 18.443,
+				"min": 18.443,
+				"med": 18.443,
+				"max": 18.443,
+				"p(90)": 18.443
+			}
+		},
+		"http_req_receiving": {
+			"type": "trend",
+			"contains": "time",
+			"values": {
+				"avg": 0.186,
+				"min": 0.186,
+				"med": 0.186,
+				"max": 0.186,
+				"p(90)": 0.186,
+				"p(95)": 0.186
+			}
+		},
+		"http_req_duration{expected_response:true}": {
+			"type": "trend",
+			"contains": "time",
+			"values": {
+				"max": 19.141,
+				"p(90)": 19.141,
+				"p(95)": 19.141,
+				"avg": 19.141,
+				"min": 19.141,
+				"med": 19.141
+			}
+		},
+		"iteration_duration": {
+			"type": "trend",
+			"contains": "time",
+			"values": {
+				"avg": 22.577833,
+				"min": 22.577833,
+				"med": 22.577833,
+				"max": 22.577833,
+				"p(90)": 22.577833,
+				"p(95)": 22.577833
+			}
+		},
+		"http_req_connecting": {
+			"type": "trend",
+			"contains": "time",
+			"values": {
+				"avg": 0.673,
+				"min": 0.673,
+				"med": 0.673,
+				"max": 0.673,
+				"p(90)": 0.673,
+				"p(95)": 0.673
+			}
+		},
+		"http_req_failed": {
+			"type": "rate",
+			"contains": "default",
+			"values": { "rate": 0, "passes": 0, "fails": 1 }
+		},
+		"http_req_duration": {
+			"type": "trend",
+			"contains": "time",
+			"values": {
+				"p(90)": 19.141,
+				"p(95)": 19.141,
+				"avg": 19.141,
+				"min": 19.141,
+				"med": 19.141,
+				"max": 19.141
+			}
+		},
+		"data_sent": {
+			"type": "counter",
+			"contains": "data",
+			"values": { "count": 102, "rate": 4363.82305125353 }
+		}
+	},
+	"root_group": {
+		"name": "",
+		"path": "",
+		"id": "d41d8cd98f00b204e9800998ecf8427e",
+		"groups": [],
+		"checks": [
+			{
+				"name": "is status 200",
+				"path": "::is status 200",
+				"id": "548d37ca5f33793206f7832e7cea54fb",
+				"passes": 1,
+				"fails": 0
+			}
+		]
+	}
+}
+ */
+
+type TrendStat = 'avg' | 'min' | 'med' | 'max' | 'p(90)' | 'p(95)';
+type MetricType = 'trend' | 'rate' | 'counter';
+type MetricContains = 'time' | 'default' | 'data';
+
+interface TrendValues {
+	avg: number;
+	min: number;
+	med: number;
+	max: number;
+	'p(90)': number;
+	'p(95)': number;
+}
+
+interface RateValues {
+	rate: number;
+	passes: number;
+	fails: number;
+}
+
+interface CounterValues {
+	count: number;
+	rate: number;
+}
+
+interface TrendMetric {
+	type: 'trend';
+	contains: 'time';
+	values: TrendValues;
+}
+
+interface RateMetric {
+	type: 'rate';
+	contains: 'default';
+	values: RateValues;
+}
+
+interface CounterMetric {
+	type: 'counter';
+	contains: MetricContains;
+	values: CounterValues;
+}
+
+interface Options {
+	summaryTrendStats: TrendStat[];
+	summaryTimeUnit: string;
+	noColor: boolean;
+}
+
+interface State {
+	isStdOutTTY: boolean;
+	isStdErrTTY: boolean;
+	testRunDurationMs: number;
+}
+
+interface Metrics {
+	http_req_tls_handshaking: TrendMetric;
+	checks: RateMetric;
+	http_req_sending: TrendMetric;
+	http_reqs: CounterMetric;
+	http_req_blocked: TrendMetric;
+	data_received: CounterMetric;
+	iterations: CounterMetric;
+	http_req_waiting: TrendMetric;
+	http_req_receiving: TrendMetric;
+	'http_req_duration{expected_response:true}': TrendMetric;
+	iteration_duration: TrendMetric;
+	http_req_connecting: TrendMetric;
+	http_req_failed: RateMetric;
+	http_req_duration: TrendMetric;
+	data_sent: CounterMetric;
+}
+
+interface Check {
+	name: string;
+	path: string;
+	id: string;
+	passes: number;
+	fails: number;
+}
+
+interface RootGroup {
+	name: string;
+	path: string;
+	id: string;
+	groups: any[];
+	checks: Check[];
+}
+
+interface K6EndOfTestSummary {
+	options: Options;
+	state: State;
+	metrics: Metrics;
+	root_group: RootGroup;
+}
diff --git a/packages/@n8n/nodes-langchain/package.json b/packages/@n8n/nodes-langchain/package.json
index 28303136c215c..7e114c415611a 100644
--- a/packages/@n8n/nodes-langchain/package.json
+++ b/packages/@n8n/nodes-langchain/package.json
@@ -181,7 +181,7 @@
     "sqlite3": "5.1.7",
     "temp": "0.9.4",
     "tmp-promise": "3.0.3",
-    "zod": "3.23.8",
+    "zod": "catalog:",
     "zod-to-json-schema": "3.23.0"
   }
 }
diff --git a/packages/@n8n_io/eslint-config/frontend.js b/packages/@n8n_io/eslint-config/frontend.js
index c801a6007cf9f..cd62a6059a352 100644
--- a/packages/@n8n_io/eslint-config/frontend.js
+++ b/packages/@n8n_io/eslint-config/frontend.js
@@ -66,6 +66,12 @@ module.exports = {
 				useAttrs: 'attrs',
 			},
 		],
+		'vue/block-order': [
+			'error',
+			{
+				order: ['script', 'template', 'style'],
+			},
+		],
 
 		// TODO: fix these
 		'@typescript-eslint/no-unsafe-call': 'off',
diff --git a/packages/cli/package.json b/packages/cli/package.json
index c7608d1c34689..481c91032a512 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -173,6 +173,6 @@
     "xmllint-wasm": "3.0.1",
     "xss": "^1.0.14",
     "yamljs": "0.3.0",
-    "zod": "3.22.4"
+    "zod": "catalog:"
   }
 }
diff --git a/packages/cli/src/Interfaces.ts b/packages/cli/src/Interfaces.ts
index f6c3f4670fb74..18102f8f4ca72 100644
--- a/packages/cli/src/Interfaces.ts
+++ b/packages/cli/src/Interfaces.ts
@@ -42,7 +42,7 @@ import type { WorkflowRepository } from '@db/repositories/workflow.repository';
 import type { ExternalHooks } from './external-hooks';
 import type { LICENSE_FEATURES, LICENSE_QUOTAS } from './constants';
 import type { WorkflowWithSharingsAndCredentials } from './workflows/workflows.types';
-import type { RunningJobSummary } from './scaling/types';
+import type { RunningJobSummary } from './scaling/scaling.types';
 import type { Scope } from '@n8n/permissions';
 
 export interface ICredentialsTypeData {
diff --git a/packages/cli/src/PublicApi/v1/handlers/sourceControl/sourceControl.handler.ts b/packages/cli/src/PublicApi/v1/handlers/sourceControl/sourceControl.handler.ts
index 7a3cf08ec0eb5..330701f59cad0 100644
--- a/packages/cli/src/PublicApi/v1/handlers/sourceControl/sourceControl.handler.ts
+++ b/packages/cli/src/PublicApi/v1/handlers/sourceControl/sourceControl.handler.ts
@@ -3,13 +3,13 @@ import { Container } from 'typedi';
 import type { StatusResult } from 'simple-git';
 import type { PublicSourceControlRequest } from '../../../types';
 import { globalScope } from '../../shared/middlewares/global.middleware';
-import type { ImportResult } from '@/environments/sourceControl/types/importResult';
-import { SourceControlService } from '@/environments/sourceControl/sourceControl.service.ee';
-import { SourceControlPreferencesService } from '@/environments/sourceControl/sourceControlPreferences.service.ee';
+import type { ImportResult } from '@/environments/source-control/types/import-result';
+import { SourceControlService } from '@/environments/source-control/source-control.service.ee';
+import { SourceControlPreferencesService } from '@/environments/source-control/source-control-preferences.service.ee';
 import {
 	getTrackingInformationFromPullResult,
 	isSourceControlLicensed,
-} from '@/environments/sourceControl/sourceControlHelper.ee';
+} from '@/environments/source-control/source-control-helper.ee';
 import { EventService } from '@/events/event.service';
 
 export = {
diff --git a/packages/cli/src/__tests__/workflow-execute-additional-data.test.ts b/packages/cli/src/__tests__/workflow-execute-additional-data.test.ts
index f51d994493cc4..5bd84bf88ff84 100644
--- a/packages/cli/src/__tests__/workflow-execute-additional-data.test.ts
+++ b/packages/cli/src/__tests__/workflow-execute-additional-data.test.ts
@@ -1,6 +1,6 @@
 import { VariablesService } from '@/environments/variables/variables.service.ee';
 import { mockInstance } from '@test/mocking';
-import { MessageEventBus } from '@/eventbus/MessageEventBus/MessageEventBus';
+import { MessageEventBus } from '@/eventbus/message-event-bus/message-event-bus';
 import { getBase } from '@/workflow-execute-additional-data';
 import Container from 'typedi';
 import { CredentialsHelper } from '@/credentials-helper';
diff --git a/packages/cli/src/commands/start.ts b/packages/cli/src/commands/start.ts
index 96e3849860c1f..cc8ea6fa93df2 100644
--- a/packages/cli/src/commands/start.ts
+++ b/packages/cli/src/commands/start.ts
@@ -15,7 +15,7 @@ import { ActiveExecutions } from '@/active-executions';
 import { ActiveWorkflowManager } from '@/active-workflow-manager';
 import { Server } from '@/server';
 import { EDITOR_UI_DIST_DIR, LICENSE_FEATURES } from '@/constants';
-import { MessageEventBus } from '@/eventbus/MessageEventBus/MessageEventBus';
+import { MessageEventBus } from '@/eventbus/message-event-bus/message-event-bus';
 import { License } from '@/license';
 import { OrchestrationService } from '@/services/orchestration.service';
 import { OrchestrationHandlerMainService } from '@/services/orchestration/main/orchestration.handler.main.service';
diff --git a/packages/cli/src/commands/worker.ts b/packages/cli/src/commands/worker.ts
index 594b2f56683a5..05062ac78a1c3 100644
--- a/packages/cli/src/commands/worker.ts
+++ b/packages/cli/src/commands/worker.ts
@@ -12,9 +12,9 @@ import { N8N_VERSION, inTest } from '@/constants';
 import type { ICredentialsOverwrite } from '@/Interfaces';
 import { CredentialsOverwrites } from '@/credentials-overwrites';
 import { rawBodyReader, bodyParser } from '@/middlewares';
-import { MessageEventBus } from '@/eventbus/MessageEventBus/MessageEventBus';
+import { MessageEventBus } from '@/eventbus/message-event-bus/message-event-bus';
 import type { RedisServicePubSubSubscriber } from '@/services/redis/RedisServicePubSubSubscriber';
-import { EventMessageGeneric } from '@/eventbus/EventMessageClasses/EventMessageGeneric';
+import { EventMessageGeneric } from '@/eventbus/event-message-classes/event-message-generic';
 import { OrchestrationHandlerWorkerService } from '@/services/orchestration/worker/orchestration.handler.worker.service';
 import { OrchestrationWorkerService } from '@/services/orchestration/worker/orchestration.worker.service';
 import { ServiceUnavailableError } from '@/errors/response-errors/service-unavailable.error';
diff --git a/packages/cli/src/controllers/e2e.controller.ts b/packages/cli/src/controllers/e2e.controller.ts
index 6d8eb88fedeca..966221021b51b 100644
--- a/packages/cli/src/controllers/e2e.controller.ts
+++ b/packages/cli/src/controllers/e2e.controller.ts
@@ -4,7 +4,7 @@ import config from '@/config';
 import { SettingsRepository } from '@db/repositories/settings.repository';
 import { UserRepository } from '@db/repositories/user.repository';
 import { ActiveWorkflowManager } from '@/active-workflow-manager';
-import { MessageEventBus } from '@/eventbus/MessageEventBus/MessageEventBus';
+import { MessageEventBus } from '@/eventbus/message-event-bus/message-event-bus';
 import { License } from '@/license';
 import { LICENSE_FEATURES, LICENSE_QUOTAS, UNLIMITED_LICENSE_QUOTA, inE2ETests } from '@/constants';
 import { Patch, Post, RestController } from '@/decorators';
diff --git a/packages/cli/src/environments/sourceControl/__tests__/source-control-export.service.test.ts b/packages/cli/src/environments/source-control/__tests__/source-control-export.service.test.ts
similarity index 93%
rename from packages/cli/src/environments/sourceControl/__tests__/source-control-export.service.test.ts
rename to packages/cli/src/environments/source-control/__tests__/source-control-export.service.test.ts
index 7746875f6386e..77f56d4d964e4 100644
--- a/packages/cli/src/environments/sourceControl/__tests__/source-control-export.service.test.ts
+++ b/packages/cli/src/environments/source-control/__tests__/source-control-export.service.test.ts
@@ -1,6 +1,6 @@
 import mock from 'jest-mock-extended/lib/Mock';
-import { SourceControlExportService } from '../sourceControlExport.service.ee';
-import type { SourceControlledFile } from '../types/sourceControlledFile';
+import { SourceControlExportService } from '../source-control-export.service.ee';
+import type { SourceControlledFile } from '../types/source-controlled-file';
 import { Cipher, type InstanceSettings } from 'n8n-core';
 import { SharedCredentialsRepository } from '@/databases/repositories/sharedCredentials.repository';
 import { mockInstance } from '@test/mocking';
diff --git a/packages/cli/src/environments/sourceControl/__tests__/source-control-git.service.test.ts b/packages/cli/src/environments/source-control/__tests__/source-control-git.service.test.ts
similarity index 91%
rename from packages/cli/src/environments/sourceControl/__tests__/source-control-git.service.test.ts
rename to packages/cli/src/environments/source-control/__tests__/source-control-git.service.test.ts
index 145ebe40c048d..dc5ddfbedb97c 100644
--- a/packages/cli/src/environments/sourceControl/__tests__/source-control-git.service.test.ts
+++ b/packages/cli/src/environments/source-control/__tests__/source-control-git.service.test.ts
@@ -1,5 +1,5 @@
 import { mock } from 'jest-mock-extended';
-import { SourceControlGitService } from '../sourceControlGit.service.ee';
+import { SourceControlGitService } from '../source-control-git.service.ee';
 import { simpleGit } from 'simple-git';
 
 const MOCK_BRANCHES = {
diff --git a/packages/cli/src/environments/sourceControl/__tests__/sourceControlHelper.ee.test.ts b/packages/cli/src/environments/source-control/__tests__/source-control-helper.ee.test.ts
similarity index 96%
rename from packages/cli/src/environments/sourceControl/__tests__/sourceControlHelper.ee.test.ts
rename to packages/cli/src/environments/source-control/__tests__/source-control-helper.ee.test.ts
index 8b81bec7b2fde..3009101b5c3b0 100644
--- a/packages/cli/src/environments/sourceControl/__tests__/sourceControlHelper.ee.test.ts
+++ b/packages/cli/src/environments/source-control/__tests__/source-control-helper.ee.test.ts
@@ -6,18 +6,18 @@ import {
 	getTrackingInformationFromPrePushResult,
 	getTrackingInformationFromPullResult,
 	sourceControlFoldersExistCheck,
-} from '@/environments/sourceControl/sourceControlHelper.ee';
+} from '@/environments/source-control/source-control-helper.ee';
 import { License } from '@/license';
-import { SourceControlPreferencesService } from '@/environments/sourceControl/sourceControlPreferences.service.ee';
+import { SourceControlPreferencesService } from '@/environments/source-control/source-control-preferences.service.ee';
 import { InstanceSettings } from 'n8n-core';
 import path from 'path';
 import {
 	SOURCE_CONTROL_SSH_FOLDER,
 	SOURCE_CONTROL_GIT_FOLDER,
-} from '@/environments/sourceControl/constants';
+} from '@/environments/source-control/constants';
 import { constants as fsConstants, accessSync } from 'fs';
-import type { SourceControlledFile } from '@/environments/sourceControl/types/sourceControlledFile';
-import type { SourceControlPreferences } from '@/environments/sourceControl/types/sourceControlPreferences';
+import type { SourceControlledFile } from '@/environments/source-control/types/source-controlled-file';
+import type { SourceControlPreferences } from '@/environments/source-control/types/source-control-preferences';
 import { mockInstance } from '@test/mocking';
 
 const pushResult: SourceControlledFile[] = [
diff --git a/packages/cli/src/environments/sourceControl/__tests__/sourceControlGit.service.test.ts b/packages/cli/src/environments/source-control/__tests__/sourceControlGit.service.test.ts
similarity index 88%
rename from packages/cli/src/environments/sourceControl/__tests__/sourceControlGit.service.test.ts
rename to packages/cli/src/environments/source-control/__tests__/sourceControlGit.service.test.ts
index f4a458ac3583b..519aef188b4cb 100644
--- a/packages/cli/src/environments/sourceControl/__tests__/sourceControlGit.service.test.ts
+++ b/packages/cli/src/environments/source-control/__tests__/sourceControlGit.service.test.ts
@@ -1,6 +1,6 @@
-import { SourceControlGitService } from '@/environments/sourceControl/sourceControlGit.service.ee';
+import { SourceControlGitService } from '@/environments/source-control/source-control-git.service.ee';
 import { mock } from 'jest-mock-extended';
-import type { SourceControlPreferences } from '@/environments/sourceControl/types/sourceControlPreferences';
+import type { SourceControlPreferences } from '@/environments/source-control/types/source-control-preferences';
 import type { User } from '@/databases/entities/User';
 import type { SimpleGit } from 'simple-git';
 
diff --git a/packages/cli/src/environments/sourceControl/constants.ts b/packages/cli/src/environments/source-control/constants.ts
similarity index 100%
rename from packages/cli/src/environments/sourceControl/constants.ts
rename to packages/cli/src/environments/source-control/constants.ts
diff --git a/packages/cli/src/environments/sourceControl/middleware/sourceControlEnabledMiddleware.ee.ts b/packages/cli/src/environments/source-control/middleware/source-control-enabled-middleware.ee.ts
similarity index 83%
rename from packages/cli/src/environments/sourceControl/middleware/sourceControlEnabledMiddleware.ee.ts
rename to packages/cli/src/environments/source-control/middleware/source-control-enabled-middleware.ee.ts
index cc0debe3a59fc..24317ecbe16bd 100644
--- a/packages/cli/src/environments/sourceControl/middleware/sourceControlEnabledMiddleware.ee.ts
+++ b/packages/cli/src/environments/source-control/middleware/source-control-enabled-middleware.ee.ts
@@ -1,7 +1,7 @@
 import type { RequestHandler } from 'express';
 import { Container } from 'typedi';
-import { isSourceControlLicensed } from '../sourceControlHelper.ee';
-import { SourceControlPreferencesService } from '../sourceControlPreferences.service.ee';
+import { isSourceControlLicensed } from '../source-control-helper.ee';
+import { SourceControlPreferencesService } from '../source-control-preferences.service.ee';
 
 export const sourceControlLicensedAndEnabledMiddleware: RequestHandler = (_req, res, next) => {
 	const sourceControlPreferencesService = Container.get(SourceControlPreferencesService);
diff --git a/packages/cli/src/environments/sourceControl/sourceControlExport.service.ee.ts b/packages/cli/src/environments/source-control/source-control-export.service.ee.ts
similarity index 96%
rename from packages/cli/src/environments/sourceControl/sourceControlExport.service.ee.ts
rename to packages/cli/src/environments/source-control/source-control-export.service.ee.ts
index 6d2d468e30b46..728b44c5dcce7 100644
--- a/packages/cli/src/environments/sourceControl/sourceControlExport.service.ee.ts
+++ b/packages/cli/src/environments/source-control/source-control-export.service.ee.ts
@@ -10,18 +10,18 @@ import { ApplicationError, type ICredentialDataDecryptedObject } from 'n8n-workf
 import { writeFile as fsWriteFile, rm as fsRm } from 'fs/promises';
 import { rmSync } from 'fs';
 import { Credentials, InstanceSettings } from 'n8n-core';
-import type { ExportableWorkflow } from './types/exportableWorkflow';
-import type { ExportableCredential } from './types/exportableCredential';
-import type { ExportResult } from './types/exportResult';
+import type { ExportableWorkflow } from './types/exportable-workflow';
+import type { ExportableCredential } from './types/exportable-credential';
+import type { ExportResult } from './types/export-result';
 import {
 	getCredentialExportPath,
 	getVariablesPath,
 	getWorkflowExportPath,
 	sourceControlFoldersExistCheck,
 	stringContainsExpression,
-} from './sourceControlHelper.ee';
+} from './source-control-helper.ee';
 import type { WorkflowEntity } from '@db/entities/WorkflowEntity';
-import type { SourceControlledFile } from './types/sourceControlledFile';
+import type { SourceControlledFile } from './types/source-controlled-file';
 import { VariablesService } from '../variables/variables.service.ee';
 import { TagRepository } from '@db/repositories/tag.repository';
 import { WorkflowRepository } from '@db/repositories/workflow.repository';
@@ -29,7 +29,7 @@ import { Logger } from '@/logger';
 import { SharedCredentialsRepository } from '@db/repositories/sharedCredentials.repository';
 import { SharedWorkflowRepository } from '@db/repositories/sharedWorkflow.repository';
 import { WorkflowTagMappingRepository } from '@db/repositories/workflowTagMapping.repository';
-import type { ResourceOwner } from './types/resourceOwner';
+import type { ResourceOwner } from './types/resource-owner';
 
 @Service()
 export class SourceControlExportService {
diff --git a/packages/cli/src/environments/sourceControl/sourceControlGit.service.ee.ts b/packages/cli/src/environments/source-control/source-control-git.service.ee.ts
similarity index 97%
rename from packages/cli/src/environments/sourceControl/sourceControlGit.service.ee.ts
rename to packages/cli/src/environments/source-control/source-control-git.service.ee.ts
index 91220340b7a15..134aab9fd69c7 100644
--- a/packages/cli/src/environments/sourceControl/sourceControlGit.service.ee.ts
+++ b/packages/cli/src/environments/source-control/source-control-git.service.ee.ts
@@ -11,19 +11,19 @@ import type {
 	SimpleGitOptions,
 	StatusResult,
 } from 'simple-git';
-import type { SourceControlPreferences } from './types/sourceControlPreferences';
+import type { SourceControlPreferences } from './types/source-control-preferences';
 import {
 	SOURCE_CONTROL_DEFAULT_BRANCH,
 	SOURCE_CONTROL_DEFAULT_EMAIL,
 	SOURCE_CONTROL_DEFAULT_NAME,
 	SOURCE_CONTROL_ORIGIN,
 } from './constants';
-import { sourceControlFoldersExistCheck } from './sourceControlHelper.ee';
+import { sourceControlFoldersExistCheck } from './source-control-helper.ee';
 import type { User } from '@db/entities/User';
 import { Logger } from '@/logger';
 import { ApplicationError } from 'n8n-workflow';
 import { OwnershipService } from '@/services/ownership.service';
-import { SourceControlPreferencesService } from './sourceControlPreferences.service.ee';
+import { SourceControlPreferencesService } from './source-control-preferences.service.ee';
 
 @Service()
 export class SourceControlGitService {
diff --git a/packages/cli/src/environments/sourceControl/sourceControlHelper.ee.ts b/packages/cli/src/environments/source-control/source-control-helper.ee.ts
similarity index 96%
rename from packages/cli/src/environments/sourceControl/sourceControlHelper.ee.ts
rename to packages/cli/src/environments/source-control/source-control-helper.ee.ts
index 65cd88bfa57ba..738f4212f50e6 100644
--- a/packages/cli/src/environments/sourceControl/sourceControlHelper.ee.ts
+++ b/packages/cli/src/environments/source-control/source-control-helper.ee.ts
@@ -1,16 +1,16 @@
 import { Container } from 'typedi';
 import { License } from '@/license';
 import { generateKeyPairSync } from 'crypto';
-import type { KeyPair } from './types/keyPair';
+import type { KeyPair } from './types/key-pair';
 import { constants as fsConstants, mkdirSync, accessSync } from 'fs';
 import {
 	SOURCE_CONTROL_GIT_KEY_COMMENT,
 	SOURCE_CONTROL_TAGS_EXPORT_FILE,
 	SOURCE_CONTROL_VARIABLES_EXPORT_FILE,
 } from './constants';
-import type { SourceControlledFile } from './types/sourceControlledFile';
+import type { SourceControlledFile } from './types/source-controlled-file';
 import path from 'path';
-import type { KeyPairType } from './types/keyPairType';
+import type { KeyPairType } from './types/key-pair-type';
 import { Logger } from '@/logger';
 
 export function stringContainsExpression(testString: string): boolean {
diff --git a/packages/cli/src/environments/sourceControl/sourceControlImport.service.ee.ts b/packages/cli/src/environments/source-control/source-control-import.service.ee.ts
similarity index 98%
rename from packages/cli/src/environments/sourceControl/sourceControlImport.service.ee.ts
rename to packages/cli/src/environments/source-control/source-control-import.service.ee.ts
index bd04937bc1737..05ce8a0687af0 100644
--- a/packages/cli/src/environments/sourceControl/sourceControlImport.service.ee.ts
+++ b/packages/cli/src/environments/source-control/source-control-import.service.ee.ts
@@ -12,7 +12,7 @@ import { ApplicationError, jsonParse, ErrorReporterProxy as ErrorReporter } from
 import { readFile as fsReadFile } from 'fs/promises';
 import { Credentials, InstanceSettings } from 'n8n-core';
 import type { IWorkflowToImport } from '@/Interfaces';
-import type { ExportableCredential } from './types/exportableCredential';
+import type { ExportableCredential } from './types/exportable-credential';
 import type { Variables } from '@db/entities/Variables';
 import { SharedCredentials } from '@db/entities/SharedCredentials';
 import type { WorkflowTagMapping } from '@db/entities/WorkflowTagMapping';
@@ -21,9 +21,9 @@ import { ActiveWorkflowManager } from '@/active-workflow-manager';
 // eslint-disable-next-line n8n-local-rules/misplaced-n8n-typeorm-import
 import { In } from '@n8n/typeorm';
 import { isUniqueConstraintError } from '@/response-helper';
-import type { SourceControlWorkflowVersionId } from './types/sourceControlWorkflowVersionId';
-import { getCredentialExportPath, getWorkflowExportPath } from './sourceControlHelper.ee';
-import type { SourceControlledFile } from './types/sourceControlledFile';
+import type { SourceControlWorkflowVersionId } from './types/source-control-workflow-version-id';
+import { getCredentialExportPath, getWorkflowExportPath } from './source-control-helper.ee';
+import type { SourceControlledFile } from './types/source-controlled-file';
 import { VariablesService } from '../variables/variables.service.ee';
 import { TagRepository } from '@db/repositories/tag.repository';
 import { WorkflowRepository } from '@db/repositories/workflow.repository';
@@ -35,7 +35,7 @@ import { WorkflowTagMappingRepository } from '@db/repositories/workflowTagMappin
 import { VariablesRepository } from '@db/repositories/variables.repository';
 import { ProjectRepository } from '@/databases/repositories/project.repository';
 import type { Project } from '@/databases/entities/Project';
-import type { ResourceOwner } from './types/resourceOwner';
+import type { ResourceOwner } from './types/resource-owner';
 import { assertNever } from '@/utils';
 import { UserRepository } from '@/databases/repositories/user.repository';
 
diff --git a/packages/cli/src/environments/sourceControl/sourceControlPreferences.service.ee.ts b/packages/cli/src/environments/source-control/source-control-preferences.service.ee.ts
similarity index 97%
rename from packages/cli/src/environments/sourceControl/sourceControlPreferences.service.ee.ts
rename to packages/cli/src/environments/source-control/source-control-preferences.service.ee.ts
index 52a2f6192d84e..4e417704416f0 100644
--- a/packages/cli/src/environments/sourceControl/sourceControlPreferences.service.ee.ts
+++ b/packages/cli/src/environments/source-control/source-control-preferences.service.ee.ts
@@ -1,10 +1,10 @@
 import { writeFile, chmod, readFile } from 'node:fs/promises';
 import Container, { Service } from 'typedi';
-import { SourceControlPreferences } from './types/sourceControlPreferences';
+import { SourceControlPreferences } from './types/source-control-preferences';
 import type { ValidationError } from 'class-validator';
 import { validate } from 'class-validator';
 import { rm as fsRm } from 'fs/promises';
-import { generateSshKeyPair, isSourceControlLicensed } from './sourceControlHelper.ee';
+import { generateSshKeyPair, isSourceControlLicensed } from './source-control-helper.ee';
 import { Cipher, InstanceSettings } from 'n8n-core';
 import { ApplicationError, jsonParse } from 'n8n-workflow';
 import {
@@ -14,7 +14,7 @@ import {
 	SOURCE_CONTROL_PREFERENCES_DB_KEY,
 } from './constants';
 import path from 'path';
-import type { KeyPairType } from './types/keyPairType';
+import type { KeyPairType } from './types/key-pair-type';
 import config from '@/config';
 import { Logger } from '@/logger';
 import { SettingsRepository } from '@db/repositories/settings.repository';
diff --git a/packages/cli/src/environments/sourceControl/sourceControl.controller.ee.ts b/packages/cli/src/environments/source-control/source-control.controller.ee.ts
similarity index 93%
rename from packages/cli/src/environments/sourceControl/sourceControl.controller.ee.ts
rename to packages/cli/src/environments/source-control/source-control.controller.ee.ts
index f92b0bfb1f02f..d927ee2a9bd00 100644
--- a/packages/cli/src/environments/sourceControl/sourceControl.controller.ee.ts
+++ b/packages/cli/src/environments/source-control/source-control.controller.ee.ts
@@ -4,17 +4,17 @@ import { Get, Post, Patch, RestController, GlobalScope } from '@/decorators';
 import {
 	sourceControlLicensedMiddleware,
 	sourceControlLicensedAndEnabledMiddleware,
-} from './middleware/sourceControlEnabledMiddleware.ee';
-import { SourceControlService } from './sourceControl.service.ee';
+} from './middleware/source-control-enabled-middleware.ee';
+import { SourceControlService } from './source-control.service.ee';
 import { SourceControlRequest } from './types/requests';
-import { SourceControlPreferencesService } from './sourceControlPreferences.service.ee';
-import type { SourceControlPreferences } from './types/sourceControlPreferences';
-import type { SourceControlledFile } from './types/sourceControlledFile';
+import { SourceControlPreferencesService } from './source-control-preferences.service.ee';
+import type { SourceControlPreferences } from './types/source-control-preferences';
+import type { SourceControlledFile } from './types/source-controlled-file';
 import { SOURCE_CONTROL_DEFAULT_BRANCH } from './constants';
-import type { ImportResult } from './types/importResult';
+import type { ImportResult } from './types/import-result';
 import { EventService } from '@/events/event.service';
-import { getRepoType } from './sourceControlHelper.ee';
-import { SourceControlGetStatus } from './types/sourceControlGetStatus';
+import { getRepoType } from './source-control-helper.ee';
+import { SourceControlGetStatus } from './types/source-control-get-status';
 import { BadRequestError } from '@/errors/response-errors/bad-request.error';
 
 @RestController('/source-control')
diff --git a/packages/cli/src/environments/sourceControl/sourceControl.service.ee.ts b/packages/cli/src/environments/source-control/source-control.service.ee.ts
similarity index 96%
rename from packages/cli/src/environments/sourceControl/sourceControl.service.ee.ts
rename to packages/cli/src/environments/source-control/source-control.service.ee.ts
index 375352e4cc78f..d264e1f75a6ed 100644
--- a/packages/cli/src/environments/sourceControl/sourceControl.service.ee.ts
+++ b/packages/cli/src/environments/source-control/source-control.service.ee.ts
@@ -7,29 +7,29 @@ import {
 	getTrackingInformationFromPullResult,
 	getVariablesPath,
 	sourceControlFoldersExistCheck,
-} from './sourceControlHelper.ee';
-import type { SourceControlPreferences } from './types/sourceControlPreferences';
+} from './source-control-helper.ee';
+import type { SourceControlPreferences } from './types/source-control-preferences';
 import {
 	SOURCE_CONTROL_DEFAULT_EMAIL,
 	SOURCE_CONTROL_DEFAULT_NAME,
 	SOURCE_CONTROL_README,
 } from './constants';
-import { SourceControlGitService } from './sourceControlGit.service.ee';
+import { SourceControlGitService } from './source-control-git.service.ee';
 import type { PushResult } from 'simple-git';
-import { SourceControlExportService } from './sourceControlExport.service.ee';
-import type { ImportResult } from './types/importResult';
-import type { SourceControlPushWorkFolder } from './types/sourceControlPushWorkFolder';
-import type { SourceControllPullOptions } from './types/sourceControlPullWorkFolder';
-import type { SourceControlledFile } from './types/sourceControlledFile';
-import { SourceControlPreferencesService } from './sourceControlPreferences.service.ee';
+import { SourceControlExportService } from './source-control-export.service.ee';
+import type { ImportResult } from './types/import-result';
+import type { SourceControlPushWorkFolder } from './types/source-control-push-work-folder';
+import type { SourceControllPullOptions } from './types/source-control-pull-work-folder';
+import type { SourceControlledFile } from './types/source-controlled-file';
+import { SourceControlPreferencesService } from './source-control-preferences.service.ee';
 import { writeFileSync } from 'fs';
-import { SourceControlImportService } from './sourceControlImport.service.ee';
+import { SourceControlImportService } from './source-control-import.service.ee';
 import type { User } from '@db/entities/User';
-import type { SourceControlGetStatus } from './types/sourceControlGetStatus';
+import type { SourceControlGetStatus } from './types/source-control-get-status';
 import type { TagEntity } from '@db/entities/TagEntity';
 import type { Variables } from '@db/entities/Variables';
-import type { SourceControlWorkflowVersionId } from './types/sourceControlWorkflowVersionId';
-import type { ExportableCredential } from './types/exportableCredential';
+import type { SourceControlWorkflowVersionId } from './types/source-control-workflow-version-id';
+import type { ExportableCredential } from './types/exportable-credential';
 import { EventService } from '@/events/event.service';
 import { TagRepository } from '@db/repositories/tag.repository';
 import { Logger } from '@/logger';
diff --git a/packages/cli/src/environments/sourceControl/types/exportResult.ts b/packages/cli/src/environments/source-control/types/export-result.ts
similarity index 100%
rename from packages/cli/src/environments/sourceControl/types/exportResult.ts
rename to packages/cli/src/environments/source-control/types/export-result.ts
diff --git a/packages/cli/src/environments/sourceControl/types/exportableCredential.ts b/packages/cli/src/environments/source-control/types/exportable-credential.ts
similarity index 87%
rename from packages/cli/src/environments/sourceControl/types/exportableCredential.ts
rename to packages/cli/src/environments/source-control/types/exportable-credential.ts
index 7ef071117f49b..a15f5b4890ec2 100644
--- a/packages/cli/src/environments/sourceControl/types/exportableCredential.ts
+++ b/packages/cli/src/environments/source-control/types/exportable-credential.ts
@@ -1,5 +1,5 @@
 import type { ICredentialDataDecryptedObject } from 'n8n-workflow';
-import type { ResourceOwner } from './resourceOwner';
+import type { ResourceOwner } from './resource-owner';
 
 export interface ExportableCredential {
 	id: string;
diff --git a/packages/cli/src/environments/sourceControl/types/exportableWorkflow.ts b/packages/cli/src/environments/source-control/types/exportable-workflow.ts
similarity index 83%
rename from packages/cli/src/environments/sourceControl/types/exportableWorkflow.ts
rename to packages/cli/src/environments/source-control/types/exportable-workflow.ts
index a0803bce87e27..56cec13537d0f 100644
--- a/packages/cli/src/environments/sourceControl/types/exportableWorkflow.ts
+++ b/packages/cli/src/environments/source-control/types/exportable-workflow.ts
@@ -1,5 +1,5 @@
 import type { INode, IConnections, IWorkflowSettings } from 'n8n-workflow';
-import type { ResourceOwner } from './resourceOwner';
+import type { ResourceOwner } from './resource-owner';
 
 export interface ExportableWorkflow {
 	id: string;
diff --git a/packages/cli/src/environments/sourceControl/types/importResult.ts b/packages/cli/src/environments/source-control/types/import-result.ts
similarity index 100%
rename from packages/cli/src/environments/sourceControl/types/importResult.ts
rename to packages/cli/src/environments/source-control/types/import-result.ts
diff --git a/packages/cli/src/environments/sourceControl/types/keyPairType.ts b/packages/cli/src/environments/source-control/types/key-pair-type.ts
similarity index 100%
rename from packages/cli/src/environments/sourceControl/types/keyPairType.ts
rename to packages/cli/src/environments/source-control/types/key-pair-type.ts
diff --git a/packages/cli/src/environments/sourceControl/types/keyPair.ts b/packages/cli/src/environments/source-control/types/key-pair.ts
similarity index 100%
rename from packages/cli/src/environments/sourceControl/types/keyPair.ts
rename to packages/cli/src/environments/source-control/types/key-pair.ts
diff --git a/packages/cli/src/environments/sourceControl/types/requests.ts b/packages/cli/src/environments/source-control/types/requests.ts
similarity index 53%
rename from packages/cli/src/environments/sourceControl/types/requests.ts
rename to packages/cli/src/environments/source-control/types/requests.ts
index e48cf94681622..5855b0af4ba04 100644
--- a/packages/cli/src/environments/sourceControl/types/requests.ts
+++ b/packages/cli/src/environments/source-control/types/requests.ts
@@ -1,15 +1,15 @@
 import type { AuthenticatedRequest } from '@/requests';
-import type { SourceControlPreferences } from './sourceControlPreferences';
-import type { SourceControlSetBranch } from './sourceControlSetBranch';
-import type { SourceControlCommit } from './sourceControlCommit';
-import type { SourceControlStage } from './sourceControlStage';
-import type { SourceControlPush } from './sourceControlPush';
-import type { SourceControlPushWorkFolder } from './sourceControlPushWorkFolder';
-import type { SourceControlPullWorkFolder } from './sourceControlPullWorkFolder';
-import type { SourceControlDisconnect } from './sourceControlDisconnect';
-import type { SourceControlSetReadOnly } from './sourceControlSetReadOnly';
-import type { SourceControlGetStatus } from './sourceControlGetStatus';
-import type { SourceControlGenerateKeyPair } from './sourceControlGenerateKeyPair';
+import type { SourceControlPreferences } from './source-control-preferences';
+import type { SourceControlSetBranch } from './source-control-set-branch';
+import type { SourceControlCommit } from './source-control-commit';
+import type { SourceControlStage } from './source-control-stage';
+import type { SourceControlPush } from './source-control-push';
+import type { SourceControlPushWorkFolder } from './source-control-push-work-folder';
+import type { SourceControlPullWorkFolder } from './source-control-pull-work-folder';
+import type { SourceControlDisconnect } from './source-control-disconnect';
+import type { SourceControlSetReadOnly } from './source-control-set-read-only';
+import type { SourceControlGetStatus } from './source-control-get-status';
+import type { SourceControlGenerateKeyPair } from './source-control-generate-key-pair';
 
 export declare namespace SourceControlRequest {
 	type UpdatePreferences = AuthenticatedRequest<{}, {}, Partial<SourceControlPreferences>, {}>;
diff --git a/packages/cli/src/environments/sourceControl/types/resourceOwner.ts b/packages/cli/src/environments/source-control/types/resource-owner.ts
similarity index 100%
rename from packages/cli/src/environments/sourceControl/types/resourceOwner.ts
rename to packages/cli/src/environments/source-control/types/resource-owner.ts
diff --git a/packages/cli/src/environments/sourceControl/types/sourceControlCommit.ts b/packages/cli/src/environments/source-control/types/source-control-commit.ts
similarity index 100%
rename from packages/cli/src/environments/sourceControl/types/sourceControlCommit.ts
rename to packages/cli/src/environments/source-control/types/source-control-commit.ts
diff --git a/packages/cli/src/environments/sourceControl/types/sourceControlDisconnect.ts b/packages/cli/src/environments/source-control/types/source-control-disconnect.ts
similarity index 100%
rename from packages/cli/src/environments/sourceControl/types/sourceControlDisconnect.ts
rename to packages/cli/src/environments/source-control/types/source-control-disconnect.ts
diff --git a/packages/cli/src/environments/sourceControl/types/sourceControlGenerateKeyPair.ts b/packages/cli/src/environments/source-control/types/source-control-generate-key-pair.ts
similarity index 78%
rename from packages/cli/src/environments/sourceControl/types/sourceControlGenerateKeyPair.ts
rename to packages/cli/src/environments/source-control/types/source-control-generate-key-pair.ts
index c625b1eb2bc52..9f9093b432ba5 100644
--- a/packages/cli/src/environments/sourceControl/types/sourceControlGenerateKeyPair.ts
+++ b/packages/cli/src/environments/source-control/types/source-control-generate-key-pair.ts
@@ -1,5 +1,5 @@
 import { IsOptional, IsString } from 'class-validator';
-import { KeyPairType } from './keyPairType';
+import { KeyPairType } from './key-pair-type';
 
 export class SourceControlGenerateKeyPair {
 	@IsOptional()
diff --git a/packages/cli/src/environments/sourceControl/types/sourceControlGetStatus.ts b/packages/cli/src/environments/source-control/types/source-control-get-status.ts
similarity index 100%
rename from packages/cli/src/environments/sourceControl/types/sourceControlGetStatus.ts
rename to packages/cli/src/environments/source-control/types/source-control-get-status.ts
diff --git a/packages/cli/src/environments/sourceControl/types/sourceControlPreferences.ts b/packages/cli/src/environments/source-control/types/source-control-preferences.ts
similarity index 96%
rename from packages/cli/src/environments/sourceControl/types/sourceControlPreferences.ts
rename to packages/cli/src/environments/source-control/types/source-control-preferences.ts
index 9b5c3a25ca1dc..ecda479ef6cda 100644
--- a/packages/cli/src/environments/sourceControl/types/sourceControlPreferences.ts
+++ b/packages/cli/src/environments/source-control/types/source-control-preferences.ts
@@ -1,5 +1,5 @@
 import { IsBoolean, IsHexColor, IsOptional, IsString } from 'class-validator';
-import { KeyPairType } from './keyPairType';
+import { KeyPairType } from './key-pair-type';
 
 export class SourceControlPreferences {
 	constructor(preferences: Partial<SourceControlPreferences> | undefined = undefined) {
diff --git a/packages/cli/src/environments/sourceControl/types/sourceControlPullWorkFolder.ts b/packages/cli/src/environments/source-control/types/source-control-pull-work-folder.ts
similarity index 100%
rename from packages/cli/src/environments/sourceControl/types/sourceControlPullWorkFolder.ts
rename to packages/cli/src/environments/source-control/types/source-control-pull-work-folder.ts
diff --git a/packages/cli/src/environments/sourceControl/types/sourceControlPushWorkFolder.ts b/packages/cli/src/environments/source-control/types/source-control-push-work-folder.ts
similarity index 82%
rename from packages/cli/src/environments/sourceControl/types/sourceControlPushWorkFolder.ts
rename to packages/cli/src/environments/source-control/types/source-control-push-work-folder.ts
index a6b23025d87aa..20299a013913d 100644
--- a/packages/cli/src/environments/sourceControl/types/sourceControlPushWorkFolder.ts
+++ b/packages/cli/src/environments/source-control/types/source-control-push-work-folder.ts
@@ -1,5 +1,5 @@
 import { IsBoolean, IsOptional, IsString } from 'class-validator';
-import type { SourceControlledFile } from './sourceControlledFile';
+import type { SourceControlledFile } from './source-controlled-file';
 
 export class SourceControlPushWorkFolder {
 	@IsBoolean()
diff --git a/packages/cli/src/environments/sourceControl/types/sourceControlPush.ts b/packages/cli/src/environments/source-control/types/source-control-push.ts
similarity index 100%
rename from packages/cli/src/environments/sourceControl/types/sourceControlPush.ts
rename to packages/cli/src/environments/source-control/types/source-control-push.ts
diff --git a/packages/cli/src/environments/sourceControl/types/sourceControlSetBranch.ts b/packages/cli/src/environments/source-control/types/source-control-set-branch.ts
similarity index 100%
rename from packages/cli/src/environments/sourceControl/types/sourceControlSetBranch.ts
rename to packages/cli/src/environments/source-control/types/source-control-set-branch.ts
diff --git a/packages/cli/src/environments/sourceControl/types/sourceControlSetReadOnly.ts b/packages/cli/src/environments/source-control/types/source-control-set-read-only.ts
similarity index 100%
rename from packages/cli/src/environments/sourceControl/types/sourceControlSetReadOnly.ts
rename to packages/cli/src/environments/source-control/types/source-control-set-read-only.ts
diff --git a/packages/cli/src/environments/sourceControl/types/sourceControlStage.ts b/packages/cli/src/environments/source-control/types/source-control-stage.ts
similarity index 100%
rename from packages/cli/src/environments/sourceControl/types/sourceControlStage.ts
rename to packages/cli/src/environments/source-control/types/source-control-stage.ts
diff --git a/packages/cli/src/environments/sourceControl/types/sourceControlWorkflowVersionId.ts b/packages/cli/src/environments/source-control/types/source-control-workflow-version-id.ts
similarity index 100%
rename from packages/cli/src/environments/sourceControl/types/sourceControlWorkflowVersionId.ts
rename to packages/cli/src/environments/source-control/types/source-control-workflow-version-id.ts
diff --git a/packages/cli/src/environments/sourceControl/types/sourceControlledFile.ts b/packages/cli/src/environments/source-control/types/source-controlled-file.ts
similarity index 100%
rename from packages/cli/src/environments/sourceControl/types/sourceControlledFile.ts
rename to packages/cli/src/environments/source-control/types/source-controlled-file.ts
diff --git a/packages/cli/src/environments/variables/environmentHelpers.ts b/packages/cli/src/environments/variables/environment-helpers.ts
similarity index 100%
rename from packages/cli/src/environments/variables/environmentHelpers.ts
rename to packages/cli/src/environments/variables/environment-helpers.ts
diff --git a/packages/cli/src/environments/variables/variables.service.ee.ts b/packages/cli/src/environments/variables/variables.service.ee.ts
index 78a3d23fbe55d..768a9fa4565e7 100644
--- a/packages/cli/src/environments/variables/variables.service.ee.ts
+++ b/packages/cli/src/environments/variables/variables.service.ee.ts
@@ -1,7 +1,7 @@
 import { Container, Service } from 'typedi';
 import type { Variables } from '@db/entities/Variables';
 import { generateNanoId } from '@db/utils/generators';
-import { canCreateNewVariable } from './environmentHelpers';
+import { canCreateNewVariable } from './environment-helpers';
 import { CacheService } from '@/services/cache/cache.service';
 import { VariablesRepository } from '@db/repositories/variables.repository';
 import { VariableCountLimitReachedError } from '@/errors/variable-count-limit-reached.error';
diff --git a/packages/cli/src/eventbus/EventMessageClasses/AbstractEventMessageOptions.ts b/packages/cli/src/eventbus/event-message-classes/abstract-event-message-options.ts
similarity index 83%
rename from packages/cli/src/eventbus/EventMessageClasses/AbstractEventMessageOptions.ts
rename to packages/cli/src/eventbus/event-message-classes/abstract-event-message-options.ts
index 95f3ef6432a2e..7c70aa9ee5ad3 100644
--- a/packages/cli/src/eventbus/EventMessageClasses/AbstractEventMessageOptions.ts
+++ b/packages/cli/src/eventbus/event-message-classes/abstract-event-message-options.ts
@@ -1,7 +1,7 @@
 import type { DateTime } from 'luxon';
 import type { EventMessageTypeNames } from 'n8n-workflow';
 import type { EventNamesTypes } from '.';
-import type { AbstractEventPayload } from './AbstractEventPayload';
+import type { AbstractEventPayload } from './abstract-event-payload';
 
 export interface AbstractEventMessageOptions {
 	__type?: EventMessageTypeNames;
diff --git a/packages/cli/src/eventbus/EventMessageClasses/AbstractEventMessage.ts b/packages/cli/src/eventbus/event-message-classes/abstract-event-message.ts
similarity index 96%
rename from packages/cli/src/eventbus/EventMessageClasses/AbstractEventMessage.ts
rename to packages/cli/src/eventbus/event-message-classes/abstract-event-message.ts
index f71b03a413755..e74ba8c06a40a 100644
--- a/packages/cli/src/eventbus/EventMessageClasses/AbstractEventMessage.ts
+++ b/packages/cli/src/eventbus/event-message-classes/abstract-event-message.ts
@@ -2,8 +2,8 @@
 import { DateTime } from 'luxon';
 import type { EventMessageTypeNames, JsonObject } from 'n8n-workflow';
 import { v4 as uuid } from 'uuid';
-import type { AbstractEventPayload } from './AbstractEventPayload';
-import type { AbstractEventMessageOptions } from './AbstractEventMessageOptions';
+import type { AbstractEventPayload } from './abstract-event-payload';
+import type { AbstractEventMessageOptions } from './abstract-event-message-options';
 import type { EventNamesTypes } from '.';
 
 function modifyUnderscoredKeys(
diff --git a/packages/cli/src/eventbus/EventMessageClasses/AbstractEventPayload.ts b/packages/cli/src/eventbus/event-message-classes/abstract-event-payload.ts
similarity index 100%
rename from packages/cli/src/eventbus/EventMessageClasses/AbstractEventPayload.ts
rename to packages/cli/src/eventbus/event-message-classes/abstract-event-payload.ts
diff --git a/packages/cli/src/eventbus/EventMessageClasses/EventMessageAiNode.ts b/packages/cli/src/eventbus/event-message-classes/event-message-ai-node.ts
similarity index 87%
rename from packages/cli/src/eventbus/EventMessageClasses/EventMessageAiNode.ts
rename to packages/cli/src/eventbus/event-message-classes/event-message-ai-node.ts
index 44d9feafbde14..b1ee96099373c 100644
--- a/packages/cli/src/eventbus/EventMessageClasses/EventMessageAiNode.ts
+++ b/packages/cli/src/eventbus/event-message-classes/event-message-ai-node.ts
@@ -1,8 +1,8 @@
-import { AbstractEventMessage, isEventMessageOptionsWithType } from './AbstractEventMessage';
+import { AbstractEventMessage, isEventMessageOptionsWithType } from './abstract-event-message';
 import type { EventNamesAiNodesType, JsonObject } from 'n8n-workflow';
 import { EventMessageTypeNames } from 'n8n-workflow';
-import type { AbstractEventMessageOptions } from './AbstractEventMessageOptions';
-import type { AbstractEventPayload } from './AbstractEventPayload';
+import type { AbstractEventMessageOptions } from './abstract-event-message-options';
+import type { AbstractEventPayload } from './abstract-event-payload';
 
 // --------------------------------------
 // EventMessage class for Node events
diff --git a/packages/cli/src/eventbus/EventMessageClasses/EventMessageAudit.ts b/packages/cli/src/eventbus/event-message-classes/event-message-audit.ts
similarity index 88%
rename from packages/cli/src/eventbus/EventMessageClasses/EventMessageAudit.ts
rename to packages/cli/src/eventbus/event-message-classes/event-message-audit.ts
index 737a1ebf0a2e1..4ae0fa485d85b 100644
--- a/packages/cli/src/eventbus/EventMessageClasses/EventMessageAudit.ts
+++ b/packages/cli/src/eventbus/event-message-classes/event-message-audit.ts
@@ -1,8 +1,8 @@
-import { AbstractEventMessage, isEventMessageOptionsWithType } from './AbstractEventMessage';
+import { AbstractEventMessage, isEventMessageOptionsWithType } from './abstract-event-message';
 import { EventMessageTypeNames } from 'n8n-workflow';
 import type { JsonObject, JsonValue } from 'n8n-workflow';
-import type { AbstractEventPayload } from './AbstractEventPayload';
-import type { AbstractEventMessageOptions } from './AbstractEventMessageOptions';
+import type { AbstractEventPayload } from './abstract-event-payload';
+import type { AbstractEventMessageOptions } from './abstract-event-message-options';
 import type { EventNamesAuditType } from '.';
 
 // --------------------------------------
diff --git a/packages/cli/src/eventbus/EventMessageClasses/EventMessageConfirm.ts b/packages/cli/src/eventbus/event-message-classes/event-message-confirm.ts
similarity index 100%
rename from packages/cli/src/eventbus/EventMessageClasses/EventMessageConfirm.ts
rename to packages/cli/src/eventbus/event-message-classes/event-message-confirm.ts
diff --git a/packages/cli/src/eventbus/EventMessageClasses/EventMessageExecution.ts b/packages/cli/src/eventbus/event-message-classes/event-message-execution.ts
similarity index 86%
rename from packages/cli/src/eventbus/EventMessageClasses/EventMessageExecution.ts
rename to packages/cli/src/eventbus/event-message-classes/event-message-execution.ts
index 9a8864c7f0b76..e311e5354fce7 100644
--- a/packages/cli/src/eventbus/EventMessageClasses/EventMessageExecution.ts
+++ b/packages/cli/src/eventbus/event-message-classes/event-message-execution.ts
@@ -1,8 +1,8 @@
-import { AbstractEventMessage, isEventMessageOptionsWithType } from './AbstractEventMessage';
+import { AbstractEventMessage, isEventMessageOptionsWithType } from './abstract-event-message';
 import type { JsonObject } from 'n8n-workflow';
 import { EventMessageTypeNames } from 'n8n-workflow';
-import type { AbstractEventMessageOptions } from './AbstractEventMessageOptions';
-import type { AbstractEventPayload } from './AbstractEventPayload';
+import type { AbstractEventMessageOptions } from './abstract-event-message-options';
+import type { AbstractEventPayload } from './abstract-event-payload';
 import type { EventNamesExecutionType } from '.';
 
 export interface EventPayloadExecution extends AbstractEventPayload {
diff --git a/packages/cli/src/eventbus/EventMessageClasses/EventMessageGeneric.ts b/packages/cli/src/eventbus/event-message-classes/event-message-generic.ts
similarity index 85%
rename from packages/cli/src/eventbus/EventMessageClasses/EventMessageGeneric.ts
rename to packages/cli/src/eventbus/event-message-classes/event-message-generic.ts
index 0e49b33b4fd58..14d8bfb345e23 100644
--- a/packages/cli/src/eventbus/EventMessageClasses/EventMessageGeneric.ts
+++ b/packages/cli/src/eventbus/event-message-classes/event-message-generic.ts
@@ -1,8 +1,8 @@
 import type { JsonObject } from 'n8n-workflow';
 import { EventMessageTypeNames } from 'n8n-workflow';
-import { AbstractEventMessage, isEventMessageOptionsWithType } from './AbstractEventMessage';
-import type { AbstractEventPayload } from './AbstractEventPayload';
-import type { AbstractEventMessageOptions } from './AbstractEventMessageOptions';
+import { AbstractEventMessage, isEventMessageOptionsWithType } from './abstract-event-message';
+import type { AbstractEventPayload } from './abstract-event-payload';
+import type { AbstractEventMessageOptions } from './abstract-event-message-options';
 
 export const eventMessageGenericDestinationTestEvent = 'n8n.destination.test';
 
diff --git a/packages/cli/src/eventbus/EventMessageClasses/EventMessageNode.ts b/packages/cli/src/eventbus/event-message-classes/event-message-node.ts
similarity index 87%
rename from packages/cli/src/eventbus/EventMessageClasses/EventMessageNode.ts
rename to packages/cli/src/eventbus/event-message-classes/event-message-node.ts
index d9dda95e27b89..da36c2456cd78 100644
--- a/packages/cli/src/eventbus/EventMessageClasses/EventMessageNode.ts
+++ b/packages/cli/src/eventbus/event-message-classes/event-message-node.ts
@@ -1,8 +1,8 @@
-import { AbstractEventMessage, isEventMessageOptionsWithType } from './AbstractEventMessage';
+import { AbstractEventMessage, isEventMessageOptionsWithType } from './abstract-event-message';
 import type { JsonObject } from 'n8n-workflow';
 import { EventMessageTypeNames } from 'n8n-workflow';
-import type { AbstractEventMessageOptions } from './AbstractEventMessageOptions';
-import type { AbstractEventPayload } from './AbstractEventPayload';
+import type { AbstractEventMessageOptions } from './abstract-event-message-options';
+import type { AbstractEventPayload } from './abstract-event-payload';
 import type { EventNamesNodeType } from '.';
 
 // --------------------------------------
diff --git a/packages/cli/src/eventbus/EventMessageClasses/EventMessageWorkflow.ts b/packages/cli/src/eventbus/event-message-classes/event-message-workflow.ts
similarity index 88%
rename from packages/cli/src/eventbus/EventMessageClasses/EventMessageWorkflow.ts
rename to packages/cli/src/eventbus/event-message-classes/event-message-workflow.ts
index 146e0ffcd3229..22c0fc6b5171a 100644
--- a/packages/cli/src/eventbus/EventMessageClasses/EventMessageWorkflow.ts
+++ b/packages/cli/src/eventbus/event-message-classes/event-message-workflow.ts
@@ -1,8 +1,8 @@
-import { AbstractEventMessage, isEventMessageOptionsWithType } from './AbstractEventMessage';
+import { AbstractEventMessage, isEventMessageOptionsWithType } from './abstract-event-message';
 import type { IWorkflowBase, JsonObject } from 'n8n-workflow';
 import { EventMessageTypeNames } from 'n8n-workflow';
-import type { AbstractEventMessageOptions } from './AbstractEventMessageOptions';
-import type { AbstractEventPayload } from './AbstractEventPayload';
+import type { AbstractEventMessageOptions } from './abstract-event-message-options';
+import type { AbstractEventPayload } from './abstract-event-payload';
 import type { IExecutionBase } from '@/Interfaces';
 import type { EventNamesWorkflowType } from '.';
 
diff --git a/packages/cli/src/eventbus/EventMessageClasses/index.ts b/packages/cli/src/eventbus/event-message-classes/index.ts
similarity index 84%
rename from packages/cli/src/eventbus/EventMessageClasses/index.ts
rename to packages/cli/src/eventbus/event-message-classes/index.ts
index 2e4d78560d9da..8e0f367571819 100644
--- a/packages/cli/src/eventbus/EventMessageClasses/index.ts
+++ b/packages/cli/src/eventbus/event-message-classes/index.ts
@@ -1,9 +1,9 @@
-import type { EventMessageAiNode } from './EventMessageAiNode';
-import type { EventMessageAudit } from './EventMessageAudit';
-import type { EventMessageExecution } from './EventMessageExecution';
-import type { EventMessageGeneric } from './EventMessageGeneric';
-import type { EventMessageNode } from './EventMessageNode';
-import type { EventMessageWorkflow } from './EventMessageWorkflow';
+import type { EventMessageAiNode } from './event-message-ai-node';
+import type { EventMessageAudit } from './event-message-audit';
+import type { EventMessageExecution } from './event-message-execution';
+import type { EventMessageGeneric } from './event-message-generic';
+import type { EventMessageNode } from './event-message-node';
+import type { EventMessageWorkflow } from './event-message-workflow';
 import { eventNamesAiNodes, type EventNamesAiNodesType } from 'n8n-workflow';
 
 export const eventNamesWorkflow = [
diff --git a/packages/cli/src/eventbus/eventBus.controller.ts b/packages/cli/src/eventbus/eventBus.controller.ts
index 419c4055aa264..d9922b482e80f 100644
--- a/packages/cli/src/eventbus/eventBus.controller.ts
+++ b/packages/cli/src/eventbus/eventBus.controller.ts
@@ -1,4 +1,4 @@
-import { eventNamesAll } from './EventMessageClasses';
+import { eventNamesAll } from './event-message-classes';
 import express from 'express';
 import type {
 	MessageEventBusDestinationWebhookOptions,
@@ -10,17 +10,17 @@ import { RestController, Get, Post, Delete, GlobalScope, Licensed } from '@/deco
 import { AuthenticatedRequest } from '@/requests';
 import { BadRequestError } from '@/errors/response-errors/bad-request.error';
 
-import { MessageEventBus } from './MessageEventBus/MessageEventBus';
+import { MessageEventBus } from './message-event-bus/message-event-bus';
 import {
 	isMessageEventBusDestinationSentryOptions,
 	MessageEventBusDestinationSentry,
-} from './MessageEventBusDestination/MessageEventBusDestinationSentry.ee';
+} from './message-event-bus-destination/message-event-bus-destination-sentry.ee';
 import {
 	isMessageEventBusDestinationSyslogOptions,
 	MessageEventBusDestinationSyslog,
-} from './MessageEventBusDestination/MessageEventBusDestinationSyslog.ee';
-import { MessageEventBusDestinationWebhook } from './MessageEventBusDestination/MessageEventBusDestinationWebhook.ee';
-import type { MessageEventBusDestination } from './MessageEventBusDestination/MessageEventBusDestination.ee';
+} from './message-event-bus-destination/message-event-bus-destination-syslog.ee';
+import { MessageEventBusDestinationWebhook } from './message-event-bus-destination/message-event-bus-destination-webhook.ee';
+import type { MessageEventBusDestination } from './message-event-bus-destination/message-event-bus-destination.ee';
 
 const isWithIdString = (candidate: unknown): candidate is { id: string } => {
 	const o = candidate as { id: string };
diff --git a/packages/cli/src/eventbus/index.ts b/packages/cli/src/eventbus/index.ts
index fd3658c0a4a13..8f73005ba5d65 100644
--- a/packages/cli/src/eventbus/index.ts
+++ b/packages/cli/src/eventbus/index.ts
@@ -1,2 +1,2 @@
-export { EventMessageTypes } from './EventMessageClasses';
-export { EventPayloadWorkflow } from './EventMessageClasses/EventMessageWorkflow';
+export { EventMessageTypes } from './event-message-classes';
+export { EventPayloadWorkflow } from './event-message-classes/event-message-workflow';
diff --git a/packages/cli/src/eventbus/MessageEventBusDestination/MessageEventBusDestinationFromDb.ts b/packages/cli/src/eventbus/message-event-bus-destination/message-event-bus-destination-from-db.ts
similarity index 69%
rename from packages/cli/src/eventbus/MessageEventBusDestination/MessageEventBusDestinationFromDb.ts
rename to packages/cli/src/eventbus/message-event-bus-destination/message-event-bus-destination-from-db.ts
index 886d1e35dd9ba..ebc5ec7a4bc08 100644
--- a/packages/cli/src/eventbus/MessageEventBusDestination/MessageEventBusDestinationFromDb.ts
+++ b/packages/cli/src/eventbus/message-event-bus-destination/message-event-bus-destination-from-db.ts
@@ -1,10 +1,10 @@
 import { MessageEventBusDestinationTypeNames } from 'n8n-workflow';
 import type { EventDestinations } from '@db/entities/EventDestinations';
-import type { MessageEventBus } from '../MessageEventBus/MessageEventBus';
-import type { MessageEventBusDestination } from './MessageEventBusDestination.ee';
-import { MessageEventBusDestinationSentry } from './MessageEventBusDestinationSentry.ee';
-import { MessageEventBusDestinationSyslog } from './MessageEventBusDestinationSyslog.ee';
-import { MessageEventBusDestinationWebhook } from './MessageEventBusDestinationWebhook.ee';
+import type { MessageEventBus } from '../message-event-bus/message-event-bus';
+import type { MessageEventBusDestination } from './message-event-bus-destination.ee';
+import { MessageEventBusDestinationSentry } from './message-event-bus-destination-sentry.ee';
+import { MessageEventBusDestinationSyslog } from './message-event-bus-destination-syslog.ee';
+import { MessageEventBusDestinationWebhook } from './message-event-bus-destination-webhook.ee';
 import { Container } from 'typedi';
 import { Logger } from '@/logger';
 
diff --git a/packages/cli/src/eventbus/MessageEventBusDestination/MessageEventBusDestinationSentry.ee.ts b/packages/cli/src/eventbus/message-event-bus-destination/message-event-bus-destination-sentry.ee.ts
similarity index 92%
rename from packages/cli/src/eventbus/MessageEventBusDestination/MessageEventBusDestinationSentry.ee.ts
rename to packages/cli/src/eventbus/message-event-bus-destination/message-event-bus-destination-sentry.ee.ts
index 25633c3ac628a..d376d116102cf 100644
--- a/packages/cli/src/eventbus/MessageEventBusDestination/MessageEventBusDestinationSentry.ee.ts
+++ b/packages/cli/src/eventbus/message-event-bus-destination/message-event-bus-destination-sentry.ee.ts
@@ -1,15 +1,15 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 
-import { MessageEventBusDestination } from './MessageEventBusDestination.ee';
+import { MessageEventBusDestination } from './message-event-bus-destination.ee';
 import * as Sentry from '@sentry/node';
 import { MessageEventBusDestinationTypeNames } from 'n8n-workflow';
 import type {
 	MessageEventBusDestinationOptions,
 	MessageEventBusDestinationSentryOptions,
 } from 'n8n-workflow';
-import { eventMessageGenericDestinationTestEvent } from '../EventMessageClasses/EventMessageGeneric';
+import { eventMessageGenericDestinationTestEvent } from '../event-message-classes/event-message-generic';
 import { N8N_VERSION } from '@/constants';
-import type { MessageEventBus, MessageWithCallback } from '../MessageEventBus/MessageEventBus';
+import type { MessageEventBus, MessageWithCallback } from '../message-event-bus/message-event-bus';
 
 export const isMessageEventBusDestinationSentryOptions = (
 	candidate: unknown,
diff --git a/packages/cli/src/eventbus/MessageEventBusDestination/MessageEventBusDestinationSyslog.ee.ts b/packages/cli/src/eventbus/message-event-bus-destination/message-event-bus-destination-syslog.ee.ts
similarity index 93%
rename from packages/cli/src/eventbus/MessageEventBusDestination/MessageEventBusDestinationSyslog.ee.ts
rename to packages/cli/src/eventbus/message-event-bus-destination/message-event-bus-destination-syslog.ee.ts
index 8d9b7438293e3..a16718086d1b2 100644
--- a/packages/cli/src/eventbus/MessageEventBusDestination/MessageEventBusDestinationSyslog.ee.ts
+++ b/packages/cli/src/eventbus/message-event-bus-destination/message-event-bus-destination-syslog.ee.ts
@@ -6,9 +6,9 @@ import type {
 	MessageEventBusDestinationSyslogOptions,
 } from 'n8n-workflow';
 import { MessageEventBusDestinationTypeNames } from 'n8n-workflow';
-import { MessageEventBusDestination } from './MessageEventBusDestination.ee';
-import { eventMessageGenericDestinationTestEvent } from '../EventMessageClasses/EventMessageGeneric';
-import type { MessageEventBus, MessageWithCallback } from '../MessageEventBus/MessageEventBus';
+import { MessageEventBusDestination } from './message-event-bus-destination.ee';
+import { eventMessageGenericDestinationTestEvent } from '../event-message-classes/event-message-generic';
+import type { MessageEventBus, MessageWithCallback } from '../message-event-bus/message-event-bus';
 import Container from 'typedi';
 import { Logger } from '@/logger';
 export const isMessageEventBusDestinationSyslogOptions = (
diff --git a/packages/cli/src/eventbus/MessageEventBusDestination/MessageEventBusDestinationWebhook.ee.ts b/packages/cli/src/eventbus/message-event-bus-destination/message-event-bus-destination-webhook.ee.ts
similarity index 97%
rename from packages/cli/src/eventbus/MessageEventBusDestination/MessageEventBusDestinationWebhook.ee.ts
rename to packages/cli/src/eventbus/message-event-bus-destination/message-event-bus-destination-webhook.ee.ts
index 552185495254c..01cffac93ae2a 100644
--- a/packages/cli/src/eventbus/MessageEventBusDestination/MessageEventBusDestinationWebhook.ee.ts
+++ b/packages/cli/src/eventbus/message-event-bus-destination/message-event-bus-destination-webhook.ee.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 
-import { MessageEventBusDestination } from './MessageEventBusDestination.ee';
+import { MessageEventBusDestination } from './message-event-bus-destination.ee';
 import axios from 'axios';
 import type { AxiosRequestConfig, Method } from 'axios';
 import { jsonParse, MessageEventBusDestinationTypeNames } from 'n8n-workflow';
@@ -13,8 +13,8 @@ import type {
 } from 'n8n-workflow';
 import { CredentialsHelper } from '@/credentials-helper';
 import { Agent as HTTPSAgent } from 'https';
-import { eventMessageGenericDestinationTestEvent } from '../EventMessageClasses/EventMessageGeneric';
-import type { MessageEventBus, MessageWithCallback } from '../MessageEventBus/MessageEventBus';
+import { eventMessageGenericDestinationTestEvent } from '../event-message-classes/event-message-generic';
+import type { MessageEventBus, MessageWithCallback } from '../message-event-bus/message-event-bus';
 import * as SecretsHelpers from '@/external-secrets/external-secrets-helper.ee';
 import Container from 'typedi';
 
diff --git a/packages/cli/src/eventbus/MessageEventBusDestination/MessageEventBusDestination.ee.ts b/packages/cli/src/eventbus/message-event-bus-destination/message-event-bus-destination.ee.ts
similarity index 91%
rename from packages/cli/src/eventbus/MessageEventBusDestination/MessageEventBusDestination.ee.ts
rename to packages/cli/src/eventbus/message-event-bus-destination/message-event-bus-destination.ee.ts
index 3cd86f4368aff..1b9085e9d007a 100644
--- a/packages/cli/src/eventbus/MessageEventBusDestination/MessageEventBusDestination.ee.ts
+++ b/packages/cli/src/eventbus/message-event-bus-destination/message-event-bus-destination.ee.ts
@@ -3,10 +3,10 @@ import { Container } from 'typedi';
 import type { INodeCredentials, MessageEventBusDestinationOptions } from 'n8n-workflow';
 import { MessageEventBusDestinationTypeNames } from 'n8n-workflow';
 import { Logger } from '@/logger';
-import type { AbstractEventMessage } from '../EventMessageClasses/AbstractEventMessage';
-import type { EventMessageTypes } from '../EventMessageClasses';
-import type { EventMessageConfirmSource } from '../EventMessageClasses/EventMessageConfirm';
-import type { MessageEventBus, MessageWithCallback } from '../MessageEventBus/MessageEventBus';
+import type { AbstractEventMessage } from '../event-message-classes/abstract-event-message';
+import type { EventMessageTypes } from '../event-message-classes';
+import type { EventMessageConfirmSource } from '../event-message-classes/event-message-confirm';
+import type { MessageEventBus, MessageWithCallback } from '../message-event-bus/message-event-bus';
 import { EventDestinationsRepository } from '@db/repositories/eventDestinations.repository';
 import { License } from '@/license';
 
diff --git a/packages/cli/src/eventbus/MessageEventBusWriter/MessageEventBusLogWriterWorker.ts b/packages/cli/src/eventbus/message-event-bus-writer/message-event-bus-log-writer-worker.ts
similarity index 97%
rename from packages/cli/src/eventbus/MessageEventBusWriter/MessageEventBusLogWriterWorker.ts
rename to packages/cli/src/eventbus/message-event-bus-writer/message-event-bus-log-writer-worker.ts
index 69d2e8ce26f73..308d4508c1c5c 100644
--- a/packages/cli/src/eventbus/MessageEventBusWriter/MessageEventBusLogWriterWorker.ts
+++ b/packages/cli/src/eventbus/message-event-bus-writer/message-event-bus-log-writer-worker.ts
@@ -1,7 +1,7 @@
 import { appendFileSync, existsSync, rmSync, renameSync, openSync, closeSync } from 'fs';
 import { stat } from 'fs/promises';
 import { isMainThread, parentPort } from 'worker_threads';
-import type { MessageEventBusLogWriterOptions } from './MessageEventBusLogWriter';
+import type { MessageEventBusLogWriterOptions } from './message-event-bus-log-writer';
 
 let logFileBasePath = '';
 let loggingPaused = true;
diff --git a/packages/cli/src/eventbus/MessageEventBusWriter/MessageEventBusLogWriter.ts b/packages/cli/src/eventbus/message-event-bus-writer/message-event-bus-log-writer.ts
similarity index 89%
rename from packages/cli/src/eventbus/MessageEventBusWriter/MessageEventBusLogWriter.ts
rename to packages/cli/src/eventbus/message-event-bus-writer/message-event-bus-log-writer.ts
index 617dacd2830ce..fd6eb1db38598 100644
--- a/packages/cli/src/eventbus/MessageEventBusWriter/MessageEventBusLogWriter.ts
+++ b/packages/cli/src/eventbus/message-event-bus-writer/message-event-bus-log-writer.ts
@@ -1,29 +1,29 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 
-import { isEventMessageOptions } from '../EventMessageClasses/AbstractEventMessage';
+import { isEventMessageOptions } from '../event-message-classes/abstract-event-message';
 import { InstanceSettings } from 'n8n-core';
 import path, { parse } from 'path';
 import { Worker } from 'worker_threads';
 import { createReadStream, existsSync, rmSync } from 'fs';
 import readline from 'readline';
 import remove from 'lodash/remove';
-import type { EventMessageGenericOptions } from '../EventMessageClasses/EventMessageGeneric';
-import { EventMessageGeneric } from '../EventMessageClasses/EventMessageGeneric';
-import type { AbstractEventMessageOptions } from '../EventMessageClasses/AbstractEventMessageOptions';
-import type { EventMessageWorkflowOptions } from '../EventMessageClasses/EventMessageWorkflow';
-import { EventMessageWorkflow } from '../EventMessageClasses/EventMessageWorkflow';
+import type { EventMessageGenericOptions } from '../event-message-classes/event-message-generic';
+import { EventMessageGeneric } from '../event-message-classes/event-message-generic';
+import type { AbstractEventMessageOptions } from '../event-message-classes/abstract-event-message-options';
+import type { EventMessageWorkflowOptions } from '../event-message-classes/event-message-workflow';
+import { EventMessageWorkflow } from '../event-message-classes/event-message-workflow';
 import { EventMessageTypeNames, jsonParse } from 'n8n-workflow';
-import type { EventMessageAuditOptions } from '../EventMessageClasses/EventMessageAudit';
-import { EventMessageAudit } from '../EventMessageClasses/EventMessageAudit';
-import type { EventMessageNodeOptions } from '../EventMessageClasses/EventMessageNode';
-import { EventMessageNode } from '../EventMessageClasses/EventMessageNode';
-import type { EventMessageReturnMode } from '../MessageEventBus/MessageEventBus';
-import type { EventMessageTypes } from '../EventMessageClasses';
-import type { EventMessageConfirmSource } from '../EventMessageClasses/EventMessageConfirm';
+import type { EventMessageAuditOptions } from '../event-message-classes/event-message-audit';
+import { EventMessageAudit } from '../event-message-classes/event-message-audit';
+import type { EventMessageNodeOptions } from '../event-message-classes/event-message-node';
+import { EventMessageNode } from '../event-message-classes/event-message-node';
+import type { EventMessageReturnMode } from '../message-event-bus/message-event-bus';
+import type { EventMessageTypes } from '../event-message-classes';
+import type { EventMessageConfirmSource } from '../event-message-classes/event-message-confirm';
 import {
 	EventMessageConfirm,
 	isEventMessageConfirm,
-} from '../EventMessageClasses/EventMessageConfirm';
+} from '../event-message-classes/event-message-confirm';
 import { once as eventOnce } from 'events';
 import { inTest } from '@/constants';
 import { Logger } from '@/logger';
@@ -139,9 +139,10 @@ export class MessageEventBusLogWriter {
 		const parsedName = parse(__filename);
 		let workerFileName;
 		if (inTest) {
-			workerFileName = './dist/eventbus/MessageEventBusWriter/MessageEventBusLogWriterWorker.js';
+			workerFileName =
+				'./dist/eventbus/message-event-bus-writer/message-event-bus-log-writer-worker.js';
 		} else {
-			workerFileName = path.join(parsedName.dir, `${parsedName.name}Worker${parsedName.ext}`);
+			workerFileName = path.join(parsedName.dir, `${parsedName.name}-worker${parsedName.ext}`);
 		}
 		this._worker = new Worker(workerFileName);
 		if (this.worker) {
diff --git a/packages/cli/src/eventbus/MessageEventBus/MessageEventBus.ts b/packages/cli/src/eventbus/message-event-bus/message-event-bus.ts
similarity index 91%
rename from packages/cli/src/eventbus/MessageEventBus/MessageEventBus.ts
rename to packages/cli/src/eventbus/message-event-bus/message-event-bus.ts
index 38ec4e8dc72c7..47d4d327d46f4 100644
--- a/packages/cli/src/eventbus/MessageEventBus/MessageEventBus.ts
+++ b/packages/cli/src/eventbus/message-event-bus/message-event-bus.ts
@@ -14,29 +14,29 @@ import { WorkflowRepository } from '@db/repositories/workflow.repository';
 import { OrchestrationService } from '@/services/orchestration.service';
 import { Logger } from '@/logger';
 
-import type { EventMessageTypes } from '../EventMessageClasses/';
-import type { MessageEventBusDestination } from '../MessageEventBusDestination/MessageEventBusDestination.ee';
-import { MessageEventBusLogWriter } from '../MessageEventBusWriter/MessageEventBusLogWriter';
-import { messageEventBusDestinationFromDb } from '../MessageEventBusDestination/MessageEventBusDestinationFromDb';
-import type { EventMessageConfirmSource } from '../EventMessageClasses/EventMessageConfirm';
-import type { EventMessageAuditOptions } from '../EventMessageClasses/EventMessageAudit';
-import { EventMessageAudit } from '../EventMessageClasses/EventMessageAudit';
-import type { EventMessageWorkflowOptions } from '../EventMessageClasses/EventMessageWorkflow';
-import { EventMessageWorkflow } from '../EventMessageClasses/EventMessageWorkflow';
-import type { EventMessageNodeOptions } from '../EventMessageClasses/EventMessageNode';
-import { EventMessageNode } from '../EventMessageClasses/EventMessageNode';
+import type { EventMessageTypes } from '../event-message-classes/';
+import type { MessageEventBusDestination } from '../message-event-bus-destination/message-event-bus-destination.ee';
+import { MessageEventBusLogWriter } from '../message-event-bus-writer/message-event-bus-log-writer';
+import { messageEventBusDestinationFromDb } from '../message-event-bus-destination/message-event-bus-destination-from-db';
+import type { EventMessageConfirmSource } from '../event-message-classes/event-message-confirm';
+import type { EventMessageAuditOptions } from '../event-message-classes/event-message-audit';
+import { EventMessageAudit } from '../event-message-classes/event-message-audit';
+import type { EventMessageWorkflowOptions } from '../event-message-classes/event-message-workflow';
+import { EventMessageWorkflow } from '../event-message-classes/event-message-workflow';
+import type { EventMessageNodeOptions } from '../event-message-classes/event-message-node';
+import { EventMessageNode } from '../event-message-classes/event-message-node';
 import {
 	EventMessageGeneric,
 	eventMessageGenericDestinationTestEvent,
-} from '../EventMessageClasses/EventMessageGeneric';
+} from '../event-message-classes/event-message-generic';
 import { ExecutionRecoveryService } from '../../executions/execution-recovery.service';
 import {
 	EventMessageAiNode,
 	type EventMessageAiNodeOptions,
-} from '../EventMessageClasses/EventMessageAiNode';
+} from '../event-message-classes/event-message-ai-node';
 import { License } from '@/license';
-import type { EventMessageExecutionOptions } from '../EventMessageClasses/EventMessageExecution';
-import { EventMessageExecution } from '../EventMessageClasses/EventMessageExecution';
+import type { EventMessageExecutionOptions } from '../event-message-classes/event-message-execution';
+import { EventMessageExecution } from '../event-message-classes/event-message-execution';
 import { GlobalConfig } from '@n8n/config';
 
 export type EventMessageReturnMode = 'sent' | 'unsent' | 'all' | 'unfinished';
diff --git a/packages/cli/src/events/__tests__/log-streaming-event-relay.test.ts b/packages/cli/src/events/__tests__/log-streaming-event-relay.test.ts
index 720e2d494c332..3a30738e63bc3 100644
--- a/packages/cli/src/events/__tests__/log-streaming-event-relay.test.ts
+++ b/packages/cli/src/events/__tests__/log-streaming-event-relay.test.ts
@@ -3,7 +3,7 @@ import { LogStreamingEventRelay } from '@/events/log-streaming-event-relay';
 import { EventService } from '@/events/event.service';
 import type { INode, IRun, IWorkflowBase } from 'n8n-workflow';
 import type { IWorkflowDb } from '@/Interfaces';
-import type { MessageEventBus } from '@/eventbus/MessageEventBus/MessageEventBus';
+import type { MessageEventBus } from '@/eventbus/message-event-bus/message-event-bus';
 import type { RelayEventMap } from '@/events/relay-event-map';
 
 describe('LogStreamingEventRelay', () => {
diff --git a/packages/cli/src/events/log-streaming-event-relay.ts b/packages/cli/src/events/log-streaming-event-relay.ts
index 2012775d91977..db704128eace2 100644
--- a/packages/cli/src/events/log-streaming-event-relay.ts
+++ b/packages/cli/src/events/log-streaming-event-relay.ts
@@ -1,5 +1,5 @@
 import { Service } from 'typedi';
-import { MessageEventBus } from '@/eventbus/MessageEventBus/MessageEventBus';
+import { MessageEventBus } from '@/eventbus/message-event-bus/message-event-bus';
 import { Redactable } from '@/decorators/redactable';
 import { EventRelay } from '@/events/event-relay';
 import type { RelayEventMap } from '@/events/relay-event-map';
diff --git a/packages/cli/src/executions/__tests__/execution-recovery.service.test.ts b/packages/cli/src/executions/__tests__/execution-recovery.service.test.ts
index f72c81a3cad53..a6e8a01aaa262 100644
--- a/packages/cli/src/executions/__tests__/execution-recovery.service.test.ts
+++ b/packages/cli/src/executions/__tests__/execution-recovery.service.test.ts
@@ -15,11 +15,11 @@ import { Push } from '@/push';
 import { ARTIFICIAL_TASK_DATA } from '@/constants';
 import { NodeCrashedError } from '@/errors/node-crashed.error';
 import { WorkflowCrashedError } from '@/errors/workflow-crashed.error';
-import { EventMessageNode } from '@/eventbus/EventMessageClasses/EventMessageNode';
+import { EventMessageNode } from '@/eventbus/event-message-classes/event-message-node';
 import { IN_PROGRESS_EXECUTION_DATA, OOM_WORKFLOW } from './constants';
 import { setupMessages } from './utils';
 
-import type { EventMessageTypes as EventMessage } from '@/eventbus/EventMessageClasses';
+import type { EventMessageTypes as EventMessage } from '@/eventbus/event-message-classes';
 
 describe('ExecutionRecoveryService', () => {
 	const push = mockInstance(Push);
diff --git a/packages/cli/src/executions/__tests__/execution.service.test.ts b/packages/cli/src/executions/__tests__/execution.service.test.ts
index 99370c1e1b77e..dfdb4099bd90e 100644
--- a/packages/cli/src/executions/__tests__/execution.service.test.ts
+++ b/packages/cli/src/executions/__tests__/execution.service.test.ts
@@ -11,7 +11,7 @@ import type { WaitTracker } from '@/wait-tracker';
 import type { ExecutionRepository } from '@/databases/repositories/execution.repository';
 import type { ExecutionRequest } from '@/executions/execution.types';
 import type { ConcurrencyControlService } from '@/concurrency/concurrency-control.service';
-import type { Job } from '@/scaling/types';
+import type { Job } from '@/scaling/scaling.types';
 import { mockInstance } from '@test/mocking';
 
 describe('ExecutionService', () => {
diff --git a/packages/cli/src/executions/__tests__/utils.ts b/packages/cli/src/executions/__tests__/utils.ts
index 6ffb9109ecb40..7c5ee85b3e5d8 100644
--- a/packages/cli/src/executions/__tests__/utils.ts
+++ b/packages/cli/src/executions/__tests__/utils.ts
@@ -1,6 +1,6 @@
-import type { EventMessageTypes as EventMessage } from '@/eventbus/EventMessageClasses';
-import { EventMessageNode } from '@/eventbus/EventMessageClasses/EventMessageNode';
-import { EventMessageWorkflow } from '@/eventbus/EventMessageClasses/EventMessageWorkflow';
+import type { EventMessageTypes as EventMessage } from '@/eventbus/event-message-classes';
+import { EventMessageNode } from '@/eventbus/event-message-classes/event-message-node';
+import { EventMessageWorkflow } from '@/eventbus/event-message-classes/event-message-workflow';
 
 export const setupMessages = (executionId: string, workflowName: string): EventMessage[] => {
 	return [
diff --git a/packages/cli/src/executions/execution-recovery.service.ts b/packages/cli/src/executions/execution-recovery.service.ts
index ffe4e04a4513d..1c8fe7d639035 100644
--- a/packages/cli/src/executions/execution-recovery.service.ts
+++ b/packages/cli/src/executions/execution-recovery.service.ts
@@ -6,7 +6,7 @@ import { getWorkflowHooksMain } from '@/workflow-execute-additional-data'; // @T
 import type { DateTime } from 'luxon';
 import type { IRun, ITaskData } from 'n8n-workflow';
 import { InstanceSettings } from 'n8n-core';
-import type { EventMessageTypes } from '../eventbus/EventMessageClasses';
+import type { EventMessageTypes } from '../eventbus/event-message-classes';
 import type { IExecutionResponse } from '@/Interfaces';
 import { NodeCrashedError } from '@/errors/node-crashed.error';
 import { WorkflowCrashedError } from '@/errors/workflow-crashed.error';
diff --git a/packages/cli/src/internal-hooks.ts b/packages/cli/src/internal-hooks.ts
index b3d45b67c0acd..378a01ecaa9ba 100644
--- a/packages/cli/src/internal-hooks.ts
+++ b/packages/cli/src/internal-hooks.ts
@@ -1,6 +1,6 @@
 import { Service } from 'typedi';
 import { Telemetry } from '@/telemetry';
-import { MessageEventBus } from './eventbus/MessageEventBus/MessageEventBus';
+import { MessageEventBus } from './eventbus/message-event-bus/message-event-bus';
 
 /**
  * @deprecated Do not add to this class. It will be removed once we remove
diff --git a/packages/cli/src/metrics/__tests__/prometheus-metrics.service.test.ts b/packages/cli/src/metrics/__tests__/prometheus-metrics.service.test.ts
index 219170ac085a8..91f99f91b041a 100644
--- a/packages/cli/src/metrics/__tests__/prometheus-metrics.service.test.ts
+++ b/packages/cli/src/metrics/__tests__/prometheus-metrics.service.test.ts
@@ -4,7 +4,7 @@ import promBundle from 'express-prom-bundle';
 import { mock } from 'jest-mock-extended';
 import { PrometheusMetricsService } from '../prometheus-metrics.service';
 import type express from 'express';
-import type { MessageEventBus } from '@/eventbus/MessageEventBus/MessageEventBus';
+import type { MessageEventBus } from '@/eventbus/message-event-bus/message-event-bus';
 import { mockInstance } from '@test/mocking';
 import { GlobalConfig } from '@n8n/config';
 
diff --git a/packages/cli/src/metrics/prometheus-metrics.service.ts b/packages/cli/src/metrics/prometheus-metrics.service.ts
index 1444f6f694bbd..32522808fc243 100644
--- a/packages/cli/src/metrics/prometheus-metrics.service.ts
+++ b/packages/cli/src/metrics/prometheus-metrics.service.ts
@@ -6,7 +6,7 @@ import semverParse from 'semver/functions/parse';
 import { Service } from 'typedi';
 
 import { CacheService } from '@/services/cache/cache.service';
-import { MessageEventBus } from '@/eventbus/MessageEventBus/MessageEventBus';
+import { MessageEventBus } from '@/eventbus/message-event-bus/message-event-bus';
 import { EventMessageTypeNames } from 'n8n-workflow';
 import type { EventMessageTypes } from '@/eventbus';
 import type { Includes, MetricCategory, MetricLabel } from './types';
diff --git a/packages/cli/src/scaling/__tests__/scaling.service.test.ts b/packages/cli/src/scaling/__tests__/scaling.service.test.ts
index adbf5ebde2f0e..f87d02b33d0d4 100644
--- a/packages/cli/src/scaling/__tests__/scaling.service.test.ts
+++ b/packages/cli/src/scaling/__tests__/scaling.service.test.ts
@@ -3,7 +3,7 @@ import { ScalingService } from '../scaling.service';
 import { JOB_TYPE_NAME, QUEUE_NAME } from '../constants';
 import config from '@/config';
 import * as BullModule from 'bull';
-import type { Job, JobData, JobOptions, JobQueue } from '../types';
+import type { Job, JobData, JobOptions, JobQueue } from '../scaling.types';
 import { ApplicationError } from 'n8n-workflow';
 import { mockInstance } from '@test/mocking';
 import { GlobalConfig } from '@n8n/config';
@@ -22,6 +22,8 @@ jest.mock('bull', () => ({
 }));
 
 describe('ScalingService', () => {
+	const Bull = jest.mocked(BullModule.default);
+
 	const globalConfig = mockInstance(GlobalConfig, {
 		queue: {
 			bull: {
@@ -40,11 +42,29 @@ describe('ScalingService', () => {
 	const instanceSettings = Container.get(InstanceSettings);
 	const orchestrationService = mock<OrchestrationService>({ isMultiMainSetupEnabled: false });
 	const jobProcessor = mock<JobProcessor>();
+
 	let scalingService: ScalingService;
 
+	let registerMainListenersSpy: jest.SpyInstance;
+	let registerWorkerListenersSpy: jest.SpyInstance;
+	let scheduleQueueRecoverySpy: jest.SpyInstance;
+	let stopQueueRecoverySpy: jest.SpyInstance;
+	let getRunningJobsCountSpy: jest.SpyInstance;
+
+	const bullConstructorArgs = [
+		QUEUE_NAME,
+		{
+			prefix: globalConfig.queue.bull.prefix,
+			settings: globalConfig.queue.bull.settings,
+			createClient: expect.any(Function),
+		},
+	];
+
 	beforeEach(() => {
 		jest.clearAllMocks();
 		config.set('generic.instanceType', 'main');
+		instanceSettings.markAsLeader();
+
 		scalingService = new ScalingService(
 			mock(),
 			mock(),
@@ -54,98 +74,93 @@ describe('ScalingService', () => {
 			instanceSettings,
 			orchestrationService,
 		);
-	});
 
-	afterEach(() => {
-		scalingService.stopQueueRecovery();
+		getRunningJobsCountSpy = jest.spyOn(scalingService, 'getRunningJobsCount');
+
+		// @ts-expect-error Private method
+		ScalingService.prototype.scheduleQueueRecovery = jest.fn();
+		// @ts-expect-error Private method
+		registerMainListenersSpy = jest.spyOn(scalingService, 'registerMainListeners');
+		// @ts-expect-error Private method
+		registerWorkerListenersSpy = jest.spyOn(scalingService, 'registerWorkerListeners');
+		// @ts-expect-error Private method
+		scheduleQueueRecoverySpy = jest.spyOn(scalingService, 'scheduleQueueRecovery');
+		// @ts-expect-error Private method
+		stopQueueRecoverySpy = jest.spyOn(scalingService, 'stopQueueRecovery');
 	});
 
 	describe('setupQueue', () => {
-		it('should set up the queue', async () => {
-			/**
-			 * Arrange
-			 */
-			const { prefix, settings } = globalConfig.queue.bull;
-			const Bull = jest.mocked(BullModule.default);
-
-			/**
-			 * Act
-			 */
-			await scalingService.setupQueue();
+		describe('if leader main', () => {
+			it('should set up queue + listeners + queue recovery', async () => {
+				await scalingService.setupQueue();
+
+				expect(Bull).toHaveBeenCalledWith(...bullConstructorArgs);
+				expect(registerMainListenersSpy).toHaveBeenCalled();
+				expect(registerWorkerListenersSpy).not.toHaveBeenCalled();
+				expect(scheduleQueueRecoverySpy).toHaveBeenCalled();
+			});
+		});
+
+		describe('if follower main', () => {
+			it('should set up queue + listeners', async () => {
+				instanceSettings.markAsFollower();
+
+				await scalingService.setupQueue();
+
+				expect(Bull).toHaveBeenCalledWith(...bullConstructorArgs);
+				expect(registerMainListenersSpy).toHaveBeenCalled();
+				expect(registerWorkerListenersSpy).not.toHaveBeenCalled();
+				expect(scheduleQueueRecoverySpy).not.toHaveBeenCalled();
+			});
+		});
+
+		describe('if worker', () => {
+			it('should set up queue + listeners', async () => {
+				// @ts-expect-error Private field
+				scalingService.instanceType = 'worker';
 
-			/**
-			 * Assert
-			 */
-			expect(Bull).toHaveBeenCalledWith(QUEUE_NAME, {
-				prefix,
-				settings,
-				createClient: expect.any(Function),
+				await scalingService.setupQueue();
+
+				expect(Bull).toHaveBeenCalledWith(...bullConstructorArgs);
+				expect(registerWorkerListenersSpy).toHaveBeenCalled();
+				expect(registerMainListenersSpy).not.toHaveBeenCalled();
 			});
-			expect(queue.on).toHaveBeenCalledWith('global:progress', expect.any(Function));
-			expect(queue.on).toHaveBeenCalledWith('error', expect.any(Function));
 		});
 	});
 
 	describe('setupWorker', () => {
 		it('should set up a worker with concurrency', async () => {
-			/**
-			 * Arrange
-			 */
-			config.set('generic.instanceType', 'worker');
-			const scalingService = new ScalingService(
-				mock(),
-				mock(),
-				mock(),
-				globalConfig,
-				mock(),
-				instanceSettings,
-				orchestrationService,
-			);
+			// @ts-expect-error Private field
+			scalingService.instanceType = 'worker';
 			await scalingService.setupQueue();
 			const concurrency = 5;
 
-			/**
-			 * Act
-			 */
 			scalingService.setupWorker(concurrency);
 
-			/**
-			 * Assert
-			 */
 			expect(queue.process).toHaveBeenCalledWith(JOB_TYPE_NAME, concurrency, expect.any(Function));
 		});
 
 		it('should throw if called on a non-worker instance', async () => {
-			/**
-			 * Arrange
-			 */
 			await scalingService.setupQueue();
 
-			/**
-			 * Act and Assert
-			 */
+			expect(() => scalingService.setupWorker(5)).toThrow();
+		});
+
+		it('should throw if called before queue is ready', async () => {
+			// @ts-expect-error Private field
+			scalingService.instanceType = 'worker';
+
 			expect(() => scalingService.setupWorker(5)).toThrow();
 		});
 	});
 
 	describe('stop', () => {
-		it('should pause the queue, check for running jobs, and stop queue recovery', async () => {
-			/**
-			 * Arrange
-			 */
+		it('should pause queue, wait for running jobs, stop queue recovery', async () => {
 			await scalingService.setupQueue();
 			jobProcessor.getRunningJobIds.mockReturnValue([]);
-			const stopQueueRecoverySpy = jest.spyOn(scalingService, 'stopQueueRecovery');
-			const getRunningJobsCountSpy = jest.spyOn(scalingService, 'getRunningJobsCount');
 
-			/**
-			 * Act
-			 */
 			await scalingService.stop();
 
-			/**
-			 * Assert
-			 */
 			expect(queue.pause).toHaveBeenCalledWith(true, true);
 			expect(stopQueueRecoverySpy).toHaveBeenCalled();
 			expect(getRunningJobsCountSpy).toHaveBeenCalled();
@@ -154,62 +169,35 @@ describe('ScalingService', () => {
 
 	describe('pingQueue', () => {
 		it('should ping the queue', async () => {
-			/**
-			 * Arrange
-			 */
 			await scalingService.setupQueue();
 
-			/**
-			 * Act
-			 */
 			await scalingService.pingQueue();
 
-			/**
-			 * Assert
-			 */
 			expect(queue.client.ping).toHaveBeenCalled();
 		});
 	});
 
 	describe('addJob', () => {
 		it('should add a job', async () => {
-			/**
-			 * Arrange
-			 */
 			await scalingService.setupQueue();
 			queue.add.mockResolvedValue(mock<Job>({ id: '456' }));
 
-			/**
-			 * Act
-			 */
 			const jobData = mock<JobData>({ executionId: '123' });
 			const jobOptions = mock<JobOptions>();
 			await scalingService.addJob(jobData, jobOptions);
 
-			/**
-			 * Assert
-			 */
 			expect(queue.add).toHaveBeenCalledWith(JOB_TYPE_NAME, jobData, jobOptions);
 		});
 	});
 
 	describe('getJob', () => {
 		it('should get a job', async () => {
-			/**
-			 * Arrange
-			 */
 			await scalingService.setupQueue();
 			const jobId = '123';
 			queue.getJob.mockResolvedValue(mock<Job>({ id: jobId }));
 
-			/**
-			 * Act
-			 */
 			const job = await scalingService.getJob(jobId);
 
-			/**
-			 * Assert
-			 */
 			expect(queue.getJob).toHaveBeenCalledWith(jobId);
 			expect(job?.id).toBe(jobId);
 		});
@@ -217,88 +205,49 @@ describe('ScalingService', () => {
 
 	describe('findJobsByStatus', () => {
 		it('should find jobs by status', async () => {
-			/**
-			 * Arrange
-			 */
 			await scalingService.setupQueue();
 			queue.getJobs.mockResolvedValue([mock<Job>({ id: '123' })]);
 
-			/**
-			 * Act
-			 */
 			const jobs = await scalingService.findJobsByStatus(['active']);
 
-			/**
-			 * Assert
-			 */
 			expect(queue.getJobs).toHaveBeenCalledWith(['active']);
 			expect(jobs).toHaveLength(1);
 			expect(jobs.at(0)?.id).toBe('123');
 		});
 
 		it('should filter out `null` in Redis response', async () => {
-			/**
-			 * Arrange
-			 */
 			await scalingService.setupQueue();
 			// @ts-expect-error - Untyped but possible Redis response
 			queue.getJobs.mockResolvedValue([mock<Job>(), null]);
 
-			/**
-			 * Act
-			 */
 			const jobs = await scalingService.findJobsByStatus(['waiting']);
 
-			/**
-			 * Assert
-			 */
 			expect(jobs).toHaveLength(1);
 		});
 	});
 
 	describe('stopJob', () => {
 		it('should stop an active job', async () => {
-			/**
-			 * Arrange
-			 */
 			await scalingService.setupQueue();
 			const job = mock<Job>({ isActive: jest.fn().mockResolvedValue(true) });
 
-			/**
-			 * Act
-			 */
 			const result = await scalingService.stopJob(job);
 
-			/**
-			 * Assert
-			 */
 			expect(job.progress).toHaveBeenCalledWith({ kind: 'abort-job' });
 			expect(result).toBe(true);
 		});
 
 		it('should stop an inactive job', async () => {
-			/**
-			 * Arrange
-			 */
 			await scalingService.setupQueue();
 			const job = mock<Job>({ isActive: jest.fn().mockResolvedValue(false) });
 
-			/**
-			 * Act
-			 */
 			const result = await scalingService.stopJob(job);
 
-			/**
-			 * Assert
-			 */
 			expect(job.remove).toHaveBeenCalled();
 			expect(result).toBe(true);
 		});
 
 		it('should report failure to stop a job', async () => {
-			/**
-			 * Arrange
-			 */
 			await scalingService.setupQueue();
 			const job = mock<Job>({
 				isActive: jest.fn().mockImplementation(() => {
@@ -306,53 +255,9 @@ describe('ScalingService', () => {
 				}),
 			});
 
-			/**
-			 * Act
-			 */
 			const result = await scalingService.stopJob(job);
 
-			/**
-			 * Assert
-			 */
 			expect(result).toBe(false);
 		});
 	});
-
-	describe('scheduleQueueRecovery', () => {
-		it('if leader, should schedule queue recovery', async () => {
-			/**
-			 * Arrange
-			 */
-			const scheduleSpy = jest.spyOn(scalingService, 'scheduleQueueRecovery');
-			instanceSettings.markAsLeader();
-
-			/**
-			 * Act
-			 */
-			await scalingService.setupQueue();
-
-			/**
-			 * Assert
-			 */
-			expect(scheduleSpy).toHaveBeenCalled();
-		});
-
-		it('if follower, should not schedule queue recovery', async () => {
-			/**
-			 * Arrange
-			 */
-			const scheduleSpy = jest.spyOn(scalingService, 'scheduleQueueRecovery');
-			instanceSettings.markAsFollower();
-
-			/**
-			 * Act
-			 */
-			await scalingService.setupQueue();
-
-			/**
-			 * Assert
-			 */
-			expect(scheduleSpy).not.toHaveBeenCalled();
-		});
-	});
 });
diff --git a/packages/cli/src/scaling/job-processor.ts b/packages/cli/src/scaling/job-processor.ts
index 8618424e3562c..7804a6d6c85fe 100644
--- a/packages/cli/src/scaling/job-processor.ts
+++ b/packages/cli/src/scaling/job-processor.ts
@@ -8,7 +8,7 @@ import { WorkflowRepository } from '@/databases/repositories/workflow.repository
 import * as WorkflowExecuteAdditionalData from '@/workflow-execute-additional-data';
 import { NodeTypes } from '@/node-types';
 import type { ExecutionStatus, IExecuteResponsePromiseData, IRun } from 'n8n-workflow';
-import type { Job, JobId, JobResult, RunningJob, RunningJobSummary } from './types';
+import type { Job, JobId, JobResult, RunningJob, RunningJobSummary } from './scaling.types';
 import type PCancelable from 'p-cancelable';
 
 /**
diff --git a/packages/cli/src/scaling/scaling.service.ts b/packages/cli/src/scaling/scaling.service.ts
index 4dbdce1aac837..37436cdb4361e 100644
--- a/packages/cli/src/scaling/scaling.service.ts
+++ b/packages/cli/src/scaling/scaling.service.ts
@@ -13,11 +13,11 @@ import type {
 	Job,
 	JobData,
 	JobOptions,
-	JobMessage,
 	JobStatus,
 	JobId,
 	QueueRecoveryContext,
-} from './types';
+	PubSubMessage,
+} from './scaling.types';
 import type { IExecuteResponsePromiseData } from 'n8n-workflow';
 import { GlobalConfig } from '@n8n/config';
 import { ExecutionRepository } from '@/databases/repositories/execution.repository';
@@ -71,6 +71,7 @@ export class ScalingService {
 
 	setupWorker(concurrency: number) {
 		this.assertWorker();
+		this.assertQueue();
 
 		void this.queue.process(
 			JOB_TYPE_NAME,
@@ -161,22 +162,6 @@ export class ScalingService {
 	// #region Listeners
 
 	private registerListeners() {
-		this.queue.on('global:progress', (_jobId: JobId, msg: JobMessage) => {
-			if (msg.kind === 'respond-to-webhook') {
-				const { executionId, response } = msg;
-				this.activeExecutions.resolveResponsePromise(
-					executionId,
-					this.decodeWebhookResponse(response),
-				);
-			}
-		});
-
-		this.queue.on('global:progress', (jobId: JobId, msg: JobMessage) => {
-			if (msg.kind === 'abort-job') {
-				this.jobProcessor.stopJob(jobId);
-			}
-		});
-
 		let latestAttemptTs = 0;
 		let cumulativeTimeoutMs = 0;
 
@@ -210,10 +195,28 @@ export class ScalingService {
 				return;
 			}
 
-			if (
-				this.instanceType === 'worker' &&
-				error.message.includes('job stalled more than maxStalledCount')
-			) {
+			throw error;
+		});
+
+		if (this.instanceType === 'main') {
+			this.registerMainListeners();
+		} else if (this.instanceType === 'worker') {
+			this.registerWorkerListeners();
+		}
+	}
+
+	/**
+	 * Register listeners on a `worker` process for Bull queue events.
+	 */
+	private registerWorkerListeners() {
+		this.queue.on('global:progress', (jobId: JobId, msg: unknown) => {
+			if (!this.isPubSubMessage(msg)) return;
+
+			if (msg.kind === 'abort-job') this.jobProcessor.stopJob(jobId);
+		});
+
+		this.queue.on('error', (error: Error) => {
+			if (error.message.includes('job stalled more than maxStalledCount')) {
 				throw new MaxStalledCountError(error);
 			}
 
@@ -221,10 +224,7 @@ export class ScalingService {
 			 * Non-recoverable error on worker start with Redis unavailable.
 			 * Even if Redis recovers, worker will remain unable to process jobs.
 			 */
-			if (
-				this.instanceType === 'worker' &&
-				error.message.includes('Error initializing Lua scripts')
-			) {
+			if (error.message.includes('Error initializing Lua scripts')) {
 				this.logger.error('[ScalingService] Fatal error initializing worker', { error });
 				this.logger.error('[ScalingService] Exiting process...');
 				process.exit(1);
@@ -234,6 +234,24 @@ export class ScalingService {
 		});
 	}
 
+	/**
+	 * Register listeners on a `main` process for Bull queue events.
+	 */
+	private registerMainListeners() {
+		this.queue.on('global:progress', (_jobId: JobId, msg: unknown) => {
+			if (!this.isPubSubMessage(msg)) return;
+
+			if (msg.kind === 'respond-to-webhook') {
+				const decodedResponse = this.decodeWebhookResponse(msg.response);
+				this.activeExecutions.resolveResponsePromise(msg.executionId, decodedResponse);
+			}
+		});
+	}
+
+	private isPubSubMessage(candidate: unknown): candidate is PubSubMessage {
+		return typeof candidate === 'object' && candidate !== null && 'kind' in candidate;
+	}
+
 	// #endregion
 
 	private decodeWebhookResponse(
@@ -252,6 +270,12 @@ export class ScalingService {
 		return response;
 	}
 
+	private assertQueue() {
+		if (this.queue) return;
+
+		throw new ApplicationError('This method must be called after `setupQueue`');
+	}
+
 	private assertWorker() {
 		if (this.instanceType === 'worker') return;
 
@@ -265,7 +289,7 @@ export class ScalingService {
 		waitMs: config.getEnv('executions.queueRecovery.interval') * 60 * 1000,
 	};
 
-	scheduleQueueRecovery(waitMs = this.queueRecoveryContext.waitMs) {
+	private scheduleQueueRecovery(waitMs = this.queueRecoveryContext.waitMs) {
 		this.queueRecoveryContext.timeout = setTimeout(async () => {
 			try {
 				const nextWaitMs = await this.recoverFromQueue();
@@ -285,7 +309,7 @@ export class ScalingService {
 		this.logger.debug(`[ScalingService] Scheduled queue recovery check for next ${wait}`);
 	}
 
-	stopQueueRecovery() {
+	private stopQueueRecovery() {
 		clearTimeout(this.queueRecoveryContext.timeout);
 	}
 
diff --git a/packages/cli/src/scaling/types.ts b/packages/cli/src/scaling/scaling.types.ts
similarity index 85%
rename from packages/cli/src/scaling/types.ts
rename to packages/cli/src/scaling/scaling.types.ts
index b35d1d109d7c4..2599cf594bd1e 100644
--- a/packages/cli/src/scaling/types.ts
+++ b/packages/cli/src/scaling/scaling.types.ts
@@ -28,16 +28,19 @@ export type JobStatus = Bull.JobStatus;
 
 export type JobOptions = Bull.JobOptions;
 
-/** Message sent by worker to queue or by queue to worker. */
-export type JobMessage = RepondToWebhookMessage | AbortJobMessage;
+export type PubSubMessage = MessageToMain | MessageToWorker;
 
-export type RepondToWebhookMessage = {
+type MessageToMain = RepondToWebhookMessage;
+
+type MessageToWorker = AbortJobMessage;
+
+type RepondToWebhookMessage = {
 	kind: 'respond-to-webhook';
 	executionId: string;
 	response: IExecuteResponsePromiseData;
 };
 
-export type AbortJobMessage = {
+type AbortJobMessage = {
 	kind: 'abort-job';
 };
 
diff --git a/packages/cli/src/server.ts b/packages/cli/src/server.ts
index 30de80295ab6b..04faa431fe185 100644
--- a/packages/cli/src/server.ts
+++ b/packages/cli/src/server.ts
@@ -31,7 +31,7 @@ import { setupPushServer, setupPushHandler } from '@/push';
 import { isLdapEnabled } from '@/ldap/helpers.ee';
 import { AbstractServer } from '@/abstract-server';
 import { PostHogClient } from '@/posthog';
-import { MessageEventBus } from '@/eventbus/MessageEventBus/MessageEventBus';
+import { MessageEventBus } from '@/eventbus/message-event-bus/message-event-bus';
 import { handleMfaDisable, isMfaFeatureEnabled } from '@/mfa/helpers';
 import type { FrontendService } from '@/services/frontend.service';
 import { OrchestrationService } from '@/services/orchestration.service';
@@ -155,10 +155,10 @@ export class Server extends AbstractServer {
 		// ----------------------------------------
 		try {
 			const { SourceControlService } = await import(
-				'@/environments/sourceControl/sourceControl.service.ee'
+				'@/environments/source-control/source-control.service.ee'
 			);
 			await Container.get(SourceControlService).init();
-			await import('@/environments/sourceControl/sourceControl.controller.ee');
+			await import('@/environments/source-control/source-control.controller.ee');
 			await import('@/environments/variables/variables.controller.ee');
 		} catch (error) {
 			this.logger.warn(`Source Control initialization failed: ${(error as Error).message}`);
diff --git a/packages/cli/src/services/__tests__/orchestration.service.test.ts b/packages/cli/src/services/__tests__/orchestration.service.test.ts
index 99c92ad0700e8..811643b9671ea 100644
--- a/packages/cli/src/services/__tests__/orchestration.service.test.ts
+++ b/packages/cli/src/services/__tests__/orchestration.service.test.ts
@@ -7,7 +7,7 @@ import type { WorkflowActivateMode } from 'n8n-workflow';
 import config from '@/config';
 import { OrchestrationService } from '@/services/orchestration.service';
 import type { RedisServiceWorkerResponseObject } from '@/services/redis/RedisServiceCommands';
-import { MessageEventBus } from '@/eventbus/MessageEventBus/MessageEventBus';
+import { MessageEventBus } from '@/eventbus/message-event-bus/message-event-bus';
 import { RedisService } from '@/services/redis.service';
 import { handleWorkerResponseMessageMain } from '@/services/orchestration/main/handleWorkerResponseMessageMain';
 import { handleCommandMessageMain } from '@/services/orchestration/main/handleCommandMessageMain';
diff --git a/packages/cli/src/services/frontend.service.ts b/packages/cli/src/services/frontend.service.ts
index 24f8a3505b0de..1e70c972a05ab 100644
--- a/packages/cli/src/services/frontend.service.ts
+++ b/packages/cli/src/services/frontend.service.ts
@@ -22,7 +22,7 @@ import { License } from '@/license';
 import { getCurrentAuthenticationMethod } from '@/sso/sso-helpers';
 import { getLdapLoginLabel } from '@/ldap/helpers.ee';
 import { getSamlLoginLabel } from '@/sso/saml/saml-helpers';
-import { getVariablesLimit } from '@/environments/variables/environmentHelpers';
+import { getVariablesLimit } from '@/environments/variables/environment-helpers';
 import {
 	getWorkflowHistoryLicensePruneTime,
 	getWorkflowHistoryPruneTime,
diff --git a/packages/cli/src/services/orchestration/main/handleCommandMessageMain.ts b/packages/cli/src/services/orchestration/main/handleCommandMessageMain.ts
index 1cdb3cf7f1cef..266304ff30929 100644
--- a/packages/cli/src/services/orchestration/main/handleCommandMessageMain.ts
+++ b/packages/cli/src/services/orchestration/main/handleCommandMessageMain.ts
@@ -1,7 +1,7 @@
 import { Container } from 'typedi';
 import { debounceMessageReceiver, messageToRedisServiceCommandObject } from '../helpers';
 import config from '@/config';
-import { MessageEventBus } from '@/eventbus/MessageEventBus/MessageEventBus';
+import { MessageEventBus } from '@/eventbus/message-event-bus/message-event-bus';
 import { ExternalSecretsManager } from '@/external-secrets/external-secrets-manager.ee';
 import { License } from '@/license';
 import { Logger } from '@/logger';
diff --git a/packages/cli/src/services/orchestration/webhook/handleCommandMessageWebhook.ts b/packages/cli/src/services/orchestration/webhook/handleCommandMessageWebhook.ts
index c6f746db639b1..7f01017e72b94 100644
--- a/packages/cli/src/services/orchestration/webhook/handleCommandMessageWebhook.ts
+++ b/packages/cli/src/services/orchestration/webhook/handleCommandMessageWebhook.ts
@@ -1,6 +1,6 @@
 import { ExternalSecretsManager } from '@/external-secrets/external-secrets-manager.ee';
 import { License } from '@/license';
-import { MessageEventBus } from '@/eventbus/MessageEventBus/MessageEventBus';
+import { MessageEventBus } from '@/eventbus/message-event-bus/message-event-bus';
 import Container from 'typedi';
 import { Logger } from 'winston';
 import { messageToRedisServiceCommandObject, debounceMessageReceiver } from '../helpers';
diff --git a/packages/cli/src/services/orchestration/worker/handleCommandMessageWorker.ts b/packages/cli/src/services/orchestration/worker/handleCommandMessageWorker.ts
index 52727c37e199e..f3a991fb1681d 100644
--- a/packages/cli/src/services/orchestration/worker/handleCommandMessageWorker.ts
+++ b/packages/cli/src/services/orchestration/worker/handleCommandMessageWorker.ts
@@ -4,7 +4,7 @@ import type { RedisServiceCommandObject } from '@/services/redis/RedisServiceCom
 import { COMMAND_REDIS_CHANNEL } from '@/services/redis/RedisConstants';
 import * as os from 'os';
 import { License } from '@/license';
-import { MessageEventBus } from '@/eventbus/MessageEventBus/MessageEventBus';
+import { MessageEventBus } from '@/eventbus/message-event-bus/message-event-bus';
 import { ExternalSecretsManager } from '@/external-secrets/external-secrets-manager.ee';
 import { debounceMessageReceiver, getOsCpuString } from '../helpers';
 import type { WorkerCommandReceivedHandlerOptions } from './types';
diff --git a/packages/cli/src/services/orchestration/worker/types.ts b/packages/cli/src/services/orchestration/worker/types.ts
index 84c515466e2c2..957a6106badf8 100644
--- a/packages/cli/src/services/orchestration/worker/types.ts
+++ b/packages/cli/src/services/orchestration/worker/types.ts
@@ -1,6 +1,6 @@
 import type { ExecutionStatus, WorkflowExecuteMode } from 'n8n-workflow';
 import type { RedisServicePubSubPublisher } from '../../redis/RedisServicePubSubPublisher';
-import type { RunningJobSummary } from '@/scaling/types';
+import type { RunningJobSummary } from '@/scaling/scaling.types';
 
 export interface WorkerCommandReceivedHandlerOptions {
 	queueModeId: string;
diff --git a/packages/cli/src/services/redis/redis-client.service.ts b/packages/cli/src/services/redis/redis-client.service.ts
index bf70d8114d37e..822392708631b 100644
--- a/packages/cli/src/services/redis/redis-client.service.ts
+++ b/packages/cli/src/services/redis/redis-client.service.ts
@@ -2,12 +2,10 @@ import { Service } from 'typedi';
 import { Logger } from '@/logger';
 import ioRedis from 'ioredis';
 import type { Cluster, RedisOptions } from 'ioredis';
-import type { RedisClientType } from './redis.types';
-
-import { OnShutdown } from '@/decorators/on-shutdown';
-import { LOWEST_SHUTDOWN_PRIORITY } from '@/constants';
 import { GlobalConfig } from '@n8n/config';
 
+import type { RedisClientType } from './redis.types';
+
 @Service()
 export class RedisClientService {
 	private readonly clients = new Set<ioRedis | Cluster>();
@@ -28,13 +26,6 @@ export class RedisClientService {
 		return client;
 	}
 
-	@OnShutdown(LOWEST_SHUTDOWN_PRIORITY)
-	disconnectClients() {
-		for (const client of this.clients) {
-			client.disconnect();
-		}
-	}
-
 	/**
 	 * Ensure prefix is wrapped in curly braces for Redis cluster.
 	 * See: https://github.com/OptimalBits/bull/blob/develop/PATTERNS.md
diff --git a/packages/cli/src/telemetry/index.ts b/packages/cli/src/telemetry/index.ts
index 2aec0f07d2cfb..15ed348fa9fbd 100644
--- a/packages/cli/src/telemetry/index.ts
+++ b/packages/cli/src/telemetry/index.ts
@@ -11,7 +11,7 @@ import { Logger } from '@/logger';
 import { License } from '@/license';
 import { LOWEST_SHUTDOWN_PRIORITY, N8N_VERSION } from '@/constants';
 import { WorkflowRepository } from '@db/repositories/workflow.repository';
-import { SourceControlPreferencesService } from '../environments/sourceControl/sourceControlPreferences.service.ee';
+import { SourceControlPreferencesService } from '../environments/source-control/source-control-preferences.service.ee';
 import { UserRepository } from '@db/repositories/user.repository';
 import { ProjectRepository } from '@/databases/repositories/project.repository';
 import { ProjectRelationRepository } from '@/databases/repositories/projectRelation.repository';
diff --git a/packages/cli/src/workflow-execute-additional-data.ts b/packages/cli/src/workflow-execute-additional-data.ts
index 459c94692666d..2e0bda061eda9 100644
--- a/packages/cli/src/workflow-execute-additional-data.ts
+++ b/packages/cli/src/workflow-execute-additional-data.ts
@@ -69,7 +69,7 @@ import { WorkflowStaticDataService } from './workflows/workflow-static-data.serv
 import { WorkflowRepository } from './databases/repositories/workflow.repository';
 import { UrlService } from './services/url.service';
 import { WorkflowExecutionService } from './workflows/workflow-execution.service';
-import { MessageEventBus } from '@/eventbus/MessageEventBus/MessageEventBus';
+import { MessageEventBus } from '@/eventbus/message-event-bus/message-event-bus';
 import { EventService } from './events/event.service';
 import { GlobalConfig } from '@n8n/config';
 import { SubworkflowPolicyChecker } from './subworkflows/subworkflow-policy-checker.service';
diff --git a/packages/cli/src/workflow-runner.ts b/packages/cli/src/workflow-runner.ts
index b8012b3d4f25a..acfbdafd0135e 100644
--- a/packages/cli/src/workflow-runner.ts
+++ b/packages/cli/src/workflow-runner.ts
@@ -28,7 +28,7 @@ import { ExecutionRepository } from '@db/repositories/execution.repository';
 import { ExternalHooks } from '@/external-hooks';
 import type { IExecutionResponse, IWorkflowExecutionDataProcess } from '@/Interfaces';
 import { NodeTypes } from '@/node-types';
-import type { Job, JobData, JobResult } from '@/scaling/types';
+import type { Job, JobData, JobResult } from '@/scaling/scaling.types';
 import type { ScalingService } from '@/scaling/scaling.service';
 import * as WorkflowHelpers from '@/workflow-helpers';
 import * as WorkflowExecuteAdditionalData from '@/workflow-execute-additional-data';
diff --git a/packages/cli/test/integration/commands/worker.cmd.test.ts b/packages/cli/test/integration/commands/worker.cmd.test.ts
index aad419d23b177..3bfac6a07c669 100644
--- a/packages/cli/test/integration/commands/worker.cmd.test.ts
+++ b/packages/cli/test/integration/commands/worker.cmd.test.ts
@@ -3,7 +3,7 @@ import { BinaryDataService } from 'n8n-core';
 import { Worker } from '@/commands/worker';
 import config from '@/config';
 import { ExternalSecretsManager } from '@/external-secrets/external-secrets-manager.ee';
-import { MessageEventBus } from '@/eventbus/MessageEventBus/MessageEventBus';
+import { MessageEventBus } from '@/eventbus/message-event-bus/message-event-bus';
 import { LoadNodesAndCredentials } from '@/load-nodes-and-credentials';
 import { OrchestrationHandlerWorkerService } from '@/services/orchestration/worker/orchestration.handler.worker.service';
 import { OrchestrationWorkerService } from '@/services/orchestration/worker/orchestration.worker.service';
diff --git a/packages/cli/test/integration/environments/SourceControl.test.ts b/packages/cli/test/integration/environments/SourceControl.test.ts
index cac369422b772..5bb5d8089b597 100644
--- a/packages/cli/test/integration/environments/SourceControl.test.ts
+++ b/packages/cli/test/integration/environments/SourceControl.test.ts
@@ -2,9 +2,9 @@ import { Container } from 'typedi';
 
 import type { User } from '@db/entities/User';
 import config from '@/config';
-import { SourceControlPreferencesService } from '@/environments/sourceControl/sourceControlPreferences.service.ee';
-import { SourceControlService } from '@/environments/sourceControl/sourceControl.service.ee';
-import type { SourceControlledFile } from '@/environments/sourceControl/types/sourceControlledFile';
+import { SourceControlPreferencesService } from '@/environments/source-control/source-control-preferences.service.ee';
+import { SourceControlService } from '@/environments/source-control/source-control.service.ee';
+import type { SourceControlledFile } from '@/environments/source-control/types/source-controlled-file';
 
 import * as utils from '../shared/utils/';
 import { createUser } from '../shared/db/users';
diff --git a/packages/cli/test/integration/environments/source-control-import.service.test.ts b/packages/cli/test/integration/environments/source-control-import.service.test.ts
index 4665178a3fb11..56ba90cddc1d5 100644
--- a/packages/cli/test/integration/environments/source-control-import.service.test.ts
+++ b/packages/cli/test/integration/environments/source-control-import.service.test.ts
@@ -7,12 +7,12 @@ import { nanoid } from 'nanoid';
 import type { InstanceSettings } from 'n8n-core';
 
 import * as testDb from '../shared/testDb';
-import { SourceControlImportService } from '@/environments/sourceControl/sourceControlImport.service.ee';
+import { SourceControlImportService } from '@/environments/source-control/source-control-import.service.ee';
 import { createMember, getGlobalOwner } from '../shared/db/users';
 import { SharedCredentialsRepository } from '@/databases/repositories/sharedCredentials.repository';
 import { mockInstance } from '../../shared/mocking';
-import type { SourceControlledFile } from '@/environments/sourceControl/types/sourceControlledFile';
-import type { ExportableCredential } from '@/environments/sourceControl/types/exportableCredential';
+import type { SourceControlledFile } from '@/environments/source-control/types/source-controlled-file';
+import type { ExportableCredential } from '@/environments/source-control/types/exportable-credential';
 import { createTeamProject, getPersonalProject } from '../shared/db/projects';
 import { ProjectRepository } from '@/databases/repositories/project.repository';
 import { saveCredential } from '../shared/db/credentials';
diff --git a/packages/cli/test/integration/eventbus.ee.test.ts b/packages/cli/test/integration/eventbus.ee.test.ts
index f21822683b854..9146b8b87c392 100644
--- a/packages/cli/test/integration/eventbus.ee.test.ts
+++ b/packages/cli/test/integration/eventbus.ee.test.ts
@@ -14,13 +14,13 @@ import {
 } from 'n8n-workflow';
 
 import type { User } from '@db/entities/User';
-import { MessageEventBus } from '@/eventbus/MessageEventBus/MessageEventBus';
-import { EventMessageGeneric } from '@/eventbus/EventMessageClasses/EventMessageGeneric';
-import type { MessageEventBusDestinationSyslog } from '@/eventbus/MessageEventBusDestination/MessageEventBusDestinationSyslog.ee';
-import type { MessageEventBusDestinationWebhook } from '@/eventbus/MessageEventBusDestination/MessageEventBusDestinationWebhook.ee';
-import type { MessageEventBusDestinationSentry } from '@/eventbus/MessageEventBusDestination/MessageEventBusDestinationSentry.ee';
-import { EventMessageAudit } from '@/eventbus/EventMessageClasses/EventMessageAudit';
-import type { EventNamesTypes } from '@/eventbus/EventMessageClasses';
+import { MessageEventBus } from '@/eventbus/message-event-bus/message-event-bus';
+import { EventMessageGeneric } from '@/eventbus/event-message-classes/event-message-generic';
+import type { MessageEventBusDestinationSyslog } from '@/eventbus/message-event-bus-destination/message-event-bus-destination-syslog.ee';
+import type { MessageEventBusDestinationWebhook } from '@/eventbus/message-event-bus-destination/message-event-bus-destination-webhook.ee';
+import type { MessageEventBusDestinationSentry } from '@/eventbus/message-event-bus-destination/message-event-bus-destination-sentry.ee';
+import { EventMessageAudit } from '@/eventbus/event-message-classes/event-message-audit';
+import type { EventNamesTypes } from '@/eventbus/event-message-classes';
 import { ExecutionRecoveryService } from '@/executions/execution-recovery.service';
 
 import * as utils from './shared/utils';
@@ -28,7 +28,7 @@ import { createUser } from './shared/db/users';
 import { mockInstance } from '../shared/mocking';
 import type { SuperAgentTest } from './shared/types';
 
-jest.unmock('@/eventbus/MessageEventBus/MessageEventBus');
+jest.unmock('@/eventbus/message-event-bus/message-event-bus');
 jest.mock('axios');
 const mockedAxios = axios as jest.Mocked<typeof axios>;
 jest.mock('syslog-client');
@@ -96,7 +96,7 @@ beforeAll(async () => {
 });
 
 afterAll(async () => {
-	jest.mock('@/eventbus/MessageEventBus/MessageEventBus');
+	jest.mock('@/eventbus/message-event-bus/message-event-bus');
 	await eventBus?.close();
 });
 
diff --git a/packages/cli/test/integration/eventbus.test.ts b/packages/cli/test/integration/eventbus.test.ts
index e4e58f96fa330..3b36222ec2cd1 100644
--- a/packages/cli/test/integration/eventbus.test.ts
+++ b/packages/cli/test/integration/eventbus.test.ts
@@ -1,5 +1,5 @@
 import type { User } from '@db/entities/User';
-import { MessageEventBus } from '@/eventbus/MessageEventBus/MessageEventBus';
+import { MessageEventBus } from '@/eventbus/message-event-bus/message-event-bus';
 import { ExecutionRecoveryService } from '@/executions/execution-recovery.service';
 
 import * as utils from './shared/utils/';
diff --git a/packages/cli/test/integration/prometheus-metrics.test.ts b/packages/cli/test/integration/prometheus-metrics.test.ts
index 1eccb9b7d0ce2..f6710ba3a5ec4 100644
--- a/packages/cli/test/integration/prometheus-metrics.test.ts
+++ b/packages/cli/test/integration/prometheus-metrics.test.ts
@@ -7,7 +7,7 @@ import { PrometheusMetricsService } from '@/metrics/prometheus-metrics.service';
 import { setupTestServer } from './shared/utils';
 import { GlobalConfig } from '@n8n/config';
 
-jest.unmock('@/eventbus/MessageEventBus/MessageEventBus');
+jest.unmock('@/eventbus/message-event-bus/message-event-bus');
 
 const toLines = (response: Response) => response.text.trim().split('\n');
 
diff --git a/packages/cli/test/integration/shared/utils/testServer.ts b/packages/cli/test/integration/shared/utils/testServer.ts
index c40285829e805..b75a7804b74d8 100644
--- a/packages/cli/test/integration/shared/utils/testServer.ts
+++ b/packages/cli/test/integration/shared/utils/testServer.ts
@@ -179,7 +179,7 @@ export const setupTestServer = ({
 						break;
 
 					case 'sourceControl':
-						await import('@/environments/sourceControl/sourceControl.controller.ee');
+						await import('@/environments/source-control/source-control.controller.ee');
 						break;
 
 					case 'community-packages':
diff --git a/packages/cli/test/integration/workflows/workflow.service.test.ts b/packages/cli/test/integration/workflows/workflow.service.test.ts
index 1853c17839288..084b41d212214 100644
--- a/packages/cli/test/integration/workflows/workflow.service.test.ts
+++ b/packages/cli/test/integration/workflows/workflow.service.test.ts
@@ -3,7 +3,7 @@ import { mock } from 'jest-mock-extended';
 import { ActiveWorkflowManager } from '@/active-workflow-manager';
 import { SharedWorkflowRepository } from '@db/repositories/sharedWorkflow.repository';
 import { WorkflowRepository } from '@db/repositories/workflow.repository';
-import { MessageEventBus } from '@/eventbus/MessageEventBus/MessageEventBus';
+import { MessageEventBus } from '@/eventbus/message-event-bus/message-event-bus';
 import { Telemetry } from '@/telemetry';
 import { OrchestrationService } from '@/services/orchestration.service';
 import { WorkflowService } from '@/workflows/workflow.service';
diff --git a/packages/cli/test/setup-mocks.ts b/packages/cli/test/setup-mocks.ts
index c6db2d147cdc8..63d60cd5224ee 100644
--- a/packages/cli/test/setup-mocks.ts
+++ b/packages/cli/test/setup-mocks.ts
@@ -3,5 +3,5 @@ import 'reflect-metadata';
 jest.mock('@sentry/node');
 jest.mock('@n8n_io/license-sdk');
 jest.mock('@/telemetry');
-jest.mock('@/eventbus/MessageEventBus/MessageEventBus');
+jest.mock('@/eventbus/message-event-bus/message-event-bus');
 jest.mock('@/push');
diff --git a/packages/core/src/InstanceSettings.ts b/packages/core/src/InstanceSettings.ts
index f75e1df712108..fb57cbc36b7c4 100644
--- a/packages/core/src/InstanceSettings.ts
+++ b/packages/core/src/InstanceSettings.ts
@@ -40,8 +40,15 @@ export class InstanceSettings {
 
 	readonly instanceId = this.generateInstanceId();
 
-	/** Always `leader` in single-main setup. `leader` or `follower` in multi-main setup. */
-	private instanceRole: InstanceRole = 'unset';
+	/**
+	 * A main is:
+	 * - `unset` during bootup,
+	 * - `leader` after bootup in single-main setup,
+	 * - `leader` or `follower` after bootup in multi-main setup.
+	 *
+	 * A non-main instance type (e.g. `worker`) is always `unset`.
+	 */
+	instanceRole: InstanceRole = 'unset';
 
 	get isLeader() {
 		return this.instanceRole === 'leader';
diff --git a/packages/design-system/src/components/AskAssistantAvatar/__tests__/AskAssistantAvatar.spec.ts b/packages/design-system/src/components/AskAssistantAvatar/__tests__/AskAssistantAvatar.spec.ts
new file mode 100644
index 0000000000000..94857ed4dbb34
--- /dev/null
+++ b/packages/design-system/src/components/AskAssistantAvatar/__tests__/AskAssistantAvatar.spec.ts
@@ -0,0 +1,21 @@
+import { render } from '@testing-library/vue';
+import AssistantAvatar from '../AssistantAvatar.vue';
+
+describe('AskAssistantAvatar', () => {
+	it('renders small avatar correctly', () => {
+		const { container } = render(AssistantAvatar, {
+			props: {
+				size: 'small',
+			},
+		});
+		expect(container).toMatchSnapshot();
+	});
+	it('renders mini avatar correctly', () => {
+		const { container } = render(AssistantAvatar, {
+			props: {
+				size: 'mini',
+			},
+		});
+		expect(container).toMatchSnapshot();
+	});
+});
diff --git a/packages/design-system/src/components/AskAssistantAvatar/__tests__/__snapshots__/AskAssistantAvatar.spec.ts.snap b/packages/design-system/src/components/AskAssistantAvatar/__tests__/__snapshots__/AskAssistantAvatar.spec.ts.snap
new file mode 100644
index 0000000000000..ba82ada82e251
--- /dev/null
+++ b/packages/design-system/src/components/AskAssistantAvatar/__tests__/__snapshots__/AskAssistantAvatar.spec.ts.snap
@@ -0,0 +1,87 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AskAssistantAvatar > renders mini avatar correctly 1`] = `
+<div>
+  <div
+    class="container mini"
+  >
+    <svg
+      fill="none"
+      height="8"
+      viewBox="0 0 24 24"
+      width="8"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19.9658 14.0171C19.9679 14.3549 19.8654 14.6851 19.6722 14.9622C19.479 15.2393 19.2046 15.4497 18.8869 15.5645L13.5109 17.5451L11.5303 22.9211C11.4137 23.2376 11.2028 23.5107 10.9261 23.7037C10.6494 23.8966 10.3202 24 9.9829 24C9.64559 24 9.3164 23.8966 9.0397 23.7037C8.76301 23.5107 8.55212 23.2376 8.43549 22.9211L6.45487 17.5451L1.07888 15.5645C0.762384 15.4479 0.489262 15.237 0.296347 14.9603C0.103431 14.6836 0 14.3544 0 14.0171C0 13.6798 0.103431 13.3506 0.296347 13.0739C0.489262 12.7972 0.762384 12.5863 1.07888 12.4697L6.45487 10.4891L8.43549 5.11309C8.55212 4.79659 8.76301 4.52347 9.0397 4.33055C9.3164 4.13764 9.64559 4.0342 9.9829 4.0342C10.3202 4.0342 10.6494 4.13764 10.9261 4.33055C11.2028 4.52347 11.4137 4.79659 11.5303 5.11309L13.5109 10.4891L18.8869 12.4697C19.2046 12.5845 19.479 12.7949 19.6722 13.072C19.8654 13.3491 19.9679 13.6793 19.9658 14.0171ZM14.1056 4.12268H15.7546V5.77175C15.7546 5.99043 15.8415 6.20015 15.9961 6.35478C16.1508 6.50941 16.3605 6.59628 16.5792 6.59628C16.7979 6.59628 17.0076 6.50941 17.1622 6.35478C17.3168 6.20015 17.4037 5.99043 17.4037 5.77175V4.12268H19.0528C19.2715 4.12268 19.4812 4.03581 19.6358 3.88118C19.7905 3.72655 19.8773 3.51682 19.8773 3.29814C19.8773 3.07946 19.7905 2.86974 19.6358 2.71511C19.4812 2.56048 19.2715 2.47361 19.0528 2.47361H17.4037V0.824535C17.4037 0.605855 17.3168 0.396131 17.1622 0.241501C17.0076 0.0868704 16.7979 0 16.5792 0C16.3605 0 16.1508 0.0868704 15.9961 0.241501C15.8415 0.396131 15.7546 0.605855 15.7546 0.824535V2.47361H14.1056C13.8869 2.47361 13.6772 2.56048 13.5225 2.71511C13.3679 2.86974 13.281 3.07946 13.281 3.29814C13.281 3.51682 13.3679 3.72655 13.5225 3.88118C13.6772 4.03581 13.8869 4.12268 14.1056 4.12268ZM23.1755 7.42082H22.3509V6.59628C22.3509 6.3776 22.2641 6.16788 22.1094 6.01325C21.9548 5.85862 21.7451 5.77175 21.5264 5.77175C21.3077 5.77175 21.098 5.85862 20.9434 6.01325C20.7887 6.16788 20.7019 6.3776 20.7019 6.59628V7.42082H19.8773C19.6586 7.42082 19.4489 7.50769 19.2943 7.66232C19.1397 7.81695 19.0528 8.02667 19.0528 8.24535C19.0528 8.46404 19.1397 8.67376 19.2943 8.82839C19.4489 8.98302 19.6586 9.06989 19.8773 9.06989H20.7019V9.89443C20.7019 10.1131 20.7887 10.3228 20.9434 10.4775C21.098 10.6321 21.3077 10.719 21.5264 10.719C21.7451 10.719 21.9548 10.6321 22.1094 10.4775C22.2641 10.3228 22.3509 10.1131 22.3509 9.89443V9.06989H23.1755C23.3941 9.06989 23.6039 8.98302 23.7585 8.82839C23.9131 8.67376 24 8.46404 24 8.24535C24 8.02667 23.9131 7.81695 23.7585 7.66232C23.6039 7.50769 23.3941 7.42082 23.1755 7.42082Z"
+        fill="white"
+      />
+      <defs>
+        <lineargradient
+          gradientUnits="userSpaceOnUse"
+          id="paint0_linear_173_12825"
+          x1="-3.67094e-07"
+          x2="28.8315"
+          y1="-0.000120994"
+          y2="9.82667"
+        >
+          <stop
+            stop-color="var(--color-assistant-highlight-1)"
+          />
+          <stop
+            offset="0.495"
+            stop-color="var(--color-assistant-highlight-2)"
+          />
+          <stop
+            offset="1"
+            stop-color="var(--color-assistant-highlight-3)"
+          />
+        </lineargradient>
+      </defs>
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`AskAssistantAvatar > renders small avatar correctly 1`] = `
+<div>
+  <div
+    class="container small"
+  >
+    <svg
+      fill="none"
+      height="10"
+      viewBox="0 0 24 24"
+      width="10"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19.9658 14.0171C19.9679 14.3549 19.8654 14.6851 19.6722 14.9622C19.479 15.2393 19.2046 15.4497 18.8869 15.5645L13.5109 17.5451L11.5303 22.9211C11.4137 23.2376 11.2028 23.5107 10.9261 23.7037C10.6494 23.8966 10.3202 24 9.9829 24C9.64559 24 9.3164 23.8966 9.0397 23.7037C8.76301 23.5107 8.55212 23.2376 8.43549 22.9211L6.45487 17.5451L1.07888 15.5645C0.762384 15.4479 0.489262 15.237 0.296347 14.9603C0.103431 14.6836 0 14.3544 0 14.0171C0 13.6798 0.103431 13.3506 0.296347 13.0739C0.489262 12.7972 0.762384 12.5863 1.07888 12.4697L6.45487 10.4891L8.43549 5.11309C8.55212 4.79659 8.76301 4.52347 9.0397 4.33055C9.3164 4.13764 9.64559 4.0342 9.9829 4.0342C10.3202 4.0342 10.6494 4.13764 10.9261 4.33055C11.2028 4.52347 11.4137 4.79659 11.5303 5.11309L13.5109 10.4891L18.8869 12.4697C19.2046 12.5845 19.479 12.7949 19.6722 13.072C19.8654 13.3491 19.9679 13.6793 19.9658 14.0171ZM14.1056 4.12268H15.7546V5.77175C15.7546 5.99043 15.8415 6.20015 15.9961 6.35478C16.1508 6.50941 16.3605 6.59628 16.5792 6.59628C16.7979 6.59628 17.0076 6.50941 17.1622 6.35478C17.3168 6.20015 17.4037 5.99043 17.4037 5.77175V4.12268H19.0528C19.2715 4.12268 19.4812 4.03581 19.6358 3.88118C19.7905 3.72655 19.8773 3.51682 19.8773 3.29814C19.8773 3.07946 19.7905 2.86974 19.6358 2.71511C19.4812 2.56048 19.2715 2.47361 19.0528 2.47361H17.4037V0.824535C17.4037 0.605855 17.3168 0.396131 17.1622 0.241501C17.0076 0.0868704 16.7979 0 16.5792 0C16.3605 0 16.1508 0.0868704 15.9961 0.241501C15.8415 0.396131 15.7546 0.605855 15.7546 0.824535V2.47361H14.1056C13.8869 2.47361 13.6772 2.56048 13.5225 2.71511C13.3679 2.86974 13.281 3.07946 13.281 3.29814C13.281 3.51682 13.3679 3.72655 13.5225 3.88118C13.6772 4.03581 13.8869 4.12268 14.1056 4.12268ZM23.1755 7.42082H22.3509V6.59628C22.3509 6.3776 22.2641 6.16788 22.1094 6.01325C21.9548 5.85862 21.7451 5.77175 21.5264 5.77175C21.3077 5.77175 21.098 5.85862 20.9434 6.01325C20.7887 6.16788 20.7019 6.3776 20.7019 6.59628V7.42082H19.8773C19.6586 7.42082 19.4489 7.50769 19.2943 7.66232C19.1397 7.81695 19.0528 8.02667 19.0528 8.24535C19.0528 8.46404 19.1397 8.67376 19.2943 8.82839C19.4489 8.98302 19.6586 9.06989 19.8773 9.06989H20.7019V9.89443C20.7019 10.1131 20.7887 10.3228 20.9434 10.4775C21.098 10.6321 21.3077 10.719 21.5264 10.719C21.7451 10.719 21.9548 10.6321 22.1094 10.4775C22.2641 10.3228 22.3509 10.1131 22.3509 9.89443V9.06989H23.1755C23.3941 9.06989 23.6039 8.98302 23.7585 8.82839C23.9131 8.67376 24 8.46404 24 8.24535C24 8.02667 23.9131 7.81695 23.7585 7.66232C23.6039 7.50769 23.3941 7.42082 23.1755 7.42082Z"
+        fill="white"
+      />
+      <defs>
+        <lineargradient
+          gradientUnits="userSpaceOnUse"
+          id="paint0_linear_173_12825"
+          x1="-3.67094e-07"
+          x2="28.8315"
+          y1="-0.000120994"
+          y2="9.82667"
+        >
+          <stop
+            stop-color="var(--color-assistant-highlight-1)"
+          />
+          <stop
+            offset="0.495"
+            stop-color="var(--color-assistant-highlight-2)"
+          />
+          <stop
+            offset="1"
+            stop-color="var(--color-assistant-highlight-3)"
+          />
+        </lineargradient>
+      </defs>
+    </svg>
+  </div>
+</div>
+`;
diff --git a/packages/design-system/src/components/AskAssistantButton/__tests__/AskAssistantButton.spec.ts b/packages/design-system/src/components/AskAssistantButton/__tests__/AskAssistantButton.spec.ts
new file mode 100644
index 0000000000000..13d96d4a622bb
--- /dev/null
+++ b/packages/design-system/src/components/AskAssistantButton/__tests__/AskAssistantButton.spec.ts
@@ -0,0 +1,17 @@
+import { render } from '@testing-library/vue';
+import AskAssistantButton from '../AskAssistantButton.vue';
+
+describe('AskAssistantButton', () => {
+	it('renders default button correctly', () => {
+		const { container } = render(AskAssistantButton, {});
+		expect(container).toMatchSnapshot();
+	});
+	it('renders button with unread messages correctly', () => {
+		const { container } = render(AskAssistantButton, {
+			props: {
+				unreadCount: 3,
+			},
+		});
+		expect(container).toMatchSnapshot();
+	});
+});
diff --git a/packages/design-system/src/components/AskAssistantButton/__tests__/__snapshots__/AskAssistantButton.spec.ts.snap b/packages/design-system/src/components/AskAssistantButton/__tests__/__snapshots__/AskAssistantButton.spec.ts.snap
new file mode 100644
index 0000000000000..5ff7a87d6ec93
--- /dev/null
+++ b/packages/design-system/src/components/AskAssistantButton/__tests__/__snapshots__/AskAssistantButton.spec.ts.snap
@@ -0,0 +1,96 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AskAssistantButton > renders button with unread messages correctly 1`] = `
+<div>
+  <button
+    class="button"
+  >
+    <div
+      class="num"
+    >
+      3
+    </div>
+    <div
+      class="text"
+      style="display: none;"
+    >
+      <div>
+        <span
+          class="text medium"
+        >
+          Ask Assistant
+        </span>
+      </div>
+      <div>
+        <div
+          class="beta"
+        >
+          beta
+        </div>
+      </div>
+    </div>
+  </button>
+</div>
+`;
+
+exports[`AskAssistantButton > renders default button correctly 1`] = `
+<div>
+  <button
+    class="button"
+  >
+    <svg
+      fill="none"
+      height="18"
+      viewBox="0 0 24 24"
+      width="18"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19.9658 14.0171C19.9679 14.3549 19.8654 14.6851 19.6722 14.9622C19.479 15.2393 19.2046 15.4497 18.8869 15.5645L13.5109 17.5451L11.5303 22.9211C11.4137 23.2376 11.2028 23.5107 10.9261 23.7037C10.6494 23.8966 10.3202 24 9.9829 24C9.64559 24 9.3164 23.8966 9.0397 23.7037C8.76301 23.5107 8.55212 23.2376 8.43549 22.9211L6.45487 17.5451L1.07888 15.5645C0.762384 15.4479 0.489262 15.237 0.296347 14.9603C0.103431 14.6836 0 14.3544 0 14.0171C0 13.6798 0.103431 13.3506 0.296347 13.0739C0.489262 12.7972 0.762384 12.5863 1.07888 12.4697L6.45487 10.4891L8.43549 5.11309C8.55212 4.79659 8.76301 4.52347 9.0397 4.33055C9.3164 4.13764 9.64559 4.0342 9.9829 4.0342C10.3202 4.0342 10.6494 4.13764 10.9261 4.33055C11.2028 4.52347 11.4137 4.79659 11.5303 5.11309L13.5109 10.4891L18.8869 12.4697C19.2046 12.5845 19.479 12.7949 19.6722 13.072C19.8654 13.3491 19.9679 13.6793 19.9658 14.0171ZM14.1056 4.12268H15.7546V5.77175C15.7546 5.99043 15.8415 6.20015 15.9961 6.35478C16.1508 6.50941 16.3605 6.59628 16.5792 6.59628C16.7979 6.59628 17.0076 6.50941 17.1622 6.35478C17.3168 6.20015 17.4037 5.99043 17.4037 5.77175V4.12268H19.0528C19.2715 4.12268 19.4812 4.03581 19.6358 3.88118C19.7905 3.72655 19.8773 3.51682 19.8773 3.29814C19.8773 3.07946 19.7905 2.86974 19.6358 2.71511C19.4812 2.56048 19.2715 2.47361 19.0528 2.47361H17.4037V0.824535C17.4037 0.605855 17.3168 0.396131 17.1622 0.241501C17.0076 0.0868704 16.7979 0 16.5792 0C16.3605 0 16.1508 0.0868704 15.9961 0.241501C15.8415 0.396131 15.7546 0.605855 15.7546 0.824535V2.47361H14.1056C13.8869 2.47361 13.6772 2.56048 13.5225 2.71511C13.3679 2.86974 13.281 3.07946 13.281 3.29814C13.281 3.51682 13.3679 3.72655 13.5225 3.88118C13.6772 4.03581 13.8869 4.12268 14.1056 4.12268ZM23.1755 7.42082H22.3509V6.59628C22.3509 6.3776 22.2641 6.16788 22.1094 6.01325C21.9548 5.85862 21.7451 5.77175 21.5264 5.77175C21.3077 5.77175 21.098 5.85862 20.9434 6.01325C20.7887 6.16788 20.7019 6.3776 20.7019 6.59628V7.42082H19.8773C19.6586 7.42082 19.4489 7.50769 19.2943 7.66232C19.1397 7.81695 19.0528 8.02667 19.0528 8.24535C19.0528 8.46404 19.1397 8.67376 19.2943 8.82839C19.4489 8.98302 19.6586 9.06989 19.8773 9.06989H20.7019V9.89443C20.7019 10.1131 20.7887 10.3228 20.9434 10.4775C21.098 10.6321 21.3077 10.719 21.5264 10.719C21.7451 10.719 21.9548 10.6321 22.1094 10.4775C22.2641 10.3228 22.3509 10.1131 22.3509 9.89443V9.06989H23.1755C23.3941 9.06989 23.6039 8.98302 23.7585 8.82839C23.9131 8.67376 24 8.46404 24 8.24535C24 8.02667 23.9131 7.81695 23.7585 7.66232C23.6039 7.50769 23.3941 7.42082 23.1755 7.42082Z"
+        fill="url(#paint0_linear_173_12825)"
+      />
+      <defs>
+        <lineargradient
+          gradientUnits="userSpaceOnUse"
+          id="paint0_linear_173_12825"
+          x1="-3.67094e-07"
+          x2="28.8315"
+          y1="-0.000120994"
+          y2="9.82667"
+        >
+          <stop
+            stop-color="var(--color-assistant-highlight-1)"
+          />
+          <stop
+            offset="0.495"
+            stop-color="var(--color-assistant-highlight-2)"
+          />
+          <stop
+            offset="1"
+            stop-color="var(--color-assistant-highlight-3)"
+          />
+        </lineargradient>
+      </defs>
+    </svg>
+    <div
+      class="text"
+      style="display: none;"
+    >
+      <div>
+        <span
+          class="text medium"
+        >
+          Ask Assistant
+        </span>
+      </div>
+      <div>
+        <div
+          class="beta"
+        >
+          beta
+        </div>
+      </div>
+    </div>
+  </button>
+</div>
+`;
diff --git a/packages/design-system/src/components/AskAssistantChat/__tests__/AskAssistantChat.spec.ts b/packages/design-system/src/components/AskAssistantChat/__tests__/AskAssistantChat.spec.ts
new file mode 100644
index 0000000000000..6634c9807dccb
--- /dev/null
+++ b/packages/design-system/src/components/AskAssistantChat/__tests__/AskAssistantChat.spec.ts
@@ -0,0 +1,131 @@
+import { render } from '@testing-library/vue';
+import AskAssistantChat from '../AskAssistantChat.vue';
+
+describe('AskAssistantChat', () => {
+	it('renders default placeholder chat correctly', () => {
+		const { container } = render(AskAssistantChat, {
+			props: {
+				user: { firstName: 'Kobi', lastName: 'Dog' },
+			},
+		});
+		expect(container).toMatchSnapshot();
+	});
+	it('renders chat with messages correctly', () => {
+		const { container } = render(AskAssistantChat, {
+			props: {
+				user: { firstName: 'Kobi', lastName: 'Dog' },
+				messages: [
+					{
+						id: '1',
+						type: 'text',
+						role: 'assistant',
+						content:
+							'Hi Max! Here is my top solution to fix the error in your **Transform data** node👇',
+						read: false,
+					},
+					{
+						id: '1',
+						type: 'code-diff',
+						role: 'assistant',
+						description: 'Short solution description here that can spill over to two lines',
+						codeDiff:
+							'@@ -1,7 +1,6 @@\n-The Way that can be told of is not the eternal Way;\n-The name that can be named is not the eternal name.\nThe Nameless is the origin of Heaven and Earth;\n-The Named is the mother of all things.\n+The named is the mother of all things.\n+\nTherefore let there always be non-being,\nso we may see their subtlety,\nAnd let there always be being,\n@@ -9,3 +8,6 @@\n The two are the same,\n But after they are produced,\n they have different names.\n+They both may be called deep and profound.\n+Deeper and more profound,\n+The door of all subtleties!',
+						suggestionId: 'test',
+						quickReplies: [
+							{
+								type: 'new-suggestion',
+								text: 'Give me another solution',
+							},
+							{
+								type: 'resolved',
+								text: 'All good',
+							},
+						],
+						read: false,
+					},
+					{
+						id: '2',
+						type: 'text',
+						role: 'user',
+						content: 'Give it to me **ignore this markdown**',
+						read: false,
+					},
+					{
+						id: '2',
+						type: 'block',
+						role: 'assistant',
+						title: 'Credential doesn’t have correct permissions to send a message',
+						content:
+							'Solution steps:\n1. Lorem ipsum dolor sit amet, consectetur **adipiscing** elit. Proin id nulla placerat, tristique ex at, euismod dui.\n2. Copy this into somewhere\n3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id nulla placerat, tristique ex at, euismod dui.\n4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id nulla placerat, tristique ex at, euismod dui. \n Testing more code \n - Unordered item 1 \n - Unordered item 2',
+						read: false,
+					},
+					{
+						id: '2',
+						type: 'code-diff',
+						role: 'assistant',
+						description: 'Short solution with min height',
+						codeDiff:
+							'@@ -1,7 +1,6 @@\n-The Way that can be told of is not the eternal Way;\n-The name that can be named is not the eternal name.\n+The door of all subtleties!',
+						quickReplies: [
+							{
+								type: 'new-suggestion',
+								text: 'Give me another solution',
+							},
+							{
+								type: 'resolved',
+								text: 'All good',
+							},
+						],
+						suggestionId: 'test',
+						read: false,
+					},
+				],
+			},
+		});
+		expect(container).toMatchSnapshot();
+	});
+	it('renders streaming chat correctly', () => {
+		const { container } = render(AskAssistantChat, {
+			props: {
+				user: { firstName: 'Kobi', lastName: 'Dog' },
+				messages: [
+					{
+						id: '1',
+						type: 'text',
+						role: 'assistant',
+						content:
+							'Hi Max! Here is my top solution to fix the error in your **Transform data** node👇',
+						read: false,
+					},
+				],
+				isStreaming: true,
+			},
+		});
+		expect(container).toMatchSnapshot();
+	});
+	it('renders end of session chat correctly', () => {
+		const { container } = render(AskAssistantChat, {
+			props: {
+				user: { firstName: 'Kobi', lastName: 'Dog' },
+				messages: [
+					{
+						id: '1',
+						type: 'text',
+						role: 'assistant',
+						content:
+							'Hi Max! Here is my top solution to fix the error in your **Transform data** node👇',
+						read: false,
+					},
+					{
+						id: '123',
+						role: 'assistant',
+						type: 'event',
+						eventName: 'end-session',
+						read: false,
+					},
+				],
+			},
+		});
+		expect(container).toMatchSnapshot();
+	});
+});
diff --git a/packages/design-system/src/components/AskAssistantChat/__tests__/__snapshots__/AskAssistantChat.spec.ts.snap b/packages/design-system/src/components/AskAssistantChat/__tests__/__snapshots__/AskAssistantChat.spec.ts.snap
new file mode 100644
index 0000000000000..826732bdb8e59
--- /dev/null
+++ b/packages/design-system/src/components/AskAssistantChat/__tests__/__snapshots__/AskAssistantChat.spec.ts.snap
@@ -0,0 +1,1334 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AskAssistantChat > renders chat with messages correctly 1`] = `
+<div>
+  <div
+    class="container"
+  >
+    <div
+      class="header"
+    >
+      <div
+        class="chatTitle"
+      >
+        <div
+          class="headerText"
+        >
+          <svg
+            fill="none"
+            height="18"
+            viewBox="0 0 24 24"
+            width="18"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19.9658 14.0171C19.9679 14.3549 19.8654 14.6851 19.6722 14.9622C19.479 15.2393 19.2046 15.4497 18.8869 15.5645L13.5109 17.5451L11.5303 22.9211C11.4137 23.2376 11.2028 23.5107 10.9261 23.7037C10.6494 23.8966 10.3202 24 9.9829 24C9.64559 24 9.3164 23.8966 9.0397 23.7037C8.76301 23.5107 8.55212 23.2376 8.43549 22.9211L6.45487 17.5451L1.07888 15.5645C0.762384 15.4479 0.489262 15.237 0.296347 14.9603C0.103431 14.6836 0 14.3544 0 14.0171C0 13.6798 0.103431 13.3506 0.296347 13.0739C0.489262 12.7972 0.762384 12.5863 1.07888 12.4697L6.45487 10.4891L8.43549 5.11309C8.55212 4.79659 8.76301 4.52347 9.0397 4.33055C9.3164 4.13764 9.64559 4.0342 9.9829 4.0342C10.3202 4.0342 10.6494 4.13764 10.9261 4.33055C11.2028 4.52347 11.4137 4.79659 11.5303 5.11309L13.5109 10.4891L18.8869 12.4697C19.2046 12.5845 19.479 12.7949 19.6722 13.072C19.8654 13.3491 19.9679 13.6793 19.9658 14.0171ZM14.1056 4.12268H15.7546V5.77175C15.7546 5.99043 15.8415 6.20015 15.9961 6.35478C16.1508 6.50941 16.3605 6.59628 16.5792 6.59628C16.7979 6.59628 17.0076 6.50941 17.1622 6.35478C17.3168 6.20015 17.4037 5.99043 17.4037 5.77175V4.12268H19.0528C19.2715 4.12268 19.4812 4.03581 19.6358 3.88118C19.7905 3.72655 19.8773 3.51682 19.8773 3.29814C19.8773 3.07946 19.7905 2.86974 19.6358 2.71511C19.4812 2.56048 19.2715 2.47361 19.0528 2.47361H17.4037V0.824535C17.4037 0.605855 17.3168 0.396131 17.1622 0.241501C17.0076 0.0868704 16.7979 0 16.5792 0C16.3605 0 16.1508 0.0868704 15.9961 0.241501C15.8415 0.396131 15.7546 0.605855 15.7546 0.824535V2.47361H14.1056C13.8869 2.47361 13.6772 2.56048 13.5225 2.71511C13.3679 2.86974 13.281 3.07946 13.281 3.29814C13.281 3.51682 13.3679 3.72655 13.5225 3.88118C13.6772 4.03581 13.8869 4.12268 14.1056 4.12268ZM23.1755 7.42082H22.3509V6.59628C22.3509 6.3776 22.2641 6.16788 22.1094 6.01325C21.9548 5.85862 21.7451 5.77175 21.5264 5.77175C21.3077 5.77175 21.098 5.85862 20.9434 6.01325C20.7887 6.16788 20.7019 6.3776 20.7019 6.59628V7.42082H19.8773C19.6586 7.42082 19.4489 7.50769 19.2943 7.66232C19.1397 7.81695 19.0528 8.02667 19.0528 8.24535C19.0528 8.46404 19.1397 8.67376 19.2943 8.82839C19.4489 8.98302 19.6586 9.06989 19.8773 9.06989H20.7019V9.89443C20.7019 10.1131 20.7887 10.3228 20.9434 10.4775C21.098 10.6321 21.3077 10.719 21.5264 10.719C21.7451 10.719 21.9548 10.6321 22.1094 10.4775C22.2641 10.3228 22.3509 10.1131 22.3509 9.89443V9.06989H23.1755C23.3941 9.06989 23.6039 8.98302 23.7585 8.82839C23.9131 8.67376 24 8.46404 24 8.24535C24 8.02667 23.9131 7.81695 23.7585 7.66232C23.6039 7.50769 23.3941 7.42082 23.1755 7.42082Z"
+              fill="url(#paint0_linear_173_12825)"
+            />
+            <defs>
+              <lineargradient
+                gradientUnits="userSpaceOnUse"
+                id="paint0_linear_173_12825"
+                x1="-3.67094e-07"
+                x2="28.8315"
+                y1="-0.000120994"
+                y2="9.82667"
+              >
+                <stop
+                  stop-color="var(--color-assistant-highlight-1)"
+                />
+                <stop
+                  offset="0.495"
+                  stop-color="var(--color-assistant-highlight-2)"
+                />
+                <stop
+                  offset="1"
+                  stop-color="var(--color-assistant-highlight-3)"
+                />
+              </lineargradient>
+            </defs>
+          </svg>
+          <span
+            class="text large"
+          >
+            AI Assistant
+          </span>
+        </div>
+        <div
+          class="beta"
+        >
+          beta
+        </div>
+      </div>
+      <div
+        class="back"
+        data-test-id="close-chat-button"
+      >
+        <n8n-icon
+          color="text-base"
+          icon="arrow-right"
+        />
+      </div>
+    </div>
+    <div
+      class="body"
+    >
+      <div
+        class="messages"
+      >
+        
+        <div
+          class="message"
+          data-test-id="chat-message-assistant"
+        >
+          <div
+            class="roleName"
+          >
+            <div
+              class="container small"
+            >
+              <svg
+                fill="none"
+                height="10"
+                viewBox="0 0 24 24"
+                width="10"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19.9658 14.0171C19.9679 14.3549 19.8654 14.6851 19.6722 14.9622C19.479 15.2393 19.2046 15.4497 18.8869 15.5645L13.5109 17.5451L11.5303 22.9211C11.4137 23.2376 11.2028 23.5107 10.9261 23.7037C10.6494 23.8966 10.3202 24 9.9829 24C9.64559 24 9.3164 23.8966 9.0397 23.7037C8.76301 23.5107 8.55212 23.2376 8.43549 22.9211L6.45487 17.5451L1.07888 15.5645C0.762384 15.4479 0.489262 15.237 0.296347 14.9603C0.103431 14.6836 0 14.3544 0 14.0171C0 13.6798 0.103431 13.3506 0.296347 13.0739C0.489262 12.7972 0.762384 12.5863 1.07888 12.4697L6.45487 10.4891L8.43549 5.11309C8.55212 4.79659 8.76301 4.52347 9.0397 4.33055C9.3164 4.13764 9.64559 4.0342 9.9829 4.0342C10.3202 4.0342 10.6494 4.13764 10.9261 4.33055C11.2028 4.52347 11.4137 4.79659 11.5303 5.11309L13.5109 10.4891L18.8869 12.4697C19.2046 12.5845 19.479 12.7949 19.6722 13.072C19.8654 13.3491 19.9679 13.6793 19.9658 14.0171ZM14.1056 4.12268H15.7546V5.77175C15.7546 5.99043 15.8415 6.20015 15.9961 6.35478C16.1508 6.50941 16.3605 6.59628 16.5792 6.59628C16.7979 6.59628 17.0076 6.50941 17.1622 6.35478C17.3168 6.20015 17.4037 5.99043 17.4037 5.77175V4.12268H19.0528C19.2715 4.12268 19.4812 4.03581 19.6358 3.88118C19.7905 3.72655 19.8773 3.51682 19.8773 3.29814C19.8773 3.07946 19.7905 2.86974 19.6358 2.71511C19.4812 2.56048 19.2715 2.47361 19.0528 2.47361H17.4037V0.824535C17.4037 0.605855 17.3168 0.396131 17.1622 0.241501C17.0076 0.0868704 16.7979 0 16.5792 0C16.3605 0 16.1508 0.0868704 15.9961 0.241501C15.8415 0.396131 15.7546 0.605855 15.7546 0.824535V2.47361H14.1056C13.8869 2.47361 13.6772 2.56048 13.5225 2.71511C13.3679 2.86974 13.281 3.07946 13.281 3.29814C13.281 3.51682 13.3679 3.72655 13.5225 3.88118C13.6772 4.03581 13.8869 4.12268 14.1056 4.12268ZM23.1755 7.42082H22.3509V6.59628C22.3509 6.3776 22.2641 6.16788 22.1094 6.01325C21.9548 5.85862 21.7451 5.77175 21.5264 5.77175C21.3077 5.77175 21.098 5.85862 20.9434 6.01325C20.7887 6.16788 20.7019 6.3776 20.7019 6.59628V7.42082H19.8773C19.6586 7.42082 19.4489 7.50769 19.2943 7.66232C19.1397 7.81695 19.0528 8.02667 19.0528 8.24535C19.0528 8.46404 19.1397 8.67376 19.2943 8.82839C19.4489 8.98302 19.6586 9.06989 19.8773 9.06989H20.7019V9.89443C20.7019 10.1131 20.7887 10.3228 20.9434 10.4775C21.098 10.6321 21.3077 10.719 21.5264 10.719C21.7451 10.719 21.9548 10.6321 22.1094 10.4775C22.2641 10.3228 22.3509 10.1131 22.3509 9.89443V9.06989H23.1755C23.3941 9.06989 23.6039 8.98302 23.7585 8.82839C23.9131 8.67376 24 8.46404 24 8.24535C24 8.02667 23.9131 7.81695 23.7585 7.66232C23.6039 7.50769 23.3941 7.42082 23.1755 7.42082Z"
+                  fill="white"
+                />
+                <defs>
+                  <lineargradient
+                    gradientUnits="userSpaceOnUse"
+                    id="paint0_linear_173_12825"
+                    x1="-3.67094e-07"
+                    x2="28.8315"
+                    y1="-0.000120994"
+                    y2="9.82667"
+                  >
+                    <stop
+                      stop-color="var(--color-assistant-highlight-1)"
+                    />
+                    <stop
+                      offset="0.495"
+                      stop-color="var(--color-assistant-highlight-2)"
+                    />
+                    <stop
+                      offset="1"
+                      stop-color="var(--color-assistant-highlight-3)"
+                    />
+                  </lineargradient>
+                </defs>
+              </svg>
+            </div>
+            <span>
+              Assistant
+            </span>
+          </div>
+          <div
+            class="textMessage"
+          >
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <span
+              class="assistantText"
+            >
+              <p>
+                Hi Max! Here is my top solution to fix the error in your 
+                <strong>
+                  Transform data
+                </strong>
+                 node👇
+              </p>
+              
+
+            </span>
+            
+            <!--v-if-->
+          </div>
+          <!--v-if-->
+        </div>
+        <div
+          class="message"
+          data-test-id="chat-message-assistant"
+        >
+          <!--v-if-->
+          <div>
+            <div
+              class="container"
+              data-test-id="code-diff-suggestion"
+            >
+              <div
+                class="title"
+              >
+                Short solution description here that can spill over to two lines
+              </div>
+              <div
+                class="diffSection"
+              >
+                
+                <div
+                  class="diff"
+                >
+                  <div
+                    class="lineNumber"
+                  >
+                    <!-- ln1 is line number in original text -->
+                    <!-- ln2 is line number in updated text -->
+                     
+                  </div>
+                  <div
+                    class="del diffContent"
+                  >
+                    <span>
+                       - 
+                    </span>
+                    <span>
+                      The Way that can be told of is not the eternal Way;
+                    </span>
+                  </div>
+                </div>
+                <div
+                  class="diff"
+                >
+                  <div
+                    class="lineNumber"
+                  >
+                    <!-- ln1 is line number in original text -->
+                    <!-- ln2 is line number in updated text -->
+                     
+                  </div>
+                  <div
+                    class="del diffContent"
+                  >
+                    <span>
+                       - 
+                    </span>
+                    <span>
+                      The name that can be named is not the eternal name.
+                    </span>
+                  </div>
+                </div>
+                <div
+                  class="diff"
+                >
+                  <div
+                    class="lineNumber"
+                  >
+                    <!-- ln1 is line number in original text -->
+                    <!-- ln2 is line number in updated text -->
+                     
+                  </div>
+                  <div
+                    class="del diffContent"
+                  >
+                    <span>
+                       - 
+                    </span>
+                    <span>
+                      The Named is the mother of all things.
+                    </span>
+                  </div>
+                </div>
+                <div
+                  class="diff"
+                >
+                  <div
+                    class="lineNumber"
+                  >
+                    <!-- ln1 is line number in original text -->
+                    <!-- ln2 is line number in updated text -->
+                     1
+                  </div>
+                  <div
+                    class="add diffContent"
+                  >
+                    <span>
+                       + 
+                    </span>
+                    <span>
+                      The named is the mother of all things.
+                    </span>
+                  </div>
+                </div>
+                <div
+                  class="diff"
+                >
+                  <div
+                    class="lineNumber"
+                  >
+                    <!-- ln1 is line number in original text -->
+                    <!-- ln2 is line number in updated text -->
+                     2
+                  </div>
+                  <div
+                    class="add diffContent"
+                  >
+                    <span>
+                       + 
+                    </span>
+                    <span />
+                  </div>
+                </div>
+                <div
+                  class="diff"
+                >
+                  <div
+                    class="lineNumber"
+                  >
+                    <!-- ln1 is line number in original text -->
+                    <!-- ln2 is line number in updated text -->
+                     3
+                  </div>
+                  <div
+                    class="normal diffContent"
+                  >
+                    <span>
+                         
+                    </span>
+                    <span>
+                       The two are the same,
+                    </span>
+                  </div>
+                </div>
+                <div
+                  class="diff"
+                >
+                  <div
+                    class="lineNumber"
+                  >
+                    <!-- ln1 is line number in original text -->
+                    <!-- ln2 is line number in updated text -->
+                     4
+                  </div>
+                  <div
+                    class="normal diffContent"
+                  >
+                    <span>
+                         
+                    </span>
+                    <span>
+                       But after they are produced,
+                    </span>
+                  </div>
+                </div>
+                <div
+                  class="diff"
+                >
+                  <div
+                    class="lineNumber"
+                  >
+                    <!-- ln1 is line number in original text -->
+                    <!-- ln2 is line number in updated text -->
+                     5
+                  </div>
+                  <div
+                    class="normal diffContent"
+                  >
+                    <span>
+                         
+                    </span>
+                    <span>
+                       they have different names.
+                    </span>
+                  </div>
+                </div>
+                <div
+                  class="diff"
+                >
+                  <div
+                    class="lineNumber"
+                  >
+                    <!-- ln1 is line number in original text -->
+                    <!-- ln2 is line number in updated text -->
+                     6
+                  </div>
+                  <div
+                    class="add diffContent"
+                  >
+                    <span>
+                       + 
+                    </span>
+                    <span>
+                      They both may be called deep and profound.
+                    </span>
+                  </div>
+                </div>
+                <div
+                  class="diff"
+                >
+                  <div
+                    class="lineNumber"
+                  >
+                    <!-- ln1 is line number in original text -->
+                    <!-- ln2 is line number in updated text -->
+                     7
+                  </div>
+                  <div
+                    class="add diffContent"
+                  >
+                    <span>
+                       + 
+                    </span>
+                    <span>
+                      Deeper and more profound,
+                    </span>
+                  </div>
+                </div>
+                <div
+                  class="diff"
+                >
+                  <div
+                    class="lineNumber"
+                  >
+                    <!-- ln1 is line number in original text -->
+                    <!-- ln2 is line number in updated text -->
+                     8
+                  </div>
+                  <div
+                    class="add diffContent"
+                  >
+                    <span>
+                       + 
+                    </span>
+                    <span>
+                      The door of all subtleties!
+                    </span>
+                  </div>
+                </div>
+                
+              </div>
+              <div
+                class="actions"
+              >
+                <n8n-button
+                  data-test-id="replace-code-button"
+                  disabled="false"
+                  icon="refresh"
+                  loading="false"
+                  size="mini"
+                  type="primary"
+                >
+                  Replace my code
+                </n8n-button>
+              </div>
+            </div>
+          </div>
+          <!--v-if-->
+        </div>
+        <div
+          class="message"
+          data-test-id="chat-message-user"
+        >
+          <div
+            class="roleName userSection"
+          >
+            <n8n-avatar
+              first-name="Kobi"
+              last-name="Dog"
+              size="xsmall"
+            />
+            <span>
+              You
+            </span>
+          </div>
+          <div
+            class="textMessage"
+          >
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <span>
+              <p>
+                Give it to me 
+                <strong>
+                  ignore this markdown
+                </strong>
+              </p>
+              
+
+            </span>
+            <!--v-if-->
+          </div>
+          <!--v-if-->
+        </div>
+        <div
+          class="message"
+          data-test-id="chat-message-assistant"
+        >
+          <div
+            class="roleName userSection"
+          >
+            <div
+              class="container small"
+            >
+              <svg
+                fill="none"
+                height="10"
+                viewBox="0 0 24 24"
+                width="10"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19.9658 14.0171C19.9679 14.3549 19.8654 14.6851 19.6722 14.9622C19.479 15.2393 19.2046 15.4497 18.8869 15.5645L13.5109 17.5451L11.5303 22.9211C11.4137 23.2376 11.2028 23.5107 10.9261 23.7037C10.6494 23.8966 10.3202 24 9.9829 24C9.64559 24 9.3164 23.8966 9.0397 23.7037C8.76301 23.5107 8.55212 23.2376 8.43549 22.9211L6.45487 17.5451L1.07888 15.5645C0.762384 15.4479 0.489262 15.237 0.296347 14.9603C0.103431 14.6836 0 14.3544 0 14.0171C0 13.6798 0.103431 13.3506 0.296347 13.0739C0.489262 12.7972 0.762384 12.5863 1.07888 12.4697L6.45487 10.4891L8.43549 5.11309C8.55212 4.79659 8.76301 4.52347 9.0397 4.33055C9.3164 4.13764 9.64559 4.0342 9.9829 4.0342C10.3202 4.0342 10.6494 4.13764 10.9261 4.33055C11.2028 4.52347 11.4137 4.79659 11.5303 5.11309L13.5109 10.4891L18.8869 12.4697C19.2046 12.5845 19.479 12.7949 19.6722 13.072C19.8654 13.3491 19.9679 13.6793 19.9658 14.0171ZM14.1056 4.12268H15.7546V5.77175C15.7546 5.99043 15.8415 6.20015 15.9961 6.35478C16.1508 6.50941 16.3605 6.59628 16.5792 6.59628C16.7979 6.59628 17.0076 6.50941 17.1622 6.35478C17.3168 6.20015 17.4037 5.99043 17.4037 5.77175V4.12268H19.0528C19.2715 4.12268 19.4812 4.03581 19.6358 3.88118C19.7905 3.72655 19.8773 3.51682 19.8773 3.29814C19.8773 3.07946 19.7905 2.86974 19.6358 2.71511C19.4812 2.56048 19.2715 2.47361 19.0528 2.47361H17.4037V0.824535C17.4037 0.605855 17.3168 0.396131 17.1622 0.241501C17.0076 0.0868704 16.7979 0 16.5792 0C16.3605 0 16.1508 0.0868704 15.9961 0.241501C15.8415 0.396131 15.7546 0.605855 15.7546 0.824535V2.47361H14.1056C13.8869 2.47361 13.6772 2.56048 13.5225 2.71511C13.3679 2.86974 13.281 3.07946 13.281 3.29814C13.281 3.51682 13.3679 3.72655 13.5225 3.88118C13.6772 4.03581 13.8869 4.12268 14.1056 4.12268ZM23.1755 7.42082H22.3509V6.59628C22.3509 6.3776 22.2641 6.16788 22.1094 6.01325C21.9548 5.85862 21.7451 5.77175 21.5264 5.77175C21.3077 5.77175 21.098 5.85862 20.9434 6.01325C20.7887 6.16788 20.7019 6.3776 20.7019 6.59628V7.42082H19.8773C19.6586 7.42082 19.4489 7.50769 19.2943 7.66232C19.1397 7.81695 19.0528 8.02667 19.0528 8.24535C19.0528 8.46404 19.1397 8.67376 19.2943 8.82839C19.4489 8.98302 19.6586 9.06989 19.8773 9.06989H20.7019V9.89443C20.7019 10.1131 20.7887 10.3228 20.9434 10.4775C21.098 10.6321 21.3077 10.719 21.5264 10.719C21.7451 10.719 21.9548 10.6321 22.1094 10.4775C22.2641 10.3228 22.3509 10.1131 22.3509 9.89443V9.06989H23.1755C23.3941 9.06989 23.6039 8.98302 23.7585 8.82839C23.9131 8.67376 24 8.46404 24 8.24535C24 8.02667 23.9131 7.81695 23.7585 7.66232C23.6039 7.50769 23.3941 7.42082 23.1755 7.42082Z"
+                  fill="white"
+                />
+                <defs>
+                  <lineargradient
+                    gradientUnits="userSpaceOnUse"
+                    id="paint0_linear_173_12825"
+                    x1="-3.67094e-07"
+                    x2="28.8315"
+                    y1="-0.000120994"
+                    y2="9.82667"
+                  >
+                    <stop
+                      stop-color="var(--color-assistant-highlight-1)"
+                    />
+                    <stop
+                      offset="0.495"
+                      stop-color="var(--color-assistant-highlight-2)"
+                    />
+                    <stop
+                      offset="1"
+                      stop-color="var(--color-assistant-highlight-3)"
+                    />
+                  </lineargradient>
+                </defs>
+              </svg>
+            </div>
+            <span>
+              Assistant
+            </span>
+          </div>
+          <div>
+            <div
+              class="block"
+            >
+              <div
+                class="blockTitle"
+              >
+                Credential doesn’t have correct permissions to send a message 
+                <!--v-if-->
+              </div>
+              <div
+                class="blockBody"
+              >
+                <!-- eslint-disable-next-line vue/no-v-html -->
+                <span>
+                  <p>
+                    Solution steps:
+                  </p>
+                  
+
+                  <ol>
+                    
+
+                    <li>
+                      Lorem ipsum dolor sit amet, consectetur 
+                      <strong>
+                        adipiscing
+                      </strong>
+                       elit. Proin id nulla placerat, tristique ex at, euismod dui.
+                    </li>
+                    
+
+                    <li>
+                      Copy this into somewhere
+                    </li>
+                    
+
+                    <li>
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id nulla placerat, tristique ex at, euismod dui.
+                    </li>
+                    
+
+                    <li>
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id nulla placerat, tristique ex at, euismod dui.
+                      <br />
+                      
+Testing more code
+                    </li>
+                    
+
+                  </ol>
+                  
+
+                  <ul>
+                    
+
+                    <li>
+                      Unordered item 1
+                    </li>
+                    
+
+                    <li>
+                      Unordered item 2
+                    </li>
+                    
+
+                  </ul>
+                  
+
+                </span>
+                <!--v-if-->
+              </div>
+            </div>
+          </div>
+          <!--v-if-->
+        </div>
+        <div
+          class="message"
+          data-test-id="chat-message-assistant"
+        >
+          <!--v-if-->
+          <div>
+            <div
+              class="container"
+              data-test-id="code-diff-suggestion"
+            >
+              <div
+                class="title"
+              >
+                Short solution with min height
+              </div>
+              <div
+                class="diffSection"
+              >
+                
+                <div
+                  class="diff"
+                >
+                  <div
+                    class="lineNumber"
+                  >
+                    <!-- ln1 is line number in original text -->
+                    <!-- ln2 is line number in updated text -->
+                     
+                  </div>
+                  <div
+                    class="del diffContent"
+                  >
+                    <span>
+                       - 
+                    </span>
+                    <span>
+                      The Way that can be told of is not the eternal Way;
+                    </span>
+                  </div>
+                </div>
+                <div
+                  class="diff"
+                >
+                  <div
+                    class="lineNumber"
+                  >
+                    <!-- ln1 is line number in original text -->
+                    <!-- ln2 is line number in updated text -->
+                     
+                  </div>
+                  <div
+                    class="del diffContent"
+                  >
+                    <span>
+                       - 
+                    </span>
+                    <span>
+                      The name that can be named is not the eternal name.
+                    </span>
+                  </div>
+                </div>
+                <div
+                  class="diff"
+                >
+                  <div
+                    class="lineNumber"
+                  >
+                    <!-- ln1 is line number in original text -->
+                    <!-- ln2 is line number in updated text -->
+                     1
+                  </div>
+                  <div
+                    class="add diffContent"
+                  >
+                    <span>
+                       + 
+                    </span>
+                    <span>
+                      The door of all subtleties!
+                    </span>
+                  </div>
+                </div>
+                <div
+                  class="diff"
+                >
+                  <div
+                    class="lineNumber"
+                  >
+                    <!-- ln1 is line number in original text -->
+                    <!-- ln2 is line number in updated text -->
+                     
+                  </div>
+                  <div
+                    class="filler diffContent"
+                  >
+                    <span>
+                         
+                    </span>
+                    <span />
+                  </div>
+                </div>
+                
+              </div>
+              <div
+                class="actions"
+              >
+                <n8n-button
+                  data-test-id="replace-code-button"
+                  disabled="false"
+                  icon="refresh"
+                  loading="false"
+                  size="mini"
+                  type="primary"
+                >
+                  Replace my code
+                </n8n-button>
+              </div>
+            </div>
+          </div>
+          <div
+            class="quickReplies"
+          >
+            <div
+              class="quickRepliesTitle"
+            >
+              Quick reply 👇
+            </div>
+            
+            <div
+              data-test-id="quick-replies"
+            >
+              <n8n-button
+                size="mini"
+                type="secondary"
+              >
+                Give me another solution
+              </n8n-button>
+            </div>
+            <div
+              data-test-id="quick-replies"
+            >
+              <n8n-button
+                size="mini"
+                type="secondary"
+              >
+                All good
+              </n8n-button>
+            </div>
+            
+          </div>
+        </div>
+        
+      </div>
+    </div>
+    <div
+      class="inputWrapper"
+      data-test-id="chat-input-wrapper"
+    >
+      <textarea
+        data-test-id="chat-input"
+        placeholder="Enter your response..."
+        rows="1"
+        wrap="hard"
+      />
+      <n8n-icon-button
+        class="sendButton"
+        data-test-id="send-message-button"
+        disabled="true"
+        icon="paper-plane"
+        size="large"
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AskAssistantChat > renders default placeholder chat correctly 1`] = `
+<div>
+  <div
+    class="container"
+  >
+    <div
+      class="header"
+    >
+      <div
+        class="chatTitle"
+      >
+        <div
+          class="headerText"
+        >
+          <svg
+            fill="none"
+            height="18"
+            viewBox="0 0 24 24"
+            width="18"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19.9658 14.0171C19.9679 14.3549 19.8654 14.6851 19.6722 14.9622C19.479 15.2393 19.2046 15.4497 18.8869 15.5645L13.5109 17.5451L11.5303 22.9211C11.4137 23.2376 11.2028 23.5107 10.9261 23.7037C10.6494 23.8966 10.3202 24 9.9829 24C9.64559 24 9.3164 23.8966 9.0397 23.7037C8.76301 23.5107 8.55212 23.2376 8.43549 22.9211L6.45487 17.5451L1.07888 15.5645C0.762384 15.4479 0.489262 15.237 0.296347 14.9603C0.103431 14.6836 0 14.3544 0 14.0171C0 13.6798 0.103431 13.3506 0.296347 13.0739C0.489262 12.7972 0.762384 12.5863 1.07888 12.4697L6.45487 10.4891L8.43549 5.11309C8.55212 4.79659 8.76301 4.52347 9.0397 4.33055C9.3164 4.13764 9.64559 4.0342 9.9829 4.0342C10.3202 4.0342 10.6494 4.13764 10.9261 4.33055C11.2028 4.52347 11.4137 4.79659 11.5303 5.11309L13.5109 10.4891L18.8869 12.4697C19.2046 12.5845 19.479 12.7949 19.6722 13.072C19.8654 13.3491 19.9679 13.6793 19.9658 14.0171ZM14.1056 4.12268H15.7546V5.77175C15.7546 5.99043 15.8415 6.20015 15.9961 6.35478C16.1508 6.50941 16.3605 6.59628 16.5792 6.59628C16.7979 6.59628 17.0076 6.50941 17.1622 6.35478C17.3168 6.20015 17.4037 5.99043 17.4037 5.77175V4.12268H19.0528C19.2715 4.12268 19.4812 4.03581 19.6358 3.88118C19.7905 3.72655 19.8773 3.51682 19.8773 3.29814C19.8773 3.07946 19.7905 2.86974 19.6358 2.71511C19.4812 2.56048 19.2715 2.47361 19.0528 2.47361H17.4037V0.824535C17.4037 0.605855 17.3168 0.396131 17.1622 0.241501C17.0076 0.0868704 16.7979 0 16.5792 0C16.3605 0 16.1508 0.0868704 15.9961 0.241501C15.8415 0.396131 15.7546 0.605855 15.7546 0.824535V2.47361H14.1056C13.8869 2.47361 13.6772 2.56048 13.5225 2.71511C13.3679 2.86974 13.281 3.07946 13.281 3.29814C13.281 3.51682 13.3679 3.72655 13.5225 3.88118C13.6772 4.03581 13.8869 4.12268 14.1056 4.12268ZM23.1755 7.42082H22.3509V6.59628C22.3509 6.3776 22.2641 6.16788 22.1094 6.01325C21.9548 5.85862 21.7451 5.77175 21.5264 5.77175C21.3077 5.77175 21.098 5.85862 20.9434 6.01325C20.7887 6.16788 20.7019 6.3776 20.7019 6.59628V7.42082H19.8773C19.6586 7.42082 19.4489 7.50769 19.2943 7.66232C19.1397 7.81695 19.0528 8.02667 19.0528 8.24535C19.0528 8.46404 19.1397 8.67376 19.2943 8.82839C19.4489 8.98302 19.6586 9.06989 19.8773 9.06989H20.7019V9.89443C20.7019 10.1131 20.7887 10.3228 20.9434 10.4775C21.098 10.6321 21.3077 10.719 21.5264 10.719C21.7451 10.719 21.9548 10.6321 22.1094 10.4775C22.2641 10.3228 22.3509 10.1131 22.3509 9.89443V9.06989H23.1755C23.3941 9.06989 23.6039 8.98302 23.7585 8.82839C23.9131 8.67376 24 8.46404 24 8.24535C24 8.02667 23.9131 7.81695 23.7585 7.66232C23.6039 7.50769 23.3941 7.42082 23.1755 7.42082Z"
+              fill="url(#paint0_linear_173_12825)"
+            />
+            <defs>
+              <lineargradient
+                gradientUnits="userSpaceOnUse"
+                id="paint0_linear_173_12825"
+                x1="-3.67094e-07"
+                x2="28.8315"
+                y1="-0.000120994"
+                y2="9.82667"
+              >
+                <stop
+                  stop-color="var(--color-assistant-highlight-1)"
+                />
+                <stop
+                  offset="0.495"
+                  stop-color="var(--color-assistant-highlight-2)"
+                />
+                <stop
+                  offset="1"
+                  stop-color="var(--color-assistant-highlight-3)"
+                />
+              </lineargradient>
+            </defs>
+          </svg>
+          <span
+            class="text large"
+          >
+            AI Assistant
+          </span>
+        </div>
+        <div
+          class="beta"
+        >
+          beta
+        </div>
+      </div>
+      <div
+        class="back"
+        data-test-id="close-chat-button"
+      >
+        <n8n-icon
+          color="text-base"
+          icon="arrow-right"
+        />
+      </div>
+    </div>
+    <div
+      class="body"
+    >
+      <div
+        class="placeholder"
+        data-test-id="placeholder-message"
+      >
+        <div
+          class="greeting"
+        >
+          Hi Kobi 👋
+        </div>
+        <div
+          class="info"
+        >
+          <p>
+            Hi Kobi, I'm Assistant and I'm here to assist you with building workflows.
+          </p>
+          <p>
+            Whenever you encounter a task that I can help with, you'll see the 
+            <button
+              class="button"
+              style="height: 18px;"
+              tabindex="-1"
+            >
+              <div>
+                <div
+                  style="padding: 0px 6px;"
+                >
+                  <svg
+                    class="icon"
+                    fill="none"
+                    height="10"
+                    viewBox="0 0 24 24"
+                    width="10"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M19.9658 14.0171C19.9679 14.3549 19.8654 14.6851 19.6722 14.9622C19.479 15.2393 19.2046 15.4497 18.8869 15.5645L13.5109 17.5451L11.5303 22.9211C11.4137 23.2376 11.2028 23.5107 10.9261 23.7037C10.6494 23.8966 10.3202 24 9.9829 24C9.64559 24 9.3164 23.8966 9.0397 23.7037C8.76301 23.5107 8.55212 23.2376 8.43549 22.9211L6.45487 17.5451L1.07888 15.5645C0.762384 15.4479 0.489262 15.237 0.296347 14.9603C0.103431 14.6836 0 14.3544 0 14.0171C0 13.6798 0.103431 13.3506 0.296347 13.0739C0.489262 12.7972 0.762384 12.5863 1.07888 12.4697L6.45487 10.4891L8.43549 5.11309C8.55212 4.79659 8.76301 4.52347 9.0397 4.33055C9.3164 4.13764 9.64559 4.0342 9.9829 4.0342C10.3202 4.0342 10.6494 4.13764 10.9261 4.33055C11.2028 4.52347 11.4137 4.79659 11.5303 5.11309L13.5109 10.4891L18.8869 12.4697C19.2046 12.5845 19.479 12.7949 19.6722 13.072C19.8654 13.3491 19.9679 13.6793 19.9658 14.0171ZM14.1056 4.12268H15.7546V5.77175C15.7546 5.99043 15.8415 6.20015 15.9961 6.35478C16.1508 6.50941 16.3605 6.59628 16.5792 6.59628C16.7979 6.59628 17.0076 6.50941 17.1622 6.35478C17.3168 6.20015 17.4037 5.99043 17.4037 5.77175V4.12268H19.0528C19.2715 4.12268 19.4812 4.03581 19.6358 3.88118C19.7905 3.72655 19.8773 3.51682 19.8773 3.29814C19.8773 3.07946 19.7905 2.86974 19.6358 2.71511C19.4812 2.56048 19.2715 2.47361 19.0528 2.47361H17.4037V0.824535C17.4037 0.605855 17.3168 0.396131 17.1622 0.241501C17.0076 0.0868704 16.7979 0 16.5792 0C16.3605 0 16.1508 0.0868704 15.9961 0.241501C15.8415 0.396131 15.7546 0.605855 15.7546 0.824535V2.47361H14.1056C13.8869 2.47361 13.6772 2.56048 13.5225 2.71511C13.3679 2.86974 13.281 3.07946 13.281 3.29814C13.281 3.51682 13.3679 3.72655 13.5225 3.88118C13.6772 4.03581 13.8869 4.12268 14.1056 4.12268ZM23.1755 7.42082H22.3509V6.59628C22.3509 6.3776 22.2641 6.16788 22.1094 6.01325C21.9548 5.85862 21.7451 5.77175 21.5264 5.77175C21.3077 5.77175 21.098 5.85862 20.9434 6.01325C20.7887 6.16788 20.7019 6.3776 20.7019 6.59628V7.42082H19.8773C19.6586 7.42082 19.4489 7.50769 19.2943 7.66232C19.1397 7.81695 19.0528 8.02667 19.0528 8.24535C19.0528 8.46404 19.1397 8.67376 19.2943 8.82839C19.4489 8.98302 19.6586 9.06989 19.8773 9.06989H20.7019V9.89443C20.7019 10.1131 20.7887 10.3228 20.9434 10.4775C21.098 10.6321 21.3077 10.719 21.5264 10.719C21.7451 10.719 21.9548 10.6321 22.1094 10.4775C22.2641 10.3228 22.3509 10.1131 22.3509 9.89443V9.06989H23.1755C23.3941 9.06989 23.6039 8.98302 23.7585 8.82839C23.9131 8.67376 24 8.46404 24 8.24535C24 8.02667 23.9131 7.81695 23.7585 7.66232C23.6039 7.50769 23.3941 7.42082 23.1755 7.42082Z"
+                      fill="url(#paint0_linear_173_12825)"
+                    />
+                    <defs>
+                      <lineargradient
+                        gradientUnits="userSpaceOnUse"
+                        id="paint0_linear_173_12825"
+                        x1="-3.67094e-07"
+                        x2="28.8315"
+                        y1="-0.000120994"
+                        y2="9.82667"
+                      >
+                        <stop
+                          stop-color="var(--color-assistant-highlight-1)"
+                        />
+                        <stop
+                          offset="0.495"
+                          stop-color="var(--color-assistant-highlight-2)"
+                        />
+                        <stop
+                          offset="1"
+                          stop-color="var(--color-assistant-highlight-3)"
+                        />
+                      </lineargradient>
+                    </defs>
+                  </svg>
+                  <span
+                    class="text small"
+                  >
+                    Ask Assistant
+                  </span>
+                </div>
+              </div>
+            </button>
+             button.
+          </p>
+          <p>
+            Clicking it starts a chat session with me.
+          </p>
+        </div>
+      </div>
+    </div>
+    <!--v-if-->
+  </div>
+</div>
+`;
+
+exports[`AskAssistantChat > renders end of session chat correctly 1`] = `
+<div>
+  <div
+    class="container"
+  >
+    <div
+      class="header"
+    >
+      <div
+        class="chatTitle"
+      >
+        <div
+          class="headerText"
+        >
+          <svg
+            fill="none"
+            height="18"
+            viewBox="0 0 24 24"
+            width="18"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19.9658 14.0171C19.9679 14.3549 19.8654 14.6851 19.6722 14.9622C19.479 15.2393 19.2046 15.4497 18.8869 15.5645L13.5109 17.5451L11.5303 22.9211C11.4137 23.2376 11.2028 23.5107 10.9261 23.7037C10.6494 23.8966 10.3202 24 9.9829 24C9.64559 24 9.3164 23.8966 9.0397 23.7037C8.76301 23.5107 8.55212 23.2376 8.43549 22.9211L6.45487 17.5451L1.07888 15.5645C0.762384 15.4479 0.489262 15.237 0.296347 14.9603C0.103431 14.6836 0 14.3544 0 14.0171C0 13.6798 0.103431 13.3506 0.296347 13.0739C0.489262 12.7972 0.762384 12.5863 1.07888 12.4697L6.45487 10.4891L8.43549 5.11309C8.55212 4.79659 8.76301 4.52347 9.0397 4.33055C9.3164 4.13764 9.64559 4.0342 9.9829 4.0342C10.3202 4.0342 10.6494 4.13764 10.9261 4.33055C11.2028 4.52347 11.4137 4.79659 11.5303 5.11309L13.5109 10.4891L18.8869 12.4697C19.2046 12.5845 19.479 12.7949 19.6722 13.072C19.8654 13.3491 19.9679 13.6793 19.9658 14.0171ZM14.1056 4.12268H15.7546V5.77175C15.7546 5.99043 15.8415 6.20015 15.9961 6.35478C16.1508 6.50941 16.3605 6.59628 16.5792 6.59628C16.7979 6.59628 17.0076 6.50941 17.1622 6.35478C17.3168 6.20015 17.4037 5.99043 17.4037 5.77175V4.12268H19.0528C19.2715 4.12268 19.4812 4.03581 19.6358 3.88118C19.7905 3.72655 19.8773 3.51682 19.8773 3.29814C19.8773 3.07946 19.7905 2.86974 19.6358 2.71511C19.4812 2.56048 19.2715 2.47361 19.0528 2.47361H17.4037V0.824535C17.4037 0.605855 17.3168 0.396131 17.1622 0.241501C17.0076 0.0868704 16.7979 0 16.5792 0C16.3605 0 16.1508 0.0868704 15.9961 0.241501C15.8415 0.396131 15.7546 0.605855 15.7546 0.824535V2.47361H14.1056C13.8869 2.47361 13.6772 2.56048 13.5225 2.71511C13.3679 2.86974 13.281 3.07946 13.281 3.29814C13.281 3.51682 13.3679 3.72655 13.5225 3.88118C13.6772 4.03581 13.8869 4.12268 14.1056 4.12268ZM23.1755 7.42082H22.3509V6.59628C22.3509 6.3776 22.2641 6.16788 22.1094 6.01325C21.9548 5.85862 21.7451 5.77175 21.5264 5.77175C21.3077 5.77175 21.098 5.85862 20.9434 6.01325C20.7887 6.16788 20.7019 6.3776 20.7019 6.59628V7.42082H19.8773C19.6586 7.42082 19.4489 7.50769 19.2943 7.66232C19.1397 7.81695 19.0528 8.02667 19.0528 8.24535C19.0528 8.46404 19.1397 8.67376 19.2943 8.82839C19.4489 8.98302 19.6586 9.06989 19.8773 9.06989H20.7019V9.89443C20.7019 10.1131 20.7887 10.3228 20.9434 10.4775C21.098 10.6321 21.3077 10.719 21.5264 10.719C21.7451 10.719 21.9548 10.6321 22.1094 10.4775C22.2641 10.3228 22.3509 10.1131 22.3509 9.89443V9.06989H23.1755C23.3941 9.06989 23.6039 8.98302 23.7585 8.82839C23.9131 8.67376 24 8.46404 24 8.24535C24 8.02667 23.9131 7.81695 23.7585 7.66232C23.6039 7.50769 23.3941 7.42082 23.1755 7.42082Z"
+              fill="url(#paint0_linear_173_12825)"
+            />
+            <defs>
+              <lineargradient
+                gradientUnits="userSpaceOnUse"
+                id="paint0_linear_173_12825"
+                x1="-3.67094e-07"
+                x2="28.8315"
+                y1="-0.000120994"
+                y2="9.82667"
+              >
+                <stop
+                  stop-color="var(--color-assistant-highlight-1)"
+                />
+                <stop
+                  offset="0.495"
+                  stop-color="var(--color-assistant-highlight-2)"
+                />
+                <stop
+                  offset="1"
+                  stop-color="var(--color-assistant-highlight-3)"
+                />
+              </lineargradient>
+            </defs>
+          </svg>
+          <span
+            class="text large"
+          >
+            AI Assistant
+          </span>
+        </div>
+        <div
+          class="beta"
+        >
+          beta
+        </div>
+      </div>
+      <div
+        class="back"
+        data-test-id="close-chat-button"
+      >
+        <n8n-icon
+          color="text-base"
+          icon="arrow-right"
+        />
+      </div>
+    </div>
+    <div
+      class="body"
+    >
+      <div
+        class="messages"
+      >
+        
+        <div
+          class="message"
+          data-test-id="chat-message-assistant"
+        >
+          <div
+            class="roleName"
+          >
+            <div
+              class="container small"
+            >
+              <svg
+                fill="none"
+                height="10"
+                viewBox="0 0 24 24"
+                width="10"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19.9658 14.0171C19.9679 14.3549 19.8654 14.6851 19.6722 14.9622C19.479 15.2393 19.2046 15.4497 18.8869 15.5645L13.5109 17.5451L11.5303 22.9211C11.4137 23.2376 11.2028 23.5107 10.9261 23.7037C10.6494 23.8966 10.3202 24 9.9829 24C9.64559 24 9.3164 23.8966 9.0397 23.7037C8.76301 23.5107 8.55212 23.2376 8.43549 22.9211L6.45487 17.5451L1.07888 15.5645C0.762384 15.4479 0.489262 15.237 0.296347 14.9603C0.103431 14.6836 0 14.3544 0 14.0171C0 13.6798 0.103431 13.3506 0.296347 13.0739C0.489262 12.7972 0.762384 12.5863 1.07888 12.4697L6.45487 10.4891L8.43549 5.11309C8.55212 4.79659 8.76301 4.52347 9.0397 4.33055C9.3164 4.13764 9.64559 4.0342 9.9829 4.0342C10.3202 4.0342 10.6494 4.13764 10.9261 4.33055C11.2028 4.52347 11.4137 4.79659 11.5303 5.11309L13.5109 10.4891L18.8869 12.4697C19.2046 12.5845 19.479 12.7949 19.6722 13.072C19.8654 13.3491 19.9679 13.6793 19.9658 14.0171ZM14.1056 4.12268H15.7546V5.77175C15.7546 5.99043 15.8415 6.20015 15.9961 6.35478C16.1508 6.50941 16.3605 6.59628 16.5792 6.59628C16.7979 6.59628 17.0076 6.50941 17.1622 6.35478C17.3168 6.20015 17.4037 5.99043 17.4037 5.77175V4.12268H19.0528C19.2715 4.12268 19.4812 4.03581 19.6358 3.88118C19.7905 3.72655 19.8773 3.51682 19.8773 3.29814C19.8773 3.07946 19.7905 2.86974 19.6358 2.71511C19.4812 2.56048 19.2715 2.47361 19.0528 2.47361H17.4037V0.824535C17.4037 0.605855 17.3168 0.396131 17.1622 0.241501C17.0076 0.0868704 16.7979 0 16.5792 0C16.3605 0 16.1508 0.0868704 15.9961 0.241501C15.8415 0.396131 15.7546 0.605855 15.7546 0.824535V2.47361H14.1056C13.8869 2.47361 13.6772 2.56048 13.5225 2.71511C13.3679 2.86974 13.281 3.07946 13.281 3.29814C13.281 3.51682 13.3679 3.72655 13.5225 3.88118C13.6772 4.03581 13.8869 4.12268 14.1056 4.12268ZM23.1755 7.42082H22.3509V6.59628C22.3509 6.3776 22.2641 6.16788 22.1094 6.01325C21.9548 5.85862 21.7451 5.77175 21.5264 5.77175C21.3077 5.77175 21.098 5.85862 20.9434 6.01325C20.7887 6.16788 20.7019 6.3776 20.7019 6.59628V7.42082H19.8773C19.6586 7.42082 19.4489 7.50769 19.2943 7.66232C19.1397 7.81695 19.0528 8.02667 19.0528 8.24535C19.0528 8.46404 19.1397 8.67376 19.2943 8.82839C19.4489 8.98302 19.6586 9.06989 19.8773 9.06989H20.7019V9.89443C20.7019 10.1131 20.7887 10.3228 20.9434 10.4775C21.098 10.6321 21.3077 10.719 21.5264 10.719C21.7451 10.719 21.9548 10.6321 22.1094 10.4775C22.2641 10.3228 22.3509 10.1131 22.3509 9.89443V9.06989H23.1755C23.3941 9.06989 23.6039 8.98302 23.7585 8.82839C23.9131 8.67376 24 8.46404 24 8.24535C24 8.02667 23.9131 7.81695 23.7585 7.66232C23.6039 7.50769 23.3941 7.42082 23.1755 7.42082Z"
+                  fill="white"
+                />
+                <defs>
+                  <lineargradient
+                    gradientUnits="userSpaceOnUse"
+                    id="paint0_linear_173_12825"
+                    x1="-3.67094e-07"
+                    x2="28.8315"
+                    y1="-0.000120994"
+                    y2="9.82667"
+                  >
+                    <stop
+                      stop-color="var(--color-assistant-highlight-1)"
+                    />
+                    <stop
+                      offset="0.495"
+                      stop-color="var(--color-assistant-highlight-2)"
+                    />
+                    <stop
+                      offset="1"
+                      stop-color="var(--color-assistant-highlight-3)"
+                    />
+                  </lineargradient>
+                </defs>
+              </svg>
+            </div>
+            <span>
+              Assistant
+            </span>
+          </div>
+          <div
+            class="textMessage"
+          >
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <span
+              class="assistantText"
+            >
+              <p>
+                Hi Max! Here is my top solution to fix the error in your 
+                <strong>
+                  Transform data
+                </strong>
+                 node👇
+              </p>
+              
+
+            </span>
+            
+            <!--v-if-->
+          </div>
+          <!--v-if-->
+        </div>
+        <div
+          class="message"
+          data-test-id="chat-message-assistant"
+        >
+          <!--v-if-->
+          <div
+            class="endOfSessionText"
+            data-test-id="chat-message-system"
+          >
+            <span>
+              This Assistant session has ended. To start a new session with the Assistant, click an
+            </span>
+            <button
+              class="button"
+              style="height: 18px;"
+              tabindex="-1"
+            >
+              <div>
+                <div
+                  style="padding: 0px 6px;"
+                >
+                  <svg
+                    class="icon"
+                    fill="none"
+                    height="10"
+                    viewBox="0 0 24 24"
+                    width="10"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M19.9658 14.0171C19.9679 14.3549 19.8654 14.6851 19.6722 14.9622C19.479 15.2393 19.2046 15.4497 18.8869 15.5645L13.5109 17.5451L11.5303 22.9211C11.4137 23.2376 11.2028 23.5107 10.9261 23.7037C10.6494 23.8966 10.3202 24 9.9829 24C9.64559 24 9.3164 23.8966 9.0397 23.7037C8.76301 23.5107 8.55212 23.2376 8.43549 22.9211L6.45487 17.5451L1.07888 15.5645C0.762384 15.4479 0.489262 15.237 0.296347 14.9603C0.103431 14.6836 0 14.3544 0 14.0171C0 13.6798 0.103431 13.3506 0.296347 13.0739C0.489262 12.7972 0.762384 12.5863 1.07888 12.4697L6.45487 10.4891L8.43549 5.11309C8.55212 4.79659 8.76301 4.52347 9.0397 4.33055C9.3164 4.13764 9.64559 4.0342 9.9829 4.0342C10.3202 4.0342 10.6494 4.13764 10.9261 4.33055C11.2028 4.52347 11.4137 4.79659 11.5303 5.11309L13.5109 10.4891L18.8869 12.4697C19.2046 12.5845 19.479 12.7949 19.6722 13.072C19.8654 13.3491 19.9679 13.6793 19.9658 14.0171ZM14.1056 4.12268H15.7546V5.77175C15.7546 5.99043 15.8415 6.20015 15.9961 6.35478C16.1508 6.50941 16.3605 6.59628 16.5792 6.59628C16.7979 6.59628 17.0076 6.50941 17.1622 6.35478C17.3168 6.20015 17.4037 5.99043 17.4037 5.77175V4.12268H19.0528C19.2715 4.12268 19.4812 4.03581 19.6358 3.88118C19.7905 3.72655 19.8773 3.51682 19.8773 3.29814C19.8773 3.07946 19.7905 2.86974 19.6358 2.71511C19.4812 2.56048 19.2715 2.47361 19.0528 2.47361H17.4037V0.824535C17.4037 0.605855 17.3168 0.396131 17.1622 0.241501C17.0076 0.0868704 16.7979 0 16.5792 0C16.3605 0 16.1508 0.0868704 15.9961 0.241501C15.8415 0.396131 15.7546 0.605855 15.7546 0.824535V2.47361H14.1056C13.8869 2.47361 13.6772 2.56048 13.5225 2.71511C13.3679 2.86974 13.281 3.07946 13.281 3.29814C13.281 3.51682 13.3679 3.72655 13.5225 3.88118C13.6772 4.03581 13.8869 4.12268 14.1056 4.12268ZM23.1755 7.42082H22.3509V6.59628C22.3509 6.3776 22.2641 6.16788 22.1094 6.01325C21.9548 5.85862 21.7451 5.77175 21.5264 5.77175C21.3077 5.77175 21.098 5.85862 20.9434 6.01325C20.7887 6.16788 20.7019 6.3776 20.7019 6.59628V7.42082H19.8773C19.6586 7.42082 19.4489 7.50769 19.2943 7.66232C19.1397 7.81695 19.0528 8.02667 19.0528 8.24535C19.0528 8.46404 19.1397 8.67376 19.2943 8.82839C19.4489 8.98302 19.6586 9.06989 19.8773 9.06989H20.7019V9.89443C20.7019 10.1131 20.7887 10.3228 20.9434 10.4775C21.098 10.6321 21.3077 10.719 21.5264 10.719C21.7451 10.719 21.9548 10.6321 22.1094 10.4775C22.2641 10.3228 22.3509 10.1131 22.3509 9.89443V9.06989H23.1755C23.3941 9.06989 23.6039 8.98302 23.7585 8.82839C23.9131 8.67376 24 8.46404 24 8.24535C24 8.02667 23.9131 7.81695 23.7585 7.66232C23.6039 7.50769 23.3941 7.42082 23.1755 7.42082Z"
+                      fill="url(#paint0_linear_173_12825)"
+                    />
+                    <defs>
+                      <lineargradient
+                        gradientUnits="userSpaceOnUse"
+                        id="paint0_linear_173_12825"
+                        x1="-3.67094e-07"
+                        x2="28.8315"
+                        y1="-0.000120994"
+                        y2="9.82667"
+                      >
+                        <stop
+                          stop-color="var(--color-assistant-highlight-1)"
+                        />
+                        <stop
+                          offset="0.495"
+                          stop-color="var(--color-assistant-highlight-2)"
+                        />
+                        <stop
+                          offset="1"
+                          stop-color="var(--color-assistant-highlight-3)"
+                        />
+                      </lineargradient>
+                    </defs>
+                  </svg>
+                  <span
+                    class="text small"
+                  >
+                    Ask Assistant
+                  </span>
+                </div>
+              </div>
+            </button>
+            <span>
+              button in n8n
+            </span>
+          </div>
+          <!--v-if-->
+        </div>
+        
+      </div>
+    </div>
+    <div
+      class="inputWrapper disabledInput"
+      data-test-id="chat-input-wrapper"
+    >
+      <textarea
+        data-test-id="chat-input"
+        disabled=""
+        placeholder="Enter your response..."
+        rows="1"
+        wrap="hard"
+      />
+      <n8n-icon-button
+        class="sendButton"
+        data-test-id="send-message-button"
+        disabled="true"
+        icon="paper-plane"
+        size="large"
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`AskAssistantChat > renders streaming chat correctly 1`] = `
+<div>
+  <div
+    class="container"
+    isstreaming="true"
+  >
+    <div
+      class="header"
+    >
+      <div
+        class="chatTitle"
+      >
+        <div
+          class="headerText"
+        >
+          <svg
+            fill="none"
+            height="18"
+            viewBox="0 0 24 24"
+            width="18"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19.9658 14.0171C19.9679 14.3549 19.8654 14.6851 19.6722 14.9622C19.479 15.2393 19.2046 15.4497 18.8869 15.5645L13.5109 17.5451L11.5303 22.9211C11.4137 23.2376 11.2028 23.5107 10.9261 23.7037C10.6494 23.8966 10.3202 24 9.9829 24C9.64559 24 9.3164 23.8966 9.0397 23.7037C8.76301 23.5107 8.55212 23.2376 8.43549 22.9211L6.45487 17.5451L1.07888 15.5645C0.762384 15.4479 0.489262 15.237 0.296347 14.9603C0.103431 14.6836 0 14.3544 0 14.0171C0 13.6798 0.103431 13.3506 0.296347 13.0739C0.489262 12.7972 0.762384 12.5863 1.07888 12.4697L6.45487 10.4891L8.43549 5.11309C8.55212 4.79659 8.76301 4.52347 9.0397 4.33055C9.3164 4.13764 9.64559 4.0342 9.9829 4.0342C10.3202 4.0342 10.6494 4.13764 10.9261 4.33055C11.2028 4.52347 11.4137 4.79659 11.5303 5.11309L13.5109 10.4891L18.8869 12.4697C19.2046 12.5845 19.479 12.7949 19.6722 13.072C19.8654 13.3491 19.9679 13.6793 19.9658 14.0171ZM14.1056 4.12268H15.7546V5.77175C15.7546 5.99043 15.8415 6.20015 15.9961 6.35478C16.1508 6.50941 16.3605 6.59628 16.5792 6.59628C16.7979 6.59628 17.0076 6.50941 17.1622 6.35478C17.3168 6.20015 17.4037 5.99043 17.4037 5.77175V4.12268H19.0528C19.2715 4.12268 19.4812 4.03581 19.6358 3.88118C19.7905 3.72655 19.8773 3.51682 19.8773 3.29814C19.8773 3.07946 19.7905 2.86974 19.6358 2.71511C19.4812 2.56048 19.2715 2.47361 19.0528 2.47361H17.4037V0.824535C17.4037 0.605855 17.3168 0.396131 17.1622 0.241501C17.0076 0.0868704 16.7979 0 16.5792 0C16.3605 0 16.1508 0.0868704 15.9961 0.241501C15.8415 0.396131 15.7546 0.605855 15.7546 0.824535V2.47361H14.1056C13.8869 2.47361 13.6772 2.56048 13.5225 2.71511C13.3679 2.86974 13.281 3.07946 13.281 3.29814C13.281 3.51682 13.3679 3.72655 13.5225 3.88118C13.6772 4.03581 13.8869 4.12268 14.1056 4.12268ZM23.1755 7.42082H22.3509V6.59628C22.3509 6.3776 22.2641 6.16788 22.1094 6.01325C21.9548 5.85862 21.7451 5.77175 21.5264 5.77175C21.3077 5.77175 21.098 5.85862 20.9434 6.01325C20.7887 6.16788 20.7019 6.3776 20.7019 6.59628V7.42082H19.8773C19.6586 7.42082 19.4489 7.50769 19.2943 7.66232C19.1397 7.81695 19.0528 8.02667 19.0528 8.24535C19.0528 8.46404 19.1397 8.67376 19.2943 8.82839C19.4489 8.98302 19.6586 9.06989 19.8773 9.06989H20.7019V9.89443C20.7019 10.1131 20.7887 10.3228 20.9434 10.4775C21.098 10.6321 21.3077 10.719 21.5264 10.719C21.7451 10.719 21.9548 10.6321 22.1094 10.4775C22.2641 10.3228 22.3509 10.1131 22.3509 9.89443V9.06989H23.1755C23.3941 9.06989 23.6039 8.98302 23.7585 8.82839C23.9131 8.67376 24 8.46404 24 8.24535C24 8.02667 23.9131 7.81695 23.7585 7.66232C23.6039 7.50769 23.3941 7.42082 23.1755 7.42082Z"
+              fill="url(#paint0_linear_173_12825)"
+            />
+            <defs>
+              <lineargradient
+                gradientUnits="userSpaceOnUse"
+                id="paint0_linear_173_12825"
+                x1="-3.67094e-07"
+                x2="28.8315"
+                y1="-0.000120994"
+                y2="9.82667"
+              >
+                <stop
+                  stop-color="var(--color-assistant-highlight-1)"
+                />
+                <stop
+                  offset="0.495"
+                  stop-color="var(--color-assistant-highlight-2)"
+                />
+                <stop
+                  offset="1"
+                  stop-color="var(--color-assistant-highlight-3)"
+                />
+              </lineargradient>
+            </defs>
+          </svg>
+          <span
+            class="text large"
+          >
+            AI Assistant
+          </span>
+        </div>
+        <div
+          class="beta"
+        >
+          beta
+        </div>
+      </div>
+      <div
+        class="back"
+        data-test-id="close-chat-button"
+      >
+        <n8n-icon
+          color="text-base"
+          icon="arrow-right"
+        />
+      </div>
+    </div>
+    <div
+      class="body"
+    >
+      <div
+        class="messages"
+      >
+        
+        <div
+          class="message"
+          data-test-id="chat-message-assistant"
+        >
+          <div
+            class="roleName"
+          >
+            <div
+              class="container small"
+            >
+              <svg
+                fill="none"
+                height="10"
+                viewBox="0 0 24 24"
+                width="10"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M19.9658 14.0171C19.9679 14.3549 19.8654 14.6851 19.6722 14.9622C19.479 15.2393 19.2046 15.4497 18.8869 15.5645L13.5109 17.5451L11.5303 22.9211C11.4137 23.2376 11.2028 23.5107 10.9261 23.7037C10.6494 23.8966 10.3202 24 9.9829 24C9.64559 24 9.3164 23.8966 9.0397 23.7037C8.76301 23.5107 8.55212 23.2376 8.43549 22.9211L6.45487 17.5451L1.07888 15.5645C0.762384 15.4479 0.489262 15.237 0.296347 14.9603C0.103431 14.6836 0 14.3544 0 14.0171C0 13.6798 0.103431 13.3506 0.296347 13.0739C0.489262 12.7972 0.762384 12.5863 1.07888 12.4697L6.45487 10.4891L8.43549 5.11309C8.55212 4.79659 8.76301 4.52347 9.0397 4.33055C9.3164 4.13764 9.64559 4.0342 9.9829 4.0342C10.3202 4.0342 10.6494 4.13764 10.9261 4.33055C11.2028 4.52347 11.4137 4.79659 11.5303 5.11309L13.5109 10.4891L18.8869 12.4697C19.2046 12.5845 19.479 12.7949 19.6722 13.072C19.8654 13.3491 19.9679 13.6793 19.9658 14.0171ZM14.1056 4.12268H15.7546V5.77175C15.7546 5.99043 15.8415 6.20015 15.9961 6.35478C16.1508 6.50941 16.3605 6.59628 16.5792 6.59628C16.7979 6.59628 17.0076 6.50941 17.1622 6.35478C17.3168 6.20015 17.4037 5.99043 17.4037 5.77175V4.12268H19.0528C19.2715 4.12268 19.4812 4.03581 19.6358 3.88118C19.7905 3.72655 19.8773 3.51682 19.8773 3.29814C19.8773 3.07946 19.7905 2.86974 19.6358 2.71511C19.4812 2.56048 19.2715 2.47361 19.0528 2.47361H17.4037V0.824535C17.4037 0.605855 17.3168 0.396131 17.1622 0.241501C17.0076 0.0868704 16.7979 0 16.5792 0C16.3605 0 16.1508 0.0868704 15.9961 0.241501C15.8415 0.396131 15.7546 0.605855 15.7546 0.824535V2.47361H14.1056C13.8869 2.47361 13.6772 2.56048 13.5225 2.71511C13.3679 2.86974 13.281 3.07946 13.281 3.29814C13.281 3.51682 13.3679 3.72655 13.5225 3.88118C13.6772 4.03581 13.8869 4.12268 14.1056 4.12268ZM23.1755 7.42082H22.3509V6.59628C22.3509 6.3776 22.2641 6.16788 22.1094 6.01325C21.9548 5.85862 21.7451 5.77175 21.5264 5.77175C21.3077 5.77175 21.098 5.85862 20.9434 6.01325C20.7887 6.16788 20.7019 6.3776 20.7019 6.59628V7.42082H19.8773C19.6586 7.42082 19.4489 7.50769 19.2943 7.66232C19.1397 7.81695 19.0528 8.02667 19.0528 8.24535C19.0528 8.46404 19.1397 8.67376 19.2943 8.82839C19.4489 8.98302 19.6586 9.06989 19.8773 9.06989H20.7019V9.89443C20.7019 10.1131 20.7887 10.3228 20.9434 10.4775C21.098 10.6321 21.3077 10.719 21.5264 10.719C21.7451 10.719 21.9548 10.6321 22.1094 10.4775C22.2641 10.3228 22.3509 10.1131 22.3509 9.89443V9.06989H23.1755C23.3941 9.06989 23.6039 8.98302 23.7585 8.82839C23.9131 8.67376 24 8.46404 24 8.24535C24 8.02667 23.9131 7.81695 23.7585 7.66232C23.6039 7.50769 23.3941 7.42082 23.1755 7.42082Z"
+                  fill="white"
+                />
+                <defs>
+                  <lineargradient
+                    gradientUnits="userSpaceOnUse"
+                    id="paint0_linear_173_12825"
+                    x1="-3.67094e-07"
+                    x2="28.8315"
+                    y1="-0.000120994"
+                    y2="9.82667"
+                  >
+                    <stop
+                      stop-color="var(--color-assistant-highlight-1)"
+                    />
+                    <stop
+                      offset="0.495"
+                      stop-color="var(--color-assistant-highlight-2)"
+                    />
+                    <stop
+                      offset="1"
+                      stop-color="var(--color-assistant-highlight-3)"
+                    />
+                  </lineargradient>
+                </defs>
+              </svg>
+            </div>
+            <span>
+              Assistant
+            </span>
+          </div>
+          <div
+            class="textMessage"
+          >
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            
+            <!-- eslint-disable-next-line vue/no-v-html -->
+            <span
+              class="assistantText"
+            >
+              <p>
+                Hi Max! Here is my top solution to fix the error in your 
+                <strong>
+                  Transform data
+                </strong>
+                 node👇
+              </p>
+              
+
+            </span>
+            
+            <!--v-if-->
+          </div>
+          <!--v-if-->
+        </div>
+        
+      </div>
+    </div>
+    <div
+      class="inputWrapper"
+      data-test-id="chat-input-wrapper"
+    >
+      <textarea
+        data-test-id="chat-input"
+        placeholder="Enter your response..."
+        rows="1"
+        wrap="hard"
+      />
+      <n8n-icon-button
+        class="sendButton"
+        data-test-id="send-message-button"
+        disabled="true"
+        icon="paper-plane"
+        size="large"
+        type="text"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/design-system/src/components/AskAssistantIcon/__tests__/AssistantIcon.spec.ts b/packages/design-system/src/components/AskAssistantIcon/__tests__/AssistantIcon.spec.ts
new file mode 100644
index 0000000000000..3192d26461ea3
--- /dev/null
+++ b/packages/design-system/src/components/AskAssistantIcon/__tests__/AssistantIcon.spec.ts
@@ -0,0 +1,49 @@
+import { render } from '@testing-library/vue';
+import AssistantIcon from '../AssistantIcon.vue';
+
+describe('AssistantIcon', () => {
+	it('renders default icon correctly', () => {
+		const { container } = render(AssistantIcon, {});
+		expect(container).toMatchSnapshot();
+	});
+	it('renders blank icon correctly', () => {
+		const { container } = render(AssistantIcon, {
+			props: {
+				theme: 'blank',
+			},
+		});
+		expect(container).toMatchSnapshot();
+	});
+	it('renders mini icon correctly', () => {
+		const { container } = render(AssistantIcon, {
+			props: {
+				size: 'mini',
+			},
+		});
+		expect(container).toMatchSnapshot();
+	});
+	it('renders small icon correctly', () => {
+		const { container } = render(AssistantIcon, {
+			props: {
+				size: 'small',
+			},
+		});
+		expect(container).toMatchSnapshot();
+	});
+	it('renders medium icon correctly', () => {
+		const { container } = render(AssistantIcon, {
+			props: {
+				size: 'medium',
+			},
+		});
+		expect(container).toMatchSnapshot();
+	});
+	it('renders large icon correctly', () => {
+		const { container } = render(AssistantIcon, {
+			props: {
+				size: 'large',
+			},
+		});
+		expect(container).toMatchSnapshot();
+	});
+});
diff --git a/packages/design-system/src/components/AskAssistantIcon/__tests__/__snapshots__/AssistantIcon.spec.ts.snap b/packages/design-system/src/components/AskAssistantIcon/__tests__/__snapshots__/AssistantIcon.spec.ts.snap
new file mode 100644
index 0000000000000..6614b3d613a84
--- /dev/null
+++ b/packages/design-system/src/components/AskAssistantIcon/__tests__/__snapshots__/AssistantIcon.spec.ts.snap
@@ -0,0 +1,235 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AssistantIcon > renders blank icon correctly 1`] = `
+<div>
+  <svg
+    fill="none"
+    height="12"
+    viewBox="0 0 24 24"
+    width="12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19.9658 14.0171C19.9679 14.3549 19.8654 14.6851 19.6722 14.9622C19.479 15.2393 19.2046 15.4497 18.8869 15.5645L13.5109 17.5451L11.5303 22.9211C11.4137 23.2376 11.2028 23.5107 10.9261 23.7037C10.6494 23.8966 10.3202 24 9.9829 24C9.64559 24 9.3164 23.8966 9.0397 23.7037C8.76301 23.5107 8.55212 23.2376 8.43549 22.9211L6.45487 17.5451L1.07888 15.5645C0.762384 15.4479 0.489262 15.237 0.296347 14.9603C0.103431 14.6836 0 14.3544 0 14.0171C0 13.6798 0.103431 13.3506 0.296347 13.0739C0.489262 12.7972 0.762384 12.5863 1.07888 12.4697L6.45487 10.4891L8.43549 5.11309C8.55212 4.79659 8.76301 4.52347 9.0397 4.33055C9.3164 4.13764 9.64559 4.0342 9.9829 4.0342C10.3202 4.0342 10.6494 4.13764 10.9261 4.33055C11.2028 4.52347 11.4137 4.79659 11.5303 5.11309L13.5109 10.4891L18.8869 12.4697C19.2046 12.5845 19.479 12.7949 19.6722 13.072C19.8654 13.3491 19.9679 13.6793 19.9658 14.0171ZM14.1056 4.12268H15.7546V5.77175C15.7546 5.99043 15.8415 6.20015 15.9961 6.35478C16.1508 6.50941 16.3605 6.59628 16.5792 6.59628C16.7979 6.59628 17.0076 6.50941 17.1622 6.35478C17.3168 6.20015 17.4037 5.99043 17.4037 5.77175V4.12268H19.0528C19.2715 4.12268 19.4812 4.03581 19.6358 3.88118C19.7905 3.72655 19.8773 3.51682 19.8773 3.29814C19.8773 3.07946 19.7905 2.86974 19.6358 2.71511C19.4812 2.56048 19.2715 2.47361 19.0528 2.47361H17.4037V0.824535C17.4037 0.605855 17.3168 0.396131 17.1622 0.241501C17.0076 0.0868704 16.7979 0 16.5792 0C16.3605 0 16.1508 0.0868704 15.9961 0.241501C15.8415 0.396131 15.7546 0.605855 15.7546 0.824535V2.47361H14.1056C13.8869 2.47361 13.6772 2.56048 13.5225 2.71511C13.3679 2.86974 13.281 3.07946 13.281 3.29814C13.281 3.51682 13.3679 3.72655 13.5225 3.88118C13.6772 4.03581 13.8869 4.12268 14.1056 4.12268ZM23.1755 7.42082H22.3509V6.59628C22.3509 6.3776 22.2641 6.16788 22.1094 6.01325C21.9548 5.85862 21.7451 5.77175 21.5264 5.77175C21.3077 5.77175 21.098 5.85862 20.9434 6.01325C20.7887 6.16788 20.7019 6.3776 20.7019 6.59628V7.42082H19.8773C19.6586 7.42082 19.4489 7.50769 19.2943 7.66232C19.1397 7.81695 19.0528 8.02667 19.0528 8.24535C19.0528 8.46404 19.1397 8.67376 19.2943 8.82839C19.4489 8.98302 19.6586 9.06989 19.8773 9.06989H20.7019V9.89443C20.7019 10.1131 20.7887 10.3228 20.9434 10.4775C21.098 10.6321 21.3077 10.719 21.5264 10.719C21.7451 10.719 21.9548 10.6321 22.1094 10.4775C22.2641 10.3228 22.3509 10.1131 22.3509 9.89443V9.06989H23.1755C23.3941 9.06989 23.6039 8.98302 23.7585 8.82839C23.9131 8.67376 24 8.46404 24 8.24535C24 8.02667 23.9131 7.81695 23.7585 7.66232C23.6039 7.50769 23.3941 7.42082 23.1755 7.42082Z"
+      fill="white"
+    />
+    <defs>
+      <lineargradient
+        gradientUnits="userSpaceOnUse"
+        id="paint0_linear_173_12825"
+        x1="-3.67094e-07"
+        x2="28.8315"
+        y1="-0.000120994"
+        y2="9.82667"
+      >
+        <stop
+          stop-color="var(--color-assistant-highlight-1)"
+        />
+        <stop
+          offset="0.495"
+          stop-color="var(--color-assistant-highlight-2)"
+        />
+        <stop
+          offset="1"
+          stop-color="var(--color-assistant-highlight-3)"
+        />
+      </lineargradient>
+    </defs>
+  </svg>
+</div>
+`;
+
+exports[`AssistantIcon > renders default icon correctly 1`] = `
+<div>
+  <svg
+    fill="none"
+    height="12"
+    viewBox="0 0 24 24"
+    width="12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19.9658 14.0171C19.9679 14.3549 19.8654 14.6851 19.6722 14.9622C19.479 15.2393 19.2046 15.4497 18.8869 15.5645L13.5109 17.5451L11.5303 22.9211C11.4137 23.2376 11.2028 23.5107 10.9261 23.7037C10.6494 23.8966 10.3202 24 9.9829 24C9.64559 24 9.3164 23.8966 9.0397 23.7037C8.76301 23.5107 8.55212 23.2376 8.43549 22.9211L6.45487 17.5451L1.07888 15.5645C0.762384 15.4479 0.489262 15.237 0.296347 14.9603C0.103431 14.6836 0 14.3544 0 14.0171C0 13.6798 0.103431 13.3506 0.296347 13.0739C0.489262 12.7972 0.762384 12.5863 1.07888 12.4697L6.45487 10.4891L8.43549 5.11309C8.55212 4.79659 8.76301 4.52347 9.0397 4.33055C9.3164 4.13764 9.64559 4.0342 9.9829 4.0342C10.3202 4.0342 10.6494 4.13764 10.9261 4.33055C11.2028 4.52347 11.4137 4.79659 11.5303 5.11309L13.5109 10.4891L18.8869 12.4697C19.2046 12.5845 19.479 12.7949 19.6722 13.072C19.8654 13.3491 19.9679 13.6793 19.9658 14.0171ZM14.1056 4.12268H15.7546V5.77175C15.7546 5.99043 15.8415 6.20015 15.9961 6.35478C16.1508 6.50941 16.3605 6.59628 16.5792 6.59628C16.7979 6.59628 17.0076 6.50941 17.1622 6.35478C17.3168 6.20015 17.4037 5.99043 17.4037 5.77175V4.12268H19.0528C19.2715 4.12268 19.4812 4.03581 19.6358 3.88118C19.7905 3.72655 19.8773 3.51682 19.8773 3.29814C19.8773 3.07946 19.7905 2.86974 19.6358 2.71511C19.4812 2.56048 19.2715 2.47361 19.0528 2.47361H17.4037V0.824535C17.4037 0.605855 17.3168 0.396131 17.1622 0.241501C17.0076 0.0868704 16.7979 0 16.5792 0C16.3605 0 16.1508 0.0868704 15.9961 0.241501C15.8415 0.396131 15.7546 0.605855 15.7546 0.824535V2.47361H14.1056C13.8869 2.47361 13.6772 2.56048 13.5225 2.71511C13.3679 2.86974 13.281 3.07946 13.281 3.29814C13.281 3.51682 13.3679 3.72655 13.5225 3.88118C13.6772 4.03581 13.8869 4.12268 14.1056 4.12268ZM23.1755 7.42082H22.3509V6.59628C22.3509 6.3776 22.2641 6.16788 22.1094 6.01325C21.9548 5.85862 21.7451 5.77175 21.5264 5.77175C21.3077 5.77175 21.098 5.85862 20.9434 6.01325C20.7887 6.16788 20.7019 6.3776 20.7019 6.59628V7.42082H19.8773C19.6586 7.42082 19.4489 7.50769 19.2943 7.66232C19.1397 7.81695 19.0528 8.02667 19.0528 8.24535C19.0528 8.46404 19.1397 8.67376 19.2943 8.82839C19.4489 8.98302 19.6586 9.06989 19.8773 9.06989H20.7019V9.89443C20.7019 10.1131 20.7887 10.3228 20.9434 10.4775C21.098 10.6321 21.3077 10.719 21.5264 10.719C21.7451 10.719 21.9548 10.6321 22.1094 10.4775C22.2641 10.3228 22.3509 10.1131 22.3509 9.89443V9.06989H23.1755C23.3941 9.06989 23.6039 8.98302 23.7585 8.82839C23.9131 8.67376 24 8.46404 24 8.24535C24 8.02667 23.9131 7.81695 23.7585 7.66232C23.6039 7.50769 23.3941 7.42082 23.1755 7.42082Z"
+      fill="url(#paint0_linear_173_12825)"
+    />
+    <defs>
+      <lineargradient
+        gradientUnits="userSpaceOnUse"
+        id="paint0_linear_173_12825"
+        x1="-3.67094e-07"
+        x2="28.8315"
+        y1="-0.000120994"
+        y2="9.82667"
+      >
+        <stop
+          stop-color="var(--color-assistant-highlight-1)"
+        />
+        <stop
+          offset="0.495"
+          stop-color="var(--color-assistant-highlight-2)"
+        />
+        <stop
+          offset="1"
+          stop-color="var(--color-assistant-highlight-3)"
+        />
+      </lineargradient>
+    </defs>
+  </svg>
+</div>
+`;
+
+exports[`AssistantIcon > renders large icon correctly 1`] = `
+<div>
+  <svg
+    fill="none"
+    height="18"
+    viewBox="0 0 24 24"
+    width="18"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19.9658 14.0171C19.9679 14.3549 19.8654 14.6851 19.6722 14.9622C19.479 15.2393 19.2046 15.4497 18.8869 15.5645L13.5109 17.5451L11.5303 22.9211C11.4137 23.2376 11.2028 23.5107 10.9261 23.7037C10.6494 23.8966 10.3202 24 9.9829 24C9.64559 24 9.3164 23.8966 9.0397 23.7037C8.76301 23.5107 8.55212 23.2376 8.43549 22.9211L6.45487 17.5451L1.07888 15.5645C0.762384 15.4479 0.489262 15.237 0.296347 14.9603C0.103431 14.6836 0 14.3544 0 14.0171C0 13.6798 0.103431 13.3506 0.296347 13.0739C0.489262 12.7972 0.762384 12.5863 1.07888 12.4697L6.45487 10.4891L8.43549 5.11309C8.55212 4.79659 8.76301 4.52347 9.0397 4.33055C9.3164 4.13764 9.64559 4.0342 9.9829 4.0342C10.3202 4.0342 10.6494 4.13764 10.9261 4.33055C11.2028 4.52347 11.4137 4.79659 11.5303 5.11309L13.5109 10.4891L18.8869 12.4697C19.2046 12.5845 19.479 12.7949 19.6722 13.072C19.8654 13.3491 19.9679 13.6793 19.9658 14.0171ZM14.1056 4.12268H15.7546V5.77175C15.7546 5.99043 15.8415 6.20015 15.9961 6.35478C16.1508 6.50941 16.3605 6.59628 16.5792 6.59628C16.7979 6.59628 17.0076 6.50941 17.1622 6.35478C17.3168 6.20015 17.4037 5.99043 17.4037 5.77175V4.12268H19.0528C19.2715 4.12268 19.4812 4.03581 19.6358 3.88118C19.7905 3.72655 19.8773 3.51682 19.8773 3.29814C19.8773 3.07946 19.7905 2.86974 19.6358 2.71511C19.4812 2.56048 19.2715 2.47361 19.0528 2.47361H17.4037V0.824535C17.4037 0.605855 17.3168 0.396131 17.1622 0.241501C17.0076 0.0868704 16.7979 0 16.5792 0C16.3605 0 16.1508 0.0868704 15.9961 0.241501C15.8415 0.396131 15.7546 0.605855 15.7546 0.824535V2.47361H14.1056C13.8869 2.47361 13.6772 2.56048 13.5225 2.71511C13.3679 2.86974 13.281 3.07946 13.281 3.29814C13.281 3.51682 13.3679 3.72655 13.5225 3.88118C13.6772 4.03581 13.8869 4.12268 14.1056 4.12268ZM23.1755 7.42082H22.3509V6.59628C22.3509 6.3776 22.2641 6.16788 22.1094 6.01325C21.9548 5.85862 21.7451 5.77175 21.5264 5.77175C21.3077 5.77175 21.098 5.85862 20.9434 6.01325C20.7887 6.16788 20.7019 6.3776 20.7019 6.59628V7.42082H19.8773C19.6586 7.42082 19.4489 7.50769 19.2943 7.66232C19.1397 7.81695 19.0528 8.02667 19.0528 8.24535C19.0528 8.46404 19.1397 8.67376 19.2943 8.82839C19.4489 8.98302 19.6586 9.06989 19.8773 9.06989H20.7019V9.89443C20.7019 10.1131 20.7887 10.3228 20.9434 10.4775C21.098 10.6321 21.3077 10.719 21.5264 10.719C21.7451 10.719 21.9548 10.6321 22.1094 10.4775C22.2641 10.3228 22.3509 10.1131 22.3509 9.89443V9.06989H23.1755C23.3941 9.06989 23.6039 8.98302 23.7585 8.82839C23.9131 8.67376 24 8.46404 24 8.24535C24 8.02667 23.9131 7.81695 23.7585 7.66232C23.6039 7.50769 23.3941 7.42082 23.1755 7.42082Z"
+      fill="url(#paint0_linear_173_12825)"
+    />
+    <defs>
+      <lineargradient
+        gradientUnits="userSpaceOnUse"
+        id="paint0_linear_173_12825"
+        x1="-3.67094e-07"
+        x2="28.8315"
+        y1="-0.000120994"
+        y2="9.82667"
+      >
+        <stop
+          stop-color="var(--color-assistant-highlight-1)"
+        />
+        <stop
+          offset="0.495"
+          stop-color="var(--color-assistant-highlight-2)"
+        />
+        <stop
+          offset="1"
+          stop-color="var(--color-assistant-highlight-3)"
+        />
+      </lineargradient>
+    </defs>
+  </svg>
+</div>
+`;
+
+exports[`AssistantIcon > renders medium icon correctly 1`] = `
+<div>
+  <svg
+    fill="none"
+    height="12"
+    viewBox="0 0 24 24"
+    width="12"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19.9658 14.0171C19.9679 14.3549 19.8654 14.6851 19.6722 14.9622C19.479 15.2393 19.2046 15.4497 18.8869 15.5645L13.5109 17.5451L11.5303 22.9211C11.4137 23.2376 11.2028 23.5107 10.9261 23.7037C10.6494 23.8966 10.3202 24 9.9829 24C9.64559 24 9.3164 23.8966 9.0397 23.7037C8.76301 23.5107 8.55212 23.2376 8.43549 22.9211L6.45487 17.5451L1.07888 15.5645C0.762384 15.4479 0.489262 15.237 0.296347 14.9603C0.103431 14.6836 0 14.3544 0 14.0171C0 13.6798 0.103431 13.3506 0.296347 13.0739C0.489262 12.7972 0.762384 12.5863 1.07888 12.4697L6.45487 10.4891L8.43549 5.11309C8.55212 4.79659 8.76301 4.52347 9.0397 4.33055C9.3164 4.13764 9.64559 4.0342 9.9829 4.0342C10.3202 4.0342 10.6494 4.13764 10.9261 4.33055C11.2028 4.52347 11.4137 4.79659 11.5303 5.11309L13.5109 10.4891L18.8869 12.4697C19.2046 12.5845 19.479 12.7949 19.6722 13.072C19.8654 13.3491 19.9679 13.6793 19.9658 14.0171ZM14.1056 4.12268H15.7546V5.77175C15.7546 5.99043 15.8415 6.20015 15.9961 6.35478C16.1508 6.50941 16.3605 6.59628 16.5792 6.59628C16.7979 6.59628 17.0076 6.50941 17.1622 6.35478C17.3168 6.20015 17.4037 5.99043 17.4037 5.77175V4.12268H19.0528C19.2715 4.12268 19.4812 4.03581 19.6358 3.88118C19.7905 3.72655 19.8773 3.51682 19.8773 3.29814C19.8773 3.07946 19.7905 2.86974 19.6358 2.71511C19.4812 2.56048 19.2715 2.47361 19.0528 2.47361H17.4037V0.824535C17.4037 0.605855 17.3168 0.396131 17.1622 0.241501C17.0076 0.0868704 16.7979 0 16.5792 0C16.3605 0 16.1508 0.0868704 15.9961 0.241501C15.8415 0.396131 15.7546 0.605855 15.7546 0.824535V2.47361H14.1056C13.8869 2.47361 13.6772 2.56048 13.5225 2.71511C13.3679 2.86974 13.281 3.07946 13.281 3.29814C13.281 3.51682 13.3679 3.72655 13.5225 3.88118C13.6772 4.03581 13.8869 4.12268 14.1056 4.12268ZM23.1755 7.42082H22.3509V6.59628C22.3509 6.3776 22.2641 6.16788 22.1094 6.01325C21.9548 5.85862 21.7451 5.77175 21.5264 5.77175C21.3077 5.77175 21.098 5.85862 20.9434 6.01325C20.7887 6.16788 20.7019 6.3776 20.7019 6.59628V7.42082H19.8773C19.6586 7.42082 19.4489 7.50769 19.2943 7.66232C19.1397 7.81695 19.0528 8.02667 19.0528 8.24535C19.0528 8.46404 19.1397 8.67376 19.2943 8.82839C19.4489 8.98302 19.6586 9.06989 19.8773 9.06989H20.7019V9.89443C20.7019 10.1131 20.7887 10.3228 20.9434 10.4775C21.098 10.6321 21.3077 10.719 21.5264 10.719C21.7451 10.719 21.9548 10.6321 22.1094 10.4775C22.2641 10.3228 22.3509 10.1131 22.3509 9.89443V9.06989H23.1755C23.3941 9.06989 23.6039 8.98302 23.7585 8.82839C23.9131 8.67376 24 8.46404 24 8.24535C24 8.02667 23.9131 7.81695 23.7585 7.66232C23.6039 7.50769 23.3941 7.42082 23.1755 7.42082Z"
+      fill="url(#paint0_linear_173_12825)"
+    />
+    <defs>
+      <lineargradient
+        gradientUnits="userSpaceOnUse"
+        id="paint0_linear_173_12825"
+        x1="-3.67094e-07"
+        x2="28.8315"
+        y1="-0.000120994"
+        y2="9.82667"
+      >
+        <stop
+          stop-color="var(--color-assistant-highlight-1)"
+        />
+        <stop
+          offset="0.495"
+          stop-color="var(--color-assistant-highlight-2)"
+        />
+        <stop
+          offset="1"
+          stop-color="var(--color-assistant-highlight-3)"
+        />
+      </lineargradient>
+    </defs>
+  </svg>
+</div>
+`;
+
+exports[`AssistantIcon > renders mini icon correctly 1`] = `
+<div>
+  <svg
+    fill="none"
+    height="8"
+    viewBox="0 0 24 24"
+    width="8"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19.9658 14.0171C19.9679 14.3549 19.8654 14.6851 19.6722 14.9622C19.479 15.2393 19.2046 15.4497 18.8869 15.5645L13.5109 17.5451L11.5303 22.9211C11.4137 23.2376 11.2028 23.5107 10.9261 23.7037C10.6494 23.8966 10.3202 24 9.9829 24C9.64559 24 9.3164 23.8966 9.0397 23.7037C8.76301 23.5107 8.55212 23.2376 8.43549 22.9211L6.45487 17.5451L1.07888 15.5645C0.762384 15.4479 0.489262 15.237 0.296347 14.9603C0.103431 14.6836 0 14.3544 0 14.0171C0 13.6798 0.103431 13.3506 0.296347 13.0739C0.489262 12.7972 0.762384 12.5863 1.07888 12.4697L6.45487 10.4891L8.43549 5.11309C8.55212 4.79659 8.76301 4.52347 9.0397 4.33055C9.3164 4.13764 9.64559 4.0342 9.9829 4.0342C10.3202 4.0342 10.6494 4.13764 10.9261 4.33055C11.2028 4.52347 11.4137 4.79659 11.5303 5.11309L13.5109 10.4891L18.8869 12.4697C19.2046 12.5845 19.479 12.7949 19.6722 13.072C19.8654 13.3491 19.9679 13.6793 19.9658 14.0171ZM14.1056 4.12268H15.7546V5.77175C15.7546 5.99043 15.8415 6.20015 15.9961 6.35478C16.1508 6.50941 16.3605 6.59628 16.5792 6.59628C16.7979 6.59628 17.0076 6.50941 17.1622 6.35478C17.3168 6.20015 17.4037 5.99043 17.4037 5.77175V4.12268H19.0528C19.2715 4.12268 19.4812 4.03581 19.6358 3.88118C19.7905 3.72655 19.8773 3.51682 19.8773 3.29814C19.8773 3.07946 19.7905 2.86974 19.6358 2.71511C19.4812 2.56048 19.2715 2.47361 19.0528 2.47361H17.4037V0.824535C17.4037 0.605855 17.3168 0.396131 17.1622 0.241501C17.0076 0.0868704 16.7979 0 16.5792 0C16.3605 0 16.1508 0.0868704 15.9961 0.241501C15.8415 0.396131 15.7546 0.605855 15.7546 0.824535V2.47361H14.1056C13.8869 2.47361 13.6772 2.56048 13.5225 2.71511C13.3679 2.86974 13.281 3.07946 13.281 3.29814C13.281 3.51682 13.3679 3.72655 13.5225 3.88118C13.6772 4.03581 13.8869 4.12268 14.1056 4.12268ZM23.1755 7.42082H22.3509V6.59628C22.3509 6.3776 22.2641 6.16788 22.1094 6.01325C21.9548 5.85862 21.7451 5.77175 21.5264 5.77175C21.3077 5.77175 21.098 5.85862 20.9434 6.01325C20.7887 6.16788 20.7019 6.3776 20.7019 6.59628V7.42082H19.8773C19.6586 7.42082 19.4489 7.50769 19.2943 7.66232C19.1397 7.81695 19.0528 8.02667 19.0528 8.24535C19.0528 8.46404 19.1397 8.67376 19.2943 8.82839C19.4489 8.98302 19.6586 9.06989 19.8773 9.06989H20.7019V9.89443C20.7019 10.1131 20.7887 10.3228 20.9434 10.4775C21.098 10.6321 21.3077 10.719 21.5264 10.719C21.7451 10.719 21.9548 10.6321 22.1094 10.4775C22.2641 10.3228 22.3509 10.1131 22.3509 9.89443V9.06989H23.1755C23.3941 9.06989 23.6039 8.98302 23.7585 8.82839C23.9131 8.67376 24 8.46404 24 8.24535C24 8.02667 23.9131 7.81695 23.7585 7.66232C23.6039 7.50769 23.3941 7.42082 23.1755 7.42082Z"
+      fill="url(#paint0_linear_173_12825)"
+    />
+    <defs>
+      <lineargradient
+        gradientUnits="userSpaceOnUse"
+        id="paint0_linear_173_12825"
+        x1="-3.67094e-07"
+        x2="28.8315"
+        y1="-0.000120994"
+        y2="9.82667"
+      >
+        <stop
+          stop-color="var(--color-assistant-highlight-1)"
+        />
+        <stop
+          offset="0.495"
+          stop-color="var(--color-assistant-highlight-2)"
+        />
+        <stop
+          offset="1"
+          stop-color="var(--color-assistant-highlight-3)"
+        />
+      </lineargradient>
+    </defs>
+  </svg>
+</div>
+`;
+
+exports[`AssistantIcon > renders small icon correctly 1`] = `
+<div>
+  <svg
+    fill="none"
+    height="10"
+    viewBox="0 0 24 24"
+    width="10"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19.9658 14.0171C19.9679 14.3549 19.8654 14.6851 19.6722 14.9622C19.479 15.2393 19.2046 15.4497 18.8869 15.5645L13.5109 17.5451L11.5303 22.9211C11.4137 23.2376 11.2028 23.5107 10.9261 23.7037C10.6494 23.8966 10.3202 24 9.9829 24C9.64559 24 9.3164 23.8966 9.0397 23.7037C8.76301 23.5107 8.55212 23.2376 8.43549 22.9211L6.45487 17.5451L1.07888 15.5645C0.762384 15.4479 0.489262 15.237 0.296347 14.9603C0.103431 14.6836 0 14.3544 0 14.0171C0 13.6798 0.103431 13.3506 0.296347 13.0739C0.489262 12.7972 0.762384 12.5863 1.07888 12.4697L6.45487 10.4891L8.43549 5.11309C8.55212 4.79659 8.76301 4.52347 9.0397 4.33055C9.3164 4.13764 9.64559 4.0342 9.9829 4.0342C10.3202 4.0342 10.6494 4.13764 10.9261 4.33055C11.2028 4.52347 11.4137 4.79659 11.5303 5.11309L13.5109 10.4891L18.8869 12.4697C19.2046 12.5845 19.479 12.7949 19.6722 13.072C19.8654 13.3491 19.9679 13.6793 19.9658 14.0171ZM14.1056 4.12268H15.7546V5.77175C15.7546 5.99043 15.8415 6.20015 15.9961 6.35478C16.1508 6.50941 16.3605 6.59628 16.5792 6.59628C16.7979 6.59628 17.0076 6.50941 17.1622 6.35478C17.3168 6.20015 17.4037 5.99043 17.4037 5.77175V4.12268H19.0528C19.2715 4.12268 19.4812 4.03581 19.6358 3.88118C19.7905 3.72655 19.8773 3.51682 19.8773 3.29814C19.8773 3.07946 19.7905 2.86974 19.6358 2.71511C19.4812 2.56048 19.2715 2.47361 19.0528 2.47361H17.4037V0.824535C17.4037 0.605855 17.3168 0.396131 17.1622 0.241501C17.0076 0.0868704 16.7979 0 16.5792 0C16.3605 0 16.1508 0.0868704 15.9961 0.241501C15.8415 0.396131 15.7546 0.605855 15.7546 0.824535V2.47361H14.1056C13.8869 2.47361 13.6772 2.56048 13.5225 2.71511C13.3679 2.86974 13.281 3.07946 13.281 3.29814C13.281 3.51682 13.3679 3.72655 13.5225 3.88118C13.6772 4.03581 13.8869 4.12268 14.1056 4.12268ZM23.1755 7.42082H22.3509V6.59628C22.3509 6.3776 22.2641 6.16788 22.1094 6.01325C21.9548 5.85862 21.7451 5.77175 21.5264 5.77175C21.3077 5.77175 21.098 5.85862 20.9434 6.01325C20.7887 6.16788 20.7019 6.3776 20.7019 6.59628V7.42082H19.8773C19.6586 7.42082 19.4489 7.50769 19.2943 7.66232C19.1397 7.81695 19.0528 8.02667 19.0528 8.24535C19.0528 8.46404 19.1397 8.67376 19.2943 8.82839C19.4489 8.98302 19.6586 9.06989 19.8773 9.06989H20.7019V9.89443C20.7019 10.1131 20.7887 10.3228 20.9434 10.4775C21.098 10.6321 21.3077 10.719 21.5264 10.719C21.7451 10.719 21.9548 10.6321 22.1094 10.4775C22.2641 10.3228 22.3509 10.1131 22.3509 9.89443V9.06989H23.1755C23.3941 9.06989 23.6039 8.98302 23.7585 8.82839C23.9131 8.67376 24 8.46404 24 8.24535C24 8.02667 23.9131 7.81695 23.7585 7.66232C23.6039 7.50769 23.3941 7.42082 23.1755 7.42082Z"
+      fill="url(#paint0_linear_173_12825)"
+    />
+    <defs>
+      <lineargradient
+        gradientUnits="userSpaceOnUse"
+        id="paint0_linear_173_12825"
+        x1="-3.67094e-07"
+        x2="28.8315"
+        y1="-0.000120994"
+        y2="9.82667"
+      >
+        <stop
+          stop-color="var(--color-assistant-highlight-1)"
+        />
+        <stop
+          offset="0.495"
+          stop-color="var(--color-assistant-highlight-2)"
+        />
+        <stop
+          offset="1"
+          stop-color="var(--color-assistant-highlight-3)"
+        />
+      </lineargradient>
+    </defs>
+  </svg>
+</div>
+`;
diff --git a/packages/design-system/src/components/AskAssistantText/__tests__/AssistantText.spec.ts b/packages/design-system/src/components/AskAssistantText/__tests__/AssistantText.spec.ts
new file mode 100644
index 0000000000000..9e648bf178f8f
--- /dev/null
+++ b/packages/design-system/src/components/AskAssistantText/__tests__/AssistantText.spec.ts
@@ -0,0 +1,40 @@
+import { render } from '@testing-library/vue';
+import AssistantText from '../AssistantText.vue';
+
+describe('AssistantText', () => {
+	it('renders default text correctly', () => {
+		const { container } = render(AssistantText, {
+			props: {
+				text: 'Ask me something',
+			},
+		});
+		expect(container).toMatchSnapshot();
+	});
+	it('renders small text correctly', () => {
+		const { container } = render(AssistantText, {
+			props: {
+				text: 'Ask me something',
+				size: 'small',
+			},
+		});
+		expect(container).toMatchSnapshot();
+	});
+	it('renders medium text correctly', () => {
+		const { container } = render(AssistantText, {
+			props: {
+				text: 'Ask me something',
+				size: 'medium',
+			},
+		});
+		expect(container).toMatchSnapshot();
+	});
+	it('renders large text correctly', () => {
+		const { container } = render(AssistantText, {
+			props: {
+				text: 'Ask me something',
+				size: 'large',
+			},
+		});
+		expect(container).toMatchSnapshot();
+	});
+});
diff --git a/packages/design-system/src/components/AskAssistantText/__tests__/__snapshots__/AssistantText.spec.ts.snap b/packages/design-system/src/components/AskAssistantText/__tests__/__snapshots__/AssistantText.spec.ts.snap
new file mode 100644
index 0000000000000..5f9bff9451ef4
--- /dev/null
+++ b/packages/design-system/src/components/AskAssistantText/__tests__/__snapshots__/AssistantText.spec.ts.snap
@@ -0,0 +1,41 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AssistantText > renders default text correctly 1`] = `
+<div>
+  <span
+    class="text medium"
+  >
+    Ask me something
+  </span>
+</div>
+`;
+
+exports[`AssistantText > renders large text correctly 1`] = `
+<div>
+  <span
+    class="text large"
+  >
+    Ask me something
+  </span>
+</div>
+`;
+
+exports[`AssistantText > renders medium text correctly 1`] = `
+<div>
+  <span
+    class="text medium"
+  >
+    Ask me something
+  </span>
+</div>
+`;
+
+exports[`AssistantText > renders small text correctly 1`] = `
+<div>
+  <span
+    class="text small"
+  >
+    Ask me something
+  </span>
+</div>
+`;
diff --git a/packages/design-system/src/components/BetaTag/__tests__/BetaTag.spec.ts b/packages/design-system/src/components/BetaTag/__tests__/BetaTag.spec.ts
new file mode 100644
index 0000000000000..a22b5404855a5
--- /dev/null
+++ b/packages/design-system/src/components/BetaTag/__tests__/BetaTag.spec.ts
@@ -0,0 +1,9 @@
+import { render } from '@testing-library/vue';
+import BetaTag from '../BetaTag.vue';
+
+describe('BetaTag', () => {
+	it('renders beta tag correctly', () => {
+		const { container } = render(BetaTag, {});
+		expect(container).toMatchSnapshot();
+	});
+});
diff --git a/packages/design-system/src/components/BetaTag/__tests__/__snapshots__/BetaTag.spec.ts.snap b/packages/design-system/src/components/BetaTag/__tests__/__snapshots__/BetaTag.spec.ts.snap
new file mode 100644
index 0000000000000..a0a67771b3a7d
--- /dev/null
+++ b/packages/design-system/src/components/BetaTag/__tests__/__snapshots__/BetaTag.spec.ts.snap
@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BetaTag > renders beta tag correctly 1`] = `
+<div>
+  <div
+    class="beta"
+  >
+    beta
+  </div>
+</div>
+`;
diff --git a/packages/design-system/src/components/BlinkingCursor/__tests__/BlinkingCursor.spec.ts b/packages/design-system/src/components/BlinkingCursor/__tests__/BlinkingCursor.spec.ts
new file mode 100644
index 0000000000000..50d1e650fd246
--- /dev/null
+++ b/packages/design-system/src/components/BlinkingCursor/__tests__/BlinkingCursor.spec.ts
@@ -0,0 +1,9 @@
+import { render } from '@testing-library/vue';
+import BlinkingCursor from '../BlinkingCursor.vue';
+
+describe('BlinkingCursor', () => {
+	it('renders blinking cursor correctly', () => {
+		const { container } = render(BlinkingCursor, {});
+		expect(container).toMatchSnapshot();
+	});
+});
diff --git a/packages/design-system/src/components/BlinkingCursor/__tests__/__snapshots__/BlinkingCursor.spec.ts.snap b/packages/design-system/src/components/BlinkingCursor/__tests__/__snapshots__/BlinkingCursor.spec.ts.snap
new file mode 100644
index 0000000000000..5c1a9cd3e759c
--- /dev/null
+++ b/packages/design-system/src/components/BlinkingCursor/__tests__/__snapshots__/BlinkingCursor.spec.ts.snap
@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BlinkingCursor > renders blinking cursor correctly 1`] = `
+<div>
+  <span
+    class="blinking-cursor"
+  />
+</div>
+`;
diff --git a/packages/design-system/src/components/CodeDiff/__tests__/CodeDiff.spec.ts b/packages/design-system/src/components/CodeDiff/__tests__/CodeDiff.spec.ts
new file mode 100644
index 0000000000000..145482bf7d6b8
--- /dev/null
+++ b/packages/design-system/src/components/CodeDiff/__tests__/CodeDiff.spec.ts
@@ -0,0 +1,48 @@
+import { render } from '@testing-library/vue';
+import CodeDiff from '../CodeDiff.vue';
+
+describe('CodeDiff', () => {
+	it('renders code diff correctly', () => {
+		const { container } = render(CodeDiff, {
+			props: {
+				title: 'Lao Tzu example unified diff',
+				content:
+					"--- original.js\n+++ modified.js\n@@ -1,2 +1,2 @@\n-const SIGNING_SECRET = $input.first().json.slack_secret_signature;\n-const item = $('Webhook to call for Slack command').first();\n+const SIGNING_SECRET = items[0].json.slack_secret_signature;\n+const item = items[0];\n@@ -7,8 +7,6 @@\n}\n\n-const crypto = require('crypto');\n-\n const { binary: { data } } = item;\n\n if (\n@@ -22,7 +20,7 @@\n const rawBody = Buffer.from(data.data, 'base64').toString()\n \n // compute the ",
+			},
+		});
+		expect(container).toMatchSnapshot();
+	});
+	it('renders replaced code diff correctly', () => {
+		const { container } = render(CodeDiff, {
+			props: {
+				title: 'Lao Tzu example unified diff',
+				content:
+					'@@ -1,7 +1,6 @@\n-The Way that can be told of is not the eternal Way;\n-The name that can be named is not the eternal name.\nThe Nameless is the origin of Heaven and Earth;\n-The Named is the mother of all things.\n+The named is the mother of all things.\n+\nTherefore let there always be non-being,\nso we may see their subtlety,\nAnd let there always be being,\n@@ -9,3 +8,6 @@\n The two are the same,\n But after they are produced,\n they have different names.\n+They both may be called deep and profound.\n+Deeper and more profound,\n+The door of all subtleties!',
+				replaced: true,
+			},
+		});
+		expect(container).toMatchSnapshot();
+	});
+	it('renders replacing code diff correctly', () => {
+		const { container } = render(CodeDiff, {
+			props: {
+				title: 'Lao Tzu example unified diff',
+				content:
+					'@@ -1,7 +1,6 @@\n-The Way that can be told of is not the eternal Way;\n-The name that can be named is not the eternal name.\nThe Nameless is the origin of Heaven and Earth;\n-The Named is the mother of all things.\n+The named is the mother of all things.\n+\nTherefore let there always be non-being,\nso we may see their subtlety,\nAnd let there always be being,\n@@ -9,3 +8,6 @@\n The two are the same,\n But after they are produced,\n they have different names.\n+They both may be called deep and profound.\n+Deeper and more profound,\n+The door of all subtleties!',
+				replacing: true,
+			},
+		});
+		expect(container).toMatchSnapshot();
+	});
+	it('renders error state correctly', () => {
+		const { container } = render(CodeDiff, {
+			props: {
+				title: 'Lao Tzu example unified diff',
+				content:
+					'@@ -1,7 +1,6 @@\n-The Way that can be told of is not the eternal Way;\n-The name that can be named is not the eternal name.\nThe Nameless is the origin of Heaven and Earth;\n-The Named is the mother of all things.\n+The named is the mother of all things.\n+\nTherefore let there always be non-being,\nso we may see their subtlety,\nAnd let there always be being,\n@@ -9,3 +8,6 @@\n The two are the same,\n But after they are produced,\n they have different names.\n+They both may be called deep and profound.\n+Deeper and more profound,\n+The door of all subtleties!',
+				error: true,
+			},
+		});
+		expect(container).toMatchSnapshot();
+	});
+});
diff --git a/packages/design-system/src/components/CodeDiff/__tests__/__snapshots__/CodeDiff.spec.ts.snap b/packages/design-system/src/components/CodeDiff/__tests__/__snapshots__/CodeDiff.spec.ts.snap
new file mode 100644
index 0000000000000..97fc21bf5aa70
--- /dev/null
+++ b/packages/design-system/src/components/CodeDiff/__tests__/__snapshots__/CodeDiff.spec.ts.snap
@@ -0,0 +1,1091 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CodeDiff > renders code diff correctly 1`] = `
+<div>
+  <div
+    class="container"
+    data-test-id="code-diff-suggestion"
+  >
+    <div
+      class="title"
+    >
+      Lao Tzu example unified diff
+    </div>
+    <div
+      class="diffSection"
+    >
+      
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           
+        </div>
+        <div
+          class="del diffContent"
+        >
+          <span>
+             - 
+          </span>
+          <span>
+            const SIGNING_SECRET = $input.first().json.slack_secret_signature;
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           
+        </div>
+        <div
+          class="del diffContent"
+        >
+          <span>
+             - 
+          </span>
+          <span>
+            const item = $('Webhook to call for Slack command').first();
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           1
+        </div>
+        <div
+          class="add diffContent"
+        >
+          <span>
+             + 
+          </span>
+          <span>
+            const SIGNING_SECRET = items[0].json.slack_secret_signature;
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           2
+        </div>
+        <div
+          class="add diffContent"
+        >
+          <span>
+             + 
+          </span>
+          <span>
+            const item = items[0];
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           
+        </div>
+        <div
+          class="seperator diffContent"
+        >
+          <span>
+               
+          </span>
+          <span>
+            ...
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           
+        </div>
+        <div
+          class="del diffContent"
+        >
+          <span>
+             - 
+          </span>
+          <span>
+            const crypto = require('crypto');
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           
+        </div>
+        <div
+          class="del diffContent"
+        >
+          <span>
+             - 
+          </span>
+          <span />
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           7
+        </div>
+        <div
+          class="normal diffContent"
+        >
+          <span>
+               
+          </span>
+          <span>
+             const { binary: { data } } = item;
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           8
+        </div>
+        <div
+          class="normal diffContent"
+        >
+          <span>
+               
+          </span>
+          <span>
+             if (
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           9
+        </div>
+        <div
+          class="normal diffContent"
+        >
+          <span>
+               
+          </span>
+          <span>
+             const rawBody = Buffer.from(data.data, 'base64').toString()
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           10
+        </div>
+        <div
+          class="normal diffContent"
+        >
+          <span>
+               
+          </span>
+          <span>
+             
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           11
+        </div>
+        <div
+          class="normal diffContent"
+        >
+          <span>
+               
+          </span>
+          <span>
+             // compute the 
+          </span>
+        </div>
+      </div>
+      
+    </div>
+    <div
+      class="actions"
+    >
+      <n8n-button
+        data-test-id="replace-code-button"
+        disabled="false"
+        icon="refresh"
+        loading="false"
+        size="mini"
+        type="primary"
+      >
+        Replace my code
+      </n8n-button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CodeDiff > renders error state correctly 1`] = `
+<div>
+  <div
+    class="container"
+    data-test-id="code-diff-suggestion"
+  >
+    <div
+      class="title"
+    >
+      Lao Tzu example unified diff
+    </div>
+    <div
+      class="diffSection"
+    >
+      
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           
+        </div>
+        <div
+          class="del diffContent"
+        >
+          <span>
+             - 
+          </span>
+          <span>
+            The Way that can be told of is not the eternal Way;
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           
+        </div>
+        <div
+          class="del diffContent"
+        >
+          <span>
+             - 
+          </span>
+          <span>
+            The name that can be named is not the eternal name.
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           
+        </div>
+        <div
+          class="del diffContent"
+        >
+          <span>
+             - 
+          </span>
+          <span>
+            The Named is the mother of all things.
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           1
+        </div>
+        <div
+          class="add diffContent"
+        >
+          <span>
+             + 
+          </span>
+          <span>
+            The named is the mother of all things.
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           2
+        </div>
+        <div
+          class="add diffContent"
+        >
+          <span>
+             + 
+          </span>
+          <span />
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           3
+        </div>
+        <div
+          class="normal diffContent"
+        >
+          <span>
+               
+          </span>
+          <span>
+             The two are the same,
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           4
+        </div>
+        <div
+          class="normal diffContent"
+        >
+          <span>
+               
+          </span>
+          <span>
+             But after they are produced,
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           5
+        </div>
+        <div
+          class="normal diffContent"
+        >
+          <span>
+               
+          </span>
+          <span>
+             they have different names.
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           6
+        </div>
+        <div
+          class="add diffContent"
+        >
+          <span>
+             + 
+          </span>
+          <span>
+            They both may be called deep and profound.
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           7
+        </div>
+        <div
+          class="add diffContent"
+        >
+          <span>
+             + 
+          </span>
+          <span>
+            Deeper and more profound,
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           8
+        </div>
+        <div
+          class="add diffContent"
+        >
+          <span>
+             + 
+          </span>
+          <span>
+            The door of all subtleties!
+          </span>
+        </div>
+      </div>
+      
+    </div>
+    <div
+      class="actions"
+    >
+      <div>
+        <n8n-icon
+          class="mr-5xs"
+          color="danger"
+          icon="exclamation-triangle"
+        />
+        <span
+          class="infoText"
+        >
+          Could not replace code
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CodeDiff > renders replaced code diff correctly 1`] = `
+<div>
+  <div
+    class="container"
+    data-test-id="code-diff-suggestion"
+  >
+    <div
+      class="title"
+    >
+      Lao Tzu example unified diff
+    </div>
+    <div
+      class="diffSection"
+    >
+      
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           
+        </div>
+        <div
+          class="del diffContent"
+        >
+          <span>
+             - 
+          </span>
+          <span>
+            The Way that can be told of is not the eternal Way;
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           
+        </div>
+        <div
+          class="del diffContent"
+        >
+          <span>
+             - 
+          </span>
+          <span>
+            The name that can be named is not the eternal name.
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           
+        </div>
+        <div
+          class="del diffContent"
+        >
+          <span>
+             - 
+          </span>
+          <span>
+            The Named is the mother of all things.
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           1
+        </div>
+        <div
+          class="add diffContent"
+        >
+          <span>
+             + 
+          </span>
+          <span>
+            The named is the mother of all things.
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           2
+        </div>
+        <div
+          class="add diffContent"
+        >
+          <span>
+             + 
+          </span>
+          <span />
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           3
+        </div>
+        <div
+          class="normal diffContent"
+        >
+          <span>
+               
+          </span>
+          <span>
+             The two are the same,
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           4
+        </div>
+        <div
+          class="normal diffContent"
+        >
+          <span>
+               
+          </span>
+          <span>
+             But after they are produced,
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           5
+        </div>
+        <div
+          class="normal diffContent"
+        >
+          <span>
+               
+          </span>
+          <span>
+             they have different names.
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           6
+        </div>
+        <div
+          class="add diffContent"
+        >
+          <span>
+             + 
+          </span>
+          <span>
+            They both may be called deep and profound.
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           7
+        </div>
+        <div
+          class="add diffContent"
+        >
+          <span>
+             + 
+          </span>
+          <span>
+            Deeper and more profound,
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           8
+        </div>
+        <div
+          class="add diffContent"
+        >
+          <span>
+             + 
+          </span>
+          <span>
+            The door of all subtleties!
+          </span>
+        </div>
+      </div>
+      
+    </div>
+    <div
+      class="actions"
+    >
+      <div>
+        <n8n-button
+          data-test-id="undo-replace-button"
+          icon="undo"
+          size="mini"
+          type="secondary"
+        >
+          Undo
+        </n8n-button>
+        <n8n-icon
+          class="ml-xs"
+          color="success"
+          icon="check"
+        />
+        <span
+          class="infoText"
+          data-test-id="code-replaced-message"
+        >
+          Code replaced
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CodeDiff > renders replacing code diff correctly 1`] = `
+<div>
+  <div
+    class="container"
+    data-test-id="code-diff-suggestion"
+  >
+    <div
+      class="title"
+    >
+      Lao Tzu example unified diff
+    </div>
+    <div
+      class="diffSection"
+    >
+      
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           
+        </div>
+        <div
+          class="del diffContent"
+        >
+          <span>
+             - 
+          </span>
+          <span>
+            The Way that can be told of is not the eternal Way;
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           
+        </div>
+        <div
+          class="del diffContent"
+        >
+          <span>
+             - 
+          </span>
+          <span>
+            The name that can be named is not the eternal name.
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           
+        </div>
+        <div
+          class="del diffContent"
+        >
+          <span>
+             - 
+          </span>
+          <span>
+            The Named is the mother of all things.
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           1
+        </div>
+        <div
+          class="add diffContent"
+        >
+          <span>
+             + 
+          </span>
+          <span>
+            The named is the mother of all things.
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           2
+        </div>
+        <div
+          class="add diffContent"
+        >
+          <span>
+             + 
+          </span>
+          <span />
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           3
+        </div>
+        <div
+          class="normal diffContent"
+        >
+          <span>
+               
+          </span>
+          <span>
+             The two are the same,
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           4
+        </div>
+        <div
+          class="normal diffContent"
+        >
+          <span>
+               
+          </span>
+          <span>
+             But after they are produced,
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           5
+        </div>
+        <div
+          class="normal diffContent"
+        >
+          <span>
+               
+          </span>
+          <span>
+             they have different names.
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           6
+        </div>
+        <div
+          class="add diffContent"
+        >
+          <span>
+             + 
+          </span>
+          <span>
+            They both may be called deep and profound.
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           7
+        </div>
+        <div
+          class="add diffContent"
+        >
+          <span>
+             + 
+          </span>
+          <span>
+            Deeper and more profound,
+          </span>
+        </div>
+      </div>
+      <div
+        class="diff"
+      >
+        <div
+          class="lineNumber"
+        >
+          <!-- ln1 is line number in original text -->
+          <!-- ln2 is line number in updated text -->
+           8
+        </div>
+        <div
+          class="add diffContent"
+        >
+          <span>
+             + 
+          </span>
+          <span>
+            The door of all subtleties!
+          </span>
+        </div>
+      </div>
+      
+    </div>
+    <div
+      class="actions"
+    >
+      <n8n-button
+        data-test-id="replace-code-button"
+        disabled="false"
+        icon="refresh"
+        loading="true"
+        size="mini"
+        type="secondary"
+      >
+        Replacing...
+      </n8n-button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/design-system/src/components/N8nActionBox/ActionBox.vue b/packages/design-system/src/components/N8nActionBox/ActionBox.vue
index 575895ab1585b..c048c3f6438c5 100644
--- a/packages/design-system/src/components/N8nActionBox/ActionBox.vue
+++ b/packages/design-system/src/components/N8nActionBox/ActionBox.vue
@@ -1,3 +1,29 @@
+<script lang="ts" setup>
+import N8nButton from '../N8nButton';
+import N8nHeading from '../N8nHeading';
+import N8nText from '../N8nText';
+import N8nCallout, { type CalloutTheme } from '../N8nCallout';
+import type { ButtonType } from 'n8n-design-system/types/button';
+import N8nTooltip from 'n8n-design-system/components/N8nTooltip/Tooltip.vue';
+
+interface ActionBoxProps {
+	emoji: string;
+	heading: string;
+	buttonText: string;
+	buttonType: ButtonType;
+	buttonDisabled?: boolean;
+	description: string;
+	calloutText?: string;
+	calloutTheme?: CalloutTheme;
+	calloutIcon?: string;
+}
+
+defineOptions({ name: 'N8nActionBox' });
+withDefaults(defineProps<ActionBoxProps>(), {
+	calloutTheme: 'info',
+});
+</script>
+
 <template>
 	<div :class="['n8n-action-box', $style.container]" data-test-id="action-box">
 		<div v-if="emoji" :class="$style.emoji">
@@ -41,32 +67,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-import N8nButton from '../N8nButton';
-import N8nHeading from '../N8nHeading';
-import N8nText from '../N8nText';
-import N8nCallout, { type CalloutTheme } from '../N8nCallout';
-import type { ButtonType } from 'n8n-design-system/types/button';
-import N8nTooltip from 'n8n-design-system/components/N8nTooltip/Tooltip.vue';
-
-interface ActionBoxProps {
-	emoji: string;
-	heading: string;
-	buttonText: string;
-	buttonType: ButtonType;
-	buttonDisabled?: boolean;
-	description: string;
-	calloutText?: string;
-	calloutTheme?: CalloutTheme;
-	calloutIcon?: string;
-}
-
-defineOptions({ name: 'N8nActionBox' });
-withDefaults(defineProps<ActionBoxProps>(), {
-	calloutTheme: 'info',
-});
-</script>
-
 <style lang="scss" module>
 .container {
 	border: 2px dashed var(--color-foreground-base);
diff --git a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
index 649d4bc570491..643d677c04f38 100644
--- a/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
+++ b/packages/design-system/src/components/N8nActionDropdown/ActionDropdown.vue
@@ -1,57 +1,3 @@
-<template>
-	<div :class="['action-dropdown-container', $style.actionDropdownContainer]">
-		<ElDropdown
-			ref="elementDropdown"
-			:placement="placement"
-			:trigger="trigger"
-			:popper-class="popperClass"
-			:teleported="teleported"
-			:disabled="disabled"
-			@command="onSelect"
-			@visible-change="onVisibleChange"
-		>
-			<slot v-if="$slots.activator" name="activator" />
-			<n8n-icon-button
-				v-else
-				type="tertiary"
-				text
-				:class="$style.activator"
-				:size="activatorSize"
-				:icon="activatorIcon"
-				@blur="onButtonBlur"
-			/>
-
-			<template #dropdown>
-				<ElDropdownMenu :class="$style.userActionsMenu">
-					<ElDropdownItem
-						v-for="item in items"
-						:key="item.id"
-						:command="item.id"
-						:disabled="item.disabled"
-						:divided="item.divided"
-						:class="$style.elementItem"
-					>
-						<div :class="getItemClasses(item)" :data-test-id="`${testIdPrefix}-item-${item.id}`">
-							<span v-if="item.icon" :class="$style.icon">
-								<N8nIcon :icon="item.icon" :size="iconSize" />
-							</span>
-							<span :class="$style.label">
-								{{ item.label }}
-							</span>
-							<N8nKeyboardShortcut
-								v-if="item.shortcut"
-								v-bind="item.shortcut"
-								:class="$style.shortcut"
-							>
-							</N8nKeyboardShortcut>
-						</div>
-					</ElDropdownItem>
-				</ElDropdownMenu>
-			</template>
-		</ElDropdown>
-	</div>
-</template>
-
 <script lang="ts" setup>
 // This component is visually similar to the ActionToggle component
 // but it offers more options when it comes to dropdown items styling
@@ -129,6 +75,60 @@ const close = () => elementDropdown.value?.handleClose();
 defineExpose({ open, close });
 </script>
 
+<template>
+	<div :class="['action-dropdown-container', $style.actionDropdownContainer]">
+		<ElDropdown
+			ref="elementDropdown"
+			:placement="placement"
+			:trigger="trigger"
+			:popper-class="popperClass"
+			:teleported="teleported"
+			:disabled="disabled"
+			@command="onSelect"
+			@visible-change="onVisibleChange"
+		>
+			<slot v-if="$slots.activator" name="activator" />
+			<n8n-icon-button
+				v-else
+				type="tertiary"
+				text
+				:class="$style.activator"
+				:size="activatorSize"
+				:icon="activatorIcon"
+				@blur="onButtonBlur"
+			/>
+
+			<template #dropdown>
+				<ElDropdownMenu :class="$style.userActionsMenu">
+					<ElDropdownItem
+						v-for="item in items"
+						:key="item.id"
+						:command="item.id"
+						:disabled="item.disabled"
+						:divided="item.divided"
+						:class="$style.elementItem"
+					>
+						<div :class="getItemClasses(item)" :data-test-id="`${testIdPrefix}-item-${item.id}`">
+							<span v-if="item.icon" :class="$style.icon">
+								<N8nIcon :icon="item.icon" :size="iconSize" />
+							</span>
+							<span :class="$style.label">
+								{{ item.label }}
+							</span>
+							<N8nKeyboardShortcut
+								v-if="item.shortcut"
+								v-bind="item.shortcut"
+								:class="$style.shortcut"
+							>
+							</N8nKeyboardShortcut>
+						</div>
+					</ElDropdownItem>
+				</ElDropdownMenu>
+			</template>
+		</ElDropdown>
+	</div>
+</template>
+
 <style lang="scss" module>
 :global(.el-dropdown__list) {
 	.userActionsMenu {
diff --git a/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue b/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
index 2705b90e87f7f..2885d1c601a69 100644
--- a/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
+++ b/packages/design-system/src/components/N8nActionToggle/ActionToggle.vue
@@ -1,3 +1,38 @@
+<script lang="ts" setup>
+import { ElDropdown, ElDropdownMenu, ElDropdownItem, type Placement } from 'element-plus';
+import type { UserAction } from 'n8n-design-system/types';
+import N8nIcon from '../N8nIcon';
+import type { IconOrientation, IconSize } from 'n8n-design-system/types/icon';
+
+const SIZE = ['mini', 'small', 'medium'] as const;
+const THEME = ['default', 'dark'] as const;
+
+interface ActionToggleProps {
+	actions?: UserAction[];
+	placement?: Placement;
+	size?: (typeof SIZE)[number];
+	iconSize?: IconSize;
+	theme?: (typeof THEME)[number];
+	iconOrientation?: IconOrientation;
+}
+
+defineOptions({ name: 'N8nActionToggle' });
+withDefaults(defineProps<ActionToggleProps>(), {
+	actions: () => [],
+	placement: 'bottom',
+	size: 'medium',
+	theme: 'default',
+	iconOrientation: 'vertical',
+});
+
+const emit = defineEmits<{
+	action: [value: string];
+	'visible-change': [value: boolean];
+}>();
+const onCommand = (value: string) => emit('action', value);
+const onVisibleChange = (value: boolean) => emit('visible-change', value);
+</script>
+
 <template>
 	<span :class="$style.container" data-test-id="action-toggle" @click.stop.prevent>
 		<ElDropdown
@@ -41,41 +76,6 @@
 	</span>
 </template>
 
-<script lang="ts" setup>
-import { ElDropdown, ElDropdownMenu, ElDropdownItem, type Placement } from 'element-plus';
-import type { UserAction } from 'n8n-design-system/types';
-import N8nIcon from '../N8nIcon';
-import type { IconOrientation, IconSize } from 'n8n-design-system/types/icon';
-
-const SIZE = ['mini', 'small', 'medium'] as const;
-const THEME = ['default', 'dark'] as const;
-
-interface ActionToggleProps {
-	actions?: UserAction[];
-	placement?: Placement;
-	size?: (typeof SIZE)[number];
-	iconSize?: IconSize;
-	theme?: (typeof THEME)[number];
-	iconOrientation?: IconOrientation;
-}
-
-defineOptions({ name: 'N8nActionToggle' });
-withDefaults(defineProps<ActionToggleProps>(), {
-	actions: () => [],
-	placement: 'bottom',
-	size: 'medium',
-	theme: 'default',
-	iconOrientation: 'vertical',
-});
-
-const emit = defineEmits<{
-	action: [value: string];
-	'visible-change': [value: boolean];
-}>();
-const onCommand = (value: string) => emit('action', value);
-const onVisibleChange = (value: boolean) => emit('visible-change', value);
-</script>
-
 <style lang="scss" module>
 .container > * {
 	line-height: 1;
diff --git a/packages/design-system/src/components/N8nAlert/Alert.vue b/packages/design-system/src/components/N8nAlert/Alert.vue
index 6c9bc5cee08c7..6a401ecf2faca 100644
--- a/packages/design-system/src/components/N8nAlert/Alert.vue
+++ b/packages/design-system/src/components/N8nAlert/Alert.vue
@@ -1,28 +1,3 @@
-<template>
-	<div :class="alertBoxClassNames" role="alert">
-		<div :class="$style.content">
-			<span v-if="showIcon || $slots.icon" :class="$style.icon">
-				<N8nIcon v-if="showIcon" :icon="icon" />
-				<slot v-else-if="$slots.icon" name="icon" />
-			</span>
-			<div :class="$style.text">
-				<div v-if="$slots.title || title" :class="$style.title">
-					<slot name="title">{{ title }}</slot>
-				</div>
-				<div
-					v-if="$slots.default || description"
-					:class="{ [$style.description]: true, [$style.hasTitle]: $slots.title || title }"
-				>
-					<slot>{{ description }}</slot>
-				</div>
-			</div>
-		</div>
-		<div v-if="$slots.aside" :class="$style.aside">
-			<slot name="aside" />
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, useCssModule } from 'vue';
 import N8nIcon from '../N8nIcon';
@@ -76,6 +51,31 @@ const alertBoxClassNames = computed(() => {
 });
 </script>
 
+<template>
+	<div :class="alertBoxClassNames" role="alert">
+		<div :class="$style.content">
+			<span v-if="showIcon || $slots.icon" :class="$style.icon">
+				<N8nIcon v-if="showIcon" :icon="icon" />
+				<slot v-else-if="$slots.icon" name="icon" />
+			</span>
+			<div :class="$style.text">
+				<div v-if="$slots.title || title" :class="$style.title">
+					<slot name="title">{{ title }}</slot>
+				</div>
+				<div
+					v-if="$slots.default || description"
+					:class="{ [$style.description]: true, [$style.hasTitle]: $slots.title || title }"
+				>
+					<slot>{{ description }}</slot>
+				</div>
+			</div>
+		</div>
+		<div v-if="$slots.aside" :class="$style.aside">
+			<slot name="aside" />
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 @import '../../css/common/var.scss';
 
diff --git a/packages/design-system/src/components/N8nAvatar/Avatar.vue b/packages/design-system/src/components/N8nAvatar/Avatar.vue
index 9ec104a7ea809..96686abc5061d 100644
--- a/packages/design-system/src/components/N8nAvatar/Avatar.vue
+++ b/packages/design-system/src/components/N8nAvatar/Avatar.vue
@@ -1,19 +1,3 @@
-<template>
-	<span :class="['n8n-avatar', $style.container]" v-bind="$attrs">
-		<Avatar
-			v-if="name"
-			:size="getSize(size)"
-			:name="name"
-			variant="marble"
-			:colors="getColors(colors)"
-		/>
-		<div v-else :class="[$style.empty, $style[size]]"></div>
-		<span v-if="firstName || lastName" :class="[$style.initials, $style[`text-${size}`]]">
-			{{ initials }}
-		</span>
-	</span>
-</template>
-
 <script lang="ts" setup>
 import { computed } from 'vue';
 import Avatar from 'vue-boring-avatars';
@@ -57,6 +41,22 @@ const sizes: { [size: string]: number } = {
 const getSize = (size: string): number => sizes[size];
 </script>
 
+<template>
+	<span :class="['n8n-avatar', $style.container]" v-bind="$attrs">
+		<Avatar
+			v-if="name"
+			:size="getSize(size)"
+			:name="name"
+			variant="marble"
+			:colors="getColors(colors)"
+		/>
+		<div v-else :class="[$style.empty, $style[size]]"></div>
+		<span v-if="firstName || lastName" :class="[$style.initials, $style[`text-${size}`]]">
+			{{ initials }}
+		</span>
+	</span>
+</template>
+
 <style lang="scss" module>
 .container {
 	position: relative;
diff --git a/packages/design-system/src/components/N8nBadge/Badge.vue b/packages/design-system/src/components/N8nBadge/Badge.vue
index c523ed15a6fc8..245aca5f1723f 100644
--- a/packages/design-system/src/components/N8nBadge/Badge.vue
+++ b/packages/design-system/src/components/N8nBadge/Badge.vue
@@ -1,11 +1,3 @@
-<template>
-	<span :class="['n8n-badge', $style[theme]]">
-		<N8nText :size="size" :bold="bold" :compact="true">
-			<slot></slot>
-		</N8nText>
-	</span>
-</template>
-
 <script lang="ts" setup>
 import type { TextSize } from 'n8n-design-system/types/text';
 import N8nText from '../N8nText';
@@ -34,6 +26,14 @@ withDefaults(defineProps<BadgeProps>(), {
 });
 </script>
 
+<template>
+	<span :class="['n8n-badge', $style[theme]]">
+		<N8nText :size="size" :bold="bold" :compact="true">
+			<slot></slot>
+		</N8nText>
+	</span>
+</template>
+
 <style lang="scss" module>
 .badge {
 	display: inline-flex;
diff --git a/packages/design-system/src/components/N8nBlockUi/BlockUi.vue b/packages/design-system/src/components/N8nBlockUi/BlockUi.vue
index a4213c9d7d66a..ce41e16d05f1f 100644
--- a/packages/design-system/src/components/N8nBlockUi/BlockUi.vue
+++ b/packages/design-system/src/components/N8nBlockUi/BlockUi.vue
@@ -1,3 +1,13 @@
+<script lang="ts" setup>
+type BlockUiProps = {
+	show: boolean;
+};
+
+withDefaults(defineProps<BlockUiProps>(), {
+	show: false,
+});
+</script>
+
 <template>
 	<transition name="fade" mode="out-in">
 		<div
@@ -9,16 +19,6 @@
 	</transition>
 </template>
 
-<script lang="ts" setup>
-type BlockUiProps = {
-	show: boolean;
-};
-
-withDefaults(defineProps<BlockUiProps>(), {
-	show: false,
-});
-</script>
-
 <style lang="scss" module>
 .uiBlocker {
 	position: absolute;
diff --git a/packages/design-system/src/components/N8nButton/Button.vue b/packages/design-system/src/components/N8nButton/Button.vue
index b9387d0c7b47f..b365354e08c92 100644
--- a/packages/design-system/src/components/N8nButton/Button.vue
+++ b/packages/design-system/src/components/N8nButton/Button.vue
@@ -1,27 +1,3 @@
-<template>
-	<component
-		:is="element"
-		:class="classes"
-		:disabled="isDisabled"
-		:aria-disabled="ariaDisabled"
-		:aria-busy="ariaBusy"
-		:href="href"
-		aria-live="polite"
-		v-bind="{
-			...attrs,
-			...(props.nativeType ? { type: props.nativeType } : {}),
-		}"
-	>
-		<span v-if="loading || icon" :class="$style.icon">
-			<N8nSpinner v-if="loading" :size="iconSize" />
-			<N8nIcon v-else-if="icon" :icon="icon" :size="iconSize" />
-		</span>
-		<span v-if="label || $slots.default">
-			<slot>{{ label }}</slot>
-		</span>
-	</component>
-</template>
-
 <script setup lang="ts">
 import { useCssModule, computed, useAttrs, watchEffect } from 'vue';
 import N8nIcon from '../N8nIcon';
@@ -75,6 +51,30 @@ const classes = computed(() => {
 });
 </script>
 
+<template>
+	<component
+		:is="element"
+		:class="classes"
+		:disabled="isDisabled"
+		:aria-disabled="ariaDisabled"
+		:aria-busy="ariaBusy"
+		:href="href"
+		aria-live="polite"
+		v-bind="{
+			...attrs,
+			...(props.nativeType ? { type: props.nativeType } : {}),
+		}"
+	>
+		<span v-if="loading || icon" :class="$style.icon">
+			<N8nSpinner v-if="loading" :size="iconSize" />
+			<N8nIcon v-else-if="icon" :icon="icon" :size="iconSize" />
+		</span>
+		<span v-if="label || $slots.default">
+			<slot>{{ label }}</slot>
+		</span>
+	</component>
+</template>
+
 <style lang="scss">
 @import './Button';
 
diff --git a/packages/design-system/src/components/N8nCallout/Callout.vue b/packages/design-system/src/components/N8nCallout/Callout.vue
index 9a8e17ddf63a8..1ab024be084f5 100644
--- a/packages/design-system/src/components/N8nCallout/Callout.vue
+++ b/packages/design-system/src/components/N8nCallout/Callout.vue
@@ -1,20 +1,3 @@
-<template>
-	<div :class="classes" role="alert">
-		<div :class="$style.messageSection">
-			<div v-if="!iconless" :class="$style.icon">
-				<N8nIcon :icon="getIcon" :size="getIconSize" />
-			</div>
-			<N8nText size="small">
-				<slot />
-			</N8nText>
-			&nbsp;
-			<slot name="actions" />
-		</div>
-
-		<slot name="trailingContent" />
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, useCssModule } from 'vue';
 import N8nText from '../N8nText';
@@ -70,6 +53,23 @@ const getIconSize = computed<IconSize>(() => {
 });
 </script>
 
+<template>
+	<div :class="classes" role="alert">
+		<div :class="$style.messageSection">
+			<div v-if="!iconless" :class="$style.icon">
+				<N8nIcon :icon="getIcon" :size="getIconSize" />
+			</div>
+			<N8nText size="small">
+				<slot />
+			</N8nText>
+			&nbsp;
+			<slot name="actions" />
+		</div>
+
+		<slot name="trailingContent" />
+	</div>
+</template>
+
 <style lang="scss" module>
 .callout {
 	display: flex;
diff --git a/packages/design-system/src/components/N8nCard/Card.vue b/packages/design-system/src/components/N8nCard/Card.vue
index 611fc275abf38..589a7f6c365a2 100644
--- a/packages/design-system/src/components/N8nCard/Card.vue
+++ b/packages/design-system/src/components/N8nCard/Card.vue
@@ -1,3 +1,23 @@
+<script lang="ts" setup>
+import { computed, useCssModule } from 'vue';
+
+interface CardProps {
+	hoverable?: boolean;
+}
+
+defineOptions({ name: 'N8nCard' });
+const props = withDefaults(defineProps<CardProps>(), {
+	hoverable: false,
+});
+
+const $style = useCssModule();
+const classes = computed(() => ({
+	card: true,
+	[$style.card]: true,
+	[$style.hoverable]: props.hoverable,
+}));
+</script>
+
 <template>
 	<div :class="classes" v-bind="$attrs">
 		<div v-if="$slots.prepend" :class="$style.icon">
@@ -20,26 +40,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-import { computed, useCssModule } from 'vue';
-
-interface CardProps {
-	hoverable?: boolean;
-}
-
-defineOptions({ name: 'N8nCard' });
-const props = withDefaults(defineProps<CardProps>(), {
-	hoverable: false,
-});
-
-const $style = useCssModule();
-const classes = computed(() => ({
-	card: true,
-	[$style.card]: true,
-	[$style.hoverable]: props.hoverable,
-}));
-</script>
-
 <style lang="scss" module>
 .card {
 	border-radius: var(--border-radius-large);
diff --git a/packages/design-system/src/components/N8nCheckbox/Checkbox.vue b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
index cddfa56ad439c..4e4ff3946c537 100644
--- a/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
+++ b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
@@ -1,25 +1,3 @@
-<template>
-	<ElCheckbox
-		v-bind="$props"
-		ref="checkbox"
-		:class="['n8n-checkbox', $style.n8nCheckbox]"
-		:disabled="disabled"
-		:indeterminate="indeterminate"
-		:model-value="modelValue"
-		@update:model-value="onUpdateModelValue"
-	>
-		<slot></slot>
-		<N8nInputLabel
-			v-if="label"
-			:label="label"
-			:tooltip-text="tooltipText"
-			:bold="false"
-			:size="labelSize"
-			@click.prevent="onLabelClick"
-		/>
-	</ElCheckbox>
-</template>
-
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { ElCheckbox } from 'element-plus';
@@ -58,6 +36,28 @@ const onLabelClick = () => {
 };
 </script>
 
+<template>
+	<ElCheckbox
+		v-bind="$props"
+		ref="checkbox"
+		:class="['n8n-checkbox', $style.n8nCheckbox]"
+		:disabled="disabled"
+		:indeterminate="indeterminate"
+		:model-value="modelValue"
+		@update:model-value="onUpdateModelValue"
+	>
+		<slot></slot>
+		<N8nInputLabel
+			v-if="label"
+			:label="label"
+			:tooltip-text="tooltipText"
+			:bold="false"
+			:size="labelSize"
+			@click.prevent="onLabelClick"
+		/>
+	</ElCheckbox>
+</template>
+
 <style lang="scss" module>
 .n8nCheckbox {
 	display: flex !important;
diff --git a/packages/design-system/src/components/N8nCircleLoader/CircleLoader.vue b/packages/design-system/src/components/N8nCircleLoader/CircleLoader.vue
index 7f8e88a0b6f6d..37a890f5355c4 100644
--- a/packages/design-system/src/components/N8nCircleLoader/CircleLoader.vue
+++ b/packages/design-system/src/components/N8nCircleLoader/CircleLoader.vue
@@ -1,26 +1,3 @@
-<template>
-	<div class="progress-circle">
-		<svg class="progress-ring" :width="diameter" :height="diameter">
-			<circle
-				:class="$style.progressRingCircle"
-				:stroke-width="strokeWidth"
-				stroke="#DCDFE6"
-				fill="transparent"
-				:r="radius"
-				v-bind="{ cx, cy }"
-			/>
-			<circle
-				:class="$style.progressRingCircle"
-				stroke="#5C4EC2"
-				:stroke-width="strokeWidth"
-				fill="transparent"
-				:r="radius"
-				v-bind="{ cx, cy, style }"
-			/>
-		</svg>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue';
 const props = withDefaults(
@@ -50,6 +27,29 @@ const style = computed(() => ({
 }));
 </script>
 
+<template>
+	<div class="progress-circle">
+		<svg class="progress-ring" :width="diameter" :height="diameter">
+			<circle
+				:class="$style.progressRingCircle"
+				:stroke-width="strokeWidth"
+				stroke="#DCDFE6"
+				fill="transparent"
+				:r="radius"
+				v-bind="{ cx, cy }"
+			/>
+			<circle
+				:class="$style.progressRingCircle"
+				stroke="#5C4EC2"
+				:stroke-width="strokeWidth"
+				fill="transparent"
+				:r="radius"
+				v-bind="{ cx, cy, style }"
+			/>
+		</svg>
+	</div>
+</template>
+
 <style module>
 .progressRingCircle {
 	transition: stroke-dashoffset 0.35s linear;
diff --git a/packages/design-system/src/components/N8nDatatable/Datatable.vue b/packages/design-system/src/components/N8nDatatable/Datatable.vue
index e1278c2d21ba6..8e733e0758725 100644
--- a/packages/design-system/src/components/N8nDatatable/Datatable.vue
+++ b/packages/design-system/src/components/N8nDatatable/Datatable.vue
@@ -1,65 +1,3 @@
-<template>
-	<div :class="classes" v-bind="$attrs">
-		<table :class="$style.datatable">
-			<thead :class="$style.datatableHeader">
-				<tr>
-					<th
-						v-for="column in columns"
-						:key="column.id"
-						:class="column.classes"
-						:style="getThStyle(column)"
-					>
-						{{ column.label }}
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				<template v-for="row in visibleRows">
-					<slot name="row" :columns="columns" :row="row" :get-td-value="getTdValue">
-						<tr :key="row.id">
-							<td v-for="column in columns" :key="column.id" :class="column.classes">
-								<component :is="column.render" v-if="column.render" :row="row" :column="column" />
-								<span v-else>{{ getTdValue(row, column) }}</span>
-							</td>
-						</tr>
-					</slot>
-				</template>
-			</tbody>
-		</table>
-
-		<div :class="$style.pagination">
-			<N8nPagination
-				v-if="totalPages > 1"
-				background
-				:pager-count="5"
-				:page-size="rowsPerPage"
-				layout="prev, pager, next"
-				:total="totalRows"
-				:current-page="currentPage"
-				@update:current-page="onUpdateCurrentPage"
-			/>
-
-			<div :class="$style.pageSizeSelector">
-				<N8nSelect
-					size="mini"
-					:model-value="rowsPerPage"
-					teleported
-					@update:model-value="onRowsPerPageChange"
-				>
-					<template #prepend>{{ t('datatable.pageSize') }}</template>
-					<N8nOption
-						v-for="size in rowsPerPageOptions"
-						:key="size"
-						:label="`${size}`"
-						:value="size"
-					/>
-					<N8nOption :label="`All`" :value="ALL_ROWS"> </N8nOption>
-				</N8nSelect>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, ref, useCssModule } from 'vue';
 import N8nSelect from '../N8nSelect';
@@ -147,6 +85,68 @@ function getThStyle(column: DatatableColumn) {
 }
 </script>
 
+<template>
+	<div :class="classes" v-bind="$attrs">
+		<table :class="$style.datatable">
+			<thead :class="$style.datatableHeader">
+				<tr>
+					<th
+						v-for="column in columns"
+						:key="column.id"
+						:class="column.classes"
+						:style="getThStyle(column)"
+					>
+						{{ column.label }}
+					</th>
+				</tr>
+			</thead>
+			<tbody>
+				<template v-for="row in visibleRows">
+					<slot name="row" :columns="columns" :row="row" :get-td-value="getTdValue">
+						<tr :key="row.id">
+							<td v-for="column in columns" :key="column.id" :class="column.classes">
+								<component :is="column.render" v-if="column.render" :row="row" :column="column" />
+								<span v-else>{{ getTdValue(row, column) }}</span>
+							</td>
+						</tr>
+					</slot>
+				</template>
+			</tbody>
+		</table>
+
+		<div :class="$style.pagination">
+			<N8nPagination
+				v-if="totalPages > 1"
+				background
+				:pager-count="5"
+				:page-size="rowsPerPage"
+				layout="prev, pager, next"
+				:total="totalRows"
+				:current-page="currentPage"
+				@update:current-page="onUpdateCurrentPage"
+			/>
+
+			<div :class="$style.pageSizeSelector">
+				<N8nSelect
+					size="mini"
+					:model-value="rowsPerPage"
+					teleported
+					@update:model-value="onRowsPerPageChange"
+				>
+					<template #prepend>{{ t('datatable.pageSize') }}</template>
+					<N8nOption
+						v-for="size in rowsPerPageOptions"
+						:key="size"
+						:label="`${size}`"
+						:value="size"
+					/>
+					<N8nOption :label="`All`" :value="ALL_ROWS"> </N8nOption>
+				</N8nSelect>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .datatableWrapper {
 	display: block;
diff --git a/packages/design-system/src/components/N8nFormBox/FormBox.vue b/packages/design-system/src/components/N8nFormBox/FormBox.vue
index 7881c4b5c9ba4..54f010a7efebf 100644
--- a/packages/design-system/src/components/N8nFormBox/FormBox.vue
+++ b/packages/design-system/src/components/N8nFormBox/FormBox.vue
@@ -1,43 +1,3 @@
-<template>
-	<div :class="['n8n-form-box', $style.container]">
-		<div v-if="title" :class="$style.heading">
-			<N8nHeading size="xlarge">
-				{{ title }}
-			</N8nHeading>
-		</div>
-		<div :class="$style.inputsContainer">
-			<N8nFormInputs
-				:inputs="inputs"
-				:event-bus="formBus"
-				:column-view="true"
-				@update="onUpdateModelValue"
-				@submit="onSubmit"
-			/>
-		</div>
-		<div v-if="secondaryButtonText || buttonText" :class="$style.buttonsContainer">
-			<span v-if="secondaryButtonText" :class="$style.secondaryButtonContainer">
-				<N8nLink size="medium" theme="text" @click="onSecondaryButtonClick">
-					{{ secondaryButtonText }}
-				</N8nLink>
-			</span>
-			<N8nButton
-				v-if="buttonText"
-				:label="buttonText"
-				:loading="buttonLoading"
-				data-test-id="form-submit-button"
-				size="large"
-				@click="onButtonClick"
-			/>
-		</div>
-		<div :class="$style.actionContainer">
-			<N8nLink v-if="redirectText && redirectLink" :to="redirectLink">
-				{{ redirectText }}
-			</N8nLink>
-		</div>
-		<slot></slot>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import N8nFormInputs from '../N8nFormInputs';
 import N8nHeading from '../N8nHeading';
@@ -80,6 +40,46 @@ const onButtonClick = () => formBus.emit('submit');
 const onSecondaryButtonClick = (event: Event) => emit('secondaryClick', event);
 </script>
 
+<template>
+	<div :class="['n8n-form-box', $style.container]">
+		<div v-if="title" :class="$style.heading">
+			<N8nHeading size="xlarge">
+				{{ title }}
+			</N8nHeading>
+		</div>
+		<div :class="$style.inputsContainer">
+			<N8nFormInputs
+				:inputs="inputs"
+				:event-bus="formBus"
+				:column-view="true"
+				@update="onUpdateModelValue"
+				@submit="onSubmit"
+			/>
+		</div>
+		<div v-if="secondaryButtonText || buttonText" :class="$style.buttonsContainer">
+			<span v-if="secondaryButtonText" :class="$style.secondaryButtonContainer">
+				<N8nLink size="medium" theme="text" @click="onSecondaryButtonClick">
+					{{ secondaryButtonText }}
+				</N8nLink>
+			</span>
+			<N8nButton
+				v-if="buttonText"
+				:label="buttonText"
+				:loading="buttonLoading"
+				data-test-id="form-submit-button"
+				size="large"
+				@click="onButtonClick"
+			/>
+		</div>
+		<div :class="$style.actionContainer">
+			<N8nLink v-if="redirectText && redirectLink" :to="redirectLink">
+				{{ redirectText }}
+			</N8nLink>
+		</div>
+		<slot></slot>
+	</div>
+</template>
+
 <style lang="scss" module>
 .heading {
 	display: flex;
diff --git a/packages/design-system/src/components/N8nFormInput/FormInput.vue b/packages/design-system/src/components/N8nFormInput/FormInput.vue
index 569fe030e64e4..0266d8347e8d9 100644
--- a/packages/design-system/src/components/N8nFormInput/FormInput.vue
+++ b/packages/design-system/src/components/N8nFormInput/FormInput.vue
@@ -1,96 +1,3 @@
-<template>
-	<N8nCheckbox
-		v-if="type === 'checkbox'"
-		ref="inputRef"
-		:label="label"
-		:disabled="disabled"
-		:label-size="labelSize as CheckboxLabelSizePropType"
-		:model-value="modelValue as CheckboxModelValuePropType"
-		@update:model-value="onUpdateModelValue"
-		@focus="onFocus"
-	/>
-	<N8nInputLabel
-		v-else-if="type === 'toggle'"
-		:input-name="name"
-		:label="label"
-		:tooltip-text="tooltipText"
-		:required="required && showRequiredAsterisk"
-	>
-		<template #content>
-			{{ tooltipText }}
-		</template>
-		<ElSwitch
-			:model-value="modelValue as SwitchModelValuePropType"
-			:active-color="activeColor"
-			:inactive-color="inactiveColor"
-			@update:model-value="onUpdateModelValue"
-		></ElSwitch>
-	</N8nInputLabel>
-	<N8nInputLabel
-		v-else
-		:input-name="name"
-		:label="label"
-		:tooltip-text="tooltipText"
-		:required="required && showRequiredAsterisk"
-	>
-		<div :class="showErrors ? $style.errorInput : ''" @keydown.stop @keydown.enter="onEnter">
-			<slot v-if="hasDefaultSlot" />
-			<N8nSelect
-				v-else-if="type === 'select' || type === 'multi-select'"
-				ref="inputRef"
-				:class="{ [$style.multiSelectSmallTags]: tagSize === 'small' }"
-				:model-value="modelValue"
-				:placeholder="placeholder"
-				:multiple="type === 'multi-select'"
-				:disabled="disabled"
-				:name="name"
-				:teleported="teleported"
-				@update:model-value="onUpdateModelValue"
-				@focus="onFocus"
-				@blur="onBlur"
-			>
-				<N8nOption
-					v-for="option in options || []"
-					:key="option.value"
-					:value="option.value"
-					:label="option.label"
-					:disabled="!!option.disabled"
-					size="small"
-				/>
-			</N8nSelect>
-			<N8nInput
-				v-else
-				ref="inputRef"
-				:name="name"
-				:type="type as InputTypePropType"
-				:placeholder="placeholder"
-				:model-value="modelValue as InputModelValuePropType"
-				:maxlength="maxlength"
-				:autocomplete="autocomplete"
-				:disabled="disabled"
-				@update:model-value="onUpdateModelValue"
-				@blur="onBlur"
-				@focus="onFocus"
-			/>
-		</div>
-		<div v-if="showErrors" :class="$style.errors">
-			<span v-text="validationError" />
-			<n8n-link
-				v-if="documentationUrl && documentationText"
-				:to="documentationUrl"
-				:new-window="true"
-				size="small"
-				theme="danger"
-			>
-				{{ documentationText }}
-			</n8n-link>
-		</div>
-		<div v-else-if="infoText" :class="$style.infoText">
-			<span size="small" v-text="infoText" />
-		</div>
-	</N8nInputLabel>
-</template>
-
 <script lang="ts" setup>
 import { computed, reactive, onMounted, ref, watch, useSlots } from 'vue';
 
@@ -271,6 +178,99 @@ watch(
 defineExpose({ inputRef });
 </script>
 
+<template>
+	<N8nCheckbox
+		v-if="type === 'checkbox'"
+		ref="inputRef"
+		:label="label"
+		:disabled="disabled"
+		:label-size="labelSize as CheckboxLabelSizePropType"
+		:model-value="modelValue as CheckboxModelValuePropType"
+		@update:model-value="onUpdateModelValue"
+		@focus="onFocus"
+	/>
+	<N8nInputLabel
+		v-else-if="type === 'toggle'"
+		:input-name="name"
+		:label="label"
+		:tooltip-text="tooltipText"
+		:required="required && showRequiredAsterisk"
+	>
+		<template #content>
+			{{ tooltipText }}
+		</template>
+		<ElSwitch
+			:model-value="modelValue as SwitchModelValuePropType"
+			:active-color="activeColor"
+			:inactive-color="inactiveColor"
+			@update:model-value="onUpdateModelValue"
+		></ElSwitch>
+	</N8nInputLabel>
+	<N8nInputLabel
+		v-else
+		:input-name="name"
+		:label="label"
+		:tooltip-text="tooltipText"
+		:required="required && showRequiredAsterisk"
+	>
+		<div :class="showErrors ? $style.errorInput : ''" @keydown.stop @keydown.enter="onEnter">
+			<slot v-if="hasDefaultSlot" />
+			<N8nSelect
+				v-else-if="type === 'select' || type === 'multi-select'"
+				ref="inputRef"
+				:class="{ [$style.multiSelectSmallTags]: tagSize === 'small' }"
+				:model-value="modelValue"
+				:placeholder="placeholder"
+				:multiple="type === 'multi-select'"
+				:disabled="disabled"
+				:name="name"
+				:teleported="teleported"
+				@update:model-value="onUpdateModelValue"
+				@focus="onFocus"
+				@blur="onBlur"
+			>
+				<N8nOption
+					v-for="option in options || []"
+					:key="option.value"
+					:value="option.value"
+					:label="option.label"
+					:disabled="!!option.disabled"
+					size="small"
+				/>
+			</N8nSelect>
+			<N8nInput
+				v-else
+				ref="inputRef"
+				:name="name"
+				:type="type as InputTypePropType"
+				:placeholder="placeholder"
+				:model-value="modelValue as InputModelValuePropType"
+				:maxlength="maxlength"
+				:autocomplete="autocomplete"
+				:disabled="disabled"
+				@update:model-value="onUpdateModelValue"
+				@blur="onBlur"
+				@focus="onFocus"
+			/>
+		</div>
+		<div v-if="showErrors" :class="$style.errors">
+			<span v-text="validationError" />
+			<n8n-link
+				v-if="documentationUrl && documentationText"
+				:to="documentationUrl"
+				:new-window="true"
+				size="small"
+				theme="danger"
+			>
+				{{ documentationText }}
+			</n8n-link>
+		</div>
+		<div v-else-if="infoText" :class="$style.infoText">
+			<span size="small" v-text="infoText" />
+		</div>
+	</N8nInputLabel>
+</template>
+
 <style lang="scss" module>
 .infoText {
 	margin-top: var(--spacing-2xs);
diff --git a/packages/design-system/src/components/N8nHeading/Heading.vue b/packages/design-system/src/components/N8nHeading/Heading.vue
index d296c3557856e..ef3190b8d3355 100644
--- a/packages/design-system/src/components/N8nHeading/Heading.vue
+++ b/packages/design-system/src/components/N8nHeading/Heading.vue
@@ -1,9 +1,3 @@
-<template>
-	<component :is="tag" :class="['n8n-heading', ...classes]" v-bind="$attrs">
-		<slot></slot>
-	</component>
-</template>
-
 <script lang="ts" setup>
 import { computed, useCssModule } from 'vue';
 
@@ -50,6 +44,12 @@ const classes = computed(() => {
 });
 </script>
 
+<template>
+	<component :is="tag" :class="['n8n-heading', ...classes]" v-bind="$attrs">
+		<slot></slot>
+	</component>
+</template>
+
 <style lang="scss" module>
 .bold {
 	font-weight: var(--font-weight-bold);
diff --git a/packages/design-system/src/components/N8nIcon/Icon.vue b/packages/design-system/src/components/N8nIcon/Icon.vue
index e4b431d4dcc66..00e5fed31c847 100644
--- a/packages/design-system/src/components/N8nIcon/Icon.vue
+++ b/packages/design-system/src/components/N8nIcon/Icon.vue
@@ -1,9 +1,3 @@
-<template>
-	<N8nText :size="size" :color="color" :compact="true" class="n8n-icon" v-bind="$attrs">
-		<FontAwesomeIcon :icon="icon" :spin="spin" :class="$style[size]" />
-	</N8nText>
-</template>
-
 <script lang="ts" setup>
 import type { FontAwesomeIconProps } from '@fortawesome/vue-fontawesome';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
@@ -24,6 +18,12 @@ withDefaults(defineProps<IconProps>(), {
 });
 </script>
 
+<template>
+	<N8nText :size="size" :color="color" :compact="true" class="n8n-icon" v-bind="$attrs">
+		<FontAwesomeIcon :icon="icon" :spin="spin" :class="$style[size]" />
+	</N8nText>
+</template>
+
 <style lang="scss" module>
 .xlarge {
 	width: var(--font-size-xl) !important;
diff --git a/packages/design-system/src/components/N8nIconButton/IconButton.vue b/packages/design-system/src/components/N8nIconButton/IconButton.vue
index e70527e6c3f80..3d2c0a0541370 100644
--- a/packages/design-system/src/components/N8nIconButton/IconButton.vue
+++ b/packages/design-system/src/components/N8nIconButton/IconButton.vue
@@ -1,7 +1,3 @@
-<template>
-	<N8nButton square v-bind="{ ...$attrs, ...$props }" />
-</template>
-
 <script lang="ts" setup>
 import type { IconButtonProps } from 'n8n-design-system/types/button';
 import N8nButton from '../N8nButton';
@@ -17,3 +13,7 @@ withDefaults(defineProps<IconButtonProps>(), {
 	active: false,
 });
 </script>
+
+<template>
+	<N8nButton square v-bind="{ ...$attrs, ...$props }" />
+</template>
diff --git a/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue b/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
index 6cad6f885fb90..71830b02dcac6 100644
--- a/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
+++ b/packages/design-system/src/components/N8nInfoAccordion/InfoAccordion.vue
@@ -1,43 +1,3 @@
-<template>
-	<div :class="['accordion', $style.container]">
-		<div :class="{ [$style.header]: true, [$style.expanded]: expanded }" @click="toggle">
-			<N8nIcon
-				v-if="headerIcon"
-				:icon="headerIcon.icon"
-				:color="headerIcon.color"
-				size="small"
-				class="mr-2xs"
-			/>
-			<N8nText :class="$style.headerText" color="text-base" size="small" align="left" bold>{{
-				title
-			}}</N8nText>
-			<N8nIcon :icon="expanded ? 'chevron-up' : 'chevron-down'" bold />
-		</div>
-		<div
-			v-if="expanded"
-			:class="{ [$style.description]: true, [$style.collapsed]: !expanded }"
-			@click="onClick"
-		>
-			<!-- Info accordion can display list of items with icons or just a HTML description -->
-			<div v-if="items.length > 0" :class="$style.accordionItems">
-				<div v-for="item in items" :key="item.id" :class="$style.accordionItem">
-					<n8n-tooltip :disabled="!item.tooltip">
-						<template #content>
-							<div @click="onTooltipClick(item.id, $event)" v-html="item.tooltip"></div>
-						</template>
-						<N8nIcon :icon="item.icon" :color="item.iconColor" size="small" class="mr-2xs" />
-					</n8n-tooltip>
-					<N8nText size="small" color="text-base">{{ item.label }}</N8nText>
-				</div>
-			</div>
-			<N8nText color="text-base" size="small" align="left">
-				<span v-html="description"></span>
-			</N8nText>
-			<slot name="customContent"></slot>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 import N8nText from '../N8nText';
@@ -90,6 +50,46 @@ const onClick = (e: MouseEvent) => emit('click:body', e);
 const onTooltipClick = (item: string, event: MouseEvent) => emit('tooltipClick', item, event);
 </script>
 
+<template>
+	<div :class="['accordion', $style.container]">
+		<div :class="{ [$style.header]: true, [$style.expanded]: expanded }" @click="toggle">
+			<N8nIcon
+				v-if="headerIcon"
+				:icon="headerIcon.icon"
+				:color="headerIcon.color"
+				size="small"
+				class="mr-2xs"
+			/>
+			<N8nText :class="$style.headerText" color="text-base" size="small" align="left" bold>{{
+				title
+			}}</N8nText>
+			<N8nIcon :icon="expanded ? 'chevron-up' : 'chevron-down'" bold />
+		</div>
+		<div
+			v-if="expanded"
+			:class="{ [$style.description]: true, [$style.collapsed]: !expanded }"
+			@click="onClick"
+		>
+			<!-- Info accordion can display list of items with icons or just a HTML description -->
+			<div v-if="items.length > 0" :class="$style.accordionItems">
+				<div v-for="item in items" :key="item.id" :class="$style.accordionItem">
+					<n8n-tooltip :disabled="!item.tooltip">
+						<template #content>
+							<div @click="onTooltipClick(item.id, $event)" v-html="item.tooltip"></div>
+						</template>
+						<N8nIcon :icon="item.icon" :color="item.iconColor" size="small" class="mr-2xs" />
+					</n8n-tooltip>
+					<N8nText size="small" color="text-base">{{ item.label }}</N8nText>
+				</div>
+			</div>
+			<N8nText color="text-base" size="small" align="left">
+				<span v-html="description"></span>
+			</N8nText>
+			<slot name="customContent"></slot>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	background-color: var(--color-background-base);
diff --git a/packages/design-system/src/components/N8nInfoTip/InfoTip.vue b/packages/design-system/src/components/N8nInfoTip/InfoTip.vue
index a537a4ffc5ec6..c551000006b42 100644
--- a/packages/design-system/src/components/N8nInfoTip/InfoTip.vue
+++ b/packages/design-system/src/components/N8nInfoTip/InfoTip.vue
@@ -1,37 +1,3 @@
-<template>
-	<div
-		:class="{
-			'n8n-info-tip': true,
-			[$style.infoTip]: true,
-			[$style[theme]]: true,
-			[$style[type]]: true,
-			[$style.bold]: bold,
-		}"
-	>
-		<N8nTooltip
-			v-if="type === 'tooltip'"
-			:placement="tooltipPlacement"
-			:popper-class="$style.tooltipPopper"
-			:disabled="type !== 'tooltip'"
-		>
-			<span :class="$style.iconText" :style="{ color: iconData.color }">
-				<N8nIcon :icon="iconData.icon" />
-			</span>
-			<template #content>
-				<span>
-					<slot />
-				</span>
-			</template>
-		</N8nTooltip>
-		<span v-else :class="$style.iconText">
-			<N8nIcon :icon="iconData.icon" />
-			<span>
-				<slot />
-			</span>
-		</span>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed } from 'vue';
 import type { Placement } from 'element-plus';
@@ -92,6 +58,40 @@ const iconData = computed((): { icon: string; color: string } => {
 });
 </script>
 
+<template>
+	<div
+		:class="{
+			'n8n-info-tip': true,
+			[$style.infoTip]: true,
+			[$style[theme]]: true,
+			[$style[type]]: true,
+			[$style.bold]: bold,
+		}"
+	>
+		<N8nTooltip
+			v-if="type === 'tooltip'"
+			:placement="tooltipPlacement"
+			:popper-class="$style.tooltipPopper"
+			:disabled="type !== 'tooltip'"
+		>
+			<span :class="$style.iconText" :style="{ color: iconData.color }">
+				<N8nIcon :icon="iconData.icon" />
+			</span>
+			<template #content>
+				<span>
+					<slot />
+				</span>
+			</template>
+		</N8nTooltip>
+		<span v-else :class="$style.iconText">
+			<N8nIcon :icon="iconData.icon" />
+			<span>
+				<slot />
+			</span>
+		</span>
+	</div>
+</template>
+
 <style lang="scss" module>
 .infoTip {
 	display: flex;
diff --git a/packages/design-system/src/components/N8nInput/Input.vue b/packages/design-system/src/components/N8nInput/Input.vue
index 7b600709ba703..e4a3f57af1904 100644
--- a/packages/design-system/src/components/N8nInput/Input.vue
+++ b/packages/design-system/src/components/N8nInput/Input.vue
@@ -1,35 +1,3 @@
-<template>
-	<ElInput
-		ref="innerInput"
-		:model-value="modelValue"
-		:type="type"
-		:size="resolvedSize"
-		:class="['n8n-input', ...classes]"
-		:autocomplete="autocomplete"
-		:name="name"
-		:placeholder="placeholder"
-		:disabled="disabled"
-		:readonly="readonly"
-		:clearable="clearable"
-		:rows="rows"
-		:title="title"
-		v-bind="$attrs"
-	>
-		<template v-if="$slots.prepend" #prepend>
-			<slot name="prepend" />
-		</template>
-		<template v-if="$slots.append" #append>
-			<slot name="append" />
-		</template>
-		<template v-if="$slots.prefix" #prefix>
-			<slot name="prefix" />
-		</template>
-		<template v-if="$slots.suffix" #suffix>
-			<slot name="suffix" />
-		</template>
-	</ElInput>
-</template>
-
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import { ElInput } from 'element-plus';
@@ -96,6 +64,38 @@ const select = () => inputElement.value?.select();
 defineExpose({ focus, blur, select });
 </script>
 
+<template>
+	<ElInput
+		ref="innerInput"
+		:model-value="modelValue"
+		:type="type"
+		:size="resolvedSize"
+		:class="['n8n-input', ...classes]"
+		:autocomplete="autocomplete"
+		:name="name"
+		:placeholder="placeholder"
+		:disabled="disabled"
+		:readonly="readonly"
+		:clearable="clearable"
+		:rows="rows"
+		:title="title"
+		v-bind="$attrs"
+	>
+		<template v-if="$slots.prepend" #prepend>
+			<slot name="prepend" />
+		</template>
+		<template v-if="$slots.append" #append>
+			<slot name="append" />
+		</template>
+		<template v-if="$slots.prefix" #prefix>
+			<slot name="prefix" />
+		</template>
+		<template v-if="$slots.suffix" #suffix>
+			<slot name="suffix" />
+		</template>
+	</ElInput>
+</template>
+
 <style lang="scss" module>
 .xlarge {
 	--input-font-size: var(--font-size-m);
diff --git a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
index 795a6846501a4..d8f1845da368f 100644
--- a/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
+++ b/packages/design-system/src/components/N8nInputLabel/InputLabel.vue
@@ -1,3 +1,36 @@
+<script lang="ts" setup>
+import N8nText from '../N8nText';
+import N8nIcon from '../N8nIcon';
+import N8nTooltip from '../N8nTooltip';
+import type { TextColor } from 'n8n-design-system/types/text';
+
+const SIZE = ['small', 'medium'] as const;
+
+interface InputLabelProps {
+	compact?: boolean;
+	color?: TextColor;
+	label?: string;
+	tooltipText?: string;
+	inputName?: string;
+	required?: boolean;
+	bold?: boolean;
+	size?: (typeof SIZE)[number];
+	underline?: boolean;
+	showTooltip?: boolean;
+	showOptions?: boolean;
+}
+
+defineOptions({ name: 'N8nInputLabel' });
+withDefaults(defineProps<InputLabelProps>(), {
+	compact: false,
+	bold: true,
+	size: 'medium',
+});
+
+const addTargetBlank = (html: string) =>
+	html && html.includes('href=') ? html.replace(/href=/g, 'target="_blank" href=') : html;
+</script>
+
 <template>
 	<div :class="$style.container" v-bind="$attrs" data-test-id="input-label">
 		<label
@@ -45,39 +78,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-import N8nText from '../N8nText';
-import N8nIcon from '../N8nIcon';
-import N8nTooltip from '../N8nTooltip';
-import type { TextColor } from 'n8n-design-system/types/text';
-
-const SIZE = ['small', 'medium'] as const;
-
-interface InputLabelProps {
-	compact?: boolean;
-	color?: TextColor;
-	label?: string;
-	tooltipText?: string;
-	inputName?: string;
-	required?: boolean;
-	bold?: boolean;
-	size?: (typeof SIZE)[number];
-	underline?: boolean;
-	showTooltip?: boolean;
-	showOptions?: boolean;
-}
-
-defineOptions({ name: 'N8nInputLabel' });
-withDefaults(defineProps<InputLabelProps>(), {
-	compact: false,
-	bold: true,
-	size: 'medium',
-});
-
-const addTargetBlank = (html: string) =>
-	html && html.includes('href=') ? html.replace(/href=/g, 'target="_blank" href=') : html;
-</script>
-
 <style lang="scss" module>
 .container {
 	display: flex;
diff --git a/packages/design-system/src/components/N8nLink/Link.vue b/packages/design-system/src/components/N8nLink/Link.vue
index 891aef5e16bfb..4c325f6473195 100644
--- a/packages/design-system/src/components/N8nLink/Link.vue
+++ b/packages/design-system/src/components/N8nLink/Link.vue
@@ -1,13 +1,3 @@
-<template>
-	<N8nRoute :to="to" :new-window="newWindow" v-bind="$attrs" class="n8n-link">
-		<span :class="$style[`${underline ? `${theme}-underline` : theme}`]">
-			<N8nText :size="size" :bold="bold">
-				<slot></slot>
-			</N8nText>
-		</span>
-	</N8nRoute>
-</template>
-
 <script lang="ts" setup>
 import type { RouteLocationRaw } from 'vue-router';
 import N8nText from '../N8nText';
@@ -35,6 +25,16 @@ withDefaults(defineProps<LinkProps>(), {
 });
 </script>
 
+<template>
+	<N8nRoute :to="to" :new-window="newWindow" v-bind="$attrs" class="n8n-link">
+		<span :class="$style[`${underline ? `${theme}-underline` : theme}`]">
+			<N8nText :size="size" :bold="bold">
+				<slot></slot>
+			</N8nText>
+		</span>
+	</N8nRoute>
+</template>
+
 <style lang="scss" module>
 @import '../../utils';
 @import '../../css/common/var';
diff --git a/packages/design-system/src/components/N8nLoading/Loading.vue b/packages/design-system/src/components/N8nLoading/Loading.vue
index 0f33b169cd0f5..50bcc94e82c84 100644
--- a/packages/design-system/src/components/N8nLoading/Loading.vue
+++ b/packages/design-system/src/components/N8nLoading/Loading.vue
@@ -1,3 +1,37 @@
+<script lang="ts" setup>
+import { ElSkeleton, ElSkeletonItem } from 'element-plus';
+
+const VARIANT = [
+	'custom',
+	'p',
+	'text',
+	'h1',
+	'h3',
+	'text',
+	'caption',
+	'button',
+	'image',
+	'circle',
+	'rect',
+] as const;
+
+interface LoadingProps {
+	animated?: boolean;
+	loading?: boolean;
+	rows?: number;
+	shrinkLast?: boolean;
+	variant?: (typeof VARIANT)[number];
+}
+
+withDefaults(defineProps<LoadingProps>(), {
+	animated: true,
+	loading: true,
+	rows: 1,
+	shrinkLast: true,
+	variant: 'p',
+});
+</script>
+
 <template>
 	<ElSkeleton
 		:loading="loading"
@@ -35,40 +69,6 @@
 	</ElSkeleton>
 </template>
 
-<script lang="ts" setup>
-import { ElSkeleton, ElSkeletonItem } from 'element-plus';
-
-const VARIANT = [
-	'custom',
-	'p',
-	'text',
-	'h1',
-	'h3',
-	'text',
-	'caption',
-	'button',
-	'image',
-	'circle',
-	'rect',
-] as const;
-
-interface LoadingProps {
-	animated?: boolean;
-	loading?: boolean;
-	rows?: number;
-	shrinkLast?: boolean;
-	variant?: (typeof VARIANT)[number];
-}
-
-withDefaults(defineProps<LoadingProps>(), {
-	animated: true,
-	loading: true,
-	rows: 1,
-	shrinkLast: true,
-	variant: 'p',
-});
-</script>
-
 <style lang="scss" module>
 .h1Last {
 	width: 40%;
diff --git a/packages/design-system/src/components/N8nMarkdown/Markdown.vue b/packages/design-system/src/components/N8nMarkdown/Markdown.vue
index 07c8ecc9339c5..c953ff9d657e5 100644
--- a/packages/design-system/src/components/N8nMarkdown/Markdown.vue
+++ b/packages/design-system/src/components/N8nMarkdown/Markdown.vue
@@ -1,23 +1,3 @@
-<template>
-	<div class="n8n-markdown">
-		<div
-			v-if="!loading"
-			ref="editor"
-			:class="$style[theme]"
-			@click="onClick"
-			@mousedown="onMouseDown"
-			@change="onChange"
-			v-html="htmlContent"
-		/>
-		<div v-else :class="$style.markdown">
-			<div v-for="(_, index) in loadingBlocks" :key="index">
-				<N8nLoading :loading="loading" :rows="loadingRows" animated variant="p" />
-				<div :class="$style.spacer" />
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import type { Options as MarkdownOptions } from 'markdown-it';
@@ -213,6 +193,26 @@ const onCheckboxChange = (index: number) => {
 };
 </script>
 
+<template>
+	<div class="n8n-markdown">
+		<div
+			v-if="!loading"
+			ref="editor"
+			:class="$style[theme]"
+			@click="onClick"
+			@mousedown="onMouseDown"
+			@change="onChange"
+			v-html="htmlContent"
+		/>
+		<div v-else :class="$style.markdown">
+			<div v-for="(_, index) in loadingBlocks" :key="index">
+				<N8nLoading :loading="loading" :rows="loadingRows" animated variant="p" />
+				<div :class="$style.spacer" />
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .markdown {
 	color: var(--color-text-base);
diff --git a/packages/design-system/src/components/N8nMenu/Menu.vue b/packages/design-system/src/components/N8nMenu/Menu.vue
index 0075663e6de07..56c8b2d0ab7a2 100644
--- a/packages/design-system/src/components/N8nMenu/Menu.vue
+++ b/packages/design-system/src/components/N8nMenu/Menu.vue
@@ -1,58 +1,3 @@
-<template>
-	<div
-		:class="{
-			['menu-container']: true,
-			[$style.container]: true,
-			[$style.menuCollapsed]: collapsed,
-			[$style.transparentBackground]: transparentBackground,
-		}"
-	>
-		<div v-if="$slots.header" :class="$style.menuHeader">
-			<slot name="header"></slot>
-		</div>
-		<div :class="$style.menuContent">
-			<div :class="{ [$style.upperContent]: true, ['pt-xs']: $slots.menuPrefix }">
-				<div v-if="$slots.menuPrefix" :class="$style.menuPrefix">
-					<slot name="menuPrefix"></slot>
-				</div>
-				<ElMenu :default-active="defaultActive" :collapse="collapsed">
-					<N8nMenuItem
-						v-for="item in upperMenuItems"
-						:key="item.id"
-						:item="item"
-						:compact="collapsed"
-						:tooltip-delay="tooltipDelay"
-						:mode="mode"
-						:active-tab="activeTab"
-						:handle-select="onSelect"
-					/>
-				</ElMenu>
-			</div>
-			<div :class="[$style.lowerContent, 'pb-2xs']">
-				<slot name="beforeLowerMenu"></slot>
-				<ElMenu :default-active="defaultActive" :collapse="collapsed">
-					<N8nMenuItem
-						v-for="item in lowerMenuItems"
-						:key="item.id"
-						:item="item"
-						:compact="collapsed"
-						:tooltip-delay="tooltipDelay"
-						:mode="mode"
-						:active-tab="activeTab"
-						:handle-select="onSelect"
-					/>
-				</ElMenu>
-				<div v-if="$slots.menuSuffix" :class="$style.menuSuffix">
-					<slot name="menuSuffix"></slot>
-				</div>
-			</div>
-		</div>
-		<div v-if="$slots.footer" :class="$style.menuFooter">
-			<slot name="footer"></slot>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
@@ -125,6 +70,61 @@ const onSelect = (item: IMenuItem): void => {
 };
 </script>
 
+<template>
+	<div
+		:class="{
+			['menu-container']: true,
+			[$style.container]: true,
+			[$style.menuCollapsed]: collapsed,
+			[$style.transparentBackground]: transparentBackground,
+		}"
+	>
+		<div v-if="$slots.header" :class="$style.menuHeader">
+			<slot name="header"></slot>
+		</div>
+		<div :class="$style.menuContent">
+			<div :class="{ [$style.upperContent]: true, ['pt-xs']: $slots.menuPrefix }">
+				<div v-if="$slots.menuPrefix" :class="$style.menuPrefix">
+					<slot name="menuPrefix"></slot>
+				</div>
+				<ElMenu :default-active="defaultActive" :collapse="collapsed">
+					<N8nMenuItem
+						v-for="item in upperMenuItems"
+						:key="item.id"
+						:item="item"
+						:compact="collapsed"
+						:tooltip-delay="tooltipDelay"
+						:mode="mode"
+						:active-tab="activeTab"
+						:handle-select="onSelect"
+					/>
+				</ElMenu>
+			</div>
+			<div :class="[$style.lowerContent, 'pb-2xs']">
+				<slot name="beforeLowerMenu"></slot>
+				<ElMenu :default-active="defaultActive" :collapse="collapsed">
+					<N8nMenuItem
+						v-for="item in lowerMenuItems"
+						:key="item.id"
+						:item="item"
+						:compact="collapsed"
+						:tooltip-delay="tooltipDelay"
+						:mode="mode"
+						:active-tab="activeTab"
+						:handle-select="onSelect"
+					/>
+				</ElMenu>
+				<div v-if="$slots.menuSuffix" :class="$style.menuSuffix">
+					<slot name="menuSuffix"></slot>
+				</div>
+			</div>
+		</div>
+		<div v-if="$slots.footer" :class="$style.menuFooter">
+			<slot name="footer"></slot>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	height: 100%;
diff --git a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
index a0a5c75a6f6cc..f4f01b16d9cc5 100644
--- a/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
+++ b/packages/design-system/src/components/N8nMenuItem/MenuItem.vue
@@ -1,3 +1,67 @@
+<script lang="ts" setup>
+import { computed, useCssModule } from 'vue';
+import { useRoute } from 'vue-router';
+import { ElSubMenu, ElMenuItem } from 'element-plus';
+import N8nTooltip from '../N8nTooltip';
+import N8nIcon from '../N8nIcon';
+import ConditionalRouterLink from '../ConditionalRouterLink';
+import type { IMenuItem } from '../../types';
+import { doesMenuItemMatchCurrentRoute } from './routerUtil';
+import { getInitials } from '../../utils/labelUtil';
+
+interface MenuItemProps {
+	item: IMenuItem;
+	compact?: boolean;
+	tooltipDelay?: number;
+	popperClass?: string;
+	mode?: 'router' | 'tabs';
+	activeTab?: string;
+	handleSelect?: (item: IMenuItem) => void;
+}
+
+const props = withDefaults(defineProps<MenuItemProps>(), {
+	compact: false,
+	tooltipDelay: 300,
+	popperClass: '',
+	mode: 'router',
+});
+
+const $style = useCssModule();
+const $route = useRoute();
+
+const availableChildren = computed((): IMenuItem[] =>
+	Array.isArray(props.item.children)
+		? props.item.children.filter((child) => child.available !== false)
+		: [],
+);
+
+const currentRoute = computed(() => {
+	return $route ?? { name: '', path: '' };
+});
+
+const submenuPopperClass = computed((): string => {
+	const popperClass = [$style.submenuPopper, props.popperClass];
+	if (props.compact) {
+		popperClass.push($style.compact);
+	}
+	return popperClass.join(' ');
+});
+
+const isActive = (item: IMenuItem): boolean => {
+	if (props.mode === 'router') {
+		return doesMenuItemMatchCurrentRoute(item, currentRoute.value);
+	} else {
+		return item.id === props.activeTab;
+	}
+};
+
+const isItemActive = (item: IMenuItem): boolean => {
+	const hasActiveChild =
+		Array.isArray(item.children) && item.children.some((child) => isActive(child));
+	return isActive(item) || hasActiveChild;
+};
+</script>
+
 <template>
 	<div :class="['n8n-menu-item', $style.item]">
 		<ElSubMenu
@@ -88,70 +152,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-import { computed, useCssModule } from 'vue';
-import { useRoute } from 'vue-router';
-import { ElSubMenu, ElMenuItem } from 'element-plus';
-import N8nTooltip from '../N8nTooltip';
-import N8nIcon from '../N8nIcon';
-import ConditionalRouterLink from '../ConditionalRouterLink';
-import type { IMenuItem } from '../../types';
-import { doesMenuItemMatchCurrentRoute } from './routerUtil';
-import { getInitials } from '../../utils/labelUtil';
-
-interface MenuItemProps {
-	item: IMenuItem;
-	compact?: boolean;
-	tooltipDelay?: number;
-	popperClass?: string;
-	mode?: 'router' | 'tabs';
-	activeTab?: string;
-	handleSelect?: (item: IMenuItem) => void;
-}
-
-const props = withDefaults(defineProps<MenuItemProps>(), {
-	compact: false,
-	tooltipDelay: 300,
-	popperClass: '',
-	mode: 'router',
-});
-
-const $style = useCssModule();
-const $route = useRoute();
-
-const availableChildren = computed((): IMenuItem[] =>
-	Array.isArray(props.item.children)
-		? props.item.children.filter((child) => child.available !== false)
-		: [],
-);
-
-const currentRoute = computed(() => {
-	return $route ?? { name: '', path: '' };
-});
-
-const submenuPopperClass = computed((): string => {
-	const popperClass = [$style.submenuPopper, props.popperClass];
-	if (props.compact) {
-		popperClass.push($style.compact);
-	}
-	return popperClass.join(' ');
-});
-
-const isActive = (item: IMenuItem): boolean => {
-	if (props.mode === 'router') {
-		return doesMenuItemMatchCurrentRoute(item, currentRoute.value);
-	} else {
-		return item.id === props.activeTab;
-	}
-};
-
-const isItemActive = (item: IMenuItem): boolean => {
-	const hasActiveChild =
-		Array.isArray(item.children) && item.children.some((child) => isActive(child));
-	return isActive(item) || hasActiveChild;
-};
-</script>
-
 <style module lang="scss">
 // Element menu-item overrides
 :global(.el-menu-item),
diff --git a/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue b/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
index 7ba2287fe65e7..be173979d47b2 100644
--- a/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
+++ b/packages/design-system/src/components/N8nNodeIcon/NodeIcon.vue
@@ -1,40 +1,3 @@
-<template>
-	<div class="n8n-node-icon" v-bind="$attrs">
-		<div
-			:class="{
-				[$style.nodeIconWrapper]: true,
-				[$style.circle]: circle,
-				[$style.disabled]: disabled,
-			}"
-			:style="iconStyleData"
-		>
-			<!-- ElementUI tooltip is prone to memory-leaking so we only render it if we really need it -->
-			<N8nTooltip v-if="showTooltip" :placement="tooltipPosition" :disabled="!showTooltip">
-				<template #content>{{ nodeTypeName }}</template>
-				<div v-if="type !== 'unknown'" :class="$style.icon">
-					<img v-if="type === 'file'" :src="src" :class="$style.nodeIconImage" />
-					<FontAwesomeIcon v-else :icon="`${name}`" :class="$style.iconFa" :style="fontStyleData" />
-				</div>
-				<div v-else :class="$style.nodeIconPlaceholder">
-					{{ nodeTypeName ? nodeTypeName.charAt(0) : '?' }}
-				</div>
-			</N8nTooltip>
-			<template v-else>
-				<div v-if="type !== 'unknown'" :class="$style.icon">
-					<img v-if="type === 'file'" :src="src" :class="$style.nodeIconImage" />
-					<FontAwesomeIcon v-else :icon="`${name}`" :style="fontStyleData" />
-					<div v-if="badge" :class="$style.badge" :style="badgeStyleData">
-						<n8n-node-icon :type="badge.type" :src="badge.src" :size="badgeSize"></n8n-node-icon>
-					</div>
-				</div>
-				<div v-else :class="$style.nodeIconPlaceholder">
-					{{ nodeTypeName ? nodeTypeName.charAt(0) : '?' }}
-				</div>
-			</template>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
@@ -107,6 +70,43 @@ const badgeStyleData = computed((): Record<string, string> => {
 });
 </script>
 
+<template>
+	<div class="n8n-node-icon" v-bind="$attrs">
+		<div
+			:class="{
+				[$style.nodeIconWrapper]: true,
+				[$style.circle]: circle,
+				[$style.disabled]: disabled,
+			}"
+			:style="iconStyleData"
+		>
+			<!-- ElementUI tooltip is prone to memory-leaking so we only render it if we really need it -->
+			<N8nTooltip v-if="showTooltip" :placement="tooltipPosition" :disabled="!showTooltip">
+				<template #content>{{ nodeTypeName }}</template>
+				<div v-if="type !== 'unknown'" :class="$style.icon">
+					<img v-if="type === 'file'" :src="src" :class="$style.nodeIconImage" />
+					<FontAwesomeIcon v-else :icon="`${name}`" :class="$style.iconFa" :style="fontStyleData" />
+				</div>
+				<div v-else :class="$style.nodeIconPlaceholder">
+					{{ nodeTypeName ? nodeTypeName.charAt(0) : '?' }}
+				</div>
+			</N8nTooltip>
+			<template v-else>
+				<div v-if="type !== 'unknown'" :class="$style.icon">
+					<img v-if="type === 'file'" :src="src" :class="$style.nodeIconImage" />
+					<FontAwesomeIcon v-else :icon="`${name}`" :style="fontStyleData" />
+					<div v-if="badge" :class="$style.badge" :style="badgeStyleData">
+						<n8n-node-icon :type="badge.type" :src="badge.src" :size="badgeSize"></n8n-node-icon>
+					</div>
+				</div>
+				<div v-else :class="$style.nodeIconPlaceholder">
+					{{ nodeTypeName ? nodeTypeName.charAt(0) : '?' }}
+				</div>
+			</template>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .nodeIconWrapper {
 	width: var(--node-icon-size, 26px);
diff --git a/packages/design-system/src/components/N8nNotice/Notice.vue b/packages/design-system/src/components/N8nNotice/Notice.vue
index 82d778d760498..eb27aa2efdf8f 100644
--- a/packages/design-system/src/components/N8nNotice/Notice.vue
+++ b/packages/design-system/src/components/N8nNotice/Notice.vue
@@ -1,20 +1,3 @@
-<template>
-	<div :id="id" :class="classes" role="alert" @click="onClick">
-		<div class="notice-content">
-			<N8nText size="small" :compact="true">
-				<slot>
-					<span
-						:id="`${id}-content`"
-						:class="showFullContent ? $style['expanded'] : $style['truncated']"
-						role="region"
-						v-html="displayContent"
-					/>
-				</slot>
-			</N8nText>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, ref, useCssModule } from 'vue';
 import sanitize from 'sanitize-html';
@@ -81,6 +64,23 @@ const onClick = (event: MouseEvent) => {
 };
 </script>
 
+<template>
+	<div :id="id" :class="classes" role="alert" @click="onClick">
+		<div class="notice-content">
+			<N8nText size="small" :compact="true">
+				<slot>
+					<span
+						:id="`${id}-content`"
+						:class="showFullContent ? $style['expanded'] : $style['truncated']"
+						role="region"
+						v-html="displayContent"
+					/>
+				</slot>
+			</N8nText>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .notice {
 	font-size: var(--font-size-2xs);
diff --git a/packages/design-system/src/components/N8nPulse/Pulse.vue b/packages/design-system/src/components/N8nPulse/Pulse.vue
index 125bfb1535c0a..3ee098456163c 100644
--- a/packages/design-system/src/components/N8nPulse/Pulse.vue
+++ b/packages/design-system/src/components/N8nPulse/Pulse.vue
@@ -1,3 +1,7 @@
+<script lang="ts" setup>
+defineOptions({ name: 'N8nPulse' });
+</script>
+
 <template>
 	<div :class="['pulse', $style.pulseContainer]">
 		<div :class="$style.pulse">
@@ -8,10 +12,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-defineOptions({ name: 'N8nPulse' });
-</script>
-
 <style lang="scss" module>
 $--light-pulse-color: hsla(
 	var(--color-primary-h),
diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue b/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
index 37137793b552d..5be4090469bfb 100644
--- a/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
+++ b/packages/design-system/src/components/N8nRadioButtons/RadioButton.vue
@@ -1,3 +1,19 @@
+<script lang="ts" setup>
+interface RadioButtonProps {
+	label: string;
+	value: string;
+	active?: boolean;
+	disabled?: boolean;
+	size?: 'small' | 'medium';
+}
+
+withDefaults(defineProps<RadioButtonProps>(), {
+	active: false,
+	disabled: false,
+	size: 'medium',
+});
+</script>
+
 <template>
 	<label
 		role="radio"
@@ -23,22 +39,6 @@
 	</label>
 </template>
 
-<script lang="ts" setup>
-interface RadioButtonProps {
-	label: string;
-	value: string;
-	active?: boolean;
-	disabled?: boolean;
-	size?: 'small' | 'medium';
-}
-
-withDefaults(defineProps<RadioButtonProps>(), {
-	active: false,
-	disabled: false,
-	size: 'medium',
-});
-</script>
-
 <style lang="scss" module>
 .container {
 	display: inline-block;
diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
index f176b2efb7c64..837260722be02 100644
--- a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
+++ b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
@@ -1,20 +1,3 @@
-<template>
-	<div
-		role="radiogroup"
-		:class="{ 'n8n-radio-buttons': true, [$style.radioGroup]: true, [$style.disabled]: disabled }"
-	>
-		<RadioButton
-			v-for="option in options"
-			:key="option.value"
-			v-bind="option"
-			:active="modelValue === option.value"
-			:size="size"
-			:disabled="disabled || option.disabled"
-			@click.prevent.stop="onClick(option, $event)"
-		/>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import RadioButton from './RadioButton.vue';
 
@@ -53,6 +36,23 @@ const onClick = (
 };
 </script>
 
+<template>
+	<div
+		role="radiogroup"
+		:class="{ 'n8n-radio-buttons': true, [$style.radioGroup]: true, [$style.disabled]: disabled }"
+	>
+		<RadioButton
+			v-for="option in options"
+			:key="option.value"
+			v-bind="option"
+			:active="modelValue === option.value"
+			:size="size"
+			:disabled="disabled || option.disabled"
+			@click.prevent.stop="onClick(option, $event)"
+		/>
+	</div>
+</template>
+
 <style lang="scss" module>
 .radioGroup {
 	display: inline-flex;
diff --git a/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue b/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue
index 475000bf3cd07..3d32365c4b8ca 100644
--- a/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue
+++ b/packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue
@@ -1,16 +1,3 @@
-<template>
-	<div :class="$style.resize">
-		<div
-			v-for="direction in enabledDirections"
-			:key="direction"
-			:data-dir="direction"
-			:class="{ [$style.resizer]: true, [$style[direction]]: true }"
-			@mousedown="resizerMove"
-		/>
-		<slot></slot>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 
@@ -180,6 +167,19 @@ const resizerMove = (event: MouseEvent) => {
 };
 </script>
 
+<template>
+	<div :class="$style.resize">
+		<div
+			v-for="direction in enabledDirections"
+			:key="direction"
+			:data-dir="direction"
+			:class="{ [$style.resizer]: true, [$style[direction]]: true }"
+			@mousedown="resizerMove"
+		/>
+		<slot></slot>
+	</div>
+</template>
+
 <style lang="scss" module>
 .resize {
 	position: relative;
diff --git a/packages/design-system/src/components/N8nResizeableSticky/ResizeableSticky.vue b/packages/design-system/src/components/N8nResizeableSticky/ResizeableSticky.vue
index c70dfe89e885a..f75fc0e0ef63e 100644
--- a/packages/design-system/src/components/N8nResizeableSticky/ResizeableSticky.vue
+++ b/packages/design-system/src/components/N8nResizeableSticky/ResizeableSticky.vue
@@ -1,20 +1,3 @@
-<template>
-	<N8nResizeWrapper
-		:is-resizing-enabled="!readOnly"
-		:height="height"
-		:width="width"
-		:min-height="minHeight"
-		:min-width="minWidth"
-		:scale="scale"
-		:grid-size="gridSize"
-		@resizeend="onResizeEnd"
-		@resize="onResize"
-		@resizestart="onResizeStart"
-	>
-		<N8nSticky v-bind="stickyBindings" />
-	</N8nResizeWrapper>
-</template>
-
 <script lang="ts" setup>
 import { computed, ref, useAttrs } from 'vue';
 import N8nResizeWrapper, { type ResizeData } from '../N8nResizeWrapper/ResizeWrapper.vue';
@@ -59,3 +42,20 @@ const onResizeEnd = () => {
 	emit('resizeend');
 };
 </script>
+
+<template>
+	<N8nResizeWrapper
+		:is-resizing-enabled="!readOnly"
+		:height="height"
+		:width="width"
+		:min-height="minHeight"
+		:min-width="minWidth"
+		:scale="scale"
+		:grid-size="gridSize"
+		@resizeend="onResizeEnd"
+		@resize="onResize"
+		@resizestart="onResizeStart"
+	>
+		<N8nSticky v-bind="stickyBindings" />
+	</N8nResizeWrapper>
+</template>
diff --git a/packages/design-system/src/components/N8nRoute/Route.vue b/packages/design-system/src/components/N8nRoute/Route.vue
index 4501582a84496..07fe1f3c28a45 100644
--- a/packages/design-system/src/components/N8nRoute/Route.vue
+++ b/packages/design-system/src/components/N8nRoute/Route.vue
@@ -1,17 +1,3 @@
-<template>
-	<router-link v-if="useRouterLink && to" :to="to" v-bind="$attrs">
-		<slot></slot>
-	</router-link>
-	<a
-		v-else
-		:href="to ? `${to}` : undefined"
-		:target="openNewWindow ? '_blank' : '_self'"
-		v-bind="$attrs"
-	>
-		<slot></slot>
-	</a>
-</template>
-
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { type RouteLocationRaw } from 'vue-router';
@@ -39,3 +25,17 @@ const useRouterLink = computed(() => {
 
 const openNewWindow = computed(() => !useRouterLink.value);
 </script>
+
+<template>
+	<router-link v-if="useRouterLink && to" :to="to" v-bind="$attrs">
+		<slot></slot>
+	</router-link>
+	<a
+		v-else
+		:href="to ? `${to}` : undefined"
+		:target="openNewWindow ? '_blank' : '_self'"
+		v-bind="$attrs"
+	>
+		<slot></slot>
+	</a>
+</template>
diff --git a/packages/design-system/src/components/N8nSpinner/Spinner.vue b/packages/design-system/src/components/N8nSpinner/Spinner.vue
index 497ae554a8f1c..66ac825c3b796 100644
--- a/packages/design-system/src/components/N8nSpinner/Spinner.vue
+++ b/packages/design-system/src/components/N8nSpinner/Spinner.vue
@@ -1,15 +1,3 @@
-<template>
-	<span class="n8n-spinner">
-		<div v-if="type === 'ring'" class="lds-ring">
-			<div></div>
-			<div></div>
-			<div></div>
-			<div></div>
-		</div>
-		<N8nIcon v-else icon="spinner" :size="size" spin />
-	</span>
-</template>
-
 <script lang="ts" setup>
 import type { TextSize } from 'n8n-design-system/types/text';
 import N8nIcon from '../N8nIcon';
@@ -28,6 +16,18 @@ withDefaults(defineProps<SpinnerProps>(), {
 });
 </script>
 
+<template>
+	<span class="n8n-spinner">
+		<div v-if="type === 'ring'" class="lds-ring">
+			<div></div>
+			<div></div>
+			<div></div>
+			<div></div>
+		</div>
+		<N8nIcon v-else icon="spinner" :size="size" spin />
+	</span>
+</template>
+
 <style lang="scss">
 .lds-ring {
 	display: inline-block;
diff --git a/packages/design-system/src/components/N8nSticky/Sticky.vue b/packages/design-system/src/components/N8nSticky/Sticky.vue
index c53fb012f9909..4b7dca944acb0 100644
--- a/packages/design-system/src/components/N8nSticky/Sticky.vue
+++ b/packages/design-system/src/components/N8nSticky/Sticky.vue
@@ -1,51 +1,3 @@
-<template>
-	<div
-		:class="{
-			'n8n-sticky': true,
-			[$style.sticky]: true,
-			[$style.clickable]: !isResizing,
-			[$style[`color-${backgroundColor}`]]: true,
-		}"
-		:style="styles"
-		@keydown.prevent
-	>
-		<div v-show="!editMode" :class="$style.wrapper" @dblclick.stop="onDoubleClick">
-			<N8nMarkdown
-				theme="sticky"
-				:content="modelValue"
-				:with-multi-breaks="true"
-				@markdown-click="onMarkdownClick"
-				@update-content="onUpdateModelValue"
-			/>
-		</div>
-		<div
-			v-show="editMode"
-			:class="{ 'full-height': !shouldShowFooter, 'sticky-textarea': true }"
-			@click.stop
-			@mousedown.stop
-			@mouseup.stop
-			@keydown.esc="onInputBlur"
-			@keydown.stop
-		>
-			<N8nInput
-				ref="input"
-				:model-value="modelValue"
-				:name="inputName"
-				type="textarea"
-				:rows="5"
-				@blur="onInputBlur"
-				@update:model-value="onUpdateModelValue"
-				@wheel="onInputScroll"
-			/>
-		</div>
-		<div v-if="editMode && shouldShowFooter" :class="$style.footer">
-			<N8nText size="xsmall" align="right">
-				<span v-html="t('sticky.markdownHint')"></span>
-			</N8nText>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
 import N8nInput from '../N8nInput';
@@ -122,6 +74,54 @@ const onInputScroll = (event: WheelEvent) => {
 };
 </script>
 
+<template>
+	<div
+		:class="{
+			'n8n-sticky': true,
+			[$style.sticky]: true,
+			[$style.clickable]: !isResizing,
+			[$style[`color-${backgroundColor}`]]: true,
+		}"
+		:style="styles"
+		@keydown.prevent
+	>
+		<div v-show="!editMode" :class="$style.wrapper" @dblclick.stop="onDoubleClick">
+			<N8nMarkdown
+				theme="sticky"
+				:content="modelValue"
+				:with-multi-breaks="true"
+				@markdown-click="onMarkdownClick"
+				@update-content="onUpdateModelValue"
+			/>
+		</div>
+		<div
+			v-show="editMode"
+			:class="{ 'full-height': !shouldShowFooter, 'sticky-textarea': true }"
+			@click.stop
+			@mousedown.stop
+			@mouseup.stop
+			@keydown.esc="onInputBlur"
+			@keydown.stop
+		>
+			<N8nInput
+				ref="input"
+				:model-value="modelValue"
+				:name="inputName"
+				type="textarea"
+				:rows="5"
+				@blur="onInputBlur"
+				@update:model-value="onUpdateModelValue"
+				@wheel="onInputScroll"
+			/>
+		</div>
+		<div v-if="editMode && shouldShowFooter" :class="$style.footer">
+			<N8nText size="xsmall" align="right">
+				<span v-html="t('sticky.markdownHint')"></span>
+			</N8nText>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .sticky {
 	position: absolute;
diff --git a/packages/design-system/src/components/N8nTabs/Tabs.vue b/packages/design-system/src/components/N8nTabs/Tabs.vue
index 967f08a430701..64277ca8630e9 100644
--- a/packages/design-system/src/components/N8nTabs/Tabs.vue
+++ b/packages/design-system/src/components/N8nTabs/Tabs.vue
@@ -1,59 +1,3 @@
-<template>
-	<div :class="['n8n-tabs', $style.container]">
-		<div v-if="scrollPosition > 0" :class="$style.back" @click="scrollLeft">
-			<N8nIcon icon="chevron-left" size="small" />
-		</div>
-		<div v-if="canScrollRight" :class="$style.next" @click="scrollRight">
-			<N8nIcon icon="chevron-right" size="small" />
-		</div>
-		<div ref="tabs" :class="$style.tabs">
-			<div
-				v-for="option in options"
-				:id="option.value"
-				:key="option.value"
-				:class="{ [$style.alignRight]: option.align === 'right' }"
-			>
-				<N8nTooltip :disabled="!option.tooltip" placement="bottom">
-					<template #content>
-						<div @click="handleTooltipClick(option.value, $event)" v-html="option.tooltip" />
-					</template>
-					<a
-						v-if="option.href"
-						target="_blank"
-						:href="option.href"
-						:class="[$style.link, $style.tab]"
-						@click="() => handleTabClick(option.value)"
-					>
-						<div>
-							{{ option.label }}
-							<span :class="$style.external">
-								<N8nIcon icon="external-link-alt" size="xsmall" />
-							</span>
-						</div>
-					</a>
-					<router-link
-						v-else-if="option.to"
-						:to="option.to"
-						:class="[$style.tab, { [$style.activeTab]: modelValue === option.value }]"
-					>
-						<N8nIcon v-if="option.icon" :icon="option.icon" size="medium" />
-						<span v-if="option.label">{{ option.label }}</span>
-					</router-link>
-					<div
-						v-else
-						:class="{ [$style.tab]: true, [$style.activeTab]: modelValue === option.value }"
-						:data-test-id="`tab-${option.value}`"
-						@click="() => handleTabClick(option.value)"
-					>
-						<N8nIcon v-if="option.icon" :icon="option.icon" size="small" />
-						<span v-if="option.label">{{ option.label }}</span>
-					</div>
-				</N8nTooltip>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from 'vue';
 import N8nIcon from '../N8nIcon';
@@ -128,6 +72,62 @@ const scrollLeft = () => scroll(-50);
 const scrollRight = () => scroll(50);
 </script>
 
+<template>
+	<div :class="['n8n-tabs', $style.container]">
+		<div v-if="scrollPosition > 0" :class="$style.back" @click="scrollLeft">
+			<N8nIcon icon="chevron-left" size="small" />
+		</div>
+		<div v-if="canScrollRight" :class="$style.next" @click="scrollRight">
+			<N8nIcon icon="chevron-right" size="small" />
+		</div>
+		<div ref="tabs" :class="$style.tabs">
+			<div
+				v-for="option in options"
+				:id="option.value"
+				:key="option.value"
+				:class="{ [$style.alignRight]: option.align === 'right' }"
+			>
+				<N8nTooltip :disabled="!option.tooltip" placement="bottom">
+					<template #content>
+						<div @click="handleTooltipClick(option.value, $event)" v-html="option.tooltip" />
+					</template>
+					<a
+						v-if="option.href"
+						target="_blank"
+						:href="option.href"
+						:class="[$style.link, $style.tab]"
+						@click="() => handleTabClick(option.value)"
+					>
+						<div>
+							{{ option.label }}
+							<span :class="$style.external">
+								<N8nIcon icon="external-link-alt" size="xsmall" />
+							</span>
+						</div>
+					</a>
+					<router-link
+						v-else-if="option.to"
+						:to="option.to"
+						:class="[$style.tab, { [$style.activeTab]: modelValue === option.value }]"
+					>
+						<N8nIcon v-if="option.icon" :icon="option.icon" size="medium" />
+						<span v-if="option.label">{{ option.label }}</span>
+					</router-link>
+					<div
+						v-else
+						:class="{ [$style.tab]: true, [$style.activeTab]: modelValue === option.value }"
+						:data-test-id="`tab-${option.value}`"
+						@click="() => handleTabClick(option.value)"
+					>
+						<N8nIcon v-if="option.icon" :icon="option.icon" size="small" />
+						<span v-if="option.label">{{ option.label }}</span>
+					</div>
+				</N8nTooltip>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	position: relative;
diff --git a/packages/design-system/src/components/N8nTag/Tag.vue b/packages/design-system/src/components/N8nTag/Tag.vue
index ba95e2095362c..92c725fb96d79 100644
--- a/packages/design-system/src/components/N8nTag/Tag.vue
+++ b/packages/design-system/src/components/N8nTag/Tag.vue
@@ -1,9 +1,3 @@
-<template>
-	<span :class="['n8n-tag', $style.tag]" v-bind="$attrs">
-		{{ text }}
-	</span>
-</template>
-
 <script lang="ts" setup>
 interface TagProps {
 	text: string;
@@ -12,6 +6,12 @@ defineOptions({ name: 'N8nTag' });
 defineProps<TagProps>();
 </script>
 
+<template>
+	<span :class="['n8n-tag', $style.tag]" v-bind="$attrs">
+		{{ text }}
+	</span>
+</template>
+
 <style lang="scss" module>
 .tag {
 	min-width: max-content;
diff --git a/packages/design-system/src/components/N8nTags/Tags.vue b/packages/design-system/src/components/N8nTags/Tags.vue
index 9b3daf7c74727..dfc1b57060ee9 100644
--- a/packages/design-system/src/components/N8nTags/Tags.vue
+++ b/packages/design-system/src/components/N8nTags/Tags.vue
@@ -1,23 +1,3 @@
-<template>
-	<div :class="['n8n-tags', $style.tags]">
-		<N8nTag
-			v-for="tag in visibleTags"
-			:key="tag.id"
-			:text="tag.name"
-			@click="emit('click:tag', tag.id, $event)"
-		/>
-		<N8nLink
-			v-if="truncate && !showAll && hiddenTagsLength > 0"
-			theme="text"
-			underline
-			size="small"
-			@click.stop.prevent="onExpand"
-		>
-			{{ t('tags.showMore', [`${hiddenTagsLength}`]) }}
-		</N8nLink>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import N8nTag from '../N8nTag';
@@ -67,6 +47,26 @@ const onExpand = () => {
 };
 </script>
 
+<template>
+	<div :class="['n8n-tags', $style.tags]">
+		<N8nTag
+			v-for="tag in visibleTags"
+			:key="tag.id"
+			:text="tag.name"
+			@click="emit('click:tag', tag.id, $event)"
+		/>
+		<N8nLink
+			v-if="truncate && !showAll && hiddenTagsLength > 0"
+			theme="text"
+			underline
+			size="small"
+			@click.stop.prevent="onExpand"
+		>
+			{{ t('tags.showMore', [`${hiddenTagsLength}`]) }}
+		</N8nLink>
+	</div>
+</template>
+
 <style lang="scss" module>
 .tags {
 	display: inline-flex;
diff --git a/packages/design-system/src/components/N8nText/Text.vue b/packages/design-system/src/components/N8nText/Text.vue
index d5624f9b4cbdf..055a79c3ddc97 100644
--- a/packages/design-system/src/components/N8nText/Text.vue
+++ b/packages/design-system/src/components/N8nText/Text.vue
@@ -1,9 +1,3 @@
-<template>
-	<component :is="tag" :class="['n8n-text', ...classes]" v-bind="$attrs">
-		<slot></slot>
-	</component>
-</template>
-
 <script lang="ts" setup>
 import { computed, useCssModule } from 'vue';
 import type { TextSize, TextColor, TextAlign } from 'n8n-design-system/types/text';
@@ -46,6 +40,12 @@ const classes = computed(() => {
 });
 </script>
 
+<template>
+	<component :is="tag" :class="['n8n-text', ...classes]" v-bind="$attrs">
+		<slot></slot>
+	</component>
+</template>
+
 <style lang="scss" module>
 .bold {
 	font-weight: var(--font-weight-bold);
diff --git a/packages/design-system/src/components/N8nTooltip/Tooltip.vue b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
index 6af93a92e9b18..8c1c17358bfc6 100644
--- a/packages/design-system/src/components/N8nTooltip/Tooltip.vue
+++ b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
@@ -1,25 +1,3 @@
-<template>
-	<ElTooltip v-bind="{ ...$props, ...$attrs }" :popper-class="$props.popperClass ?? 'n8n-tooltip'">
-		<slot />
-		<template #content>
-			<slot name="content">
-				<div v-html="content"></div>
-			</slot>
-			<div
-				v-if="buttons.length"
-				:class="$style.buttons"
-				:style="{ justifyContent: justifyButtons }"
-			>
-				<N8nButton
-					v-for="button in buttons"
-					:key="button.attrs.label"
-					v-bind="{ ...button.attrs, ...button.listeners }"
-				/>
-			</div>
-		</template>
-	</ElTooltip>
-</template>
-
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
@@ -65,6 +43,28 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<ElTooltip v-bind="{ ...$props, ...$attrs }" :popper-class="$props.popperClass ?? 'n8n-tooltip'">
+		<slot />
+		<template #content>
+			<slot name="content">
+				<div v-html="content"></div>
+			</slot>
+			<div
+				v-if="buttons.length"
+				:class="$style.buttons"
+				:style="{ justifyContent: justifyButtons }"
+			>
+				<N8nButton
+					v-for="button in buttons"
+					:key="button.attrs.label"
+					v-bind="{ ...button.attrs, ...button.listeners }"
+				/>
+			</div>
+		</template>
+	</ElTooltip>
+</template>
+
 <style lang="scss" module>
 .buttons {
 	display: flex;
diff --git a/packages/design-system/src/components/N8nTree/Tree.vue b/packages/design-system/src/components/N8nTree/Tree.vue
index b588af3ae6e29..b78c2fee02093 100644
--- a/packages/design-system/src/components/N8nTree/Tree.vue
+++ b/packages/design-system/src/components/N8nTree/Tree.vue
@@ -1,31 +1,3 @@
-<template>
-	<div v-if="isObject(value)" class="n8n-tree">
-		<div v-for="(label, i) in Object.keys(value)" :key="i" :class="classes">
-			<div v-if="isSimple(value[label])" :class="$style.simple">
-				<slot v-if="$slots.label" name="label" :label="label" :path="getPath(label)" />
-				<span v-else>{{ label }}</span>
-				<span>:</span>
-				<slot v-if="$slots.value" name="value" :value="value[label]" />
-				<span v-else>{{ value[label] }}</span>
-			</div>
-			<div v-else>
-				<slot v-if="$slots.label" name="label" :label="label" :path="getPath(label)" />
-				<span v-else>{{ label }}</span>
-				<n8n-tree
-					:path="getPath(label)"
-					:depth="depth + 1"
-					:value="value[label] as Record<string, unknown>"
-					:node-class="nodeClass"
-				>
-					<template v-for="(_, name) in $slots" #[name]="data">
-						<slot :name="name" v-bind="data"></slot>
-					</template>
-				</n8n-tree>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, useCssModule } from 'vue';
 
@@ -85,6 +57,34 @@ const getPath = (key: string): Array<string | number> => {
 };
 </script>
 
+<template>
+	<div v-if="isObject(value)" class="n8n-tree">
+		<div v-for="(label, i) in Object.keys(value)" :key="i" :class="classes">
+			<div v-if="isSimple(value[label])" :class="$style.simple">
+				<slot v-if="$slots.label" name="label" :label="label" :path="getPath(label)" />
+				<span v-else>{{ label }}</span>
+				<span>:</span>
+				<slot v-if="$slots.value" name="value" :value="value[label]" />
+				<span v-else>{{ value[label] }}</span>
+			</div>
+			<div v-else>
+				<slot v-if="$slots.label" name="label" :label="label" :path="getPath(label)" />
+				<span v-else>{{ label }}</span>
+				<n8n-tree
+					:path="getPath(label)"
+					:depth="depth + 1"
+					:value="value[label] as Record<string, unknown>"
+					:node-class="nodeClass"
+				>
+					<template v-for="(_, name) in $slots" #[name]="data">
+						<slot :name="name" v-bind="data"></slot>
+					</template>
+				</n8n-tree>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 $--spacing: var(--spacing-s);
 
diff --git a/packages/design-system/src/components/N8nUserInfo/UserInfo.vue b/packages/design-system/src/components/N8nUserInfo/UserInfo.vue
index 44d9a62c029a3..fd8c3f061c5b6 100644
--- a/packages/design-system/src/components/N8nUserInfo/UserInfo.vue
+++ b/packages/design-system/src/components/N8nUserInfo/UserInfo.vue
@@ -1,30 +1,3 @@
-<template>
-	<div :class="classes">
-		<div :class="$style.avatarContainer">
-			<N8nAvatar :first-name="firstName" :last-name="lastName" />
-		</div>
-
-		<div v-if="isPendingUser" :class="$style.pendingUser">
-			<N8nText :bold="true">{{ email }}</N8nText>
-			<span :class="$style.pendingBadge"><N8nBadge :bold="true">Pending</N8nBadge></span>
-		</div>
-		<div v-else :class="$style.infoContainer">
-			<div>
-				<N8nText :bold="true" color="text-dark">
-					{{ firstName }} {{ lastName }}
-					{{ isCurrentUser ? t('nds.userInfo.you') : '' }}
-				</N8nText>
-				<span v-if="disabled" :class="$style.pendingBadge">
-					<N8nBadge :bold="true">Disabled</N8nBadge>
-				</span>
-			</div>
-			<div>
-				<N8nText data-test-id="user-email" size="small" color="text-light">{{ email }}</N8nText>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed, useCssModule } from 'vue';
 import N8nText from '../N8nText';
@@ -59,6 +32,33 @@ const classes = computed(
 );
 </script>
 
+<template>
+	<div :class="classes">
+		<div :class="$style.avatarContainer">
+			<N8nAvatar :first-name="firstName" :last-name="lastName" />
+		</div>
+
+		<div v-if="isPendingUser" :class="$style.pendingUser">
+			<N8nText :bold="true">{{ email }}</N8nText>
+			<span :class="$style.pendingBadge"><N8nBadge :bold="true">Pending</N8nBadge></span>
+		</div>
+		<div v-else :class="$style.infoContainer">
+			<div>
+				<N8nText :bold="true" color="text-dark">
+					{{ firstName }} {{ lastName }}
+					{{ isCurrentUser ? t('nds.userInfo.you') : '' }}
+				</N8nText>
+				<span v-if="disabled" :class="$style.pendingBadge">
+					<N8nBadge :bold="true">Disabled</N8nBadge>
+				</span>
+			</div>
+			<div>
+				<N8nText data-test-id="user-email" size="small" color="text-light">{{ email }}</N8nText>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	display: inline-flex;
diff --git a/packages/design-system/src/components/N8nUserSelect/UserSelect.vue b/packages/design-system/src/components/N8nUserSelect/UserSelect.vue
index 3a4558bcb65fe..feeaa1a8d2de3 100644
--- a/packages/design-system/src/components/N8nUserSelect/UserSelect.vue
+++ b/packages/design-system/src/components/N8nUserSelect/UserSelect.vue
@@ -1,35 +1,3 @@
-<template>
-	<N8nSelect
-		data-test-id="user-select-trigger"
-		v-bind="$attrs"
-		:model-value="modelValue"
-		:filterable="true"
-		:filter-method="setFilter"
-		:placeholder="placeholder || t('nds.userSelect.selectUser')"
-		:default-first-option="true"
-		teleported
-		:popper-class="$style.limitPopperWidth"
-		:no-data-text="t('nds.userSelect.noMatchingUsers')"
-		:size="size"
-		@blur="onBlur"
-		@focus="onFocus"
-	>
-		<template v-if="$slots.prefix" #prefix>
-			<slot name="prefix" />
-		</template>
-		<N8nOption
-			v-for="user in sortedUsers"
-			:key="user.id"
-			:value="user.id"
-			:class="$style.itemContainer"
-			:label="getLabel(user)"
-			:disabled="user.disabled"
-		>
-			<N8nUserInfo v-bind="user" :is-current-user="currentUserId === user.id" />
-		</N8nOption>
-	</N8nSelect>
-</template>
-
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import N8nUserInfo from '../N8nUserInfo';
@@ -112,6 +80,38 @@ const getLabel = (user: IUser) =>
 	!user.fullName ? user.email : `${user.fullName} (${user.email})`;
 </script>
 
+<template>
+	<N8nSelect
+		data-test-id="user-select-trigger"
+		v-bind="$attrs"
+		:model-value="modelValue"
+		:filterable="true"
+		:filter-method="setFilter"
+		:placeholder="placeholder || t('nds.userSelect.selectUser')"
+		:default-first-option="true"
+		teleported
+		:popper-class="$style.limitPopperWidth"
+		:no-data-text="t('nds.userSelect.noMatchingUsers')"
+		:size="size"
+		@blur="onBlur"
+		@focus="onFocus"
+	>
+		<template v-if="$slots.prefix" #prefix>
+			<slot name="prefix" />
+		</template>
+		<N8nOption
+			v-for="user in sortedUsers"
+			:key="user.id"
+			:value="user.id"
+			:class="$style.itemContainer"
+			:label="getLabel(user)"
+			:disabled="user.disabled"
+		>
+			<N8nUserInfo v-bind="user" :is-current-user="currentUserId === user.id" />
+		</N8nOption>
+	</N8nSelect>
+</template>
+
 <style lang="scss" module>
 .itemContainer {
 	--select-option-padding: var(--spacing-2xs) var(--spacing-s);
diff --git a/packages/design-system/src/components/N8nUsersList/UsersList.vue b/packages/design-system/src/components/N8nUsersList/UsersList.vue
index 9b1f54ebec1c6..e4a6870d064cf 100644
--- a/packages/design-system/src/components/N8nUsersList/UsersList.vue
+++ b/packages/design-system/src/components/N8nUsersList/UsersList.vue
@@ -1,39 +1,3 @@
-<template>
-	<div>
-		<div
-			v-for="(user, i) in sortedUsers"
-			:key="user.id"
-			:class="i === sortedUsers.length - 1 ? $style.itemContainer : $style.itemWithBorder"
-			:data-test-id="`user-list-item-${user.email}`"
-		>
-			<N8nUserInfo
-				v-bind="user"
-				:is-current-user="currentUserId === user.id"
-				:is-saml-login-enabled="isSamlLoginEnabled"
-			/>
-			<div :class="$style.badgeContainer">
-				<N8nBadge v-if="user.isOwner" theme="tertiary" bold>
-					{{ t('nds.auth.roles.owner') }}
-				</N8nBadge>
-				<slot v-if="!user.isOwner && !readonly" name="actions" :user="user" />
-				<N8nActionToggle
-					v-if="
-						!user.isOwner &&
-						user.signInType !== 'ldap' &&
-						!readonly &&
-						getActions(user).length > 0 &&
-						actions.length > 0
-					"
-					placement="bottom"
-					:actions="getActions(user)"
-					theme="dark"
-					@action="(action: string) => onUserAction(user, action)"
-				/>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed } from 'vue';
 import N8nActionToggle from '../N8nActionToggle';
@@ -115,6 +79,42 @@ const onUserAction = (user: IUser, action: string) =>
 	});
 </script>
 
+<template>
+	<div>
+		<div
+			v-for="(user, i) in sortedUsers"
+			:key="user.id"
+			:class="i === sortedUsers.length - 1 ? $style.itemContainer : $style.itemWithBorder"
+			:data-test-id="`user-list-item-${user.email}`"
+		>
+			<N8nUserInfo
+				v-bind="user"
+				:is-current-user="currentUserId === user.id"
+				:is-saml-login-enabled="isSamlLoginEnabled"
+			/>
+			<div :class="$style.badgeContainer">
+				<N8nBadge v-if="user.isOwner" theme="tertiary" bold>
+					{{ t('nds.auth.roles.owner') }}
+				</N8nBadge>
+				<slot v-if="!user.isOwner && !readonly" name="actions" :user="user" />
+				<N8nActionToggle
+					v-if="
+						!user.isOwner &&
+						user.signInType !== 'ldap' &&
+						!readonly &&
+						getActions(user).length > 0 &&
+						actions.length > 0
+					"
+					placement="bottom"
+					:actions="getActions(user)"
+					theme="dark"
+					@action="(action: string) => onUserAction(user, action)"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .itemContainer {
 	display: flex;
diff --git a/packages/design-system/src/styleguide/VariableTable.vue b/packages/design-system/src/styleguide/VariableTable.vue
index f0c8e1feadb9c..39ce861211261 100644
--- a/packages/design-system/src/styleguide/VariableTable.vue
+++ b/packages/design-system/src/styleguide/VariableTable.vue
@@ -1,20 +1,3 @@
-<template>
-	<table :class="$style.table">
-		<tr>
-			<th :class="$style.row">Name</th>
-			<th :class="$style.row">Value</th>
-		</tr>
-		<tr
-			v-for="variable in variables"
-			:key="variable"
-			:style="attr ? { [attr]: `var(${variable})` } : {}"
-		>
-			<td>{{ variable }}</td>
-			<td>{{ values[variable] }}</td>
-		</tr>
-	</table>
-</template>
-
 <script lang="ts" setup>
 import { onMounted, onUnmounted } from 'vue';
 
@@ -64,6 +47,23 @@ onUnmounted(() => {
 });
 </script>
 
+<template>
+	<table :class="$style.table">
+		<tr>
+			<th :class="$style.row">Name</th>
+			<th :class="$style.row">Value</th>
+		</tr>
+		<tr
+			v-for="variable in variables"
+			:key="variable"
+			:style="attr ? { [attr]: `var(${variable})` } : {}"
+		>
+			<td>{{ variable }}</td>
+			<td>{{ values[variable] }}</td>
+		</tr>
+	</table>
+</template>
+
 <style lang="scss" module>
 .table {
 	text-align: center;
diff --git a/packages/design-system/src/styleguide/components/SpacingPreview.vue b/packages/design-system/src/styleguide/components/SpacingPreview.vue
index b8dd68d317986..40c61e5a04ea5 100644
--- a/packages/design-system/src/styleguide/components/SpacingPreview.vue
+++ b/packages/design-system/src/styleguide/components/SpacingPreview.vue
@@ -1,14 +1,3 @@
-<template>
-	<div>
-		<div v-for="size in sizes" :key="size" class="spacing-group">
-			<div class="spacing-example" :class="`${property[0]}${side ? side[0] : ''}-${size}`">
-				<div class="spacing-box" />
-				<div class="label">{{ property[0] }}{{ side ? side[0] : '' }}-{{ size }}</div>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { computed } from 'vue';
 
@@ -42,6 +31,17 @@ const props = withDefaults(defineProps<SpacingPreviewProps>(), {
 const sizes = computed(() => [...SIZES, ...(props.property === 'margin' ? ['auto'] : [])]);
 </script>
 
+<template>
+	<div>
+		<div v-for="size in sizes" :key="size" class="spacing-group">
+			<div class="spacing-example" :class="`${property[0]}${side ? side[0] : ''}-${size}`">
+				<div class="spacing-box" />
+				<div class="label">{{ property[0] }}{{ side ? side[0] : '' }}-{{ size }}</div>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss">
 $box-size: 64px;
 
diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index cc9c1415003eb..320fe5acca14a 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -1,3 +1,54 @@
+<script setup lang="ts">
+import { ref, computed, watch, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import LoadingView from '@/views/LoadingView.vue';
+import BannerStack from '@/components/banners/BannerStack.vue';
+import AskAssistantChat from '@/components/AskAssistant/AskAssistantChat.vue';
+import Modals from '@/components/Modals.vue';
+import Telemetry from '@/components/Telemetry.vue';
+import AskAssistantFloatingButton from '@/components/AskAssistant/AskAssistantFloatingButton.vue';
+import { loadLanguage } from '@/plugins/i18n';
+import { useExternalHooks } from '@/composables/useExternalHooks';
+import { HIRING_BANNER, VIEWS } from '@/constants';
+import { useRootStore } from '@/stores/root.store';
+import { useAssistantStore } from './stores/assistant.store';
+import { useUIStore } from './stores/ui.store';
+import { useUsersStore } from './stores/users.store';
+import { useSettingsStore } from './stores/settings.store';
+import { useHistoryHelper } from '@/composables/useHistoryHelper';
+
+const route = useRoute();
+const rootStore = useRootStore();
+const assistantStore = useAssistantStore();
+const uiStore = useUIStore();
+const usersStore = useUsersStore();
+const settingsStore = useSettingsStore();
+
+// Initialize undo/redo
+useHistoryHelper(route);
+
+const loading = ref(true);
+const defaultLocale = computed(() => rootStore.defaultLocale);
+const isDemoMode = computed(() => route.name === VIEWS.DEMO);
+const showAssistantButton = computed(() => assistantStore.canShowAssistantButtons);
+
+watch(defaultLocale, (newLocale) => {
+	void loadLanguage(newLocale);
+});
+
+const logHiringBanner = () => {
+	if (settingsStore.isHiringBannerEnabled && !isDemoMode.value) {
+		console.log(HIRING_BANNER);
+	}
+};
+
+onMounted(async () => {
+	logHiringBanner();
+	void useExternalHooks().run('app.mount');
+	loading.value = false;
+});
+</script>
+
 <template>
 	<div :class="[$style.app, 'root-container']">
 		<LoadingView v-if="loading" />
@@ -34,101 +85,6 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
-
-import BannerStack from '@/components/banners/BannerStack.vue';
-import Modals from '@/components/Modals.vue';
-import LoadingView from '@/views/LoadingView.vue';
-import Telemetry from '@/components/Telemetry.vue';
-import AskAssistantChat from '@/components/AskAssistant/AskAssistantChat.vue';
-import AskAssistantFloatingButton from '@/components/AskAssistant/AskAssistantFloatingButton.vue';
-import { HIRING_BANNER, VIEWS } from '@/constants';
-
-import { loadLanguage } from '@/plugins/i18n';
-import { useGlobalLinkActions } from '@/composables/useGlobalLinkActions';
-import { useExternalHooks } from '@/composables/useExternalHooks';
-import { useToast } from '@/composables/useToast';
-import { useCloudPlanStore } from '@/stores/cloudPlan.store';
-import { useNodeTypesStore } from '@/stores/nodeTypes.store';
-import { useRootStore } from '@/stores/root.store';
-import { useSettingsStore } from '@/stores/settings.store';
-import { useSourceControlStore } from '@/stores/sourceControl.store';
-import { useTemplatesStore } from '@/stores/templates.store';
-import { useUIStore } from '@/stores/ui.store';
-import { useUsageStore } from '@/stores/usage.store';
-import { useUsersStore } from '@/stores/users.store';
-import { useHistoryHelper } from '@/composables/useHistoryHelper';
-import { useRoute } from 'vue-router';
-import { useAssistantStore } from './stores/assistant.store';
-
-export default defineComponent({
-	name: 'App',
-	components: {
-		BannerStack,
-		LoadingView,
-		Telemetry,
-		Modals,
-		AskAssistantChat,
-		AskAssistantFloatingButton,
-	},
-	setup() {
-		return {
-			...useGlobalLinkActions(),
-			...useHistoryHelper(useRoute()),
-			...useToast(),
-			externalHooks: useExternalHooks(),
-		};
-	},
-	computed: {
-		...mapStores(
-			useAssistantStore,
-			useNodeTypesStore,
-			useRootStore,
-			useSettingsStore,
-			useTemplatesStore,
-			useUIStore,
-			useUsersStore,
-			useSourceControlStore,
-			useCloudPlanStore,
-			useUsageStore,
-		),
-		defaultLocale(): string {
-			return this.rootStore.defaultLocale;
-		},
-		isDemoMode(): boolean {
-			return this.$route.name === VIEWS.DEMO;
-		},
-		showAssistantButton(): boolean {
-			return this.assistantStore.canShowAssistantButtons;
-		},
-	},
-	data() {
-		return {
-			loading: true,
-		};
-	},
-	watch: {
-		defaultLocale(newLocale) {
-			void loadLanguage(newLocale);
-		},
-	},
-	async mounted() {
-		this.logHiringBanner();
-		void useExternalHooks().run('app.mount');
-		this.loading = false;
-	},
-	methods: {
-		logHiringBanner() {
-			if (this.settingsStore.isHiringBannerEnabled && !this.isDemoMode) {
-				console.log(HIRING_BANNER);
-			}
-		},
-	},
-});
-</script>
-
 <style lang="scss" module>
 .app {
 	height: 100vh;
diff --git a/packages/editor-ui/src/__tests__/data/canvas.ts b/packages/editor-ui/src/__tests__/data/canvas.ts
index d14e9cc742e95..d91ac2629bffb 100644
--- a/packages/editor-ui/src/__tests__/data/canvas.ts
+++ b/packages/editor-ui/src/__tests__/data/canvas.ts
@@ -110,19 +110,22 @@ export function createCanvasHandleProvide({
 	label = 'Handle',
 	mode = CanvasConnectionMode.Input,
 	type = NodeConnectionType.Main,
-	connected = false,
+	isConnected = false,
+	isConnecting = false,
 }: {
 	label?: string;
 	mode?: CanvasConnectionMode;
 	type?: NodeConnectionType;
-	connected?: boolean;
+	isConnected?: boolean;
+	isConnecting?: boolean;
 } = {}) {
 	return {
 		[`${CanvasNodeHandleKey}`]: {
 			label: ref(label),
 			mode: ref(mode),
 			type: ref(type),
-			connected: ref(connected),
+			isConnected: ref(isConnected),
+			isConnecting: ref(isConnecting),
 		} satisfies CanvasNodeHandleInjectionData,
 	};
 }
diff --git a/packages/editor-ui/src/components/AboutModal.vue b/packages/editor-ui/src/components/AboutModal.vue
index 8552044e4b30b..83b4c2becd5c1 100644
--- a/packages/editor-ui/src/components/AboutModal.vue
+++ b/packages/editor-ui/src/components/AboutModal.vue
@@ -1,3 +1,46 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+import { createEventBus } from 'n8n-design-system/utils';
+import Modal from './Modal.vue';
+import { ABOUT_MODAL_KEY } from '../constants';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useRootStore } from '@/stores/root.store';
+import { useToast } from '@/composables/useToast';
+import { useClipboard } from '@/composables/useClipboard';
+import { useDebugInfo } from '@/composables/useDebugInfo';
+
+export default defineComponent({
+	name: 'About',
+	components: {
+		Modal,
+	},
+	data() {
+		return {
+			ABOUT_MODAL_KEY,
+			modalBus: createEventBus(),
+		};
+	},
+	computed: {
+		...mapStores(useRootStore, useSettingsStore),
+	},
+	methods: {
+		closeDialog() {
+			this.modalBus.emit('close');
+		},
+		async copyDebugInfoToClipboard() {
+			useToast().showToast({
+				title: this.$locale.baseText('about.debug.toast.title'),
+				message: this.$locale.baseText('about.debug.toast.message'),
+				type: 'info',
+				duration: 5000,
+			});
+			await useClipboard().copy(useDebugInfo().generateDebugInfo());
+		},
+	},
+});
+</script>
+
 <template>
 	<Modal
 		max-width="540px"
@@ -68,49 +111,6 @@
 	</Modal>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
-import { createEventBus } from 'n8n-design-system/utils';
-import Modal from './Modal.vue';
-import { ABOUT_MODAL_KEY } from '../constants';
-import { useSettingsStore } from '@/stores/settings.store';
-import { useRootStore } from '@/stores/root.store';
-import { useToast } from '@/composables/useToast';
-import { useClipboard } from '@/composables/useClipboard';
-import { useDebugInfo } from '@/composables/useDebugInfo';
-
-export default defineComponent({
-	name: 'About',
-	components: {
-		Modal,
-	},
-	data() {
-		return {
-			ABOUT_MODAL_KEY,
-			modalBus: createEventBus(),
-		};
-	},
-	computed: {
-		...mapStores(useRootStore, useSettingsStore),
-	},
-	methods: {
-		closeDialog() {
-			this.modalBus.emit('close');
-		},
-		async copyDebugInfoToClipboard() {
-			useToast().showToast({
-				title: this.$locale.baseText('about.debug.toast.title'),
-				message: this.$locale.baseText('about.debug.toast.message'),
-				type: 'info',
-				duration: 5000,
-			});
-			await useClipboard().copy(useDebugInfo().generateDebugInfo());
-		},
-	},
-});
-</script>
-
 <style module lang="scss">
 .container > * {
 	margin-bottom: var(--spacing-s);
diff --git a/packages/editor-ui/src/components/ActivationModal.vue b/packages/editor-ui/src/components/ActivationModal.vue
index 349bf5d9ddb00..df4892ea71a2d 100644
--- a/packages/editor-ui/src/components/ActivationModal.vue
+++ b/packages/editor-ui/src/components/ActivationModal.vue
@@ -1,39 +1,3 @@
-<template>
-	<Modal
-		:name="WORKFLOW_ACTIVE_MODAL_KEY"
-		:title="$locale.baseText('activationModal.workflowActivated')"
-		width="460px"
-	>
-		<template #content>
-			<div>
-				<n8n-text>{{ triggerContent }}</n8n-text>
-			</div>
-			<div :class="$style.spaced">
-				<n8n-text>
-					<n8n-text :bold="true">
-						{{ $locale.baseText('activationModal.theseExecutionsWillNotShowUp') }}
-					</n8n-text>
-					{{ $locale.baseText('activationModal.butYouCanSeeThem') }}
-					<a @click="showExecutionsList">
-						{{ $locale.baseText('activationModal.executionList') }}
-					</a>
-					{{ $locale.baseText('activationModal.ifYouChooseTo') }}
-					<a @click="showSettings">{{ $locale.baseText('activationModal.saveExecutions') }}</a>
-				</n8n-text>
-			</div>
-		</template>
-
-		<template #footer="{ close }">
-			<div :class="$style.footer">
-				<el-checkbox :model-value="checked" @update:model-value="handleCheckboxChange">{{
-					$locale.baseText('generic.dontShowAgain')
-				}}</el-checkbox>
-				<n8n-button :label="$locale.baseText('activationModal.gotIt')" @click="close" />
-			</div>
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -134,6 +98,42 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Modal
+		:name="WORKFLOW_ACTIVE_MODAL_KEY"
+		:title="$locale.baseText('activationModal.workflowActivated')"
+		width="460px"
+	>
+		<template #content>
+			<div>
+				<n8n-text>{{ triggerContent }}</n8n-text>
+			</div>
+			<div :class="$style.spaced">
+				<n8n-text>
+					<n8n-text :bold="true">
+						{{ $locale.baseText('activationModal.theseExecutionsWillNotShowUp') }}
+					</n8n-text>
+					{{ $locale.baseText('activationModal.butYouCanSeeThem') }}
+					<a @click="showExecutionsList">
+						{{ $locale.baseText('activationModal.executionList') }}
+					</a>
+					{{ $locale.baseText('activationModal.ifYouChooseTo') }}
+					<a @click="showSettings">{{ $locale.baseText('activationModal.saveExecutions') }}</a>
+				</n8n-text>
+			</div>
+		</template>
+
+		<template #footer="{ close }">
+			<div :class="$style.footer">
+				<el-checkbox :model-value="checked" @update:model-value="handleCheckboxChange">{{
+					$locale.baseText('generic.dontShowAgain')
+				}}</el-checkbox>
+				<n8n-button :label="$locale.baseText('activationModal.gotIt')" @click="close" />
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style lang="scss" module>
 .spaced {
 	margin-top: var(--spacing-2xs);
diff --git a/packages/editor-ui/src/components/Badge.vue b/packages/editor-ui/src/components/Badge.vue
index 25ffed271c912..5184286b05bb0 100644
--- a/packages/editor-ui/src/components/Badge.vue
+++ b/packages/editor-ui/src/components/Badge.vue
@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+	props: ['text', 'type'],
+};
+</script>
+
 <template>
 	<el-tag
 		v-if="type === 'danger'"
@@ -18,12 +24,6 @@
 	</el-tag>
 </template>
 
-<script lang="ts">
-export default {
-	props: ['text', 'type'],
-};
-</script>
-
 <style lang="scss" module>
 .badge {
 	font-size: 11px;
diff --git a/packages/editor-ui/src/components/Banner.vue b/packages/editor-ui/src/components/Banner.vue
index 8247feb9dfb09..e418002d4e43f 100644
--- a/packages/editor-ui/src/components/Banner.vue
+++ b/packages/editor-ui/src/components/Banner.vue
@@ -1,40 +1,3 @@
-<template>
-	<el-tag :type="theme" :disable-transitions="true" :class="$style.container">
-		<font-awesome-icon
-			:icon="theme === 'success' ? 'check-circle' : 'exclamation-triangle'"
-			:class="theme === 'success' ? $style.icon : $style.dangerIcon"
-		/>
-		<div :class="$style.banner">
-			<div :class="$style.content">
-				<div>
-					<span :class="theme === 'success' ? $style.message : $style.dangerMessage">
-						{{ message }}&nbsp;
-					</span>
-					<n8n-link v-if="details && !expanded" :bold="true" size="small" @click="expand">
-						<span :class="$style.moreDetails">More details</span>
-					</n8n-link>
-				</div>
-			</div>
-
-			<slot v-if="$slots.button" name="button" />
-			<n8n-button
-				v-else-if="buttonLabel"
-				:label="buttonLoading && buttonLoadingLabel ? buttonLoadingLabel : buttonLabel"
-				:title="buttonTitle"
-				:type="theme"
-				:loading="buttonLoading"
-				size="small"
-				outline
-				@click.stop="onClick"
-			/>
-		</div>
-
-		<div v-if="expanded" :class="$style.details">
-			{{ details }}
-		</div>
-	</el-tag>
-</template>
-
 <script setup lang="ts">
 import { ref } from 'vue';
 
@@ -72,6 +35,43 @@ const onClick = () => {
 };
 </script>
 
+<template>
+	<el-tag :type="theme" :disable-transitions="true" :class="$style.container">
+		<font-awesome-icon
+			:icon="theme === 'success' ? 'check-circle' : 'exclamation-triangle'"
+			:class="theme === 'success' ? $style.icon : $style.dangerIcon"
+		/>
+		<div :class="$style.banner">
+			<div :class="$style.content">
+				<div>
+					<span :class="theme === 'success' ? $style.message : $style.dangerMessage">
+						{{ message }}&nbsp;
+					</span>
+					<n8n-link v-if="details && !expanded" :bold="true" size="small" @click="expand">
+						<span :class="$style.moreDetails">More details</span>
+					</n8n-link>
+				</div>
+			</div>
+
+			<slot v-if="$slots.button" name="button" />
+			<n8n-button
+				v-else-if="buttonLabel"
+				:label="buttonLoading && buttonLoadingLabel ? buttonLoadingLabel : buttonLabel"
+				:title="buttonTitle"
+				:type="theme"
+				:loading="buttonLoading"
+				size="small"
+				outline
+				@click.stop="onClick"
+			/>
+		</div>
+
+		<div v-if="expanded" :class="$style.details">
+			{{ details }}
+		</div>
+	</el-tag>
+</template>
+
 <style module lang="scss">
 .icon {
 	position: absolute;
diff --git a/packages/editor-ui/src/components/BinaryDataDisplay.vue b/packages/editor-ui/src/components/BinaryDataDisplay.vue
index 4f41d15a39fc8..9b7eb62e62054 100644
--- a/packages/editor-ui/src/components/BinaryDataDisplay.vue
+++ b/packages/editor-ui/src/components/BinaryDataDisplay.vue
@@ -1,23 +1,3 @@
-<template>
-	<div v-if="windowVisible" :class="['binary-data-window', binaryData?.fileType]">
-		<n8n-button
-			size="small"
-			class="binary-data-window-back"
-			:title="$locale.baseText('binaryDataDisplay.backToOverviewPage')"
-			icon="arrow-left"
-			:label="$locale.baseText('binaryDataDisplay.backToList')"
-			@click.stop="closeWindow"
-		/>
-
-		<div class="binary-data-window-wrapper">
-			<div v-if="!binaryData">
-				{{ $locale.baseText('binaryDataDisplay.noDataFoundToDisplay') }}
-			</div>
-			<BinaryDataDisplayEmbed v-else :binary-data="binaryData" />
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { IBinaryData, IRunData } from 'n8n-workflow';
@@ -89,6 +69,26 @@ function closeWindow() {
 }
 </script>
 
+<template>
+	<div v-if="windowVisible" :class="['binary-data-window', binaryData?.fileType]">
+		<n8n-button
+			size="small"
+			class="binary-data-window-back"
+			:title="$locale.baseText('binaryDataDisplay.backToOverviewPage')"
+			icon="arrow-left"
+			:label="$locale.baseText('binaryDataDisplay.backToList')"
+			@click.stop="closeWindow"
+		/>
+
+		<div class="binary-data-window-wrapper">
+			<div v-if="!binaryData">
+				{{ $locale.baseText('binaryDataDisplay.noDataFoundToDisplay') }}
+			</div>
+			<BinaryDataDisplayEmbed v-else :binary-data="binaryData" />
+		</div>
+	</div>
+</template>
+
 <style lang="scss">
 .binary-data-window {
 	position: absolute;
diff --git a/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue b/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
index c95393c3da735..fe822821e22f2 100644
--- a/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
+++ b/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
@@ -1,28 +1,3 @@
-<template>
-	<span>
-		<div v-if="isLoading">Loading binary data...</div>
-		<div v-else-if="error">Error loading binary data</div>
-		<span v-else>
-			<video v-if="binaryData.fileType === 'video'" controls autoplay>
-				<source :src="embedSource" :type="binaryData.mimeType" />
-				{{ $locale.baseText('binaryDataDisplay.yourBrowserDoesNotSupport') }}
-			</video>
-			<audio v-else-if="binaryData.fileType === 'audio'" controls autoplay>
-				<source :src="embedSource" :type="binaryData.mimeType" />
-				{{ $locale.baseText('binaryDataDisplay.yourBrowserDoesNotSupport') }}
-			</audio>
-			<VueJsonPretty
-				v-else-if="binaryData.fileType === 'json'"
-				:data="data"
-				:deep="3"
-				:show-length="true"
-			/>
-			<RunDataHtml v-else-if="binaryData.fileType === 'html'" :input-html="data" />
-			<embed v-else :src="embedSource" class="binary-data" :class="embedClass" />
-		</span>
-	</span>
-</template>
-
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue';
 import { useWorkflowsStore } from '@/stores/workflows.store';
@@ -75,6 +50,31 @@ onMounted(async () => {
 });
 </script>
 
+<template>
+	<span>
+		<div v-if="isLoading">Loading binary data...</div>
+		<div v-else-if="error">Error loading binary data</div>
+		<span v-else>
+			<video v-if="binaryData.fileType === 'video'" controls autoplay>
+				<source :src="embedSource" :type="binaryData.mimeType" />
+				{{ $locale.baseText('binaryDataDisplay.yourBrowserDoesNotSupport') }}
+			</video>
+			<audio v-else-if="binaryData.fileType === 'audio'" controls autoplay>
+				<source :src="embedSource" :type="binaryData.mimeType" />
+				{{ $locale.baseText('binaryDataDisplay.yourBrowserDoesNotSupport') }}
+			</audio>
+			<VueJsonPretty
+				v-else-if="binaryData.fileType === 'json'"
+				:data="data"
+				:deep="3"
+				:show-length="true"
+			/>
+			<RunDataHtml v-else-if="binaryData.fileType === 'html'" :input-html="data" />
+			<embed v-else :src="embedSource" class="binary-data" :class="embedClass" />
+		</span>
+	</span>
+</template>
+
 <style lang="scss">
 .binary-data {
 	background-color: var(--color-foreground-xlight);
diff --git a/packages/editor-ui/src/components/BreakpointsObserver.vue b/packages/editor-ui/src/components/BreakpointsObserver.vue
index 8b1435a343b1d..e89281cd57300 100644
--- a/packages/editor-ui/src/components/BreakpointsObserver.vue
+++ b/packages/editor-ui/src/components/BreakpointsObserver.vue
@@ -1,9 +1,3 @@
-<template>
-	<span>
-		<slot :bp="bp" :value="value" />
-	</span>
-</template>
-
 <script setup lang="ts">
 import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import { BREAKPOINT_SM, BREAKPOINT_MD, BREAKPOINT_LG, BREAKPOINT_XL } from '@/constants';
@@ -90,3 +84,9 @@ onBeforeUnmount(() => {
 	window.removeEventListener('resize', onResize);
 });
 </script>
+
+<template>
+	<span>
+		<slot :bp="bp" :value="value" />
+	</span>
+</template>
diff --git a/packages/editor-ui/src/components/CanvasControls.vue b/packages/editor-ui/src/components/CanvasControls.vue
index 495a1ac8ed8d8..881ae623f50b4 100644
--- a/packages/editor-ui/src/components/CanvasControls.vue
+++ b/packages/editor-ui/src/components/CanvasControls.vue
@@ -1,3 +1,37 @@
+<script lang="ts" setup>
+import { onBeforeMount, onBeforeUnmount } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useCanvasStore } from '@/stores/canvas.store';
+import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue';
+import { useDeviceSupport } from 'n8n-design-system';
+
+const canvasStore = useCanvasStore();
+const { zoomToFit, zoomIn, zoomOut, resetZoom } = canvasStore;
+const { nodeViewScale, isDemo } = storeToRefs(canvasStore);
+const deviceSupport = useDeviceSupport();
+
+const keyDown = (e: KeyboardEvent) => {
+	const isCtrlKeyPressed = deviceSupport.isCtrlKeyPressed(e);
+	if ((e.key === '=' || e.key === '+') && !isCtrlKeyPressed) {
+		zoomIn();
+	} else if ((e.key === '_' || e.key === '-') && !isCtrlKeyPressed) {
+		zoomOut();
+	} else if (e.key === '0' && !isCtrlKeyPressed) {
+		resetZoom();
+	} else if (e.key === '1' && !isCtrlKeyPressed) {
+		zoomToFit();
+	}
+};
+
+onBeforeMount(() => {
+	document.addEventListener('keydown', keyDown);
+});
+
+onBeforeUnmount(() => {
+	document.removeEventListener('keydown', keyDown);
+});
+</script>
+
 <template>
 	<div
 		:class="{
@@ -57,39 +91,6 @@
 		</KeyboardShortcutTooltip>
 	</div>
 </template>
-<script lang="ts" setup>
-import { onBeforeMount, onBeforeUnmount } from 'vue';
-import { storeToRefs } from 'pinia';
-import { useCanvasStore } from '@/stores/canvas.store';
-import KeyboardShortcutTooltip from '@/components/KeyboardShortcutTooltip.vue';
-import { useDeviceSupport } from 'n8n-design-system';
-
-const canvasStore = useCanvasStore();
-const { zoomToFit, zoomIn, zoomOut, resetZoom } = canvasStore;
-const { nodeViewScale, isDemo } = storeToRefs(canvasStore);
-const deviceSupport = useDeviceSupport();
-
-const keyDown = (e: KeyboardEvent) => {
-	const isCtrlKeyPressed = deviceSupport.isCtrlKeyPressed(e);
-	if ((e.key === '=' || e.key === '+') && !isCtrlKeyPressed) {
-		zoomIn();
-	} else if ((e.key === '_' || e.key === '-') && !isCtrlKeyPressed) {
-		zoomOut();
-	} else if (e.key === '0' && !isCtrlKeyPressed) {
-		resetZoom();
-	} else if (e.key === '1' && !isCtrlKeyPressed) {
-		zoomToFit();
-	}
-};
-
-onBeforeMount(() => {
-	document.addEventListener('keydown', keyDown);
-});
-
-onBeforeUnmount(() => {
-	document.removeEventListener('keydown', keyDown);
-});
-</script>
 
 <style lang="scss" module>
 .zoomMenu {
diff --git a/packages/editor-ui/src/components/ChangePasswordModal.vue b/packages/editor-ui/src/components/ChangePasswordModal.vue
index dc6ace63edcb6..efd2901d8bc14 100644
--- a/packages/editor-ui/src/components/ChangePasswordModal.vue
+++ b/packages/editor-ui/src/components/ChangePasswordModal.vue
@@ -1,33 +1,3 @@
-<template>
-	<Modal
-		:name="CHANGE_PASSWORD_MODAL_KEY"
-		:title="i18n.baseText('auth.changePassword')"
-		:center="true"
-		width="460px"
-		:event-bus="modalBus"
-		@enter="onSubmit"
-	>
-		<template #content>
-			<n8n-form-inputs
-				:inputs="config"
-				:event-bus="formBus"
-				:column-view="true"
-				@update="onInput"
-				@submit="onSubmit"
-			/>
-		</template>
-		<template #footer>
-			<n8n-button
-				:loading="loading"
-				:label="i18n.baseText('auth.changePassword')"
-				float="right"
-				data-test-id="change-password-button"
-				@click="onSubmitClick"
-			/>
-		</template>
-	</Modal>
-</template>
-
 <script setup lang="ts">
 import { ref, onMounted } from 'vue';
 import { useToast } from '@/composables/useToast';
@@ -160,3 +130,33 @@ onMounted(() => {
 	config.value = form;
 });
 </script>
+
+<template>
+	<Modal
+		:name="CHANGE_PASSWORD_MODAL_KEY"
+		:title="i18n.baseText('auth.changePassword')"
+		:center="true"
+		width="460px"
+		:event-bus="modalBus"
+		@enter="onSubmit"
+	>
+		<template #content>
+			<n8n-form-inputs
+				:inputs="config"
+				:event-bus="formBus"
+				:column-view="true"
+				@update="onInput"
+				@submit="onSubmit"
+			/>
+		</template>
+		<template #footer>
+			<n8n-button
+				:loading="loading"
+				:label="i18n.baseText('auth.changePassword')"
+				float="right"
+				data-test-id="change-password-button"
+				@click="onSubmitClick"
+			/>
+		</template>
+	</Modal>
+</template>
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
index 1e19e4400f864..6633bcacb59a2 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
+++ b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
@@ -1,51 +1,3 @@
-<template>
-	<div
-		ref="codeNodeEditorContainerRef"
-		:class="['code-node-editor', $style['code-node-editor-container'], language]"
-		@mouseover="onMouseOver"
-		@mouseout="onMouseOut"
-	>
-		<el-tabs
-			v-if="aiEnabled"
-			ref="tabs"
-			v-model="activeTab"
-			type="card"
-			:before-leave="onBeforeTabLeave"
-		>
-			<el-tab-pane
-				:label="$locale.baseText('codeNodeEditor.tabs.code')"
-				name="code"
-				data-test-id="code-node-tab-code"
-			>
-				<div
-					ref="codeNodeEditorRef"
-					:class="['ph-no-capture', 'code-editor-tabs', $style.editorInput]"
-				/>
-				<slot name="suffix" />
-			</el-tab-pane>
-			<el-tab-pane
-				:label="$locale.baseText('codeNodeEditor.tabs.askAi')"
-				name="ask-ai"
-				data-test-id="code-node-tab-ai"
-			>
-				<!-- Key the AskAI tab to make sure it re-mounts when changing tabs -->
-				<AskAI
-					:key="activeTab"
-					:has-changes="hasChanges"
-					@replace-code="onReplaceCode"
-					@started-loading="onAiLoadStart"
-					@finished-loading="onAiLoadEnd"
-				/>
-			</el-tab-pane>
-		</el-tabs>
-		<!-- If AskAi not enabled, there's no point in rendering tabs -->
-		<div v-else :class="$style.fillHeight">
-			<div ref="codeNodeEditorRef" :class="['ph-no-capture', $style.fillHeight]" />
-			<slot name="suffix" />
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { javascript } from '@codemirror/lang-javascript';
 import { python } from '@codemirror/lang-python';
@@ -411,6 +363,54 @@ function onAiLoadEnd() {
 }
 </script>
 
+<template>
+	<div
+		ref="codeNodeEditorContainerRef"
+		:class="['code-node-editor', $style['code-node-editor-container'], language]"
+		@mouseover="onMouseOver"
+		@mouseout="onMouseOut"
+	>
+		<el-tabs
+			v-if="aiEnabled"
+			ref="tabs"
+			v-model="activeTab"
+			type="card"
+			:before-leave="onBeforeTabLeave"
+		>
+			<el-tab-pane
+				:label="$locale.baseText('codeNodeEditor.tabs.code')"
+				name="code"
+				data-test-id="code-node-tab-code"
+			>
+				<div
+					ref="codeNodeEditorRef"
+					:class="['ph-no-capture', 'code-editor-tabs', $style.editorInput]"
+				/>
+				<slot name="suffix" />
+			</el-tab-pane>
+			<el-tab-pane
+				:label="$locale.baseText('codeNodeEditor.tabs.askAi')"
+				name="ask-ai"
+				data-test-id="code-node-tab-ai"
+			>
+				<!-- Key the AskAI tab to make sure it re-mounts when changing tabs -->
+				<AskAI
+					:key="activeTab"
+					:has-changes="hasChanges"
+					@replace-code="onReplaceCode"
+					@started-loading="onAiLoadStart"
+					@finished-loading="onAiLoadEnd"
+				/>
+			</el-tab-pane>
+		</el-tabs>
+		<!-- If AskAi not enabled, there's no point in rendering tabs -->
+		<div v-else :class="$style.fillHeight">
+			<div ref="codeNodeEditorRef" :class="['ph-no-capture', $style.fillHeight]" />
+			<slot name="suffix" />
+		</div>
+	</div>
+</template>
+
 <style scoped lang="scss">
 :deep(.el-tabs) {
 	.code-editor-tabs .cm-editor {
diff --git a/packages/editor-ui/src/components/CollectionParameter.vue b/packages/editor-ui/src/components/CollectionParameter.vue
index c63de2e750233..57df73e4bd2a2 100644
--- a/packages/editor-ui/src/components/CollectionParameter.vue
+++ b/packages/editor-ui/src/components/CollectionParameter.vue
@@ -1,53 +1,3 @@
-<template>
-	<div class="collection-parameter" @keydown.stop>
-		<div class="collection-parameter-wrapper">
-			<div v-if="getProperties.length === 0" class="no-items-exist">
-				<n8n-text size="small">{{ $locale.baseText('collectionParameter.noProperties') }}</n8n-text>
-			</div>
-
-			<Suspense>
-				<ParameterInputList
-					:parameters="getProperties"
-					:node-values="nodeValues"
-					:path="path"
-					:hide-delete="hideDelete"
-					:indent="true"
-					:is-read-only="isReadOnly"
-					@value-changed="valueChanged"
-				/>
-			</Suspense>
-
-			<div v-if="parameterOptions.length > 0 && !isReadOnly" class="param-options">
-				<n8n-button
-					v-if="(parameter.options ?? []).length === 1"
-					type="tertiary"
-					block
-					:label="getPlaceholderText"
-					@click="optionSelected((parameter.options ?? [])[0].name)"
-				/>
-				<div v-else class="add-option">
-					<n8n-select
-						v-model="selectedOption"
-						:placeholder="getPlaceholderText"
-						size="small"
-						filterable
-						@update:model-value="optionSelected"
-					>
-						<n8n-option
-							v-for="item in parameterOptions"
-							:key="item.name"
-							:label="getParameterOptionLabel(item)"
-							:value="item.name"
-							data-test-id="collection-parameter-option"
-						>
-						</n8n-option>
-					</n8n-select>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
 import type { IUpdateInformation } from '@/Interface';
@@ -210,6 +160,56 @@ function valueChanged(parameterData: IUpdateInformation) {
 }
 </script>
 
+<template>
+	<div class="collection-parameter" @keydown.stop>
+		<div class="collection-parameter-wrapper">
+			<div v-if="getProperties.length === 0" class="no-items-exist">
+				<n8n-text size="small">{{ $locale.baseText('collectionParameter.noProperties') }}</n8n-text>
+			</div>
+
+			<Suspense>
+				<ParameterInputList
+					:parameters="getProperties"
+					:node-values="nodeValues"
+					:path="path"
+					:hide-delete="hideDelete"
+					:indent="true"
+					:is-read-only="isReadOnly"
+					@value-changed="valueChanged"
+				/>
+			</Suspense>
+
+			<div v-if="parameterOptions.length > 0 && !isReadOnly" class="param-options">
+				<n8n-button
+					v-if="(parameter.options ?? []).length === 1"
+					type="tertiary"
+					block
+					:label="getPlaceholderText"
+					@click="optionSelected((parameter.options ?? [])[0].name)"
+				/>
+				<div v-else class="add-option">
+					<n8n-select
+						v-model="selectedOption"
+						:placeholder="getPlaceholderText"
+						size="small"
+						filterable
+						@update:model-value="optionSelected"
+					>
+						<n8n-option
+							v-for="item in parameterOptions"
+							:key="item.name"
+							:label="getParameterOptionLabel(item)"
+							:value="item.name"
+							data-test-id="collection-parameter-option"
+						>
+						</n8n-option>
+					</n8n-select>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss">
 .collection-parameter {
 	padding-left: var(--spacing-s);
diff --git a/packages/editor-ui/src/components/CollectionWorkflowCard.vue b/packages/editor-ui/src/components/CollectionWorkflowCard.vue
index 2a4ddafe0726e..e810d1e26cbef 100644
--- a/packages/editor-ui/src/components/CollectionWorkflowCard.vue
+++ b/packages/editor-ui/src/components/CollectionWorkflowCard.vue
@@ -1,3 +1,10 @@
+<script lang="ts" setup>
+defineProps<{
+	loading: boolean;
+	title?: string;
+}>();
+</script>
+
 <template>
 	<n8n-card :class="$style.card" v-bind="$attrs">
 		<template v-if="!loading && title" #header>
@@ -10,13 +17,6 @@
 	</n8n-card>
 </template>
 
-<script lang="ts" setup>
-defineProps<{
-	loading: boolean;
-	title?: string;
-}>();
-</script>
-
 <style lang="scss" module>
 .card {
 	min-width: 235px;
diff --git a/packages/editor-ui/src/components/CommunityPackageCard.vue b/packages/editor-ui/src/components/CommunityPackageCard.vue
index 7beae2c16d384..80618315dc5c7 100644
--- a/packages/editor-ui/src/components/CommunityPackageCard.vue
+++ b/packages/editor-ui/src/components/CommunityPackageCard.vue
@@ -1,66 +1,3 @@
-<template>
-	<div :class="$style.cardContainer" data-test-id="community-package-card">
-		<div v-if="loading" :class="$style.cardSkeleton">
-			<n8n-loading :class="$style.loader" variant="p" :rows="1" />
-			<n8n-loading :class="$style.loader" variant="p" :rows="1" />
-		</div>
-		<div v-else-if="communityPackage" :class="$style.packageCard">
-			<div :class="$style.cardInfoContainer">
-				<div :class="$style.cardTitle">
-					<n8n-text :bold="true" size="large">{{ communityPackage.packageName }}</n8n-text>
-				</div>
-				<div :class="$style.cardSubtitle">
-					<n8n-text :bold="true" size="small" color="text-light">
-						{{
-							$locale.baseText('settings.communityNodes.packageNodes.label', {
-								adjustToNumber: communityPackage.installedNodes.length,
-							})
-						}}:&nbsp;
-					</n8n-text>
-					<n8n-text size="small" color="text-light">
-						<span v-for="(node, index) in communityPackage.installedNodes" :key="node.name">
-							{{ node.name
-							}}<span v-if="index != communityPackage.installedNodes.length - 1">,</span>
-						</span>
-					</n8n-text>
-				</div>
-			</div>
-			<div :class="$style.cardControlsContainer">
-				<n8n-text :bold="true" size="large" color="text-light">
-					v{{ communityPackage.installedVersion }}
-				</n8n-text>
-				<n8n-tooltip v-if="communityPackage.failedLoading === true" placement="top">
-					<template #content>
-						<div>
-							{{ $locale.baseText('settings.communityNodes.failedToLoad.tooltip') }}
-						</div>
-					</template>
-					<n8n-icon icon="exclamation-triangle" color="danger" size="large" />
-				</n8n-tooltip>
-				<n8n-tooltip v-else-if="communityPackage.updateAvailable" placement="top">
-					<template #content>
-						<div>
-							{{ $locale.baseText('settings.communityNodes.updateAvailable.tooltip') }}
-						</div>
-					</template>
-					<n8n-button outline label="Update" @click="onUpdateClick" />
-				</n8n-tooltip>
-				<n8n-tooltip v-else placement="top">
-					<template #content>
-						<div>
-							{{ $locale.baseText('settings.communityNodes.upToDate.tooltip') }}
-						</div>
-					</template>
-					<n8n-icon icon="check-circle" color="text-light" size="large" />
-				</n8n-tooltip>
-				<div :class="$style.cardActions">
-					<n8n-action-toggle :actions="packageActions" @action="onAction"></n8n-action-toggle>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { useUIStore } from '@/stores/ui.store';
 import type { PublicInstalledPackage } from 'n8n-workflow';
@@ -125,6 +62,69 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.cardContainer" data-test-id="community-package-card">
+		<div v-if="loading" :class="$style.cardSkeleton">
+			<n8n-loading :class="$style.loader" variant="p" :rows="1" />
+			<n8n-loading :class="$style.loader" variant="p" :rows="1" />
+		</div>
+		<div v-else-if="communityPackage" :class="$style.packageCard">
+			<div :class="$style.cardInfoContainer">
+				<div :class="$style.cardTitle">
+					<n8n-text :bold="true" size="large">{{ communityPackage.packageName }}</n8n-text>
+				</div>
+				<div :class="$style.cardSubtitle">
+					<n8n-text :bold="true" size="small" color="text-light">
+						{{
+							$locale.baseText('settings.communityNodes.packageNodes.label', {
+								adjustToNumber: communityPackage.installedNodes.length,
+							})
+						}}:&nbsp;
+					</n8n-text>
+					<n8n-text size="small" color="text-light">
+						<span v-for="(node, index) in communityPackage.installedNodes" :key="node.name">
+							{{ node.name
+							}}<span v-if="index != communityPackage.installedNodes.length - 1">,</span>
+						</span>
+					</n8n-text>
+				</div>
+			</div>
+			<div :class="$style.cardControlsContainer">
+				<n8n-text :bold="true" size="large" color="text-light">
+					v{{ communityPackage.installedVersion }}
+				</n8n-text>
+				<n8n-tooltip v-if="communityPackage.failedLoading === true" placement="top">
+					<template #content>
+						<div>
+							{{ $locale.baseText('settings.communityNodes.failedToLoad.tooltip') }}
+						</div>
+					</template>
+					<n8n-icon icon="exclamation-triangle" color="danger" size="large" />
+				</n8n-tooltip>
+				<n8n-tooltip v-else-if="communityPackage.updateAvailable" placement="top">
+					<template #content>
+						<div>
+							{{ $locale.baseText('settings.communityNodes.updateAvailable.tooltip') }}
+						</div>
+					</template>
+					<n8n-button outline label="Update" @click="onUpdateClick" />
+				</n8n-tooltip>
+				<n8n-tooltip v-else placement="top">
+					<template #content>
+						<div>
+							{{ $locale.baseText('settings.communityNodes.upToDate.tooltip') }}
+						</div>
+					</template>
+					<n8n-icon icon="check-circle" color="text-light" size="large" />
+				</n8n-tooltip>
+				<div :class="$style.cardActions">
+					<n8n-action-toggle :actions="packageActions" @action="onAction"></n8n-action-toggle>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .cardContainer {
 	display: flex;
diff --git a/packages/editor-ui/src/components/CommunityPackageInstallModal.vue b/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
index e7f089ae3cfa1..60e8b7a0aab3b 100644
--- a/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
+++ b/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
@@ -1,95 +1,3 @@
-<template>
-	<Modal
-		width="540px"
-		:name="COMMUNITY_PACKAGE_INSTALL_MODAL_KEY"
-		:title="$locale.baseText('settings.communityNodes.installModal.title')"
-		:event-bus="modalBus"
-		:center="true"
-		:before-close="onModalClose"
-		:show-close="!loading"
-	>
-		<template #content>
-			<div :class="[$style.descriptionContainer, 'p-s']">
-				<div>
-					<n8n-text>
-						{{ $locale.baseText('settings.communityNodes.installModal.description') }}
-					</n8n-text>
-					{{ ' ' }}
-					<n8n-link :to="COMMUNITY_NODES_INSTALLATION_DOCS_URL" @click="onMoreInfoTopClick">
-						{{ $locale.baseText('generic.moreInfo') }}
-					</n8n-link>
-				</div>
-				<n8n-button
-					:label="$locale.baseText('settings.communityNodes.browseButton.label')"
-					icon="external-link-alt"
-					:class="$style.browseButton"
-					@click="openNPMPage"
-				/>
-			</div>
-			<div :class="[$style.formContainer, 'mt-m']">
-				<n8n-input-label
-					:class="$style.labelTooltip"
-					:label="$locale.baseText('settings.communityNodes.installModal.packageName.label')"
-					:tooltip-text="
-						$locale.baseText('settings.communityNodes.installModal.packageName.tooltip', {
-							interpolate: { npmURL: NPM_KEYWORD_SEARCH_URL },
-						})
-					"
-				>
-					<n8n-input
-						v-model="packageName"
-						name="packageNameInput"
-						type="text"
-						:maxlength="214"
-						:placeholder="
-							$locale.baseText('settings.communityNodes.installModal.packageName.placeholder')
-						"
-						:required="true"
-						:disabled="loading"
-						@blur="onInputBlur"
-					/>
-				</n8n-input-label>
-				<div :class="[$style.infoText, 'mt-4xs']">
-					<span
-						size="small"
-						:class="[$style.infoText, infoTextErrorMessage ? $style.error : '']"
-						v-text="infoTextErrorMessage"
-					></span>
-				</div>
-				<el-checkbox
-					v-model="userAgreed"
-					:class="[$style.checkbox, checkboxWarning ? $style.error : '', 'mt-l']"
-					:disabled="loading"
-					data-test-id="user-agreement-checkbox"
-					@update:model-value="onCheckboxChecked"
-				>
-					<n8n-text>
-						{{ $locale.baseText('settings.communityNodes.installModal.checkbox.label') }} </n8n-text
-					><br />
-					<n8n-link :to="COMMUNITY_NODES_RISKS_DOCS_URL" @click="onLearnMoreLinkClick">{{
-						$locale.baseText('generic.moreInfo')
-					}}</n8n-link>
-				</el-checkbox>
-			</div>
-		</template>
-		<template #footer>
-			<n8n-button
-				:loading="loading"
-				:disabled="!userAgreed || packageName === '' || loading"
-				:label="
-					loading
-						? $locale.baseText('settings.communityNodes.installModal.installButton.label.loading')
-						: $locale.baseText('settings.communityNodes.installModal.installButton.label')
-				"
-				size="large"
-				float="right"
-				data-test-id="install-community-package-button"
-				@click="onInstallClick"
-			/>
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -189,6 +97,98 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Modal
+		width="540px"
+		:name="COMMUNITY_PACKAGE_INSTALL_MODAL_KEY"
+		:title="$locale.baseText('settings.communityNodes.installModal.title')"
+		:event-bus="modalBus"
+		:center="true"
+		:before-close="onModalClose"
+		:show-close="!loading"
+	>
+		<template #content>
+			<div :class="[$style.descriptionContainer, 'p-s']">
+				<div>
+					<n8n-text>
+						{{ $locale.baseText('settings.communityNodes.installModal.description') }}
+					</n8n-text>
+					{{ ' ' }}
+					<n8n-link :to="COMMUNITY_NODES_INSTALLATION_DOCS_URL" @click="onMoreInfoTopClick">
+						{{ $locale.baseText('generic.moreInfo') }}
+					</n8n-link>
+				</div>
+				<n8n-button
+					:label="$locale.baseText('settings.communityNodes.browseButton.label')"
+					icon="external-link-alt"
+					:class="$style.browseButton"
+					@click="openNPMPage"
+				/>
+			</div>
+			<div :class="[$style.formContainer, 'mt-m']">
+				<n8n-input-label
+					:class="$style.labelTooltip"
+					:label="$locale.baseText('settings.communityNodes.installModal.packageName.label')"
+					:tooltip-text="
+						$locale.baseText('settings.communityNodes.installModal.packageName.tooltip', {
+							interpolate: { npmURL: NPM_KEYWORD_SEARCH_URL },
+						})
+					"
+				>
+					<n8n-input
+						v-model="packageName"
+						name="packageNameInput"
+						type="text"
+						:maxlength="214"
+						:placeholder="
+							$locale.baseText('settings.communityNodes.installModal.packageName.placeholder')
+						"
+						:required="true"
+						:disabled="loading"
+						@blur="onInputBlur"
+					/>
+				</n8n-input-label>
+				<div :class="[$style.infoText, 'mt-4xs']">
+					<span
+						size="small"
+						:class="[$style.infoText, infoTextErrorMessage ? $style.error : '']"
+						v-text="infoTextErrorMessage"
+					></span>
+				</div>
+				<el-checkbox
+					v-model="userAgreed"
+					:class="[$style.checkbox, checkboxWarning ? $style.error : '', 'mt-l']"
+					:disabled="loading"
+					data-test-id="user-agreement-checkbox"
+					@update:model-value="onCheckboxChecked"
+				>
+					<n8n-text>
+						{{ $locale.baseText('settings.communityNodes.installModal.checkbox.label') }} </n8n-text
+					><br />
+					<n8n-link :to="COMMUNITY_NODES_RISKS_DOCS_URL" @click="onLearnMoreLinkClick">{{
+						$locale.baseText('generic.moreInfo')
+					}}</n8n-link>
+				</el-checkbox>
+			</div>
+		</template>
+		<template #footer>
+			<n8n-button
+				:loading="loading"
+				:disabled="!userAgreed || packageName === '' || loading"
+				:label="
+					loading
+						? $locale.baseText('settings.communityNodes.installModal.installButton.label.loading')
+						: $locale.baseText('settings.communityNodes.installModal.installButton.label')
+				"
+				size="large"
+				float="right"
+				data-test-id="install-community-package-button"
+				@click="onInstallClick"
+			/>
+		</template>
+	</Modal>
+</template>
+
 <style module lang="scss">
 .descriptionContainer {
 	display: flex;
diff --git a/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue b/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
index cd13888bbb972..6f07866287142 100644
--- a/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
+++ b/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
@@ -1,37 +1,3 @@
-<template>
-	<Modal
-		width="540px"
-		:name="COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY"
-		:title="getModalContent.title"
-		:event-bus="modalBus"
-		:center="true"
-		:show-close="!loading"
-		:before-close="onModalClose"
-	>
-		<template #content>
-			<n8n-text>{{ getModalContent.message }}</n8n-text>
-			<div
-				v-if="mode === COMMUNITY_PACKAGE_MANAGE_ACTIONS.UPDATE"
-				:class="$style.descriptionContainer"
-			>
-				<n8n-info-tip theme="info" type="note" :bold="false">
-					<span v-text="getModalContent.description"></span>
-				</n8n-info-tip>
-			</div>
-		</template>
-		<template #footer>
-			<n8n-button
-				:loading="loading"
-				:disabled="loading"
-				:label="loading ? getModalContent.buttonLoadingLabel : getModalContent.buttonLabel"
-				size="large"
-				float="right"
-				@click="onConfirmButtonClick"
-			/>
-		</template>
-	</Modal>
-</template>
-
 <script>
 import { defineComponent } from 'vue';
 import Modal from '@/components/Modal.vue';
@@ -194,6 +160,40 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Modal
+		width="540px"
+		:name="COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY"
+		:title="getModalContent.title"
+		:event-bus="modalBus"
+		:center="true"
+		:show-close="!loading"
+		:before-close="onModalClose"
+	>
+		<template #content>
+			<n8n-text>{{ getModalContent.message }}</n8n-text>
+			<div
+				v-if="mode === COMMUNITY_PACKAGE_MANAGE_ACTIONS.UPDATE"
+				:class="$style.descriptionContainer"
+			>
+				<n8n-info-tip theme="info" type="note" :bold="false">
+					<span v-text="getModalContent.description"></span>
+				</n8n-info-tip>
+			</div>
+		</template>
+		<template #footer>
+			<n8n-button
+				:loading="loading"
+				:disabled="loading"
+				:label="loading ? getModalContent.buttonLoadingLabel : getModalContent.buttonLabel"
+				size="large"
+				float="right"
+				@click="onConfirmButtonClick"
+			/>
+		</template>
+	</Modal>
+</template>
+
 <style module lang="scss">
 .descriptionContainer {
 	display: flex;
diff --git a/packages/editor-ui/src/components/ContactPromptModal.vue b/packages/editor-ui/src/components/ContactPromptModal.vue
index a0364b43e5b90..d0832340572db 100644
--- a/packages/editor-ui/src/components/ContactPromptModal.vue
+++ b/packages/editor-ui/src/components/ContactPromptModal.vue
@@ -1,37 +1,3 @@
-<template>
-	<Modal
-		:name="modalName"
-		:event-bus="modalBus"
-		:center="true"
-		:close-on-press-escape="false"
-		:before-close="closeDialog"
-		custom-class="contact-prompt-modal"
-		width="460px"
-	>
-		<template #header>
-			<n8n-heading tag="h2" size="xlarge" color="text-dark">{{ title }}</n8n-heading>
-		</template>
-		<template #content>
-			<div :class="$style.description">
-				<n8n-text size="medium" color="text-base">{{ description }}</n8n-text>
-			</div>
-			<div @keyup.enter="send">
-				<n8n-input v-model="email" placeholder="Your email address" />
-			</div>
-			<div :class="$style.disclaimer">
-				<n8n-text size="small" color="text-base"
-					>David from our product team will get in touch personally</n8n-text
-				>
-			</div>
-		</template>
-		<template #footer>
-			<div :class="$style.footer">
-				<n8n-button label="Send" float="right" :disabled="!isEmailValid" @click="send" />
-			</div>
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
@@ -118,6 +84,40 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Modal
+		:name="modalName"
+		:event-bus="modalBus"
+		:center="true"
+		:close-on-press-escape="false"
+		:before-close="closeDialog"
+		custom-class="contact-prompt-modal"
+		width="460px"
+	>
+		<template #header>
+			<n8n-heading tag="h2" size="xlarge" color="text-dark">{{ title }}</n8n-heading>
+		</template>
+		<template #content>
+			<div :class="$style.description">
+				<n8n-text size="medium" color="text-base">{{ description }}</n8n-text>
+			</div>
+			<div @keyup.enter="send">
+				<n8n-input v-model="email" placeholder="Your email address" />
+			</div>
+			<div :class="$style.disclaimer">
+				<n8n-text size="small" color="text-base"
+					>David from our product team will get in touch personally</n8n-text
+				>
+			</div>
+		</template>
+		<template #footer>
+			<div :class="$style.footer">
+				<n8n-button label="Send" float="right" :disabled="!isEmailValid" @click="send" />
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style lang="scss" module>
 .description {
 	margin-bottom: var(--spacing-s);
diff --git a/packages/editor-ui/src/components/CopyInput.vue b/packages/editor-ui/src/components/CopyInput.vue
index 8171885b265b5..fb68984a57afd 100644
--- a/packages/editor-ui/src/components/CopyInput.vue
+++ b/packages/editor-ui/src/components/CopyInput.vue
@@ -1,27 +1,3 @@
-<template>
-	<div>
-		<n8n-input-label :label="label">
-			<div
-				:class="{
-					[$style.copyText]: true,
-					[$style[size]]: true,
-					[$style.collapsed]: collapse,
-					[$style.noHover]: disableCopy,
-					'ph-no-capture': redactValue,
-				}"
-				data-test-id="copy-input"
-				@click="copy"
-			>
-				<span ref="copyInputValue">{{ value }}</span>
-				<div v-if="!disableCopy" :class="$style.copyButton">
-					<span>{{ copyButtonText }}</span>
-				</div>
-			</div>
-		</n8n-input-label>
-		<div v-if="hint" :class="$style.hint">{{ hint }}</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { useClipboard } from '@/composables/useClipboard';
 import { useI18n } from '@/composables/useI18n';
@@ -71,6 +47,30 @@ function copy() {
 }
 </script>
 
+<template>
+	<div>
+		<n8n-input-label :label="label">
+			<div
+				:class="{
+					[$style.copyText]: true,
+					[$style[size]]: true,
+					[$style.collapsed]: collapse,
+					[$style.noHover]: disableCopy,
+					'ph-no-capture': redactValue,
+				}"
+				data-test-id="copy-input"
+				@click="copy"
+			>
+				<span ref="copyInputValue">{{ value }}</span>
+				<div v-if="!disableCopy" :class="$style.copyButton">
+					<span>{{ copyButtonText }}</span>
+				</div>
+			</div>
+		</n8n-input-label>
+		<div v-if="hint" :class="$style.hint">{{ hint }}</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .copyText {
 	span {
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
index ca79b07f836dd..86e8c65e1cfde 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
@@ -1,161 +1,3 @@
-<template>
-	<div>
-		<div :class="$style.config" data-test-id="node-credentials-config-container">
-			<Banner
-				v-show="showValidationWarning"
-				theme="danger"
-				:message="
-					$locale.baseText(
-						`credentialEdit.credentialConfig.pleaseCheckTheErrorsBelow${
-							credentialPermissions.update ? '' : '.sharee'
-						}`,
-						{ interpolate: { owner: credentialOwnerName } },
-					)
-				"
-			/>
-
-			<Banner
-				v-if="authError && !showValidationWarning"
-				theme="danger"
-				:message="
-					$locale.baseText(
-						`credentialEdit.credentialConfig.couldntConnectWithTheseSettings${
-							credentialPermissions.update ? '' : '.sharee'
-						}`,
-						{ interpolate: { owner: credentialOwnerName } },
-					)
-				"
-				:details="authError"
-				:button-label="$locale.baseText('credentialEdit.credentialConfig.retry')"
-				button-loading-label="Retrying"
-				:button-title="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
-				:button-loading="isRetesting"
-				@click="$emit('retest')"
-			/>
-
-			<Banner
-				v-show="showOAuthSuccessBanner && !showValidationWarning"
-				theme="success"
-				:message="$locale.baseText('credentialEdit.credentialConfig.accountConnected')"
-				:button-label="$locale.baseText('credentialEdit.credentialConfig.reconnect')"
-				:button-title="
-					$locale.baseText('credentialEdit.credentialConfig.reconnectOAuth2Credential')
-				"
-				data-test-id="oauth-connect-success-banner"
-				@click="$emit('oauth')"
-			>
-				<template v-if="isGoogleOAuthType" #button>
-					<p
-						:class="$style.googleReconnectLabel"
-						v-text="`${$locale.baseText('credentialEdit.credentialConfig.reconnect')}:`"
-					/>
-					<GoogleAuthButton @click="$emit('oauth')" />
-				</template>
-			</Banner>
-
-			<Banner
-				v-show="testedSuccessfully && !showValidationWarning"
-				theme="success"
-				:message="$locale.baseText('credentialEdit.credentialConfig.connectionTestedSuccessfully')"
-				:button-label="$locale.baseText('credentialEdit.credentialConfig.retry')"
-				:button-loading-label="$locale.baseText('credentialEdit.credentialConfig.retrying')"
-				:button-title="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
-				:button-loading="isRetesting"
-				data-test-id="credentials-config-container-test-success"
-				@click="$emit('retest')"
-			/>
-
-			<template v-if="credentialPermissions.update">
-				<n8n-notice v-if="documentationUrl && credentialProperties.length && !docs" theme="warning">
-					{{ $locale.baseText('credentialEdit.credentialConfig.needHelpFillingOutTheseFields') }}
-					<span class="ml-4xs">
-						<n8n-link :to="documentationUrl" size="small" bold @click="onDocumentationUrlClick">
-							{{ $locale.baseText('credentialEdit.credentialConfig.openDocs') }}
-						</n8n-link>
-					</span>
-				</n8n-notice>
-
-				<AuthTypeSelector
-					v-if="showAuthTypeSelector && isNewCredential"
-					:credential-type="credentialType"
-					@auth-type-changed="onAuthTypeChange"
-				/>
-
-				<CopyInput
-					v-if="isOAuthType && !allOAuth2BasePropertiesOverridden"
-					:label="$locale.baseText('credentialEdit.credentialConfig.oAuthRedirectUrl')"
-					:value="oAuthCallbackUrl"
-					:copy-button-text="$locale.baseText('credentialEdit.credentialConfig.clickToCopy')"
-					:hint="
-						$locale.baseText('credentialEdit.credentialConfig.subtitle', {
-							interpolate: { appName },
-						})
-					"
-					:toast-title="
-						$locale.baseText('credentialEdit.credentialConfig.redirectUrlCopiedToClipboard')
-					"
-					:redact-value="true"
-				/>
-			</template>
-			<EnterpriseEdition v-else :features="[EnterpriseEditionFeature.Sharing]">
-				<div>
-					<n8n-info-tip :bold="false">
-						{{
-							$locale.baseText('credentialEdit.credentialEdit.info.sharee', {
-								interpolate: { credentialOwnerName },
-							})
-						}}
-					</n8n-info-tip>
-				</div>
-			</EnterpriseEdition>
-
-			<CredentialInputs
-				v-if="credentialType && credentialPermissions.update"
-				:credential-data="credentialData"
-				:credential-properties="credentialProperties"
-				:documentation-url="documentationUrl"
-				:show-validation-warnings="showValidationWarning"
-				@update="onDataChange"
-			/>
-
-			<OauthButton
-				v-if="
-					isOAuthType &&
-					requiredPropertiesFilled &&
-					!isOAuthConnected &&
-					credentialPermissions.update
-				"
-				:is-google-o-auth-type="isGoogleOAuthType"
-				data-test-id="oauth-connect-button"
-				@click="$emit('oauth')"
-			/>
-
-			<n8n-text v-if="isMissingCredentials" color="text-base" size="medium">
-				{{ $locale.baseText('credentialEdit.credentialConfig.missingCredentialType') }}
-			</n8n-text>
-
-			<EnterpriseEdition :features="[EnterpriseEditionFeature.ExternalSecrets]">
-				<template #fallback>
-					<n8n-info-tip class="mt-s">
-						{{ $locale.baseText('credentialEdit.credentialConfig.externalSecrets') }}
-						<n8n-link bold :to="$locale.baseText('settings.externalSecrets.docs')" size="small">
-							{{ $locale.baseText('credentialEdit.credentialConfig.externalSecrets.moreInfo') }}
-						</n8n-link>
-					</n8n-info-tip>
-				</template>
-			</EnterpriseEdition>
-		</div>
-		<CredentialDocs
-			v-if="docs"
-			:credential-type="credentialType"
-			:documentation-url="documentationUrl"
-			:docs="docs"
-			:class="$style.docs"
-		>
-		</CredentialDocs>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { computed, onBeforeMount, watch } from 'vue';
 
@@ -345,6 +187,164 @@ watch(showOAuthSuccessBanner, (newValue, oldValue) => {
 });
 </script>
 
+<template>
+	<div>
+		<div :class="$style.config" data-test-id="node-credentials-config-container">
+			<Banner
+				v-show="showValidationWarning"
+				theme="danger"
+				:message="
+					$locale.baseText(
+						`credentialEdit.credentialConfig.pleaseCheckTheErrorsBelow${
+							credentialPermissions.update ? '' : '.sharee'
+						}`,
+						{ interpolate: { owner: credentialOwnerName } },
+					)
+				"
+			/>
+
+			<Banner
+				v-if="authError && !showValidationWarning"
+				theme="danger"
+				:message="
+					$locale.baseText(
+						`credentialEdit.credentialConfig.couldntConnectWithTheseSettings${
+							credentialPermissions.update ? '' : '.sharee'
+						}`,
+						{ interpolate: { owner: credentialOwnerName } },
+					)
+				"
+				:details="authError"
+				:button-label="$locale.baseText('credentialEdit.credentialConfig.retry')"
+				button-loading-label="Retrying"
+				:button-title="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
+				:button-loading="isRetesting"
+				@click="$emit('retest')"
+			/>
+
+			<Banner
+				v-show="showOAuthSuccessBanner && !showValidationWarning"
+				theme="success"
+				:message="$locale.baseText('credentialEdit.credentialConfig.accountConnected')"
+				:button-label="$locale.baseText('credentialEdit.credentialConfig.reconnect')"
+				:button-title="
+					$locale.baseText('credentialEdit.credentialConfig.reconnectOAuth2Credential')
+				"
+				data-test-id="oauth-connect-success-banner"
+				@click="$emit('oauth')"
+			>
+				<template v-if="isGoogleOAuthType" #button>
+					<p
+						:class="$style.googleReconnectLabel"
+						v-text="`${$locale.baseText('credentialEdit.credentialConfig.reconnect')}:`"
+					/>
+					<GoogleAuthButton @click="$emit('oauth')" />
+				</template>
+			</Banner>
+
+			<Banner
+				v-show="testedSuccessfully && !showValidationWarning"
+				theme="success"
+				:message="$locale.baseText('credentialEdit.credentialConfig.connectionTestedSuccessfully')"
+				:button-label="$locale.baseText('credentialEdit.credentialConfig.retry')"
+				:button-loading-label="$locale.baseText('credentialEdit.credentialConfig.retrying')"
+				:button-title="$locale.baseText('credentialEdit.credentialConfig.retryCredentialTest')"
+				:button-loading="isRetesting"
+				data-test-id="credentials-config-container-test-success"
+				@click="$emit('retest')"
+			/>
+
+			<template v-if="credentialPermissions.update">
+				<n8n-notice v-if="documentationUrl && credentialProperties.length && !docs" theme="warning">
+					{{ $locale.baseText('credentialEdit.credentialConfig.needHelpFillingOutTheseFields') }}
+					<span class="ml-4xs">
+						<n8n-link :to="documentationUrl" size="small" bold @click="onDocumentationUrlClick">
+							{{ $locale.baseText('credentialEdit.credentialConfig.openDocs') }}
+						</n8n-link>
+					</span>
+				</n8n-notice>
+
+				<AuthTypeSelector
+					v-if="showAuthTypeSelector && isNewCredential"
+					:credential-type="credentialType"
+					@auth-type-changed="onAuthTypeChange"
+				/>
+
+				<CopyInput
+					v-if="isOAuthType && !allOAuth2BasePropertiesOverridden"
+					:label="$locale.baseText('credentialEdit.credentialConfig.oAuthRedirectUrl')"
+					:value="oAuthCallbackUrl"
+					:copy-button-text="$locale.baseText('credentialEdit.credentialConfig.clickToCopy')"
+					:hint="
+						$locale.baseText('credentialEdit.credentialConfig.subtitle', {
+							interpolate: { appName },
+						})
+					"
+					:toast-title="
+						$locale.baseText('credentialEdit.credentialConfig.redirectUrlCopiedToClipboard')
+					"
+					:redact-value="true"
+				/>
+			</template>
+			<EnterpriseEdition v-else :features="[EnterpriseEditionFeature.Sharing]">
+				<div>
+					<n8n-info-tip :bold="false">
+						{{
+							$locale.baseText('credentialEdit.credentialEdit.info.sharee', {
+								interpolate: { credentialOwnerName },
+							})
+						}}
+					</n8n-info-tip>
+				</div>
+			</EnterpriseEdition>
+
+			<CredentialInputs
+				v-if="credentialType && credentialPermissions.update"
+				:credential-data="credentialData"
+				:credential-properties="credentialProperties"
+				:documentation-url="documentationUrl"
+				:show-validation-warnings="showValidationWarning"
+				@update="onDataChange"
+			/>
+
+			<OauthButton
+				v-if="
+					isOAuthType &&
+					requiredPropertiesFilled &&
+					!isOAuthConnected &&
+					credentialPermissions.update
+				"
+				:is-google-o-auth-type="isGoogleOAuthType"
+				data-test-id="oauth-connect-button"
+				@click="$emit('oauth')"
+			/>
+
+			<n8n-text v-if="isMissingCredentials" color="text-base" size="medium">
+				{{ $locale.baseText('credentialEdit.credentialConfig.missingCredentialType') }}
+			</n8n-text>
+
+			<EnterpriseEdition :features="[EnterpriseEditionFeature.ExternalSecrets]">
+				<template #fallback>
+					<n8n-info-tip class="mt-s">
+						{{ $locale.baseText('credentialEdit.credentialConfig.externalSecrets') }}
+						<n8n-link bold :to="$locale.baseText('settings.externalSecrets.docs')" size="small">
+							{{ $locale.baseText('credentialEdit.credentialConfig.externalSecrets.moreInfo') }}
+						</n8n-link>
+					</n8n-info-tip>
+				</template>
+			</EnterpriseEdition>
+		</div>
+		<CredentialDocs
+			v-if="docs"
+			:credential-type="credentialType"
+			:documentation-url="documentationUrl"
+			:docs="docs"
+			:class="$style.docs"
+		>
+		</CredentialDocs>
+	</div>
+</template>
+
 <style lang="scss" module>
 .config {
 	--notice-margin: 0;
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialDocs.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialDocs.vue
index 18db06c938195..7a468e8e07389 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialDocs.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialDocs.vue
@@ -1,27 +1,3 @@
-<template>
-	<div :class="$style.docs">
-		<div :class="$style.header">
-			<p :class="$style.title">{{ i18n.baseText('credentialEdit.credentialEdit.setupGuide') }}</p>
-			<n8n-link
-				:class="$style.docsLink"
-				theme="text"
-				new-window
-				:to="documentationUrl"
-				@click="onDocumentationUrlClick"
-			>
-				{{ i18n.baseText('credentialEdit.credentialEdit.docs') }}
-				<n8n-icon icon="external-link-alt" size="small" :class="$style.externalIcon" />
-			</n8n-link>
-		</div>
-		<VueMarkdown :source="docs" :options="{ html: true }" :class="$style.markdown" />
-		<Feedback
-			:class="$style.feedback"
-			:model-value="submittedFeedback"
-			@update:model-value="onFeedback"
-		/>
-	</div>
-</template>
-
 <script setup lang="ts">
 import Feedback from '@/components/Feedback.vue';
 import { useI18n } from '@/composables/useI18n';
@@ -66,6 +42,30 @@ function onDocumentationUrlClick(): void {
 }
 </script>
 
+<template>
+	<div :class="$style.docs">
+		<div :class="$style.header">
+			<p :class="$style.title">{{ i18n.baseText('credentialEdit.credentialEdit.setupGuide') }}</p>
+			<n8n-link
+				:class="$style.docsLink"
+				theme="text"
+				new-window
+				:to="documentationUrl"
+				@click="onDocumentationUrlClick"
+			>
+				{{ i18n.baseText('credentialEdit.credentialEdit.docs') }}
+				<n8n-icon icon="external-link-alt" size="small" :class="$style.externalIcon" />
+			</n8n-link>
+		</div>
+		<VueMarkdown :source="docs" :options="{ html: true }" :class="$style.markdown" />
+		<Feedback
+			:class="$style.feedback"
+			:model-value="submittedFeedback"
+			@update:model-value="onFeedback"
+		/>
+	</div>
+</template>
+
 <style lang="scss" module>
 .docs {
 	background-color: var(--color-background-light);
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index e2c7c428e5a36..a6b1d2127ca64 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -1,118 +1,3 @@
-<template>
-	<Modal
-		:name="modalName"
-		:custom-class="$style.credentialModal"
-		:event-bus="modalBus"
-		:loading="loading"
-		:before-close="beforeClose"
-		width="70%"
-		height="80%"
-	>
-		<template #header>
-			<div :class="$style.header">
-				<div :class="$style.credInfo">
-					<div :class="$style.credIcon">
-						<CredentialIcon :credential-type-name="defaultCredentialTypeName" />
-					</div>
-					<InlineNameEdit
-						:model-value="credentialName"
-						:subtitle="credentialType ? credentialType.displayName : ''"
-						:readonly="!credentialPermissions.update || !credentialType"
-						type="Credential"
-						data-test-id="credential-name"
-						@update:model-value="onNameEdit"
-					/>
-				</div>
-				<div :class="$style.credActions">
-					<n8n-icon-button
-						v-if="currentCredential && credentialPermissions.delete"
-						:title="$locale.baseText('credentialEdit.credentialEdit.delete')"
-						icon="trash"
-						type="tertiary"
-						:disabled="isSaving"
-						:loading="isDeleting"
-						data-test-id="credential-delete-button"
-						@click="deleteCredential"
-					/>
-					<SaveButton
-						v-if="showSaveButton"
-						:saved="!hasUnsavedChanges && !isTesting"
-						:is-saving="isSaving || isTesting"
-						:saving-label="
-							isTesting
-								? $locale.baseText('credentialEdit.credentialEdit.testing')
-								: $locale.baseText('credentialEdit.credentialEdit.saving')
-						"
-						data-test-id="credential-save-button"
-						@click="saveCredential"
-					/>
-				</div>
-			</div>
-		</template>
-		<template #content>
-			<div :class="$style.container" data-test-id="credential-edit-dialog">
-				<div :class="$style.sidebar">
-					<n8n-menu
-						mode="tabs"
-						:items="sidebarItems"
-						:transparent-background="true"
-						@select="onTabSelect"
-					></n8n-menu>
-				</div>
-				<div
-					v-if="activeTab === 'connection' && credentialType"
-					ref="contentRef"
-					:class="$style.mainContent"
-				>
-					<CredentialConfig
-						:credential-type="credentialType"
-						:credential-properties="credentialProperties"
-						:credential-data="credentialData"
-						:credential-id="credentialId"
-						:show-validation-warning="showValidationWarning"
-						:auth-error="authError"
-						:tested-successfully="testedSuccessfully"
-						:is-o-auth-type="isOAuthType"
-						:is-o-auth-connected="isOAuthConnected"
-						:is-retesting="isRetesting"
-						:parent-types="parentTypes"
-						:required-properties-filled="requiredPropertiesFilled"
-						:credential-permissions="credentialPermissions"
-						:all-o-auth2-base-properties-overridden="allOAuth2BasePropertiesOverridden"
-						:mode="mode"
-						:selected-credential="selectedCredential"
-						:show-auth-type-selector="requiredCredentials"
-						@update="onDataChange"
-						@oauth="oAuthCredentialAuthorize"
-						@retest="retestCredential"
-						@scroll-to-top="scrollToTop"
-						@auth-type-changed="onAuthTypeChanged"
-					/>
-				</div>
-				<div v-else-if="showSharingContent" :class="$style.mainContent">
-					<CredentialSharing
-						:credential="currentCredential"
-						:credential-data="credentialData"
-						:credential-id="credentialId"
-						:credential-permissions="credentialPermissions"
-						:modal-bus="modalBus"
-						@update:model-value="onChangeSharedWith"
-					/>
-				</div>
-				<div v-else-if="activeTab === 'details' && credentialType" :class="$style.mainContent">
-					<CredentialInfo
-						:current-credential="currentCredential"
-						:credential-permissions="credentialPermissions"
-					/>
-				</div>
-				<div v-else-if="activeTab.startsWith('coming-soon')" :class="$style.mainContent">
-					<FeatureComingSoon :feature-id="activeTab.split('/')[1]"></FeatureComingSoon>
-				</div>
-			</div>
-		</template>
-	</Modal>
-</template>
-
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 
@@ -1143,6 +1028,121 @@ function resetCredentialData(): void {
 }
 </script>
 
+<template>
+	<Modal
+		:name="modalName"
+		:custom-class="$style.credentialModal"
+		:event-bus="modalBus"
+		:loading="loading"
+		:before-close="beforeClose"
+		width="70%"
+		height="80%"
+	>
+		<template #header>
+			<div :class="$style.header">
+				<div :class="$style.credInfo">
+					<div :class="$style.credIcon">
+						<CredentialIcon :credential-type-name="defaultCredentialTypeName" />
+					</div>
+					<InlineNameEdit
+						:model-value="credentialName"
+						:subtitle="credentialType ? credentialType.displayName : ''"
+						:readonly="!credentialPermissions.update || !credentialType"
+						type="Credential"
+						data-test-id="credential-name"
+						@update:model-value="onNameEdit"
+					/>
+				</div>
+				<div :class="$style.credActions">
+					<n8n-icon-button
+						v-if="currentCredential && credentialPermissions.delete"
+						:title="$locale.baseText('credentialEdit.credentialEdit.delete')"
+						icon="trash"
+						type="tertiary"
+						:disabled="isSaving"
+						:loading="isDeleting"
+						data-test-id="credential-delete-button"
+						@click="deleteCredential"
+					/>
+					<SaveButton
+						v-if="showSaveButton"
+						:saved="!hasUnsavedChanges && !isTesting"
+						:is-saving="isSaving || isTesting"
+						:saving-label="
+							isTesting
+								? $locale.baseText('credentialEdit.credentialEdit.testing')
+								: $locale.baseText('credentialEdit.credentialEdit.saving')
+						"
+						data-test-id="credential-save-button"
+						@click="saveCredential"
+					/>
+				</div>
+			</div>
+		</template>
+		<template #content>
+			<div :class="$style.container" data-test-id="credential-edit-dialog">
+				<div :class="$style.sidebar">
+					<n8n-menu
+						mode="tabs"
+						:items="sidebarItems"
+						:transparent-background="true"
+						@select="onTabSelect"
+					></n8n-menu>
+				</div>
+				<div
+					v-if="activeTab === 'connection' && credentialType"
+					ref="contentRef"
+					:class="$style.mainContent"
+				>
+					<CredentialConfig
+						:credential-type="credentialType"
+						:credential-properties="credentialProperties"
+						:credential-data="credentialData"
+						:credential-id="credentialId"
+						:show-validation-warning="showValidationWarning"
+						:auth-error="authError"
+						:tested-successfully="testedSuccessfully"
+						:is-o-auth-type="isOAuthType"
+						:is-o-auth-connected="isOAuthConnected"
+						:is-retesting="isRetesting"
+						:parent-types="parentTypes"
+						:required-properties-filled="requiredPropertiesFilled"
+						:credential-permissions="credentialPermissions"
+						:all-o-auth2-base-properties-overridden="allOAuth2BasePropertiesOverridden"
+						:mode="mode"
+						:selected-credential="selectedCredential"
+						:show-auth-type-selector="requiredCredentials"
+						@update="onDataChange"
+						@oauth="oAuthCredentialAuthorize"
+						@retest="retestCredential"
+						@scroll-to-top="scrollToTop"
+						@auth-type-changed="onAuthTypeChanged"
+					/>
+				</div>
+				<div v-else-if="showSharingContent" :class="$style.mainContent">
+					<CredentialSharing
+						:credential="currentCredential"
+						:credential-data="credentialData"
+						:credential-id="credentialId"
+						:credential-permissions="credentialPermissions"
+						:modal-bus="modalBus"
+						@update:model-value="onChangeSharedWith"
+					/>
+				</div>
+				<div v-else-if="activeTab === 'details' && credentialType" :class="$style.mainContent">
+					<CredentialInfo
+						:current-credential="currentCredential"
+						:credential-permissions="credentialPermissions"
+					/>
+				</div>
+				<div v-else-if="activeTab.startsWith('coming-soon')" :class="$style.mainContent">
+					<FeatureComingSoon :feature-id="activeTab.split('/')[1]"></FeatureComingSoon>
+				</div>
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style module lang="scss">
 .credentialModal {
 	--dialog-max-width: 1200px;
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue
index 9574c2c0e0aef..445bfb8c06522 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialInfo.vue
@@ -1,3 +1,23 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import TimeAgo from '../TimeAgo.vue';
+import type { INodeTypeDescription } from 'n8n-workflow';
+
+export default defineComponent({
+	name: 'CredentialInfo',
+	components: {
+		TimeAgo,
+	},
+	props: ['currentCredential', 'credentialPermissions'],
+	methods: {
+		shortNodeType(nodeType: INodeTypeDescription) {
+			return this.$locale.shortNodeType(nodeType.name);
+		},
+	},
+});
+</script>
+
 <template>
 	<div :class="$style.container">
 		<el-row v-if="currentCredential">
@@ -37,26 +57,6 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import TimeAgo from '../TimeAgo.vue';
-import type { INodeTypeDescription } from 'n8n-workflow';
-
-export default defineComponent({
-	name: 'CredentialInfo',
-	components: {
-		TimeAgo,
-	},
-	props: ['currentCredential', 'credentialPermissions'],
-	methods: {
-		shortNodeType(nodeType: INodeTypeDescription) {
-			return this.$locale.shortNodeType(nodeType.name);
-		},
-	},
-});
-</script>
-
 <style lang="scss" module>
 .container {
 	> * {
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue
index 7ab0276c54d63..9d27959affc5e 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue
@@ -1,28 +1,3 @@
-<template>
-	<div v-if="credentialProperties.length" :class="$style.container" @keydown.stop>
-		<form
-			v-for="parameter in credentialProperties"
-			:key="parameter.name"
-			autocomplete="off"
-			data-test-id="credential-connection-parameter"
-			@submit.prevent
-		>
-			<!-- Why form? to break up inputs, to prevent Chrome autofill -->
-			<n8n-notice v-if="parameter.type === 'notice'" :content="parameter.displayName" />
-			<ParameterInputExpanded
-				v-else
-				:parameter="parameter"
-				:value="credentialDataValues[parameter.name]"
-				:documentation-url="documentationUrl"
-				:show-validation-warnings="showValidationWarnings"
-				:label="{ size: 'medium' }"
-				event-source="credentials"
-				@update="valueChanged"
-			/>
-		</form>
-	</div>
-</template>
-
 <script setup lang="ts">
 import type {
 	ICredentialDataDecryptedObject,
@@ -60,6 +35,31 @@ function valueChanged(parameterData: IUpdateInformation) {
 }
 </script>
 
+<template>
+	<div v-if="credentialProperties.length" :class="$style.container" @keydown.stop>
+		<form
+			v-for="parameter in credentialProperties"
+			:key="parameter.name"
+			autocomplete="off"
+			data-test-id="credential-connection-parameter"
+			@submit.prevent
+		>
+			<!-- Why form? to break up inputs, to prevent Chrome autofill -->
+			<n8n-notice v-if="parameter.type === 'notice'" :content="parameter.displayName" />
+			<ParameterInputExpanded
+				v-else
+				:parameter="parameter"
+				:value="credentialDataValues[parameter.name]"
+				:documentation-url="documentationUrl"
+				:show-validation-warnings="showValidationWarnings"
+				:label="{ size: 'medium' }"
+				event-source="credentials"
+				@update="valueChanged"
+			/>
+		</form>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	> * {
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
index f86e48a0c5a2c..5d8c68c1aeaaf 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
@@ -1,52 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<div v-if="!isSharingEnabled">
-			<N8nActionBox
-				:heading="
-					$locale.baseText(
-						uiStore.contextBasedTranslationKeys.credentials.sharing.unavailable.title,
-					)
-				"
-				:description="
-					$locale.baseText(
-						uiStore.contextBasedTranslationKeys.credentials.sharing.unavailable.description,
-					)
-				"
-				:button-text="
-					$locale.baseText(
-						uiStore.contextBasedTranslationKeys.credentials.sharing.unavailable.button,
-					)
-				"
-				@click:button="goToUpgrade"
-			/>
-		</div>
-		<div v-else>
-			<N8nInfoTip v-if="credentialPermissions.share" :bold="false" class="mb-s">
-				{{ $locale.baseText('credentialEdit.credentialSharing.info.owner') }}
-			</N8nInfoTip>
-			<N8nInfoTip v-else-if="isHomeTeamProject" :bold="false" class="mb-s">
-				{{ $locale.baseText('credentialEdit.credentialSharing.info.sharee.team') }}
-			</N8nInfoTip>
-			<N8nInfoTip v-else :bold="false" class="mb-s">
-				{{
-					$locale.baseText('credentialEdit.credentialSharing.info.sharee.personal', {
-						interpolate: { credentialOwnerName },
-					})
-				}}
-			</N8nInfoTip>
-			<ProjectSharing
-				v-model="sharedWithProjects"
-				:projects="projects"
-				:roles="credentialRoles"
-				:home-project="homeProject"
-				:readonly="!credentialPermissions.share"
-				:static="!credentialPermissions.share"
-				:placeholder="sharingSelectPlaceholder"
-			/>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import type {
 	ICredentialsResponse,
@@ -208,6 +159,55 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.container">
+		<div v-if="!isSharingEnabled">
+			<N8nActionBox
+				:heading="
+					$locale.baseText(
+						uiStore.contextBasedTranslationKeys.credentials.sharing.unavailable.title,
+					)
+				"
+				:description="
+					$locale.baseText(
+						uiStore.contextBasedTranslationKeys.credentials.sharing.unavailable.description,
+					)
+				"
+				:button-text="
+					$locale.baseText(
+						uiStore.contextBasedTranslationKeys.credentials.sharing.unavailable.button,
+					)
+				"
+				@click:button="goToUpgrade"
+			/>
+		</div>
+		<div v-else>
+			<N8nInfoTip v-if="credentialPermissions.share" :bold="false" class="mb-s">
+				{{ $locale.baseText('credentialEdit.credentialSharing.info.owner') }}
+			</N8nInfoTip>
+			<N8nInfoTip v-else-if="isHomeTeamProject" :bold="false" class="mb-s">
+				{{ $locale.baseText('credentialEdit.credentialSharing.info.sharee.team') }}
+			</N8nInfoTip>
+			<N8nInfoTip v-else :bold="false" class="mb-s">
+				{{
+					$locale.baseText('credentialEdit.credentialSharing.info.sharee.personal', {
+						interpolate: { credentialOwnerName },
+					})
+				}}
+			</N8nInfoTip>
+			<ProjectSharing
+				v-model="sharedWithProjects"
+				:projects="projects"
+				:roles="credentialRoles"
+				:home-project="homeProject"
+				:readonly="!credentialPermissions.share"
+				:static="!credentialPermissions.share"
+				:placeholder="sharingSelectPlaceholder"
+			/>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	width: 100%;
diff --git a/packages/editor-ui/src/components/CredentialEdit/GoogleAuthButton.vue b/packages/editor-ui/src/components/CredentialEdit/GoogleAuthButton.vue
index c2c73bc9c6cbd..8a67505130e0d 100644
--- a/packages/editor-ui/src/components/CredentialEdit/GoogleAuthButton.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/GoogleAuthButton.vue
@@ -1,11 +1,3 @@
-<template>
-	<button
-		:class="$style.googleAuthBtn"
-		:title="$locale.baseText('credentialEdit.oAuthButton.signInWithGoogle')"
-		:style="googleAuthButtons"
-	/>
-</template>
-
 <script lang="ts" setup>
 import { useUIStore } from '@/stores/ui.store';
 import { useRootStore } from '@/stores/root.store';
@@ -20,6 +12,14 @@ const googleAuthButtons = {
 };
 </script>
 
+<template>
+	<button
+		:class="$style.googleAuthBtn"
+		:title="$locale.baseText('credentialEdit.oAuthButton.signInWithGoogle')"
+		:style="googleAuthButtons"
+	/>
+</template>
+
 <style module lang="scss">
 .googleAuthBtn {
 	--google-auth-btn-height: 46px;
diff --git a/packages/editor-ui/src/components/CredentialEdit/OauthButton.vue b/packages/editor-ui/src/components/CredentialEdit/OauthButton.vue
index 27da6ee5702c2..427b15a4d517e 100644
--- a/packages/editor-ui/src/components/CredentialEdit/OauthButton.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/OauthButton.vue
@@ -1,3 +1,11 @@
+<script lang="ts" setup>
+import GoogleAuthButton from './GoogleAuthButton.vue';
+
+defineProps<{
+	isGoogleOAuthType: boolean;
+}>();
+</script>
+
 <template>
 	<div :class="$style.container">
 		<GoogleAuthButton v-if="isGoogleOAuthType" />
@@ -9,14 +17,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-import GoogleAuthButton from './GoogleAuthButton.vue';
-
-defineProps<{
-	isGoogleOAuthType: boolean;
-}>();
-</script>
-
 <style module lang="scss">
 .container {
 	display: inline-block;
diff --git a/packages/editor-ui/src/components/CredentialsSelect.vue b/packages/editor-ui/src/components/CredentialsSelect.vue
index 859f554ea137b..ab1ced6f583d8 100644
--- a/packages/editor-ui/src/components/CredentialsSelect.vue
+++ b/packages/editor-ui/src/components/CredentialsSelect.vue
@@ -1,53 +1,3 @@
-<template>
-	<div>
-		<div :class="$style['parameter-value-container']">
-			<n8n-select
-				ref="innerSelect"
-				:size="inputSize"
-				filterable
-				:model-value="displayValue"
-				:placeholder="$locale.baseText('parameterInput.select')"
-				:title="displayTitle"
-				:disabled="isReadOnly"
-				data-test-id="credential-select"
-				@update:model-value="(value: string) => $emit('update:modelValue', value)"
-				@keydown.stop
-				@focus="$emit('setFocus')"
-				@blur="$emit('onBlur')"
-			>
-				<n8n-option
-					v-for="credType in supportedCredentialTypes"
-					:key="credType.name"
-					:value="credType.name"
-					:label="credType.displayName"
-					data-test-id="credential-select-option"
-				>
-					<div class="list-option">
-						<div class="option-headline">
-							{{ credType.displayName }}
-						</div>
-					</div>
-				</n8n-option>
-			</n8n-select>
-			<slot name="issues-and-options" />
-		</div>
-
-		<ScopesNotice
-			v-if="scopes.length > 0"
-			:active-credential-type="activeCredentialType"
-			:scopes="scopes"
-		/>
-		<div>
-			<NodeCredentials
-				:node="node"
-				:readonly="isReadOnly"
-				:override-cred-type="node.parameters[parameter.name]"
-				@credential-selected="(updateInformation) => $emit('credentialSelected', updateInformation)"
-			/>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import type { ICredentialType } from 'n8n-workflow';
 import { defineComponent } from 'vue';
@@ -156,6 +106,56 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div>
+		<div :class="$style['parameter-value-container']">
+			<n8n-select
+				ref="innerSelect"
+				:size="inputSize"
+				filterable
+				:model-value="displayValue"
+				:placeholder="$locale.baseText('parameterInput.select')"
+				:title="displayTitle"
+				:disabled="isReadOnly"
+				data-test-id="credential-select"
+				@update:model-value="(value: string) => $emit('update:modelValue', value)"
+				@keydown.stop
+				@focus="$emit('setFocus')"
+				@blur="$emit('onBlur')"
+			>
+				<n8n-option
+					v-for="credType in supportedCredentialTypes"
+					:key="credType.name"
+					:value="credType.name"
+					:label="credType.displayName"
+					data-test-id="credential-select-option"
+				>
+					<div class="list-option">
+						<div class="option-headline">
+							{{ credType.displayName }}
+						</div>
+					</div>
+				</n8n-option>
+			</n8n-select>
+			<slot name="issues-and-options" />
+		</div>
+
+		<ScopesNotice
+			v-if="scopes.length > 0"
+			:active-credential-type="activeCredentialType"
+			:scopes="scopes"
+		/>
+		<div>
+			<NodeCredentials
+				:node="node"
+				:readonly="isReadOnly"
+				:override-cred-type="node.parameters[parameter.name]"
+				@credential-selected="(updateInformation) => $emit('credentialSelected', updateInformation)"
+			/>
+		</div>
+	</div>
+</template>
+
 <style module lang="scss">
 .parameter-value-container {
 	display: flex;
diff --git a/packages/editor-ui/src/components/CredentialsSelectModal.vue b/packages/editor-ui/src/components/CredentialsSelectModal.vue
index c932db45bde75..0b31f03029c16 100644
--- a/packages/editor-ui/src/components/CredentialsSelectModal.vue
+++ b/packages/editor-ui/src/components/CredentialsSelectModal.vue
@@ -1,62 +1,3 @@
-<template>
-	<Modal
-		:name="CREDENTIAL_SELECT_MODAL_KEY"
-		:event-bus="modalBus"
-		width="50%"
-		:center="true"
-		:loading="loading"
-		max-width="460px"
-		min-height="250px"
-	>
-		<template #header>
-			<h2 :class="$style.title">
-				{{ $locale.baseText('credentialSelectModal.addNewCredential') }}
-			</h2>
-		</template>
-		<template #content>
-			<div>
-				<div :class="$style.subtitle">
-					{{ $locale.baseText('credentialSelectModal.selectAnAppOrServiceToConnectTo') }}
-				</div>
-				<n8n-select
-					ref="select"
-					filterable
-					default-first-option
-					:placeholder="$locale.baseText('credentialSelectModal.searchForApp')"
-					size="xlarge"
-					:model-value="selected"
-					data-test-id="new-credential-type-select"
-					@update:model-value="onSelect"
-				>
-					<template #prefix>
-						<font-awesome-icon icon="search" />
-					</template>
-					<n8n-option
-						v-for="credential in credentialsStore.allCredentialTypes"
-						:key="credential.name"
-						:value="credential.name"
-						:label="credential.displayName"
-						filterable
-						data-test-id="new-credential-type-select-option"
-					/>
-				</n8n-select>
-			</div>
-		</template>
-		<template #footer>
-			<div :class="$style.footer">
-				<n8n-button
-					:label="$locale.baseText('credentialSelectModal.continue')"
-					float="right"
-					size="large"
-					:disabled="!selected"
-					data-test-id="new-credential-type-button"
-					@click="openCredentialType"
-				/>
-			</div>
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import Modal from './Modal.vue';
@@ -125,6 +66,65 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Modal
+		:name="CREDENTIAL_SELECT_MODAL_KEY"
+		:event-bus="modalBus"
+		width="50%"
+		:center="true"
+		:loading="loading"
+		max-width="460px"
+		min-height="250px"
+	>
+		<template #header>
+			<h2 :class="$style.title">
+				{{ $locale.baseText('credentialSelectModal.addNewCredential') }}
+			</h2>
+		</template>
+		<template #content>
+			<div>
+				<div :class="$style.subtitle">
+					{{ $locale.baseText('credentialSelectModal.selectAnAppOrServiceToConnectTo') }}
+				</div>
+				<n8n-select
+					ref="select"
+					filterable
+					default-first-option
+					:placeholder="$locale.baseText('credentialSelectModal.searchForApp')"
+					size="xlarge"
+					:model-value="selected"
+					data-test-id="new-credential-type-select"
+					@update:model-value="onSelect"
+				>
+					<template #prefix>
+						<font-awesome-icon icon="search" />
+					</template>
+					<n8n-option
+						v-for="credential in credentialsStore.allCredentialTypes"
+						:key="credential.name"
+						:value="credential.name"
+						:label="credential.displayName"
+						filterable
+						data-test-id="new-credential-type-select-option"
+					/>
+				</n8n-select>
+			</div>
+		</template>
+		<template #footer>
+			<div :class="$style.footer">
+				<n8n-button
+					:label="$locale.baseText('credentialSelectModal.continue')"
+					float="right"
+					size="large"
+					:disabled="!selected"
+					data-test-id="new-credential-type-button"
+					@click="openCredentialType"
+				/>
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style module lang="scss">
 .title {
 	font-size: var(--font-size-xl);
diff --git a/packages/editor-ui/src/components/DeleteUserModal.vue b/packages/editor-ui/src/components/DeleteUserModal.vue
index 2fdb0ad73468f..db9bb671c476c 100644
--- a/packages/editor-ui/src/components/DeleteUserModal.vue
+++ b/packages/editor-ui/src/components/DeleteUserModal.vue
@@ -1,3 +1,118 @@
+<script lang="ts" setup>
+import { ref, computed, onBeforeMount } from 'vue';
+import { useToast } from '@/composables/useToast';
+import Modal from '@/components/Modal.vue';
+import ProjectSharing from '@/components/Projects/ProjectSharing.vue';
+import { useUsersStore } from '@/stores/users.store';
+import { useProjectsStore } from '@/stores/projects.store';
+import { createEventBus } from 'n8n-design-system/utils';
+import type { ProjectSharingData } from '@/types/projects.types';
+import { useI18n } from '@/composables/useI18n';
+
+const props = defineProps<{
+	modalName: string;
+	activeId: string;
+}>();
+
+const modalBus = createEventBus();
+const loading = ref(false);
+const operation = ref('');
+const deleteConfirmText = ref('');
+const selectedProject = ref<ProjectSharingData | null>(null);
+
+const i18n = useI18n();
+const usersStore = useUsersStore();
+const projectsStore = useProjectsStore();
+
+const userToDelete = computed(() => {
+	if (!props.activeId) return null;
+
+	return usersStore.usersById[props.activeId];
+});
+
+const isPending = computed(() => {
+	return userToDelete.value ? !userToDelete.value.firstName : false;
+});
+
+const title = computed(() => {
+	const user = userToDelete.value?.fullName ?? userToDelete.value?.email ?? '';
+
+	return i18n.baseText('settings.users.deleteUser', { interpolate: { user } });
+});
+
+const enabled = computed(() => {
+	if (isPending.value) {
+		return true;
+	}
+
+	if (
+		operation.value === 'delete' &&
+		deleteConfirmText.value === i18n.baseText('settings.users.deleteConfirmationText')
+	) {
+		return true;
+	}
+
+	if (operation.value === 'transfer' && selectedProject.value) {
+		return true;
+	}
+
+	return false;
+});
+
+const projects = computed(() => {
+	return projectsStore.projects.filter(
+		(project) =>
+			project.name !==
+			`${userToDelete.value?.firstName} ${userToDelete.value?.lastName} <${userToDelete.value?.email}>`,
+	);
+});
+
+onBeforeMount(async () => {
+	await projectsStore.getAllProjects();
+});
+
+const { showMessage, showError } = useToast();
+
+async function onSubmit() {
+	if (!enabled.value) {
+		return;
+	}
+
+	try {
+		loading.value = true;
+
+		const params = { id: props.activeId } as { id: string; transferId?: string };
+		if (operation.value === 'transfer' && selectedProject.value) {
+			params.transferId = selectedProject.value.id;
+		}
+
+		await usersStore.deleteUser(params);
+
+		let message = '';
+		if (params.transferId) {
+			const transferProject = projects.value.find((project) => project.id === params.transferId);
+			if (transferProject) {
+				message = i18n.baseText('settings.users.transferredToUser', {
+					interpolate: { projectName: transferProject.name ?? '' },
+				});
+			}
+		}
+
+		showMessage({
+			type: 'success',
+			title: i18n.baseText('settings.users.userDeleted'),
+			message,
+		});
+
+		modalBus.emit('close');
+	} catch (error) {
+		showError(error, i18n.baseText('settings.users.userDeletedError'));
+	} finally {
+		loading.value = false;
+	}
+}
+</script>
+
 <template>
 	<Modal
 		:name="modalName"
@@ -11,13 +126,13 @@
 			<div>
 				<div v-if="isPending">
 					<n8n-text color="text-base">{{
-						$locale.baseText('settings.users.confirmUserDeletion')
+						i18n.baseText('settings.users.confirmUserDeletion')
 					}}</n8n-text>
 				</div>
 				<div v-else :class="$style.content">
 					<div>
 						<n8n-text color="text-base">{{
-							$locale.baseText('settings.users.confirmDataHandlingAfterDeletion')
+							i18n.baseText('settings.users.confirmDataHandlingAfterDeletion')
 						}}</n8n-text>
 					</div>
 					<el-radio
@@ -26,25 +141,25 @@
 						@update:model-value="operation = 'transfer'"
 					>
 						<n8n-text color="text-dark">{{
-							$locale.baseText('settings.users.transferWorkflowsAndCredentials')
+							i18n.baseText('settings.users.transferWorkflowsAndCredentials')
 						}}</n8n-text>
 					</el-radio>
 					<div v-if="operation === 'transfer'" :class="$style.optionInput">
 						<n8n-text color="text-dark">{{
-							$locale.baseText('settings.users.transferWorkflowsAndCredentials.user')
+							i18n.baseText('settings.users.transferWorkflowsAndCredentials.user')
 						}}</n8n-text>
 						<ProjectSharing
 							v-model="selectedProject"
 							class="pt-2xs"
 							:projects="projects"
 							:placeholder="
-								$locale.baseText('settings.users.transferWorkflowsAndCredentials.placeholder')
+								i18n.baseText('settings.users.transferWorkflowsAndCredentials.placeholder')
 							"
 						/>
 					</div>
 					<el-radio v-model="operation" label="delete" @update:model-value="operation = 'delete'">
 						<n8n-text color="text-dark">{{
-							$locale.baseText('settings.users.deleteWorkflowsAndCredentials')
+							i18n.baseText('settings.users.deleteWorkflowsAndCredentials')
 						}}</n8n-text>
 					</el-radio>
 					<div
@@ -52,10 +167,10 @@
 						:class="$style.optionInput"
 						data-test-id="delete-data-input"
 					>
-						<n8n-input-label :label="$locale.baseText('settings.users.deleteConfirmationMessage')">
+						<n8n-input-label :label="i18n.baseText('settings.users.deleteConfirmationMessage')">
 							<n8n-input
 								v-model="deleteConfirmText"
-								:placeholder="$locale.baseText('settings.users.deleteConfirmationText')"
+								:placeholder="i18n.baseText('settings.users.deleteConfirmationText')"
 							/>
 						</n8n-input-label>
 					</div>
@@ -66,7 +181,7 @@
 			<n8n-button
 				:loading="loading"
 				:disabled="!enabled"
-				:label="$locale.baseText('settings.users.delete')"
+				:label="i18n.baseText('settings.users.delete')"
 				float="right"
 				data-test-id="confirm-delete-user-button"
 				@click="onSubmit"
@@ -75,130 +190,6 @@
 	</Modal>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { useToast } from '@/composables/useToast';
-import Modal from '@/components/Modal.vue';
-import type { IUser } from '@/Interface';
-import { mapStores } from 'pinia';
-import { useUsersStore } from '@/stores/users.store';
-import { createEventBus } from 'n8n-design-system/utils';
-import { useProjectsStore } from '@/stores/projects.store';
-import type { ProjectListItem, ProjectSharingData } from '@/types/projects.types';
-import ProjectSharing from '@/components/Projects/ProjectSharing.vue';
-
-export default defineComponent({
-	name: 'DeleteUserModal',
-	components: {
-		Modal,
-		ProjectSharing,
-	},
-	props: {
-		modalName: {
-			type: String,
-		},
-		activeId: {
-			type: String,
-		},
-	},
-	setup() {
-		return {
-			...useToast(),
-		};
-	},
-	data() {
-		return {
-			modalBus: createEventBus(),
-			loading: false,
-			operation: '',
-			deleteConfirmText: '',
-			selectedProject: null as ProjectSharingData | null,
-		};
-	},
-	computed: {
-		...mapStores(useUsersStore, useProjectsStore),
-		userToDelete(): IUser | null {
-			if (!this.activeId) return null;
-			return this.usersStore.usersById[this.activeId];
-		},
-		isPending(): boolean {
-			return this.userToDelete ? this.userToDelete && !this.userToDelete.firstName : false;
-		},
-		title(): string {
-			const user =
-				(this.userToDelete && (this.userToDelete.fullName || this.userToDelete.email)) || '';
-			return this.$locale.baseText('settings.users.deleteUser', { interpolate: { user } });
-		},
-		enabled(): boolean {
-			if (this.isPending) {
-				return true;
-			}
-			if (
-				this.operation === 'delete' &&
-				this.deleteConfirmText === this.$locale.baseText('settings.users.deleteConfirmationText')
-			) {
-				return true;
-			}
-
-			if (this.operation === 'transfer' && this.selectedProject) {
-				return true;
-			}
-
-			return false;
-		},
-		projects(): ProjectListItem[] {
-			return this.projectsStore.projects.filter(
-				(project) =>
-					project.name !==
-					`${this.userToDelete?.firstName} ${this.userToDelete?.lastName} <${this.userToDelete?.email}>`,
-			);
-		},
-	},
-	async beforeMount() {
-		await this.projectsStore.getAllProjects();
-	},
-	methods: {
-		async onSubmit() {
-			try {
-				if (!this.enabled) {
-					return;
-				}
-
-				this.loading = true;
-
-				const params = { id: this.activeId } as { id: string; transferId?: string };
-				if (this.operation === 'transfer' && this.selectedProject) {
-					params.transferId = this.selectedProject.id;
-				}
-
-				await this.usersStore.deleteUser(params);
-
-				let message = '';
-				if (params.transferId) {
-					const transferProject = this.projects.find((project) => project.id === params.transferId);
-					if (transferProject) {
-						message = this.$locale.baseText('settings.users.transferredToUser', {
-							interpolate: { projectName: transferProject.name ?? '' },
-						});
-					}
-				}
-
-				this.showMessage({
-					type: 'success',
-					title: this.$locale.baseText('settings.users.userDeleted'),
-					message,
-				});
-
-				this.modalBus.emit('close');
-			} catch (error) {
-				this.showError(error, this.$locale.baseText('settings.users.userDeletedError'));
-			}
-			this.loading = false;
-		},
-	},
-});
-</script>
-
 <style lang="scss" module>
 .content {
 	padding-bottom: var(--spacing-2xs);
diff --git a/packages/editor-ui/src/components/Draggable.vue b/packages/editor-ui/src/components/Draggable.vue
index 5adfaaf05af3c..6f1fcab336084 100644
--- a/packages/editor-ui/src/components/Draggable.vue
+++ b/packages/editor-ui/src/components/Draggable.vue
@@ -1,20 +1,3 @@
-<template>
-	<component
-		:is="tag"
-		ref="wrapper"
-		:class="{ [$style.dragging]: isDragging }"
-		@mousedown="onDragStart"
-	>
-		<slot :is-dragging="isDragging"></slot>
-
-		<Teleport to="body">
-			<div v-show="isDragging" ref="draggable" :class="$style.draggable" :style="draggableStyle">
-				<slot name="preview" :can-drop="canDrop" :el="draggingElement"></slot>
-			</div>
-		</Teleport>
-	</component>
-</template>
-
 <script setup lang="ts">
 import type { XYPosition } from '@/Interface';
 import { useNDVStore } from '@/stores/ndv.store';
@@ -137,6 +120,23 @@ const onDragEnd = () => {
 };
 </script>
 
+<template>
+	<component
+		:is="tag"
+		ref="wrapper"
+		:class="{ [$style.dragging]: isDragging }"
+		@mousedown="onDragStart"
+	>
+		<slot :is-dragging="isDragging"></slot>
+
+		<Teleport to="body">
+			<div v-show="isDragging" ref="draggable" :class="$style.draggable" :style="draggableStyle">
+				<slot name="preview" :can-drop="canDrop" :el="draggingElement"></slot>
+			</div>
+		</Teleport>
+	</component>
+</template>
+
 <style lang="scss" module>
 .dragging {
 	visibility: visible;
diff --git a/packages/editor-ui/src/components/DraggableTarget.vue b/packages/editor-ui/src/components/DraggableTarget.vue
index 6197d3c347837..2fa41beff2c27 100644
--- a/packages/editor-ui/src/components/DraggableTarget.vue
+++ b/packages/editor-ui/src/components/DraggableTarget.vue
@@ -1,9 +1,3 @@
-<template>
-	<div ref="targetRef" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mouseup="onMouseUp">
-		<slot :droppable="droppable" :active-drop="activeDrop"></slot>
-	</div>
-</template>
-
 <script setup lang="ts">
 import type { XYPosition } from '@/Interface';
 import { useNDVStore } from '@/stores/ndv.store';
@@ -84,3 +78,9 @@ function getStickyPosition(): XYPosition | null {
 	return [left + props.stickyOffset[0], top + props.stickyOffset[1]];
 }
 </script>
+
+<template>
+	<div ref="targetRef" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave" @mouseup="onMouseUp">
+		<slot :droppable="droppable" :active-drop="activeDrop"></slot>
+	</div>
+</template>
diff --git a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
index a2c60236f6d56..0864d839110df 100644
--- a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
+++ b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
@@ -1,52 +1,3 @@
-<template>
-	<Modal
-		:name="modalName"
-		:event-bus="modalBus"
-		:title="$locale.baseText('duplicateWorkflowDialog.duplicateWorkflow')"
-		:center="true"
-		width="420px"
-		@enter="save"
-	>
-		<template #content>
-			<div :class="$style.content">
-				<n8n-input
-					ref="nameInput"
-					v-model="name"
-					:placeholder="$locale.baseText('duplicateWorkflowDialog.enterWorkflowName')"
-					:maxlength="MAX_WORKFLOW_NAME_LENGTH"
-				/>
-				<TagsDropdown
-					v-if="settingsStore.areTagsEnabled"
-					ref="dropdown"
-					v-model="currentTagIds"
-					:create-enabled="true"
-					:event-bus="dropdownBus"
-					:placeholder="$locale.baseText('duplicateWorkflowDialog.chooseOrCreateATag')"
-					@blur="onTagsBlur"
-					@esc="onTagsEsc"
-				/>
-			</div>
-		</template>
-		<template #footer="{ close }">
-			<div :class="$style.footer">
-				<n8n-button
-					:loading="isSaving"
-					:label="$locale.baseText('duplicateWorkflowDialog.save')"
-					float="right"
-					@click="save"
-				/>
-				<n8n-button
-					type="secondary"
-					:disabled="isSaving"
-					:label="$locale.baseText('duplicateWorkflowDialog.cancel')"
-					float="right"
-					@click="close"
-				/>
-			</div>
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -199,6 +150,55 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Modal
+		:name="modalName"
+		:event-bus="modalBus"
+		:title="$locale.baseText('duplicateWorkflowDialog.duplicateWorkflow')"
+		:center="true"
+		width="420px"
+		@enter="save"
+	>
+		<template #content>
+			<div :class="$style.content">
+				<n8n-input
+					ref="nameInput"
+					v-model="name"
+					:placeholder="$locale.baseText('duplicateWorkflowDialog.enterWorkflowName')"
+					:maxlength="MAX_WORKFLOW_NAME_LENGTH"
+				/>
+				<TagsDropdown
+					v-if="settingsStore.areTagsEnabled"
+					ref="dropdown"
+					v-model="currentTagIds"
+					:create-enabled="true"
+					:event-bus="dropdownBus"
+					:placeholder="$locale.baseText('duplicateWorkflowDialog.chooseOrCreateATag')"
+					@blur="onTagsBlur"
+					@esc="onTagsEsc"
+				/>
+			</div>
+		</template>
+		<template #footer="{ close }">
+			<div :class="$style.footer">
+				<n8n-button
+					:loading="isSaving"
+					:label="$locale.baseText('duplicateWorkflowDialog.save')"
+					float="right"
+					@click="save"
+				/>
+				<n8n-button
+					type="secondary"
+					:disabled="isSaving"
+					:label="$locale.baseText('duplicateWorkflowDialog.cancel')"
+					float="right"
+					@click="close"
+				/>
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style lang="scss" module>
 .content {
 	> *:not(:last-child) {
diff --git a/packages/editor-ui/src/components/EnterpriseEdition.ee.vue b/packages/editor-ui/src/components/EnterpriseEdition.ee.vue
index a2dec568889cc..1ee2f4eebaae1 100644
--- a/packages/editor-ui/src/components/EnterpriseEdition.ee.vue
+++ b/packages/editor-ui/src/components/EnterpriseEdition.ee.vue
@@ -1,10 +1,3 @@
-<template>
-	<div>
-		<slot v-if="canAccess" />
-		<slot v-else name="fallback" />
-	</div>
-</template>
-
 <script lang="ts">
 import { type PropType, defineComponent } from 'vue';
 import type { EnterpriseEditionFeatureValue } from '@/Interface';
@@ -29,3 +22,10 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<div>
+		<slot v-if="canAccess" />
+		<slot v-else name="fallback" />
+	</div>
+</template>
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
index 7cf3710c3ea65..666b29ef68d0b 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
@@ -1,10 +1,3 @@
-<template>
-	<!-- mock el-input element to apply styles -->
-	<div :class="{ 'el-input': true, 'static-size': staticSize }" :data-value="hiddenValue">
-		<slot></slot>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue';
 
@@ -26,6 +19,13 @@ const hiddenValue = computed(() => {
 });
 </script>
 
+<template>
+	<!-- mock el-input element to apply styles -->
+	<div :class="{ 'el-input': true, 'static-size': staticSize }" :data-value="hiddenValue">
+		<slot></slot>
+	</div>
+</template>
+
 <style lang="scss" scoped>
 $--horiz-padding: 15px;
 
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
index 939701e141616..88f45b7374217 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputEdit.vue
@@ -1,19 +1,3 @@
-<template>
-	<ExpandableInputBase :model-value="modelValue" :placeholder="placeholder">
-		<input
-			ref="inputRef"
-			class="el-input__inner"
-			:value="modelValue"
-			:placeholder="placeholder"
-			:maxlength="maxlength"
-			size="4"
-			@input="onInput"
-			@keydown.enter="onEnter"
-			@keydown.esc="onEscape"
-		/>
-	</ExpandableInputBase>
-</template>
-
 <script setup lang="ts">
 import type { EventBus } from 'n8n-design-system';
 import { onBeforeUnmount, onMounted, ref } from 'vue';
@@ -78,3 +62,19 @@ function onEscape() {
 	emit('esc');
 }
 </script>
+
+<template>
+	<ExpandableInputBase :model-value="modelValue" :placeholder="placeholder">
+		<input
+			ref="inputRef"
+			class="el-input__inner"
+			:value="modelValue"
+			:placeholder="placeholder"
+			:maxlength="maxlength"
+			size="4"
+			@input="onInput"
+			@keydown.enter="onEnter"
+			@keydown.esc="onEscape"
+		/>
+	</ExpandableInputBase>
+</template>
diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
index 4a0a80b886b75..d4f2851583ef9 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputPreview.vue
@@ -1,3 +1,13 @@
+<script setup lang="ts">
+import ExpandableInputBase from './ExpandableInputBase.vue';
+
+type Props = {
+	modelValue: string;
+};
+
+defineProps<Props>();
+</script>
+
 <template>
 	<ExpandableInputBase :model-value="modelValue" :static-size="true">
 		<input
@@ -9,16 +19,6 @@
 	</ExpandableInputBase>
 </template>
 
-<script setup lang="ts">
-import ExpandableInputBase from './ExpandableInputBase.vue';
-
-type Props = {
-	modelValue: string;
-};
-
-defineProps<Props>();
-</script>
-
 <style lang="scss" scoped>
 input,
 input:hover {
diff --git a/packages/editor-ui/src/components/ExpressionEditModal.vue b/packages/editor-ui/src/components/ExpressionEditModal.vue
index cb58f67a58217..bf8fe9bc445a1 100644
--- a/packages/editor-ui/src/components/ExpressionEditModal.vue
+++ b/packages/editor-ui/src/components/ExpressionEditModal.vue
@@ -1,94 +1,3 @@
-<template>
-	<el-dialog
-		width="calc(100vw - var(--spacing-3xl))"
-		append-to-body
-		:class="$style.modal"
-		:model-value="dialogVisible"
-		:before-close="closeDialog"
-	>
-		<button :class="$style.close" @click="closeDialog">
-			<Close height="18" width="18" />
-		</button>
-		<div :class="$style.container">
-			<div :class="$style.sidebar">
-				<N8nInput
-					v-model="search"
-					size="small"
-					:class="$style.search"
-					:placeholder="i18n.baseText('ndv.search.placeholder.input.schema')"
-				>
-					<template #prefix>
-						<N8nIcon :class="$style.ioSearchIcon" icon="search" />
-					</template>
-				</N8nInput>
-
-				<RunDataSchema
-					:class="$style.schema"
-					:search="appliedSearch"
-					:nodes="parentNodes"
-					mapping-enabled
-					pane-type="input"
-					connection-type="main"
-				/>
-			</div>
-
-			<div :class="$style.io">
-				<div :class="$style.input">
-					<div :class="$style.header">
-						<N8nText bold size="large">
-							{{ i18n.baseText('expressionEdit.expression') }}
-						</N8nText>
-						<N8nText
-							:class="$style.tip"
-							size="small"
-							v-html="i18n.baseText('expressionTip.javascript')"
-						/>
-					</div>
-
-					<DraggableTarget :class="$style.editorContainer" type="mapping" @drop="onDrop">
-						<template #default>
-							<ExpressionEditorModalInput
-								ref="expressionInputRef"
-								:model-value="modelValue"
-								:is-read-only="isReadOnly"
-								:path="path"
-								:class="[
-									$style.editor,
-									{
-										'ph-no-capture': redactValues,
-									},
-								]"
-								data-test-id="expression-modal-input"
-								@change="valueChanged"
-								@close="closeDialog"
-							/>
-						</template>
-					</DraggableTarget>
-				</div>
-
-				<div :class="$style.output">
-					<div :class="$style.header">
-						<N8nText bold size="large">
-							{{ i18n.baseText('parameterInput.result') }}
-						</N8nText>
-						<OutputItemSelect />
-					</div>
-
-					<div :class="[$style.editorContainer, { 'ph-no-capture': redactValues }]">
-						<ExpressionOutput
-							ref="expressionResultRef"
-							:class="$style.editor"
-							:segments="segments"
-							:extensions="theme"
-							data-test-id="expression-modal-output"
-						/>
-					</div>
-				</div>
-			</div>
-		</div>
-	</el-dialog>
-</template>
-
 <script setup lang="ts">
 import ExpressionEditorModalInput from '@/components/ExpressionEditorModal/ExpressionEditorModalInput.vue';
 import { computed, ref, toRaw, watch } from 'vue';
@@ -211,6 +120,97 @@ async function onDrop(expression: string, event: MouseEvent) {
 }
 </script>
 
+<template>
+	<el-dialog
+		width="calc(100vw - var(--spacing-3xl))"
+		append-to-body
+		:class="$style.modal"
+		:model-value="dialogVisible"
+		:before-close="closeDialog"
+	>
+		<button :class="$style.close" @click="closeDialog">
+			<Close height="18" width="18" />
+		</button>
+		<div :class="$style.container">
+			<div :class="$style.sidebar">
+				<N8nInput
+					v-model="search"
+					size="small"
+					:class="$style.search"
+					:placeholder="i18n.baseText('ndv.search.placeholder.input.schema')"
+				>
+					<template #prefix>
+						<N8nIcon :class="$style.ioSearchIcon" icon="search" />
+					</template>
+				</N8nInput>
+
+				<RunDataSchema
+					:class="$style.schema"
+					:search="appliedSearch"
+					:nodes="parentNodes"
+					mapping-enabled
+					pane-type="input"
+					connection-type="main"
+				/>
+			</div>
+
+			<div :class="$style.io">
+				<div :class="$style.input">
+					<div :class="$style.header">
+						<N8nText bold size="large">
+							{{ i18n.baseText('expressionEdit.expression') }}
+						</N8nText>
+						<N8nText
+							:class="$style.tip"
+							size="small"
+							v-html="i18n.baseText('expressionTip.javascript')"
+						/>
+					</div>
+
+					<DraggableTarget :class="$style.editorContainer" type="mapping" @drop="onDrop">
+						<template #default>
+							<ExpressionEditorModalInput
+								ref="expressionInputRef"
+								:model-value="modelValue"
+								:is-read-only="isReadOnly"
+								:path="path"
+								:class="[
+									$style.editor,
+									{
+										'ph-no-capture': redactValues,
+									},
+								]"
+								data-test-id="expression-modal-input"
+								@change="valueChanged"
+								@close="closeDialog"
+							/>
+						</template>
+					</DraggableTarget>
+				</div>
+
+				<div :class="$style.output">
+					<div :class="$style.header">
+						<N8nText bold size="large">
+							{{ i18n.baseText('parameterInput.result') }}
+						</N8nText>
+						<OutputItemSelect />
+					</div>
+
+					<div :class="[$style.editorContainer, { 'ph-no-capture': redactValues }]">
+						<ExpressionOutput
+							ref="expressionResultRef"
+							:class="$style.editor"
+							:segments="segments"
+							:extensions="theme"
+							data-test-id="expression-modal-output"
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	</el-dialog>
+</template>
+
 <style module lang="scss">
 .modal {
 	--dialog-close-top: var(--spacing-m);
diff --git a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
index 68a65ada6e84f..5816dab1ccc98 100644
--- a/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
+++ b/packages/editor-ui/src/components/ExpressionEditorModal/ExpressionEditorModalInput.vue
@@ -1,7 +1,3 @@
-<template>
-	<div ref="root" :class="$style.editor" @keydown.stop></div>
-</template>
-
 <script setup lang="ts">
 import { history } from '@codemirror/commands';
 import { Prec } from '@codemirror/state';
@@ -109,6 +105,10 @@ onMounted(() => {
 defineExpose({ editor });
 </script>
 
+<template>
+	<div ref="root" :class="$style.editor" @keydown.stop></div>
+</template>
+
 <style lang="scss" module>
 :global(.cm-content) {
 	border-radius: var(--border-radius-base);
diff --git a/packages/editor-ui/src/components/ExpressionFunctionIcon.vue b/packages/editor-ui/src/components/ExpressionFunctionIcon.vue
index d7f60f556e527..156f54f9a0cc7 100644
--- a/packages/editor-ui/src/components/ExpressionFunctionIcon.vue
+++ b/packages/editor-ui/src/components/ExpressionFunctionIcon.vue
@@ -1,3 +1,9 @@
+<script lang="ts">
+export default {
+	name: 'ExpressionFunctionIcon',
+};
+</script>
+
 <template>
 	<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
 		<path
@@ -7,10 +13,4 @@
 	</svg>
 </template>
 
-<script lang="ts">
-export default {
-	name: 'ExpressionFunctionIcon',
-};
-</script>
-
 <style lang="scss"></style>
diff --git a/packages/editor-ui/src/components/FeatureComingSoon.vue b/packages/editor-ui/src/components/FeatureComingSoon.vue
index 3dcf1e58b13df..a96b3d0ec31f8 100644
--- a/packages/editor-ui/src/components/FeatureComingSoon.vue
+++ b/packages/editor-ui/src/components/FeatureComingSoon.vue
@@ -1,31 +1,3 @@
-<template>
-	<div v-if="featureInfo" :class="[$style.container]">
-		<div v-if="showTitle" class="mb-2xl">
-			<n8n-heading size="2xlarge">
-				{{ $locale.baseText(featureInfo.featureName) }}
-			</n8n-heading>
-		</div>
-		<div v-if="featureInfo.infoText" class="mb-l">
-			<n8n-info-tip theme="info" type="note">
-				<span v-html="$locale.baseText(featureInfo.infoText)"></span>
-			</n8n-info-tip>
-		</div>
-		<div :class="$style.actionBoxContainer">
-			<n8n-action-box
-				:description="$locale.baseText(featureInfo.actionBoxDescription)"
-				:button-text="
-					$locale.baseText(featureInfo.actionBoxButtonLabel || 'fakeDoor.actionBox.button.label')
-				"
-				@click:button="openLinkPage"
-			>
-				<template #heading>
-					<span v-html="$locale.baseText(featureInfo.actionBoxTitle)" />
-				</template>
-			</n8n-action-box>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -75,6 +47,34 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div v-if="featureInfo" :class="[$style.container]">
+		<div v-if="showTitle" class="mb-2xl">
+			<n8n-heading size="2xlarge">
+				{{ $locale.baseText(featureInfo.featureName) }}
+			</n8n-heading>
+		</div>
+		<div v-if="featureInfo.infoText" class="mb-l">
+			<n8n-info-tip theme="info" type="note">
+				<span v-html="$locale.baseText(featureInfo.infoText)"></span>
+			</n8n-info-tip>
+		</div>
+		<div :class="$style.actionBoxContainer">
+			<n8n-action-box
+				:description="$locale.baseText(featureInfo.actionBoxDescription)"
+				:button-text="
+					$locale.baseText(featureInfo.actionBoxButtonLabel || 'fakeDoor.actionBox.button.label')
+				"
+				@click:button="openLinkPage"
+			>
+				<template #heading>
+					<span v-html="$locale.baseText(featureInfo.actionBoxTitle)" />
+				</template>
+			</n8n-action-box>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .actionBoxContainer {
 	text-align: center;
diff --git a/packages/editor-ui/src/components/FixedCollectionParameter.vue b/packages/editor-ui/src/components/FixedCollectionParameter.vue
index 68d74dd04f1c5..98c5ef5971abc 100644
--- a/packages/editor-ui/src/components/FixedCollectionParameter.vue
+++ b/packages/editor-ui/src/components/FixedCollectionParameter.vue
@@ -1,131 +1,3 @@
-<template>
-	<div
-		class="fixed-collection-parameter"
-		:data-test-id="`fixed-collection-${parameter.name}`"
-		@keydown.stop
-	>
-		<div v-if="getProperties.length === 0" class="no-items-exist">
-			<n8n-text size="small">{{
-				$locale.baseText('fixedCollectionParameter.currentlyNoItemsExist')
-			}}</n8n-text>
-		</div>
-
-		<div
-			v-for="property in getProperties"
-			:key="property.name"
-			class="fixed-collection-parameter-property"
-		>
-			<n8n-input-label
-				v-if="property.displayName !== '' && parameter.options && parameter.options.length !== 1"
-				:label="$locale.nodeText().inputLabelDisplayName(property, path)"
-				:underline="true"
-				size="small"
-				color="text-dark"
-			/>
-			<div v-if="multipleValues">
-				<div
-					v-for="(_, index) in mutableValues[property.name]"
-					:key="property.name + index"
-					class="parameter-item"
-				>
-					<div
-						:class="index ? 'border-top-dashed parameter-item-wrapper ' : 'parameter-item-wrapper'"
-					>
-						<div v-if="!isReadOnly" class="delete-option">
-							<n8n-icon-button
-								type="tertiary"
-								text
-								size="mini"
-								icon="trash"
-								:title="$locale.baseText('fixedCollectionParameter.deleteItem')"
-								@click="deleteOption(property.name, index)"
-							></n8n-icon-button>
-							<n8n-icon-button
-								v-if="sortable && index !== 0"
-								type="tertiary"
-								text
-								size="mini"
-								icon="angle-up"
-								:title="$locale.baseText('fixedCollectionParameter.moveUp')"
-								@click="moveOptionUp(property.name, index)"
-							></n8n-icon-button>
-							<n8n-icon-button
-								v-if="sortable && index !== mutableValues[property.name].length - 1"
-								type="tertiary"
-								text
-								size="mini"
-								icon="angle-down"
-								:title="$locale.baseText('fixedCollectionParameter.moveDown')"
-								@click="moveOptionDown(property.name, index)"
-							></n8n-icon-button>
-						</div>
-						<Suspense>
-							<ParameterInputList
-								:parameters="property.values"
-								:node-values="nodeValues"
-								:path="getPropertyPath(property.name, index)"
-								:hide-delete="true"
-								:is-read-only="isReadOnly"
-								@value-changed="valueChanged"
-							/>
-						</Suspense>
-					</div>
-				</div>
-			</div>
-			<div v-else class="parameter-item">
-				<div class="parameter-item-wrapper">
-					<div v-if="!isReadOnly" class="delete-option">
-						<n8n-icon-button
-							type="tertiary"
-							text
-							size="mini"
-							icon="trash"
-							:title="$locale.baseText('fixedCollectionParameter.deleteItem')"
-							@click="deleteOption(property.name)"
-						></n8n-icon-button>
-					</div>
-					<ParameterInputList
-						:parameters="property.values"
-						:node-values="nodeValues"
-						:path="getPropertyPath(property.name)"
-						:is-read-only="isReadOnly"
-						class="parameter-item"
-						:hide-delete="true"
-						@value-changed="valueChanged"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<div v-if="parameterOptions.length > 0 && !isReadOnly" class="controls">
-			<n8n-button
-				v-if="parameter.options && parameter.options.length === 1"
-				type="tertiary"
-				block
-				data-test-id="fixed-collection-add"
-				:label="getPlaceholderText"
-				@click="optionSelected(parameter.options[0].name)"
-			/>
-			<div v-else class="add-option">
-				<n8n-select
-					v-model="selectedOption"
-					:placeholder="getPlaceholderText"
-					size="small"
-					filterable
-					@update:model-value="optionSelected"
-				>
-					<n8n-option
-						v-for="item in parameterOptions"
-						:key="item.name"
-						:label="$locale.nodeText().collectionOptionDisplayName(parameter, item, path)"
-						:value="item.name"
-					></n8n-option>
-				</n8n-select>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
@@ -339,6 +211,134 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div
+		class="fixed-collection-parameter"
+		:data-test-id="`fixed-collection-${parameter.name}`"
+		@keydown.stop
+	>
+		<div v-if="getProperties.length === 0" class="no-items-exist">
+			<n8n-text size="small">{{
+				$locale.baseText('fixedCollectionParameter.currentlyNoItemsExist')
+			}}</n8n-text>
+		</div>
+
+		<div
+			v-for="property in getProperties"
+			:key="property.name"
+			class="fixed-collection-parameter-property"
+		>
+			<n8n-input-label
+				v-if="property.displayName !== '' && parameter.options && parameter.options.length !== 1"
+				:label="$locale.nodeText().inputLabelDisplayName(property, path)"
+				:underline="true"
+				size="small"
+				color="text-dark"
+			/>
+			<div v-if="multipleValues">
+				<div
+					v-for="(_, index) in mutableValues[property.name]"
+					:key="property.name + index"
+					class="parameter-item"
+				>
+					<div
+						:class="index ? 'border-top-dashed parameter-item-wrapper ' : 'parameter-item-wrapper'"
+					>
+						<div v-if="!isReadOnly" class="delete-option">
+							<n8n-icon-button
+								type="tertiary"
+								text
+								size="mini"
+								icon="trash"
+								:title="$locale.baseText('fixedCollectionParameter.deleteItem')"
+								@click="deleteOption(property.name, index)"
+							></n8n-icon-button>
+							<n8n-icon-button
+								v-if="sortable && index !== 0"
+								type="tertiary"
+								text
+								size="mini"
+								icon="angle-up"
+								:title="$locale.baseText('fixedCollectionParameter.moveUp')"
+								@click="moveOptionUp(property.name, index)"
+							></n8n-icon-button>
+							<n8n-icon-button
+								v-if="sortable && index !== mutableValues[property.name].length - 1"
+								type="tertiary"
+								text
+								size="mini"
+								icon="angle-down"
+								:title="$locale.baseText('fixedCollectionParameter.moveDown')"
+								@click="moveOptionDown(property.name, index)"
+							></n8n-icon-button>
+						</div>
+						<Suspense>
+							<ParameterInputList
+								:parameters="property.values"
+								:node-values="nodeValues"
+								:path="getPropertyPath(property.name, index)"
+								:hide-delete="true"
+								:is-read-only="isReadOnly"
+								@value-changed="valueChanged"
+							/>
+						</Suspense>
+					</div>
+				</div>
+			</div>
+			<div v-else class="parameter-item">
+				<div class="parameter-item-wrapper">
+					<div v-if="!isReadOnly" class="delete-option">
+						<n8n-icon-button
+							type="tertiary"
+							text
+							size="mini"
+							icon="trash"
+							:title="$locale.baseText('fixedCollectionParameter.deleteItem')"
+							@click="deleteOption(property.name)"
+						></n8n-icon-button>
+					</div>
+					<ParameterInputList
+						:parameters="property.values"
+						:node-values="nodeValues"
+						:path="getPropertyPath(property.name)"
+						:is-read-only="isReadOnly"
+						class="parameter-item"
+						:hide-delete="true"
+						@value-changed="valueChanged"
+					/>
+				</div>
+			</div>
+		</div>
+
+		<div v-if="parameterOptions.length > 0 && !isReadOnly" class="controls">
+			<n8n-button
+				v-if="parameter.options && parameter.options.length === 1"
+				type="tertiary"
+				block
+				data-test-id="fixed-collection-add"
+				:label="getPlaceholderText"
+				@click="optionSelected(parameter.options[0].name)"
+			/>
+			<div v-else class="add-option">
+				<n8n-select
+					v-model="selectedOption"
+					:placeholder="getPlaceholderText"
+					size="small"
+					filterable
+					@update:model-value="optionSelected"
+				>
+					<n8n-option
+						v-for="item in parameterOptions"
+						:key="item.name"
+						:label="$locale.nodeText().collectionOptionDisplayName(parameter, item, path)"
+						:value="item.name"
+					></n8n-option>
+				</n8n-select>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style scoped lang="scss">
 .fixed-collection-parameter {
 	padding-left: var(--spacing-s);
diff --git a/packages/editor-ui/src/components/GoBackButton.vue b/packages/editor-ui/src/components/GoBackButton.vue
index 87c964959fe8c..889067d5fa19a 100644
--- a/packages/editor-ui/src/components/GoBackButton.vue
+++ b/packages/editor-ui/src/components/GoBackButton.vue
@@ -1,10 +1,3 @@
-<template>
-	<div :class="$style.wrapper" @click="navigateTo">
-		<font-awesome-icon :class="$style.icon" icon="arrow-left" />
-		<div :class="$style.text" v-text="$locale.baseText('template.buttons.goBackButton')" />
-	</div>
-</template>
-
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
 import { VIEWS } from '@/constants';
@@ -16,6 +9,13 @@ const navigateTo = () => {
 };
 </script>
 
+<template>
+	<div :class="$style.wrapper" @click="navigateTo">
+		<font-awesome-icon :class="$style.icon" icon="arrow-left" />
+		<div :class="$style.text" v-text="$locale.baseText('template.buttons.goBackButton')" />
+	</div>
+</template>
+
 <style lang="scss" module>
 .wrapper {
 	display: flex;
diff --git a/packages/editor-ui/src/components/HoverableNodeIcon.vue b/packages/editor-ui/src/components/HoverableNodeIcon.vue
index f5ae0630ff495..b30894ceb10b5 100644
--- a/packages/editor-ui/src/components/HoverableNodeIcon.vue
+++ b/packages/editor-ui/src/components/HoverableNodeIcon.vue
@@ -1,44 +1,3 @@
-<template>
-	<div
-		:class="$style.wrapper"
-		:style="iconStyleData"
-		@click="() => $emit('click')"
-		@mouseover="showTooltip = true"
-		@mouseleave="showTooltip = false"
-	>
-		<div :class="$style.tooltip">
-			<n8n-tooltip placement="top" :visible="showTooltip">
-				<template #content>
-					<div v-text="nodeType.displayName"></div>
-				</template>
-				<span />
-			</n8n-tooltip>
-		</div>
-		<div v-if="nodeIconData !== null" :class="$style.icon" title="">
-			<div :class="$style.iconWrapper" :style="iconStyleData">
-				<div v-if="nodeIconData !== null" :class="$style.icon">
-					<img
-						v-if="nodeIconData.type === 'file'"
-						:src="nodeIconData.fileBuffer || nodeIconData.path"
-						:style="imageStyleData"
-					/>
-					<font-awesome-icon
-						v-else
-						:icon="nodeIconData.icon || nodeIconData.path"
-						:style="fontStyleData"
-					/>
-				</div>
-				<div v-else class="node-icon-placeholder">
-					{{ nodeType !== null ? nodeType.displayName.charAt(0) : '?' }}
-				</div>
-			</div>
-		</div>
-		<div v-else :class="$style.placeholder">
-			{{ nodeType !== null ? nodeType.displayName.charAt(0) : '?' }}
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { type StyleValue, defineComponent, type PropType } from 'vue';
 
@@ -151,6 +110,47 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div
+		:class="$style.wrapper"
+		:style="iconStyleData"
+		@click="() => $emit('click')"
+		@mouseover="showTooltip = true"
+		@mouseleave="showTooltip = false"
+	>
+		<div :class="$style.tooltip">
+			<n8n-tooltip placement="top" :visible="showTooltip">
+				<template #content>
+					<div v-text="nodeType.displayName"></div>
+				</template>
+				<span />
+			</n8n-tooltip>
+		</div>
+		<div v-if="nodeIconData !== null" :class="$style.icon" title="">
+			<div :class="$style.iconWrapper" :style="iconStyleData">
+				<div v-if="nodeIconData !== null" :class="$style.icon">
+					<img
+						v-if="nodeIconData.type === 'file'"
+						:src="nodeIconData.fileBuffer || nodeIconData.path"
+						:style="imageStyleData"
+					/>
+					<font-awesome-icon
+						v-else
+						:icon="nodeIconData.icon || nodeIconData.path"
+						:style="fontStyleData"
+					/>
+				</div>
+				<div v-else class="node-icon-placeholder">
+					{{ nodeType !== null ? nodeType.displayName.charAt(0) : '?' }}
+				</div>
+			</div>
+		</div>
+		<div v-else :class="$style.placeholder">
+			{{ nodeType !== null ? nodeType.displayName.charAt(0) : '?' }}
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .wrapper {
 	cursor: pointer;
diff --git a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
index 1c90a3870f9a7..c4c730cde7079 100644
--- a/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
+++ b/packages/editor-ui/src/components/HtmlEditor/HtmlEditor.vue
@@ -1,10 +1,3 @@
-<template>
-	<div :class="$style.editor">
-		<div ref="htmlEditor" data-test-id="html-editor-container"></div>
-		<slot name="suffix" />
-	</div>
-</template>
-
 <script setup lang="ts">
 import { history } from '@codemirror/commands';
 import {
@@ -247,6 +240,13 @@ onBeforeUnmount(() => {
 });
 </script>
 
+<template>
+	<div :class="$style.editor">
+		<div ref="htmlEditor" data-test-id="html-editor-container"></div>
+		<slot name="suffix" />
+	</div>
+</template>
+
 <style lang="scss" module>
 .editor {
 	height: 100%;
diff --git a/packages/editor-ui/src/components/ImportCurlModal.vue b/packages/editor-ui/src/components/ImportCurlModal.vue
index 77939b5032c87..4a1ff64282431 100644
--- a/packages/editor-ui/src/components/ImportCurlModal.vue
+++ b/packages/editor-ui/src/components/ImportCurlModal.vue
@@ -1,44 +1,3 @@
-<template>
-	<Modal
-		width="700px"
-		:title="i18n.baseText('importCurlModal.title')"
-		:event-bus="modalBus"
-		:name="IMPORT_CURL_MODAL_KEY"
-		:center="true"
-	>
-		<template #content>
-			<div :class="$style.container">
-				<N8nInputLabel :label="i18n.baseText('importCurlModal.input.label')" color="text-dark">
-					<N8nInput
-						ref="inputRef"
-						:model-value="curlCommand"
-						type="textarea"
-						:rows="5"
-						:placeholder="i18n.baseText('importCurlModal.input.placeholder')"
-						@update:model-value="onInput"
-						@focus="$event.target.select()"
-					/>
-				</N8nInputLabel>
-			</div>
-		</template>
-		<template #footer>
-			<div :class="$style.modalFooter">
-				<N8nNotice
-					:class="$style.notice"
-					:content="i18n.baseText('ImportCurlModal.notice.content')"
-				/>
-				<div>
-					<N8nButton
-						float="right"
-						:label="i18n.baseText('importCurlModal.button.label')"
-						@click="onImport"
-					/>
-				</div>
-			</div>
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts" setup>
 import Modal from '@/components/Modal.vue';
 import { IMPORT_CURL_MODAL_KEY } from '@/constants';
@@ -116,6 +75,47 @@ async function onImport() {
 }
 </script>
 
+<template>
+	<Modal
+		width="700px"
+		:title="i18n.baseText('importCurlModal.title')"
+		:event-bus="modalBus"
+		:name="IMPORT_CURL_MODAL_KEY"
+		:center="true"
+	>
+		<template #content>
+			<div :class="$style.container">
+				<N8nInputLabel :label="i18n.baseText('importCurlModal.input.label')" color="text-dark">
+					<N8nInput
+						ref="inputRef"
+						:model-value="curlCommand"
+						type="textarea"
+						:rows="5"
+						:placeholder="i18n.baseText('importCurlModal.input.placeholder')"
+						@update:model-value="onInput"
+						@focus="$event.target.select()"
+					/>
+				</N8nInputLabel>
+			</div>
+		</template>
+		<template #footer>
+			<div :class="$style.modalFooter">
+				<N8nNotice
+					:class="$style.notice"
+					:content="i18n.baseText('ImportCurlModal.notice.content')"
+				/>
+				<div>
+					<N8nButton
+						float="right"
+						:label="i18n.baseText('importCurlModal.button.label')"
+						@click="onImport"
+					/>
+				</div>
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style module lang="scss">
 .modalFooter {
 	justify-content: space-between;
diff --git a/packages/editor-ui/src/components/InlineNameEdit.vue b/packages/editor-ui/src/components/InlineNameEdit.vue
index 020e422c538f8..6c9e2f4a41122 100644
--- a/packages/editor-ui/src/components/InlineNameEdit.vue
+++ b/packages/editor-ui/src/components/InlineNameEdit.vue
@@ -1,35 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<span v-if="readonly" :class="$style.headline">
-			{{ modelValue }}
-		</span>
-		<div
-			v-else
-			:class="[$style.headline, $style['headline-editable']]"
-			@keydown.stop
-			@click="enableNameEdit"
-		>
-			<div v-if="!isNameEdit">
-				<span>{{ modelValue }}</span>
-				<i><font-awesome-icon icon="pen" /></i>
-			</div>
-			<div v-else :class="$style.nameInput">
-				<n8n-input
-					ref="nameInput"
-					:model-value="modelValue"
-					size="xlarge"
-					:maxlength="64"
-					@update:model-value="onNameEdit"
-					@change="disableNameEdit"
-				/>
-			</div>
-		</div>
-		<div v-if="!isNameEdit && subtitle" :class="$style.subtitle">
-			{{ subtitle }}
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { nextTick, ref } from 'vue';
 import { useToast } from '@/composables/useToast';
@@ -79,6 +47,38 @@ const disableNameEdit = () => {
 onClickOutside(nameInput, disableNameEdit);
 </script>
 
+<template>
+	<div :class="$style.container">
+		<span v-if="readonly" :class="$style.headline">
+			{{ modelValue }}
+		</span>
+		<div
+			v-else
+			:class="[$style.headline, $style['headline-editable']]"
+			@keydown.stop
+			@click="enableNameEdit"
+		>
+			<div v-if="!isNameEdit">
+				<span>{{ modelValue }}</span>
+				<i><font-awesome-icon icon="pen" /></i>
+			</div>
+			<div v-else :class="$style.nameInput">
+				<n8n-input
+					ref="nameInput"
+					:model-value="modelValue"
+					size="xlarge"
+					:maxlength="64"
+					@update:model-value="onNameEdit"
+					@change="disableNameEdit"
+				/>
+			</div>
+		</div>
+		<div v-if="!isNameEdit && subtitle" :class="$style.subtitle">
+			{{ subtitle }}
+		</div>
+	</div>
+</template>
+
 <style module lang="scss">
 .container {
 	display: flex;
diff --git a/packages/editor-ui/src/components/InlineTextEdit.vue b/packages/editor-ui/src/components/InlineTextEdit.vue
index 722f51891a8b3..2a2ab61484462 100644
--- a/packages/editor-ui/src/components/InlineTextEdit.vue
+++ b/packages/editor-ui/src/components/InlineTextEdit.vue
@@ -1,25 +1,3 @@
-<template>
-	<span class="inline-edit" @keydown.stop>
-		<span v-if="isEditEnabled && !isDisabled">
-			<ExpandableInputEdit
-				v-model="newValue"
-				:placeholder="placeholder"
-				:maxlength="maxLength"
-				:autofocus="true"
-				:event-bus="inputBus"
-				@update:model-value="onInput"
-				@esc="onEscape"
-				@blur="onBlur"
-				@enter="submit"
-			/>
-		</span>
-
-		<span v-else class="preview" @click="onClick">
-			<ExpandableInputPreview :model-value="previewValue || modelValue" />
-		</span>
-	</span>
-</template>
-
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import ExpandableInputEdit from '@/components/ExpandableInput/ExpandableInputEdit.vue';
@@ -100,6 +78,28 @@ function onEscape() {
 }
 </script>
 
+<template>
+	<span class="inline-edit" @keydown.stop>
+		<span v-if="isEditEnabled && !isDisabled">
+			<ExpandableInputEdit
+				v-model="newValue"
+				:placeholder="placeholder"
+				:maxlength="maxLength"
+				:autofocus="true"
+				:event-bus="inputBus"
+				@update:model-value="onInput"
+				@esc="onEscape"
+				@blur="onBlur"
+				@enter="submit"
+			/>
+		</span>
+
+		<span v-else class="preview" @click="onClick">
+			<ExpandableInputPreview :model-value="previewValue || modelValue" />
+		</span>
+	</span>
+</template>
+
 <style lang="scss" scoped>
 .preview {
 	cursor: pointer;
diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index 3b7b1432ac5f0..135d228c51531 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -1,138 +1,3 @@
-<template>
-	<RunData
-		:node="currentNode"
-		:nodes="isMappingMode ? rootNodesParents : parentNodes"
-		:workflow="workflow"
-		:run-index="runIndex"
-		:linked-runs="linkedRuns"
-		:can-link-runs="!mappedNode && canLinkRuns"
-		:too-much-data-title="$locale.baseText('ndv.input.tooMuchData.title')"
-		:no-data-in-branch-message="$locale.baseText('ndv.input.noOutputDataInBranch')"
-		:is-executing="isExecutingPrevious"
-		:executing-message="$locale.baseText('ndv.input.executingPrevious')"
-		:push-ref="pushRef"
-		:override-outputs="connectedCurrentNodeOutputs"
-		:mapping-enabled="isMappingEnabled"
-		:distance-from-active="currentNodeDepth"
-		:is-production-execution-preview="isProductionExecutionPreview"
-		:is-pane-active="isPaneActive"
-		pane-type="input"
-		data-test-id="ndv-input-panel"
-		@activate-pane="activatePane"
-		@item-hover="$emit('itemHover', $event)"
-		@link-run="onLinkRun"
-		@unlink-run="onUnlinkRun"
-		@run-change="onRunIndexChange"
-		@table-mounted="$emit('tableMounted', $event)"
-		@search="$emit('search', $event)"
-	>
-		<template #header>
-			<div :class="$style.titleSection">
-				<span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
-				<n8n-radio-buttons
-					v-if="isActiveNodeConfig && !readOnly"
-					:options="inputModes"
-					:model-value="inputMode"
-					@update:model-value="onInputModeChange"
-				/>
-			</div>
-		</template>
-		<template #input-select>
-			<InputNodeSelect
-				v-if="parentNodes.length && currentNodeName"
-				:model-value="currentNodeName"
-				:workflow="workflow"
-				:nodes="parentNodes"
-				@update:model-value="onInputNodeChange"
-			/>
-		</template>
-		<template v-if="isMappingMode" #before-data>
-			<!--
-						Hide the run linking buttons for both input and ouput panels when in 'Mapping Mode' because the run indices wouldn't match.
-						Although this is not the most elegant solution, it's straightforward and simpler than introducing a new props and logic to handle this.
-				-->
-			<component :is="'style'">button.linkRun { display: none }</component>
-			<div :class="$style.mappedNode">
-				<InputNodeSelect
-					:model-value="mappedNode"
-					:workflow="workflow"
-					:nodes="rootNodesParents"
-					@update:model-value="onMappedNodeSelected"
-				/>
-			</div>
-		</template>
-		<template #node-not-run>
-			<div
-				v-if="(isActiveNodeConfig && rootNode) || parentNodes.length"
-				:class="$style.noOutputData"
-			>
-				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
-					$locale.baseText('ndv.input.noOutputData.title')
-				}}</n8n-text>
-				<n8n-tooltip v-if="!readOnly" :visible="showDraggableHint && showDraggableHintWithDelay">
-					<template #content>
-						<div
-							v-html="
-								$locale.baseText('dataMapping.dragFromPreviousHint', {
-									interpolate: { name: focusedMappableInput },
-								})
-							"
-						></div>
-					</template>
-					<NodeExecuteButton
-						type="secondary"
-						hide-icon
-						:transparent="true"
-						:node-name="isActiveNodeConfig ? rootNode : currentNodeName ?? ''"
-						:label="$locale.baseText('ndv.input.noOutputData.executePrevious')"
-						telemetry-source="inputs"
-						data-test-id="execute-previous-node"
-						@execute="onNodeExecute"
-					/>
-				</n8n-tooltip>
-				<n8n-text v-if="!readOnly" tag="div" size="small">
-					{{ $locale.baseText('ndv.input.noOutputData.hint') }}
-				</n8n-text>
-			</div>
-			<div v-else :class="$style.notConnected">
-				<div>
-					<WireMeUp />
-				</div>
-				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
-					$locale.baseText('ndv.input.notConnected.title')
-				}}</n8n-text>
-				<n8n-text tag="div">
-					{{ $locale.baseText('ndv.input.notConnected.message') }}
-					<a
-						href="https://docs.n8n.io/workflows/connections/"
-						target="_blank"
-						@click="onConnectionHelpClick"
-					>
-						{{ $locale.baseText('ndv.input.notConnected.learnMore') }}
-					</a>
-				</n8n-text>
-			</div>
-		</template>
-
-		<template #no-output-data>
-			<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
-				$locale.baseText('ndv.input.noOutputData')
-			}}</n8n-text>
-		</template>
-
-		<template #recovered-artificial-output-data>
-			<div :class="$style.recoveredOutputData">
-				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
-					$locale.baseText('executionDetails.executionFailed.recoveredNodeTitle')
-				}}</n8n-text>
-				<n8n-text>
-					{{ $locale.baseText('executionDetails.executionFailed.recoveredNodeMessage') }}
-				</n8n-text>
-			</div>
-		</template>
-	</RunData>
-</template>
-
 <script lang="ts">
 import type { INodeUi } from '@/Interface';
 import {
@@ -468,6 +333,141 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<RunData
+		:node="currentNode"
+		:nodes="isMappingMode ? rootNodesParents : parentNodes"
+		:workflow="workflow"
+		:run-index="runIndex"
+		:linked-runs="linkedRuns"
+		:can-link-runs="!mappedNode && canLinkRuns"
+		:too-much-data-title="$locale.baseText('ndv.input.tooMuchData.title')"
+		:no-data-in-branch-message="$locale.baseText('ndv.input.noOutputDataInBranch')"
+		:is-executing="isExecutingPrevious"
+		:executing-message="$locale.baseText('ndv.input.executingPrevious')"
+		:push-ref="pushRef"
+		:override-outputs="connectedCurrentNodeOutputs"
+		:mapping-enabled="isMappingEnabled"
+		:distance-from-active="currentNodeDepth"
+		:is-production-execution-preview="isProductionExecutionPreview"
+		:is-pane-active="isPaneActive"
+		pane-type="input"
+		data-test-id="ndv-input-panel"
+		@activate-pane="activatePane"
+		@item-hover="$emit('itemHover', $event)"
+		@link-run="onLinkRun"
+		@unlink-run="onUnlinkRun"
+		@run-change="onRunIndexChange"
+		@table-mounted="$emit('tableMounted', $event)"
+		@search="$emit('search', $event)"
+	>
+		<template #header>
+			<div :class="$style.titleSection">
+				<span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
+				<n8n-radio-buttons
+					v-if="isActiveNodeConfig && !readOnly"
+					:options="inputModes"
+					:model-value="inputMode"
+					@update:model-value="onInputModeChange"
+				/>
+			</div>
+		</template>
+		<template #input-select>
+			<InputNodeSelect
+				v-if="parentNodes.length && currentNodeName"
+				:model-value="currentNodeName"
+				:workflow="workflow"
+				:nodes="parentNodes"
+				@update:model-value="onInputNodeChange"
+			/>
+		</template>
+		<template v-if="isMappingMode" #before-data>
+			<!--
+						Hide the run linking buttons for both input and ouput panels when in 'Mapping Mode' because the run indices wouldn't match.
+						Although this is not the most elegant solution, it's straightforward and simpler than introducing a new props and logic to handle this.
+				-->
+			<component :is="'style'">button.linkRun { display: none }</component>
+			<div :class="$style.mappedNode">
+				<InputNodeSelect
+					:model-value="mappedNode"
+					:workflow="workflow"
+					:nodes="rootNodesParents"
+					@update:model-value="onMappedNodeSelected"
+				/>
+			</div>
+		</template>
+		<template #node-not-run>
+			<div
+				v-if="(isActiveNodeConfig && rootNode) || parentNodes.length"
+				:class="$style.noOutputData"
+			>
+				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+					$locale.baseText('ndv.input.noOutputData.title')
+				}}</n8n-text>
+				<n8n-tooltip v-if="!readOnly" :visible="showDraggableHint && showDraggableHintWithDelay">
+					<template #content>
+						<div
+							v-html="
+								$locale.baseText('dataMapping.dragFromPreviousHint', {
+									interpolate: { name: focusedMappableInput },
+								})
+							"
+						></div>
+					</template>
+					<NodeExecuteButton
+						type="secondary"
+						hide-icon
+						:transparent="true"
+						:node-name="isActiveNodeConfig ? rootNode : currentNodeName ?? ''"
+						:label="$locale.baseText('ndv.input.noOutputData.executePrevious')"
+						telemetry-source="inputs"
+						data-test-id="execute-previous-node"
+						@execute="onNodeExecute"
+					/>
+				</n8n-tooltip>
+				<n8n-text v-if="!readOnly" tag="div" size="small">
+					{{ $locale.baseText('ndv.input.noOutputData.hint') }}
+				</n8n-text>
+			</div>
+			<div v-else :class="$style.notConnected">
+				<div>
+					<WireMeUp />
+				</div>
+				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+					$locale.baseText('ndv.input.notConnected.title')
+				}}</n8n-text>
+				<n8n-text tag="div">
+					{{ $locale.baseText('ndv.input.notConnected.message') }}
+					<a
+						href="https://docs.n8n.io/workflows/connections/"
+						target="_blank"
+						@click="onConnectionHelpClick"
+					>
+						{{ $locale.baseText('ndv.input.notConnected.learnMore') }}
+					</a>
+				</n8n-text>
+			</div>
+		</template>
+
+		<template #no-output-data>
+			<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+				$locale.baseText('ndv.input.noOutputData')
+			}}</n8n-text>
+		</template>
+
+		<template #recovered-artificial-output-data>
+			<div :class="$style.recoveredOutputData">
+				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+					$locale.baseText('executionDetails.executionFailed.recoveredNodeTitle')
+				}}</n8n-text>
+				<n8n-text>
+					{{ $locale.baseText('executionDetails.executionFailed.recoveredNodeMessage') }}
+				</n8n-text>
+			</div>
+		</template>
+	</RunData>
+</template>
+
 <style lang="scss" module>
 .mappedNode {
 	padding: 0 var(--spacing-s) var(--spacing-s);
diff --git a/packages/editor-ui/src/components/IntersectionObserved.vue b/packages/editor-ui/src/components/IntersectionObserved.vue
index 3be8dde88eb1b..4fa53e311ca57 100644
--- a/packages/editor-ui/src/components/IntersectionObserved.vue
+++ b/packages/editor-ui/src/components/IntersectionObserved.vue
@@ -1,9 +1,3 @@
-<template>
-	<span ref="observed">
-		<slot></slot>
-	</span>
-</template>
-
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
@@ -37,3 +31,9 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<span ref="observed">
+		<slot></slot>
+	</span>
+</template>
diff --git a/packages/editor-ui/src/components/IntersectionObserver.vue b/packages/editor-ui/src/components/IntersectionObserver.vue
index 437c7baf7e3b0..cebfb89b7f1b2 100644
--- a/packages/editor-ui/src/components/IntersectionObserver.vue
+++ b/packages/editor-ui/src/components/IntersectionObserver.vue
@@ -1,9 +1,3 @@
-<template>
-	<div ref="root">
-		<slot></slot>
-	</div>
-</template>
-
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
@@ -70,3 +64,9 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<div ref="root">
+		<slot></slot>
+	</div>
+</template>
diff --git a/packages/editor-ui/src/components/InviteUsersModal.vue b/packages/editor-ui/src/components/InviteUsersModal.vue
index fd9c70443c15c..aa698371e62fb 100644
--- a/packages/editor-ui/src/components/InviteUsersModal.vue
+++ b/packages/editor-ui/src/components/InviteUsersModal.vue
@@ -1,65 +1,3 @@
-<template>
-	<Modal
-		:name="INVITE_USER_MODAL_KEY"
-		:title="
-			$locale.baseText(
-				showInviteUrls ? 'settings.users.copyInviteUrls' : 'settings.users.inviteNewUsers',
-			)
-		"
-		:center="true"
-		width="460px"
-		:event-bus="modalBus"
-		@enter="onSubmit"
-	>
-		<template #content>
-			<n8n-notice v-if="!isAdvancedPermissionsEnabled">
-				<i18n-t keypath="settings.users.advancedPermissions.warning">
-					<template #link>
-						<n8n-link size="small" @click="goToUpgradeAdvancedPermissions">
-							{{ $locale.baseText('settings.users.advancedPermissions.warning.link') }}
-						</n8n-link>
-					</template>
-				</i18n-t>
-			</n8n-notice>
-			<div v-if="showInviteUrls">
-				<n8n-users-list :users="invitedUsers">
-					<template #actions="{ user }">
-						<n8n-tooltip>
-							<template #content>
-								{{ $locale.baseText('settings.users.inviteLink.copy') }}
-							</template>
-							<n8n-icon-button
-								icon="link"
-								type="tertiary"
-								data-test-id="copy-invite-link-button"
-								:data-invite-link="user.inviteAcceptUrl"
-								@click="onCopyInviteLink(user)"
-							></n8n-icon-button>
-						</n8n-tooltip>
-					</template>
-				</n8n-users-list>
-			</div>
-			<n8n-form-inputs
-				v-else
-				:inputs="config"
-				:event-bus="formBus"
-				:column-view="true"
-				@update="onInput"
-				@submit="onSubmit"
-			/>
-		</template>
-		<template v-if="!showInviteUrls" #footer>
-			<n8n-button
-				:loading="loading"
-				:disabled="!enabledButton"
-				:label="buttonLabel"
-				float="right"
-				@click="onSubmitClick"
-			/>
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -344,3 +282,65 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<Modal
+		:name="INVITE_USER_MODAL_KEY"
+		:title="
+			$locale.baseText(
+				showInviteUrls ? 'settings.users.copyInviteUrls' : 'settings.users.inviteNewUsers',
+			)
+		"
+		:center="true"
+		width="460px"
+		:event-bus="modalBus"
+		@enter="onSubmit"
+	>
+		<template #content>
+			<n8n-notice v-if="!isAdvancedPermissionsEnabled">
+				<i18n-t keypath="settings.users.advancedPermissions.warning">
+					<template #link>
+						<n8n-link size="small" @click="goToUpgradeAdvancedPermissions">
+							{{ $locale.baseText('settings.users.advancedPermissions.warning.link') }}
+						</n8n-link>
+					</template>
+				</i18n-t>
+			</n8n-notice>
+			<div v-if="showInviteUrls">
+				<n8n-users-list :users="invitedUsers">
+					<template #actions="{ user }">
+						<n8n-tooltip>
+							<template #content>
+								{{ $locale.baseText('settings.users.inviteLink.copy') }}
+							</template>
+							<n8n-icon-button
+								icon="link"
+								type="tertiary"
+								data-test-id="copy-invite-link-button"
+								:data-invite-link="user.inviteAcceptUrl"
+								@click="onCopyInviteLink(user)"
+							></n8n-icon-button>
+						</n8n-tooltip>
+					</template>
+				</n8n-users-list>
+			</div>
+			<n8n-form-inputs
+				v-else
+				:inputs="config"
+				:event-bus="formBus"
+				:column-view="true"
+				@update="onInput"
+				@submit="onSubmit"
+			/>
+		</template>
+		<template v-if="!showInviteUrls" #footer>
+			<n8n-button
+				:loading="loading"
+				:disabled="!enabledButton"
+				:label="buttonLabel"
+				float="right"
+				@click="onSubmitClick"
+			/>
+		</template>
+	</Modal>
+</template>
diff --git a/packages/editor-ui/src/components/JsEditor/JsEditor.vue b/packages/editor-ui/src/components/JsEditor/JsEditor.vue
index 5a5f2cb411878..2c89c83e08e5d 100644
--- a/packages/editor-ui/src/components/JsEditor/JsEditor.vue
+++ b/packages/editor-ui/src/components/JsEditor/JsEditor.vue
@@ -1,10 +1,3 @@
-<template>
-	<div :class="$style.editor" :style="isReadOnly ? 'opacity: 0.7' : ''">
-		<div ref="jsEditorRef" class="ph-no-capture js-editor"></div>
-		<slot name="suffix" />
-	</div>
-</template>
-
 <script setup lang="ts">
 import { history, toggleComment } from '@codemirror/commands';
 import { javascript } from '@codemirror/lang-javascript';
@@ -124,6 +117,13 @@ const extensions = computed(() => {
 });
 </script>
 
+<template>
+	<div :class="$style.editor" :style="isReadOnly ? 'opacity: 0.7' : ''">
+		<div ref="jsEditorRef" class="ph-no-capture js-editor"></div>
+		<slot name="suffix" />
+	</div>
+</template>
+
 <style lang="scss" module>
 .editor {
 	height: 100%;
diff --git a/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue b/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue
index 8649f5f8d4dc1..f1116da097c37 100644
--- a/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue
+++ b/packages/editor-ui/src/components/JsonEditor/JsonEditor.vue
@@ -1,10 +1,3 @@
-<template>
-	<div :class="$style.editor">
-		<div ref="jsonEditorRef" class="ph-no-capture json-editor"></div>
-		<slot name="suffix" />
-	</div>
-</template>
-
 <script setup lang="ts">
 import { history } from '@codemirror/commands';
 import { json, jsonParseLinter } from '@codemirror/lang-json';
@@ -115,6 +108,13 @@ function destroyEditor() {
 }
 </script>
 
+<template>
+	<div :class="$style.editor">
+		<div ref="jsonEditorRef" class="ph-no-capture json-editor"></div>
+		<slot name="suffix" />
+	</div>
+</template>
+
 <style lang="scss" module>
 .editor {
 	height: 100%;
diff --git a/packages/editor-ui/src/components/Logo.vue b/packages/editor-ui/src/components/Logo.vue
index ecd6fa2aae8c1..77e811f35cc3e 100644
--- a/packages/editor-ui/src/components/Logo.vue
+++ b/packages/editor-ui/src/components/Logo.vue
@@ -1,7 +1,3 @@
-<template>
-	<img :src="logoPath" :class="$style.img" alt="n8n.io" />
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -21,6 +17,10 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<img :src="logoPath" :class="$style.img" alt="n8n.io" />
+</template>
+
 <style lang="scss" module>
 .img {
 	height: 32px;
diff --git a/packages/editor-ui/src/components/MainHeader/TabBar.vue b/packages/editor-ui/src/components/MainHeader/TabBar.vue
index 4385538d38224..0e78f480a99a7 100644
--- a/packages/editor-ui/src/components/MainHeader/TabBar.vue
+++ b/packages/editor-ui/src/components/MainHeader/TabBar.vue
@@ -1,19 +1,3 @@
-<template>
-	<div
-		v-if="items"
-		:class="{
-			[$style.container]: true,
-			['tab-bar-container']: true,
-		}"
-	>
-		<N8nRadioButtons
-			:model-value="modelValue"
-			:options="items"
-			@update:model-value="onUpdateModelValue"
-		/>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import { MAIN_HEADER_TABS } from '@/constants';
 import type { ITabBarItem } from '@/Interface';
@@ -37,6 +21,22 @@ function onUpdateModelValue(tab: MAIN_HEADER_TABS, event: MouseEvent): void {
 }
 </script>
 
+<template>
+	<div
+		v-if="items"
+		:class="{
+			[$style.container]: true,
+			['tab-bar-container']: true,
+		}"
+	>
+		<N8nRadioButtons
+			:model-value="modelValue"
+			:options="items"
+			@update:model-value="onUpdateModelValue"
+		/>
+	</div>
+</template>
+
 <style module lang="scss">
 .container {
 	position: absolute;
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index cc8502a8a7ca7..3cff24734f429 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -1,102 +1,3 @@
-<template>
-	<div
-		id="side-menu"
-		:class="{
-			['side-menu']: true,
-			[$style.sideMenu]: true,
-			[$style.sideMenuCollapsed]: isCollapsed,
-		}"
-	>
-		<div
-			id="collapse-change-button"
-			:class="['clickable', $style.sideMenuCollapseButton]"
-			@click="toggleCollapse"
-		>
-			<n8n-icon v-if="isCollapsed" icon="chevron-right" size="xsmall" class="ml-5xs" />
-			<n8n-icon v-else icon="chevron-left" size="xsmall" class="mr-5xs" />
-		</div>
-		<n8n-menu :items="mainMenuItems" :collapsed="isCollapsed" @select="handleSelect">
-			<template #header>
-				<div :class="$style.logo">
-					<img :src="logoPath" data-test-id="n8n-logo" :class="$style.icon" alt="n8n" />
-				</div>
-				<ProjectNavigation
-					:collapsed="isCollapsed"
-					:plan-name="cloudPlanStore.currentPlanData?.displayName"
-				/>
-			</template>
-
-			<template #beforeLowerMenu>
-				<BecomeTemplateCreatorCta v-if="fullyExpanded && !userIsTrialing" />
-			</template>
-			<template #menuSuffix>
-				<div>
-					<div
-						v-if="hasVersionUpdates"
-						data-test-id="version-updates-panel-button"
-						:class="$style.updates"
-						@click="openUpdatesPanel"
-					>
-						<div :class="$style.giftContainer">
-							<GiftNotificationIcon />
-						</div>
-						<n8n-text
-							:class="{ ['ml-xs']: true, [$style.expanded]: fullyExpanded }"
-							color="text-base"
-						>
-							{{ nextVersions.length > 99 ? '99+' : nextVersions.length }} update{{
-								nextVersions.length > 1 ? 's' : ''
-							}}
-						</n8n-text>
-					</div>
-					<MainSidebarSourceControl :is-collapsed="isCollapsed" />
-				</div>
-			</template>
-			<template v-if="showUserArea" #footer>
-				<div :class="$style.userArea">
-					<div class="ml-3xs" data-test-id="main-sidebar-user-menu">
-						<!-- This dropdown is only enabled when sidebar is collapsed -->
-						<el-dropdown placement="right-end" trigger="click" @command="onUserActionToggle">
-							<div :class="{ [$style.avatar]: true, ['clickable']: isCollapsed }">
-								<n8n-avatar
-									:first-name="usersStore.currentUser?.firstName"
-									:last-name="usersStore.currentUser?.lastName"
-									size="small"
-								/>
-							</div>
-							<template v-if="isCollapsed" #dropdown>
-								<el-dropdown-menu>
-									<el-dropdown-item command="settings">
-										{{ $locale.baseText('settings') }}
-									</el-dropdown-item>
-									<el-dropdown-item command="logout">
-										{{ $locale.baseText('auth.signout') }}
-									</el-dropdown-item>
-								</el-dropdown-menu>
-							</template>
-						</el-dropdown>
-					</div>
-					<div
-						:class="{ ['ml-2xs']: true, [$style.userName]: true, [$style.expanded]: fullyExpanded }"
-					>
-						<n8n-text size="small" :bold="true" color="text-dark">{{
-							usersStore.currentUser?.fullName
-						}}</n8n-text>
-					</div>
-					<div :class="{ [$style.userActions]: true, [$style.expanded]: fullyExpanded }">
-						<n8n-action-dropdown
-							:items="userMenuItems"
-							placement="top-start"
-							data-test-id="user-menu"
-							@select="onUserActionToggle"
-						/>
-					</div>
-				</div>
-			</template>
-		</n8n-menu>
-	</div>
-</template>
-
 <script lang="ts">
 import type { IExecutionResponse, IMenuItem, IVersion } from '@/Interface';
 import GiftNotificationIcon from './GiftNotificationIcon.vue';
@@ -413,6 +314,105 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div
+		id="side-menu"
+		:class="{
+			['side-menu']: true,
+			[$style.sideMenu]: true,
+			[$style.sideMenuCollapsed]: isCollapsed,
+		}"
+	>
+		<div
+			id="collapse-change-button"
+			:class="['clickable', $style.sideMenuCollapseButton]"
+			@click="toggleCollapse"
+		>
+			<n8n-icon v-if="isCollapsed" icon="chevron-right" size="xsmall" class="ml-5xs" />
+			<n8n-icon v-else icon="chevron-left" size="xsmall" class="mr-5xs" />
+		</div>
+		<n8n-menu :items="mainMenuItems" :collapsed="isCollapsed" @select="handleSelect">
+			<template #header>
+				<div :class="$style.logo">
+					<img :src="logoPath" data-test-id="n8n-logo" :class="$style.icon" alt="n8n" />
+				</div>
+				<ProjectNavigation
+					:collapsed="isCollapsed"
+					:plan-name="cloudPlanStore.currentPlanData?.displayName"
+				/>
+			</template>
+
+			<template #beforeLowerMenu>
+				<BecomeTemplateCreatorCta v-if="fullyExpanded && !userIsTrialing" />
+			</template>
+			<template #menuSuffix>
+				<div>
+					<div
+						v-if="hasVersionUpdates"
+						data-test-id="version-updates-panel-button"
+						:class="$style.updates"
+						@click="openUpdatesPanel"
+					>
+						<div :class="$style.giftContainer">
+							<GiftNotificationIcon />
+						</div>
+						<n8n-text
+							:class="{ ['ml-xs']: true, [$style.expanded]: fullyExpanded }"
+							color="text-base"
+						>
+							{{ nextVersions.length > 99 ? '99+' : nextVersions.length }} update{{
+								nextVersions.length > 1 ? 's' : ''
+							}}
+						</n8n-text>
+					</div>
+					<MainSidebarSourceControl :is-collapsed="isCollapsed" />
+				</div>
+			</template>
+			<template v-if="showUserArea" #footer>
+				<div :class="$style.userArea">
+					<div class="ml-3xs" data-test-id="main-sidebar-user-menu">
+						<!-- This dropdown is only enabled when sidebar is collapsed -->
+						<el-dropdown placement="right-end" trigger="click" @command="onUserActionToggle">
+							<div :class="{ [$style.avatar]: true, ['clickable']: isCollapsed }">
+								<n8n-avatar
+									:first-name="usersStore.currentUser?.firstName"
+									:last-name="usersStore.currentUser?.lastName"
+									size="small"
+								/>
+							</div>
+							<template v-if="isCollapsed" #dropdown>
+								<el-dropdown-menu>
+									<el-dropdown-item command="settings">
+										{{ $locale.baseText('settings') }}
+									</el-dropdown-item>
+									<el-dropdown-item command="logout">
+										{{ $locale.baseText('auth.signout') }}
+									</el-dropdown-item>
+								</el-dropdown-menu>
+							</template>
+						</el-dropdown>
+					</div>
+					<div
+						:class="{ ['ml-2xs']: true, [$style.userName]: true, [$style.expanded]: fullyExpanded }"
+					>
+						<n8n-text size="small" :bold="true" color="text-dark">{{
+							usersStore.currentUser?.fullName
+						}}</n8n-text>
+					</div>
+					<div :class="{ [$style.userActions]: true, [$style.expanded]: fullyExpanded }">
+						<n8n-action-dropdown
+							:items="userMenuItems"
+							placement="top-start"
+							data-test-id="user-menu"
+							@select="onUserActionToggle"
+						/>
+					</div>
+				</div>
+			</template>
+		</n8n-menu>
+	</div>
+</template>
+
 <style lang="scss" module>
 .sideMenu {
 	position: relative;
diff --git a/packages/editor-ui/src/components/MfaSetupModal.vue b/packages/editor-ui/src/components/MfaSetupModal.vue
index b9fd149c862f9..663108ffed03f 100644
--- a/packages/editor-ui/src/components/MfaSetupModal.vue
+++ b/packages/editor-ui/src/components/MfaSetupModal.vue
@@ -1,135 +1,3 @@
-<template>
-	<Modal
-		width="460px"
-		height="80%"
-		max-height="640px"
-		:title="
-			!showRecoveryCodes
-				? i18.baseText('mfa.setup.step1.title')
-				: i18.baseText('mfa.setup.step2.title')
-		"
-		:event-bus="modalBus"
-		:name="MFA_SETUP_MODAL_KEY_NAME"
-		:center="true"
-		:loading="loadingQrCode"
-	>
-		<template #content>
-			<div v-if="!showRecoveryCodes" :class="[$style.container, $style.modalContent]">
-				<div :class="$style.textContainer">
-					<n8n-text size="large" color="text-dark" :bold="true">{{
-						i18.baseText('mfa.setup.step1.instruction1.title')
-					}}</n8n-text>
-				</div>
-				<div>
-					<n8n-text size="medium" :bold="false">
-						<i18n-t keypath="mfa.setup.step1.instruction1.subtitle" tag="span">
-							<template #part1>
-								{{ i18.baseText('mfa.setup.step1.instruction1.subtitle.part1') }}
-							</template>
-							<template #part2>
-								<a
-									:class="$style.secret"
-									data-test-id="mfa-secret-button"
-									@click="onCopySecretToClipboard"
-									>{{ i18.baseText('mfa.setup.step1.instruction1.subtitle.part2') }}</a
-								>
-							</template>
-						</i18n-t>
-					</n8n-text>
-				</div>
-				<div :class="$style.qrContainer">
-					<QrcodeVue :value="qrCode" :size="150" level="H" />
-				</div>
-				<div :class="$style.textContainer">
-					<n8n-text size="large" color="text-dark" :bold="true">{{
-						i18.baseText('mfa.setup.step1.instruction2.title')
-					}}</n8n-text>
-				</div>
-				<div :class="[$style.form, infoTextErrorMessage ? $style.error : '']">
-					<n8n-input-label
-						size="medium"
-						:bold="false"
-						:class="$style.labelTooltip"
-						:label="i18.baseText('mfa.setup.step1.input.label')"
-					>
-						<n8n-input
-							v-model="authenticatorCode"
-							type="text"
-							:maxlength="6"
-							:placeholder="$locale.baseText('mfa.code.input.placeholder')"
-							:required="true"
-							data-test-id="mfa-token-input"
-							@input="onInput"
-						/>
-					</n8n-input-label>
-					<div :class="[$style.infoText, 'mt-4xs']">
-						<span size="small" v-text="infoTextErrorMessage"></span>
-					</div>
-				</div>
-			</div>
-			<div v-else :class="$style.container">
-				<div>
-					<n8n-text size="medium" :bold="false">{{
-						i18.baseText('mfa.setup.step2.description')
-					}}</n8n-text>
-				</div>
-				<div :class="$style.recoveryCodesContainer">
-					<div v-for="recoveryCode in recoveryCodes" :key="recoveryCode">
-						<n8n-text size="medium">{{ recoveryCode }}</n8n-text>
-					</div>
-				</div>
-				<n8n-info-tip :bold="false" :class="$style['edit-mode-footer-infotip']">
-					<i18n-t keypath="mfa.setup.step2.infobox.description" tag="span">
-						<template #part1>
-							{{ i18.baseText('mfa.setup.step2.infobox.description.part1') }}
-						</template>
-						<template #part2>
-							<n8n-text size="small" :bold="true" :class="$style.loseAccessText">
-								{{ i18.baseText('mfa.setup.step2.infobox.description.part2') }}
-							</n8n-text>
-						</template>
-					</i18n-t>
-				</n8n-info-tip>
-				<div>
-					<n8n-button
-						type="primary"
-						icon="download"
-						float="right"
-						:label="i18.baseText('mfa.setup.step2.button.download')"
-						data-test-id="mfa-recovery-codes-button"
-						@click="onDownloadClick"
-					/>
-				</div>
-			</div>
-		</template>
-		<template #footer>
-			<div v-if="showRecoveryCodes">
-				<div>
-					<n8n-button
-						float="right"
-						:disabled="!recoveryCodesDownloaded"
-						:label="i18.baseText('mfa.setup.step2.button.save')"
-						size="large"
-						data-test-id="mfa-save-button"
-						@click="onSetupClick"
-					/>
-				</div>
-			</div>
-			<div v-else>
-				<div>
-					<n8n-button
-						float="right"
-						:label="i18.baseText('mfa.setup.step1.button.continue')"
-						size="large"
-						:disabled="!readyToSubmit"
-						@click="onSaveClick"
-					/>
-				</div>
-			</div>
-		</template>
-	</Modal>
-</template>
-
 <script setup lang="ts">
 import Modal from './Modal.vue';
 import {
@@ -278,6 +146,138 @@ onMounted(async () => {
 // #endregion
 </script>
 
+<template>
+	<Modal
+		width="460px"
+		height="80%"
+		max-height="640px"
+		:title="
+			!showRecoveryCodes
+				? i18.baseText('mfa.setup.step1.title')
+				: i18.baseText('mfa.setup.step2.title')
+		"
+		:event-bus="modalBus"
+		:name="MFA_SETUP_MODAL_KEY_NAME"
+		:center="true"
+		:loading="loadingQrCode"
+	>
+		<template #content>
+			<div v-if="!showRecoveryCodes" :class="[$style.container, $style.modalContent]">
+				<div :class="$style.textContainer">
+					<n8n-text size="large" color="text-dark" :bold="true">{{
+						i18.baseText('mfa.setup.step1.instruction1.title')
+					}}</n8n-text>
+				</div>
+				<div>
+					<n8n-text size="medium" :bold="false">
+						<i18n-t keypath="mfa.setup.step1.instruction1.subtitle" tag="span">
+							<template #part1>
+								{{ i18.baseText('mfa.setup.step1.instruction1.subtitle.part1') }}
+							</template>
+							<template #part2>
+								<a
+									:class="$style.secret"
+									data-test-id="mfa-secret-button"
+									@click="onCopySecretToClipboard"
+									>{{ i18.baseText('mfa.setup.step1.instruction1.subtitle.part2') }}</a
+								>
+							</template>
+						</i18n-t>
+					</n8n-text>
+				</div>
+				<div :class="$style.qrContainer">
+					<QrcodeVue :value="qrCode" :size="150" level="H" />
+				</div>
+				<div :class="$style.textContainer">
+					<n8n-text size="large" color="text-dark" :bold="true">{{
+						i18.baseText('mfa.setup.step1.instruction2.title')
+					}}</n8n-text>
+				</div>
+				<div :class="[$style.form, infoTextErrorMessage ? $style.error : '']">
+					<n8n-input-label
+						size="medium"
+						:bold="false"
+						:class="$style.labelTooltip"
+						:label="i18.baseText('mfa.setup.step1.input.label')"
+					>
+						<n8n-input
+							v-model="authenticatorCode"
+							type="text"
+							:maxlength="6"
+							:placeholder="$locale.baseText('mfa.code.input.placeholder')"
+							:required="true"
+							data-test-id="mfa-token-input"
+							@input="onInput"
+						/>
+					</n8n-input-label>
+					<div :class="[$style.infoText, 'mt-4xs']">
+						<span size="small" v-text="infoTextErrorMessage"></span>
+					</div>
+				</div>
+			</div>
+			<div v-else :class="$style.container">
+				<div>
+					<n8n-text size="medium" :bold="false">{{
+						i18.baseText('mfa.setup.step2.description')
+					}}</n8n-text>
+				</div>
+				<div :class="$style.recoveryCodesContainer">
+					<div v-for="recoveryCode in recoveryCodes" :key="recoveryCode">
+						<n8n-text size="medium">{{ recoveryCode }}</n8n-text>
+					</div>
+				</div>
+				<n8n-info-tip :bold="false" :class="$style['edit-mode-footer-infotip']">
+					<i18n-t keypath="mfa.setup.step2.infobox.description" tag="span">
+						<template #part1>
+							{{ i18.baseText('mfa.setup.step2.infobox.description.part1') }}
+						</template>
+						<template #part2>
+							<n8n-text size="small" :bold="true" :class="$style.loseAccessText">
+								{{ i18.baseText('mfa.setup.step2.infobox.description.part2') }}
+							</n8n-text>
+						</template>
+					</i18n-t>
+				</n8n-info-tip>
+				<div>
+					<n8n-button
+						type="primary"
+						icon="download"
+						float="right"
+						:label="i18.baseText('mfa.setup.step2.button.download')"
+						data-test-id="mfa-recovery-codes-button"
+						@click="onDownloadClick"
+					/>
+				</div>
+			</div>
+		</template>
+		<template #footer>
+			<div v-if="showRecoveryCodes">
+				<div>
+					<n8n-button
+						float="right"
+						:disabled="!recoveryCodesDownloaded"
+						:label="i18.baseText('mfa.setup.step2.button.save')"
+						size="large"
+						data-test-id="mfa-save-button"
+						@click="onSetupClick"
+					/>
+				</div>
+			</div>
+			<div v-else>
+				<div>
+					<n8n-button
+						float="right"
+						:label="i18.baseText('mfa.setup.step1.button.continue')"
+						size="large"
+						:disabled="!readyToSubmit"
+						@click="onSaveClick"
+					/>
+				</div>
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style module lang="scss">
 .container {
 	display: flex;
diff --git a/packages/editor-ui/src/components/Modal.vue b/packages/editor-ui/src/components/Modal.vue
index 141e93a521472..ec83c76bc78a2 100644
--- a/packages/editor-ui/src/components/Modal.vue
+++ b/packages/editor-ui/src/components/Modal.vue
@@ -1,52 +1,3 @@
-<template>
-	<el-dialog
-		:model-value="uiStore.modalsById[name].open"
-		:before-close="onCloseDialog"
-		:class="{
-			'dialog-wrapper': true,
-			scrollable: scrollable,
-			[getCustomClass()]: true,
-		}"
-		:center="center"
-		:width="width"
-		:show-close="showClose"
-		:close-on-click-modal="closeOnClickModal"
-		:close-on-press-escape="closeOnPressEscape"
-		:style="styles"
-		:append-to-body="appendToBody"
-		:data-test-id="`${name}-modal`"
-		:modal-class="center ? $style.center : ''"
-	>
-		<template v-if="$slots.header" #header>
-			<slot v-if="!loading" name="header" />
-		</template>
-		<template v-else-if="title" #title>
-			<div :class="centerTitle ? $style.centerTitle : ''">
-				<div v-if="title">
-					<n8n-heading tag="h1" size="xlarge">{{ title }}</n8n-heading>
-				</div>
-				<div v-if="subtitle" :class="$style.subtitle">
-					<n8n-heading tag="h3" size="small" color="text-light">{{ subtitle }}</n8n-heading>
-				</div>
-			</div>
-		</template>
-		<div
-			class="modal-content"
-			@keydown.stop
-			@keydown.enter="handleEnter"
-			@keydown.esc="onCloseDialog"
-		>
-			<slot v-if="!loading" name="content" />
-			<div v-else :class="$style.loader">
-				<n8n-spinner />
-			</div>
-		</div>
-		<div v-if="!loading && $slots.footer" :class="$style.footer">
-			<slot name="footer" :close="closeDialog" />
-		</div>
-	</el-dialog>
-</template>
-
 <script lang="ts">
 import { ElDialog } from 'element-plus';
 import { defineComponent } from 'vue';
@@ -209,6 +160,55 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<el-dialog
+		:model-value="uiStore.modalsById[name].open"
+		:before-close="onCloseDialog"
+		:class="{
+			'dialog-wrapper': true,
+			scrollable: scrollable,
+			[getCustomClass()]: true,
+		}"
+		:center="center"
+		:width="width"
+		:show-close="showClose"
+		:close-on-click-modal="closeOnClickModal"
+		:close-on-press-escape="closeOnPressEscape"
+		:style="styles"
+		:append-to-body="appendToBody"
+		:data-test-id="`${name}-modal`"
+		:modal-class="center ? $style.center : ''"
+	>
+		<template v-if="$slots.header" #header>
+			<slot v-if="!loading" name="header" />
+		</template>
+		<template v-else-if="title" #title>
+			<div :class="centerTitle ? $style.centerTitle : ''">
+				<div v-if="title">
+					<n8n-heading tag="h1" size="xlarge">{{ title }}</n8n-heading>
+				</div>
+				<div v-if="subtitle" :class="$style.subtitle">
+					<n8n-heading tag="h3" size="small" color="text-light">{{ subtitle }}</n8n-heading>
+				</div>
+			</div>
+		</template>
+		<div
+			class="modal-content"
+			@keydown.stop
+			@keydown.enter="handleEnter"
+			@keydown.esc="onCloseDialog"
+		>
+			<slot v-if="!loading" name="content" />
+			<div v-else :class="$style.loader">
+				<n8n-spinner />
+			</div>
+		</div>
+		<div v-if="!loading && $slots.footer" :class="$style.footer">
+			<slot name="footer" :close="closeDialog" />
+		</div>
+	</el-dialog>
+</template>
+
 <style lang="scss">
 .dialog-wrapper {
 	&.el-dialog {
diff --git a/packages/editor-ui/src/components/ModalDrawer.vue b/packages/editor-ui/src/components/ModalDrawer.vue
index 454866ae751b1..c143abc20180a 100644
--- a/packages/editor-ui/src/components/ModalDrawer.vue
+++ b/packages/editor-ui/src/components/ModalDrawer.vue
@@ -1,21 +1,3 @@
-<template>
-	<ElDrawer
-		:direction="direction"
-		:model-value="uiStore.modalsById[name].open"
-		:size="width"
-		:before-close="close"
-		:modal="modal"
-		:wrapper-closable="wrapperClosable"
-	>
-		<template #header>
-			<slot name="header" />
-		</template>
-		<span @keydown.stop>
-			<slot name="content" />
-		</span>
-	</ElDrawer>
-</template>
-
 <script lang="ts">
 import { useUIStore } from '@/stores/ui.store';
 import { mapStores } from 'pinia';
@@ -101,6 +83,24 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<ElDrawer
+		:direction="direction"
+		:model-value="uiStore.modalsById[name].open"
+		:size="width"
+		:before-close="close"
+		:modal="modal"
+		:wrapper-closable="wrapperClosable"
+	>
+		<template #header>
+			<slot name="header" />
+		</template>
+		<span @keydown.stop>
+			<slot name="content" />
+		</span>
+	</ElDrawer>
+</template>
+
 <style lang="scss">
 .el-drawer__header {
 	margin: 0;
diff --git a/packages/editor-ui/src/components/ModalRoot.vue b/packages/editor-ui/src/components/ModalRoot.vue
index 541630fa3b298..13e6582f008b5 100644
--- a/packages/editor-ui/src/components/ModalRoot.vue
+++ b/packages/editor-ui/src/components/ModalRoot.vue
@@ -1,16 +1,3 @@
-<template>
-	<div v-if="uiStore.modalsById[name].open || keepAlive">
-		<slot
-			:modal-name="name"
-			:active="uiStore.isModalActiveById[name]"
-			:open="uiStore.modalsById[name].open"
-			:active-id="uiStore.modalsById[name].activeId"
-			:mode="uiStore.modalsById[name].mode"
-			:data="uiStore.modalsById[name].data"
-		></slot>
-	</div>
-</template>
-
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
@@ -34,3 +21,16 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<div v-if="uiStore.modalsById[name].open || keepAlive">
+		<slot
+			:modal-name="name"
+			:active="uiStore.isModalActiveById[name]"
+			:open="uiStore.modalsById[name].open"
+			:active-id="uiStore.modalsById[name].activeId"
+			:mode="uiStore.modalsById[name].mode"
+			:data="uiStore.modalsById[name].data"
+		></slot>
+	</div>
+</template>
diff --git a/packages/editor-ui/src/components/MultipleParameter.vue b/packages/editor-ui/src/components/MultipleParameter.vue
index 36a37b85d6abb..a02b341983ff3 100644
--- a/packages/editor-ui/src/components/MultipleParameter.vue
+++ b/packages/editor-ui/src/components/MultipleParameter.vue
@@ -1,88 +1,3 @@
-<template>
-	<div class="duplicate-parameter" @keydown.stop>
-		<n8n-input-label
-			:label="$locale.nodeText().inputLabelDisplayName(parameter, path)"
-			:tooltip-text="$locale.nodeText().inputLabelDescription(parameter, path)"
-			:underline="true"
-			size="small"
-			color="text-dark"
-		/>
-
-		<div
-			v-for="(value, index) in mutableValues"
-			:key="index"
-			class="duplicate-parameter-item"
-			:class="parameter.type"
-		>
-			<div v-if="!isReadOnly" class="delete-item clickable">
-				<font-awesome-icon
-					icon="trash"
-					:title="$locale.baseText('multipleParameter.deleteItem')"
-					@click="deleteItem(index)"
-				/>
-				<div v-if="sortable">
-					<font-awesome-icon
-						v-if="index !== 0"
-						icon="angle-up"
-						class="clickable"
-						:title="$locale.baseText('multipleParameter.moveUp')"
-						@click="moveOptionUp(index)"
-					/>
-					<font-awesome-icon
-						v-if="index !== mutableValues.length - 1"
-						icon="angle-down"
-						class="clickable"
-						:title="$locale.baseText('multipleParameter.moveDown')"
-						@click="moveOptionDown(index)"
-					/>
-				</div>
-			</div>
-			<div v-if="parameter.type === 'collection'">
-				<CollectionParameter
-					:parameter="parameter"
-					:values="value"
-					:node-values="nodeValues"
-					:path="getPath(index)"
-					:hide-delete="hideDelete"
-					:is-read-only="isReadOnly"
-					@value-changed="valueChanged"
-				/>
-			</div>
-			<div v-else>
-				<ParameterInputFull
-					class="duplicate-parameter-input-item"
-					:parameter="parameter"
-					:value="value"
-					:display-options="true"
-					:hide-label="true"
-					:path="getPath(index)"
-					input-size="small"
-					:is-read-only="isReadOnly"
-					@update="valueChanged"
-				/>
-			</div>
-		</div>
-
-		<div class="add-item-wrapper">
-			<div
-				v-if="(mutableValues && mutableValues.length === 0) || isReadOnly"
-				class="no-items-exist"
-			>
-				<n8n-text size="small">{{
-					$locale.baseText('multipleParameter.currentlyNoItemsExist')
-				}}</n8n-text>
-			</div>
-			<n8n-button
-				v-if="!isReadOnly"
-				type="tertiary"
-				block
-				:label="addButtonText"
-				@click="addItem()"
-			/>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
@@ -208,6 +123,91 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div class="duplicate-parameter" @keydown.stop>
+		<n8n-input-label
+			:label="$locale.nodeText().inputLabelDisplayName(parameter, path)"
+			:tooltip-text="$locale.nodeText().inputLabelDescription(parameter, path)"
+			:underline="true"
+			size="small"
+			color="text-dark"
+		/>
+
+		<div
+			v-for="(value, index) in mutableValues"
+			:key="index"
+			class="duplicate-parameter-item"
+			:class="parameter.type"
+		>
+			<div v-if="!isReadOnly" class="delete-item clickable">
+				<font-awesome-icon
+					icon="trash"
+					:title="$locale.baseText('multipleParameter.deleteItem')"
+					@click="deleteItem(index)"
+				/>
+				<div v-if="sortable">
+					<font-awesome-icon
+						v-if="index !== 0"
+						icon="angle-up"
+						class="clickable"
+						:title="$locale.baseText('multipleParameter.moveUp')"
+						@click="moveOptionUp(index)"
+					/>
+					<font-awesome-icon
+						v-if="index !== mutableValues.length - 1"
+						icon="angle-down"
+						class="clickable"
+						:title="$locale.baseText('multipleParameter.moveDown')"
+						@click="moveOptionDown(index)"
+					/>
+				</div>
+			</div>
+			<div v-if="parameter.type === 'collection'">
+				<CollectionParameter
+					:parameter="parameter"
+					:values="value"
+					:node-values="nodeValues"
+					:path="getPath(index)"
+					:hide-delete="hideDelete"
+					:is-read-only="isReadOnly"
+					@value-changed="valueChanged"
+				/>
+			</div>
+			<div v-else>
+				<ParameterInputFull
+					class="duplicate-parameter-input-item"
+					:parameter="parameter"
+					:value="value"
+					:display-options="true"
+					:hide-label="true"
+					:path="getPath(index)"
+					input-size="small"
+					:is-read-only="isReadOnly"
+					@update="valueChanged"
+				/>
+			</div>
+		</div>
+
+		<div class="add-item-wrapper">
+			<div
+				v-if="(mutableValues && mutableValues.length === 0) || isReadOnly"
+				class="no-items-exist"
+			>
+				<n8n-text size="small">{{
+					$locale.baseText('multipleParameter.currentlyNoItemsExist')
+				}}</n8n-text>
+			</div>
+			<n8n-button
+				v-if="!isReadOnly"
+				type="tertiary"
+				block
+				:label="addButtonText"
+				@click="addItem()"
+			/>
+		</div>
+	</div>
+</template>
+
 <style scoped lang="scss">
 .duplicate-parameter {
 	:deep(.button) {
diff --git a/packages/editor-ui/src/components/NDVFloatingNodes.vue b/packages/editor-ui/src/components/NDVFloatingNodes.vue
index 5a9d9b41ec376..10b165409c3f9 100644
--- a/packages/editor-ui/src/components/NDVFloatingNodes.vue
+++ b/packages/editor-ui/src/components/NDVFloatingNodes.vue
@@ -1,41 +1,3 @@
-<template>
-	<aside :class="$style.floatingNodes">
-		<ul
-			v-for="connectionGroup in connectionGroups"
-			:key="connectionGroup"
-			:class="[$style.nodesList, $style[connectionGroup]]"
-		>
-			<template v-for="{ node, nodeType } in connectedNodes[connectionGroup]">
-				<n8n-tooltip
-					v-if="node && nodeType"
-					:key="node.name"
-					:placement="tooltipPositionMapper[connectionGroup]"
-					:teleported="false"
-					:offset="60"
-				>
-					<template #content>{{ node.name }}</template>
-
-					<li
-						:class="$style.connectedNode"
-						data-test-id="floating-node"
-						:data-node-name="node.name"
-						:data-node-placement="connectionGroup"
-						@click="emit('switchSelectedNode', node.name)"
-					>
-						<NodeIcon
-							:node-type="nodeType"
-							:node-name="node.name"
-							:tooltip-position="tooltipPositionMapper[connectionGroup]"
-							:size="35"
-							circle
-						/>
-					</li>
-				</n8n-tooltip>
-			</template>
-		</ul>
-	</aside>
-</template>
-
 <script setup lang="ts">
 import type { INodeUi } from '@/Interface';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
@@ -137,6 +99,44 @@ defineExpose({
 });
 </script>
 
+<template>
+	<aside :class="$style.floatingNodes">
+		<ul
+			v-for="connectionGroup in connectionGroups"
+			:key="connectionGroup"
+			:class="[$style.nodesList, $style[connectionGroup]]"
+		>
+			<template v-for="{ node, nodeType } in connectedNodes[connectionGroup]">
+				<n8n-tooltip
+					v-if="node && nodeType"
+					:key="node.name"
+					:placement="tooltipPositionMapper[connectionGroup]"
+					:teleported="false"
+					:offset="60"
+				>
+					<template #content>{{ node.name }}</template>
+
+					<li
+						:class="$style.connectedNode"
+						data-test-id="floating-node"
+						:data-node-name="node.name"
+						:data-node-placement="connectionGroup"
+						@click="emit('switchSelectedNode', node.name)"
+					>
+						<NodeIcon
+							:node-type="nodeType"
+							:node-name="node.name"
+							:tooltip-position="tooltipPositionMapper[connectionGroup]"
+							:size="35"
+							circle
+						/>
+					</li>
+				</n8n-tooltip>
+			</template>
+		</ul>
+	</aside>
+</template>
+
 <style lang="scss" module>
 .floatingNodes {
 	position: fixed;
diff --git a/packages/editor-ui/src/components/NDVSubConnections.vue b/packages/editor-ui/src/components/NDVSubConnections.vue
index 2b421f6ff8844..7aa4a4c861896 100644
--- a/packages/editor-ui/src/components/NDVSubConnections.vue
+++ b/packages/editor-ui/src/components/NDVSubConnections.vue
@@ -1,127 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<div
-			:class="$style.connections"
-			:style="`--possible-connections: ${possibleConnections.length}`"
-		>
-			<div
-				v-for="connection in possibleConnections"
-				:key="connection.type"
-				:data-test-id="`subnode-connection-group-${connection.type}`"
-			>
-				<div :class="$style.connectionType">
-					<span
-						:class="{
-							[$style.connectionLabel]: true,
-							[$style.hasIssues]: hasInputIssues(connection.type),
-						}"
-						v-text="`${connection.displayName}${connection.required ? ' *' : ''}`"
-					/>
-					<OnClickOutside @trigger="expandConnectionGroup(connection.type, false)">
-						<div
-							ref="connectedNodesWrapper"
-							:class="{
-								[$style.connectedNodesWrapper]: true,
-								[$style.connectedNodesWrapperExpanded]: expandedGroups.includes(connection.type),
-							}"
-							:style="`--nodes-length: ${connectedNodes[connection.type].length}`"
-							@click="expandConnectionGroup(connection.type, true)"
-						>
-							<div
-								v-if="
-									connectedNodes[connection.type].length >= 1
-										? connection.maxConnections !== 1
-										: true
-								"
-								:class="{
-									[$style.plusButton]: true,
-									[$style.hasIssues]: hasInputIssues(connection.type),
-								}"
-								@click="onPlusClick(connection.type)"
-							>
-								<n8n-tooltip
-									placement="top"
-									:teleported="true"
-									:offset="10"
-									:show-after="300"
-									:disabled="
-										shouldShowConnectionTooltip(connection.type) &&
-										connectedNodes[connection.type].length >= 1
-									"
-								>
-									<template #content>
-										Add {{ connection.displayName }}
-										<template v-if="hasInputIssues(connection.type)">
-											<TitledList
-												:title="`${$locale.baseText('node.issues')}:`"
-												:items="nodeInputIssues[connection.type]"
-											/>
-										</template>
-									</template>
-									<n8n-icon-button
-										size="medium"
-										icon="plus"
-										type="tertiary"
-										:data-test-id="`add-subnode-${connection.type}`"
-									/>
-								</n8n-tooltip>
-							</div>
-							<div
-								v-if="connectedNodes[connection.type].length > 0"
-								:class="{
-									[$style.connectedNodes]: true,
-									[$style.connectedNodesMultiple]: connectedNodes[connection.type].length > 1,
-								}"
-							>
-								<div
-									v-for="(node, index) in connectedNodes[connection.type]"
-									:key="node.node.name"
-									:class="{ [$style.nodeWrapper]: true, [$style.hasIssues]: node.issues }"
-									data-test-id="floating-subnode"
-									:data-node-name="node.node.name"
-									:style="`--node-index: ${index}`"
-								>
-									<n8n-tooltip
-										:key="node.node.name"
-										placement="top"
-										:teleported="true"
-										:offset="10"
-										:show-after="300"
-										:disabled="shouldShowConnectionTooltip(connection.type)"
-									>
-										<template #content>
-											{{ node.node.name }}
-											<template v-if="node.issues">
-												<TitledList
-													:title="`${$locale.baseText('node.issues')}:`"
-													:items="node.issues"
-												/>
-											</template>
-										</template>
-
-										<div
-											:class="$style.connectedNode"
-											@click="onNodeClick(node.node.name, connection.type)"
-										>
-											<NodeIcon
-												:node-type="node.nodeType"
-												:node-name="node.node.name"
-												tooltip-position="top"
-												:size="20"
-												circle
-											/>
-										</div>
-									</n8n-tooltip>
-								</div>
-							</div>
-						</div>
-					</OnClickOutside>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import type { INodeUi } from '@/Interface';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
@@ -310,6 +186,130 @@ defineExpose({
 });
 </script>
 
+<template>
+	<div :class="$style.container">
+		<div
+			:class="$style.connections"
+			:style="`--possible-connections: ${possibleConnections.length}`"
+		>
+			<div
+				v-for="connection in possibleConnections"
+				:key="connection.type"
+				:data-test-id="`subnode-connection-group-${connection.type}`"
+			>
+				<div :class="$style.connectionType">
+					<span
+						:class="{
+							[$style.connectionLabel]: true,
+							[$style.hasIssues]: hasInputIssues(connection.type),
+						}"
+						v-text="`${connection.displayName}${connection.required ? ' *' : ''}`"
+					/>
+					<OnClickOutside @trigger="expandConnectionGroup(connection.type, false)">
+						<div
+							ref="connectedNodesWrapper"
+							:class="{
+								[$style.connectedNodesWrapper]: true,
+								[$style.connectedNodesWrapperExpanded]: expandedGroups.includes(connection.type),
+							}"
+							:style="`--nodes-length: ${connectedNodes[connection.type].length}`"
+							@click="expandConnectionGroup(connection.type, true)"
+						>
+							<div
+								v-if="
+									connectedNodes[connection.type].length >= 1
+										? connection.maxConnections !== 1
+										: true
+								"
+								:class="{
+									[$style.plusButton]: true,
+									[$style.hasIssues]: hasInputIssues(connection.type),
+								}"
+								@click="onPlusClick(connection.type)"
+							>
+								<n8n-tooltip
+									placement="top"
+									:teleported="true"
+									:offset="10"
+									:show-after="300"
+									:disabled="
+										shouldShowConnectionTooltip(connection.type) &&
+										connectedNodes[connection.type].length >= 1
+									"
+								>
+									<template #content>
+										Add {{ connection.displayName }}
+										<template v-if="hasInputIssues(connection.type)">
+											<TitledList
+												:title="`${$locale.baseText('node.issues')}:`"
+												:items="nodeInputIssues[connection.type]"
+											/>
+										</template>
+									</template>
+									<n8n-icon-button
+										size="medium"
+										icon="plus"
+										type="tertiary"
+										:data-test-id="`add-subnode-${connection.type}`"
+									/>
+								</n8n-tooltip>
+							</div>
+							<div
+								v-if="connectedNodes[connection.type].length > 0"
+								:class="{
+									[$style.connectedNodes]: true,
+									[$style.connectedNodesMultiple]: connectedNodes[connection.type].length > 1,
+								}"
+							>
+								<div
+									v-for="(node, index) in connectedNodes[connection.type]"
+									:key="node.node.name"
+									:class="{ [$style.nodeWrapper]: true, [$style.hasIssues]: node.issues }"
+									data-test-id="floating-subnode"
+									:data-node-name="node.node.name"
+									:style="`--node-index: ${index}`"
+								>
+									<n8n-tooltip
+										:key="node.node.name"
+										placement="top"
+										:teleported="true"
+										:offset="10"
+										:show-after="300"
+										:disabled="shouldShowConnectionTooltip(connection.type)"
+									>
+										<template #content>
+											{{ node.node.name }}
+											<template v-if="node.issues">
+												<TitledList
+													:title="`${$locale.baseText('node.issues')}:`"
+													:items="node.issues"
+												/>
+											</template>
+										</template>
+
+										<div
+											:class="$style.connectedNode"
+											@click="onNodeClick(node.node.name, connection.type)"
+										>
+											<NodeIcon
+												:node-type="node.nodeType"
+												:node-name="node.node.name"
+												tooltip-position="top"
+												:size="20"
+												circle
+											/>
+										</div>
+									</n8n-tooltip>
+								</div>
+							</div>
+						</div>
+					</OnClickOutside>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 @keyframes horizontal-shake {
 	0% {
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 44372b8261164..3a27f0a7018dd 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -1,12 +1,616 @@
+<script setup lang="ts">
+import { useStorage } from '@/composables/useStorage';
+import {
+	CUSTOM_API_CALL_KEY,
+	LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG,
+	MANUAL_TRIGGER_NODE_TYPE,
+	NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS,
+	SIMULATE_NODE_TYPE,
+	SIMULATE_TRIGGER_NODE_TYPE,
+	WAIT_TIME_UNLIMITED,
+} from '@/constants';
+import type {
+	ConnectionTypes,
+	ExecutionSummary,
+	INodeOutputConfiguration,
+	ITaskData,
+	NodeOperationError,
+	Workflow,
+} from 'n8n-workflow';
+import { NodeConnectionType, NodeHelpers } from 'n8n-workflow';
+import type { StyleValue } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
+import xss from 'xss';
+
+import NodeIcon from '@/components/NodeIcon.vue';
+import TitledList from '@/components/TitledList.vue';
+
+import { useContextMenu } from '@/composables/useContextMenu';
+import { useDebounce } from '@/composables/useDebounce';
+import { useI18n } from '@/composables/useI18n';
+import { useNodeBase } from '@/composables/useNodeBase';
+import { useNodeHelpers } from '@/composables/useNodeHelpers';
+import { usePinnedData } from '@/composables/usePinnedData';
+import { useTelemetry } from '@/composables/useTelemetry';
+import type { INodeUi, XYPosition } from '@/Interface';
+import { useNDVStore } from '@/stores/ndv.store';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { useUIStore } from '@/stores/ui.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import { getTriggerNodeServiceName } from '@/utils/nodeTypesUtils';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
+import { get } from 'lodash-es';
+import { N8nIconButton, useDeviceSupport } from 'n8n-design-system';
+
+type Props = {
+	name: string;
+	instance: BrowserJsPlumbInstance;
+	workflow: Workflow;
+	isReadOnly?: boolean;
+	isActive?: boolean;
+	hideActions?: boolean;
+	disableSelecting?: boolean;
+	showCustomTooltip?: boolean;
+	isProductionExecutionPreview?: boolean;
+	disablePointerEvents?: boolean;
+	hideNodeIssues?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+	isReadOnly: false,
+	isActive: false,
+	hideActions: false,
+	disableSelecting: false,
+	showCustomTooltip: false,
+	isProductionExecutionPreview: false,
+	disablePointerEvents: false,
+	hideNodeIssues: false,
+});
+
+const emit = defineEmits<{
+	run: [data: { name: string; data: ITaskData[]; waiting: boolean }];
+	runWorkflow: [node: string, source: string];
+	removeNode: [node: string];
+	toggleDisableNode: [node: INodeUi];
+}>();
+
+const workflowsStore = useWorkflowsStore();
+const nodeTypesStore = useNodeTypesStore();
+const ndvStore = useNDVStore();
+const uiStore = useUIStore();
+
+const contextMenu = useContextMenu();
+const nodeHelpers = useNodeHelpers();
+const pinnedData = usePinnedData(workflowsStore.getNodeByName(props.name));
+const deviceSupport = useDeviceSupport();
+const { callDebounced } = useDebounce();
+const i18n = useI18n();
+const telemetry = useTelemetry();
+
+const nodeBase = useNodeBase({
+	name: props.name,
+	instance: props.instance,
+	workflowObject: props.workflow,
+	isReadOnly: props.isReadOnly,
+	emit: emit as (event: string, ...args: unknown[]) => void,
+});
+
+const isTouchActive = ref(false);
+const nodeSubtitle = ref('');
+const showTriggerNodeTooltip = ref(false);
+const pinDataDiscoveryTooltipVisible = ref(false);
+const dragging = ref(false);
+
+const node = computed(() => workflowsStore.getNodeByName(props.name));
+const nodeId = computed(() => node.value?.id ?? '');
+const showPinnedDataInfo = computed(
+	() => pinnedData.hasData.value && !props.isProductionExecutionPreview,
+);
+
+const isScheduledGroup = computed(() => nodeType.value?.group.includes('schedule') === true);
+const iconColorDefault = computed(() => {
+	if (isConfigNode.value) {
+		return 'var(--color-text-base)';
+	}
+	return undefined;
+});
+
+const nodeRunData = computed(() => {
+	if (!node.value) return [];
+
+	return workflowsStore.getWorkflowResultDataByNodeName(node.value.name) ?? [];
+});
+
+const hasIssues = computed(() => {
+	if (nodeExecutionStatus.value && ['crashed', 'error'].includes(nodeExecutionStatus.value))
+		return true;
+	if (pinnedData.hasData.value) return false;
+	if (node.value?.issues !== undefined && Object.keys(node.value.issues).length) {
+		return true;
+	}
+	return false;
+});
+
+const workflowDataItems = computed(() => {
+	const workflowResultDataNode = nodeRunData.value;
+	if (workflowResultDataNode === null) {
+		return 0;
+	}
+
+	return workflowResultDataNode.length;
+});
+const canvasOffsetPosition = computed(() => uiStore.nodeViewOffsetPosition);
+
+const getTriggerNodeTooltip = computed(() => {
+	if (nodeType.value !== null && nodeType.value.hasOwnProperty('eventTriggerDescription')) {
+		const nodeName = i18n.shortNodeType(nodeType.value.name);
+		const { eventTriggerDescription } = nodeType.value;
+		return i18n.nodeText().eventTriggerDescription(nodeName, eventTriggerDescription ?? '');
+	} else {
+		return i18n.baseText('node.waitingForYouToCreateAnEventIn', {
+			interpolate: {
+				nodeType: nodeType.value ? getTriggerNodeServiceName(nodeType.value) : '',
+			},
+		});
+	}
+});
+
+const isPollingTypeNode = computed(() => !!nodeType.value?.polling);
+const isExecuting = computed(() => {
+	if (!node.value) return false;
+	return workflowsStore.isNodeExecuting(node.value.name);
+});
+
+const isSingleActiveTriggerNode = computed(() => {
+	const nodes = workflowsStore.workflowTriggerNodes.filter((triggerNode) => {
+		const nodeType = nodeTypesStore.getNodeType(triggerNode.type, triggerNode.typeVersion);
+		return nodeType && nodeType.eventTriggerDescription !== '' && !triggerNode.disabled;
+	});
+
+	return nodes.length === 1;
+});
+
+const isManualTypeNode = computed(() => node.value?.type === MANUAL_TRIGGER_NODE_TYPE);
+
+const isConfigNode = computed(() => {
+	if (!node.value) return false;
+	return nodeTypesStore.isConfigNode(props.workflow, node.value, node.value.type ?? '');
+});
+
+const isConfigurableNode = computed(() => {
+	if (!node.value) return false;
+
+	return nodeTypesStore.isConfigurableNode(props.workflow, node.value, node.value?.type ?? '');
+});
+
+const isTriggerNode = computed(() =>
+	node.value ? nodeTypesStore.isTriggerNode(node.value.type) : false,
+);
+const isTriggerNodeTooltipEmpty = computed(() =>
+	nodeType.value !== null ? nodeType.value.eventTriggerDescription === '' : false,
+);
+const isNodeDisabled = computed(() => node.value?.disabled ?? false);
+const nodeType = computed(
+	() => node.value && nodeTypesStore.getNodeType(node.value.type, node.value.typeVersion),
+);
+const nodeWrapperClass = computed(() => {
+	const classes: Record<string, boolean> = {
+		'node-wrapper': true,
+		'node-wrapper--trigger': isTriggerNode.value,
+		'node-wrapper--configurable': isConfigurableNode.value,
+		'node-wrapper--config': isConfigNode.value,
+	};
+
+	if (nodeBase.outputs.value.length) {
+		const outputTypes = NodeHelpers.getConnectionTypes(nodeBase.outputs.value);
+		const otherOutputs = outputTypes.filter((outputName) => outputName !== NodeConnectionType.Main);
+		if (otherOutputs.length) {
+			otherOutputs.forEach((outputName) => {
+				classes[`node-wrapper--connection-type-${outputName}`] = true;
+			});
+		}
+	}
+
+	return classes;
+});
+
+const nodeWrapperStyles = computed<StyleValue>(() => {
+	const styles: StyleValue = {
+		left: position.value[0] + 'px',
+		top: position.value[1] + 'px',
+	};
+
+	if (node.value && nodeType.value) {
+		const inputs = NodeHelpers.getNodeInputs(props.workflow, node.value, nodeType.value) ?? [];
+		const inputTypes = NodeHelpers.getConnectionTypes(inputs);
+
+		const nonMainInputs = inputTypes.filter((input) => input !== NodeConnectionType.Main);
+		if (nonMainInputs.length) {
+			const requiredNonMainInputs = inputs.filter(
+				(input) => typeof input !== 'string' && input.required,
+			);
+
+			let spacerCount = 0;
+			if (NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS) {
+				const requiredNonMainInputsCount = requiredNonMainInputs.length;
+				const optionalNonMainInputsCount = nonMainInputs.length - requiredNonMainInputsCount;
+				spacerCount = requiredNonMainInputsCount > 0 && optionalNonMainInputsCount > 0 ? 1 : 0;
+			}
+
+			styles['--configurable-node-input-count'] = nonMainInputs.length + spacerCount;
+		}
+
+		const mainInputs = inputTypes.filter((output) => output === NodeConnectionType.Main);
+		styles['--node-main-input-count'] = mainInputs.length;
+
+		let outputs = [] as Array<ConnectionTypes | INodeOutputConfiguration>;
+		if (props.workflow.nodes[node.value.name]) {
+			outputs = NodeHelpers.getNodeOutputs(props.workflow, node.value, nodeType.value);
+		}
+
+		const outputTypes = NodeHelpers.getConnectionTypes(outputs);
+
+		const mainOutputs = outputTypes.filter((output) => output === NodeConnectionType.Main);
+		styles['--node-main-output-count'] = mainOutputs.length;
+	}
+
+	return styles;
+});
+
+const nodeClass = computed(() => {
+	return {
+		'node-box': true,
+		disabled: node.value?.disabled,
+		executing: isExecuting.value,
+	};
+});
+
+const nodeExecutionStatus = computed(() => {
+	const nodeExecutionRunData = workflowsStore.getWorkflowRunData?.[props.name];
+	if (nodeExecutionRunData) {
+		return nodeExecutionRunData.filter(Boolean)[0].executionStatus ?? '';
+	}
+	return '';
+});
+
+const nodeIssues = computed(() => {
+	const issues: string[] = [];
+	const nodeExecutionRunData = workflowsStore.getWorkflowRunData?.[props.name];
+	if (nodeExecutionRunData) {
+		nodeExecutionRunData.forEach((executionRunData) => {
+			if (executionRunData?.error) {
+				const { message, description } = executionRunData.error;
+				const issue = `${message}${description ? ` (${description})` : ''}`;
+				issues.push(xss(issue));
+			}
+		});
+	}
+	if (node.value?.issues !== undefined) {
+		issues.push(...NodeHelpers.nodeIssuesToString(node.value.issues, node.value));
+	}
+	return issues;
+});
+
+const nodeDisabledTitle = computed(() => {
+	return node.value?.disabled ? i18n.baseText('node.enable') : i18n.baseText('node.disable');
+});
+
+const position = computed<XYPosition>(() => (node.value ? node.value.position : [0, 0]));
+const showDisabledLineThrough = computed(
+	() =>
+		!isConfigurableNode.value &&
+		!!(
+			node.value?.disabled &&
+			nodeBase.inputs.value.length === 1 &&
+			nodeBase.outputs.value.length === 1
+		),
+);
+
+const nodeTitle = computed(() => {
+	if (node.value?.name === 'Start') {
+		return i18n.headerText({
+			key: 'headers.start.displayName',
+			fallback: 'Start',
+		});
+	}
+
+	return node.value?.name ?? '';
+});
+
+const waiting = computed(() => {
+	const workflowExecution = workflowsStore.getWorkflowExecution as ExecutionSummary;
+
+	if (workflowExecution?.waitTill) {
+		const lastNodeExecuted = get(workflowExecution, 'data.resultData.lastNodeExecuted');
+		if (props.name === lastNodeExecuted) {
+			const waitDate = new Date(workflowExecution.waitTill);
+			if (waitDate.toISOString() === WAIT_TIME_UNLIMITED) {
+				return i18n.baseText('node.theNodeIsWaitingIndefinitelyForAnIncomingWebhookCall');
+			}
+			return i18n.baseText('node.nodeIsWaitingTill', {
+				interpolate: {
+					date: waitDate.toLocaleDateString(),
+					time: waitDate.toLocaleTimeString(),
+				},
+			});
+		}
+	}
+
+	return undefined;
+});
+
+const workflowRunning = computed(() => uiStore.isActionActive.workflowRunning);
+const nodeStyle = computed<StyleValue>(() => {
+	const returnStyles: StyleValue = {};
+
+	let borderColor = '--color-foreground-xdark';
+
+	if (isConfigurableNode.value || isConfigNode.value) {
+		borderColor = '--color-foreground-dark';
+	}
+
+	if (node.value?.disabled) {
+		borderColor = '--color-foreground-base';
+	} else if (!isExecuting.value) {
+		if (hasIssues.value && !props.hideNodeIssues) {
+			// Do not set red border if there is an issue with the configuration node
+			if (
+				(nodeRunData.value?.[0]?.error as NodeOperationError)?.functionality !==
+				'configuration-node'
+			) {
+				borderColor = '--color-danger';
+				returnStyles['border-width'] = '2px';
+				returnStyles['border-style'] = 'solid';
+			}
+		} else if (!!waiting.value || showPinnedDataInfo.value) {
+			borderColor = '--color-node-pinned-border';
+		} else if (nodeExecutionStatus.value === 'unknown') {
+			borderColor = '--color-foreground-xdark';
+		} else if (workflowDataItems.value) {
+			returnStyles['border-width'] = '2px';
+			returnStyles['border-style'] = 'solid';
+			borderColor = '--color-success';
+		}
+	}
+
+	returnStyles['border-color'] = `var(${borderColor})`;
+
+	return returnStyles;
+});
+
+const isSelected = computed(
+	() => uiStore.getSelectedNodes.find((n) => n.name === node.value?.name) !== undefined,
+);
+
+const shiftOutputCount = computed(() => !!(nodeType.value && nodeBase.outputs.value.length > 2));
+const shouldShowTriggerTooltip = computed(() => {
+	return (
+		!!node.value &&
+		isTriggerNode.value &&
+		!isPollingTypeNode.value &&
+		!pinnedData.hasData.value &&
+		!isNodeDisabled.value &&
+		workflowRunning.value &&
+		workflowDataItems.value === 0 &&
+		isSingleActiveTriggerNode.value &&
+		!isTriggerNodeTooltipEmpty.value &&
+		!hasIssues.value &&
+		!dragging.value
+	);
+});
+
+const isContextMenuOpen = computed(
+	() =>
+		contextMenu.isOpen.value &&
+		contextMenu.target.value?.source === 'node-button' &&
+		contextMenu.target.value.nodeId === node.value?.id,
+);
+
+const iconNodeType = computed(() => {
+	if (node.value?.type === SIMULATE_NODE_TYPE || node.value?.type === SIMULATE_TRIGGER_NODE_TYPE) {
+		const icon = node.value.parameters?.icon as string;
+		const iconValue = props.workflow.expression.getSimpleParameterValue(
+			node.value,
+			icon,
+			'internal',
+			{},
+		);
+		if (iconValue && typeof iconValue === 'string') {
+			return nodeTypesStore.getNodeType(iconValue);
+		}
+	}
+
+	return nodeType.value;
+});
+const hasSeenPinDataTooltip = useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG);
+
+watch(
+	() => props.isActive,
+	(newValue, oldValue) => {
+		if (!newValue && oldValue) {
+			setSubtitle();
+		}
+	},
+);
+
+watch(canvasOffsetPosition, () => {
+	if (showTriggerNodeTooltip.value) {
+		showTriggerNodeTooltip.value = false;
+		setTimeout(() => {
+			showTriggerNodeTooltip.value = shouldShowTriggerTooltip.value;
+		}, 200);
+	}
+
+	if (pinDataDiscoveryTooltipVisible.value) {
+		pinDataDiscoveryTooltipVisible.value = false;
+		setTimeout(() => {
+			pinDataDiscoveryTooltipVisible.value = true;
+		}, 200);
+	}
+});
+
+watch(shouldShowTriggerTooltip, (newValue) => {
+	if (newValue) {
+		setTimeout(() => {
+			showTriggerNodeTooltip.value = shouldShowTriggerTooltip.value;
+		}, 2500);
+	} else {
+		showTriggerNodeTooltip.value = false;
+	}
+});
+
+watch(
+	nodeRunData,
+	(newValue) => {
+		if (!node.value) {
+			return;
+		}
+
+		emit('run', { name: node.value.name, data: newValue, waiting: !!waiting.value });
+	},
+	{ deep: true },
+);
+
+const unwatchWorkflowDataItems = watch(workflowDataItems, (dataItemsCount: number) => {
+	if (!hasSeenPinDataTooltip.value) showPinDataDiscoveryTooltip(dataItemsCount);
+});
+
+onMounted(() => {
+	// Initialize the node
+	if (node.value !== null) {
+		try {
+			nodeBase.addNode(node.value);
+		} catch (error) {
+			// This breaks when new nodes are loaded into store but workflow tab is not currently active
+			// Shouldn't affect anything
+		}
+	}
+
+	setTimeout(() => {
+		setSubtitle();
+	}, 0);
+
+	setTimeout(() => {
+		if (nodeRunData.value && node.value) {
+			emit('run', {
+				name: node.value.name,
+				data: nodeRunData.value,
+				waiting: !!waiting.value,
+			});
+		}
+	}, 0);
+});
+
+function showPinDataDiscoveryTooltip(dataItemsCount: number): void {
+	if (
+		!isTriggerNode.value ||
+		isManualTypeNode.value ||
+		isScheduledGroup.value ||
+		uiStore.isAnyModalOpen ||
+		dataItemsCount === 0
+	)
+		return;
+
+	useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG).value = 'true';
+
+	pinDataDiscoveryTooltipVisible.value = true;
+	unwatchWorkflowDataItems();
+}
+
+function setSubtitle() {
+	if (!node.value || !nodeType.value) return;
+	// why is this not a computed property? because it's a very expensive operation
+	// it requires expressions to resolve each subtitle...
+	// and ends up bogging down the UI with big workflows, for example when pasting a workflow or even opening a node...
+	// so we only update it when necessary (when node is mounted and when it's opened and closed (isActive))
+	try {
+		const subtitle = nodeHelpers.getNodeSubtitle(node.value, nodeType.value, props.workflow) ?? '';
+
+		nodeSubtitle.value = subtitle.includes(CUSTOM_API_CALL_KEY) ? '' : subtitle;
+	} catch (e) {
+		// avoid breaking UI if expression error occurs
+	}
+}
+
+function executeNode() {
+	if (!node.value) return;
+	emit('runWorkflow', node.value.name, 'Node.executeNode');
+	telemetry.track('User clicked node hover button', {
+		node_type: node.value.type,
+		button_name: 'execute',
+		workflow_id: workflowsStore.workflowId,
+	});
+}
+
+function deleteNode() {
+	if (!node.value) return;
+	telemetry.track('User clicked node hover button', {
+		node_type: node.value.type,
+		button_name: 'delete',
+		workflow_id: workflowsStore.workflowId,
+	});
+
+	emit('removeNode', node.value.name);
+}
+
+function toggleDisableNode(event: MouseEvent) {
+	if (!node.value) return;
+	(event.currentTarget as HTMLButtonElement).blur();
+	telemetry.track('User clicked node hover button', {
+		node_type: node.value?.type,
+		button_name: 'disable',
+		workflow_id: workflowsStore.workflowId,
+	});
+	emit('toggleDisableNode', node.value);
+}
+
+function onClick(event: MouseEvent) {
+	void callDebounced(onClickDebounced, { debounceTime: 50, trailing: true }, event);
+}
+
+function onClickDebounced(...args: unknown[]) {
+	const event = args[0] as MouseEvent;
+	const isDoubleClick = event.detail >= 2;
+	if (isDoubleClick) {
+		setNodeActive();
+	} else {
+		nodeBase.mouseLeftClick(event);
+	}
+}
+
+function setNodeActive() {
+	ndvStore.activeNodeName = node.value ? node.value.name : '';
+	pinDataDiscoveryTooltipVisible.value = false;
+}
+
+function touchStart() {
+	if (deviceSupport.isTouchDevice && !deviceSupport.isMacOs && !isTouchActive.value) {
+		isTouchActive.value = true;
+		setTimeout(() => {
+			isTouchActive.value = false;
+		}, 2000);
+	}
+}
+
+const touchEnd = nodeBase.touchEnd;
+
+function openContextMenu(event: MouseEvent, source: 'node-button' | 'node-right-click') {
+	if (node.value) {
+		contextMenu.open(event, { source, nodeId: node.value.id });
+	}
+}
+</script>
+
 <template>
 	<div
-		v-if="data"
+		v-if="node"
 		:id="nodeId"
-		:ref="data.name"
+		:ref="node.name"
 		:class="nodeWrapperClass"
 		:style="nodeWrapperStyles"
 		data-test-id="canvas-node"
-		:data-name="data.name"
+		:data-name="node.name"
 		:data-node-type="nodeType?.name"
 		@contextmenu="(e: MouseEvent) => openContextMenu(e, 'node-right-click')"
 	>
@@ -30,19 +634,19 @@
 				<i v-if="isTriggerNode" class="trigger-icon">
 					<n8n-tooltip placement="bottom">
 						<template #content>
-							<span v-html="$locale.baseText('node.thisIsATriggerNode')" />
+							<span v-html="i18n.baseText('node.thisIsATriggerNode')" />
 						</template>
 						<FontAwesomeIcon icon="bolt" size="lg" />
 					</n8n-tooltip>
 				</i>
 				<div
-					v-if="!data.disabled"
+					v-if="!node.disabled"
 					:class="{ 'node-info-icon': true, 'shift-icon': shiftOutputCount }"
 				>
 					<div v-if="hasIssues && !hideNodeIssues" class="node-issues" data-test-id="node-issues">
 						<n8n-tooltip :show-after="500" placement="bottom">
 							<template #content>
-								<TitledList :title="`${$locale.baseText('node.issues')}:`" :items="nodeIssues" />
+								<TitledList :title="`${i18n.baseText('node.issues')}:`" :items="nodeIssues" />
 							</template>
 							<FontAwesomeIcon icon="exclamation-triangle" />
 						</n8n-tooltip>
@@ -68,7 +672,7 @@
 					</span>
 				</div>
 
-				<div class="node-executing-info" :title="$locale.baseText('node.nodeIsExecuting')">
+				<div class="node-executing-info" :title="i18n.baseText('node.nodeIsExecuting')">
 					<FontAwesomeIcon icon="sync-alt" spin />
 				</div>
 
@@ -91,7 +695,7 @@
 						popper-class="node-trigger-tooltip__wrapper--item"
 					>
 						<template #content>
-							{{ $locale.baseText('node.discovery.pinData.canvas') }}
+							{{ i18n.baseText('node.discovery.pinData.canvas') }}
 						</template>
 						<span />
 					</n8n-tooltip>
@@ -103,7 +707,7 @@
 					:size="40"
 					:shrink="false"
 					:color-default="iconColorDefault"
-					:disabled="data.disabled"
+					:disabled="node.disabled"
 				/>
 			</div>
 
@@ -120,7 +724,7 @@
 				<p data-test-id="canvas-node-box-title">
 					{{ nodeTitle }}
 				</p>
-				<p v-if="data.disabled">({{ $locale.baseText('node.disabled') }})</p>
+				<p v-if="node.disabled">({{ i18n.baseText('node.disabled') }})</p>
 			</div>
 			<div v-if="nodeSubtitle !== undefined" class="node-subtitle" :title="nodeSubtitle">
 				{{ nodeSubtitle }}
@@ -135,7 +739,7 @@
 			@mousedown.stop
 		>
 			<div class="node-options-inner">
-				<n8n-icon-button
+				<N8nIconButton
 					v-if="!isConfigNode"
 					data-test-id="execute-node-button"
 					type="tertiary"
@@ -143,10 +747,10 @@
 					size="small"
 					icon="play"
 					:disabled="workflowRunning"
-					:title="$locale.baseText('node.testStep')"
+					:title="i18n.baseText('node.testStep')"
 					@click="executeNode"
 				/>
-				<n8n-icon-button
+				<N8nIconButton
 					data-test-id="disable-node-button"
 					type="tertiary"
 					text
@@ -155,16 +759,16 @@
 					:title="nodeDisabledTitle"
 					@click="toggleDisableNode"
 				/>
-				<n8n-icon-button
+				<N8nIconButton
 					data-test-id="delete-node-button"
 					type="tertiary"
 					size="small"
 					text
 					icon="trash"
-					:title="$locale.baseText('node.delete')"
+					:title="i18n.baseText('node.delete')"
 					@click="deleteNode"
 				/>
-				<n8n-icon-button
+				<N8nIconButton
 					data-test-id="overflow-node-button"
 					type="tertiary"
 					size="small"
@@ -177,699 +781,6 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import type { PropType, CSSProperties } from 'vue';
-import { mapStores } from 'pinia';
-import xss from 'xss';
-import { useStorage } from '@/composables/useStorage';
-import {
-	CUSTOM_API_CALL_KEY,
-	LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG,
-	MANUAL_TRIGGER_NODE_TYPE,
-	NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS,
-	NOT_DUPLICATABLE_NODE_TYPES,
-	SIMULATE_NODE_TYPE,
-	SIMULATE_TRIGGER_NODE_TYPE,
-	WAIT_TIME_UNLIMITED,
-} from '@/constants';
-import { NodeConnectionType, NodeHelpers } from 'n8n-workflow';
-import type {
-	ConnectionTypes,
-	ExecutionSummary,
-	INodeInputConfiguration,
-	INodeOutputConfiguration,
-	INodeTypeDescription,
-	ITaskData,
-	NodeOperationError,
-	Workflow,
-} from 'n8n-workflow';
-
-import NodeIcon from '@/components/NodeIcon.vue';
-import TitledList from '@/components/TitledList.vue';
-
-import { get } from 'lodash-es';
-import { getTriggerNodeServiceName } from '@/utils/nodeTypesUtils';
-import type { INodeUi, XYPosition } from '@/Interface';
-import { useUIStore } from '@/stores/ui.store';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-import { useNDVStore } from '@/stores/ndv.store';
-import { useNodeTypesStore } from '@/stores/nodeTypes.store';
-import { EnableNodeToggleCommand } from '@/models/history';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { useContextMenu } from '@/composables/useContextMenu';
-import { useNodeHelpers } from '@/composables/useNodeHelpers';
-import { useExternalHooks } from '@/composables/useExternalHooks';
-import { usePinnedData } from '@/composables/usePinnedData';
-import { useDeviceSupport } from 'n8n-design-system';
-import { useDebounce } from '@/composables/useDebounce';
-import type { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
-import { useCanvasStore } from '@/stores/canvas.store';
-import { useHistoryStore } from '@/stores/history.store';
-import { useNodeBase } from '@/composables/useNodeBase';
-
-export default defineComponent({
-	name: 'Node',
-	components: {
-		TitledList,
-		FontAwesomeIcon,
-		NodeIcon,
-	},
-	props: {
-		isProductionExecutionPreview: {
-			type: Boolean,
-			default: false,
-		},
-		disablePointerEvents: {
-			type: Boolean,
-			default: false,
-		},
-		hideNodeIssues: {
-			type: Boolean,
-			default: false,
-		},
-		name: {
-			type: String,
-			required: true,
-		},
-		instance: {
-			type: Object as PropType<BrowserJsPlumbInstance>,
-			required: true,
-		},
-		isReadOnly: {
-			type: Boolean,
-		},
-		isActive: {
-			type: Boolean,
-		},
-		hideActions: {
-			type: Boolean,
-		},
-		disableSelecting: {
-			type: Boolean,
-		},
-		showCustomTooltip: {
-			type: Boolean,
-		},
-		workflow: {
-			type: Object as PropType<Workflow>,
-			required: true,
-		},
-	},
-	emits: {
-		run: null,
-		runWorkflow: null,
-		removeNode: null,
-		toggleDisableNode: null,
-	},
-	setup(props, { emit }) {
-		const workflowsStore = useWorkflowsStore();
-		const contextMenu = useContextMenu();
-		const externalHooks = useExternalHooks();
-		const nodeHelpers = useNodeHelpers();
-		const node = workflowsStore.getNodeByName(props.name);
-		const pinnedData = usePinnedData(node);
-		const deviceSupport = useDeviceSupport();
-		const { callDebounced } = useDebounce();
-
-		const nodeBase = useNodeBase({
-			name: props.name,
-			instance: props.instance,
-			workflowObject: props.workflow,
-			isReadOnly: props.isReadOnly,
-			emit: emit as (event: string, ...args: unknown[]) => void,
-		});
-
-		return {
-			contextMenu,
-			externalHooks,
-			nodeHelpers,
-			pinnedData,
-			deviceSupport,
-			...nodeBase,
-			callDebounced,
-		};
-	},
-	data() {
-		return {
-			isTouchActive: false,
-			nodeSubtitle: '',
-			showTriggerNodeTooltip: false,
-			pinDataDiscoveryTooltipVisible: false,
-			dragging: false,
-			unwatchWorkflowDataItems: () => {},
-		};
-	},
-	computed: {
-		...mapStores(
-			useNodeTypesStore,
-			useCanvasStore,
-			useNDVStore,
-			useUIStore,
-			useWorkflowsStore,
-			useHistoryStore,
-		),
-		data(): INodeUi | null {
-			return this.workflowsStore.getNodeByName(this.name);
-		},
-		nodeId(): string {
-			return this.data?.id || '';
-		},
-		showPinnedDataInfo(): boolean {
-			return this.pinnedData.hasData.value && !this.isProductionExecutionPreview;
-		},
-		isDuplicatable(): boolean {
-			if (!this.nodeType) return true;
-			if (NOT_DUPLICATABLE_NODE_TYPES.includes(this.nodeType.name)) return false;
-			return (
-				this.nodeType.maxNodes === undefined || this.sameTypeNodes.length < this.nodeType.maxNodes
-			);
-		},
-		isScheduledGroup(): boolean {
-			return this.nodeType?.group.includes('schedule') === true;
-		},
-		iconColorDefault(): string | undefined {
-			if (this.isConfigNode) {
-				return 'var(--color-text-base)';
-			}
-			return undefined;
-		},
-		nodeRunData(): ITaskData[] {
-			if (!this.data) return [];
-
-			return this.workflowsStore.getWorkflowResultDataByNodeName(this.data.name) ?? [];
-		},
-		hasIssues(): boolean {
-			if (this.nodeExecutionStatus && ['crashed', 'error'].includes(this.nodeExecutionStatus))
-				return true;
-			if (this.pinnedData.hasData.value) return false;
-			if (this.data?.issues !== undefined && Object.keys(this.data.issues).length) {
-				return true;
-			}
-			return false;
-		},
-		workflowDataItems(): number {
-			const workflowResultDataNode = this.nodeRunData;
-			if (workflowResultDataNode === null) {
-				return 0;
-			}
-
-			return workflowResultDataNode.length;
-		},
-		canvasOffsetPosition() {
-			return this.uiStore.nodeViewOffsetPosition;
-		},
-		getTriggerNodeTooltip(): string | undefined {
-			if (this.nodeType !== null && this.nodeType.hasOwnProperty('eventTriggerDescription')) {
-				const nodeName = this.$locale.shortNodeType(this.nodeType.name);
-				const { eventTriggerDescription } = this.nodeType;
-				return this.$locale
-					.nodeText()
-					.eventTriggerDescription(nodeName, eventTriggerDescription ?? '');
-			} else {
-				return this.$locale.baseText('node.waitingForYouToCreateAnEventIn', {
-					interpolate: {
-						nodeType: this.nodeType ? getTriggerNodeServiceName(this.nodeType) : '',
-					},
-				});
-			}
-		},
-		isPollingTypeNode(): boolean {
-			return !!this.nodeType?.polling;
-		},
-		isExecuting(): boolean {
-			if (!this.data) return false;
-			return this.workflowsStore.isNodeExecuting(this.data.name);
-		},
-		isSingleActiveTriggerNode(): boolean {
-			const nodes = this.workflowsStore.workflowTriggerNodes.filter((node: INodeUi) => {
-				const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
-				return nodeType && nodeType.eventTriggerDescription !== '' && !node.disabled;
-			});
-
-			return nodes.length === 1;
-		},
-		isManualTypeNode(): boolean {
-			return this.data?.type === MANUAL_TRIGGER_NODE_TYPE;
-		},
-		isConfigNode(): boolean {
-			if (!this.data) return false;
-			return this.nodeTypesStore.isConfigNode(this.workflow, this.data, this.data.type ?? '');
-		},
-		isConfigurableNode(): boolean {
-			if (!this.data) return false;
-
-			return this.nodeTypesStore.isConfigurableNode(
-				this.workflow,
-				this.data,
-				this.data?.type ?? '',
-			);
-		},
-		isTriggerNode(): boolean {
-			return this.data ? this.nodeTypesStore.isTriggerNode(this.data.type) : false;
-		},
-		isTriggerNodeTooltipEmpty(): boolean {
-			return this.nodeType !== null ? this.nodeType.eventTriggerDescription === '' : false;
-		},
-		isNodeDisabled(): boolean | undefined {
-			return this.node && this.node.disabled;
-		},
-		nodeType(): INodeTypeDescription | null {
-			return this.data && this.nodeTypesStore.getNodeType(this.data.type, this.data.typeVersion);
-		},
-		node(): INodeUi | undefined {
-			// same as this.data but reactive..
-			return this.workflowsStore.nodesByName[this.name] as INodeUi | undefined;
-		},
-		sameTypeNodes(): INodeUi[] {
-			return this.workflowsStore.allNodes.filter((node: INodeUi) => node.type === this.data?.type);
-		},
-		nodeWrapperClass() {
-			const classes: Record<string, boolean> = {
-				'node-wrapper': true,
-				'node-wrapper--trigger': this.isTriggerNode,
-				'node-wrapper--configurable': this.isConfigurableNode,
-				'node-wrapper--config': this.isConfigNode,
-			};
-
-			if (this.outputs.length) {
-				const outputTypes = NodeHelpers.getConnectionTypes(this.outputs);
-				const otherOutputs = outputTypes.filter(
-					(outputName) => outputName !== NodeConnectionType.Main,
-				);
-				if (otherOutputs.length) {
-					otherOutputs.forEach((outputName) => {
-						classes[`node-wrapper--connection-type-${outputName}`] = true;
-					});
-				}
-			}
-
-			return classes;
-		},
-		nodeWrapperStyles() {
-			const styles: CSSProperties = {
-				left: this.position[0] + 'px',
-				top: this.position[1] + 'px',
-			};
-
-			if (this.node && this.nodeType) {
-				const inputs =
-					NodeHelpers.getNodeInputs(this.workflow, this.node, this.nodeType) ||
-					([] as Array<ConnectionTypes | INodeInputConfiguration>);
-				const inputTypes = NodeHelpers.getConnectionTypes(inputs);
-
-				const nonMainInputs = inputTypes.filter((input) => input !== NodeConnectionType.Main);
-				if (nonMainInputs.length) {
-					const requiredNonMainInputs = inputs.filter(
-						(input) => typeof input !== 'string' && input.required,
-					);
-
-					let spacerCount = 0;
-					if (NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS) {
-						const requiredNonMainInputsCount = requiredNonMainInputs.length;
-						const optionalNonMainInputsCount = nonMainInputs.length - requiredNonMainInputsCount;
-						spacerCount = requiredNonMainInputsCount > 0 && optionalNonMainInputsCount > 0 ? 1 : 0;
-					}
-
-					styles['--configurable-node-input-count'] = nonMainInputs.length + spacerCount;
-				}
-
-				const mainInputs = inputTypes.filter((output) => output === NodeConnectionType.Main);
-				styles['--node-main-input-count'] = mainInputs.length;
-
-				let outputs = [] as Array<ConnectionTypes | INodeOutputConfiguration>;
-				if (this.workflow.nodes[this.node.name]) {
-					outputs = NodeHelpers.getNodeOutputs(this.workflow, this.node, this.nodeType);
-				}
-
-				const outputTypes = NodeHelpers.getConnectionTypes(outputs);
-
-				const mainOutputs = outputTypes.filter((output) => output === NodeConnectionType.Main);
-				styles['--node-main-output-count'] = mainOutputs.length;
-			}
-
-			return styles;
-		},
-		nodeClass(): object {
-			return {
-				'node-box': true,
-				disabled: this.data?.disabled,
-				executing: this.isExecuting,
-			};
-		},
-		nodeExecutionStatus(): string {
-			const nodeExecutionRunData = this.workflowsStore.getWorkflowRunData?.[this.name];
-			if (nodeExecutionRunData) {
-				return nodeExecutionRunData.filter(Boolean)[0].executionStatus ?? '';
-			}
-			return '';
-		},
-		nodeIssues(): string[] {
-			const issues: string[] = [];
-			const nodeExecutionRunData = this.workflowsStore.getWorkflowRunData?.[this.name];
-			if (nodeExecutionRunData) {
-				nodeExecutionRunData.forEach((executionRunData) => {
-					if (executionRunData?.error) {
-						const { message, description } = executionRunData.error;
-						const issue = `${message}${description ? ` (${description})` : ''}`;
-						issues.push(xss(issue));
-					}
-				});
-			}
-			if (this.data?.issues !== undefined) {
-				issues.push(...NodeHelpers.nodeIssuesToString(this.data.issues, this.data));
-			}
-			return issues;
-		},
-		nodeDisabledTitle(): string {
-			return this.data?.disabled
-				? this.$locale.baseText('node.enable')
-				: this.$locale.baseText('node.disable');
-		},
-		position(): XYPosition {
-			return this.node ? this.node.position : [0, 0];
-		},
-		showDisabledLineThrough(): boolean {
-			return (
-				!this.isConfigurableNode &&
-				!!(this.data?.disabled && this.inputs.length === 1 && this.outputs.length === 1)
-			);
-		},
-		shortNodeType(): string {
-			return this.$locale.shortNodeType(this.data?.type ?? '');
-		},
-		nodeTitle(): string {
-			if (this.data?.name === 'Start') {
-				return this.$locale.headerText({
-					key: 'headers.start.displayName',
-					fallback: 'Start',
-				});
-			}
-
-			return this.data?.name ?? '';
-		},
-		waiting(): string | undefined {
-			const workflowExecution = this.workflowsStore.getWorkflowExecution as ExecutionSummary;
-
-			if (workflowExecution?.waitTill) {
-				const lastNodeExecuted = get(workflowExecution, 'data.resultData.lastNodeExecuted');
-				if (this.name === lastNodeExecuted) {
-					const waitDate = new Date(workflowExecution.waitTill);
-					if (waitDate.toISOString() === WAIT_TIME_UNLIMITED) {
-						return this.$locale.baseText(
-							'node.theNodeIsWaitingIndefinitelyForAnIncomingWebhookCall',
-						);
-					}
-					return this.$locale.baseText('node.nodeIsWaitingTill', {
-						interpolate: {
-							date: waitDate.toLocaleDateString(),
-							time: waitDate.toLocaleTimeString(),
-						},
-					});
-				}
-			}
-
-			return undefined;
-		},
-		workflowRunning(): boolean {
-			return this.uiStore.isActionActive['workflowRunning'];
-		},
-		nodeStyle() {
-			const returnStyles: {
-				[key: string]: string;
-			} = {};
-
-			let borderColor = '--color-foreground-xdark';
-
-			if (this.isConfigurableNode || this.isConfigNode) {
-				borderColor = '--color-foreground-dark';
-			}
-
-			if (this.data?.disabled) {
-				borderColor = '--color-foreground-base';
-			} else if (!this.isExecuting) {
-				if (this.hasIssues && !this.hideNodeIssues) {
-					// Do not set red border if there is an issue with the configuration node
-					if (
-						(this.nodeRunData?.[0]?.error as NodeOperationError)?.functionality !==
-						'configuration-node'
-					) {
-						borderColor = '--color-danger';
-						returnStyles['border-width'] = '2px';
-						returnStyles['border-style'] = 'solid';
-					}
-				} else if (!!this.waiting || this.showPinnedDataInfo) {
-					borderColor = '--color-node-pinned-border';
-				} else if (this.nodeExecutionStatus === 'unknown') {
-					borderColor = '--color-foreground-xdark';
-				} else if (this.workflowDataItems) {
-					returnStyles['border-width'] = '2px';
-					returnStyles['border-style'] = 'solid';
-					borderColor = '--color-success';
-				}
-			}
-
-			returnStyles['border-color'] = `var(${borderColor})`;
-
-			return returnStyles;
-		},
-		isSelected(): boolean {
-			return (
-				this.uiStore.getSelectedNodes.find((node: INodeUi) => node.name === this.data?.name) !==
-				undefined
-			);
-		},
-		shiftOutputCount(): boolean {
-			return !!(this.nodeType && this.outputs.length > 2);
-		},
-		shouldShowTriggerTooltip(): boolean {
-			return (
-				!!this.node &&
-				this.isTriggerNode &&
-				!this.isPollingTypeNode &&
-				!this.pinnedData.hasData.value &&
-				!this.isNodeDisabled &&
-				this.workflowRunning &&
-				this.workflowDataItems === 0 &&
-				this.isSingleActiveTriggerNode &&
-				!this.isTriggerNodeTooltipEmpty &&
-				!this.hasIssues &&
-				!this.dragging
-			);
-		},
-		isContextMenuOpen(): boolean {
-			return (
-				this.contextMenu.isOpen.value &&
-				this.contextMenu.target.value?.source === 'node-button' &&
-				this.contextMenu.target.value.nodeId === this.data?.id
-			);
-		},
-		iconNodeType() {
-			if (
-				this.data?.type === SIMULATE_NODE_TYPE ||
-				this.data?.type === SIMULATE_TRIGGER_NODE_TYPE
-			) {
-				const icon = this.data.parameters?.icon as string;
-				const iconNodeType = this.workflow.expression.getSimpleParameterValue(
-					this.data,
-					icon,
-					'internal',
-					{},
-				);
-				if (iconNodeType && typeof iconNodeType === 'string') {
-					return this.nodeTypesStore.getNodeType(iconNodeType);
-				}
-			}
-
-			return this.nodeType;
-		},
-	},
-	watch: {
-		isActive(newValue, oldValue) {
-			if (!newValue && oldValue) {
-				this.setSubtitle();
-			}
-		},
-		canvasOffsetPosition() {
-			if (this.showTriggerNodeTooltip) {
-				this.showTriggerNodeTooltip = false;
-				setTimeout(() => {
-					this.showTriggerNodeTooltip = this.shouldShowTriggerTooltip;
-				}, 200);
-			}
-
-			if (this.pinDataDiscoveryTooltipVisible) {
-				this.pinDataDiscoveryTooltipVisible = false;
-				setTimeout(() => {
-					this.pinDataDiscoveryTooltipVisible = true;
-				}, 200);
-			}
-		},
-		shouldShowTriggerTooltip(shouldShowTriggerTooltip) {
-			if (shouldShowTriggerTooltip) {
-				setTimeout(() => {
-					this.showTriggerNodeTooltip = this.shouldShowTriggerTooltip;
-				}, 2500);
-			} else {
-				this.showTriggerNodeTooltip = false;
-			}
-		},
-		nodeRunData: {
-			deep: true,
-			handler(newValue) {
-				if (!this.data) {
-					return;
-				}
-
-				this.$emit('run', { name: this.data.name, data: newValue, waiting: !!this.waiting });
-			},
-		},
-	},
-	created() {
-		const hasSeenPinDataTooltip = useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG).value;
-		if (!hasSeenPinDataTooltip) {
-			this.unwatchWorkflowDataItems = this.$watch('workflowDataItems', (dataItemsCount: number) => {
-				this.showPinDataDiscoveryTooltip(dataItemsCount);
-			});
-		}
-	},
-	mounted() {
-		// Initialize the node
-		if (this.data !== null) {
-			try {
-				this.addNode(this.data);
-			} catch (error) {
-				// This breaks when new nodes are loaded into store but workflow tab is not currently active
-				// Shouldn't affect anything
-			}
-		}
-
-		setTimeout(() => {
-			this.setSubtitle();
-		}, 0);
-		if (this.nodeRunData) {
-			setTimeout(() => {
-				this.$emit('run', {
-					name: this.data?.name,
-					data: this.nodeRunData,
-					waiting: !!this.waiting,
-				});
-			}, 0);
-		}
-	},
-	methods: {
-		showPinDataDiscoveryTooltip(dataItemsCount: number): void {
-			if (
-				!this.isTriggerNode ||
-				this.isManualTypeNode ||
-				this.isScheduledGroup ||
-				this.uiStore.isAnyModalOpen ||
-				dataItemsCount === 0
-			)
-				return;
-
-			useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG).value = 'true';
-
-			this.pinDataDiscoveryTooltipVisible = true;
-			this.unwatchWorkflowDataItems();
-		},
-		setSubtitle() {
-			if (!this.data || !this.nodeType) return;
-			// why is this not a computed property? because it's a very expensive operation
-			// it requires expressions to resolve each subtitle...
-			// and ends up bogging down the UI with big workflows, for example when pasting a workflow or even opening a node...
-			// so we only update it when necessary (when node is mounted and when it's opened and closed (isActive))
-			try {
-				const nodeSubtitle =
-					this.nodeHelpers.getNodeSubtitle(this.data, this.nodeType, this.workflow) ?? '';
-
-				this.nodeSubtitle = nodeSubtitle.includes(CUSTOM_API_CALL_KEY) ? '' : nodeSubtitle;
-			} catch (e) {
-				// avoid breaking UI if expression error occurs
-			}
-		},
-		disableNode() {
-			if (this.data !== null) {
-				this.nodeHelpers.disableNodes([this.data]);
-				this.historyStore.pushCommandToUndo(
-					new EnableNodeToggleCommand(
-						this.data.name,
-						!this.data.disabled,
-						this.data.disabled === true,
-					),
-				);
-				this.$telemetry.track('User clicked node hover button', {
-					node_type: this.data.type,
-					button_name: 'disable',
-					workflow_id: this.workflowsStore.workflowId,
-				});
-			}
-		},
-
-		executeNode() {
-			this.$emit('runWorkflow', this.data?.name, 'Node.executeNode');
-			this.$telemetry.track('User clicked node hover button', {
-				node_type: this.data?.type,
-				button_name: 'execute',
-				workflow_id: this.workflowsStore.workflowId,
-			});
-		},
-
-		deleteNode() {
-			this.$telemetry.track('User clicked node hover button', {
-				node_type: this.data?.type,
-				button_name: 'delete',
-				workflow_id: this.workflowsStore.workflowId,
-			});
-
-			this.$emit('removeNode', this.data?.name);
-		},
-
-		toggleDisableNode(event: MouseEvent) {
-			(event.currentTarget as HTMLButtonElement).blur();
-			this.$telemetry.track('User clicked node hover button', {
-				node_type: this.data?.type,
-				button_name: 'disable',
-				workflow_id: this.workflowsStore.workflowId,
-			});
-			this.$emit('toggleDisableNode', this.data);
-		},
-
-		onClick(event: MouseEvent) {
-			void this.callDebounced(this.onClickDebounced, { debounceTime: 50, trailing: true }, event);
-		},
-
-		onClickDebounced(...args: unknown[]) {
-			const event = args[0] as MouseEvent;
-			const isDoubleClick = event.detail >= 2;
-			if (isDoubleClick) {
-				this.setNodeActive();
-			} else {
-				this.mouseLeftClick(event);
-			}
-		},
-
-		setNodeActive() {
-			this.ndvStore.activeNodeName = this.data ? this.data.name : '';
-			this.pinDataDiscoveryTooltipVisible = false;
-		},
-		touchStart() {
-			if (this.deviceSupport.isTouchDevice && !this.deviceSupport.isMacOs && !this.isTouchActive) {
-				this.isTouchActive = true;
-				setTimeout(() => {
-					this.isTouchActive = false;
-				}, 2000);
-			}
-		},
-		openContextMenu(event: MouseEvent, source: 'node-button' | 'node-right-click') {
-			if (this.data) {
-				this.contextMenu.open(event, { source, nodeId: this.data.id });
-			}
-		},
-	},
-});
-</script>
-
 <style lang="scss" scoped>
 .context-menu {
 	position: absolute;
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ActionItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ActionItem.vue
index ffa015afe21ad..729e074eac4d8 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ActionItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ActionItem.vue
@@ -1,25 +1,3 @@
-<template>
-	<n8n-node-creator-node
-		draggable
-		:class="$style.action"
-		:title="action.displayName"
-		:is-trigger="isTriggerAction(action)"
-		data-keyboard-nav="true"
-		@dragstart="onDragStart"
-		@dragend="onDragEnd"
-	>
-		<template #dragContent>
-			<div ref="draggableDataTransfer" :class="$style.draggableDataTransfer" />
-			<div v-show="dragging" :class="$style.draggable" :style="draggableStyle">
-				<NodeIcon :node-type="nodeType" :size="40" :shrink="false" @click.capture.stop />
-			</div>
-		</template>
-		<template #icon>
-			<NodeIcon :node-type="action" />
-		</template>
-	</n8n-node-creator-node>
-</template>
-
 <script setup lang="ts">
 import { reactive, computed, toRefs } from 'vue';
 import type { ActionTypeDescription, SimplifiedNodeType } from '@/Interface';
@@ -116,6 +94,28 @@ function onDragEnd(): void {
 const { draggableDataTransfer, dragging } = toRefs(state);
 </script>
 
+<template>
+	<n8n-node-creator-node
+		draggable
+		:class="$style.action"
+		:title="action.displayName"
+		:is-trigger="isTriggerAction(action)"
+		data-keyboard-nav="true"
+		@dragstart="onDragStart"
+		@dragend="onDragEnd"
+	>
+		<template #dragContent>
+			<div ref="draggableDataTransfer" :class="$style.draggableDataTransfer" />
+			<div v-show="dragging" :class="$style.draggable" :style="draggableStyle">
+				<NodeIcon :node-type="nodeType" :size="40" :shrink="false" @click.capture.stop />
+			</div>
+		</template>
+		<template #icon>
+			<NodeIcon :node-type="action" />
+		</template>
+	</n8n-node-creator-node>
+</template>
+
 <style lang="scss" module>
 .action {
 	--node-creator-name-size: var(--font-size-2xs);
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/LabelItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/LabelItem.vue
index d3d3b3585c337..9f905f7b366fb 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/LabelItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/LabelItem.vue
@@ -1,9 +1,3 @@
-<template>
-	<div :class="$style.label">
-		<span :class="$style.name" v-text="item.key" />
-	</div>
-</template>
-
 <script lang="ts" setup>
 import type { LabelItemProps } from '@/Interface';
 
@@ -13,6 +7,12 @@ export interface Props {
 defineProps<Props>();
 </script>
 
+<template>
+	<div :class="$style.label">
+		<span :class="$style.name" v-text="item.key" />
+	</div>
+</template>
+
 <style lang="scss" module>
 .label {
 	margin-left: var(--spacing-s);
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/LinkItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/LinkItem.vue
index d64b860728ca9..b5c3dc55a2fb4 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/LinkItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/LinkItem.vue
@@ -1,3 +1,13 @@
+<script setup lang="ts">
+import type { LinkItemProps } from '@/Interface';
+
+export interface Props {
+	link: LinkItemProps;
+}
+
+defineProps<Props>();
+</script>
+
 <template>
 	<n8n-node-creator-node
 		:class="$style.creatorLink"
@@ -13,16 +23,6 @@
 	</n8n-node-creator-node>
 </template>
 
-<script setup lang="ts">
-import type { LinkItemProps } from '@/Interface';
-
-export interface Props {
-	link: LinkItemProps;
-}
-
-defineProps<Props>();
-</script>
-
 <style lang="scss" module>
 .creatorLink {
 	--action-arrow-color: var(--color-text-light);
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue
index 1a20ed2b9ac9e..ebea3cba41979 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue
@@ -1,45 +1,3 @@
-<template>
-	<!-- Node Item is draggable only if it doesn't contain actions -->
-	<n8n-node-creator-node
-		:draggable="!showActionArrow"
-		:class="$style.nodeItem"
-		:description="description"
-		:title="displayName"
-		:show-action-arrow="showActionArrow"
-		:is-trigger="isTrigger"
-		:data-test-id="dataTestId"
-		:tag="nodeType.tag"
-		@dragstart="onDragStart"
-		@dragend="onDragEnd"
-	>
-		<template #icon>
-			<div v-if="isSubNodeType" :class="$style.subNodeBackground"></div>
-			<NodeIcon :class="$style.nodeIcon" :node-type="nodeType" />
-		</template>
-
-		<template v-if="isCommunityNode" #tooltip>
-			<p
-				:class="$style.communityNodeIcon"
-				@click="onCommunityNodeTooltipClick"
-				v-html="
-					i18n.baseText('generic.communityNode.tooltip', {
-						interpolate: {
-							packageName: nodeType.name.split('.')[0],
-							docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL,
-						},
-					})
-				"
-			/>
-		</template>
-		<template #dragContent>
-			<div ref="draggableDataTransfer" :class="$style.draggableDataTransfer" />
-			<div v-show="dragging" :class="$style.draggable" :style="draggableStyle">
-				<NodeIcon :node-type="nodeType" :size="40" :shrink="false" @click.capture.stop />
-			</div>
-		</template>
-	</n8n-node-creator-node>
-</template>
-
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import type { SimplifiedNodeType } from '@/Interface';
@@ -181,6 +139,49 @@ function onCommunityNodeTooltipClick(event: MouseEvent) {
 	}
 }
 </script>
+
+<template>
+	<!-- Node Item is draggable only if it doesn't contain actions -->
+	<n8n-node-creator-node
+		:draggable="!showActionArrow"
+		:class="$style.nodeItem"
+		:description="description"
+		:title="displayName"
+		:show-action-arrow="showActionArrow"
+		:is-trigger="isTrigger"
+		:data-test-id="dataTestId"
+		:tag="nodeType.tag"
+		@dragstart="onDragStart"
+		@dragend="onDragEnd"
+	>
+		<template #icon>
+			<div v-if="isSubNodeType" :class="$style.subNodeBackground"></div>
+			<NodeIcon :class="$style.nodeIcon" :node-type="nodeType" />
+		</template>
+
+		<template v-if="isCommunityNode" #tooltip>
+			<p
+				:class="$style.communityNodeIcon"
+				@click="onCommunityNodeTooltipClick"
+				v-html="
+					i18n.baseText('generic.communityNode.tooltip', {
+						interpolate: {
+							packageName: nodeType.name.split('.')[0],
+							docURL: COMMUNITY_NODES_INSTALLATION_DOCS_URL,
+						},
+					})
+				"
+			/>
+		</template>
+		<template #dragContent>
+			<div ref="draggableDataTransfer" :class="$style.draggableDataTransfer" />
+			<div v-show="dragging" :class="$style.draggable" :style="draggableStyle">
+				<NodeIcon :node-type="nodeType" :size="40" :shrink="false" @click.capture.stop />
+			</div>
+		</template>
+	</n8n-node-creator-node>
+</template>
+
 <style lang="scss" module>
 .nodeItem {
 	--trigger-icon-background-color: #{$trigger-icon-background-color};
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/SubcategoryItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/SubcategoryItem.vue
index 929247fa0cafb..b7c2adce66f96 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/SubcategoryItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/SubcategoryItem.vue
@@ -1,3 +1,19 @@
+<script setup lang="ts">
+import type { SubcategoryItemProps } from '@/Interface';
+import { camelCase } from 'lodash-es';
+import { computed } from 'vue';
+import { useI18n } from '@/composables/useI18n';
+import type { BaseTextKey } from '@/plugins/i18n';
+
+export interface Props {
+	item: SubcategoryItemProps;
+}
+
+const props = defineProps<Props>();
+const i18n = useI18n();
+const subcategoryName = computed(() => camelCase(props.item.subcategory || props.item.title));
+</script>
+
 <template>
 	<n8n-node-creator-node
 		:class="$style.subCategory"
@@ -20,22 +36,6 @@
 	</n8n-node-creator-node>
 </template>
 
-<script setup lang="ts">
-import type { SubcategoryItemProps } from '@/Interface';
-import { camelCase } from 'lodash-es';
-import { computed } from 'vue';
-import { useI18n } from '@/composables/useI18n';
-import type { BaseTextKey } from '@/plugins/i18n';
-
-export interface Props {
-	item: SubcategoryItemProps;
-}
-
-const props = defineProps<Props>();
-const i18n = useI18n();
-const subcategoryName = computed(() => camelCase(props.item.subcategory || props.item.title));
-</script>
-
 <style lang="scss" module>
 .subCategory {
 	--action-arrow-color: var(--color-text-light);
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ViewItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ViewItem.vue
index ee9edaad11dac..4759a0b45c1e0 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ViewItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/ViewItem.vue
@@ -1,3 +1,13 @@
+<script setup lang="ts">
+import type { ViewItemProps } from '@/Interface';
+
+export interface Props {
+	view: ViewItemProps;
+}
+
+defineProps<Props>();
+</script>
+
 <template>
 	<n8n-node-creator-node
 		:class="$style.view"
@@ -13,16 +23,6 @@
 	</n8n-node-creator-node>
 </template>
 
-<script setup lang="ts">
-import type { ViewItemProps } from '@/Interface';
-
-export interface Props {
-	view: ViewItemProps;
-}
-
-defineProps<Props>();
-</script>
-
 <style lang="scss" module>
 .view {
 	--action-arrow-color: var(--color-text-light);
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
index 2f886b414c2ff..b446ade75edcf 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
@@ -1,29 +1,3 @@
-<template>
-	<div>
-		<aside
-			:class="{
-				[$style.nodeCreatorScrim]: true,
-				[$style.active]: showScrim,
-			}"
-		/>
-		<SlideTransition>
-			<div
-				v-if="active"
-				ref="nodeCreator"
-				:class="{ [$style.nodeCreator]: true }"
-				:style="nodeCreatorInlineStyle"
-				data-test-id="node-creator"
-				@dragover="onDragOver"
-				@drop="onDrop"
-				@mousedown="onMouseDown"
-				@mouseup="onMouseUp"
-			>
-				<NodesListPanel @node-type-selected="onNodeTypeSelected" />
-			</div>
-		</SlideTransition>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { watch, reactive, toRefs, computed, onBeforeUnmount } from 'vue';
 
@@ -163,6 +137,32 @@ onBeforeUnmount(() => {
 });
 </script>
 
+<template>
+	<div>
+		<aside
+			:class="{
+				[$style.nodeCreatorScrim]: true,
+				[$style.active]: showScrim,
+			}"
+		/>
+		<SlideTransition>
+			<div
+				v-if="active"
+				ref="nodeCreator"
+				:class="{ [$style.nodeCreator]: true }"
+				:style="nodeCreatorInlineStyle"
+				data-test-id="node-creator"
+				@dragover="onDragOver"
+				@drop="onDrop"
+				@mousedown="onMouseDown"
+				@mouseup="onMouseUp"
+			>
+				<NodesListPanel @node-type-selected="onNodeTypeSelected" />
+			</div>
+		</SlideTransition>
+	</div>
+</template>
+
 <style module lang="scss">
 :global(strong) {
 	font-weight: var(--font-weight-bold);
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue b/packages/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue
index 59a9bc49a4cb3..e6dce65be3aac 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Panel/NoResults.vue
@@ -1,3 +1,22 @@
+<script setup lang="ts">
+import {
+	REQUEST_NODE_FORM_URL,
+	REGULAR_NODE_CREATOR_VIEW,
+	TRIGGER_NODE_CREATOR_VIEW,
+} from '@/constants';
+import type { NodeFilterType } from '@/Interface';
+
+import NoResultsIcon from './NoResultsIcon.vue';
+
+export interface Props {
+	showIcon?: boolean;
+	showRequest?: boolean;
+	rootView?: NodeFilterType;
+}
+
+defineProps<Props>();
+</script>
+
 <template>
 	<div
 		:class="{ [$style.noResults]: true, [$style.iconless]: !showIcon }"
@@ -44,25 +63,6 @@
 	</div>
 </template>
 
-<script setup lang="ts">
-import {
-	REQUEST_NODE_FORM_URL,
-	REGULAR_NODE_CREATOR_VIEW,
-	TRIGGER_NODE_CREATOR_VIEW,
-} from '@/constants';
-import type { NodeFilterType } from '@/Interface';
-
-import NoResultsIcon from './NoResultsIcon.vue';
-
-export interface Props {
-	showIcon?: boolean;
-	showRequest?: boolean;
-	rootView?: NodeFilterType;
-}
-
-defineProps<Props>();
-</script>
-
 <style lang="scss" module>
 .noResults {
 	background-color: $node-creator-no-results-background-color;
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue b/packages/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue
index a4066c1ea6ff9..d4866eddf23af 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/Panel/SearchBar.vue
@@ -1,28 +1,3 @@
-<template>
-	<div :class="$style.searchContainer" data-test-id="search-bar">
-		<div :class="{ [$style.prefix]: true, [$style.active]: modelValue.length > 0 }">
-			<font-awesome-icon icon="search" size="sm" />
-		</div>
-		<div :class="$style.text">
-			<input
-				ref="inputRef"
-				:placeholder="placeholder"
-				:value="modelValue"
-				:class="$style.input"
-				autofocus
-				data-test-id="node-creator-search-bar"
-				tabindex="0"
-				@input="onInput"
-			/>
-		</div>
-		<div v-if="modelValue.length > 0" :class="$style.suffix" @click="clear">
-			<button :class="[$style.clear, $style.clickable]">
-				<font-awesome-icon icon="times-circle" />
-			</button>
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { onMounted, reactive, toRefs, onBeforeUnmount } from 'vue';
 import { useExternalHooks } from '@/composables/useExternalHooks';
@@ -75,6 +50,31 @@ defineExpose({
 });
 </script>
 
+<template>
+	<div :class="$style.searchContainer" data-test-id="search-bar">
+		<div :class="{ [$style.prefix]: true, [$style.active]: modelValue.length > 0 }">
+			<font-awesome-icon icon="search" size="sm" />
+		</div>
+		<div :class="$style.text">
+			<input
+				ref="inputRef"
+				:placeholder="placeholder"
+				:value="modelValue"
+				:class="$style.input"
+				autofocus
+				data-test-id="node-creator-search-bar"
+				tabindex="0"
+				@input="onInput"
+			/>
+		</div>
+		<div v-if="modelValue.length > 0" :class="$style.suffix" @click="clear">
+			<button :class="[$style.clear, $style.clickable]">
+				<font-awesome-icon icon="times-circle" />
+			</button>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .searchContainer {
 	display: flex;
diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index ad9b229541eda..f2fed81d47691 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -1,114 +1,3 @@
-<template>
-	<div
-		v-if="credentialTypesNodeDescriptionDisplayed.length"
-		:class="['node-credentials', $style.container]"
-	>
-		<div
-			v-for="credentialTypeDescription in credentialTypesNodeDescriptionDisplayed"
-			:key="credentialTypeDescription.name"
-		>
-			<n8n-input-label
-				:label="getCredentialsFieldLabel(credentialTypeDescription)"
-				:bold="false"
-				size="small"
-				color="text-dark"
-				data-test-id="credentials-label"
-			>
-				<div v-if="readonly">
-					<n8n-input
-						:model-value="getSelectedName(credentialTypeDescription.name)"
-						disabled
-						size="small"
-						data-test-id="node-credentials-select"
-					/>
-				</div>
-				<div
-					v-else
-					:class="
-						getIssues(credentialTypeDescription.name).length && !hideIssues
-							? $style.hasIssues
-							: $style.input
-					"
-					data-test-id="node-credentials-select"
-				>
-					<n8n-select
-						:model-value="getSelectedId(credentialTypeDescription.name)"
-						:placeholder="
-							getSelectPlaceholder(
-								credentialTypeDescription.name,
-								getIssues(credentialTypeDescription.name),
-							)
-						"
-						size="small"
-						@update:model-value="
-							(value: string) =>
-								onCredentialSelected(
-									credentialTypeDescription.name,
-									value,
-									showMixedCredentials(credentialTypeDescription),
-								)
-						"
-						@blur="$emit('blur', 'credentials')"
-					>
-						<n8n-option
-							v-for="item in getCredentialOptions(
-								getAllRelatedCredentialTypes(credentialTypeDescription),
-							)"
-							:key="item.id"
-							:data-test-id="`node-credentials-select-item-${item.id}`"
-							:label="item.name"
-							:value="item.id"
-						>
-							<div :class="[$style.credentialOption, 'mt-2xs', 'mb-2xs']">
-								<n8n-text bold>{{ item.name }}</n8n-text>
-								<n8n-text size="small">{{ item.typeDisplayName }}</n8n-text>
-							</div>
-						</n8n-option>
-						<n8n-option
-							:key="NEW_CREDENTIALS_TEXT"
-							data-test-id="node-credentials-select-item-new"
-							:value="NEW_CREDENTIALS_TEXT"
-							:label="NEW_CREDENTIALS_TEXT"
-						>
-						</n8n-option>
-					</n8n-select>
-
-					<div
-						v-if="getIssues(credentialTypeDescription.name).length && !hideIssues"
-						:class="$style.warning"
-					>
-						<n8n-tooltip placement="top">
-							<template #content>
-								<TitledList
-									:title="`${$locale.baseText('nodeCredentials.issues')}:`"
-									:items="getIssues(credentialTypeDescription.name)"
-								/>
-							</template>
-							<font-awesome-icon icon="exclamation-triangle" />
-						</n8n-tooltip>
-					</div>
-
-					<div
-						v-if="
-							selected[credentialTypeDescription.name] &&
-							isCredentialExisting(credentialTypeDescription.name)
-						"
-						:class="$style.edit"
-						data-test-id="credential-edit-button"
-					>
-						<font-awesome-icon
-							icon="pen"
-							class="clickable"
-							:title="$locale.baseText('nodeCredentials.updateCredential')"
-							@click="editCredential(credentialTypeDescription.name)"
-						/>
-					</div>
-				</div>
-			</n8n-input-label>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
@@ -618,6 +507,117 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div
+		v-if="credentialTypesNodeDescriptionDisplayed.length"
+		:class="['node-credentials', $style.container]"
+	>
+		<div
+			v-for="credentialTypeDescription in credentialTypesNodeDescriptionDisplayed"
+			:key="credentialTypeDescription.name"
+		>
+			<n8n-input-label
+				:label="getCredentialsFieldLabel(credentialTypeDescription)"
+				:bold="false"
+				size="small"
+				color="text-dark"
+				data-test-id="credentials-label"
+			>
+				<div v-if="readonly">
+					<n8n-input
+						:model-value="getSelectedName(credentialTypeDescription.name)"
+						disabled
+						size="small"
+						data-test-id="node-credentials-select"
+					/>
+				</div>
+				<div
+					v-else
+					:class="
+						getIssues(credentialTypeDescription.name).length && !hideIssues
+							? $style.hasIssues
+							: $style.input
+					"
+					data-test-id="node-credentials-select"
+				>
+					<n8n-select
+						:model-value="getSelectedId(credentialTypeDescription.name)"
+						:placeholder="
+							getSelectPlaceholder(
+								credentialTypeDescription.name,
+								getIssues(credentialTypeDescription.name),
+							)
+						"
+						size="small"
+						@update:model-value="
+							(value: string) =>
+								onCredentialSelected(
+									credentialTypeDescription.name,
+									value,
+									showMixedCredentials(credentialTypeDescription),
+								)
+						"
+						@blur="$emit('blur', 'credentials')"
+					>
+						<n8n-option
+							v-for="item in getCredentialOptions(
+								getAllRelatedCredentialTypes(credentialTypeDescription),
+							)"
+							:key="item.id"
+							:data-test-id="`node-credentials-select-item-${item.id}`"
+							:label="item.name"
+							:value="item.id"
+						>
+							<div :class="[$style.credentialOption, 'mt-2xs', 'mb-2xs']">
+								<n8n-text bold>{{ item.name }}</n8n-text>
+								<n8n-text size="small">{{ item.typeDisplayName }}</n8n-text>
+							</div>
+						</n8n-option>
+						<n8n-option
+							:key="NEW_CREDENTIALS_TEXT"
+							data-test-id="node-credentials-select-item-new"
+							:value="NEW_CREDENTIALS_TEXT"
+							:label="NEW_CREDENTIALS_TEXT"
+						>
+						</n8n-option>
+					</n8n-select>
+
+					<div
+						v-if="getIssues(credentialTypeDescription.name).length && !hideIssues"
+						:class="$style.warning"
+					>
+						<n8n-tooltip placement="top">
+							<template #content>
+								<TitledList
+									:title="`${$locale.baseText('nodeCredentials.issues')}:`"
+									:items="getIssues(credentialTypeDescription.name)"
+								/>
+							</template>
+							<font-awesome-icon icon="exclamation-triangle" />
+						</n8n-tooltip>
+					</div>
+
+					<div
+						v-if="
+							selected[credentialTypeDescription.name] &&
+							isCredentialExisting(credentialTypeDescription.name)
+						"
+						:class="$style.edit"
+						data-test-id="credential-edit-button"
+					>
+						<font-awesome-icon
+							icon="pen"
+							class="clickable"
+							:title="$locale.baseText('nodeCredentials.updateCredential')"
+							@click="editCredential(credentialTypeDescription.name)"
+						/>
+					</div>
+				</div>
+			</n8n-input-label>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	margin-top: var(--spacing-xs);
diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index 17a2195a8c05d..08bf5e5d5df66 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -1,143 +1,3 @@
-<template>
-	<el-dialog
-		:model-value="(!!activeNode || renaming) && !isActiveStickyNode"
-		:before-close="close"
-		:show-close="false"
-		class="data-display-wrapper ndv-wrapper"
-		overlay-class="data-display-overlay"
-		width="auto"
-		append-to-body
-		data-test-id="ndv"
-		:data-has-output-connection="hasOutputConnection"
-	>
-		<n8n-tooltip
-			placement="bottom-start"
-			:visible="showTriggerWaitingWarning"
-			:disabled="!showTriggerWaitingWarning"
-		>
-			<template #content>
-				<div :class="$style.triggerWarning">
-					{{ $locale.baseText('ndv.backToCanvas.waitingForTriggerWarning') }}
-				</div>
-			</template>
-			<div :class="$style.backToCanvas" data-test-id="back-to-canvas" @click="close">
-				<n8n-icon icon="arrow-left" color="text-xlight" size="medium" />
-				<n8n-text color="text-xlight" size="medium" :bold="true">
-					{{ $locale.baseText('ndv.backToCanvas') }}
-				</n8n-text>
-			</div>
-		</n8n-tooltip>
-
-		<div
-			v-if="activeNode"
-			ref="container"
-			class="data-display"
-			tabindex="0"
-			@keydown.capture="onKeyDown"
-		>
-			<div :class="$style.modalBackground" @click="close"></div>
-			<NDVDraggablePanels
-				:key="activeNode.name"
-				:is-trigger-node="isTriggerNode"
-				:hide-input-and-output="activeNodeType === null"
-				:position="isTriggerNode && !showTriggerPanel ? 0 : undefined"
-				:is-draggable="!isTriggerNode"
-				:has-double-width="activeNodeType?.parameterPane === 'wide'"
-				:node-type="activeNodeType"
-				@switch-selected-node="onSwitchSelectedNode"
-				@open-connection-node-creator="onOpenConnectionNodeCreator"
-				@close="close"
-				@init="onPanelsInit"
-				@dragstart="onDragStart"
-				@dragend="onDragEnd"
-			>
-				<template v-if="showTriggerPanel || !isTriggerNode" #input>
-					<TriggerPanel
-						v-if="showTriggerPanel"
-						:node-name="activeNode.name"
-						:push-ref="pushRef"
-						@execute="onNodeExecute"
-						@activate="onWorkflowActivate"
-					/>
-					<InputPanel
-						v-else-if="!isTriggerNode"
-						:workflow="workflowObject"
-						:can-link-runs="canLinkRuns"
-						:run-index="inputRun"
-						:linked-runs="linked"
-						:current-node-name="inputNodeName"
-						:push-ref="pushRef"
-						:read-only="readOnly || hasForeignCredential"
-						:is-production-execution-preview="isProductionExecutionPreview"
-						:is-pane-active="isInputPaneActive"
-						@activate-pane="activateInputPane"
-						@link-run="onLinkRunToInput"
-						@unlink-run="() => onUnlinkRun('input')"
-						@run-change="onRunInputIndexChange"
-						@open-settings="openSettings"
-						@change-input-node="onInputNodeChange"
-						@execute="onNodeExecute"
-						@table-mounted="onInputTableMounted"
-						@item-hover="onInputItemHover"
-						@search="onSearch"
-					/>
-				</template>
-				<template #output>
-					<OutputPanel
-						data-test-id="output-panel"
-						:workflow="workflowObject"
-						:can-link-runs="canLinkRuns"
-						:run-index="outputRun"
-						:linked-runs="linked"
-						:push-ref="pushRef"
-						:is-read-only="readOnly || hasForeignCredential"
-						:block-u-i="blockUi && isTriggerNode && !isExecutableTriggerNode"
-						:is-production-execution-preview="isProductionExecutionPreview"
-						:is-pane-active="isOutputPaneActive"
-						@activate-pane="activateOutputPane"
-						@link-run="onLinkRunToOutput"
-						@unlink-run="() => onUnlinkRun('output')"
-						@run-change="onRunOutputIndexChange"
-						@open-settings="openSettings"
-						@table-mounted="onOutputTableMounted"
-						@item-hover="onOutputItemHover"
-						@search="onSearch"
-					/>
-				</template>
-				<template #main>
-					<NodeSettings
-						:event-bus="settingsEventBus"
-						:dragging="isDragging"
-						:push-ref="pushRef"
-						:node-type="activeNodeType"
-						:foreign-credentials="foreignCredentials"
-						:read-only="readOnly"
-						:block-u-i="blockUi && showTriggerPanel"
-						:executable="!readOnly"
-						:input-size="inputSize"
-						@value-changed="valueChanged"
-						@execute="onNodeExecute"
-						@stop-execution="onStopExecution"
-						@redraw-required="redrawRequired = true"
-						@activate="onWorkflowActivate"
-						@switch-selected-node="onSwitchSelectedNode"
-						@open-connection-node-creator="onOpenConnectionNodeCreator"
-					/>
-					<a
-						v-if="featureRequestUrl"
-						:class="$style.featureRequest"
-						target="_blank"
-						@click="onFeatureRequestClick"
-					>
-						<font-awesome-icon icon="lightbulb" />
-						{{ $locale.baseText('ndv.featureRequest') }}
-					</a>
-				</template>
-			</NDVDraggablePanels>
-		</div>
-	</el-dialog>
-</template>
-
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue';
 import { createEventBus } from 'n8n-design-system/utils';
@@ -796,6 +656,146 @@ onBeforeUnmount(() => {
 });
 </script>
 
+<template>
+	<el-dialog
+		:model-value="(!!activeNode || renaming) && !isActiveStickyNode"
+		:before-close="close"
+		:show-close="false"
+		class="data-display-wrapper ndv-wrapper"
+		overlay-class="data-display-overlay"
+		width="auto"
+		append-to-body
+		data-test-id="ndv"
+		:data-has-output-connection="hasOutputConnection"
+	>
+		<n8n-tooltip
+			placement="bottom-start"
+			:visible="showTriggerWaitingWarning"
+			:disabled="!showTriggerWaitingWarning"
+		>
+			<template #content>
+				<div :class="$style.triggerWarning">
+					{{ $locale.baseText('ndv.backToCanvas.waitingForTriggerWarning') }}
+				</div>
+			</template>
+			<div :class="$style.backToCanvas" data-test-id="back-to-canvas" @click="close">
+				<n8n-icon icon="arrow-left" color="text-xlight" size="medium" />
+				<n8n-text color="text-xlight" size="medium" :bold="true">
+					{{ $locale.baseText('ndv.backToCanvas') }}
+				</n8n-text>
+			</div>
+		</n8n-tooltip>
+
+		<div
+			v-if="activeNode"
+			ref="container"
+			class="data-display"
+			tabindex="0"
+			@keydown.capture="onKeyDown"
+		>
+			<div :class="$style.modalBackground" @click="close"></div>
+			<NDVDraggablePanels
+				:key="activeNode.name"
+				:is-trigger-node="isTriggerNode"
+				:hide-input-and-output="activeNodeType === null"
+				:position="isTriggerNode && !showTriggerPanel ? 0 : undefined"
+				:is-draggable="!isTriggerNode"
+				:has-double-width="activeNodeType?.parameterPane === 'wide'"
+				:node-type="activeNodeType"
+				@switch-selected-node="onSwitchSelectedNode"
+				@open-connection-node-creator="onOpenConnectionNodeCreator"
+				@close="close"
+				@init="onPanelsInit"
+				@dragstart="onDragStart"
+				@dragend="onDragEnd"
+			>
+				<template v-if="showTriggerPanel || !isTriggerNode" #input>
+					<TriggerPanel
+						v-if="showTriggerPanel"
+						:node-name="activeNode.name"
+						:push-ref="pushRef"
+						@execute="onNodeExecute"
+						@activate="onWorkflowActivate"
+					/>
+					<InputPanel
+						v-else-if="!isTriggerNode"
+						:workflow="workflowObject"
+						:can-link-runs="canLinkRuns"
+						:run-index="inputRun"
+						:linked-runs="linked"
+						:current-node-name="inputNodeName"
+						:push-ref="pushRef"
+						:read-only="readOnly || hasForeignCredential"
+						:is-production-execution-preview="isProductionExecutionPreview"
+						:is-pane-active="isInputPaneActive"
+						@activate-pane="activateInputPane"
+						@link-run="onLinkRunToInput"
+						@unlink-run="() => onUnlinkRun('input')"
+						@run-change="onRunInputIndexChange"
+						@open-settings="openSettings"
+						@change-input-node="onInputNodeChange"
+						@execute="onNodeExecute"
+						@table-mounted="onInputTableMounted"
+						@item-hover="onInputItemHover"
+						@search="onSearch"
+					/>
+				</template>
+				<template #output>
+					<OutputPanel
+						data-test-id="output-panel"
+						:workflow="workflowObject"
+						:can-link-runs="canLinkRuns"
+						:run-index="outputRun"
+						:linked-runs="linked"
+						:push-ref="pushRef"
+						:is-read-only="readOnly || hasForeignCredential"
+						:block-u-i="blockUi && isTriggerNode && !isExecutableTriggerNode"
+						:is-production-execution-preview="isProductionExecutionPreview"
+						:is-pane-active="isOutputPaneActive"
+						@activate-pane="activateOutputPane"
+						@link-run="onLinkRunToOutput"
+						@unlink-run="() => onUnlinkRun('output')"
+						@run-change="onRunOutputIndexChange"
+						@open-settings="openSettings"
+						@table-mounted="onOutputTableMounted"
+						@item-hover="onOutputItemHover"
+						@search="onSearch"
+					/>
+				</template>
+				<template #main>
+					<NodeSettings
+						:event-bus="settingsEventBus"
+						:dragging="isDragging"
+						:push-ref="pushRef"
+						:node-type="activeNodeType"
+						:foreign-credentials="foreignCredentials"
+						:read-only="readOnly"
+						:block-u-i="blockUi && showTriggerPanel"
+						:executable="!readOnly"
+						:input-size="inputSize"
+						@value-changed="valueChanged"
+						@execute="onNodeExecute"
+						@stop-execution="onStopExecution"
+						@redraw-required="redrawRequired = true"
+						@activate="onWorkflowActivate"
+						@switch-selected-node="onSwitchSelectedNode"
+						@open-connection-node-creator="onOpenConnectionNodeCreator"
+					/>
+					<a
+						v-if="featureRequestUrl"
+						:class="$style.featureRequest"
+						target="_blank"
+						@click="onFeatureRequestClick"
+					>
+						<font-awesome-icon icon="lightbulb" />
+						{{ $locale.baseText('ndv.featureRequest') }}
+					</a>
+				</template>
+			</NDVDraggablePanels>
+		</div>
+	</el-dialog>
+</template>
+
 <style lang="scss">
 // Hide notice(.ndv-connection-hint-notice) warning when node has output connection
 [data-has-output-connection='true'] .ndv-connection-hint-notice {
diff --git a/packages/editor-ui/src/components/NodeExecuteButton.vue b/packages/editor-ui/src/components/NodeExecuteButton.vue
index 1a70354735231..b66df657df059 100644
--- a/packages/editor-ui/src/components/NodeExecuteButton.vue
+++ b/packages/editor-ui/src/components/NodeExecuteButton.vue
@@ -1,32 +1,3 @@
-<template>
-	<div>
-		<n8n-tooltip placement="right" :disabled="!tooltipText">
-			<template #content>
-				<div>{{ tooltipText }}</div>
-			</template>
-			<div>
-				<n8n-button
-					v-bind="$attrs"
-					:loading
-					:disabled="disabled || !!disabledHint"
-					:label="buttonLabel"
-					:type="type"
-					:size="size"
-					:icon="!isListeningForEvents && !hideIcon ? 'flask' : undefined"
-					:transparent-background="transparent"
-					:title="
-						!isTriggerNode && !tooltipText
-							? $locale.baseText('ndv.execute.testNode.description')
-							: ''
-					"
-					@mouseover="onMouseOver"
-					@click="onClick"
-				/>
-			</div>
-		</n8n-tooltip>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -319,3 +290,32 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<div>
+		<n8n-tooltip placement="right" :disabled="!tooltipText">
+			<template #content>
+				<div>{{ tooltipText }}</div>
+			</template>
+			<div>
+				<n8n-button
+					v-bind="$attrs"
+					:loading
+					:disabled="disabled || !!disabledHint"
+					:label="buttonLabel"
+					:type="type"
+					:size="size"
+					:icon="!isListeningForEvents && !hideIcon ? 'flask' : undefined"
+					:transparent-background="transparent"
+					:title="
+						!isTriggerNode && !tooltipText
+							? $locale.baseText('ndv.execute.testNode.description')
+							: ''
+					"
+					@mouseover="onMouseOver"
+					@click="onClick"
+				/>
+			</div>
+		</n8n-tooltip>
+	</div>
+</template>
diff --git a/packages/editor-ui/src/components/NodeIcon.vue b/packages/editor-ui/src/components/NodeIcon.vue
index 66e78837188e9..45b57fd323a48 100644
--- a/packages/editor-ui/src/components/NodeIcon.vue
+++ b/packages/editor-ui/src/components/NodeIcon.vue
@@ -1,20 +1,3 @@
-<template>
-	<n8n-node-icon
-		:type="iconType"
-		:src="iconSource.path || iconSource.fileBuffer"
-		:name="iconSource.icon"
-		:color="color"
-		:disabled="disabled"
-		:size="size"
-		:circle="circle"
-		:node-type-name="nodeName ?? nodeType?.displayName ?? ''"
-		:show-tooltip="showTooltip"
-		:tooltip-position="tooltipPosition"
-		:badge="badge"
-		@click="emit('click')"
-	></n8n-node-icon>
-</template>
-
 <script setup lang="ts">
 import type { IVersionNode, SimplifiedNodeType } from '@/Interface';
 import { useRootStore } from '@/stores/root.store';
@@ -130,4 +113,21 @@ const badge = computed(() => {
 });
 </script>
 
+<template>
+	<n8n-node-icon
+		:type="iconType"
+		:src="iconSource.path || iconSource.fileBuffer"
+		:name="iconSource.icon"
+		:color="color"
+		:disabled="disabled"
+		:size="size"
+		:circle="circle"
+		:node-type-name="nodeName ?? nodeType?.displayName ?? ''"
+		:show-tooltip="showTooltip"
+		:tooltip-position="tooltipPosition"
+		:badge="badge"
+		@click="emit('click')"
+	></n8n-node-icon>
+</template>
+
 <style lang="scss" module></style>
diff --git a/packages/editor-ui/src/components/NodeList.vue b/packages/editor-ui/src/components/NodeList.vue
index 53d710ad15932..8e93ecbe5ae49 100644
--- a/packages/editor-ui/src/components/NodeList.vue
+++ b/packages/editor-ui/src/components/NodeList.vue
@@ -1,17 +1,3 @@
-<template>
-	<div :class="$style.list">
-		<div v-for="node in slicedNodes" :key="node.name" :class="[$style.container, $style[size]]">
-			<NodeIcon :node-type="node" :size="size === 'md' ? 24 : 18" :show-tooltip="true" />
-		</div>
-		<div
-			v-if="filteredCoreNodes.length > limit + 1"
-			:class="[$style.button, size === 'md' ? $style.buttonMd : $style.buttonSm]"
-		>
-			+{{ hiddenNodes }}
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import NodeIcon from '@/components/NodeIcon.vue';
@@ -59,6 +45,20 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.list">
+		<div v-for="node in slicedNodes" :key="node.name" :class="[$style.container, $style[size]]">
+			<NodeIcon :node-type="node" :size="size === 'md' ? 24 : 18" :show-tooltip="true" />
+		</div>
+		<div
+			v-if="filteredCoreNodes.length > limit + 1"
+			:class="[$style.button, size === 'md' ? $style.buttonMd : $style.buttonSm]"
+		>
+			+{{ hiddenNodes }}
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .list {
 	max-width: 100px;
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index d9b8a734c190d..9acc78a24cf37 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -1,184 +1,3 @@
-<template>
-	<div
-		:class="{
-			'node-settings': true,
-			dragging: dragging,
-		}"
-		@keydown.stop
-	>
-		<div :class="$style.header">
-			<div class="header-side-menu">
-				<NodeTitle
-					v-if="node"
-					class="node-name"
-					:model-value="node.name"
-					:node-type="nodeType"
-					:read-only="isReadOnly"
-					@update:model-value="nameChanged"
-				></NodeTitle>
-				<div v-if="isExecutable">
-					<NodeExecuteButton
-						v-if="!blockUI && node && nodeValid"
-						data-test-id="node-execute-button"
-						:node-name="node.name"
-						:disabled="outputPanelEditMode.enabled && !isTriggerNode"
-						:tooltip="executeButtonTooltip"
-						size="small"
-						telemetry-source="parameters"
-						@execute="onNodeExecute"
-						@stop-execution="onStopExecution"
-					/>
-				</div>
-			</div>
-			<NodeSettingsTabs
-				v-if="node && nodeValid"
-				:model-value="openPanel"
-				:node-type="nodeType"
-				:push-ref="pushRef"
-				@update:model-value="onTabSelect"
-			/>
-		</div>
-		<div v-if="node && !nodeValid" class="node-is-not-valid">
-			<p :class="$style.warningIcon">
-				<font-awesome-icon icon="exclamation-triangle" />
-			</p>
-			<div class="missingNodeTitleContainer mt-s mb-xs">
-				<n8n-text size="large" color="text-dark" bold>
-					{{ $locale.baseText('nodeSettings.communityNodeUnknown.title') }}
-				</n8n-text>
-			</div>
-			<div v-if="isCommunityNode" :class="$style.descriptionContainer">
-				<div class="mb-l">
-					<i18n-t
-						keypath="nodeSettings.communityNodeUnknown.description"
-						tag="span"
-						@click="onMissingNodeTextClick"
-					>
-						<template #action>
-							<a
-								:href="`https://www.npmjs.com/package/${node.type.split('.')[0]}`"
-								target="_blank"
-								>{{ node.type.split('.')[0] }}</a
-							>
-						</template>
-					</i18n-t>
-				</div>
-				<n8n-link
-					:to="COMMUNITY_NODES_INSTALLATION_DOCS_URL"
-					@click="onMissingNodeLearnMoreLinkClick"
-				>
-					{{ $locale.baseText('nodeSettings.communityNodeUnknown.installLink.text') }}
-				</n8n-link>
-			</div>
-			<i18n-t v-else keypath="nodeSettings.nodeTypeUnknown.description" tag="span">
-				<template #action>
-					<a
-						:href="CUSTOM_NODES_DOCS_URL"
-						target="_blank"
-						v-text="$locale.baseText('nodeSettings.nodeTypeUnknown.description.customNode')"
-					/>
-				</template>
-			</i18n-t>
-		</div>
-		<div v-if="node && nodeValid" class="node-parameters-wrapper" data-test-id="node-parameters">
-			<n8n-notice
-				v-if="hasForeignCredential"
-				:content="
-					$locale.baseText('nodeSettings.hasForeignCredential', {
-						interpolate: { owner: credentialOwnerName },
-					})
-				"
-			/>
-			<div v-show="openPanel === 'params'">
-				<NodeWebhooks :node="node" :node-type="nodeType" />
-
-				<ParameterInputList
-					v-if="nodeValuesInitialized"
-					:parameters="parametersNoneSetting"
-					:hide-delete="true"
-					:node-values="nodeValues"
-					:is-read-only="isReadOnly"
-					:hidden-issues-inputs="hiddenIssuesInputs"
-					path="parameters"
-					@value-changed="valueChanged"
-					@activate="onWorkflowActivate"
-					@parameter-blur="onParameterBlur"
-				>
-					<NodeCredentials
-						:node="node"
-						:readonly="isReadOnly"
-						:show-all="true"
-						:hide-issues="hiddenIssuesInputs.includes('credentials')"
-						@credential-selected="credentialSelected"
-						@value-changed="valueChanged"
-						@blur="onParameterBlur"
-					/>
-				</ParameterInputList>
-				<div v-if="parametersNoneSetting.length === 0" class="no-parameters">
-					<n8n-text>
-						{{ $locale.baseText('nodeSettings.thisNodeDoesNotHaveAnyParameters') }}
-					</n8n-text>
-				</div>
-
-				<div
-					v-if="nodeHelpers.isCustomApiCallSelected(nodeValues)"
-					class="parameter-item parameter-notice"
-					data-test-id="node-parameters-http-notice"
-				>
-					<n8n-notice
-						:content="
-							$locale.baseText('nodeSettings.useTheHttpRequestNode', {
-								interpolate: { nodeTypeDisplayName: nodeType?.displayName ?? '' },
-							})
-						"
-					/>
-				</div>
-			</div>
-			<div v-show="openPanel === 'settings'">
-				<ParameterInputList
-					:parameters="parametersSetting"
-					:node-values="nodeValues"
-					:is-read-only="isReadOnly"
-					:hide-delete="true"
-					:hidden-issues-inputs="hiddenIssuesInputs"
-					path="parameters"
-					@value-changed="valueChanged"
-					@parameter-blur="onParameterBlur"
-				/>
-				<ParameterInputList
-					:parameters="nodeSettings"
-					:hide-delete="true"
-					:node-values="nodeValues"
-					:is-read-only="isReadOnly"
-					:hidden-issues-inputs="hiddenIssuesInputs"
-					path=""
-					@value-changed="valueChanged"
-					@parameter-blur="onParameterBlur"
-				/>
-				<div class="node-version" data-test-id="node-version">
-					{{
-						$locale.baseText('nodeSettings.nodeVersion', {
-							interpolate: {
-								node: nodeType?.displayName as string,
-								version: (node.typeVersion ?? latestVersion).toString(),
-							},
-						})
-					}}
-					<span>({{ nodeVersionTag }})</span>
-				</div>
-			</div>
-		</div>
-		<NDVSubConnections
-			v-if="node"
-			ref="subConnections"
-			:root-node="node"
-			@switch-selected-node="onSwitchSelectedNode"
-			@open-connection-node-creator="onOpenConnectionNodeCreator"
-		/>
-		<n8n-block-ui :show="blockUI" />
-	</div>
-</template>
-
 <script lang="ts">
 import type { PropType } from 'vue';
 import { defineComponent } from 'vue';
@@ -1185,6 +1004,187 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div
+		:class="{
+			'node-settings': true,
+			dragging: dragging,
+		}"
+		@keydown.stop
+	>
+		<div :class="$style.header">
+			<div class="header-side-menu">
+				<NodeTitle
+					v-if="node"
+					class="node-name"
+					:model-value="node.name"
+					:node-type="nodeType"
+					:read-only="isReadOnly"
+					@update:model-value="nameChanged"
+				></NodeTitle>
+				<div v-if="isExecutable">
+					<NodeExecuteButton
+						v-if="!blockUI && node && nodeValid"
+						data-test-id="node-execute-button"
+						:node-name="node.name"
+						:disabled="outputPanelEditMode.enabled && !isTriggerNode"
+						:tooltip="executeButtonTooltip"
+						size="small"
+						telemetry-source="parameters"
+						@execute="onNodeExecute"
+						@stop-execution="onStopExecution"
+					/>
+				</div>
+			</div>
+			<NodeSettingsTabs
+				v-if="node && nodeValid"
+				:model-value="openPanel"
+				:node-type="nodeType"
+				:push-ref="pushRef"
+				@update:model-value="onTabSelect"
+			/>
+		</div>
+		<div v-if="node && !nodeValid" class="node-is-not-valid">
+			<p :class="$style.warningIcon">
+				<font-awesome-icon icon="exclamation-triangle" />
+			</p>
+			<div class="missingNodeTitleContainer mt-s mb-xs">
+				<n8n-text size="large" color="text-dark" bold>
+					{{ $locale.baseText('nodeSettings.communityNodeUnknown.title') }}
+				</n8n-text>
+			</div>
+			<div v-if="isCommunityNode" :class="$style.descriptionContainer">
+				<div class="mb-l">
+					<i18n-t
+						keypath="nodeSettings.communityNodeUnknown.description"
+						tag="span"
+						@click="onMissingNodeTextClick"
+					>
+						<template #action>
+							<a
+								:href="`https://www.npmjs.com/package/${node.type.split('.')[0]}`"
+								target="_blank"
+								>{{ node.type.split('.')[0] }}</a
+							>
+						</template>
+					</i18n-t>
+				</div>
+				<n8n-link
+					:to="COMMUNITY_NODES_INSTALLATION_DOCS_URL"
+					@click="onMissingNodeLearnMoreLinkClick"
+				>
+					{{ $locale.baseText('nodeSettings.communityNodeUnknown.installLink.text') }}
+				</n8n-link>
+			</div>
+			<i18n-t v-else keypath="nodeSettings.nodeTypeUnknown.description" tag="span">
+				<template #action>
+					<a
+						:href="CUSTOM_NODES_DOCS_URL"
+						target="_blank"
+						v-text="$locale.baseText('nodeSettings.nodeTypeUnknown.description.customNode')"
+					/>
+				</template>
+			</i18n-t>
+		</div>
+		<div v-if="node && nodeValid" class="node-parameters-wrapper" data-test-id="node-parameters">
+			<n8n-notice
+				v-if="hasForeignCredential"
+				:content="
+					$locale.baseText('nodeSettings.hasForeignCredential', {
+						interpolate: { owner: credentialOwnerName },
+					})
+				"
+			/>
+			<div v-show="openPanel === 'params'">
+				<NodeWebhooks :node="node" :node-type="nodeType" />
+
+				<ParameterInputList
+					v-if="nodeValuesInitialized"
+					:parameters="parametersNoneSetting"
+					:hide-delete="true"
+					:node-values="nodeValues"
+					:is-read-only="isReadOnly"
+					:hidden-issues-inputs="hiddenIssuesInputs"
+					path="parameters"
+					@value-changed="valueChanged"
+					@activate="onWorkflowActivate"
+					@parameter-blur="onParameterBlur"
+				>
+					<NodeCredentials
+						:node="node"
+						:readonly="isReadOnly"
+						:show-all="true"
+						:hide-issues="hiddenIssuesInputs.includes('credentials')"
+						@credential-selected="credentialSelected"
+						@value-changed="valueChanged"
+						@blur="onParameterBlur"
+					/>
+				</ParameterInputList>
+				<div v-if="parametersNoneSetting.length === 0" class="no-parameters">
+					<n8n-text>
+						{{ $locale.baseText('nodeSettings.thisNodeDoesNotHaveAnyParameters') }}
+					</n8n-text>
+				</div>
+
+				<div
+					v-if="nodeHelpers.isCustomApiCallSelected(nodeValues)"
+					class="parameter-item parameter-notice"
+					data-test-id="node-parameters-http-notice"
+				>
+					<n8n-notice
+						:content="
+							$locale.baseText('nodeSettings.useTheHttpRequestNode', {
+								interpolate: { nodeTypeDisplayName: nodeType?.displayName ?? '' },
+							})
+						"
+					/>
+				</div>
+			</div>
+			<div v-show="openPanel === 'settings'">
+				<ParameterInputList
+					:parameters="parametersSetting"
+					:node-values="nodeValues"
+					:is-read-only="isReadOnly"
+					:hide-delete="true"
+					:hidden-issues-inputs="hiddenIssuesInputs"
+					path="parameters"
+					@value-changed="valueChanged"
+					@parameter-blur="onParameterBlur"
+				/>
+				<ParameterInputList
+					:parameters="nodeSettings"
+					:hide-delete="true"
+					:node-values="nodeValues"
+					:is-read-only="isReadOnly"
+					:hidden-issues-inputs="hiddenIssuesInputs"
+					path=""
+					@value-changed="valueChanged"
+					@parameter-blur="onParameterBlur"
+				/>
+				<div class="node-version" data-test-id="node-version">
+					{{
+						$locale.baseText('nodeSettings.nodeVersion', {
+							interpolate: {
+								node: nodeType?.displayName as string,
+								version: (node.typeVersion ?? latestVersion).toString(),
+							},
+						})
+					}}
+					<span>({{ nodeVersionTag }})</span>
+				</div>
+			</div>
+		</div>
+		<NDVSubConnections
+			v-if="node"
+			ref="subConnections"
+			:root-node="node"
+			@switch-selected-node="onSwitchSelectedNode"
+			@open-connection-node-creator="onOpenConnectionNodeCreator"
+		/>
+		<n8n-block-ui :show="blockUI" />
+	</div>
+</template>
+
 <style lang="scss" module>
 .header {
 	background-color: var(--color-background-base);
diff --git a/packages/editor-ui/src/components/NodeSettingsTabs.vue b/packages/editor-ui/src/components/NodeSettingsTabs.vue
index 11a779d3a40d0..8b9f06f2b6150 100644
--- a/packages/editor-ui/src/components/NodeSettingsTabs.vue
+++ b/packages/editor-ui/src/components/NodeSettingsTabs.vue
@@ -1,12 +1,3 @@
-<template>
-	<N8nTabs
-		:options="options"
-		:model-value="modelValue"
-		@update:model-value="onTabSelect"
-		@tooltip-click="onTooltipClick"
-	/>
-</template>
-
 <script setup lang="ts">
 import type { ITab } from '@/Interface';
 import {
@@ -163,6 +154,15 @@ function onTooltipClick(tab: string, event: MouseEvent) {
 }
 </script>
 
+<template>
+	<N8nTabs
+		:options="options"
+		:model-value="modelValue"
+		@update:model-value="onTabSelect"
+		@tooltip-click="onTooltipClick"
+	/>
+</template>
+
 <style lang="scss">
 #communityNode > div {
 	cursor: auto;
diff --git a/packages/editor-ui/src/components/NodeTitle.vue b/packages/editor-ui/src/components/NodeTitle.vue
index 5e1168928e21f..01324b01281f4 100644
--- a/packages/editor-ui/src/components/NodeTitle.vue
+++ b/packages/editor-ui/src/components/NodeTitle.vue
@@ -1,46 +1,3 @@
-<template>
-	<span :class="$style.container" data-test-id="node-title-container" @click="onEdit">
-		<span :class="$style.iconWrapper">
-			<NodeIcon :node-type="nodeType" :size="18" />
-		</span>
-		<n8n-popover placement="right" width="200" :visible="editName" :disabled="!editable">
-			<div
-				:class="$style.editContainer"
-				@keydown.enter="onRename"
-				@keydown.stop
-				@keydown.esc="editName = false"
-			>
-				<n8n-text :bold="true" color="text-base" tag="div">{{
-					$locale.baseText('ndv.title.renameNode')
-				}}</n8n-text>
-				<n8n-input ref="input" v-model="newName" size="small" data-test-id="node-rename-input" />
-				<div :class="$style.editButtons">
-					<n8n-button
-						type="secondary"
-						size="small"
-						:label="$locale.baseText('ndv.title.cancel')"
-						@click="editName = false"
-					/>
-					<n8n-button
-						type="primary"
-						size="small"
-						:label="$locale.baseText('ndv.title.rename')"
-						@click="onRename"
-					/>
-				</div>
-			</div>
-			<template #reference>
-				<div :class="{ [$style.title]: true, [$style.hoverable]: editable }">
-					{{ modelValue }}
-					<div :class="$style.editIconContainer">
-						<font-awesome-icon v-if="editable" :class="$style.editIcon" icon="pencil-alt" />
-					</div>
-				</div>
-			</template>
-		</n8n-popover>
-	</span>
-</template>
-
 <script setup lang="ts">
 import NodeIcon from '@/components/NodeIcon.vue';
 import type { INodeTypeDescription } from 'n8n-workflow';
@@ -84,6 +41,49 @@ function onRename() {
 }
 </script>
 
+<template>
+	<span :class="$style.container" data-test-id="node-title-container" @click="onEdit">
+		<span :class="$style.iconWrapper">
+			<NodeIcon :node-type="nodeType" :size="18" />
+		</span>
+		<n8n-popover placement="right" width="200" :visible="editName" :disabled="!editable">
+			<div
+				:class="$style.editContainer"
+				@keydown.enter="onRename"
+				@keydown.stop
+				@keydown.esc="editName = false"
+			>
+				<n8n-text :bold="true" color="text-base" tag="div">{{
+					$locale.baseText('ndv.title.renameNode')
+				}}</n8n-text>
+				<n8n-input ref="input" v-model="newName" size="small" data-test-id="node-rename-input" />
+				<div :class="$style.editButtons">
+					<n8n-button
+						type="secondary"
+						size="small"
+						:label="$locale.baseText('ndv.title.cancel')"
+						@click="editName = false"
+					/>
+					<n8n-button
+						type="primary"
+						size="small"
+						:label="$locale.baseText('ndv.title.rename')"
+						@click="onRename"
+					/>
+				</div>
+			</div>
+			<template #reference>
+				<div :class="{ [$style.title]: true, [$style.hoverable]: editable }">
+					{{ modelValue }}
+					<div :class="$style.editIconContainer">
+						<font-awesome-icon v-if="editable" :class="$style.editIcon" icon="pencil-alt" />
+					</div>
+				</div>
+			</template>
+		</n8n-popover>
+	</span>
+</template>
+
 <style lang="scss" module>
 .container {
 	font-weight: var(--font-weight-bold);
diff --git a/packages/editor-ui/src/components/NodeWebhooks.vue b/packages/editor-ui/src/components/NodeWebhooks.vue
index 5ee9d9979fb0a..6924bbc82e029 100644
--- a/packages/editor-ui/src/components/NodeWebhooks.vue
+++ b/packages/editor-ui/src/components/NodeWebhooks.vue
@@ -1,54 +1,3 @@
-<template>
-	<div v-if="webhooksNode.length && visibleWebhookUrls.length > 0" class="webhooks">
-		<div
-			class="clickable headline"
-			:class="{ expanded: !isMinimized }"
-			:title="isMinimized ? baseText.clickToDisplay : baseText.clickToHide"
-			@click="isMinimized = !isMinimized"
-		>
-			<font-awesome-icon icon="angle-right" class="minimize-button minimize-icon" />
-			{{ baseText.toggleTitle }}
-		</div>
-		<el-collapse-transition>
-			<div v-if="!isMinimized" class="node-webhooks">
-				<div v-if="!isProductionOnly" class="url-selection">
-					<el-row>
-						<el-col :span="24">
-							<n8n-radio-buttons v-model="showUrlFor" :options="urlOptions" />
-						</el-col>
-					</el-row>
-				</div>
-
-				<n8n-tooltip
-					v-for="(webhook, index) in visibleWebhookUrls"
-					:key="index"
-					class="item"
-					:content="baseText.clickToCopy"
-					placement="left"
-				>
-					<div v-if="isWebhookMethodVisible(webhook)" class="webhook-wrapper">
-						<div class="http-field">
-							<div class="http-method">{{ getWebhookHttpMethod(webhook) }}<br /></div>
-						</div>
-						<div class="url-field">
-							<div class="webhook-url left-ellipsis clickable" @click="copyWebhookUrl(webhook)">
-								{{ getWebhookUrlDisplay(webhook) }}<br />
-							</div>
-						</div>
-					</div>
-					<div v-else class="webhook-wrapper">
-						<div class="url-field-full-width">
-							<div class="webhook-url left-ellipsis clickable" @click="copyWebhookUrl(webhook)">
-								{{ getWebhookUrlDisplay(webhook) }}<br />
-							</div>
-						</div>
-					</div>
-				</n8n-tooltip>
-			</div>
-		</el-collapse-transition>
-	</div>
-</template>
-
 <script lang="ts">
 import type { INodeTypeDescription, IWebhookDescription } from 'n8n-workflow';
 import { defineComponent } from 'vue';
@@ -218,6 +167,57 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div v-if="webhooksNode.length && visibleWebhookUrls.length > 0" class="webhooks">
+		<div
+			class="clickable headline"
+			:class="{ expanded: !isMinimized }"
+			:title="isMinimized ? baseText.clickToDisplay : baseText.clickToHide"
+			@click="isMinimized = !isMinimized"
+		>
+			<font-awesome-icon icon="angle-right" class="minimize-button minimize-icon" />
+			{{ baseText.toggleTitle }}
+		</div>
+		<el-collapse-transition>
+			<div v-if="!isMinimized" class="node-webhooks">
+				<div v-if="!isProductionOnly" class="url-selection">
+					<el-row>
+						<el-col :span="24">
+							<n8n-radio-buttons v-model="showUrlFor" :options="urlOptions" />
+						</el-col>
+					</el-row>
+				</div>
+
+				<n8n-tooltip
+					v-for="(webhook, index) in visibleWebhookUrls"
+					:key="index"
+					class="item"
+					:content="baseText.clickToCopy"
+					placement="left"
+				>
+					<div v-if="isWebhookMethodVisible(webhook)" class="webhook-wrapper">
+						<div class="http-field">
+							<div class="http-method">{{ getWebhookHttpMethod(webhook) }}<br /></div>
+						</div>
+						<div class="url-field">
+							<div class="webhook-url left-ellipsis clickable" @click="copyWebhookUrl(webhook)">
+								{{ getWebhookUrlDisplay(webhook) }}<br />
+							</div>
+						</div>
+					</div>
+					<div v-else class="webhook-wrapper">
+						<div class="url-field-full-width">
+							<div class="webhook-url left-ellipsis clickable" @click="copyWebhookUrl(webhook)">
+								{{ getWebhookUrlDisplay(webhook) }}<br />
+							</div>
+						</div>
+					</div>
+				</n8n-tooltip>
+			</div>
+		</el-collapse-transition>
+	</div>
+</template>
+
 <style scoped lang="scss">
 .webhooks {
 	padding-bottom: var(--spacing-xs);
diff --git a/packages/editor-ui/src/components/OutputPanel.vue b/packages/editor-ui/src/components/OutputPanel.vue
index af1a7801f6652..b1ddc35042d4b 100644
--- a/packages/editor-ui/src/components/OutputPanel.vue
+++ b/packages/editor-ui/src/components/OutputPanel.vue
@@ -1,107 +1,3 @@
-<template>
-	<RunData
-		ref="runDataRef"
-		:node="node"
-		:workflow="workflow"
-		:run-index="runIndex"
-		:linked-runs="linkedRuns"
-		:can-link-runs="canLinkRuns"
-		:too-much-data-title="$locale.baseText('ndv.output.tooMuchData.title')"
-		:no-data-in-branch-message="$locale.baseText('ndv.output.noOutputDataInBranch')"
-		:is-executing="isNodeRunning"
-		:executing-message="$locale.baseText('ndv.output.executing')"
-		:push-ref="pushRef"
-		:block-u-i="blockUI"
-		:is-production-execution-preview="isProductionExecutionPreview"
-		:is-pane-active="isPaneActive"
-		pane-type="output"
-		:data-output-type="outputMode"
-		@activate-pane="activatePane"
-		@run-change="onRunIndexChange"
-		@link-run="onLinkRun"
-		@unlink-run="onUnlinkRun"
-		@table-mounted="emit('tableMounted', $event)"
-		@item-hover="emit('itemHover', $event)"
-		@search="emit('search', $event)"
-	>
-		<template #header>
-			<div :class="$style.titleSection">
-				<template v-if="hasAiMetadata">
-					<n8n-radio-buttons
-						data-test-id="ai-output-mode-select"
-						v-model="outputMode"
-						:options="outputTypes"
-						@update:model-value="onUpdateOutputMode"
-					/>
-				</template>
-				<span v-else :class="$style.title">
-					{{ $locale.baseText(outputPanelEditMode.enabled ? 'ndv.output.edit' : 'ndv.output') }}
-				</span>
-				<RunInfo
-					v-if="hasNodeRun && !pinnedData.hasData.value && runsCount === 1"
-					v-show="!outputPanelEditMode.enabled"
-					:task-data="runTaskData"
-					:has-stale-data="staleData"
-					:has-pin-data="pinnedData.hasData.value"
-				/>
-			</div>
-		</template>
-
-		<template #node-not-run>
-			<n8n-text v-if="workflowRunning && !isTriggerNode" data-test-id="ndv-output-waiting">{{
-				$locale.baseText('ndv.output.waitingToRun')
-			}}</n8n-text>
-			<n8n-text v-if="!workflowRunning" data-test-id="ndv-output-run-node-hint">
-				<template v-if="isSubNodeType">
-					{{ $locale.baseText('ndv.output.runNodeHintSubNode') }}
-				</template>
-				<template v-else>
-					{{ $locale.baseText('ndv.output.runNodeHint') }}
-					<span v-if="canPinData" @click="insertTestData">
-						<br />
-						{{ $locale.baseText('generic.or') }}
-						<n8n-text tag="a" size="medium" color="primary">
-							{{ $locale.baseText('ndv.output.insertTestData') }}
-						</n8n-text>
-					</span>
-				</template>
-			</n8n-text>
-		</template>
-
-		<template #no-output-data>
-			<n8n-text :bold="true" color="text-dark" size="large">{{
-				$locale.baseText('ndv.output.noOutputData.title')
-			}}</n8n-text>
-			<n8n-text>
-				{{ $locale.baseText('ndv.output.noOutputData.message') }}
-				<a @click="openSettings">{{
-					$locale.baseText('ndv.output.noOutputData.message.settings')
-				}}</a>
-				{{ $locale.baseText('ndv.output.noOutputData.message.settingsOption') }}
-			</n8n-text>
-		</template>
-
-		<template v-if="outputMode === 'logs' && node" #content>
-			<RunDataAi :node="node" :run-index="runIndex" />
-		</template>
-
-		<template #recovered-artificial-output-data>
-			<div :class="$style.recoveredOutputData">
-				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
-					$locale.baseText('executionDetails.executionFailed.recoveredNodeTitle')
-				}}</n8n-text>
-				<n8n-text>
-					{{ $locale.baseText('executionDetails.executionFailed.recoveredNodeMessage') }}
-				</n8n-text>
-			</div>
-		</template>
-
-		<template v-if="!pinnedData.hasData.value && runsCount > 1" #run-info>
-			<RunInfo :task-data="runTaskData" />
-		</template>
-	</RunData>
-</template>
-
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue';
 import type { IRunData, IRunExecutionData, NodeError, Workflow } from 'n8n-workflow';
@@ -382,6 +278,110 @@ const activatePane = () => {
 };
 </script>
 
+<template>
+	<RunData
+		ref="runDataRef"
+		:node="node"
+		:workflow="workflow"
+		:run-index="runIndex"
+		:linked-runs="linkedRuns"
+		:can-link-runs="canLinkRuns"
+		:too-much-data-title="$locale.baseText('ndv.output.tooMuchData.title')"
+		:no-data-in-branch-message="$locale.baseText('ndv.output.noOutputDataInBranch')"
+		:is-executing="isNodeRunning"
+		:executing-message="$locale.baseText('ndv.output.executing')"
+		:push-ref="pushRef"
+		:block-u-i="blockUI"
+		:is-production-execution-preview="isProductionExecutionPreview"
+		:is-pane-active="isPaneActive"
+		pane-type="output"
+		:data-output-type="outputMode"
+		@activate-pane="activatePane"
+		@run-change="onRunIndexChange"
+		@link-run="onLinkRun"
+		@unlink-run="onUnlinkRun"
+		@table-mounted="emit('tableMounted', $event)"
+		@item-hover="emit('itemHover', $event)"
+		@search="emit('search', $event)"
+	>
+		<template #header>
+			<div :class="$style.titleSection">
+				<template v-if="hasAiMetadata">
+					<n8n-radio-buttons
+						data-test-id="ai-output-mode-select"
+						v-model="outputMode"
+						:options="outputTypes"
+						@update:model-value="onUpdateOutputMode"
+					/>
+				</template>
+				<span v-else :class="$style.title">
+					{{ $locale.baseText(outputPanelEditMode.enabled ? 'ndv.output.edit' : 'ndv.output') }}
+				</span>
+				<RunInfo
+					v-if="hasNodeRun && !pinnedData.hasData.value && runsCount === 1"
+					v-show="!outputPanelEditMode.enabled"
+					:task-data="runTaskData"
+					:has-stale-data="staleData"
+					:has-pin-data="pinnedData.hasData.value"
+				/>
+			</div>
+		</template>
+
+		<template #node-not-run>
+			<n8n-text v-if="workflowRunning && !isTriggerNode" data-test-id="ndv-output-waiting">{{
+				$locale.baseText('ndv.output.waitingToRun')
+			}}</n8n-text>
+			<n8n-text v-if="!workflowRunning" data-test-id="ndv-output-run-node-hint">
+				<template v-if="isSubNodeType">
+					{{ $locale.baseText('ndv.output.runNodeHintSubNode') }}
+				</template>
+				<template v-else>
+					{{ $locale.baseText('ndv.output.runNodeHint') }}
+					<span v-if="canPinData" @click="insertTestData">
+						<br />
+						{{ $locale.baseText('generic.or') }}
+						<n8n-text tag="a" size="medium" color="primary">
+							{{ $locale.baseText('ndv.output.insertTestData') }}
+						</n8n-text>
+					</span>
+				</template>
+			</n8n-text>
+		</template>
+
+		<template #no-output-data>
+			<n8n-text :bold="true" color="text-dark" size="large">{{
+				$locale.baseText('ndv.output.noOutputData.title')
+			}}</n8n-text>
+			<n8n-text>
+				{{ $locale.baseText('ndv.output.noOutputData.message') }}
+				<a @click="openSettings">{{
+					$locale.baseText('ndv.output.noOutputData.message.settings')
+				}}</a>
+				{{ $locale.baseText('ndv.output.noOutputData.message.settingsOption') }}
+			</n8n-text>
+		</template>
+
+		<template v-if="outputMode === 'logs' && node" #content>
+			<RunDataAi :node="node" :run-index="runIndex" />
+		</template>
+
+		<template #recovered-artificial-output-data>
+			<div :class="$style.recoveredOutputData">
+				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+					$locale.baseText('executionDetails.executionFailed.recoveredNodeTitle')
+				}}</n8n-text>
+				<n8n-text>
+					{{ $locale.baseText('executionDetails.executionFailed.recoveredNodeMessage') }}
+				</n8n-text>
+			</div>
+		</template>
+
+		<template v-if="!pinnedData.hasData.value && runsCount > 1" #run-info>
+			<RunInfo :task-data="runTaskData" />
+		</template>
+	</RunData>
+</template>
+
 <style lang="scss" module>
 // The items count and displayModes are rendered in the RunData component
 // this is a workaround to hide it in the output panel(for ai type) to not add unnecessary one-time props
diff --git a/packages/editor-ui/src/components/PageAlert.vue b/packages/editor-ui/src/components/PageAlert.vue
index a6cf03113c31f..9c16a8d21f85f 100644
--- a/packages/editor-ui/src/components/PageAlert.vue
+++ b/packages/editor-ui/src/components/PageAlert.vue
@@ -1,7 +1,3 @@
-<template>
-	<span v-show="false" />
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { NotificationHandle } from 'element-plus';
@@ -47,3 +43,7 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<span v-show="false" />
+</template>
diff --git a/packages/editor-ui/src/components/PanelDragButton.vue b/packages/editor-ui/src/components/PanelDragButton.vue
index 35a10693d8c06..cffd9ce15fe9a 100644
--- a/packages/editor-ui/src/components/PanelDragButton.vue
+++ b/packages/editor-ui/src/components/PanelDragButton.vue
@@ -1,3 +1,34 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Draggable from './Draggable.vue';
+import type { XYPosition } from '@/Interface';
+
+export default defineComponent({
+	components: {
+		Draggable,
+	},
+	props: {
+		canMoveRight: {
+			type: Boolean,
+		},
+		canMoveLeft: {
+			type: Boolean,
+		},
+	},
+	methods: {
+		onDrag(e: XYPosition) {
+			this.$emit('drag', e);
+		},
+		onDragStart() {
+			this.$emit('dragstart');
+		},
+		onDragEnd() {
+			this.$emit('dragend');
+		},
+	},
+});
+</script>
+
 <template>
 	<Draggable
 		type="panel-resize"
@@ -41,37 +72,6 @@
 	</Draggable>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import Draggable from './Draggable.vue';
-import type { XYPosition } from '@/Interface';
-
-export default defineComponent({
-	components: {
-		Draggable,
-	},
-	props: {
-		canMoveRight: {
-			type: Boolean,
-		},
-		canMoveLeft: {
-			type: Boolean,
-		},
-	},
-	methods: {
-		onDrag(e: XYPosition) {
-			this.$emit('drag', e);
-		},
-		onDragStart() {
-			this.$emit('dragstart');
-		},
-		onDragEnd() {
-			this.$emit('dragend');
-		},
-	},
-});
-</script>
-
 <style lang="scss" module>
 .dragContainer {
 	pointer-events: all;
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index b55e7b7c6d3b1..4e056fe83576c 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -1,495 +1,3 @@
-<template>
-	<div ref="wrapper" :class="parameterInputClasses" @keydown.stop>
-		<ExpressionEditModal
-			:dialog-visible="expressionEditDialogVisible"
-			:model-value="modelValueExpressionEdit"
-			:parameter="parameter"
-			:node="node"
-			:path="path"
-			:event-source="eventSource || 'ndv'"
-			:is-read-only="isReadOnly"
-			:redact-values="shouldRedactValue"
-			@close-dialog="closeExpressionEditDialog"
-			@update:model-value="expressionUpdated"
-		></ExpressionEditModal>
-
-		<div class="parameter-input ignore-key-press" :style="parameterInputWrapperStyle">
-			<ResourceLocator
-				v-if="parameter.type === 'resourceLocator'"
-				ref="resourceLocator"
-				:parameter="parameter"
-				:model-value="modelValueResourceLocator"
-				:dependent-parameters-values="dependentParametersValues"
-				:display-title="displayTitle"
-				:expression-display-value="expressionDisplayValue"
-				:expression-computed-value="expressionEvaluated"
-				:is-value-expression="isModelValueExpression"
-				:is-read-only="isReadOnly"
-				:parameter-issues="getIssues"
-				:droppable="droppable"
-				:node="node"
-				:path="path"
-				:event-bus="eventBus"
-				@update:model-value="valueChanged"
-				@modal-opener-click="openExpressionEditorModal"
-				@focus="setFocus"
-				@blur="onBlur"
-				@drop="onResourceLocatorDrop"
-			/>
-			<WorkflowSelectorParameterInput
-				v-else-if="parameter.type === 'workflowSelector'"
-				ref="resourceLocator"
-				:parameter="parameter"
-				:model-value="modelValueResourceLocator"
-				:dependent-parameters-values="dependentParametersValues"
-				:display-title="displayTitle"
-				:expression-display-value="expressionDisplayValue"
-				:expression-computed-value="expressionEvaluated"
-				:is-value-expression="isModelValueExpression"
-				:expression-edit-dialog-visible="expressionEditDialogVisible"
-				:path="path"
-				:parameter-issues="getIssues"
-				@update:model-value="valueChanged"
-				@modal-opener-click="openExpressionEditorModal"
-				@focus="setFocus"
-				@blur="onBlur"
-				@drop="onResourceLocatorDrop"
-			/>
-			<ExpressionParameterInput
-				v-else-if="isModelValueExpression || forceShowExpression"
-				ref="inputField"
-				:model-value="expressionDisplayValue"
-				:title="displayTitle"
-				:is-read-only="isReadOnly"
-				:rows="rows"
-				:is-assignment="isAssignment"
-				:path="path"
-				:additional-expression-data="additionalExpressionData"
-				:class="{ 'ph-no-capture': shouldRedactValue }"
-				:event-bus="eventBus"
-				@update:model-value="expressionUpdated"
-				@modal-opener-click="openExpressionEditorModal"
-				@focus="setFocus"
-				@blur="onBlur"
-			/>
-			<div
-				v-else-if="
-					['json', 'string'].includes(parameter.type) ||
-					remoteParameterOptionsLoadingIssues !== null
-				"
-			>
-				<el-dialog
-					:model-value="codeEditDialogVisible"
-					append-to-body
-					width="80%"
-					:title="`${i18n.baseText('codeEdit.edit')} ${$locale
-						.nodeText()
-						.inputLabelDisplayName(parameter, path)}`"
-					:before-close="closeCodeEditDialog"
-					data-test-id="code-editor-fullscreen"
-				>
-					<div :key="codeEditDialogVisible.toString()" class="ignore-key-press code-edit-dialog">
-						<CodeNodeEditor
-							v-if="editorType === 'codeNodeEditor'"
-							:mode="codeEditorMode"
-							:model-value="modelValueString"
-							:default-value="parameter.default"
-							:language="editorLanguage"
-							:is-read-only="isReadOnly"
-							fill-parent
-							@update:model-value="valueChangedDebounced"
-						/>
-						<HtmlEditor
-							v-else-if="editorType === 'htmlEditor'"
-							:model-value="modelValueString"
-							:is-read-only="isReadOnly"
-							:rows="editorRows"
-							:disable-expression-coloring="!isHtmlNode"
-							:disable-expression-completions="!isHtmlNode"
-							fullscreen
-							@update:model-value="valueChangedDebounced"
-						/>
-						<SqlEditor
-							v-else-if="editorType === 'sqlEditor'"
-							:model-value="modelValueString"
-							:dialect="getArgument('sqlDialect')"
-							:is-read-only="isReadOnly"
-							:rows="editorRows"
-							fullscreen
-							@update:model-value="valueChangedDebounced"
-						/>
-						<JsEditor
-							v-else-if="editorType === 'jsEditor'"
-							:model-value="modelValueString"
-							:is-read-only="isReadOnly"
-							:rows="editorRows"
-							fill-parent
-							@update:model-value="valueChangedDebounced"
-						/>
-
-						<JsonEditor
-							v-else-if="parameter.type === 'json'"
-							:model-value="modelValueString"
-							:is-read-only="isReadOnly"
-							:rows="editorRows"
-							fill-parent
-							@update:model-value="valueChangedDebounced"
-						/>
-					</div>
-				</el-dialog>
-
-				<TextEdit
-					:dialog-visible="textEditDialogVisible"
-					:model-value="`${modelValue}`"
-					:parameter="parameter"
-					:path="path"
-					:is-read-only="isReadOnly"
-					@close-dialog="closeTextEditDialog"
-					@update:model-value="expressionUpdated"
-				></TextEdit>
-
-				<CodeNodeEditor
-					v-if="editorType === 'codeNodeEditor' && isCodeNode"
-					:key="'code-' + codeEditDialogVisible.toString()"
-					:mode="codeEditorMode"
-					:model-value="modelValueString"
-					:default-value="parameter.default"
-					:language="editorLanguage"
-					:is-read-only="isReadOnly || editorIsReadOnly"
-					:rows="editorRows"
-					:ai-button-enabled="settingsStore.isCloudDeployment"
-					@update:model-value="valueChangedDebounced"
-				>
-					<template #suffix>
-						<n8n-icon
-							v-if="!editorIsReadOnly"
-							data-test-id="code-editor-fullscreen-button"
-							icon="external-link-alt"
-							size="xsmall"
-							class="textarea-modal-opener"
-							:title="$locale.baseText('parameterInput.openEditWindow')"
-							@click="displayEditDialog()"
-						/>
-					</template>
-				</CodeNodeEditor>
-
-				<HtmlEditor
-					v-else-if="editorType === 'htmlEditor'"
-					:key="'html-' + codeEditDialogVisible.toString()"
-					:model-value="modelValueString"
-					:is-read-only="isReadOnly"
-					:rows="editorRows"
-					:disable-expression-coloring="!isHtmlNode"
-					:disable-expression-completions="!isHtmlNode"
-					@update:model-value="valueChangedDebounced"
-				>
-					<template #suffix>
-						<n8n-icon
-							data-test-id="code-editor-fullscreen-button"
-							icon="external-link-alt"
-							size="xsmall"
-							class="textarea-modal-opener"
-							:title="$locale.baseText('parameterInput.openEditWindow')"
-							@click="displayEditDialog()"
-						/>
-					</template>
-				</HtmlEditor>
-
-				<SqlEditor
-					v-else-if="editorType === 'sqlEditor'"
-					:key="'sql-' + codeEditDialogVisible.toString()"
-					:model-value="modelValueString"
-					:dialect="getArgument('sqlDialect')"
-					:is-read-only="isReadOnly"
-					:rows="editorRows"
-					@update:model-value="valueChangedDebounced"
-				>
-					<template #suffix>
-						<n8n-icon
-							data-test-id="code-editor-fullscreen-button"
-							icon="external-link-alt"
-							size="xsmall"
-							class="textarea-modal-opener"
-							:title="$locale.baseText('parameterInput.openEditWindow')"
-							@click="displayEditDialog()"
-						/>
-					</template>
-				</SqlEditor>
-
-				<JsEditor
-					v-else-if="editorType === 'jsEditor'"
-					:key="'js-' + codeEditDialogVisible.toString()"
-					:model-value="modelValueString"
-					:is-read-only="isReadOnly || editorIsReadOnly"
-					:rows="editorRows"
-					@update:model-value="valueChangedDebounced"
-				>
-					<template #suffix>
-						<n8n-icon
-							v-if="!editorIsReadOnly"
-							data-test-id="code-editor-fullscreen-button"
-							icon="external-link-alt"
-							size="xsmall"
-							class="textarea-modal-opener"
-							:title="$locale.baseText('parameterInput.openEditWindow')"
-							@click="displayEditDialog()"
-						/>
-					</template>
-				</JsEditor>
-
-				<JsonEditor
-					v-else-if="parameter.type === 'json'"
-					:key="'json-' + codeEditDialogVisible.toString()"
-					:model-value="modelValueString"
-					:is-read-only="isReadOnly"
-					:rows="editorRows"
-					@update:model-value="valueChangedDebounced"
-				>
-					<template #suffix>
-						<n8n-icon
-							data-test-id="code-editor-fullscreen-button"
-							icon="external-link-alt"
-							size="xsmall"
-							class="textarea-modal-opener"
-							:title="$locale.baseText('parameterInput.openEditWindow')"
-							@click="displayEditDialog()"
-						/>
-					</template>
-				</JsonEditor>
-
-				<div v-else-if="editorType" class="readonly-code clickable" @click="displayEditDialog()">
-					<CodeNodeEditor
-						v-if="!codeEditDialogVisible"
-						:mode="codeEditorMode"
-						:model-value="modelValueString"
-						:language="editorLanguage"
-						:is-read-only="true"
-						:rows="editorRows"
-					/>
-				</div>
-
-				<N8nInput
-					v-else
-					ref="inputField"
-					v-model="tempValue"
-					:class="{ 'input-with-opener': true, 'ph-no-capture': shouldRedactValue }"
-					:size="inputSize"
-					:type="getStringInputType"
-					:rows="editorRows"
-					:disabled="
-						isReadOnly ||
-						remoteParameterOptionsLoading ||
-						remoteParameterOptionsLoadingIssues !== null
-					"
-					:title="displayTitle"
-					:placeholder="getPlaceholder()"
-					@update:model-value="(valueChanged($event) as undefined) && onUpdateTextInput($event)"
-					@keydown.stop
-					@focus="setFocus"
-					@blur="onBlur"
-				>
-					<template #suffix>
-						<n8n-icon
-							v-if="!isReadOnly && !isSecretParameter"
-							icon="external-link-alt"
-							size="xsmall"
-							class="edit-window-button textarea-modal-opener"
-							:class="{
-								focused: isFocused,
-								invalid: !isFocused && getIssues.length > 0 && !isModelValueExpression,
-							}"
-							:title="i18n.baseText('parameterInput.openEditWindow')"
-							@click="displayEditDialog()"
-							@focus="setFocus"
-						/>
-					</template>
-				</N8nInput>
-			</div>
-
-			<div v-else-if="parameter.type === 'color'" ref="inputField" class="color-input">
-				<el-color-picker
-					size="small"
-					class="color-picker"
-					:model-value="displayValue"
-					:disabled="isReadOnly"
-					:title="displayTitle"
-					:show-alpha="getArgument('showAlpha')"
-					@focus="setFocus"
-					@blur="onBlur"
-					@update:model-value="valueChanged"
-				/>
-				<N8nInput
-					v-model="tempValue"
-					:size="inputSize"
-					type="text"
-					:disabled="isReadOnly"
-					:title="displayTitle"
-					@update:model-value="valueChanged"
-					@keydown.stop
-					@focus="setFocus"
-					@blur="onBlur"
-				/>
-			</div>
-
-			<el-date-picker
-				v-else-if="parameter.type === 'dateTime'"
-				ref="inputField"
-				v-model="tempValue"
-				type="datetime"
-				value-format="YYYY-MM-DDTHH:mm:ss"
-				:size="inputSize"
-				:title="displayTitle"
-				:disabled="isReadOnly"
-				:placeholder="
-					parameter.placeholder
-						? getPlaceholder()
-						: i18n.baseText('parameterInput.selectDateAndTime')
-				"
-				:picker-options="dateTimePickerOptions"
-				:class="{ 'ph-no-capture': shouldRedactValue }"
-				@update:model-value="valueChanged"
-				@focus="setFocus"
-				@blur="onBlur"
-				@keydown.stop
-			/>
-
-			<N8nInputNumber
-				v-else-if="parameter.type === 'number'"
-				ref="inputField"
-				:size="inputSize"
-				:model-value="displayValue"
-				:controls="false"
-				:max="getArgument('maxValue')"
-				:min="getArgument('minValue')"
-				:precision="getArgument('numberPrecision')"
-				:disabled="isReadOnly"
-				:class="{ 'ph-no-capture': shouldRedactValue }"
-				:title="displayTitle"
-				:placeholder="parameter.placeholder"
-				@update:model-value="onUpdateTextInput"
-				@focus="setFocus"
-				@blur="onBlur"
-				@keydown.stop
-			/>
-
-			<CredentialsSelect
-				v-else-if="parameter.type === 'credentialsSelect' || parameter.name === 'genericAuthType'"
-				ref="inputField"
-				:parameter="parameter"
-				:node="node"
-				:active-credential-type="activeCredentialType"
-				:input-size="inputSize"
-				:display-value="displayValue"
-				:is-read-only="isReadOnly"
-				:display-title="displayTitle"
-				@credential-selected="credentialSelected"
-				@update:model-value="valueChanged"
-				@set-focus="setFocus"
-				@on-blur="onBlur"
-			>
-				<template #issues-and-options>
-					<ParameterIssues :issues="getIssues" />
-				</template>
-			</CredentialsSelect>
-
-			<N8nSelect
-				v-else-if="parameter.type === 'options'"
-				ref="inputField"
-				:size="inputSize"
-				filterable
-				:model-value="displayValue"
-				:placeholder="
-					parameter.placeholder ? getPlaceholder() : i18n.baseText('parameterInput.select')
-				"
-				:loading="remoteParameterOptionsLoading"
-				:disabled="isReadOnly || remoteParameterOptionsLoading"
-				:title="displayTitle"
-				@update:model-value="valueChanged"
-				@keydown.stop
-				@focus="setFocus"
-				@blur="onBlur"
-			>
-				<n8n-option
-					v-for="option in parameterOptions"
-					:key="option.value"
-					:value="option.value"
-					:label="getOptionsOptionDisplayName(option)"
-				>
-					<div class="list-option">
-						<div
-							class="option-headline"
-							:class="{ 'remote-parameter-option': isRemoteParameterOption(option) }"
-						>
-							{{ getOptionsOptionDisplayName(option) }}
-						</div>
-						<div
-							v-if="option.description"
-							class="option-description"
-							v-html="getOptionsOptionDescription(option)"
-						></div>
-					</div>
-				</n8n-option>
-			</N8nSelect>
-
-			<N8nSelect
-				v-else-if="parameter.type === 'multiOptions'"
-				ref="inputField"
-				:size="inputSize"
-				filterable
-				multiple
-				:model-value="displayValue"
-				:loading="remoteParameterOptionsLoading"
-				:disabled="isReadOnly || remoteParameterOptionsLoading"
-				:title="displayTitle"
-				:placeholder="i18n.baseText('parameterInput.select')"
-				@update:model-value="valueChanged"
-				@keydown.stop
-				@focus="setFocus"
-				@blur="onBlur"
-			>
-				<n8n-option
-					v-for="option in parameterOptions"
-					:key="option.value"
-					:value="option.value"
-					:label="getOptionsOptionDisplayName(option)"
-				>
-					<div class="list-option">
-						<div class="option-headline">{{ getOptionsOptionDisplayName(option) }}</div>
-						<div
-							v-if="option.description"
-							class="option-description"
-							v-html="getOptionsOptionDescription(option)"
-						></div>
-					</div>
-				</n8n-option>
-			</N8nSelect>
-
-			<!-- temporary state of booleans while data is mapped -->
-			<N8nInput
-				v-else-if="parameter.type === 'boolean' && droppable"
-				:size="inputSize"
-				:model-value="JSON.stringify(displayValue)"
-				:disabled="isReadOnly"
-				:title="displayTitle"
-			/>
-			<el-switch
-				v-else-if="parameter.type === 'boolean'"
-				ref="inputField"
-				:class="{ 'switch-input': true, 'ph-no-capture': shouldRedactValue }"
-				active-color="#13ce66"
-				:model-value="displayValue"
-				:disabled="isReadOnly"
-				@update:model-value="valueChanged"
-			/>
-		</div>
-
-		<ParameterIssues
-			v-if="parameter.type !== 'credentialsSelect' && !isResourceLocatorParameter"
-			:issues="getIssues"
-		/>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, onUpdated, ref, watch } from 'vue';
 
@@ -1336,116 +844,608 @@ async function optionSelected(command: string) {
 		} else {
 			let newValue = typeof value !== 'undefined' ? value : null;
 
-			if (props.parameter.type === 'string') {
-				// Strip the '=' from the beginning
-				newValue = modelValueString.value ? modelValueString.value.toString().substring(1) : null;
-			}
-			valueChanged(newValue);
-		}
-	} else if (command === 'refreshOptions') {
-		if (isResourceLocatorParameter.value) {
-			props.eventBus.emit('refreshList');
-		}
-		void loadRemoteParameterOptions();
-	} else if (command === 'formatHtml') {
-		htmlEditorEventBus.emit('format-html');
-	}
+			if (props.parameter.type === 'string') {
+				// Strip the '=' from the beginning
+				newValue = modelValueString.value ? modelValueString.value.toString().substring(1) : null;
+			}
+			valueChanged(newValue);
+		}
+	} else if (command === 'refreshOptions') {
+		if (isResourceLocatorParameter.value) {
+			props.eventBus.emit('refreshList');
+		}
+		void loadRemoteParameterOptions();
+	} else if (command === 'formatHtml') {
+		htmlEditorEventBus.emit('format-html');
+	}
+
+	if (node.value && (command === 'addExpression' || command === 'removeExpression')) {
+		const telemetryPayload = {
+			node_type: node.value.type,
+			parameter: props.path,
+			old_mode: command === 'addExpression' ? 'fixed' : 'expression',
+			new_mode: command === 'removeExpression' ? 'fixed' : 'expression',
+			was_parameter_empty: prevValue === '' || prevValue === undefined,
+			had_mapping: hasExpressionMapping(prevValue),
+			had_parameter: typeof prevValue === 'string' && prevValue.includes('$parameter'),
+		};
+		telemetry.track('User switched parameter mode', telemetryPayload);
+		void externalHooks.run('parameterInput.modeSwitch', telemetryPayload);
+	}
+}
+
+onMounted(() => {
+	props.eventBus.on('optionSelected', optionSelected);
+
+	tempValue.value = displayValue.value as string;
+
+	if (node.value) {
+		nodeName.value = node.value.name;
+	}
+
+	if (node.value && node.value.parameters.authentication === 'predefinedCredentialType') {
+		activeCredentialType.value = node.value.parameters.nodeCredentialType as string;
+	}
+
+	if (
+		props.parameter.type === 'color' &&
+		getArgument('showAlpha') === true &&
+		displayValue.value !== null &&
+		displayValue.value.toString().charAt(0) !== '#'
+	) {
+		const newValue = rgbaToHex(displayValue.value as string);
+		if (newValue !== null) {
+			tempValue.value = newValue;
+		}
+	}
+
+	void externalHooks.run('parameterInput.mount', {
+		parameter: props.parameter,
+		inputFieldRef: inputField.value as InstanceType<typeof N8nInput>,
+	});
+});
+
+onBeforeUnmount(() => {
+	props.eventBus.off('optionSelected', optionSelected);
+});
+
+watch(
+	() => node.value?.credentials,
+	() => {
+		if (hasRemoteMethod.value && node.value) {
+			void loadRemoteParameterOptions();
+		}
+	},
+	{ immediate: true },
+);
+
+watch(dependentParametersValues, async () => {
+	// Reload the remote parameters whenever a parameter
+	// on which the current field depends on changes
+	await loadRemoteParameterOptions();
+});
+
+watch(
+	() => props.modelValue,
+	async () => {
+		if (props.parameter.type === 'color' && getArgument('showAlpha') === true) {
+			// Do not set for color with alpha else wrong value gets displayed in field
+			return;
+		}
+		tempValue.value = displayValue.value as string;
+	},
+);
+
+watch(remoteParameterOptionsLoading, () => {
+	tempValue.value = displayValue.value as string;
+});
+
+onUpdated(async () => {
+	await nextTick();
+
+	if (wrapper.value) {
+		const remoteParamOptions = wrapper.value.querySelectorAll('.remote-parameter-option') ?? [];
+
+		if (remoteParamOptions.length > 0) {
+			void externalHooks.run('parameterInput.updated', {
+				remoteParameterOptions: remoteParamOptions,
+			});
+		}
+	}
+});
+</script>
+
+<template>
+	<div ref="wrapper" :class="parameterInputClasses" @keydown.stop>
+		<ExpressionEditModal
+			:dialog-visible="expressionEditDialogVisible"
+			:model-value="modelValueExpressionEdit"
+			:parameter="parameter"
+			:node="node"
+			:path="path"
+			:event-source="eventSource || 'ndv'"
+			:is-read-only="isReadOnly"
+			:redact-values="shouldRedactValue"
+			@close-dialog="closeExpressionEditDialog"
+			@update:model-value="expressionUpdated"
+		></ExpressionEditModal>
+
+		<div class="parameter-input ignore-key-press" :style="parameterInputWrapperStyle">
+			<ResourceLocator
+				v-if="parameter.type === 'resourceLocator'"
+				ref="resourceLocator"
+				:parameter="parameter"
+				:model-value="modelValueResourceLocator"
+				:dependent-parameters-values="dependentParametersValues"
+				:display-title="displayTitle"
+				:expression-display-value="expressionDisplayValue"
+				:expression-computed-value="expressionEvaluated"
+				:is-value-expression="isModelValueExpression"
+				:is-read-only="isReadOnly"
+				:parameter-issues="getIssues"
+				:droppable="droppable"
+				:node="node"
+				:path="path"
+				:event-bus="eventBus"
+				@update:model-value="valueChanged"
+				@modal-opener-click="openExpressionEditorModal"
+				@focus="setFocus"
+				@blur="onBlur"
+				@drop="onResourceLocatorDrop"
+			/>
+			<WorkflowSelectorParameterInput
+				v-else-if="parameter.type === 'workflowSelector'"
+				ref="resourceLocator"
+				:parameter="parameter"
+				:model-value="modelValueResourceLocator"
+				:dependent-parameters-values="dependentParametersValues"
+				:display-title="displayTitle"
+				:expression-display-value="expressionDisplayValue"
+				:expression-computed-value="expressionEvaluated"
+				:is-value-expression="isModelValueExpression"
+				:expression-edit-dialog-visible="expressionEditDialogVisible"
+				:path="path"
+				:parameter-issues="getIssues"
+				@update:model-value="valueChanged"
+				@modal-opener-click="openExpressionEditorModal"
+				@focus="setFocus"
+				@blur="onBlur"
+				@drop="onResourceLocatorDrop"
+			/>
+			<ExpressionParameterInput
+				v-else-if="isModelValueExpression || forceShowExpression"
+				ref="inputField"
+				:model-value="expressionDisplayValue"
+				:title="displayTitle"
+				:is-read-only="isReadOnly"
+				:rows="rows"
+				:is-assignment="isAssignment"
+				:path="path"
+				:additional-expression-data="additionalExpressionData"
+				:class="{ 'ph-no-capture': shouldRedactValue }"
+				:event-bus="eventBus"
+				@update:model-value="expressionUpdated"
+				@modal-opener-click="openExpressionEditorModal"
+				@focus="setFocus"
+				@blur="onBlur"
+			/>
+			<div
+				v-else-if="
+					['json', 'string'].includes(parameter.type) ||
+					remoteParameterOptionsLoadingIssues !== null
+				"
+			>
+				<el-dialog
+					:model-value="codeEditDialogVisible"
+					append-to-body
+					width="80%"
+					:title="`${i18n.baseText('codeEdit.edit')} ${$locale
+						.nodeText()
+						.inputLabelDisplayName(parameter, path)}`"
+					:before-close="closeCodeEditDialog"
+					data-test-id="code-editor-fullscreen"
+				>
+					<div :key="codeEditDialogVisible.toString()" class="ignore-key-press code-edit-dialog">
+						<CodeNodeEditor
+							v-if="editorType === 'codeNodeEditor'"
+							:mode="codeEditorMode"
+							:model-value="modelValueString"
+							:default-value="parameter.default"
+							:language="editorLanguage"
+							:is-read-only="isReadOnly"
+							fill-parent
+							@update:model-value="valueChangedDebounced"
+						/>
+						<HtmlEditor
+							v-else-if="editorType === 'htmlEditor'"
+							:model-value="modelValueString"
+							:is-read-only="isReadOnly"
+							:rows="editorRows"
+							:disable-expression-coloring="!isHtmlNode"
+							:disable-expression-completions="!isHtmlNode"
+							fullscreen
+							@update:model-value="valueChangedDebounced"
+						/>
+						<SqlEditor
+							v-else-if="editorType === 'sqlEditor'"
+							:model-value="modelValueString"
+							:dialect="getArgument('sqlDialect')"
+							:is-read-only="isReadOnly"
+							:rows="editorRows"
+							fullscreen
+							@update:model-value="valueChangedDebounced"
+						/>
+						<JsEditor
+							v-else-if="editorType === 'jsEditor'"
+							:model-value="modelValueString"
+							:is-read-only="isReadOnly"
+							:rows="editorRows"
+							fill-parent
+							@update:model-value="valueChangedDebounced"
+						/>
+
+						<JsonEditor
+							v-else-if="parameter.type === 'json'"
+							:model-value="modelValueString"
+							:is-read-only="isReadOnly"
+							:rows="editorRows"
+							fill-parent
+							@update:model-value="valueChangedDebounced"
+						/>
+					</div>
+				</el-dialog>
 
-	if (node.value && (command === 'addExpression' || command === 'removeExpression')) {
-		const telemetryPayload = {
-			node_type: node.value.type,
-			parameter: props.path,
-			old_mode: command === 'addExpression' ? 'fixed' : 'expression',
-			new_mode: command === 'removeExpression' ? 'fixed' : 'expression',
-			was_parameter_empty: prevValue === '' || prevValue === undefined,
-			had_mapping: hasExpressionMapping(prevValue),
-			had_parameter: typeof prevValue === 'string' && prevValue.includes('$parameter'),
-		};
-		telemetry.track('User switched parameter mode', telemetryPayload);
-		void externalHooks.run('parameterInput.modeSwitch', telemetryPayload);
-	}
-}
+				<TextEdit
+					:dialog-visible="textEditDialogVisible"
+					:model-value="`${modelValue}`"
+					:parameter="parameter"
+					:path="path"
+					:is-read-only="isReadOnly"
+					@close-dialog="closeTextEditDialog"
+					@update:model-value="expressionUpdated"
+				></TextEdit>
 
-onMounted(() => {
-	props.eventBus.on('optionSelected', optionSelected);
+				<CodeNodeEditor
+					v-if="editorType === 'codeNodeEditor' && isCodeNode"
+					:key="'code-' + codeEditDialogVisible.toString()"
+					:mode="codeEditorMode"
+					:model-value="modelValueString"
+					:default-value="parameter.default"
+					:language="editorLanguage"
+					:is-read-only="isReadOnly || editorIsReadOnly"
+					:rows="editorRows"
+					:ai-button-enabled="settingsStore.isCloudDeployment"
+					@update:model-value="valueChangedDebounced"
+				>
+					<template #suffix>
+						<n8n-icon
+							v-if="!editorIsReadOnly"
+							data-test-id="code-editor-fullscreen-button"
+							icon="external-link-alt"
+							size="xsmall"
+							class="textarea-modal-opener"
+							:title="$locale.baseText('parameterInput.openEditWindow')"
+							@click="displayEditDialog()"
+						/>
+					</template>
+				</CodeNodeEditor>
 
-	tempValue.value = displayValue.value as string;
+				<HtmlEditor
+					v-else-if="editorType === 'htmlEditor'"
+					:key="'html-' + codeEditDialogVisible.toString()"
+					:model-value="modelValueString"
+					:is-read-only="isReadOnly"
+					:rows="editorRows"
+					:disable-expression-coloring="!isHtmlNode"
+					:disable-expression-completions="!isHtmlNode"
+					@update:model-value="valueChangedDebounced"
+				>
+					<template #suffix>
+						<n8n-icon
+							data-test-id="code-editor-fullscreen-button"
+							icon="external-link-alt"
+							size="xsmall"
+							class="textarea-modal-opener"
+							:title="$locale.baseText('parameterInput.openEditWindow')"
+							@click="displayEditDialog()"
+						/>
+					</template>
+				</HtmlEditor>
 
-	if (node.value) {
-		nodeName.value = node.value.name;
-	}
+				<SqlEditor
+					v-else-if="editorType === 'sqlEditor'"
+					:key="'sql-' + codeEditDialogVisible.toString()"
+					:model-value="modelValueString"
+					:dialect="getArgument('sqlDialect')"
+					:is-read-only="isReadOnly"
+					:rows="editorRows"
+					@update:model-value="valueChangedDebounced"
+				>
+					<template #suffix>
+						<n8n-icon
+							data-test-id="code-editor-fullscreen-button"
+							icon="external-link-alt"
+							size="xsmall"
+							class="textarea-modal-opener"
+							:title="$locale.baseText('parameterInput.openEditWindow')"
+							@click="displayEditDialog()"
+						/>
+					</template>
+				</SqlEditor>
 
-	if (node.value && node.value.parameters.authentication === 'predefinedCredentialType') {
-		activeCredentialType.value = node.value.parameters.nodeCredentialType as string;
-	}
+				<JsEditor
+					v-else-if="editorType === 'jsEditor'"
+					:key="'js-' + codeEditDialogVisible.toString()"
+					:model-value="modelValueString"
+					:is-read-only="isReadOnly || editorIsReadOnly"
+					:rows="editorRows"
+					@update:model-value="valueChangedDebounced"
+				>
+					<template #suffix>
+						<n8n-icon
+							v-if="!editorIsReadOnly"
+							data-test-id="code-editor-fullscreen-button"
+							icon="external-link-alt"
+							size="xsmall"
+							class="textarea-modal-opener"
+							:title="$locale.baseText('parameterInput.openEditWindow')"
+							@click="displayEditDialog()"
+						/>
+					</template>
+				</JsEditor>
 
-	if (
-		props.parameter.type === 'color' &&
-		getArgument('showAlpha') === true &&
-		displayValue.value !== null &&
-		displayValue.value.toString().charAt(0) !== '#'
-	) {
-		const newValue = rgbaToHex(displayValue.value as string);
-		if (newValue !== null) {
-			tempValue.value = newValue;
-		}
-	}
+				<JsonEditor
+					v-else-if="parameter.type === 'json'"
+					:key="'json-' + codeEditDialogVisible.toString()"
+					:model-value="modelValueString"
+					:is-read-only="isReadOnly"
+					:rows="editorRows"
+					@update:model-value="valueChangedDebounced"
+				>
+					<template #suffix>
+						<n8n-icon
+							data-test-id="code-editor-fullscreen-button"
+							icon="external-link-alt"
+							size="xsmall"
+							class="textarea-modal-opener"
+							:title="$locale.baseText('parameterInput.openEditWindow')"
+							@click="displayEditDialog()"
+						/>
+					</template>
+				</JsonEditor>
 
-	void externalHooks.run('parameterInput.mount', {
-		parameter: props.parameter,
-		inputFieldRef: inputField.value as InstanceType<typeof N8nInput>,
-	});
-});
+				<div v-else-if="editorType" class="readonly-code clickable" @click="displayEditDialog()">
+					<CodeNodeEditor
+						v-if="!codeEditDialogVisible"
+						:mode="codeEditorMode"
+						:model-value="modelValueString"
+						:language="editorLanguage"
+						:is-read-only="true"
+						:rows="editorRows"
+					/>
+				</div>
 
-onBeforeUnmount(() => {
-	props.eventBus.off('optionSelected', optionSelected);
-});
+				<N8nInput
+					v-else
+					ref="inputField"
+					v-model="tempValue"
+					:class="{ 'input-with-opener': true, 'ph-no-capture': shouldRedactValue }"
+					:size="inputSize"
+					:type="getStringInputType"
+					:rows="editorRows"
+					:disabled="
+						isReadOnly ||
+						remoteParameterOptionsLoading ||
+						remoteParameterOptionsLoadingIssues !== null
+					"
+					:title="displayTitle"
+					:placeholder="getPlaceholder()"
+					@update:model-value="(valueChanged($event) as undefined) && onUpdateTextInput($event)"
+					@keydown.stop
+					@focus="setFocus"
+					@blur="onBlur"
+				>
+					<template #suffix>
+						<n8n-icon
+							v-if="!isReadOnly && !isSecretParameter"
+							icon="external-link-alt"
+							size="xsmall"
+							class="edit-window-button textarea-modal-opener"
+							:class="{
+								focused: isFocused,
+								invalid: !isFocused && getIssues.length > 0 && !isModelValueExpression,
+							}"
+							:title="i18n.baseText('parameterInput.openEditWindow')"
+							@click="displayEditDialog()"
+							@focus="setFocus"
+						/>
+					</template>
+				</N8nInput>
+			</div>
 
-watch(
-	() => node.value?.credentials,
-	() => {
-		if (hasRemoteMethod.value && node.value) {
-			void loadRemoteParameterOptions();
-		}
-	},
-	{ immediate: true },
-);
+			<div v-else-if="parameter.type === 'color'" ref="inputField" class="color-input">
+				<el-color-picker
+					size="small"
+					class="color-picker"
+					:model-value="displayValue"
+					:disabled="isReadOnly"
+					:title="displayTitle"
+					:show-alpha="getArgument('showAlpha')"
+					@focus="setFocus"
+					@blur="onBlur"
+					@update:model-value="valueChanged"
+				/>
+				<N8nInput
+					v-model="tempValue"
+					:size="inputSize"
+					type="text"
+					:disabled="isReadOnly"
+					:title="displayTitle"
+					@update:model-value="valueChanged"
+					@keydown.stop
+					@focus="setFocus"
+					@blur="onBlur"
+				/>
+			</div>
 
-watch(dependentParametersValues, async () => {
-	// Reload the remote parameters whenever a parameter
-	// on which the current field depends on changes
-	await loadRemoteParameterOptions();
-});
+			<el-date-picker
+				v-else-if="parameter.type === 'dateTime'"
+				ref="inputField"
+				v-model="tempValue"
+				type="datetime"
+				value-format="YYYY-MM-DDTHH:mm:ss"
+				:size="inputSize"
+				:title="displayTitle"
+				:disabled="isReadOnly"
+				:placeholder="
+					parameter.placeholder
+						? getPlaceholder()
+						: i18n.baseText('parameterInput.selectDateAndTime')
+				"
+				:picker-options="dateTimePickerOptions"
+				:class="{ 'ph-no-capture': shouldRedactValue }"
+				@update:model-value="valueChanged"
+				@focus="setFocus"
+				@blur="onBlur"
+				@keydown.stop
+			/>
 
-watch(
-	() => props.modelValue,
-	async () => {
-		if (props.parameter.type === 'color' && getArgument('showAlpha') === true) {
-			// Do not set for color with alpha else wrong value gets displayed in field
-			return;
-		}
-		tempValue.value = displayValue.value as string;
-	},
-);
+			<N8nInputNumber
+				v-else-if="parameter.type === 'number'"
+				ref="inputField"
+				:size="inputSize"
+				:model-value="displayValue"
+				:controls="false"
+				:max="getArgument('maxValue')"
+				:min="getArgument('minValue')"
+				:precision="getArgument('numberPrecision')"
+				:disabled="isReadOnly"
+				:class="{ 'ph-no-capture': shouldRedactValue }"
+				:title="displayTitle"
+				:placeholder="parameter.placeholder"
+				@update:model-value="onUpdateTextInput"
+				@focus="setFocus"
+				@blur="onBlur"
+				@keydown.stop
+			/>
 
-watch(remoteParameterOptionsLoading, () => {
-	tempValue.value = displayValue.value as string;
-});
+			<CredentialsSelect
+				v-else-if="parameter.type === 'credentialsSelect' || parameter.name === 'genericAuthType'"
+				ref="inputField"
+				:parameter="parameter"
+				:node="node"
+				:active-credential-type="activeCredentialType"
+				:input-size="inputSize"
+				:display-value="displayValue"
+				:is-read-only="isReadOnly"
+				:display-title="displayTitle"
+				@credential-selected="credentialSelected"
+				@update:model-value="valueChanged"
+				@set-focus="setFocus"
+				@on-blur="onBlur"
+			>
+				<template #issues-and-options>
+					<ParameterIssues :issues="getIssues" />
+				</template>
+			</CredentialsSelect>
 
-onUpdated(async () => {
-	await nextTick();
+			<N8nSelect
+				v-else-if="parameter.type === 'options'"
+				ref="inputField"
+				:size="inputSize"
+				filterable
+				:model-value="displayValue"
+				:placeholder="
+					parameter.placeholder ? getPlaceholder() : i18n.baseText('parameterInput.select')
+				"
+				:loading="remoteParameterOptionsLoading"
+				:disabled="isReadOnly || remoteParameterOptionsLoading"
+				:title="displayTitle"
+				@update:model-value="valueChanged"
+				@keydown.stop
+				@focus="setFocus"
+				@blur="onBlur"
+			>
+				<n8n-option
+					v-for="option in parameterOptions"
+					:key="option.value"
+					:value="option.value"
+					:label="getOptionsOptionDisplayName(option)"
+				>
+					<div class="list-option">
+						<div
+							class="option-headline"
+							:class="{ 'remote-parameter-option': isRemoteParameterOption(option) }"
+						>
+							{{ getOptionsOptionDisplayName(option) }}
+						</div>
+						<div
+							v-if="option.description"
+							class="option-description"
+							v-html="getOptionsOptionDescription(option)"
+						></div>
+					</div>
+				</n8n-option>
+			</N8nSelect>
 
-	if (wrapper.value) {
-		const remoteParamOptions = wrapper.value.querySelectorAll('.remote-parameter-option') ?? [];
+			<N8nSelect
+				v-else-if="parameter.type === 'multiOptions'"
+				ref="inputField"
+				:size="inputSize"
+				filterable
+				multiple
+				:model-value="displayValue"
+				:loading="remoteParameterOptionsLoading"
+				:disabled="isReadOnly || remoteParameterOptionsLoading"
+				:title="displayTitle"
+				:placeholder="i18n.baseText('parameterInput.select')"
+				@update:model-value="valueChanged"
+				@keydown.stop
+				@focus="setFocus"
+				@blur="onBlur"
+			>
+				<n8n-option
+					v-for="option in parameterOptions"
+					:key="option.value"
+					:value="option.value"
+					:label="getOptionsOptionDisplayName(option)"
+				>
+					<div class="list-option">
+						<div class="option-headline">{{ getOptionsOptionDisplayName(option) }}</div>
+						<div
+							v-if="option.description"
+							class="option-description"
+							v-html="getOptionsOptionDescription(option)"
+						></div>
+					</div>
+				</n8n-option>
+			</N8nSelect>
 
-		if (remoteParamOptions.length > 0) {
-			void externalHooks.run('parameterInput.updated', {
-				remoteParameterOptions: remoteParamOptions,
-			});
-		}
-	}
-});
-</script>
+			<!-- temporary state of booleans while data is mapped -->
+			<N8nInput
+				v-else-if="parameter.type === 'boolean' && droppable"
+				:size="inputSize"
+				:model-value="JSON.stringify(displayValue)"
+				:disabled="isReadOnly"
+				:title="displayTitle"
+			/>
+			<el-switch
+				v-else-if="parameter.type === 'boolean'"
+				ref="inputField"
+				:class="{ 'switch-input': true, 'ph-no-capture': shouldRedactValue }"
+				active-color="#13ce66"
+				:model-value="displayValue"
+				:disabled="isReadOnly"
+				@update:model-value="valueChanged"
+			/>
+		</div>
+
+		<ParameterIssues
+			v-if="parameter.type !== 'credentialsSelect' && !isResourceLocatorParameter"
+			:issues="getIssues"
+		/>
+	</div>
+</template>
 
 <style scoped lang="scss">
 .readonly-code {
diff --git a/packages/editor-ui/src/components/ParameterInputExpanded.vue b/packages/editor-ui/src/components/ParameterInputExpanded.vue
index 18098f8090563..cdae28fe5313f 100644
--- a/packages/editor-ui/src/components/ParameterInputExpanded.vue
+++ b/packages/editor-ui/src/components/ParameterInputExpanded.vue
@@ -1,59 +1,3 @@
-<template>
-	<n8n-input-label
-		:label="$locale.credText().inputLabelDisplayName(parameter)"
-		:tooltip-text="$locale.credText().inputLabelDescription(parameter)"
-		:required="parameter.required"
-		:show-tooltip="focused"
-		:show-options="menuExpanded"
-		:data-test-id="parameter.name"
-		:size="label.size"
-	>
-		<template #options>
-			<ParameterOptions
-				:parameter="parameter"
-				:value="value"
-				:is-read-only="false"
-				:show-options="true"
-				:is-value-expression="isValueExpression"
-				@update:model-value="optionSelected"
-				@menu-expanded="onMenuExpanded"
-			/>
-		</template>
-		<ParameterInputWrapper
-			ref="param"
-			input-size="large"
-			:parameter="parameter"
-			:model-value="value"
-			:path="parameter.name"
-			:hide-issues="true"
-			:documentation-url="documentationUrl"
-			:error-highlight="showRequiredErrors"
-			:is-for-credential="true"
-			:event-source="eventSource"
-			:hint="!showRequiredErrors && hint ? hint : ''"
-			:event-bus="eventBus"
-			@focus="onFocus"
-			@blur="onBlur"
-			@text-input="valueChanged"
-			@update="valueChanged"
-		/>
-		<div v-if="showRequiredErrors" :class="$style.errors">
-			<n8n-text color="danger" size="small">
-				{{ $locale.baseText('parameterInputExpanded.thisFieldIsRequired') }}
-				<n8n-link
-					v-if="documentationUrl"
-					:to="documentationUrl"
-					size="small"
-					:underline="true"
-					@click="onDocumentationUrlClick"
-				>
-					{{ $locale.baseText('parameterInputExpanded.openDocs') }}
-				</n8n-link>
-			</n8n-text>
-		</div>
-	</n8n-input-label>
-</template>
-
 <script setup lang="ts">
 import type { IUpdateInformation } from '@/Interface';
 import { useI18n } from '@/composables/useI18n';
@@ -164,6 +108,62 @@ function onDocumentationUrlClick(): void {
 }
 </script>
 
+<template>
+	<n8n-input-label
+		:label="$locale.credText().inputLabelDisplayName(parameter)"
+		:tooltip-text="$locale.credText().inputLabelDescription(parameter)"
+		:required="parameter.required"
+		:show-tooltip="focused"
+		:show-options="menuExpanded"
+		:data-test-id="parameter.name"
+		:size="label.size"
+	>
+		<template #options>
+			<ParameterOptions
+				:parameter="parameter"
+				:value="value"
+				:is-read-only="false"
+				:show-options="true"
+				:is-value-expression="isValueExpression"
+				@update:model-value="optionSelected"
+				@menu-expanded="onMenuExpanded"
+			/>
+		</template>
+		<ParameterInputWrapper
+			ref="param"
+			input-size="large"
+			:parameter="parameter"
+			:model-value="value"
+			:path="parameter.name"
+			:hide-issues="true"
+			:documentation-url="documentationUrl"
+			:error-highlight="showRequiredErrors"
+			:is-for-credential="true"
+			:event-source="eventSource"
+			:hint="!showRequiredErrors && hint ? hint : ''"
+			:event-bus="eventBus"
+			@focus="onFocus"
+			@blur="onBlur"
+			@text-input="valueChanged"
+			@update="valueChanged"
+		/>
+		<div v-if="showRequiredErrors" :class="$style.errors">
+			<n8n-text color="danger" size="small">
+				{{ $locale.baseText('parameterInputExpanded.thisFieldIsRequired') }}
+				<n8n-link
+					v-if="documentationUrl"
+					:to="documentationUrl"
+					size="small"
+					:underline="true"
+					@click="onDocumentationUrlClick"
+				>
+					{{ $locale.baseText('parameterInputExpanded.openDocs') }}
+				</n8n-link>
+			</n8n-text>
+		</div>
+	</n8n-input-label>
+</template>
+
 <style lang="scss" module>
 .errors {
 	margin-top: var(--spacing-2xs);
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index d0952be794746..f5e2999d7b9c2 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -1,81 +1,3 @@
-<template>
-	<n8n-input-label
-		:class="[$style.wrapper, { [$style.tipVisible]: showDragnDropTip }]"
-		:label="hideLabel ? '' : i18n.nodeText().inputLabelDisplayName(parameter, path)"
-		:tooltip-text="hideLabel ? '' : i18n.nodeText().inputLabelDescription(parameter, path)"
-		:show-tooltip="focused"
-		:show-options="menuExpanded || focused || forceShowExpression"
-		:options-position="optionsPosition"
-		:bold="false"
-		:size="label.size"
-		color="text-dark"
-	>
-		<template v-if="displayOptions && optionsPosition === 'top'" #options>
-			<ParameterOptions
-				:parameter="parameter"
-				:value="value"
-				:is-read-only="isReadOnly"
-				:show-options="displayOptions"
-				:show-expression-selector="showExpressionSelector"
-				@update:model-value="optionSelected"
-				@menu-expanded="onMenuExpanded"
-			/>
-		</template>
-		<DraggableTarget
-			type="mapping"
-			:disabled="isDropDisabled"
-			sticky
-			:sticky-offset="[3, 3]"
-			@drop="onDrop"
-		>
-			<template #default="{ droppable, activeDrop }">
-				<ParameterInputWrapper
-					:parameter="parameter"
-					:model-value="value"
-					:path="path"
-					:is-read-only="isReadOnly"
-					:is-assignment="isAssignment"
-					:rows="rows"
-					:droppable="droppable"
-					:active-drop="activeDrop"
-					:force-show-expression="forceShowExpression"
-					:hint="hint"
-					:hide-hint="hideHint"
-					:hide-issues="hideIssues"
-					:label="label"
-					:event-bus="eventBus"
-					input-size="small"
-					@update="valueChanged"
-					@text-input="onTextInput"
-					@focus="onFocus"
-					@blur="onBlur"
-					@drop="onDrop"
-				/>
-			</template>
-		</DraggableTarget>
-		<div v-if="showDragnDropTip" :class="$style.tip">
-			<InlineExpressionTip />
-		</div>
-		<div
-			:class="{
-				[$style.options]: true,
-				[$style.visible]: menuExpanded || focused || forceShowExpression,
-			}"
-		>
-			<ParameterOptions
-				v-if="optionsPosition === 'bottom'"
-				:parameter="parameter"
-				:value="value"
-				:is-read-only="isReadOnly"
-				:show-options="displayOptions"
-				:show-expression-selector="showExpressionSelector"
-				@update:model-value="optionSelected"
-				@menu-expanded="onMenuExpanded"
-			/>
-		</div>
-	</n8n-input-label>
-</template>
-
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import type { IUpdateInformation } from '@/Interface';
@@ -281,6 +203,84 @@ function onDrop(newParamValue: string) {
 }
 </script>
 
+<template>
+	<n8n-input-label
+		:class="[$style.wrapper, { [$style.tipVisible]: showDragnDropTip }]"
+		:label="hideLabel ? '' : i18n.nodeText().inputLabelDisplayName(parameter, path)"
+		:tooltip-text="hideLabel ? '' : i18n.nodeText().inputLabelDescription(parameter, path)"
+		:show-tooltip="focused"
+		:show-options="menuExpanded || focused || forceShowExpression"
+		:options-position="optionsPosition"
+		:bold="false"
+		:size="label.size"
+		color="text-dark"
+	>
+		<template v-if="displayOptions && optionsPosition === 'top'" #options>
+			<ParameterOptions
+				:parameter="parameter"
+				:value="value"
+				:is-read-only="isReadOnly"
+				:show-options="displayOptions"
+				:show-expression-selector="showExpressionSelector"
+				@update:model-value="optionSelected"
+				@menu-expanded="onMenuExpanded"
+			/>
+		</template>
+		<DraggableTarget
+			type="mapping"
+			:disabled="isDropDisabled"
+			sticky
+			:sticky-offset="[3, 3]"
+			@drop="onDrop"
+		>
+			<template #default="{ droppable, activeDrop }">
+				<ParameterInputWrapper
+					:parameter="parameter"
+					:model-value="value"
+					:path="path"
+					:is-read-only="isReadOnly"
+					:is-assignment="isAssignment"
+					:rows="rows"
+					:droppable="droppable"
+					:active-drop="activeDrop"
+					:force-show-expression="forceShowExpression"
+					:hint="hint"
+					:hide-hint="hideHint"
+					:hide-issues="hideIssues"
+					:label="label"
+					:event-bus="eventBus"
+					input-size="small"
+					@update="valueChanged"
+					@text-input="onTextInput"
+					@focus="onFocus"
+					@blur="onBlur"
+					@drop="onDrop"
+				/>
+			</template>
+		</DraggableTarget>
+		<div v-if="showDragnDropTip" :class="$style.tip">
+			<InlineExpressionTip />
+		</div>
+		<div
+			:class="{
+				[$style.options]: true,
+				[$style.visible]: menuExpanded || focused || forceShowExpression,
+			}"
+		>
+			<ParameterOptions
+				v-if="optionsPosition === 'bottom'"
+				:parameter="parameter"
+				:value="value"
+				:is-read-only="isReadOnly"
+				:show-options="displayOptions"
+				:show-expression-selector="showExpressionSelector"
+				@update:model-value="optionSelected"
+				@menu-expanded="onMenuExpanded"
+			/>
+		</div>
+	</n8n-input-label>
+</template>
+
 <style lang="scss" module>
 .wrapper {
 	position: relative;
diff --git a/packages/editor-ui/src/components/ParameterInputHint.vue b/packages/editor-ui/src/components/ParameterInputHint.vue
index 8a88ba4793a87..87ce1a92ab992 100644
--- a/packages/editor-ui/src/components/ParameterInputHint.vue
+++ b/packages/editor-ui/src/components/ParameterInputHint.vue
@@ -1,23 +1,3 @@
-<template>
-	<n8n-text v-if="hint" size="small" color="text-base" tag="div">
-		<div
-			v-if="!renderHTML"
-			:class="{
-				[$style.singleline]: singleLine,
-				[$style.highlight]: highlight,
-			}"
-		>
-			<span data-test-id="parameter-input-hint" v-html="simplyText"></span>
-		</div>
-		<div
-			v-else
-			ref="hintTextRef"
-			:class="{ [$style.singleline]: singleLine, [$style.highlight]: highlight }"
-			v-html="sanitizeHtml(hint)"
-		></div>
-	</n8n-text>
-</template>
-
 <script setup lang="ts">
 import { sanitizeHtml } from '@/utils/htmlUtils';
 import { computed, onMounted, ref } from 'vue';
@@ -57,6 +37,26 @@ const simplyText = computed(() => {
 });
 </script>
 
+<template>
+	<n8n-text v-if="hint" size="small" color="text-base" tag="div">
+		<div
+			v-if="!renderHTML"
+			:class="{
+				[$style.singleline]: singleLine,
+				[$style.highlight]: highlight,
+			}"
+		>
+			<span data-test-id="parameter-input-hint" v-html="simplyText"></span>
+		</div>
+		<div
+			v-else
+			ref="hintTextRef"
+			:class="{ [$style.singleline]: singleLine, [$style.highlight]: highlight }"
+			v-html="sanitizeHtml(hint)"
+		></div>
+	</n8n-text>
+</template>
+
 <style lang="scss" module>
 .singleline {
 	white-space: nowrap;
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 3e27b8c96cd7b..08256fbfef173 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -1,167 +1,3 @@
-<template>
-	<div class="parameter-input-list-wrapper">
-		<div
-			v-for="(parameter, index) in filteredParameters"
-			:key="parameter.name"
-			:class="{ indent }"
-			data-test-id="parameter-item"
-		>
-			<slot v-if="indexToShowSlotAt === index" />
-
-			<div
-				v-if="multipleValues(parameter) === true && parameter.type !== 'fixedCollection'"
-				class="parameter-item"
-			>
-				<MultipleParameter
-					:parameter="parameter"
-					:values="getParameterValue(parameter.name)"
-					:node-values="nodeValues"
-					:path="getPath(parameter.name)"
-					:is-read-only="isReadOnly"
-					@value-changed="valueChanged"
-				/>
-			</div>
-
-			<ImportCurlParameter
-				v-else-if="parameter.type === 'curlImport'"
-				:is-read-only="isReadOnly"
-				@value-changed="valueChanged"
-			/>
-
-			<n8n-notice
-				v-else-if="parameter.type === 'notice'"
-				:class="['parameter-item', parameter.typeOptions?.containerClass ?? '']"
-				:content="$locale.nodeText().inputLabelDisplayName(parameter, path)"
-				@action="onNoticeAction"
-			/>
-
-			<div v-else-if="parameter.type === 'button'" class="parameter-item">
-				<ButtonParameter
-					:parameter="parameter"
-					:path="path"
-					:value="getParameterValue(parameter.name)"
-					:is-read-only="isReadOnly"
-					@value-changed="valueChanged"
-				/>
-			</div>
-
-			<div
-				v-else-if="['collection', 'fixedCollection'].includes(parameter.type)"
-				class="multi-parameter"
-			>
-				<n8n-icon-button
-					v-if="hideDelete !== true && !isReadOnly && !parameter.isNodeSetting"
-					type="tertiary"
-					text
-					size="mini"
-					icon="trash"
-					class="delete-option"
-					:title="$locale.baseText('parameterInputList.delete')"
-					@click="deleteOption(parameter.name)"
-				></n8n-icon-button>
-				<n8n-input-label
-					:label="$locale.nodeText().inputLabelDisplayName(parameter, path)"
-					:tooltip-text="$locale.nodeText().inputLabelDescription(parameter, path)"
-					size="small"
-					:underline="true"
-					color="text-dark"
-				/>
-				<Suspense v-if="!asyncLoadingError">
-					<template #default>
-						<LazyCollectionParameter
-							v-if="parameter.type === 'collection'"
-							:parameter="parameter"
-							:values="getParameterValue(parameter.name)"
-							:node-values="nodeValues"
-							:path="getPath(parameter.name)"
-							:is-read-only="isReadOnly"
-							@value-changed="valueChanged"
-						/>
-						<LazyFixedCollectionParameter
-							v-else-if="parameter.type === 'fixedCollection'"
-							:parameter="parameter"
-							:values="getParameterValue(parameter.name)"
-							:node-values="nodeValues"
-							:path="getPath(parameter.name)"
-							:is-read-only="isReadOnly"
-							@value-changed="valueChanged"
-						/>
-					</template>
-					<template #fallback>
-						<n8n-text size="small" class="async-notice">
-							<n8n-icon icon="sync-alt" size="xsmall" :spin="true" />
-							{{ $locale.baseText('parameterInputList.loadingFields') }}
-						</n8n-text>
-					</template>
-				</Suspense>
-				<n8n-text v-else size="small" color="danger" class="async-notice">
-					<n8n-icon icon="exclamation-triangle" size="xsmall" />
-					{{ $locale.baseText('parameterInputList.loadingError') }}
-				</n8n-text>
-			</div>
-			<ResourceMapper
-				v-else-if="parameter.type === 'resourceMapper'"
-				:parameter="parameter"
-				:node="node"
-				:path="getPath(parameter.name)"
-				:dependent-parameters-values="getDependentParametersValues(parameter)"
-				input-size="small"
-				label-size="small"
-				@value-changed="valueChanged"
-			/>
-			<FilterConditions
-				v-else-if="parameter.type === 'filter'"
-				:parameter="parameter"
-				:value="getParameterValue(parameter.name)"
-				:path="getPath(parameter.name)"
-				:node="node"
-				:read-only="isReadOnly"
-				@value-changed="valueChanged"
-			/>
-			<AssignmentCollection
-				v-else-if="parameter.type === 'assignmentCollection'"
-				:parameter="parameter"
-				:value="getParameterValue(parameter.name)"
-				:path="getPath(parameter.name)"
-				:node="node"
-				:is-read-only="isReadOnly"
-				@value-changed="valueChanged"
-			/>
-			<div
-				v-else-if="displayNodeParameter(parameter) && credentialsParameterIndex !== index"
-				class="parameter-item"
-			>
-				<n8n-icon-button
-					v-if="hideDelete !== true && !isReadOnly && !parameter.isNodeSetting"
-					type="tertiary"
-					text
-					size="mini"
-					icon="trash"
-					class="delete-option"
-					:title="$locale.baseText('parameterInputList.delete')"
-					@click="deleteOption(parameter.name)"
-				></n8n-icon-button>
-
-				<ParameterInputFull
-					:parameter="parameter"
-					:hide-issues="hiddenIssuesInputs.includes(parameter.name)"
-					:value="getParameterValue(parameter.name)"
-					:display-options="shouldShowOptions(parameter)"
-					:path="getPath(parameter.name)"
-					:is-read-only="isReadOnly"
-					:hide-label="false"
-					:node-values="nodeValues"
-					@update="valueChanged"
-					@blur="onParameterBlur(parameter.name)"
-				/>
-			</div>
-		</div>
-		<div v-if="filteredParameters.length === 0" :class="{ indent }">
-			<slot />
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import type {
 	INodeParameters,
@@ -529,6 +365,170 @@ function getParameterValue<T extends NodeParameterValueType = NodeParameterValue
 }
 </script>
 
+<template>
+	<div class="parameter-input-list-wrapper">
+		<div
+			v-for="(parameter, index) in filteredParameters"
+			:key="parameter.name"
+			:class="{ indent }"
+			data-test-id="parameter-item"
+		>
+			<slot v-if="indexToShowSlotAt === index" />
+
+			<div
+				v-if="multipleValues(parameter) === true && parameter.type !== 'fixedCollection'"
+				class="parameter-item"
+			>
+				<MultipleParameter
+					:parameter="parameter"
+					:values="getParameterValue(parameter.name)"
+					:node-values="nodeValues"
+					:path="getPath(parameter.name)"
+					:is-read-only="isReadOnly"
+					@value-changed="valueChanged"
+				/>
+			</div>
+
+			<ImportCurlParameter
+				v-else-if="parameter.type === 'curlImport'"
+				:is-read-only="isReadOnly"
+				@value-changed="valueChanged"
+			/>
+
+			<n8n-notice
+				v-else-if="parameter.type === 'notice'"
+				:class="['parameter-item', parameter.typeOptions?.containerClass ?? '']"
+				:content="$locale.nodeText().inputLabelDisplayName(parameter, path)"
+				@action="onNoticeAction"
+			/>
+
+			<div v-else-if="parameter.type === 'button'" class="parameter-item">
+				<ButtonParameter
+					:parameter="parameter"
+					:path="path"
+					:value="getParameterValue(parameter.name)"
+					:is-read-only="isReadOnly"
+					@value-changed="valueChanged"
+				/>
+			</div>
+
+			<div
+				v-else-if="['collection', 'fixedCollection'].includes(parameter.type)"
+				class="multi-parameter"
+			>
+				<n8n-icon-button
+					v-if="hideDelete !== true && !isReadOnly && !parameter.isNodeSetting"
+					type="tertiary"
+					text
+					size="mini"
+					icon="trash"
+					class="delete-option"
+					:title="$locale.baseText('parameterInputList.delete')"
+					@click="deleteOption(parameter.name)"
+				></n8n-icon-button>
+				<n8n-input-label
+					:label="$locale.nodeText().inputLabelDisplayName(parameter, path)"
+					:tooltip-text="$locale.nodeText().inputLabelDescription(parameter, path)"
+					size="small"
+					:underline="true"
+					color="text-dark"
+				/>
+				<Suspense v-if="!asyncLoadingError">
+					<template #default>
+						<LazyCollectionParameter
+							v-if="parameter.type === 'collection'"
+							:parameter="parameter"
+							:values="getParameterValue(parameter.name)"
+							:node-values="nodeValues"
+							:path="getPath(parameter.name)"
+							:is-read-only="isReadOnly"
+							@value-changed="valueChanged"
+						/>
+						<LazyFixedCollectionParameter
+							v-else-if="parameter.type === 'fixedCollection'"
+							:parameter="parameter"
+							:values="getParameterValue(parameter.name)"
+							:node-values="nodeValues"
+							:path="getPath(parameter.name)"
+							:is-read-only="isReadOnly"
+							@value-changed="valueChanged"
+						/>
+					</template>
+					<template #fallback>
+						<n8n-text size="small" class="async-notice">
+							<n8n-icon icon="sync-alt" size="xsmall" :spin="true" />
+							{{ $locale.baseText('parameterInputList.loadingFields') }}
+						</n8n-text>
+					</template>
+				</Suspense>
+				<n8n-text v-else size="small" color="danger" class="async-notice">
+					<n8n-icon icon="exclamation-triangle" size="xsmall" />
+					{{ $locale.baseText('parameterInputList.loadingError') }}
+				</n8n-text>
+			</div>
+			<ResourceMapper
+				v-else-if="parameter.type === 'resourceMapper'"
+				:parameter="parameter"
+				:node="node"
+				:path="getPath(parameter.name)"
+				:dependent-parameters-values="getDependentParametersValues(parameter)"
+				input-size="small"
+				label-size="small"
+				@value-changed="valueChanged"
+			/>
+			<FilterConditions
+				v-else-if="parameter.type === 'filter'"
+				:parameter="parameter"
+				:value="getParameterValue(parameter.name)"
+				:path="getPath(parameter.name)"
+				:node="node"
+				:read-only="isReadOnly"
+				@value-changed="valueChanged"
+			/>
+			<AssignmentCollection
+				v-else-if="parameter.type === 'assignmentCollection'"
+				:parameter="parameter"
+				:value="getParameterValue(parameter.name)"
+				:path="getPath(parameter.name)"
+				:node="node"
+				:is-read-only="isReadOnly"
+				@value-changed="valueChanged"
+			/>
+			<div
+				v-else-if="displayNodeParameter(parameter) && credentialsParameterIndex !== index"
+				class="parameter-item"
+			>
+				<n8n-icon-button
+					v-if="hideDelete !== true && !isReadOnly && !parameter.isNodeSetting"
+					type="tertiary"
+					text
+					size="mini"
+					icon="trash"
+					class="delete-option"
+					:title="$locale.baseText('parameterInputList.delete')"
+					@click="deleteOption(parameter.name)"
+				></n8n-icon-button>
+
+				<ParameterInputFull
+					:parameter="parameter"
+					:hide-issues="hiddenIssuesInputs.includes(parameter.name)"
+					:value="getParameterValue(parameter.name)"
+					:display-options="shouldShowOptions(parameter)"
+					:path="getPath(parameter.name)"
+					:is-read-only="isReadOnly"
+					:hide-label="false"
+					:node-values="nodeValues"
+					@update="valueChanged"
+					@blur="onParameterBlur(parameter.name)"
+				/>
+			</div>
+		</div>
+		<div v-if="filteredParameters.length === 0" :class="{ indent }">
+			<slot />
+		</div>
+	</div>
+</template>
+
 <style lang="scss">
 .parameter-input-list-wrapper {
 	.delete-option {
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 7165bccf13c29..5158d1b59a2a6 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -1,50 +1,3 @@
-<template>
-	<div :class="$style.parameterInput" data-test-id="parameter-input">
-		<ParameterInput
-			ref="param"
-			:input-size="inputSize"
-			:parameter="parameter"
-			:model-value="modelValue"
-			:path="path"
-			:is-read-only="isReadOnly"
-			:is-assignment="isAssignment"
-			:droppable="droppable"
-			:active-drop="activeDrop"
-			:force-show-expression="forceShowExpression"
-			:hide-issues="hideIssues"
-			:documentation-url="documentationUrl"
-			:error-highlight="errorHighlight"
-			:is-for-credential="isForCredential"
-			:event-source="eventSource"
-			:expression-evaluated="evaluatedExpressionValue"
-			:additional-expression-data="resolvedAdditionalExpressionData"
-			:label="label"
-			:rows="rows"
-			:data-test-id="`parameter-input-${parsedParameterName}`"
-			:event-bus="eventBus"
-			@focus="onFocus"
-			@blur="onBlur"
-			@drop="onDrop"
-			@text-input="onTextInput"
-			@update="onValueChanged"
-		/>
-		<div v-if="!hideHint && (expressionOutput || parameterHint)" :class="$style.hint">
-			<div>
-				<InputHint
-					v-if="expressionOutput"
-					:class="{ [$style.hint]: true, 'ph-no-capture': isForCredential }"
-					:data-test-id="`parameter-expression-preview-${parsedParameterName}`"
-					:highlight="!!(expressionOutput && targetItem) && isInputParentOfActiveNode"
-					:hint="expressionOutput"
-					:single-line="true"
-				/>
-				<InputHint v-else-if="parameterHint" :render-h-t-m-l="true" :hint="parameterHint" />
-			</div>
-			<slot v-if="$slots.options" name="options" />
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import type { IUpdateInformation, InputSize } from '@/Interface';
 import ParameterInput from '@/components/ParameterInput.vue';
@@ -237,6 +190,53 @@ function onTextInput(parameterData: IUpdateInformation) {
 }
 </script>
 
+<template>
+	<div :class="$style.parameterInput" data-test-id="parameter-input">
+		<ParameterInput
+			ref="param"
+			:input-size="inputSize"
+			:parameter="parameter"
+			:model-value="modelValue"
+			:path="path"
+			:is-read-only="isReadOnly"
+			:is-assignment="isAssignment"
+			:droppable="droppable"
+			:active-drop="activeDrop"
+			:force-show-expression="forceShowExpression"
+			:hide-issues="hideIssues"
+			:documentation-url="documentationUrl"
+			:error-highlight="errorHighlight"
+			:is-for-credential="isForCredential"
+			:event-source="eventSource"
+			:expression-evaluated="evaluatedExpressionValue"
+			:additional-expression-data="resolvedAdditionalExpressionData"
+			:label="label"
+			:rows="rows"
+			:data-test-id="`parameter-input-${parsedParameterName}`"
+			:event-bus="eventBus"
+			@focus="onFocus"
+			@blur="onBlur"
+			@drop="onDrop"
+			@text-input="onTextInput"
+			@update="onValueChanged"
+		/>
+		<div v-if="!hideHint && (expressionOutput || parameterHint)" :class="$style.hint">
+			<div>
+				<InputHint
+					v-if="expressionOutput"
+					:class="{ [$style.hint]: true, 'ph-no-capture': isForCredential }"
+					:data-test-id="`parameter-expression-preview-${parsedParameterName}`"
+					:highlight="!!(expressionOutput && targetItem) && isInputParentOfActiveNode"
+					:hint="expressionOutput"
+					:single-line="true"
+				/>
+				<InputHint v-else-if="parameterHint" :render-h-t-m-l="true" :hint="parameterHint" />
+			</div>
+			<slot v-if="$slots.options" name="options" />
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .parameterInput {
 	display: flex;
diff --git a/packages/editor-ui/src/components/ParameterIssues.vue b/packages/editor-ui/src/components/ParameterIssues.vue
index 6e6388cdbfee2..e786e9895aa06 100644
--- a/packages/editor-ui/src/components/ParameterIssues.vue
+++ b/packages/editor-ui/src/components/ParameterIssues.vue
@@ -1,14 +1,3 @@
-<template>
-	<div v-if="issues.length" :class="$style['parameter-issues']" data-test-id="parameter-issues">
-		<n8n-tooltip placement="top">
-			<template #content>
-				<TitledList :title="`${$locale.baseText('parameterInput.issues')}:`" :items="issues" />
-			</template>
-			<font-awesome-icon icon="exclamation-triangle" />
-		</n8n-tooltip>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import TitledList from '@/components/TitledList.vue';
@@ -22,6 +11,17 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div v-if="issues.length" :class="$style['parameter-issues']" data-test-id="parameter-issues">
+		<n8n-tooltip placement="top">
+			<template #content>
+				<TitledList :title="`${$locale.baseText('parameterInput.issues')}:`" :items="issues" />
+			</template>
+			<font-awesome-icon icon="exclamation-triangle" />
+		</n8n-tooltip>
+	</div>
+</template>
+
 <style module lang="scss">
 .parameter-issues {
 	width: 20px;
diff --git a/packages/editor-ui/src/components/ParameterOptions.vue b/packages/editor-ui/src/components/ParameterOptions.vue
index 5755e4cd92b3d..bfe99398055cc 100644
--- a/packages/editor-ui/src/components/ParameterOptions.vue
+++ b/packages/editor-ui/src/components/ParameterOptions.vue
@@ -1,44 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<div v-if="loading" :class="$style.loader">
-			<n8n-text v-if="loading" size="small">
-				<n8n-icon icon="sync-alt" size="xsmall" :spin="true" />
-				{{ loadingMessage }}
-			</n8n-text>
-		</div>
-		<div v-else :class="$style.controlsContainer">
-			<div
-				:class="{
-					[$style.noExpressionSelector]: !shouldShowExpressionSelector,
-				}"
-			>
-				<n8n-action-toggle
-					v-if="shouldShowOptions"
-					placement="bottom-end"
-					size="small"
-					color="foreground-xdark"
-					icon-size="small"
-					:actions="actions"
-					:icon-orientation="iconOrientation"
-					@action="(action: string) => $emit('update:modelValue', action)"
-					@visible-change="onMenuToggle"
-				/>
-			</div>
-			<n8n-radio-buttons
-				v-if="shouldShowExpressionSelector"
-				size="small"
-				:model-value="selectedView"
-				:disabled="isReadOnly"
-				:options="[
-					{ label: $locale.baseText('parameterInput.fixed'), value: 'fixed' },
-					{ label: $locale.baseText('parameterInput.expression'), value: 'expression' },
-				]"
-				@update:model-value="onViewSelected"
-			/>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import type { INodeProperties, NodeParameterValueType } from 'n8n-workflow';
 import { defineComponent } from 'vue';
@@ -202,6 +161,47 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.container">
+		<div v-if="loading" :class="$style.loader">
+			<n8n-text v-if="loading" size="small">
+				<n8n-icon icon="sync-alt" size="xsmall" :spin="true" />
+				{{ loadingMessage }}
+			</n8n-text>
+		</div>
+		<div v-else :class="$style.controlsContainer">
+			<div
+				:class="{
+					[$style.noExpressionSelector]: !shouldShowExpressionSelector,
+				}"
+			>
+				<n8n-action-toggle
+					v-if="shouldShowOptions"
+					placement="bottom-end"
+					size="small"
+					color="foreground-xdark"
+					icon-size="small"
+					:actions="actions"
+					:icon-orientation="iconOrientation"
+					@action="(action: string) => $emit('update:modelValue', action)"
+					@visible-change="onMenuToggle"
+				/>
+			</div>
+			<n8n-radio-buttons
+				v-if="shouldShowExpressionSelector"
+				size="small"
+				:model-value="selectedView"
+				:disabled="isReadOnly"
+				:options="[
+					{ label: $locale.baseText('parameterInput.fixed'), value: 'fixed' },
+					{ label: $locale.baseText('parameterInput.expression'), value: 'expression' },
+				]"
+				@update:model-value="onViewSelected"
+			/>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	display: flex;
diff --git a/packages/editor-ui/src/components/PersonalizationModal.vue b/packages/editor-ui/src/components/PersonalizationModal.vue
index cd4693565e449..13e360c3c1981 100644
--- a/packages/editor-ui/src/components/PersonalizationModal.vue
+++ b/packages/editor-ui/src/components/PersonalizationModal.vue
@@ -1,57 +1,3 @@
-<template>
-	<Modal
-		:name="PERSONALIZATION_MODAL_KEY"
-		:title="$locale.baseText('personalizationModal.customizeN8n')"
-		:subtitle="$locale.baseText('personalizationModal.theseQuestionsHelpUs')"
-		:center-title="true"
-		:show-close="false"
-		:event-bus="modalBus"
-		:close-on-click-modal="false"
-		:close-on-press-escape="false"
-		width="460px"
-		data-test-id="personalization-form"
-		@enter="onSave"
-	>
-		<template #content>
-			<div :class="$style.container">
-				<n8n-form-inputs
-					v-model="formValues"
-					:inputs="survey"
-					:column-view="true"
-					:event-bus="formBus"
-					:teleported="teleported"
-					tag-size="small"
-					@submit="onSubmit"
-				/>
-				<n8n-card v-if="canRegisterForEnterpriseTrial">
-					<n8n-checkbox v-model="registerForEnterpriseTrial">
-						<i18n-t keypath="personalizationModal.registerEmailForTrial">
-							<template #trial>
-								<strong>
-									{{ $locale.baseText('personalizationModal.registerEmailForTrial.enterprise') }}
-								</strong>
-							</template>
-						</i18n-t>
-						<n8n-text size="small" tag="div" color="text-light">
-							{{ $locale.baseText('personalizationModal.registerEmailForTrial.notice') }}
-						</n8n-text>
-					</n8n-checkbox>
-				</n8n-card>
-			</div>
-		</template>
-		<template #footer>
-			<div>
-				<n8n-button
-					:loading="isSaving"
-					:label="$locale.baseText('personalizationModal.getStarted')"
-					float="right"
-					@click="onSave"
-				/>
-			</div>
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -753,6 +699,60 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Modal
+		:name="PERSONALIZATION_MODAL_KEY"
+		:title="$locale.baseText('personalizationModal.customizeN8n')"
+		:subtitle="$locale.baseText('personalizationModal.theseQuestionsHelpUs')"
+		:center-title="true"
+		:show-close="false"
+		:event-bus="modalBus"
+		:close-on-click-modal="false"
+		:close-on-press-escape="false"
+		width="460px"
+		data-test-id="personalization-form"
+		@enter="onSave"
+	>
+		<template #content>
+			<div :class="$style.container">
+				<n8n-form-inputs
+					v-model="formValues"
+					:inputs="survey"
+					:column-view="true"
+					:event-bus="formBus"
+					:teleported="teleported"
+					tag-size="small"
+					@submit="onSubmit"
+				/>
+				<n8n-card v-if="canRegisterForEnterpriseTrial">
+					<n8n-checkbox v-model="registerForEnterpriseTrial">
+						<i18n-t keypath="personalizationModal.registerEmailForTrial">
+							<template #trial>
+								<strong>
+									{{ $locale.baseText('personalizationModal.registerEmailForTrial.enterprise') }}
+								</strong>
+							</template>
+						</i18n-t>
+						<n8n-text size="small" tag="div" color="text-light">
+							{{ $locale.baseText('personalizationModal.registerEmailForTrial.notice') }}
+						</n8n-text>
+					</n8n-checkbox>
+				</n8n-card>
+			</div>
+		</template>
+		<template #footer>
+			<div>
+				<n8n-button
+					:loading="isSaving"
+					:label="$locale.baseText('personalizationModal.getStarted')"
+					float="right"
+					@click="onSave"
+				/>
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style lang="scss" module>
 .container {
 	> div,
diff --git a/packages/editor-ui/src/components/PromptMfaCodeModal/PromptMfaCodeModal.vue b/packages/editor-ui/src/components/PromptMfaCodeModal/PromptMfaCodeModal.vue
index a40343a8bb537..5fdfc205cd6f0 100644
--- a/packages/editor-ui/src/components/PromptMfaCodeModal/PromptMfaCodeModal.vue
+++ b/packages/editor-ui/src/components/PromptMfaCodeModal/PromptMfaCodeModal.vue
@@ -1,39 +1,3 @@
-<template>
-	<Modal
-		width="460px"
-		height="300px"
-		max-height="640px"
-		:title="i18n.baseText('mfa.prompt.code.modal.title')"
-		:event-bus="promptMfaCodeBus"
-		:name="PROMPT_MFA_CODE_MODAL_KEY"
-		:center="true"
-	>
-		<template #content>
-			<div :class="[$style.formContainer]">
-				<n8n-form-inputs
-					data-test-id="mfa-code-form"
-					:inputs="formFields"
-					:event-bus="formBus"
-					@submit="onSubmit"
-					@ready="onFormReady"
-				/>
-			</div>
-		</template>
-		<template #footer>
-			<div>
-				<n8n-button
-					float="right"
-					:disabled="!readyToSubmit"
-					:label="i18n.baseText('settings.personal.save')"
-					size="large"
-					data-test-id="mfa-save-button"
-					@click="onClickSave"
-				/>
-			</div>
-		</template>
-	</Modal>
-</template>
-
 <script setup lang="ts">
 import { ref } from 'vue';
 import Modal from '../Modal.vue';
@@ -77,6 +41,42 @@ function onFormReady(isReady: boolean) {
 }
 </script>
 
+<template>
+	<Modal
+		width="460px"
+		height="300px"
+		max-height="640px"
+		:title="i18n.baseText('mfa.prompt.code.modal.title')"
+		:event-bus="promptMfaCodeBus"
+		:name="PROMPT_MFA_CODE_MODAL_KEY"
+		:center="true"
+	>
+		<template #content>
+			<div :class="[$style.formContainer]">
+				<n8n-form-inputs
+					data-test-id="mfa-code-form"
+					:inputs="formFields"
+					:event-bus="formBus"
+					@submit="onSubmit"
+					@ready="onFormReady"
+				/>
+			</div>
+		</template>
+		<template #footer>
+			<div>
+				<n8n-button
+					float="right"
+					:disabled="!readyToSubmit"
+					:label="i18n.baseText('settings.personal.save')"
+					size="large"
+					data-test-id="mfa-save-button"
+					@click="onClickSave"
+				/>
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style lang="scss" module>
 .formContainer {
 	padding-bottom: var(--spacing-xl);
diff --git a/packages/editor-ui/src/components/PushConnectionTracker.vue b/packages/editor-ui/src/components/PushConnectionTracker.vue
index 2648a55e2c496..bd4ecc865494b 100644
--- a/packages/editor-ui/src/components/PushConnectionTracker.vue
+++ b/packages/editor-ui/src/components/PushConnectionTracker.vue
@@ -1,3 +1,16 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
+import { useRootStore } from '@/stores/root.store';
+
+export default defineComponent({
+	name: 'PushConnectionTracker',
+	computed: {
+		...mapStores(useRootStore),
+	},
+});
+</script>
+
 <template>
 	<span>
 		<div v-if="!rootStore.pushConnectionActive" class="push-connection-lost primary-color">
@@ -14,16 +27,3 @@
 		<slot v-else />
 	</span>
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
-import { useRootStore } from '@/stores/root.store';
-
-export default defineComponent({
-	name: 'PushConnectionTracker',
-	computed: {
-		...mapStores(useRootStore),
-	},
-});
-</script>
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index 6eebe37e3423b..2723c87195ba2 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -1,149 +1,3 @@
-<template>
-	<div
-		ref="container"
-		class="resource-locator"
-		:data-test-id="`resource-locator-${parameter.name}`"
-	>
-		<OnClickOutside @trigger="hideResourceDropdown">
-			<ResourceLocatorDropdown
-				ref="dropdown"
-				:model-value="modelValue ? modelValue.value : ''"
-				:show="resourceDropdownVisible"
-				:filterable="isSearchable"
-				:filter-required="requiresSearchFilter"
-				:resources="currentQueryResults"
-				:loading="currentQueryLoading"
-				:filter="searchFilter"
-				:has-more="currentQueryHasMore"
-				:error-view="currentQueryError"
-				:width="width"
-				:event-bus="eventBus"
-				@update:model-value="onListItemSelected"
-				@filter="onSearchFilter"
-				@load-more="loadResourcesDebounced"
-			>
-				<template #error>
-					<div :class="$style.error" data-test-id="rlc-error-container">
-						<n8n-text color="text-dark" align="center" tag="div">
-							{{ $locale.baseText('resourceLocator.mode.list.error.title') }}
-						</n8n-text>
-						<n8n-text v-if="hasCredential || credentialsNotSet" size="small" color="text-base">
-							{{ $locale.baseText('resourceLocator.mode.list.error.description.part1') }}
-							<a v-if="credentialsNotSet" @click="createNewCredential">{{
-								$locale.baseText('resourceLocator.mode.list.error.description.part2.noCredentials')
-							}}</a>
-							<a v-else-if="hasCredential" @click="openCredential">{{
-								$locale.baseText('resourceLocator.mode.list.error.description.part2.hasCredentials')
-							}}</a>
-						</n8n-text>
-					</div>
-				</template>
-				<div
-					:class="{
-						[$style.resourceLocator]: true,
-						[$style.multipleModes]: hasMultipleModes,
-					}"
-				>
-					<div :class="$style.background"></div>
-					<div v-if="hasMultipleModes" :class="$style.modeSelector">
-						<n8n-select
-							:model-value="selectedMode"
-							:size="inputSize"
-							:disabled="isReadOnly"
-							:placeholder="$locale.baseText('resourceLocator.modeSelector.placeholder')"
-							data-test-id="rlc-mode-selector"
-							@update:model-value="onModeSelected"
-						>
-							<n8n-option
-								v-for="mode in parameter.modes"
-								:key="mode.name"
-								:value="mode.name"
-								:label="getModeLabel(mode)"
-								:disabled="isValueExpression && mode.name === 'list'"
-								:title="
-									isValueExpression && mode.name === 'list'
-										? $locale.baseText('resourceLocator.mode.list.disabled.title')
-										: ''
-								"
-							>
-								{{ getModeLabel(mode) }}
-							</n8n-option>
-						</n8n-select>
-					</div>
-
-					<div :class="$style.inputContainer" data-test-id="rlc-input-container">
-						<DraggableTarget
-							type="mapping"
-							:disabled="hasOnlyListMode"
-							:sticky="true"
-							:sticky-offset="isValueExpression ? [26, 3] : [3, 3]"
-							@drop="onDrop"
-						>
-							<template #default="{ droppable, activeDrop }">
-								<div
-									:class="{
-										[$style.listModeInputContainer]: isListMode,
-										[$style.droppable]: droppable,
-										[$style.activeDrop]: activeDrop,
-									}"
-									@keydown.stop="onKeyDown"
-								>
-									<ExpressionParameterInput
-										v-if="isValueExpression || forceShowExpression"
-										ref="input"
-										:model-value="expressionDisplayValue"
-										:path="path"
-										:rows="3"
-										@update:model-value="onInputChange"
-										@modal-opener-click="$emit('modalOpenerClick')"
-									/>
-									<n8n-input
-										v-else
-										ref="input"
-										:class="{ [$style.selectInput]: isListMode }"
-										:size="inputSize"
-										:model-value="valueToDisplay"
-										:disabled="isReadOnly"
-										:readonly="isListMode"
-										:title="displayTitle"
-										:placeholder="inputPlaceholder"
-										type="text"
-										data-test-id="rlc-input"
-										@update:model-value="onInputChange"
-										@focus="onInputFocus"
-										@blur="onInputBlur"
-									>
-										<template v-if="isListMode" #suffix>
-											<i
-												:class="{
-													['el-input__icon']: true,
-													['el-icon-arrow-down']: true,
-													[$style.selectIcon]: true,
-													[$style.isReverse]: resourceDropdownVisible,
-												}"
-											/>
-										</template>
-									</n8n-input>
-								</div>
-							</template>
-						</DraggableTarget>
-						<ParameterIssues
-							v-if="parameterIssues && parameterIssues.length"
-							:issues="parameterIssues"
-							:class="$style['parameter-issues']"
-						/>
-						<div v-else-if="urlValue" :class="$style.openResourceLink">
-							<n8n-link theme="text" @click.stop="openResource(urlValue)">
-								<font-awesome-icon icon="external-link-alt" :title="getLinkAlt(valueToDisplay)" />
-							</n8n-link>
-						</div>
-					</div>
-				</div>
-			</ResourceLocatorDropdown>
-		</OnClickOutside>
-	</div>
-</template>
-
 <script lang="ts">
 import type { DynamicNodeParameters, IResourceLocatorResultExpanded } from '@/Interface';
 import DraggableTarget from '@/components/DraggableTarget.vue';
@@ -827,6 +681,152 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div
+		ref="container"
+		class="resource-locator"
+		:data-test-id="`resource-locator-${parameter.name}`"
+	>
+		<OnClickOutside @trigger="hideResourceDropdown">
+			<ResourceLocatorDropdown
+				ref="dropdown"
+				:model-value="modelValue ? modelValue.value : ''"
+				:show="resourceDropdownVisible"
+				:filterable="isSearchable"
+				:filter-required="requiresSearchFilter"
+				:resources="currentQueryResults"
+				:loading="currentQueryLoading"
+				:filter="searchFilter"
+				:has-more="currentQueryHasMore"
+				:error-view="currentQueryError"
+				:width="width"
+				:event-bus="eventBus"
+				@update:model-value="onListItemSelected"
+				@filter="onSearchFilter"
+				@load-more="loadResourcesDebounced"
+			>
+				<template #error>
+					<div :class="$style.error" data-test-id="rlc-error-container">
+						<n8n-text color="text-dark" align="center" tag="div">
+							{{ $locale.baseText('resourceLocator.mode.list.error.title') }}
+						</n8n-text>
+						<n8n-text v-if="hasCredential || credentialsNotSet" size="small" color="text-base">
+							{{ $locale.baseText('resourceLocator.mode.list.error.description.part1') }}
+							<a v-if="credentialsNotSet" @click="createNewCredential">{{
+								$locale.baseText('resourceLocator.mode.list.error.description.part2.noCredentials')
+							}}</a>
+							<a v-else-if="hasCredential" @click="openCredential">{{
+								$locale.baseText('resourceLocator.mode.list.error.description.part2.hasCredentials')
+							}}</a>
+						</n8n-text>
+					</div>
+				</template>
+				<div
+					:class="{
+						[$style.resourceLocator]: true,
+						[$style.multipleModes]: hasMultipleModes,
+					}"
+				>
+					<div :class="$style.background"></div>
+					<div v-if="hasMultipleModes" :class="$style.modeSelector">
+						<n8n-select
+							:model-value="selectedMode"
+							:size="inputSize"
+							:disabled="isReadOnly"
+							:placeholder="$locale.baseText('resourceLocator.modeSelector.placeholder')"
+							data-test-id="rlc-mode-selector"
+							@update:model-value="onModeSelected"
+						>
+							<n8n-option
+								v-for="mode in parameter.modes"
+								:key="mode.name"
+								:value="mode.name"
+								:label="getModeLabel(mode)"
+								:disabled="isValueExpression && mode.name === 'list'"
+								:title="
+									isValueExpression && mode.name === 'list'
+										? $locale.baseText('resourceLocator.mode.list.disabled.title')
+										: ''
+								"
+							>
+								{{ getModeLabel(mode) }}
+							</n8n-option>
+						</n8n-select>
+					</div>
+
+					<div :class="$style.inputContainer" data-test-id="rlc-input-container">
+						<DraggableTarget
+							type="mapping"
+							:disabled="hasOnlyListMode"
+							:sticky="true"
+							:sticky-offset="isValueExpression ? [26, 3] : [3, 3]"
+							@drop="onDrop"
+						>
+							<template #default="{ droppable, activeDrop }">
+								<div
+									:class="{
+										[$style.listModeInputContainer]: isListMode,
+										[$style.droppable]: droppable,
+										[$style.activeDrop]: activeDrop,
+									}"
+									@keydown.stop="onKeyDown"
+								>
+									<ExpressionParameterInput
+										v-if="isValueExpression || forceShowExpression"
+										ref="input"
+										:model-value="expressionDisplayValue"
+										:path="path"
+										:rows="3"
+										@update:model-value="onInputChange"
+										@modal-opener-click="$emit('modalOpenerClick')"
+									/>
+									<n8n-input
+										v-else
+										ref="input"
+										:class="{ [$style.selectInput]: isListMode }"
+										:size="inputSize"
+										:model-value="valueToDisplay"
+										:disabled="isReadOnly"
+										:readonly="isListMode"
+										:title="displayTitle"
+										:placeholder="inputPlaceholder"
+										type="text"
+										data-test-id="rlc-input"
+										@update:model-value="onInputChange"
+										@focus="onInputFocus"
+										@blur="onInputBlur"
+									>
+										<template v-if="isListMode" #suffix>
+											<i
+												:class="{
+													['el-input__icon']: true,
+													['el-icon-arrow-down']: true,
+													[$style.selectIcon]: true,
+													[$style.isReverse]: resourceDropdownVisible,
+												}"
+											/>
+										</template>
+									</n8n-input>
+								</div>
+							</template>
+						</DraggableTarget>
+						<ParameterIssues
+							v-if="parameterIssues && parameterIssues.length"
+							:issues="parameterIssues"
+							:class="$style['parameter-issues']"
+						/>
+						<div v-else-if="urlValue" :class="$style.openResourceLink">
+							<n8n-link theme="text" @click.stop="openResource(urlValue)">
+								<font-awesome-icon icon="external-link-alt" :title="getLinkAlt(valueToDisplay)" />
+							</n8n-link>
+						</div>
+					</div>
+				</div>
+			</ResourceLocatorDropdown>
+		</OnClickOutside>
+	</div>
+</template>
+
 <style lang="scss" module>
 @import './resourceLocator.scss';
 </style>
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
index ddadd763f9b0e..658f2da9d59d3 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocatorDropdown.vue
@@ -1,82 +1,3 @@
-<template>
-	<n8n-popover
-		placement="bottom"
-		:width="width"
-		:popper-class="$style.popover"
-		:visible="show"
-		:teleported="false"
-		data-test-id="resource-locator-dropdown"
-	>
-		<div v-if="errorView" :class="$style.messageContainer">
-			<slot name="error"></slot>
-		</div>
-		<div v-if="filterable && !errorView" :class="$style.searchInput" @keydown="onKeyDown">
-			<n8n-input
-				ref="search"
-				:model-value="filter"
-				:clearable="true"
-				:placeholder="$locale.baseText('resourceLocator.search.placeholder')"
-				data-test-id="rlc-search"
-				@update:model-value="onFilterInput"
-			>
-				<template #prefix>
-					<font-awesome-icon :class="$style.searchIcon" icon="search" />
-				</template>
-			</n8n-input>
-		</div>
-		<div v-if="filterRequired && !filter && !errorView && !loading" :class="$style.searchRequired">
-			{{ $locale.baseText('resourceLocator.mode.list.searchRequired') }}
-		</div>
-		<div
-			v-else-if="!errorView && sortedResources.length === 0 && !loading"
-			:class="$style.messageContainer"
-		>
-			{{ $locale.baseText('resourceLocator.mode.list.noResults') }}
-		</div>
-		<div
-			v-else-if="!errorView"
-			ref="resultsContainer"
-			:class="$style.container"
-			@scroll="onResultsEnd"
-		>
-			<div
-				v-for="(result, i) in sortedResources"
-				:key="result.value.toString()"
-				:ref="`item-${i}`"
-				:class="{
-					[$style.resourceItem]: true,
-					[$style.selected]: result.value === modelValue,
-					[$style.hovering]: hoverIndex === i,
-				}"
-				data-test-id="rlc-item"
-				@click="() => onItemClick(result.value)"
-				@mouseenter="() => onItemHover(i)"
-				@mouseleave="() => onItemHoverLeave()"
-			>
-				<div :class="$style.resourceNameContainer">
-					<span>{{ result.name }}</span>
-				</div>
-				<div :class="$style.urlLink">
-					<font-awesome-icon
-						v-if="showHoverUrl && result.url && hoverIndex === i"
-						icon="external-link-alt"
-						:title="result.linkAlt || $locale.baseText('resourceLocator.mode.list.openUrl')"
-						@click="openUrl($event, result.url)"
-					/>
-				</div>
-			</div>
-			<div v-if="loading && !errorView">
-				<div v-for="i in 3" :key="i" :class="$style.loadingItem">
-					<n8n-loading :class="$style.loader" variant="p" :rows="1" />
-				</div>
-			</div>
-		</div>
-		<template #reference>
-			<slot />
-		</template>
-	</n8n-popover>
-</template>
-
 <script lang="ts">
 import type { IResourceLocatorResultExpanded } from '@/Interface';
 import { defineComponent } from 'vue';
@@ -267,6 +188,85 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<n8n-popover
+		placement="bottom"
+		:width="width"
+		:popper-class="$style.popover"
+		:visible="show"
+		:teleported="false"
+		data-test-id="resource-locator-dropdown"
+	>
+		<div v-if="errorView" :class="$style.messageContainer">
+			<slot name="error"></slot>
+		</div>
+		<div v-if="filterable && !errorView" :class="$style.searchInput" @keydown="onKeyDown">
+			<n8n-input
+				ref="search"
+				:model-value="filter"
+				:clearable="true"
+				:placeholder="$locale.baseText('resourceLocator.search.placeholder')"
+				data-test-id="rlc-search"
+				@update:model-value="onFilterInput"
+			>
+				<template #prefix>
+					<font-awesome-icon :class="$style.searchIcon" icon="search" />
+				</template>
+			</n8n-input>
+		</div>
+		<div v-if="filterRequired && !filter && !errorView && !loading" :class="$style.searchRequired">
+			{{ $locale.baseText('resourceLocator.mode.list.searchRequired') }}
+		</div>
+		<div
+			v-else-if="!errorView && sortedResources.length === 0 && !loading"
+			:class="$style.messageContainer"
+		>
+			{{ $locale.baseText('resourceLocator.mode.list.noResults') }}
+		</div>
+		<div
+			v-else-if="!errorView"
+			ref="resultsContainer"
+			:class="$style.container"
+			@scroll="onResultsEnd"
+		>
+			<div
+				v-for="(result, i) in sortedResources"
+				:key="result.value.toString()"
+				:ref="`item-${i}`"
+				:class="{
+					[$style.resourceItem]: true,
+					[$style.selected]: result.value === modelValue,
+					[$style.hovering]: hoverIndex === i,
+				}"
+				data-test-id="rlc-item"
+				@click="() => onItemClick(result.value)"
+				@mouseenter="() => onItemHover(i)"
+				@mouseleave="() => onItemHoverLeave()"
+			>
+				<div :class="$style.resourceNameContainer">
+					<span>{{ result.name }}</span>
+				</div>
+				<div :class="$style.urlLink">
+					<font-awesome-icon
+						v-if="showHoverUrl && result.url && hoverIndex === i"
+						icon="external-link-alt"
+						:title="result.linkAlt || $locale.baseText('resourceLocator.mode.list.openUrl')"
+						@click="openUrl($event, result.url)"
+					/>
+				</div>
+			</div>
+			<div v-if="loading && !errorView">
+				<div v-for="i in 3" :key="i" :class="$style.loadingItem">
+					<n8n-loading :class="$style.loader" variant="p" :rows="1" />
+				</div>
+			</div>
+		</div>
+		<template #reference>
+			<slot />
+		</template>
+	</n8n-popover>
+</template>
+
 <style lang="scss" module>
 :root .popover {
 	--content-height: 236px;
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index ec26ef996402d..b4e783cf211b6 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -1,578 +1,3 @@
-<template>
-	<div :class="['run-data', $style.container]" @mouseover="activatePane">
-		<n8n-callout
-			v-if="
-				canPinData && pinnedData.hasData.value && !editMode.enabled && !isProductionExecutionPreview
-			"
-			theme="secondary"
-			icon="thumbtack"
-			:class="$style.pinnedDataCallout"
-		>
-			{{ $locale.baseText('runData.pindata.thisDataIsPinned') }}
-			<span v-if="!isReadOnlyRoute && !readOnlyEnv" class="ml-4xs">
-				<n8n-link
-					theme="secondary"
-					size="small"
-					underline
-					bold
-					@click.stop="onTogglePinData({ source: 'banner-link' })"
-				>
-					{{ $locale.baseText('runData.pindata.unpin') }}
-				</n8n-link>
-			</span>
-			<template #trailingContent>
-				<n8n-link
-					:to="dataPinningDocsUrl"
-					size="small"
-					theme="secondary"
-					bold
-					underline
-					@click="onClickDataPinningDocsLink"
-				>
-					{{ $locale.baseText('runData.pindata.learnMore') }}
-				</n8n-link>
-			</template>
-		</n8n-callout>
-
-		<BinaryDataDisplay
-			v-if="binaryDataDisplayData"
-			:window-visible="binaryDataDisplayVisible"
-			:display-data="binaryDataDisplayData"
-			@close="closeBinaryDataDisplay"
-		/>
-
-		<div :class="$style.header">
-			<slot name="header"></slot>
-
-			<div
-				v-show="!hasRunError"
-				:class="$style.displayModes"
-				data-test-id="run-data-pane-header"
-				@click.stop
-			>
-				<Suspense>
-					<LazyRunDataSearch
-						v-if="showIOSearch"
-						v-model="search"
-						:class="$style.search"
-						:pane-type="paneType"
-						:display-mode="displayMode"
-						:is-area-active="isPaneActive"
-						@focus="activatePane"
-					/>
-				</Suspense>
-
-				<n8n-radio-buttons
-					v-show="
-						hasNodeRun && (inputData.length || binaryData.length || search) && !editMode.enabled
-					"
-					:model-value="displayMode"
-					:options="displayModes"
-					data-test-id="ndv-run-data-display-mode"
-					@update:model-value="onDisplayModeChange"
-				/>
-
-				<n8n-icon-button
-					v-if="canPinData && !isReadOnlyRoute && !readOnlyEnv"
-					v-show="!editMode.enabled"
-					:title="$locale.baseText('runData.editOutput')"
-					:circle="false"
-					:disabled="node?.disabled"
-					icon="pencil-alt"
-					type="tertiary"
-					data-test-id="ndv-edit-pinned-data"
-					@click="enterEditMode({ origin: 'editIconButton' })"
-				/>
-
-				<RunDataPinButton
-					v-if="(canPinData || !!binaryData?.length) && rawInputData.length && !editMode.enabled"
-					:disabled="
-						(!rawInputData.length && !pinnedData.hasData.value) ||
-						isReadOnlyRoute ||
-						readOnlyEnv ||
-						!!binaryData?.length
-					"
-					:tooltip-contents-visibility="{
-						binaryDataTooltipContent: !!binaryData?.length,
-						pinDataDiscoveryTooltipContent:
-							isControlledPinDataTooltip && pinDataDiscoveryTooltipVisible,
-					}"
-					:data-pinning-docs-url="dataPinningDocsUrl"
-					:pinned-data="pinnedData"
-					@toggle-pin-data="onTogglePinData({ source: 'pin-icon-click' })"
-				/>
-
-				<div v-show="editMode.enabled" :class="$style.editModeActions">
-					<n8n-button
-						type="tertiary"
-						:label="$locale.baseText('runData.editor.cancel')"
-						@click="onClickCancelEdit"
-					/>
-					<n8n-button
-						class="ml-2xs"
-						type="primary"
-						:label="$locale.baseText('runData.editor.save')"
-						@click="onClickSaveEdit"
-					/>
-				</div>
-			</div>
-		</div>
-
-		<div v-if="inputSelectLocation === 'header'" :class="$style.inputSelect">
-			<slot name="input-select"></slot>
-		</div>
-
-		<div
-			v-if="maxRunIndex > 0 && !isInputSchemaView"
-			v-show="!editMode.enabled"
-			:class="$style.runSelector"
-		>
-			<slot v-if="inputSelectLocation === 'runs'" name="input-select"></slot>
-
-			<n8n-select
-				:model-value="runIndex"
-				:class="$style.runSelectorInner"
-				size="small"
-				teleported
-				data-test-id="run-selector"
-				@update:model-value="onRunIndexChange"
-				@click.stop
-			>
-				<template #prepend>{{ $locale.baseText('ndv.output.run') }}</template>
-				<n8n-option
-					v-for="option in maxRunIndex + 1"
-					:key="option"
-					:label="getRunLabel(option)"
-					:value="option - 1"
-				></n8n-option>
-			</n8n-select>
-
-			<n8n-tooltip v-if="canLinkRuns" placement="right">
-				<template #content>
-					{{ $locale.baseText(linkedRuns ? 'runData.unlinking.hint' : 'runData.linking.hint') }}
-				</template>
-				<n8n-icon-button
-					:icon="linkedRuns ? 'unlink' : 'link'"
-					class="linkRun"
-					text
-					type="tertiary"
-					size="small"
-					data-test-id="link-run"
-					@click="toggleLinkRuns"
-				/>
-			</n8n-tooltip>
-
-			<slot name="run-info"></slot>
-		</div>
-
-		<slot v-if="!isInputSchemaView" name="before-data" />
-
-		<n8n-callout
-			v-for="hint in getNodeHints()"
-			:key="hint.message"
-			:class="$style.hintCallout"
-			:theme="hint.type || 'info'"
-		>
-			<n8n-text size="small" v-html="hint.message"></n8n-text>
-		</n8n-callout>
-
-		<div
-			v-if="maxOutputIndex > 0 && branches.length > 1 && !isInputSchemaView"
-			:class="$style.outputs"
-			data-test-id="branches"
-		>
-			<slot v-if="inputSelectLocation === 'outputs'" name="input-select"></slot>
-
-			<div :class="$style.tabs">
-				<n8n-tabs
-					:model-value="currentOutputIndex"
-					:options="branches"
-					@update:model-value="onBranchChange"
-				/>
-			</div>
-		</div>
-
-		<div
-			v-else-if="
-				!hasRunError &&
-				hasNodeRun &&
-				((dataCount > 0 && maxRunIndex === 0) || search) &&
-				!isArtificialRecoveredEventItem &&
-				!isInputSchemaView
-			"
-			v-show="!editMode.enabled && !hasRunError"
-			:class="[$style.itemsCount, { [$style.muted]: paneType === 'input' && maxRunIndex === 0 }]"
-			data-test-id="ndv-items-count"
-		>
-			<slot v-if="inputSelectLocation === 'items'" name="input-select"></slot>
-
-			<n8n-text v-if="search" :class="$style.itemsText">
-				{{
-					$locale.baseText('ndv.search.items', {
-						adjustToNumber: unfilteredDataCount,
-						interpolate: { matched: dataCount, total: unfilteredDataCount },
-					})
-				}}
-			</n8n-text>
-			<n8n-text v-else :class="$style.itemsText">
-				{{
-					$locale.baseText('ndv.output.items', {
-						adjustToNumber: dataCount,
-						interpolate: { count: dataCount },
-					})
-				}}
-			</n8n-text>
-		</div>
-
-		<div ref="dataContainer" :class="$style.dataContainer" data-test-id="ndv-data-container">
-			<div v-if="isExecuting" :class="$style.center" data-test-id="ndv-executing">
-				<div :class="$style.spinner"><n8n-spinner type="ring" /></div>
-				<n8n-text>{{ executingMessage }}</n8n-text>
-			</div>
-
-			<div v-else-if="editMode.enabled" :class="$style.editMode">
-				<div :class="[$style.editModeBody, 'ignore-key-press']">
-					<JsonEditor
-						:model-value="editMode.value"
-						:fill-parent="true"
-						@update:model-value="ndvStore.setOutputPanelEditModeValue($event)"
-					/>
-				</div>
-				<div :class="$style.editModeFooter">
-					<n8n-info-tip :bold="false" :class="$style.editModeFooterInfotip">
-						{{ $locale.baseText('runData.editor.copyDataInfo') }}
-						<n8n-link :to="dataEditingDocsUrl" size="small">
-							{{ $locale.baseText('generic.learnMore') }}
-						</n8n-link>
-					</n8n-info-tip>
-				</div>
-			</div>
-
-			<div
-				v-else-if="paneType === 'output' && hasSubworkflowExecutionError"
-				:class="$style.stretchVertically"
-			>
-				<NodeErrorView :error="subworkflowExecutionError" :class="$style.errorDisplay" />
-			</div>
-
-			<div v-else-if="!hasNodeRun && !(isInputSchemaView && node?.disabled)" :class="$style.center">
-				<slot name="node-not-run"></slot>
-			</div>
-
-			<div
-				v-else-if="paneType === 'input' && !isInputSchemaView && node?.disabled"
-				:class="$style.center"
-			>
-				<n8n-text>
-					{{ $locale.baseText('ndv.input.disabled', { interpolate: { nodeName: node.name } }) }}
-					<n8n-link @click="enableNode">
-						{{ $locale.baseText('ndv.input.disabled.cta') }}
-					</n8n-link>
-				</n8n-text>
-			</div>
-
-			<div v-else-if="hasNodeRun && isArtificialRecoveredEventItem" :class="$style.center">
-				<slot name="recovered-artificial-output-data"></slot>
-			</div>
-
-			<div v-else-if="hasNodeRun && hasRunError" :class="$style.stretchVertically">
-				<n8n-text v-if="isPaneTypeInput" :class="$style.center" size="large" tag="p" bold>
-					{{
-						$locale.baseText('nodeErrorView.inputPanel.previousNodeError.title', {
-							interpolate: { nodeName: node?.name ?? '' },
-						})
-					}}
-				</n8n-text>
-				<div v-else-if="$slots['content']">
-					<NodeErrorView
-						v-if="workflowRunErrorAsNodeError"
-						:error="workflowRunErrorAsNodeError"
-						:class="$style.inlineError"
-						compact
-					/>
-					<slot name="content"></slot>
-				</div>
-				<NodeErrorView
-					v-else-if="workflowRunErrorAsNodeError"
-					:error="workflowRunErrorAsNodeError"
-					:class="$style.dataDisplay"
-				/>
-			</div>
-
-			<div
-				v-else-if="
-					hasNodeRun && (!unfilteredDataCount || (search && !dataCount)) && branches.length > 1
-				"
-				:class="$style.center"
-			>
-				<div v-if="search">
-					<n8n-text tag="h3" size="large">{{
-						$locale.baseText('ndv.search.noMatch.title')
-					}}</n8n-text>
-					<n8n-text>
-						<i18n-t keypath="ndv.search.noMatch.description" tag="span">
-							<template #link>
-								<a href="#" @click="onSearchClear">
-									{{ $locale.baseText('ndv.search.noMatch.description.link') }}
-								</a>
-							</template>
-						</i18n-t>
-					</n8n-text>
-				</div>
-				<n8n-text v-else>
-					{{ noDataInBranchMessage }}
-				</n8n-text>
-			</div>
-
-			<div v-else-if="hasNodeRun && !inputData.length && !search" :class="$style.center">
-				<slot name="no-output-data">xxx</slot>
-			</div>
-
-			<div v-else-if="hasNodeRun && !showData" :class="$style.center">
-				<n8n-text :bold="true" color="text-dark" size="large">{{ tooMuchDataTitle }}</n8n-text>
-				<n8n-text align="center" tag="div"
-					><span
-						v-html="
-							$locale.baseText('ndv.output.tooMuchData.message', {
-								interpolate: { size: dataSizeInMB },
-							})
-						"
-					></span
-				></n8n-text>
-
-				<n8n-button
-					outline
-					:label="$locale.baseText('ndv.output.tooMuchData.showDataAnyway')"
-					@click="showTooMuchData"
-				/>
-
-				<n8n-button
-					size="small"
-					:label="$locale.baseText('runData.downloadBinaryData')"
-					@click="downloadJsonData()"
-				/>
-			</div>
-
-			<!-- V-else slot named content which only renders if $slots.content is passed and hasNodeRun -->
-			<slot v-else-if="hasNodeRun && $slots['content']" name="content"></slot>
-
-			<div
-				v-else-if="
-					hasNodeRun &&
-					displayMode === 'table' &&
-					binaryData.length > 0 &&
-					inputData.length === 1 &&
-					Object.keys(jsonData[0] || {}).length === 0
-				"
-				:class="$style.center"
-			>
-				<n8n-text>
-					{{ $locale.baseText('runData.switchToBinary.info') }}
-					<a @click="switchToBinary">
-						{{ $locale.baseText('runData.switchToBinary.binary') }}
-					</a>
-				</n8n-text>
-			</div>
-
-			<div v-else-if="showIoSearchNoMatchContent" :class="$style.center">
-				<n8n-text tag="h3" size="large">{{
-					$locale.baseText('ndv.search.noMatch.title')
-				}}</n8n-text>
-				<n8n-text>
-					<i18n-t keypath="ndv.search.noMatch.description" tag="span">
-						<template #link>
-							<a href="#" @click="onSearchClear">
-								{{ $locale.baseText('ndv.search.noMatch.description.link') }}
-							</a>
-						</template>
-					</i18n-t>
-				</n8n-text>
-			</div>
-
-			<Suspense v-else-if="hasNodeRun && displayMode === 'table' && node">
-				<LazyRunDataTable
-					:node="node"
-					:input-data="inputDataPage"
-					:mapping-enabled="mappingEnabled"
-					:distance-from-active="distanceFromActive"
-					:run-index="runIndex"
-					:page-offset="currentPageOffset"
-					:total-runs="maxRunIndex"
-					:has-default-hover-state="paneType === 'input' && !search"
-					:search="search"
-					@mounted="$emit('tableMounted', $event)"
-					@active-row-changed="onItemHover"
-					@display-mode-change="onDisplayModeChange"
-				/>
-			</Suspense>
-
-			<Suspense v-else-if="hasNodeRun && displayMode === 'json' && node">
-				<LazyRunDataJson
-					:pane-type="paneType"
-					:edit-mode="editMode"
-					:push-ref="pushRef"
-					:node="node"
-					:input-data="inputDataPage"
-					:mapping-enabled="mappingEnabled"
-					:distance-from-active="distanceFromActive"
-					:run-index="runIndex"
-					:total-runs="maxRunIndex"
-					:search="search"
-				/>
-			</Suspense>
-
-			<Suspense v-else-if="hasNodeRun && isPaneTypeOutput && displayMode === 'html'">
-				<LazyRunDataHtml :input-html="inputHtml" />
-			</Suspense>
-
-			<Suspense v-else-if="hasNodeRun && isSchemaView">
-				<LazyRunDataSchema
-					:nodes="nodes"
-					:mapping-enabled="mappingEnabled"
-					:node="node"
-					:data="jsonData"
-					:pane-type="paneType"
-					:connection-type="connectionType"
-					:run-index="runIndex"
-					:output-index="currentOutputIndex"
-					:total-runs="maxRunIndex"
-					:search="search"
-					:class="$style.schema"
-					@clear:search="onSearchClear"
-				/>
-			</Suspense>
-
-			<div v-else-if="displayMode === 'binary' && binaryData.length === 0" :class="$style.center">
-				<n8n-text align="center" tag="div">{{
-					$locale.baseText('runData.noBinaryDataFound')
-				}}</n8n-text>
-			</div>
-
-			<div v-else-if="displayMode === 'binary'" :class="$style.dataDisplay">
-				<div v-for="(binaryDataEntry, index) in binaryData" :key="index">
-					<div v-if="binaryData.length > 1" :class="$style.binaryIndex">
-						<div>
-							{{ index + 1 }}
-						</div>
-					</div>
-
-					<div :class="$style.binaryRow">
-						<div
-							v-for="(binaryData, key) in binaryDataEntry"
-							:key="index + '_' + key"
-							:class="$style.binaryCell"
-						>
-							<div :data-test-id="'ndv-binary-data_' + index">
-								<div :class="$style.binaryHeader">
-									{{ key }}
-								</div>
-								<div v-if="binaryData.fileName">
-									<div>
-										<n8n-text size="small" :bold="true"
-											>{{ $locale.baseText('runData.fileName') }}:
-										</n8n-text>
-									</div>
-									<div :class="$style.binaryValue">{{ binaryData.fileName }}</div>
-								</div>
-								<div v-if="binaryData.directory">
-									<div>
-										<n8n-text size="small" :bold="true"
-											>{{ $locale.baseText('runData.directory') }}:
-										</n8n-text>
-									</div>
-									<div :class="$style.binaryValue">{{ binaryData.directory }}</div>
-								</div>
-								<div v-if="binaryData.fileExtension">
-									<div>
-										<n8n-text size="small" :bold="true"
-											>{{ $locale.baseText('runData.fileExtension') }}:</n8n-text
-										>
-									</div>
-									<div :class="$style.binaryValue">{{ binaryData.fileExtension }}</div>
-								</div>
-								<div v-if="binaryData.mimeType">
-									<div>
-										<n8n-text size="small" :bold="true"
-											>{{ $locale.baseText('runData.mimeType') }}:
-										</n8n-text>
-									</div>
-									<div :class="$style.binaryValue">{{ binaryData.mimeType }}</div>
-								</div>
-								<div v-if="binaryData.fileSize">
-									<div>
-										<n8n-text size="small" :bold="true"
-											>{{ $locale.baseText('runData.fileSize') }}:
-										</n8n-text>
-									</div>
-									<div :class="$style.binaryValue">{{ binaryData.fileSize }}</div>
-								</div>
-
-								<div :class="$style.binaryButtonContainer">
-									<n8n-button
-										v-if="isViewable(index, key)"
-										size="small"
-										:label="$locale.baseText('runData.showBinaryData')"
-										data-test-id="ndv-view-binary-data"
-										@click="displayBinaryData(index, key)"
-									/>
-									<n8n-button
-										v-if="isDownloadable(index, key)"
-										size="small"
-										type="secondary"
-										:label="$locale.baseText('runData.downloadBinaryData')"
-										data-test-id="ndv-download-binary-data"
-										@click="downloadBinaryData(index, key)"
-									/>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div
-			v-if="
-				hasNodeRun &&
-				!hasRunError &&
-				binaryData.length === 0 &&
-				dataCount > pageSize &&
-				!isSchemaView &&
-				!isArtificialRecoveredEventItem
-			"
-			v-show="!editMode.enabled"
-			:class="$style.pagination"
-			data-test-id="ndv-data-pagination"
-		>
-			<el-pagination
-				background
-				:hide-on-single-page="true"
-				:current-page="currentPage"
-				:pager-count="5"
-				:page-size="pageSize"
-				layout="prev, pager, next"
-				:total="dataCount"
-				@update:current-page="onCurrentPageChange"
-			>
-			</el-pagination>
-
-			<div :class="$style.pageSizeSelector">
-				<n8n-select
-					size="mini"
-					:model-value="pageSize"
-					teleported
-					@update:model-value="onPageSizeChange"
-				>
-					<template #prepend>{{ $locale.baseText('ndv.output.pageSize') }}</template>
-					<n8n-option v-for="size in pageSizes" :key="size" :label="size" :value="size">
-					</n8n-option>
-					<n8n-option :label="$locale.baseText('ndv.output.all')" :value="dataCount"> </n8n-option>
-				</n8n-select>
-			</div>
-		</div>
-		<n8n-block-ui :show="blockUI" :class="$style.uiBlocker" />
-	</div>
-</template>
-
 <script lang="ts">
 import { defineAsyncComponent, defineComponent, toRef } from 'vue';
 import type { PropType } from 'vue';
@@ -857,859 +282,1434 @@ export default defineComponent({
 				defaults.unshift({ label: 'HTML', value: 'html' });
 			}
 
-			return defaults;
+			return defaults;
+		},
+		hasNodeRun(): boolean {
+			return Boolean(
+				!this.isExecuting &&
+					this.node &&
+					((this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name)) ||
+						this.pinnedData.hasData.value),
+			);
+		},
+		isArtificialRecoveredEventItem(): boolean {
+			return !!this.rawInputData?.[0]?.json?.isArtificialRecoveredEventItem;
+		},
+		subworkflowExecutionError(): NodeError {
+			return {
+				node: this.node,
+				messages: [this.workflowsStore.subWorkflowExecutionError?.message ?? ''],
+			} as NodeError;
+		},
+		hasSubworkflowExecutionError(): boolean {
+			return Boolean(this.workflowsStore.subWorkflowExecutionError);
+		},
+		workflowRunErrorAsNodeError(): NodeError | null {
+			if (!this.node) {
+				return null;
+			}
+			return this.workflowRunData?.[this.node?.name]?.[this.runIndex]?.error as NodeError;
+		},
+		hasRunError(): boolean {
+			return Boolean(this.node && this.workflowRunErrorAsNodeError);
+		},
+		executionHints(): NodeHint[] {
+			if (this.hasNodeRun) {
+				const hints = this.node && this.workflowRunData?.[this.node.name]?.[this.runIndex]?.hints;
+
+				if (hints) return hints;
+			}
+
+			return [];
+		},
+		workflowExecution(): IExecutionResponse | null {
+			return this.workflowsStore.getWorkflowExecution;
+		},
+		workflowRunData(): IRunData | null {
+			if (this.workflowExecution === null) {
+				return null;
+			}
+			const executionData: IRunExecutionData | undefined = this.workflowExecution.data;
+			if (executionData?.resultData) {
+				return executionData.resultData.runData;
+			}
+			return null;
+		},
+		dataCount(): number {
+			return this.getDataCount(this.runIndex, this.currentOutputIndex);
+		},
+		unfilteredDataCount(): number {
+			return this.pinnedData.data.value
+				? this.pinnedData.data.value.length
+				: this.rawInputData.length;
+		},
+		dataSizeInMB(): string {
+			return (this.dataSize / (1024 * 1024)).toFixed(1);
+		},
+		maxOutputIndex(): number {
+			if (this.node === null || this.runIndex === undefined) {
+				return 0;
+			}
+
+			const runData: IRunData | null = this.workflowRunData;
+
+			if (runData === null || !runData.hasOwnProperty(this.node.name)) {
+				return 0;
+			}
+
+			if (runData[this.node.name].length < this.runIndex) {
+				return 0;
+			}
+
+			if (runData[this.node.name][this.runIndex]) {
+				const taskData = runData[this.node.name][this.runIndex].data;
+				if (taskData?.main) {
+					return taskData.main.length - 1;
+				}
+			}
+
+			return 0;
+		},
+		currentPageOffset(): number {
+			return this.pageSize * (this.currentPage - 1);
+		},
+		maxRunIndex(): number {
+			if (this.node === null) {
+				return 0;
+			}
+
+			const runData: IRunData | null = this.workflowRunData;
+
+			if (runData === null || !runData.hasOwnProperty(this.node.name)) {
+				return 0;
+			}
+
+			if (runData[this.node.name].length) {
+				return runData[this.node.name].length - 1;
+			}
+
+			return 0;
+		},
+		rawInputData(): INodeExecutionData[] {
+			return this.getRawInputData(this.runIndex, this.currentOutputIndex, this.connectionType);
+		},
+		unfilteredInputData(): INodeExecutionData[] {
+			return this.getPinDataOrLiveData(this.rawInputData);
+		},
+		inputData(): INodeExecutionData[] {
+			return this.getFilteredData(this.unfilteredInputData);
+		},
+		inputDataPage(): INodeExecutionData[] {
+			const offset = this.pageSize * (this.currentPage - 1);
+			return this.inputData.slice(offset, offset + this.pageSize);
+		},
+		jsonData(): IDataObject[] {
+			return executionDataToJson(this.inputData);
+		},
+		binaryData(): IBinaryKeyData[] {
+			if (!this.node) {
+				return [];
+			}
+
+			const binaryData = this.nodeHelpers.getBinaryData(
+				this.workflowRunData,
+				this.node.name,
+				this.runIndex,
+				this.currentOutputIndex,
+			);
+			return binaryData.filter((data) => Boolean(data && Object.keys(data).length));
+		},
+		inputHtml(): string {
+			return String(this.inputData[0]?.json?.html ?? '');
+		},
+		currentOutputIndex(): number {
+			if (this.overrideOutputs?.length && !this.overrideOutputs.includes(this.outputIndex)) {
+				return this.overrideOutputs[0];
+			}
+
+			return this.outputIndex;
+		},
+		branches(): ITab[] {
+			const capitalize = (name: string) => name.charAt(0).toLocaleUpperCase() + name.slice(1);
+
+			const branches: ITab[] = [];
+
+			for (let i = 0; i <= this.maxOutputIndex; i++) {
+				if (this.overrideOutputs && !this.overrideOutputs.includes(i)) {
+					continue;
+				}
+				const totalItemsCount = this.getRawInputData(this.runIndex, i).length;
+				const itemsCount = this.getDataCount(this.runIndex, i);
+				const items = this.search
+					? this.$locale.baseText('ndv.search.items', {
+							adjustToNumber: totalItemsCount,
+							interpolate: { matched: itemsCount, total: totalItemsCount },
+						})
+					: this.$locale.baseText('ndv.output.items', {
+							adjustToNumber: itemsCount,
+							interpolate: { count: itemsCount },
+						});
+				let outputName = this.getOutputName(i);
+
+				if (`${outputName}` === `${i}`) {
+					outputName = `${this.$locale.baseText('ndv.output')} ${outputName}`;
+				} else {
+					const appendBranchWord = NODE_TYPES_EXCLUDED_FROM_OUTPUT_NAME_APPEND.includes(
+						this.node?.type ?? '',
+					)
+						? ''
+						: ` ${this.$locale.baseText('ndv.output.branch')}`;
+					outputName = capitalize(`${this.getOutputName(i)}${appendBranchWord}`);
+				}
+				branches.push({
+					label:
+						(this.search && itemsCount) || totalItemsCount
+							? `${outputName} (${items})`
+							: outputName,
+					value: i,
+				});
+			}
+			return branches;
+		},
+		editMode(): { enabled: boolean; value: string } {
+			return this.isPaneTypeInput
+				? { enabled: false, value: '' }
+				: this.ndvStore.outputPanelEditMode;
+		},
+		isPaneTypeInput(): boolean {
+			return this.paneType === 'input';
+		},
+		isPaneTypeOutput(): boolean {
+			return this.paneType === 'output';
+		},
+		readOnlyEnv(): boolean {
+			return this.sourceControlStore.preferences.branchReadOnly;
+		},
+		showIOSearch(): boolean {
+			return this.hasNodeRun && !this.hasRunError && this.unfilteredInputData.length > 0;
+		},
+		inputSelectLocation() {
+			if (this.isSchemaView) return 'none';
+			if (!this.hasNodeRun) return 'header';
+			if (this.maxRunIndex > 0) return 'runs';
+			if (this.maxOutputIndex > 0 && this.branches.length > 1) {
+				return 'outputs';
+			}
+
+			return 'items';
+		},
+		showIoSearchNoMatchContent(): boolean {
+			return this.hasNodeRun && !this.inputData.length && !!this.search;
+		},
+		parentNodeOutputData(): INodeExecutionData[] {
+			const parentNode = this.workflow.getParentNodesByDepth(this.node?.name ?? '')[0];
+			let parentNodeData: INodeExecutionData[] = [];
+
+			if (parentNode?.name) {
+				parentNodeData = this.nodeHelpers.getNodeInputData(
+					this.workflow.getNode(parentNode?.name),
+					this.runIndex,
+					this.outputIndex,
+					'input',
+					this.connectionType,
+				);
+			}
+
+			return parentNodeData;
 		},
-		hasNodeRun(): boolean {
-			return Boolean(
-				!this.isExecuting &&
-					this.node &&
-					((this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name)) ||
-						this.pinnedData.hasData.value),
-			);
+	},
+	watch: {
+		node(newNode: INodeUi, prevNode: INodeUi) {
+			if (newNode?.id === prevNode?.id) return;
+			this.init();
 		},
-		isArtificialRecoveredEventItem(): boolean {
-			return !!this.rawInputData?.[0]?.json?.isArtificialRecoveredEventItem;
+		hasNodeRun() {
+			if (this.paneType === 'output') this.setDisplayMode();
 		},
-		subworkflowExecutionError(): NodeError {
-			return {
-				node: this.node,
-				messages: [this.workflowsStore.subWorkflowExecutionError?.message ?? ''],
-			} as NodeError;
+		inputDataPage: {
+			handler(data: INodeExecutionData[]) {
+				if (this.paneType && data) {
+					this.ndvStore.setNDVPanelDataIsEmpty({
+						panel: this.paneType as 'input' | 'output',
+						isEmpty: data.every((item) => isEmpty(item.json)),
+					});
+				}
+			},
+			immediate: true,
+			deep: true,
 		},
-		hasSubworkflowExecutionError(): boolean {
-			return Boolean(this.workflowsStore.subWorkflowExecutionError);
+		jsonData(data: IDataObject[], prevData: IDataObject[]) {
+			if (isEqual(data, prevData)) return;
+			this.refreshDataSize();
+			if (this.dataCount) {
+				this.resetCurrentPageIfTooFar();
+			}
+			this.showPinDataDiscoveryTooltip(data);
 		},
-		workflowRunErrorAsNodeError(): NodeError | null {
-			if (!this.node) {
-				return null;
+		binaryData(newData: IBinaryKeyData[], prevData: IBinaryKeyData[]) {
+			if (newData.length && !prevData.length && this.displayMode !== 'binary') {
+				this.switchToBinary();
+			} else if (!newData.length && this.displayMode === 'binary') {
+				this.onDisplayModeChange('table');
 			}
-			return this.workflowRunData?.[this.node?.name]?.[this.runIndex]?.error as NodeError;
 		},
-		hasRunError(): boolean {
-			return Boolean(this.node && this.workflowRunErrorAsNodeError);
+		currentOutputIndex(branchIndex: number) {
+			this.ndvStore.setNDVBranchIndex({
+				pane: this.paneType as 'input' | 'output',
+				branchIndex,
+			});
 		},
-		executionHints(): NodeHint[] {
-			if (this.hasNodeRun) {
-				const hints = this.node && this.workflowRunData?.[this.node.name]?.[this.runIndex]?.hints;
+		search(newSearch: string) {
+			this.$emit('search', newSearch);
+		},
+	},
+	mounted() {
+		this.init();
 
-				if (hints) return hints;
+		if (!this.isPaneTypeInput) {
+			this.showPinDataDiscoveryTooltip(this.jsonData);
+		}
+		this.ndvStore.setNDVBranchIndex({
+			pane: this.paneType as 'input' | 'output',
+			branchIndex: this.currentOutputIndex,
+		});
+
+		if (this.paneType === 'output') {
+			this.setDisplayMode();
+			this.activatePane();
+		}
+
+		if (this.hasRunError && this.node) {
+			const error = this.workflowRunData?.[this.node.name]?.[this.runIndex]?.error;
+			const errorsToTrack = ['unknown error'];
+
+			if (error && errorsToTrack.some((e) => error.message?.toLowerCase().includes(e))) {
+				this.$telemetry.track(
+					`User encountered an error: "${error.message}"`,
+					{
+						node: this.node.type,
+						errorMessage: error.message,
+						nodeVersion: this.node.typeVersion,
+						n8nVersion: this.rootStore.versionCli,
+					},
+					{
+						withPostHog: true,
+					},
+				);
 			}
+		}
+	},
+	beforeUnmount() {
+		this.hidePinDataDiscoveryTooltip();
+	},
+	methods: {
+		getResolvedNodeOutputs() {
+			if (this.node && this.nodeType) {
+				const workflowNode = this.workflow.getNode(this.node.name);
 
+				if (workflowNode) {
+					const outputs = NodeHelpers.getNodeOutputs(this.workflow, workflowNode, this.nodeType);
+					return outputs;
+				}
+			}
 			return [];
 		},
-		workflowExecution(): IExecutionResponse | null {
-			return this.workflowsStore.getWorkflowExecution;
-		},
-		workflowRunData(): IRunData | null {
-			if (this.workflowExecution === null) {
-				return null;
+		shouldHintBeDisplayed(hint: NodeHint): boolean {
+			const { location, whenToDisplay } = hint;
+
+			if (location) {
+				if (location === 'ndv' && !['input', 'output'].includes(this.paneType)) {
+					return false;
+				}
+				if (location === 'inputPane' && this.paneType !== 'input') {
+					return false;
+				}
+
+				if (location === 'outputPane' && this.paneType !== 'output') {
+					return false;
+				}
 			}
-			const executionData: IRunExecutionData | undefined = this.workflowExecution.data;
-			if (executionData?.resultData) {
-				return executionData.resultData.runData;
+
+			if (whenToDisplay === 'afterExecution' && !this.hasNodeRun) {
+				return false;
 			}
-			return null;
+
+			if (whenToDisplay === 'beforeExecution' && this.hasNodeRun) {
+				return false;
+			}
+
+			return true;
 		},
-		dataCount(): number {
-			return this.getDataCount(this.runIndex, this.currentOutputIndex);
+		getNodeHints(): NodeHint[] {
+			if (this.node && this.nodeType) {
+				const workflowNode = this.workflow.getNode(this.node.name);
+
+				if (workflowNode) {
+					const executionHints = this.executionHints;
+					const nodeHints = NodeHelpers.getNodeHints(this.workflow, workflowNode, this.nodeType, {
+						runExecutionData: this.workflowExecution?.data ?? null,
+						runIndex: this.runIndex,
+						connectionInputData: this.parentNodeOutputData,
+					});
+
+					return executionHints.concat(nodeHints).filter(this.shouldHintBeDisplayed);
+				}
+			}
+			return [];
 		},
-		unfilteredDataCount(): number {
-			return this.pinnedData.data.value
-				? this.pinnedData.data.value.length
-				: this.rawInputData.length;
+		onItemHover(itemIndex: number | null) {
+			if (itemIndex === null) {
+				this.$emit('itemHover', null);
+
+				return;
+			}
+			this.$emit('itemHover', {
+				outputIndex: this.currentOutputIndex,
+				itemIndex,
+			});
 		},
-		dataSizeInMB(): string {
-			return (this.dataSize / (1024 * 1024)).toFixed(1);
+		onClickDataPinningDocsLink() {
+			this.$telemetry.track('User clicked ndv link', {
+				workflow_id: this.workflowsStore.workflowId,
+				push_ref: this.pushRef,
+				node_type: this.activeNode?.type,
+				pane: 'output',
+				type: 'data-pinning-docs',
+			});
 		},
-		maxOutputIndex(): number {
-			if (this.node === null || this.runIndex === undefined) {
-				return 0;
+		showPinDataDiscoveryTooltip(value: IDataObject[]) {
+			if (!this.isTriggerNode) {
+				return;
 			}
 
-			const runData: IRunData | null = this.workflowRunData;
+			const pinDataDiscoveryFlag = useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG).value;
 
-			if (runData === null || !runData.hasOwnProperty(this.node.name)) {
-				return 0;
-			}
+			if (value && value.length > 0 && !this.isReadOnlyRoute && !pinDataDiscoveryFlag) {
+				this.pinDataDiscoveryComplete();
 
-			if (runData[this.node.name].length < this.runIndex) {
-				return 0;
+				setTimeout(() => {
+					this.isControlledPinDataTooltip = true;
+					this.pinDataDiscoveryTooltipVisible = true;
+					dataPinningEventBus.emit('data-pinning-discovery', { isTooltipVisible: true });
+				}, 500); // Wait for NDV to open
 			}
-
-			if (runData[this.node.name][this.runIndex]) {
-				const taskData = runData[this.node.name][this.runIndex].data;
-				if (taskData?.main) {
-					return taskData.main.length - 1;
-				}
+		},
+		hidePinDataDiscoveryTooltip() {
+			if (this.pinDataDiscoveryTooltipVisible) {
+				this.isControlledPinDataTooltip = false;
+				this.pinDataDiscoveryTooltipVisible = false;
+				dataPinningEventBus.emit('data-pinning-discovery', { isTooltipVisible: false });
 			}
+		},
+		pinDataDiscoveryComplete() {
+			useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG).value = 'true';
+			useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG).value = 'true';
+		},
+		enterEditMode({ origin }: EnterEditModeArgs) {
+			const inputData = this.pinnedData.data.value
+				? clearJsonKey(this.pinnedData.data.value)
+				: executionDataToJson(this.rawInputData);
 
-			return 0;
+			const inputDataLength = Array.isArray(inputData)
+				? inputData.length
+				: Object.keys(inputData ?? {}).length;
+
+			const data = inputDataLength > 0 ? inputData : TEST_PIN_DATA;
+
+			this.ndvStore.setOutputPanelEditModeEnabled(true);
+			this.ndvStore.setOutputPanelEditModeValue(JSON.stringify(data, null, 2));
+
+			this.$telemetry.track('User opened ndv edit state', {
+				node_type: this.activeNode?.type,
+				click_type: origin === 'editIconButton' ? 'button' : 'link',
+				push_ref: this.pushRef,
+				run_index: this.runIndex,
+				is_output_present: this.hasNodeRun || this.pinnedData.hasData.value,
+				view: !this.hasNodeRun && !this.pinnedData.hasData.value ? 'undefined' : this.displayMode,
+				is_data_pinned: this.pinnedData.hasData.value,
+			});
 		},
-		currentPageOffset(): number {
-			return this.pageSize * (this.currentPage - 1);
+		onClickCancelEdit() {
+			this.ndvStore.setOutputPanelEditModeEnabled(false);
+			this.ndvStore.setOutputPanelEditModeValue('');
+			this.onExitEditMode({ type: 'cancel' });
 		},
-		maxRunIndex(): number {
-			if (this.node === null) {
-				return 0;
+		onClickSaveEdit() {
+			if (!this.node) {
+				return;
 			}
 
-			const runData: IRunData | null = this.workflowRunData;
+			const { value } = this.editMode;
 
-			if (runData === null || !runData.hasOwnProperty(this.node.name)) {
-				return 0;
-			}
+			this.clearAllStickyNotifications();
 
-			if (runData[this.node.name].length) {
-				return runData[this.node.name].length - 1;
+			try {
+				const clearedValue = clearJsonKey(value) as INodeExecutionData[];
+				try {
+					this.pinnedData.setData(clearedValue, 'save-edit');
+				} catch (error) {
+					// setData function already shows toasts on error, so just return here
+					return;
+				}
+			} catch (error) {
+				this.showError(error, this.$locale.baseText('ndv.pinData.error.syntaxError.title'));
+				return;
 			}
 
-			return 0;
-		},
-		rawInputData(): INodeExecutionData[] {
-			return this.getRawInputData(this.runIndex, this.currentOutputIndex, this.connectionType);
-		},
-		unfilteredInputData(): INodeExecutionData[] {
-			return this.getPinDataOrLiveData(this.rawInputData);
-		},
-		inputData(): INodeExecutionData[] {
-			return this.getFilteredData(this.unfilteredInputData);
-		},
-		inputDataPage(): INodeExecutionData[] {
-			const offset = this.pageSize * (this.currentPage - 1);
-			return this.inputData.slice(offset, offset + this.pageSize);
+			this.ndvStore.setOutputPanelEditModeEnabled(false);
+
+			this.onExitEditMode({ type: 'save' });
 		},
-		jsonData(): IDataObject[] {
-			return executionDataToJson(this.inputData);
+		onExitEditMode({ type }: { type: 'save' | 'cancel' }) {
+			this.$telemetry.track('User closed ndv edit state', {
+				node_type: this.activeNode?.type,
+				push_ref: this.pushRef,
+				run_index: this.runIndex,
+				view: this.displayMode,
+				type,
+			});
 		},
-		binaryData(): IBinaryKeyData[] {
+		async onTogglePinData({ source }: { source: PinDataSource | UnpinDataSource }) {
 			if (!this.node) {
-				return [];
+				return;
 			}
 
-			const binaryData = this.nodeHelpers.getBinaryData(
-				this.workflowRunData,
-				this.node.name,
-				this.runIndex,
-				this.currentOutputIndex,
-			);
-			return binaryData.filter((data) => Boolean(data && Object.keys(data).length));
-		},
-		inputHtml(): string {
-			return String(this.inputData[0]?.json?.html ?? '');
-		},
-		currentOutputIndex(): number {
-			if (this.overrideOutputs?.length && !this.overrideOutputs.includes(this.outputIndex)) {
-				return this.overrideOutputs[0];
+			if (source === 'pin-icon-click') {
+				const telemetryPayload = {
+					node_type: this.activeNode?.type,
+					push_ref: this.pushRef,
+					run_index: this.runIndex,
+					view: !this.hasNodeRun && !this.pinnedData.hasData.value ? 'none' : this.displayMode,
+				};
+
+				void this.externalHooks.run('runData.onTogglePinData', telemetryPayload);
+				this.$telemetry.track('User clicked pin data icon', telemetryPayload);
 			}
 
-			return this.outputIndex;
-		},
-		branches(): ITab[] {
-			const capitalize = (name: string) => name.charAt(0).toLocaleUpperCase() + name.slice(1);
+			this.nodeHelpers.updateNodeParameterIssues(this.node);
 
-			const branches: ITab[] = [];
+			if (this.pinnedData.hasData.value) {
+				this.pinnedData.unsetData(source);
+				return;
+			}
 
-			for (let i = 0; i <= this.maxOutputIndex; i++) {
-				if (this.overrideOutputs && !this.overrideOutputs.includes(i)) {
-					continue;
-				}
-				const totalItemsCount = this.getRawInputData(this.runIndex, i).length;
-				const itemsCount = this.getDataCount(this.runIndex, i);
-				const items = this.search
-					? this.$locale.baseText('ndv.search.items', {
-							adjustToNumber: totalItemsCount,
-							interpolate: { matched: itemsCount, total: totalItemsCount },
-						})
-					: this.$locale.baseText('ndv.output.items', {
-							adjustToNumber: itemsCount,
-							interpolate: { count: itemsCount },
-						});
-				let outputName = this.getOutputName(i);
+			try {
+				this.pinnedData.setData(this.rawInputData, 'pin-icon-click');
+			} catch (error) {
+				console.error(error);
+				return;
+			}
 
-				if (`${outputName}` === `${i}`) {
-					outputName = `${this.$locale.baseText('ndv.output')} ${outputName}`;
-				} else {
-					const appendBranchWord = NODE_TYPES_EXCLUDED_FROM_OUTPUT_NAME_APPEND.includes(
-						this.node?.type ?? '',
-					)
-						? ''
-						: ` ${this.$locale.baseText('ndv.output.branch')}`;
-					outputName = capitalize(`${this.getOutputName(i)}${appendBranchWord}`);
-				}
-				branches.push({
-					label:
-						(this.search && itemsCount) || totalItemsCount
-							? `${outputName} (${items})`
-							: outputName,
-					value: i,
+			if (this.maxRunIndex > 0) {
+				this.showToast({
+					title: this.$locale.baseText('ndv.pinData.pin.multipleRuns.title', {
+						interpolate: {
+							index: `${this.runIndex}`,
+						},
+					}),
+					message: this.$locale.baseText('ndv.pinData.pin.multipleRuns.description'),
+					type: 'success',
+					duration: 2000,
 				});
 			}
-			return branches;
+
+			this.hidePinDataDiscoveryTooltip();
+			this.pinDataDiscoveryComplete();
 		},
-		editMode(): { enabled: boolean; value: string } {
-			return this.isPaneTypeInput
-				? { enabled: false, value: '' }
-				: this.ndvStore.outputPanelEditMode;
+		switchToBinary() {
+			this.onDisplayModeChange('binary');
 		},
-		isPaneTypeInput(): boolean {
-			return this.paneType === 'input';
+		onBranchChange(value: number) {
+			this.outputIndex = value;
+
+			this.$telemetry.track('User changed ndv branch', {
+				push_ref: this.pushRef,
+				branch_index: value,
+				node_type: this.activeNode?.type,
+				node_type_input_selection: this.nodeType ? this.nodeType.name : '',
+				pane: this.paneType,
+			});
 		},
-		isPaneTypeOutput(): boolean {
-			return this.paneType === 'output';
+		showTooMuchData() {
+			this.showData = true;
+			this.userEnabledShowData = true;
+			this.$telemetry.track('User clicked ndv button', {
+				node_type: this.activeNode?.type,
+				workflow_id: this.workflowsStore.workflowId,
+				push_ref: this.pushRef,
+				pane: this.paneType,
+				type: 'showTooMuchData',
+			});
 		},
-		readOnlyEnv(): boolean {
-			return this.sourceControlStore.preferences.branchReadOnly;
+		toggleLinkRuns() {
+			this.linkedRuns ? this.unlinkRun() : this.linkRun();
 		},
-		showIOSearch(): boolean {
-			return this.hasNodeRun && !this.hasRunError && this.unfilteredInputData.length > 0;
+		linkRun() {
+			this.$emit('linkRun');
 		},
-		inputSelectLocation() {
-			if (this.isSchemaView) return 'none';
-			if (!this.hasNodeRun) return 'header';
-			if (this.maxRunIndex > 0) return 'runs';
-			if (this.maxOutputIndex > 0 && this.branches.length > 1) {
-				return 'outputs';
-			}
-
-			return 'items';
+		unlinkRun() {
+			this.$emit('unlinkRun');
 		},
-		showIoSearchNoMatchContent(): boolean {
-			return this.hasNodeRun && !this.inputData.length && !!this.search;
+		onCurrentPageChange(value: number) {
+			this.currentPage = value;
+			this.$telemetry.track('User changed ndv page', {
+				node_type: this.activeNode?.type,
+				workflow_id: this.workflowsStore.workflowId,
+				push_ref: this.pushRef,
+				pane: this.paneType,
+				page_selected: this.currentPage,
+				page_size: this.pageSize,
+				items_total: this.dataCount,
+			});
 		},
-		parentNodeOutputData(): INodeExecutionData[] {
-			const parentNode = this.workflow.getParentNodesByDepth(this.node?.name ?? '')[0];
-			let parentNodeData: INodeExecutionData[] = [];
-
-			if (parentNode?.name) {
-				parentNodeData = this.nodeHelpers.getNodeInputData(
-					this.workflow.getNode(parentNode?.name),
-					this.runIndex,
-					this.outputIndex,
-					'input',
-					this.connectionType,
-				);
+		resetCurrentPageIfTooFar() {
+			const maxPage = Math.ceil(this.dataCount / this.pageSize);
+			if (maxPage < this.currentPage) {
+				this.currentPage = maxPage;
 			}
-
-			return parentNodeData;
-		},
-	},
-	watch: {
-		node(newNode: INodeUi, prevNode: INodeUi) {
-			if (newNode?.id === prevNode?.id) return;
-			this.init();
 		},
-		hasNodeRun() {
-			if (this.paneType === 'output') this.setDisplayMode();
+		onPageSizeChange(pageSize: number) {
+			this.pageSize = pageSize;
+
+			this.resetCurrentPageIfTooFar();
+
+			this.$telemetry.track('User changed ndv page size', {
+				node_type: this.activeNode?.type,
+				workflow_id: this.workflowsStore.workflowId,
+				push_ref: this.pushRef,
+				pane: this.paneType,
+				page_selected: this.currentPage,
+				page_size: this.pageSize,
+				items_total: this.dataCount,
+			});
 		},
-		inputDataPage: {
-			handler(data: INodeExecutionData[]) {
-				if (this.paneType && data) {
-					this.ndvStore.setNDVPanelDataIsEmpty({
-						panel: this.paneType as 'input' | 'output',
-						isEmpty: data.every((item) => isEmpty(item.json)),
-					});
+		onDisplayModeChange(displayMode: IRunDataDisplayMode) {
+			const previous = this.displayMode;
+			this.ndvStore.setPanelDisplayMode({ pane: this.paneType, mode: displayMode });
+
+			if (!this.userEnabledShowData) this.updateShowData();
+
+			const dataContainerRef = this.$refs.dataContainer as Element | undefined;
+			if (dataContainerRef) {
+				const dataDisplay = dataContainerRef.children[0];
+
+				if (dataDisplay) {
+					dataDisplay.scrollTo(0, 0);
 				}
-			},
-			immediate: true,
-			deep: true,
-		},
-		jsonData(data: IDataObject[], prevData: IDataObject[]) {
-			if (isEqual(data, prevData)) return;
-			this.refreshDataSize();
-			if (this.dataCount) {
-				this.resetCurrentPageIfTooFar();
 			}
-			this.showPinDataDiscoveryTooltip(data);
-		},
-		binaryData(newData: IBinaryKeyData[], prevData: IBinaryKeyData[]) {
-			if (newData.length && !prevData.length && this.displayMode !== 'binary') {
-				this.switchToBinary();
-			} else if (!newData.length && this.displayMode === 'binary') {
-				this.onDisplayModeChange('table');
+
+			this.closeBinaryDataDisplay();
+			void this.externalHooks.run('runData.displayModeChanged', {
+				newValue: displayMode,
+				oldValue: previous,
+			});
+			if (this.activeNode) {
+				this.$telemetry.track('User changed ndv item view', {
+					previous_view: previous,
+					new_view: displayMode,
+					node_type: this.activeNode.type,
+					workflow_id: this.workflowsStore.workflowId,
+					push_ref: this.pushRef,
+					pane: this.paneType,
+				});
 			}
 		},
-		currentOutputIndex(branchIndex: number) {
-			this.ndvStore.setNDVBranchIndex({
-				pane: this.paneType as 'input' | 'output',
-				branchIndex,
+		getRunLabel(option: number) {
+			let itemsCount = 0;
+			for (let i = 0; i <= this.maxOutputIndex; i++) {
+				itemsCount += this.getPinDataOrLiveData(this.getRawInputData(option - 1, i)).length;
+			}
+			const items = this.$locale.baseText('ndv.output.items', {
+				adjustToNumber: itemsCount,
+				interpolate: { count: itemsCount },
 			});
+			const itemsLabel = itemsCount > 0 ? ` (${items})` : '';
+			return option + this.$locale.baseText('ndv.output.of') + (this.maxRunIndex + 1) + itemsLabel;
 		},
-		search(newSearch: string) {
-			this.$emit('search', newSearch);
-		},
-	},
-	mounted() {
-		this.init();
-
-		if (!this.isPaneTypeInput) {
-			this.showPinDataDiscoveryTooltip(this.jsonData);
-		}
-		this.ndvStore.setNDVBranchIndex({
-			pane: this.paneType as 'input' | 'output',
-			branchIndex: this.currentOutputIndex,
-		});
-
-		if (this.paneType === 'output') {
-			this.setDisplayMode();
-			this.activatePane();
-		}
-
-		if (this.hasRunError && this.node) {
-			const error = this.workflowRunData?.[this.node.name]?.[this.runIndex]?.error;
-			const errorsToTrack = ['unknown error'];
+		getRawInputData(
+			runIndex: number,
+			outputIndex: number,
+			connectionType: ConnectionTypes = NodeConnectionType.Main,
+		): INodeExecutionData[] {
+			let inputData: INodeExecutionData[] = [];
 
-			if (error && errorsToTrack.some((e) => error.message?.toLowerCase().includes(e))) {
-				this.$telemetry.track(
-					`User encountered an error: "${error.message}"`,
-					{
-						node: this.node.type,
-						errorMessage: error.message,
-						nodeVersion: this.node.typeVersion,
-						n8nVersion: this.rootStore.versionCli,
-					},
-					{
-						withPostHog: true,
-					},
+			if (this.node) {
+				inputData = this.nodeHelpers.getNodeInputData(
+					this.node,
+					runIndex,
+					outputIndex,
+					this.paneType,
+					connectionType,
 				);
 			}
-		}
-	},
-	beforeUnmount() {
-		this.hidePinDataDiscoveryTooltip();
-	},
-	methods: {
-		getResolvedNodeOutputs() {
-			if (this.node && this.nodeType) {
-				const workflowNode = this.workflow.getNode(this.node.name);
 
-				if (workflowNode) {
-					const outputs = NodeHelpers.getNodeOutputs(this.workflow, workflowNode, this.nodeType);
-					return outputs;
-				}
+			if (inputData.length === 0 || !Array.isArray(inputData)) {
+				return [];
 			}
-			return [];
-		},
-		shouldHintBeDisplayed(hint: NodeHint): boolean {
-			const { location, whenToDisplay } = hint;
 
-			if (location) {
-				if (location === 'ndv' && !['input', 'output'].includes(this.paneType)) {
-					return false;
-				}
-				if (location === 'inputPane' && this.paneType !== 'input') {
-					return false;
-				}
+			return inputData;
+		},
+		getPinDataOrLiveData(inputData: INodeExecutionData[]): INodeExecutionData[] {
+			if (this.pinnedData.data.value && !this.isProductionExecutionPreview) {
+				return Array.isArray(this.pinnedData.data.value)
+					? this.pinnedData.data.value.map((value) => ({
+							json: value,
+						}))
+					: [
+							{
+								json: this.pinnedData.data.value,
+							},
+						];
+			}
+			return inputData;
+		},
+		getFilteredData(inputData: INodeExecutionData[]): INodeExecutionData[] {
+			if (!this.search || this.isSchemaView) {
+				return inputData;
+			}
 
-				if (location === 'outputPane' && this.paneType !== 'output') {
-					return false;
-				}
+			this.currentPage = 1;
+			return inputData.filter(({ json }) => searchInObject(json, this.search));
+		},
+		getDataCount(
+			runIndex: number,
+			outputIndex: number,
+			connectionType: ConnectionTypes = NodeConnectionType.Main,
+		) {
+			if (!this.node) {
+				return 0;
 			}
 
-			if (whenToDisplay === 'afterExecution' && !this.hasNodeRun) {
-				return false;
+			if (this.workflowRunData?.[this.node.name]?.[runIndex]?.hasOwnProperty('error')) {
+				return 1;
 			}
 
-			if (whenToDisplay === 'beforeExecution' && this.hasNodeRun) {
-				return false;
+			const rawInputData = this.getRawInputData(runIndex, outputIndex, connectionType);
+			const pinOrLiveData = this.getPinDataOrLiveData(rawInputData);
+			return this.getFilteredData(pinOrLiveData).length;
+		},
+		init() {
+			// Reset the selected output index every time another node gets selected
+			this.outputIndex = 0;
+			this.refreshDataSize();
+			this.closeBinaryDataDisplay();
+			let outputTypes: ConnectionTypes[] = [];
+			if (this.nodeType !== null && this.node !== null) {
+				const outputs = this.getResolvedNodeOutputs();
+				outputTypes = NodeHelpers.getConnectionTypes(outputs);
+			}
+			this.connectionType = outputTypes.length === 0 ? NodeConnectionType.Main : outputTypes[0];
+			if (this.binaryData.length > 0) {
+				this.ndvStore.setPanelDisplayMode({
+					pane: this.paneType as 'input' | 'output',
+					mode: 'binary',
+				});
+			} else if (this.displayMode === 'binary') {
+				this.ndvStore.setPanelDisplayMode({
+					pane: this.paneType as 'input' | 'output',
+					mode: 'table',
+				});
 			}
+		},
+		closeBinaryDataDisplay() {
+			this.binaryDataDisplayVisible = false;
+			this.binaryDataDisplayData = null;
+		},
+		clearExecutionData() {
+			this.workflowsStore.setWorkflowExecutionData(null);
+			this.nodeHelpers.updateNodesExecutionIssues();
+		},
+		isViewable(index: number, key: string | number): boolean {
+			const { fileType } = this.binaryData[index][key];
+			return (
+				!!fileType && ['image', 'audio', 'video', 'text', 'json', 'pdf', 'html'].includes(fileType)
+			);
+		},
+		isDownloadable(index: number, key: string | number): boolean {
+			const { mimeType, fileName } = this.binaryData[index][key];
+			return !!(mimeType && fileName);
+		},
+		async downloadBinaryData(index: number, key: string | number) {
+			const { id, data, fileName, fileExtension, mimeType } = this.binaryData[index][key];
 
-			return true;
+			if (id) {
+				const url = this.workflowsStore.getBinaryUrl(id, 'download', fileName ?? '', mimeType);
+				saveAs(url, [fileName, fileExtension].join('.'));
+				return;
+			} else {
+				const bufferString = 'data:' + mimeType + ';base64,' + data;
+				const blob = await fetch(bufferString).then(async (d) => await d.blob());
+				saveAs(blob, fileName);
+			}
 		},
-		getNodeHints(): NodeHint[] {
-			if (this.node && this.nodeType) {
-				const workflowNode = this.workflow.getNode(this.node.name);
+		async downloadJsonData() {
+			const fileName = (this.node?.name ?? '').replace(/[^\w\d]/g, '_');
+			const blob = new Blob([JSON.stringify(this.rawInputData, null, 2)], {
+				type: 'application/json',
+			});
 
-				if (workflowNode) {
-					const executionHints = this.executionHints;
-					const nodeHints = NodeHelpers.getNodeHints(this.workflow, workflowNode, this.nodeType, {
-						runExecutionData: this.workflowExecution?.data ?? null,
-						runIndex: this.runIndex,
-						connectionInputData: this.parentNodeOutputData,
-					});
+			saveAs(blob, `${fileName}.json`);
+		},
+		displayBinaryData(index: number, key: string | number) {
+			const { data, mimeType } = this.binaryData[index][key];
+			this.binaryDataDisplayVisible = true;
 
-					return executionHints.concat(nodeHints).filter(this.shouldHintBeDisplayed);
-				}
+			this.binaryDataDisplayData = {
+				node: this.node?.name,
+				runIndex: this.runIndex,
+				outputIndex: this.currentOutputIndex,
+				index,
+				key,
+				data,
+				mimeType,
+			};
+		},
+		getOutputName(outputIndex: number) {
+			if (this.node === null) {
+				return outputIndex + 1;
 			}
-			return [];
-		},
-		onItemHover(itemIndex: number | null) {
-			if (itemIndex === null) {
-				this.$emit('itemHover', null);
 
-				return;
+			const nodeType = this.nodeType;
+			const outputs = this.getResolvedNodeOutputs();
+			const outputConfiguration = outputs?.[outputIndex] as INodeOutputConfiguration;
+
+			if (outputConfiguration && isObject(outputConfiguration)) {
+				return outputConfiguration?.displayName;
 			}
-			this.$emit('itemHover', {
-				outputIndex: this.currentOutputIndex,
-				itemIndex,
-			});
+			if (!nodeType?.outputNames || nodeType.outputNames.length <= outputIndex) {
+				return outputIndex + 1;
+			}
+
+			return nodeType.outputNames[outputIndex];
 		},
-		onClickDataPinningDocsLink() {
-			this.$telemetry.track('User clicked ndv link', {
-				workflow_id: this.workflowsStore.workflowId,
-				push_ref: this.pushRef,
-				node_type: this.activeNode?.type,
-				pane: 'output',
-				type: 'data-pinning-docs',
-			});
+		refreshDataSize() {
+			// Hide by default the data from being displayed
+			this.showData = false;
+			const jsonItems = this.inputDataPage.map((item) => item.json);
+			const byteSize = new Blob([JSON.stringify(jsonItems)]).size;
+			this.dataSize = byteSize;
+			this.updateShowData();
 		},
-		showPinDataDiscoveryTooltip(value: IDataObject[]) {
-			if (!this.isTriggerNode) {
-				return;
-			}
+		updateShowData() {
+			// Display data if it is reasonably small (< 1MB)
+			this.showData =
+				(this.isSchemaView && this.dataSize < this.MAX_DISPLAY_DATA_SIZE_SCHEMA_VIEW) ||
+				this.dataSize < this.MAX_DISPLAY_DATA_SIZE;
+		},
+		onRunIndexChange(run: number) {
+			this.$emit('runChange', run);
+		},
+		enableNode() {
+			if (this.node) {
+				const updateInformation = {
+					name: this.node.name,
+					properties: {
+						disabled: !this.node.disabled,
+					} as IDataObject,
+				} as INodeUpdatePropertiesInformation;
 
-			const pinDataDiscoveryFlag = useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG).value;
+				this.workflowsStore.updateNodeProperties(updateInformation);
+			}
+		},
+		setDisplayMode() {
+			if (!this.activeNode) return;
 
-			if (value && value.length > 0 && !this.isReadOnlyRoute && !pinDataDiscoveryFlag) {
-				this.pinDataDiscoveryComplete();
+			const shouldDisplayHtml =
+				this.activeNode.type === HTML_NODE_TYPE &&
+				this.activeNode.parameters.operation === 'generateHtmlTemplate';
 
-				setTimeout(() => {
-					this.isControlledPinDataTooltip = true;
-					this.pinDataDiscoveryTooltipVisible = true;
-					dataPinningEventBus.emit('data-pinning-discovery', { isTooltipVisible: true });
-				}, 500); // Wait for NDV to open
+			if (shouldDisplayHtml) {
+				this.ndvStore.setPanelDisplayMode({
+					pane: 'output',
+					mode: 'html',
+				});
 			}
 		},
-		hidePinDataDiscoveryTooltip() {
-			if (this.pinDataDiscoveryTooltipVisible) {
-				this.isControlledPinDataTooltip = false;
-				this.pinDataDiscoveryTooltipVisible = false;
-				dataPinningEventBus.emit('data-pinning-discovery', { isTooltipVisible: false });
-			}
+		activatePane() {
+			this.$emit('activatePane');
 		},
-		pinDataDiscoveryComplete() {
-			useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG).value = 'true';
-			useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG).value = 'true';
+		onSearchClear() {
+			this.search = '';
+			document.dispatchEvent(new KeyboardEvent('keyup', { key: '/' }));
 		},
-		enterEditMode({ origin }: EnterEditModeArgs) {
-			const inputData = this.pinnedData.data.value
-				? clearJsonKey(this.pinnedData.data.value)
-				: executionDataToJson(this.rawInputData);
+	},
+});
+</script>
 
-			const inputDataLength = Array.isArray(inputData)
-				? inputData.length
-				: Object.keys(inputData ?? {}).length;
+<template>
+	<div :class="['run-data', $style.container]" @mouseover="activatePane">
+		<n8n-callout
+			v-if="
+				canPinData && pinnedData.hasData.value && !editMode.enabled && !isProductionExecutionPreview
+			"
+			theme="secondary"
+			icon="thumbtack"
+			:class="$style.pinnedDataCallout"
+		>
+			{{ $locale.baseText('runData.pindata.thisDataIsPinned') }}
+			<span v-if="!isReadOnlyRoute && !readOnlyEnv" class="ml-4xs">
+				<n8n-link
+					theme="secondary"
+					size="small"
+					underline
+					bold
+					@click.stop="onTogglePinData({ source: 'banner-link' })"
+				>
+					{{ $locale.baseText('runData.pindata.unpin') }}
+				</n8n-link>
+			</span>
+			<template #trailingContent>
+				<n8n-link
+					:to="dataPinningDocsUrl"
+					size="small"
+					theme="secondary"
+					bold
+					underline
+					@click="onClickDataPinningDocsLink"
+				>
+					{{ $locale.baseText('runData.pindata.learnMore') }}
+				</n8n-link>
+			</template>
+		</n8n-callout>
 
-			const data = inputDataLength > 0 ? inputData : TEST_PIN_DATA;
+		<BinaryDataDisplay
+			v-if="binaryDataDisplayData"
+			:window-visible="binaryDataDisplayVisible"
+			:display-data="binaryDataDisplayData"
+			@close="closeBinaryDataDisplay"
+		/>
 
-			this.ndvStore.setOutputPanelEditModeEnabled(true);
-			this.ndvStore.setOutputPanelEditModeValue(JSON.stringify(data, null, 2));
+		<div :class="$style.header">
+			<slot name="header"></slot>
 
-			this.$telemetry.track('User opened ndv edit state', {
-				node_type: this.activeNode?.type,
-				click_type: origin === 'editIconButton' ? 'button' : 'link',
-				push_ref: this.pushRef,
-				run_index: this.runIndex,
-				is_output_present: this.hasNodeRun || this.pinnedData.hasData.value,
-				view: !this.hasNodeRun && !this.pinnedData.hasData.value ? 'undefined' : this.displayMode,
-				is_data_pinned: this.pinnedData.hasData.value,
-			});
-		},
-		onClickCancelEdit() {
-			this.ndvStore.setOutputPanelEditModeEnabled(false);
-			this.ndvStore.setOutputPanelEditModeValue('');
-			this.onExitEditMode({ type: 'cancel' });
-		},
-		onClickSaveEdit() {
-			if (!this.node) {
-				return;
-			}
+			<div
+				v-show="!hasRunError"
+				:class="$style.displayModes"
+				data-test-id="run-data-pane-header"
+				@click.stop
+			>
+				<Suspense>
+					<LazyRunDataSearch
+						v-if="showIOSearch"
+						v-model="search"
+						:class="$style.search"
+						:pane-type="paneType"
+						:display-mode="displayMode"
+						:is-area-active="isPaneActive"
+						@focus="activatePane"
+					/>
+				</Suspense>
 
-			const { value } = this.editMode;
+				<n8n-radio-buttons
+					v-show="
+						hasNodeRun && (inputData.length || binaryData.length || search) && !editMode.enabled
+					"
+					:model-value="displayMode"
+					:options="displayModes"
+					data-test-id="ndv-run-data-display-mode"
+					@update:model-value="onDisplayModeChange"
+				/>
 
-			this.clearAllStickyNotifications();
+				<n8n-icon-button
+					v-if="canPinData && !isReadOnlyRoute && !readOnlyEnv"
+					v-show="!editMode.enabled"
+					:title="$locale.baseText('runData.editOutput')"
+					:circle="false"
+					:disabled="node?.disabled"
+					icon="pencil-alt"
+					type="tertiary"
+					data-test-id="ndv-edit-pinned-data"
+					@click="enterEditMode({ origin: 'editIconButton' })"
+				/>
 
-			try {
-				const clearedValue = clearJsonKey(value) as INodeExecutionData[];
-				try {
-					this.pinnedData.setData(clearedValue, 'save-edit');
-				} catch (error) {
-					// setData function already shows toasts on error, so just return here
-					return;
-				}
-			} catch (error) {
-				this.showError(error, this.$locale.baseText('ndv.pinData.error.syntaxError.title'));
-				return;
-			}
+				<RunDataPinButton
+					v-if="(canPinData || !!binaryData?.length) && rawInputData.length && !editMode.enabled"
+					:disabled="
+						(!rawInputData.length && !pinnedData.hasData.value) ||
+						isReadOnlyRoute ||
+						readOnlyEnv ||
+						!!binaryData?.length
+					"
+					:tooltip-contents-visibility="{
+						binaryDataTooltipContent: !!binaryData?.length,
+						pinDataDiscoveryTooltipContent:
+							isControlledPinDataTooltip && pinDataDiscoveryTooltipVisible,
+					}"
+					:data-pinning-docs-url="dataPinningDocsUrl"
+					:pinned-data="pinnedData"
+					@toggle-pin-data="onTogglePinData({ source: 'pin-icon-click' })"
+				/>
+
+				<div v-show="editMode.enabled" :class="$style.editModeActions">
+					<n8n-button
+						type="tertiary"
+						:label="$locale.baseText('runData.editor.cancel')"
+						@click="onClickCancelEdit"
+					/>
+					<n8n-button
+						class="ml-2xs"
+						type="primary"
+						:label="$locale.baseText('runData.editor.save')"
+						@click="onClickSaveEdit"
+					/>
+				</div>
+			</div>
+		</div>
+
+		<div v-if="inputSelectLocation === 'header'" :class="$style.inputSelect">
+			<slot name="input-select"></slot>
+		</div>
+
+		<div
+			v-if="maxRunIndex > 0 && !isInputSchemaView"
+			v-show="!editMode.enabled"
+			:class="$style.runSelector"
+		>
+			<slot v-if="inputSelectLocation === 'runs'" name="input-select"></slot>
 
-			this.ndvStore.setOutputPanelEditModeEnabled(false);
+			<n8n-select
+				:model-value="runIndex"
+				:class="$style.runSelectorInner"
+				size="small"
+				teleported
+				data-test-id="run-selector"
+				@update:model-value="onRunIndexChange"
+				@click.stop
+			>
+				<template #prepend>{{ $locale.baseText('ndv.output.run') }}</template>
+				<n8n-option
+					v-for="option in maxRunIndex + 1"
+					:key="option"
+					:label="getRunLabel(option)"
+					:value="option - 1"
+				></n8n-option>
+			</n8n-select>
 
-			this.onExitEditMode({ type: 'save' });
-		},
-		onExitEditMode({ type }: { type: 'save' | 'cancel' }) {
-			this.$telemetry.track('User closed ndv edit state', {
-				node_type: this.activeNode?.type,
-				push_ref: this.pushRef,
-				run_index: this.runIndex,
-				view: this.displayMode,
-				type,
-			});
-		},
-		async onTogglePinData({ source }: { source: PinDataSource | UnpinDataSource }) {
-			if (!this.node) {
-				return;
-			}
+			<n8n-tooltip v-if="canLinkRuns" placement="right">
+				<template #content>
+					{{ $locale.baseText(linkedRuns ? 'runData.unlinking.hint' : 'runData.linking.hint') }}
+				</template>
+				<n8n-icon-button
+					:icon="linkedRuns ? 'unlink' : 'link'"
+					class="linkRun"
+					text
+					type="tertiary"
+					size="small"
+					data-test-id="link-run"
+					@click="toggleLinkRuns"
+				/>
+			</n8n-tooltip>
 
-			if (source === 'pin-icon-click') {
-				const telemetryPayload = {
-					node_type: this.activeNode?.type,
-					push_ref: this.pushRef,
-					run_index: this.runIndex,
-					view: !this.hasNodeRun && !this.pinnedData.hasData.value ? 'none' : this.displayMode,
-				};
+			<slot name="run-info"></slot>
+		</div>
 
-				void this.externalHooks.run('runData.onTogglePinData', telemetryPayload);
-				this.$telemetry.track('User clicked pin data icon', telemetryPayload);
-			}
+		<slot v-if="!isInputSchemaView" name="before-data" />
 
-			this.nodeHelpers.updateNodeParameterIssues(this.node);
+		<n8n-callout
+			v-for="hint in getNodeHints()"
+			:key="hint.message"
+			:class="$style.hintCallout"
+			:theme="hint.type || 'info'"
+		>
+			<n8n-text size="small" v-html="hint.message"></n8n-text>
+		</n8n-callout>
 
-			if (this.pinnedData.hasData.value) {
-				this.pinnedData.unsetData(source);
-				return;
-			}
+		<div
+			v-if="maxOutputIndex > 0 && branches.length > 1 && !isInputSchemaView"
+			:class="$style.outputs"
+			data-test-id="branches"
+		>
+			<slot v-if="inputSelectLocation === 'outputs'" name="input-select"></slot>
 
-			try {
-				this.pinnedData.setData(this.rawInputData, 'pin-icon-click');
-			} catch (error) {
-				console.error(error);
-				return;
-			}
+			<div :class="$style.tabs">
+				<n8n-tabs
+					:model-value="currentOutputIndex"
+					:options="branches"
+					@update:model-value="onBranchChange"
+				/>
+			</div>
+		</div>
 
-			if (this.maxRunIndex > 0) {
-				this.showToast({
-					title: this.$locale.baseText('ndv.pinData.pin.multipleRuns.title', {
-						interpolate: {
-							index: `${this.runIndex}`,
-						},
-					}),
-					message: this.$locale.baseText('ndv.pinData.pin.multipleRuns.description'),
-					type: 'success',
-					duration: 2000,
-				});
-			}
+		<div
+			v-else-if="
+				!hasRunError &&
+				hasNodeRun &&
+				((dataCount > 0 && maxRunIndex === 0) || search) &&
+				!isArtificialRecoveredEventItem &&
+				!isInputSchemaView
+			"
+			v-show="!editMode.enabled && !hasRunError"
+			:class="[$style.itemsCount, { [$style.muted]: paneType === 'input' && maxRunIndex === 0 }]"
+			data-test-id="ndv-items-count"
+		>
+			<slot v-if="inputSelectLocation === 'items'" name="input-select"></slot>
 
-			this.hidePinDataDiscoveryTooltip();
-			this.pinDataDiscoveryComplete();
-		},
-		switchToBinary() {
-			this.onDisplayModeChange('binary');
-		},
-		onBranchChange(value: number) {
-			this.outputIndex = value;
+			<n8n-text v-if="search" :class="$style.itemsText">
+				{{
+					$locale.baseText('ndv.search.items', {
+						adjustToNumber: unfilteredDataCount,
+						interpolate: { matched: dataCount, total: unfilteredDataCount },
+					})
+				}}
+			</n8n-text>
+			<n8n-text v-else :class="$style.itemsText">
+				{{
+					$locale.baseText('ndv.output.items', {
+						adjustToNumber: dataCount,
+						interpolate: { count: dataCount },
+					})
+				}}
+			</n8n-text>
+		</div>
 
-			this.$telemetry.track('User changed ndv branch', {
-				push_ref: this.pushRef,
-				branch_index: value,
-				node_type: this.activeNode?.type,
-				node_type_input_selection: this.nodeType ? this.nodeType.name : '',
-				pane: this.paneType,
-			});
-		},
-		showTooMuchData() {
-			this.showData = true;
-			this.userEnabledShowData = true;
-			this.$telemetry.track('User clicked ndv button', {
-				node_type: this.activeNode?.type,
-				workflow_id: this.workflowsStore.workflowId,
-				push_ref: this.pushRef,
-				pane: this.paneType,
-				type: 'showTooMuchData',
-			});
-		},
-		toggleLinkRuns() {
-			this.linkedRuns ? this.unlinkRun() : this.linkRun();
-		},
-		linkRun() {
-			this.$emit('linkRun');
-		},
-		unlinkRun() {
-			this.$emit('unlinkRun');
-		},
-		onCurrentPageChange(value: number) {
-			this.currentPage = value;
-			this.$telemetry.track('User changed ndv page', {
-				node_type: this.activeNode?.type,
-				workflow_id: this.workflowsStore.workflowId,
-				push_ref: this.pushRef,
-				pane: this.paneType,
-				page_selected: this.currentPage,
-				page_size: this.pageSize,
-				items_total: this.dataCount,
-			});
-		},
-		resetCurrentPageIfTooFar() {
-			const maxPage = Math.ceil(this.dataCount / this.pageSize);
-			if (maxPage < this.currentPage) {
-				this.currentPage = maxPage;
-			}
-		},
-		onPageSizeChange(pageSize: number) {
-			this.pageSize = pageSize;
+		<div ref="dataContainer" :class="$style.dataContainer" data-test-id="ndv-data-container">
+			<div v-if="isExecuting" :class="$style.center" data-test-id="ndv-executing">
+				<div :class="$style.spinner"><n8n-spinner type="ring" /></div>
+				<n8n-text>{{ executingMessage }}</n8n-text>
+			</div>
 
-			this.resetCurrentPageIfTooFar();
+			<div v-else-if="editMode.enabled" :class="$style.editMode">
+				<div :class="[$style.editModeBody, 'ignore-key-press']">
+					<JsonEditor
+						:model-value="editMode.value"
+						:fill-parent="true"
+						@update:model-value="ndvStore.setOutputPanelEditModeValue($event)"
+					/>
+				</div>
+				<div :class="$style.editModeFooter">
+					<n8n-info-tip :bold="false" :class="$style.editModeFooterInfotip">
+						{{ $locale.baseText('runData.editor.copyDataInfo') }}
+						<n8n-link :to="dataEditingDocsUrl" size="small">
+							{{ $locale.baseText('generic.learnMore') }}
+						</n8n-link>
+					</n8n-info-tip>
+				</div>
+			</div>
 
-			this.$telemetry.track('User changed ndv page size', {
-				node_type: this.activeNode?.type,
-				workflow_id: this.workflowsStore.workflowId,
-				push_ref: this.pushRef,
-				pane: this.paneType,
-				page_selected: this.currentPage,
-				page_size: this.pageSize,
-				items_total: this.dataCount,
-			});
-		},
-		onDisplayModeChange(displayMode: IRunDataDisplayMode) {
-			const previous = this.displayMode;
-			this.ndvStore.setPanelDisplayMode({ pane: this.paneType, mode: displayMode });
+			<div
+				v-else-if="paneType === 'output' && hasSubworkflowExecutionError"
+				:class="$style.stretchVertically"
+			>
+				<NodeErrorView :error="subworkflowExecutionError" :class="$style.errorDisplay" />
+			</div>
 
-			if (!this.userEnabledShowData) this.updateShowData();
+			<div v-else-if="!hasNodeRun && !(isInputSchemaView && node?.disabled)" :class="$style.center">
+				<slot name="node-not-run"></slot>
+			</div>
 
-			const dataContainerRef = this.$refs.dataContainer as Element | undefined;
-			if (dataContainerRef) {
-				const dataDisplay = dataContainerRef.children[0];
+			<div
+				v-else-if="paneType === 'input' && !isInputSchemaView && node?.disabled"
+				:class="$style.center"
+			>
+				<n8n-text>
+					{{ $locale.baseText('ndv.input.disabled', { interpolate: { nodeName: node.name } }) }}
+					<n8n-link @click="enableNode">
+						{{ $locale.baseText('ndv.input.disabled.cta') }}
+					</n8n-link>
+				</n8n-text>
+			</div>
 
-				if (dataDisplay) {
-					dataDisplay.scrollTo(0, 0);
-				}
-			}
+			<div v-else-if="hasNodeRun && isArtificialRecoveredEventItem" :class="$style.center">
+				<slot name="recovered-artificial-output-data"></slot>
+			</div>
 
-			this.closeBinaryDataDisplay();
-			void this.externalHooks.run('runData.displayModeChanged', {
-				newValue: displayMode,
-				oldValue: previous,
-			});
-			if (this.activeNode) {
-				this.$telemetry.track('User changed ndv item view', {
-					previous_view: previous,
-					new_view: displayMode,
-					node_type: this.activeNode.type,
-					workflow_id: this.workflowsStore.workflowId,
-					push_ref: this.pushRef,
-					pane: this.paneType,
-				});
-			}
-		},
-		getRunLabel(option: number) {
-			let itemsCount = 0;
-			for (let i = 0; i <= this.maxOutputIndex; i++) {
-				itemsCount += this.getPinDataOrLiveData(this.getRawInputData(option - 1, i)).length;
-			}
-			const items = this.$locale.baseText('ndv.output.items', {
-				adjustToNumber: itemsCount,
-				interpolate: { count: itemsCount },
-			});
-			const itemsLabel = itemsCount > 0 ? ` (${items})` : '';
-			return option + this.$locale.baseText('ndv.output.of') + (this.maxRunIndex + 1) + itemsLabel;
-		},
-		getRawInputData(
-			runIndex: number,
-			outputIndex: number,
-			connectionType: ConnectionTypes = NodeConnectionType.Main,
-		): INodeExecutionData[] {
-			let inputData: INodeExecutionData[] = [];
+			<div v-else-if="hasNodeRun && hasRunError" :class="$style.stretchVertically">
+				<n8n-text v-if="isPaneTypeInput" :class="$style.center" size="large" tag="p" bold>
+					{{
+						$locale.baseText('nodeErrorView.inputPanel.previousNodeError.title', {
+							interpolate: { nodeName: node?.name ?? '' },
+						})
+					}}
+				</n8n-text>
+				<div v-else-if="$slots['content']">
+					<NodeErrorView
+						v-if="workflowRunErrorAsNodeError"
+						:error="workflowRunErrorAsNodeError"
+						:class="$style.inlineError"
+						compact
+					/>
+					<slot name="content"></slot>
+				</div>
+				<NodeErrorView
+					v-else-if="workflowRunErrorAsNodeError"
+					:error="workflowRunErrorAsNodeError"
+					:class="$style.dataDisplay"
+				/>
+			</div>
 
-			if (this.node) {
-				inputData = this.nodeHelpers.getNodeInputData(
-					this.node,
-					runIndex,
-					outputIndex,
-					this.paneType,
-					connectionType,
-				);
-			}
+			<div
+				v-else-if="
+					hasNodeRun && (!unfilteredDataCount || (search && !dataCount)) && branches.length > 1
+				"
+				:class="$style.center"
+			>
+				<div v-if="search">
+					<n8n-text tag="h3" size="large">{{
+						$locale.baseText('ndv.search.noMatch.title')
+					}}</n8n-text>
+					<n8n-text>
+						<i18n-t keypath="ndv.search.noMatch.description" tag="span">
+							<template #link>
+								<a href="#" @click="onSearchClear">
+									{{ $locale.baseText('ndv.search.noMatch.description.link') }}
+								</a>
+							</template>
+						</i18n-t>
+					</n8n-text>
+				</div>
+				<n8n-text v-else>
+					{{ noDataInBranchMessage }}
+				</n8n-text>
+			</div>
 
-			if (inputData.length === 0 || !Array.isArray(inputData)) {
-				return [];
-			}
+			<div v-else-if="hasNodeRun && !inputData.length && !search" :class="$style.center">
+				<slot name="no-output-data">xxx</slot>
+			</div>
 
-			return inputData;
-		},
-		getPinDataOrLiveData(inputData: INodeExecutionData[]): INodeExecutionData[] {
-			if (this.pinnedData.data.value && !this.isProductionExecutionPreview) {
-				return Array.isArray(this.pinnedData.data.value)
-					? this.pinnedData.data.value.map((value) => ({
-							json: value,
-						}))
-					: [
-							{
-								json: this.pinnedData.data.value,
-							},
-						];
-			}
-			return inputData;
-		},
-		getFilteredData(inputData: INodeExecutionData[]): INodeExecutionData[] {
-			if (!this.search || this.isSchemaView) {
-				return inputData;
-			}
+			<div v-else-if="hasNodeRun && !showData" :class="$style.center">
+				<n8n-text :bold="true" color="text-dark" size="large">{{ tooMuchDataTitle }}</n8n-text>
+				<n8n-text align="center" tag="div"
+					><span
+						v-html="
+							$locale.baseText('ndv.output.tooMuchData.message', {
+								interpolate: { size: dataSizeInMB },
+							})
+						"
+					></span
+				></n8n-text>
 
-			this.currentPage = 1;
-			return inputData.filter(({ json }) => searchInObject(json, this.search));
-		},
-		getDataCount(
-			runIndex: number,
-			outputIndex: number,
-			connectionType: ConnectionTypes = NodeConnectionType.Main,
-		) {
-			if (!this.node) {
-				return 0;
-			}
+				<n8n-button
+					outline
+					:label="$locale.baseText('ndv.output.tooMuchData.showDataAnyway')"
+					@click="showTooMuchData"
+				/>
 
-			if (this.workflowRunData?.[this.node.name]?.[runIndex]?.hasOwnProperty('error')) {
-				return 1;
-			}
+				<n8n-button
+					size="small"
+					:label="$locale.baseText('runData.downloadBinaryData')"
+					@click="downloadJsonData()"
+				/>
+			</div>
 
-			const rawInputData = this.getRawInputData(runIndex, outputIndex, connectionType);
-			const pinOrLiveData = this.getPinDataOrLiveData(rawInputData);
-			return this.getFilteredData(pinOrLiveData).length;
-		},
-		init() {
-			// Reset the selected output index every time another node gets selected
-			this.outputIndex = 0;
-			this.refreshDataSize();
-			this.closeBinaryDataDisplay();
-			let outputTypes: ConnectionTypes[] = [];
-			if (this.nodeType !== null && this.node !== null) {
-				const outputs = this.getResolvedNodeOutputs();
-				outputTypes = NodeHelpers.getConnectionTypes(outputs);
-			}
-			this.connectionType = outputTypes.length === 0 ? NodeConnectionType.Main : outputTypes[0];
-			if (this.binaryData.length > 0) {
-				this.ndvStore.setPanelDisplayMode({
-					pane: this.paneType as 'input' | 'output',
-					mode: 'binary',
-				});
-			} else if (this.displayMode === 'binary') {
-				this.ndvStore.setPanelDisplayMode({
-					pane: this.paneType as 'input' | 'output',
-					mode: 'table',
-				});
-			}
-		},
-		closeBinaryDataDisplay() {
-			this.binaryDataDisplayVisible = false;
-			this.binaryDataDisplayData = null;
-		},
-		clearExecutionData() {
-			this.workflowsStore.setWorkflowExecutionData(null);
-			this.nodeHelpers.updateNodesExecutionIssues();
-		},
-		isViewable(index: number, key: string | number): boolean {
-			const { fileType } = this.binaryData[index][key];
-			return (
-				!!fileType && ['image', 'audio', 'video', 'text', 'json', 'pdf', 'html'].includes(fileType)
-			);
-		},
-		isDownloadable(index: number, key: string | number): boolean {
-			const { mimeType, fileName } = this.binaryData[index][key];
-			return !!(mimeType && fileName);
-		},
-		async downloadBinaryData(index: number, key: string | number) {
-			const { id, data, fileName, fileExtension, mimeType } = this.binaryData[index][key];
+			<!-- V-else slot named content which only renders if $slots.content is passed and hasNodeRun -->
+			<slot v-else-if="hasNodeRun && $slots['content']" name="content"></slot>
 
-			if (id) {
-				const url = this.workflowsStore.getBinaryUrl(id, 'download', fileName ?? '', mimeType);
-				saveAs(url, [fileName, fileExtension].join('.'));
-				return;
-			} else {
-				const bufferString = 'data:' + mimeType + ';base64,' + data;
-				const blob = await fetch(bufferString).then(async (d) => await d.blob());
-				saveAs(blob, fileName);
-			}
-		},
-		async downloadJsonData() {
-			const fileName = (this.node?.name ?? '').replace(/[^\w\d]/g, '_');
-			const blob = new Blob([JSON.stringify(this.rawInputData, null, 2)], {
-				type: 'application/json',
-			});
+			<div
+				v-else-if="
+					hasNodeRun &&
+					displayMode === 'table' &&
+					binaryData.length > 0 &&
+					inputData.length === 1 &&
+					Object.keys(jsonData[0] || {}).length === 0
+				"
+				:class="$style.center"
+			>
+				<n8n-text>
+					{{ $locale.baseText('runData.switchToBinary.info') }}
+					<a @click="switchToBinary">
+						{{ $locale.baseText('runData.switchToBinary.binary') }}
+					</a>
+				</n8n-text>
+			</div>
+
+			<div v-else-if="showIoSearchNoMatchContent" :class="$style.center">
+				<n8n-text tag="h3" size="large">{{
+					$locale.baseText('ndv.search.noMatch.title')
+				}}</n8n-text>
+				<n8n-text>
+					<i18n-t keypath="ndv.search.noMatch.description" tag="span">
+						<template #link>
+							<a href="#" @click="onSearchClear">
+								{{ $locale.baseText('ndv.search.noMatch.description.link') }}
+							</a>
+						</template>
+					</i18n-t>
+				</n8n-text>
+			</div>
 
-			saveAs(blob, `${fileName}.json`);
-		},
-		displayBinaryData(index: number, key: string | number) {
-			const { data, mimeType } = this.binaryData[index][key];
-			this.binaryDataDisplayVisible = true;
+			<Suspense v-else-if="hasNodeRun && displayMode === 'table' && node">
+				<LazyRunDataTable
+					:node="node"
+					:input-data="inputDataPage"
+					:mapping-enabled="mappingEnabled"
+					:distance-from-active="distanceFromActive"
+					:run-index="runIndex"
+					:page-offset="currentPageOffset"
+					:total-runs="maxRunIndex"
+					:has-default-hover-state="paneType === 'input' && !search"
+					:search="search"
+					@mounted="$emit('tableMounted', $event)"
+					@active-row-changed="onItemHover"
+					@display-mode-change="onDisplayModeChange"
+				/>
+			</Suspense>
 
-			this.binaryDataDisplayData = {
-				node: this.node?.name,
-				runIndex: this.runIndex,
-				outputIndex: this.currentOutputIndex,
-				index,
-				key,
-				data,
-				mimeType,
-			};
-		},
-		getOutputName(outputIndex: number) {
-			if (this.node === null) {
-				return outputIndex + 1;
-			}
+			<Suspense v-else-if="hasNodeRun && displayMode === 'json' && node">
+				<LazyRunDataJson
+					:pane-type="paneType"
+					:edit-mode="editMode"
+					:push-ref="pushRef"
+					:node="node"
+					:input-data="inputDataPage"
+					:mapping-enabled="mappingEnabled"
+					:distance-from-active="distanceFromActive"
+					:run-index="runIndex"
+					:total-runs="maxRunIndex"
+					:search="search"
+				/>
+			</Suspense>
 
-			const nodeType = this.nodeType;
-			const outputs = this.getResolvedNodeOutputs();
-			const outputConfiguration = outputs?.[outputIndex] as INodeOutputConfiguration;
+			<Suspense v-else-if="hasNodeRun && isPaneTypeOutput && displayMode === 'html'">
+				<LazyRunDataHtml :input-html="inputHtml" />
+			</Suspense>
 
-			if (outputConfiguration && isObject(outputConfiguration)) {
-				return outputConfiguration?.displayName;
-			}
-			if (!nodeType?.outputNames || nodeType.outputNames.length <= outputIndex) {
-				return outputIndex + 1;
-			}
+			<Suspense v-else-if="hasNodeRun && isSchemaView">
+				<LazyRunDataSchema
+					:nodes="nodes"
+					:mapping-enabled="mappingEnabled"
+					:node="node"
+					:data="jsonData"
+					:pane-type="paneType"
+					:connection-type="connectionType"
+					:run-index="runIndex"
+					:output-index="currentOutputIndex"
+					:total-runs="maxRunIndex"
+					:search="search"
+					:class="$style.schema"
+					@clear:search="onSearchClear"
+				/>
+			</Suspense>
 
-			return nodeType.outputNames[outputIndex];
-		},
-		refreshDataSize() {
-			// Hide by default the data from being displayed
-			this.showData = false;
-			const jsonItems = this.inputDataPage.map((item) => item.json);
-			const byteSize = new Blob([JSON.stringify(jsonItems)]).size;
-			this.dataSize = byteSize;
-			this.updateShowData();
-		},
-		updateShowData() {
-			// Display data if it is reasonably small (< 1MB)
-			this.showData =
-				(this.isSchemaView && this.dataSize < this.MAX_DISPLAY_DATA_SIZE_SCHEMA_VIEW) ||
-				this.dataSize < this.MAX_DISPLAY_DATA_SIZE;
-		},
-		onRunIndexChange(run: number) {
-			this.$emit('runChange', run);
-		},
-		enableNode() {
-			if (this.node) {
-				const updateInformation = {
-					name: this.node.name,
-					properties: {
-						disabled: !this.node.disabled,
-					} as IDataObject,
-				} as INodeUpdatePropertiesInformation;
+			<div v-else-if="displayMode === 'binary' && binaryData.length === 0" :class="$style.center">
+				<n8n-text align="center" tag="div">{{
+					$locale.baseText('runData.noBinaryDataFound')
+				}}</n8n-text>
+			</div>
 
-				this.workflowsStore.updateNodeProperties(updateInformation);
-			}
-		},
-		setDisplayMode() {
-			if (!this.activeNode) return;
+			<div v-else-if="displayMode === 'binary'" :class="$style.dataDisplay">
+				<div v-for="(binaryDataEntry, index) in binaryData" :key="index">
+					<div v-if="binaryData.length > 1" :class="$style.binaryIndex">
+						<div>
+							{{ index + 1 }}
+						</div>
+					</div>
 
-			const shouldDisplayHtml =
-				this.activeNode.type === HTML_NODE_TYPE &&
-				this.activeNode.parameters.operation === 'generateHtmlTemplate';
+					<div :class="$style.binaryRow">
+						<div
+							v-for="(binaryData, key) in binaryDataEntry"
+							:key="index + '_' + key"
+							:class="$style.binaryCell"
+						>
+							<div :data-test-id="'ndv-binary-data_' + index">
+								<div :class="$style.binaryHeader">
+									{{ key }}
+								</div>
+								<div v-if="binaryData.fileName">
+									<div>
+										<n8n-text size="small" :bold="true"
+											>{{ $locale.baseText('runData.fileName') }}:
+										</n8n-text>
+									</div>
+									<div :class="$style.binaryValue">{{ binaryData.fileName }}</div>
+								</div>
+								<div v-if="binaryData.directory">
+									<div>
+										<n8n-text size="small" :bold="true"
+											>{{ $locale.baseText('runData.directory') }}:
+										</n8n-text>
+									</div>
+									<div :class="$style.binaryValue">{{ binaryData.directory }}</div>
+								</div>
+								<div v-if="binaryData.fileExtension">
+									<div>
+										<n8n-text size="small" :bold="true"
+											>{{ $locale.baseText('runData.fileExtension') }}:</n8n-text
+										>
+									</div>
+									<div :class="$style.binaryValue">{{ binaryData.fileExtension }}</div>
+								</div>
+								<div v-if="binaryData.mimeType">
+									<div>
+										<n8n-text size="small" :bold="true"
+											>{{ $locale.baseText('runData.mimeType') }}:
+										</n8n-text>
+									</div>
+									<div :class="$style.binaryValue">{{ binaryData.mimeType }}</div>
+								</div>
+								<div v-if="binaryData.fileSize">
+									<div>
+										<n8n-text size="small" :bold="true"
+											>{{ $locale.baseText('runData.fileSize') }}:
+										</n8n-text>
+									</div>
+									<div :class="$style.binaryValue">{{ binaryData.fileSize }}</div>
+								</div>
 
-			if (shouldDisplayHtml) {
-				this.ndvStore.setPanelDisplayMode({
-					pane: 'output',
-					mode: 'html',
-				});
-			}
-		},
-		activatePane() {
-			this.$emit('activatePane');
-		},
-		onSearchClear() {
-			this.search = '';
-			document.dispatchEvent(new KeyboardEvent('keyup', { key: '/' }));
-		},
-	},
-});
-</script>
+								<div :class="$style.binaryButtonContainer">
+									<n8n-button
+										v-if="isViewable(index, key)"
+										size="small"
+										:label="$locale.baseText('runData.showBinaryData')"
+										data-test-id="ndv-view-binary-data"
+										@click="displayBinaryData(index, key)"
+									/>
+									<n8n-button
+										v-if="isDownloadable(index, key)"
+										size="small"
+										type="secondary"
+										:label="$locale.baseText('runData.downloadBinaryData')"
+										data-test-id="ndv-download-binary-data"
+										@click="downloadBinaryData(index, key)"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div
+			v-if="
+				hasNodeRun &&
+				!hasRunError &&
+				binaryData.length === 0 &&
+				dataCount > pageSize &&
+				!isSchemaView &&
+				!isArtificialRecoveredEventItem
+			"
+			v-show="!editMode.enabled"
+			:class="$style.pagination"
+			data-test-id="ndv-data-pagination"
+		>
+			<el-pagination
+				background
+				:hide-on-single-page="true"
+				:current-page="currentPage"
+				:pager-count="5"
+				:page-size="pageSize"
+				layout="prev, pager, next"
+				:total="dataCount"
+				@update:current-page="onCurrentPageChange"
+			>
+			</el-pagination>
+
+			<div :class="$style.pageSizeSelector">
+				<n8n-select
+					size="mini"
+					:model-value="pageSize"
+					teleported
+					@update:model-value="onPageSizeChange"
+				>
+					<template #prepend>{{ $locale.baseText('ndv.output.pageSize') }}</template>
+					<n8n-option v-for="size in pageSizes" :key="size" :label="size" :value="size">
+					</n8n-option>
+					<n8n-option :label="$locale.baseText('ndv.output.all')" :value="dataCount"> </n8n-option>
+				</n8n-select>
+			</div>
+		</div>
+		<n8n-block-ui :show="blockUI" :class="$style.uiBlocker" />
+	</div>
+</template>
 
 <style lang="scss" module>
 .infoIcon {
diff --git a/packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue b/packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue
index 3e2bb2da36fc0..a94bf38f8bad2 100644
--- a/packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue
+++ b/packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue
@@ -1,66 +1,3 @@
-<template>
-	<div :class="$style.block">
-		<header :class="$style.blockHeader" @click="onBlockHeaderClick">
-			<button :class="$style.blockToggle">
-				<font-awesome-icon :icon="isExpanded ? 'angle-down' : 'angle-up'" size="lg" />
-			</button>
-			<p :class="$style.blockTitle">{{ capitalize(runData.inOut) }}</p>
-			<!-- @click.stop to prevent event from bubbling to blockHeader and toggling expanded state when clicking on rawSwitch -->
-			<el-switch
-				v-if="contentParsed"
-				v-model="isShowRaw"
-				:class="$style.rawSwitch"
-				active-text="RAW JSON"
-				@click.stop
-			/>
-		</header>
-		<main
-			:class="{
-				[$style.blockContent]: true,
-				[$style.blockContentExpanded]: isExpanded,
-			}"
-		>
-			<div
-				v-for="({ parsedContent, raw }, index) in parsedRun"
-				:key="index"
-				:class="$style.contentText"
-				:data-content-type="parsedContent?.type"
-			>
-				<template v-if="parsedContent && !isShowRaw">
-					<template v-if="parsedContent.type === 'json'">
-						<VueMarkdown
-							:source="jsonToMarkdown(parsedContent.data as JsonMarkdown)"
-							:class="$style.markdown"
-						/>
-					</template>
-					<template v-if="parsedContent.type === 'markdown'">
-						<VueMarkdown :source="parsedContent.data" :class="$style.markdown" />
-					</template>
-					<p
-						v-if="parsedContent.type === 'text'"
-						:class="$style.runText"
-						v-text="parsedContent.data"
-					/>
-				</template>
-				<!-- We weren't able to parse text or raw switch -->
-				<template v-else>
-					<div :class="$style.rawContent">
-						<n8n-icon-button
-							size="small"
-							:class="$style.copyToClipboard"
-							type="secondary"
-							:title="$locale.baseText('nodeErrorView.copyToClipboard')"
-							icon="copy"
-							@click="onCopyToClipboard(raw)"
-						/>
-						<VueMarkdown :source="jsonToMarkdown(raw as JsonMarkdown)" :class="$style.markdown" />
-					</div>
-				</template>
-			</div>
-		</main>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import type { IAiDataContent } from '@/Interface';
 import { capitalize } from 'lodash-es';
@@ -175,6 +112,69 @@ onMounted(() => {
 });
 </script>
 
+<template>
+	<div :class="$style.block">
+		<header :class="$style.blockHeader" @click="onBlockHeaderClick">
+			<button :class="$style.blockToggle">
+				<font-awesome-icon :icon="isExpanded ? 'angle-down' : 'angle-up'" size="lg" />
+			</button>
+			<p :class="$style.blockTitle">{{ capitalize(runData.inOut) }}</p>
+			<!-- @click.stop to prevent event from bubbling to blockHeader and toggling expanded state when clicking on rawSwitch -->
+			<el-switch
+				v-if="contentParsed"
+				v-model="isShowRaw"
+				:class="$style.rawSwitch"
+				active-text="RAW JSON"
+				@click.stop
+			/>
+		</header>
+		<main
+			:class="{
+				[$style.blockContent]: true,
+				[$style.blockContentExpanded]: isExpanded,
+			}"
+		>
+			<div
+				v-for="({ parsedContent, raw }, index) in parsedRun"
+				:key="index"
+				:class="$style.contentText"
+				:data-content-type="parsedContent?.type"
+			>
+				<template v-if="parsedContent && !isShowRaw">
+					<template v-if="parsedContent.type === 'json'">
+						<VueMarkdown
+							:source="jsonToMarkdown(parsedContent.data as JsonMarkdown)"
+							:class="$style.markdown"
+						/>
+					</template>
+					<template v-if="parsedContent.type === 'markdown'">
+						<VueMarkdown :source="parsedContent.data" :class="$style.markdown" />
+					</template>
+					<p
+						v-if="parsedContent.type === 'text'"
+						:class="$style.runText"
+						v-text="parsedContent.data"
+					/>
+				</template>
+				<!-- We weren't able to parse text or raw switch -->
+				<template v-else>
+					<div :class="$style.rawContent">
+						<n8n-icon-button
+							size="small"
+							:class="$style.copyToClipboard"
+							type="secondary"
+							:title="$locale.baseText('nodeErrorView.copyToClipboard')"
+							icon="copy"
+							@click="onCopyToClipboard(raw)"
+						/>
+						<VueMarkdown :source="jsonToMarkdown(raw as JsonMarkdown)" :class="$style.markdown" />
+					</div>
+				</template>
+			</div>
+		</main>
+	</div>
+</template>
+
 <style lang="scss" module>
 .copyToClipboard {
 	position: absolute;
diff --git a/packages/editor-ui/src/components/RunDataAi/RunDataAi.vue b/packages/editor-ui/src/components/RunDataAi/RunDataAi.vue
index 9731ef4a9abcc..eb7de453c16dc 100644
--- a/packages/editor-ui/src/components/RunDataAi/RunDataAi.vue
+++ b/packages/editor-ui/src/components/RunDataAi/RunDataAi.vue
@@ -1,67 +1,3 @@
-<template>
-	<div v-if="aiData" :class="$style.container">
-		<div :class="{ [$style.tree]: true, [$style.slim]: slim }">
-			<ElTree
-				:data="executionTree"
-				:props="{ label: 'node' }"
-				default-expand-all
-				:indent="12"
-				:expand-on-click-node="false"
-				data-test-id="lm-chat-logs-tree"
-				@node-click="onItemClick"
-			>
-				<template #default="{ node, data }">
-					<div
-						:class="{
-							[$style.treeNode]: true,
-							[$style.isSelected]: isTreeNodeSelected(data),
-						}"
-						:data-tree-depth="data.depth"
-						:style="{ '--item-depth': data.depth }"
-					>
-						<button
-							v-if="data.children.length"
-							:class="$style.treeToggle"
-							@click="toggleTreeItem(node)"
-						>
-							<font-awesome-icon :icon="node.expanded ? 'angle-down' : 'angle-up'" />
-						</button>
-						<n8n-tooltip :disabled="!slim" placement="right">
-							<template #content>
-								{{ node.label }}
-							</template>
-							<span :class="$style.leafLabel">
-								<NodeIcon :node-type="getNodeType(data.node)!" :size="17" />
-								<span v-if="!slim" v-text="node.label" />
-							</span>
-						</n8n-tooltip>
-					</div>
-				</template>
-			</ElTree>
-		</div>
-		<div :class="$style.runData">
-			<div v-if="selectedRun.length === 0" :class="$style.empty">
-				<n8n-text size="large">
-					{{
-						$locale.baseText('ndv.output.ai.empty', {
-							interpolate: {
-								node: props.node.name,
-							},
-						})
-					}}
-				</n8n-text>
-			</div>
-			<div
-				v-for="(data, index) in selectedRun"
-				:key="`${data.node}__${data.runIndex}__index`"
-				data-test-id="lm-chat-logs-entry"
-			>
-				<RunDataAiContent :input-data="data" :content-index="index" />
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import type { Ref } from 'vue';
 import { computed, ref, watch } from 'vue';
@@ -269,6 +205,70 @@ const executionTree = computed<TreeNode[]>(() => {
 watch(() => props.runIndex, selectFirst, { immediate: true });
 </script>
 
+<template>
+	<div v-if="aiData" :class="$style.container">
+		<div :class="{ [$style.tree]: true, [$style.slim]: slim }">
+			<ElTree
+				:data="executionTree"
+				:props="{ label: 'node' }"
+				default-expand-all
+				:indent="12"
+				:expand-on-click-node="false"
+				data-test-id="lm-chat-logs-tree"
+				@node-click="onItemClick"
+			>
+				<template #default="{ node, data }">
+					<div
+						:class="{
+							[$style.treeNode]: true,
+							[$style.isSelected]: isTreeNodeSelected(data),
+						}"
+						:data-tree-depth="data.depth"
+						:style="{ '--item-depth': data.depth }"
+					>
+						<button
+							v-if="data.children.length"
+							:class="$style.treeToggle"
+							@click="toggleTreeItem(node)"
+						>
+							<font-awesome-icon :icon="node.expanded ? 'angle-down' : 'angle-up'" />
+						</button>
+						<n8n-tooltip :disabled="!slim" placement="right">
+							<template #content>
+								{{ node.label }}
+							</template>
+							<span :class="$style.leafLabel">
+								<NodeIcon :node-type="getNodeType(data.node)!" :size="17" />
+								<span v-if="!slim" v-text="node.label" />
+							</span>
+						</n8n-tooltip>
+					</div>
+				</template>
+			</ElTree>
+		</div>
+		<div :class="$style.runData">
+			<div v-if="selectedRun.length === 0" :class="$style.empty">
+				<n8n-text size="large">
+					{{
+						$locale.baseText('ndv.output.ai.empty', {
+							interpolate: {
+								node: props.node.name,
+							},
+						})
+					}}
+				</n8n-text>
+			</div>
+			<div
+				v-for="(data, index) in selectedRun"
+				:key="`${data.node}__${data.runIndex}__index`"
+				data-test-id="lm-chat-logs-entry"
+			>
+				<RunDataAiContent :input-data="data" :content-index="index" />
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .treeToggle {
 	border: none;
diff --git a/packages/editor-ui/src/components/RunDataAi/RunDataAiContent.vue b/packages/editor-ui/src/components/RunDataAi/RunDataAiContent.vue
index 8ed80a2c46715..e7d5c3fe4e5e9 100644
--- a/packages/editor-ui/src/components/RunDataAi/RunDataAiContent.vue
+++ b/packages/editor-ui/src/components/RunDataAi/RunDataAiContent.vue
@@ -1,76 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<header :class="$style.header">
-			<NodeIcon
-				v-if="runMeta?.node"
-				:class="$style.nodeIcon"
-				:node-type="runMeta.node"
-				:size="20"
-			/>
-			<div :class="$style.headerWrap">
-				<p :class="$style.title">
-					{{ inputData.node }}
-				</p>
-				<ul :class="$style.meta">
-					<li v-if="runMeta?.startTimeMs">{{ runMeta?.executionTimeMs }}ms</li>
-					<li v-if="runMeta?.startTimeMs">
-						<n8n-tooltip>
-							<template #content>
-								{{ new Date(runMeta?.startTimeMs).toLocaleString() }}
-							</template>
-							{{
-								$locale.baseText('runData.aiContentBlock.startedAt', {
-									interpolate: {
-										startTime: new Date(runMeta?.startTimeMs).toLocaleTimeString(),
-									},
-								})
-							}}
-						</n8n-tooltip>
-					</li>
-					<li v-if="(consumedTokensSum?.totalTokens ?? 0) > 0" :class="$style.tokensUsage">
-						{{
-							$locale.baseText('runData.aiContentBlock.tokens', {
-								interpolate: {
-									count: formatTokenUsageCount(consumedTokensSum?.totalTokens ?? 0),
-								},
-							})
-						}}
-						<n8n-info-tip type="tooltip" theme="info-light" tooltip-placement="right">
-							<div>
-								<n8n-text :bold="true" size="small">
-									{{ $locale.baseText('runData.aiContentBlock.tokens.prompt') }}
-									{{
-										$locale.baseText('runData.aiContentBlock.tokens', {
-											interpolate: {
-												count: formatTokenUsageCount(consumedTokensSum?.promptTokens ?? 0),
-											},
-										})
-									}}
-								</n8n-text>
-								<br />
-								<n8n-text :bold="true" size="small">
-									{{ $locale.baseText('runData.aiContentBlock.tokens.completion') }}
-									{{
-										$locale.baseText('runData.aiContentBlock.tokens', {
-											interpolate: {
-												count: formatTokenUsageCount(consumedTokensSum?.completionTokens ?? 0),
-											},
-										})
-									}}
-								</n8n-text>
-							</div>
-						</n8n-info-tip>
-					</li>
-				</ul>
-			</div>
-		</header>
-
-		<main v-for="(run, index) in props.inputData.data" :key="index" :class="$style.content">
-			<AiRunContentBlock :run-data="run" />
-		</main>
-	</div>
-</template>
-
 <script lang="ts" setup>
 import type { IAiData, IAiDataContent } from '@/Interface';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
@@ -160,6 +87,79 @@ const runMeta = computed(() => {
 });
 </script>
 
+<template>
+	<div :class="$style.container">
+		<header :class="$style.header">
+			<NodeIcon
+				v-if="runMeta?.node"
+				:class="$style.nodeIcon"
+				:node-type="runMeta.node"
+				:size="20"
+			/>
+			<div :class="$style.headerWrap">
+				<p :class="$style.title">
+					{{ inputData.node }}
+				</p>
+				<ul :class="$style.meta">
+					<li v-if="runMeta?.startTimeMs">{{ runMeta?.executionTimeMs }}ms</li>
+					<li v-if="runMeta?.startTimeMs">
+						<n8n-tooltip>
+							<template #content>
+								{{ new Date(runMeta?.startTimeMs).toLocaleString() }}
+							</template>
+							{{
+								$locale.baseText('runData.aiContentBlock.startedAt', {
+									interpolate: {
+										startTime: new Date(runMeta?.startTimeMs).toLocaleTimeString(),
+									},
+								})
+							}}
+						</n8n-tooltip>
+					</li>
+					<li v-if="(consumedTokensSum?.totalTokens ?? 0) > 0" :class="$style.tokensUsage">
+						{{
+							$locale.baseText('runData.aiContentBlock.tokens', {
+								interpolate: {
+									count: formatTokenUsageCount(consumedTokensSum?.totalTokens ?? 0),
+								},
+							})
+						}}
+						<n8n-info-tip type="tooltip" theme="info-light" tooltip-placement="right">
+							<div>
+								<n8n-text :bold="true" size="small">
+									{{ $locale.baseText('runData.aiContentBlock.tokens.prompt') }}
+									{{
+										$locale.baseText('runData.aiContentBlock.tokens', {
+											interpolate: {
+												count: formatTokenUsageCount(consumedTokensSum?.promptTokens ?? 0),
+											},
+										})
+									}}
+								</n8n-text>
+								<br />
+								<n8n-text :bold="true" size="small">
+									{{ $locale.baseText('runData.aiContentBlock.tokens.completion') }}
+									{{
+										$locale.baseText('runData.aiContentBlock.tokens', {
+											interpolate: {
+												count: formatTokenUsageCount(consumedTokensSum?.completionTokens ?? 0),
+											},
+										})
+									}}
+								</n8n-text>
+							</div>
+						</n8n-info-tip>
+					</li>
+				</ul>
+			</div>
+		</header>
+
+		<main v-for="(run, index) in props.inputData.data" :key="index" :class="$style.content">
+			<AiRunContentBlock :run-data="run" />
+		</main>
+	</div>
+</template>
+
 <style type="scss" module>
 .container {
 	padding: 0 var(--spacing-s) var(--spacing-s);
diff --git a/packages/editor-ui/src/components/RunDataHtml.vue b/packages/editor-ui/src/components/RunDataHtml.vue
index 4ac7234953347..d120a0ad06ffb 100644
--- a/packages/editor-ui/src/components/RunDataHtml.vue
+++ b/packages/editor-ui/src/components/RunDataHtml.vue
@@ -1,7 +1,3 @@
-<template>
-	<iframe class="__html-display" :srcdoc="sanitizedHtml" />
-</template>
-
 <script lang="ts">
 import sanitizeHtml, { defaults, type IOptions as SanitizeOptions } from 'sanitize-html';
 
@@ -35,6 +31,10 @@ export default {
 };
 </script>
 
+<template>
+	<iframe class="__html-display" :srcdoc="sanitizedHtml" />
+</template>
+
 <style lang="scss">
 .__html-display {
 	width: 100%;
diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
index 91ee7f68c8e73..69963e10a6ed9 100644
--- a/packages/editor-ui/src/components/RunDataJson.vue
+++ b/packages/editor-ui/src/components/RunDataJson.vue
@@ -1,79 +1,3 @@
-<template>
-	<div :class="[$style.jsonDisplay, { [$style.highlight]: highlight }]">
-		<Suspense>
-			<LazyRunDataJsonActions
-				v-if="!editMode.enabled"
-				:node="node"
-				:push-ref="pushRef"
-				:display-mode="displayMode"
-				:distance-from-active="distanceFromActive"
-				:selected-json-path="selectedJsonPath"
-				:json-data="jsonData"
-				:pane-type="paneType"
-			/>
-		</Suspense>
-		<Draggable
-			type="mapping"
-			target-data-key="mappable"
-			:disabled="!mappingEnabled"
-			@dragstart="onDragStart"
-			@dragend="onDragEnd"
-		>
-			<template #preview="{ canDrop, el }">
-				<MappingPill v-if="el" :html="getShortKey(el)" :can-drop="canDrop" />
-			</template>
-			<VueJsonPretty
-				:data="jsonData"
-				:deep="10"
-				:show-length="true"
-				:selected-value="selectedJsonPath"
-				root-path=""
-				selectable-type="single"
-				class="json-data"
-				@update:selected-value="selectedJsonPath = $event"
-			>
-				<template #renderNodeKey="{ node }">
-					<TextWithHighlights
-						:content="getContent(node.key)"
-						:search="search"
-						data-target="mappable"
-						:data-value="getJsonParameterPath(node.path)"
-						:data-name="node.key"
-						:data-path="node.path"
-						:data-depth="node.level"
-						:class="{
-							[$style.mappable]: mappingEnabled,
-							[$style.dragged]: draggingPath === node.path,
-						}"
-					/>
-				</template>
-				<template #renderNodeValue="{ node }">
-					<TextWithHighlights
-						v-if="isNaN(node.index)"
-						:content="getContent(node.content)"
-						:search="search"
-					/>
-					<TextWithHighlights
-						v-else
-						:content="getContent(node.content)"
-						:search="search"
-						data-target="mappable"
-						:data-value="getJsonParameterPath(node.path)"
-						:data-name="getListItemName(node.path)"
-						:data-path="node.path"
-						:data-depth="node.level"
-						:class="{
-							[$style.mappable]: mappingEnabled,
-							[$style.dragged]: draggingPath === node.path,
-						}"
-						class="ph-no-capture"
-					/>
-				</template>
-			</VueJsonPretty>
-		</Draggable>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineAsyncComponent, defineComponent, ref } from 'vue';
 import type { PropType } from 'vue';
@@ -222,6 +146,82 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="[$style.jsonDisplay, { [$style.highlight]: highlight }]">
+		<Suspense>
+			<LazyRunDataJsonActions
+				v-if="!editMode.enabled"
+				:node="node"
+				:push-ref="pushRef"
+				:display-mode="displayMode"
+				:distance-from-active="distanceFromActive"
+				:selected-json-path="selectedJsonPath"
+				:json-data="jsonData"
+				:pane-type="paneType"
+			/>
+		</Suspense>
+		<Draggable
+			type="mapping"
+			target-data-key="mappable"
+			:disabled="!mappingEnabled"
+			@dragstart="onDragStart"
+			@dragend="onDragEnd"
+		>
+			<template #preview="{ canDrop, el }">
+				<MappingPill v-if="el" :html="getShortKey(el)" :can-drop="canDrop" />
+			</template>
+			<VueJsonPretty
+				:data="jsonData"
+				:deep="10"
+				:show-length="true"
+				:selected-value="selectedJsonPath"
+				root-path=""
+				selectable-type="single"
+				class="json-data"
+				@update:selected-value="selectedJsonPath = $event"
+			>
+				<template #renderNodeKey="{ node }">
+					<TextWithHighlights
+						:content="getContent(node.key)"
+						:search="search"
+						data-target="mappable"
+						:data-value="getJsonParameterPath(node.path)"
+						:data-name="node.key"
+						:data-path="node.path"
+						:data-depth="node.level"
+						:class="{
+							[$style.mappable]: mappingEnabled,
+							[$style.dragged]: draggingPath === node.path,
+						}"
+					/>
+				</template>
+				<template #renderNodeValue="{ node }">
+					<TextWithHighlights
+						v-if="isNaN(node.index)"
+						:content="getContent(node.content)"
+						:search="search"
+					/>
+					<TextWithHighlights
+						v-else
+						:content="getContent(node.content)"
+						:search="search"
+						data-target="mappable"
+						:data-value="getJsonParameterPath(node.path)"
+						:data-name="getListItemName(node.path)"
+						:data-path="node.path"
+						:data-depth="node.level"
+						:class="{
+							[$style.mappable]: mappingEnabled,
+							[$style.dragged]: draggingPath === node.path,
+						}"
+						class="ph-no-capture"
+					/>
+				</template>
+			</VueJsonPretty>
+		</Draggable>
+	</div>
+</template>
+
 <style lang="scss" module>
 .jsonDisplay {
 	position: absolute;
diff --git a/packages/editor-ui/src/components/RunDataJsonActions.vue b/packages/editor-ui/src/components/RunDataJsonActions.vue
index ccdc911c1026a..41e01e1ff6065 100644
--- a/packages/editor-ui/src/components/RunDataJsonActions.vue
+++ b/packages/editor-ui/src/components/RunDataJsonActions.vue
@@ -1,39 +1,3 @@
-<template>
-	<div :class="$style.actionsGroup">
-		<n8n-icon-button
-			v-if="noSelection"
-			:title="i18n.baseText('runData.copyToClipboard')"
-			icon="copy"
-			type="tertiary"
-			:circle="false"
-			@click="handleCopyClick({ command: 'value' })"
-		/>
-		<el-dropdown v-else trigger="click" @command="handleCopyClick">
-			<span class="el-dropdown-link">
-				<n8n-icon-button
-					:title="i18n.baseText('runData.copyToClipboard')"
-					icon="copy"
-					type="tertiary"
-					:circle="false"
-				/>
-			</span>
-			<template #dropdown>
-				<el-dropdown-menu>
-					<el-dropdown-item :command="{ command: 'value' }">
-						{{ i18n.baseText('runData.copyValue') }}
-					</el-dropdown-item>
-					<el-dropdown-item :command="{ command: 'itemPath' }" divided>
-						{{ i18n.baseText('runData.copyItemPath') }}
-					</el-dropdown-item>
-					<el-dropdown-item :command="{ command: 'parameterPath' }">
-						{{ i18n.baseText('runData.copyParameterPath') }}
-					</el-dropdown-item>
-				</el-dropdown-menu>
-			</template>
-		</el-dropdown>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
@@ -238,6 +202,42 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.actionsGroup">
+		<n8n-icon-button
+			v-if="noSelection"
+			:title="i18n.baseText('runData.copyToClipboard')"
+			icon="copy"
+			type="tertiary"
+			:circle="false"
+			@click="handleCopyClick({ command: 'value' })"
+		/>
+		<el-dropdown v-else trigger="click" @command="handleCopyClick">
+			<span class="el-dropdown-link">
+				<n8n-icon-button
+					:title="i18n.baseText('runData.copyToClipboard')"
+					icon="copy"
+					type="tertiary"
+					:circle="false"
+				/>
+			</span>
+			<template #dropdown>
+				<el-dropdown-menu>
+					<el-dropdown-item :command="{ command: 'value' }">
+						{{ i18n.baseText('runData.copyValue') }}
+					</el-dropdown-item>
+					<el-dropdown-item :command="{ command: 'itemPath' }" divided>
+						{{ i18n.baseText('runData.copyItemPath') }}
+					</el-dropdown-item>
+					<el-dropdown-item :command="{ command: 'parameterPath' }">
+						{{ i18n.baseText('runData.copyParameterPath') }}
+					</el-dropdown-item>
+				</el-dropdown-menu>
+			</template>
+		</el-dropdown>
+	</div>
+</template>
+
 <style lang="scss" module>
 .actionsGroup {
 	position: sticky;
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index 21a1530919ae1..67f0ecea1d321 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -1,166 +1,3 @@
-<template>
-	<div :class="[$style.dataDisplay, { [$style.highlight]: highlight }]">
-		<table v-if="tableData.columns && tableData.columns.length === 0" :class="$style.table">
-			<tr>
-				<th :class="$style.emptyCell"></th>
-				<th :class="$style.tableRightMargin"></th>
-			</tr>
-			<tr
-				v-for="(_, index1) in tableData.data"
-				:key="index1"
-				:class="{ [$style.hoveringRow]: isHoveringRow(index1) }"
-			>
-				<td
-					:data-row="index1"
-					:data-col="0"
-					@mouseenter="onMouseEnterCell"
-					@mouseleave="onMouseLeaveCell"
-				>
-					<n8n-info-tip>{{ $locale.baseText('runData.emptyItemHint') }}</n8n-info-tip>
-				</td>
-				<td :class="$style.tableRightMargin"></td>
-			</tr>
-		</table>
-		<table v-else :class="$style.table">
-			<thead>
-				<tr>
-					<th v-for="(column, i) in tableData.columns || []" :key="column">
-						<n8n-tooltip placement="bottom-start" :disabled="!mappingEnabled" :show-after="1000">
-							<template #content>
-								<div>
-									<img src="/static/data-mapping-gif.gif" />
-									{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
-								</div>
-							</template>
-							<Draggable
-								type="mapping"
-								:data="getExpression(column)"
-								:disabled="!mappingEnabled"
-								@dragstart="onDragStart"
-								@dragend="(column) => onDragEnd(column?.textContent ?? '', 'column')"
-							>
-								<template #preview="{ canDrop }">
-									<MappingPill :html="shorten(column, 16, 2)" :can-drop="canDrop" />
-								</template>
-								<template #default="{ isDragging }">
-									<div
-										:class="{
-											[$style.header]: true,
-											[$style.draggableHeader]: mappingEnabled,
-											[$style.activeHeader]:
-												(i === activeColumn || forceShowGrip) && mappingEnabled,
-											[$style.draggingHeader]: isDragging,
-										}"
-									>
-										<TextWithHighlights
-											:content="getValueToRender(column || '')"
-											:search="search"
-										/>
-										<div :class="$style.dragButton">
-											<font-awesome-icon icon="grip-vertical" />
-										</div>
-									</div>
-								</template>
-							</Draggable>
-						</n8n-tooltip>
-					</th>
-					<th v-if="columnLimitExceeded" :class="$style.header">
-						<n8n-tooltip placement="bottom-end">
-							<template #content>
-								<div>
-									<i18n-t tag="span" keypath="dataMapping.tableView.tableColumnsExceeded.tooltip">
-										<template #columnLimit>{{ columnLimit }}</template>
-										<template #link>
-											<a @click="switchToJsonView">{{
-												$locale.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link')
-											}}</a>
-										</template>
-									</i18n-t>
-								</div>
-							</template>
-							<span>
-								<font-awesome-icon
-									:class="$style['warningTooltip']"
-									icon="exclamation-triangle"
-								></font-awesome-icon>
-								{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded') }}
-							</span>
-						</n8n-tooltip>
-					</th>
-					<th :class="$style.tableRightMargin"></th>
-				</tr>
-			</thead>
-			<Draggable
-				ref="draggable"
-				tag="tbody"
-				type="mapping"
-				target-data-key="mappable"
-				:disabled="!mappingEnabled"
-				@dragstart="onCellDragStart"
-				@dragend="onCellDragEnd"
-			>
-				<template #preview="{ canDrop, el }">
-					<MappingPill
-						:html="shorten(getPathNameFromTarget(el) || '', 16, 2)"
-						:can-drop="canDrop"
-					/>
-				</template>
-				<tr
-					v-for="(row, index1) in tableData.data"
-					:key="index1"
-					:class="{ [$style.hoveringRow]: isHoveringRow(index1) }"
-					:data-test-id="isHoveringRow(index1) ? 'hovering-item' : undefined"
-				>
-					<td
-						v-for="(data, index2) in row"
-						:key="index2"
-						:data-row="index1"
-						:data-col="index2"
-						:class="hasJsonInColumn(index2) ? $style.minColWidth : $style.limitColWidth"
-						@mouseenter="onMouseEnterCell"
-						@mouseleave="onMouseLeaveCell"
-					>
-						<TextWithHighlights
-							v-if="isSimple(data)"
-							:content="getValueToRender(data)"
-							:search="search"
-							:class="{ [$style.value]: true, [$style.empty]: isEmpty(data) }"
-						/>
-						<n8n-tree v-else :node-class="$style.nodeClass" :value="data">
-							<template #label="{ label, path }">
-								<span
-									:class="{
-										[$style.hoveringKey]: mappingEnabled && isHovering(path, index2),
-										[$style.draggingKey]: isDraggingKey(path, index2),
-										[$style.dataKey]: true,
-										[$style.mappable]: mappingEnabled,
-									}"
-									data-target="mappable"
-									:data-name="getCellPathName(path, index2)"
-									:data-value="getCellExpression(path, index2)"
-									:data-depth="path.length"
-									@mouseenter="() => onMouseEnterKey(path, index2)"
-									@mouseleave="onMouseLeaveKey"
-									>{{ label || $locale.baseText('runData.unnamedField') }}</span
-								>
-							</template>
-							<template #value="{ value }">
-								<TextWithHighlights
-									:content="getValueToRender(value)"
-									:search="search"
-									:class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }"
-								/>
-							</template>
-						</n8n-tree>
-					</td>
-					<td v-if="columnLimitExceeded"></td>
-					<td :class="$style.tableRightMargin"></td>
-				</tr>
-			</Draggable>
-		</table>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
@@ -550,6 +387,169 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="[$style.dataDisplay, { [$style.highlight]: highlight }]">
+		<table v-if="tableData.columns && tableData.columns.length === 0" :class="$style.table">
+			<tr>
+				<th :class="$style.emptyCell"></th>
+				<th :class="$style.tableRightMargin"></th>
+			</tr>
+			<tr
+				v-for="(_, index1) in tableData.data"
+				:key="index1"
+				:class="{ [$style.hoveringRow]: isHoveringRow(index1) }"
+			>
+				<td
+					:data-row="index1"
+					:data-col="0"
+					@mouseenter="onMouseEnterCell"
+					@mouseleave="onMouseLeaveCell"
+				>
+					<n8n-info-tip>{{ $locale.baseText('runData.emptyItemHint') }}</n8n-info-tip>
+				</td>
+				<td :class="$style.tableRightMargin"></td>
+			</tr>
+		</table>
+		<table v-else :class="$style.table">
+			<thead>
+				<tr>
+					<th v-for="(column, i) in tableData.columns || []" :key="column">
+						<n8n-tooltip placement="bottom-start" :disabled="!mappingEnabled" :show-after="1000">
+							<template #content>
+								<div>
+									<img src="/static/data-mapping-gif.gif" />
+									{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
+								</div>
+							</template>
+							<Draggable
+								type="mapping"
+								:data="getExpression(column)"
+								:disabled="!mappingEnabled"
+								@dragstart="onDragStart"
+								@dragend="(column) => onDragEnd(column?.textContent ?? '', 'column')"
+							>
+								<template #preview="{ canDrop }">
+									<MappingPill :html="shorten(column, 16, 2)" :can-drop="canDrop" />
+								</template>
+								<template #default="{ isDragging }">
+									<div
+										:class="{
+											[$style.header]: true,
+											[$style.draggableHeader]: mappingEnabled,
+											[$style.activeHeader]:
+												(i === activeColumn || forceShowGrip) && mappingEnabled,
+											[$style.draggingHeader]: isDragging,
+										}"
+									>
+										<TextWithHighlights
+											:content="getValueToRender(column || '')"
+											:search="search"
+										/>
+										<div :class="$style.dragButton">
+											<font-awesome-icon icon="grip-vertical" />
+										</div>
+									</div>
+								</template>
+							</Draggable>
+						</n8n-tooltip>
+					</th>
+					<th v-if="columnLimitExceeded" :class="$style.header">
+						<n8n-tooltip placement="bottom-end">
+							<template #content>
+								<div>
+									<i18n-t tag="span" keypath="dataMapping.tableView.tableColumnsExceeded.tooltip">
+										<template #columnLimit>{{ columnLimit }}</template>
+										<template #link>
+											<a @click="switchToJsonView">{{
+												$locale.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link')
+											}}</a>
+										</template>
+									</i18n-t>
+								</div>
+							</template>
+							<span>
+								<font-awesome-icon
+									:class="$style['warningTooltip']"
+									icon="exclamation-triangle"
+								></font-awesome-icon>
+								{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded') }}
+							</span>
+						</n8n-tooltip>
+					</th>
+					<th :class="$style.tableRightMargin"></th>
+				</tr>
+			</thead>
+			<Draggable
+				ref="draggable"
+				tag="tbody"
+				type="mapping"
+				target-data-key="mappable"
+				:disabled="!mappingEnabled"
+				@dragstart="onCellDragStart"
+				@dragend="onCellDragEnd"
+			>
+				<template #preview="{ canDrop, el }">
+					<MappingPill
+						:html="shorten(getPathNameFromTarget(el) || '', 16, 2)"
+						:can-drop="canDrop"
+					/>
+				</template>
+				<tr
+					v-for="(row, index1) in tableData.data"
+					:key="index1"
+					:class="{ [$style.hoveringRow]: isHoveringRow(index1) }"
+					:data-test-id="isHoveringRow(index1) ? 'hovering-item' : undefined"
+				>
+					<td
+						v-for="(data, index2) in row"
+						:key="index2"
+						:data-row="index1"
+						:data-col="index2"
+						:class="hasJsonInColumn(index2) ? $style.minColWidth : $style.limitColWidth"
+						@mouseenter="onMouseEnterCell"
+						@mouseleave="onMouseLeaveCell"
+					>
+						<TextWithHighlights
+							v-if="isSimple(data)"
+							:content="getValueToRender(data)"
+							:search="search"
+							:class="{ [$style.value]: true, [$style.empty]: isEmpty(data) }"
+						/>
+						<n8n-tree v-else :node-class="$style.nodeClass" :value="data">
+							<template #label="{ label, path }">
+								<span
+									:class="{
+										[$style.hoveringKey]: mappingEnabled && isHovering(path, index2),
+										[$style.draggingKey]: isDraggingKey(path, index2),
+										[$style.dataKey]: true,
+										[$style.mappable]: mappingEnabled,
+									}"
+									data-target="mappable"
+									:data-name="getCellPathName(path, index2)"
+									:data-value="getCellExpression(path, index2)"
+									:data-depth="path.length"
+									@mouseenter="() => onMouseEnterKey(path, index2)"
+									@mouseleave="onMouseLeaveKey"
+									>{{ label || $locale.baseText('runData.unnamedField') }}</span
+								>
+							</template>
+							<template #value="{ value }">
+								<TextWithHighlights
+									:content="getValueToRender(value)"
+									:search="search"
+									:class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }"
+								/>
+							</template>
+						</n8n-tree>
+					</td>
+					<td v-if="columnLimitExceeded"></td>
+					<td :class="$style.tableRightMargin"></td>
+				</tr>
+			</Draggable>
+		</table>
+	</div>
+</template>
+
 <style lang="scss" module>
 .dataDisplay {
 	position: absolute;
diff --git a/packages/editor-ui/src/components/RunInfo.vue b/packages/editor-ui/src/components/RunInfo.vue
index 24a4f3675b388..92db3caa80266 100644
--- a/packages/editor-ui/src/components/RunInfo.vue
+++ b/packages/editor-ui/src/components/RunInfo.vue
@@ -1,3 +1,36 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+import type { ITaskData } from 'n8n-workflow';
+import { convertToDisplayDateComponents } from '@/utils/formatters/dateFormatter';
+
+export default defineComponent({
+	props: {
+		taskData: {}, // ITaskData
+		hasStaleData: Boolean,
+		hasPinData: Boolean,
+	},
+
+	computed: {
+		theme(): string {
+			return this.runTaskData?.error ? 'danger' : 'success';
+		},
+		runTaskData(): ITaskData {
+			return this.taskData as ITaskData;
+		},
+		runMetadata(): { executionTime: number; startTime: string } | null {
+			if (!this.runTaskData) {
+				return null;
+			}
+			const { date, time } = convertToDisplayDateComponents(this.runTaskData.startTime);
+			return {
+				executionTime: this.runTaskData.executionTime,
+				startTime: `${date} at ${time}`,
+			};
+		},
+	},
+});
+</script>
+
 <template>
 	<n8n-info-tip
 		v-if="hasStaleData"
@@ -42,36 +75,3 @@
 		</div>
 	</n8n-info-tip>
 </template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import type { ITaskData } from 'n8n-workflow';
-import { convertToDisplayDateComponents } from '@/utils/formatters/dateFormatter';
-
-export default defineComponent({
-	props: {
-		taskData: {}, // ITaskData
-		hasStaleData: Boolean,
-		hasPinData: Boolean,
-	},
-
-	computed: {
-		theme(): string {
-			return this.runTaskData?.error ? 'danger' : 'success';
-		},
-		runTaskData(): ITaskData {
-			return this.taskData as ITaskData;
-		},
-		runMetadata(): { executionTime: number; startTime: string } | null {
-			if (!this.runTaskData) {
-				return null;
-			}
-			const { date, time } = convertToDisplayDateComponents(this.runTaskData.startTime);
-			return {
-				executionTime: this.runTaskData.executionTime,
-				startTime: `${date} at ${time}`,
-			};
-		},
-	},
-});
-</script>
diff --git a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
index a032f655ede11..e98b139b21f29 100644
--- a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
+++ b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationCard.ee.vue
@@ -1,50 +1,3 @@
-<template>
-	<n8n-card :class="$style.cardLink" data-test-id="destination-card" @click="onClick">
-		<template #header>
-			<div>
-				<n8n-heading tag="h2" bold :class="$style.cardHeading">
-					{{ destination.label }}
-				</n8n-heading>
-				<div :class="$style.cardDescription">
-					<n8n-text color="text-light" size="small">
-						<span>{{ $locale.baseText(typeLabelName) }}</span>
-					</n8n-text>
-				</div>
-			</div>
-		</template>
-		<template #append>
-			<div ref="cardActions" :class="$style.cardActions">
-				<div :class="$style.activeStatusText" data-test-id="destination-activator-status">
-					<n8n-text v-if="nodeParameters.enabled" :color="'success'" size="small" bold>
-						{{ $locale.baseText('workflowActivator.active') }}
-					</n8n-text>
-					<n8n-text v-else color="text-base" size="small" bold>
-						{{ $locale.baseText('workflowActivator.inactive') }}
-					</n8n-text>
-				</div>
-
-				<el-switch
-					class="mr-s"
-					:disabled="readonly"
-					:model-value="nodeParameters.enabled"
-					:title="
-						nodeParameters.enabled
-							? $locale.baseText('workflowActivator.deactivateWorkflow')
-							: $locale.baseText('workflowActivator.activateWorkflow')
-					"
-					active-color="#13ce66"
-					inactive-color="#8899AA"
-					data-test-id="workflow-activate-switch"
-					@update:model-value="onEnabledSwitched($event)"
-				>
-				</el-switch>
-
-				<n8n-action-toggle :actions="actions" theme="dark" @action="onAction" />
-			</div>
-		</template>
-	</n8n-card>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { EnterpriseEditionFeature, MODAL_CONFIRM } from '@/constants';
@@ -178,6 +131,53 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<n8n-card :class="$style.cardLink" data-test-id="destination-card" @click="onClick">
+		<template #header>
+			<div>
+				<n8n-heading tag="h2" bold :class="$style.cardHeading">
+					{{ destination.label }}
+				</n8n-heading>
+				<div :class="$style.cardDescription">
+					<n8n-text color="text-light" size="small">
+						<span>{{ $locale.baseText(typeLabelName) }}</span>
+					</n8n-text>
+				</div>
+			</div>
+		</template>
+		<template #append>
+			<div ref="cardActions" :class="$style.cardActions">
+				<div :class="$style.activeStatusText" data-test-id="destination-activator-status">
+					<n8n-text v-if="nodeParameters.enabled" :color="'success'" size="small" bold>
+						{{ $locale.baseText('workflowActivator.active') }}
+					</n8n-text>
+					<n8n-text v-else color="text-base" size="small" bold>
+						{{ $locale.baseText('workflowActivator.inactive') }}
+					</n8n-text>
+				</div>
+
+				<el-switch
+					class="mr-s"
+					:disabled="readonly"
+					:model-value="nodeParameters.enabled"
+					:title="
+						nodeParameters.enabled
+							? $locale.baseText('workflowActivator.deactivateWorkflow')
+							: $locale.baseText('workflowActivator.activateWorkflow')
+					"
+					active-color="#13ce66"
+					inactive-color="#8899AA"
+					data-test-id="workflow-activate-switch"
+					@update:model-value="onEnabledSwitched($event)"
+				>
+				</el-switch>
+
+				<n8n-action-toggle :actions="actions" theme="dark" @action="onAction" />
+			</div>
+		</template>
+	</n8n-card>
+</template>
+
 <style lang="scss" module>
 .cardLink {
 	transition: box-shadow 0.3s ease;
diff --git a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
index 854f4a51bec9e..4d6e23cf8bd50 100644
--- a/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
+++ b/packages/editor-ui/src/components/SettingsLogStreaming/EventDestinationSettingsModal.ee.vue
@@ -1,171 +1,3 @@
-<template>
-	<Modal
-		:name="modalName"
-		:event-bus="modalBus"
-		:before-close="onModalClose"
-		:scrollable="true"
-		:center="true"
-		:loading="loading"
-		:min-width="isTypeAbstract ? '460px' : '70%'"
-		:max-width="isTypeAbstract ? '460px' : '70%'"
-		:min-height="isTypeAbstract ? '160px' : '650px'"
-		:max-height="isTypeAbstract ? '300px' : '650px'"
-		data-test-id="destination-modal"
-	>
-		<template #header>
-			<template v-if="isTypeAbstract">
-				<div :class="$style.headerCreate">
-					<span>Add new destination</span>
-				</div>
-			</template>
-			<template v-else>
-				<div :class="$style.header">
-					<div :class="$style.destinationInfo">
-						<InlineNameEdit
-							:model-value="headerLabel"
-							:subtitle="!isTypeAbstract ? $locale.baseText(typeLabelName) : 'Select type'"
-							:readonly="isTypeAbstract"
-							type="Credential"
-							data-test-id="subtitle-showing-type"
-							@update:model-value="onLabelChange"
-						/>
-					</div>
-					<div :class="$style.destinationActions">
-						<n8n-button
-							v-if="nodeParameters && hasOnceBeenSaved && unchanged"
-							:icon="testMessageSent ? (testMessageResult ? 'check' : 'exclamation-triangle') : ''"
-							:title="
-								testMessageSent && testMessageResult
-									? 'Event sent and returned OK'
-									: 'Event returned with error'
-							"
-							type="tertiary"
-							label="Send Test-Event"
-							:disabled="!hasOnceBeenSaved || !unchanged"
-							data-test-id="destination-test-button"
-							@click="sendTestEvent"
-						/>
-						<template v-if="canManageLogStreaming">
-							<n8n-icon-button
-								v-if="nodeParameters && hasOnceBeenSaved"
-								:title="$locale.baseText('settings.log-streaming.delete')"
-								icon="trash"
-								type="tertiary"
-								:disabled="isSaving"
-								:loading="isDeleting"
-								data-test-id="destination-delete-button"
-								@click="removeThis"
-							/>
-							<SaveButton
-								:saved="unchanged && hasOnceBeenSaved"
-								:disabled="isTypeAbstract || unchanged"
-								:saving-label="$locale.baseText('settings.log-streaming.saving')"
-								data-test-id="destination-save-button"
-								@click="saveDestination"
-							/>
-						</template>
-					</div>
-				</div>
-				<hr />
-			</template>
-		</template>
-		<template #content>
-			<div :class="$style.container">
-				<template v-if="isTypeAbstract">
-					<n8n-input-label
-						:class="$style.typeSelector"
-						:label="$locale.baseText('settings.log-streaming.selecttype')"
-						:tooltip-text="$locale.baseText('settings.log-streaming.selecttypehint')"
-						:bold="false"
-						size="medium"
-						:underline="false"
-					>
-						<n8n-select
-							ref="typeSelectRef"
-							:model-value="typeSelectValue"
-							:placeholder="typeSelectPlaceholder"
-							data-test-id="select-destination-type"
-							name="name"
-							@update:model-value="onTypeSelectInput"
-						>
-							<n8n-option
-								v-for="option in typeSelectOptions || []"
-								:key="option.value"
-								:value="option.value"
-								:label="$locale.baseText(option.label)"
-							/>
-						</n8n-select>
-						<div class="mt-m text-right">
-							<n8n-button
-								size="large"
-								data-test-id="select-destination-button"
-								:disabled="!typeSelectValue"
-								@click="onContinueAddClicked"
-							>
-								{{ $locale.baseText(`settings.log-streaming.continue`) }}
-							</n8n-button>
-						</div>
-					</n8n-input-label>
-				</template>
-				<template v-else>
-					<div :class="$style.sidebar">
-						<n8n-menu mode="tabs" :items="sidebarItems" @select="onTabSelect"></n8n-menu>
-					</div>
-					<div v-if="activeTab === 'settings'" ref="content" :class="$style.mainContent">
-						<template v-if="isTypeWebhook">
-							<ParameterInputList
-								:parameters="webhookDescription"
-								:hide-delete="true"
-								:node-values="nodeParameters"
-								:is-read-only="!canManageLogStreaming"
-								path=""
-								@value-changed="valueChanged"
-							/>
-						</template>
-						<template v-else-if="isTypeSyslog">
-							<ParameterInputList
-								:parameters="syslogDescription"
-								:hide-delete="true"
-								:node-values="nodeParameters"
-								:is-read-only="!canManageLogStreaming"
-								path=""
-								@value-changed="valueChanged"
-							/>
-						</template>
-						<template v-else-if="isTypeSentry">
-							<ParameterInputList
-								:parameters="sentryDescription"
-								:hide-delete="true"
-								:node-values="nodeParameters"
-								:is-read-only="!canManageLogStreaming"
-								path=""
-								@value-changed="valueChanged"
-							/>
-						</template>
-					</div>
-					<div v-if="activeTab === 'events'" :class="$style.mainContent">
-						<div class="">
-							<n8n-input-label
-								class="mb-m mt-m"
-								:label="$locale.baseText('settings.log-streaming.tab.events.title')"
-								:bold="true"
-								size="medium"
-								:underline="false"
-							/>
-							<EventSelection
-								:destination-id="destination.id"
-								:readonly="!canManageLogStreaming"
-								@input="onInput"
-								@change="valueChanged"
-							/>
-						</div>
-					</div>
-				</template>
-			</div>
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts">
 import { get, set, unset } from 'lodash-es';
 import { mapStores } from 'pinia';
@@ -521,6 +353,174 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Modal
+		:name="modalName"
+		:event-bus="modalBus"
+		:before-close="onModalClose"
+		:scrollable="true"
+		:center="true"
+		:loading="loading"
+		:min-width="isTypeAbstract ? '460px' : '70%'"
+		:max-width="isTypeAbstract ? '460px' : '70%'"
+		:min-height="isTypeAbstract ? '160px' : '650px'"
+		:max-height="isTypeAbstract ? '300px' : '650px'"
+		data-test-id="destination-modal"
+	>
+		<template #header>
+			<template v-if="isTypeAbstract">
+				<div :class="$style.headerCreate">
+					<span>Add new destination</span>
+				</div>
+			</template>
+			<template v-else>
+				<div :class="$style.header">
+					<div :class="$style.destinationInfo">
+						<InlineNameEdit
+							:model-value="headerLabel"
+							:subtitle="!isTypeAbstract ? $locale.baseText(typeLabelName) : 'Select type'"
+							:readonly="isTypeAbstract"
+							type="Credential"
+							data-test-id="subtitle-showing-type"
+							@update:model-value="onLabelChange"
+						/>
+					</div>
+					<div :class="$style.destinationActions">
+						<n8n-button
+							v-if="nodeParameters && hasOnceBeenSaved && unchanged"
+							:icon="testMessageSent ? (testMessageResult ? 'check' : 'exclamation-triangle') : ''"
+							:title="
+								testMessageSent && testMessageResult
+									? 'Event sent and returned OK'
+									: 'Event returned with error'
+							"
+							type="tertiary"
+							label="Send Test-Event"
+							:disabled="!hasOnceBeenSaved || !unchanged"
+							data-test-id="destination-test-button"
+							@click="sendTestEvent"
+						/>
+						<template v-if="canManageLogStreaming">
+							<n8n-icon-button
+								v-if="nodeParameters && hasOnceBeenSaved"
+								:title="$locale.baseText('settings.log-streaming.delete')"
+								icon="trash"
+								type="tertiary"
+								:disabled="isSaving"
+								:loading="isDeleting"
+								data-test-id="destination-delete-button"
+								@click="removeThis"
+							/>
+							<SaveButton
+								:saved="unchanged && hasOnceBeenSaved"
+								:disabled="isTypeAbstract || unchanged"
+								:saving-label="$locale.baseText('settings.log-streaming.saving')"
+								data-test-id="destination-save-button"
+								@click="saveDestination"
+							/>
+						</template>
+					</div>
+				</div>
+				<hr />
+			</template>
+		</template>
+		<template #content>
+			<div :class="$style.container">
+				<template v-if="isTypeAbstract">
+					<n8n-input-label
+						:class="$style.typeSelector"
+						:label="$locale.baseText('settings.log-streaming.selecttype')"
+						:tooltip-text="$locale.baseText('settings.log-streaming.selecttypehint')"
+						:bold="false"
+						size="medium"
+						:underline="false"
+					>
+						<n8n-select
+							ref="typeSelectRef"
+							:model-value="typeSelectValue"
+							:placeholder="typeSelectPlaceholder"
+							data-test-id="select-destination-type"
+							name="name"
+							@update:model-value="onTypeSelectInput"
+						>
+							<n8n-option
+								v-for="option in typeSelectOptions || []"
+								:key="option.value"
+								:value="option.value"
+								:label="$locale.baseText(option.label)"
+							/>
+						</n8n-select>
+						<div class="mt-m text-right">
+							<n8n-button
+								size="large"
+								data-test-id="select-destination-button"
+								:disabled="!typeSelectValue"
+								@click="onContinueAddClicked"
+							>
+								{{ $locale.baseText(`settings.log-streaming.continue`) }}
+							</n8n-button>
+						</div>
+					</n8n-input-label>
+				</template>
+				<template v-else>
+					<div :class="$style.sidebar">
+						<n8n-menu mode="tabs" :items="sidebarItems" @select="onTabSelect"></n8n-menu>
+					</div>
+					<div v-if="activeTab === 'settings'" ref="content" :class="$style.mainContent">
+						<template v-if="isTypeWebhook">
+							<ParameterInputList
+								:parameters="webhookDescription"
+								:hide-delete="true"
+								:node-values="nodeParameters"
+								:is-read-only="!canManageLogStreaming"
+								path=""
+								@value-changed="valueChanged"
+							/>
+						</template>
+						<template v-else-if="isTypeSyslog">
+							<ParameterInputList
+								:parameters="syslogDescription"
+								:hide-delete="true"
+								:node-values="nodeParameters"
+								:is-read-only="!canManageLogStreaming"
+								path=""
+								@value-changed="valueChanged"
+							/>
+						</template>
+						<template v-else-if="isTypeSentry">
+							<ParameterInputList
+								:parameters="sentryDescription"
+								:hide-delete="true"
+								:node-values="nodeParameters"
+								:is-read-only="!canManageLogStreaming"
+								path=""
+								@value-changed="valueChanged"
+							/>
+						</template>
+					</div>
+					<div v-if="activeTab === 'events'" :class="$style.mainContent">
+						<div class="">
+							<n8n-input-label
+								class="mb-m mt-m"
+								:label="$locale.baseText('settings.log-streaming.tab.events.title')"
+								:bold="true"
+								size="medium"
+								:underline="false"
+							/>
+							<EventSelection
+								:destination-id="destination.id"
+								:readonly="!canManageLogStreaming"
+								@input="onInput"
+								@change="valueChanged"
+							/>
+						</div>
+					</div>
+				</template>
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style lang="scss" module>
 .labelMargins {
 	margin-bottom: 1em;
diff --git a/packages/editor-ui/src/components/SettingsLogStreaming/EventSelection.ee.vue b/packages/editor-ui/src/components/SettingsLogStreaming/EventSelection.ee.vue
index c16bce7403d54..9a1591809c415 100644
--- a/packages/editor-ui/src/components/SettingsLogStreaming/EventSelection.ee.vue
+++ b/packages/editor-ui/src/components/SettingsLogStreaming/EventSelection.ee.vue
@@ -1,3 +1,59 @@
+<script lang="ts">
+import { ElCheckbox as Checkbox, type CheckboxValueType } from 'element-plus';
+import { mapStores } from 'pinia';
+import type { BaseTextKey } from '@/plugins/i18n';
+import { useLogStreamingStore } from '@/stores/logStreaming.store';
+
+export default {
+	name: 'EventSelection',
+	components: {
+		Checkbox,
+	},
+	props: {
+		destinationId: {
+			type: String,
+			default: 'defaultDestinationId',
+		},
+		readonly: Boolean,
+	},
+	data() {
+		return {
+			unchanged: true,
+		};
+	},
+	computed: {
+		...mapStores(useLogStreamingStore),
+		anonymizeAuditMessages() {
+			return this.logStreamingStore.items[this.destinationId]?.destination.anonymizeAuditMessages;
+		},
+	},
+	methods: {
+		onInput() {
+			this.$emit('input');
+		},
+		onCheckboxChecked(eventName: string, checked: CheckboxValueType) {
+			this.logStreamingStore.setSelectedInGroup(this.destinationId, eventName, Boolean(checked));
+			this.$forceUpdate();
+		},
+		anonymizeAuditMessagesChanged(value: CheckboxValueType) {
+			this.logStreamingStore.items[this.destinationId].destination.anonymizeAuditMessages =
+				Boolean(value);
+			this.$emit('change', { name: 'anonymizeAuditMessages', node: this.destinationId, value });
+			this.$forceUpdate();
+		},
+		groupLabelName(t: string): string {
+			return this.$locale.baseText(`settings.log-streaming.eventGroup.${t}` as BaseTextKey) ?? t;
+		},
+		groupLabelInfo(t: string): string | undefined {
+			const labelInfo = `settings.log-streaming.eventGroup.${t}.info`;
+			const infoText = this.$locale.baseText(labelInfo as BaseTextKey);
+			if (infoText === labelInfo || infoText === '') return;
+			return infoText;
+		},
+	},
+};
+</script>
+
 <template>
 	<div>
 		<div
@@ -68,62 +124,6 @@
 	</div>
 </template>
 
-<script lang="ts">
-import { ElCheckbox as Checkbox, type CheckboxValueType } from 'element-plus';
-import { mapStores } from 'pinia';
-import type { BaseTextKey } from '@/plugins/i18n';
-import { useLogStreamingStore } from '@/stores/logStreaming.store';
-
-export default {
-	name: 'EventSelection',
-	components: {
-		Checkbox,
-	},
-	props: {
-		destinationId: {
-			type: String,
-			default: 'defaultDestinationId',
-		},
-		readonly: Boolean,
-	},
-	data() {
-		return {
-			unchanged: true,
-		};
-	},
-	computed: {
-		...mapStores(useLogStreamingStore),
-		anonymizeAuditMessages() {
-			return this.logStreamingStore.items[this.destinationId]?.destination.anonymizeAuditMessages;
-		},
-	},
-	methods: {
-		onInput() {
-			this.$emit('input');
-		},
-		onCheckboxChecked(eventName: string, checked: CheckboxValueType) {
-			this.logStreamingStore.setSelectedInGroup(this.destinationId, eventName, Boolean(checked));
-			this.$forceUpdate();
-		},
-		anonymizeAuditMessagesChanged(value: CheckboxValueType) {
-			this.logStreamingStore.items[this.destinationId].destination.anonymizeAuditMessages =
-				Boolean(value);
-			this.$emit('change', { name: 'anonymizeAuditMessages', node: this.destinationId, value });
-			this.$forceUpdate();
-		},
-		groupLabelName(t: string): string {
-			return this.$locale.baseText(`settings.log-streaming.eventGroup.${t}` as BaseTextKey) ?? t;
-		},
-		groupLabelInfo(t: string): string | undefined {
-			const labelInfo = `settings.log-streaming.eventGroup.${t}.info`;
-			const infoText = this.$locale.baseText(labelInfo as BaseTextKey);
-			if (infoText === labelInfo || infoText === '') return;
-			return infoText;
-		},
-	},
-};
-</script>
-
 <style lang="scss" module>
 .eventListCard {
 	margin-left: 1em;
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index 127e8849acb07..7fa3b8834180d 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -1,25 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<n8n-menu :items="sidebarMenuItems" @select="handleSelect">
-			<template #header>
-				<div :class="$style.returnButton" data-test-id="settings-back" @click="$emit('return')">
-					<i class="mr-xs">
-						<font-awesome-icon icon="arrow-left" />
-					</i>
-					<n8n-heading size="large" :bold="true">{{ $locale.baseText('settings') }}</n8n-heading>
-				</div>
-			</template>
-			<template #menuSuffix>
-				<div :class="$style.versionContainer">
-					<n8n-link size="small" @click="onVersionClick">
-						{{ $locale.baseText('settings.version') }} {{ rootStore.versionCli }}
-					</n8n-link>
-				</div>
-			</template>
-		</n8n-menu>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -216,6 +194,28 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.container">
+		<n8n-menu :items="sidebarMenuItems" @select="handleSelect">
+			<template #header>
+				<div :class="$style.returnButton" data-test-id="settings-back" @click="$emit('return')">
+					<i class="mr-xs">
+						<font-awesome-icon icon="arrow-left" />
+					</i>
+					<n8n-heading size="large" :bold="true">{{ $locale.baseText('settings') }}</n8n-heading>
+				</div>
+			</template>
+			<template #menuSuffix>
+				<div :class="$style.versionContainer">
+					<n8n-link size="small" @click="onVersionClick">
+						{{ $locale.baseText('settings.version') }} {{ rootStore.versionCli }}
+					</n8n-link>
+				</div>
+			</template>
+		</n8n-menu>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	min-width: $sidebar-expanded-width;
diff --git a/packages/editor-ui/src/components/ShortenName.vue b/packages/editor-ui/src/components/ShortenName.vue
index 109773cce7061..29ad2fd95c727 100644
--- a/packages/editor-ui/src/components/ShortenName.vue
+++ b/packages/editor-ui/src/components/ShortenName.vue
@@ -1,9 +1,3 @@
-<template>
-	<span :title="name" :data-test-id="testId">
-		<slot :shortened-name="shortenedName"></slot>
-	</span>
-</template>
-
 <script setup lang="ts">
 import { computed } from 'vue';
 import { shorten } from '@/utils/typesUtils';
@@ -25,3 +19,9 @@ const shortenedName = computed(() =>
 	shorten(props.name, props.limit, WORKFLOW_NAME_END_COUNT_TO_KEEP),
 );
 </script>
+
+<template>
+	<span :title="name" :data-test-id="testId">
+		<slot :shortened-name="shortenedName"></slot>
+	</span>
+</template>
diff --git a/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue b/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
index 06ec2606b4067..3b6766822bbc4 100644
--- a/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
+++ b/packages/editor-ui/src/components/SqlEditor/SqlEditor.vue
@@ -1,16 +1,3 @@
-<template>
-	<div :class="$style.sqlEditor">
-		<div ref="sqlEditor" :class="$style.codemirror" data-test-id="sql-editor-container"></div>
-		<slot name="suffix" />
-		<InlineExpressionEditorOutput
-			v-if="!fullscreen"
-			:segments="segments"
-			:is-read-only="isReadOnly"
-			:visible="hasFocus"
-		/>
-	</div>
-</template>
-
 <script setup lang="ts">
 import InlineExpressionEditorOutput from '@/components/InlineExpressionEditor/InlineExpressionEditorOutput.vue';
 import { codeNodeEditorEventBus } from '@/event-bus';
@@ -193,6 +180,19 @@ function highlightLine(lineNumber: number | 'final') {
 }
 </script>
 
+<template>
+	<div :class="$style.sqlEditor">
+		<div ref="sqlEditor" :class="$style.codemirror" data-test-id="sql-editor-container"></div>
+		<slot name="suffix" />
+		<InlineExpressionEditorOutput
+			v-if="!fullscreen"
+			:segments="segments"
+			:is-read-only="isReadOnly"
+			:visible="hasFocus"
+		/>
+	</div>
+</template>
+
 <style module lang="scss">
 .sqlEditor {
 	position: relative;
diff --git a/packages/editor-ui/src/components/Sticky.vue b/packages/editor-ui/src/components/Sticky.vue
index 8c2cd1fdd31f8..9888d6253d95e 100644
--- a/packages/editor-ui/src/components/Sticky.vue
+++ b/packages/editor-ui/src/components/Sticky.vue
@@ -1,109 +1,3 @@
-<template>
-	<div
-		:id="nodeId"
-		:ref="data?.name"
-		class="sticky-wrapper"
-		:style="stickyPosition"
-		:data-name="data?.name"
-		data-test-id="sticky"
-	>
-		<div
-			:class="{
-				'sticky-default': true,
-				'touch-active': isTouchActive,
-				'is-touch-device': deviceSupport.isTouchDevice,
-				'is-read-only': isReadOnly,
-			}"
-			:style="stickySize"
-		>
-			<div v-show="isSelected" class="select-sticky-background" />
-			<div
-				v-touch:start="touchStart"
-				v-touch:end="touchEnd"
-				class="sticky-box"
-				@click.left="mouseLeftClick"
-				@contextmenu="onContextMenu"
-			>
-				<N8nResizeableSticky
-					v-if="node"
-					:id="node.id"
-					:model-value="node.parameters.content"
-					:height="node.parameters.height"
-					:width="node.parameters.width"
-					:scale="nodeViewScale"
-					:background-color="node.parameters.color"
-					:read-only="isReadOnly"
-					:default-text="defaultText"
-					:edit-mode="isActive && !isReadOnly"
-					:grid-size="gridSize"
-					@edit="onEdit"
-					@resizestart="onResizeStart"
-					@resize="onResize"
-					@resizeend="onResizeEnd"
-					@markdown-click="onMarkdownClick"
-					@update:model-value="onInputChange"
-				/>
-			</div>
-
-			<div
-				v-show="showActions"
-				ref="stickOptions"
-				:class="{ 'sticky-options': true, 'no-select-on-click': true, 'force-show': forceActions }"
-			>
-				<div
-					v-touch:tap="deleteNode"
-					class="option"
-					data-test-id="delete-sticky"
-					:title="$locale.baseText('node.delete')"
-				>
-					<font-awesome-icon icon="trash" />
-				</div>
-				<n8n-popover
-					effect="dark"
-					trigger="click"
-					placement="top"
-					:popper-style="{ width: '208px' }"
-					:visible="isColorPopoverVisible"
-					@show="onShowPopover"
-					@hide="onHidePopover"
-				>
-					<template #reference>
-						<div
-							class="option"
-							data-test-id="change-sticky-color"
-							:title="$locale.baseText('node.changeColor')"
-							@click="() => setColorPopoverVisible(!isColorPopoverVisible)"
-						>
-							<font-awesome-icon icon="palette" />
-						</div>
-					</template>
-					<div class="content">
-						<div
-							v-for="(_, index) in Array.from({ length: 7 })"
-							:key="index"
-							class="color"
-							data-test-id="color"
-							:class="`sticky-color-${index + 1}`"
-							:style="{
-								'border-width': '1px',
-								'border-style': 'solid',
-								'border-color': 'var(--color-foreground-xdark)',
-								'background-color': `var(--color-sticky-background-${index + 1})`,
-								'box-shadow':
-									(index === 0 && node?.parameters.color === '') ||
-									index + 1 === node?.parameters.color
-										? `0 0 0 1px var(--color-sticky-background-${index + 1})`
-										: 'none',
-							}"
-							@click="changeColor(index + 1)"
-						></div>
-					</div>
-				</n8n-popover>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import type { PropType, StyleValue } from 'vue';
@@ -440,6 +334,112 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div
+		:id="nodeId"
+		:ref="data?.name"
+		class="sticky-wrapper"
+		:style="stickyPosition"
+		:data-name="data?.name"
+		data-test-id="sticky"
+	>
+		<div
+			:class="{
+				'sticky-default': true,
+				'touch-active': isTouchActive,
+				'is-touch-device': deviceSupport.isTouchDevice,
+				'is-read-only': isReadOnly,
+			}"
+			:style="stickySize"
+		>
+			<div v-show="isSelected" class="select-sticky-background" />
+			<div
+				v-touch:start="touchStart"
+				v-touch:end="touchEnd"
+				class="sticky-box"
+				@click.left="mouseLeftClick"
+				@contextmenu="onContextMenu"
+			>
+				<N8nResizeableSticky
+					v-if="node"
+					:id="node.id"
+					:model-value="node.parameters.content"
+					:height="node.parameters.height"
+					:width="node.parameters.width"
+					:scale="nodeViewScale"
+					:background-color="node.parameters.color"
+					:read-only="isReadOnly"
+					:default-text="defaultText"
+					:edit-mode="isActive && !isReadOnly"
+					:grid-size="gridSize"
+					@edit="onEdit"
+					@resizestart="onResizeStart"
+					@resize="onResize"
+					@resizeend="onResizeEnd"
+					@markdown-click="onMarkdownClick"
+					@update:model-value="onInputChange"
+				/>
+			</div>
+
+			<div
+				v-show="showActions"
+				ref="stickOptions"
+				:class="{ 'sticky-options': true, 'no-select-on-click': true, 'force-show': forceActions }"
+			>
+				<div
+					v-touch:tap="deleteNode"
+					class="option"
+					data-test-id="delete-sticky"
+					:title="$locale.baseText('node.delete')"
+				>
+					<font-awesome-icon icon="trash" />
+				</div>
+				<n8n-popover
+					effect="dark"
+					trigger="click"
+					placement="top"
+					:popper-style="{ width: '208px' }"
+					:visible="isColorPopoverVisible"
+					@show="onShowPopover"
+					@hide="onHidePopover"
+				>
+					<template #reference>
+						<div
+							class="option"
+							data-test-id="change-sticky-color"
+							:title="$locale.baseText('node.changeColor')"
+							@click="() => setColorPopoverVisible(!isColorPopoverVisible)"
+						>
+							<font-awesome-icon icon="palette" />
+						</div>
+					</template>
+					<div class="content">
+						<div
+							v-for="(_, index) in Array.from({ length: 7 })"
+							:key="index"
+							class="color"
+							data-test-id="color"
+							:class="`sticky-color-${index + 1}`"
+							:style="{
+								'border-width': '1px',
+								'border-style': 'solid',
+								'border-color': 'var(--color-foreground-xdark)',
+								'background-color': `var(--color-sticky-background-${index + 1})`,
+								'box-shadow':
+									(index === 0 && node?.parameters.color === '') ||
+									index + 1 === node?.parameters.color
+										? `0 0 0 1px var(--color-sticky-background-${index + 1})`
+										: 'none',
+							}"
+							@click="changeColor(index + 1)"
+						></div>
+					</div>
+				</n8n-popover>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" scoped>
 .sticky-wrapper {
 	position: absolute;
diff --git a/packages/editor-ui/src/components/TagsContainer.vue b/packages/editor-ui/src/components/TagsContainer.vue
index ff14bafdec27b..4eb4b92c2e50b 100644
--- a/packages/editor-ui/src/components/TagsContainer.vue
+++ b/packages/editor-ui/src/components/TagsContainer.vue
@@ -1,52 +1,3 @@
-<template>
-	<IntersectionObserver
-		ref="tagsContainer"
-		:threshold="1.0"
-		class="tags-container"
-		:style="style"
-		:enabled="responsive"
-		:event-bus="intersectionEventBus"
-		@observed="onObserved"
-	>
-		<span class="tags">
-			<span
-				v-for="tag in tags"
-				:key="tag.id"
-				:class="{ clickable: !tag.hidden }"
-				@click="(e) => onClick(e, tag)"
-			>
-				<el-tag
-					v-if="tag.isCount"
-					:title="tag.title"
-					type="info"
-					size="small"
-					class="count-container"
-					:disable-transitions="true"
-				>
-					{{ tag.name }}
-				</el-tag>
-				<IntersectionObserved
-					v-else
-					:class="{ hideTag: tag.hidden }"
-					:data-id="tag.id"
-					:enabled="responsive"
-					:event-bus="intersectionEventBus"
-				>
-					<el-tag
-						:title="tag.name"
-						type="info"
-						size="small"
-						:class="{ hoverable }"
-						:disable-transitions="true"
-					>
-						{{ tag.name }}
-					</el-tag>
-				</IntersectionObserved>
-			</span>
-		</span>
-	</IntersectionObserver>
-</template>
-
 <script lang="ts">
 import { defineComponent, type ComponentInstance } from 'vue';
 
@@ -180,6 +131,55 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<IntersectionObserver
+		ref="tagsContainer"
+		:threshold="1.0"
+		class="tags-container"
+		:style="style"
+		:enabled="responsive"
+		:event-bus="intersectionEventBus"
+		@observed="onObserved"
+	>
+		<span class="tags">
+			<span
+				v-for="tag in tags"
+				:key="tag.id"
+				:class="{ clickable: !tag.hidden }"
+				@click="(e) => onClick(e, tag)"
+			>
+				<el-tag
+					v-if="tag.isCount"
+					:title="tag.title"
+					type="info"
+					size="small"
+					class="count-container"
+					:disable-transitions="true"
+				>
+					{{ tag.name }}
+				</el-tag>
+				<IntersectionObserved
+					v-else
+					:class="{ hideTag: tag.hidden }"
+					:data-id="tag.id"
+					:enabled="responsive"
+					:event-bus="intersectionEventBus"
+				>
+					<el-tag
+						:title="tag.name"
+						type="info"
+						size="small"
+						:class="{ hoverable }"
+						:disable-transitions="true"
+					>
+						{{ tag.name }}
+					</el-tag>
+				</IntersectionObserved>
+			</span>
+		</span>
+	</IntersectionObserver>
+</template>
+
 <style lang="scss" scoped>
 .tags-container {
 	display: block;
diff --git a/packages/editor-ui/src/components/TagsDropdown.vue b/packages/editor-ui/src/components/TagsDropdown.vue
index 2b799f96a514d..f9407606a9fb8 100644
--- a/packages/editor-ui/src/components/TagsDropdown.vue
+++ b/packages/editor-ui/src/components/TagsDropdown.vue
@@ -1,61 +1,3 @@
-<template>
-	<div ref="container" :class="{ 'tags-container': true, focused }" @keydown.stop>
-		<n8n-select
-			ref="selectRef"
-			:teleported="true"
-			:model-value="appliedTags"
-			:loading="isLoading"
-			:placeholder="placeholder"
-			:filter-method="filterOptions"
-			filterable
-			multiple
-			:reserve-keyword="false"
-			loading-text="..."
-			popper-class="tags-dropdown"
-			data-test-id="tags-dropdown"
-			@update:model-value="onTagsUpdated"
-			@visible-change="onVisibleChange"
-			@remove-tag="onRemoveTag"
-		>
-			<n8n-option
-				v-if="options.length === 0 && filter"
-				:key="CREATE_KEY"
-				ref="createRef"
-				:value="CREATE_KEY"
-				class="ops"
-			>
-				<font-awesome-icon icon="plus-circle" />
-				<span>
-					{{ i18n.baseText('tagsDropdown.createTag', { interpolate: { filter } }) }}
-				</span>
-			</n8n-option>
-			<n8n-option v-else-if="options.length === 0" value="message" disabled>
-				<span>{{ i18n.baseText('tagsDropdown.typeToCreateATag') }}</span>
-				<span v-if="allTags.length > 0">{{
-					i18n.baseText('tagsDropdown.noMatchingTagsExist')
-				}}</span>
-				<span v-else-if="filter">{{ i18n.baseText('tagsDropdown.noTagsExist') }}</span>
-			</n8n-option>
-
-			<!-- key is id+index for keyboard navigation to work well with filter -->
-			<n8n-option
-				v-for="(tag, i) in options"
-				:key="tag.id + '_' + i"
-				ref="tagRefs"
-				:value="tag.id"
-				:label="tag.name"
-				class="tag"
-				data-test-id="tag"
-			/>
-
-			<n8n-option :key="MANAGE_KEY" :value="MANAGE_KEY" class="ops manage-tags">
-				<font-awesome-icon icon="cog" />
-				<span>{{ i18n.baseText('tagsDropdown.manageTags') }}</span>
-			</n8n-option>
-		</n8n-select>
-	</div>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
@@ -285,6 +227,65 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<div ref="container" :class="{ 'tags-container': true, focused }" @keydown.stop>
+		<n8n-select
+			ref="selectRef"
+			:teleported="true"
+			:model-value="appliedTags"
+			:loading="isLoading"
+			:placeholder="placeholder"
+			:filter-method="filterOptions"
+			filterable
+			multiple
+			:reserve-keyword="false"
+			loading-text="..."
+			popper-class="tags-dropdown"
+			data-test-id="tags-dropdown"
+			@update:model-value="onTagsUpdated"
+			@visible-change="onVisibleChange"
+			@remove-tag="onRemoveTag"
+		>
+			<n8n-option
+				v-if="options.length === 0 && filter"
+				:key="CREATE_KEY"
+				ref="createRef"
+				:value="CREATE_KEY"
+				class="ops"
+			>
+				<font-awesome-icon icon="plus-circle" />
+				<span>
+					{{ i18n.baseText('tagsDropdown.createTag', { interpolate: { filter } }) }}
+				</span>
+			</n8n-option>
+			<n8n-option v-else-if="options.length === 0" value="message" disabled>
+				<span>{{ i18n.baseText('tagsDropdown.typeToCreateATag') }}</span>
+				<span v-if="allTags.length > 0">{{
+					i18n.baseText('tagsDropdown.noMatchingTagsExist')
+				}}</span>
+				<span v-else-if="filter">{{ i18n.baseText('tagsDropdown.noTagsExist') }}</span>
+			</n8n-option>
+
+			<!-- key is id+index for keyboard navigation to work well with filter -->
+			<n8n-option
+				v-for="(tag, i) in options"
+				:key="tag.id + '_' + i"
+				ref="tagRefs"
+				:value="tag.id"
+				:label="tag.name"
+				class="tag"
+				data-test-id="tag"
+			/>
+
+			<n8n-option :key="MANAGE_KEY" :value="MANAGE_KEY" class="ops manage-tags">
+				<font-awesome-icon icon="cog" />
+				<span>{{ i18n.baseText('tagsDropdown.manageTags') }}</span>
+			</n8n-option>
+		</n8n-select>
+	</div>
+</template>
+
 <style lang="scss">
 .tags-container {
 	$--max-input-height: 60px;
diff --git a/packages/editor-ui/src/components/TagsManager/TagsManager.vue b/packages/editor-ui/src/components/TagsManager/TagsManager.vue
index 02bfee1dd2b86..973d05d8f7543 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsManager.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsManager.vue
@@ -1,33 +1,3 @@
-<template>
-	<Modal
-		id="tags-manager-modal"
-		:title="$locale.baseText('tagsManager.manageTags')"
-		:name="TAGS_MANAGER_MODAL_KEY"
-		:event-bus="modalBus"
-		min-width="620px"
-		min-height="420px"
-		@enter="onEnter"
-	>
-		<template #content>
-			<el-row>
-				<TagsView
-					v-if="hasTags || isCreating"
-					:is-loading="isLoading"
-					:tags="tags"
-					@create="onCreate"
-					@update="onUpdate"
-					@delete="onDelete"
-					@disable-create="onDisableCreate"
-				/>
-				<NoTagsView v-else @enable-create="onEnableCreate" />
-			</el-row>
-		</template>
-		<template #footer="{ close }">
-			<n8n-button :label="$locale.baseText('tagsManager.done')" float="right" @click="close" />
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 
@@ -186,3 +156,33 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<Modal
+		id="tags-manager-modal"
+		:title="$locale.baseText('tagsManager.manageTags')"
+		:name="TAGS_MANAGER_MODAL_KEY"
+		:event-bus="modalBus"
+		min-width="620px"
+		min-height="420px"
+		@enter="onEnter"
+	>
+		<template #content>
+			<el-row>
+				<TagsView
+					v-if="hasTags || isCreating"
+					:is-loading="isLoading"
+					:tags="tags"
+					@create="onCreate"
+					@update="onUpdate"
+					@delete="onDelete"
+					@disable-create="onDisableCreate"
+				/>
+				<NoTagsView v-else @enable-create="onEnableCreate" />
+			</el-row>
+		</template>
+		<template #footer="{ close }">
+			<n8n-button :label="$locale.baseText('tagsManager.done')" float="right" @click="close" />
+		</template>
+	</Modal>
+</template>
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
index 6176dcf7c9ca0..a6e6f7fe00c72 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTable.vue
@@ -1,3 +1,110 @@
+<script lang="ts">
+import type { ElTable } from 'element-plus';
+import { MAX_TAG_NAME_LENGTH } from '@/constants';
+import type { ITagRow } from '@/Interface';
+import { defineComponent } from 'vue';
+import type { N8nInput } from 'n8n-design-system';
+
+type TableRef = InstanceType<typeof ElTable>;
+type N8nInputRef = InstanceType<typeof N8nInput>;
+
+const INPUT_TRANSITION_TIMEOUT = 350;
+const DELETE_TRANSITION_TIMEOUT = 100;
+
+export default defineComponent({
+	name: 'TagsTable',
+	props: ['rows', 'isLoading', 'newName', 'isSaving'],
+	data() {
+		return {
+			maxLength: MAX_TAG_NAME_LENGTH,
+		};
+	},
+	watch: {
+		rows(newValue: ITagRow[] | undefined) {
+			if (newValue?.[0] && newValue[0].create) {
+				this.focusOnCreate();
+			}
+		},
+	},
+	mounted() {
+		if (this.rows.length === 1 && this.rows[0].create) {
+			this.focusOnInput();
+		}
+	},
+	methods: {
+		getRowClasses: ({ row }: { row: ITagRow }): string => {
+			return row.disable ? 'disabled' : '';
+		},
+
+		getSpan({ row, columnIndex }: { row: ITagRow; columnIndex: number }): number | number[] {
+			// expand text column with delete message
+			if (columnIndex === 0 && row.tag && row.delete) {
+				return [1, 2];
+			}
+			// hide usage column on delete
+			if (columnIndex === 1 && row.tag && row.delete) {
+				return [0, 0];
+			}
+
+			return 1;
+		},
+
+		enableUpdate(row: ITagRow): void {
+			if (row.tag) {
+				this.$emit('updateEnable', row.tag.id);
+				this.$emit('newNameChange', row.tag.name);
+				this.focusOnInput();
+			}
+		},
+
+		enableDelete(row: ITagRow): void {
+			if (row.tag) {
+				this.$emit('deleteEnable', row.tag.id);
+				this.focusOnDelete();
+			}
+		},
+
+		cancel(): void {
+			this.$emit('cancelOperation');
+		},
+		apply(): void {
+			this.$emit('applyOperation');
+		},
+
+		onNewNameChange(name: string): void {
+			this.$emit('newNameChange', name);
+		},
+
+		focusOnInput(): void {
+			setTimeout(() => {
+				const inputRef = this.$refs.nameInput as N8nInputRef | undefined;
+				if (inputRef?.focus) {
+					inputRef.focus();
+				}
+			}, INPUT_TRANSITION_TIMEOUT);
+		},
+
+		focusOnDelete(): void {
+			setTimeout(() => {
+				const inputRef = this.$refs.deleteHiddenInput as N8nInputRef | undefined;
+				if (inputRef?.focus) {
+					inputRef.focus();
+				}
+			}, DELETE_TRANSITION_TIMEOUT);
+		},
+
+		focusOnCreate(): void {
+			const bodyWrapperRef = (this.$refs.table as TableRef).$refs.bodyWrapper as HTMLElement;
+			if (bodyWrapperRef) {
+				bodyWrapperRef.scrollTop = 0;
+			}
+
+			this.focusOnInput();
+		},
+	},
+});
+</script>
+
 <template>
 	<el-table
 		ref="table"
@@ -107,113 +214,6 @@
 	</el-table>
 </template>
 
-<script lang="ts">
-import type { ElTable } from 'element-plus';
-import { MAX_TAG_NAME_LENGTH } from '@/constants';
-import type { ITagRow } from '@/Interface';
-import { defineComponent } from 'vue';
-import type { N8nInput } from 'n8n-design-system';
-
-type TableRef = InstanceType<typeof ElTable>;
-type N8nInputRef = InstanceType<typeof N8nInput>;
-
-const INPUT_TRANSITION_TIMEOUT = 350;
-const DELETE_TRANSITION_TIMEOUT = 100;
-
-export default defineComponent({
-	name: 'TagsTable',
-	props: ['rows', 'isLoading', 'newName', 'isSaving'],
-	data() {
-		return {
-			maxLength: MAX_TAG_NAME_LENGTH,
-		};
-	},
-	watch: {
-		rows(newValue: ITagRow[] | undefined) {
-			if (newValue?.[0] && newValue[0].create) {
-				this.focusOnCreate();
-			}
-		},
-	},
-	mounted() {
-		if (this.rows.length === 1 && this.rows[0].create) {
-			this.focusOnInput();
-		}
-	},
-	methods: {
-		getRowClasses: ({ row }: { row: ITagRow }): string => {
-			return row.disable ? 'disabled' : '';
-		},
-
-		getSpan({ row, columnIndex }: { row: ITagRow; columnIndex: number }): number | number[] {
-			// expand text column with delete message
-			if (columnIndex === 0 && row.tag && row.delete) {
-				return [1, 2];
-			}
-			// hide usage column on delete
-			if (columnIndex === 1 && row.tag && row.delete) {
-				return [0, 0];
-			}
-
-			return 1;
-		},
-
-		enableUpdate(row: ITagRow): void {
-			if (row.tag) {
-				this.$emit('updateEnable', row.tag.id);
-				this.$emit('newNameChange', row.tag.name);
-				this.focusOnInput();
-			}
-		},
-
-		enableDelete(row: ITagRow): void {
-			if (row.tag) {
-				this.$emit('deleteEnable', row.tag.id);
-				this.focusOnDelete();
-			}
-		},
-
-		cancel(): void {
-			this.$emit('cancelOperation');
-		},
-		apply(): void {
-			this.$emit('applyOperation');
-		},
-
-		onNewNameChange(name: string): void {
-			this.$emit('newNameChange', name);
-		},
-
-		focusOnInput(): void {
-			setTimeout(() => {
-				const inputRef = this.$refs.nameInput as N8nInputRef | undefined;
-				if (inputRef?.focus) {
-					inputRef.focus();
-				}
-			}, INPUT_TRANSITION_TIMEOUT);
-		},
-
-		focusOnDelete(): void {
-			setTimeout(() => {
-				const inputRef = this.$refs.deleteHiddenInput as N8nInputRef | undefined;
-				if (inputRef?.focus) {
-					inputRef.focus();
-				}
-			}, DELETE_TRANSITION_TIMEOUT);
-		},
-
-		focusOnCreate(): void {
-			const bodyWrapperRef = (this.$refs.table as TableRef).$refs.bodyWrapper as HTMLElement;
-			if (bodyWrapperRef) {
-				bodyWrapperRef.scrollTop = 0;
-			}
-
-			this.focusOnInput();
-		},
-	},
-});
-</script>
-
 <style lang="scss" scoped>
 .tags-table {
 	:deep(tr.disabled) {
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
index 61031ea6be02d..f3b1144440212 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsTableHeader.vue
@@ -1,32 +1,3 @@
-<template>
-	<el-row class="tags-header">
-		<el-col :span="10">
-			<n8n-input
-				:placeholder="$locale.baseText('tagsTableHeader.searchTags')"
-				:model-value="search"
-				:disabled="disabled"
-				:maxlength="maxLength"
-				clearable
-				@update:model-value="onSearchChange"
-			>
-				<template #prefix>
-					<font-awesome-icon icon="search" />
-				</template>
-			</n8n-input>
-		</el-col>
-		<el-col :span="14">
-			<n8n-button
-				:disabled="disabled"
-				icon="plus"
-				:label="$locale.baseText('tagsTableHeader.addNew')"
-				size="large"
-				float="right"
-				@click="onAddNew"
-			/>
-		</el-col>
-	</el-row>
-</template>
-
 <script setup lang="ts">
 import { ref } from 'vue';
 import { MAX_TAG_NAME_LENGTH } from '@/constants';
@@ -58,6 +29,35 @@ const onSearchChange = (search: string) => {
 };
 </script>
 
+<template>
+	<el-row class="tags-header">
+		<el-col :span="10">
+			<n8n-input
+				:placeholder="$locale.baseText('tagsTableHeader.searchTags')"
+				:model-value="search"
+				:disabled="disabled"
+				:maxlength="maxLength"
+				clearable
+				@update:model-value="onSearchChange"
+			>
+				<template #prefix>
+					<font-awesome-icon icon="search" />
+				</template>
+			</n8n-input>
+		</el-col>
+		<el-col :span="14">
+			<n8n-button
+				:disabled="disabled"
+				icon="plus"
+				:label="$locale.baseText('tagsTableHeader.addNew')"
+				size="large"
+				float="right"
+				@click="onAddNew"
+			/>
+		</el-col>
+	</el-row>
+</template>
+
 <style lang="scss" scoped>
 .tags-header {
 	margin-bottom: 15px;
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
index a70b523f9e68e..ed99286c03247 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
@@ -1,27 +1,3 @@
-<template>
-	<div @keyup.enter="applyOperation" @keyup.esc="cancelOperation">
-		<TagsTableHeader
-			:search="search"
-			:disabled="isHeaderDisabled()"
-			@search-change="onSearchChange"
-			@create-enable="onCreateEnable"
-		/>
-		<TagsTable
-			ref="tagsTable"
-			:rows="rows"
-			:is-loading="isLoading"
-			:is-saving="isSaving"
-			:new-name="newName"
-			data-test-id="tags-table"
-			@new-name-change="onNewNameChange"
-			@update-enable="onUpdateEnable"
-			@delete-enable="onDeleteEnable"
-			@cancel-operation="cancelOperation"
-			@apply-operation="applyOperation"
-		/>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 
@@ -191,3 +167,27 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<div @keyup.enter="applyOperation" @keyup.esc="cancelOperation">
+		<TagsTableHeader
+			:search="search"
+			:disabled="isHeaderDisabled()"
+			@search-change="onSearchChange"
+			@create-enable="onCreateEnable"
+		/>
+		<TagsTable
+			ref="tagsTable"
+			:rows="rows"
+			:is-loading="isLoading"
+			:is-saving="isSaving"
+			:new-name="newName"
+			data-test-id="tags-table"
+			@new-name-change="onNewNameChange"
+			@update-enable="onUpdateEnable"
+			@delete-enable="onDeleteEnable"
+			@cancel-operation="cancelOperation"
+			@apply-operation="applyOperation"
+		/>
+	</div>
+</template>
diff --git a/packages/editor-ui/src/components/TemplateCard.vue b/packages/editor-ui/src/components/TemplateCard.vue
index 759d3a2550c46..51a77a0cc3b35 100644
--- a/packages/editor-ui/src/components/TemplateCard.vue
+++ b/packages/editor-ui/src/components/TemplateCard.vue
@@ -1,54 +1,3 @@
-<template>
-	<div
-		:class="[
-			$style.card,
-			lastItem && $style.last,
-			firstItem && $style.first,
-			!loading && $style.loaded,
-		]"
-		data-test-id="template-card"
-		@click="onCardClick"
-	>
-		<div v-if="loading" :class="$style.loading">
-			<n8n-loading :rows="2" :shrink-last="false" :loading="loading" />
-		</div>
-		<div v-else-if="workflow">
-			<n8n-heading :bold="true" size="small">{{ workflow.name }}</n8n-heading>
-			<div v-if="!simpleView" :class="$style.content">
-				<span v-if="workflow.totalViews">
-					<n8n-text size="small" color="text-light">
-						<font-awesome-icon icon="eye" />
-						{{ abbreviateNumber(workflow.totalViews) }}
-					</n8n-text>
-				</span>
-				<div v-if="workflow.totalViews" :class="$style.line" v-text="'|'" />
-				<n8n-text size="small" color="text-light">
-					<TimeAgo :date="workflow.createdAt" />
-				</n8n-text>
-				<div v-if="workflow.user" :class="$style.line" v-text="'|'" />
-				<n8n-text v-if="workflow.user" size="small" color="text-light"
-					>By {{ workflow.user.username }}</n8n-text
-				>
-			</div>
-		</div>
-		<div
-			v-if="!loading && workflow"
-			:class="[$style.nodesContainer, useWorkflowButton && $style.hideOnHover]"
-		>
-			<NodeList v-if="workflow.nodes" :nodes="workflow.nodes" :limit="nodesToBeShown" size="md" />
-		</div>
-		<div v-if="useWorkflowButton" :class="$style.buttonContainer">
-			<n8n-button
-				v-if="useWorkflowButton"
-				outline
-				label="Use workflow"
-				data-test-id="use-workflow-button"
-				@click.stop="onUseWorkflowClick"
-			/>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { type PropType, defineComponent } from 'vue';
 import { filterTemplateNodes } from '@/utils/nodeTypesUtils';
@@ -111,6 +60,57 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div
+		:class="[
+			$style.card,
+			lastItem && $style.last,
+			firstItem && $style.first,
+			!loading && $style.loaded,
+		]"
+		data-test-id="template-card"
+		@click="onCardClick"
+	>
+		<div v-if="loading" :class="$style.loading">
+			<n8n-loading :rows="2" :shrink-last="false" :loading="loading" />
+		</div>
+		<div v-else-if="workflow">
+			<n8n-heading :bold="true" size="small">{{ workflow.name }}</n8n-heading>
+			<div v-if="!simpleView" :class="$style.content">
+				<span v-if="workflow.totalViews">
+					<n8n-text size="small" color="text-light">
+						<font-awesome-icon icon="eye" />
+						{{ abbreviateNumber(workflow.totalViews) }}
+					</n8n-text>
+				</span>
+				<div v-if="workflow.totalViews" :class="$style.line" v-text="'|'" />
+				<n8n-text size="small" color="text-light">
+					<TimeAgo :date="workflow.createdAt" />
+				</n8n-text>
+				<div v-if="workflow.user" :class="$style.line" v-text="'|'" />
+				<n8n-text v-if="workflow.user" size="small" color="text-light"
+					>By {{ workflow.user.username }}</n8n-text
+				>
+			</div>
+		</div>
+		<div
+			v-if="!loading && workflow"
+			:class="[$style.nodesContainer, useWorkflowButton && $style.hideOnHover]"
+		>
+			<NodeList v-if="workflow.nodes" :nodes="workflow.nodes" :limit="nodesToBeShown" size="md" />
+		</div>
+		<div v-if="useWorkflowButton" :class="$style.buttonContainer">
+			<n8n-button
+				v-if="useWorkflowButton"
+				outline
+				label="Use workflow"
+				data-test-id="use-workflow-button"
+				@click.stop="onUseWorkflowClick"
+			/>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .nodes {
 	display: flex;
diff --git a/packages/editor-ui/src/components/TemplateDetails.vue b/packages/editor-ui/src/components/TemplateDetails.vue
index 0e6a6336e94e6..e8b97a0281140 100644
--- a/packages/editor-ui/src/components/TemplateDetails.vue
+++ b/packages/editor-ui/src/components/TemplateDetails.vue
@@ -1,61 +1,3 @@
-<template>
-	<div>
-		<n8n-loading :loading="loading" :rows="5" variant="p" />
-
-		<TemplateDetailsBlock
-			v-if="!loading && template && template.nodes.length > 0"
-			:title="blockTitle"
-		>
-			<div :class="$style.icons">
-				<div
-					v-for="node in filterTemplateNodes(template.nodes)"
-					:key="node.name"
-					:class="$style.icon"
-				>
-					<NodeIcon
-						:node-type="node"
-						:size="24"
-						:show-tooltip="true"
-						@click="redirectToSearchPage(node)"
-					/>
-				</div>
-			</div>
-		</TemplateDetailsBlock>
-
-		<TemplateDetailsBlock
-			v-if="!loading && isFullTemplatesCollection(template) && template.categories.length > 0"
-			:title="$locale.baseText('template.details.categories')"
-		>
-			<n8n-tags :tags="template.categories" @click:tag="redirectToCategory" />
-		</TemplateDetailsBlock>
-
-		<TemplateDetailsBlock
-			v-if="!loading && template"
-			:title="$locale.baseText('template.details.details')"
-		>
-			<div :class="$style.text">
-				<n8n-text v-if="isTemplatesWorkflow(template)" size="small" color="text-base">
-					{{ $locale.baseText('template.details.created') }}
-					<TimeAgo :date="template.createdAt" />
-					{{ $locale.baseText('template.details.by') }}
-					{{ template.user ? template.user.username : 'n8n team' }}
-				</n8n-text>
-			</div>
-			<div :class="$style.text">
-				<n8n-text
-					v-if="isTemplatesWorkflow(template) && template.totalViews !== 0"
-					size="small"
-					color="text-base"
-				>
-					{{ $locale.baseText('template.details.viewed') }}
-					{{ abbreviateNumber(template.totalViews) }}
-					{{ $locale.baseText('template.details.times') }}
-				</n8n-text>
-			</div>
-		</TemplateDetailsBlock>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
@@ -115,6 +57,65 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<div>
+		<n8n-loading :loading="loading" :rows="5" variant="p" />
+
+		<TemplateDetailsBlock
+			v-if="!loading && template && template.nodes.length > 0"
+			:title="blockTitle"
+		>
+			<div :class="$style.icons">
+				<div
+					v-for="node in filterTemplateNodes(template.nodes)"
+					:key="node.name"
+					:class="$style.icon"
+				>
+					<NodeIcon
+						:node-type="node"
+						:size="24"
+						:show-tooltip="true"
+						@click="redirectToSearchPage(node)"
+					/>
+				</div>
+			</div>
+		</TemplateDetailsBlock>
+
+		<TemplateDetailsBlock
+			v-if="!loading && isFullTemplatesCollection(template) && template.categories.length > 0"
+			:title="$locale.baseText('template.details.categories')"
+		>
+			<n8n-tags :tags="template.categories" @click:tag="redirectToCategory" />
+		</TemplateDetailsBlock>
+
+		<TemplateDetailsBlock
+			v-if="!loading && template"
+			:title="$locale.baseText('template.details.details')"
+		>
+			<div :class="$style.text">
+				<n8n-text v-if="isTemplatesWorkflow(template)" size="small" color="text-base">
+					{{ $locale.baseText('template.details.created') }}
+					<TimeAgo :date="template.createdAt" />
+					{{ $locale.baseText('template.details.by') }}
+					{{ template.user ? template.user.username : 'n8n team' }}
+				</n8n-text>
+			</div>
+			<div :class="$style.text">
+				<n8n-text
+					v-if="isTemplatesWorkflow(template) && template.totalViews !== 0"
+					size="small"
+					color="text-base"
+				>
+					{{ $locale.baseText('template.details.viewed') }}
+					{{ abbreviateNumber(template.totalViews) }}
+					{{ $locale.baseText('template.details.times') }}
+				</n8n-text>
+			</div>
+		</TemplateDetailsBlock>
+	</div>
+</template>
+
 <style lang="scss" module>
 .icons {
 	display: flex;
diff --git a/packages/editor-ui/src/components/TemplateDetailsBlock.vue b/packages/editor-ui/src/components/TemplateDetailsBlock.vue
index 0aa4ed41a5125..830c28acbd39e 100644
--- a/packages/editor-ui/src/components/TemplateDetailsBlock.vue
+++ b/packages/editor-ui/src/components/TemplateDetailsBlock.vue
@@ -1,3 +1,9 @@
+<script lang="ts" setup>
+defineProps<{
+	title: string;
+}>();
+</script>
+
 <template>
 	<div :class="$style.block">
 		<div :class="$style.header">
@@ -9,12 +15,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-defineProps<{
-	title: string;
-}>();
-</script>
-
 <style lang="scss" module>
 .block {
 	padding-bottom: var(--spacing-xl);
diff --git a/packages/editor-ui/src/components/TemplateFilters.vue b/packages/editor-ui/src/components/TemplateFilters.vue
index fe7b9022587c7..8fedd594d1627 100644
--- a/packages/editor-ui/src/components/TemplateFilters.vue
+++ b/packages/editor-ui/src/components/TemplateFilters.vue
@@ -1,44 +1,3 @@
-<template>
-	<div :class="$style.filters" class="template-filters" data-test-id="templates-filter-container">
-		<div :class="$style.title" v-text="$locale.baseText('templates.categoriesHeading')" />
-		<div v-if="loading" :class="$style.list">
-			<n8n-loading :loading="loading" :rows="expandLimit" />
-		</div>
-		<ul v-if="!loading" :class="$style.categories">
-			<li :class="$style.item" data-test-id="template-filter-all-categories">
-				<el-checkbox :model-value="allSelected" @update:model-value="() => resetCategories()">
-					{{ $locale.baseText('templates.allCategories') }}
-				</el-checkbox>
-			</li>
-			<li
-				v-for="(category, index) in collapsed
-					? sortedCategories.slice(0, expandLimit)
-					: sortedCategories"
-				:key="index"
-				:class="$style.item"
-				:data-test-id="`template-filter-${category.name.toLowerCase().replaceAll(' ', '-')}`"
-			>
-				<el-checkbox
-					:model-value="isSelected(category)"
-					@update:model-value="(value: boolean) => handleCheckboxChanged(value, category)"
-				>
-					{{ category.name }}
-				</el-checkbox>
-			</li>
-		</ul>
-		<div
-			v-if="sortedCategories.length > expandLimit && collapsed && !loading"
-			:class="$style.button"
-			data-test-id="expand-categories-button"
-			@click="collapseAction"
-		>
-			<n8n-text size="small" color="primary">
-				+ {{ `${sortedCategories.length - expandLimit} more` }}
-			</n8n-text>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { ITemplatesCategory } from '@/Interface';
@@ -127,6 +86,47 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.filters" class="template-filters" data-test-id="templates-filter-container">
+		<div :class="$style.title" v-text="$locale.baseText('templates.categoriesHeading')" />
+		<div v-if="loading" :class="$style.list">
+			<n8n-loading :loading="loading" :rows="expandLimit" />
+		</div>
+		<ul v-if="!loading" :class="$style.categories">
+			<li :class="$style.item" data-test-id="template-filter-all-categories">
+				<el-checkbox :model-value="allSelected" @update:model-value="() => resetCategories()">
+					{{ $locale.baseText('templates.allCategories') }}
+				</el-checkbox>
+			</li>
+			<li
+				v-for="(category, index) in collapsed
+					? sortedCategories.slice(0, expandLimit)
+					: sortedCategories"
+				:key="index"
+				:class="$style.item"
+				:data-test-id="`template-filter-${category.name.toLowerCase().replaceAll(' ', '-')}`"
+			>
+				<el-checkbox
+					:model-value="isSelected(category)"
+					@update:model-value="(value: boolean) => handleCheckboxChanged(value, category)"
+				>
+					{{ category.name }}
+				</el-checkbox>
+			</li>
+		</ul>
+		<div
+			v-if="sortedCategories.length > expandLimit && collapsed && !loading"
+			:class="$style.button"
+			data-test-id="expand-categories-button"
+			@click="collapseAction"
+		>
+			<n8n-text size="small" color="primary">
+				+ {{ `${sortedCategories.length - expandLimit} more` }}
+			</n8n-text>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .title {
 	font-size: var(--font-size-2xs);
diff --git a/packages/editor-ui/src/components/TemplateList.vue b/packages/editor-ui/src/components/TemplateList.vue
index 62073452935eb..06c644dc804d2 100644
--- a/packages/editor-ui/src/components/TemplateList.vue
+++ b/packages/editor-ui/src/components/TemplateList.vue
@@ -1,38 +1,3 @@
-<template>
-	<div v-if="loading || workflows.length" :class="$style.list">
-		<div v-if="!simpleView" :class="$style.header">
-			<n8n-heading :bold="true" size="medium" color="text-light">
-				{{ $locale.baseText('templates.workflows') }}
-				<span v-if="totalCount > 0" data-test-id="template-count-label">({{ totalCount }})</span>
-				<span v-if="!loading && totalWorkflows" v-text="`(${totalWorkflows})`" />
-			</n8n-heading>
-		</div>
-		<div :class="$style.container">
-			<TemplateCard
-				v-for="(workflow, index) in workflows"
-				:key="workflow.id"
-				:workflow="workflow"
-				:first-item="index === 0"
-				:simple-view="simpleView"
-				:last-item="index === workflows.length - 1 && !loading"
-				:use-workflow-button="useWorkflowButton"
-				@click="(e) => onCardClick(e, workflow.id)"
-				@use-workflow="(e) => onUseWorkflow(e, workflow.id)"
-			/>
-			<div v-if="infiniteScrollEnabled" ref="loader" />
-			<div v-if="loading" data-test-id="templates-loading-container">
-				<TemplateCard
-					v-for="n in 4"
-					:key="'index-' + n"
-					:loading="true"
-					:first-item="workflows.length === 0 && n === 1"
-					:last-item="n === 4"
-				/>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { type PropType, defineComponent } from 'vue';
 import TemplateCard from './TemplateCard.vue';
@@ -114,6 +79,41 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div v-if="loading || workflows.length" :class="$style.list">
+		<div v-if="!simpleView" :class="$style.header">
+			<n8n-heading :bold="true" size="medium" color="text-light">
+				{{ $locale.baseText('templates.workflows') }}
+				<span v-if="totalCount > 0" data-test-id="template-count-label">({{ totalCount }})</span>
+				<span v-if="!loading && totalWorkflows" v-text="`(${totalWorkflows})`" />
+			</n8n-heading>
+		</div>
+		<div :class="$style.container">
+			<TemplateCard
+				v-for="(workflow, index) in workflows"
+				:key="workflow.id"
+				:workflow="workflow"
+				:first-item="index === 0"
+				:simple-view="simpleView"
+				:last-item="index === workflows.length - 1 && !loading"
+				:use-workflow-button="useWorkflowButton"
+				@click="(e) => onCardClick(e, workflow.id)"
+				@use-workflow="(e) => onUseWorkflow(e, workflow.id)"
+			/>
+			<div v-if="infiniteScrollEnabled" ref="loader" />
+			<div v-if="loading" data-test-id="templates-loading-container">
+				<TemplateCard
+					v-for="n in 4"
+					:key="'index-' + n"
+					:loading="true"
+					:first-item="workflows.length === 0 && n === 1"
+					:last-item="n === 4"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .header {
 	padding-bottom: var(--spacing-2xs);
diff --git a/packages/editor-ui/src/components/TemplatesInfoCard.vue b/packages/editor-ui/src/components/TemplatesInfoCard.vue
index 2d155148e1816..9e77a9e10adeb 100644
--- a/packages/editor-ui/src/components/TemplatesInfoCard.vue
+++ b/packages/editor-ui/src/components/TemplatesInfoCard.vue
@@ -1,17 +1,3 @@
-<template>
-	<Card :loading="loading" :title="collection.name" :style="{ width }">
-		<template #footer>
-			<span>
-				<n8n-text v-show="showItemCount" size="small" color="text-light">
-					{{ collection.workflows.length }}
-					{{ $locale.baseText('templates.workflows') }}
-				</n8n-text>
-			</span>
-			<NodeList :nodes="collection.nodes" :show-more="false" />
-		</template>
-	</Card>
-</template>
-
 <script lang="ts">
 import { type PropType, defineComponent } from 'vue';
 import Card from '@/components/CollectionWorkflowCard.vue';
@@ -44,4 +30,18 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Card :loading="loading" :title="collection.name" :style="{ width }">
+		<template #footer>
+			<span>
+				<n8n-text v-show="showItemCount" size="small" color="text-light">
+					{{ collection.workflows.length }}
+					{{ $locale.baseText('templates.workflows') }}
+				</n8n-text>
+			</span>
+			<NodeList :nodes="collection.nodes" :show-more="false" />
+		</template>
+	</Card>
+</template>
+
 <style lang="scss" module></style>
diff --git a/packages/editor-ui/src/components/TemplatesInfoCarousel.vue b/packages/editor-ui/src/components/TemplatesInfoCarousel.vue
index 377f6c81373a8..6810443b26d32 100644
--- a/packages/editor-ui/src/components/TemplatesInfoCarousel.vue
+++ b/packages/editor-ui/src/components/TemplatesInfoCarousel.vue
@@ -1,41 +1,3 @@
-<template>
-	<div v-show="loading || collections.length" :class="$style.container">
-		<agile
-			ref="slider"
-			:dots="false"
-			:nav-buttons="false"
-			:infinite="false"
-			:slides-to-show="4"
-			@after-change="updateCarouselScroll"
-		>
-			<Card v-for="n in loading ? 4 : 0" :key="`loading-${n}`" :loading="loading" />
-			<TemplatesInfoCard
-				v-for="collection in loading ? [] : collections"
-				:key="collection.id"
-				data-test-id="templates-info-card"
-				:collection="collection"
-				:show-item-count="showItemCount"
-				:width="cardsWidth"
-				@click="(e) => onCardClick(e, collection.id)"
-			/>
-		</agile>
-		<button
-			v-show="showNavigation && carouselScrollPosition > 0"
-			:class="{ [$style.leftButton]: true }"
-			@click="scrollLeft"
-		>
-			<font-awesome-icon icon="chevron-left" />
-		</button>
-		<button
-			v-show="showNavigation && !scrollEnd"
-			:class="{ [$style.rightButton]: true }"
-			@click="scrollRight"
-		>
-			<font-awesome-icon icon="chevron-right" />
-		</button>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { PropType } from 'vue';
@@ -143,6 +105,44 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div v-show="loading || collections.length" :class="$style.container">
+		<agile
+			ref="slider"
+			:dots="false"
+			:nav-buttons="false"
+			:infinite="false"
+			:slides-to-show="4"
+			@after-change="updateCarouselScroll"
+		>
+			<Card v-for="n in loading ? 4 : 0" :key="`loading-${n}`" :loading="loading" />
+			<TemplatesInfoCard
+				v-for="collection in loading ? [] : collections"
+				:key="collection.id"
+				data-test-id="templates-info-card"
+				:collection="collection"
+				:show-item-count="showItemCount"
+				:width="cardsWidth"
+				@click="(e) => onCardClick(e, collection.id)"
+			/>
+		</agile>
+		<button
+			v-show="showNavigation && carouselScrollPosition > 0"
+			:class="{ [$style.leftButton]: true }"
+			@click="scrollLeft"
+		>
+			<font-awesome-icon icon="chevron-left" />
+		</button>
+		<button
+			v-show="showNavigation && !scrollEnd"
+			:class="{ [$style.rightButton]: true }"
+			@click="scrollRight"
+		>
+			<font-awesome-icon icon="chevron-right" />
+		</button>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	position: relative;
diff --git a/packages/editor-ui/src/components/TextEdit.vue b/packages/editor-ui/src/components/TextEdit.vue
index 41d941c05d7ac..440507a2b4640 100644
--- a/packages/editor-ui/src/components/TextEdit.vue
+++ b/packages/editor-ui/src/components/TextEdit.vue
@@ -1,33 +1,3 @@
-<template>
-	<div v-if="dialogVisible">
-		<el-dialog
-			:model-value="dialogVisible"
-			append-to-body
-			width="80%"
-			:title="`${$locale.baseText('textEdit.edit')} ${$locale
-				.nodeText()
-				.inputLabelDisplayName(parameter, path)}`"
-			:before-close="closeDialog"
-		>
-			<div class="ignore-key-press">
-				<n8n-input-label :label="$locale.nodeText().inputLabelDisplayName(parameter, path)">
-					<div @keydown.stop @keydown.esc="onKeyDownEsc">
-						<n8n-input
-							ref="inputField"
-							v-model="tempValue"
-							type="textarea"
-							:placeholder="$locale.nodeText().placeholder(parameter, path)"
-							:read-only="isReadOnly"
-							:rows="15"
-							@update:model-value="valueChanged"
-						/>
-					</div>
-				</n8n-input-label>
-			</div>
-		</el-dialog>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { ref, watch, onMounted, nextTick } from 'vue';
 import type { INodeProperties } from 'n8n-workflow';
@@ -85,3 +55,33 @@ const closeDialog = () => {
 	emit('closeDialog');
 };
 </script>
+
+<template>
+	<div v-if="dialogVisible">
+		<el-dialog
+			:model-value="dialogVisible"
+			append-to-body
+			width="80%"
+			:title="`${$locale.baseText('textEdit.edit')} ${$locale
+				.nodeText()
+				.inputLabelDisplayName(parameter, path)}`"
+			:before-close="closeDialog"
+		>
+			<div class="ignore-key-press">
+				<n8n-input-label :label="$locale.nodeText().inputLabelDisplayName(parameter, path)">
+					<div @keydown.stop @keydown.esc="onKeyDownEsc">
+						<n8n-input
+							ref="inputField"
+							v-model="tempValue"
+							type="textarea"
+							:placeholder="$locale.nodeText().placeholder(parameter, path)"
+							:read-only="isReadOnly"
+							:rows="15"
+							@update:model-value="valueChanged"
+						/>
+					</div>
+				</n8n-input-label>
+			</div>
+		</el-dialog>
+	</div>
+</template>
diff --git a/packages/editor-ui/src/components/TitledList.vue b/packages/editor-ui/src/components/TitledList.vue
index c866f5888a6ce..4dc308ea8d2fa 100644
--- a/packages/editor-ui/src/components/TitledList.vue
+++ b/packages/editor-ui/src/components/TitledList.vue
@@ -1,3 +1,10 @@
+<script lang="ts" setup>
+defineProps<{
+	title: string;
+	items: string[];
+}>();
+</script>
+
 <template>
 	<div class="titled-list">
 		<p v-text="title" />
@@ -7,12 +14,6 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
-defineProps<{
-	title: string;
-	items: string[];
-}>();
-</script>
 <style lang="scss" scoped>
 .titled-list {
 	display: flex;
diff --git a/packages/editor-ui/src/components/TriggerPanel.vue b/packages/editor-ui/src/components/TriggerPanel.vue
index 612edfbc9ff0e..db8a64736a2df 100644
--- a/packages/editor-ui/src/components/TriggerPanel.vue
+++ b/packages/editor-ui/src/components/TriggerPanel.vue
@@ -1,112 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<transition name="fade" mode="out-in">
-			<div v-if="hasIssues || hideContent" key="empty"></div>
-			<div v-else-if="isListeningForEvents" key="listening">
-				<n8n-pulse>
-					<NodeIcon :node-type="nodeType" :size="40"></NodeIcon>
-				</n8n-pulse>
-				<div v-if="isWebhookNode">
-					<n8n-text tag="div" size="large" color="text-dark" class="mb-2xs" bold>{{
-						$locale.baseText('ndv.trigger.webhookNode.listening')
-					}}</n8n-text>
-					<div :class="[$style.shake, 'mb-xs']">
-						<n8n-text>
-							{{
-								$locale.baseText('ndv.trigger.webhookNode.requestHint', {
-									interpolate: { type: webhookHttpMethod ?? '' },
-								})
-							}}
-						</n8n-text>
-					</div>
-					<CopyInput
-						:value="webhookTestUrl"
-						:toast-title="$locale.baseText('ndv.trigger.copiedTestUrl')"
-						class="mb-2xl"
-						size="medium"
-						:collapse="true"
-						:copy-button-text="$locale.baseText('generic.clickToCopy')"
-						@copy="onTestLinkCopied"
-					></CopyInput>
-					<NodeExecuteButton
-						data-test-id="trigger-execute-button"
-						:node-name="nodeName"
-						size="medium"
-						telemetry-source="inputs"
-						@execute="onNodeExecute"
-					/>
-				</div>
-				<div v-else>
-					<n8n-text tag="div" size="large" color="text-dark" class="mb-2xs" bold>{{
-						listeningTitle
-					}}</n8n-text>
-					<div :class="[$style.shake, 'mb-xs']">
-						<n8n-text tag="div">
-							{{ listeningHint }}
-						</n8n-text>
-					</div>
-					<div v-if="displayChatButton">
-						<n8n-button class="mb-xl" @click="openWebhookUrl()">
-							{{ $locale.baseText('ndv.trigger.chatTrigger.openChat') }}
-						</n8n-button>
-					</div>
-
-					<NodeExecuteButton
-						data-test-id="trigger-execute-button"
-						:node-name="nodeName"
-						size="medium"
-						telemetry-source="inputs"
-						@execute="onNodeExecute"
-					/>
-				</div>
-			</div>
-			<div v-else key="default">
-				<div v-if="isActivelyPolling" class="mb-xl">
-					<n8n-spinner type="ring" />
-				</div>
-
-				<div :class="$style.action">
-					<div :class="$style.header">
-						<n8n-heading v-if="header" tag="h1" bold>
-							{{ header }}
-						</n8n-heading>
-						<n8n-text v-if="subheader">
-							<span v-text="subheader" />
-						</n8n-text>
-					</div>
-
-					<NodeExecuteButton
-						data-test-id="trigger-execute-button"
-						:node-name="nodeName"
-						size="medium"
-						telemetry-source="inputs"
-						@execute="onNodeExecute"
-					/>
-				</div>
-
-				<n8n-text v-if="activationHint" size="small" @click="onLinkClick">
-					<span v-html="activationHint"></span>&nbsp;
-				</n8n-text>
-				<n8n-link
-					v-if="activationHint && executionsHelp"
-					size="small"
-					@click="expandExecutionHelp"
-					>{{ $locale.baseText('ndv.trigger.moreInfo') }}</n8n-link
-				>
-				<n8n-info-accordion
-					v-if="executionsHelp"
-					ref="help"
-					:class="$style.accordion"
-					:title="$locale.baseText('ndv.trigger.executionsHint.question')"
-					:description="executionsHelp"
-					:event-bus="executionsHelpEventBus"
-					@click:body="onLinkClick"
-				></n8n-info-accordion>
-			</div>
-		</transition>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -463,6 +354,115 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.container">
+		<transition name="fade" mode="out-in">
+			<div v-if="hasIssues || hideContent" key="empty"></div>
+			<div v-else-if="isListeningForEvents" key="listening">
+				<n8n-pulse>
+					<NodeIcon :node-type="nodeType" :size="40"></NodeIcon>
+				</n8n-pulse>
+				<div v-if="isWebhookNode">
+					<n8n-text tag="div" size="large" color="text-dark" class="mb-2xs" bold>{{
+						$locale.baseText('ndv.trigger.webhookNode.listening')
+					}}</n8n-text>
+					<div :class="[$style.shake, 'mb-xs']">
+						<n8n-text>
+							{{
+								$locale.baseText('ndv.trigger.webhookNode.requestHint', {
+									interpolate: { type: webhookHttpMethod ?? '' },
+								})
+							}}
+						</n8n-text>
+					</div>
+					<CopyInput
+						:value="webhookTestUrl"
+						:toast-title="$locale.baseText('ndv.trigger.copiedTestUrl')"
+						class="mb-2xl"
+						size="medium"
+						:collapse="true"
+						:copy-button-text="$locale.baseText('generic.clickToCopy')"
+						@copy="onTestLinkCopied"
+					></CopyInput>
+					<NodeExecuteButton
+						data-test-id="trigger-execute-button"
+						:node-name="nodeName"
+						size="medium"
+						telemetry-source="inputs"
+						@execute="onNodeExecute"
+					/>
+				</div>
+				<div v-else>
+					<n8n-text tag="div" size="large" color="text-dark" class="mb-2xs" bold>{{
+						listeningTitle
+					}}</n8n-text>
+					<div :class="[$style.shake, 'mb-xs']">
+						<n8n-text tag="div">
+							{{ listeningHint }}
+						</n8n-text>
+					</div>
+					<div v-if="displayChatButton">
+						<n8n-button class="mb-xl" @click="openWebhookUrl()">
+							{{ $locale.baseText('ndv.trigger.chatTrigger.openChat') }}
+						</n8n-button>
+					</div>
+
+					<NodeExecuteButton
+						data-test-id="trigger-execute-button"
+						:node-name="nodeName"
+						size="medium"
+						telemetry-source="inputs"
+						@execute="onNodeExecute"
+					/>
+				</div>
+			</div>
+			<div v-else key="default">
+				<div v-if="isActivelyPolling" class="mb-xl">
+					<n8n-spinner type="ring" />
+				</div>
+
+				<div :class="$style.action">
+					<div :class="$style.header">
+						<n8n-heading v-if="header" tag="h1" bold>
+							{{ header }}
+						</n8n-heading>
+						<n8n-text v-if="subheader">
+							<span v-text="subheader" />
+						</n8n-text>
+					</div>
+
+					<NodeExecuteButton
+						data-test-id="trigger-execute-button"
+						:node-name="nodeName"
+						size="medium"
+						telemetry-source="inputs"
+						@execute="onNodeExecute"
+					/>
+				</div>
+
+				<n8n-text v-if="activationHint" size="small" @click="onLinkClick">
+					<span v-html="activationHint"></span>&nbsp;
+				</n8n-text>
+				<n8n-link
+					v-if="activationHint && executionsHelp"
+					size="small"
+					@click="expandExecutionHelp"
+					>{{ $locale.baseText('ndv.trigger.moreInfo') }}</n8n-link
+				>
+				<n8n-info-accordion
+					v-if="executionsHelp"
+					ref="help"
+					:class="$style.accordion"
+					:title="$locale.baseText('ndv.trigger.executionsHint.question')"
+					:description="executionsHelp"
+					:event-bus="executionsHelpEventBus"
+					@click:body="onLinkClick"
+				></n8n-info-accordion>
+			</div>
+		</transition>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	position: relative;
diff --git a/packages/editor-ui/src/components/UpdatesPanel.vue b/packages/editor-ui/src/components/UpdatesPanel.vue
index cd8580f0783dd..b96a20c6502da 100644
--- a/packages/editor-ui/src/components/UpdatesPanel.vue
+++ b/packages/editor-ui/src/components/UpdatesPanel.vue
@@ -1,3 +1,41 @@
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+import ModalDrawer from './ModalDrawer.vue';
+import TimeAgo from './TimeAgo.vue';
+import VersionCard from './VersionCard.vue';
+import { VERSIONS_MODAL_KEY } from '../constants';
+import { mapStores } from 'pinia';
+import { useVersionsStore } from '@/stores/versions.store';
+import type { IVersion } from '@/Interface';
+
+export default defineComponent({
+	name: 'UpdatesPanel',
+	components: {
+		ModalDrawer,
+		VersionCard,
+		TimeAgo,
+	},
+	computed: {
+		...mapStores(useVersionsStore),
+		nextVersions(): IVersion[] {
+			return this.versionsStore.nextVersions;
+		},
+		currentVersion(): IVersion | undefined {
+			return this.versionsStore.currentVersion;
+		},
+		infoUrl(): string {
+			return this.versionsStore.infoUrl;
+		},
+	},
+	data() {
+		return {
+			VERSIONS_MODAL_KEY,
+		};
+	},
+});
+</script>
+
 <template>
 	<ModalDrawer
 		:name="VERSIONS_MODAL_KEY"
@@ -51,44 +89,6 @@
 	</ModalDrawer>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-import ModalDrawer from './ModalDrawer.vue';
-import TimeAgo from './TimeAgo.vue';
-import VersionCard from './VersionCard.vue';
-import { VERSIONS_MODAL_KEY } from '../constants';
-import { mapStores } from 'pinia';
-import { useVersionsStore } from '@/stores/versions.store';
-import type { IVersion } from '@/Interface';
-
-export default defineComponent({
-	name: 'UpdatesPanel',
-	components: {
-		ModalDrawer,
-		VersionCard,
-		TimeAgo,
-	},
-	computed: {
-		...mapStores(useVersionsStore),
-		nextVersions(): IVersion[] {
-			return this.versionsStore.nextVersions;
-		},
-		currentVersion(): IVersion | undefined {
-			return this.versionsStore.currentVersion;
-		},
-		infoUrl(): string {
-			return this.versionsStore.infoUrl;
-		},
-	},
-	data() {
-		return {
-			VERSIONS_MODAL_KEY,
-		};
-	},
-});
-</script>
-
 <style module lang="scss">
 .title {
 	margin: 0;
diff --git a/packages/editor-ui/src/components/VersionCard.vue b/packages/editor-ui/src/components/VersionCard.vue
index 9434e5a0bc8ef..1703d21f87056 100644
--- a/packages/editor-ui/src/components/VersionCard.vue
+++ b/packages/editor-ui/src/components/VersionCard.vue
@@ -1,3 +1,22 @@
+<script setup lang="ts">
+import NodeIcon from './NodeIcon.vue';
+import TimeAgo from './TimeAgo.vue';
+import Badge from './Badge.vue';
+import WarningTooltip from './WarningTooltip.vue';
+import type { IVersion, IVersionNode } from '@/Interface';
+import { useI18n } from '@/composables/useI18n';
+
+defineProps<{
+	version: IVersion;
+}>();
+
+const i18n = useI18n();
+
+const nodeName = (node: IVersionNode): string => {
+	return node !== null ? node.displayName : i18n.baseText('versionCard.unknown');
+};
+</script>
+
 <template>
 	<a
 		v-if="version"
@@ -51,25 +70,6 @@
 	</a>
 </template>
 
-<script setup lang="ts">
-import NodeIcon from './NodeIcon.vue';
-import TimeAgo from './TimeAgo.vue';
-import Badge from './Badge.vue';
-import WarningTooltip from './WarningTooltip.vue';
-import type { IVersion, IVersionNode } from '@/Interface';
-import { useI18n } from '@/composables/useI18n';
-
-defineProps<{
-	version: IVersion;
-}>();
-
-const i18n = useI18n();
-
-const nodeName = (node: IVersionNode): string => {
-	return node !== null ? node.displayName : i18n.baseText('versionCard.unknown');
-};
-</script>
-
 <style module lang="scss">
 .card {
 	background-color: $version-card-background-color;
diff --git a/packages/editor-ui/src/components/WorkerList.ee.vue b/packages/editor-ui/src/components/WorkerList.ee.vue
index 0c4f8baa7a7d5..bbae452b05020 100644
--- a/packages/editor-ui/src/components/WorkerList.ee.vue
+++ b/packages/editor-ui/src/components/WorkerList.ee.vue
@@ -1,23 +1,3 @@
-<template>
-	<div>
-		<PushConnectionTracker class="actions"></PushConnectionTracker>
-		<div :class="$style.workerListHeader">
-			<n8n-heading tag="h1" size="2xlarge">{{ pageTitle }}</n8n-heading>
-		</div>
-		<div v-if="!initialStatusReceived">
-			<n8n-spinner />
-		</div>
-		<div v-else>
-			<div v-if="workerIds.length === 0">{{ $locale.baseText('workerList.empty') }}</div>
-			<div v-else>
-				<div v-for="workerId in workerIds" :key="workerId" :class="$style.card">
-					<WorkerCard :worker-id="workerId" data-test-id="worker-card" />
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -119,6 +99,26 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div>
+		<PushConnectionTracker class="actions"></PushConnectionTracker>
+		<div :class="$style.workerListHeader">
+			<n8n-heading tag="h1" size="2xlarge">{{ pageTitle }}</n8n-heading>
+		</div>
+		<div v-if="!initialStatusReceived">
+			<n8n-spinner />
+		</div>
+		<div v-else>
+			<div v-if="workerIds.length === 0">{{ $locale.baseText('workerList.empty') }}</div>
+			<div v-else>
+				<div v-for="workerId in workerIds" :key="workerId" :class="$style.card">
+					<WorkerCard :worker-id="workerId" data-test-id="worker-card" />
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style module lang="scss">
 .workerListHeader {
 	display: flex;
diff --git a/packages/editor-ui/src/components/Workers/WorkerAccordion.ee.vue b/packages/editor-ui/src/components/Workers/WorkerAccordion.ee.vue
index 39b9b15b9a369..7a5d080050b9b 100644
--- a/packages/editor-ui/src/components/Workers/WorkerAccordion.ee.vue
+++ b/packages/editor-ui/src/components/Workers/WorkerAccordion.ee.vue
@@ -1,18 +1,3 @@
-<template>
-	<div :class="['accordion', $style.container]">
-		<div :class="{ [$style.header]: true, [$style.expanded]: expanded }" @click="toggle">
-			<n8n-icon :icon="icon" :color="iconColor" size="small" class="mr-2xs" />
-			<n8n-text :class="$style.headerText" color="text-base" size="small" align="left" bold>
-				<slot name="title"></slot>
-			</n8n-text>
-			<n8n-icon :icon="expanded ? 'chevron-up' : 'chevron-down'" bold />
-		</div>
-		<div v-if="expanded" :class="{ [$style.description]: true, [$style.collapsed]: !expanded }">
-			<slot name="content"></slot>
-		</div>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { ref } from 'vue';
 
@@ -36,6 +21,21 @@ function toggle() {
 }
 </script>
 
+<template>
+	<div :class="['accordion', $style.container]">
+		<div :class="{ [$style.header]: true, [$style.expanded]: expanded }" @click="toggle">
+			<n8n-icon :icon="icon" :color="iconColor" size="small" class="mr-2xs" />
+			<n8n-text :class="$style.headerText" color="text-base" size="small" align="left" bold>
+				<slot name="title"></slot>
+			</n8n-text>
+			<n8n-icon :icon="expanded ? 'chevron-up' : 'chevron-down'" bold />
+		</div>
+		<div v-if="expanded" :class="{ [$style.description]: true, [$style.collapsed]: !expanded }">
+			<slot name="content"></slot>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	width: 100%;
diff --git a/packages/editor-ui/src/components/Workers/WorkerCard.ee.vue b/packages/editor-ui/src/components/Workers/WorkerCard.ee.vue
index ac8d09aaf0ec7..541a04e831faf 100644
--- a/packages/editor-ui/src/components/Workers/WorkerCard.ee.vue
+++ b/packages/editor-ui/src/components/Workers/WorkerCard.ee.vue
@@ -1,38 +1,3 @@
-<template>
-	<n8n-card v-if="worker" :class="$style.cardLink">
-		<template #header>
-			<n8n-heading
-				tag="h2"
-				bold
-				:class="stale ? [$style.cardHeading, $style.stale] : [$style.cardHeading]"
-				data-test-id="worker-card-name"
-			>
-				Name: {{ worker.workerId }} ({{ worker.hostname }}) <br />
-				Average Load: {{ averageWorkerLoadFromLoadsAsString(worker.loadAvg ?? [0]) }} | Free Memory:
-				{{ memAsGb(worker.freeMem).toFixed(2) }}GB / {{ memAsGb(worker.totalMem).toFixed(2) }}GB
-				{{ stale ? ' (stale)' : '' }}
-			</n8n-heading>
-		</template>
-		<div :class="$style.cardDescription">
-			<n8n-text color="text-light" size="small" :class="$style.container">
-				<span
-					>{{ $locale.baseText('workerList.item.lastUpdated') }} {{ secondsSinceLastUpdateString }}s
-					ago | n8n-Version: {{ worker.version }} | Architecture: {{ worker.arch }} (
-					{{ worker.platform }}) | Uptime: {{ upTime(worker.uptime) }}</span
-				>
-				<WorkerJobAccordion :items="worker.runningJobsSummary" />
-				<WorkerNetAccordion :items="sortedWorkerInterfaces" />
-				<WorkerChartsAccordion :worker-id="worker.workerId" />
-			</n8n-text>
-		</div>
-		<template #append>
-			<div ref="cardActions" :class="$style.cardActions">
-				<!-- For future Worker actions -->
-			</div>
-		</template>
-	</n8n-card>
-</template>
-
 <script setup lang="ts">
 import { useOrchestrationStore } from '@/stores/orchestration.store';
 import type { IPushDataWorkerStatusPayload } from '@/Interface';
@@ -88,6 +53,41 @@ onBeforeUnmount(() => {
 });
 </script>
 
+<template>
+	<n8n-card v-if="worker" :class="$style.cardLink">
+		<template #header>
+			<n8n-heading
+				tag="h2"
+				bold
+				:class="stale ? [$style.cardHeading, $style.stale] : [$style.cardHeading]"
+				data-test-id="worker-card-name"
+			>
+				Name: {{ worker.workerId }} ({{ worker.hostname }}) <br />
+				Average Load: {{ averageWorkerLoadFromLoadsAsString(worker.loadAvg ?? [0]) }} | Free Memory:
+				{{ memAsGb(worker.freeMem).toFixed(2) }}GB / {{ memAsGb(worker.totalMem).toFixed(2) }}GB
+				{{ stale ? ' (stale)' : '' }}
+			</n8n-heading>
+		</template>
+		<div :class="$style.cardDescription">
+			<n8n-text color="text-light" size="small" :class="$style.container">
+				<span
+					>{{ $locale.baseText('workerList.item.lastUpdated') }} {{ secondsSinceLastUpdateString }}s
+					ago | n8n-Version: {{ worker.version }} | Architecture: {{ worker.arch }} (
+					{{ worker.platform }}) | Uptime: {{ upTime(worker.uptime) }}</span
+				>
+				<WorkerJobAccordion :items="worker.runningJobsSummary" />
+				<WorkerNetAccordion :items="sortedWorkerInterfaces" />
+				<WorkerChartsAccordion :worker-id="worker.workerId" />
+			</n8n-text>
+		</div>
+		<template #append>
+			<div ref="cardActions" :class="$style.cardActions">
+				<!-- For future Worker actions -->
+			</div>
+		</template>
+	</n8n-card>
+</template>
+
 <style lang="scss" module>
 .container {
 	width: 100%;
diff --git a/packages/editor-ui/src/components/Workers/WorkerChartsAccordion.ee.vue b/packages/editor-ui/src/components/Workers/WorkerChartsAccordion.ee.vue
index 7d930acd21b5d..4383f59673ceb 100644
--- a/packages/editor-ui/src/components/Workers/WorkerChartsAccordion.ee.vue
+++ b/packages/editor-ui/src/components/Workers/WorkerChartsAccordion.ee.vue
@@ -1,36 +1,3 @@
-<template>
-	<WorkerAccordion icon="tasks" icon-color="black" :initial-expanded="false">
-		<template #title>
-			{{ $locale.baseText('workerList.item.chartsTitle') }}
-		</template>
-		<template #content>
-			<div :class="$style.charts">
-				<Chart
-					ref="chartRefJobs"
-					type="line"
-					:data="dataJobs"
-					:options="optionsJobs"
-					:class="$style.chart"
-				/>
-				<Chart
-					ref="chartRefCPU"
-					type="line"
-					:data="dataCPU"
-					:options="optionsCPU"
-					:class="$style.chart"
-				/>
-				<Chart
-					ref="chartRefMemory"
-					type="line"
-					:data="dataMemory"
-					:options="optionsMemory"
-					:class="$style.chart"
-				/>
-			</div>
-		</template>
-	</WorkerAccordion>
-</template>
-
 <script setup lang="ts">
 import WorkerAccordion from './WorkerAccordion.ee.vue';
 import { WORKER_HISTORY_LENGTH, useOrchestrationStore } from '@/stores/orchestration.store';
@@ -124,6 +91,39 @@ orchestrationStore.$onAction(({ name, store }) => {
 });
 </script>
 
+<template>
+	<WorkerAccordion icon="tasks" icon-color="black" :initial-expanded="false">
+		<template #title>
+			{{ $locale.baseText('workerList.item.chartsTitle') }}
+		</template>
+		<template #content>
+			<div :class="$style.charts">
+				<Chart
+					ref="chartRefJobs"
+					type="line"
+					:data="dataJobs"
+					:options="optionsJobs"
+					:class="$style.chart"
+				/>
+				<Chart
+					ref="chartRefCPU"
+					type="line"
+					:data="dataCPU"
+					:options="optionsCPU"
+					:class="$style.chart"
+				/>
+				<Chart
+					ref="chartRefMemory"
+					type="line"
+					:data="dataMemory"
+					:options="optionsMemory"
+					:class="$style.chart"
+				/>
+			</div>
+		</template>
+	</WorkerAccordion>
+</template>
+
 <style lang="scss" module>
 .accordionItems {
 	display: flex;
diff --git a/packages/editor-ui/src/components/Workers/WorkerJobAccordion.ee.vue b/packages/editor-ui/src/components/Workers/WorkerJobAccordion.ee.vue
index c8f6f949b3049..2a770eef67200 100644
--- a/packages/editor-ui/src/components/Workers/WorkerJobAccordion.ee.vue
+++ b/packages/editor-ui/src/components/Workers/WorkerJobAccordion.ee.vue
@@ -1,3 +1,21 @@
+<script setup lang="ts">
+import type { WorkerJobStatusSummary } from '@/Interface';
+import WorkerAccordion from './WorkerAccordion.ee.vue';
+
+const props = defineProps<{
+	items: WorkerJobStatusSummary[];
+}>();
+
+function runningSince(started: Date): string {
+	let seconds = Math.floor((new Date().getTime() - started.getTime()) / 1000);
+	const hrs = Math.floor(seconds / 3600);
+	seconds -= hrs * 3600;
+	const mnts = Math.floor(seconds / 60);
+	seconds -= mnts * 60;
+	return `${hrs}h ${mnts}m ${Math.floor(seconds)}s`;
+}
+</script>
+
 <template>
 	<WorkerAccordion icon="tasks" icon-color="black" :initial-expanded="true">
 		<template #title>
@@ -27,24 +45,6 @@
 	</WorkerAccordion>
 </template>
 
-<script setup lang="ts">
-import type { WorkerJobStatusSummary } from '@/Interface';
-import WorkerAccordion from './WorkerAccordion.ee.vue';
-
-const props = defineProps<{
-	items: WorkerJobStatusSummary[];
-}>();
-
-function runningSince(started: Date): string {
-	let seconds = Math.floor((new Date().getTime() - started.getTime()) / 1000);
-	const hrs = Math.floor(seconds / 3600);
-	seconds -= hrs * 3600;
-	const mnts = Math.floor(seconds / 60);
-	seconds -= mnts * 60;
-	return `${hrs}h ${mnts}m ${Math.floor(seconds)}s`;
-}
-</script>
-
 <style lang="scss" module>
 .accordionItems {
 	display: flex;
diff --git a/packages/editor-ui/src/components/Workers/WorkerNetAccordion.ee.vue b/packages/editor-ui/src/components/Workers/WorkerNetAccordion.ee.vue
index 203ad6895d916..517fc98ac01fc 100644
--- a/packages/editor-ui/src/components/Workers/WorkerNetAccordion.ee.vue
+++ b/packages/editor-ui/src/components/Workers/WorkerNetAccordion.ee.vue
@@ -1,24 +1,3 @@
-<template>
-	<WorkerAccordion icon="tasks" icon-color="black" :initial-expanded="false">
-		<template #title>
-			{{ $locale.baseText('workerList.item.netListTitle') }} ({{ items.length }})
-		</template>
-		<template #content>
-			<div v-if="props.items.length > 0" :class="$style.accordionItems">
-				<div
-					v-for="item in props.items"
-					:key="item.address"
-					:class="$style.accordionItem"
-					@click="onCopyToClipboard(item.address)"
-				>
-					{{ item.family }}: <span :class="$style.clickable">{{ item.address }}</span>
-					{{ item.internal ? '(internal)' : '' }}
-				</div>
-			</div>
-		</template>
-	</WorkerAccordion>
-</template>
-
 <script setup lang="ts">
 import type { IPushDataWorkerStatusPayload } from '@/Interface';
 import WorkerAccordion from './WorkerAccordion.ee.vue';
@@ -45,6 +24,27 @@ function onCopyToClipboard(content: string) {
 }
 </script>
 
+<template>
+	<WorkerAccordion icon="tasks" icon-color="black" :initial-expanded="false">
+		<template #title>
+			{{ $locale.baseText('workerList.item.netListTitle') }} ({{ items.length }})
+		</template>
+		<template #content>
+			<div v-if="props.items.length > 0" :class="$style.accordionItems">
+				<div
+					v-for="item in props.items"
+					:key="item.address"
+					:class="$style.accordionItem"
+					@click="onCopyToClipboard(item.address)"
+				>
+					{{ item.family }}: <span :class="$style.clickable">{{ item.address }}</span>
+					{{ item.internal ? '(internal)' : '' }}
+				</div>
+			</div>
+		</template>
+	</WorkerAccordion>
+</template>
+
 <style lang="scss" module>
 .accordionItems {
 	display: flex;
diff --git a/packages/editor-ui/src/components/WorkflowLMChat/MessageOptionAction.vue b/packages/editor-ui/src/components/WorkflowLMChat/MessageOptionAction.vue
index ce6ef7d64e249..69bb16737d174 100644
--- a/packages/editor-ui/src/components/WorkflowLMChat/MessageOptionAction.vue
+++ b/packages/editor-ui/src/components/WorkflowLMChat/MessageOptionAction.vue
@@ -1,14 +1,3 @@
-<template>
-	<N8nTooltip :placement="placement">
-		<button :class="$style.button" :style="{ color: '#aaa' }" @click="emit('click')">
-			<N8nIcon :icon="icon" size="small" />
-		</button>
-		<template #content>
-			{{ label }}
-		</template>
-	</N8nTooltip>
-</template>
-
 <script setup lang="ts">
 const emit = defineEmits<{
 	click: [];
@@ -21,6 +10,17 @@ defineProps<{
 }>();
 </script>
 
+<template>
+	<N8nTooltip :placement="placement">
+		<button :class="$style.button" :style="{ color: '#aaa' }" @click="emit('click')">
+			<N8nIcon :icon="icon" size="small" />
+		</button>
+		<template #content>
+			{{ label }}
+		</template>
+	</N8nTooltip>
+</template>
+
 <style module>
 .button {
 	background: none;
diff --git a/packages/editor-ui/src/components/WorkflowLMChat/MessageOptionTooltip.vue b/packages/editor-ui/src/components/WorkflowLMChat/MessageOptionTooltip.vue
index 251a67d2bf2c6..008993fee522d 100644
--- a/packages/editor-ui/src/components/WorkflowLMChat/MessageOptionTooltip.vue
+++ b/packages/editor-ui/src/components/WorkflowLMChat/MessageOptionTooltip.vue
@@ -1,3 +1,9 @@
+<script setup lang="ts">
+defineProps<{
+	placement: 'left' | 'right';
+}>();
+</script>
+
 <template>
 	<n8n-info-tip type="tooltip" theme="info-light" :tooltip-placement="placement">
 		<n8n-text :bold="true" size="small">
@@ -6,10 +12,4 @@
 	</n8n-info-tip>
 </template>
 
-<script setup lang="ts">
-defineProps<{
-	placement: 'left' | 'right';
-}>();
-</script>
-
 <style module lang="scss"></style>
diff --git a/packages/editor-ui/src/components/WorkflowLMChat/WorkflowLMChat.vue b/packages/editor-ui/src/components/WorkflowLMChat/WorkflowLMChat.vue
index 333a16cc3661e..9d032f5fa1bb4 100644
--- a/packages/editor-ui/src/components/WorkflowLMChat/WorkflowLMChat.vue
+++ b/packages/editor-ui/src/components/WorkflowLMChat/WorkflowLMChat.vue
@@ -1,80 +1,3 @@
-<template>
-	<Modal
-		:name="WORKFLOW_LM_CHAT_MODAL_KEY"
-		width="80%"
-		max-height="80%"
-		:title="
-			locale.baseText('chat.window.title', {
-				interpolate: {
-					nodeName: connectedNode?.name || locale.baseText('chat.window.noChatNode'),
-				},
-			})
-		"
-		:event-bus="modalBus"
-		:scrollable="false"
-		@keydown.stop
-	>
-		<template #content>
-			<div
-				:class="$style.workflowLmChat"
-				data-test-id="workflow-lm-chat-dialog"
-				:style="messageVars"
-			>
-				<MessagesList :messages="messages" :class="[$style.messages, 'ignore-key-press']">
-					<template #beforeMessage="{ message }">
-						<MessageOptionTooltip
-							v-if="message.sender === 'bot' && !message.id.includes('preload')"
-							placement="right"
-						>
-							{{ locale.baseText('chat.window.chat.chatMessageOptions.executionId') }}:
-							<a href="#" @click="displayExecution(message.id)">{{ message.id }}</a>
-						</MessageOptionTooltip>
-
-						<MessageOptionAction
-							v-if="isTextMessage(message) && message.sender === 'user'"
-							data-test-id="repost-message-button"
-							icon="redo"
-							:label="locale.baseText('chat.window.chat.chatMessageOptions.repostMessage')"
-							placement="left"
-							@click="repostMessage(message)"
-						/>
-
-						<MessageOptionAction
-							v-if="isTextMessage(message) && message.sender === 'user'"
-							data-test-id="reuse-message-button"
-							icon="copy"
-							:label="locale.baseText('chat.window.chat.chatMessageOptions.reuseMessage')"
-							placement="left"
-							@click="reuseMessage(message)"
-						/>
-					</template>
-				</MessagesList>
-				<div v-if="node" :class="$style.logsWrapper" data-test-id="lm-chat-logs">
-					<n8n-text :class="$style.logsTitle" tag="p" size="large">{{
-						locale.baseText('chat.window.logs')
-					}}</n8n-text>
-					<div :class="$style.logs">
-						<LazyRunDataAi :key="messages.length" :node="node" hide-title slim />
-					</div>
-				</div>
-			</div>
-		</template>
-		<template #footer>
-			<ChatInput
-				:class="$style.messagesInput"
-				data-test-id="lm-chat-inputs"
-				@arrow-key-down="onArrowKeyDown"
-			/>
-			<n8n-info-tip class="mt-s">
-				{{ locale.baseText('chatEmbed.infoTip.description') }}
-				<a @click="uiStore.openModal(CHAT_EMBED_MODAL_KEY)">
-					{{ locale.baseText('chatEmbed.infoTip.link') }}
-				</a>
-			</n8n-info-tip>
-		</template>
-	</Modal>
-</template>
-
 <script setup lang="ts">
 import type { Ref } from 'vue';
 import { defineAsyncComponent, provide, ref, computed, onMounted, nextTick } from 'vue';
@@ -589,6 +512,83 @@ onMounted(() => {
 });
 </script>
 
+<template>
+	<Modal
+		:name="WORKFLOW_LM_CHAT_MODAL_KEY"
+		width="80%"
+		max-height="80%"
+		:title="
+			locale.baseText('chat.window.title', {
+				interpolate: {
+					nodeName: connectedNode?.name || locale.baseText('chat.window.noChatNode'),
+				},
+			})
+		"
+		:event-bus="modalBus"
+		:scrollable="false"
+		@keydown.stop
+	>
+		<template #content>
+			<div
+				:class="$style.workflowLmChat"
+				data-test-id="workflow-lm-chat-dialog"
+				:style="messageVars"
+			>
+				<MessagesList :messages="messages" :class="[$style.messages, 'ignore-key-press']">
+					<template #beforeMessage="{ message }">
+						<MessageOptionTooltip
+							v-if="message.sender === 'bot' && !message.id.includes('preload')"
+							placement="right"
+						>
+							{{ locale.baseText('chat.window.chat.chatMessageOptions.executionId') }}:
+							<a href="#" @click="displayExecution(message.id)">{{ message.id }}</a>
+						</MessageOptionTooltip>
+
+						<MessageOptionAction
+							v-if="isTextMessage(message) && message.sender === 'user'"
+							data-test-id="repost-message-button"
+							icon="redo"
+							:label="locale.baseText('chat.window.chat.chatMessageOptions.repostMessage')"
+							placement="left"
+							@click="repostMessage(message)"
+						/>
+
+						<MessageOptionAction
+							v-if="isTextMessage(message) && message.sender === 'user'"
+							data-test-id="reuse-message-button"
+							icon="copy"
+							:label="locale.baseText('chat.window.chat.chatMessageOptions.reuseMessage')"
+							placement="left"
+							@click="reuseMessage(message)"
+						/>
+					</template>
+				</MessagesList>
+				<div v-if="node" :class="$style.logsWrapper" data-test-id="lm-chat-logs">
+					<n8n-text :class="$style.logsTitle" tag="p" size="large">{{
+						locale.baseText('chat.window.logs')
+					}}</n8n-text>
+					<div :class="$style.logs">
+						<LazyRunDataAi :key="messages.length" :node="node" hide-title slim />
+					</div>
+				</div>
+			</div>
+		</template>
+		<template #footer>
+			<ChatInput
+				:class="$style.messagesInput"
+				data-test-id="lm-chat-inputs"
+				@arrow-key-down="onArrowKeyDown"
+			/>
+			<n8n-info-tip class="mt-s">
+				{{ locale.baseText('chatEmbed.infoTip.description') }}
+				<a @click="uiStore.openModal(CHAT_EMBED_MODAL_KEY)">
+					{{ locale.baseText('chatEmbed.infoTip.link') }}
+				</a>
+			</n8n-info-tip>
+		</template>
+	</Modal>
+</template>
+
 <style lang="scss">
 .chat-message-markdown ul,
 .chat-message-markdown ol {
diff --git a/packages/editor-ui/src/components/WorkflowPreview.vue b/packages/editor-ui/src/components/WorkflowPreview.vue
index 9ca2616880f9b..4f295b924d885 100644
--- a/packages/editor-ui/src/components/WorkflowPreview.vue
+++ b/packages/editor-ui/src/components/WorkflowPreview.vue
@@ -1,27 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<div v-if="loaderType === 'image' && !showPreview" :class="$style.imageLoader">
-			<n8n-loading :loading="!showPreview" :rows="1" variant="image" />
-		</div>
-		<div v-else-if="loaderType === 'spinner' && !showPreview" :class="$style.spinner">
-			<n8n-spinner type="dots" />
-		</div>
-		<iframe
-			ref="iframeRef"
-			:class="{
-				[$style.workflow]: !nodeViewDetailsOpened,
-				[$style.executionPreview]: mode === 'execution',
-				[$style.openNDV]: nodeViewDetailsOpened,
-				[$style.show]: showPreview,
-			}"
-			:src="iframeSrc"
-			data-test-id="workflow-preview-iframe"
-			@mouseenter="onMouseEnter"
-			@mouseleave="onMouseLeave"
-		/>
-	</div>
-</template>
-
 <script setup lang="ts">
 import { onMounted, onBeforeUnmount, ref, computed, watch } from 'vue';
 import { useI18n } from '@/composables/useI18n';
@@ -215,6 +191,30 @@ watch(
 );
 </script>
 
+<template>
+	<div :class="$style.container">
+		<div v-if="loaderType === 'image' && !showPreview" :class="$style.imageLoader">
+			<n8n-loading :loading="!showPreview" :rows="1" variant="image" />
+		</div>
+		<div v-else-if="loaderType === 'spinner' && !showPreview" :class="$style.spinner">
+			<n8n-spinner type="dots" />
+		</div>
+		<iframe
+			ref="iframeRef"
+			:class="{
+				[$style.workflow]: !nodeViewDetailsOpened,
+				[$style.executionPreview]: mode === 'execution',
+				[$style.openNDV]: nodeViewDetailsOpened,
+				[$style.show]: showPreview,
+			}"
+			:src="iframeSrc"
+			data-test-id="workflow-preview-iframe"
+			@mouseenter="onMouseEnter"
+			@mouseleave="onMouseLeave"
+		/>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	width: 100%;
diff --git a/packages/editor-ui/src/components/WorkflowSettings.vue b/packages/editor-ui/src/components/WorkflowSettings.vue
index 42eac67db091c..2d915611ff07a 100644
--- a/packages/editor-ui/src/components/WorkflowSettings.vue
+++ b/packages/editor-ui/src/components/WorkflowSettings.vue
@@ -1,375 +1,22 @@
-<template>
-	<Modal
-		:name="WORKFLOW_SETTINGS_MODAL_KEY"
-		width="65%"
-		max-height="80%"
-		:title="
-			$locale.baseText('workflowSettings.settingsFor', {
-				interpolate: { workflowName, workflowId },
-			})
-		"
-		:event-bus="modalBus"
-		:scrollable="true"
-	>
-		<template #content>
-			<div v-loading="isLoading" class="workflow-settings" data-test-id="workflow-settings-dialog">
-				<el-row>
-					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.executionOrder') + ':' }}
-					</el-col>
-					<el-col :span="14" class="ignore-key-press">
-						<n8n-select
-							v-model="workflowSettings.executionOrder"
-							placeholder="Select Execution Order"
-							size="medium"
-							filterable
-							:disabled="readOnlyEnv || !workflowPermissions.update"
-							:limit-popper-width="true"
-							data-test-id="workflow-settings-execution-order"
-						>
-							<n8n-option
-								v-for="option in executionOrderOptions"
-								:key="option.key"
-								:label="option.value"
-								:value="option.key"
-							>
-							</n8n-option>
-						</n8n-select>
-					</el-col>
-				</el-row>
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { mapStores } from 'pinia';
 
-				<el-row>
-					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.errorWorkflow') + ':' }}
-						<n8n-tooltip placement="top">
-							<template #content>
-								<div v-html="helpTexts.errorWorkflow"></div>
-							</template>
-							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
-					</el-col>
-					<el-col :span="14" class="ignore-key-press">
-						<n8n-select
-							v-model="workflowSettings.errorWorkflow"
-							placeholder="Select Workflow"
-							filterable
-							:disabled="readOnlyEnv || !workflowPermissions.update"
-							:limit-popper-width="true"
-							data-test-id="workflow-settings-error-workflow"
-						>
-							<n8n-option
-								v-for="item in workflows"
-								:key="item.id"
-								:label="item.name"
-								:value="item.id"
-							>
-							</n8n-option>
-						</n8n-select>
-					</el-col>
-				</el-row>
-				<div v-if="isSharingEnabled" data-test-id="workflow-caller-policy">
-					<el-row>
-						<el-col :span="10" class="setting-name">
-							{{ $locale.baseText('workflowSettings.callerPolicy') + ':' }}
-							<n8n-tooltip placement="top">
-								<template #content>
-									<div v-text="helpTexts.workflowCallerPolicy"></div>
-								</template>
-								<font-awesome-icon icon="question-circle" />
-							</n8n-tooltip>
-						</el-col>
-
-						<el-col :span="14" class="ignore-key-press">
-							<n8n-select
-								v-model="workflowSettings.callerPolicy"
-								:disabled="readOnlyEnv || !workflowPermissions.update"
-								:placeholder="$locale.baseText('workflowSettings.selectOption')"
-								filterable
-								:limit-popper-width="true"
-							>
-								<n8n-option
-									v-for="option of workflowCallerPolicyOptions"
-									:key="option.key"
-									:label="option.value"
-									:value="option.key"
-								>
-								</n8n-option>
-							</n8n-select>
-						</el-col>
-					</el-row>
-					<el-row v-if="workflowSettings.callerPolicy === 'workflowsFromAList'">
-						<el-col :span="10" class="setting-name">
-							{{ $locale.baseText('workflowSettings.callerIds') + ':' }}
-							<n8n-tooltip placement="top">
-								<template #content>
-									<div v-text="helpTexts.workflowCallerIds"></div>
-								</template>
-								<font-awesome-icon icon="question-circle" />
-							</n8n-tooltip>
-						</el-col>
-						<el-col :span="14">
-							<n8n-input
-								v-model="workflowSettings.callerIds"
-								:disabled="readOnlyEnv || !workflowPermissions.update"
-								:placeholder="$locale.baseText('workflowSettings.callerIds.placeholder')"
-								type="text"
-								data-test-id="workflow-caller-policy-workflow-ids"
-								@update:model-value="onCallerIdsInput"
-							/>
-						</el-col>
-					</el-row>
-				</div>
-				<el-row>
-					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.timezone') + ':' }}
-						<n8n-tooltip placement="top">
-							<template #content>
-								<div v-text="helpTexts.timezone"></div>
-							</template>
-							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
-					</el-col>
-					<el-col :span="14" class="ignore-key-press">
-						<n8n-select
-							v-model="workflowSettings.timezone"
-							placeholder="Select Timezone"
-							filterable
-							:disabled="readOnlyEnv || !workflowPermissions.update"
-							:limit-popper-width="true"
-							data-test-id="workflow-settings-timezone"
-						>
-							<n8n-option
-								v-for="timezone of timezones"
-								:key="timezone.key"
-								:label="timezone.value"
-								:value="timezone.key"
-							>
-							</n8n-option>
-						</n8n-select>
-					</el-col>
-				</el-row>
-				<el-row>
-					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.saveDataErrorExecution') + ':' }}
-						<n8n-tooltip placement="top">
-							<template #content>
-								<div v-text="helpTexts.saveDataErrorExecution"></div>
-							</template>
-							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
-					</el-col>
-					<el-col :span="14" class="ignore-key-press">
-						<n8n-select
-							v-model="workflowSettings.saveDataErrorExecution"
-							:placeholder="$locale.baseText('workflowSettings.selectOption')"
-							filterable
-							:disabled="readOnlyEnv || !workflowPermissions.update"
-							:limit-popper-width="true"
-							data-test-id="workflow-settings-save-failed-executions"
-						>
-							<n8n-option
-								v-for="option of saveDataErrorExecutionOptions"
-								:key="option.key"
-								:label="option.value"
-								:value="option.key"
-							>
-							</n8n-option>
-						</n8n-select>
-					</el-col>
-				</el-row>
-				<el-row>
-					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.saveDataSuccessExecution') + ':' }}
-						<n8n-tooltip placement="top">
-							<template #content>
-								<div v-text="helpTexts.saveDataSuccessExecution"></div>
-							</template>
-							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
-					</el-col>
-					<el-col :span="14" class="ignore-key-press">
-						<n8n-select
-							v-model="workflowSettings.saveDataSuccessExecution"
-							:placeholder="$locale.baseText('workflowSettings.selectOption')"
-							filterable
-							:disabled="readOnlyEnv || !workflowPermissions.update"
-							:limit-popper-width="true"
-							data-test-id="workflow-settings-save-success-executions"
-						>
-							<n8n-option
-								v-for="option of saveDataSuccessExecutionOptions"
-								:key="option.key"
-								:label="option.value"
-								:value="option.key"
-							>
-							</n8n-option>
-						</n8n-select>
-					</el-col>
-				</el-row>
-				<el-row>
-					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.saveManualExecutions') + ':' }}
-						<n8n-tooltip placement="top">
-							<template #content>
-								<div v-text="helpTexts.saveManualExecutions"></div>
-							</template>
-							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
-					</el-col>
-					<el-col :span="14" class="ignore-key-press">
-						<n8n-select
-							v-model="workflowSettings.saveManualExecutions"
-							:placeholder="$locale.baseText('workflowSettings.selectOption')"
-							filterable
-							:disabled="readOnlyEnv || !workflowPermissions.update"
-							:limit-popper-width="true"
-							data-test-id="workflow-settings-save-manual-executions"
-						>
-							<n8n-option
-								v-for="option of saveManualOptions"
-								:key="option.key"
-								:label="option.value"
-								:value="option.key"
-							>
-							</n8n-option>
-						</n8n-select>
-					</el-col>
-				</el-row>
-				<el-row>
-					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.saveExecutionProgress') + ':' }}
-						<n8n-tooltip placement="top">
-							<template #content>
-								<div v-text="helpTexts.saveExecutionProgress"></div>
-							</template>
-							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
-					</el-col>
-					<el-col :span="14" class="ignore-key-press">
-						<n8n-select
-							v-model="workflowSettings.saveExecutionProgress"
-							:placeholder="$locale.baseText('workflowSettings.selectOption')"
-							filterable
-							:disabled="readOnlyEnv || !workflowPermissions.update"
-							:limit-popper-width="true"
-							data-test-id="workflow-settings-save-execution-progress"
-						>
-							<n8n-option
-								v-for="option of saveExecutionProgressOptions"
-								:key="option.key"
-								:label="option.value"
-								:value="option.key"
-							>
-							</n8n-option>
-						</n8n-select>
-					</el-col>
-				</el-row>
-				<el-row>
-					<el-col :span="10" class="setting-name">
-						{{ $locale.baseText('workflowSettings.timeoutWorkflow') + ':' }}
-						<n8n-tooltip placement="top">
-							<template #content>
-								<div v-text="helpTexts.executionTimeoutToggle"></div>
-							</template>
-							<font-awesome-icon icon="question-circle" />
-						</n8n-tooltip>
-					</el-col>
-					<el-col :span="14">
-						<div>
-							<el-switch
-								ref="inputField"
-								:disabled="readOnlyEnv || !workflowPermissions.update"
-								:model-value="(workflowSettings.executionTimeout ?? -1) > -1"
-								active-color="#13ce66"
-								data-test-id="workflow-settings-timeout-workflow"
-								@update:model-value="toggleTimeout"
-							></el-switch>
-						</div>
-					</el-col>
-				</el-row>
-				<div
-					v-if="(workflowSettings.executionTimeout ?? -1) > -1"
-					data-test-id="workflow-settings-timeout-form"
-				>
-					<el-row>
-						<el-col :span="10" class="setting-name">
-							{{ $locale.baseText('workflowSettings.timeoutAfter') + ':' }}
-							<n8n-tooltip placement="top">
-								<template #content>
-									<div v-text="helpTexts.executionTimeout"></div>
-								</template>
-								<font-awesome-icon icon="question-circle" />
-							</n8n-tooltip>
-						</el-col>
-						<el-col :span="4">
-							<n8n-input
-								:disabled="readOnlyEnv || !workflowPermissions.update"
-								:model-value="timeoutHMS.hours"
-								:min="0"
-								@update:model-value="(value: string) => setTimeout('hours', value)"
-							>
-								<template #append>{{ $locale.baseText('workflowSettings.hours') }}</template>
-							</n8n-input>
-						</el-col>
-						<el-col :span="4" class="timeout-input">
-							<n8n-input
-								:disabled="readOnlyEnv || !workflowPermissions.update"
-								:model-value="timeoutHMS.minutes"
-								:min="0"
-								:max="60"
-								@update:model-value="(value: string) => setTimeout('minutes', value)"
-							>
-								<template #append>{{ $locale.baseText('workflowSettings.minutes') }}</template>
-							</n8n-input>
-						</el-col>
-						<el-col :span="4" class="timeout-input">
-							<n8n-input
-								:disabled="readOnlyEnv || !workflowPermissions.update"
-								:model-value="timeoutHMS.seconds"
-								:min="0"
-								:max="60"
-								@update:model-value="(value: string) => setTimeout('seconds', value)"
-							>
-								<template #append>{{ $locale.baseText('workflowSettings.seconds') }}</template>
-							</n8n-input>
-						</el-col>
-					</el-row>
-				</div>
-			</div>
-		</template>
-		<template #footer>
-			<div class="action-buttons" data-test-id="workflow-settings-save-button">
-				<n8n-button
-					:disabled="readOnlyEnv || !workflowPermissions.update"
-					:label="$locale.baseText('workflowSettings.save')"
-					size="large"
-					float="right"
-					@click="saveSettings"
-				/>
-			</div>
-		</template>
-	</Modal>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
-
-import { useToast } from '@/composables/useToast';
-import type {
-	ITimeoutHMS,
-	IUser,
-	IWorkflowDataUpdate,
-	IWorkflowDb,
-	IWorkflowSettings,
-	IWorkflowShortResponse,
-} from '@/Interface';
-import Modal from '@/components/Modal.vue';
-import {
-	EnterpriseEditionFeature,
-	PLACEHOLDER_EMPTY_WORKFLOW_ID,
-	WORKFLOW_SETTINGS_MODAL_KEY,
-} from '@/constants';
+import { useToast } from '@/composables/useToast';
+import type {
+	ITimeoutHMS,
+	IUser,
+	IWorkflowDataUpdate,
+	IWorkflowDb,
+	IWorkflowSettings,
+	IWorkflowShortResponse,
+} from '@/Interface';
+import Modal from '@/components/Modal.vue';
+import {
+	EnterpriseEditionFeature,
+	PLACEHOLDER_EMPTY_WORKFLOW_ID,
+	WORKFLOW_SETTINGS_MODAL_KEY,
+} from '@/constants';
 
 import type { WorkflowSettings } from 'n8n-workflow';
 import { deepCopy } from 'n8n-workflow';
@@ -881,6 +528,359 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Modal
+		:name="WORKFLOW_SETTINGS_MODAL_KEY"
+		width="65%"
+		max-height="80%"
+		:title="
+			$locale.baseText('workflowSettings.settingsFor', {
+				interpolate: { workflowName, workflowId },
+			})
+		"
+		:event-bus="modalBus"
+		:scrollable="true"
+	>
+		<template #content>
+			<div v-loading="isLoading" class="workflow-settings" data-test-id="workflow-settings-dialog">
+				<el-row>
+					<el-col :span="10" class="setting-name">
+						{{ $locale.baseText('workflowSettings.executionOrder') + ':' }}
+					</el-col>
+					<el-col :span="14" class="ignore-key-press">
+						<n8n-select
+							v-model="workflowSettings.executionOrder"
+							placeholder="Select Execution Order"
+							size="medium"
+							filterable
+							:disabled="readOnlyEnv || !workflowPermissions.update"
+							:limit-popper-width="true"
+							data-test-id="workflow-settings-execution-order"
+						>
+							<n8n-option
+								v-for="option in executionOrderOptions"
+								:key="option.key"
+								:label="option.value"
+								:value="option.key"
+							>
+							</n8n-option>
+						</n8n-select>
+					</el-col>
+				</el-row>
+
+				<el-row>
+					<el-col :span="10" class="setting-name">
+						{{ $locale.baseText('workflowSettings.errorWorkflow') + ':' }}
+						<n8n-tooltip placement="top">
+							<template #content>
+								<div v-html="helpTexts.errorWorkflow"></div>
+							</template>
+							<font-awesome-icon icon="question-circle" />
+						</n8n-tooltip>
+					</el-col>
+					<el-col :span="14" class="ignore-key-press">
+						<n8n-select
+							v-model="workflowSettings.errorWorkflow"
+							placeholder="Select Workflow"
+							filterable
+							:disabled="readOnlyEnv || !workflowPermissions.update"
+							:limit-popper-width="true"
+							data-test-id="workflow-settings-error-workflow"
+						>
+							<n8n-option
+								v-for="item in workflows"
+								:key="item.id"
+								:label="item.name"
+								:value="item.id"
+							>
+							</n8n-option>
+						</n8n-select>
+					</el-col>
+				</el-row>
+				<div v-if="isSharingEnabled" data-test-id="workflow-caller-policy">
+					<el-row>
+						<el-col :span="10" class="setting-name">
+							{{ $locale.baseText('workflowSettings.callerPolicy') + ':' }}
+							<n8n-tooltip placement="top">
+								<template #content>
+									<div v-text="helpTexts.workflowCallerPolicy"></div>
+								</template>
+								<font-awesome-icon icon="question-circle" />
+							</n8n-tooltip>
+						</el-col>
+
+						<el-col :span="14" class="ignore-key-press">
+							<n8n-select
+								v-model="workflowSettings.callerPolicy"
+								:disabled="readOnlyEnv || !workflowPermissions.update"
+								:placeholder="$locale.baseText('workflowSettings.selectOption')"
+								filterable
+								:limit-popper-width="true"
+							>
+								<n8n-option
+									v-for="option of workflowCallerPolicyOptions"
+									:key="option.key"
+									:label="option.value"
+									:value="option.key"
+								>
+								</n8n-option>
+							</n8n-select>
+						</el-col>
+					</el-row>
+					<el-row v-if="workflowSettings.callerPolicy === 'workflowsFromAList'">
+						<el-col :span="10" class="setting-name">
+							{{ $locale.baseText('workflowSettings.callerIds') + ':' }}
+							<n8n-tooltip placement="top">
+								<template #content>
+									<div v-text="helpTexts.workflowCallerIds"></div>
+								</template>
+								<font-awesome-icon icon="question-circle" />
+							</n8n-tooltip>
+						</el-col>
+						<el-col :span="14">
+							<n8n-input
+								v-model="workflowSettings.callerIds"
+								:disabled="readOnlyEnv || !workflowPermissions.update"
+								:placeholder="$locale.baseText('workflowSettings.callerIds.placeholder')"
+								type="text"
+								data-test-id="workflow-caller-policy-workflow-ids"
+								@update:model-value="onCallerIdsInput"
+							/>
+						</el-col>
+					</el-row>
+				</div>
+				<el-row>
+					<el-col :span="10" class="setting-name">
+						{{ $locale.baseText('workflowSettings.timezone') + ':' }}
+						<n8n-tooltip placement="top">
+							<template #content>
+								<div v-text="helpTexts.timezone"></div>
+							</template>
+							<font-awesome-icon icon="question-circle" />
+						</n8n-tooltip>
+					</el-col>
+					<el-col :span="14" class="ignore-key-press">
+						<n8n-select
+							v-model="workflowSettings.timezone"
+							placeholder="Select Timezone"
+							filterable
+							:disabled="readOnlyEnv || !workflowPermissions.update"
+							:limit-popper-width="true"
+							data-test-id="workflow-settings-timezone"
+						>
+							<n8n-option
+								v-for="timezone of timezones"
+								:key="timezone.key"
+								:label="timezone.value"
+								:value="timezone.key"
+							>
+							</n8n-option>
+						</n8n-select>
+					</el-col>
+				</el-row>
+				<el-row>
+					<el-col :span="10" class="setting-name">
+						{{ $locale.baseText('workflowSettings.saveDataErrorExecution') + ':' }}
+						<n8n-tooltip placement="top">
+							<template #content>
+								<div v-text="helpTexts.saveDataErrorExecution"></div>
+							</template>
+							<font-awesome-icon icon="question-circle" />
+						</n8n-tooltip>
+					</el-col>
+					<el-col :span="14" class="ignore-key-press">
+						<n8n-select
+							v-model="workflowSettings.saveDataErrorExecution"
+							:placeholder="$locale.baseText('workflowSettings.selectOption')"
+							filterable
+							:disabled="readOnlyEnv || !workflowPermissions.update"
+							:limit-popper-width="true"
+							data-test-id="workflow-settings-save-failed-executions"
+						>
+							<n8n-option
+								v-for="option of saveDataErrorExecutionOptions"
+								:key="option.key"
+								:label="option.value"
+								:value="option.key"
+							>
+							</n8n-option>
+						</n8n-select>
+					</el-col>
+				</el-row>
+				<el-row>
+					<el-col :span="10" class="setting-name">
+						{{ $locale.baseText('workflowSettings.saveDataSuccessExecution') + ':' }}
+						<n8n-tooltip placement="top">
+							<template #content>
+								<div v-text="helpTexts.saveDataSuccessExecution"></div>
+							</template>
+							<font-awesome-icon icon="question-circle" />
+						</n8n-tooltip>
+					</el-col>
+					<el-col :span="14" class="ignore-key-press">
+						<n8n-select
+							v-model="workflowSettings.saveDataSuccessExecution"
+							:placeholder="$locale.baseText('workflowSettings.selectOption')"
+							filterable
+							:disabled="readOnlyEnv || !workflowPermissions.update"
+							:limit-popper-width="true"
+							data-test-id="workflow-settings-save-success-executions"
+						>
+							<n8n-option
+								v-for="option of saveDataSuccessExecutionOptions"
+								:key="option.key"
+								:label="option.value"
+								:value="option.key"
+							>
+							</n8n-option>
+						</n8n-select>
+					</el-col>
+				</el-row>
+				<el-row>
+					<el-col :span="10" class="setting-name">
+						{{ $locale.baseText('workflowSettings.saveManualExecutions') + ':' }}
+						<n8n-tooltip placement="top">
+							<template #content>
+								<div v-text="helpTexts.saveManualExecutions"></div>
+							</template>
+							<font-awesome-icon icon="question-circle" />
+						</n8n-tooltip>
+					</el-col>
+					<el-col :span="14" class="ignore-key-press">
+						<n8n-select
+							v-model="workflowSettings.saveManualExecutions"
+							:placeholder="$locale.baseText('workflowSettings.selectOption')"
+							filterable
+							:disabled="readOnlyEnv || !workflowPermissions.update"
+							:limit-popper-width="true"
+							data-test-id="workflow-settings-save-manual-executions"
+						>
+							<n8n-option
+								v-for="option of saveManualOptions"
+								:key="option.key"
+								:label="option.value"
+								:value="option.key"
+							>
+							</n8n-option>
+						</n8n-select>
+					</el-col>
+				</el-row>
+				<el-row>
+					<el-col :span="10" class="setting-name">
+						{{ $locale.baseText('workflowSettings.saveExecutionProgress') + ':' }}
+						<n8n-tooltip placement="top">
+							<template #content>
+								<div v-text="helpTexts.saveExecutionProgress"></div>
+							</template>
+							<font-awesome-icon icon="question-circle" />
+						</n8n-tooltip>
+					</el-col>
+					<el-col :span="14" class="ignore-key-press">
+						<n8n-select
+							v-model="workflowSettings.saveExecutionProgress"
+							:placeholder="$locale.baseText('workflowSettings.selectOption')"
+							filterable
+							:disabled="readOnlyEnv || !workflowPermissions.update"
+							:limit-popper-width="true"
+							data-test-id="workflow-settings-save-execution-progress"
+						>
+							<n8n-option
+								v-for="option of saveExecutionProgressOptions"
+								:key="option.key"
+								:label="option.value"
+								:value="option.key"
+							>
+							</n8n-option>
+						</n8n-select>
+					</el-col>
+				</el-row>
+				<el-row>
+					<el-col :span="10" class="setting-name">
+						{{ $locale.baseText('workflowSettings.timeoutWorkflow') + ':' }}
+						<n8n-tooltip placement="top">
+							<template #content>
+								<div v-text="helpTexts.executionTimeoutToggle"></div>
+							</template>
+							<font-awesome-icon icon="question-circle" />
+						</n8n-tooltip>
+					</el-col>
+					<el-col :span="14">
+						<div>
+							<el-switch
+								ref="inputField"
+								:disabled="readOnlyEnv || !workflowPermissions.update"
+								:model-value="(workflowSettings.executionTimeout ?? -1) > -1"
+								active-color="#13ce66"
+								data-test-id="workflow-settings-timeout-workflow"
+								@update:model-value="toggleTimeout"
+							></el-switch>
+						</div>
+					</el-col>
+				</el-row>
+				<div
+					v-if="(workflowSettings.executionTimeout ?? -1) > -1"
+					data-test-id="workflow-settings-timeout-form"
+				>
+					<el-row>
+						<el-col :span="10" class="setting-name">
+							{{ $locale.baseText('workflowSettings.timeoutAfter') + ':' }}
+							<n8n-tooltip placement="top">
+								<template #content>
+									<div v-text="helpTexts.executionTimeout"></div>
+								</template>
+								<font-awesome-icon icon="question-circle" />
+							</n8n-tooltip>
+						</el-col>
+						<el-col :span="4">
+							<n8n-input
+								:disabled="readOnlyEnv || !workflowPermissions.update"
+								:model-value="timeoutHMS.hours"
+								:min="0"
+								@update:model-value="(value: string) => setTimeout('hours', value)"
+							>
+								<template #append>{{ $locale.baseText('workflowSettings.hours') }}</template>
+							</n8n-input>
+						</el-col>
+						<el-col :span="4" class="timeout-input">
+							<n8n-input
+								:disabled="readOnlyEnv || !workflowPermissions.update"
+								:model-value="timeoutHMS.minutes"
+								:min="0"
+								:max="60"
+								@update:model-value="(value: string) => setTimeout('minutes', value)"
+							>
+								<template #append>{{ $locale.baseText('workflowSettings.minutes') }}</template>
+							</n8n-input>
+						</el-col>
+						<el-col :span="4" class="timeout-input">
+							<n8n-input
+								:disabled="readOnlyEnv || !workflowPermissions.update"
+								:model-value="timeoutHMS.seconds"
+								:min="0"
+								:max="60"
+								@update:model-value="(value: string) => setTimeout('seconds', value)"
+							>
+								<template #append>{{ $locale.baseText('workflowSettings.seconds') }}</template>
+							</n8n-input>
+						</el-col>
+					</el-row>
+				</div>
+			</div>
+		</template>
+		<template #footer>
+			<div class="action-buttons" data-test-id="workflow-settings-save-button">
+				<n8n-button
+					:disabled="readOnlyEnv || !workflowPermissions.update"
+					:label="$locale.baseText('workflowSettings.save')"
+					size="large"
+					float="right"
+					@click="saveSettings"
+				/>
+			</div>
+		</template>
+	</Modal>
+</template>
+
 <style scoped lang="scss">
 .workflow-settings {
 	font-size: var(--font-size-s);
diff --git a/packages/editor-ui/src/components/WorkflowShareModal.ee.vue b/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
index 886ac5017644b..886bd90003e11 100644
--- a/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
+++ b/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
@@ -1,121 +1,3 @@
-<template>
-	<Modal
-		width="460px"
-		max-height="75%"
-		:title="modalTitle"
-		:event-bus="modalBus"
-		:name="WORKFLOW_SHARE_MODAL_KEY"
-		:center="true"
-		:before-close="onCloseModal"
-	>
-		<template #content>
-			<div v-if="!isSharingEnabled" :class="$style.container">
-				<n8n-text>
-					{{
-						$locale.baseText(
-							uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.description.modal,
-						)
-					}}
-				</n8n-text>
-			</div>
-			<div v-else :class="$style.container">
-				<n8n-info-tip
-					v-if="!workflowPermissions.share && !isHomeTeamProject"
-					:bold="false"
-					class="mb-s"
-				>
-					{{
-						$locale.baseText('workflows.shareModal.info.sharee', {
-							interpolate: { workflowOwnerName },
-						})
-					}}
-				</n8n-info-tip>
-				<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]" :class="$style.content">
-					<div>
-						<ProjectSharing
-							v-model="sharedWithProjects"
-							:home-project="workflow.homeProject"
-							:projects="projects"
-							:roles="workflowRoles"
-							:readonly="!workflowPermissions.share"
-							:static="isHomeTeamProject || !workflowPermissions.share"
-							:placeholder="$locale.baseText('workflows.shareModal.select.placeholder')"
-							@project-added="onProjectAdded"
-							@project-removed="onProjectRemoved"
-						/>
-						<n8n-info-tip v-if="isHomeTeamProject" :bold="false" class="mt-s">
-							<i18n-t keypath="workflows.shareModal.info.members" tag="span">
-								<template #projectName>
-									{{ workflow.homeProject?.name }}
-								</template>
-								<template #members>
-									<strong>
-										{{
-											$locale.baseText('workflows.shareModal.info.members.number', {
-												interpolate: {
-													number: String(numberOfMembersInHomeTeamProject),
-												},
-												adjustToNumber: numberOfMembersInHomeTeamProject,
-											})
-										}}
-									</strong>
-								</template>
-							</i18n-t>
-						</n8n-info-tip>
-					</div>
-					<template #fallback>
-						<n8n-text>
-							<i18n-t
-								:keypath="
-									uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.description
-										.tooltip
-								"
-								tag="span"
-							>
-								<template #action />
-							</i18n-t>
-						</n8n-text>
-					</template>
-				</enterprise-edition>
-			</div>
-		</template>
-
-		<template #footer>
-			<div v-if="!isSharingEnabled" :class="$style.actionButtons">
-				<n8n-button @click="goToUpgrade">
-					{{
-						$locale.baseText(
-							uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.button,
-						)
-					}}
-				</n8n-button>
-			</div>
-			<enterprise-edition
-				v-else
-				:features="[EnterpriseEditionFeature.Sharing]"
-				:class="$style.actionButtons"
-			>
-				<n8n-text v-show="isDirty" color="text-light" size="small" class="mr-xs">
-					{{ $locale.baseText('workflows.shareModal.changesHint') }}
-				</n8n-text>
-				<n8n-button v-if="isHomeTeamProject" type="secondary" @click="modalBus.emit('close')">
-					{{ $locale.baseText('generic.close') }}
-				</n8n-button>
-				<n8n-button
-					v-else
-					v-show="workflowPermissions.share"
-					:loading="loading"
-					:disabled="!isDirty"
-					data-test-id="workflow-sharing-modal-save-button"
-					@click="onSave"
-				>
-					{{ $locale.baseText('workflows.shareModal.save') }}
-				</n8n-button>
-			</enterprise-edition>
-		</template>
-	</Modal>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -374,6 +256,124 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<Modal
+		width="460px"
+		max-height="75%"
+		:title="modalTitle"
+		:event-bus="modalBus"
+		:name="WORKFLOW_SHARE_MODAL_KEY"
+		:center="true"
+		:before-close="onCloseModal"
+	>
+		<template #content>
+			<div v-if="!isSharingEnabled" :class="$style.container">
+				<n8n-text>
+					{{
+						$locale.baseText(
+							uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.description.modal,
+						)
+					}}
+				</n8n-text>
+			</div>
+			<div v-else :class="$style.container">
+				<n8n-info-tip
+					v-if="!workflowPermissions.share && !isHomeTeamProject"
+					:bold="false"
+					class="mb-s"
+				>
+					{{
+						$locale.baseText('workflows.shareModal.info.sharee', {
+							interpolate: { workflowOwnerName },
+						})
+					}}
+				</n8n-info-tip>
+				<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]" :class="$style.content">
+					<div>
+						<ProjectSharing
+							v-model="sharedWithProjects"
+							:home-project="workflow.homeProject"
+							:projects="projects"
+							:roles="workflowRoles"
+							:readonly="!workflowPermissions.share"
+							:static="isHomeTeamProject || !workflowPermissions.share"
+							:placeholder="$locale.baseText('workflows.shareModal.select.placeholder')"
+							@project-added="onProjectAdded"
+							@project-removed="onProjectRemoved"
+						/>
+						<n8n-info-tip v-if="isHomeTeamProject" :bold="false" class="mt-s">
+							<i18n-t keypath="workflows.shareModal.info.members" tag="span">
+								<template #projectName>
+									{{ workflow.homeProject?.name }}
+								</template>
+								<template #members>
+									<strong>
+										{{
+											$locale.baseText('workflows.shareModal.info.members.number', {
+												interpolate: {
+													number: String(numberOfMembersInHomeTeamProject),
+												},
+												adjustToNumber: numberOfMembersInHomeTeamProject,
+											})
+										}}
+									</strong>
+								</template>
+							</i18n-t>
+						</n8n-info-tip>
+					</div>
+					<template #fallback>
+						<n8n-text>
+							<i18n-t
+								:keypath="
+									uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.description
+										.tooltip
+								"
+								tag="span"
+							>
+								<template #action />
+							</i18n-t>
+						</n8n-text>
+					</template>
+				</enterprise-edition>
+			</div>
+		</template>
+
+		<template #footer>
+			<div v-if="!isSharingEnabled" :class="$style.actionButtons">
+				<n8n-button @click="goToUpgrade">
+					{{
+						$locale.baseText(
+							uiStore.contextBasedTranslationKeys.workflows.sharing.unavailable.button,
+						)
+					}}
+				</n8n-button>
+			</div>
+			<enterprise-edition
+				v-else
+				:features="[EnterpriseEditionFeature.Sharing]"
+				:class="$style.actionButtons"
+			>
+				<n8n-text v-show="isDirty" color="text-light" size="small" class="mr-xs">
+					{{ $locale.baseText('workflows.shareModal.changesHint') }}
+				</n8n-text>
+				<n8n-button v-if="isHomeTeamProject" type="secondary" @click="modalBus.emit('close')">
+					{{ $locale.baseText('generic.close') }}
+				</n8n-button>
+				<n8n-button
+					v-else
+					v-show="workflowPermissions.share"
+					:loading="loading"
+					:disabled="!isDirty"
+					data-test-id="workflow-sharing-modal-save-button"
+					@click="onSave"
+				>
+					{{ $locale.baseText('workflows.shareModal.save') }}
+				</n8n-button>
+			</enterprise-edition>
+		</template>
+	</Modal>
+</template>
+
 <style module lang="scss">
 .container {
 	display: flex;
diff --git a/packages/editor-ui/src/components/canvas/Canvas.spec.ts b/packages/editor-ui/src/components/canvas/Canvas.spec.ts
index 86a23e4651ff8..ef93b952828f5 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.spec.ts
+++ b/packages/editor-ui/src/components/canvas/Canvas.spec.ts
@@ -85,7 +85,7 @@ describe('Canvas', () => {
 		expect(container.querySelector(`[data-id="${connections[0].id}"]`)).toBeInTheDocument();
 	});
 
-	it('should handle node drag stop event', async () => {
+	it('should handle `update:nodes:position` event', async () => {
 		const nodes = [createCanvasNodeElement()];
 		const { container, emitted } = renderComponent({
 			props: {
@@ -99,14 +99,47 @@ describe('Canvas', () => {
 		await fireEvent.mouseDown(node, { view: window });
 		await fireEvent.mouseMove(node, {
 			view: window,
-			clientX: 96,
-			clientY: 96,
+			clientX: 20,
+			clientY: 20,
+		});
+		await fireEvent.mouseMove(node, {
+			view: window,
+			clientX: 40,
+			clientY: 40,
 		});
 		await fireEvent.mouseUp(node, { view: window });
 
-		// Snap to 20px grid: 96 -> 100
 		expect(emitted()['update:nodes:position']).toEqual([
-			[[{ id: '1', position: { x: 100, y: 100 } }]],
+			[
+				[
+					{
+						id: '1',
+						type: 'position',
+						dragging: true,
+						from: {
+							x: 100,
+							y: 100,
+							z: 0,
+						},
+						position: { x: 80, y: 80 },
+					},
+				],
+			],
+			[
+				[
+					{
+						id: '1',
+						type: 'position',
+						dragging: true,
+						from: {
+							x: 100,
+							y: 100,
+							z: 0,
+						},
+						position: { x: 120, y: 120 },
+					},
+				],
+			],
 		]);
 	});
 });
diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index 866bc644f7e32..429dddfaa57c3 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -2,17 +2,18 @@
 import type { CanvasConnection, CanvasNode, CanvasNodeMoveEvent, ConnectStartEvent } from '@/types';
 import type {
 	EdgeMouseEvent,
-	NodeDragEvent,
 	Connection,
 	XYPosition,
 	ViewportTransform,
+	NodeChange,
+	NodePositionChange,
 } from '@vue-flow/core';
 import { useVueFlow, VueFlow, PanelPosition } from '@vue-flow/core';
 import { Background } from '@vue-flow/background';
 import { MiniMap } from '@vue-flow/minimap';
 import Node from './elements/nodes/CanvasNode.vue';
 import Edge from './elements/edges/CanvasEdge.vue';
-import { computed, onMounted, onUnmounted, ref, useCssModule, watch } from 'vue';
+import { computed, onMounted, onUnmounted, provide, ref, useCssModule, watch } from 'vue';
 import type { EventBus } from 'n8n-design-system';
 import { createEventBus } from 'n8n-design-system';
 import { useContextMenu, type ContextMenuAction } from '@/composables/useContextMenu';
@@ -22,6 +23,7 @@ import type { NodeCreatorOpenSource } from '@/Interface';
 import type { PinDataSource } from '@/composables/usePinnedData';
 import { isPresent } from '@/utils/typesUtils';
 import { GRID_SIZE } from '@/utils/nodeViewUtils';
+import { CanvasKey } from '@/constants';
 
 const $style = useCssModule();
 
@@ -48,8 +50,8 @@ const emit = defineEmits<{
 	'delete:connection': [connection: Connection];
 	'create:connection:start': [handle: ConnectStartEvent];
 	'create:connection': [connection: Connection];
-	'create:connection:end': [connection: Connection];
-	'create:connection:cancelled': [handle: ConnectStartEvent];
+	'create:connection:end': [connection: Connection, event?: MouseEvent];
+	'create:connection:cancelled': [handle: ConnectStartEvent, event?: MouseEvent];
 	'click:connection:add': [connection: Connection];
 	'click:pane': [position: XYPosition];
 	'run:workflow': [];
@@ -133,11 +135,7 @@ function onClickNodeAdd(id: string, handle: string) {
 	emit('click:node:add', id, handle);
 }
 
-function onNodeDragStop(e: NodeDragEvent) {
-	onUpdateNodesPosition(e.nodes.map((node) => ({ id: node.id, position: node.position })));
-}
-
-function onUpdateNodesPosition(events: CanvasNodeMoveEvent[]) {
+function onUpdateNodesPosition(events: NodePositionChange[]) {
 	emit('update:nodes:position', events);
 }
 
@@ -145,8 +143,14 @@ function onUpdateNodePosition(id: string, position: XYPosition) {
 	emit('update:node:position', id, position);
 }
 
-function onSelectionDragStop(e: NodeDragEvent) {
-	onNodeDragStop(e);
+function onNodesChange(events: NodeChange[]) {
+	const isPositionChangeEvent = (event: NodeChange): event is NodePositionChange =>
+		event.type === 'position' && 'position' in event;
+
+	const positionChangeEndEvents = events.filter(isPositionChangeEvent);
+	if (positionChangeEndEvents.length > 0) {
+		onUpdateNodesPosition(positionChangeEndEvents);
+	}
 }
 
 function onSetNodeActive(id: string) {
@@ -184,35 +188,32 @@ function onUpdateNodeParameters(id: string, parameters: Record<string, unknown>)
  */
 
 const connectionCreated = ref(false);
-const connectionEventData = ref<ConnectStartEvent | Connection>();
-
-const isConnection = (data: ConnectStartEvent | Connection | undefined): data is Connection =>
-	!!data && connectionCreated.value;
-
-const isConnectionCancelled = (
-	data: ConnectStartEvent | Connection | undefined,
-): data is ConnectStartEvent => !!data && !connectionCreated.value;
+const connectingHandle = ref<ConnectStartEvent>();
+const connectedHandle = ref<Connection>();
 
 function onConnectStart(handle: ConnectStartEvent) {
 	emit('create:connection:start', handle);
 
-	connectionEventData.value = handle;
+	connectingHandle.value = handle;
 	connectionCreated.value = false;
 }
 
 function onConnect(connection: Connection) {
 	emit('create:connection', connection);
 
-	connectionEventData.value = connection;
+	connectedHandle.value = connection;
 	connectionCreated.value = true;
 }
 
-function onConnectEnd() {
-	if (isConnection(connectionEventData.value)) {
-		emit('create:connection:end', connectionEventData.value);
-	} else if (isConnectionCancelled(connectionEventData.value)) {
-		emit('create:connection:cancelled', connectionEventData.value);
+function onConnectEnd(event?: MouseEvent) {
+	if (connectedHandle.value) {
+		emit('create:connection:end', connectedHandle.value, event);
+	} else if (connectingHandle.value) {
+		emit('create:connection:cancelled', connectingHandle.value, event);
 	}
+
+	connectedHandle.value = undefined;
+	connectingHandle.value = undefined;
 }
 
 function onDeleteConnection(connection: Connection) {
@@ -393,6 +394,14 @@ onPaneReady(async () => {
 watch(() => props.readOnly, setReadonly, {
 	immediate: true,
 });
+
+/**
+ * Provide
+ */
+
+provide(CanvasKey, {
+	connectingHandle,
+});
 </script>
 
 <template>
@@ -408,8 +417,6 @@ watch(() => props.readOnly, setReadonly, {
 		:max-zoom="4"
 		:class="[$style.canvas, { [$style.visible]: paneReady }]"
 		data-test-id="canvas"
-		@node-drag-stop="onNodeDragStop"
-		@selection-drag-stop="onSelectionDragStop"
 		@edge-mouse-enter="onMouseEnterEdge"
 		@edge-mouse-leave="onMouseLeaveEdge"
 		@connect-start="onConnectStart"
@@ -418,6 +425,7 @@ watch(() => props.readOnly, setReadonly, {
 		@pane-click="onClickPane"
 		@contextmenu="onOpenContextMenu"
 		@viewport-change="onViewportChange"
+		@nodes-change="onNodesChange"
 	>
 		<template #node-canvas-node="canvasNodeProps">
 			<Node
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/CanvasHandleRenderer.vue b/packages/editor-ui/src/components/canvas/elements/handles/CanvasHandleRenderer.vue
index b6a9235bc88d6..9fc8d1fc0709f 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/CanvasHandleRenderer.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/CanvasHandleRenderer.vue
@@ -7,14 +7,17 @@ import { CanvasConnectionMode } from '@/types';
 import type { ValidConnectionFunc } from '@vue-flow/core';
 import { Handle } from '@vue-flow/core';
 import { NodeConnectionType } from 'n8n-workflow';
+import CanvasHandleMainInput from '@/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue';
 import CanvasHandleMainOutput from '@/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue';
 import CanvasHandleNonMainInput from '@/components/canvas/elements/handles/render-types/CanvasHandleNonMainInput.vue';
+import CanvasHandleNonMainOutput from '@/components/canvas/elements/handles/render-types/CanvasHandleNonMainOutput.vue';
 import { CanvasNodeHandleKey } from '@/constants';
 import { createCanvasConnectionHandleString } from '@/utils/canvasUtilsV2';
 
 const props = defineProps<{
 	mode: CanvasConnectionMode;
-	connected?: boolean;
+	isConnected?: boolean;
+	isConnecting?: boolean;
 	label?: string;
 	type: CanvasConnectionPort['type'];
 	index: CanvasConnectionPort['index'];
@@ -59,13 +62,6 @@ const handleClasses = computed(() => [style.handle, style[props.type], style[pro
  * Render additional elements
  */
 
-const hasRenderType = computed(() => {
-	return (
-		(props.type === NodeConnectionType.Main && props.mode === CanvasConnectionMode.Output) ||
-		props.type !== NodeConnectionType.Main
-	);
-});
-
 const renderTypeClasses = computed(() => [style.renderType, style[props.position]]);
 
 const RenderType = () => {
@@ -74,9 +70,13 @@ const RenderType = () => {
 	if (props.mode === CanvasConnectionMode.Output) {
 		if (props.type === NodeConnectionType.Main) {
 			Component = CanvasHandleMainOutput;
+		} else {
+			Component = CanvasHandleNonMainOutput;
 		}
 	} else {
-		if (props.type !== NodeConnectionType.Main) {
+		if (props.type === NodeConnectionType.Main) {
+			Component = CanvasHandleMainInput;
+		} else {
 			Component = CanvasHandleNonMainInput;
 		}
 	}
@@ -97,7 +97,8 @@ function onAdd() {
  */
 
 const label = toRef(props, 'label');
-const connected = toRef(props, 'connected');
+const isConnected = toRef(props, 'isConnected');
+const isConnecting = toRef(props, 'isConnecting');
 const mode = toRef(props, 'mode');
 const type = toRef(props, 'type');
 
@@ -105,7 +106,8 @@ provide(CanvasNodeHandleKey, {
 	label,
 	mode,
 	type,
-	connected,
+	isConnected,
+	isConnecting,
 });
 </script>
 
@@ -120,78 +122,58 @@ provide(CanvasNodeHandleKey, {
 		:connectable-start="isConnectableStart"
 		:connectable-end="isConnectableEnd"
 		:is-valid-connection="isValidConnection"
-	/>
-	<RenderType
-		v-if="hasRenderType"
-		:class="renderTypeClasses"
-		:connected="connected"
-		:style="offset"
-		:label="label"
-		@add="onAdd"
-	/>
+	>
+		<RenderType
+			:class="renderTypeClasses"
+			:is-connected="isConnected"
+			:style="offset"
+			:label="label"
+			@add="onAdd"
+		/>
+	</Handle>
 </template>
 
 <style lang="scss" module>
 .handle {
-	width: 16px;
-	height: 16px;
+	--handle--indicator--width: 16px;
+	--handle--indicator--height: 16px;
+
+	width: var(--handle--indicator--width);
+	height: var(--handle--indicator--height);
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
 	border: 0;
 	z-index: 1;
-	background: var(--color-foreground-xdark);
-
-	&:hover {
-		background: var(--color-primary);
-	}
+	background: transparent;
+	border-radius: 0;
 
 	&.inputs {
 		&.main {
-			width: 8px;
-			border-radius: 0;
-		}
-
-		&:not(.main) {
-			width: 14px;
-			height: 14px;
-			transform-origin: 0 0;
-			transform: rotate(45deg) translate(2px, 2px);
-			border-radius: 0;
-			background: hsl(
-				var(--node-type-supplemental-color-h) var(--node-type-supplemental-color-s)
-					var(--node-type-supplemental-color-l)
-			);
-
-			&:hover {
-				background: var(--color-primary);
-			}
+			--handle--indicator--width: 8px;
 		}
 	}
 }
 
 .renderType {
-	position: absolute;
-	z-index: 0;
-
 	&.top {
-		top: 0;
-		transform: translate(-50%, -50%);
+		margin-bottom: calc(-1 * var(--handle--indicator--height));
+		transform: translate(0%, -50%);
 	}
 
 	&.right {
-		right: 0;
-		transform: translate(100%, -50%);
+		margin-left: calc(-1 * var(--handle--indicator--width));
+		transform: translate(50%, 0%);
 	}
 
 	&.left {
-		left: 0;
-		transform: translate(-50%, -50%);
+		margin-right: calc(-1 * var(--handle--indicator--width));
+		transform: translate(-50%, 0%);
 	}
 
 	&.bottom {
-		bottom: 0;
-		transform: translate(-50%, 50%);
+		margin-top: calc(-1 * var(--handle--indicator--height));
+		transform: translate(0%, 50%);
 	}
 }
 </style>
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.spec.ts b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.spec.ts
new file mode 100644
index 0000000000000..78d7f073e01c2
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.spec.ts
@@ -0,0 +1,21 @@
+import CanvasHandleMainInput from '@/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue';
+import { createComponentRenderer } from '@/__tests__/render';
+import { createCanvasHandleProvide } from '@/__tests__/data';
+
+const renderComponent = createComponentRenderer(CanvasHandleMainInput);
+
+describe('CanvasHandleMainInput', () => {
+	it('should render correctly', async () => {
+		const label = 'Test Label';
+		const { container, getByText } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasHandleProvide({ label }),
+				},
+			},
+		});
+
+		expect(container.querySelector('.canvas-node-handle-main-input')).toBeInTheDocument();
+		expect(getByText(label)).toBeInTheDocument();
+	});
+});
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue
new file mode 100644
index 0000000000000..f34cc077890ff
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainInput.vue
@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { useCanvasNodeHandle } from '@/composables/useCanvasNodeHandle';
+
+const { label } = useCanvasNodeHandle();
+
+const handleClasses = 'target';
+</script>
+<template>
+	<div :class="['canvas-node-handle-main-input', $style.handle]">
+		<div :class="[$style.label]">{{ label }}</div>
+		<CanvasHandleRectangle :handle-classes="handleClasses" />
+	</div>
+</template>
+
+<style lang="scss" module>
+.handle {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+
+.label {
+	position: absolute;
+	top: 20px;
+	left: 50%;
+	transform: translate(-50%, 0);
+	font-size: var(--font-size-2xs);
+	color: var(--color-foreground-xdark);
+	background: var(--color-background-light);
+	z-index: 1;
+	text-align: center;
+}
+</style>
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
index ba9e32ade4e40..9a37a3aff7743 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleMainOutput.vue
@@ -1,12 +1,25 @@
 <script lang="ts" setup>
 import { useCanvasNodeHandle } from '@/composables/useCanvasNodeHandle';
-import CanvasHandlePlus from '@/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.vue';
+import { computed, ref } from 'vue';
 
 const emit = defineEmits<{
 	add: [];
 }>();
 
-const { label, connected } = useCanvasNodeHandle();
+const { label, isConnected, isConnecting } = useCanvasNodeHandle();
+
+const handleClasses = 'source';
+
+const isHandlePlusVisible = computed(() => !isConnecting.value || isHovered.value);
+const isHovered = ref(false);
+
+function onMouseEnter() {
+	isHovered.value = true;
+}
+
+function onMouseLeave() {
+	isHovered.value = false;
+}
 
 function onClickAdd() {
 	emit('add');
@@ -14,16 +27,27 @@ function onClickAdd() {
 </script>
 <template>
 	<div :class="['canvas-node-handle-main-output', $style.handle]">
-		<div :class="$style.label">{{ label }}</div>
-		<CanvasHandlePlus v-if="!connected" @click:plus="onClickAdd" />
+		<div :class="[$style.label]">{{ label }}</div>
+		<CanvasHandleDot :handle-classes="handleClasses" />
+		<Transition name="canvas-node-handle-main-output">
+			<CanvasHandlePlus
+				v-if="!isConnected"
+				v-show="isHandlePlusVisible"
+				:handle-classes="handleClasses"
+				@mouseenter="onMouseEnter"
+				@mouseleave="onMouseLeave"
+				@click:plus="onClickAdd"
+			/>
+		</Transition>
 	</div>
 </template>
 
 <style lang="scss" module>
 .handle {
-	:global(.vue-flow__handle:not(.connectionindicator)) + & {
-		display: none;
-	}
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
 }
 
 .label {
@@ -37,3 +61,19 @@ function onClickAdd() {
 	z-index: 1;
 }
 </style>
+
+<style lang="scss">
+.canvas-node-handle-main-output-enter-active,
+.canvas-node-handle-main-output-leave-active {
+	transform-origin: 0 center;
+	transition-property: transform, opacity;
+	transition-duration: 0.2s;
+	transition-timing-function: ease;
+}
+
+.canvas-node-handle-main-output-enter-from,
+.canvas-node-handle-main-output-leave-to {
+	transform: scale(0);
+	opacity: 0;
+}
+</style>
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMainInput.spec.ts b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMainInput.spec.ts
index 9e9dab81e009d..19fb1214e0fe2 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMainInput.spec.ts
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMainInput.spec.ts
@@ -15,7 +15,7 @@ describe('CanvasHandleNonMainInput', () => {
 			},
 		});
 
-		expect(container.querySelector('.canvas-node-handle-non-main')).toBeInTheDocument();
+		expect(container.querySelector('.canvas-node-handle-non-main-input')).toBeInTheDocument();
 		expect(getByText(label)).toBeInTheDocument();
 	});
 });
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMainInput.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMainInput.vue
index 44f9f09f980f3..384eaeecaf6ea 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMainInput.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMainInput.vue
@@ -2,48 +2,89 @@
 import CanvasHandlePlus from '@/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.vue';
 import { useCanvasNodeHandle } from '@/composables/useCanvasNodeHandle';
 import { NodeConnectionType } from 'n8n-workflow';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 const emit = defineEmits<{
 	add: [];
 }>();
 
-const { label, connected, type } = useCanvasNodeHandle();
+const { label, isConnected, isConnecting, type } = useCanvasNodeHandle();
 
-const isAddButtonVisible = computed(
-	() => !connected.value || type.value === NodeConnectionType.AiTool,
+const handleClasses = 'target';
+
+const supportsMultipleConnections = computed(() => type.value === NodeConnectionType.AiTool);
+
+const isHandlePlusAvailable = computed(
+	() => !isConnected.value || supportsMultipleConnections.value,
+);
+const isHandlePlusVisible = computed(
+	() => !isConnecting.value || isHovered.value || supportsMultipleConnections.value,
 );
+const isHovered = ref(false);
+
+function onMouseEnter() {
+	isHovered.value = true;
+}
+
+function onMouseLeave() {
+	isHovered.value = false;
+}
 
 function onClickAdd() {
 	emit('add');
 }
 </script>
 <template>
-	<div :class="['canvas-node-handle-non-main', $style.handle]">
-		<div :class="$style.label">{{ label }}</div>
-		<CanvasHandlePlus v-if="isAddButtonVisible" :class="$style.plus" @click="onClickAdd" />
+	<div :class="['canvas-node-handle-non-main-input', $style.handle]">
+		<div :class="[$style.label]">{{ label }}</div>
+		<CanvasHandleDiamond :handle-classes="handleClasses" />
+		<Transition name="canvas-node-handle-non-main-input">
+			<CanvasHandlePlus
+				v-if="isHandlePlusAvailable"
+				v-show="isHandlePlusVisible"
+				:handle-classes="handleClasses"
+				position="bottom"
+				@mouseenter="onMouseEnter"
+				@mouseleave="onMouseLeave"
+				@click:plus="onClickAdd"
+			/>
+		</Transition>
 	</div>
 </template>
 
 <style lang="scss" module>
 .handle {
-	:global(.vue-flow__handle:not(.connectionindicator)) + & {
-		display: none;
-	}
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 }
 
 .label {
 	position: absolute;
-	top: 18px;
+	top: 20px;
 	left: 50%;
 	transform: translate(-50%, 0);
 	font-size: var(--font-size-2xs);
 	color: var(--color-foreground-xdark);
 	background: var(--color-background-light);
 	z-index: 1;
+	text-align: center;
+}
+</style>
+
+<style lang="scss">
+.canvas-node-handle-non-main-input-enter-active,
+.canvas-node-handle-non-main-input-leave-active {
+	transform-origin: center 0;
+	transition-property: transform, opacity;
+	transition-duration: 0.2s;
+	transition-timing-function: ease;
 }
 
-.plus {
-	transform: rotate(90deg) translateX(50%);
+.canvas-node-handle-non-main-input-enter-from,
+.canvas-node-handle-non-main-input-leave-to {
+	transform: scale(0);
+	opacity: 0;
 }
 </style>
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMainOutput.spec.ts b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMainOutput.spec.ts
new file mode 100644
index 0000000000000..69094e4a904ae
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMainOutput.spec.ts
@@ -0,0 +1,21 @@
+import CanvasHandleNonMainOutput from '@/components/canvas/elements/handles/render-types/CanvasHandleNonMainOutput.vue';
+import { createComponentRenderer } from '@/__tests__/render';
+import { createCanvasHandleProvide } from '@/__tests__/data';
+
+const renderComponent = createComponentRenderer(CanvasHandleNonMainOutput);
+
+describe('CanvasHandleNonMainOutput', () => {
+	it('should render correctly', async () => {
+		const label = 'Test Label';
+		const { container, getByText } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasHandleProvide({ label }),
+				},
+			},
+		});
+
+		expect(container.querySelector('.canvas-node-handle-non-main-output')).toBeInTheDocument();
+		expect(getByText(label)).toBeInTheDocument();
+	});
+});
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMainOutput.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMainOutput.vue
new file mode 100644
index 0000000000000..6d62bfc23d68d
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/CanvasHandleNonMainOutput.vue
@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { useCanvasNodeHandle } from '@/composables/useCanvasNodeHandle';
+
+const { label } = useCanvasNodeHandle();
+
+const handleClasses = 'source';
+</script>
+<template>
+	<div :class="['canvas-node-handle-non-main-output', $style.handle]">
+		<div :class="[$style.label]">{{ label }}</div>
+		<CanvasHandleDiamond :handle-classes="handleClasses" />
+	</div>
+</template>
+
+<style lang="scss" module>
+.handle {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+}
+
+.label {
+	position: absolute;
+	top: -20px;
+	left: -50%;
+	transform: translate(0%, 0);
+	font-size: var(--font-size-2xs);
+	color: var(--color-foreground-xdark);
+	background: var(--color-background-light);
+	z-index: 0;
+}
+
+:global(.vue-flow__handle:not(.connectionindicator)) .plus {
+	display: none;
+	position: absolute;
+}
+</style>
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleDiamond.spec.ts b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleDiamond.spec.ts
new file mode 100644
index 0000000000000..cc6267034cd79
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleDiamond.spec.ts
@@ -0,0 +1,21 @@
+import CanvasHandlePlus from './CanvasHandlePlus.vue';
+import { createComponentRenderer } from '@/__tests__/render';
+
+const renderComponent = createComponentRenderer(CanvasHandlePlus, {});
+
+describe('CanvasHandleDiamond', () => {
+	it('should render with default props', () => {
+		const { html } = renderComponent();
+
+		expect(html()).toMatchSnapshot();
+	});
+
+	it('should apply `handleClasses` prop correctly', () => {
+		const customClass = 'custom-handle-class';
+		const wrapper = renderComponent({
+			props: { handleClasses: customClass },
+		});
+
+		expect(wrapper.container.querySelector(`.${customClass}`)).toBeTruthy();
+	});
+});
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleDiamond.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleDiamond.vue
new file mode 100644
index 0000000000000..a21f8d84d2542
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleDiamond.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+withDefaults(
+	defineProps<{
+		handleClasses?: string;
+	}>(),
+	{
+		handleClasses: undefined,
+	},
+);
+</script>
+
+<template>
+	<div :class="[$style.diamond, handleClasses]" />
+</template>
+
+<style lang="scss" module>
+.diamond {
+	width: var(--handle--indicator--width);
+	height: var(--handle--indicator--height);
+	background: var(--node-type-supplemental-color);
+	transform: rotate(45deg) scale(0.8);
+
+	&:hover {
+		background: var(--color-primary);
+	}
+}
+</style>
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleDot.spec.ts b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleDot.spec.ts
new file mode 100644
index 0000000000000..e3451c92d9be4
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleDot.spec.ts
@@ -0,0 +1,21 @@
+import CanvasHandleDot from './CanvasHandleDot.vue';
+import { createComponentRenderer } from '@/__tests__/render';
+
+const renderComponent = createComponentRenderer(CanvasHandleDot, {});
+
+describe('CanvasHandleDot', () => {
+	it('should render with default props', () => {
+		const { html } = renderComponent();
+
+		expect(html()).toMatchSnapshot();
+	});
+
+	it('should apply `handleClasses` prop correctly', () => {
+		const customClass = 'custom-handle-class';
+		const wrapper = renderComponent({
+			props: { handleClasses: customClass },
+		});
+
+		expect(wrapper.container.querySelector(`.${customClass}`)).toBeTruthy();
+	});
+});
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleDot.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleDot.vue
new file mode 100644
index 0000000000000..691ee755cf206
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleDot.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+withDefaults(
+	defineProps<{
+		handleClasses?: string;
+	}>(),
+	{
+		handleClasses: undefined,
+	},
+);
+</script>
+
+<template>
+	<div :class="[$style.dot, handleClasses]" />
+</template>
+
+<style lang="scss" module>
+.dot {
+	width: var(--handle--indicator--width);
+	height: var(--handle--indicator--height);
+	border-radius: 50%;
+	background: var(--color-foreground-xdark);
+
+	&:hover {
+		background: var(--color-primary);
+	}
+}
+</style>
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.spec.ts b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.spec.ts
index 841d11a44edda..fca5297c72987 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.spec.ts
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.spec.ts
@@ -18,9 +18,9 @@ describe('CanvasHandlePlus', () => {
 		expect(html()).toMatchSnapshot();
 	});
 
-	it('emits click:plus event when plus icon is clicked', async () => {
+	it('should emit click:plus event when plus icon is clicked', async () => {
 		const { container, emitted } = renderComponent();
-		const plusIcon = container.querySelector('svg.plus');
+		const plusIcon = container.querySelector('.plus');
 
 		if (!plusIcon) throw new Error('Plus icon not found');
 
@@ -29,7 +29,7 @@ describe('CanvasHandlePlus', () => {
 		expect(emitted()).toHaveProperty('click:plus');
 	});
 
-	it('applies correct classes based on position prop', () => {
+	it('should apply correct classes based on position prop', () => {
 		const positions = ['top', 'right', 'bottom', 'left'];
 
 		positions.forEach((position) => {
@@ -40,15 +40,17 @@ describe('CanvasHandlePlus', () => {
 		});
 	});
 
-	it('renders SVG elements correctly', () => {
+	it('should render SVG elements correctly', () => {
 		const { container } = renderComponent();
 
-		const lineSvg = container.querySelector('svg.line');
+		const svg = container.querySelector('svg');
+		expect(svg).toBeTruthy();
+		expect(svg?.getAttribute('viewBox')).toBe('0 0 70 24');
+
+		const lineSvg = container.querySelector('line');
 		expect(lineSvg).toBeTruthy();
-		expect(lineSvg?.getAttribute('viewBox')).toBe('0 0 46 24');
 
-		const plusSvg = container.querySelector('svg.plus');
+		const plusSvg = container.querySelector('.plus');
 		expect(plusSvg).toBeTruthy();
-		expect(plusSvg?.getAttribute('viewBox')).toBe('0 0 24 24');
 	});
 });
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.vue
index eb88dfb3a5b06..8d0776e4a1672 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.vue
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.vue
@@ -4,9 +4,11 @@ import { computed, useCssModule } from 'vue';
 const props = withDefaults(
 	defineProps<{
 		position?: 'top' | 'right' | 'bottom' | 'left';
+		handleClasses?: string;
 	}>(),
 	{
 		position: 'right',
+		handleClasses: undefined,
 	},
 );
 
@@ -16,7 +18,64 @@ const emit = defineEmits<{
 
 const style = useCssModule();
 
-const classes = computed(() => [style.wrapper, style[props.position]]);
+const classes = computed(() => [style.wrapper, style[props.position], props.handleClasses]);
+
+const plusSize = 24;
+const lineSize = 46;
+
+const viewBox = computed(() => {
+	switch (props.position) {
+		case 'bottom':
+		case 'top':
+			return {
+				width: plusSize,
+				height: lineSize + plusSize,
+			};
+		default:
+			return {
+				width: lineSize + plusSize,
+				height: plusSize,
+			};
+	}
+});
+
+const linePosition = computed(() => {
+	switch (props.position) {
+		case 'top':
+			return [
+				[viewBox.value.width / 2, viewBox.value.height - lineSize + 1],
+				[viewBox.value.width / 2, viewBox.value.height],
+			];
+		case 'bottom':
+			return [
+				[viewBox.value.width / 2, 0],
+				[viewBox.value.width / 2, lineSize + 1],
+			];
+		case 'left':
+			return [
+				[viewBox.value.width - lineSize - 1, viewBox.value.height / 2],
+				[viewBox.value.width, viewBox.value.height / 2],
+			];
+		default:
+			return [
+				[0, viewBox.value.height / 2],
+				[lineSize + 1, viewBox.value.height / 2],
+			];
+	}
+});
+
+const plusPosition = computed(() => {
+	switch (props.position) {
+		case 'bottom':
+			return [0, viewBox.value.height - plusSize];
+		case 'top':
+			return [0, 0];
+		case 'left':
+			return [0, 0];
+		default:
+			return [viewBox.value.width - plusSize, 0];
+	}
+});
 
 function onClick(event: MouseEvent) {
 	emit('click:plus', event);
@@ -24,19 +83,23 @@ function onClick(event: MouseEvent) {
 </script>
 
 <template>
-	<div :class="classes">
-		<svg :class="$style.line" viewBox="0 0 46 24">
-			<line
-				x1="0"
-				y1="12"
-				x2="46"
-				y2="12"
-				stroke="var(--color-foreground-xdark)"
-				stroke-width="2"
-			/>
-		</svg>
-		<svg :class="$style.plus" viewBox="0 0 24 24" @click="onClick">
+	<svg :class="classes" :viewBox="`0 0 ${viewBox.width} ${viewBox.height}`">
+		<line
+			:class="handleClasses"
+			:x1="linePosition[0][0]"
+			:y1="linePosition[0][1]"
+			:x2="linePosition[1][0]"
+			:y2="linePosition[1][1]"
+			stroke="var(--color-foreground-xdark)"
+			stroke-width="2"
+		/>
+		<g
+			:class="[$style.plus, handleClasses, 'clickable']"
+			:transform="`translate(${plusPosition[0]}, ${plusPosition[1]})`"
+			@click="onClick"
+		>
 			<rect
+				:class="[handleClasses, 'clickable']"
 				x="2"
 				y="2"
 				width="20"
@@ -46,36 +109,33 @@ function onClick(event: MouseEvent) {
 				rx="4"
 				fill="#ffffff"
 			/>
-			<g transform="translate(0, 0)">
-				<path
-					fill="var(--color-foreground-xdark)"
-					d="m16.40655,10.89837l-3.30491,0l0,-3.30491c0,-0.40555 -0.32889,-0.73443 -0.73443,-0.73443l-0.73443,0c-0.40554,0 -0.73442,0.32888 -0.73442,0.73443l0,3.30491l-3.30491,0c-0.40555,0 -0.73443,0.32888 -0.73443,0.73442l0,0.73443c0,0.40554 0.32888,0.73443 0.73443,0.73443l3.30491,0l0,3.30491c0,0.40554 0.32888,0.73442 0.73442,0.73442l0.73443,0c0.40554,0 0.73443,-0.32888 0.73443,-0.73442l0,-3.30491l3.30491,0c0.40554,0 0.73442,-0.32889 0.73442,-0.73443l0,-0.73443c0,-0.40554 -0.32888,-0.73442 -0.73442,-0.73442z"
-				></path>
-			</g>
-		</svg>
-	</div>
+			<path
+				:class="[handleClasses, 'clickable']"
+				fill="var(--color-foreground-xdark)"
+				d="m16.40655,10.89837l-3.30491,0l0,-3.30491c0,-0.40555 -0.32889,-0.73443 -0.73443,-0.73443l-0.73443,0c-0.40554,0 -0.73442,0.32888 -0.73442,0.73443l0,3.30491l-3.30491,0c-0.40555,0 -0.73443,0.32888 -0.73443,0.73442l0,0.73443c0,0.40554 0.32888,0.73443 0.73443,0.73443l3.30491,0l0,3.30491c0,0.40554 0.32888,0.73442 0.73442,0.73442l0.73443,0c0.40554,0 0.73443,-0.32888 0.73443,-0.73442l0,-3.30491l3.30491,0c0.40554,0 0.73442,-0.32889 0.73442,-0.73443l0,-0.73443c0,-0.40554 -0.32888,-0.73442 -0.73442,-0.73442z"
+			></path>
+		</g>
+	</svg>
 </template>
 
 <style lang="scss" module>
 .wrapper {
 	position: relative;
-	width: 70px;
-	height: 24px;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-}
 
-.line {
-	width: 46px;
-	height: 24px;
+	&.top,
+	&.bottom {
+		width: 24px;
+		height: 70px;
+	}
+
+	&.left,
+	&.right {
+		width: 70px;
+		height: 24px;
+	}
 }
 
 .plus {
-	width: 24px;
-	height: 24px;
-	margin-left: -1px;
-
 	&:hover {
 		cursor: pointer;
 
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleRectangle.spec.ts b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleRectangle.spec.ts
new file mode 100644
index 0000000000000..3c1787406e6a3
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleRectangle.spec.ts
@@ -0,0 +1,21 @@
+import CanvasHandleRectangle from './CanvasHandleRectangle.vue';
+import { createComponentRenderer } from '@/__tests__/render';
+
+const renderComponent = createComponentRenderer(CanvasHandleRectangle, {});
+
+describe('CanvasHandleRectangle', () => {
+	it('should render with default props', () => {
+		const { html } = renderComponent();
+
+		expect(html()).toMatchSnapshot();
+	});
+
+	it('should apply `handleClasses` prop correctly', () => {
+		const customClass = 'custom-handle-class';
+		const wrapper = renderComponent({
+			props: { handleClasses: customClass },
+		});
+
+		expect(wrapper.container.querySelector(`.${customClass}`)).toBeTruthy();
+	});
+});
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleRectangle.vue b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleRectangle.vue
new file mode 100644
index 0000000000000..d27eb3b1055da
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandleRectangle.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+withDefaults(
+	defineProps<{
+		handleClasses?: string;
+	}>(),
+	{
+		handleClasses: undefined,
+	},
+);
+</script>
+
+<template>
+	<div :class="[$style.rectangle, handleClasses]" />
+</template>
+
+<style lang="scss" module>
+.rectangle {
+	width: var(--handle--indicator--width);
+	height: var(--handle--indicator--height);
+	background: var(--color-foreground-xdark);
+
+	&:hover {
+		background: var(--color-primary);
+	}
+}
+</style>
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/__snapshots__/CanvasHandleDiamond.spec.ts.snap b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/__snapshots__/CanvasHandleDiamond.spec.ts.snap
new file mode 100644
index 0000000000000..8a04f4a9d44a6
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/__snapshots__/CanvasHandleDiamond.spec.ts.snap
@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CanvasHandleDiamond > should render with default props 1`] = `
+"<svg class="wrapper right" viewBox="0 0 70 24">
+  <line class="" x1="0" y1="12" x2="47" y2="12" stroke="var(--color-foreground-xdark)" stroke-width="2"></line>
+  <g class="plus clickable" transform="translate(46, 0)">
+    <rect class="clickable" x="2" y="2" width="20" height="20" stroke="var(--color-foreground-xdark)" stroke-width="2" rx="4" fill="#ffffff"></rect>
+    <path class="clickable" fill="var(--color-foreground-xdark)" d="m16.40655,10.89837l-3.30491,0l0,-3.30491c0,-0.40555 -0.32889,-0.73443 -0.73443,-0.73443l-0.73443,0c-0.40554,0 -0.73442,0.32888 -0.73442,0.73443l0,3.30491l-3.30491,0c-0.40555,0 -0.73443,0.32888 -0.73443,0.73442l0,0.73443c0,0.40554 0.32888,0.73443 0.73443,0.73443l3.30491,0l0,3.30491c0,0.40554 0.32888,0.73442 0.73442,0.73442l0.73443,0c0.40554,0 0.73443,-0.32888 0.73443,-0.73442l0,-3.30491l3.30491,0c0.40554,0 0.73442,-0.32889 0.73442,-0.73443l0,-0.73443c0,-0.40554 -0.32888,-0.73442 -0.73442,-0.73442z"></path>
+  </g>
+</svg>"
+`;
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/__snapshots__/CanvasHandleDot.spec.ts.snap b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/__snapshots__/CanvasHandleDot.spec.ts.snap
new file mode 100644
index 0000000000000..a902ea6fe9b3c
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/__snapshots__/CanvasHandleDot.spec.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CanvasHandleDot > should render with default props 1`] = `"<div class="dot"></div>"`;
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/__snapshots__/CanvasHandlePlus.spec.ts.snap b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/__snapshots__/CanvasHandlePlus.spec.ts.snap
index 585581dfaeacc..4e18c15613277 100644
--- a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/__snapshots__/CanvasHandlePlus.spec.ts.snap
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/__snapshots__/CanvasHandlePlus.spec.ts.snap
@@ -1,12 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CanvasHandlePlus > should render with default props 1`] = `
-"<div class="wrapper right"><svg class="line" viewBox="0 0 46 24">
-    <line x1="0" y1="12" x2="46" y2="12" stroke="var(--color-foreground-xdark)" stroke-width="2"></line>
-  </svg><svg class="plus" viewBox="0 0 24 24">
-    <rect x="2" y="2" width="20" height="20" stroke="var(--color-foreground-xdark)" stroke-width="2" rx="4" fill="#ffffff"></rect>
-    <g transform="translate(0, 0)">
-      <path fill="var(--color-foreground-xdark)" d="m16.40655,10.89837l-3.30491,0l0,-3.30491c0,-0.40555 -0.32889,-0.73443 -0.73443,-0.73443l-0.73443,0c-0.40554,0 -0.73442,0.32888 -0.73442,0.73443l0,3.30491l-3.30491,0c-0.40555,0 -0.73443,0.32888 -0.73443,0.73442l0,0.73443c0,0.40554 0.32888,0.73443 0.73443,0.73443l3.30491,0l0,3.30491c0,0.40554 0.32888,0.73442 0.73442,0.73442l0.73443,0c0.40554,0 0.73443,-0.32888 0.73443,-0.73442l0,-3.30491l3.30491,0c0.40554,0 0.73442,-0.32889 0.73442,-0.73443l0,-0.73443c0,-0.40554 -0.32888,-0.73442 -0.73442,-0.73442z"></path>
-    </g>
-  </svg></div>"
+"<svg class="wrapper right" viewBox="0 0 70 24">
+  <line class="" x1="0" y1="12" x2="47" y2="12" stroke="var(--color-foreground-xdark)" stroke-width="2"></line>
+  <g class="plus clickable" transform="translate(46, 0)">
+    <rect class="clickable" x="2" y="2" width="20" height="20" stroke="var(--color-foreground-xdark)" stroke-width="2" rx="4" fill="#ffffff"></rect>
+    <path class="clickable" fill="var(--color-foreground-xdark)" d="m16.40655,10.89837l-3.30491,0l0,-3.30491c0,-0.40555 -0.32889,-0.73443 -0.73443,-0.73443l-0.73443,0c-0.40554,0 -0.73442,0.32888 -0.73442,0.73443l0,3.30491l-3.30491,0c-0.40555,0 -0.73443,0.32888 -0.73443,0.73442l0,0.73443c0,0.40554 0.32888,0.73443 0.73443,0.73443l3.30491,0l0,3.30491c0,0.40554 0.32888,0.73442 0.73442,0.73442l0.73443,0c0.40554,0 0.73443,-0.32888 0.73443,-0.73442l0,-3.30491l3.30491,0c0.40554,0 0.73442,-0.32889 0.73442,-0.73443l0,-0.73443c0,-0.40554 -0.32888,-0.73442 -0.73442,-0.73442z"></path>
+  </g>
+</svg>"
 `;
diff --git a/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/__snapshots__/CanvasHandleRectangle.spec.ts.snap b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/__snapshots__/CanvasHandleRectangle.spec.ts.snap
new file mode 100644
index 0000000000000..7ceb9283702f9
--- /dev/null
+++ b/packages/editor-ui/src/components/canvas/elements/handles/render-types/parts/__snapshots__/CanvasHandleRectangle.spec.ts.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CanvasHandleRectangle > should render with default props 1`] = `"<div class="rectangle"></div>"`;
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
index c3b399462251f..34c4bd7bff54a 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { computed, provide, toRef, watch } from 'vue';
 import type {
-	CanvasNodeData,
 	CanvasConnectionPort,
 	CanvasElementPortWithRenderData,
+	CanvasNodeData,
 } from '@/types';
 import { CanvasConnectionMode } from '@/types';
 import NodeIcon from '@/components/NodeIcon.vue';
@@ -14,8 +14,10 @@ import CanvasHandleRenderer from '@/components/canvas/elements/handles/CanvasHan
 import { useNodeConnections } from '@/composables/useNodeConnections';
 import { CanvasNodeKey } from '@/constants';
 import { useContextMenu } from '@/composables/useContextMenu';
+import type { NodeProps, XYPosition } from '@vue-flow/core';
 import { Position } from '@vue-flow/core';
-import type { XYPosition, NodeProps } from '@vue-flow/core';
+import { useCanvas } from '@/composables/useCanvas';
+import { createCanvasConnectionHandleString } from '@/utils/canvasUtilsV2';
 
 type Props = NodeProps<CanvasNodeData> & {
 	readOnly?: boolean;
@@ -38,6 +40,8 @@ const props = defineProps<Props>();
 const nodeTypesStore = useNodeTypesStore();
 const contextMenu = useContextMenu();
 
+const { connectingHandle } = useCanvas();
+
 const inputs = computed(() => props.data.inputs);
 const outputs = computed(() => props.data.outputs);
 const connections = computed(() => props.data.connections);
@@ -127,9 +131,23 @@ const createEndpointMappingFn =
 		index: number,
 		endpoints: CanvasConnectionPort[],
 	): CanvasElementPortWithRenderData => {
+		const handleId = createCanvasConnectionHandleString({
+			mode,
+			type: endpoint.type,
+			index: endpoint.index,
+		});
+		const handleType = mode === CanvasConnectionMode.Input ? 'target' : 'source';
+		const isConnected = !!connections.value[mode][endpoint.type]?.[endpoint.index]?.length;
+		const isConnecting =
+			connectingHandle.value?.nodeId === props.id &&
+			connectingHandle.value?.handleType === handleType &&
+			connectingHandle.value?.handleId === handleId;
+
 		return {
 			...endpoint,
-			connected: !!connections.value[mode][endpoint.type]?.[endpoint.index]?.length,
+			handleId,
+			isConnected,
+			isConnecting,
 			position,
 			offset: {
 				[offsetAxis]: `${(100 / (endpoints.length + 1)) * (index + 1)}%`,
@@ -214,37 +232,33 @@ watch(
 		:class="[$style.canvasNode, { [$style.showToolbar]: showToolbar }]"
 		data-test-id="canvas-node"
 	>
-		<template
-			v-for="source in mappedOutputs"
-			:key="`${CanvasConnectionMode.Output}/${source.type}/${source.index}`"
-		>
+		<template v-for="source in mappedOutputs" :key="source.handleId">
 			<CanvasHandleRenderer
 				data-test-id="canvas-node-output-handle"
-				:connected="source.connected"
 				:mode="CanvasConnectionMode.Output"
 				:type="source.type"
 				:label="source.label"
 				:index="source.index"
 				:position="source.position"
 				:offset="source.offset"
+				:is-connected="source.isConnected"
+				:is-connecting="source.isConnecting"
 				:is-valid-connection="isValidConnection"
 				@add="onAdd"
 			/>
 		</template>
 
-		<template
-			v-for="target in mappedInputs"
-			:key="`${CanvasConnectionMode.Input}/${target.type}/${target.index}`"
-		>
+		<template v-for="target in mappedInputs" :key="target.handleId">
 			<CanvasHandleRenderer
 				data-test-id="canvas-node-input-handle"
-				:connected="!!connections[CanvasConnectionMode.Input][target.type]?.[target.index]?.length"
 				:mode="CanvasConnectionMode.Input"
 				:type="target.type"
 				:label="target.label"
 				:index="target.index"
 				:position="target.position"
 				:offset="target.offset"
+				:is-connected="target.isConnected"
+				:is-connecting="target.isConnecting"
 				:is-valid-connection="isValidConnection"
 				@add="onAdd"
 			/>
@@ -296,5 +310,6 @@ watch(
 	left: 50%;
 	transform: translate(-50%, -100%);
 	opacity: 0;
+	z-index: 1;
 }
 </style>
diff --git a/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue b/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
index cd03972b1c8ca..d5bd8cc82e33a 100644
--- a/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
+++ b/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
@@ -1,49 +1,3 @@
-<template>
-	<n8n-popover trigger="click" width="304" size="large">
-		<template #reference>
-			<n8n-button
-				icon="filter"
-				type="tertiary"
-				:active="hasFilters"
-				:class="$style['filter-button']"
-				data-test-id="resources-list-filters-trigger"
-			>
-				<n8n-badge v-show="filtersLength > 0" theme="primary" class="mr-4xs">
-					{{ filtersLength }}
-				</n8n-badge>
-				{{ $locale.baseText('forms.resourceFiltersDropdown.filters') }}
-			</n8n-button>
-		</template>
-		<div :class="$style['filters-dropdown']" data-test-id="resources-list-filters-dropdown">
-			<slot :filters="modelValue" :set-key-value="setKeyValue" />
-			<enterprise-edition
-				v-if="shareable && projectsStore.isProjectHome"
-				:features="[EnterpriseEditionFeature.Sharing]"
-			>
-				<n8n-input-label
-					:label="$locale.baseText('forms.resourceFiltersDropdown.owner')"
-					:bold="false"
-					size="small"
-					color="text-base"
-					class="mb-3xs"
-				/>
-				<ProjectSharing
-					v-model="selectedProject"
-					:projects="projectsStore.projects"
-					:placeholder="$locale.baseText('forms.resourceFiltersDropdown.owner.placeholder')"
-					:empty-options-text="$locale.baseText('projects.sharing.noMatchingProjects')"
-					@update:model-value="setKeyValue('homeProject', ($event as ProjectSharingData).id)"
-				/>
-			</enterprise-edition>
-			<div v-if="hasFilters" :class="[$style['filters-dropdown-footer'], 'mt-s']">
-				<n8n-link @click="resetFilters">
-					{{ $locale.baseText('forms.resourceFiltersDropdown.reset') }}
-				</n8n-link>
-			</div>
-		</div>
-	</n8n-popover>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { EnterpriseEditionFeature } from '@/constants';
@@ -141,6 +95,52 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<n8n-popover trigger="click" width="304" size="large">
+		<template #reference>
+			<n8n-button
+				icon="filter"
+				type="tertiary"
+				:active="hasFilters"
+				:class="$style['filter-button']"
+				data-test-id="resources-list-filters-trigger"
+			>
+				<n8n-badge v-show="filtersLength > 0" theme="primary" class="mr-4xs">
+					{{ filtersLength }}
+				</n8n-badge>
+				{{ $locale.baseText('forms.resourceFiltersDropdown.filters') }}
+			</n8n-button>
+		</template>
+		<div :class="$style['filters-dropdown']" data-test-id="resources-list-filters-dropdown">
+			<slot :filters="modelValue" :set-key-value="setKeyValue" />
+			<enterprise-edition
+				v-if="shareable && projectsStore.isProjectHome"
+				:features="[EnterpriseEditionFeature.Sharing]"
+			>
+				<n8n-input-label
+					:label="$locale.baseText('forms.resourceFiltersDropdown.owner')"
+					:bold="false"
+					size="small"
+					color="text-base"
+					class="mb-3xs"
+				/>
+				<ProjectSharing
+					v-model="selectedProject"
+					:projects="projectsStore.projects"
+					:placeholder="$locale.baseText('forms.resourceFiltersDropdown.owner.placeholder')"
+					:empty-options-text="$locale.baseText('projects.sharing.noMatchingProjects')"
+					@update:model-value="setKeyValue('homeProject', ($event as ProjectSharingData).id)"
+				/>
+			</enterprise-edition>
+			<div v-if="hasFilters" :class="[$style['filters-dropdown-footer'], 'mt-s']">
+				<n8n-link @click="resetFilters">
+					{{ $locale.baseText('forms.resourceFiltersDropdown.reset') }}
+				</n8n-link>
+			</div>
+		</div>
+	</n8n-popover>
+</template>
+
 <style lang="scss" module>
 .filter-button {
 	height: 40px;
diff --git a/packages/editor-ui/src/components/layouts/PageViewLayout.vue b/packages/editor-ui/src/components/layouts/PageViewLayout.vue
index 523fdfc28ab2c..abb1ba02a04b6 100644
--- a/packages/editor-ui/src/components/layouts/PageViewLayout.vue
+++ b/packages/editor-ui/src/components/layouts/PageViewLayout.vue
@@ -1,12 +1,3 @@
-<template>
-	<div :class="$style.wrapper">
-		<slot name="header" />
-		<main :class="$style.content">
-			<slot />
-		</main>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -25,6 +16,15 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.wrapper">
+		<slot name="header" />
+		<main :class="$style.content">
+			<slot />
+		</main>
+	</div>
+</template>
+
 <style lang="scss" module>
 .wrapper {
 	display: grid;
diff --git a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
index 648b1d5eddd46..74f3c7d7d35b8 100644
--- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
+++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -1,150 +1,3 @@
-<template>
-	<PageViewLayout>
-		<template #header> <slot name="header" /> </template>
-		<div v-if="loading" class="resource-list-loading">
-			<n8n-loading :rows="25" :shrink-last="false" />
-		</div>
-		<template v-else>
-			<div v-if="resources.length === 0">
-				<slot name="empty">
-					<n8n-action-box
-						data-test-id="empty-resources-list"
-						emoji="👋"
-						:heading="
-							i18n.baseText(
-								usersStore.currentUser?.firstName
-									? (`${resourceKey}.empty.heading` as BaseTextKey)
-									: (`${resourceKey}.empty.heading.userNotSetup` as BaseTextKey),
-								{
-									interpolate: { name: usersStore.currentUser?.firstName ?? '' },
-								},
-							)
-						"
-						:description="i18n.baseText(`${resourceKey}.empty.description` as BaseTextKey)"
-						:button-text="i18n.baseText(`${resourceKey}.empty.button` as BaseTextKey)"
-						button-type="secondary"
-						:button-disabled="disabled"
-						@click:button="onAddButtonClick"
-					>
-						<template #disabledButtonTooltip>
-							{{ i18n.baseText(`${resourceKey}.empty.button.disabled.tooltip` as BaseTextKey) }}
-						</template>
-					</n8n-action-box>
-				</slot>
-			</div>
-			<PageViewLayoutList v-else :overflow="type !== 'list'">
-				<template #header>
-					<div :class="$style['filters-row']">
-						<div :class="$style.filters">
-							<n8n-input
-								ref="search"
-								:model-value="filtersModel.search"
-								:class="[$style['search'], 'mr-2xs']"
-								:placeholder="i18n.baseText(`${resourceKey}.search.placeholder` as BaseTextKey)"
-								clearable
-								data-test-id="resources-list-search"
-								@update:model-value="onSearch"
-							>
-								<template #prefix>
-									<n8n-icon icon="search" />
-								</template>
-							</n8n-input>
-							<ResourceFiltersDropdown
-								v-if="showFiltersDropdown"
-								:keys="filterKeys"
-								:reset="resetFilters"
-								:model-value="filtersModel"
-								:shareable="shareable"
-								@update:model-value="onUpdateFilters"
-								@update:filters-length="onUpdateFiltersLength"
-							>
-								<template #default="resourceFiltersSlotProps">
-									<slot name="filters" v-bind="resourceFiltersSlotProps" />
-								</template>
-							</ResourceFiltersDropdown>
-							<div :class="$style['sort-and-filter']">
-								<n8n-select v-model="sortBy" data-test-id="resources-list-sort">
-									<n8n-option
-										v-for="sortOption in sortOptions"
-										:key="sortOption"
-										data-test-id="resources-list-sort-item"
-										:value="sortOption"
-										:label="i18n.baseText(`${resourceKey}.sort.${sortOption}` as BaseTextKey)"
-									/>
-								</n8n-select>
-							</div>
-						</div>
-						<slot name="add-button" :disabled="disabled">
-							<n8n-button
-								size="large"
-								:disabled="disabled"
-								data-test-id="resources-list-add"
-								@click="onAddButtonClick"
-							>
-								{{ i18n.baseText(`${resourceKey}.add` as BaseTextKey) }}
-							</n8n-button>
-						</slot>
-					</div>
-
-					<slot name="callout"></slot>
-
-					<div v-if="showFiltersDropdown" v-show="hasFilters" class="mt-xs">
-						<n8n-info-tip :bold="false">
-							{{ i18n.baseText(`${resourceKey}.filters.active` as BaseTextKey) }}
-							<n8n-link data-test-id="workflows-filter-reset" size="small" @click="resetFilters">
-								{{ i18n.baseText(`${resourceKey}.filters.active.reset` as BaseTextKey) }}
-							</n8n-link>
-						</n8n-info-tip>
-					</div>
-
-					<div class="pb-xs" />
-				</template>
-
-				<slot name="preamble" />
-
-				<div
-					v-if="filteredAndSortedResources.length > 0"
-					ref="listWrapperRef"
-					:class="$style.listWrapper"
-				>
-					<n8n-recycle-scroller
-						v-if="type === 'list'"
-						data-test-id="resources-list"
-						:items="filteredAndSortedResources"
-						:item-size="itemSize()"
-						item-key="id"
-					>
-						<template #default="{ item, updateItemSize }">
-							<slot :data="item" :update-item-size="updateItemSize" />
-						</template>
-					</n8n-recycle-scroller>
-					<n8n-datatable
-						v-if="type === 'datatable'"
-						data-test-id="resources-table"
-						:class="$style.datatable"
-						:columns="getColumns()"
-						:rows="filteredAndSortedResources"
-						:current-page="currentPage"
-						:rows-per-page="rowsPerPage"
-						@update:current-page="setCurrentPage"
-						@update:rows-per-page="setRowsPerPage"
-					>
-						<template #row="{ columns, row }">
-							<slot :data="row" :columns="columns" />
-						</template>
-					</n8n-datatable>
-				</div>
-
-				<n8n-text v-else color="text-base" size="medium" data-test-id="resources-list-empty">
-					{{ i18n.baseText(`${resourceKey}.noResults` as BaseTextKey) }}
-				</n8n-text>
-
-				<slot name="postamble" />
-			</PageViewLayoutList>
-		</template>
-	</PageViewLayout>
-</template>
-
 <script lang="ts">
 import { computed, defineComponent, nextTick, ref, onMounted, watch } from 'vue';
 import type { PropType } from 'vue';
@@ -514,6 +367,153 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<PageViewLayout>
+		<template #header> <slot name="header" /> </template>
+		<div v-if="loading" class="resource-list-loading">
+			<n8n-loading :rows="25" :shrink-last="false" />
+		</div>
+		<template v-else>
+			<div v-if="resources.length === 0">
+				<slot name="empty">
+					<n8n-action-box
+						data-test-id="empty-resources-list"
+						emoji="👋"
+						:heading="
+							i18n.baseText(
+								usersStore.currentUser?.firstName
+									? (`${resourceKey}.empty.heading` as BaseTextKey)
+									: (`${resourceKey}.empty.heading.userNotSetup` as BaseTextKey),
+								{
+									interpolate: { name: usersStore.currentUser?.firstName ?? '' },
+								},
+							)
+						"
+						:description="i18n.baseText(`${resourceKey}.empty.description` as BaseTextKey)"
+						:button-text="i18n.baseText(`${resourceKey}.empty.button` as BaseTextKey)"
+						button-type="secondary"
+						:button-disabled="disabled"
+						@click:button="onAddButtonClick"
+					>
+						<template #disabledButtonTooltip>
+							{{ i18n.baseText(`${resourceKey}.empty.button.disabled.tooltip` as BaseTextKey) }}
+						</template>
+					</n8n-action-box>
+				</slot>
+			</div>
+			<PageViewLayoutList v-else :overflow="type !== 'list'">
+				<template #header>
+					<div :class="$style['filters-row']">
+						<div :class="$style.filters">
+							<n8n-input
+								ref="search"
+								:model-value="filtersModel.search"
+								:class="[$style['search'], 'mr-2xs']"
+								:placeholder="i18n.baseText(`${resourceKey}.search.placeholder` as BaseTextKey)"
+								clearable
+								data-test-id="resources-list-search"
+								@update:model-value="onSearch"
+							>
+								<template #prefix>
+									<n8n-icon icon="search" />
+								</template>
+							</n8n-input>
+							<ResourceFiltersDropdown
+								v-if="showFiltersDropdown"
+								:keys="filterKeys"
+								:reset="resetFilters"
+								:model-value="filtersModel"
+								:shareable="shareable"
+								@update:model-value="onUpdateFilters"
+								@update:filters-length="onUpdateFiltersLength"
+							>
+								<template #default="resourceFiltersSlotProps">
+									<slot name="filters" v-bind="resourceFiltersSlotProps" />
+								</template>
+							</ResourceFiltersDropdown>
+							<div :class="$style['sort-and-filter']">
+								<n8n-select v-model="sortBy" data-test-id="resources-list-sort">
+									<n8n-option
+										v-for="sortOption in sortOptions"
+										:key="sortOption"
+										data-test-id="resources-list-sort-item"
+										:value="sortOption"
+										:label="i18n.baseText(`${resourceKey}.sort.${sortOption}` as BaseTextKey)"
+									/>
+								</n8n-select>
+							</div>
+						</div>
+						<slot name="add-button" :disabled="disabled">
+							<n8n-button
+								size="large"
+								:disabled="disabled"
+								data-test-id="resources-list-add"
+								@click="onAddButtonClick"
+							>
+								{{ i18n.baseText(`${resourceKey}.add` as BaseTextKey) }}
+							</n8n-button>
+						</slot>
+					</div>
+
+					<slot name="callout"></slot>
+
+					<div v-if="showFiltersDropdown" v-show="hasFilters" class="mt-xs">
+						<n8n-info-tip :bold="false">
+							{{ i18n.baseText(`${resourceKey}.filters.active` as BaseTextKey) }}
+							<n8n-link data-test-id="workflows-filter-reset" size="small" @click="resetFilters">
+								{{ i18n.baseText(`${resourceKey}.filters.active.reset` as BaseTextKey) }}
+							</n8n-link>
+						</n8n-info-tip>
+					</div>
+
+					<div class="pb-xs" />
+				</template>
+
+				<slot name="preamble" />
+
+				<div
+					v-if="filteredAndSortedResources.length > 0"
+					ref="listWrapperRef"
+					:class="$style.listWrapper"
+				>
+					<n8n-recycle-scroller
+						v-if="type === 'list'"
+						data-test-id="resources-list"
+						:items="filteredAndSortedResources"
+						:item-size="itemSize()"
+						item-key="id"
+					>
+						<template #default="{ item, updateItemSize }">
+							<slot :data="item" :update-item-size="updateItemSize" />
+						</template>
+					</n8n-recycle-scroller>
+					<n8n-datatable
+						v-if="type === 'datatable'"
+						data-test-id="resources-table"
+						:class="$style.datatable"
+						:columns="getColumns()"
+						:rows="filteredAndSortedResources"
+						:current-page="currentPage"
+						:rows-per-page="rowsPerPage"
+						@update:current-page="setCurrentPage"
+						@update:rows-per-page="setRowsPerPage"
+					>
+						<template #row="{ columns, row }">
+							<slot :data="row" :columns="columns" />
+						</template>
+					</n8n-datatable>
+				</div>
+
+				<n8n-text v-else color="text-base" size="medium" data-test-id="resources-list-empty">
+					{{ i18n.baseText(`${resourceKey}.noResults` as BaseTextKey) }}
+				</n8n-text>
+
+				<slot name="postamble" />
+			</PageViewLayoutList>
+		</template>
+	</PageViewLayout>
+</template>
+
 <style lang="scss" module>
 .filters-row {
 	display: flex;
diff --git a/packages/editor-ui/src/composables/useCanvas.ts b/packages/editor-ui/src/composables/useCanvas.ts
new file mode 100644
index 0000000000000..5c534104d8bd3
--- /dev/null
+++ b/packages/editor-ui/src/composables/useCanvas.ts
@@ -0,0 +1,12 @@
+import { computed, inject } from 'vue';
+import { CanvasKey } from '@/constants';
+
+export function useCanvas() {
+	const canvas = inject(CanvasKey);
+
+	const connectingHandle = computed(() => canvas?.connectingHandle.value);
+
+	return {
+		connectingHandle,
+	};
+}
diff --git a/packages/editor-ui/src/composables/useCanvasNodeHandle.ts b/packages/editor-ui/src/composables/useCanvasNodeHandle.ts
index 260849a3cb4fc..9a6005d017277 100644
--- a/packages/editor-ui/src/composables/useCanvasNodeHandle.ts
+++ b/packages/editor-ui/src/composables/useCanvasNodeHandle.ts
@@ -12,13 +12,15 @@ export function useCanvasNodeHandle() {
 	const handle = inject(CanvasNodeHandleKey);
 
 	const label = computed(() => handle?.label.value ?? '');
-	const connected = computed(() => handle?.connected.value ?? false);
+	const isConnected = computed(() => handle?.isConnected.value ?? false);
+	const isConnecting = computed(() => handle?.isConnecting.value ?? false);
 	const type = computed(() => handle?.type.value ?? NodeConnectionType.Main);
 	const mode = computed(() => handle?.mode.value ?? CanvasConnectionMode.Input);
 
 	return {
 		label,
-		connected,
+		isConnected,
+		isConnecting,
 		type,
 		mode,
 	};
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index ea1a864b08a16..1a948d94d6457 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -4,7 +4,11 @@ import type {
 	NodeCreatorOpenSource,
 } from './Interface';
 import { NodeConnectionType } from 'n8n-workflow';
-import type { CanvasNodeHandleInjectionData, CanvasNodeInjectionData } from '@/types';
+import type {
+	CanvasInjectionData,
+	CanvasNodeHandleInjectionData,
+	CanvasNodeInjectionData,
+} from '@/types';
 import type { InjectionKey } from 'vue';
 
 export const MAX_WORKFLOW_SIZE = 1024 * 1024 * 16; // Workflow size limit in bytes
@@ -856,6 +860,7 @@ export const INSECURE_CONNECTION_WARNING = `
  * Injection Keys
  */
 
+export const CanvasKey = 'canvas' as unknown as InjectionKey<CanvasInjectionData>;
 export const CanvasNodeKey = 'canvasNode' as unknown as InjectionKey<CanvasNodeInjectionData>;
 export const CanvasNodeHandleKey =
 	'canvasNodeHandle' as unknown as InjectionKey<CanvasNodeHandleInjectionData>;
diff --git a/packages/editor-ui/src/stores/__tests__/assistant.store.test.ts b/packages/editor-ui/src/stores/__tests__/assistant.store.test.ts
new file mode 100644
index 0000000000000..279f9e0b01884
--- /dev/null
+++ b/packages/editor-ui/src/stores/__tests__/assistant.store.test.ts
@@ -0,0 +1,317 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { setActivePinia, createPinia } from 'pinia';
+import {
+	DEFAULT_CHAT_WIDTH,
+	ENABLED_VIEWS,
+	MAX_CHAT_WIDTH,
+	MIN_CHAT_WIDTH,
+	useAssistantStore,
+} from '@/stores/assistant.store';
+import type { ChatRequest } from '@/types/assistant.types';
+import { usePostHog } from '../posthog.store';
+import { useSettingsStore } from '@/stores/settings.store';
+import { defaultSettings } from '../../__tests__/defaults';
+import { merge } from 'lodash-es';
+import { DEFAULT_POSTHOG_SETTINGS } from './posthog.test';
+import { AI_ASSISTANT_EXPERIMENT } from '@/constants';
+import { reactive } from 'vue';
+import * as chatAPI from '@/api/assistant';
+
+let settingsStore: ReturnType<typeof useSettingsStore>;
+let posthogStore: ReturnType<typeof usePostHog>;
+
+const apiSpy = vi.spyOn(chatAPI, 'chatWithAssistant');
+
+const setAssistantEnabled = (enabled: boolean) => {
+	settingsStore.setSettings(
+		merge({}, defaultSettings, {
+			aiAssistant: { enabled },
+		}),
+	);
+};
+
+vi.mock('vue-router', () => ({
+	useRoute: vi.fn(() =>
+		reactive({
+			path: '/',
+			params: {},
+			name: ENABLED_VIEWS[0],
+		}),
+	),
+	RouterLink: vi.fn(),
+}));
+
+const mockPostHogVariant = (variant: 'variant' | 'control') => {
+	posthogStore.overrides = {
+		[AI_ASSISTANT_EXPERIMENT.name]: variant,
+	};
+};
+
+describe('AI Assistant store', () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		setActivePinia(createPinia());
+		settingsStore = useSettingsStore();
+		settingsStore.setSettings(
+			merge({}, defaultSettings, {
+				posthog: DEFAULT_POSTHOG_SETTINGS,
+			}),
+		);
+		window.posthog = {
+			init: () => {},
+			identify: () => {},
+		};
+		posthogStore = usePostHog();
+		posthogStore.init();
+	});
+
+	it('initializes with default values', () => {
+		const assistantStore = useAssistantStore();
+
+		expect(assistantStore.chatWidth).toBe(DEFAULT_CHAT_WIDTH);
+		expect(assistantStore.chatMessages).toEqual([]);
+		expect(assistantStore.chatWindowOpen).toBe(false);
+		expect(assistantStore.streaming).toBeUndefined();
+	});
+
+	it('can change chat width', () => {
+		const assistantStore = useAssistantStore();
+
+		assistantStore.updateWindowWidth(400);
+		expect(assistantStore.chatWidth).toBe(400);
+	});
+
+	it('should not allow chat width to be less than the minimal width', () => {
+		const assistantStore = useAssistantStore();
+
+		assistantStore.updateWindowWidth(100);
+		expect(assistantStore.chatWidth).toBe(MIN_CHAT_WIDTH);
+	});
+
+	it('should not allow chat width to be more than the maximal width', () => {
+		const assistantStore = useAssistantStore();
+
+		assistantStore.updateWindowWidth(2000);
+		expect(assistantStore.chatWidth).toBe(MAX_CHAT_WIDTH);
+	});
+
+	it('should open chat window', () => {
+		const assistantStore = useAssistantStore();
+
+		assistantStore.openChat();
+		expect(assistantStore.chatWindowOpen).toBe(true);
+	});
+
+	it('should close chat window', () => {
+		const assistantStore = useAssistantStore();
+
+		assistantStore.closeChat();
+		expect(assistantStore.chatWindowOpen).toBe(false);
+	});
+
+	it('can add a simple assistant message', () => {
+		const assistantStore = useAssistantStore();
+
+		const message: ChatRequest.MessageResponse = {
+			type: 'message',
+			role: 'assistant',
+			text: 'Hello!',
+		};
+		assistantStore.addAssistantMessages([message], '1');
+		expect(assistantStore.chatMessages.length).toBe(1);
+		expect(assistantStore.chatMessages[0]).toEqual({
+			id: '1',
+			type: 'text',
+			role: 'assistant',
+			content: 'Hello!',
+			quickReplies: undefined,
+			read: false,
+		});
+	});
+
+	it('can add an assistant message with quick replies', () => {
+		const assistantStore = useAssistantStore();
+
+		const message: ChatRequest.MessageResponse = {
+			type: 'message',
+			role: 'assistant',
+			text: 'Hello!',
+			quickReplies: [
+				{ text: 'Yes', type: 'text' },
+				{ text: 'No', type: 'text' },
+			],
+		};
+		assistantStore.addAssistantMessages([message], '1');
+		expect(assistantStore.chatMessages.length).toBe(1);
+		expect(assistantStore.chatMessages[0]).toEqual({
+			id: '1',
+			type: 'text',
+			role: 'assistant',
+			content: 'Hello!',
+			read: false,
+			quickReplies: [
+				{ text: 'Yes', type: 'text' },
+				{ text: 'No', type: 'text' },
+			],
+		});
+	});
+
+	it('can add an assistant code-diff message', () => {
+		const assistantStore = useAssistantStore();
+
+		const message: ChatRequest.MessageResponse = {
+			type: 'code-diff',
+			role: 'assistant',
+			description: 'Here is the suggested code change',
+			codeDiff: 'diff --git a/file1 b/file2',
+			suggestionId: '1',
+			solution_count: 1,
+			quickReplies: [
+				{ text: 'Yes', type: 'text' },
+				{ text: 'No', type: 'text' },
+			],
+		};
+		assistantStore.addAssistantMessages([message], '1');
+		expect(assistantStore.chatMessages.length).toBe(1);
+		expect(assistantStore.chatMessages[0]).toEqual({
+			id: '1',
+			type: 'code-diff',
+			role: 'assistant',
+			description: 'Here is the suggested code change',
+			codeDiff: 'diff --git a/file1 b/file2',
+			suggestionId: '1',
+			read: false,
+			quickReplies: [
+				{ text: 'Yes', type: 'text' },
+				{ text: 'No', type: 'text' },
+			],
+		});
+	});
+
+	it('can add an assistant summary message', () => {
+		const assistantStore = useAssistantStore();
+
+		const message: ChatRequest.MessageResponse = {
+			type: 'summary',
+			role: 'assistant',
+			title: 'Summary',
+			content: 'Here is the summary',
+			quickReplies: [
+				{ text: 'Yes', type: 'text' },
+				{ text: 'No', type: 'text' },
+			],
+		};
+		assistantStore.addAssistantMessages([message], '1');
+		expect(assistantStore.chatMessages.length).toBe(1);
+		expect(assistantStore.chatMessages[0]).toEqual({
+			id: '1',
+			type: 'block',
+			role: 'assistant',
+			title: 'Summary',
+			content: 'Here is the summary',
+			read: false,
+			quickReplies: [
+				{ text: 'Yes', type: 'text' },
+				{ text: 'No', type: 'text' },
+			],
+		});
+	});
+
+	it('can add an agent suggestion message', () => {
+		const assistantStore = useAssistantStore();
+
+		const message: ChatRequest.MessageResponse = {
+			type: 'agent-suggestion',
+			role: 'assistant',
+			title: 'A Suggestion',
+			text: 'Here is a suggestion',
+			quickReplies: [
+				{ text: 'Yes', type: 'text' },
+				{ text: 'No', type: 'text' },
+			],
+		};
+		assistantStore.addAssistantMessages([message], '1');
+		expect(assistantStore.chatMessages.length).toBe(1);
+		expect(assistantStore.chatMessages[0]).toEqual({
+			id: '1',
+			type: 'block',
+			role: 'assistant',
+			title: 'A Suggestion',
+			content: 'Here is a suggestion',
+			read: false,
+			quickReplies: [
+				{ text: 'Yes', type: 'text' },
+				{ text: 'No', type: 'text' },
+			],
+		});
+	});
+
+	it('should reset assistant chat session', () => {
+		const assistantStore = useAssistantStore();
+
+		const message: ChatRequest.MessageResponse = {
+			type: 'message',
+			role: 'assistant',
+			text: 'Hello!',
+			quickReplies: [
+				{ text: 'Yes', type: 'text' },
+				{ text: 'No', type: 'text' },
+			],
+		};
+		assistantStore.addAssistantMessages([message], '1');
+		expect(assistantStore.chatMessages.length).toBe(1);
+
+		assistantStore.resetAssistantChat();
+		expect(assistantStore.chatMessages).toEqual([]);
+		expect(assistantStore.currentSessionId).toBeUndefined();
+	});
+
+	it('should not show assistant for control experiment group', () => {
+		const assistantStore = useAssistantStore();
+
+		mockPostHogVariant('control');
+		setAssistantEnabled(true);
+		expect(assistantStore.canShowAssistant).toBe(false);
+		expect(assistantStore.canShowAssistantButtons).toBe(false);
+	});
+
+	it('should not show assistant if disabled in settings', () => {
+		const assistantStore = useAssistantStore();
+
+		mockPostHogVariant('variant');
+		setAssistantEnabled(false);
+		expect(assistantStore.canShowAssistant).toBe(false);
+		expect(assistantStore.canShowAssistantButtons).toBe(false);
+	});
+
+	it('should show assistant if all conditions are met', () => {
+		const assistantStore = useAssistantStore();
+
+		setAssistantEnabled(true);
+		mockPostHogVariant('variant');
+		expect(assistantStore.canShowAssistant).toBe(true);
+		expect(assistantStore.canShowAssistantButtons).toBe(true);
+	});
+
+	it('should initialize assistant chat session on node error', async () => {
+		const context: ChatRequest.ErrorContext = {
+			error: {
+				description: '',
+				message: 'Hey',
+				name: 'NodeOperationError',
+			},
+			node: {
+				id: '1',
+				type: 'n8n-nodes-base.stopAndError',
+				typeVersion: 1,
+				name: 'Stop and Error',
+				position: [250, 250],
+				parameters: {},
+			},
+		};
+		const assistantStore = useAssistantStore();
+		await assistantStore.initErrorHelper(context);
+		expect(assistantStore.chatMessages.length).toBe(2);
+		expect(apiSpy).toHaveBeenCalled();
+	});
+});
diff --git a/packages/editor-ui/src/stores/__tests__/posthog.test.ts b/packages/editor-ui/src/stores/__tests__/posthog.test.ts
index 75f0c40b2906c..e689a880c65b6 100644
--- a/packages/editor-ui/src/stores/__tests__/posthog.test.ts
+++ b/packages/editor-ui/src/stores/__tests__/posthog.test.ts
@@ -9,7 +9,7 @@ import { LOCAL_STORAGE_EXPERIMENT_OVERRIDES } from '@/constants';
 import { nextTick } from 'vue';
 import { defaultSettings } from '../../__tests__/defaults';
 
-const DEFAULT_POSTHOG_SETTINGS: IN8nUISettings['posthog'] = {
+export const DEFAULT_POSTHOG_SETTINGS: IN8nUISettings['posthog'] = {
 	enabled: true,
 	apiHost: 'host',
 	apiKey: 'key',
diff --git a/packages/editor-ui/src/stores/assistant.store.ts b/packages/editor-ui/src/stores/assistant.store.ts
index 75ee335cfc54c..ce0ecc0f2a2be 100644
--- a/packages/editor-ui/src/stores/assistant.store.ts
+++ b/packages/editor-ui/src/stores/assistant.store.ts
@@ -28,13 +28,14 @@ import { useI18n } from '@/composables/useI18n';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useToast } from '@/composables/useToast';
 
-const MAX_CHAT_WIDTH = 425;
-const MIN_CHAT_WIDTH = 250;
-const ENABLED_VIEWS = [...EDITABLE_CANVAS_VIEWS, VIEWS.EXECUTION_PREVIEW];
+export const MAX_CHAT_WIDTH = 425;
+export const MIN_CHAT_WIDTH = 250;
+export const DEFAULT_CHAT_WIDTH = 325;
+export const ENABLED_VIEWS = [...EDITABLE_CANVAS_VIEWS, VIEWS.EXECUTION_PREVIEW];
 const READABLE_TYPES = ['code-diff', 'text', 'block'];
 
 export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
-	const chatWidth = ref<number>(325);
+	const chatWidth = ref<number>(DEFAULT_CHAT_WIDTH);
 
 	const settings = useSettingsStore();
 	const rootStore = useRootStore();
@@ -554,5 +555,7 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
 		applyCodeDiff,
 		undoCodeDiff,
 		resetAssistantChat,
+		chatWindowOpen,
+		addAssistantMessages,
 	};
 });
diff --git a/packages/editor-ui/src/stores/posthog.store.ts b/packages/editor-ui/src/stores/posthog.store.ts
index 6a25ca5520fd9..df52fb2af60c0 100644
--- a/packages/editor-ui/src/stores/posthog.store.ts
+++ b/packages/editor-ui/src/stores/posthog.store.ts
@@ -203,5 +203,6 @@ export const usePostHog = defineStore('posthog', () => {
 		identify,
 		capture,
 		setMetadata,
+		overrides,
 	};
 });
diff --git a/packages/editor-ui/src/types/canvas.ts b/packages/editor-ui/src/types/canvas.ts
index 3d754ad236c8b..e76561f563916 100644
--- a/packages/editor-ui/src/types/canvas.ts
+++ b/packages/editor-ui/src/types/canvas.ts
@@ -30,7 +30,9 @@ export type CanvasConnectionPort = {
 };
 
 export interface CanvasElementPortWithRenderData extends CanvasConnectionPort {
-	connected: boolean;
+	handleId: string;
+	isConnected: boolean;
+	isConnecting: boolean;
 	position: Position;
 	offset?: { top?: string; left?: string };
 }
@@ -118,6 +120,10 @@ export type CanvasConnectionCreateData = {
 	};
 };
 
+export interface CanvasInjectionData {
+	connectingHandle: Ref<ConnectStartEvent | undefined>;
+}
+
 export interface CanvasNodeInjectionData {
 	id: Ref<string>;
 	data: Ref<CanvasNodeData>;
@@ -129,7 +135,8 @@ export interface CanvasNodeHandleInjectionData {
 	label: Ref<string | undefined>;
 	mode: Ref<CanvasConnectionMode>;
 	type: Ref<NodeConnectionType>;
-	connected: Ref<boolean | undefined>;
+	isConnected: Ref<boolean | undefined>;
+	isConnecting: Ref<boolean | undefined>;
 }
 
 export type ConnectStartEvent = { handleId: string; handleType: string; nodeId: string };
diff --git a/packages/editor-ui/src/views/AuthView.vue b/packages/editor-ui/src/views/AuthView.vue
index 3c95a67cb907e..871b9f9bf590d 100644
--- a/packages/editor-ui/src/views/AuthView.vue
+++ b/packages/editor-ui/src/views/AuthView.vue
@@ -1,26 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<div :class="$style.logoContainer">
-			<Logo />
-		</div>
-		<div v-if="subtitle" :class="$style.textContainer">
-			<n8n-text size="large">{{ subtitle }}</n8n-text>
-		</div>
-		<div :class="$style.formContainer">
-			<n8n-form-box
-				v-bind="form"
-				data-test-id="auth-form"
-				:button-loading="formLoading"
-				@secondary-click="onSecondaryClick"
-				@submit="onSubmit"
-				@update="onUpdate"
-			>
-				<SSOLogin v-if="withSso" />
-			</n8n-form-box>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { type PropType, defineComponent } from 'vue';
 
@@ -64,6 +41,29 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.container">
+		<div :class="$style.logoContainer">
+			<Logo />
+		</div>
+		<div v-if="subtitle" :class="$style.textContainer">
+			<n8n-text size="large">{{ subtitle }}</n8n-text>
+		</div>
+		<div :class="$style.formContainer">
+			<n8n-form-box
+				v-bind="form"
+				data-test-id="auth-form"
+				:button-loading="formLoading"
+				@secondary-click="onSecondaryClick"
+				@submit="onSubmit"
+				@update="onUpdate"
+			>
+				<SSOLogin v-if="withSso" />
+			</n8n-form-box>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 body {
 	background-color: var(--color-background-light);
diff --git a/packages/editor-ui/src/views/CanvasAddButton.vue b/packages/editor-ui/src/views/CanvasAddButton.vue
index 05590a9573cf5..ff7b37b4e33bb 100644
--- a/packages/editor-ui/src/views/CanvasAddButton.vue
+++ b/packages/editor-ui/src/views/CanvasAddButton.vue
@@ -1,3 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { XYPosition } from '@/Interface';
+import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
+
+export interface Props {
+	showTooltip: boolean;
+	position: XYPosition;
+}
+
+const props = defineProps<Props>();
+
+const nodeCreatorStore = useNodeCreatorStore();
+const containerCssVars = computed(() => ({
+	'--trigger-placeholder-left-position': `${props.position[0]}px`,
+	'--trigger-placeholder-top-position': `${props.position[1]}px`,
+}));
+</script>
+
 <template>
 	<div
 		ref="container"
@@ -23,25 +42,6 @@
 	</div>
 </template>
 
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { XYPosition } from '@/Interface';
-import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
-
-export interface Props {
-	showTooltip: boolean;
-	position: XYPosition;
-}
-
-const props = defineProps<Props>();
-
-const nodeCreatorStore = useNodeCreatorStore();
-const containerCssVars = computed(() => ({
-	'--trigger-placeholder-left-position': `${props.position[0]}px`,
-	'--trigger-placeholder-top-position': `${props.position[1]}px`,
-}));
-</script>
-
 <style lang="scss" module>
 .canvasAddButton {
 	display: flex;
diff --git a/packages/editor-ui/src/views/ChangePasswordView.vue b/packages/editor-ui/src/views/ChangePasswordView.vue
index a7598a4697938..d45bc30efa8b1 100644
--- a/packages/editor-ui/src/views/ChangePasswordView.vue
+++ b/packages/editor-ui/src/views/ChangePasswordView.vue
@@ -1,13 +1,3 @@
-<template>
-	<AuthView
-		v-if="config"
-		:form="config"
-		:form-loading="loading"
-		@submit="onSubmit"
-		@update="onInput"
-	/>
-</template>
-
 <script lang="ts">
 import AuthView from '@/views/AuthView.vue';
 import { useToast } from '@/composables/useToast';
@@ -170,3 +160,13 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<AuthView
+		v-if="config"
+		:form="config"
+		:form-loading="loading"
+		@submit="onSubmit"
+		@update="onInput"
+	/>
+</template>
diff --git a/packages/editor-ui/src/views/CredentialsView.vue b/packages/editor-ui/src/views/CredentialsView.vue
index fe71fcb8fff72..28f7e5655c019 100644
--- a/packages/editor-ui/src/views/CredentialsView.vue
+++ b/packages/editor-ui/src/views/CredentialsView.vue
@@ -1,66 +1,3 @@
-<template>
-	<ResourcesListLayout
-		ref="layout"
-		resource-key="credentials"
-		:resources="allCredentials"
-		:initialize="initialize"
-		:filters="filters"
-		:additional-filters-handler="onFilter"
-		:type-props="{ itemSize: 77 }"
-		:loading="loading"
-		:disabled="readOnlyEnv || !projectPermissions.credential.create"
-		@click:add="addCredential"
-		@update:filters="filters = $event"
-	>
-		<template #header>
-			<ProjectTabs />
-		</template>
-		<template #add-button="{ disabled }">
-			<div>
-				<n8n-button
-					size="large"
-					block
-					:disabled="disabled"
-					data-test-id="resources-list-add"
-					@click="addCredential"
-				>
-					{{ addCredentialButtonText }}
-				</n8n-button>
-			</div>
-		</template>
-		<template #default="{ data }">
-			<CredentialCard data-test-id="resources-list-item" class="mb-2xs" :data="data" />
-		</template>
-		<template #filters="{ setKeyValue }">
-			<div class="mb-s">
-				<n8n-input-label
-					:label="$locale.baseText('credentials.filters.type')"
-					:bold="false"
-					size="small"
-					color="text-base"
-					class="mb-3xs"
-				/>
-				<n8n-select
-					ref="typeInput"
-					:model-value="filters.type"
-					size="medium"
-					multiple
-					filterable
-					:class="$style['type-input']"
-					@update:model-value="setKeyValue('type', $event)"
-				>
-					<n8n-option
-						v-for="credentialType in allCredentialTypes"
-						:key="credentialType.name"
-						:value="credentialType.name"
-						:label="credentialType.displayName"
-					/>
-				</n8n-select>
-			</div>
-		</template>
-	</ResourcesListLayout>
-</template>
-
 <script lang="ts">
 import type { ICredentialsResponse, ICredentialTypeMap } from '@/Interface';
 import { defineComponent } from 'vue';
@@ -211,6 +148,69 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<ResourcesListLayout
+		ref="layout"
+		resource-key="credentials"
+		:resources="allCredentials"
+		:initialize="initialize"
+		:filters="filters"
+		:additional-filters-handler="onFilter"
+		:type-props="{ itemSize: 77 }"
+		:loading="loading"
+		:disabled="readOnlyEnv || !projectPermissions.credential.create"
+		@click:add="addCredential"
+		@update:filters="filters = $event"
+	>
+		<template #header>
+			<ProjectTabs />
+		</template>
+		<template #add-button="{ disabled }">
+			<div>
+				<n8n-button
+					size="large"
+					block
+					:disabled="disabled"
+					data-test-id="resources-list-add"
+					@click="addCredential"
+				>
+					{{ addCredentialButtonText }}
+				</n8n-button>
+			</div>
+		</template>
+		<template #default="{ data }">
+			<CredentialCard data-test-id="resources-list-item" class="mb-2xs" :data="data" />
+		</template>
+		<template #filters="{ setKeyValue }">
+			<div class="mb-s">
+				<n8n-input-label
+					:label="$locale.baseText('credentials.filters.type')"
+					:bold="false"
+					size="small"
+					color="text-base"
+					class="mb-3xs"
+				/>
+				<n8n-select
+					ref="typeInput"
+					:model-value="filters.type"
+					size="medium"
+					multiple
+					filterable
+					:class="$style['type-input']"
+					@update:model-value="setKeyValue('type', $event)"
+				>
+					<n8n-option
+						v-for="credentialType in allCredentialTypes"
+						:key="credentialType.name"
+						:value="credentialType.name"
+						:label="credentialType.displayName"
+					/>
+				</n8n-select>
+			</div>
+		</template>
+	</ResourcesListLayout>
+</template>
+
 <style lang="scss" module>
 .type-input {
 	--max-width: 265px;
diff --git a/packages/editor-ui/src/views/ErrorView.vue b/packages/editor-ui/src/views/ErrorView.vue
index 1a0a1fc4da841..93935fe576fde 100644
--- a/packages/editor-ui/src/views/ErrorView.vue
+++ b/packages/editor-ui/src/views/ErrorView.vue
@@ -1,3 +1,21 @@
+<script setup lang="ts">
+import type { BaseTextKey } from '@/plugins/i18n';
+import { useRouter } from 'vue-router';
+import { VIEWS } from '@/constants';
+const router = useRouter();
+
+const props = defineProps<{
+	messageKey: BaseTextKey;
+	errorCode: number;
+	redirectTextKey: BaseTextKey;
+	redirectPage?: keyof typeof VIEWS;
+}>();
+
+function onButtonClick() {
+	void router.push({ name: props.redirectPage ?? VIEWS.HOMEPAGE });
+}
+</script>
+
 <template>
 	<div :class="$style.container">
 		<font-awesome-icon icon="exclamation-triangle" :class="$style.icon" />
@@ -17,24 +35,6 @@
 	</div>
 </template>
 
-<script setup lang="ts">
-import type { BaseTextKey } from '@/plugins/i18n';
-import { useRouter } from 'vue-router';
-import { VIEWS } from '@/constants';
-const router = useRouter();
-
-const props = defineProps<{
-	messageKey: BaseTextKey;
-	errorCode: number;
-	redirectTextKey: BaseTextKey;
-	redirectPage?: keyof typeof VIEWS;
-}>();
-
-function onButtonClick() {
-	void router.push({ name: props.redirectPage ?? VIEWS.HOMEPAGE });
-}
-</script>
-
 <style lang="scss" module>
 .container {
 	height: 100%;
diff --git a/packages/editor-ui/src/views/ForgotMyPasswordView.vue b/packages/editor-ui/src/views/ForgotMyPasswordView.vue
index b04ef8e7609be..f365798571b00 100644
--- a/packages/editor-ui/src/views/ForgotMyPasswordView.vue
+++ b/packages/editor-ui/src/views/ForgotMyPasswordView.vue
@@ -1,7 +1,3 @@
-<template>
-	<AuthView :form="formConfig" :form-loading="loading" @submit="onSubmit" />
-</template>
-
 <script lang="ts">
 import AuthView from './AuthView.vue';
 import { useToast } from '@/composables/useToast';
@@ -108,3 +104,7 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<AuthView :form="formConfig" :form-loading="loading" @submit="onSubmit" />
+</template>
diff --git a/packages/editor-ui/src/views/MfaView.vue b/packages/editor-ui/src/views/MfaView.vue
index b4bbe14105f0e..71b6ff9243f82 100644
--- a/packages/editor-ui/src/views/MfaView.vue
+++ b/packages/editor-ui/src/views/MfaView.vue
@@ -1,73 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<div :class="$style.logoContainer">
-			<Logo />
-		</div>
-		<n8n-card>
-			<div :class="$style.headerContainer">
-				<n8n-heading size="xlarge" color="text-dark">{{
-					showRecoveryCodeForm
-						? i18.baseText('mfa.recovery.modal.title')
-						: i18.baseText('mfa.code.modal.title')
-				}}</n8n-heading>
-			</div>
-			<div :class="[$style.formContainer, reportError ? $style.formError : '']">
-				<n8n-form-inputs
-					v-if="formInputs"
-					data-test-id="mfa-login-form"
-					:inputs="formInputs"
-					:event-bus="formBus"
-					@input="onInput"
-					@submit="onSubmit"
-				/>
-				<div :class="$style.infoBox">
-					<n8n-text
-						v-if="!showRecoveryCodeForm && !reportError"
-						size="small"
-						color="text-base"
-						:bold="false"
-						>{{ i18.baseText('mfa.code.input.info') }}
-						<a data-test-id="mfa-enter-recovery-code-button" @click="onRecoveryCodeClick">{{
-							i18.baseText('mfa.code.input.info.action')
-						}}</a></n8n-text
-					>
-					<n8n-text v-if="reportError" color="danger" size="small"
-						>{{ formError }}
-						<a
-							v-if="!showRecoveryCodeForm"
-							:class="$style.recoveryCodeLink"
-							@click="onRecoveryCodeClick"
-						>
-							{{ i18.baseText('mfa.recovery.input.info.action') }}</a
-						>
-					</n8n-text>
-				</div>
-			</div>
-			<div>
-				<n8n-button
-					float="right"
-					:loading="verifyingMfaToken"
-					:label="
-						showRecoveryCodeForm
-							? i18.baseText('mfa.recovery.button.verify')
-							: i18.baseText('mfa.code.button.continue')
-					"
-					size="large"
-					:disabled="!hasAnyChanges"
-					@click="onSaveClick"
-				/>
-				<n8n-button
-					float="left"
-					:label="i18.baseText('mfa.button.back')"
-					size="large"
-					type="tertiary"
-					@click="onBackClick"
-				/>
-			</div>
-		</n8n-card>
-	</div>
-</template>
-
 <script setup lang="ts">
 import type { IFormInputs } from '@/Interface';
 import Logo from '../components/Logo.vue';
@@ -233,6 +163,76 @@ onMounted(() => {
 // #endregion
 </script>
 
+<template>
+	<div :class="$style.container">
+		<div :class="$style.logoContainer">
+			<Logo />
+		</div>
+		<n8n-card>
+			<div :class="$style.headerContainer">
+				<n8n-heading size="xlarge" color="text-dark">{{
+					showRecoveryCodeForm
+						? i18.baseText('mfa.recovery.modal.title')
+						: i18.baseText('mfa.code.modal.title')
+				}}</n8n-heading>
+			</div>
+			<div :class="[$style.formContainer, reportError ? $style.formError : '']">
+				<n8n-form-inputs
+					v-if="formInputs"
+					data-test-id="mfa-login-form"
+					:inputs="formInputs"
+					:event-bus="formBus"
+					@input="onInput"
+					@submit="onSubmit"
+				/>
+				<div :class="$style.infoBox">
+					<n8n-text
+						v-if="!showRecoveryCodeForm && !reportError"
+						size="small"
+						color="text-base"
+						:bold="false"
+						>{{ i18.baseText('mfa.code.input.info') }}
+						<a data-test-id="mfa-enter-recovery-code-button" @click="onRecoveryCodeClick">{{
+							i18.baseText('mfa.code.input.info.action')
+						}}</a></n8n-text
+					>
+					<n8n-text v-if="reportError" color="danger" size="small"
+						>{{ formError }}
+						<a
+							v-if="!showRecoveryCodeForm"
+							:class="$style.recoveryCodeLink"
+							@click="onRecoveryCodeClick"
+						>
+							{{ i18.baseText('mfa.recovery.input.info.action') }}</a
+						>
+					</n8n-text>
+				</div>
+			</div>
+			<div>
+				<n8n-button
+					float="right"
+					:loading="verifyingMfaToken"
+					:label="
+						showRecoveryCodeForm
+							? i18.baseText('mfa.recovery.button.verify')
+							: i18.baseText('mfa.code.button.continue')
+					"
+					size="large"
+					:disabled="!hasAnyChanges"
+					@click="onSaveClick"
+				/>
+				<n8n-button
+					float="left"
+					:label="i18.baseText('mfa.button.back')"
+					size="large"
+					type="tertiary"
+					@click="onBackClick"
+				/>
+			</div>
+		</n8n-card>
+	</div>
+</template>
+
 <style lang="scss" module>
 body {
 	background-color: var(--color-background-light);
diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
index bbce98a844b70..9e6bf5b12568d 100644
--- a/packages/editor-ui/src/views/NodeView.v2.vue
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -726,7 +726,12 @@ function onRevertCreateConnection({ connection }: { connection: [IConnection, IC
 	revertCreateConnection(connection);
 }
 
-function onCreateConnectionCancelled(event: ConnectStartEvent) {
+function onCreateConnectionCancelled(event: ConnectStartEvent, mouseEvent?: MouseEvent) {
+	const preventDefault = (mouseEvent?.target as HTMLElement).classList?.contains('clickable');
+	if (preventDefault) {
+		return;
+	}
+
 	setTimeout(() => {
 		nodeCreatorStore.openNodeCreatorForConnectingNode({
 			connection: {
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 6bcc74bd2b1e8..266b4c1fda084 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -1,222 +1,3 @@
-<template>
-	<div ref="nodeViewRootRef" :class="$style['content']">
-		<div
-			id="node-view-root"
-			class="node-view-root do-not-select"
-			data-test-id="node-view-root"
-			@dragover="onDragOver"
-			@drop="onDrop"
-		>
-			<div
-				v-touch:tap="touchTap"
-				class="node-view-wrapper"
-				:class="workflowClasses"
-				data-test-id="node-view-wrapper"
-				@touchstart="mouseDown"
-				@touchend="mouseUp"
-				@touchmove="canvasPanning.onMouseMove"
-				@mousedown="mouseDown"
-				@mouseup="mouseUp"
-				@contextmenu="onContextMenu"
-				@wheel="canvasStore.wheelScroll"
-			>
-				<div
-					id="node-view-background"
-					class="node-view-background"
-					:style="backgroundStyle"
-					data-test-id="node-view-background"
-				/>
-				<div
-					id="node-view"
-					ref="nodeViewRef"
-					class="node-view"
-					:style="workflowStyle"
-					data-test-id="node-view"
-				>
-					<CanvasAddButton
-						v-show="showCanvasAddButton"
-						ref="canvasAddButton"
-						:style="canvasAddButtonStyle"
-						:show-tooltip="!containsTrigger && showTriggerMissingTooltip"
-						:position="canvasStore.canvasAddButtonPosition"
-						data-test-id="canvas-add-button"
-						@click="onCanvasAddButtonCLick"
-						@hook:mounted="canvasStore.setRecenteredCanvasAddButtonPosition"
-					/>
-					<Node
-						v-for="nodeData in nodesToRender"
-						:key="`${nodeData.id}_node`"
-						:name="nodeData.name"
-						:is-read-only="
-							isReadOnlyRoute ||
-							readOnlyEnv ||
-							!(workflowPermissions.update ?? projectPermissions.workflow.update)
-						"
-						:instance="instance"
-						:is-active="!!activeNode && activeNode.name === nodeData.name"
-						:hide-actions="pullConnActive"
-						:is-production-execution-preview="isProductionExecutionPreview"
-						:workflow="currentWorkflowObject"
-						:disable-pointer-events="!canOpenNDV"
-						:hide-node-issues="hideNodeIssues"
-						@deselect-all-nodes="deselectAllNodes"
-						@deselect-node="nodeDeselectedByName"
-						@node-selected="nodeSelectedByName"
-						@run-workflow="onRunNode"
-						@moved="onNodeMoved"
-						@run="onNodeRun"
-						@remove-node="(name) => removeNode(name, true)"
-						@toggle-disable-node="(node) => toggleActivationNodes([node])"
-					>
-						<template #custom-tooltip>
-							<span
-								v-text="$locale.baseText('nodeView.canvasAddButton.addATriggerNodeBeforeExecuting')"
-							/>
-						</template>
-					</Node>
-					<Sticky
-						v-for="stickyData in stickiesToRender"
-						:key="`${stickyData.id}_sticky`"
-						:name="stickyData.name"
-						:workflow="currentWorkflowObject"
-						:is-read-only="
-							isReadOnlyRoute ||
-							readOnlyEnv ||
-							!(workflowPermissions.update ?? projectPermissions.workflow.update)
-						"
-						:instance="instance"
-						:is-active="!!activeNode && activeNode.name === stickyData.name"
-						:node-view-scale="nodeViewScale"
-						:grid-size="GRID_SIZE"
-						:hide-actions="pullConnActive"
-						@deselect-all-nodes="deselectAllNodes"
-						@deselect-node="nodeDeselectedByName"
-						@node-selected="nodeSelectedByName"
-						@remove-node="(name) => removeNode(name, true)"
-					/>
-				</div>
-			</div>
-			<NodeDetailsView
-				:workflow-object="currentWorkflowObject"
-				:read-only="
-					isReadOnlyRoute ||
-					readOnlyEnv ||
-					!(workflowPermissions.update ?? projectPermissions.workflow.update)
-				"
-				:renaming="renamingActive"
-				:is-production-execution-preview="isProductionExecutionPreview"
-				@redraw-node="redrawNode"
-				@switch-selected-node="onSwitchSelectedNode"
-				@open-connection-node-creator="onOpenConnectionNodeCreator"
-				@value-changed="valueChanged"
-				@stop-execution="stopExecution"
-				@save-keyboard-shortcut="onSaveKeyboardShortcut"
-			/>
-			<Suspense>
-				<div :class="$style.setupCredentialsButtonWrapper">
-					<LazySetupWorkflowCredentialsButton />
-				</div>
-			</Suspense>
-			<Suspense>
-				<LazyNodeCreation
-					v-if="
-						!isReadOnlyRoute &&
-						!readOnlyEnv &&
-						(workflowPermissions.update ?? projectPermissions.workflow.update)
-					"
-					:create-node-active="createNodeActive"
-					:node-view-scale="nodeViewScale"
-					@toggle-node-creator="onToggleNodeCreator"
-					@add-nodes="onAddNodes"
-				/>
-			</Suspense>
-			<Suspense>
-				<LazyCanvasControls />
-			</Suspense>
-			<Suspense>
-				<ContextMenu @action="onContextMenuAction" />
-			</Suspense>
-			<div
-				v-if="
-					!isReadOnlyRoute &&
-					!readOnlyEnv &&
-					(workflowPermissions.update ?? projectPermissions.workflow.update)
-				"
-				class="workflow-execute-wrapper"
-			>
-				<span
-					v-if="!isManualChatOnly"
-					@mouseenter="showTriggerMissingToltip(true)"
-					@mouseleave="showTriggerMissingToltip(false)"
-					@click="onRunContainerClick"
-				>
-					<KeyboardShortcutTooltip
-						:label="runButtonText"
-						:shortcut="{ metaKey: true, keys: ['↵'] }"
-					>
-						<n8n-button
-							:loading="workflowRunning"
-							:label="runButtonText"
-							size="large"
-							icon="flask"
-							type="primary"
-							:disabled="isExecutionDisabled"
-							data-test-id="execute-workflow-button"
-							@click.stop="onRunWorkflow"
-						/>
-					</KeyboardShortcutTooltip>
-				</span>
-
-				<n8n-button
-					v-if="containsChatNodes"
-					label="Chat"
-					size="large"
-					icon="comment"
-					type="primary"
-					data-test-id="workflow-chat-button"
-					@click.stop="onOpenChat"
-				/>
-
-				<n8n-icon-button
-					v-if="workflowRunning === true && !executionWaitingForWebhook"
-					icon="stop"
-					size="large"
-					class="stop-execution"
-					type="secondary"
-					:title="
-						stopExecutionInProgress
-							? $locale.baseText('nodeView.stoppingCurrentExecution')
-							: $locale.baseText('nodeView.stopCurrentExecution')
-					"
-					:loading="stopExecutionInProgress"
-					data-test-id="stop-execution-button"
-					@click.stop="stopExecution"
-				/>
-
-				<n8n-icon-button
-					v-if="workflowRunning === true && executionWaitingForWebhook === true"
-					class="stop-execution"
-					icon="stop"
-					size="large"
-					:title="$locale.baseText('nodeView.stopWaitingForWebhookCall')"
-					type="secondary"
-					data-test-id="stop-execution-waiting-for-webhook-button"
-					@click.stop="stopWaitingForWebhook"
-				/>
-
-				<n8n-icon-button
-					v-if="workflowExecution && !workflowRunning && !allTriggersDisabled"
-					:title="$locale.baseText('nodeView.deletesTheCurrentExecutionData')"
-					icon="trash"
-					size="large"
-					data-test-id="clear-execution-data-button"
-					@click.stop="clearExecutionData"
-				/>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineAsyncComponent, defineComponent, nextTick, ref } from 'vue';
 import { mapStores, storeToRefs } from 'pinia';
@@ -4685,6 +4466,225 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div ref="nodeViewRootRef" :class="$style['content']">
+		<div
+			id="node-view-root"
+			class="node-view-root do-not-select"
+			data-test-id="node-view-root"
+			@dragover="onDragOver"
+			@drop="onDrop"
+		>
+			<div
+				v-touch:tap="touchTap"
+				class="node-view-wrapper"
+				:class="workflowClasses"
+				data-test-id="node-view-wrapper"
+				@touchstart="mouseDown"
+				@touchend="mouseUp"
+				@touchmove="canvasPanning.onMouseMove"
+				@mousedown="mouseDown"
+				@mouseup="mouseUp"
+				@contextmenu="onContextMenu"
+				@wheel="canvasStore.wheelScroll"
+			>
+				<div
+					id="node-view-background"
+					class="node-view-background"
+					:style="backgroundStyle"
+					data-test-id="node-view-background"
+				/>
+				<div
+					id="node-view"
+					ref="nodeViewRef"
+					class="node-view"
+					:style="workflowStyle"
+					data-test-id="node-view"
+				>
+					<CanvasAddButton
+						v-show="showCanvasAddButton"
+						ref="canvasAddButton"
+						:style="canvasAddButtonStyle"
+						:show-tooltip="!containsTrigger && showTriggerMissingTooltip"
+						:position="canvasStore.canvasAddButtonPosition"
+						data-test-id="canvas-add-button"
+						@click="onCanvasAddButtonCLick"
+						@hook:mounted="canvasStore.setRecenteredCanvasAddButtonPosition"
+					/>
+					<Node
+						v-for="nodeData in nodesToRender"
+						:key="`${nodeData.id}_node`"
+						:name="nodeData.name"
+						:is-read-only="
+							isReadOnlyRoute ||
+							readOnlyEnv ||
+							!(workflowPermissions.update ?? projectPermissions.workflow.update)
+						"
+						:instance="instance"
+						:is-active="!!activeNode && activeNode.name === nodeData.name"
+						:hide-actions="pullConnActive"
+						:is-production-execution-preview="isProductionExecutionPreview"
+						:workflow="currentWorkflowObject"
+						:disable-pointer-events="!canOpenNDV"
+						:hide-node-issues="hideNodeIssues"
+						@deselect-all-nodes="deselectAllNodes"
+						@deselect-node="nodeDeselectedByName"
+						@node-selected="nodeSelectedByName"
+						@run-workflow="onRunNode"
+						@moved="onNodeMoved"
+						@run="onNodeRun"
+						@remove-node="(name) => removeNode(name, true)"
+						@toggle-disable-node="(node) => toggleActivationNodes([node])"
+					>
+						<template #custom-tooltip>
+							<span
+								v-text="$locale.baseText('nodeView.canvasAddButton.addATriggerNodeBeforeExecuting')"
+							/>
+						</template>
+					</Node>
+					<Sticky
+						v-for="stickyData in stickiesToRender"
+						:key="`${stickyData.id}_sticky`"
+						:name="stickyData.name"
+						:workflow="currentWorkflowObject"
+						:is-read-only="
+							isReadOnlyRoute ||
+							readOnlyEnv ||
+							!(workflowPermissions.update ?? projectPermissions.workflow.update)
+						"
+						:instance="instance"
+						:is-active="!!activeNode && activeNode.name === stickyData.name"
+						:node-view-scale="nodeViewScale"
+						:grid-size="GRID_SIZE"
+						:hide-actions="pullConnActive"
+						@deselect-all-nodes="deselectAllNodes"
+						@deselect-node="nodeDeselectedByName"
+						@node-selected="nodeSelectedByName"
+						@remove-node="(name) => removeNode(name, true)"
+					/>
+				</div>
+			</div>
+			<NodeDetailsView
+				:workflow-object="currentWorkflowObject"
+				:read-only="
+					isReadOnlyRoute ||
+					readOnlyEnv ||
+					!(workflowPermissions.update ?? projectPermissions.workflow.update)
+				"
+				:renaming="renamingActive"
+				:is-production-execution-preview="isProductionExecutionPreview"
+				@redraw-node="redrawNode"
+				@switch-selected-node="onSwitchSelectedNode"
+				@open-connection-node-creator="onOpenConnectionNodeCreator"
+				@value-changed="valueChanged"
+				@stop-execution="stopExecution"
+				@save-keyboard-shortcut="onSaveKeyboardShortcut"
+			/>
+			<Suspense>
+				<div :class="$style.setupCredentialsButtonWrapper">
+					<LazySetupWorkflowCredentialsButton />
+				</div>
+			</Suspense>
+			<Suspense>
+				<LazyNodeCreation
+					v-if="
+						!isReadOnlyRoute &&
+						!readOnlyEnv &&
+						(workflowPermissions.update ?? projectPermissions.workflow.update)
+					"
+					:create-node-active="createNodeActive"
+					:node-view-scale="nodeViewScale"
+					@toggle-node-creator="onToggleNodeCreator"
+					@add-nodes="onAddNodes"
+				/>
+			</Suspense>
+			<Suspense>
+				<LazyCanvasControls />
+			</Suspense>
+			<Suspense>
+				<ContextMenu @action="onContextMenuAction" />
+			</Suspense>
+			<div
+				v-if="
+					!isReadOnlyRoute &&
+					!readOnlyEnv &&
+					(workflowPermissions.update ?? projectPermissions.workflow.update)
+				"
+				class="workflow-execute-wrapper"
+			>
+				<span
+					v-if="!isManualChatOnly"
+					@mouseenter="showTriggerMissingToltip(true)"
+					@mouseleave="showTriggerMissingToltip(false)"
+					@click="onRunContainerClick"
+				>
+					<KeyboardShortcutTooltip
+						:label="runButtonText"
+						:shortcut="{ metaKey: true, keys: ['↵'] }"
+					>
+						<n8n-button
+							:loading="workflowRunning"
+							:label="runButtonText"
+							size="large"
+							icon="flask"
+							type="primary"
+							:disabled="isExecutionDisabled"
+							data-test-id="execute-workflow-button"
+							@click.stop="onRunWorkflow"
+						/>
+					</KeyboardShortcutTooltip>
+				</span>
+
+				<n8n-button
+					v-if="containsChatNodes"
+					label="Chat"
+					size="large"
+					icon="comment"
+					type="primary"
+					data-test-id="workflow-chat-button"
+					@click.stop="onOpenChat"
+				/>
+
+				<n8n-icon-button
+					v-if="workflowRunning === true && !executionWaitingForWebhook"
+					icon="stop"
+					size="large"
+					class="stop-execution"
+					type="secondary"
+					:title="
+						stopExecutionInProgress
+							? $locale.baseText('nodeView.stoppingCurrentExecution')
+							: $locale.baseText('nodeView.stopCurrentExecution')
+					"
+					:loading="stopExecutionInProgress"
+					data-test-id="stop-execution-button"
+					@click.stop="stopExecution"
+				/>
+
+				<n8n-icon-button
+					v-if="workflowRunning === true && executionWaitingForWebhook === true"
+					class="stop-execution"
+					icon="stop"
+					size="large"
+					:title="$locale.baseText('nodeView.stopWaitingForWebhookCall')"
+					type="secondary"
+					data-test-id="stop-execution-waiting-for-webhook-button"
+					@click.stop="stopWaitingForWebhook"
+				/>
+
+				<n8n-icon-button
+					v-if="workflowExecution && !workflowRunning && !allTriggersDisabled"
+					:title="$locale.baseText('nodeView.deletesTheCurrentExecutionData')"
+					icon="trash"
+					size="large"
+					data-test-id="clear-execution-data-button"
+					@click.stop="clearExecutionData"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style scoped lang="scss">
 .node-view-root {
 	position: relative;
diff --git a/packages/editor-ui/src/views/NodeViewSwitcher.vue b/packages/editor-ui/src/views/NodeViewSwitcher.vue
index 94bf62eb6d2aa..190b02680af55 100644
--- a/packages/editor-ui/src/views/NodeViewSwitcher.vue
+++ b/packages/editor-ui/src/views/NodeViewSwitcher.vue
@@ -10,9 +10,11 @@ import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
 import { useCanvasOperations } from '@/composables/useCanvasOperations';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
+import { useSettingsStore } from '@/stores/settings.store';
 
 const workflowsStore = useWorkflowsStore();
 const sourceControlStore = useSourceControlStore();
+const settingsStore = useSettingsStore();
 
 const router = useRouter();
 const route = useRoute();
@@ -20,7 +22,10 @@ const workflowHelpers = useWorkflowHelpers({ router });
 
 const { resetWorkspace } = useCanvasOperations({ router });
 
-const nodeViewVersion = useLocalStorage('NodeView.version', '1');
+const nodeViewVersion = useLocalStorage(
+	'NodeView.version',
+	settingsStore.deploymentType === 'n8n-internal' ? '2' : '1',
+);
 
 const workflowId = computed<string>(() => route.params.name as string);
 
diff --git a/packages/editor-ui/src/views/SettingsApiView.vue b/packages/editor-ui/src/views/SettingsApiView.vue
index d5b8bcb5a671c..7ad6781839705 100644
--- a/packages/editor-ui/src/views/SettingsApiView.vue
+++ b/packages/editor-ui/src/views/SettingsApiView.vue
@@ -1,91 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<div :class="$style.header">
-			<n8n-heading size="2xlarge">
-				{{ $locale.baseText('settings.api') }}
-				<span :style="{ fontSize: 'var(--font-size-s)', color: 'var(--color-text-light)' }">
-					({{ $locale.baseText('generic.beta') }})
-				</span>
-			</n8n-heading>
-		</div>
-
-		<div v-if="apiKey">
-			<p class="mb-s">
-				<n8n-info-tip :bold="false">
-					<i18n-t keypath="settings.api.view.info" tag="span">
-						<template #apiAction>
-							<a
-								href="https://docs.n8n.io/api"
-								target="_blank"
-								v-text="$locale.baseText('settings.api.view.info.api')"
-							/>
-						</template>
-						<template #webhookAction>
-							<a
-								href="https://docs.n8n.io/integrations/core-nodes/n8n-nodes-base.webhook/"
-								target="_blank"
-								v-text="$locale.baseText('settings.api.view.info.webhook')"
-							/>
-						</template>
-					</i18n-t>
-				</n8n-info-tip>
-			</p>
-			<n8n-card class="mb-4xs" :class="$style.card">
-				<span :class="$style.delete">
-					<n8n-link :bold="true" @click="showDeleteModal">
-						{{ $locale.baseText('generic.delete') }}
-					</n8n-link>
-				</span>
-				<div>
-					<CopyInput
-						:label="$locale.baseText('settings.api.view.myKey')"
-						:value="apiKey"
-						:copy-button-text="$locale.baseText('generic.clickToCopy')"
-						:toast-title="$locale.baseText('settings.api.view.copy.toast')"
-						:redact-value="true"
-						:disable-copy="isRedactedApiKey"
-						:hint="!isRedactedApiKey ? $locale.baseText('settings.api.view.copy') : ''"
-						@copy="onCopy"
-					/>
-				</div>
-			</n8n-card>
-			<div :class="$style.hint">
-				<n8n-text size="small">
-					{{
-						$locale.baseText(`settings.api.view.${swaggerUIEnabled ? 'tryapi' : 'more-details'}`)
-					}}
-				</n8n-text>
-				{{ ' ' }}
-				<n8n-link :to="apiDocsURL" :new-window="true" size="small">
-					{{
-						$locale.baseText(
-							`settings.api.view.${swaggerUIEnabled ? 'apiPlayground' : 'external-docs'}`,
-						)
-					}}
-				</n8n-link>
-			</div>
-		</div>
-		<n8n-action-box
-			v-else-if="!isPublicApiEnabled && isTrialing"
-			data-test-id="public-api-upgrade-cta"
-			:heading="$locale.baseText('settings.api.trial.upgradePlan.title')"
-			:description="$locale.baseText('settings.api.trial.upgradePlan.description')"
-			:button-text="$locale.baseText('settings.api.trial.upgradePlan.cta')"
-			@click:button="onUpgrade"
-		/>
-		<n8n-action-box
-			v-else-if="mounted && !isLoadingCloudPlans"
-			:button-text="
-				$locale.baseText(
-					loading ? 'settings.api.create.button.loading' : 'settings.api.create.button',
-				)
-			"
-			:description="$locale.baseText('settings.api.create.description')"
-			@click:button="createApiKey"
-		/>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import type { IUser } from '@/Interface';
@@ -211,6 +123,94 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.container">
+		<div :class="$style.header">
+			<n8n-heading size="2xlarge">
+				{{ $locale.baseText('settings.api') }}
+				<span :style="{ fontSize: 'var(--font-size-s)', color: 'var(--color-text-light)' }">
+					({{ $locale.baseText('generic.beta') }})
+				</span>
+			</n8n-heading>
+		</div>
+
+		<div v-if="apiKey">
+			<p class="mb-s">
+				<n8n-info-tip :bold="false">
+					<i18n-t keypath="settings.api.view.info" tag="span">
+						<template #apiAction>
+							<a
+								href="https://docs.n8n.io/api"
+								target="_blank"
+								v-text="$locale.baseText('settings.api.view.info.api')"
+							/>
+						</template>
+						<template #webhookAction>
+							<a
+								href="https://docs.n8n.io/integrations/core-nodes/n8n-nodes-base.webhook/"
+								target="_blank"
+								v-text="$locale.baseText('settings.api.view.info.webhook')"
+							/>
+						</template>
+					</i18n-t>
+				</n8n-info-tip>
+			</p>
+			<n8n-card class="mb-4xs" :class="$style.card">
+				<span :class="$style.delete">
+					<n8n-link :bold="true" @click="showDeleteModal">
+						{{ $locale.baseText('generic.delete') }}
+					</n8n-link>
+				</span>
+				<div>
+					<CopyInput
+						:label="$locale.baseText('settings.api.view.myKey')"
+						:value="apiKey"
+						:copy-button-text="$locale.baseText('generic.clickToCopy')"
+						:toast-title="$locale.baseText('settings.api.view.copy.toast')"
+						:redact-value="true"
+						:disable-copy="isRedactedApiKey"
+						:hint="!isRedactedApiKey ? $locale.baseText('settings.api.view.copy') : ''"
+						@copy="onCopy"
+					/>
+				</div>
+			</n8n-card>
+			<div :class="$style.hint">
+				<n8n-text size="small">
+					{{
+						$locale.baseText(`settings.api.view.${swaggerUIEnabled ? 'tryapi' : 'more-details'}`)
+					}}
+				</n8n-text>
+				{{ ' ' }}
+				<n8n-link :to="apiDocsURL" :new-window="true" size="small">
+					{{
+						$locale.baseText(
+							`settings.api.view.${swaggerUIEnabled ? 'apiPlayground' : 'external-docs'}`,
+						)
+					}}
+				</n8n-link>
+			</div>
+		</div>
+		<n8n-action-box
+			v-else-if="!isPublicApiEnabled && isTrialing"
+			data-test-id="public-api-upgrade-cta"
+			:heading="$locale.baseText('settings.api.trial.upgradePlan.title')"
+			:description="$locale.baseText('settings.api.trial.upgradePlan.description')"
+			:button-text="$locale.baseText('settings.api.trial.upgradePlan.cta')"
+			@click:button="onUpgrade"
+		/>
+		<n8n-action-box
+			v-else-if="mounted && !isLoadingCloudPlans"
+			:button-text="
+				$locale.baseText(
+					loading ? 'settings.api.create.button.loading' : 'settings.api.create.button',
+				)
+			"
+			:description="$locale.baseText('settings.api.create.description')"
+			@click:button="createApiKey"
+		/>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	> * {
diff --git a/packages/editor-ui/src/views/SettingsCommunityNodesView.vue b/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
index 194a289eb1b9b..b720c5478d192 100644
--- a/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
+++ b/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
@@ -1,44 +1,3 @@
-<template>
-	<div :class="$style.container">
-		<div :class="$style.headingContainer">
-			<n8n-heading size="2xlarge">{{ $locale.baseText('settings.communityNodes') }}</n8n-heading>
-			<n8n-button
-				v-if="communityNodesStore.getInstalledPackages.length > 0 && !loading"
-				:label="$locale.baseText('settings.communityNodes.installModal.installButton.label')"
-				size="large"
-				@click="openInstallModal"
-			/>
-		</div>
-		<div v-if="loading" :class="$style.cardsContainer">
-			<CommunityPackageCard
-				v-for="n in 2"
-				:key="'index-' + n"
-				:loading="true"
-			></CommunityPackageCard>
-		</div>
-		<div
-			v-else-if="communityNodesStore.getInstalledPackages.length === 0"
-			:class="$style.actionBoxContainer"
-		>
-			<n8n-action-box
-				:heading="$locale.baseText('settings.communityNodes.empty.title')"
-				:description="getEmptyStateDescription"
-				:button-text="getEmptyStateButtonText"
-				:callout-text="actionBoxConfig.calloutText"
-				:callout-theme="actionBoxConfig.calloutTheme"
-				@click:button="onClickEmptyStateButton"
-			/>
-		</div>
-		<div v-else :class="$style.cardsContainer">
-			<CommunityPackageCard
-				v-for="communityPackage in communityNodesStore.getInstalledPackages"
-				:key="communityPackage.packageName"
-				:community-package="communityPackage"
-			></CommunityPackageCard>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import {
 	COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
@@ -215,6 +174,47 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.container">
+		<div :class="$style.headingContainer">
+			<n8n-heading size="2xlarge">{{ $locale.baseText('settings.communityNodes') }}</n8n-heading>
+			<n8n-button
+				v-if="communityNodesStore.getInstalledPackages.length > 0 && !loading"
+				:label="$locale.baseText('settings.communityNodes.installModal.installButton.label')"
+				size="large"
+				@click="openInstallModal"
+			/>
+		</div>
+		<div v-if="loading" :class="$style.cardsContainer">
+			<CommunityPackageCard
+				v-for="n in 2"
+				:key="'index-' + n"
+				:loading="true"
+			></CommunityPackageCard>
+		</div>
+		<div
+			v-else-if="communityNodesStore.getInstalledPackages.length === 0"
+			:class="$style.actionBoxContainer"
+		>
+			<n8n-action-box
+				:heading="$locale.baseText('settings.communityNodes.empty.title')"
+				:description="getEmptyStateDescription"
+				:button-text="getEmptyStateButtonText"
+				:callout-text="actionBoxConfig.calloutText"
+				:callout-theme="actionBoxConfig.calloutTheme"
+				@click:button="onClickEmptyStateButton"
+			/>
+		</div>
+		<div v-else :class="$style.cardsContainer">
+			<CommunityPackageCard
+				v-for="communityPackage in communityNodesStore.getInstalledPackages"
+				:key="communityPackage.packageName"
+				:community-package="communityPackage"
+			></CommunityPackageCard>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	height: 100%;
diff --git a/packages/editor-ui/src/views/SettingsFakeDoorView.vue b/packages/editor-ui/src/views/SettingsFakeDoorView.vue
index 4398c117fcce2..403bd696b9667 100644
--- a/packages/editor-ui/src/views/SettingsFakeDoorView.vue
+++ b/packages/editor-ui/src/views/SettingsFakeDoorView.vue
@@ -1,7 +1,3 @@
-<template>
-	<FeatureComingSoon :feature-id="featureId" show-title />
-</template>
-
 <script lang="ts">
 import type { IFakeDoor } from '@/Interface';
 import { defineComponent } from 'vue';
@@ -36,6 +32,10 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<FeatureComingSoon :feature-id="featureId" show-title />
+</template>
+
 <style lang="scss" module>
 .header {
 	display: flex;
diff --git a/packages/editor-ui/src/views/SettingsLdapView.vue b/packages/editor-ui/src/views/SettingsLdapView.vue
index bdfd8247696b9..8feca49da78c4 100644
--- a/packages/editor-ui/src/views/SettingsLdapView.vue
+++ b/packages/editor-ui/src/views/SettingsLdapView.vue
@@ -1,137 +1,3 @@
-<template>
-	<div v-if="!isLDAPFeatureEnabled">
-		<div :class="[$style.header, 'mb-2xl']">
-			<n8n-heading size="2xlarge">
-				{{ $locale.baseText('settings.ldap') }}
-			</n8n-heading>
-		</div>
-
-		<n8n-info-tip type="note" theme="info" tooltip-placement="right" class="mb-l">
-			{{ $locale.baseText('settings.ldap.note') }}
-		</n8n-info-tip>
-		<n8n-action-box
-			:description="$locale.baseText('settings.ldap.disabled.description')"
-			:button-text="$locale.baseText('settings.ldap.disabled.buttonText')"
-			@click:button="goToUpgrade"
-		>
-			<template #heading>
-				<span>{{ $locale.baseText('settings.ldap.disabled.title') }}</span>
-			</template>
-		</n8n-action-box>
-	</div>
-	<div v-else>
-		<div :class="$style.container">
-			<div :class="$style.header">
-				<n8n-heading size="2xlarge">
-					{{ $locale.baseText('settings.ldap') }}
-				</n8n-heading>
-			</div>
-			<div :class="$style.docsInfoTip">
-				<n8n-info-tip theme="info" type="note">
-					<span v-html="$locale.baseText('settings.ldap.infoTip')"></span>
-				</n8n-info-tip>
-			</div>
-			<div :class="$style.settingsForm">
-				<n8n-form-inputs
-					v-if="formInputs"
-					ref="ldapConfigForm"
-					:inputs="formInputs"
-					:event-bus="formBus"
-					:column-view="true"
-					vertical-spacing="l"
-					@update="onInput"
-					@ready="onReadyToSubmit"
-					@submit="onSubmit"
-				/>
-			</div>
-			<div>
-				<n8n-button
-					v-if="loginEnabled"
-					:label="
-						loadingTestConnection
-							? $locale.baseText('settings.ldap.testingConnection')
-							: $locale.baseText('settings.ldap.testConnection')
-					"
-					size="large"
-					class="mr-s"
-					:disabled="hasAnyChanges || !readyToSubmit"
-					:loading="loadingTestConnection"
-					@click="onTestConnectionClick"
-				/>
-				<n8n-button
-					:label="$locale.baseText('settings.ldap.save')"
-					size="large"
-					:disabled="!hasAnyChanges || !readyToSubmit"
-					@click="onSaveClick"
-				/>
-			</div>
-		</div>
-		<div v-if="loginEnabled">
-			<n8n-heading tag="h1" class="mb-xl mt-3xl" size="medium">{{
-				$locale.baseText('settings.ldap.section.synchronization.title')
-			}}</n8n-heading>
-			<div :class="$style.syncTable">
-				<ElTable
-					:key="tableKey"
-					v-loading="loadingTable"
-					:border="true"
-					:stripe="true"
-					:data="dataTable"
-					:cell-style="cellClassStyle"
-					style="width: 100%"
-					max-height="250"
-				>
-					<ElTableColumn
-						prop="status"
-						:label="$locale.baseText('settings.ldap.synchronizationTable.column.status')"
-					/>
-					<ElTableColumn
-						prop="endedAt"
-						:label="$locale.baseText('settings.ldap.synchronizationTable.column.endedAt')"
-					/>
-					<ElTableColumn
-						prop="runMode"
-						:label="$locale.baseText('settings.ldap.synchronizationTable.column.runMode')"
-					/>
-					<ElTableColumn
-						prop="runTime"
-						:label="$locale.baseText('settings.ldap.synchronizationTable.column.runTime')"
-					/>
-					<ElTableColumn
-						prop="details"
-						:label="$locale.baseText('settings.ldap.synchronizationTable.column.details')"
-					/>
-					<template #empty>{{
-						$locale.baseText('settings.ldap.synchronizationTable.empty.message')
-					}}</template>
-					<template #append>
-						<InfiniteLoading target=".el-table__body-wrapper" @infinite="getLdapSynchronizations">
-						</InfiniteLoading>
-					</template>
-				</ElTable>
-			</div>
-			<div class="pb-3xl">
-				<n8n-button
-					:label="$locale.baseText('settings.ldap.dryRun')"
-					type="secondary"
-					size="large"
-					class="mr-s"
-					:disabled="hasAnyChanges || !readyToSubmit"
-					:loading="loadingDryRun"
-					@click="onDryRunClick"
-				/>
-				<n8n-button
-					:label="$locale.baseText('settings.ldap.synchronizeNow')"
-					size="large"
-					:disabled="hasAnyChanges || !readyToSubmit"
-					:loading="loadingLiveRun"
-					@click="onLiveRunClick"
-				/>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import type { CSSProperties } from 'vue';
 import { defineComponent } from 'vue';
@@ -737,6 +603,140 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div v-if="!isLDAPFeatureEnabled">
+		<div :class="[$style.header, 'mb-2xl']">
+			<n8n-heading size="2xlarge">
+				{{ $locale.baseText('settings.ldap') }}
+			</n8n-heading>
+		</div>
+
+		<n8n-info-tip type="note" theme="info" tooltip-placement="right" class="mb-l">
+			{{ $locale.baseText('settings.ldap.note') }}
+		</n8n-info-tip>
+		<n8n-action-box
+			:description="$locale.baseText('settings.ldap.disabled.description')"
+			:button-text="$locale.baseText('settings.ldap.disabled.buttonText')"
+			@click:button="goToUpgrade"
+		>
+			<template #heading>
+				<span>{{ $locale.baseText('settings.ldap.disabled.title') }}</span>
+			</template>
+		</n8n-action-box>
+	</div>
+	<div v-else>
+		<div :class="$style.container">
+			<div :class="$style.header">
+				<n8n-heading size="2xlarge">
+					{{ $locale.baseText('settings.ldap') }}
+				</n8n-heading>
+			</div>
+			<div :class="$style.docsInfoTip">
+				<n8n-info-tip theme="info" type="note">
+					<span v-html="$locale.baseText('settings.ldap.infoTip')"></span>
+				</n8n-info-tip>
+			</div>
+			<div :class="$style.settingsForm">
+				<n8n-form-inputs
+					v-if="formInputs"
+					ref="ldapConfigForm"
+					:inputs="formInputs"
+					:event-bus="formBus"
+					:column-view="true"
+					vertical-spacing="l"
+					@update="onInput"
+					@ready="onReadyToSubmit"
+					@submit="onSubmit"
+				/>
+			</div>
+			<div>
+				<n8n-button
+					v-if="loginEnabled"
+					:label="
+						loadingTestConnection
+							? $locale.baseText('settings.ldap.testingConnection')
+							: $locale.baseText('settings.ldap.testConnection')
+					"
+					size="large"
+					class="mr-s"
+					:disabled="hasAnyChanges || !readyToSubmit"
+					:loading="loadingTestConnection"
+					@click="onTestConnectionClick"
+				/>
+				<n8n-button
+					:label="$locale.baseText('settings.ldap.save')"
+					size="large"
+					:disabled="!hasAnyChanges || !readyToSubmit"
+					@click="onSaveClick"
+				/>
+			</div>
+		</div>
+		<div v-if="loginEnabled">
+			<n8n-heading tag="h1" class="mb-xl mt-3xl" size="medium">{{
+				$locale.baseText('settings.ldap.section.synchronization.title')
+			}}</n8n-heading>
+			<div :class="$style.syncTable">
+				<ElTable
+					:key="tableKey"
+					v-loading="loadingTable"
+					:border="true"
+					:stripe="true"
+					:data="dataTable"
+					:cell-style="cellClassStyle"
+					style="width: 100%"
+					max-height="250"
+				>
+					<ElTableColumn
+						prop="status"
+						:label="$locale.baseText('settings.ldap.synchronizationTable.column.status')"
+					/>
+					<ElTableColumn
+						prop="endedAt"
+						:label="$locale.baseText('settings.ldap.synchronizationTable.column.endedAt')"
+					/>
+					<ElTableColumn
+						prop="runMode"
+						:label="$locale.baseText('settings.ldap.synchronizationTable.column.runMode')"
+					/>
+					<ElTableColumn
+						prop="runTime"
+						:label="$locale.baseText('settings.ldap.synchronizationTable.column.runTime')"
+					/>
+					<ElTableColumn
+						prop="details"
+						:label="$locale.baseText('settings.ldap.synchronizationTable.column.details')"
+					/>
+					<template #empty>{{
+						$locale.baseText('settings.ldap.synchronizationTable.empty.message')
+					}}</template>
+					<template #append>
+						<InfiniteLoading target=".el-table__body-wrapper" @infinite="getLdapSynchronizations">
+						</InfiniteLoading>
+					</template>
+				</ElTable>
+			</div>
+			<div class="pb-3xl">
+				<n8n-button
+					:label="$locale.baseText('settings.ldap.dryRun')"
+					type="secondary"
+					size="large"
+					class="mr-s"
+					:disabled="hasAnyChanges || !readyToSubmit"
+					:loading="loadingDryRun"
+					@click="onDryRunClick"
+				/>
+				<n8n-button
+					:label="$locale.baseText('settings.ldap.synchronizeNow')"
+					size="large"
+					:disabled="hasAnyChanges || !readyToSubmit"
+					:loading="loadingLiveRun"
+					@click="onLiveRunClick"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .container {
 	> * {
diff --git a/packages/editor-ui/src/views/SettingsLogStreamingView.vue b/packages/editor-ui/src/views/SettingsLogStreamingView.vue
index 29fb285e4e590..e8abb67e64d2a 100644
--- a/packages/editor-ui/src/views/SettingsLogStreamingView.vue
+++ b/packages/editor-ui/src/views/SettingsLogStreamingView.vue
@@ -1,77 +1,3 @@
-<template>
-	<div>
-		<div :class="$style.header">
-			<div class="mb-2xl">
-				<n8n-heading size="2xlarge">
-					{{ $locale.baseText(`settings.log-streaming.heading`) }}
-				</n8n-heading>
-				<template v-if="environment !== 'production'">
-					<strong class="ml-m">Disable License ({{ environment }})&nbsp;</strong>
-					<el-switch v-model="disableLicense" size="large" data-test-id="disable-license-toggle" />
-				</template>
-			</div>
-		</div>
-		<template v-if="isLicensed">
-			<div class="mb-l">
-				<n8n-info-tip theme="info" type="note">
-					<span v-html="$locale.baseText('settings.log-streaming.infoText')"></span>
-				</n8n-info-tip>
-			</div>
-			<template v-if="storeHasItems()">
-				<el-row
-					v-for="item in sortedItemKeysByLabel"
-					:key="item.key"
-					:gutter="10"
-					:class="$style.destinationItem"
-				>
-					<el-col v-if="logStreamingStore.items[item.key]?.destination">
-						<EventDestinationCard
-							:destination="logStreamingStore.items[item.key]?.destination"
-							:event-bus="eventBus"
-							:readonly="!canManageLogStreaming"
-							@remove="onRemove(logStreamingStore.items[item.key]?.destination?.id)"
-							@edit="onEdit(logStreamingStore.items[item.key]?.destination?.id)"
-						/>
-					</el-col>
-				</el-row>
-				<div class="mt-m text-right">
-					<n8n-button v-if="canManageLogStreaming" size="large" @click="addDestination">
-						{{ $locale.baseText(`settings.log-streaming.add`) }}
-					</n8n-button>
-				</div>
-			</template>
-			<div v-else data-test-id="action-box-licensed">
-				<n8n-action-box
-					:button-text="$locale.baseText(`settings.log-streaming.add`)"
-					@click:button="addDestination"
-				>
-					<template #heading>
-						<span v-html="$locale.baseText(`settings.log-streaming.addFirstTitle`)" />
-					</template>
-				</n8n-action-box>
-			</div>
-		</template>
-		<template v-else>
-			<div v-if="$locale.baseText('settings.log-streaming.infoText')" class="mb-l">
-				<n8n-info-tip theme="info" type="note">
-					<span v-html="$locale.baseText('settings.log-streaming.infoText')"></span>
-				</n8n-info-tip>
-			</div>
-			<div data-test-id="action-box-unlicensed">
-				<n8n-action-box
-					:description="$locale.baseText('settings.log-streaming.actionBox.description')"
-					:button-text="$locale.baseText('settings.log-streaming.actionBox.button')"
-					@click:button="goToUpgrade"
-				>
-					<template #heading>
-						<span v-html="$locale.baseText('settings.log-streaming.actionBox.title')" />
-					</template>
-				</n8n-action-box>
-			</div>
-		</template>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent, nextTick } from 'vue';
 import { mapStores } from 'pinia';
@@ -233,6 +159,80 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div>
+		<div :class="$style.header">
+			<div class="mb-2xl">
+				<n8n-heading size="2xlarge">
+					{{ $locale.baseText(`settings.log-streaming.heading`) }}
+				</n8n-heading>
+				<template v-if="environment !== 'production'">
+					<strong class="ml-m">Disable License ({{ environment }})&nbsp;</strong>
+					<el-switch v-model="disableLicense" size="large" data-test-id="disable-license-toggle" />
+				</template>
+			</div>
+		</div>
+		<template v-if="isLicensed">
+			<div class="mb-l">
+				<n8n-info-tip theme="info" type="note">
+					<span v-html="$locale.baseText('settings.log-streaming.infoText')"></span>
+				</n8n-info-tip>
+			</div>
+			<template v-if="storeHasItems()">
+				<el-row
+					v-for="item in sortedItemKeysByLabel"
+					:key="item.key"
+					:gutter="10"
+					:class="$style.destinationItem"
+				>
+					<el-col v-if="logStreamingStore.items[item.key]?.destination">
+						<EventDestinationCard
+							:destination="logStreamingStore.items[item.key]?.destination"
+							:event-bus="eventBus"
+							:readonly="!canManageLogStreaming"
+							@remove="onRemove(logStreamingStore.items[item.key]?.destination?.id)"
+							@edit="onEdit(logStreamingStore.items[item.key]?.destination?.id)"
+						/>
+					</el-col>
+				</el-row>
+				<div class="mt-m text-right">
+					<n8n-button v-if="canManageLogStreaming" size="large" @click="addDestination">
+						{{ $locale.baseText(`settings.log-streaming.add`) }}
+					</n8n-button>
+				</div>
+			</template>
+			<div v-else data-test-id="action-box-licensed">
+				<n8n-action-box
+					:button-text="$locale.baseText(`settings.log-streaming.add`)"
+					@click:button="addDestination"
+				>
+					<template #heading>
+						<span v-html="$locale.baseText(`settings.log-streaming.addFirstTitle`)" />
+					</template>
+				</n8n-action-box>
+			</div>
+		</template>
+		<template v-else>
+			<div v-if="$locale.baseText('settings.log-streaming.infoText')" class="mb-l">
+				<n8n-info-tip theme="info" type="note">
+					<span v-html="$locale.baseText('settings.log-streaming.infoText')"></span>
+				</n8n-info-tip>
+			</div>
+			<div data-test-id="action-box-unlicensed">
+				<n8n-action-box
+					:description="$locale.baseText('settings.log-streaming.actionBox.description')"
+					:button-text="$locale.baseText('settings.log-streaming.actionBox.button')"
+					@click:button="goToUpgrade"
+				>
+					<template #heading>
+						<span v-html="$locale.baseText('settings.log-streaming.actionBox.title')" />
+					</template>
+				</n8n-action-box>
+			</div>
+		</template>
+	</div>
+</template>
+
 <style lang="scss" module>
 .header {
 	display: flex;
diff --git a/packages/editor-ui/src/views/SetupView.vue b/packages/editor-ui/src/views/SetupView.vue
index c85735374cf5d..53dc8267fe14b 100644
--- a/packages/editor-ui/src/views/SetupView.vue
+++ b/packages/editor-ui/src/views/SetupView.vue
@@ -1,12 +1,3 @@
-<template>
-	<AuthView
-		:form="FORM_CONFIG"
-		:form-loading="loading"
-		data-test-id="setup-form"
-		@submit="onSubmit"
-	/>
-</template>
-
 <script lang="ts">
 import AuthView from './AuthView.vue';
 import { defineComponent } from 'vue';
@@ -129,3 +120,12 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<AuthView
+		:form="FORM_CONFIG"
+		:form-loading="loading"
+		data-test-id="setup-form"
+		@submit="onSubmit"
+	/>
+</template>
diff --git a/packages/editor-ui/src/views/SigninView.vue b/packages/editor-ui/src/views/SigninView.vue
index c5af41e29c2a1..e4a62a883d32b 100644
--- a/packages/editor-ui/src/views/SigninView.vue
+++ b/packages/editor-ui/src/views/SigninView.vue
@@ -1,23 +1,3 @@
-<template>
-	<div>
-		<AuthView
-			v-if="!showMfaView"
-			:form="FORM_CONFIG"
-			:form-loading="loading"
-			:with-sso="true"
-			data-test-id="signin-form"
-			@submit="onEmailPasswordSubmitted"
-		/>
-		<MfaView
-			v-if="showMfaView"
-			:report-error="reportError"
-			@submit="onMFASubmitted"
-			@on-back-click="onBackClick"
-			@on-form-changed="onFormChanged"
-		/>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import AuthView from './AuthView.vue';
@@ -200,3 +180,23 @@ export default defineComponent({
 	},
 });
 </script>
+
+<template>
+	<div>
+		<AuthView
+			v-if="!showMfaView"
+			:form="FORM_CONFIG"
+			:form-loading="loading"
+			:with-sso="true"
+			data-test-id="signin-form"
+			@submit="onEmailPasswordSubmitted"
+		/>
+		<MfaView
+			v-if="showMfaView"
+			:report-error="reportError"
+			@submit="onMFASubmitted"
+			@on-back-click="onBackClick"
+			@on-form-changed="onFormChanged"
+		/>
+	</div>
+</template>
diff --git a/packages/editor-ui/src/views/TemplatesCollectionView.vue b/packages/editor-ui/src/views/TemplatesCollectionView.vue
index 0ddf6ec5952c2..626b7d26f5d38 100644
--- a/packages/editor-ui/src/views/TemplatesCollectionView.vue
+++ b/packages/editor-ui/src/views/TemplatesCollectionView.vue
@@ -1,54 +1,3 @@
-<template>
-	<TemplatesView :go-back-enabled="true">
-		<template #header>
-			<div v-if="!notFoundError" :class="$style.wrapper">
-				<div :class="$style.title">
-					<n8n-heading v-if="collection && collection.name" tag="h1" size="2xlarge">
-						{{ collection.name }}
-					</n8n-heading>
-					<n8n-text v-if="collection && collection.name" color="text-base" size="small">
-						{{ $locale.baseText('templates.collection') }}
-					</n8n-text>
-					<n8n-loading :loading="!collection || !collection.name" :rows="2" variant="h1" />
-				</div>
-			</div>
-			<div v-else :class="$style.notFound">
-				<n8n-text color="text-base">{{
-					$locale.baseText('templates.collectionsNotFound')
-				}}</n8n-text>
-			</div>
-		</template>
-		<template v-if="!notFoundError" #content>
-			<div :class="$style.wrapper">
-				<div :class="$style.mainContent">
-					<div v-if="loading || isFullTemplatesCollection(collection)" :class="$style.markdown">
-						<n8n-markdown
-							:content="isFullTemplatesCollection(collection) && collection.description"
-							:images="isFullTemplatesCollection(collection) && collection.image"
-							:loading="loading"
-						/>
-					</div>
-					<TemplateList
-						:infinite-scroll-enabled="false"
-						:loading="loading"
-						:use-workflow-button="true"
-						:workflows="collectionWorkflows"
-						@use-workflow="onUseWorkflow"
-						@open-template="onOpenTemplate"
-					/>
-				</div>
-				<div :class="$style.details">
-					<TemplateDetails
-						:block-title="$locale.baseText('template.details.appsInTheCollection')"
-						:loading="loading"
-						:template="collection"
-					/>
-				</div>
-			</div>
-		</template>
-	</TemplatesView>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -177,6 +126,57 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<TemplatesView :go-back-enabled="true">
+		<template #header>
+			<div v-if="!notFoundError" :class="$style.wrapper">
+				<div :class="$style.title">
+					<n8n-heading v-if="collection && collection.name" tag="h1" size="2xlarge">
+						{{ collection.name }}
+					</n8n-heading>
+					<n8n-text v-if="collection && collection.name" color="text-base" size="small">
+						{{ $locale.baseText('templates.collection') }}
+					</n8n-text>
+					<n8n-loading :loading="!collection || !collection.name" :rows="2" variant="h1" />
+				</div>
+			</div>
+			<div v-else :class="$style.notFound">
+				<n8n-text color="text-base">{{
+					$locale.baseText('templates.collectionsNotFound')
+				}}</n8n-text>
+			</div>
+		</template>
+		<template v-if="!notFoundError" #content>
+			<div :class="$style.wrapper">
+				<div :class="$style.mainContent">
+					<div v-if="loading || isFullTemplatesCollection(collection)" :class="$style.markdown">
+						<n8n-markdown
+							:content="isFullTemplatesCollection(collection) && collection.description"
+							:images="isFullTemplatesCollection(collection) && collection.image"
+							:loading="loading"
+						/>
+					</div>
+					<TemplateList
+						:infinite-scroll-enabled="false"
+						:loading="loading"
+						:use-workflow-button="true"
+						:workflows="collectionWorkflows"
+						@use-workflow="onUseWorkflow"
+						@open-template="onOpenTemplate"
+					/>
+				</div>
+				<div :class="$style.details">
+					<TemplateDetails
+						:block-title="$locale.baseText('template.details.appsInTheCollection')"
+						:loading="loading"
+						:template="collection"
+					/>
+				</div>
+			</div>
+		</template>
+	</TemplatesView>
+</template>
+
 <style lang="scss" module>
 .wrapper {
 	display: flex;
diff --git a/packages/editor-ui/src/views/TemplatesSearchView.vue b/packages/editor-ui/src/views/TemplatesSearchView.vue
index 05a2359ea5fe9..61ce8b42e0fe0 100644
--- a/packages/editor-ui/src/views/TemplatesSearchView.vue
+++ b/packages/editor-ui/src/views/TemplatesSearchView.vue
@@ -1,86 +1,3 @@
-<template>
-	<TemplatesView>
-		<template #header>
-			<div :class="$style.wrapper">
-				<div :class="$style.title">
-					<n8n-heading tag="h1" size="2xlarge">
-						{{ $locale.baseText('templates.heading') }}
-					</n8n-heading>
-				</div>
-				<div :class="$style.button">
-					<n8n-button
-						size="large"
-						type="secondary"
-						element="a"
-						:href="creatorHubUrl"
-						:label="$locale.baseText('templates.shareWorkflow')"
-						target="_blank"
-					/>
-				</div>
-			</div>
-		</template>
-		<template #content>
-			<div :class="$style.contentWrapper">
-				<div :class="$style.filters">
-					<TemplateFilters
-						:categories="templatesStore.allCategories"
-						:sort-on-populate="areCategoriesPrepopulated"
-						:selected="categories"
-						:loading="loadingCategories"
-						@clear="onCategoryUnselected"
-						@clear-all="onCategoriesCleared"
-						@select="onCategorySelected"
-					/>
-				</div>
-				<div :class="$style.search">
-					<n8n-input
-						:model-value="search"
-						:placeholder="$locale.baseText('templates.searchPlaceholder')"
-						clearable
-						data-test-id="template-search-input"
-						@update:model-value="onSearchInput"
-						@blur="trackSearch"
-					>
-						<template #prefix>
-							<font-awesome-icon icon="search" />
-						</template>
-					</n8n-input>
-					<div v-show="collections.length || loadingCollections" :class="$style.carouselContainer">
-						<div :class="$style.header">
-							<n8n-heading :bold="true" size="medium" color="text-light">
-								{{ $locale.baseText('templates.collections') }}
-								<span
-									v-if="!loadingCollections"
-									data-test-id="collection-count-label"
-									v-text="`(${collections.length})`"
-								/>
-							</n8n-heading>
-						</div>
-						<TemplatesInfoCarousel
-							:collections="collections"
-							:loading="loadingCollections"
-							@open-collection="onOpenCollection"
-						/>
-					</div>
-					<TemplateList
-						:infinite-scroll-enabled="true"
-						:loading="loadingWorkflows"
-						:workflows="workflows"
-						:total-count="totalWorkflows"
-						@load-more="onLoadMore"
-						@open-template="onOpenTemplate"
-					/>
-					<div v-if="endOfSearchMessage" :class="$style.endText">
-						<n8n-text size="medium" color="text-base">
-							<span v-html="endOfSearchMessage" />
-						</n8n-text>
-					</div>
-				</div>
-			</div>
-		</template>
-	</TemplatesView>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -419,6 +336,89 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<TemplatesView>
+		<template #header>
+			<div :class="$style.wrapper">
+				<div :class="$style.title">
+					<n8n-heading tag="h1" size="2xlarge">
+						{{ $locale.baseText('templates.heading') }}
+					</n8n-heading>
+				</div>
+				<div :class="$style.button">
+					<n8n-button
+						size="large"
+						type="secondary"
+						element="a"
+						:href="creatorHubUrl"
+						:label="$locale.baseText('templates.shareWorkflow')"
+						target="_blank"
+					/>
+				</div>
+			</div>
+		</template>
+		<template #content>
+			<div :class="$style.contentWrapper">
+				<div :class="$style.filters">
+					<TemplateFilters
+						:categories="templatesStore.allCategories"
+						:sort-on-populate="areCategoriesPrepopulated"
+						:selected="categories"
+						:loading="loadingCategories"
+						@clear="onCategoryUnselected"
+						@clear-all="onCategoriesCleared"
+						@select="onCategorySelected"
+					/>
+				</div>
+				<div :class="$style.search">
+					<n8n-input
+						:model-value="search"
+						:placeholder="$locale.baseText('templates.searchPlaceholder')"
+						clearable
+						data-test-id="template-search-input"
+						@update:model-value="onSearchInput"
+						@blur="trackSearch"
+					>
+						<template #prefix>
+							<font-awesome-icon icon="search" />
+						</template>
+					</n8n-input>
+					<div v-show="collections.length || loadingCollections" :class="$style.carouselContainer">
+						<div :class="$style.header">
+							<n8n-heading :bold="true" size="medium" color="text-light">
+								{{ $locale.baseText('templates.collections') }}
+								<span
+									v-if="!loadingCollections"
+									data-test-id="collection-count-label"
+									v-text="`(${collections.length})`"
+								/>
+							</n8n-heading>
+						</div>
+						<TemplatesInfoCarousel
+							:collections="collections"
+							:loading="loadingCollections"
+							@open-collection="onOpenCollection"
+						/>
+					</div>
+					<TemplateList
+						:infinite-scroll-enabled="true"
+						:loading="loadingWorkflows"
+						:workflows="workflows"
+						:total-count="totalWorkflows"
+						@load-more="onLoadMore"
+						@open-template="onOpenTemplate"
+					/>
+					<div v-if="endOfSearchMessage" :class="$style.endText">
+						<n8n-text size="medium" color="text-base">
+							<span v-html="endOfSearchMessage" />
+						</n8n-text>
+					</div>
+				</div>
+			</div>
+		</template>
+	</TemplatesView>
+</template>
+
 <style lang="scss" module>
 .wrapper {
 	display: flex;
diff --git a/packages/editor-ui/src/views/TemplatesView.vue b/packages/editor-ui/src/views/TemplatesView.vue
index d1efe2c900ac7..6ace29391164c 100644
--- a/packages/editor-ui/src/views/TemplatesView.vue
+++ b/packages/editor-ui/src/views/TemplatesView.vue
@@ -1,19 +1,3 @@
-<template>
-	<div :class="$style.template">
-		<div :class="$style.container">
-			<div :class="$style.header">
-				<div v-if="goBackEnabled" :class="$style.goBack">
-					<GoBackButton />
-				</div>
-				<slot name="header"></slot>
-			</div>
-			<div>
-				<slot name="content"></slot>
-			</div>
-		</div>
-	</div>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import GoBackButton from '@/components/GoBackButton.vue';
@@ -32,6 +16,22 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<div :class="$style.template">
+		<div :class="$style.container">
+			<div :class="$style.header">
+				<div v-if="goBackEnabled" :class="$style.goBack">
+					<GoBackButton />
+				</div>
+				<slot name="header"></slot>
+			</div>
+			<div>
+				<slot name="content"></slot>
+			</div>
+		</div>
+	</div>
+</template>
+
 <style lang="scss" module>
 .template {
 	display: flex;
diff --git a/packages/editor-ui/src/views/TemplatesWorkflowView.vue b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
index fa582f3b9550d..527a253e9b8f0 100644
--- a/packages/editor-ui/src/views/TemplatesWorkflowView.vue
+++ b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
@@ -1,60 +1,3 @@
-<template>
-	<TemplatesView :go-back-enabled="true">
-		<template #header>
-			<div v-if="!notFoundError" :class="$style.wrapper">
-				<div :class="$style.title">
-					<n8n-heading v-if="template && template.name" tag="h1" size="2xlarge">{{
-						template.name
-					}}</n8n-heading>
-					<n8n-text v-if="template && template.name" color="text-base" size="small">
-						{{ $locale.baseText('generic.workflow') }}
-					</n8n-text>
-					<n8n-loading :loading="!template || !template.name" :rows="2" variant="h1" />
-				</div>
-				<div :class="$style.button">
-					<n8n-button
-						v-if="template"
-						data-test-id="use-template-button"
-						:label="$locale.baseText('template.buttons.useThisWorkflowButton')"
-						size="large"
-						@click="openTemplateSetup(templateId, $event)"
-					/>
-					<n8n-loading :loading="!template" :rows="1" variant="button" />
-				</div>
-			</div>
-			<div v-else :class="$style.notFound">
-				<n8n-text color="text-base">{{ $locale.baseText('templates.workflowsNotFound') }}</n8n-text>
-			</div>
-		</template>
-		<template v-if="!notFoundError" #content>
-			<div :class="$style.image">
-				<WorkflowPreview
-					v-if="showPreview"
-					:loading="loading"
-					:workflow="template?.workflow"
-					@close="onHidePreview"
-				/>
-			</div>
-			<div :class="$style.content">
-				<div :class="$style.markdown" data-test-id="template-description">
-					<n8n-markdown
-						:content="template?.description"
-						:images="template?.image"
-						:loading="loading"
-					/>
-				</div>
-				<div :class="$style.details">
-					<TemplateDetails
-						:block-title="$locale.baseText('template.details.appsInTheWorkflow')"
-						:loading="loading"
-						:template="template"
-					/>
-				</div>
-			</div>
-		</template>
-	</TemplatesView>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { mapStores } from 'pinia';
@@ -158,6 +101,63 @@ export default defineComponent({
 });
 </script>
 
+<template>
+	<TemplatesView :go-back-enabled="true">
+		<template #header>
+			<div v-if="!notFoundError" :class="$style.wrapper">
+				<div :class="$style.title">
+					<n8n-heading v-if="template && template.name" tag="h1" size="2xlarge">{{
+						template.name
+					}}</n8n-heading>
+					<n8n-text v-if="template && template.name" color="text-base" size="small">
+						{{ $locale.baseText('generic.workflow') }}
+					</n8n-text>
+					<n8n-loading :loading="!template || !template.name" :rows="2" variant="h1" />
+				</div>
+				<div :class="$style.button">
+					<n8n-button
+						v-if="template"
+						data-test-id="use-template-button"
+						:label="$locale.baseText('template.buttons.useThisWorkflowButton')"
+						size="large"
+						@click="openTemplateSetup(templateId, $event)"
+					/>
+					<n8n-loading :loading="!template" :rows="1" variant="button" />
+				</div>
+			</div>
+			<div v-else :class="$style.notFound">
+				<n8n-text color="text-base">{{ $locale.baseText('templates.workflowsNotFound') }}</n8n-text>
+			</div>
+		</template>
+		<template v-if="!notFoundError" #content>
+			<div :class="$style.image">
+				<WorkflowPreview
+					v-if="showPreview"
+					:loading="loading"
+					:workflow="template?.workflow"
+					@close="onHidePreview"
+				/>
+			</div>
+			<div :class="$style.content">
+				<div :class="$style.markdown" data-test-id="template-description">
+					<n8n-markdown
+						:content="template?.description"
+						:images="template?.image"
+						:loading="loading"
+					/>
+				</div>
+				<div :class="$style.details">
+					<TemplateDetails
+						:block-title="$locale.baseText('template.details.appsInTheWorkflow')"
+						:loading="loading"
+						:template="template"
+					/>
+				</div>
+			</div>
+		</template>
+	</TemplatesView>
+</template>
+
 <style lang="scss" module>
 .wrapper {
 	display: flex;
diff --git a/packages/editor-ui/src/views/WorkerView.vue b/packages/editor-ui/src/views/WorkerView.vue
index 966f1e50a85b0..8da48f85ce82a 100644
--- a/packages/editor-ui/src/views/WorkerView.vue
+++ b/packages/editor-ui/src/views/WorkerView.vue
@@ -1,3 +1,16 @@
+<script setup lang="ts">
+import WorkerList from '@/components/WorkerList.ee.vue';
+import { useUIStore } from '@/stores/ui.store';
+import { useSettingsStore } from '@/stores/settings.store';
+
+const settingsStore = useSettingsStore();
+const uiStore = useUIStore();
+
+const goToUpgrade = () => {
+	void uiStore.goToUpgrade('worker-view', 'upgrade-worker-view');
+};
+</script>
+
 <template>
 	<WorkerList
 		v-if="settingsStore.isQueueModeEnabled && settingsStore.isWorkerViewAvailable"
@@ -23,19 +36,6 @@
 	</n8n-action-box>
 </template>
 
-<script setup lang="ts">
-import WorkerList from '@/components/WorkerList.ee.vue';
-import { useUIStore } from '@/stores/ui.store';
-import { useSettingsStore } from '@/stores/settings.store';
-
-const settingsStore = useSettingsStore();
-const uiStore = useUIStore();
-
-const goToUpgrade = () => {
-	void uiStore.goToUpgrade('worker-view', 'upgrade-worker-view');
-};
-</script>
-
 <style module lang="scss">
 .actionBox {
 	margin: var(--spacing-2xl) 0 0;
diff --git a/packages/editor-ui/src/views/WorkflowsView.vue b/packages/editor-ui/src/views/WorkflowsView.vue
index 564ff672a2e7a..86df4f4408a32 100644
--- a/packages/editor-ui/src/views/WorkflowsView.vue
+++ b/packages/editor-ui/src/views/WorkflowsView.vue
@@ -1,164 +1,3 @@
-<template>
-	<ResourcesListLayout
-		ref="layout"
-		resource-key="workflows"
-		:resources="allWorkflows"
-		:filters="filters"
-		:additional-filters-handler="onFilter"
-		:type-props="{ itemSize: 80 }"
-		:shareable="isShareable"
-		:initialize="initialize"
-		:disabled="readOnlyEnv || !projectPermissions.workflow.create"
-		:loading="loading"
-		@click:add="addWorkflow"
-		@update:filters="onFiltersUpdated"
-	>
-		<template #header>
-			<ProjectTabs />
-		</template>
-		<template #add-button="{ disabled }">
-			<n8n-tooltip :disabled="!readOnlyEnv">
-				<div>
-					<n8n-button
-						size="large"
-						block
-						:disabled="disabled"
-						data-test-id="resources-list-add"
-						@click="addWorkflow"
-					>
-						{{ addWorkflowButtonText }}
-					</n8n-button>
-				</div>
-				<template #content>
-					<i18n-t tag="span" keypath="mainSidebar.workflows.readOnlyEnv.tooltip">
-						<template #link>
-							<a target="_blank" href="https://docs.n8n.io/source-control-environments/">
-								{{ $locale.baseText('mainSidebar.workflows.readOnlyEnv.tooltip.link') }}
-							</a>
-						</template>
-					</i18n-t>
-				</template>
-			</n8n-tooltip>
-		</template>
-		<template #default="{ data, updateItemSize }">
-			<WorkflowCard
-				data-test-id="resources-list-item"
-				class="mb-2xs"
-				:data="data"
-				:read-only="readOnlyEnv"
-				@expand:tags="updateItemSize(data)"
-				@click:tag="onClickTag"
-			/>
-		</template>
-		<template #empty>
-			<div class="text-center mt-s">
-				<n8n-heading tag="h2" size="xlarge" class="mb-2xs">
-					{{
-						currentUser.firstName
-							? $locale.baseText('workflows.empty.heading', {
-									interpolate: { name: currentUser.firstName },
-								})
-							: $locale.baseText('workflows.empty.heading.userNotSetup')
-					}}
-				</n8n-heading>
-				<n8n-text v-if="!isOnboardingExperimentEnabled" size="large" color="text-base">
-					{{ emptyListDescription }}
-				</n8n-text>
-			</div>
-			<div
-				v-if="!readOnlyEnv && projectPermissions.workflow.create"
-				:class="['text-center', 'mt-2xl', $style.actionsContainer]"
-			>
-				<n8n-card
-					:class="$style.emptyStateCard"
-					hoverable
-					data-test-id="new-workflow-card"
-					@click="addWorkflow"
-				>
-					<n8n-icon :class="$style.emptyStateCardIcon" icon="file" />
-					<n8n-text size="large" class="mt-xs" color="text-dark">
-						{{ $locale.baseText('workflows.empty.startFromScratch') }}
-					</n8n-text>
-				</n8n-card>
-				<a
-					v-if="isSalesUser || isOnboardingExperimentEnabled"
-					href="https://docs.n8n.io/courses/#available-courses"
-					:class="$style.emptyStateCard"
-					target="_blank"
-				>
-					<n8n-card
-						hoverable
-						data-test-id="browse-sales-templates-card"
-						@click="trackEmptyCardClick('courses')"
-					>
-						<n8n-icon :class="$style.emptyStateCardIcon" icon="graduation-cap" />
-						<n8n-text size="large" class="mt-xs" color="text-dark">
-							{{ $locale.baseText('workflows.empty.learnN8n') }}
-						</n8n-text>
-					</n8n-card>
-				</a>
-				<a
-					v-if="isSalesUser || isOnboardingExperimentEnabled"
-					:href="getTemplateRepositoryURL()"
-					:class="$style.emptyStateCard"
-					target="_blank"
-				>
-					<n8n-card
-						hoverable
-						data-test-id="browse-sales-templates-card"
-						@click="trackEmptyCardClick('templates')"
-					>
-						<n8n-icon :class="$style.emptyStateCardIcon" icon="box-open" />
-						<n8n-text size="large" class="mt-xs" color="text-dark">
-							{{ $locale.baseText('workflows.empty.browseTemplates') }}
-						</n8n-text>
-					</n8n-card>
-				</a>
-			</div>
-		</template>
-		<template #filters="{ setKeyValue }">
-			<div v-if="settingsStore.areTagsEnabled" class="mb-s">
-				<n8n-input-label
-					:label="$locale.baseText('workflows.filters.tags')"
-					:bold="false"
-					size="small"
-					color="text-base"
-					class="mb-3xs"
-				/>
-				<TagsDropdown
-					:placeholder="$locale.baseText('workflowOpen.filterWorkflows')"
-					:model-value="filters.tags"
-					:create-enabled="false"
-					@update:model-value="setKeyValue('tags', $event)"
-				/>
-			</div>
-			<div class="mb-s">
-				<n8n-input-label
-					:label="$locale.baseText('workflows.filters.status')"
-					:bold="false"
-					size="small"
-					color="text-base"
-					class="mb-3xs"
-				/>
-				<n8n-select
-					data-test-id="status-dropdown"
-					:model-value="filters.status"
-					@update:model-value="setKeyValue('status', $event)"
-				>
-					<n8n-option
-						v-for="option in statusFilterOptions"
-						:key="option.label"
-						:label="option.label"
-						:value="option.value"
-						data-test-id="status"
-					>
-					</n8n-option>
-				</n8n-select>
-			</div>
-		</template>
-	</ResourcesListLayout>
-</template>
-
 <script lang="ts">
 import { defineComponent } from 'vue';
 import ResourcesListLayout, { type IResource } from '@/components/layouts/ResourcesListLayout.vue';
@@ -466,6 +305,167 @@ const WorkflowsView = defineComponent({
 export default WorkflowsView;
 </script>
 
+<template>
+	<ResourcesListLayout
+		ref="layout"
+		resource-key="workflows"
+		:resources="allWorkflows"
+		:filters="filters"
+		:additional-filters-handler="onFilter"
+		:type-props="{ itemSize: 80 }"
+		:shareable="isShareable"
+		:initialize="initialize"
+		:disabled="readOnlyEnv || !projectPermissions.workflow.create"
+		:loading="loading"
+		@click:add="addWorkflow"
+		@update:filters="onFiltersUpdated"
+	>
+		<template #header>
+			<ProjectTabs />
+		</template>
+		<template #add-button="{ disabled }">
+			<n8n-tooltip :disabled="!readOnlyEnv">
+				<div>
+					<n8n-button
+						size="large"
+						block
+						:disabled="disabled"
+						data-test-id="resources-list-add"
+						@click="addWorkflow"
+					>
+						{{ addWorkflowButtonText }}
+					</n8n-button>
+				</div>
+				<template #content>
+					<i18n-t tag="span" keypath="mainSidebar.workflows.readOnlyEnv.tooltip">
+						<template #link>
+							<a target="_blank" href="https://docs.n8n.io/source-control-environments/">
+								{{ $locale.baseText('mainSidebar.workflows.readOnlyEnv.tooltip.link') }}
+							</a>
+						</template>
+					</i18n-t>
+				</template>
+			</n8n-tooltip>
+		</template>
+		<template #default="{ data, updateItemSize }">
+			<WorkflowCard
+				data-test-id="resources-list-item"
+				class="mb-2xs"
+				:data="data"
+				:read-only="readOnlyEnv"
+				@expand:tags="updateItemSize(data)"
+				@click:tag="onClickTag"
+			/>
+		</template>
+		<template #empty>
+			<div class="text-center mt-s">
+				<n8n-heading tag="h2" size="xlarge" class="mb-2xs">
+					{{
+						currentUser.firstName
+							? $locale.baseText('workflows.empty.heading', {
+									interpolate: { name: currentUser.firstName },
+								})
+							: $locale.baseText('workflows.empty.heading.userNotSetup')
+					}}
+				</n8n-heading>
+				<n8n-text v-if="!isOnboardingExperimentEnabled" size="large" color="text-base">
+					{{ emptyListDescription }}
+				</n8n-text>
+			</div>
+			<div
+				v-if="!readOnlyEnv && projectPermissions.workflow.create"
+				:class="['text-center', 'mt-2xl', $style.actionsContainer]"
+			>
+				<n8n-card
+					:class="$style.emptyStateCard"
+					hoverable
+					data-test-id="new-workflow-card"
+					@click="addWorkflow"
+				>
+					<n8n-icon :class="$style.emptyStateCardIcon" icon="file" />
+					<n8n-text size="large" class="mt-xs" color="text-dark">
+						{{ $locale.baseText('workflows.empty.startFromScratch') }}
+					</n8n-text>
+				</n8n-card>
+				<a
+					v-if="isSalesUser || isOnboardingExperimentEnabled"
+					href="https://docs.n8n.io/courses/#available-courses"
+					:class="$style.emptyStateCard"
+					target="_blank"
+				>
+					<n8n-card
+						hoverable
+						data-test-id="browse-sales-templates-card"
+						@click="trackEmptyCardClick('courses')"
+					>
+						<n8n-icon :class="$style.emptyStateCardIcon" icon="graduation-cap" />
+						<n8n-text size="large" class="mt-xs" color="text-dark">
+							{{ $locale.baseText('workflows.empty.learnN8n') }}
+						</n8n-text>
+					</n8n-card>
+				</a>
+				<a
+					v-if="isSalesUser || isOnboardingExperimentEnabled"
+					:href="getTemplateRepositoryURL()"
+					:class="$style.emptyStateCard"
+					target="_blank"
+				>
+					<n8n-card
+						hoverable
+						data-test-id="browse-sales-templates-card"
+						@click="trackEmptyCardClick('templates')"
+					>
+						<n8n-icon :class="$style.emptyStateCardIcon" icon="box-open" />
+						<n8n-text size="large" class="mt-xs" color="text-dark">
+							{{ $locale.baseText('workflows.empty.browseTemplates') }}
+						</n8n-text>
+					</n8n-card>
+				</a>
+			</div>
+		</template>
+		<template #filters="{ setKeyValue }">
+			<div v-if="settingsStore.areTagsEnabled" class="mb-s">
+				<n8n-input-label
+					:label="$locale.baseText('workflows.filters.tags')"
+					:bold="false"
+					size="small"
+					color="text-base"
+					class="mb-3xs"
+				/>
+				<TagsDropdown
+					:placeholder="$locale.baseText('workflowOpen.filterWorkflows')"
+					:model-value="filters.tags"
+					:create-enabled="false"
+					@update:model-value="setKeyValue('tags', $event)"
+				/>
+			</div>
+			<div class="mb-s">
+				<n8n-input-label
+					:label="$locale.baseText('workflows.filters.status')"
+					:bold="false"
+					size="small"
+					color="text-base"
+					class="mb-3xs"
+				/>
+				<n8n-select
+					data-test-id="status-dropdown"
+					:model-value="filters.status"
+					@update:model-value="setKeyValue('status', $event)"
+				>
+					<n8n-option
+						v-for="option in statusFilterOptions"
+						:key="option.label"
+						:label="option.label"
+						:value="option.value"
+						data-test-id="status"
+					>
+					</n8n-option>
+				</n8n-select>
+			</div>
+		</template>
+	</ResourcesListLayout>
+</template>
+
 <style lang="scss" module>
 .actionsContainer {
 	display: flex;
diff --git a/packages/nodes-base/credentials/DatadogApi.credentials.ts b/packages/nodes-base/credentials/DatadogApi.credentials.ts
new file mode 100644
index 0000000000000..2c962a92a00a2
--- /dev/null
+++ b/packages/nodes-base/credentials/DatadogApi.credentials.ts
@@ -0,0 +1,73 @@
+import type {
+	ICredentialDataDecryptedObject,
+	ICredentialTestRequest,
+	ICredentialType,
+	IHttpRequestOptions,
+	INodeProperties,
+} from 'n8n-workflow';
+
+export class DatadogApi implements ICredentialType {
+	name = 'datadogApi';
+
+	displayName = 'Datadog API';
+
+	documentationUrl = 'datadog';
+
+	icon = { light: 'file:icons/Datadog.svg', dark: 'file:icons/Datadog.svg' } as const;
+
+	httpRequestNode = {
+		name: 'Datadog',
+		docsUrl: 'https://docs.datadoghq.com/api/latest/',
+		apiBaseUrlPlaceholder: 'https://api.datadoghq.com/api/v1/metrics',
+	};
+
+	properties: INodeProperties[] = [
+		{
+			displayName: 'URL',
+			name: 'url',
+			required: true,
+			type: 'string',
+			default: 'https://api.datadoghq.com',
+		},
+		{
+			displayName: 'API Key',
+			name: 'apiKey',
+			required: true,
+			type: 'string',
+			typeOptions: { password: true },
+			default: '',
+		},
+		{
+			displayName: 'APP Key',
+			name: 'appKey',
+			required: false,
+			type: 'string',
+			default: '',
+			typeOptions: { password: true },
+			description: 'For some endpoints, you also need an Application key.',
+		},
+	];
+
+	async authenticate(
+		credentials: ICredentialDataDecryptedObject,
+		requestOptions: IHttpRequestOptions,
+	): Promise<IHttpRequestOptions> {
+		requestOptions.headers = {
+			'DD-API-KEY': credentials.apiKey,
+			'DD-APPLICATION-KEY': credentials.appKey,
+		};
+		if (!requestOptions.headers['DD-APPLICATION-KEY']) {
+			delete requestOptions.headers['DD-APPLICATION-KEY'];
+		}
+
+		return requestOptions;
+	}
+
+	test: ICredentialTestRequest = {
+		request: {
+			baseURL: '={{$credentials.url}}',
+			url: '/api/v1/validate',
+			method: 'GET',
+		},
+	};
+}
diff --git a/packages/nodes-base/credentials/DfirIrisApi.credentials.ts b/packages/nodes-base/credentials/DfirIrisApi.credentials.ts
new file mode 100644
index 0000000000000..cf631fba06e37
--- /dev/null
+++ b/packages/nodes-base/credentials/DfirIrisApi.credentials.ts
@@ -0,0 +1,67 @@
+import type {
+	IAuthenticateGeneric,
+	ICredentialTestRequest,
+	ICredentialType,
+	INodeProperties,
+} from 'n8n-workflow';
+
+export class DfirIrisApi implements ICredentialType {
+	name = 'dfirIrisApi';
+
+	displayName = 'DFIR-IRIS API';
+
+	documentationUrl = 'dfiriris';
+
+	icon = { light: 'file:icons/DfirIris.svg', dark: 'file:icons/DfirIris.svg' } as const;
+
+	httpRequestNode = {
+		name: 'DFIR-IRIS',
+		docsUrl: 'https://docs.dfir-iris.org/operations/api/',
+		apiBaseUrlPlaceholder: 'http://<yourserver_ip>/manage/cases/list',
+	};
+
+	properties: INodeProperties[] = [
+		{
+			displayName: 'Base URL',
+			name: 'baseUrl',
+			type: 'string',
+			default: '',
+			placeholder: 'e.g. https://localhost',
+			description:
+				'The API endpoints are reachable on the same Address and port as the web interface.',
+			required: true,
+		},
+		{
+			displayName: 'API Key',
+			name: 'apiKey',
+			required: true,
+			type: 'string',
+			typeOptions: { password: true },
+			default: '',
+		},
+		{
+			displayName: 'Ignore SSL Issues',
+			name: 'skipSslCertificateValidation',
+			type: 'boolean',
+			default: false,
+		},
+	];
+
+	authenticate: IAuthenticateGeneric = {
+		type: 'generic',
+		properties: {
+			headers: {
+				Authorization: '=Bearer {{$credentials.apiKey}}',
+			},
+		},
+	};
+
+	test: ICredentialTestRequest = {
+		request: {
+			baseURL: '={{$credentials.baseUrl}}',
+			url: '/api/ping',
+			method: 'GET',
+			skipSslCertificateValidation: '={{$credentials.skipSslCertificateValidation}}',
+		},
+	};
+}
diff --git a/packages/nodes-base/credentials/DynatraceApi.credentials.ts b/packages/nodes-base/credentials/DynatraceApi.credentials.ts
new file mode 100644
index 0000000000000..9934bd1b9614f
--- /dev/null
+++ b/packages/nodes-base/credentials/DynatraceApi.credentials.ts
@@ -0,0 +1,37 @@
+import type { IAuthenticateGeneric, ICredentialType, INodeProperties } from 'n8n-workflow';
+
+export class DynatraceApi implements ICredentialType {
+	name = 'dynatraceApi';
+
+	displayName = 'DynatraceAPI';
+
+	documentationUrl = 'dynatrace';
+
+	icon = { light: 'file:icons/Dynatrace.svg', dark: 'file:icons/Dynatrace.svg' } as const;
+
+	httpRequestNode = {
+		name: 'Dynatrace',
+		docsUrl: 'https://docs.dynatrace.com/docs/dynatrace-api',
+		apiBaseUrlPlaceholder: 'https://{your-environment-id}.live.dynatrace.com/api/v2/events',
+	};
+
+	properties: INodeProperties[] = [
+		{
+			displayName: 'API Key',
+			name: 'apiKey',
+			required: true,
+			type: 'string',
+			typeOptions: { password: true },
+			default: '',
+		},
+	];
+
+	authenticate: IAuthenticateGeneric = {
+		type: 'generic',
+		properties: {
+			headers: {
+				Authorization: '=Api-Token {{$credentials.apiKey}}',
+			},
+		},
+	};
+}
diff --git a/packages/nodes-base/credentials/ElasticSecurityApi.credentials.ts b/packages/nodes-base/credentials/ElasticSecurityApi.credentials.ts
index 11759991fe321..6571428f97c20 100644
--- a/packages/nodes-base/credentials/ElasticSecurityApi.credentials.ts
+++ b/packages/nodes-base/credentials/ElasticSecurityApi.credentials.ts
@@ -1,4 +1,10 @@
-import type { ICredentialType, INodeProperties } from 'n8n-workflow';
+import type {
+	ICredentialDataDecryptedObject,
+	ICredentialTestRequest,
+	ICredentialType,
+	IHttpRequestOptions,
+	INodeProperties,
+} from 'n8n-workflow';
 
 export class ElasticSecurityApi implements ICredentialType {
 	name = 'elasticSecurityApi';
@@ -8,12 +14,42 @@ export class ElasticSecurityApi implements ICredentialType {
 	documentationUrl = 'elasticSecurity';
 
 	properties: INodeProperties[] = [
+		{
+			displayName: 'Base URL',
+			name: 'baseUrl',
+			type: 'string',
+			default: '',
+			placeholder: 'e.g. https://mydeployment.kb.us-central1.gcp.cloud.es.io:9243',
+			description: "Referred to as Kibana 'endpoint' in the Elastic deployment dashboard",
+			required: true,
+		},
+		{
+			displayName: 'Type',
+			name: 'type',
+			type: 'options',
+			options: [
+				{
+					name: 'API Key',
+					value: 'apiKey',
+				},
+				{
+					name: 'Basic Auth',
+					value: 'basicAuth',
+				},
+			],
+			default: 'basicAuth',
+		},
 		{
 			displayName: 'Username',
 			name: 'username',
 			type: 'string',
 			default: '',
 			required: true,
+			displayOptions: {
+				show: {
+					type: ['basicAuth'],
+				},
+			},
 		},
 		{
 			displayName: 'Password',
@@ -24,15 +60,52 @@ export class ElasticSecurityApi implements ICredentialType {
 			},
 			default: '',
 			required: true,
+			displayOptions: {
+				show: {
+					type: ['basicAuth'],
+				},
+			},
 		},
 		{
-			displayName: 'Base URL',
-			name: 'baseUrl',
+			displayName: 'API Key',
+			name: 'apiKey',
+			required: true,
 			type: 'string',
+			typeOptions: { password: true },
 			default: '',
-			placeholder: 'e.g. https://mydeployment.kb.us-central1.gcp.cloud.es.io:9243',
-			description: "Referred to as Kibana 'endpoint' in the Elastic deployment dashboard",
-			required: true,
+			displayOptions: {
+				show: {
+					type: ['apiKey'],
+				},
+			},
 		},
 	];
+
+	async authenticate(
+		credentials: ICredentialDataDecryptedObject,
+		requestOptions: IHttpRequestOptions,
+	): Promise<IHttpRequestOptions> {
+		if (credentials.type === 'apiKey') {
+			requestOptions.headers = {
+				Authorization: `ApiKey ${credentials.apiKey}`,
+			};
+		} else {
+			requestOptions.auth = {
+				username: credentials.username as string,
+				password: credentials.password as string,
+			};
+			requestOptions.headers = {
+				'kbn-xsrf': true,
+			};
+		}
+		return requestOptions;
+	}
+
+	test: ICredentialTestRequest = {
+		request: {
+			baseURL: '={{$credentials.baseUrl}}',
+			url: '/api/endpoint/metadata',
+			method: 'GET',
+		},
+	};
 }
diff --git a/packages/nodes-base/credentials/FilescanApi.credentials.ts b/packages/nodes-base/credentials/FilescanApi.credentials.ts
new file mode 100644
index 0000000000000..ebc4562b0f5bd
--- /dev/null
+++ b/packages/nodes-base/credentials/FilescanApi.credentials.ts
@@ -0,0 +1,50 @@
+import type {
+	IAuthenticateGeneric,
+	ICredentialTestRequest,
+	ICredentialType,
+	INodeProperties,
+} from 'n8n-workflow';
+
+export class FilescanApi implements ICredentialType {
+	name = 'filescanApi';
+
+	displayName = 'Filescan API';
+
+	documentationUrl = 'filescan';
+
+	icon = { light: 'file:icons/Filescan.svg', dark: 'file:icons/Filescan.svg' } as const;
+
+	httpRequestNode = {
+		name: 'Filescan',
+		docsUrl: 'https://www.filescan.io/api/docs',
+		apiBaseUrlPlaceholder: 'https://www.filescan.io/api/system/do-healthcheck',
+	};
+
+	properties: INodeProperties[] = [
+		{
+			displayName: 'API Key',
+			name: 'apiKey',
+			required: true,
+			type: 'string',
+			typeOptions: { password: true },
+			default: '',
+		},
+	];
+
+	authenticate: IAuthenticateGeneric = {
+		type: 'generic',
+		properties: {
+			headers: {
+				'X-Api-Key': '={{$credentials.apiKey}}',
+			},
+		},
+	};
+
+	test: ICredentialTestRequest = {
+		request: {
+			baseURL: 'https://www.filescan.io/api',
+			url: '/system/do-healthcheck',
+			method: 'GET',
+		},
+	};
+}
diff --git a/packages/nodes-base/credentials/MalcoreApi.credentials.ts b/packages/nodes-base/credentials/MalcoreApi.credentials.ts
new file mode 100644
index 0000000000000..fc299f35ea49a
--- /dev/null
+++ b/packages/nodes-base/credentials/MalcoreApi.credentials.ts
@@ -0,0 +1,51 @@
+import type {
+	IAuthenticateGeneric,
+	ICredentialTestRequest,
+	ICredentialType,
+	INodeProperties,
+} from 'n8n-workflow';
+
+export class MalcoreApi implements ICredentialType {
+	name = 'malcoreApi';
+
+	displayName = 'MalcoreAPI';
+
+	documentationUrl = 'malcore';
+
+	icon = { light: 'file:icons/Malcore.png', dark: 'file:icons/Malcore.png' } as const;
+
+	httpRequestNode = {
+		name: 'Malcore',
+		docsUrl: 'https://malcore.readme.io/reference/upload',
+		apiBaseUrlPlaceholder: 'https://api.malcore.io/api/urlcheck',
+	};
+
+	properties: INodeProperties[] = [
+		{
+			displayName: 'API Key',
+			name: 'apiKey',
+			required: true,
+			type: 'string',
+			typeOptions: { password: true },
+			default: '',
+		},
+	];
+
+	authenticate: IAuthenticateGeneric = {
+		type: 'generic',
+		properties: {
+			headers: {
+				apiKey: '={{$credentials.apiKey}}',
+			},
+		},
+	};
+
+	test: ICredentialTestRequest = {
+		request: {
+			baseURL: 'https://api.malcore.io/api',
+			url: '/urlcheck',
+			method: 'POST',
+			body: { url: 'google.com' },
+		},
+	};
+}
diff --git a/packages/nodes-base/credentials/icons/Datadog.svg b/packages/nodes-base/credentials/icons/Datadog.svg
new file mode 100644
index 0000000000000..49e6f8473f8b9
--- /dev/null
+++ b/packages/nodes-base/credentials/icons/Datadog.svg
@@ -0,0 +1 @@
+<svg height="2500" viewBox=".27 .27 800.01 858.98" width="2328" xmlns="http://www.w3.org/2000/svg"><path d="m670.38 608.27-71.24-46.99-59.43 99.27-69.12-20.21-60.86 92.89 3.12 29.24 330.9-60.97-19.22-206.75zm-308.59-89.14 53.09-7.3c8.59 3.86 14.57 5.33 24.87 7.95 16.04 4.18 34.61 8.19 62.11-5.67 6.4-3.17 19.73-15.36 25.12-22.31l217.52-39.46 22.19 268.56-372.65 67.16zm404.06-96.77-21.47 4.09-41.25-426.18-702.86 81.5 86.59 702.68 82.27-11.94c-6.57-9.38-16.8-20.73-34.27-35.26-24.23-20.13-15.66-54.32-1.37-75.91 18.91-36.48 116.34-82.84 110.82-141.15-1.98-21.2-5.35-48.8-25.03-67.71-.74 7.85.59 15.41.59 15.41s-8.08-10.31-12.11-24.37c-4-5.39-7.14-7.11-11.39-14.31-3.03 8.33-2.63 17.99-2.63 17.99s-6.61-15.62-7.68-28.8c-3.92 5.9-4.91 17.11-4.91 17.11s-8.59-24.62-6.63-37.88c-3.92-11.54-15.54-34.44-12.25-86.49 21.45 15.03 68.67 11.46 87.07-15.66 6.11-8.98 10.29-33.5-3.05-81.81-8.57-30.98-29.79-77.11-38.06-94.61l-.99.71c4.36 14.1 13.35 43.66 16.8 57.99 10.44 43.47 13.24 58.6 8.34 78.64-4.17 17.42-14.17 28.82-39.52 41.56-25.35 12.78-58.99-18.32-61.12-20.04-24.63-19.62-43.68-51.63-45.81-67.18-2.21-17.02 9.81-27.24 15.87-41.16-8.67 2.48-18.34 6.88-18.34 6.88s11.54-11.94 25.77-22.27c5.89-3.9 9.35-6.38 15.56-11.54-8.99-.15-16.29.11-16.29.11s14.99-8.1 30.53-14c-11.37-.5-22.25-.08-22.25-.08s33.45-14.96 59.87-25.94c18.17-7.45 35.92-5.25 45.89 9.17 13.09 18.89 26.84 29.15 55.98 35.51 17.89-7.93 23.33-12.01 45.81-18.13 19.79-21.76 35.33-24.58 35.33-24.58s-7.71 7.07-9.77 18.18c11.22-8.84 23.52-16.22 23.52-16.22s-4.76 5.88-9.2 15.22l1.03 1.53c13.09-7.85 28.48-14.04 28.48-14.04s-4.4 5.56-9.56 12.76c9.87-.08 29.89.42 37.66 1.3 45.87 1.01 55.39-48.99 72.99-55.26 22.04-7.87 31.89-12.63 69.45 24.26 32.23 31.67 57.41 88.36 44.91 101.06-10.48 10.54-31.16-4.11-54.08-32.68-12.11-15.13-21.27-33.01-25.56-55.74-3.62-19.18-17.71-30.31-17.71-30.31s8.18 18.18 8.18 34.24c0 8.77 1.1 41.56 15.16 59.96-1.39 2.69-2.04 13.31-3.58 15.34-16.36-19.77-51.49-33.92-57.22-38.09 19.39 15.89 63.96 52.39 81.08 87.37 16.19 33.08 6.65 63.4 14.84 71.25 2.33 2.25 34.82 42.73 41.07 63.07 10.9 35.45.65 72.7-13.62 95.81l-39.85 6.21c-5.83-1.62-9.76-2.43-14.99-5.46 2.88-5.1 8.61-17.82 8.67-20.44l-2.25-3.95c-12.4 17.57-33.18 34.63-50.44 44.43-22.59 12.8-48.63 10.83-65.58 5.58-48.11-14.84-93.6-47.35-104.57-55.89 0 0-.34 6.82 1.73 8.35 12.13 13.68 39.92 38.43 66.78 55.68l-57.26 6.3 27.07 210.78c-12 1.72-13.87 2.56-27.01 4.43-11.58-40.91-33.73-67.62-57.94-83.18-21.35-13.72-50.8-16.81-78.99-11.23l-1.81 2.1c19.6-2.04 42.74.8 66.51 15.85 23.33 14.75 42.13 52.85 49.05 75.79 8.86 29.32 14.99 60.68-8.86 93.92-16.97 23.63-66.51 36.69-106.53 8.44 10.69 17.19 25.14 31.25 44.59 33.9 28.88 3.92 56.29-1.09 75.16-20.46 16.11-16.56 24.65-51.19 22.4-87.66l25.49-3.7 9.2 65.46 421.98-50.81zm-256.73-177.77c-1.18 2.69-3.03 4.45-.25 13.2l.17.5.44 1.13 1.16 2.62c5.01 10.24 10.51 19.9 19.7 24.83 2.38-.4 4.84-.67 7.39-.8 8.63-.38 14.08.99 17.54 2.85.31-1.72.38-4.24.19-7.95-.67-12.97 2.57-35.03-22.36-46.64-9.41-4.37-22.61-3.02-27.01 2.43.8.1 1.52.27 2.08.46 6.65 2.33 2.14 4.62.95 7.37m69.87 121.02c-3.27-1.8-18.55-1.09-29.29.19-20.46 2.41-42.55 9.51-47.39 13.29-8.8 6.8-4.8 18.66 1.7 23.53 18.23 13.62 34.21 22.75 51.08 20.53 10.36-1.36 19.49-17.76 25.96-32.64 4.43-10.25 4.43-21.31-2.06-24.9m-181.14-104.96c5.77-5.48-28.74-12.68-55.52 5.58-19.75 13.47-20.38 42.35-1.47 58.72 1.89 1.62 3.45 2.77 4.91 3.71 5.52-2.6 11.81-5.23 19.05-7.58 12.23-3.97 22.4-6.02 30.76-7.11 4-4.47 8.65-12.34 7.49-26.59-1.58-19.33-16.23-16.26-5.22-26.73" fill="#632ca6"/></svg>
\ No newline at end of file
diff --git a/packages/nodes-base/credentials/icons/DfirIris.svg b/packages/nodes-base/credentials/icons/DfirIris.svg
new file mode 100644
index 0000000000000..83c41d6544a13
--- /dev/null
+++ b/packages/nodes-base/credentials/icons/DfirIris.svg
@@ -0,0 +1,403 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="256" height="256">
+<path d="M0 0 C1.80868813 0.00333092 1.80868813 0.00333092 3.65391541 0.00672913 C4.31730423 0.0065831 4.98069305 0.00643707 5.66418457 0.00628662 C7.86644207 0.00698571 10.06861596 0.01477787 12.27085876 0.02259827 C13.79400588 0.02446246 15.31715359 0.02588636 16.84030151 0.02688599 C20.85657903 0.03071105 24.87282059 0.04054124 28.88908386 0.05158997 C32.98443617 0.06180433 37.07979427 0.06638366 41.17515564 0.07142639 C49.21618779 0.08216352 57.25719069 0.0992398 65.29820251 0.12025452 C65.68492126 0.9284967 66.07164001 1.73673889 66.47007751 2.56947327 C67.25124939 4.17242249 67.25124939 4.17242249 68.04820251 5.80775452 C68.55867126 6.8634967 69.06914001 7.91923889 69.59507751 9.00697327 C71.24489624 12.02281163 73.14012651 14.45892969 75.29820251 17.12025452 C75.79320251 18.60525452 75.79320251 18.60525452 76.29820251 20.12025452 C76.9618074 21.3979827 77.65351696 22.66130107 78.36460876 23.91322327 C78.7674408 24.6254303 79.17027283 25.33763733 79.58531189 26.07142639 C80.0061908 26.80941467 80.4270697 27.54740295 80.86070251 28.30775452 C81.49782166 29.43213928 81.49782166 29.43213928 82.14781189 30.57923889 C83.19559552 32.4275763 84.2465911 34.27409225 85.29820251 36.12025452 C85.95820251 36.12025452 86.61820251 36.12025452 87.29820251 36.12025452 C87.46606262 37.21950256 87.46606262 37.21950256 87.63731384 38.34095764 C88.32490991 41.23256961 89.28739447 43.09135349 90.87242126 45.58900452 C91.37451111 46.4075592 91.87660095 47.22611389 92.39390564 48.06947327 C93.4584011 49.77527826 94.53139597 51.47580752 95.61265564 53.17103577 C96.35998962 54.3988678 96.35998962 54.3988678 97.12242126 55.65150452 C97.58737 56.3894928 98.05231873 57.12748108 98.53135681 57.88783264 C99.29820251 60.12025452 99.29820251 60.12025452 98.61582947 62.56459045 C97.24326312 65.22681475 95.85803938 67.8674131 94.39195251 70.47962952 C93.5302948 72.01792419 93.5302948 72.01792419 92.65122986 73.58729553 C91.73398132 75.21236023 91.73398132 75.21236023 90.79820251 76.87025452 C90.1725238 77.98392395 89.54684509 79.09759338 88.90220642 80.24501038 C84.85375771 87.42896139 80.7459526 94.57424381 76.49546814 101.64076233 C73.86974644 106.03157814 71.53524751 110.52010563 69.29820251 115.12025452 C68.96820251 115.78025452 68.63820251 116.44025452 68.29820251 117.12025452 C67.96820251 117.80087952 67.63820251 118.48150452 67.29820251 119.18275452 C66.29820251 121.12025452 66.29820251 121.12025452 65.29820251 122.12025452 C63.18138934 122.21447192 61.06139493 122.23768213 58.94248962 122.23377991 C58.2791008 122.23392593 57.61571198 122.23407196 56.93222046 122.23422241 C54.72996296 122.23352332 52.52778907 122.22573116 50.32554626 122.21791077 C48.80239915 122.21604657 47.27925144 122.21462268 45.75610352 122.21362305 C41.739826 122.20979798 37.72358444 122.1999678 33.70732117 122.18891907 C29.61196886 122.17870471 25.51661076 122.17412537 21.42124939 122.16908264 C13.38021724 122.15834551 5.33921434 122.14126923 -2.70179749 122.12025452 C-3.40139587 120.4698114 -3.40139587 120.4698114 -4.11512756 118.786026 C-5.40973797 115.7950158 -6.78021213 113.00952608 -8.38929749 110.18275452 C-8.82628967 109.41060608 -9.26328186 108.63845764 -9.71351624 107.84291077 C-10.03964905 107.2744342 -10.36578186 106.70595764 -10.70179749 106.12025452 C-11.36179749 106.12025452 -12.02179749 106.12025452 -12.70179749 106.12025452 C-12.78300842 105.44607483 -12.86421936 104.77189514 -12.94789124 104.07728577 C-13.92990243 100.22556311 -15.74022938 97.20217616 -17.76429749 93.80775452 C-18.14134827 93.16257874 -18.51839905 92.51740295 -18.90687561 91.85267639 C-19.83217241 90.271473 -20.76612429 88.69533992 -21.70179749 87.12025452 C-22.36179749 87.12025452 -23.02179749 87.12025452 -23.70179749 87.12025452 C-23.81442932 86.38669739 -23.92706116 85.65314026 -24.04310608 84.89735413 C-24.72476325 82.02342888 -25.67166213 80.17181699 -27.24085999 77.68666077 C-27.73843811 76.8726178 -28.23601624 76.05857483 -28.74867249 75.21986389 C-29.80119337 73.5277542 -30.86111564 71.84022602 -31.92835999 70.15736389 C-32.42335999 69.34203186 -32.91835999 68.52669983 -33.42835999 67.68666077 C-33.8880719 66.9539093 -34.34778381 66.22115784 -34.82142639 65.46620178 C-36.01925311 62.27432242 -35.58258704 60.39060078 -34.70179749 57.12025452 C-33.43348694 54.4332428 -33.43348694 54.4332428 -31.81507874 51.69056702 C-31.21268372 50.65899475 -30.6102887 49.62742249 -29.98963928 48.56459045 C-29.01184509 46.92151917 -29.01184509 46.92151917 -28.01429749 45.24525452 C-26.99925863 43.51136807 -25.98422258 41.77747998 -24.96939087 40.04347229 C-23.22181995 37.06416165 -21.46129294 34.09253265 -19.70179749 31.12025452 C-17.7108798 27.75367373 -15.7223654 24.3857122 -13.73963928 21.01429749 C-12.53085107 18.96036232 -11.31640596 16.90974304 -10.09559631 14.8629303 C-7.43598458 10.35255984 -5.13628926 6.19487282 -3.70179749 1.12025452 C-2.70179749 0.12025452 -2.70179749 0.12025452 0 0 Z M-1.70179749 1.12025452 C-1.70179749 1.45025452 -1.70179749 1.78025452 -1.70179749 2.12025452 C20.07820251 2.12025452 41.85820251 2.12025452 64.29820251 2.12025452 C64.29820251 1.79025452 64.29820251 1.46025452 64.29820251 1.12025452 C42.51820251 1.12025452 20.73820251 1.12025452 -1.70179749 1.12025452 Z M-1.70179749 120.12025452 C-1.70179749 120.45025452 -1.70179749 120.78025452 -1.70179749 121.12025452 C20.07820251 121.12025452 41.85820251 121.12025452 64.29820251 121.12025452 C64.29820251 120.79025452 64.29820251 120.46025452 64.29820251 120.12025452 C42.51820251 120.12025452 20.73820251 120.12025452 -1.70179749 120.12025452 Z " fill="#1471E7" transform="translate(38.70179748535156,131.87974548339844)"/>
+<path d="M0 0 C22.44 0 44.88 0 68 0 C69.98 3.96 71.96 7.92 74 12 C75.4509416 14.56879747 76.91243894 17.10292485 78.4375 19.625 C79.29287945 21.05917319 80.14695156 22.4941266 81 23.9296875 C81.46792969 24.71698242 81.93585938 25.50427734 82.41796875 26.31542969 C86.3014729 32.90540062 90.09535261 39.54818867 93.90991211 46.17822266 C94.83429077 47.78383057 94.83429077 47.78383057 95.77734375 49.421875 C96.32640381 50.37674805 96.87546387 51.33162109 97.44116211 52.31542969 C98.95920794 55.03060865 98.95920794 55.03060865 100.82641602 57.53613281 C102 60 102 60 101.37524414 62.47412109 C100.69449829 63.72443115 100.69449829 63.72443115 100 65 C99.53650146 65.86834473 99.07300293 66.73668945 98.59545898 67.63134766 C98.06766846 68.54964355 97.53987793 69.46793945 96.99609375 70.4140625 C96.13274414 71.92613281 96.13274414 71.92613281 95.25195312 73.46875 C94.35379883 75.03109375 94.35379883 75.03109375 93.4375 76.625 C92.24627576 78.69913161 91.05736291 80.77459293 89.87109375 82.8515625 C89.34443115 83.76760254 88.81776855 84.68364258 88.27514648 85.62744141 C86.89245012 88.03836128 86.89245012 88.03836128 86 91 C85.42507812 91.70125 84.85015625 92.4025 84.2578125 93.125 C81.32972638 96.85349721 79.14603559 100.84878954 76.875 105 C76.43285156 105.7940625 75.99070312 106.588125 75.53515625 107.40625 C73.44087202 111.20253561 71.49875427 114.9209162 70 119 C69.67 119.66 69.34 120.32 69 121 C45.9 121 22.8 121 -1 121 C-1.33 119.68 -1.66 118.36 -2 117 C-2.97764934 115.06095034 -4.00215114 113.14509158 -5.0625 111.25 C-5.61035156 110.26515625 -6.15820312 109.2803125 -6.72265625 108.265625 C-7.14417969 107.51796875 -7.56570312 106.7703125 -8 106 C-8.66 106 -9.32 106 -10 106 C-10.10884521 105.27981689 -10.21769043 104.55963379 -10.32983398 103.81762695 C-11.05325463 100.77609775 -12.15132215 98.61404725 -13.72265625 95.91796875 C-14.52993164 94.52094727 -14.52993164 94.52094727 -15.35351562 93.09570312 C-15.91748047 92.13599609 -16.48144531 91.17628906 -17.0625 90.1875 C-17.63033203 89.20845703 -18.19816406 88.22941406 -18.78320312 87.22070312 C-20.18254827 84.81006652 -21.58829929 82.4034149 -23 80 C-23.66 80 -24.32 80 -25 80 C-25.09023438 79.29359375 -25.18046875 78.5871875 -25.2734375 77.859375 C-26.14168806 74.44238892 -27.67838947 72.18154892 -29.625 69.25 C-32.1042169 65.17014815 -33.52230329 62.54994388 -32.9375 57.75 C-32.628125 56.5125 -32.31875 55.275 -32 54 C-31.34 54 -30.68 54 -30 54 C-29.4423999 52.99755249 -29.4423999 52.99755249 -28.87353516 51.97485352 C-16.4027075 29.57540235 -16.4027075 29.57540235 -10.4375 19.5625 C-7.02297894 13.82812722 -3.84340323 8.04388501 -1 2 C-0.67 1.34 -0.34 0.68 0 0 Z M1 1 C1 1.33 1 1.66 1 2 C22.78 2 44.56 2 67 2 C67 1.67 67 1.34 67 1 C45.22 1 23.44 1 1 1 Z " fill="#1472E8" transform="translate(36,2)"/>
+<path d="M0 0 C8.94474825 0.10748463 17.8894125 0.22011465 26.83401203 0.33933926 C30.9872148 0.39453599 35.14042465 0.44795082 39.29370117 0.49731445 C43.3007999 0.54500591 47.30781314 0.59735049 51.3148098 0.65294075 C52.8446153 0.67334263 54.37444423 0.69205929 55.90429115 0.70907402 C58.04476012 0.73316605 60.18506793 0.76321392 62.32543945 0.79467773 C63.54455521 0.81022202 64.76367096 0.8257663 66.01972961 0.84178162 C69 1 69 1 72 2 C72.10884521 2.72018311 72.21769043 3.44036621 72.32983398 4.18237305 C73.05325463 7.22390225 74.15132215 9.38595275 75.72265625 12.08203125 C76.26083984 13.01337891 76.79902344 13.94472656 77.35351562 14.90429688 C77.91748047 15.86400391 78.48144531 16.82371094 79.0625 17.8125 C79.63033203 18.79154297 80.19816406 19.77058594 80.78320312 20.77929688 C82.18254827 23.18993348 83.58829929 25.5965851 85 28 C85.66 28 86.32 28 87 28 C87.10884521 28.72018311 87.21769043 29.44036621 87.32983398 30.18237305 C88.05325463 33.22390225 89.15132215 35.38595275 90.72265625 38.08203125 C91.26083984 39.01337891 91.79902344 39.94472656 92.35351562 40.90429688 C92.91748047 41.86400391 93.48144531 42.82371094 94.0625 43.8125 C94.63033203 44.79154297 95.19816406 45.77058594 95.78320312 46.77929688 C97.18254827 49.18993348 98.58829929 51.5965851 100 54 C100.66 54 101.32 54 102 54 C103.16958841 58.01969069 103.15104407 59.66908945 101.3828125 63.54296875 C100.64697724 64.76804215 99.89381584 65.98285043 99.125 67.1875 C96.17570995 71.89990322 96.17570995 71.89990322 94 77 C93.41476563 77.71671875 92.82953125 78.4334375 92.2265625 79.171875 C89.48106971 82.65913251 87.47624101 86.3521246 85.375 90.25 C81.822218 96.74431104 78.19354146 103.18338697 74.4375 109.5625 C74.00808105 110.29436523 73.57866211 111.02623047 73.13623047 111.78027344 C70.12999094 116.87000906 70.12999094 116.87000906 69 118 C66.91622225 118.14157154 64.82762356 118.21252587 62.73950195 118.25634766 C61.75887535 118.27825165 61.75887535 118.27825165 60.75843811 118.30059814 C54.71656511 118.42676152 48.67335987 118.49538172 42.63044453 118.54844093 C38.56946556 118.58419065 34.51046981 118.63744069 30.45043945 118.73388672 C26.52628821 118.82682935 22.60389094 118.87537922 18.6787014 118.89283371 C17.18461665 118.90691215 15.69059239 118.93651863 14.19713783 118.98213577 C2.52500977 119.32115425 2.52500977 119.32115425 -1.18902588 116.10359192 C-2.75578596 113.79543724 -3.90907763 111.5626827 -5 109 C-5.52770996 108.11755615 -6.05541992 107.2351123 -6.59912109 106.32592773 C-6.98664551 105.61895752 -7.37416992 104.9119873 -7.7734375 104.18359375 C-8.20527344 103.40048828 -8.63710937 102.61738281 -9.08203125 101.81054688 C-9.50871094 101.02744141 -9.93539062 100.24433594 -10.375 99.4375 C-10.82488281 98.61958984 -11.27476562 97.80167969 -11.73828125 96.95898438 C-12.8291172 94.97459133 -13.9162949 92.98829336 -15 91 C-15.66 91 -16.32 91 -17 91 C-17.09095947 90.29367432 -17.18191895 89.58734863 -17.27563477 88.85961914 C-18.14411851 85.43105491 -19.62186285 83.18212275 -21.58984375 80.24609375 C-22.29044922 79.14330078 -22.99105469 78.04050781 -23.71289062 76.90429688 C-24.81910427 75.16512001 -25.93542838 73.44052969 -27.09887695 71.73901367 C-29.66532116 67.96019675 -31.76915043 64.41402495 -33 60 C-32.00023176 55.32010102 -29.68163123 51.91072588 -27 48 C-25.91234314 46.11240993 -24.83662256 44.21788758 -23.7734375 42.31640625 C-22.64407347 40.3964049 -21.51116544 38.47848444 -20.375 36.5625 C-19.14902743 34.47698097 -17.9237821 32.39103429 -16.69921875 30.3046875 C-15.77955322 28.73992676 -15.77955322 28.73992676 -14.84130859 27.14355469 C-11.93009619 22.173418 -9.05287243 17.18417374 -6.1875 12.1875 C-5.67815918 11.30457275 -5.16881836 10.42164551 -4.64404297 9.51196289 C-4.17756348 8.69719482 -3.71108398 7.88242676 -3.23046875 7.04296875 C-2.82207764 6.33164795 -2.41368652 5.62032715 -1.99291992 4.88745117 C-0.86702466 2.87076645 -0.86702466 2.87076645 0 0 Z " fill="#1472E8" transform="translate(151,69)"/>
+<path d="M0 0 C22.44 0 44.88 0 68 0 C68 0.33 68 0.66 68 1 C45.56 1 23.12 1 0 1 C0 0.67 0 0.34 0 0 Z " fill="#0055FF" transform="translate(152,188)"/>
+<path d="M0 0 C22.44 0 44.88 0 68 0 C68 0.33 68 0.66 68 1 C45.56 1 23.12 1 0 1 C0 0.67 0 0.34 0 0 Z " fill="#0080FF" transform="translate(152,68)"/>
+<path d="M0 0 C1 4 1 4 1 4 Z " fill="#007FDF" transform="translate(1,191)"/>
+<path d="M0 0 C1 4 1 4 1 4 Z " fill="#007FFF" transform="translate(1,61)"/>
+<path d="" fill="#007FBF" transform="translate(0,0)"/>
+<path d="" fill="#003FDF" transform="translate(0,0)"/>
+<path d="" fill="#006ABF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#006AFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#006ABF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FBF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#006A94" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#006A94" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#00BFBF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#003FDF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#002A7F" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#006AD4" transform="translate(0,0)"/>
+<path d="" fill="#00D4FF" transform="translate(0,0)"/>
+<path d="" fill="#006AFF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#006AD4" transform="translate(0,0)"/>
+<path d="" fill="#006A94" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#002A7F" transform="translate(0,0)"/>
+<path d="" fill="#001FDF" transform="translate(0,0)"/>
+<path d="" fill="#00D4FF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#006AD4" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#00D4FF" transform="translate(0,0)"/>
+<path d="" fill="#006ABF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#006ABF" transform="translate(0,0)"/>
+<path d="" fill="#001FDF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#006ABF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#00557F" transform="translate(0,0)"/>
+<path d="" fill="#003FDF" transform="translate(0,0)"/>
+<path d="" fill="#00D4FF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#002AD4" transform="translate(0,0)"/>
+<path d="" fill="#006AD4" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#00AAD4" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#00AAD4" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#007FBF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00D4FF" transform="translate(0,0)"/>
+<path d="" fill="#007FBF" transform="translate(0,0)"/>
+<path d="" fill="#002A7F" transform="translate(0,0)"/>
+<path d="" fill="#00AAD4" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#003FDF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FBF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#007FBF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#007FBF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#003FDF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#003FFF" transform="translate(0,0)"/>
+<path d="" fill="#00557F" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#003FDF" transform="translate(0,0)"/>
+<path d="" fill="#006ABF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#007FBF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#007FBF" transform="translate(0,0)"/>
+<path d="" fill="#002A7F" transform="translate(0,0)"/>
+<path d="" fill="#003FDF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#00AAD4" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#002A7F" transform="translate(0,0)"/>
+<path d="" fill="#003FDF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#00D4FF" transform="translate(0,0)"/>
+<path d="" fill="#007FBF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#003FDF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00BFBF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#0094FF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#003FFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#002A7F" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#006AFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#003FFF" transform="translate(0,0)"/>
+<path d="" fill="#002A7F" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#00BFFF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#0094BF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#0094FF" transform="translate(0,0)"/>
+<path d="" fill="#003FFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#001F5F" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#006A94" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#003FFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00D4FF" transform="translate(0,0)"/>
+<path d="" fill="#006AD4" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#002AFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0000FF" transform="translate(0,0)"/>
+<path d="" fill="#0000FF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#00FFFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#000000" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0000FF" transform="translate(0,0)"/>
+<path d="" fill="#00FFFF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007F7F" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FBF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0000FF" transform="translate(0,0)"/>
+<path d="" fill="#0000FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#007FFF" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#0055AA" transform="translate(0,0)"/>
+<path d="" fill="#0055FF" transform="translate(0,0)"/>
+<path d="" fill="#00AAFF" transform="translate(0,0)"/>
+<path d="" fill="#0000FF" transform="translate(0,0)"/>
+<path d="" fill="#0000FF" transform="translate(0,0)"/>
+</svg>
diff --git a/packages/nodes-base/credentials/icons/Dynatrace.svg b/packages/nodes-base/credentials/icons/Dynatrace.svg
new file mode 100644
index 0000000000000..863f93c12323a
--- /dev/null
+++ b/packages/nodes-base/credentials/icons/Dynatrace.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-2 0 260 260" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M86.3857687,21.6895737 C83.0567503,39.2593929 78.9879501,65.3367034 76.7686045,91.7839049 C72.8847498,138.390162 75.2890408,169.645946 75.2890408,169.645946 L9.63340081,231.972567 C9.63340081,231.972567 4.63987326,197.017874 2.05063675,157.62449 C0.571073033,133.211689 0.0162366389,111.758015 0.0162366389,98.8118326 C0.0162366389,98.0720507 0.386127568,97.3322688 0.386127568,96.592487 C0.386127568,95.6677597 1.49580036,86.9753228 10.0032917,78.8377224 C19.250565,69.9603401 87.4954415,16.5111007 86.3857687,21.6895737 Z" fill="#1496FF">
+
</path>
+        <path d="M86.3857687,21.6895737 C83.0567503,39.2593929 78.9879501,65.3367034 76.7686045,91.7839049 C76.7686045,91.7839049 4.08503686,83.0914681 0.0162366389,100.661287 C0.0162366389,99.7365599 1.31085489,89.0097229 9.81834627,80.8721225 C19.0656195,71.9947402 87.4954415,16.5111007 86.3857687,21.6895737 L86.3857687,21.6895737 Z" fill="#1284EA">
+
</path>
+        <path d="M0.0162366389,96.4075415 L0.0162366389,100.476342 C0.756018498,97.3322688 2.05063675,95.1129233 4.63987326,91.5989594 C10.0032917,84.7559772 18.6957286,82.9065226 22.2096924,82.5366317 C39.964457,80.1323406 66.226713,77.3581587 92.6739145,76.6183768 C139.465117,75.1388131 170.35101,79.0226678 170.35101,79.0226678 L236.00665,16.6960462 C236.00665,16.6960462 201.606793,10.2229549 162.398355,5.59931831 C136.690935,2.45524541 114.127588,0.790736222 101.366351,0.0509543628 C100.441624,0.0509543628 91.3792963,-1.05871843 82.8718049,7.07888203 C73.6245316,15.9562643 26.6483836,60.5281214 7.78394616,78.4678314 C-0.72354522,86.6054319 0.0162366389,95.6677597 0.0162366389,96.4075415 Z" fill="#B4DC00">
+
</path>
+        <path d="M233.602359,176.119037 C215.847594,178.523328 189.585338,181.482455 163.138137,182.407183 C116.346934,183.886746 85.2760959,180.002892 85.2760959,180.002892 L19.6204559,242.514459 C19.6204559,242.514459 54.3902033,249.357441 93.5986418,253.796132 C117.641552,256.570314 138.910281,258.049878 151.856463,258.78966 C152.781191,258.78966 154.260754,258.049878 155.185482,258.049878 C156.110209,258.049878 165.172537,256.385369 173.680028,248.247768 C182.927301,239.370386 238.780832,175.5642 233.602359,176.119037 L233.602359,176.119037 Z" fill="#6F2DA8">
+
</path>
+        <path d="M233.602359,176.119037 C215.847594,178.523328 189.585338,181.482455 163.138137,182.407183 C163.138137,182.407183 168.131664,255.460641 150.561845,258.604714 C151.486572,258.604714 163.508028,258.049878 172.015519,249.912277 C181.262792,241.034895 238.780832,175.5642 233.602359,176.119037 L233.602359,176.119037 Z" fill="#591F91">
+
</path>
+        <path d="M154.4457,258.974605 C153.151081,258.974605 151.856463,258.78966 150.3769,258.78966 C153.705918,258.234823 155.925263,257.12515 159.439227,254.535914 C166.467155,249.542386 168.686501,240.84995 169.426282,237.335986 C172.570355,219.766167 176.824101,193.688856 178.858501,167.241655 C182.55741,120.635397 180.338065,89.5645593 180.338065,89.5645593 L245.993705,27.0529922 C245.993705,27.0529922 250.802287,61.8227396 253.576469,101.216124 C255.240978,126.923543 255.795814,149.671835 255.98076,162.248127 C255.98076,163.172854 256.720542,172.235182 248.21305,180.372783 C238.965777,189.250165 191.989629,234.006967 173.310137,251.946677 C164.432755,260.084278 155.370427,258.974605 154.4457,258.974605 L154.4457,258.974605 Z" fill="#73BE28">
+
</path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/nodes-base/credentials/icons/Elastic.svg b/packages/nodes-base/credentials/icons/Elastic.svg
new file mode 100644
index 0000000000000..d240ad568c88f
--- /dev/null
+++ b/packages/nodes-base/credentials/icons/Elastic.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><path d="M255.96 134.393c0-21.521-13.373-40.117-33.223-47.43a75.239 75.239 0 0 0 1.253-13.791c0-39.909-32.386-72.295-72.295-72.295-23.193 0-44.923 11.074-58.505 30.088-6.686-5.224-14.835-7.94-23.402-7.94-21.104 0-38.446 17.133-38.446 38.446 0 4.597.836 9.194 2.298 13.373C13.582 81.739 0 100.962 0 122.274c0 21.522 13.373 40.327 33.431 47.64-.835 4.388-1.253 8.985-1.253 13.79 0 39.7 32.386 72.087 72.086 72.087 23.402 0 44.924-11.283 58.505-30.088 6.686 5.223 15.044 8.149 23.611 8.149 21.104 0 38.446-17.134 38.446-38.446 0-4.597-.836-9.194-2.298-13.373 19.64-7.104 33.431-26.327 33.431-47.64z" fill="#FFF"/><path d="M100.085 110.364l57.043 26.119 57.669-50.565a64.312 64.312 0 0 0 1.253-12.746c0-35.52-28.834-64.355-64.355-64.355-21.313 0-41.162 10.447-53.072 27.998l-9.612 49.73 11.074 23.82z" fill="#F4BD19"/><path d="M40.953 170.75c-.835 4.179-1.253 8.567-1.253 12.955 0 35.52 29.043 64.564 64.564 64.564 21.522 0 41.372-10.656 53.49-28.208l9.403-49.729-12.746-24.238-57.251-26.118-56.207 50.774z" fill="#3CBEB1"/><path d="M40.536 71.918l39.073 9.194 8.775-44.506c-5.432-4.179-11.91-6.268-18.805-6.268-16.925 0-30.924 13.79-30.924 30.924 0 3.552.627 7.313 1.88 10.656z" fill="#E9478C"/><path d="M37.192 81.32c-17.551 5.642-29.67 22.567-29.67 40.954 0 17.97 11.074 34.059 27.79 40.327l54.953-49.73-10.03-21.52-43.043-10.03z" fill="#2C458F"/><path d="M167.784 219.852c5.432 4.18 11.91 6.478 18.596 6.478 16.925 0 30.924-13.79 30.924-30.924 0-3.761-.627-7.314-1.88-10.657l-39.073-9.193-8.567 44.296z" fill="#95C63D"/><path d="M175.724 165.317l43.043 10.03c17.551-5.85 29.67-22.566 29.67-40.954 0-17.97-11.074-33.849-27.79-40.326l-56.415 49.311 11.492 21.94z" fill="#176655"/></svg>
\ No newline at end of file
diff --git a/packages/nodes-base/credentials/icons/Filescan.svg b/packages/nodes-base/credentials/icons/Filescan.svg
new file mode 100644
index 0000000000000..16f2bdba0a7ee
--- /dev/null
+++ b/packages/nodes-base/credentials/icons/Filescan.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+<path d="M0 0 C66 0 132 0 200 0 C200 66 200 132 200 200 C134 200 68 200 0 200 C0 134 0 68 0 0 Z " fill="#FCFDFE" transform="translate(0,0)"/>
+<path d="M0 0 C2.97 0 5.94 0 9 0 C9.32871094 1.16015625 9.32871094 1.16015625 9.6640625 2.34375 C12.7670487 12.53567216 16.47174137 19.48366331 26.03125 24.69921875 C34.25674761 28.30328547 43.09750872 29.70941265 51.90625 31.14453125 C53.74920654 31.45088501 53.74920654 31.45088501 55.62939453 31.76342773 C58.07496857 32.16273441 60.52390935 32.54207868 62.97607422 32.89868164 C72.12276024 34.37442901 80.37525644 37.01033521 86.0625 44.75 C88.54763227 49.26524033 88.88548606 53.91974523 89 59 C88.319375 58.2575 87.63875 57.515 86.9375 56.75 C80.33542437 50.1665743 71.9889828 47.96335231 62.9765625 46.7109375 C62.23038666 46.60278717 61.48421082 46.49463684 60.71542358 46.38320923 C58.35265961 46.04195585 55.98888881 45.70836276 53.625 45.375 C52.01425005 45.14373608 50.40357208 44.91197033 48.79296875 44.6796875 C44.86278775 44.11398393 40.93168592 43.55514365 37 43 C37 43.66 37 44.32 37 45 C35.35 45 33.7 45 32 45 C32 42.36 32 39.72 32 37 C30.02 37 28.04 37 26 37 C26 37.66 26 38.32 26 39 C21.47126099 38.46720718 18.42350929 37.02542682 15 34 C14.625 30.25 14.625 30.25 15 27 C12.69 27 10.38 27 8 27 C8 29.64 8 32.28 8 35 C8.7425 34.87625 9.485 34.7525 10.25 34.625 C11.61125 34.810625 11.61125 34.810625 13 35 C13.90468139 36.44078888 14.80540368 37.88431558 15.6796875 39.34375 C22.41783682 47.79633968 36.8997569 48.35571337 46.84765625 49.63671875 C61.49484216 51.5501727 77.07139489 53.88025445 87 66 C91.76636206 73.18388288 93.32728118 80.93391059 93.125 89.4375 C93.11597656 90.16904297 93.10695313 90.90058594 93.09765625 91.65429688 C93.07436153 93.43634298 93.0385019 95.21821759 93 97 C90.26196565 95.63098283 90.2440383 94.29318019 89.25 91.4375 C85.95079819 82.93477768 80.91905937 76.61596532 73 72 C64.30384762 68.43980766 55.19090755 66.64572531 46 64.875 C43.43648447 64.37760146 40.87392978 63.87521771 38.3125 63.3671875 C37.19488281 63.15175293 36.07726562 62.93631836 34.92578125 62.71435547 C32.33059152 62.08071686 30.30875117 61.31517365 28 60 C28 58.35 28 56.7 28 55 C26.02 55 24.04 55 22 55 C22 57.31 22 59.62 22 62 C22.9075 62.04125 23.815 62.0825 24.75 62.125 C28.38696734 62.63013435 31.04241814 63.99303803 34.25 65.75 C39.57584142 68.55025373 44.76237953 70.18121512 50.5625 71.625 C51.38427734 71.83181396 52.20605469 72.03862793 53.05273438 72.25170898 C54.64781256 72.65223734 56.24302261 73.05224101 57.83837891 73.45166016 C66.63900466 75.68412068 73.02342107 77.98739494 78 86 C78.6796875 88.25 78.6796875 88.25 79 90 C78.29875 89.401875 77.5975 88.80375 76.875 88.1875 C71.93969747 84.43237851 67.53197544 82.66272502 61.39453125 81.8671875 C60.16412109 81.70089844 58.93371094 81.53460938 57.66601562 81.36328125 C56.39435547 81.20214844 55.12269531 81.04101562 53.8125 80.875 C51.27704122 80.54135349 48.74186884 80.20552105 46.20703125 79.8671875 C45.0878833 79.72394043 43.96873535 79.58069336 42.81567383 79.43310547 C40 79 40 79 37 78 C37 76.35 37 74.7 37 73 C34.36 73 31.72 73 29 73 C29 73.66 29 74.32 29 75 C22.46184177 73.36546044 17.38954095 69.6003828 12.875 64.6875 C10.38606542 62.44745888 8.27468188 62.29769835 5 62 C5 60.02 5 58.04 5 56 C6.98 56 8.96 56 11 56 C11 52.7 11 49.4 11 46 C8.36 46 5.72 46 3 46 C2.21311555 43.22276075 1.88050076 40.77389923 1.90234375 37.890625 C1.90717773 36.75947266 1.90717773 36.75947266 1.91210938 35.60546875 C1.92048828 34.82816406 1.92886719 34.05085938 1.9375 33.25 C1.94201172 32.45722656 1.94652344 31.66445312 1.95117188 30.84765625 C1.96291435 28.89840492 1.98084854 26.94919262 2 25 C0.68 25 -0.64 25 -2 25 C-2 22.69 -2 20.38 -2 18 C0.97 18 3.94 18 7 18 C7 15.03 7 12.06 7 9 C4.69 9 2.38 9 0 9 C0 6.03 0 3.06 0 0 Z " fill="#1C73C1" transform="translate(52,79)"/>
+<path d="M0 0 C1.41764994 0.93601246 2.83407568 1.8738792 4.25 2.8125 C5.03890625 3.33457031 5.8278125 3.85664062 6.640625 4.39453125 C8.81092481 5.87134122 10.91413768 7.40689873 13 9 C13.33 8.01 13.66 7.02 14 6 C15.98 6 17.96 6 20 6 C20 7.65 20 9.3 20 11 C18.35 11 16.7 11 15 11 C15 11.99 15 12.98 15 14 C21.93 13.01 21.93 13.01 29 12 C29 13.98 29 15.96 29 18 C31.97 18 34.94 18 38 18 C38 14.04 38 10.08 38 6 C39.65 6 41.3 6 43 6 C43 7.32 43 8.64 43 10 C46.3 10 49.6 10 53 10 C53 11.32 53 12.64 53 14 C54.65 14 56.3 14 58 14 C58 13.01 58 12.02 58 11 C59.52102323 11.14383922 61.04180897 11.29019014 62.5625 11.4375 C63.40941406 11.51871094 64.25632812 11.59992187 65.12890625 11.68359375 C68 12 68 12 71.2890625 12.90234375 C76.77092017 13.04660316 79.60006339 10.39119109 83.8125 7.125 C85.31862653 6.00208909 86.82511928 4.87966916 88.33203125 3.7578125 C88.98921143 3.2539502 89.6463916 2.75008789 90.32348633 2.23095703 C92 1 92 1 94 0 C92.59155282 3.21524305 90.89655214 5.32183868 88.375 7.75 C87.42753906 8.67039062 87.42753906 8.67039062 86.4609375 9.609375 C85.97882813 10.06828125 85.49671875 10.5271875 85 11 C85.99 11.33 86.98 11.66 88 12 C79.8633153 19.83863765 71.45347335 26.80012669 62 33 C61.37706055 33.41008301 60.75412109 33.82016602 60.11230469 34.24267578 C58.25844875 35.44192157 56.38614406 36.60233954 54.5 37.75 C53.3965625 38.42546875 52.293125 39.1009375 51.15625 39.796875 C48 41 48 41 45.04296875 40.45703125 C41.52820892 38.77409747 38.1413911 36.95819681 34.8125 34.9375 C34.15612549 34.54046875 33.49975098 34.1434375 32.82348633 33.734375 C22.96061763 27.63754745 14.51774313 19.81562981 6 12 C6.99 11.67 7.98 11.34 9 11 C8.3503125 10.37351562 7.700625 9.74703125 7.03125 9.1015625 C6.1959375 8.28429688 5.360625 7.46703125 4.5 6.625 C3.6646875 5.81289063 2.829375 5.00078125 1.96875 4.1640625 C0 2 0 2 0 0 Z " fill="#2E9FE6" transform="translate(57,38)"/>
+<path d="M0 0 C0.81404297 0.61488281 0.81404297 0.61488281 1.64453125 1.2421875 C2.35996094 1.78101563 3.07539062 2.31984375 3.8125 2.875 C4.52019531 3.40867188 5.22789063 3.94234375 5.95703125 4.4921875 C7.60456297 5.70814781 9.29624211 6.86416141 11 8 C11.37109375 10.28515625 11.37109375 10.28515625 11.4375 13.0625 C11.91481157 20.20345552 13.85080229 25.47469269 18.5 30.9375 C23.16359364 34.78496475 25.88262434 35.31641598 32 35 C34.0064731 34.70814937 36.00994193 34.38830401 38 34 C41 39.75 41 39.75 41 42 C41.66 42 42.32 42 43 42 C43.268125 41.236875 43.53625 40.47375 43.8125 39.6875 C44.94424112 37.12619116 45.91223401 35.80307062 48 34 C48.99 34.33 49.98 34.66 51 35 C55.90333175 35.4807188 59.7775613 35.00804991 64.0703125 32.64453125 C68.82432045 28.59303864 71.70918985 22.17398507 72.2734375 16.015625 C72.28632813 15.08234375 72.29921875 14.1490625 72.3125 13.1875 C72.41991586 9.65812179 72.61898473 8.42466557 75.01171875 5.7578125 C81.09751506 1 81.09751506 1 83 1 C83.57259482 19.47148474 83.57259482 19.47148474 80 27 C79.70996094 27.70511719 79.41992188 28.41023438 79.12109375 29.13671875 C76.92986233 34.09678652 74.37573435 36.81764775 70 40 C70 38.68 70 37.36 70 36 C69.33871094 36.52787109 69.33871094 36.52787109 68.6640625 37.06640625 C60.80366534 42.83370915 49.87089838 48.95694926 39.8828125 49.01953125 C37.00337016 48.31462326 34.65143625 47.32950589 32 46 C30.77661018 45.42716968 29.55261042 44.85564087 28.328125 44.28515625 C23.73248177 42.09236457 19.24170484 39.82780323 15 37 C14.67 37.99 14.34 38.98 14 40 C8.50697381 37.79329833 6.43385794 33.15405211 4 28 C2.7501514 24.04137174 1.79767787 20.07235545 1 16 C2.65 16 4.3 16 6 16 C6 13.69 6 11.38 6 9 C4.02 9 2.04 9 0 9 C0 6.03 0 3.06 0 0 Z " fill="#2892DA" transform="translate(62,56)"/>
+<path d="M0 0 C1.20698658 4.82794633 0.42003532 6.00783103 -1.8203125 10.1640625 C-4.0031602 13.56120958 -6.24231666 14.74743889 -10 16 C-13.375 16.375 -13.375 16.375 -17 16 C-19.9375 13.5 -19.9375 13.5 -22 11 C-18.79619983 8.86413322 -17.98060033 8.76867825 -14.3125 8.875 C-13.10013672 8.90207031 -13.10013672 8.90207031 -11.86328125 8.9296875 C-10.94095703 8.96449219 -10.94095703 8.96449219 -10 9 C-9.34 6.69 -8.68 4.38 -8 2 C-5.36 1.34 -2.72 0.68 0 0 Z " fill="#E26C30" transform="translate(130,71)"/>
+<path d="M0 0 C4.455 0.99 4.455 0.99 9 2 C9.33 4.31 9.66 6.62 10 9 C11.03060547 8.94779297 11.03060547 8.94779297 12.08203125 8.89453125 C12.98308594 8.86746094 13.88414063 8.84039062 14.8125 8.8125 C15.70582031 8.77769531 16.59914063 8.74289063 17.51953125 8.70703125 C20.41647515 9.04918998 21.22555028 9.75393573 23 12 C20.11171799 15.16335648 18.01180326 15.90454686 13.6875 16.3125 C9.20580785 15.93269558 7.38620618 14.93471202 4 12 C1.13713993 8.25966889 -0.58251689 4.80576432 0 0 Z " fill="#E1672A" transform="translate(77,71)"/>
+<path d="M0 0 C3.63 0 7.26 0 11 0 C11 3.63 11 7.26 11 11 C7.37 11 3.74 11 0 11 C0 7.37 0 3.74 0 0 Z " fill="#1675C5" transform="translate(32,64)"/>
+<path d="M0 0 C3.3 0 6.6 0 10 0 C10 3.3 10 6.6 10 10 C6.7 10 3.4 10 0 10 C0 6.7 0 3.4 0 0 Z " fill="#30AEF3" transform="translate(97,24)"/>
+<path d="M0 0 C2.64 0 5.28 0 8 0 C8 2.97 8 5.94 8 9 C5.36 9 2.72 9 0 9 C0 6.03 0 3.06 0 0 Z " fill="#084EA3" transform="translate(51,149)"/>
+<path d="M0 0 C0.66 0.66 1.32 1.32 2 2 C-0.05233685 4.2477975 -1.00667261 5.0022242 -4 6 C-10.54098361 6.2295082 -10.54098361 6.2295082 -13 5 C-12.4375 3.125 -12.4375 3.125 -11 1 C-7.15391594 -0.49569935 -3.91701403 -1.74089512 0 0 Z " fill="#D53D20" transform="translate(98,81)"/>
+<path d="M0 0 C2.64 0 5.28 0 8 0 C8 2.64 8 5.28 8 8 C5.36 8 2.72 8 0 8 C0 5.36 0 2.72 0 0 Z " fill="#1960AF" transform="translate(43,126)"/>
+<path d="M0 0 C2.64 0 5.28 0 8 0 C8 2.64 8 5.28 8 8 C5.36 8 2.72 8 0 8 C0 5.36 0 2.72 0 0 Z " fill="#1B6FBD" transform="translate(36,88)"/>
+<path d="M0 0 C2.64 0 5.28 0 8 0 C8 2.64 8 5.28 8 8 C5.36 8 2.72 8 0 8 C0 5.36 0 2.72 0 0 Z " fill="#3091D7" transform="translate(36,39)"/>
+<path d="M0 0 C1.33998047 0.31324219 1.33998047 0.31324219 2.70703125 0.6328125 C3.60808594 0.83648437 4.50914063 1.04015625 5.4375 1.25 C6.46810547 1.50136719 6.46810547 1.50136719 7.51953125 1.7578125 C7.18953125 3.4078125 6.85953125 5.0578125 6.51953125 6.7578125 C3.33203125 7.0703125 3.33203125 7.0703125 -0.48046875 6.7578125 C-3.41796875 4.2578125 -3.41796875 4.2578125 -5.48046875 1.7578125 C-2.48046875 -0.2421875 -2.48046875 -0.2421875 0 0 Z " fill="#D02E22" transform="translate(113.48046875,80.2421875)"/>
+<path d="M0 0 C1.9375 0.8125 1.9375 0.8125 4 2 C5.11450049 5.34350146 4.91669067 6.66657937 4 10 C3.01 11.485 3.01 11.485 2 13 C1.34 13 0.68 13 0 13 C-1.06671952 9.79984144 -0.94845472 8.11455706 -0.5625 4.8125 C-0.46066406 3.91144531 -0.35882813 3.01039062 -0.25390625 2.08203125 C-0.17011719 1.39496094 -0.08632812 0.70789063 0 0 Z " fill="#E6F1FA" transform="translate(103,85)"/>
+<path d="M0 0 C2.31 0 4.62 0 7 0 C7 2.31 7 4.62 7 7 C4.69 7 2.38 7 0 7 C0 4.69 0 2.38 0 0 Z " fill="#58B5ED" transform="translate(83,34)"/>
+<path d="M0 0 C1.98 0 3.96 0 6 0 C6 2.31 6 4.62 6 7 C4.02 7 2.04 7 0 7 C0 4.69 0 2.38 0 0 Z " fill="#3790D4" transform="translate(53,63)"/>
+<path d="M0 0 C4.455 0.99 4.455 0.99 9 2 C9 3.65 9 5.3 9 7 C8.34 6.01 7.68 5.02 7 4 C5.35 5.32 3.7 6.64 2 8 C-0.1519437 4.77208445 -0.20086443 3.71599191 0 0 Z " fill="#EB8C38" transform="translate(77,71)"/>
+<path d="M0 0 C1.65 0.33 3.3 0.66 5 1 C3.9375 2.9375 3.9375 2.9375 2 5 C-1.6875 5.75 -1.6875 5.75 -5 6 C-3.35 4.02 -1.7 2.04 0 0 Z " fill="#CF2A21" transform="translate(95,81)"/>
+<path d="M0 0 C1.65 0 3.3 0 5 0 C5 1.98 5 3.96 5 6 C3.35 6 1.7 6 0 6 C0 4.02 0 2.04 0 0 Z " fill="#1658A8" transform="translate(33,141)"/>
+<path d="M0 0 C1.98 0 3.96 0 6 0 C6 1.65 6 3.3 6 5 C4.02 5 2.04 5 0 5 C0 3.35 0 1.7 0 0 Z " fill="#2F8FD6" transform="translate(48,51)"/>
+<path d="M0 0 C1.98 0 3.96 0 6 0 C6 1.65 6 3.3 6 5 C4.02 5 2.04 5 0 5 C0 3.35 0 1.7 0 0 Z " fill="#2A98E0" transform="translate(71,44)"/>
+<path d="M0 0 C0.95465783 2.16967689 1.14401212 3.56328793 0.3984375 5.82421875 C-0.35870385 7.5684743 -1.17609198 9.28627131 -2 11 C-2.33 11 -2.66 11 -3 11 C-3.08096803 9.54257537 -3.13917774 8.08387193 -3.1875 6.625 C-3.22230469 5.81289062 -3.25710937 5.00078125 -3.29296875 4.1640625 C-3.19628906 3.44992188 -3.09960938 2.73578125 -3 2 C-2.01 1.34 -1.02 0.68 0 0 Z " fill="#EA882E" transform="translate(130,71)"/>
+<path d="M0 0 C1.65 0 3.3 0 5 0 C5 1.65 5 3.3 5 5 C3.35 5 1.7 5 0 5 C0 3.35 0 1.7 0 0 Z " fill="#0A55A9" transform="translate(87,164)"/>
+<path d="M0 0 C1.65 0 3.3 0 5 0 C5 1.65 5 3.3 5 5 C3.35 5 1.7 5 0 5 C0 3.35 0 1.7 0 0 Z " fill="#FEFEFF" transform="translate(97,61)"/>
+<path d="M0 0 C1.65 0 3.3 0 5 0 C5 1.65 5 3.3 5 5 C3.35 5 1.7 5 0 5 C0 3.35 0 1.7 0 0 Z " fill="#29ABF3" transform="translate(111,36)"/>
+<path d="M0 0 C1.65 0 3.3 0 5 0 C5 1.65 5 3.3 5 5 C3.35 5 1.7 5 0 5 C0 3.35 0 1.7 0 0 Z " fill="#39A3E6" transform="translate(65,30)"/>
+<path d="M0 0 C1.65 0 3.3 0 5 0 C4.67 1.65 4.34 3.3 4 5 C2.68 5 1.36 5 0 5 C0 3.35 0 1.7 0 0 Z " fill="#D4371A" transform="translate(116,82)"/>
+<path d="M0 0 C1.32 1.32 2.64 2.64 4 4 C3.01 5.98 2.02 7.96 1 10 C0.67 10 0.34 10 0 10 C0 6.7 0 3.4 0 0 Z " fill="#3496DA" transform="translate(104,85)"/>
+<path d="M0 0 C0 3 0 3 -1.53125 4.82421875 C-2.1809375 5.43910156 -2.830625 6.05398437 -3.5 6.6875 C-4.1496875 7.31011719 -4.799375 7.93273438 -5.46875 8.57421875 C-5.9740625 9.04472656 -6.479375 9.51523437 -7 10 C-7 7 -7 7 -4.625 4.4375 C-3.75875 3.633125 -2.8925 2.82875 -2 2 C-1.34 1.34 -0.68 0.68 0 0 Z " fill="#53C4FD" transform="translate(150,38)"/>
+</svg>
diff --git a/packages/nodes-base/credentials/icons/Malcore.png b/packages/nodes-base/credentials/icons/Malcore.png
new file mode 100644
index 0000000000000..b7f3ef35cad7f
Binary files /dev/null and b/packages/nodes-base/credentials/icons/Malcore.png differ
diff --git a/packages/nodes-base/nodes/Elastic/ElasticSecurity/ElasticSecurity.node.ts b/packages/nodes-base/nodes/Elastic/ElasticSecurity/ElasticSecurity.node.ts
index 5d53ce9647da7..36df215476567 100644
--- a/packages/nodes-base/nodes/Elastic/ElasticSecurity/ElasticSecurity.node.ts
+++ b/packages/nodes-base/nodes/Elastic/ElasticSecurity/ElasticSecurity.node.ts
@@ -1,15 +1,11 @@
 import type {
 	IExecuteFunctions,
-	ICredentialsDecrypted,
-	ICredentialTestFunctions,
 	IDataObject,
 	ILoadOptionsFunctions,
-	INodeCredentialTestResult,
 	INodeExecutionData,
 	INodePropertyOptions,
 	INodeType,
 	INodeTypeDescription,
-	IRequestOptions,
 } from 'n8n-workflow';
 import { NodeOperationError } from 'n8n-workflow';
 
@@ -19,7 +15,6 @@ import {
 	getVersion,
 	handleListing,
 	throwOnEmptyUpdate,
-	tolerateTrailingSlash,
 } from './GenericFunctions';
 
 import {
@@ -33,12 +28,7 @@ import {
 	connectorOperations,
 } from './descriptions';
 
-import type {
-	Connector,
-	ConnectorCreatePayload,
-	ConnectorType,
-	ElasticSecurityApiCredentials,
-} from './types';
+import type { Connector, ConnectorCreatePayload, ConnectorType } from './types';
 
 export class ElasticSecurity implements INodeType {
 	description: INodeTypeDescription = {
@@ -58,7 +48,6 @@ export class ElasticSecurity implements INodeType {
 			{
 				name: 'elasticSecurityApi',
 				required: true,
-				testedBy: 'elasticSecurityApiTest',
 			},
 		],
 		properties: [
@@ -115,49 +104,6 @@ export class ElasticSecurity implements INodeType {
 				return connectors.map(({ name, id }) => ({ name, value: id }));
 			},
 		},
-		credentialTest: {
-			async elasticSecurityApiTest(
-				this: ICredentialTestFunctions,
-				credential: ICredentialsDecrypted,
-			): Promise<INodeCredentialTestResult> {
-				const {
-					username,
-					password,
-					baseUrl: rawBaseUrl,
-				} = credential.data as ElasticSecurityApiCredentials;
-
-				const baseUrl = tolerateTrailingSlash(rawBaseUrl);
-
-				const token = Buffer.from(`${username}:${password}`).toString('base64');
-
-				const endpoint = '/cases/status';
-
-				const options: IRequestOptions = {
-					headers: {
-						Authorization: `Basic ${token}`,
-						'kbn-xsrf': true,
-					},
-					method: 'GET',
-					body: {},
-					qs: {},
-					uri: `${baseUrl}/api${endpoint}`,
-					json: true,
-				};
-
-				try {
-					await this.helpers.request(options);
-					return {
-						status: 'OK',
-						message: 'Authentication successful',
-					};
-				} catch (error) {
-					return {
-						status: 'Error',
-						message: error.message,
-					};
-				}
-			},
-		},
 	};
 
 	async execute(this: IExecuteFunctions): Promise<INodeExecutionData[][]> {
diff --git a/packages/nodes-base/nodes/Elastic/ElasticSecurity/GenericFunctions.ts b/packages/nodes-base/nodes/Elastic/ElasticSecurity/GenericFunctions.ts
index 696170cff1af3..7a055eb1e16f4 100644
--- a/packages/nodes-base/nodes/Elastic/ElasticSecurity/GenericFunctions.ts
+++ b/packages/nodes-base/nodes/Elastic/ElasticSecurity/GenericFunctions.ts
@@ -21,21 +21,13 @@ export async function elasticSecurityApiRequest(
 	body: IDataObject = {},
 	qs: IDataObject = {},
 ) {
-	const {
-		username,
-		password,
-		baseUrl: rawBaseUrl,
-	} = (await this.getCredentials('elasticSecurityApi')) as ElasticSecurityApiCredentials;
+	const { baseUrl: rawBaseUrl } = (await this.getCredentials(
+		'elasticSecurityApi',
+	)) as ElasticSecurityApiCredentials;
 
 	const baseUrl = tolerateTrailingSlash(rawBaseUrl);
 
-	const token = Buffer.from(`${username}:${password}`).toString('base64');
-
 	const options: IRequestOptions = {
-		headers: {
-			Authorization: `Basic ${token}`,
-			'kbn-xsrf': true,
-		},
 		method,
 		body,
 		qs,
@@ -52,7 +44,7 @@ export async function elasticSecurityApiRequest(
 	}
 
 	try {
-		return await this.helpers.request(options);
+		return await this.helpers.requestWithAuthentication.call(this, 'elasticSecurityApi', options);
 	} catch (error) {
 		if (error?.error?.error === 'Not Acceptable' && error?.error?.message) {
 			error.error.error = `${error.error.error}: ${error.error.message}`;
diff --git a/packages/nodes-base/nodes/Elastic/ElasticSecurity/types.ts b/packages/nodes-base/nodes/Elastic/ElasticSecurity/types.ts
index 268762ec621c7..dd426714e7f33 100644
--- a/packages/nodes-base/nodes/Elastic/ElasticSecurity/types.ts
+++ b/packages/nodes-base/nodes/Elastic/ElasticSecurity/types.ts
@@ -1,6 +1,7 @@
 export type ElasticSecurityApiCredentials = {
-	username: string;
-	password: string;
+	username?: string;
+	password?: string;
+	apiKey?: string;
 	baseUrl: string;
 };
 
diff --git a/packages/nodes-base/package.json b/packages/nodes-base/package.json
index db05bf38c14ef..4239424b67a08 100644
--- a/packages/nodes-base/package.json
+++ b/packages/nodes-base/package.json
@@ -75,8 +75,10 @@
       "dist/credentials/CrowdStrikeOAuth2Api.credentials.js",
       "dist/credentials/CrowdDevApi.credentials.js",
       "dist/credentials/CustomerIoApi.credentials.js",
+      "dist/credentials/DatadogApi.credentials.js",
       "dist/credentials/DeepLApi.credentials.js",
       "dist/credentials/DemioApi.credentials.js",
+      "dist/credentials/DfirIrisApi.credentials.js",
       "dist/credentials/DhlApi.credentials.js",
       "dist/credentials/DiscordBotApi.credentials.js",
       "dist/credentials/DiscordOAuth2Api.credentials.js",
@@ -88,6 +90,7 @@
       "dist/credentials/DropboxApi.credentials.js",
       "dist/credentials/DropboxOAuth2Api.credentials.js",
       "dist/credentials/DropcontactApi.credentials.js",
+      "dist/credentials/DynatraceApi.credentials.js",
       "dist/credentials/EgoiApi.credentials.js",
       "dist/credentials/ElasticsearchApi.credentials.js",
       "dist/credentials/ElasticSecurityApi.credentials.js",
@@ -101,6 +104,7 @@
       "dist/credentials/FacebookLeadAdsOAuth2Api.credentials.js",
       "dist/credentials/FigmaApi.credentials.js",
       "dist/credentials/FileMaker.credentials.js",
+      "dist/credentials/FilescanApi.credentials.js",
       "dist/credentials/FlowApi.credentials.js",
       "dist/credentials/FormIoApi.credentials.js",
       "dist/credentials/FormstackApi.credentials.js",
@@ -198,6 +202,7 @@
       "dist/credentials/MailgunApi.credentials.js",
       "dist/credentials/MailjetEmailApi.credentials.js",
       "dist/credentials/MailjetSmsApi.credentials.js",
+      "dist/credentials/MalcoreApi.credentials.js",
       "dist/credentials/MandrillApi.credentials.js",
       "dist/credentials/MarketstackApi.credentials.js",
       "dist/credentials/MatrixApi.credentials.js",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a59c4cf562ed5..a826d9b452918 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -51,6 +51,9 @@ catalogs:
     xml2js:
       specifier: 0.6.2
       version: 0.6.2
+    zod:
+      specifier: 3.23.8
+      version: 3.23.8
   frontend:
     '@vitest/coverage-v8':
       specifier: ^1.6.0
@@ -510,7 +513,7 @@ importers:
         specifier: 3.0.3
         version: 3.0.3
       zod:
-        specifier: 3.23.8
+        specifier: 'catalog:'
         version: 3.23.8
       zod-to-json-schema:
         specifier: 3.23.0
@@ -915,8 +918,8 @@ importers:
         specifier: 0.3.0
         version: 0.3.0
       zod:
-        specifier: 3.22.4
-        version: 3.22.4
+        specifier: 'catalog:'
+        version: 3.23.8
     devDependencies:
       '@redocly/cli':
         specifier: ^1.6.0
@@ -13374,9 +13377,6 @@ packages:
     peerDependencies:
       zod: ^3.23.3
 
-  zod@3.22.4:
-    resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
-
   zod@3.23.8:
     resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
 
@@ -27956,8 +27956,6 @@ snapshots:
     dependencies:
       zod: 3.23.8
 
-  zod@3.22.4: {}
-
   zod@3.23.8: {}
 
   zx@8.1.4:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 6d78dbe6bfaa3..e23937456cf30 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -20,6 +20,7 @@ catalog:
   typedi: 0.10.0
   uuid: 8.3.2
   xml2js: 0.6.2
+  zod: 3.23.8
 
 catalogs:
   frontend: