diff --git a/.github/workflows/budibase_ci.yml b/.github/workflows/budibase_ci.yml
index a15e3d9110..6c875f2dfe 100644
--- a/.github/workflows/budibase_ci.yml
+++ b/.github/workflows/budibase_ci.yml
@@ -37,14 +37,17 @@ jobs:
       - uses: actions/checkout@v3
         with:
           submodules: true
-          token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+          token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
       - name: Use Node.js 14.x
         uses: actions/setup-node@v3
         with:
           node-version: 14.x
           cache: "yarn"
       - run: yarn
-      - run: yarn nx run-many -t=build --configuration=production
+      # Run build all the projects
+      - run: yarn build
+      # Check the types of the projects built via esbuild
+      - run: yarn check:types
 
   test-libraries:
     runs-on: ubuntu-latest
@@ -52,7 +55,7 @@ jobs:
       - uses: actions/checkout@v3
         with:
           submodules: true
-          token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+          token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
       - name: Use Node.js 14.x
         uses: actions/setup-node@v3
         with:
@@ -72,7 +75,7 @@ jobs:
       - uses: actions/checkout@v3
         with:
           submodules: true
-          token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+          token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
       - name: Use Node.js 14.x
         uses: actions/setup-node@v3
         with:
@@ -82,7 +85,7 @@ jobs:
       - run: yarn test --scope=@budibase/worker --scope=@budibase/server
       - uses: codecov/codecov-action@v3
         with:
-          token: ${{ secrets.CODECOV_TOKEN }} # not required for public repos
+          token: ${{ secrets.CODECOV_TOKEN || github.token }} # not required for public repos
           name: codecov-umbrella
           verbose: true
 
@@ -92,7 +95,7 @@ jobs:
       - uses: actions/checkout@v3
         with:
           submodules: true
-          token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+          token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
       - name: Use Node.js 14.x
         uses: actions/setup-node@v3
         with:
@@ -107,7 +110,7 @@ jobs:
       - uses: actions/checkout@v3
         with:
           submodules: true
-          token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+          token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
       - name: Use Node.js 14.x
         uses: actions/setup-node@v3
         with:
@@ -131,7 +134,7 @@ jobs:
         uses: actions/checkout@v3
         with:
           submodules: true
-          token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
+          token: ${{ secrets.PERSONAL_ACCESS_TOKEN || github.token }}
           fetch-depth: 0
       - name: Check submodule
         run: |
diff --git a/.github/workflows/release-develop.yml b/.github/workflows/release-develop.yml
index c724b717e2..48c51e8457 100644
--- a/.github/workflows/release-develop.yml
+++ b/.github/workflows/release-develop.yml
@@ -1,5 +1,7 @@
 name: Budibase Prerelease
-concurrency: release-prerelease
+concurrency:
+  group: release-prerelease
+  cancel-in-progress: false
 
 on:
   push:
diff --git a/.github/workflows/release-master.yml b/.github/workflows/release-master.yml
index 4959194064..f05d369a34 100644
--- a/.github/workflows/release-master.yml
+++ b/.github/workflows/release-master.yml
@@ -1,5 +1,7 @@
 name: Budibase Release
-concurrency: release
+concurrency:
+  group: release
+  cancel-in-progress: false
 
 on:
   push:
diff --git a/.github/workflows/tag-prerelease.yml b/.github/workflows/tag-prerelease.yml
index e04ef3b17d..83660e409d 100644
--- a/.github/workflows/tag-prerelease.yml
+++ b/.github/workflows/tag-prerelease.yml
@@ -1,5 +1,7 @@
 name: Tag prerelease
-concurrency: release-prerelease
+concurrency:
+  group: tag-prerelease
+  cancel-in-progress: false
 
 on:
   push:
diff --git a/.github/workflows/tag-release.yml b/.github/workflows/tag-release.yml
index 55549a7e9d..1dcb16ac56 100644
--- a/.github/workflows/tag-release.yml
+++ b/.github/workflows/tag-release.yml
@@ -1,5 +1,7 @@
 name: Tag release
-concurrency: release-prerelease
+concurrency:
+  group: tag-release
+  cancel-in-progress: false
 
 on:
   push:
diff --git a/lerna.json b/lerna.json
index ebaf23cfb6..5d82675584 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.6.19-alpha.11",
+  "version": "2.6.19-alpha.52",
   "npmClient": "yarn",
   "packages": [
     "packages/backend-core",
diff --git a/package.json b/package.json
index edbb82b892..3849c65274 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,6 @@
   "devDependencies": {
     "@esbuild-plugins/node-resolve": "^0.2.2",
     "@esbuild-plugins/tsconfig-paths": "^0.1.2",
-    "@nx/esbuild": "16.2.1",
     "@nx/js": "16.2.1",
     "@rollup/plugin-json": "^4.0.2",
     "@typescript-eslint/parser": "5.45.0",
@@ -34,6 +33,7 @@
     "bootstrap": "./scripts/link-dependencies.sh && echo '***BOOTSTRAP ONLY REQUIRED FOR USE WITH ACCOUNT PORTAL***'",
     "build": "yarn nx run-many -t=build",
     "build:dev": "lerna run --stream prebuild && yarn nx run-many --target=build --output-style=dynamic --watch --preserveWatchOutput",
+    "check:types": "lerna run check:types --skip-nx-cache",
     "backend:bootstrap": "./scripts/scopeBackend.sh && yarn run bootstrap",
     "backend:build": "./scripts/scopeBackend.sh 'lerna run --stream build'",
     "build:sdk": "lerna run --stream build:sdk",
@@ -52,7 +52,7 @@
     "dev:noserver": "yarn run kill-builder  && lerna run --stream dev:stack:up && lerna run --stream --parallel dev:builder --ignore @budibase/backend-core --ignore @budibase/server --ignore @budibase/worker",
     "dev:server": "yarn run kill-server && lerna run --stream --parallel dev:builder --scope @budibase/worker --scope @budibase/server",
     "dev:built": "yarn run kill-all && cd packages/server && yarn dev:stack:up && cd ../../ && lerna run --stream --parallel dev:built",
-    "dev:docker": "yarn build && docker-compose -f hosting/docker-compose.dev.yaml -f hosting/docker-compose.build.yaml up --build --scale proxy-service=0 ",
+    "dev:docker": "yarn build && docker-compose -f hosting/docker-compose.build.yaml -f hosting/docker-compose.dev.yaml --env-file hosting/.env up --build --scale proxy-service=0",
     "test": "lerna run --stream test --stream",
     "lint:eslint": "eslint packages && eslint qa-core",
     "lint:prettier": "prettier --check \"packages/**/*.{js,ts,svelte}\" && prettier --write \"examples/**/*.{js,ts,svelte}\" && prettier --check \"qa-core/**/*.{js,ts,svelte}\"",
@@ -110,5 +110,11 @@
       "packages/pro/packages/pro"
     ]
   },
+  "resolutions": {
+    "@budibase/backend-core": "0.0.0",
+    "@budibase/shared-core": "0.0.0",
+    "@budibase/string-templates": "0.0.0",
+    "@budibase/types": "0.0.0"
+  },
   "dependencies": {}
 }
diff --git a/packages/backend-core/package.json b/packages/backend-core/package.json
index 9337e689e4..f85687b007 100644
--- a/packages/backend-core/package.json
+++ b/packages/backend-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/backend-core",
-  "version": "0.0.1",
+  "version": "0.0.0",
   "description": "Budibase backend core libraries used in server and worker",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
@@ -22,7 +22,7 @@
   "dependencies": {
     "@budibase/nano": "10.1.2",
     "@budibase/pouchdb-replication-stream": "1.2.10",
-    "@budibase/types": "0.0.1",
+    "@budibase/types": "0.0.0",
     "@shopify/jest-koa-mocks": "5.0.1",
     "@techpass/passport-openidconnect": "0.3.2",
     "aws-cloudfront-sign": "2.2.0",
@@ -33,7 +33,7 @@
     "correlation-id": "4.0.0",
     "dotenv": "16.0.1",
     "emitter-listener": "1.1.2",
-    "ioredis": "4.28.0",
+    "ioredis": "5.3.2",
     "joi": "17.6.0",
     "jsonwebtoken": "9.0.0",
     "koa-passport": "4.1.4",
@@ -62,7 +62,6 @@
     "@swc/jest": "^0.2.24",
     "@trendyol/jest-testcontainers": "^2.1.1",
     "@types/chance": "1.1.3",
-    "@types/ioredis": "4.28.0",
     "@types/jest": "29.5.0",
     "@types/koa": "2.13.4",
     "@types/lodash": "4.14.180",
@@ -74,7 +73,7 @@
     "@types/tar-fs": "2.0.1",
     "@types/uuid": "8.3.4",
     "chance": "1.1.8",
-    "ioredis-mock": "5.8.0",
+    "ioredis-mock": "8.7.0",
     "jest": "29.5.0",
     "jest-environment-node": "29.5.0",
     "jest-serial-runner": "^1.2.1",
diff --git a/packages/backend-core/src/cache/tests/writethrough.spec.ts b/packages/backend-core/src/cache/tests/writethrough.spec.ts
index e4c7cc6e64..92b073ed64 100644
--- a/packages/backend-core/src/cache/tests/writethrough.spec.ts
+++ b/packages/backend-core/src/cache/tests/writethrough.spec.ts
@@ -72,16 +72,12 @@ describe("writethrough", () => {
           writethrough.put({ ...current, value: 4 }),
         ])
 
+        // with a lock, this will work
         const newRev = responses.map(x => x.rev).find(x => x !== current._rev)
         expect(newRev).toBeDefined()
         expect(responses.map(x => x.rev)).toEqual(
           expect.arrayContaining([current._rev, current._rev, newRev])
         )
-        expectFunctionWasCalledTimesWith(
-          mocks.alerts.logWarn,
-          2,
-          "Ignoring redlock conflict in write-through cache"
-        )
 
         const output = await db.get(current._id)
         expect(output.value).toBe(4)
diff --git a/packages/backend-core/src/constants/misc.ts b/packages/backend-core/src/constants/misc.ts
index 2bb8f815cf..ba2533cf4a 100644
--- a/packages/backend-core/src/constants/misc.ts
+++ b/packages/backend-core/src/constants/misc.ts
@@ -16,6 +16,7 @@ export enum Header {
   LICENSE_KEY = "x-budibase-license-key",
   API_VER = "x-budibase-api-version",
   APP_ID = "x-budibase-app-id",
+  SESSION_ID = "x-budibase-session-id",
   TYPE = "x-budibase-type",
   PREVIEW_ROLE = "x-budibase-role",
   TENANT_ID = "x-budibase-tenant-id",
diff --git a/packages/backend-core/src/environment.ts b/packages/backend-core/src/environment.ts
index 9163dfeba6..eab8cd4c45 100644
--- a/packages/backend-core/src/environment.ts
+++ b/packages/backend-core/src/environment.ts
@@ -97,7 +97,6 @@ const environment = {
   REDIS_URL: process.env.REDIS_URL || "localhost:6379",
   REDIS_PASSWORD: process.env.REDIS_PASSWORD,
   REDIS_CLUSTERED: process.env.REDIS_CLUSTERED,
-  MOCK_REDIS: process.env.MOCK_REDIS,
   MINIO_ACCESS_KEY: process.env.MINIO_ACCESS_KEY,
   MINIO_SECRET_KEY: process.env.MINIO_SECRET_KEY,
   AWS_REGION: process.env.AWS_REGION,
@@ -129,6 +128,7 @@ const environment = {
   PLUGIN_BUCKET_NAME:
     process.env.PLUGIN_BUCKET_NAME || DefaultBucketName.PLUGINS,
   USE_COUCH: process.env.USE_COUCH || true,
+  MOCK_REDIS: process.env.MOCK_REDIS,
   DEFAULT_LICENSE: process.env.DEFAULT_LICENSE,
   SERVICE: process.env.SERVICE || "budibase",
   LOG_LEVEL: process.env.LOG_LEVEL || "info",
diff --git a/packages/backend-core/src/index.ts b/packages/backend-core/src/index.ts
index 40233b3827..7b98674788 100644
--- a/packages/backend-core/src/index.ts
+++ b/packages/backend-core/src/index.ts
@@ -21,6 +21,7 @@ export * as context from "./context"
 export * as cache from "./cache"
 export * as objectStore from "./objectStore"
 export * as redis from "./redis"
+export { Client as RedisClient } from "./redis"
 export * as locks from "./redis/redlockImpl"
 export * as utils from "./utils"
 export * as errors from "./errors"
diff --git a/packages/backend-core/src/logging/pino/logger.ts b/packages/backend-core/src/logging/pino/logger.ts
index cebc78ffc7..c96bc83e04 100644
--- a/packages/backend-core/src/logging/pino/logger.ts
+++ b/packages/backend-core/src/logging/pino/logger.ts
@@ -96,6 +96,7 @@ if (!env.DISABLE_PINO_LOGGER) {
 
     const mergingObject: any = {
       err: error,
+      pid: process.pid,
       ...contextObject,
     }
 
diff --git a/packages/backend-core/src/redis/init.ts b/packages/backend-core/src/redis/init.ts
index 485268edad..55ffe3dd12 100644
--- a/packages/backend-core/src/redis/init.ts
+++ b/packages/backend-core/src/redis/init.ts
@@ -6,7 +6,8 @@ let userClient: Client,
   appClient: Client,
   cacheClient: Client,
   writethroughClient: Client,
-  lockClient: Client
+  lockClient: Client,
+  socketClient: Client
 
 async function init() {
   userClient = await new Client(utils.Databases.USER_CACHE).init()
@@ -14,9 +15,10 @@ async function init() {
   appClient = await new Client(utils.Databases.APP_METADATA).init()
   cacheClient = await new Client(utils.Databases.GENERIC_CACHE).init()
   lockClient = await new Client(utils.Databases.LOCKS).init()
-  writethroughClient = await new Client(
-    utils.Databases.WRITE_THROUGH,
-    utils.SelectableDatabase.WRITE_THROUGH
+  writethroughClient = await new Client(utils.Databases.WRITE_THROUGH).init()
+  socketClient = await new Client(
+    utils.Databases.SOCKET_IO,
+    utils.SelectableDatabase.SOCKET_IO
   ).init()
 }
 
@@ -27,6 +29,7 @@ export async function shutdown() {
   if (cacheClient) await cacheClient.finish()
   if (writethroughClient) await writethroughClient.finish()
   if (lockClient) await lockClient.finish()
+  if (socketClient) await socketClient.finish()
 }
 
 process.on("exit", async () => {
@@ -74,3 +77,10 @@ export async function getLockClient() {
   }
   return lockClient
 }
+
+export async function getSocketClient() {
+  if (!socketClient) {
+    await init()
+  }
+  return socketClient
+}
diff --git a/packages/backend-core/src/redis/redis.ts b/packages/backend-core/src/redis/redis.ts
index 2d54b51a9f..5056a5d549 100644
--- a/packages/backend-core/src/redis/redis.ts
+++ b/packages/backend-core/src/redis/redis.ts
@@ -1,6 +1,15 @@
 import env from "../environment"
-// ioredis mock is all in memory
-const Redis = env.MOCK_REDIS ? require("ioredis-mock") : require("ioredis")
+import Redis from "ioredis"
+// mock-redis doesn't have any typing
+let MockRedis: any | undefined
+if (env.MOCK_REDIS) {
+  try {
+    // ioredis mock is all in memory
+    MockRedis = require("ioredis-mock")
+  } catch (err) {
+    console.log("Mock redis unavailable")
+  }
+}
 import {
   addDbPrefix,
   removeDbPrefix,
@@ -18,7 +27,7 @@ const DEFAULT_SELECT_DB = SelectableDatabase.DEFAULT
 // for testing just generate the client once
 let CLOSED = false
 let CLIENTS: { [key: number]: any } = {}
-
+0
 let CONNECTED = false
 
 // mock redis always connected
@@ -55,6 +64,7 @@ function connectionError(
  * will return the ioredis client which will be ready to use.
  */
 function init(selectDb = DEFAULT_SELECT_DB) {
+  const RedisCore = env.MOCK_REDIS && MockRedis ? MockRedis : Redis
   let timeout: NodeJS.Timeout
   CLOSED = false
   let client = pickClient(selectDb)
@@ -64,7 +74,7 @@ function init(selectDb = DEFAULT_SELECT_DB) {
   }
   // testing uses a single in memory client
   if (env.MOCK_REDIS) {
-    CLIENTS[selectDb] = new Redis(getRedisOptions())
+    CLIENTS[selectDb] = new RedisCore(getRedisOptions())
   }
   // start the timer - only allowed 5 seconds to connect
   timeout = setTimeout(() => {
@@ -84,11 +94,11 @@ function init(selectDb = DEFAULT_SELECT_DB) {
   const { redisProtocolUrl, opts, host, port } = getRedisOptions()
 
   if (CLUSTERED) {
-    client = new Redis.Cluster([{ host, port }], opts)
+    client = new RedisCore.Cluster([{ host, port }], opts)
   } else if (redisProtocolUrl) {
-    client = new Redis(redisProtocolUrl)
+    client = new RedisCore(redisProtocolUrl)
   } else {
-    client = new Redis(opts)
+    client = new RedisCore(opts)
   }
   // attach handlers
   client.on("end", (err: Error) => {
@@ -183,6 +193,9 @@ class RedisWrapper {
     CLOSED = false
     init(this._select)
     await waitForConnection(this._select)
+    if (this._select && !env.isTest()) {
+      this.getClient().select(this._select)
+    }
     return this
   }
 
@@ -209,6 +222,11 @@ class RedisWrapper {
     return this.getClient().keys(addDbPrefix(db, pattern))
   }
 
+  async exists(key: string) {
+    const db = this._db
+    return await this.getClient().exists(addDbPrefix(db, key))
+  }
+
   async get(key: string) {
     const db = this._db
     let response = await this.getClient().get(addDbPrefix(db, key))
diff --git a/packages/backend-core/src/redis/redlockImpl.ts b/packages/backend-core/src/redis/redlockImpl.ts
index 55b891ea84..7fe61a409e 100644
--- a/packages/backend-core/src/redis/redlockImpl.ts
+++ b/packages/backend-core/src/redis/redlockImpl.ts
@@ -4,10 +4,10 @@ import { LockOptions, LockType } from "@budibase/types"
 import * as context from "../context"
 import env from "../environment"
 
-const getClient = async (
+async function getClient(
   type: LockType,
   opts?: Redlock.Options
-): Promise<Redlock> => {
+): Promise<Redlock> {
   if (type === LockType.CUSTOM) {
     return newRedlock(opts)
   }
@@ -18,6 +18,9 @@ const getClient = async (
     case LockType.TRY_ONCE: {
       return newRedlock(OPTIONS.TRY_ONCE)
     }
+    case LockType.TRY_TWICE: {
+      return newRedlock(OPTIONS.TRY_TWICE)
+    }
     case LockType.DEFAULT: {
       return newRedlock(OPTIONS.DEFAULT)
     }
@@ -35,6 +38,9 @@ const OPTIONS = {
     // immediately throws an error if the lock is already held
     retryCount: 0,
   },
+  TRY_TWICE: {
+    retryCount: 1,
+  },
   TEST: {
     // higher retry count in unit tests
     // due to high contention.
@@ -62,7 +68,7 @@ const OPTIONS = {
   },
 }
 
-const newRedlock = async (opts: Redlock.Options = {}) => {
+export async function newRedlock(opts: Redlock.Options = {}) {
   let options = { ...OPTIONS.DEFAULT, ...opts }
   const redisWrapper = await getLockClient()
   const client = redisWrapper.getClient()
@@ -81,22 +87,26 @@ type RedlockExecution<T> =
   | SuccessfulRedlockExecution<T>
   | UnsuccessfulRedlockExecution
 
-export const doWithLock = async <T>(
+function getLockName(opts: LockOptions) {
+  // determine lock name
+  // by default use the tenantId for uniqueness, unless using a system lock
+  const prefix = opts.systemLock ? "system" : context.getTenantId()
+  let name: string = `lock:${prefix}_${opts.name}`
+  // add additional unique name if required
+  if (opts.resource) {
+    name = name + `_${opts.resource}`
+  }
+  return name
+}
+
+export async function doWithLock<T>(
   opts: LockOptions,
   task: () => Promise<T>
-): Promise<RedlockExecution<T>> => {
+): Promise<RedlockExecution<T>> {
   const redlock = await getClient(opts.type, opts.customOptions)
   let lock
   try {
-    // determine lock name
-    // by default use the tenantId for uniqueness, unless using a system lock
-    const prefix = opts.systemLock ? "system" : context.getTenantId()
-    let name: string = `lock:${prefix}_${opts.name}`
-
-    // add additional unique name if required
-    if (opts.resource) {
-      name = name + `_${opts.resource}`
-    }
+    const name = getLockName(opts)
 
     // create the lock
     lock = await redlock.lock(name, opts.ttl)
@@ -112,7 +122,6 @@ export const doWithLock = async <T>(
       if (opts.type === LockType.TRY_ONCE) {
         // don't throw for try-once locks, they will always error
         // due to retry count (0) exceeded
-        console.warn(e)
         return { executed: false }
       } else {
         console.error(e)
diff --git a/packages/backend-core/src/redis/utils.ts b/packages/backend-core/src/redis/utils.ts
index 2c49ee4941..34b7275a2b 100644
--- a/packages/backend-core/src/redis/utils.ts
+++ b/packages/backend-core/src/redis/utils.ts
@@ -27,6 +27,7 @@ export enum Databases {
   GENERIC_CACHE = "data_cache",
   WRITE_THROUGH = "writeThrough",
   LOCKS = "locks",
+  SOCKET_IO = "socket_io",
 }
 
 /**
@@ -40,7 +41,7 @@ export enum Databases {
  */
 export enum SelectableDatabase {
   DEFAULT = 0,
-  WRITE_THROUGH = 1,
+  SOCKET_IO = 1,
   UNUSED_1 = 2,
   UNUSED_2 = 3,
   UNUSED_3 = 4,
@@ -94,7 +95,7 @@ export function getRedisOptions() {
     opts.port = port
     opts.password = password
   }
-  return { opts, host, port, redisProtocolUrl }
+  return { opts, host, port: parseInt(port), redisProtocolUrl }
 }
 
 export function addDbPrefix(db: string, key: string) {
diff --git a/packages/backend-core/tests/core/utilities/mocks/licenses.ts b/packages/backend-core/tests/core/utilities/mocks/licenses.ts
index 839b22e5f9..4272e78eb8 100644
--- a/packages/backend-core/tests/core/utilities/mocks/licenses.ts
+++ b/packages/backend-core/tests/core/utilities/mocks/licenses.ts
@@ -90,6 +90,10 @@ export const useScimIntegration = () => {
   return useFeature(Feature.SCIM)
 }
 
+export const useSyncAutomations = () => {
+  return useFeature(Feature.SYNC_AUTOMATIONS)
+}
+
 // QUOTAS
 
 export const setAutomationLogsQuota = (value: number) => {
diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index de3c45b09d..b03c83d71b 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "0.0.1",
+  "version": "0.0.0",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,8 +38,8 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@budibase/shared-core": "0.0.1",
-    "@budibase/string-templates": "0.0.1",
+    "@budibase/shared-core": "0.0.0",
+    "@budibase/string-templates": "0.0.0",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js
index 2cb681670b..01555446d9 100644
--- a/packages/bbui/src/Actions/position_dropdown.js
+++ b/packages/bbui/src/Actions/position_dropdown.js
@@ -56,6 +56,8 @@ export default function positionDropdown(element, opts) {
       styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width
     } else if (align === "right-outside") {
       styles.left = anchorBounds.right + offset
+    } else if (align === "left-outside") {
+      styles.left = anchorBounds.left - elementBounds.width - offset
     } else {
       styles.left = anchorBounds.left
     }
diff --git a/packages/bbui/src/Avatar/Avatar.svelte b/packages/bbui/src/Avatar/Avatar.svelte
index 1e4cefd8ce..0faf50f55a 100644
--- a/packages/bbui/src/Avatar/Avatar.svelte
+++ b/packages/bbui/src/Avatar/Avatar.svelte
@@ -13,10 +13,12 @@
   export let url = ""
   export let disabled = false
   export let initials = "JD"
+  export let color = null
 
   const DefaultColor = "#3aab87"
 
-  $: color = getColor(initials)
+  $: avatarColor = color || getColor(initials)
+  $: style = getStyle(size, avatarColor)
 
   const getColor = initials => {
     if (!initials?.length) {
@@ -26,6 +28,12 @@
     const hue = ((code % 26) / 26) * 360
     return `hsl(${hue}, 50%, 50%)`
   }
+
+  const getStyle = (sizeKey, color) => {
+    const size = `var(${sizes.get(sizeKey)})`
+    const fontSize = `calc(${size} / 2)`
+    return `width:${size}; height:${size}; font-size:${fontSize}; background:${color};`
+  }
 </script>
 
 {#if url}
@@ -37,13 +45,7 @@
     style="width: var({sizes.get(size)}); height: var({sizes.get(size)});"
   />
 {:else}
-  <div
-    class="spectrum-Avatar"
-    class:is-disabled={disabled}
-    style="width: var({sizes.get(size)}); height: var({sizes.get(
-      size
-    )}); font-size: calc(var({sizes.get(size)}) / 2); background: {color};"
-  >
+  <div class="spectrum-Avatar" class:is-disabled={disabled} {style}>
     {initials || ""}
   </div>
 {/if}
diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index 932236bc0c..782c3c6ed2 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -3,11 +3,13 @@
   import Button from "../Button/Button.svelte"
   import Body from "../Typography/Body.svelte"
   import Heading from "../Typography/Heading.svelte"
+  import { setContext } from "svelte"
 
   export let title
   export let fillWidth
   export let left = "314px"
   export let width = "calc(100% - 626px)"
+  export let headless = false
 
   let visible = false
 
@@ -25,6 +27,11 @@
     visible = false
   }
 
+  setContext("drawer-actions", {
+    hide,
+    show,
+  })
+
   const easeInOutQuad = x => {
     return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2
   }
@@ -47,27 +54,34 @@
     <section
       class:fillWidth
       class="drawer"
+      class:headless
       transition:slide|local
       style={`width: ${width}; left: ${left};`}
     >
-      <header>
-        <div class="text">
-          <Heading size="XS">{title}</Heading>
-          <Body size="S">
-            <slot name="description" />
-          </Body>
-        </div>
-        <div class="buttons">
-          <Button secondary quiet on:click={hide}>Cancel</Button>
-          <slot name="buttons" />
-        </div>
-      </header>
+      {#if !headless}
+        <header>
+          <div class="text">
+            <Heading size="XS">{title}</Heading>
+            <Body size="S">
+              <slot name="description" />
+            </Body>
+          </div>
+          <div class="buttons">
+            <Button secondary quiet on:click={hide}>Cancel</Button>
+            <slot name="buttons" />
+          </div>
+        </header>
+      {/if}
       <slot name="body" />
     </section>
   </Portal>
 {/if}
 
 <style>
+  .drawer.headless :global(.drawer-contents) {
+    height: calc(40vh + 75px);
+  }
+
   .buttons {
     display: flex;
     gap: var(--spacing-m);
diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte
index 64d851b1e4..e9ee75bd8b 100644
--- a/packages/bbui/src/Form/Core/Dropzone.svelte
+++ b/packages/bbui/src/Form/Core/Dropzone.svelte
@@ -165,7 +165,7 @@
           {/if}
           {#if !disabled}
             <div class="delete-button" on:click={removeFile}>
-              <Icon name="Close" />
+              <Icon name="Delete" />
             </div>
           {/if}
         </div>
@@ -209,7 +209,7 @@
             {/if}
             {#if !disabled}
               <div class="delete-button" on:click={removeFile}>
-                <Icon name="Close" />
+                <Icon name="Delete" />
               </div>
             {/if}
           </div>
diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte
index 7184aedbaf..9c3d25a807 100644
--- a/packages/bbui/src/Tabs/Tabs.svelte
+++ b/packages/bbui/src/Tabs/Tabs.svelte
@@ -12,6 +12,7 @@
   export let emphasized = false
   export let onTop = false
   export let size = "M"
+  export let beforeSwitch = null
 
   let thisSelected = undefined
 
@@ -28,9 +29,18 @@
       thisSelected = selected
       dispatch("select", thisSelected)
     } else if ($tab.title !== thisSelected) {
-      thisSelected = $tab.title
-      selected = $tab.title
-      dispatch("select", thisSelected)
+      if (typeof beforeSwitch == "function") {
+        const proceed = beforeSwitch($tab.title)
+        if (proceed) {
+          thisSelected = $tab.title
+          selected = $tab.title
+          dispatch("select", thisSelected)
+        }
+      } else {
+        thisSelected = $tab.title
+        selected = $tab.title
+        dispatch("select", thisSelected)
+      }
     }
     if ($tab.title !== thisSelected) {
       tab.update(state => {
diff --git a/packages/bbui/src/Tooltip/Tooltip.svelte b/packages/bbui/src/Tooltip/Tooltip.svelte
index ea511b0060..4a1708769e 100644
--- a/packages/bbui/src/Tooltip/Tooltip.svelte
+++ b/packages/bbui/src/Tooltip/Tooltip.svelte
@@ -31,4 +31,12 @@
   .spectrum-Tooltip-tip {
     border-top-color: var(--spectrum-global-color-gray-500);
   }
+  .spectrum-Tooltip {
+    max-width: 280px;
+  }
+  .spectrum-Tooltip-label {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 </style>
diff --git a/packages/builder/package.json b/packages/builder/package.json
index 01820d8b91..73bc003343 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/builder",
-  "version": "0.0.1",
+  "version": "0.0.0",
   "license": "GPL-3.0",
   "private": true,
   "scripts": {
@@ -58,11 +58,18 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "0.0.1",
-    "@budibase/frontend-core": "0.0.1",
-    "@budibase/shared-core": "0.0.1",
-    "@budibase/string-templates": "0.0.1",
-    "@budibase/types": "0.0.1",
+    "@budibase/bbui": "0.0.0",
+    "@budibase/frontend-core": "0.0.0",
+    "@budibase/shared-core": "0.0.0",
+    "@budibase/string-templates": "0.0.0",
+    "@budibase/types": "0.0.0",
+    "@codemirror/autocomplete": "^6.7.1",
+    "@codemirror/commands": "^6.2.4",
+    "@codemirror/lang-javascript": "^6.1.8",
+    "@codemirror/language": "^6.6.0",
+    "@codemirror/state": "^6.2.0",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/view": "^6.11.2",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/free-brands-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 0d41931a55..e9c8643bce 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -77,7 +77,7 @@ export const getAuthBindings = () => {
       runtime: `${safeUser}.${safeOAuth2}.${safeAccessToken}`,
       readable: `Current User.OAuthToken`,
       key: "accessToken",
-      display: { name: "OAuthToken" },
+      display: { name: "OAuthToken", type: "text" },
     },
   ]
 
@@ -434,6 +434,9 @@ export const getUserBindings = () => {
       providerId: "user",
       category: "Current User",
       icon: "User",
+      display: {
+        name: key,
+      },
     })
     return acc
   }, [])
@@ -550,7 +553,7 @@ const getUrlBindings = asset => {
     readableBinding: `URL.${param}`,
     category: "URL",
     icon: "RailTop",
-    display: { type: "string" },
+    display: { type: "string", name: param },
   }))
   const queryParamsBinding = {
     type: "context",
@@ -558,7 +561,7 @@ const getUrlBindings = asset => {
     readableBinding: "Query params",
     category: "URL",
     icon: "RailTop",
-    display: { type: "object" },
+    display: { type: "object", name: "Query params" },
   }
   return urlParamBindings.concat([queryParamsBinding])
 }
@@ -589,7 +592,6 @@ export const getEventContextBindings = (
   actionId
 ) => {
   let bindings = []
-
   // Check if any context bindings are provided by the component for this
   // setting
   const component = findComponent(asset.props, componentId)
@@ -605,6 +607,9 @@ export const getEventContextBindings = (
         )}`,
         category: component._instanceName,
         icon: def.icon,
+        display: {
+          name: contextEntry.label,
+        },
       })
     })
   }
@@ -628,6 +633,9 @@ export const getEventContextBindings = (
           runtimeBinding: `actions.${idx}.${contextValue.value}`,
           category: "Actions",
           icon: "JourneyAction",
+          display: {
+            name: contextValue.label,
+          },
         })
       })
     }
diff --git a/packages/builder/src/builderStore/index.js b/packages/builder/src/builderStore/index.js
index d15cdb6e98..9dca6a64e6 100644
--- a/packages/builder/src/builderStore/index.js
+++ b/packages/builder/src/builderStore/index.js
@@ -2,6 +2,7 @@ import { getFrontendStore } from "./store/frontend"
 import { getAutomationStore } from "./store/automation"
 import { getTemporalStore } from "./store/temporal"
 import { getThemeStore } from "./store/theme"
+import { getUserStore } from "./store/users"
 import { derived } from "svelte/store"
 import { findComponent, findComponentPath } from "./componentUtils"
 import { RoleUtils } from "@budibase/frontend-core"
@@ -12,6 +13,7 @@ export const store = getFrontendStore()
 export const automationStore = getAutomationStore()
 export const themeStore = getThemeStore()
 export const temporalStore = getTemporalStore()
+export const userStore = getUserStore()
 
 // Setup history for screens
 export const screenHistoryStore = createHistoryStore({
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index e264dc099b..7f83b2b464 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -37,8 +37,10 @@ import {
 } from "builderStore/dataBinding"
 import { makePropSafe as safe } from "@budibase/string-templates"
 import { getComponentFieldOptions } from "helpers/formFields"
+import { createBuilderWebsocket } from "builderStore/websocket"
 
 const INITIAL_FRONTEND_STATE = {
+  initialised: false,
   apps: [],
   name: "",
   url: "",
@@ -69,7 +71,9 @@ const INITIAL_FRONTEND_STATE = {
   customTheme: {},
   previewDevice: "desktop",
   highlightedSettingKey: null,
+  propertyFocus: null,
   builderSidePanel: false,
+  hasLock: true,
 
   // URL params
   selectedScreenId: null,
@@ -86,6 +90,7 @@ const INITIAL_FRONTEND_STATE = {
 
 export const getFrontendStore = () => {
   const store = writable({ ...INITIAL_FRONTEND_STATE })
+  let websocket
 
   // This is a fake implementation of a "patch" API endpoint to try and prevent
   // 409s. All screen doc mutations (aside from creation) use this function,
@@ -110,10 +115,11 @@ export const getFrontendStore = () => {
   store.actions = {
     reset: () => {
       store.set({ ...INITIAL_FRONTEND_STATE })
+      websocket?.disconnect()
     },
     initialise: async pkg => {
-      const { layouts, screens, application, clientLibPath } = pkg
-
+      const { layouts, screens, application, clientLibPath, hasLock } = pkg
+      websocket = createBuilderWebsocket(application.appId)
       await store.actions.components.refreshDefinitions(application.appId)
 
       // Reset store state
@@ -137,6 +143,8 @@ export const getFrontendStore = () => {
         upgradableVersion: application.upgradableVersion,
         navigation: application.navigation || {},
         usedPlugins: application.usedPlugins || [],
+        hasLock,
+        initialised: true,
       }))
       screenHistoryStore.reset()
       automationHistoryStore.reset()
@@ -1319,6 +1327,12 @@ export const getFrontendStore = () => {
           highlightedSettingKey: key,
         }))
       },
+      propertyFocus: key => {
+        store.update(state => ({
+          ...state,
+          propertyFocus: key,
+        }))
+      },
     },
     dnd: {
       start: component => {
diff --git a/packages/builder/src/builderStore/store/users.js b/packages/builder/src/builderStore/store/users.js
new file mode 100644
index 0000000000..6e10b081d6
--- /dev/null
+++ b/packages/builder/src/builderStore/store/users.js
@@ -0,0 +1,42 @@
+import { writable, get } from "svelte/store"
+
+export const getUserStore = () => {
+  const store = writable([])
+
+  const init = users => {
+    store.set(users)
+  }
+
+  const updateUser = user => {
+    const $users = get(store)
+    if (!$users.some(x => x.sessionId === user.sessionId)) {
+      store.set([...$users, user])
+    } else {
+      store.update(state => {
+        const index = state.findIndex(x => x.sessionId === user.sessionId)
+        state[index] = user
+        return state.slice()
+      })
+    }
+  }
+
+  const removeUser = sessionId => {
+    store.update(state => {
+      return state.filter(x => x.sessionId !== sessionId)
+    })
+  }
+
+  const reset = () => {
+    store.set([])
+  }
+
+  return {
+    ...store,
+    actions: {
+      init,
+      updateUser,
+      removeUser,
+      reset,
+    },
+  }
+}
diff --git a/packages/builder/src/builderStore/utils.js b/packages/builder/src/builderStore/utils.js
index 3ddf6fb667..86c63f20ee 100644
--- a/packages/builder/src/builderStore/utils.js
+++ b/packages/builder/src/builderStore/utils.js
@@ -1,3 +1,4 @@
+import { ActionStepID } from "constants/backend/automations"
 import { TableNames } from "../constants"
 import {
   AUTO_COLUMN_DISPLAY_NAMES,
@@ -53,3 +54,9 @@ export function buildAutoColumn(tableName, name, subtype) {
   }
   return base
 }
+
+export function checkForCollectStep(automation) {
+  return automation.definition.steps.some(
+    step => step.stepId === ActionStepID.COLLECT
+  )
+}
diff --git a/packages/builder/src/builderStore/websocket.js b/packages/builder/src/builderStore/websocket.js
new file mode 100644
index 0000000000..e27e08e31d
--- /dev/null
+++ b/packages/builder/src/builderStore/websocket.js
@@ -0,0 +1,37 @@
+import { createWebsocket } from "@budibase/frontend-core"
+import { userStore } from "builderStore"
+import { datasources, tables } from "stores/backend"
+import { SocketEvent, BuilderSocketEvent } from "@budibase/shared-core"
+
+export const createBuilderWebsocket = appId => {
+  const socket = createWebsocket("/socket/builder")
+
+  // Built-in events
+  socket.on("connect", () => {
+    socket.emit(BuilderSocketEvent.SelectApp, appId, response => {
+      userStore.actions.init(response.users)
+    })
+  })
+  socket.on("connect_error", err => {
+    console.log("Failed to connect to builder websocket:", err.message)
+  })
+  socket.on("disconnect", () => {
+    userStore.actions.reset()
+  })
+
+  // User events
+  socket.onOther(SocketEvent.UserUpdate, userStore.actions.updateUser)
+  socket.onOther(SocketEvent.UserDisconnect, userStore.actions.removeUser)
+
+  // Table events
+  socket.onOther(BuilderSocketEvent.TableChange, ({ id, table }) => {
+    tables.replaceTable(id, table)
+  })
+
+  // Datasource events
+  socket.onOther(BuilderSocketEvent.DatasourceChange, ({ id, datasource }) => {
+    datasources.replaceDatasource(id, datasource)
+  })
+
+  return socket
+}
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
index 7c9f31352f..c5e4eaf61f 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
@@ -6,24 +6,48 @@
     Body,
     Icon,
     notifications,
+    Tags,
+    Tag,
   } from "@budibase/bbui"
-  import { automationStore } from "builderStore"
-  import { admin } from "stores/portal"
+  import { automationStore, selectedAutomation } from "builderStore"
+  import { admin, licensing } from "stores/portal"
   import { externalActions } from "./ExternalActions"
+  import { TriggerStepID } from "constants/backend/automations"
+  import { checkForCollectStep } from "builderStore/utils"
 
   export let blockIdx
+  export let lastStep
 
-  const disabled = {
-    SEND_EMAIL_SMTP: {
-      disabled: !$admin.checklist.smtp.checked,
-      message: "Please configure SMTP",
-    },
-  }
-
+  let syncAutomationsEnabled = $licensing.syncAutomationsEnabled
+  let collectBlockAllowedSteps = [TriggerStepID.APP, TriggerStepID.WEBHOOK]
   let selectedAction
   let actionVal
   let actions = Object.entries($automationStore.blockDefinitions.ACTION)
 
+  $: collectBlockExists = checkForCollectStep($selectedAutomation)
+
+  const disabled = () => {
+    return {
+      SEND_EMAIL_SMTP: {
+        disabled: !$admin.checklist.smtp.checked,
+        message: "Please configure SMTP",
+      },
+      COLLECT: {
+        disabled: !lastStep || !syncAutomationsEnabled || collectBlockExists,
+        message: collectDisabledMessage(),
+      },
+    }
+  }
+
+  const collectDisabledMessage = () => {
+    if (collectBlockExists) {
+      return "Only one Collect step allowed"
+    }
+    if (!lastStep) {
+      return "Only available as the last step"
+    }
+  }
+
   const external = actions.reduce((acc, elm) => {
     const [k, v] = elm
     if (!v.internal && !v.custom) {
@@ -38,6 +62,15 @@
       acc[k] = v
     }
     delete acc.LOOP
+
+    // Filter out Collect block if not App Action or Webhook
+    if (
+      !collectBlockAllowedSteps.includes(
+        $selectedAutomation.definition.trigger.stepId
+      )
+    ) {
+      delete acc.COLLECT
+    }
     return acc
   }, {})
 
@@ -48,7 +81,6 @@
     }
     return acc
   }, {})
-  console.log(plugins)
 
   const selectAction = action => {
     actionVal = action
@@ -72,7 +104,7 @@
 <ModalContent
   title="Add automation step"
   confirmText="Save"
-  size="M"
+  size="L"
   disabled={!selectedAction}
   onConfirm={addBlockToAutomation}
 >
@@ -107,7 +139,7 @@
     <Detail size="S">Actions</Detail>
     <div class="item-list">
       {#each Object.entries(internal) as [idx, action]}
-        {@const isDisabled = disabled[idx] && disabled[idx].disabled}
+        {@const isDisabled = disabled()[idx] && disabled()[idx].disabled}
         <div
           class="item"
           class:disabled={isDisabled}
@@ -117,8 +149,14 @@
           <div class="item-body">
             <Icon name={action.icon} />
             <Body size="XS">{action.name}</Body>
-            {#if isDisabled}
-              <Icon name="Help" tooltip={disabled[idx].message} />
+            {#if isDisabled && !syncAutomationsEnabled}
+              <div class="tag-color">
+                <Tags>
+                  <Tag icon="LockClosed">Business</Tag>
+                </Tags>
+              </div>
+            {:else if isDisabled}
+              <Icon name="Help" tooltip={disabled()[idx].message} />
             {/if}
           </div>
         </div>
@@ -152,6 +190,7 @@
     display: flex;
     margin-left: var(--spacing-m);
     gap: var(--spacing-m);
+    align-items: center;
   }
   .item-list {
     display: grid;
@@ -181,4 +220,8 @@
   .disabled :global(.spectrum-Body) {
     color: var(--spectrum-global-color-gray-600);
   }
+
+  .tag-color :global(.spectrum-Tags-item) {
+    background: var(--spectrum-global-color-gray-200);
+  }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 7484a60502..092138170f 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -17,7 +17,11 @@
   import ActionModal from "./ActionModal.svelte"
   import FlowItemHeader from "./FlowItemHeader.svelte"
   import RoleSelect from "components/design/settings/controls/RoleSelect.svelte"
-  import { ActionStepID, TriggerStepID } from "constants/backend/automations"
+  import {
+    ActionStepID,
+    TriggerStepID,
+    Features,
+  } from "constants/backend/automations"
   import { permissions } from "stores/backend"
 
   export let block
@@ -31,6 +35,9 @@
   let showLooping = false
   let role
 
+  $: collectBlockExists = $selectedAutomation.definition.steps.some(
+    step => step.stepId === ActionStepID.COLLECT
+  )
   $: automationId = $selectedAutomation?._id
   $: showBindingPicker =
     block.stepId === ActionStepID.CREATE_ROW ||
@@ -184,7 +191,7 @@
         {#if !isTrigger}
           <div>
             <div class="block-options">
-              {#if !loopBlock}
+              {#if block?.features?.[Features.LOOPING] || !block.features}
                 <ActionButton on:click={() => addLooping()} icon="Reuse">
                   Add Looping
                 </ActionButton>
@@ -224,21 +231,28 @@
       </Layout>
     </div>
   {/if}
-
-  <Modal bind:this={actionModal} width="30%">
-    <ActionModal {blockIdx} />
-  </Modal>
-
-  <Modal bind:this={webhookModal} width="30%">
-    <CreateWebhookModal />
-  </Modal>
 </div>
-<div class="separator" />
-<Icon on:click={() => actionModal.show()} hoverable name="AddCircle" size="S" />
-{#if isTrigger ? totalBlocks > 1 : blockIdx !== totalBlocks - 2}
+{#if !collectBlockExists || !lastStep}
   <div class="separator" />
+  <Icon
+    on:click={() => actionModal.show()}
+    hoverable
+    name="AddCircle"
+    size="S"
+  />
+  {#if isTrigger ? totalBlocks > 1 : blockIdx !== totalBlocks - 2}
+    <div class="separator" />
+  {/if}
 {/if}
 
+<Modal bind:this={actionModal} width="30%">
+  <ActionModal {lastStep} {blockIdx} />
+</Modal>
+
+<Modal bind:this={webhookModal} width="30%">
+  <CreateWebhookModal />
+</Modal>
+
 <style>
   .delete-padding {
     padding-left: 30px;
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
index 35c9c6ad6d..6ab750c3d6 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
@@ -11,8 +11,8 @@
     ActionButton,
     Drawer,
     Modal,
-    Detail,
     notifications,
+    Icon,
   } from "@budibase/bbui"
   import CreateWebhookModal from "components/automation/Shared/CreateWebhookModal.svelte"
   import { automationStore, selectedAutomation } from "builderStore"
@@ -27,9 +27,18 @@
   import CronBuilder from "./CronBuilder.svelte"
   import Editor from "components/integration/QueryEditor.svelte"
   import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
+  import CodeEditor from "components/common/CodeEditor/CodeEditor.svelte"
+  import {
+    bindingsToCompletions,
+    jsAutocomplete,
+    EditorModes,
+  } from "components/common/CodeEditor"
   import FilterDrawer from "components/design/settings/controls/FilterEditor/FilterDrawer.svelte"
   import { LuceneUtils } from "@budibase/frontend-core"
-  import { getSchemaForTable } from "builderStore/dataBinding"
+  import {
+    getSchemaForTable,
+    getEnvironmentBindings,
+  } from "builderStore/dataBinding"
   import { Utils } from "@budibase/frontend-core"
   import { TriggerStepID, ActionStepID } from "constants/backend/automations"
   import { onMount } from "svelte"
@@ -43,7 +52,6 @@
   let webhookModal
   let drawer
   let fillWidth = true
-  let codeBindingOpen = false
   let inputData
 
   $: filters = lookForFilters(schemaProperties) || []
@@ -210,6 +218,19 @@
       }
       const outputs = Object.entries(schema)
 
+      let bindingIcon = ""
+      let bindindingRank = 0
+
+      if (idx === 0) {
+        bindingIcon = automation.trigger.icon
+      } else if (isLoopBlock) {
+        bindingIcon = "Reuse"
+        bindindingRank = idx + 1
+      } else {
+        bindingIcon = allSteps[idx].icon
+        bindindingRank = idx - loopBlockCount
+      }
+
       bindings = bindings.concat(
         outputs.map(([name, value]) => {
           let runtimeName = isLoopBlock
@@ -218,17 +239,24 @@
             ? `steps[${idx - loopBlockCount}].${name}`
             : `steps.${idx - loopBlockCount}.${name}`
           const runtime = idx === 0 ? `trigger.${name}` : runtimeName
+          const categoryName =
+            idx === 0
+              ? "Trigger outputs"
+              : isLoopBlock
+              ? "Loop Outputs"
+              : `Step ${idx - loopBlockCount} outputs`
           return {
-            label: runtime,
+            readableBinding: runtime,
+            runtimeBinding: runtime,
             type: value.type,
             description: value.description,
-            category:
-              idx === 0
-                ? "Trigger outputs"
-                : isLoopBlock
-                ? "Loop Outputs"
-                : `Step ${idx - loopBlockCount} outputs`,
-            path: runtime,
+            icon: bindingIcon,
+            category: categoryName,
+            display: {
+              type: value.type,
+              name: name,
+              rank: bindindingRank,
+            },
           }
         })
       )
@@ -237,15 +265,12 @@
     // Environment bindings
     if ($licensing.environmentVariablesEnabled) {
       bindings = bindings.concat(
-        $environment.variables.map(variable => {
+        getEnvironmentBindings().map(binding => {
           return {
-            label: `env.${variable.name}`,
-            path: `env.${variable.name}`,
-            icon: "Key",
-            category: "Environment",
+            ...binding,
             display: {
-              type: "string",
-              name: variable.name,
+              ...binding.display,
+              rank: 98,
             },
           }
         })
@@ -437,25 +462,27 @@
         <SchemaSetup on:change={e => onChange(e, key)} value={inputData[key]} />
       {:else if value.customType === "code"}
         <CodeEditorModal>
-          <ActionButton
-            on:click={() => (codeBindingOpen = !codeBindingOpen)}
-            quiet
-            icon={codeBindingOpen ? "ChevronDown" : "ChevronRight"}
-          >
-            <Detail size="S">Bindings</Detail>
-          </ActionButton>
-          {#if codeBindingOpen}
-            <pre>{JSON.stringify(bindings, null, 2)}</pre>
-          {/if}
-          <Editor
-            mode="javascript"
+          <CodeEditor
+            value={inputData[key]}
             on:change={e => {
               // need to pass without the value inside
-              onChange({ detail: e.detail.value }, key)
-              inputData[key] = e.detail.value
+              onChange({ detail: e.detail }, key)
+              inputData[key] = e.detail
             }}
-            value={inputData[key]}
+            completions={[
+              jsAutocomplete([
+                ...bindingsToCompletions(bindings, EditorModes.JS),
+              ]),
+            ]}
+            mode={EditorModes.JS}
+            height={500}
           />
+          <div class="messaging">
+            <Icon name="FlashOn" />
+            <div class="messaging-wrap">
+              <div>Add available bindings by typing <strong>$</strong></div>
+            </div>
+          </div>
         </CodeEditorModal>
       {:else if value.customType === "loopOption"}
         <Select
@@ -505,6 +532,11 @@
 {/if}
 
 <style>
+  .messaging {
+    display: flex;
+    align-items: center;
+    margin-top: var(--spacing-xl);
+  }
   .fields {
     display: flex;
     flex-direction: column;
diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte
index 83e115ebf2..1b0c92bde0 100644
--- a/packages/builder/src/components/backend/DataTable/DataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte
@@ -16,11 +16,11 @@
   import GridEditColumnModal from "components/backend/DataTable/modals/grid/GridEditColumnModal.svelte"
 
   const userSchemaOverrides = {
-    firstName: { name: "First name", disabled: true },
-    lastName: { name: "Last name", disabled: true },
-    email: { name: "Email", disabled: true },
-    roleId: { name: "Role", disabled: true },
-    status: { name: "Status", disabled: true },
+    firstName: { displayName: "First name", disabled: true },
+    lastName: { displayName: "Last name", disabled: true },
+    email: { displayName: "Email", disabled: true },
+    roleId: { displayName: "Role", disabled: true },
+    status: { displayName: "Status", disabled: true },
   }
 
   $: id = $tables.selected?._id
@@ -36,7 +36,8 @@
     allowAddRows={!isUsersTable}
     allowDeleteRows={!isUsersTable}
     schemaOverrides={isUsersTable ? userSchemaOverrides : null}
-    on:updatetable={e => tables.updateTable(e.detail)}
+    showAvatars={false}
+    on:updatetable={e => tables.replaceTable(id, e.detail)}
   >
     <svelte:fragment slot="controls">
       {#if isInternal}
diff --git a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
index 53a71f2afe..bc18bf1b41 100644
--- a/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/ExternalDataSourceTable.svelte
@@ -3,6 +3,7 @@
 
   export let query = {}
   export let data = []
+  export let editRows = false
 
   let loading = false
   let error = false
@@ -12,7 +13,14 @@
 {#if error}
   <div class="errors">{error}</div>
 {/if}
-<Table schema={query.schema} {data} {loading} {type} rowCount={5} />
+<Table
+  schema={query.schema}
+  {data}
+  {loading}
+  {type}
+  rowCount={5}
+  allowEditing={editRows}
+/>
 
 <style>
   .errors {
diff --git a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
index 1a4ced9f3a..61b706e28e 100644
--- a/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
+++ b/packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
@@ -81,6 +81,7 @@
   <Label>{label}</Label>
   <Editor
     editorHeight="250"
+    editorWidth="320"
     mode="json"
     on:change={({ detail }) => (value = detail.value)}
     value={stringVal}
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
index 642f10ad35..1164ab717d 100644
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@@ -22,8 +22,8 @@
   export let rowCount
   export let disableSorting = false
   export let customPlaceholder = false
-  export let allowClickRows
   export let allowEditing = true
+  export let allowClickRows
 
   const dispatch = createEventDispatcher()
 
diff --git a/packages/builder/src/components/backend/DataTable/modals/ExportModal.svelte b/packages/builder/src/components/backend/DataTable/modals/ExportModal.svelte
index 68968d5785..6cefe244bf 100644
--- a/packages/builder/src/components/backend/DataTable/modals/ExportModal.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/ExportModal.svelte
@@ -113,17 +113,26 @@
       })
       download(data, `export.${exportFormat}`)
     } else if (filters || sorting) {
-      const data = await API.exportRows({
-        tableId: view,
-        format: exportFormat,
-        search: {
-          query: luceneFilter,
-          sort: sorting?.sortColumn,
-          sortOrder: sorting?.sortOrder,
-          paginate: false,
-        },
-      })
-      download(data, `export.${exportFormat}`)
+      let response
+      try {
+        response = await API.exportRows({
+          tableId: view,
+          format: exportFormat,
+          search: {
+            query: luceneFilter,
+            sort: sorting?.sortColumn,
+            sortOrder: sorting?.sortOrder,
+            paginate: false,
+          },
+        })
+      } catch (e) {
+        console.error("Failed to export", e)
+        notifications.error("Export Failed")
+      }
+      if (response) {
+        download(response, `export.${exportFormat}`)
+        notifications.success("Export Successful")
+      }
     } else {
       await exportView()
     }
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
deleted file mode 100644
index 290f25b941..0000000000
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
+++ /dev/null
@@ -1,255 +0,0 @@
-<script>
-  import {
-    ModalContent,
-    Modal,
-    Body,
-    Layout,
-    Detail,
-    Heading,
-    notifications,
-  } from "@budibase/bbui"
-  import { onMount } from "svelte"
-  import ICONS from "../icons"
-  import { API } from "api"
-  import { IntegrationTypes, DatasourceTypes } from "constants/backend"
-  import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
-  import DatasourceConfigModal from "components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte"
-  import GoogleDatasourceConfigModal from "components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte"
-  import { createRestDatasource } from "builderStore/datasource"
-  import { goto } from "@roxi/routify"
-  import ImportRestQueriesModal from "./ImportRestQueriesModal.svelte"
-  import DatasourceCard from "../_components/DatasourceCard.svelte"
-
-  export let modal
-  let integrations = {}
-  let integration = {}
-  let internalTableModal
-  let externalDatasourceModal
-  let importModal
-
-  $: showImportButton = false
-  $: customIntegrations = Object.entries(integrations).filter(
-    entry => entry[1].custom
-  )
-  $: sortedIntegrations = sortIntegrations(integrations)
-
-  checkShowImport()
-
-  onMount(() => {
-    fetchIntegrations()
-  })
-
-  function selectIntegration(integrationType) {
-    const selected = integrations[integrationType]
-
-    // build the schema
-    const config = {}
-    for (let key of Object.keys(selected.datasource)) {
-      config[key] = selected.datasource[key].default
-    }
-    integration = {
-      type: integrationType,
-      plus: selected.plus,
-      config,
-      schema: selected.datasource,
-      auth: selected.auth,
-      features: selected.features || [],
-    }
-    if (selected.friendlyName) {
-      integration.name = selected.friendlyName
-    }
-    checkShowImport()
-  }
-
-  function checkShowImport() {
-    showImportButton = integration.type === "REST"
-  }
-
-  function showImportModal() {
-    importModal.show()
-  }
-
-  async function chooseNextModal() {
-    if (integration.type === IntegrationTypes.INTERNAL) {
-      externalDatasourceModal.hide()
-      internalTableModal.show()
-    } else if (integration.type === IntegrationTypes.REST) {
-      try {
-        // Skip modal for rest, create straight away
-        const resp = await createRestDatasource(integration)
-        $goto(`./datasource/${resp._id}`)
-      } catch (error) {
-        notifications.error("Error creating datasource")
-      }
-    } else {
-      externalDatasourceModal.show()
-    }
-  }
-
-  async function fetchIntegrations() {
-    let newIntegrations = {
-      [IntegrationTypes.INTERNAL]: { datasource: {}, name: "INTERNAL/CSV" },
-    }
-    try {
-      const integrationList = await API.getIntegrations()
-      newIntegrations = {
-        ...newIntegrations,
-        ...integrationList,
-      }
-    } catch (error) {
-      notifications.error("Error fetching integrations")
-    }
-    integrations = newIntegrations
-  }
-
-  function sortIntegrations(integrations) {
-    let integrationsArray = Object.entries(integrations)
-    function getTypeOrder(schema) {
-      if (schema.type === DatasourceTypes.API) {
-        return 1
-      }
-      if (schema.type === DatasourceTypes.RELATIONAL) {
-        return 2
-      }
-      return schema.type?.charCodeAt(0)
-    }
-
-    integrationsArray.sort((a, b) => {
-      let typeOrderA = getTypeOrder(a[1])
-      let typeOrderB = getTypeOrder(b[1])
-      if (typeOrderA === typeOrderB) {
-        return a[1].friendlyName?.localeCompare(b[1].friendlyName)
-      }
-      return typeOrderA < typeOrderB ? -1 : 1
-    })
-    return integrationsArray
-  }
-</script>
-
-<Modal bind:this={internalTableModal}>
-  <CreateTableModal />
-</Modal>
-
-<Modal bind:this={externalDatasourceModal}>
-  {#if integration?.auth?.type === "google"}
-    <GoogleDatasourceConfigModal {integration} {modal} />
-  {:else}
-    <DatasourceConfigModal {integration} {modal} />
-  {/if}
-</Modal>
-
-<Modal bind:this={importModal}>
-  {#if integration.type === "REST"}
-    <ImportRestQueriesModal
-      navigateDatasource={true}
-      createDatasource={true}
-      onCancel={() => modal.show()}
-    />
-  {/if}
-</Modal>
-
-<Modal bind:this={modal}>
-  <ModalContent
-    disabled={!Object.keys(integration).length}
-    title="Add datasource"
-    confirmText="Continue"
-    showSecondaryButton={showImportButton}
-    secondaryButtonText="Import"
-    secondaryAction={() => showImportModal()}
-    showCancelButton={false}
-    size="M"
-    onConfirm={() => {
-      chooseNextModal()
-    }}
-  >
-    <Layout noPadding gap="XS">
-      <Body size="S">Get started with Budibase DB</Body>
-      <div
-        class:selected={integration.type === IntegrationTypes.INTERNAL}
-        on:click={() => selectIntegration(IntegrationTypes.INTERNAL)}
-        class="item hoverable"
-      >
-        <div class="item-body with-type">
-          <svelte:component this={ICONS.BUDIBASE} height="20" width="20" />
-          <div class="text">
-            <Heading size="XXS">Budibase DB</Heading>
-            <Detail size="S" class="type">Non-relational</Detail>
-          </div>
-        </div>
-      </div>
-    </Layout>
-
-    <Layout noPadding gap="XS">
-      <Body size="S">Connect to an external datasource</Body>
-      <div class="item-list">
-        {#each sortedIntegrations.filter(([key, val]) => key !== IntegrationTypes.INTERNAL && !val.custom) as [integrationType, schema]}
-          <DatasourceCard
-            on:selected={evt => selectIntegration(evt.detail)}
-            {schema}
-            bind:integrationType
-            {integration}
-          />
-        {/each}
-      </div>
-    </Layout>
-
-    {#if customIntegrations.length > 0}
-      <Layout noPadding gap="XS">
-        <Body size="S">Custom datasource</Body>
-        <div class="item-list">
-          {#each customIntegrations as [integrationType, schema]}
-            <DatasourceCard
-              on:selected={evt => selectIntegration(evt.detail)}
-              {schema}
-              bind:integrationType
-              {integration}
-            />
-          {/each}
-        </div>
-      </Layout>
-    {/if}
-  </ModalContent>
-</Modal>
-
-<style>
-  .item-list {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(150px, 1fr));
-    grid-gap: var(--spectrum-alias-grid-baseline);
-  }
-
-  .item {
-    cursor: pointer;
-    display: grid;
-    grid-gap: var(--spectrum-alias-grid-margin-xsmall);
-    padding: var(--spectrum-alias-item-padding-s)
-      var(--spectrum-alias-item-padding-m);
-    background: var(--spectrum-alias-background-color-secondary);
-    transition: background 0.13s ease-out;
-    border-radius: 5px;
-    box-sizing: border-box;
-    border-width: 2px;
-  }
-  .item:hover,
-  .item.selected {
-    background: var(--spectrum-alias-background-color-tertiary);
-  }
-
-  .item-body {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-m);
-  }
-  .item-body.with-type {
-    align-items: flex-start;
-  }
-  .item-body.with-type :global(svg) {
-    margin-top: 4px;
-  }
-
-  .text :global(.spectrum-Detail) {
-    color: var(--spectrum-global-color-gray-700);
-  }
-</style>
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
index 4c47720692..1696a1870b 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte
@@ -18,7 +18,6 @@
   import { DatasourceFeature } from "@budibase/types"
 
   export let integration
-  export let modal
 
   // kill the reference so the input isn't saved
   let datasource = cloneDeep(integration)
diff --git a/packages/builder/src/components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte b/packages/builder/src/components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte
index de9ecce778..0783a9fe53 100644
--- a/packages/builder/src/components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte
+++ b/packages/builder/src/components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte
@@ -8,7 +8,6 @@
   import { onMount } from "svelte"
 
   export let integration
-  export let modal
 
   // kill the reference so the input isn't saved
   let datasource = cloneDeep(integration)
@@ -21,7 +20,6 @@
 
 <ModalContent
   title={`Connect to ${IntegrationNames[datasource.type]}`}
-  onCancel={() => modal.show()}
   cancelText="Back"
   size="L"
 >
diff --git a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
index 8d8418eb81..f34a3e9c98 100644
--- a/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte
@@ -4,6 +4,7 @@
   import { API } from "api"
   import { parseFile } from "./utils"
 
+  let fileInput
   let error = null
   let fileName = null
   let fileType = null
@@ -16,6 +17,7 @@
   export let schema = {}
   export let allValid = true
   export let displayColumn = null
+  export let promptUpload = false
 
   const typeOptions = [
     {
@@ -99,10 +101,19 @@
     schema[name].type = e.detail
     schema[name].constraints = FIELDS[e.detail.toUpperCase()].constraints
   }
+
+  const openFileUpload = (promptUpload, fileInput) => {
+    if (promptUpload && fileInput) {
+      fileInput.click()
+    }
+  }
+
+  $: openFileUpload(promptUpload, fileInput)
 </script>
 
 <div class="dropzone">
   <input
+    bind:this={fileInput}
     disabled={loading}
     id="file-upload"
     accept="text/csv,application/json"
diff --git a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
index 1987a51e5d..bd1761620d 100644
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
@@ -28,6 +28,7 @@
     ? selectedSource._id
     : BUDIBASE_INTERNAL_DB_ID
 
+  export let promptUpload = false
   export let name
   export let beforeSave = async () => {}
   export let afterSave = async table => {
@@ -136,7 +137,13 @@
       <Label grey extraSmall
         >Create a Table from a CSV or JSON file (Optional)</Label
       >
-      <TableDataImport bind:rows bind:schema bind:allValid bind:displayColumn />
+      <TableDataImport
+        {promptUpload}
+        bind:rows
+        bind:schema
+        bind:allValid
+        bind:displayColumn
+      />
     </Layout>
   </div>
 </ModalContent>
diff --git a/packages/builder/src/components/common/AppLockModal.svelte b/packages/builder/src/components/common/AppLockModal.svelte
deleted file mode 100644
index 875b4afce0..0000000000
--- a/packages/builder/src/components/common/AppLockModal.svelte
+++ /dev/null
@@ -1,143 +0,0 @@
-<script>
-  import {
-    Button,
-    ButtonGroup,
-    ModalContent,
-    Modal,
-    notifications,
-    ProgressCircle,
-    Layout,
-    Body,
-    Icon,
-  } from "@budibase/bbui"
-  import { auth, apps } from "stores/portal"
-  import { processStringSync } from "@budibase/string-templates"
-  import { API } from "api"
-
-  export let app
-  export let buttonSize = "M"
-
-  let APP_DEV_LOCK_SECONDS = 600 //common area for this?
-  let appLockModal
-  let processing = false
-
-  $: lockedBy = app?.lockedBy
-  $: lockedByYou = $auth.user.email === lockedBy?.email
-
-  $: lockIdentifer = `${
-    lockedBy && lockedBy.firstName ? lockedBy?.firstName : lockedBy?.email
-  }`
-
-  $: lockedByHeading =
-    lockedBy && lockedByYou ? "Locked by you" : `Locked by ${lockIdentifer}`
-
-  const getExpiryDuration = app => {
-    if (!app?.lockedBy?.lockedAt) {
-      return -1
-    }
-    let expiry =
-      new Date(app.lockedBy.lockedAt).getTime() + APP_DEV_LOCK_SECONDS * 1000
-    return expiry - new Date().getTime()
-  }
-
-  const releaseLock = async () => {
-    processing = true
-    if (app) {
-      try {
-        await API.releaseAppLock(app.devId)
-        await apps.load()
-        notifications.success("Lock released successfully")
-      } catch (err) {
-        notifications.error("Error releasing lock")
-      }
-    } else {
-      notifications.error("No application is selected")
-    }
-    processing = false
-  }
-</script>
-
-{#if lockedBy}
-  <div class="lock-status">
-    <Icon
-      name="LockClosed"
-      hoverable
-      size={buttonSize}
-      on:click={e => {
-        e.stopPropagation()
-        appLockModal.show()
-      }}
-    />
-  </div>
-{/if}
-
-<Modal bind:this={appLockModal}>
-  <ModalContent
-    title={lockedByHeading}
-    showConfirmButton={false}
-    showCancelButton={false}
-  >
-    <Layout noPadding>
-      <Body size="S">
-        Apps are locked to prevent work being lost from overlapping changes
-        between your team.
-      </Body>
-      {#if lockedByYou && getExpiryDuration(app) > 0}
-        <span class="lock-expiry-body">
-          {processStringSync(
-            "This lock will expire in {{ duration time 'millisecond' }} from now.",
-            {
-              time: getExpiryDuration(app),
-            }
-          )}
-        </span>
-      {/if}
-      <div class="lock-modal-actions">
-        <ButtonGroup>
-          <Button
-            secondary
-            quiet={lockedBy && lockedByYou}
-            disabled={processing}
-            on:click={() => {
-              appLockModal.hide()
-            }}
-          >
-            <span class="cancel"
-              >{lockedBy && !lockedByYou ? "Done" : "Cancel"}</span
-            >
-          </Button>
-          {#if lockedByYou}
-            <Button
-              cta
-              disabled={processing}
-              on:click={() => {
-                releaseLock()
-                appLockModal.hide()
-              }}
-            >
-              {#if processing}
-                <ProgressCircle overBackground={true} size="S" />
-              {:else}
-                <span class="unlock">Release Lock</span>
-              {/if}
-            </Button>
-          {/if}
-        </ButtonGroup>
-      </div>
-    </Layout>
-  </ModalContent>
-</Modal>
-
-<style>
-  .lock-modal-actions {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: var(--spacing-l);
-    gap: var(--spacing-xl);
-  }
-  .lock-status {
-    display: flex;
-    gap: var(--spacing-s);
-    max-width: 175px;
-  }
-</style>
diff --git a/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
new file mode 100644
index 0000000000..dadca85fac
--- /dev/null
+++ b/packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
@@ -0,0 +1,289 @@
+<script>
+  import { Label } from "@budibase/bbui"
+  import { onMount, createEventDispatcher } from "svelte"
+
+  import {
+    autocompletion,
+    closeBrackets,
+    completionKeymap,
+    closeBracketsKeymap,
+  } from "@codemirror/autocomplete"
+  import {
+    EditorView,
+    lineNumbers,
+    keymap,
+    highlightSpecialChars,
+    drawSelection,
+    dropCursor,
+    highlightActiveLine,
+    highlightActiveLineGutter,
+    highlightWhitespace,
+    placeholder as placeholderFn,
+    MatchDecorator,
+    ViewPlugin,
+    Decoration,
+  } from "@codemirror/view"
+  import {
+    bracketMatching,
+    foldKeymap,
+    foldGutter,
+    syntaxHighlighting,
+  } from "@codemirror/language"
+  import { oneDark, oneDarkHighlightStyle } from "@codemirror/theme-one-dark"
+  import {
+    defaultKeymap,
+    historyKeymap,
+    history,
+    indentWithTab,
+  } from "@codemirror/commands"
+  import { Compartment } from "@codemirror/state"
+  import { javascript } from "@codemirror/lang-javascript"
+  import { EditorModes, getDefaultTheme } from "./"
+  import { themeStore } from "builderStore"
+
+  export let label
+  export let completions = []
+  export let height = 200
+  export let resize = "none"
+  export let mode = EditorModes.Handlebars
+  export let value = ""
+  export let placeholder = null
+
+  // Export a function to expose caret position
+  export const getCaretPosition = () => {
+    const selection_range = editor.state.selection.ranges[0]
+    return {
+      start: selection_range.from,
+      end: selection_range.to,
+    }
+  }
+
+  export const insertAtPos = opts => {
+    // Updating the value inside.
+    // Retain focus
+    editor.dispatch({
+      changes: {
+        from: opts.start || editor.state.doc.length,
+        to: opts.end || editor.state.doc.length,
+        insert: opts.value,
+      },
+      selection: opts.cursor
+        ? {
+            anchor: opts.start + opts.value.length,
+          }
+        : undefined,
+    })
+  }
+
+  // For handlebars only.
+  const bindStyle = new MatchDecorator({
+    regexp: /{{[."#\-\w\s\][]*}}/g,
+    decoration: () => {
+      return Decoration.mark({
+        tag: "span",
+        attributes: {
+          class: "binding-wrap",
+        },
+      })
+    },
+  })
+
+  let plugin = ViewPlugin.define(
+    view => ({
+      decorations: bindStyle.createDeco(view),
+      update(u) {
+        this.decorations = bindStyle.updateDeco(u, this.decorations)
+      },
+    }),
+    {
+      decorations: v => v.decorations,
+    }
+  )
+
+  const dispatch = createEventDispatcher()
+
+  // Theming!
+  let currentTheme = $themeStore?.theme
+  let isDark = !currentTheme.includes("light")
+  let themeConfig = new Compartment()
+
+  const buildKeymap = () => {
+    const baseMap = [
+      ...closeBracketsKeymap,
+      ...defaultKeymap,
+      ...historyKeymap,
+      ...foldKeymap,
+      ...completionKeymap,
+      indentWithTab,
+    ]
+    return baseMap
+  }
+
+  const buildBaseExtensions = () => {
+    return [
+      ...(mode.name === "handlebars" ? [plugin] : []),
+      history(),
+      drawSelection(),
+      dropCursor(),
+      bracketMatching(),
+      closeBrackets(),
+      highlightActiveLine(),
+      syntaxHighlighting(oneDarkHighlightStyle, { fallback: true }),
+      highlightActiveLineGutter(),
+      highlightSpecialChars(),
+      autocompletion({
+        override: [...completions],
+        closeOnBlur: true,
+        icons: false,
+        optionClass: () => "autocomplete-option",
+      }),
+      EditorView.lineWrapping,
+      EditorView.updateListener.of(v => {
+        const docStr = v.state.doc?.toString()
+        if (docStr === value) {
+          return
+        }
+        dispatch("change", docStr)
+      }),
+      keymap.of(buildKeymap()),
+      themeConfig.of([
+        getDefaultTheme({
+          height: editorHeight,
+          resize,
+          dark: isDark,
+        }),
+        ...(isDark ? [oneDark] : []),
+      ]),
+    ]
+  }
+
+  const buildExtensions = base => {
+    const complete = [...base]
+    if (mode.name == "javascript") {
+      complete.push(javascript())
+      complete.push(highlightWhitespace())
+      complete.push(lineNumbers())
+      complete.push(foldGutter())
+      complete.push(
+        EditorView.inputHandler.of((view, from, to, insert) => {
+          if (insert === "$") {
+            let { text } = view.state.doc.lineAt(from)
+
+            const left = from ? text.substring(0, from) : ""
+            const right = to ? text.substring(to) : ""
+            const wrap = !left.includes('$("') || !right.includes('")')
+            const tr = view.state.update(
+              {
+                changes: [{ from, insert: wrap ? '$("")' : "$" }],
+                selection: {
+                  anchor: from + (wrap ? 3 : 1),
+                },
+              },
+              {
+                scrollIntoView: true,
+                userEvent: "input.type",
+              }
+            )
+            view.dispatch(tr)
+            return true
+          }
+
+          return false
+        })
+      )
+    }
+
+    if (placeholder) {
+      complete.push(placeholderFn(placeholder))
+    }
+    return complete
+  }
+
+  let textarea
+  let editor
+  let mounted = false
+  let isEditorInitialised = false
+
+  const initEditor = () => {
+    const baseExtensions = buildBaseExtensions()
+
+    editor = new EditorView({
+      doc: value,
+      extensions: buildExtensions(baseExtensions),
+      parent: textarea,
+    })
+  }
+
+  $: editorHeight = typeof height === "number" ? `${height}px` : height
+
+  // Init when all elements are ready
+  $: if (mounted && !isEditorInitialised) {
+    isEditorInitialised = true
+    initEditor()
+  }
+
+  // Theme change
+  $: if (mounted && isEditorInitialised && $themeStore?.theme) {
+    if (currentTheme != $themeStore?.theme) {
+      currentTheme = $themeStore?.theme
+      isDark = !currentTheme.includes("light")
+
+      // Issue theme compartment update
+      editor.dispatch({
+        effects: themeConfig.reconfigure([
+          getDefaultTheme({
+            height: editorHeight,
+            resize,
+            dark: isDark,
+          }),
+          ...(isDark ? [oneDark] : []),
+        ]),
+      })
+    }
+  }
+
+  onMount(async () => {
+    mounted = true
+    return () => {
+      if (editor) {
+        editor.destroy()
+      }
+    }
+  })
+</script>
+
+{#if label}
+  <div>
+    <Label small>{label}</Label>
+  </div>
+{/if}
+
+<div class={`code-editor ${mode?.name || ""}`}>
+  <div tabindex="-1" bind:this={textarea} />
+</div>
+
+<style>
+  .code-editor.handlebars :global(.cm-content) {
+    font-family: var(--font-sans);
+  }
+  .code-editor :global(.cm-tooltip.cm-completionInfo) {
+    padding: var(--spacing-m);
+  }
+  .code-editor :global(.cm-tooltip-autocomplete > ul > li[aria-selected]) {
+    border-radius: var(
+        --spectrum-popover-border-radius,
+        var(--spectrum-alias-border-radius-regular)
+      ),
+      var(
+        --spectrum-popover-border-radius,
+        var(--spectrum-alias-border-radius-regular)
+      ),
+      0, 0;
+  }
+
+  .code-editor :global(.autocomplete-option .cm-completionDetail) {
+    background-color: var(--spectrum-global-color-gray-200);
+    border-radius: var(--border-radius-s);
+    padding: 4px 6px;
+  }
+</style>
diff --git a/packages/builder/src/components/common/CodeEditor/index.js b/packages/builder/src/components/common/CodeEditor/index.js
new file mode 100644
index 0000000000..7987deff52
--- /dev/null
+++ b/packages/builder/src/components/common/CodeEditor/index.js
@@ -0,0 +1,387 @@
+import { EditorView } from "@codemirror/view"
+import { getManifest } from "@budibase/string-templates"
+import sanitizeHtml from "sanitize-html"
+import { groupBy } from "lodash"
+
+export const EditorModes = {
+  JS: {
+    name: "javascript",
+    json: false,
+    match: /\$$/,
+  },
+  Handlebars: {
+    name: "handlebars",
+    base: "text/html",
+    match: /{{[\s]*[\w\s]*/,
+  },
+  Text: {
+    name: "text/html",
+  },
+}
+
+export const SECTIONS = {
+  HB_HELPER: {
+    name: "Helper",
+    type: "helper",
+    icon: "Code",
+  },
+}
+
+export const getDefaultTheme = opts => {
+  const { height, resize, dark } = opts
+  return EditorView.theme(
+    {
+      "&.cm-focused .cm-cursor": {
+        borderLeftColor: "var(--spectrum-alias-text-color)",
+      },
+      "&": {
+        height: height ? `${height}` : "",
+        lineHeight: "1.3",
+        border:
+          "var(--spectrum-alias-border-size-thin) solid var(--spectrum-alias-border-color)",
+        borderRadius: "var(--border-radius-s)",
+        backgroundColor:
+          "var( --spectrum-textfield-m-background-color, var(--spectrum-global-color-gray-50) )",
+        resize: resize ? `${resize}` : "",
+        overflow: "hidden",
+        color: "var(--spectrum-alias-text-color)",
+      },
+      "& .cm-tooltip.cm-tooltip-autocomplete > ul": {
+        fontFamily:
+          "var(--spectrum-alias-body-text-font-family, var(--spectrum-global-font-family-base))",
+        maxHeight: "16em",
+      },
+      "& .cm-placeholder": {
+        color: "var(--spectrum-alias-text-color)",
+        fontStyle: "italic",
+      },
+      "&.cm-focused": {
+        outline: "none",
+        borderColor: "var(--spectrum-alias-border-color-mouse-focus)",
+      },
+      // AUTO COMPLETE
+      "& .cm-completionDetail": {
+        fontStyle: "unset",
+        textTransform: "uppercase",
+        fontSize: "10px",
+        backgroundColor: "var(--spectrum-global-color-gray-100)",
+        color: "var(--spectrum-global-color-gray-600)",
+      },
+      "& .cm-completionLabel": {
+        marginLeft:
+          "calc(var(--spectrum-alias-workflow-icon-size-m) + var(--spacing-m))",
+      },
+      "& .info-bubble": {
+        fontSize: "var(--font-size-s)",
+        display: "grid",
+        gridGap: "var(--spacing-s)",
+        gridTemplateColumns: "1fr",
+        color: "var(--spectrum-global-color-gray-800)",
+      },
+      "& .cm-tooltip": {
+        marginLeft: "var(--spacing-s)",
+        border: "1px solid var(--spectrum-global-color-gray-300)",
+        borderRadius:
+          "var( --spectrum-popover-border-radius, var(--spectrum-alias-border-radius-regular) )",
+        backgroundColor: "var(--spectrum-global-color-gray-50)",
+      },
+      // Section header
+      "& .info-section": {
+        display: "flex",
+        padding: "var(--spacing-s)",
+        gap: "var(--spacing-m)",
+        borderBottom: "1px solid var(--spectrum-global-color-gray-200)",
+        color: "var(--spectrum-global-color-gray-800)",
+        fontWeight: "bold",
+      },
+      "& .info-section .spectrum-Icon": {
+        color: "var(--spectrum-global-color-gray-600)",
+      },
+      // Autocomplete Option
+      "& .cm-tooltip.cm-tooltip-autocomplete .autocomplete-option": {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        fontSize: "var(--spectrum-alias-font-size-default)",
+        padding: "var(--spacing-s)",
+        color: "var(--spectrum-global-color-gray-800)",
+      },
+      "& .cm-tooltip-autocomplete ul li[aria-selected].autocomplete-option": {
+        backgroundColor: "var(--spectrum-global-color-gray-200)",
+      },
+      "& .binding-wrap": {
+        color: "var(--spectrum-global-color-blue-700)",
+        fontFamily: "monospace",
+      },
+    },
+    { dark }
+  )
+}
+
+export const buildHelperInfoNode = (completion, helper) => {
+  const ele = document.createElement("div")
+  ele.classList.add("info-bubble")
+
+  const exampleNodeHtml = helper.example
+    ? `<div class="binding__example">${helper.example}</div>`
+    : ""
+  const descriptionMarkup = sanitizeHtml(helper.description, {
+    allowedTags: [],
+    allowedAttributes: {},
+  })
+  const descriptionNodeHtml = `<div class="binding__description">${descriptionMarkup}</div>`
+
+  ele.innerHTML = `
+    ${exampleNodeHtml}
+    ${descriptionNodeHtml}
+  `
+  return ele
+}
+
+const toSpectrumIcon = name => {
+  return `<svg
+    class="spectrum-Icon spectrum-Icon--sizeM"
+    focusable="false"
+    aria-hidden="false"
+    aria-label="${name}-section-icon"
+  >
+    <use style="pointer-events: none;" xlink:href="#spectrum-icon-18-${name}" />
+  </svg>`
+}
+
+export const buildSectionHeader = (type, sectionName, icon, rank) => {
+  const ele = document.createElement("div")
+  ele.classList.add("info-section")
+  ele.classList.add(type)
+  ele.innerHTML = `${toSpectrumIcon(icon)}<span>${sectionName}</span>`
+  return {
+    name: sectionName,
+    header: () => ele,
+    rank,
+  }
+}
+
+export const helpersToCompletion = (helpers, mode) => {
+  const { type, name: sectionName, icon } = SECTIONS.HB_HELPER
+  const helperSection = buildSectionHeader(type, sectionName, icon, 99)
+
+  return Object.keys(helpers).reduce((acc, key) => {
+    let helper = helpers[key]
+    acc.push({
+      label: key,
+      info: completion => {
+        return buildHelperInfoNode(completion, helper)
+      },
+      type: "helper",
+      section: helperSection,
+      detail: "FUNCTION",
+      apply: (view, completion, from, to) => {
+        insertBinding(view, from, to, key, mode)
+      },
+    })
+    return acc
+  }, [])
+}
+
+export const getHelperCompletions = mode => {
+  const manifest = getManifest()
+  return Object.keys(manifest).reduce((acc, key) => {
+    acc = acc || []
+    return [...acc, ...helpersToCompletion(manifest[key], mode)]
+  }, [])
+}
+
+const bindingFilter = (options, query) => {
+  return options.filter(completion => {
+    const section_parsed = completion.section.name.toLowerCase()
+    const label_parsed = completion.label.toLowerCase()
+    const query_parsed = query.toLowerCase()
+
+    return (
+      section_parsed.includes(query_parsed) ||
+      label_parsed.includes(query_parsed)
+    )
+  })
+}
+
+export const hbAutocomplete = baseCompletions => {
+  async function coreCompletion(context) {
+    let bindingStart = context.matchBefore(EditorModes.Handlebars.match)
+
+    let options = baseCompletions || []
+
+    if (!bindingStart) {
+      return null
+    }
+    // Accommodate spaces
+    const match = bindingStart.text.match(/{{[\s]*/)
+    const query = bindingStart.text.replace(match[0], "")
+    let filtered = bindingFilter(options, query)
+
+    return {
+      from: bindingStart.from + match[0].length,
+      filter: false,
+      options: filtered,
+    }
+  }
+
+  return coreCompletion
+}
+
+export const jsAutocomplete = baseCompletions => {
+  async function coreCompletion(context) {
+    let jsBinding = context.matchBefore(/\$\("[\s\w]*/)
+    let options = baseCompletions || []
+
+    if (jsBinding) {
+      // Accommodate spaces
+      const match = jsBinding.text.match(/\$\("[\s]*/)
+      const query = jsBinding.text.replace(match[0], "")
+      let filtered = bindingFilter(options, query)
+      return {
+        from: jsBinding.from + match[0].length,
+        filter: false,
+        options: filtered,
+      }
+    }
+
+    return null
+  }
+
+  return coreCompletion
+}
+
+export const buildBindingInfoNode = (completion, binding) => {
+  const ele = document.createElement("div")
+  ele.classList.add("info-bubble")
+
+  const exampleNodeHtml = binding.readableBinding
+    ? `<div class="binding__example">{{ ${binding.readableBinding} }}</div>`
+    : ""
+
+  const descriptionNodeHtml = binding.description
+    ? `<div class="binding__description">${binding.description}</div>`
+    : ""
+
+  ele.innerHTML = `
+    ${exampleNodeHtml}
+    ${descriptionNodeHtml}
+  `
+  return ele
+}
+
+// Readdress these methods. They shouldn't be used
+export const hbInsert = (value, from, to, text) => {
+  let parsedInsert = ""
+
+  const left = from ? value.substring(0, from) : ""
+  const right = to ? value.substring(to) : ""
+
+  if (!left.includes("{{") || !right.includes("}}")) {
+    parsedInsert = `{{ ${text} }}`
+  } else {
+    parsedInsert = ` ${text} `
+  }
+
+  return parsedInsert
+}
+
+export function jsInsert(value, from, to, text, { helper } = {}) {
+  let parsedInsert = ""
+
+  const left = from ? value.substring(0, from) : ""
+  const right = to ? value.substring(to) : ""
+
+  if (helper) {
+    parsedInsert = `helpers.${text}()`
+  } else if (!left.includes('$("') || !right.includes('")')) {
+    parsedInsert = `$("${text}")`
+  } else {
+    parsedInsert = text
+  }
+
+  return parsedInsert
+}
+
+// Autocomplete apply behaviour
+export const insertBinding = (view, from, to, text, mode) => {
+  let parsedInsert
+
+  if (mode.name == "javascript") {
+    parsedInsert = jsInsert(view.state.doc?.toString(), from, to, text)
+  } else if (mode.name == "handlebars") {
+    parsedInsert = hbInsert(view.state.doc?.toString(), from, to, text)
+  } else {
+    console.log("Unsupported")
+    return
+  }
+
+  let bindingClosePattern = mode.name == "javascript" ? /[\s]*"\)/ : /[\s]*}}/
+  let sliced = view.state.doc?.toString().slice(to)
+
+  const rightBrace = sliced.match(bindingClosePattern)
+  let cursorPos = from + parsedInsert.length
+
+  if (rightBrace) {
+    cursorPos = from + parsedInsert.length + rightBrace[0].length
+  }
+
+  view.dispatch({
+    changes: {
+      from,
+      to,
+      insert: parsedInsert,
+    },
+    selection: {
+      anchor: cursorPos,
+    },
+  })
+}
+
+export const bindingsToCompletions = (bindings, mode) => {
+  const bindingByCategory = groupBy(bindings, "category")
+  const categoryMeta = bindings?.reduce((acc, ele) => {
+    acc[ele.category] = acc[ele.category] || {}
+
+    if (ele.icon) {
+      acc[ele.category]["icon"] = acc[ele.category]["icon"] || ele.icon
+    }
+    if (typeof ele.display?.rank == "number") {
+      acc[ele.category]["rank"] = acc[ele.category]["rank"] || ele.display.rank
+    }
+    return acc
+  }, {})
+
+  const completions = Object.keys(bindingByCategory).reduce((comps, catKey) => {
+    const { icon, rank } = categoryMeta[catKey] || {}
+
+    const bindindSectionHeader = buildSectionHeader(
+      bindingByCategory.type,
+      catKey,
+      icon || "",
+      typeof rank == "number" ? rank : 1
+    )
+
+    return [
+      ...comps,
+      ...bindingByCategory[catKey].reduce((acc, binding) => {
+        let displayType = binding.fieldSchema?.type || binding.display?.type
+        acc.push({
+          label: binding.display?.name || "NO NAME",
+          info: completion => {
+            return buildBindingInfoNode(completion, binding)
+          },
+          type: "binding",
+          detail: displayType,
+          section: bindindSectionHeader,
+          apply: (view, completion, from, to) => {
+            insertBinding(view, from, to, binding.readableBinding, mode)
+          },
+        })
+        return acc
+      }, []),
+    ]
+  }, [])
+
+  return completions
+}
diff --git a/packages/builder/src/components/common/DashCard.svelte b/packages/builder/src/components/common/DashCard.svelte
index ac621ae68e..c6b89d56ff 100644
--- a/packages/builder/src/components/common/DashCard.svelte
+++ b/packages/builder/src/components/common/DashCard.svelte
@@ -28,7 +28,6 @@
   .dash-card {
     background: var(--spectrum-alias-background-color-primary);
     border-radius: var(--border-radius-s);
-    overflow: hidden;
     min-height: 170px;
   }
   .dash-card-header {
diff --git a/packages/builder/src/components/common/FontAwesomeIcon.svelte b/packages/builder/src/components/common/FontAwesomeIcon.svelte
index 84c16abeda..364b3af25f 100644
--- a/packages/builder/src/components/common/FontAwesomeIcon.svelte
+++ b/packages/builder/src/components/common/FontAwesomeIcon.svelte
@@ -8,6 +8,7 @@
     faLock,
     faFileArrowUp,
     faChevronLeft,
+    faCircleInfo,
   } from "@fortawesome/free-solid-svg-icons"
   import { faGithub, faDiscord } from "@fortawesome/free-brands-svg-icons"
 
@@ -20,7 +21,8 @@
     faDiscord,
     faEnvelope,
     faFileArrowUp,
-    faChevronLeft
+    faChevronLeft,
+    faCircleInfo
   )
   dom.watch()
 </script>
diff --git a/packages/builder/src/components/common/HelpMenu.svelte b/packages/builder/src/components/common/HelpMenu.svelte
index 274565b255..06ff277d18 100644
--- a/packages/builder/src/components/common/HelpMenu.svelte
+++ b/packages/builder/src/components/common/HelpMenu.svelte
@@ -83,7 +83,7 @@
   .help {
     z-index: 2;
     position: absolute;
-    bottom: var(--spacing-xl);
+    bottom: 24px;
     right: 24px;
   }
 
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 3a1c6c4fee..3843eabf45 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -1,17 +1,13 @@
 <script>
-  import groupBy from "lodash/fp/groupBy"
   import {
-    Search,
-    TextArea,
     DrawerContent,
     Tabs,
     Tab,
     Body,
-    Layout,
     Button,
     ActionButton,
+    Heading,
     Icon,
-    Popover,
   } from "@budibase/bbui"
   import { createEventDispatcher, onMount } from "svelte"
   import {
@@ -23,11 +19,21 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
-  import { handlebarsCompletions } from "constants/completions"
-  import { addHBSBinding, addJSBinding } from "./utils"
-  import CodeMirrorEditor from "components/common/CodeMirrorEditor.svelte"
+  import { store } from "builderStore"
   import { convertToJS } from "@budibase/string-templates"
   import { admin } from "stores/portal"
+  import CodeEditor from "../CodeEditor/CodeEditor.svelte"
+  import {
+    getHelperCompletions,
+    jsAutocomplete,
+    hbAutocomplete,
+    EditorModes,
+    bindingsToCompletions,
+    hbInsert,
+    jsInsert,
+  } from "../CodeEditor"
+  import { getContext } from "svelte"
+  import BindingPicker from "./BindingPicker.svelte"
 
   const dispatch = createEventDispatcher()
 
@@ -41,54 +47,21 @@
   export let allowJS = false
   export let allowHelpers = true
 
-  let helpers = handlebarsCompletions()
+  const drawerActions = getContext("drawer-actions")
+  const bindingDrawerActions = getContext("binding-drawer-actions")
+
   let getCaretPosition
-  let search = ""
+  let insertAtPos
   let initialValueJS = typeof value === "string" && value?.startsWith("{{ js ")
-  let mode = initialValueJS ? "JavaScript" : "Handlebars"
+  let mode = initialValueJS ? "JavaScript" : "Text"
   let jsValue = initialValueJS ? value : null
   let hbsValue = initialValueJS ? null : value
-
-  let selectedCategory = null
-
-  let popover
-  let popoverAnchor
-  let hoverTarget
+  let sidebar = true
+  let targetMode = null
 
   $: usingJS = mode === "JavaScript"
-  $: searchRgx = new RegExp(search, "ig")
-  $: categories = Object.entries(groupBy("category", bindings))
-
-  $: bindingIcons = bindings?.reduce((acc, ele) => {
-    if (ele.icon) {
-      acc[ele.category] = acc[ele.category] || ele.icon
-    }
-    return acc
-  }, {})
-
-  $: categoryIcons = { ...bindingIcons, Helpers: "MagicWand" }
-
-  $: filteredCategories = categories
-    .map(([name, categoryBindings]) => ({
-      name,
-      bindings: categoryBindings?.filter(binding => {
-        return binding.readableBinding.match(searchRgx)
-      }),
-    }))
-    .filter(category => {
-      return (
-        category.bindings?.length > 0 &&
-        (!selectedCategory ? true : selectedCategory === category.name)
-      )
-    })
-
-  $: filteredHelpers = helpers?.filter(helper => {
-    return helper.label.match(searchRgx) || helper.description.match(searchRgx)
-  })
-
-  $: categoryNames = getCategoryNames(categories)
-
-  $: codeMirrorHints = bindings?.map(x => `$("${x.readableBinding}")`)
+  $: editorMode = mode == "JavaScript" ? EditorModes.JS : EditorModes.Handlebars
+  $: bindingCompletions = bindingsToCompletions(bindings, editorMode)
 
   const updateValue = val => {
     valid = isValid(readableToRuntimeBinding(bindings, val))
@@ -97,43 +70,30 @@
     }
   }
 
-  const getCategoryNames = categories => {
-    let names = [...categories.map(cat => cat[0])]
-    if (allowHelpers) {
-      names.push("Helpers")
-    }
-    return names
-  }
-
   // Adds a JS/HBS helper to the expression
-  const addHelper = (helper, js) => {
-    let tempVal
+  const onSelectHelper = (helper, js) => {
     const pos = getCaretPosition()
+    const { start, end } = pos
     if (js) {
-      const decoded = decodeJSBinding(jsValue)
-      tempVal = jsValue = encodeJSBinding(
-        addJSBinding(decoded, pos, helper.text, { helper: true })
-      )
+      let js = decodeJSBinding(jsValue)
+      const insertVal = jsInsert(js, start, end, helper.text, { helper: true })
+      insertAtPos({ start, end, value: insertVal })
     } else {
-      tempVal = hbsValue = addHBSBinding(hbsValue, pos, helper.text)
+      const insertVal = hbInsert(hbsValue, start, end, helper.text)
+      insertAtPos({ start, end, value: insertVal })
     }
-    updateValue(tempVal)
   }
 
   // Adds a data binding to the expression
-  const addBinding = (binding, { forceJS } = {}) => {
+  const onSelectBinding = (binding, { forceJS } = {}) => {
+    const { start, end } = getCaretPosition()
     if (usingJS || forceJS) {
       let js = decodeJSBinding(jsValue)
-      js = addJSBinding(js, getCaretPosition(), binding.readableBinding)
-      jsValue = encodeJSBinding(js)
-      updateValue(jsValue)
+      const insertVal = jsInsert(js, start, end, binding.readableBinding)
+      insertAtPos({ start, end, value: insertVal })
     } else {
-      hbsValue = addHBSBinding(
-        hbsValue,
-        getCaretPosition(),
-        binding.readableBinding
-      )
-      updateValue(hbsValue)
+      const insertVal = hbInsert(hbsValue, start, end, binding.readableBinding)
+      insertAtPos({ start, end, value: insertVal })
     }
   }
 
@@ -152,24 +112,25 @@
     updateValue(jsValue)
   }
 
+  const switchMode = () => {
+    if (targetMode == "Text") {
+      jsValue = null
+      updateValue(jsValue)
+    } else {
+      hbsValue = null
+      updateValue(hbsValue)
+    }
+    mode = targetMode + ""
+    targetMode = null
+  }
+
   const convert = () => {
     const runtime = readableToRuntimeBinding(bindings, hbsValue)
     const runtimeJs = encodeJSBinding(convertToJS(runtime))
     jsValue = runtimeToReadableBinding(bindings, runtimeJs)
     hbsValue = null
     mode = "JavaScript"
-    addBinding("", { forceJS: true })
-  }
-
-  const getHelperExample = (helper, js) => {
-    let example = helper.example || ""
-    if (js) {
-      example = convertToJS(example).split("\n")[0].split("= ")[1]
-      if (example === "null;") {
-        example = ""
-      }
-    }
-    return example || ""
+    onSelectBinding("", { forceJS: true })
   }
 
   onMount(() => {
@@ -177,332 +138,301 @@
   })
 </script>
 
-<span class="detailPopover">
-  <Popover
-    align="right-outside"
-    bind:this={popover}
-    anchor={popoverAnchor}
-    maxWidth={300}
-    dismissible={false}
-  >
-    <Layout gap="S">
-      <div class="helper">
-        {#if hoverTarget.title}
-          <div class="helper__name">{hoverTarget.title}</div>
-        {/if}
-        {#if hoverTarget.description}
-          <div class="helper__description">
-            {@html hoverTarget.description}
-          </div>
-        {/if}
-        {#if hoverTarget.example}
-          <pre class="helper__example">{hoverTarget.example}</pre>
-        {/if}
-      </div>
-    </Layout>
-  </Popover>
-</span>
+<span class="binding-drawer">
+  <DrawerContent>
+    <div class="main">
+      <Tabs
+        selected={mode}
+        on:select={onChangeMode}
+        beforeSwitch={selectedMode => {
+          if (selectedMode == mode) {
+            return true
+          }
 
-<DrawerContent>
-  <svelte:fragment slot="sidebar">
-    <Layout noPadding gap="S">
-      {#if selectedCategory}
-        <div>
-          <ActionButton
-            secondary
-            icon={"ArrowLeft"}
-            on:click={() => {
-              selectedCategory = null
-            }}
-          >
-            Back
-          </ActionButton>
-        </div>
-      {/if}
+          //Get the current mode value
+          const editorValue = usingJS ? decodeJSBinding(jsValue) : hbsValue
 
-      {#if !selectedCategory}
-        <div class="heading">Search</div>
-        <Search placeholder="Search" bind:value={search} />
-      {/if}
-
-      {#if !selectedCategory && !search}
-        <ul class="category-list">
-          {#each categoryNames as categoryName}
-            <li
-              on:click={() => {
-                selectedCategory = categoryName
-              }}
-            >
-              <Icon name={categoryIcons[categoryName]} />
-              <span class="category-name">{categoryName} </span>
-              <span class="category-chevron"><Icon name="ChevronRight" /></span>
-            </li>
-          {/each}
-        </ul>
-      {/if}
-
-      {#if selectedCategory || search}
-        {#each filteredCategories as category}
-          {#if category.bindings?.length}
-            <div class="cat-heading">
-              <Icon name={categoryIcons[category.name]} />{category.name}
-            </div>
-            <ul>
-              {#each category.bindings as binding}
-                <li
-                  class="binding"
-                  on:mouseenter={e => {
-                    popoverAnchor = e.target
-                    if (!binding.description) {
-                      return
-                    }
-                    hoverTarget = {
-                      title: binding.display?.name || binding.fieldSchema?.name,
-                      description: binding.description,
-                    }
-                    popover.show()
-                    e.stopPropagation()
-                  }}
-                  on:mouseleave={() => {
-                    popover.hide()
-                    popoverAnchor = null
-                    hoverTarget = null
-                  }}
-                  on:focus={() => {}}
-                  on:blur={() => {}}
-                  on:click={() => addBinding(binding)}
-                >
-                  <span class="binding__label">
-                    {#if binding.display?.name}
-                      {binding.display.name}
-                    {:else if binding.fieldSchema?.name}
-                      {binding.fieldSchema?.name}
-                    {:else}
-                      {binding.readableBinding}
-                    {/if}
-                  </span>
-
-                  {#if binding.display?.type || binding.fieldSchema?.type}
-                    <span class="binding__typeWrap">
-                      <span class="binding__type">
-                        {binding.display?.type || binding.fieldSchema?.type}
-                      </span>
-                    </span>
+          if (editorValue) {
+            targetMode = selectedMode
+            return false
+          }
+          return true
+        }}
+      >
+        <Tab title="Text">
+          <div class="main-content" class:binding-panel={sidebar}>
+            <div class="editor">
+              <div class="overlay-wrap">
+                {#if targetMode}
+                  <div class="mode-overlay">
+                    <div class="prompt-body">
+                      <Heading size="S">
+                        {`Switch to ${targetMode}?`}
+                      </Heading>
+                      <Body>This will discard anything in your binding</Body>
+                      <div class="switch-actions">
+                        <Button
+                          secondary
+                          size="S"
+                          on:click={() => {
+                            targetMode = null
+                          }}
+                        >
+                          No - keep text
+                        </Button>
+                        <Button cta size="S" on:click={switchMode}>
+                          Yes - discard text
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                {/if}
+                <CodeEditor
+                  value={hbsValue}
+                  on:change={onChangeHBSValue}
+                  bind:getCaretPosition
+                  bind:insertAtPos
+                  completions={[
+                    hbAutocomplete([
+                      ...bindingCompletions,
+                      ...getHelperCompletions(editorMode),
+                    ]),
+                  ]}
+                  placeholder=""
+                  height="100%"
+                />
+              </div>
+              <div class="binding-footer">
+                <div class="messaging">
+                  {#if !valid}
+                    <div class="syntax-error">
+                      Current Handlebars syntax is invalid, please check the
+                      guide
+                      <a href="https://handlebarsjs.com/guide/">here</a>
+                      for more details.
+                    </div>
+                  {:else}
+                    <Icon name="FlashOn" />
+                    <div class="messaging-wrap">
+                      <div>
+                        Add available bindings by typing &#123;&#123; or use the
+                        menu on the right
+                      </div>
+                    </div>
                   {/if}
-                </li>
-              {/each}
-            </ul>
-          {/if}
-        {/each}
-
-        {#if selectedCategory === "Helpers" || search}
-          {#if filteredHelpers?.length}
-            <div class="heading">Helpers</div>
-            <ul class="helpers">
-              {#each filteredHelpers as helper}
-                <li
-                  class="binding"
-                  on:click={() => addHelper(helper, usingJS)}
-                  on:mouseenter={e => {
-                    popoverAnchor = e.target
-                    if (!helper.displayText && helper.description) {
-                      return
-                    }
-                    hoverTarget = {
-                      title: helper.displayText,
-                      description: helper.description,
-                      example: getHelperExample(helper, usingJS),
-                    }
-                    popover.show()
-                    e.stopPropagation()
-                  }}
-                  on:mouseleave={() => {
-                    popover.hide()
-                    popoverAnchor = null
-                    hoverTarget = null
-                  }}
-                  on:focus={() => {}}
-                  on:blur={() => {}}
-                >
-                  <span class="binding__label">{helper.displayText}</span>
-                  <span class="binding__typeWrap">
-                    <span class="binding__type">function</span>
-                  </span>
-                </li>
-              {/each}
-            </ul>
-          {/if}
-        {/if}
-      {/if}
-    </Layout>
-  </svelte:fragment>
-  <div class="main">
-    <Tabs selected={mode} on:select={onChangeMode}>
-      <Tab title="Handlebars">
-        <div class="main-content">
-          <TextArea
-            bind:getCaretPosition
-            value={hbsValue}
-            on:change={onChangeHBSValue}
-            placeholder="Add text, or click the objects on the left to add them to the textbox."
-          />
-          {#if !valid}
-            <p class="syntax-error">
-              Current Handlebars syntax is invalid, please check the guide
-              <a href="https://handlebarsjs.com/guide/">here</a>
-              for more details.
-            </p>
-          {/if}
-          {#if $admin.isDev && allowJS}
-            <div class="convert">
-              <Button secondary on:click={convert}>Convert to JS</Button>
+                </div>
+                <div class="actions">
+                  {#if $admin.isDev && allowJS}
+                    <ActionButton
+                      secondary
+                      on:click={() => {
+                        convert()
+                        targetMode = null
+                      }}
+                    >
+                      Convert To JS
+                    </ActionButton>
+                  {/if}
+                  <ActionButton
+                    secondary
+                    icon={sidebar ? "RailRightClose" : "RailRightOpen"}
+                    on:click={() => {
+                      sidebar = !sidebar
+                    }}
+                  />
+                </div>
+              </div>
             </div>
-          {/if}
-        </div>
-      </Tab>
-      {#if allowJS}
-        <Tab title="JavaScript">
-          <div class="main-content">
-            <Layout noPadding gap="XS">
-              <CodeMirrorEditor
-                bind:getCaretPosition
-                height={200}
-                value={decodeJSBinding(jsValue)}
-                on:change={onChangeJSValue}
-                hints={codeMirrorHints}
-              />
-              <Body size="S">
-                JavaScript expressions are executed as functions, so ensure that
-                your expression returns a value.
-              </Body>
-            </Layout>
+
+            {#if sidebar}
+              <div class="binding-picker">
+                <BindingPicker
+                  {bindings}
+                  {allowHelpers}
+                  addHelper={onSelectHelper}
+                  addBinding={onSelectBinding}
+                  mode={editorMode}
+                />
+              </div>
+            {/if}
           </div>
         </Tab>
-      {/if}
-    </Tabs>
-  </div>
-</DrawerContent>
+        {#if allowJS}
+          <Tab title="JavaScript">
+            <div class="main-content" class:binding-panel={sidebar}>
+              <div class="editor">
+                <div class="overlay-wrap">
+                  {#if targetMode}
+                    <div class="mode-overlay">
+                      <div class="prompt-body">
+                        <Heading size="S">
+                          {`Switch to ${targetMode}?`}
+                        </Heading>
+                        <Body>This will discard anything in your binding</Body>
+                        <div class="switch-actions">
+                          <Button
+                            secondary
+                            size="S"
+                            on:click={() => {
+                              targetMode = null
+                            }}
+                          >
+                            No - keep javascript
+                          </Button>
+                          <Button cta size="S" on:click={switchMode}>
+                            Yes - discard javascript
+                          </Button>
+                        </div>
+                      </div>
+                    </div>
+                  {/if}
+
+                  <CodeEditor
+                    value={decodeJSBinding(jsValue)}
+                    on:change={onChangeJSValue}
+                    completions={[
+                      jsAutocomplete([
+                        ...bindingCompletions,
+                        ...getHelperCompletions(editorMode),
+                      ]),
+                    ]}
+                    mode={EditorModes.JS}
+                    bind:getCaretPosition
+                    bind:insertAtPos
+                    height="100%"
+                  />
+                </div>
+                <div class="binding-footer">
+                  <div class="messaging">
+                    <Icon name="FlashOn" />
+                    <div class="messaging-wrap">
+                      <div>
+                        Add available bindings by typing $ or use the menu on
+                        the right
+                      </div>
+                    </div>
+                  </div>
+                  <div class="actions">
+                    <ActionButton
+                      secondary
+                      icon={sidebar ? "RailRightClose" : "RailRightOpen"}
+                      on:click={() => {
+                        sidebar = !sidebar
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {#if sidebar}
+                <div class="binding-picker">
+                  <BindingPicker
+                    {bindings}
+                    {allowHelpers}
+                    addHelper={onSelectHelper}
+                    addBinding={onSelectBinding}
+                    mode={editorMode}
+                  />
+                </div>
+              {/if}
+            </div>
+          </Tab>
+        {/if}
+        <div class="drawer-actions">
+          <Button
+            secondary
+            quiet
+            on:click={() => {
+              store.actions.settings.propertyFocus(null)
+              drawerActions.hide()
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            cta
+            disabled={!valid}
+            on:click={() => {
+              bindingDrawerActions.save()
+            }}
+          >
+            Save
+          </Button>
+        </div>
+      </Tabs>
+    </div>
+  </DrawerContent>
+</span>
 
 <style>
-  ul.helpers li * {
-    pointer-events: none;
+  .binding-drawer :global(.container > .main) {
+    overflow: hidden;
+    height: 100%;
+    padding: 0px;
   }
-  ul.category-list li {
+
+  .binding-drawer :global(.container > .main > .main) {
+    overflow: hidden;
+    height: 100%;
     display: flex;
+    flex-direction: column;
+  }
+
+  .binding-drawer :global(.spectrum-Tabs-content) {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .binding-drawer :global(.spectrum-Tabs-content > div),
+  .binding-drawer :global(.spectrum-Tabs-content > div > div),
+  .binding-drawer :global(.spectrum-Tabs-content .main-content) {
+    height: 100%;
+  }
+
+  .binding-drawer .main-content {
+    grid-template-rows: unset;
+  }
+
+  .messaging {
+    display: flex;
+    align-items: center;
     gap: var(--spacing-m);
-    align-items: center;
-  }
-  ul.category-list .category-name {
-    font-weight: 600;
-    text-transform: capitalize;
-  }
-  ul.category-list .category-chevron {
+    min-width: 0;
     flex: 1;
-    text-align: right;
   }
-  ul.category-list .category-chevron :global(div.icon),
-  .cat-heading :global(div.icon) {
-    display: inline-block;
+  .messaging-wrap {
+    overflow: hidden;
   }
-  li.binding {
-    display: flex;
-    align-items: center;
-  }
-  li.binding .binding__typeWrap {
-    flex: 1;
-    text-align: right;
-    text-transform: capitalize;
+  .messaging-wrap > div {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
   }
   .main :global(textarea) {
     min-height: 202px !important;
   }
-  .main {
-    margin: calc(-1 * var(--spacing-xl));
-  }
+
   .main-content {
     padding: var(--spacing-s) var(--spacing-xl);
   }
 
-  .heading,
-  .cat-heading {
-    font-size: var(--font-size-s);
-    font-weight: 600;
-    text-transform: uppercase;
-    color: var(--spectrum-global-color-gray-600);
-  }
-
-  .cat-heading {
+  .main :global(.spectrum-Tabs div.drawer-actions) {
     display: flex;
     gap: var(--spacing-m);
-    align-items: center;
+    margin-left: auto;
   }
 
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+  .main :global(.spectrum-Tabs-content),
+  .main :global(.spectrum-Tabs-content .main-content) {
+    margin-top: 0px;
+    padding: 0px;
   }
 
-  li {
-    font-size: var(--font-size-s);
-    padding: var(--spacing-m);
-    border-radius: 4px;
-    background-color: var(--spectrum-global-color-gray-200);
-    transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
-      border-color 130ms ease-in-out;
-    word-wrap: break-word;
-  }
-  li:not(:last-of-type) {
-    margin-bottom: var(--spacing-s);
-  }
-  li :global(*) {
-    transition: color 130ms ease-in-out;
-  }
-  li:hover {
-    color: var(--spectrum-global-color-gray-900);
-    background-color: var(--spectrum-global-color-gray-50);
-    cursor: pointer;
-  }
-
-  .binding__label {
-    font-weight: 600;
-    text-transform: capitalize;
-  }
-
-  .binding__type {
-    font-family: var(--font-mono);
-    background-color: var(--spectrum-global-color-gray-200);
-    border-radius: var(--border-radius-s);
-    padding: 2px 4px;
-    margin-left: 2px;
-    font-weight: 600;
-  }
-
-  .helper {
+  .main :global(.spectrum-Tabs) {
     display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: flex-start;
-    gap: var(--spacing-xs);
-  }
-  .helper__name {
-    font-weight: bold;
-  }
-  .helper__description,
-  .helper__description :global(*) {
-    color: var(--spectrum-global-color-gray-700);
-  }
-  .helper__example {
-    white-space: normal;
-    margin: 0.5rem 0 0 0;
-    font-weight: 700;
-  }
-  .helper__description :global(p) {
-    margin: 0;
   }
 
   .syntax-error {
-    padding-top: var(--spacing-m);
     color: var(--red);
     font-size: 12px;
   }
@@ -511,7 +441,66 @@
     text-decoration: underline;
   }
 
-  .convert {
-    padding-top: var(--spacing-m);
+  .binding-footer {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+  .main-content {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 380px;
+  }
+  .main-content.binding-panel {
+    grid-template-columns: 1fr 320px;
+  }
+  .binding-picker {
+    border-left: 2px solid var(--border-light);
+    border-left: var(--border-light);
+    overflow: scroll;
+    height: 100%;
+  }
+  .editor {
+    padding: var(--spacing-xl);
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xl);
+  }
+  .overlay-wrap {
+    position: relative;
+    flex: 1;
+  }
+  .mode-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(
+      --spectrum-textfield-m-background-color,
+      var(--spectrum-global-color-gray-50)
+    );
+    border-radius: var(--border-radius-s);
+  }
+  .prompt-body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--spacing-l);
+  }
+  .prompt-body .switch-actions {
+    display: flex;
+    gap: var(--spacing-l);
+  }
+
+  .binding-drawer :global(.code-editor),
+  .binding-drawer :global(.code-editor > div) {
+    height: 100%;
   }
 </style>
diff --git a/packages/builder/src/components/common/bindings/BindingPicker.svelte b/packages/builder/src/components/common/bindings/BindingPicker.svelte
new file mode 100644
index 0000000000..0f709fd262
--- /dev/null
+++ b/packages/builder/src/components/common/bindings/BindingPicker.svelte
@@ -0,0 +1,393 @@
+<script>
+  import groupBy from "lodash/fp/groupBy"
+  import { convertToJS } from "@budibase/string-templates"
+  import { Input, Layout, ActionButton, Icon, Popover } from "@budibase/bbui"
+  import { handlebarsCompletions } from "constants/completions"
+
+  export let addHelper
+  export let addBinding
+  export let bindings
+  export let mode
+  export let allowHelpers
+
+  let search = ""
+  let popover
+  let popoverAnchor
+  let hoverTarget
+  let helpers = handlebarsCompletions()
+
+  let selectedCategory
+
+  $: searchRgx = new RegExp(search, "ig")
+
+  // Icons
+  $: bindingIcons = bindings?.reduce((acc, ele) => {
+    if (ele.icon) {
+      acc[ele.category] = acc[ele.category] || ele.icon
+    }
+    return acc
+  }, {})
+  $: categoryIcons = { ...bindingIcons, Helpers: "MagicWand" }
+
+  $: categories = Object.entries(groupBy("category", bindings))
+  $: categoryNames = getCategoryNames(categories)
+
+  $: filteredCategories = categories
+    .map(([name, categoryBindings]) => ({
+      name,
+      bindings: categoryBindings?.filter(binding => {
+        return binding.readableBinding.match(searchRgx)
+      }),
+    }))
+    .filter(category => {
+      return (
+        category.bindings?.length > 0 &&
+        (!selectedCategory ? true : selectedCategory === category.name)
+      )
+    })
+  $: filteredHelpers = helpers?.filter(helper => {
+    return helper.label.match(searchRgx) || helper.description.match(searchRgx)
+  })
+
+  const getHelperExample = (helper, js) => {
+    let example = helper.example || ""
+    if (js) {
+      example = convertToJS(example).split("\n")[0].split("= ")[1]
+      if (example === "null;") {
+        example = ""
+      }
+    }
+    return example || ""
+  }
+
+  const getCategoryNames = categories => {
+    let names = [...categories.map(cat => cat[0])]
+    if (allowHelpers) {
+      names.push("Helpers")
+    }
+    return names
+  }
+</script>
+
+<span class="detailPopover">
+  <Popover
+    align="left-outside"
+    bind:this={popover}
+    anchor={popoverAnchor}
+    maxWidth={300}
+    dismissible={false}
+  >
+    <Layout gap="S">
+      <div class="helper">
+        {#if hoverTarget.title}
+          <div class="helper__name">{hoverTarget.title}</div>
+        {/if}
+        {#if hoverTarget.description}
+          <div class="helper__description">
+            {@html hoverTarget.description}
+          </div>
+        {/if}
+        {#if hoverTarget.example}
+          <pre class="helper__example">{hoverTarget.example}</pre>
+        {/if}
+      </div>
+    </Layout>
+  </Popover>
+</span>
+
+<Layout noPadding gap="S">
+  {#if selectedCategory}
+    <div class="sub-section-back">
+      <ActionButton
+        secondary
+        icon={"ArrowLeft"}
+        on:click={() => {
+          selectedCategory = null
+        }}
+      >
+        Back
+      </ActionButton>
+    </div>
+  {/if}
+
+  {#if !selectedCategory}
+    <div class="search">
+      <span class="search-input">
+        <Input
+          placeholder={"Search for bindings"}
+          autocomplete="off"
+          bind:value={search}
+        />
+      </span>
+
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <span
+        class="search-input-icon"
+        on:click={() => {
+          if (!search) {
+            return
+          }
+          search = null
+        }}
+        class:searching={search}
+      >
+        <Icon name={search ? "Close" : "Search"} />
+      </span>
+    </div>
+  {/if}
+
+  {#if !selectedCategory && !search}
+    <ul class="category-list">
+      {#each categoryNames as categoryName}
+        <li
+          on:click={() => {
+            selectedCategory = categoryName
+          }}
+        >
+          <Icon name={categoryIcons[categoryName]} />
+          <span class="category-name">{categoryName} </span>
+          <span class="category-chevron"><Icon name="ChevronRight" /></span>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+
+  {#if selectedCategory || search}
+    {#each filteredCategories as category}
+      {#if category.bindings?.length}
+        <div class="sub-section">
+          <div class="cat-heading">
+            <Icon name={categoryIcons[category.name]} />{category.name}
+          </div>
+          <ul>
+            {#each category.bindings as binding}
+              <!-- svelte-ignore a11y-click-events-have-key-events -->
+              <li
+                class="binding"
+                on:mouseenter={e => {
+                  popoverAnchor = e.target
+                  if (!binding.description) {
+                    return
+                  }
+                  hoverTarget = {
+                    title: binding.display?.name || binding.fieldSchema?.name,
+                    description: binding.description,
+                  }
+                  popover.show()
+                  e.stopPropagation()
+                }}
+                on:mouseleave={() => {
+                  popover.hide()
+                  popoverAnchor = null
+                  hoverTarget = null
+                }}
+                on:focus={() => {}}
+                on:blur={() => {}}
+                on:click={() => addBinding(binding)}
+              >
+                <span class="binding__label">
+                  {#if binding.display?.name}
+                    {binding.display.name}
+                  {:else if binding.fieldSchema?.name}
+                    {binding.fieldSchema?.name}
+                  {:else}
+                    {binding.readableBinding}
+                  {/if}
+                </span>
+
+                {#if binding.display?.type || binding.fieldSchema?.type}
+                  <span class="binding__typeWrap">
+                    <span class="binding__type">
+                      {binding.display?.type || binding.fieldSchema?.type}
+                    </span>
+                  </span>
+                {/if}
+              </li>
+            {/each}
+          </ul>
+        </div>
+      {/if}
+    {/each}
+
+    {#if selectedCategory === "Helpers" || search}
+      {#if filteredHelpers?.length}
+        <div class="sub-section">
+          <div class="cat-heading">Helpers</div>
+          <ul class="helpers">
+            {#each filteredHelpers as helper}
+              <li
+                class="binding"
+                on:click={() => addHelper(helper, mode.name == "javascript")}
+                on:mouseenter={e => {
+                  popoverAnchor = e.target
+                  if (!helper.displayText && helper.description) {
+                    return
+                  }
+                  hoverTarget = {
+                    title: helper.displayText,
+                    description: helper.description,
+                    example: getHelperExample(
+                      helper,
+                      mode.name == "javascript"
+                    ),
+                  }
+                  popover.show()
+                  e.stopPropagation()
+                }}
+                on:mouseleave={() => {
+                  popover.hide()
+                  popoverAnchor = null
+                  hoverTarget = null
+                }}
+                on:focus={() => {}}
+                on:blur={() => {}}
+              >
+                <span class="binding__label">{helper.displayText}</span>
+                <span class="binding__typeWrap">
+                  <span class="binding__type">function</span>
+                </span>
+              </li>
+            {/each}
+          </ul>
+        </div>
+      {/if}
+    {/if}
+  {/if}
+</Layout>
+
+<style>
+  .search :global(input) {
+    border: none;
+    border-radius: 0px;
+    background: none;
+    padding: 0px;
+  }
+
+  .search {
+    padding: var(--spacing-m) var(--spacing-l);
+    display: flex;
+    align-items: center;
+    border-top: 0px;
+    border-bottom: var(--border-light);
+    border-left: 2px solid transparent;
+    border-right: 2px solid transparent;
+    margin-right: 1px;
+    position: sticky;
+    top: 0;
+    background-color: var(--background);
+    z-index: 2;
+  }
+
+  .search-input {
+    flex: 1;
+  }
+
+  .search-input-icon.searching {
+    cursor: pointer;
+  }
+
+  ul.category-list {
+    padding: 0px var(--spacing-l);
+    padding-bottom: var(--spacing-l);
+  }
+  .sub-section {
+    padding: var(--spacing-l);
+    padding-top: 0px;
+  }
+  .sub-section-back {
+    padding: var(--spacing-l);
+    padding-top: var(--spacing-xl);
+    padding-bottom: 0px;
+  }
+  .cat-heading {
+    margin-bottom: var(--spacing-l);
+  }
+  ul.helpers li * {
+    pointer-events: none;
+  }
+  ul.category-list li {
+    display: flex;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
+  ul.category-list .category-name {
+    font-weight: 600;
+    text-transform: capitalize;
+  }
+  ul.category-list .category-chevron {
+    flex: 1;
+    text-align: right;
+  }
+  ul.category-list .category-chevron :global(div.icon),
+  .cat-heading :global(div.icon) {
+    display: inline-block;
+  }
+  li.binding {
+    display: flex;
+    align-items: center;
+  }
+  li.binding .binding__typeWrap {
+    flex: 1;
+    text-align: right;
+    text-transform: capitalize;
+  }
+
+  :global(.drawer-actions) {
+    display: flex;
+    gap: var(--spacing-m);
+  }
+
+  .cat-heading {
+    font-size: var(--font-size-s);
+    font-weight: 600;
+    text-transform: uppercase;
+    color: var(--spectrum-global-color-gray-600);
+  }
+
+  .cat-heading {
+    display: flex;
+    gap: var(--spacing-m);
+    align-items: center;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    font-size: var(--font-size-s);
+    padding: var(--spacing-m);
+    border-radius: 4px;
+    background-color: var(--spectrum-global-color-gray-200);
+    transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
+      border-color 130ms ease-in-out;
+    word-wrap: break-word;
+  }
+  li:not(:last-of-type) {
+    margin-bottom: var(--spacing-s);
+  }
+  li :global(*) {
+    transition: color 130ms ease-in-out;
+  }
+  li:hover {
+    color: var(--spectrum-global-color-gray-900);
+    background-color: var(--spectrum-global-color-gray-50);
+    cursor: pointer;
+  }
+
+  .binding__label {
+    font-weight: 600;
+    text-transform: capitalize;
+  }
+
+  .binding__type {
+    font-family: var(--font-mono);
+    background-color: var(--spectrum-global-color-gray-200);
+    border-radius: var(--border-radius-s);
+    padding: 2px 4px;
+    margin-left: 2px;
+    font-weight: 600;
+  }
+</style>
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
index 9a05b90567..bb01d557b8 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
@@ -5,7 +5,7 @@
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
   import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, setContext } from "svelte"
   import { isJSBinding } from "@budibase/string-templates"
 
   export let panel = ClientBindingPanel
@@ -34,6 +34,10 @@
     bindingDrawer.hide()
   }
 
+  setContext("binding-drawer-actions", {
+    save: handleClose,
+  })
+
   const onChange = (value, optionPicked) => {
     // Add HBS braces if picking binding
     if (optionPicked && !options?.includes(value)) {
@@ -63,7 +67,6 @@
     on:pick={e => onChange(e.detail, true)}
     on:blur={() => dispatch("blur")}
     {placeholder}
-    options={allOptions}
     {error}
   />
   {#if !disabled}
@@ -77,6 +80,7 @@
   <svelte:fragment slot="description">
     Add the objects on the left to enrich your text.
   </svelte:fragment>
+
   <Button cta slot="buttons" on:click={handleClose} disabled={!valid}>
     Save
   </Button>
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index cc64e28835..f41b66bd77 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -4,8 +4,11 @@
     readableToRuntimeBinding,
     runtimeToReadableBinding,
   } from "builderStore/dataBinding"
+
+  import { store } from "builderStore"
+
   import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
-  import { createEventDispatcher } from "svelte"
+  import { createEventDispatcher, setContext } from "svelte"
   import { isJSBinding } from "@budibase/string-templates"
 
   export let panel = ClientBindingPanel
@@ -20,6 +23,7 @@
   export let allowHelpers = true
   export let updateOnChange = true
   export let drawerLeft
+  export let key
 
   const dispatch = createEventDispatcher()
   let bindingDrawer
@@ -32,10 +36,15 @@
 
   const saveBinding = () => {
     onChange(tempValue)
+    store.actions.settings.propertyFocus(null)
     onBlur()
     bindingDrawer.hide()
   }
 
+  setContext("binding-drawer-actions", {
+    save: saveBinding,
+  })
+
   const onChange = value => {
     currentVal = readableToRuntimeBinding(bindings, value)
     dispatch("change", currentVal)
@@ -58,12 +67,24 @@
     {updateOnChange}
   />
   {#if !disabled}
-    <div class="icon" on:click={bindingDrawer.show}>
+    <div
+      class="icon"
+      on:click={() => {
+        store.actions.settings.propertyFocus(key)
+        bindingDrawer.show()
+      }}
+    >
       <Icon size="S" name="FlashOn" />
     </div>
   {/if}
 </div>
-<Drawer {fillWidth} bind:this={bindingDrawer} {title} left={drawerLeft}>
+<Drawer
+  {fillWidth}
+  bind:this={bindingDrawer}
+  {title}
+  left={drawerLeft}
+  headless
+>
   <svelte:fragment slot="description">
     Add the objects on the left to enrich your text.
   </svelte:fragment>
diff --git a/packages/builder/src/components/deploy/AppActions.svelte b/packages/builder/src/components/deploy/AppActions.svelte
index daed564204..9813237317 100644
--- a/packages/builder/src/components/deploy/AppActions.svelte
+++ b/packages/builder/src/components/deploy/AppActions.svelte
@@ -113,109 +113,113 @@
   })
 </script>
 
-<div class="action-top-nav">
-  <div class="action-buttons">
-    <div class="version">
-      <VersionModal />
-    </div>
-    <RevertModal />
-
-    {#if isPublished}
-      <div class="publish-popover">
-        <div bind:this={publishPopoverAnchor}>
-          <ActionButton
-            quiet
-            icon="Globe"
-            size="M"
-            tooltip="Your published app"
-            on:click={publishPopover.show()}
-          />
-        </div>
-        <Popover
-          bind:this={publishPopover}
-          align="right"
-          disabled={!isPublished}
-          anchor={publishPopoverAnchor}
-          offset={10}
-        >
-          <div class="popover-content">
-            <Layout noPadding gap="M">
-              <Heading size="XS">Your published app</Heading>
-              <Body size="S">
-                <span class="publish-popover-message">
-                  {processStringSync(
-                    "Last published {{ duration time 'millisecond' }} ago",
-                    {
-                      time:
-                        new Date().getTime() -
-                        new Date(latestDeployments[0].updatedAt).getTime(),
-                    }
-                  )}
-                </span>
-              </Body>
-              <div class="buttons">
-                <Button
-                  warning={true}
-                  icon="GlobeStrike"
-                  disabled={!isPublished}
-                  on:click={unpublishApp}
-                >
-                  Unpublish
-                </Button>
-                <Button cta on:click={viewApp}>View app</Button>
-              </div>
-            </Layout>
-          </div>
-        </Popover>
+{#if $store.hasLock}
+  <div class="action-top-nav">
+    <div class="action-buttons">
+      <div class="version">
+        <VersionModal />
       </div>
-    {/if}
+      <RevertModal />
 
-    {#if !isPublished}
-      <ActionButton
-        quiet
-        icon="GlobeStrike"
-        size="M"
-        tooltip="Your app has not been published yet"
-        disabled
-      />
-    {/if}
+      {#if isPublished}
+        <div class="publish-popover">
+          <div bind:this={publishPopoverAnchor}>
+            <ActionButton
+              quiet
+              icon="Globe"
+              size="M"
+              tooltip="Your published app"
+              on:click={publishPopover.show()}
+            />
+          </div>
+          <Popover
+            bind:this={publishPopover}
+            align="right"
+            disabled={!isPublished}
+            anchor={publishPopoverAnchor}
+            offset={10}
+          >
+            <div class="popover-content">
+              <Layout noPadding gap="M">
+                <Heading size="XS">Your published app</Heading>
+                <Body size="S">
+                  <span class="publish-popover-message">
+                    {processStringSync(
+                      "Last published {{ duration time 'millisecond' }} ago",
+                      {
+                        time:
+                          new Date().getTime() -
+                          new Date(latestDeployments[0].updatedAt).getTime(),
+                      }
+                    )}
+                  </span>
+                </Body>
+                <div class="buttons">
+                  <Button
+                    warning={true}
+                    icon="GlobeStrike"
+                    disabled={!isPublished}
+                    on:click={unpublishApp}
+                  >
+                    Unpublish
+                  </Button>
+                  <Button cta on:click={viewApp}>View app</Button>
+                </div>
+              </Layout>
+            </div>
+          </Popover>
+        </div>
+      {/if}
 
-    <TourWrap
-      tourStepKey={$store.onboarding
-        ? TOUR_STEP_KEYS.BUILDER_USER_MANAGEMENT
-        : TOUR_STEP_KEYS.FEATURE_USER_MANAGEMENT}
-    >
-      <span id="builder-app-users-button">
+      {#if !isPublished}
         <ActionButton
           quiet
-          icon="UserGroup"
+          icon="GlobeStrike"
           size="M"
-          on:click={() => {
-            store.update(state => {
-              state.builderSidePanel = true
-              return state
-            })
-          }}
-        >
-          Users
-        </ActionButton>
-      </span>
-    </TourWrap>
-  </div>
-</div>
+          tooltip="Your app has not been published yet"
+          disabled
+        />
+      {/if}
 
-<ConfirmDialog
-  bind:this={unpublishModal}
-  title="Confirm unpublish"
-  okText="Unpublish app"
-  onOk={confirmUnpublishApp}
->
-  Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
-</ConfirmDialog>
+      <TourWrap
+        tourStepKey={$store.onboarding
+          ? TOUR_STEP_KEYS.BUILDER_USER_MANAGEMENT
+          : TOUR_STEP_KEYS.FEATURE_USER_MANAGEMENT}
+      >
+        <span id="builder-app-users-button">
+          <ActionButton
+            quiet
+            icon="UserGroup"
+            size="M"
+            on:click={() => {
+              store.update(state => {
+                state.builderSidePanel = true
+                return state
+              })
+            }}
+          >
+            Users
+          </ActionButton>
+        </span>
+      </TourWrap>
+    </div>
+  </div>
+
+  <ConfirmDialog
+    bind:this={unpublishModal}
+    title="Confirm unpublish"
+    okText="Unpublish app"
+    onOk={confirmUnpublishApp}
+  >
+    Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
+  </ConfirmDialog>
+{/if}
 
 <div class="buttons">
   <Button on:click={previewApp} secondary>Preview</Button>
-  <DeployModal onOk={completePublish} />
+  {#if $store.hasLock}
+    <DeployModal onOk={completePublish} />
+  {/if}
 </div>
 
 <style>
diff --git a/packages/builder/src/components/deploy/RevertModal.svelte b/packages/builder/src/components/deploy/RevertModal.svelte
index 0c3372f8ec..364add9053 100644
--- a/packages/builder/src/components/deploy/RevertModal.svelte
+++ b/packages/builder/src/components/deploy/RevertModal.svelte
@@ -9,6 +9,8 @@
   import { store } from "builderStore"
   import { API } from "api"
 
+  export let disabled = false
+
   let revertModal
   let appName
 
@@ -34,6 +36,7 @@
   size="M"
   tooltip="Revert changes"
   on:click={revertModal.show}
+  {disabled}
 />
 
 <Modal bind:this={revertModal}>
diff --git a/packages/builder/src/components/design/Panel.svelte b/packages/builder/src/components/design/Panel.svelte
index dbf42c51a5..3968292ba9 100644
--- a/packages/builder/src/components/design/Panel.svelte
+++ b/packages/builder/src/components/design/Panel.svelte
@@ -58,6 +58,7 @@
     justify-content: flex-start;
     align-items: stretch;
     transition: width 130ms ease-out;
+    overflow: hidden;
   }
   .panel.borderLeft {
     border-left: var(--border-light);
diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index 39a82c20dd..31f51bf468 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@@ -17,14 +17,14 @@ import URLSelect from "./controls/URLSelect.svelte"
 import OptionsEditor from "./controls/OptionsEditor/OptionsEditor.svelte"
 import FormFieldSelect from "./controls/FormFieldSelect.svelte"
 import ValidationEditor from "./controls/ValidationEditor/ValidationEditor.svelte"
-import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
+import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
 import ColumnEditor from "./controls/ColumnEditor/ColumnEditor.svelte"
 import BasicColumnEditor from "./controls/ColumnEditor/BasicColumnEditor.svelte"
 import BarButtonList from "./controls/BarButtonList.svelte"
 import FieldConfiguration from "./controls/FieldConfiguration/FieldConfiguration.svelte"
 
 const componentMap = {
-  text: DrawerBindableCombobox,
+  text: DrawerBindableInput,
   select: Select,
   radio: RadioGroup,
   dataSource: DataSourceSelect,
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
index 8f2c286261..aa8e1af950 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/ButtonActionDrawer.svelte
@@ -126,8 +126,7 @@
   }
 
   const getAllBindings = (bindings, eventContextBindings, actions) => {
-    let allBindings = eventContextBindings.concat(bindings)
-
+    let allBindings = []
     if (!actions) {
       return []
     }
@@ -145,14 +144,35 @@
       .forEach(action => {
         // Check we have a binding for this action, and generate one if not
         const stateBinding = makeStateBinding(action.parameters.key)
-        const hasKey = allBindings.some(binding => {
+        const hasKey = bindings.some(binding => {
           return binding.runtimeBinding === stateBinding.runtimeBinding
         })
         if (!hasKey) {
-          allBindings.push(stateBinding)
+          bindings.push(stateBinding)
         }
       })
+    // Get which indexes are asynchronous automations as we want to filter them out from the bindings
+    const asynchronousAutomationIndexes = actions
+      .map((action, index) => {
+        if (
+          action[EVENT_TYPE_KEY] === "Trigger Automation" &&
+          !action.parameters?.synchronous
+        ) {
+          return index
+        }
+      })
+      .filter(index => index !== undefined)
 
+    // Based on the above, filter out the asynchronous automations from the bindings
+    if (asynchronousAutomationIndexes) {
+      allBindings = eventContextBindings
+        .filter((binding, index) => {
+          return !asynchronousAutomationIndexes.includes(index)
+        })
+        .concat(bindings)
+    } else {
+      allBindings = eventContextBindings.concat(bindings)
+    }
     return allBindings
   }
 </script>
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
index a2ffb144c0..4c54761650 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/TriggerAutomation.svelte
@@ -1,8 +1,8 @@
 <script>
-  import { Select, Label, Input, Checkbox } from "@budibase/bbui"
+  import { Select, Label, Input, Checkbox, Icon } from "@budibase/bbui"
   import { automationStore } from "builderStore"
   import SaveFields from "./SaveFields.svelte"
-  import { TriggerStepID } from "constants/backend/automations"
+  import { TriggerStepID, ActionStepID } from "constants/backend/automations"
 
   export let parameters = {}
   export let bindings = []
@@ -16,6 +16,14 @@
     ? AUTOMATION_STATUS.EXISTING
     : AUTOMATION_STATUS.NEW
 
+  $: {
+    if (automationStatus === AUTOMATION_STATUS.NEW) {
+      parameters.synchronous = false
+    }
+    parameters.synchronous = automations.find(
+      automation => automation._id === parameters.automationId
+    )?.synchronous
+  }
   $: automations = $automationStore.automations
     .filter(a => a.definition.trigger?.stepId === TriggerStepID.APP)
     .map(automation => {
@@ -23,10 +31,15 @@
         automation.definition.trigger.inputs.fields || {}
       ).map(([name, type]) => ({ name, type }))
 
+      let hasCollectBlock = automation.definition.steps.some(
+        step => step.stepId === ActionStepID.COLLECT
+      )
+
       return {
         name: automation.name,
         _id: automation._id,
         schema,
+        synchronous: hasCollectBlock,
       }
     })
   $: hasAutomations = automations && automations.length > 0
@@ -35,6 +48,8 @@
   )
   $: selectedSchema = selectedAutomation?.schema
 
+  $: error = parameters.timeout > 120 ? "Timeout must be less than 120s" : null
+
   const onFieldsChanged = e => {
     parameters.fields = Object.entries(e.detail || {}).reduce(
       (acc, [key, value]) => {
@@ -57,6 +72,14 @@
     parameters.fields = {}
     parameters.automationId = automations[0]?._id
   }
+
+  const onChange = value => {
+    let automationId = value.detail
+    parameters.synchronous = automations.find(
+      automation => automation._id === automationId
+    )?.synchronous
+    parameters.automationId = automationId
+  }
 </script>
 
 <div class="root">
@@ -85,6 +108,7 @@
 
     {#if automationStatus === AUTOMATION_STATUS.EXISTING}
       <Select
+        on:change={onChange}
         bind:value={parameters.automationId}
         placeholder="Choose automation"
         options={automations}
@@ -98,6 +122,29 @@
       />
     {/if}
 
+    {#if parameters.synchronous}
+      <Label small />
+
+      <div class="synchronous-info">
+        <Icon name="Info" />
+        <div>
+          <i
+            >This automation will run synchronously as it contains a Collect
+            step</i
+          >
+        </div>
+      </div>
+      <Label small />
+
+      <div class="timeout-width">
+        <Input
+          label="Timeout in seconds (120 max)"
+          type="number"
+          {error}
+          bind:value={parameters.timeout}
+        />
+      </div>
+    {/if}
     <Label small />
     <Checkbox
       text="Do not display default notification"
@@ -133,6 +180,9 @@
     max-width: 800px;
     margin: 0 auto;
   }
+  .timeout-width {
+    width: 30%;
+  }
 
   .params {
     display: grid;
@@ -142,6 +192,11 @@
     align-items: center;
   }
 
+  .synchronous-info {
+    display: flex;
+    gap: var(--spacing-s);
+  }
+
   .fields {
     margin-top: var(--spacing-l);
     display: grid;
diff --git a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json
index 97ac9aa0b6..bb21116213 100644
--- a/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json
+++ b/packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json
@@ -57,7 +57,13 @@
     {
       "name": "Trigger Automation",
       "type": "application",
-      "component": "TriggerAutomation"
+      "component": "TriggerAutomation",
+      "context": [
+        {
+          "label": "Automation Result",
+          "value": "result"
+        }
+      ]
     },
     {
       "name": "Update Field Value",
diff --git a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
index 30a05d4c6e..daa3f29592 100644
--- a/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
+++ b/packages/builder/src/components/design/settings/controls/PropertyControl.svelte
@@ -21,6 +21,7 @@
   export let componentBindings = []
   export let nested = false
   export let highlighted = false
+  export let propertyFocus = false
   export let info = null
 
   $: nullishValue = value == null || value === ""
@@ -72,6 +73,10 @@
     if (highlighted) {
       store.actions.settings.highlight(null)
     }
+    // To fix focus 'affect' when property is target of a drawer other actions in the builder.
+    if (propertyFocus) {
+      store.actions.settings.propertyFocus(null)
+    }
   })
 </script>
 
@@ -79,6 +84,7 @@
   class="property-control"
   class:wide={!label || labelHidden}
   class:highlighted={highlighted && nullishValue}
+  class:property-focus={propertyFocus}
 >
   {#if label && !labelHidden}
     <div class="label">
@@ -125,6 +131,14 @@
     background: var(--spectrum-global-color-gray-300);
     border-color: var(--spectrum-global-color-static-red-600);
   }
+
+  .property-control.property-focus :global(input) {
+    border-color: var(
+      --spectrum-textfield-m-border-color-down,
+      var(--spectrum-alias-border-color-mouse-focus)
+    );
+  }
+
   .label {
     margin-top: 16px;
     transform: translateY(-50%);
diff --git a/packages/builder/src/components/integration/QueryViewer.svelte b/packages/builder/src/components/integration/QueryViewer.svelte
index 7a76970ecb..3377ff3a88 100644
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { goto } from "@roxi/routify"
+  import { goto, beforeUrlChange } from "@roxi/routify"
   import {
     Icon,
     Select,
@@ -12,6 +12,8 @@
     Heading,
     Tabs,
     Tab,
+    Modal,
+    ModalContent,
   } from "@budibase/bbui"
   import { notifications, Divider } from "@budibase/bbui"
   import ExtraQueryConfig from "./ExtraQueryConfig.svelte"
@@ -29,6 +31,12 @@
 
   export let query
 
+  const resumeNavigation = () => {
+    if (typeof navigateTo == "string") {
+      $goto(typeof navigateTo == "string" ? `${navigateTo}` : navigateTo)
+    }
+  }
+
   const transformerDocs = "https://docs.budibase.com/docs/transformers"
 
   let fields = query?.schema ? schemaToFields(query.schema) : []
@@ -36,6 +44,31 @@
   let data = []
   let saveId
   let currentTab = "JSON"
+  let saveModal
+  let override = false
+  let navigateTo = null
+
+  // seed the transformer
+  if (query && !query.transformer) {
+    query.transformer = "return data"
+  }
+
+  // initialise a new empty schema
+  if (query && !query.schema) {
+    query.schema = {}
+  }
+
+  let queryStr = JSON.stringify(query)
+
+  $beforeUrlChange(event => {
+    const updated = JSON.stringify(query)
+
+    if (updated !== queryStr && !override) {
+      navigateTo = event.type == "pushstate" ? event.url : null
+      saveModal.show()
+      return false
+    } else return true
+  })
 
   $: datasource = $datasources.list.find(ds => ds._id === query.datasourceId)
   $: query.schema = fieldsToSchema(fields)
@@ -60,11 +93,6 @@
     }
   }
 
-  // seed the transformer
-  if (query && !query.transformer) {
-    query.transformer = "return data"
-  }
-
   function resetDependentFields() {
     if (query.fields.extra) {
       query.fields.extra = {}
@@ -101,22 +129,48 @@
     }
   }
 
+  // return the query.
   async function saveQuery() {
     try {
-      const { _id } = await queries.save(query.datasourceId, query)
-      saveId = _id
-      notifications.success(`Query saved successfully`)
+      const response = await queries.save(query.datasourceId, query)
+      saveId = response._id
 
-      // Go to the correct URL if we just created a new query
-      if (!query._rev) {
-        $goto(`../../${_id}`)
+      if (response?._rev) {
+        queryStr = JSON.stringify(query)
       }
+
+      return response
     } catch (error) {
       notifications.error("Error saving query")
     }
   }
 </script>
 
+<Modal
+  bind:this={saveModal}
+  on:hide={() => {
+    navigateTo = null
+  }}
+>
+  <ModalContent
+    title="You have unsaved changes"
+    confirmText="Save and Continue"
+    cancelText="Discard Changes"
+    size="L"
+    onConfirm={async () => {
+      await saveQuery()
+      override = true
+      resumeNavigation()
+    }}
+    onCancel={async () => {
+      override = true
+      resumeNavigation()
+    }}
+  >
+    <Body>Leaving this section will mean losing and changes to your query</Body>
+  </ModalContent>
+</Modal>
+
 <div class="wrapper">
   <Layout gap="S" noPadding>
     <Heading size="M">Query {integrationInfo?.friendlyName}</Heading>
@@ -125,7 +179,13 @@
     <div class="config">
       <div class="config-field">
         <Label>Query Name</Label>
-        <Input bind:value={query.name} />
+        <Input
+          value={query.name}
+          on:input={e => {
+            let newValue = e.target.value || ""
+            query.name = newValue.trim()
+          }}
+        />
       </div>
       {#if queryConfig}
         <div class="config-field">
@@ -149,18 +209,20 @@
           />
         {/if}
         {#key query.parameters}
-          <BindingBuilder
-            queryBindings={query.parameters}
-            bindable={false}
-            on:change={e => {
-              query.parameters = e.detail.map(binding => {
-                return {
-                  name: binding.name,
-                  default: binding.value,
-                }
-              })
-            }}
-          />
+          <div class="binding-wrap">
+            <BindingBuilder
+              queryBindings={query.parameters}
+              bindable={false}
+              on:change={e => {
+                query.parameters = e.detail.map(binding => {
+                  return {
+                    name: binding.name,
+                    default: binding.value,
+                  }
+                })
+              }}
+            />
+          </div>
         {/key}
       {/if}
     </div>
@@ -203,7 +265,18 @@
       <div class="viewer-controls">
         <Heading size="S">Results</Heading>
         <ButtonGroup gap="XS">
-          <Button cta disabled={queryInvalid} on:click={saveQuery}>
+          <Button
+            cta
+            disabled={queryInvalid}
+            on:click={async () => {
+              await saveQuery()
+              notifications.success(`Query saved successfully`)
+              // Go to the correct URL if we just created a new query
+              if (!query._rev) {
+                $goto(`../../${query._id}`)
+              }
+            }}
+          >
             Save Query
           </Button>
           <Button secondary on:click={previewQuery}>Run Query</Button>
@@ -274,4 +347,9 @@
     min-width: 150px;
     align-items: center;
   }
+
+  .binding-wrap :global(div.container) {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
 </style>
diff --git a/packages/builder/src/components/portal/onboarding/TourPopover.svelte b/packages/builder/src/components/portal/onboarding/TourPopover.svelte
index 68e2e68a49..d4958b386e 100644
--- a/packages/builder/src/components/portal/onboarding/TourPopover.svelte
+++ b/packages/builder/src/components/portal/onboarding/TourPopover.svelte
@@ -71,6 +71,9 @@
         tourStep.onComplete()
       }
       popover.hide()
+      if (tourStep.endRoute) {
+        $goto(tourStep.endRoute)
+      }
     }
   }
 
diff --git a/packages/builder/src/components/portal/onboarding/tours.js b/packages/builder/src/components/portal/onboarding/tours.js
index 3ca25b7481..ed7776fc2d 100644
--- a/packages/builder/src/components/portal/onboarding/tours.js
+++ b/packages/builder/src/components/portal/onboarding/tours.js
@@ -76,6 +76,7 @@ const getTours = () => {
         title: "Publish",
         layout: OnboardingPublish,
         route: "/builder/app/:application/design",
+        endRoute: "/builder/app/:application/data",
         query: ".toprightnav #builder-app-publish-button",
         onLoad: () => {
           tourEvent(TOUR_STEP_KEYS.BUILDER_APP_PUBLISH)
diff --git a/packages/builder/src/components/start/AppRow.svelte b/packages/builder/src/components/start/AppRow.svelte
index 194f897fdc..142c5c6e31 100644
--- a/packages/builder/src/components/start/AppRow.svelte
+++ b/packages/builder/src/components/start/AppRow.svelte
@@ -1,13 +1,14 @@
 <script>
-  import { Heading, Body, Button, Icon, notifications } from "@budibase/bbui"
-  import AppLockModal from "../common/AppLockModal.svelte"
+  import { Heading, Body, Button, Icon } from "@budibase/bbui"
   import { processStringSync } from "@budibase/string-templates"
   import { goto } from "@roxi/routify"
+  import { UserAvatar } from "@budibase/frontend-core"
 
   export let app
-
   export let lockedAction
 
+  $: editing = app?.lockedBy != null
+
   const handleDefaultClick = () => {
     if (window.innerWidth < 640) {
       goToOverview()
@@ -17,12 +18,6 @@
   }
 
   const goToBuilder = () => {
-    if (app.lockedOther) {
-      notifications.error(
-        `App locked by ${app.lockedBy.email}. Please allow lock to expire or have them unlock this app.`
-      )
-      return
-    }
     $goto(`../../app/${app.devId}`)
   }
 
@@ -44,7 +39,10 @@
   </div>
 
   <div class="updated">
-    {#if app.updatedAt}
+    {#if editing}
+      Currently editing
+      <UserAvatar user={app.lockedBy} />
+    {:else if app.updatedAt}
       {processStringSync("Updated {{ duration time 'millisecond' }} ago", {
         time: new Date().getTime() - new Date(app.updatedAt).getTime(),
       })}
@@ -59,12 +57,12 @@
   </div>
 
   <div class="app-row-actions">
-    <AppLockModal {app} buttonSize="M" />
-    <Button size="S" secondary on:click={lockedAction || goToOverview}
-      >Manage</Button
-    >
-    <Button size="S" primary on:click={lockedAction || goToBuilder}>Edit</Button
-    >
+    <Button size="S" secondary on:click={lockedAction || goToOverview}>
+      Manage
+    </Button>
+    <Button size="S" primary on:click={lockedAction || goToBuilder}>
+      Edit
+    </Button>
   </div>
 </div>
 
@@ -87,6 +85,9 @@
 
   .updated {
     color: var(--spectrum-global-color-gray-700);
+    display: flex;
+    align-items: center;
+    gap: 8px;
   }
 
   .title,
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 62194df3db..9e055cd798 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -1,12 +1,6 @@
 <script>
   import { writable, get as svelteGet } from "svelte/store"
-  import {
-    notifications,
-    Input,
-    ModalContent,
-    Dropzone,
-    Toggle,
-  } from "@budibase/bbui"
+  import { notifications, Input, ModalContent, Dropzone } from "@budibase/bbui"
   import { store, automationStore } from "builderStore"
   import { API } from "api"
   import { apps, admin, auth } from "stores/portal"
@@ -22,7 +16,6 @@
 
   let creating = false
   let defaultAppName
-  let includeSampleDB = true
 
   const values = writable({ name: "", url: null })
   const validation = createValidationStore()
@@ -117,8 +110,6 @@
         data.append("templateName", template.name)
         data.append("templateKey", template.key)
         data.append("templateFile", $values.file)
-      } else {
-        data.append("sampleData", includeSampleDB)
       }
 
       // Create App
@@ -213,15 +204,6 @@
       </div>
     {/if}
   </span>
-  {#if !template && !template?.fromFile}
-    <span>
-      <Toggle
-        text="Include sample data"
-        bind:value={includeSampleDB}
-        disabled={creating}
-      />
-    </span>
-  {/if}
 </ModalContent>
 
 <style>
diff --git a/packages/builder/src/constants/backend/automations.js b/packages/builder/src/constants/backend/automations.js
index e0cd5b6405..f89a126d3c 100644
--- a/packages/builder/src/constants/backend/automations.js
+++ b/packages/builder/src/constants/backend/automations.js
@@ -20,9 +20,14 @@ export const ActionStepID = {
   FILTER: "FILTER",
   QUERY_ROWS: "QUERY_ROWS",
   LOOP: "LOOP",
+  COLLECT: "COLLECT",
   // these used to be lowercase step IDs, maintain for backwards compat
   discord: "discord",
   slack: "slack",
   zapier: "zapier",
   integromat: "integromat",
 }
+
+export const Features = {
+  LOOPING: "LOOPING",
+}
diff --git a/packages/builder/src/pages/builder/app/[application]/_components/UserAvatars.svelte b/packages/builder/src/pages/builder/app/[application]/_components/UserAvatars.svelte
new file mode 100644
index 0000000000..0cd8c5bf6b
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/_components/UserAvatars.svelte
@@ -0,0 +1,28 @@
+<script>
+  import { UserAvatar } from "@budibase/frontend-core"
+
+  export let users = []
+
+  $: uniqueUsers = unique(users)
+
+  const unique = users => {
+    let uniqueUsers = {}
+    users?.forEach(user => {
+      uniqueUsers[user.email] = user
+    })
+    return Object.values(uniqueUsers)
+  }
+</script>
+
+<div class="avatars">
+  {#each uniqueUsers as user}
+    <UserAvatar {user} tooltipDirection="bottom" />
+  {/each}
+</div>
+
+<style>
+  .avatars {
+    display: flex;
+    gap: 4px;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
index ff728312c1..f13aa3dab6 100644
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { store, automationStore } from "builderStore"
+  import { store, automationStore, userStore } from "builderStore"
   import { roles, flags } from "stores/backend"
   import { auth } from "stores/portal"
   import { TENANT_FEATURE_FLAGS, isEnabled } from "helpers/featureFlags"
@@ -13,7 +13,6 @@
     Modal,
     notifications,
   } from "@budibase/bbui"
-
   import AppActions from "components/deploy/AppActions.svelte"
   import { API } from "api"
   import { isActive, goto, layout, redirect } from "@roxi/routify"
@@ -23,6 +22,7 @@
   import TourWrap from "components/portal/onboarding/TourWrap.svelte"
   import TourPopover from "components/portal/onboarding/TourPopover.svelte"
   import BuilderSidePanel from "./_components/BuilderSidePanel.svelte"
+  import UserAvatars from "./_components/UserAvatars.svelte"
   import { TOUR_KEYS, TOURS } from "components/portal/onboarding/tours.js"
 
   export let application
@@ -30,7 +30,9 @@
   let promise = getPackage()
   let hasSynced = false
   let commandPaletteModal
+  let loaded = false
 
+  $: loaded && initTour()
   $: selected = capitalise(
     $layout.children.find(layout => $isActive(layout.path))?.title ?? "data"
   )
@@ -43,6 +45,7 @@
       await automationStore.actions.fetch()
       await roles.fetch()
       await flags.fetch()
+      loaded = true
       return pkg
     } catch (error) {
       notifications.error(`Error initialising app: ${error?.message}`)
@@ -67,13 +70,18 @@
 
   // Event handler for the command palette
   const handleKeyDown = e => {
-    if (e.key === "k" && (e.ctrlKey || e.metaKey)) {
+    if (e.key === "k" && (e.ctrlKey || e.metaKey) && $store.hasLock) {
       e.preventDefault()
       commandPaletteModal.toggle()
     }
   }
 
   const initTour = async () => {
+    // Skip tour if we don't have the lock
+    if (!$store.hasLock) {
+      return
+    }
+
     // Check if onboarding is enabled.
     if (isEnabled(TENANT_FEATURE_FLAGS.ONBOARDING_TOUR)) {
       if (!$auth.user?.onboardedAt) {
@@ -110,7 +118,6 @@
         // check if user has beta access
         // const betaResponse = await API.checkBetaAccess($auth?.user?.email)
         // betaAccess = betaResponse.access
-        initTour()
       } catch (error) {
         notifications.error("Failed to sync with production database")
       }
@@ -119,10 +126,11 @@
   })
 
   onDestroy(() => {
-    store.update(state => {
-      state.appId = null
-      return state
-    })
+    // Run async on a slight delay to let other cleanup logic run without
+    // being confused by the store wiping
+    setTimeout(() => {
+      store.actions.reset()
+    }, 10)
   })
 </script>
 
@@ -134,74 +142,89 @@
 
 <div class="root">
   <div class="top-nav">
-    <div class="topleftnav">
-      <ActionMenu>
-        <div slot="control">
-          <Icon size="M" hoverable name="ShowMenu" />
-        </div>
-        <MenuItem on:click={() => $goto("../../portal/apps")}>
-          Exit to portal
-        </MenuItem>
-        <MenuItem
-          on:click={() => $goto(`../../portal/overview/${application}`)}
-        >
-          Overview
-        </MenuItem>
-        <MenuItem
-          on:click={() => $goto(`../../portal/overview/${application}/access`)}
-        >
-          Access
-        </MenuItem>
-        <MenuItem
-          on:click={() =>
-            $goto(`../../portal/overview/${application}/automation-history`)}
-        >
-          Automation history
-        </MenuItem>
-        <MenuItem
-          on:click={() => $goto(`../../portal/overview/${application}/backups`)}
-        >
-          Backups
-        </MenuItem>
+    {#if $store.initialised}
+      <div class="topleftnav">
+        <ActionMenu>
+          <div slot="control">
+            <Icon size="M" hoverable name="ShowMenu" />
+          </div>
+          <MenuItem on:click={() => $goto("../../portal/apps")}>
+            Exit to portal
+          </MenuItem>
+          <MenuItem
+            on:click={() => $goto(`../../portal/overview/${application}`)}
+          >
+            Overview
+          </MenuItem>
+          <MenuItem
+            on:click={() =>
+              $goto(`../../portal/overview/${application}/access`)}
+          >
+            Access
+          </MenuItem>
+          <MenuItem
+            on:click={() =>
+              $goto(`../../portal/overview/${application}/automation-history`)}
+          >
+            Automation history
+          </MenuItem>
+          <MenuItem
+            on:click={() =>
+              $goto(`../../portal/overview/${application}/backups`)}
+          >
+            Backups
+          </MenuItem>
 
-        <MenuItem
-          on:click={() =>
-            $goto(`../../portal/overview/${application}/name-and-url`)}
-        >
-          Name and URL
-        </MenuItem>
-        <MenuItem
-          on:click={() => $goto(`../../portal/overview/${application}/version`)}
-        >
-          Version
-        </MenuItem>
-      </ActionMenu>
-      <Heading size="XS">{$store.name}</Heading>
-    </div>
-    <div class="topcenternav">
-      <Tabs {selected} size="M">
-        {#each $layout.children as { path, title }}
-          <TourWrap tourStepKey={`builder-${title}-section`}>
-            <Tab
-              quiet
-              selected={$isActive(path)}
-              on:click={topItemNavigate(path)}
-              title={capitalise(title)}
-              id={`builder-${title}-tab`}
-            />
-          </TourWrap>
-        {/each}
-      </Tabs>
-    </div>
-    <div class="toprightnav">
-      <AppActions {application} />
-    </div>
+          <MenuItem
+            on:click={() =>
+              $goto(`../../portal/overview/${application}/name-and-url`)}
+          >
+            Name and URL
+          </MenuItem>
+          <MenuItem
+            on:click={() =>
+              $goto(`../../portal/overview/${application}/version`)}
+          >
+            Version
+          </MenuItem>
+        </ActionMenu>
+        <Heading size="XS">{$store.name}</Heading>
+      </div>
+      <div class="topcenternav">
+        {#if $store.hasLock}
+          <Tabs {selected} size="M">
+            {#each $layout.children as { path, title }}
+              <TourWrap tourStepKey={`builder-${title}-section`}>
+                <Tab
+                  quiet
+                  selected={$isActive(path)}
+                  on:click={topItemNavigate(path)}
+                  title={capitalise(title)}
+                  id={`builder-${title}-tab`}
+                />
+              </TourWrap>
+            {/each}
+          </Tabs>
+        {:else}
+          <div class="secondary-editor">
+            <Icon name="LockClosed" />
+            Another user is currently editing your screens and automations
+          </div>
+        {/if}
+      </div>
+      <div class="toprightnav">
+        <UserAvatars users={$userStore} />
+        <AppActions {application} />
+      </div>
+    {/if}
   </div>
   {#await promise}
     <!-- This should probably be some kind of loading state? -->
     <div class="loading" />
   {:then _}
-    <slot />
+    <div class="body">
+      <slot />
+    </div>
   {:catch error}
     <p>Something went wrong: {error.message}</p>
   {/await}
@@ -237,6 +260,7 @@
     box-sizing: border-box;
     align-items: stretch;
     border-bottom: var(--border-light);
+    z-index: 2;
   }
 
   .topleftnav {
@@ -270,4 +294,18 @@
     align-items: center;
     gap: var(--spacing-l);
   }
+
+  .secondary-editor {
+    align-self: center;
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+  }
+
+  .body {
+    flex: 1 1 auto;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
index 74dfe671ab..79ca5df168 100644
--- a/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automate/_layout.svelte
@@ -8,6 +8,15 @@
   import { onDestroy, onMount } from "svelte"
   import { syncURLToState } from "helpers/urlStateSync"
   import * as routify from "@roxi/routify"
+  import { store } from "builderStore"
+  import { redirect } from "@roxi/routify"
+
+  // Prevent access for other users than the lock holder
+  $: {
+    if (!$store.hasLock) {
+      $redirect("../data")
+    }
+  }
 
   // Keep URL and state in sync for selected screen ID
   const stopSyncing = syncURLToState({
diff --git a/packages/frontend-core/src/components/grid/controls/BetaButton.svelte b/packages/builder/src/pages/builder/app/[application]/data/_components/BetaButton.svelte
similarity index 50%
rename from packages/frontend-core/src/components/grid/controls/BetaButton.svelte
rename to packages/builder/src/pages/builder/app/[application]/data/_components/BetaButton.svelte
index e5069388e7..3cfe4b4d8d 100644
--- a/packages/frontend-core/src/components/grid/controls/BetaButton.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/BetaButton.svelte
@@ -2,13 +2,11 @@
   import { Button } from "@budibase/bbui"
 </script>
 
-<div class="beta-background" />
 <div class="beta">
-  Enjoying the Grid?
   <Button
     size="M"
     cta
-    on:click={() => window.open("https://t.maze.co/156382627", "_blank")}
+    on:click={() => window.open("https://t.maze.co/165900794", "_blank")}
   >
     Give Feedback
   </Button>
@@ -17,30 +15,16 @@
 <style>
   .beta {
     position: absolute;
-    bottom: 32px;
-    right: 32px;
+    bottom: 24px;
+    right: 24px;
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 16px;
+    z-index: 10;
   }
   .beta :global(.spectrum-Button) {
     background: var(--spectrum-global-color-magenta-400);
     border-color: var(--spectrum-global-color-magenta-400);
   }
-  .beta-background {
-    z-index: 0;
-    pointer-events: none;
-    position: absolute;
-    bottom: -230px;
-    right: -105px;
-    width: 1400px;
-    height: 320px;
-    transform: rotate(-22deg);
-    background: linear-gradient(
-      to top,
-      var(--cell-background) 20%,
-      transparent
-    );
-  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_components/DatasourceOption.svelte b/packages/builder/src/pages/builder/app/[application]/data/_components/DatasourceOption.svelte
new file mode 100644
index 0000000000..8afc930bae
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/_components/DatasourceOption.svelte
@@ -0,0 +1,51 @@
+<script>
+  import { Body, Label } from "@budibase/bbui"
+
+  export let title
+  export let description
+  export let disabled
+</script>
+
+<div on:click class:disabled class="option">
+  <div class="header">
+    <div class="icon">
+      <slot />
+    </div>
+    <Body>{title}</Body>
+  </div>
+  <Label>{description}</Label>
+</div>
+
+<style>
+  .option {
+    background-color: var(--background);
+    border: 1px solid var(--grey-4);
+    padding: 10px 16px 14px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .option :global(label) {
+    cursor: pointer;
+  }
+
+  .option:hover {
+    background-color: var(--background-alt);
+  }
+
+  .header {
+    display: flex;
+    margin-bottom: 8px;
+    align-items: center;
+  }
+
+  .icon {
+    display: flex;
+    margin-right: 8px;
+  }
+
+  .disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
index 8b401866f5..c0813fd2b8 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/_layout.svelte
@@ -1,25 +1,26 @@
 <script>
   import { Button, Layout } from "@budibase/bbui"
   import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
-  import CreateDatasourceModal from "components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte"
   import Panel from "components/design/Panel.svelte"
-
-  let modal
+  import { isActive, goto } from "@roxi/routify"
+  import BetaButton from "./_components/BetaButton.svelte"
 </script>
 
 <!-- routify:options index=1 -->
 <div class="data">
-  <Panel title="Sources" borderRight>
-    <Layout paddingX="L" paddingY="XL" gap="S">
-      <Button cta on:click={modal.show}>Add source</Button>
-      <CreateDatasourceModal bind:modal />
-      <DatasourceNavigator />
-    </Layout>
-  </Panel>
+  {#if !$isActive("./new")}
+    <Panel title="Sources" borderRight>
+      <Layout paddingX="L" paddingY="XL" gap="S">
+        <Button cta on:click={() => $goto("./new")}>Add source</Button>
+        <DatasourceNavigator />
+      </Layout>
+    </Panel>
+  {/if}
 
   <div class="content">
     <slot />
   </div>
+  <BetaButton />
 </div>
 
 <style>
@@ -40,5 +41,6 @@
     justify-content: flex-start;
     align-items: stretch;
     flex: 1 1 auto;
+    z-index: 1;
   }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/index.svelte
index b2aca1f7f3..47939f09b4 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/index.svelte
@@ -1,22 +1,17 @@
 <script>
   import { redirect } from "@roxi/routify"
   import { onMount } from "svelte"
-  import { admin } from "stores/portal"
-  import CreateDatasourceModal from "components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte"
   import { datasources } from "stores/backend"
 
-  let modal
-  $: setupComplete =
+  $: hasData =
     $datasources.list.find(x => (x._id = "bb_internal"))?.entities?.length >
       1 || $datasources.list.length > 1
 
   onMount(() => {
-    if (!setupComplete && !$admin.isDev) {
-      modal.show()
+    if (!hasData) {
+      $redirect("./new")
     } else {
       $redirect("./table")
     }
   })
 </script>
-
-<CreateDatasourceModal bind:modal />
diff --git a/packages/builder/src/pages/builder/app/[application]/data/new.svelte b/packages/builder/src/pages/builder/app/[application]/data/new.svelte
new file mode 100644
index 0000000000..fedaf013da
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/data/new.svelte
@@ -0,0 +1,257 @@
+<script>
+  import { API } from "api"
+  import { tables, datasources } from "stores/backend"
+
+  import { Icon, Modal, notifications, Heading, Body } from "@budibase/bbui"
+  import { params, goto } from "@roxi/routify"
+  import {
+    IntegrationTypes,
+    DatasourceTypes,
+    DEFAULT_BB_DATASOURCE_ID,
+  } from "constants/backend"
+  import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
+  import DatasourceConfigModal from "components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte"
+  import GoogleDatasourceConfigModal from "components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte"
+  import { createRestDatasource } from "builderStore/datasource"
+  import DatasourceOption from "./_components/DatasourceOption.svelte"
+  import IntegrationIcon from "components/backend/DatasourceNavigator/IntegrationIcon.svelte"
+  import ICONS from "components/backend/DatasourceNavigator/icons/index.js"
+  import FontAwesomeIcon from "components/common/FontAwesomeIcon.svelte"
+
+  let internalTableModal
+  let externalDatasourceModal
+  let integrations = []
+  let integration = null
+  let disabled = false
+  let promptUpload = false
+
+  $: hasData = $datasources.list.length > 1 || $tables.list.length > 1
+  $: hasDefaultData =
+    $datasources.list.findIndex(
+      datasource => datasource._id === DEFAULT_BB_DATASOURCE_ID
+    ) !== -1
+
+  const createSampleData = async () => {
+    disabled = true
+
+    try {
+      await API.addSampleData($params.application)
+      await tables.fetch()
+      await datasources.fetch()
+      $goto("./table")
+    } catch (e) {
+      disabled = false
+      notifications.error("Error creating datasource")
+    }
+  }
+
+  const handleIntegrationSelect = integrationType => {
+    const selected = integrations.find(([type]) => type === integrationType)[1]
+
+    // build the schema
+    const config = {}
+
+    for (let key of Object.keys(selected.datasource)) {
+      config[key] = selected.datasource[key].default
+    }
+
+    integration = {
+      type: integrationType,
+      plus: selected.plus,
+      config,
+      schema: selected.datasource,
+      auth: selected.auth,
+      features: selected.features || [],
+    }
+
+    if (selected.friendlyName) {
+      integration.name = selected.friendlyName
+    }
+
+    if (integration.type === IntegrationTypes.REST) {
+      disabled = true
+
+      // Skip modal for rest, create straight away
+      createRestDatasource(integration)
+        .then(response => {
+          $goto(`./datasource/${response._id}`)
+        })
+        .catch(() => {
+          disabled = false
+          notifications.error("Error creating datasource")
+        })
+    } else {
+      externalDatasourceModal.show()
+    }
+  }
+
+  const handleInternalTable = () => {
+    promptUpload = false
+    internalTableModal.show()
+  }
+
+  const handleDataImport = () => {
+    promptUpload = true
+    internalTableModal.show()
+  }
+
+  const handleInternalTableSave = table => {
+    notifications.success(`Table created successfully.`)
+    $goto(`./table/${table._id}`)
+  }
+
+  function sortIntegrations(integrations) {
+    let integrationsArray = Object.entries(integrations)
+
+    function getTypeOrder(schema) {
+      if (schema.type === DatasourceTypes.API) {
+        return 1
+      }
+
+      if (schema.type === DatasourceTypes.RELATIONAL) {
+        return 2
+      }
+
+      return schema.type?.charCodeAt(0)
+    }
+
+    integrationsArray.sort((a, b) => {
+      let typeOrderA = getTypeOrder(a[1])
+      let typeOrderB = getTypeOrder(b[1])
+
+      if (typeOrderA === typeOrderB) {
+        return a[1].friendlyName?.localeCompare(b[1].friendlyName)
+      }
+
+      return typeOrderA < typeOrderB ? -1 : 1
+    })
+
+    return integrationsArray
+  }
+
+  const fetchIntegrations = async () => {
+    const unsortedIntegrations = await API.getIntegrations()
+    integrations = sortIntegrations(unsortedIntegrations)
+  }
+
+  $: fetchIntegrations()
+</script>
+
+<Modal bind:this={internalTableModal}>
+  <CreateTableModal {promptUpload} afterSave={handleInternalTableSave} />
+</Modal>
+
+<Modal bind:this={externalDatasourceModal}>
+  {#if integration?.auth?.type === "google"}
+    <GoogleDatasourceConfigModal {integration} />
+  {:else}
+    <DatasourceConfigModal {integration} />
+  {/if}
+</Modal>
+
+<div class="page">
+  <div class="closeButton">
+    {#if hasData}
+      <Icon hoverable name="Close" on:click={$goto("./table")} />
+    {/if}
+  </div>
+  <div class="heading">
+    <Heading weight="light">Add new data source</Heading>
+  </div>
+
+  <div class="subHeading">
+    <Body>Get started with our Budibase DB</Body>
+    <div
+      role="tooltip"
+      title="Budibase DB is built with CouchDB"
+      class="tooltip"
+    >
+      <FontAwesomeIcon name="fa-solid fa-circle-info" />
+    </div>
+  </div>
+
+  <div class="options">
+    <DatasourceOption
+      on:click={handleInternalTable}
+      title="Create new table"
+      description="Non-relational"
+      {disabled}
+    >
+      <svelte:component this={ICONS.BUDIBASE} height="20" width="20" />
+    </DatasourceOption>
+    <DatasourceOption
+      on:click={createSampleData}
+      title="Use sample data"
+      description="Non-relational"
+      disabled={disabled || hasDefaultData}
+    >
+      <svelte:component this={ICONS.BUDIBASE} height="20" width="20" />
+    </DatasourceOption>
+    <DatasourceOption
+      on:click={handleDataImport}
+      title="Upload data"
+      description="Non-relational"
+      {disabled}
+    >
+      <svelte:component this={ICONS.BUDIBASE} height="20" width="20" />
+    </DatasourceOption>
+  </div>
+
+  <div class="subHeading">
+    <Body>Or connect to an external datasource</Body>
+  </div>
+
+  <div class="options">
+    {#each integrations as [key, value]}
+      <DatasourceOption
+        on:click={() => handleIntegrationSelect(key)}
+        title={value.friendlyName}
+        description={value.type}
+        {disabled}
+      >
+        <IntegrationIcon integrationType={key} schema={value} />
+      </DatasourceOption>
+    {/each}
+  </div>
+</div>
+
+<style>
+  .page {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .closeButton {
+    height: 38px;
+    display: flex;
+    justify-content: right;
+    width: 100%;
+  }
+
+  .heading {
+    margin-bottom: 12px;
+  }
+
+  .subHeading {
+    display: flex;
+    align-items: center;
+    margin-bottom: 24px;
+  }
+
+  .tooltip {
+    margin-left: 6px;
+  }
+
+  .options {
+    width: 100%;
+    display: grid;
+    column-gap: 24px;
+    row-gap: 24px;
+    grid-template-columns: repeat(auto-fit, 235px);
+    justify-content: center;
+    margin-bottom: 48px;
+    max-width: 1050px;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/data/query/[queryId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/query/[queryId]/index.svelte
index 7f665c3394..fadd32ac75 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/query/[queryId]/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/query/[queryId]/index.svelte
@@ -3,8 +3,10 @@
   import QueryViewer from "components/integration/QueryViewer.svelte"
   import RestQueryViewer from "components/integration/RestQueryViewer.svelte"
   import { IntegrationTypes } from "constants/backend"
+  import { cloneDeep } from "lodash/fp"
 
   $: query = $queries.selected
+  $: editableQuery = cloneDeep(query)
   $: datasource = $datasources.list.find(ds => ds._id === query?.datasourceId)
   $: isRestQuery = datasource?.source === IntegrationTypes.REST
 </script>
@@ -13,6 +15,6 @@
   {#if isRestQuery}
     <RestQueryViewer queryId={$queries.selectedQueryId} />
   {:else}
-    <QueryViewer {query} />
+    <QueryViewer query={editableQuery} />
   {/if}
 {/if}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
index 956e1f7a3b..e1b85b6f3f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentKeyHandler.svelte
@@ -101,7 +101,12 @@
     }
     // Ignore events when typing
     const activeTag = document.activeElement?.tagName.toLowerCase()
-    if (["input", "textarea"].indexOf(activeTag) !== -1 && e.key !== "Escape") {
+    const inCodeEditor =
+      document.activeElement?.classList?.contains("cm-content")
+    if (
+      (inCodeEditor || ["input", "textarea"].indexOf(activeTag) !== -1) &&
+      e.key !== "Escape"
+    ) {
       return
     }
     // Key events are always for the selected component
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
index 8fa0af45ed..78eecea76e 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
@@ -140,6 +140,7 @@
               nested={setting.nested}
               onChange={val => updateSetting(setting, val)}
               highlighted={$store.highlightedSettingKey === setting.key}
+              propertyFocus={$store.propertyFocus === setting.key}
               info={setting.info}
               props={{
                 // Generic settings
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte
index ec21d909aa..d23514ae6d 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_layout.svelte
@@ -1,2 +1,14 @@
+<script>
+  import { store } from "builderStore"
+  import { redirect } from "@roxi/routify"
+
+  // Prevent access for other users than the lock holder
+  $: {
+    if (!$store.hasLock) {
+      $redirect("../data")
+    }
+  }
+</script>
+
 <!-- routify:options index=2 -->
 <slot />
diff --git a/packages/builder/src/pages/builder/apps/index.svelte b/packages/builder/src/pages/builder/apps/index.svelte
index 4b77671345..1806d51b69 100644
--- a/packages/builder/src/pages/builder/apps/index.svelte
+++ b/packages/builder/src/pages/builder/apps/index.svelte
@@ -5,7 +5,6 @@
     Divider,
     ActionMenu,
     MenuItem,
-    Avatar,
     Page,
     Icon,
     Body,
@@ -22,6 +21,8 @@
   import { processStringSync } from "@budibase/string-templates"
   import Spaceman from "assets/bb-space-man.svg"
   import Logo from "assets/bb-emblem.svg"
+  import { UserAvatar } from "@budibase/frontend-core"
+  import { helpers } from "@budibase/shared-core"
 
   let loaded = false
   let userInfoModal
@@ -96,11 +97,7 @@
             <img class="logo" alt="logo" src={$organisation.logoUrl || Logo} />
             <ActionMenu align="right">
               <div slot="control" class="avatar">
-                <Avatar
-                  size="M"
-                  initials={$auth.initials}
-                  url={$auth.user.pictureUrl}
-                />
+                <UserAvatar user={$auth.user} showTooltip={false} />
                 <Icon size="XL" name="ChevronDown" />
               </div>
               <MenuItem icon="UserEdit" on:click={() => userInfoModal.show()}>
@@ -125,7 +122,7 @@
           </div>
           <Layout noPadding gap="XS">
             <Heading size="M">
-              Hey {$auth.user.firstName || $auth.user.email}
+              Hey {helpers.getUserLabel($auth.user)}
             </Heading>
             <Body>
               Welcome to the {$organisation.company} portal. Below you'll find the
diff --git a/packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte b/packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte
index 935d69812f..9faae70aa9 100644
--- a/packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte
+++ b/packages/builder/src/pages/builder/portal/_components/UserDropdown.svelte
@@ -1,11 +1,12 @@
 <script>
   import { auth } from "stores/portal"
-  import { ActionMenu, Avatar, MenuItem, Icon, Modal } from "@budibase/bbui"
+  import { ActionMenu, MenuItem, Icon, Modal } from "@budibase/bbui"
   import { goto } from "@roxi/routify"
   import ProfileModal from "components/settings/ProfileModal.svelte"
   import ChangePasswordModal from "components/settings/ChangePasswordModal.svelte"
   import ThemeModal from "components/settings/ThemeModal.svelte"
   import APIKeyModal from "components/settings/APIKeyModal.svelte"
+  import { UserAvatar } from "@budibase/frontend-core"
 
   let themeModal
   let profileModal
@@ -23,7 +24,7 @@
 
 <ActionMenu align="right">
   <div slot="control" class="user-dropdown">
-    <Avatar size="M" initials={$auth.initials} url={$auth.user.pictureUrl} />
+    <UserAvatar user={$auth.user} showTooltip={false} />
     <Icon size="XL" name="ChevronDown" />
   </div>
   <MenuItem icon="UserEdit" on:click={() => profileModal.show()}>
diff --git a/packages/builder/src/pages/builder/portal/account/auditLogs/_components/UserRenderer.svelte b/packages/builder/src/pages/builder/portal/account/auditLogs/_components/UserRenderer.svelte
index e36648447b..b655eac697 100644
--- a/packages/builder/src/pages/builder/portal/account/auditLogs/_components/UserRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/account/auditLogs/_components/UserRenderer.svelte
@@ -1,47 +1,9 @@
 <script>
-  import { Avatar, Tooltip } from "@budibase/bbui"
+  import { UserAvatar } from "@budibase/frontend-core"
+
   export let row
-
-  let showTooltip
-  const getInitials = user => {
-    let initials = ""
-    initials += user.firstName ? user.firstName[0] : ""
-    initials += user.lastName ? user.lastName[0] : ""
-
-    return initials === "" ? user.email[0] : initials
-  }
 </script>
 
 {#if row?.user?.email}
-  <div
-    class="container"
-    on:mouseover={() => (showTooltip = true)}
-    on:focus={() => (showTooltip = true)}
-    on:mouseleave={() => (showTooltip = false)}
-  >
-    <Avatar size="M" initials={getInitials(row.user)} />
-  </div>
-  {#if showTooltip}
-    <div class="tooltip">
-      <Tooltip textWrapping text={row.user.email} direction="bottom" />
-    </div>
-  {/if}
+  <UserAvatar user={row.user} />
 {/if}
-
-<style>
-  .container {
-    position: relative;
-  }
-  .tooltip {
-    z-index: 1;
-    position: absolute;
-    top: 75%;
-    left: 120%;
-    transform: translateX(-100%) translateY(-50%);
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    width: 130px;
-    pointer-events: none;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte
index ce1c249087..8b8451f036 100644
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@@ -355,7 +355,6 @@
     justify-content: flex-start;
     align-items: stretch;
     gap: var(--spacing-xl);
-    overflow: hidden;
   }
 
   .empty-wrapper {
diff --git a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/DataPanel.svelte b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/DataPanel.svelte
deleted file mode 100644
index 9a7fffd893..0000000000
--- a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/DataPanel.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-  import PanelHeader from "./PanelHeader.svelte"
-  export let onBack = () => {}
-</script>
-
-<div>
-  <PanelHeader
-    title="Give it some data"
-    subtitle="Not ready to add yours? Get started with sample data!"
-    {onBack}
-  />
-  <slot />
-</div>
diff --git a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/DatasourceConfigPanel.svelte b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/DatasourceConfigPanel.svelte
deleted file mode 100644
index 2b44648279..0000000000
--- a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/DatasourceConfigPanel.svelte
+++ /dev/null
@@ -1,120 +0,0 @@
-<script>
-  import { Button, FancyForm, FancyInput, FancyCheckbox } from "@budibase/bbui"
-  import GoogleButton from "components/backend/DatasourceNavigator/_components/GoogleButton.svelte"
-  import { capitalise } from "helpers/helpers"
-  import PanelHeader from "./PanelHeader.svelte"
-  import { helpers } from "@budibase/shared-core"
-
-  export let title = ""
-  export let onBack = null
-  export let onNext = () => {}
-  export let fields = {}
-  export let type = ""
-
-  let errors = {}
-
-  const formatName = name => {
-    if (name === "ca") {
-      return "CA"
-    }
-
-    if (name === "ssl") {
-      return "SSL"
-    }
-
-    if (name === "rejectUnauthorized") {
-      return "Reject Unauthorized"
-    }
-
-    return capitalise(name)
-  }
-
-  const getDefaultValues = fields => {
-    const newValues = {}
-
-    Object.entries(fields).forEach(([name, { default: defaultValue }]) => {
-      if (defaultValue) {
-        newValues[name] = defaultValue
-      }
-    })
-
-    return newValues
-  }
-
-  const values = getDefaultValues(fields)
-
-  const validateRequired = value => {
-    if (value.length < 1) {
-      return "Required field"
-    }
-  }
-
-  const getIsValid = (fields, errors, values) => {
-    for (const [name, { required }] of Object.entries(fields)) {
-      if (required && !values[name]) {
-        return false
-      }
-    }
-
-    return Object.values(errors).every(error => !error)
-  }
-
-  $: isValid = getIsValid(fields, errors, values)
-  $: isGoogle = helpers.isGoogleSheets(type)
-
-  const handleNext = async () => {
-    const parsedValues = {}
-
-    Object.entries(values).forEach(([name, value]) => {
-      if (fields[name].type === "number") {
-        parsedValues[name] = parseInt(value, 10)
-      } else {
-        parsedValues[name] = value
-      }
-    })
-
-    if (isGoogle) {
-      parsedValues.isGoogle = isGoogle
-    }
-    return await onNext(parsedValues)
-  }
-</script>
-
-<div>
-  <PanelHeader
-    {title}
-    subtitle="Fill in the required fields to fetch your tables"
-    {onBack}
-  />
-  <div class="form">
-    <FancyForm>
-      {#each Object.entries(fields) as [name, { type, default: defaultValue, required }]}
-        {#if type !== "boolean"}
-          <FancyInput
-            bind:value={values[name]}
-            bind:error={errors[name]}
-            validate={required ? validateRequired : () => {}}
-            label={formatName(name)}
-            {type}
-          />
-        {/if}
-      {/each}
-      {#each Object.entries(fields) as [name, { type, default: defaultValue, required }]}
-        {#if type === "boolean"}
-          <FancyCheckbox bind:value={values[name]} text={formatName(name)} />
-        {/if}
-      {/each}
-    </FancyForm>
-  </div>
-  {#if isGoogle}
-    <GoogleButton disabled={!isValid} preAuthStep={handleNext} samePage />
-  {:else}
-    <Button cta disabled={!isValid} on:click={handleNext}>Connect</Button>
-  {/if}
-</div>
-
-<style>
-  .form {
-    margin-bottom: 36px;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/ExampleApp.svelte b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/ExampleApp.svelte
index 3e970ac360..0b290decbf 100644
--- a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/ExampleApp.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/ExampleApp.svelte
@@ -1,6 +1,5 @@
 <script>
   export let name = ""
-  export let showData = false
 
   const rows = [
     {
@@ -49,7 +48,7 @@
       <h1>{name}</h1>
     </div>
     <div class="nav">Home</div>
-    <table class={`table ${showData ? "tableVisible" : ""}`}>
+    <table>
       <thead>
         <tr>
           <th>FIRST NAME</th>
@@ -71,7 +70,7 @@
         {/each}
       </tbody>
     </table>
-    <div class={`sidePanel ${showData ? "sidePanelVisible" : ""}`}>
+    <div class="sidePanel">
       <h2>{rows[0].firstName}</h2>
       <div class="field">
         <label for="exampleLastName">lastName</label>
@@ -199,14 +198,6 @@
     text-align: left;
   }
 
-  .table {
-    opacity: 0;
-  }
-
-  .tableVisible {
-    opacity: 1;
-  }
-
   .sidePanel {
     position: absolute;
     width: 300px;
@@ -216,9 +207,6 @@
     top: 0;
     right: -364px;
     padding: 42px 32px;
-  }
-
-  .sidePanelVisible {
     right: 0;
   }
 
diff --git a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/NamePanel.svelte b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/NamePanel.svelte
index 0641e28766..86f293fb0b 100644
--- a/packages/builder/src/pages/builder/portal/apps/onboarding/_components/NamePanel.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/onboarding/_components/NamePanel.svelte
@@ -3,6 +3,7 @@
   import PanelHeader from "./PanelHeader.svelte"
   import { APP_URL_REGEX } from "constants"
 
+  export let disabled
   export let name = ""
   export let url = ""
   export let onNext = () => {}
@@ -71,7 +72,9 @@
   {:else}
     <p>‎</p>
   {/if}
-  <Button size="L" cta disabled={!isValid} on:click={onNext}>Lets go!</Button>
+  <Button size="L" cta disabled={!isValid || disabled} on:click={onNext}
+    >Lets go!</Button
+  >
 </div>
 
 <style>
diff --git a/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte b/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte
index 18253bb8a2..e67d3422c0 100644
--- a/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte
@@ -1,102 +1,50 @@
 <script>
   import { goto } from "@roxi/routify"
   import NamePanel from "./_components/NamePanel.svelte"
-  import DataPanel from "./_components/DataPanel.svelte"
-  import DatasourceConfigPanel from "./_components/DatasourceConfigPanel.svelte"
   import ExampleApp from "./_components/ExampleApp.svelte"
-  import { FancyButton, notifications, Modal, Body } from "@budibase/bbui"
-  import IntegrationIcon from "components/backend/DatasourceNavigator/IntegrationIcon.svelte"
+  import { notifications } from "@budibase/bbui"
   import { SplitPage } from "@budibase/frontend-core"
   import { API } from "api"
   import { store, automationStore } from "builderStore"
-  import { saveDatasource } from "builderStore/datasource"
-  import { integrations } from "stores/backend"
-  import { auth, admin, organisation } from "stores/portal"
-  import FontAwesomeIcon from "components/common/FontAwesomeIcon.svelte"
-  import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
+  import { auth, admin } from "stores/portal"
   import createFromScratchScreen from "builderStore/store/screenTemplates/createFromScratchScreen"
   import { Roles } from "constants/backend"
-  import Spinner from "components/common/Spinner.svelte"
-  import { helpers } from "@budibase/shared-core"
-  import { validateDatasourceConfig } from "builderStore/datasource"
-  import { DatasourceFeature } from "@budibase/types"
 
   let name = "My first app"
   let url = "my-first-app"
-  let stage = "name"
   let appId = null
 
-  let plusIntegrations = {}
-  let integrationsLoading = true
-  let creationLoading = false
-  let uploadModal
-  let googleComplete = false
+  let loading = false
 
-  $: getIntegrations()
+  const createApp = async () => {
+    loading = true
 
-  const createApp = async useSampleData => {
-    creationLoading = true
     // Create form data to create app
     // This is form based and not JSON
-    try {
-      let data = new FormData()
-      data.append("name", name.trim())
-      data.append("url", url.trim())
-      data.append("useTemplate", false)
+    let data = new FormData()
+    data.append("name", name.trim())
+    data.append("url", url.trim())
+    data.append("useTemplate", false)
 
-      if (useSampleData) {
-        data.append("sampleData", true)
-      }
+    const createdApp = await API.createApp(data)
 
-      const createdApp = await API.createApp(data)
+    // Select Correct Application/DB in prep for creating user
+    const pkg = await API.fetchAppPackage(createdApp.instance._id)
+    await store.actions.initialise(pkg)
+    await automationStore.actions.fetch()
+    // Update checklist - in case first app
+    await admin.init()
 
-      // Select Correct Application/DB in prep for creating user
-      const pkg = await API.fetchAppPackage(createdApp.instance._id)
-      await store.actions.initialise(pkg)
-      await automationStore.actions.fetch()
-      // Update checklist - in case first app
-      await admin.init()
+    // Create user
+    await auth.setInitInfo({})
 
-      // Create user
-      await auth.setInitInfo({})
+    let defaultScreenTemplate = createFromScratchScreen.create()
+    defaultScreenTemplate.routing.route = "/home"
+    defaultScreenTemplate.routing.roldId = Roles.BASIC
+    await store.actions.screens.save(defaultScreenTemplate)
 
-      let defaultScreenTemplate = createFromScratchScreen.create()
-      defaultScreenTemplate.routing.route = "/home"
-      defaultScreenTemplate.routing.roldId = Roles.BASIC
-      await store.actions.screens.save(defaultScreenTemplate)
-
-      appId = createdApp.instance._id
-      return createdApp
-    } catch (e) {
-      creationLoading = false
-      throw e
-    }
-  }
-
-  const getIntegrations = async () => {
-    try {
-      await integrations.init()
-      const newPlusIntegrations = {}
-
-      Object.entries($integrations).forEach(([integrationType, schema]) => {
-        // google sheets not available in self-host
-        if (
-          helpers.isGoogleSheets(integrationType) &&
-          !$organisation.googleDatasourceConfigured
-        ) {
-          return
-        }
-        if (schema?.plus) {
-          newPlusIntegrations[integrationType] = schema
-        }
-      })
-
-      plusIntegrations = newPlusIntegrations
-    } catch (e) {
-      notifications.error("There was a problem communicating with the server.")
-    } finally {
-      integrationsLoading = false
-    }
+    appId = createdApp.instance._id
+    return createdApp
   }
 
   const goToApp = () => {
@@ -104,152 +52,23 @@
     notifications.success(`App created successfully`)
   }
 
-  const handleCreateApp = async ({
-    datasourceConfig,
-    useSampleData,
-    isGoogle,
-  }) => {
-    let app
-
+  const handleCreateApp = async () => {
     try {
-      if (
-        datasourceConfig &&
-        plusIntegrations[stage].features[DatasourceFeature.CONNECTION_CHECKING]
-      ) {
-        const resp = await validateDatasourceConfig({
-          config: datasourceConfig,
-          type: stage,
-        })
-        if (!resp.connected) {
-          notifications.error(
-            `Unable to connect - ${resp.error ?? "Error validating datasource"}`
-          )
-          return false
-        }
-      }
+      await createApp()
 
-      app = await createApp(useSampleData)
-
-      let datasource
-      if (datasourceConfig) {
-        datasource = await saveDatasource({
-          plus: true,
-          auth: undefined,
-          name: plusIntegrations[stage].friendlyName,
-          schema: plusIntegrations[stage].datasource,
-          config: datasourceConfig,
-          type: stage,
-        })
-      }
-
-      store.set()
-
-      if (isGoogle) {
-        googleComplete = true
-        return { datasource, appId: app.appId }
-      } else {
-        goToApp()
-      }
+      goToApp()
     } catch (e) {
-      console.log(e)
-      creationLoading = false
+      loading = false
       notifications.error("There was a problem creating your app")
-
-      // Reset the store so that we don't send up stale headers
-      store.actions.reset()
-
-      // If we successfully created an app, delete it again so that we
-      // can try again once the error has been corrected.
-      // This also ensures onboarding can't be skipped by entering invalid
-      // data credentials.
-      if (app?.appId) {
-        await API.deleteApp(app.appId)
-      }
     }
   }
 </script>
 
-<Modal bind:this={uploadModal}>
-  <CreateTableModal
-    name="Your Data"
-    beforeSave={createApp}
-    afterSave={goToApp}
-  />
-</Modal>
-
 <div class="full-width">
   <SplitPage>
-    {#if stage === "name"}
-      <NamePanel bind:name bind:url onNext={() => (stage = "data")} />
-    {:else if googleComplete}
-      <div class="centered">
-        <Body
-          >Please login to your Google account in the new tab which as opened to
-          continue.</Body
-        >
-      </div>
-    {:else if integrationsLoading || creationLoading}
-      <div class="centered">
-        <Spinner />
-      </div>
-    {:else if stage === "data"}
-      <DataPanel onBack={() => (stage = "name")}>
-        <div class="dataButton">
-          <FancyButton
-            on:click={() => handleCreateApp({ useSampleData: true })}
-          >
-            <div class="dataButtonContent">
-              <div class="dataButtonIcon">
-                <img
-                  alt="Budibase Logo"
-                  class="budibaseLogo"
-                  src={"https://i.imgur.com/Xhdt1YP.png"}
-                />
-              </div>
-              Budibase Sample data
-            </div>
-          </FancyButton>
-        </div>
-        <div class="dataButton">
-          <FancyButton on:click={uploadModal.show}>
-            <div class="dataButtonContent">
-              <div class="dataButtonIcon">
-                <FontAwesomeIcon name="fa-solid fa-file-arrow-up" />
-              </div>
-              Upload data (CSV or JSON)
-            </div>
-          </FancyButton>
-        </div>
-        {#each Object.entries(plusIntegrations) as [integrationType, schema]}
-          <div class="dataButton">
-            <FancyButton on:click={() => (stage = integrationType)}>
-              <div class="dataButtonContent">
-                <div class="dataButtonIcon">
-                  <IntegrationIcon {integrationType} {schema} />
-                </div>
-                {schema.friendlyName}
-              </div>
-            </FancyButton>
-          </div>
-        {/each}
-      </DataPanel>
-    {:else if stage in plusIntegrations}
-      <DatasourceConfigPanel
-        title={plusIntegrations[stage].friendlyName}
-        fields={plusIntegrations[stage].datasource}
-        type={stage}
-        onBack={() => (stage = "data")}
-        onNext={data => {
-          const isGoogle = data.isGoogle
-          delete data.isGoogle
-          return handleCreateApp({ datasourceConfig: data, isGoogle })
-        }}
-      />
-    {:else}
-      <p>There was an problem. Please refresh the page and try again.</p>
-    {/if}
+    <NamePanel bind:name bind:url disabled={loading} onNext={handleCreateApp} />
     <div slot="right">
-      <ExampleApp {name} showData={stage !== "name"} />
+      <ExampleApp {name} />
     </div>
   </SplitPage>
 </div>
@@ -258,35 +77,4 @@
   .full-width {
     width: 100%;
   }
-  .centered {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 400px;
-  }
-
-  .dataButton {
-    margin-bottom: 12px;
-  }
-
-  .dataButtonContent {
-    display: flex;
-    align-items: center;
-  }
-
-  .budibaseLogo {
-    height: 20px;
-  }
-
-  .dataButtonIcon {
-    width: 22px;
-    display: flex;
-    justify-content: center;
-    margin-right: 16px;
-  }
-
-  .dataButtonContent :global(svg) {
-    font-size: 18px;
-    color: white;
-  }
 </style>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte
index 806589e421..333a10bef7 100644
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/[appId]/_layout.svelte
@@ -20,11 +20,10 @@
     Breadcrumb,
     Header,
   } from "components/portal/page"
-  import { apps, auth, overview } from "stores/portal"
+  import { apps, overview } from "stores/portal"
   import { AppStatus } from "constants"
   import analytics, { Events, EventSource } from "analytics"
   import { store } from "builderStore"
-  import AppLockModal from "components/common/AppLockModal.svelte"
   import EditableIcon from "components/common/EditableIcon.svelte"
   import { API } from "api"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@@ -53,8 +52,6 @@
   $: appId = $overview.selectedAppId
   $: initialiseApp(appId)
   $: isPublished = app?.status === AppStatus.DEPLOYED
-  $: appLocked = !!app?.lockedBy
-  $: lockedByYou = $auth.user.email === app?.lockedBy?.email
 
   const initialiseApp = async appId => {
     loaded = false
@@ -80,13 +77,6 @@
   }
 
   const editApp = () => {
-    if (appLocked && !lockedByYou) {
-      const identifier = app?.lockedBy?.firstName || app?.lockedBy?.email
-      notifications.warning(
-        `App locked by ${identifier}. Please allow lock to expire or have them unlock this app.`
-      )
-      return
-    }
     $goto(`../../../app/${app.devId}`)
   }
 
@@ -135,7 +125,6 @@
           />
         </div>
         <div slot="buttons">
-          <AppLockModal {app} />
           <span class="desktop">
             <Button
               size="M"
@@ -148,14 +137,7 @@
             </Button>
           </span>
           <span class="desktop">
-            <Button
-              size="M"
-              cta
-              disabled={appLocked && !lockedByYou}
-              on:click={editApp}
-            >
-              Edit
-            </Button>
+            <Button size="M" cta on:click={editApp}>Edit</Button>
           </span>
           <ActionMenu align="right">
             <span slot="control" class="app-overview-actions-icon">
@@ -167,13 +149,7 @@
               </MenuItem>
             </span>
             <span class="mobile">
-              <MenuItem
-                icon="Edit"
-                disabled={appLocked && !lockedByYou}
-                on:click={editApp}
-              >
-                Edit
-              </MenuItem>
+              <MenuItem icon="Edit" on:click={editApp}>Edit</MenuItem>
             </span>
             <MenuItem
               on:click={() => exportApp({ published: false })}
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/UserRenderer.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/UserRenderer.svelte
index a9aabae857..399877a801 100644
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/UserRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/_components/UserRenderer.svelte
@@ -1,14 +1,11 @@
 <script>
-  import getUserInitials from "helpers/userInitials.js"
-  import { Avatar } from "@budibase/bbui"
+  import { UserAvatar } from "@budibase/frontend-core"
 
   export let value
-
-  $: initials = getUserInitials(value)
 </script>
 
-<div title={value.email} class="cell">
-  <Avatar size="M" {initials} />
+<div class="cell">
+  <UserAvatar user={value} />
 </div>
 
 <style>
diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/overview.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/overview.svelte
index c049a610b6..0932d2d79a 100644
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/overview.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/[appId]/overview.svelte
@@ -7,7 +7,6 @@
     Icon,
     Heading,
     Link,
-    Avatar,
     Layout,
     Body,
     notifications,
@@ -15,7 +14,7 @@
   import { store } from "builderStore"
   import { processStringSync } from "@budibase/string-templates"
   import { users, auth, apps, groups, overview } from "stores/portal"
-  import { fetchData } from "@budibase/frontend-core"
+  import { fetchData, UserAvatar } from "@budibase/frontend-core"
   import { API } from "api"
   import GroupIcon from "../../users/groups/_components/GroupIcon.svelte"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
@@ -52,18 +51,30 @@
     return groups.actions.getGroupAppIds(group).includes(prodAppId)
   })
 
+  const updateDeploymentString = () => {
+    return deployments?.length
+      ? processStringSync(
+          "Last published {{ duration time 'millisecond' }} ago",
+          {
+            time:
+              new Date().getTime() -
+              new Date(deployments[0].updatedAt).getTime(),
+          }
+        )
+      : ""
+  }
+  // App is updating in the layout asynchronously
+  $: if ($store.appId?.length) {
+    fetchDeployments().then(resp => {
+      deployments = resp
+    })
+  }
+  $: deploymentString = updateDeploymentString(deployments)
+
   async function fetchAppEditor(editorId) {
     appEditor = await users.get(editorId)
   }
 
-  const getInitials = user => {
-    let initials = ""
-    initials += user.firstName ? user.firstName[0] : ""
-    initials += user.lastName ? user.lastName[0] : ""
-
-    return initials === "" ? user.email[0] : initials
-  }
-
   const confirmUnpublishApp = async () => {
     try {
       await API.unpublishApp(app.prodId)
@@ -116,19 +127,11 @@
           </div>
 
           <div class="status-text">
-            {#if deployments?.length}
-              {processStringSync(
-                "Last published {{ duration time 'millisecond' }} ago",
-                {
-                  time:
-                    new Date().getTime() -
-                    new Date(deployments[0].updatedAt).getTime(),
-                }
-              )}
-              {#if isPublished}
-                - <Link on:click={unpublishModal.show}>Unpublish</Link>
-              {/if}
+            {#if isPublished}
+              {deploymentString}
+              - <Link on:click={unpublishModal.show}>Unpublish</Link>
             {/if}
+
             {#if !deployments?.length}
               -
             {/if}
@@ -140,7 +143,7 @@
           <div class="last-edited-content">
             <div class="updated-by">
               {#if appEditor}
-                <Avatar size="M" initials={getInitials(appEditor)} />
+                <UserAvatar user={appEditor} showTooltip={false} />
                 <div class="editor-name">
                   {appEditor._id === $auth.user._id ? "You" : appEditorText}
                 </div>
@@ -201,7 +204,7 @@
                   <div class="users">
                     <div class="list">
                       {#each appUsers.slice(0, 4) as user}
-                        <Avatar size="M" initials={getInitials(user)} />
+                        <UserAvatar {user} />
                       {/each}
                     </div>
                     <div class="text">
diff --git a/packages/builder/src/pages/builder/portal/settings/auth/scim.svelte b/packages/builder/src/pages/builder/portal/settings/auth/scim.svelte
index 66d9e5ab79..4209425c2b 100644
--- a/packages/builder/src/pages/builder/portal/settings/auth/scim.svelte
+++ b/packages/builder/src/pages/builder/portal/settings/auth/scim.svelte
@@ -58,7 +58,7 @@
   }
 
   onMount(async () => {
-    await Promise.all(fetchConfig(), fetchAPIKey())
+    await Promise.all([fetchConfig(), fetchAPIKey()])
   })
 
   const copyToClipboard = async value => {
diff --git a/packages/builder/src/pages/builder/portal/users/users/[userId].svelte b/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
index 98915eb960..d6f2cce51f 100644
--- a/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/users/users/[userId].svelte
@@ -2,7 +2,6 @@
   import { goto, url } from "@roxi/routify"
   import {
     ActionMenu,
-    Avatar,
     Button,
     Layout,
     Heading,
@@ -25,13 +24,14 @@
   import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
   import DeleteUserModal from "./_components/DeleteUserModal.svelte"
   import GroupIcon from "../groups/_components/GroupIcon.svelte"
-  import { Constants } from "@budibase/frontend-core"
+  import { Constants, UserAvatar } from "@budibase/frontend-core"
   import { Breadcrumbs, Breadcrumb } from "components/portal/page"
   import RemoveGroupTableRenderer from "./_components/RemoveGroupTableRenderer.svelte"
   import GroupNameTableRenderer from "../groups/_components/GroupNameTableRenderer.svelte"
   import AppNameTableRenderer from "./_components/AppNameTableRenderer.svelte"
   import AppRoleTableRenderer from "./_components/AppRoleTableRenderer.svelte"
   import ScimBanner from "../_components/SCIMBanner.svelte"
+  import { helpers } from "@budibase/shared-core"
 
   export let userId
 
@@ -91,7 +91,7 @@
   $: readonly = !$auth.isAdmin || scimEnabled
   $: privileged = user?.admin?.global || user?.builder?.global
   $: nameLabel = getNameLabel(user)
-  $: initials = getInitials(nameLabel)
+  $: initials = helpers.getUserInitials(user)
   $: filteredGroups = getFilteredGroups($groups, searchTerm)
   $: availableApps = getAvailableApps($apps, privileged, user?.roles)
   $: userGroups = $groups.filter(x => {
@@ -150,17 +150,6 @@
     return label
   }
 
-  const getInitials = nameLabel => {
-    if (!nameLabel) {
-      return "?"
-    }
-    return nameLabel
-      .split(" ")
-      .slice(0, 2)
-      .map(x => x[0])
-      .join("")
-  }
-
   async function updateUserFirstName(evt) {
     try {
       await users.save({ ...user, firstName: evt.target.value })
@@ -238,7 +227,7 @@
 
     <div class="title">
       <div class="user-info">
-        <Avatar size="XXL" {initials} />
+        <UserAvatar size="XXL" {user} showTooltip={false} />
         <div class="subtitle">
           <Heading size="M">{nameLabel}</Heading>
           {#if nameLabel !== user?.email}
diff --git a/packages/builder/src/stores/backend/datasources.js b/packages/builder/src/stores/backend/datasources.js
index 576b4d8b76..0815f9d766 100644
--- a/packages/builder/src/stores/backend/datasources.js
+++ b/packages/builder/src/stores/backend/datasources.js
@@ -1,4 +1,4 @@
-import { writable, derived } from "svelte/store"
+import { writable, derived, get } from "svelte/store"
 import { queries, tables } from "./"
 import { API } from "api"
 
@@ -91,6 +91,39 @@ export function createDatasourcesStore() {
     })
   }
 
+  // Handles external updates of datasources
+  const replaceDatasource = (datasourceId, datasource) => {
+    if (!datasourceId) {
+      return
+    }
+
+    // Handle deletion
+    if (!datasource) {
+      store.update(state => ({
+        ...state,
+        list: state.list.filter(x => x._id !== datasourceId),
+      }))
+      return
+    }
+
+    // Add new datasource
+    const index = get(store).list.findIndex(x => x._id === datasource._id)
+    if (index === -1) {
+      store.update(state => ({
+        ...state,
+        list: [...state.list, datasource],
+      }))
+    }
+
+    // Update existing datasource
+    else if (datasource) {
+      store.update(state => {
+        state.list[index] = datasource
+        return state
+      })
+    }
+  }
+
   return {
     subscribe: derivedStore.subscribe,
     fetch,
@@ -100,6 +133,7 @@ export function createDatasourcesStore() {
     save,
     delete: deleteDatasource,
     removeSchemaError,
+    replaceDatasource,
   }
 }
 
diff --git a/packages/builder/src/stores/backend/tables.js b/packages/builder/src/stores/backend/tables.js
index 75679532f3..f8796712a8 100644
--- a/packages/builder/src/stores/backend/tables.js
+++ b/packages/builder/src/stores/backend/tables.js
@@ -22,18 +22,6 @@ export function createTablesStore() {
     }))
   }
 
-  const fetchTable = async tableId => {
-    const table = await API.fetchTableDefinition(tableId)
-
-    store.update(state => {
-      const indexToUpdate = state.list.findIndex(t => t._id === table._id)
-      state.list[indexToUpdate] = table
-      return {
-        ...state,
-      }
-    })
-  }
-
   const select = tableId => {
     store.update(state => ({
       ...state,
@@ -74,20 +62,21 @@ export function createTablesStore() {
     }
 
     const savedTable = await API.saveTable(updatedTable)
-    await fetch()
-    if (table.type === "external") {
-      await datasources.fetch()
-    }
-    await select(savedTable._id)
+    replaceTable(savedTable._id, savedTable)
+    await datasources.fetch()
+    select(savedTable._id)
     return savedTable
   }
 
   const deleteTable = async table => {
+    if (!table?._id || !table?._rev) {
+      return
+    }
     await API.deleteTable({
-      tableId: table?._id,
-      tableRev: table?._rev,
+      tableId: table._id,
+      tableRev: table._rev,
     })
-    await fetch()
+    replaceTable(table._id, null)
   }
 
   const saveField = async ({
@@ -135,35 +124,56 @@ export function createTablesStore() {
     await save(draft)
   }
 
-  const updateTable = table => {
-    const index = get(store).list.findIndex(x => x._id === table._id)
-    if (index === -1) {
+  // Handles external updates of tables
+  const replaceTable = (tableId, table) => {
+    if (!tableId) {
       return
     }
 
-    // This function has to merge state as there discrepancies with the table
-    // API endpoints. The table list endpoint and get table endpoint use the
-    // "type" property to mean different things.
-    store.update(state => {
-      state.list[index] = {
-        ...table,
-        type: state.list[index].type,
-      }
-      return state
-    })
+    // Handle deletion
+    if (!table) {
+      store.update(state => ({
+        ...state,
+        list: state.list.filter(x => x._id !== tableId),
+      }))
+      return
+    }
+
+    // Add new table
+    const index = get(store).list.findIndex(x => x._id === table._id)
+    if (index === -1) {
+      store.update(state => ({
+        ...state,
+        list: [...state.list, table],
+      }))
+    }
+
+    // Update existing table
+    else if (table) {
+      // This function has to merge state as there discrepancies with the table
+      // API endpoints. The table list endpoint and get table endpoint use the
+      // "type" property to mean different things.
+      store.update(state => {
+        state.list[index] = {
+          ...table,
+          type: state.list[index].type,
+        }
+        return state
+      })
+    }
   }
 
   return {
+    ...store,
     subscribe: derivedStore.subscribe,
     fetch,
-    fetchTable,
     init: fetch,
     select,
     save,
     delete: deleteTable,
     saveField,
     deleteField,
-    updateTable,
+    replaceTable,
   }
 }
 
diff --git a/packages/builder/src/stores/backend/views.js b/packages/builder/src/stores/backend/views.js
index 71e9a44c5c..2f396096c8 100644
--- a/packages/builder/src/stores/backend/views.js
+++ b/packages/builder/src/stores/backend/views.js
@@ -1,4 +1,4 @@
-import { writable, get, derived } from "svelte/store"
+import { writable, derived } from "svelte/store"
 import { tables } from "./"
 import { API } from "api"
 
@@ -27,21 +27,31 @@ export function createViewsStore() {
 
   const deleteView = async view => {
     await API.deleteView(view)
-    await tables.fetch()
+
+    // Update tables
+    tables.update(state => {
+      const table = state.list.find(table => table._id === view.tableId)
+      if (table) {
+        delete table.views[view.name]
+      }
+      return { ...state }
+    })
   }
 
   const save = async view => {
     const savedView = await API.saveView(view)
-    const viewMeta = {
-      name: view.name,
-      ...savedView,
-    }
 
-    const viewTable = get(tables).list.find(table => table._id === view.tableId)
-
-    if (view.originalName) delete viewTable.views[view.originalName]
-    viewTable.views[view.name] = viewMeta
-    await tables.save(viewTable)
+    // Update tables
+    tables.update(state => {
+      const table = state.list.find(table => table._id === view.tableId)
+      if (table) {
+        if (view.originalName) {
+          delete table.views[view.originalName]
+        }
+        table.views[view.name] = savedView
+      }
+      return { ...state }
+    })
   }
 
   return {
diff --git a/packages/builder/src/stores/portal/licensing.js b/packages/builder/src/stores/portal/licensing.js
index 307e640f33..ded77894f9 100644
--- a/packages/builder/src/stores/portal/licensing.js
+++ b/packages/builder/src/stores/portal/licensing.js
@@ -116,6 +116,9 @@ export const createLicensingStore = () => {
       const auditLogsEnabled = license.features.includes(
         Constants.Features.AUDIT_LOGS
       )
+      const syncAutomationsEnabled = license.features.includes(
+        Constants.Features.SYNC_AUTOMATIONS
+      )
       store.update(state => {
         return {
           ...state,
@@ -130,6 +133,7 @@ export const createLicensingStore = () => {
           environmentVariablesEnabled,
           auditLogsEnabled,
           enforceableSSO,
+          syncAutomationsEnabled,
         }
       })
     },
diff --git a/packages/cli/package.json b/packages/cli/package.json
index f3a047918a..3bd5ba279c 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/cli",
-  "version": "0.0.1",
+  "version": "0.0.0",
   "description": "Budibase CLI, for developers, self hosting and migrations.",
   "main": "dist/src/index.js",
   "bin": {
@@ -29,9 +29,9 @@
     "outputPath": "build"
   },
   "dependencies": {
-    "@budibase/backend-core": "0.0.1",
-    "@budibase/string-templates": "0.0.1",
-    "@budibase/types": "0.0.1",
+    "@budibase/backend-core": "0.0.0",
+    "@budibase/string-templates": "0.0.0",
+    "@budibase/types": "0.0.0",
     "axios": "0.21.2",
     "chalk": "4.1.0",
     "cli-progress": "3.11.2",
diff --git a/packages/client/package.json b/packages/client/package.json
index f49c0d1d38..689ec332e5 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/client",
-  "version": "0.0.1",
+  "version": "0.0.0",
   "license": "MPL-2.0",
   "module": "dist/budibase-client.js",
   "main": "dist/budibase-client.js",
@@ -19,11 +19,11 @@
     "dev:builder": "rollup -cw"
   },
   "dependencies": {
-    "@budibase/bbui": "0.0.1",
-    "@budibase/frontend-core": "0.0.1",
-    "@budibase/shared-core": "0.0.1",
-    "@budibase/string-templates": "0.0.1",
-    "@budibase/types": "0.0.1",
+    "@budibase/bbui": "0.0.0",
+    "@budibase/frontend-core": "0.0.0",
+    "@budibase/shared-core": "0.0.0",
+    "@budibase/string-templates": "0.0.0",
+    "@budibase/types": "0.0.0",
     "@spectrum-css/button": "^3.0.3",
     "@spectrum-css/card": "^3.0.3",
     "@spectrum-css/divider": "^1.0.3",
@@ -41,7 +41,6 @@
     "sanitize-html": "^2.7.0",
     "screenfull": "^6.0.1",
     "shortid": "^2.2.15",
-    "socket.io-client": "^4.5.1",
     "svelte": "^3.49.0",
     "svelte-apexcharts": "^1.0.2",
     "svelte-flatpickr": "^3.1.0",
diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js
index 5a3842f9a4..ed702f6718 100644
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@@ -122,13 +122,23 @@ const deleteRowHandler = async action => {
 }
 
 const triggerAutomationHandler = async action => {
-  const { fields, notificationOverride } = action.parameters
+  const { fields, notificationOverride, timeout } = action.parameters
   if (fields) {
     try {
-      await API.triggerAutomation({
+      const result = await API.triggerAutomation({
         automationId: action.parameters.automationId,
         fields,
+        timeout,
       })
+
+      // Value will exist if automation is synchronous, so return it.
+      if (result.value) {
+        if (!notificationOverride) {
+          notificationStore.actions.success("Automation ran successfully")
+        }
+        return { result }
+      }
+
       if (!notificationOverride) {
         notificationStore.actions.success("Automation triggered")
       }
@@ -138,7 +148,6 @@ const triggerAutomationHandler = async action => {
     }
   }
 }
-
 const navigationHandler = action => {
   const { url, peek, externalNewTab } = action.parameters
   routeStore.actions.navigate(url, peek, externalNewTab)
diff --git a/packages/client/src/websocket.js b/packages/client/src/websocket.js
index 0a99fa8606..8ca95fdc84 100644
--- a/packages/client/src/websocket.js
+++ b/packages/client/src/websocket.js
@@ -4,7 +4,7 @@ import {
   notificationStore,
 } from "./stores/index.js"
 import { get } from "svelte/store"
-import { io } from "socket.io-client"
+import { createWebsocket } from "@budibase/frontend-core"
 
 let socket
 
@@ -18,19 +18,8 @@ export const initWebsocket = () => {
   }
 
   // Initialise connection
-  const tls = location.protocol === "https:"
-  const proto = tls ? "wss:" : "ws:"
-  const host = location.hostname
-  const port = location.port || (tls ? 443 : 80)
-  socket = io(`${proto}//${host}:${port}`, {
-    path: "/socket/client",
-    // Cap reconnection attempts to 3 (total of 15 seconds before giving up)
-    reconnectionAttempts: 3,
-    // Delay reconnection attempt by 5 seconds
-    reconnectionDelay: 5000,
-    reconnectionDelayMax: 5000,
-    // Timeout after 4 seconds so we never stack requests
-    timeout: 4000,
+  socket = createWebsocket("/socket/client", {
+    heartbeat: false,
   })
 
   // Event handlers
diff --git a/packages/frontend-core/package.json b/packages/frontend-core/package.json
index 84c39571e4..ca7e0a6d2b 100644
--- a/packages/frontend-core/package.json
+++ b/packages/frontend-core/package.json
@@ -1,13 +1,13 @@
 {
   "name": "@budibase/frontend-core",
-  "version": "0.0.1",
+  "version": "0.0.0",
   "description": "Budibase frontend core libraries used in builder and client",
   "author": "Budibase",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "dependencies": {
-    "@budibase/bbui": "0.0.1",
-    "@budibase/shared-core": "0.0.1",
+    "@budibase/bbui": "0.0.0",
+    "@budibase/shared-core": "0.0.0",
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
     "socket.io-client": "^4.6.1",
diff --git a/packages/frontend-core/src/api/app.js b/packages/frontend-core/src/api/app.js
index 7868eef063..ce18bcc0c5 100644
--- a/packages/frontend-core/src/api/app.js
+++ b/packages/frontend-core/src/api/app.js
@@ -152,4 +152,10 @@ export const buildAppEndpoints = API => ({
       url: `/api/${appId}/components/definitions`,
     })
   },
+
+  addSampleData: async appId => {
+    return await API.post({
+      url: `/api/applications/${appId}/sample`,
+    })
+  },
 })
diff --git a/packages/frontend-core/src/api/automations.js b/packages/frontend-core/src/api/automations.js
index c0b770a1c2..37a834cf04 100644
--- a/packages/frontend-core/src/api/automations.js
+++ b/packages/frontend-core/src/api/automations.js
@@ -4,10 +4,10 @@ export const buildAutomationEndpoints = API => ({
    * @param automationId the ID of the automation to trigger
    * @param fields the fields to trigger the automation with
    */
-  triggerAutomation: async ({ automationId, fields }) => {
+  triggerAutomation: async ({ automationId, fields, timeout }) => {
     return await API.post({
       url: `/api/automations/${automationId}/trigger`,
-      body: { fields },
+      body: { fields, timeout },
     })
   },
 
diff --git a/packages/frontend-core/src/api/index.js b/packages/frontend-core/src/api/index.js
index f8eee45cb8..739e0fe711 100644
--- a/packages/frontend-core/src/api/index.js
+++ b/packages/frontend-core/src/api/index.js
@@ -1,3 +1,4 @@
+import { Helpers } from "@budibase/bbui"
 import { ApiVersion } from "../constants"
 import { buildAnalyticsEndpoints } from "./analytics"
 import { buildAppEndpoints } from "./app"
@@ -30,6 +31,14 @@ import { buildEnvironmentVariableEndpoints } from "./environmentVariables"
 import { buildEventEndpoints } from "./events"
 import { buildAuditLogsEndpoints } from "./auditLogs"
 
+/**
+ * Random identifier to uniquely identify a session in a tab. This is
+ * used to determine the originator of calls to the API, which is in
+ * turn used to determine who caused a websocket message to be sent, so
+ * that we can ignore events caused by ourselves.
+ */
+export const APISessionID = Helpers.uuid()
+
 const defaultAPIClientConfig = {
   /**
    * Certain definitions can't change at runtime for client apps, such as the
@@ -116,6 +125,7 @@ export const createAPIClient = config => {
 
     // Build headers
     let headers = { Accept: "application/json" }
+    headers["x-budibase-session-id"] = APISessionID
     if (!external) {
       headers["x-budibase-api-version"] = ApiVersion
     }
diff --git a/packages/frontend-core/src/components/UserAvatar.svelte b/packages/frontend-core/src/components/UserAvatar.svelte
new file mode 100644
index 0000000000..547036dfd7
--- /dev/null
+++ b/packages/frontend-core/src/components/UserAvatar.svelte
@@ -0,0 +1,58 @@
+<script>
+  import { Avatar, Tooltip } from "@budibase/bbui"
+  import { helpers } from "@budibase/shared-core"
+
+  export let user
+  export let size
+  export let tooltipDirection = "top"
+  export let showTooltip = true
+
+  $: tooltipStyle = getTooltipStyle(tooltipDirection)
+
+  const getTooltipStyle = direction => {
+    if (!direction) {
+      return ""
+    }
+    if (direction === "top") {
+      return "transform: translateX(-50%) translateY(-100%);"
+    } else if (direction === "bottom") {
+      return "transform: translateX(-50%) translateY(100%);"
+    }
+  }
+</script>
+
+{#if user}
+  <div class="user-avatar">
+    <Avatar
+      {size}
+      initials={helpers.getUserInitials(user)}
+      color={helpers.getUserColor(user)}
+    />
+    {#if showTooltip}
+      <div class="tooltip" style={tooltipStyle}>
+        <Tooltip
+          direction={tooltipDirection}
+          textWrapping
+          text={user.email}
+          size="S"
+        />
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .user-avatar {
+    position: relative;
+  }
+  .tooltip {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    white-space: nowrap;
+  }
+  .user-avatar:hover .tooltip {
+    display: block;
+  }
+</style>
diff --git a/packages/frontend-core/src/components/grid/cells/BooleanCell.svelte b/packages/frontend-core/src/components/grid/cells/BooleanCell.svelte
index 52aecb07a7..c3449c0b39 100644
--- a/packages/frontend-core/src/components/grid/cells/BooleanCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/BooleanCell.svelte
@@ -37,6 +37,9 @@
   .boolean-cell {
     padding: 2px var(--cell-padding);
     pointer-events: none;
+    flex: 1 1 auto;
+    display: flex;
+    justify-content: center;
   }
   .boolean-cell.editable {
     pointer-events: all;
diff --git a/packages/frontend-core/src/components/grid/cells/DataCell.svelte b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
index f39b820632..cb8616a735 100644
--- a/packages/frontend-core/src/components/grid/cells/DataCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/DataCell.svelte
@@ -11,6 +11,7 @@
   export let selected
   export let rowFocused
   export let rowIdx
+  export let topRow = false
   export let focused
   export let selectedUser
   export let column
@@ -68,6 +69,7 @@
   {highlighted}
   {selected}
   {rowIdx}
+  {topRow}
   {focused}
   {selectedUser}
   {readonly}
diff --git a/packages/frontend-core/src/components/grid/cells/GridCell.svelte b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
index 6589c18d07..9316699743 100644
--- a/packages/frontend-core/src/components/grid/cells/GridCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
@@ -6,6 +6,7 @@
   export let selectedUser = null
   export let error = null
   export let rowIdx
+  export let topRow = false
   export let defaultHeight = false
   export let center = false
   export let readonly = false
@@ -15,7 +16,7 @@
   const getStyle = (width, selectedUser) => {
     let style = `flex: 0 0 ${width}px;`
     if (selectedUser) {
-      style += `--cell-color:${selectedUser.color};`
+      style += `--user-color:${selectedUser.color};`
     }
     return style
   }
@@ -31,13 +32,14 @@
   class:readonly
   class:default-height={defaultHeight}
   class:selected-other={selectedUser != null}
+  class:alt={rowIdx % 2 === 1}
+  class:top={topRow}
   on:focus
   on:mousedown
   on:mouseup
   on:click
   on:contextmenu
   {style}
-  data-row={rowIdx}
 >
   {#if error}
     <div class="label">
@@ -70,6 +72,9 @@
     width: 0;
     --cell-color: transparent;
   }
+  .cell.alt {
+    --cell-background: var(--cell-background-alt);
+  }
   .cell.default-height {
     height: var(--default-row-height);
   }
@@ -94,14 +99,15 @@
   }
 
   /* Cell border for cells with labels */
-  .cell.error:after,
-  .cell.selected-other:not(.focused):after {
+  .cell.error:after {
     border-radius: 0 2px 2px 2px;
   }
-  .cell[data-row="0"].error:after,
-  .cell[data-row="0"].selected-other:not(.focused):after {
+  .cell.top.error:after {
     border-radius: 2px 2px 2px 0;
   }
+  .cell.selected-other:not(.focused):after {
+    border-radius: 2px;
+  }
 
   /* Cell z-index */
   .cell.error,
@@ -111,14 +117,8 @@
   .cell.focused {
     z-index: 2;
   }
-  .cell.focused {
-    --cell-color: var(--spectrum-global-color-blue-400);
-  }
-  .cell.error {
-    --cell-color: var(--spectrum-global-color-red-500);
-  }
-  .cell.readonly {
-    --cell-color: var(--spectrum-global-color-gray-600);
+  .cell.selected-other:hover {
+    z-index: 2;
   }
   .cell:not(.focused) {
     user-select: none;
@@ -126,6 +126,21 @@
   .cell:hover {
     cursor: default;
   }
+
+  /* Cell color overrides */
+  .cell.selected-other {
+    --cell-color: var(--user-color);
+  }
+  .cell.focused {
+    --cell-color: var(--spectrum-global-color-blue-400);
+  }
+  .cell.error {
+    --cell-color: var(--spectrum-global-color-red-500);
+  }
+  .cell.focused.readonly {
+    --cell-color: var(--spectrum-global-color-gray-600);
+  }
+
   .cell.highlighted:not(.focused),
   .cell.focused.readonly {
     --cell-background: var(--cell-background-hover);
@@ -141,7 +156,7 @@
     left: 0;
     padding: 1px 4px 3px 4px;
     margin: 0 0 -2px 0;
-    background: var(--user-color);
+    background: var(--cell-color);
     border-radius: 2px;
     display: block;
     color: white;
@@ -152,14 +167,19 @@
     overflow: hidden;
     user-select: none;
   }
-  .cell[data-row="0"] .label {
+  .cell.top .label {
     bottom: auto;
     top: 100%;
-    border-radius: 0 2px 2px 2px;
     padding: 2px 4px 2px 4px;
     margin: -2px 0 0 0;
   }
   .error .label {
     background: var(--spectrum-global-color-red-500);
   }
+  .selected-other:not(.error) .label {
+    display: none;
+  }
+  .selected-other:not(.error):hover .label {
+    display: block;
+  }
 </style>
diff --git a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
index 00b99c0711..56c4c20d54 100644
--- a/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GutterCell.svelte
@@ -21,16 +21,7 @@
     svelteDispatch("select")
     const id = row?._id
     if (id) {
-      selectedRows.update(state => {
-        let newState = {
-          ...state,
-          [id]: !state[id],
-        }
-        if (!newState[id]) {
-          delete newState[id]
-        }
-        return newState
-      })
+      selectedRows.actions.toggleRow(id)
     }
   }
 
@@ -47,6 +38,7 @@
   highlighted={rowFocused || rowHovered}
   selected={rowSelected}
   {defaultHeight}
+  rowIdx={row?.__idx}
 >
   <div class="gutter">
     {#if $$slots.default}
diff --git a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
index 72b0ad0ff1..21ee210233 100644
--- a/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/HeaderCell.svelte
@@ -196,7 +196,11 @@
     <MenuItem disabled={!canMoveRight} icon="ChevronRight" on:click={moveRight}>
       Move right
     </MenuItem>
-    <MenuItem icon="VisibilityOff" on:click={hideColumn}>Hide column</MenuItem>
+    <MenuItem
+      disabled={idx === "sticky"}
+      icon="VisibilityOff"
+      on:click={hideColumn}>Hide column</MenuItem
+    >
   </Menu>
 </Popover>
 
diff --git a/packages/frontend-core/src/components/grid/cells/TextCell.svelte b/packages/frontend-core/src/components/grid/cells/TextCell.svelte
index 533b030b5c..04485a6b50 100644
--- a/packages/frontend-core/src/components/grid/cells/TextCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/TextCell.svelte
@@ -52,7 +52,7 @@
 {:else}
   <div class="text-cell" class:number={type === "number"}>
     <div class="value">
-      {value || ""}
+      {value ?? ""}
     </div>
   </div>
 {/if}
diff --git a/packages/frontend-core/src/components/grid/layout/Avatar.svelte b/packages/frontend-core/src/components/grid/layout/Avatar.svelte
deleted file mode 100644
index e3eec9f830..0000000000
--- a/packages/frontend-core/src/components/grid/layout/Avatar.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-  export let user
-</script>
-
-<div class="user" style="background:{user.color};" title={user.email}>
-  {user.email[0]}
-</div>
-
-<style>
-  div {
-    width: 24px;
-    height: 24px;
-    display: grid;
-    place-items: center;
-    color: white;
-    border-radius: 50%;
-    font-size: 12px;
-    font-weight: 700;
-    text-transform: uppercase;
-  }
-  div:hover {
-    cursor: pointer;
-  }
-</style>
diff --git a/packages/frontend-core/src/components/grid/layout/Grid.svelte b/packages/frontend-core/src/components/grid/layout/Grid.svelte
index cb02263be3..81f42ca257 100644
--- a/packages/frontend-core/src/components/grid/layout/Grid.svelte
+++ b/packages/frontend-core/src/components/grid/layout/Grid.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { setContext } from "svelte"
+  import { setContext, onMount } from "svelte"
   import { writable } from "svelte/store"
   import { fade } from "svelte/transition"
   import { clickOutside, ProgressCircle } from "@budibase/bbui"
@@ -7,7 +7,6 @@
   import { createAPIClient } from "../../../api"
   import { attachStores } from "../stores"
   import BulkDeleteHandler from "../controls/BulkDeleteHandler.svelte"
-  import BetaButton from "../controls/BetaButton.svelte"
   import GridBody from "./GridBody.svelte"
   import ResizeOverlay from "../overlays/ResizeOverlay.svelte"
   import ReorderOverlay from "../overlays/ReorderOverlay.svelte"
@@ -24,6 +23,7 @@
   import RowHeightButton from "../controls/RowHeightButton.svelte"
   import ColumnWidthButton from "../controls/ColumnWidthButton.svelte"
   import NewRow from "./NewRow.svelte"
+  import { createGridWebsocket } from "../lib/websocket"
   import {
     MaxCellRenderHeight,
     MaxCellRenderWidthOverflow,
@@ -41,6 +41,9 @@
   export let allowExpandRows = true
   export let allowEditRows = true
   export let allowDeleteRows = true
+  export let stripeRows = false
+  export let collaboration = true
+  export let showAvatars = true
 
   // Unique identifier for DOM nodes inside this instance
   const rand = Math.random()
@@ -55,6 +58,7 @@
     allowExpandRows,
     allowEditRows,
     allowDeleteRows,
+    stripeRows,
   })
 
   // Build up context
@@ -90,6 +94,7 @@
     allowExpandRows,
     allowEditRows,
     allowDeleteRows,
+    stripeRows,
   })
 
   // Set context for children to consume
@@ -99,7 +104,11 @@
   export const getContext = () => context
 
   // Initialise websocket for multi-user
-  // onMount(() => createWebsocket(context))
+  onMount(() => {
+    if (collaboration) {
+      return createGridWebsocket(context)
+    }
+  })
 </script>
 
 <div
@@ -107,6 +116,7 @@
   id="grid-{rand}"
   class:is-resizing={$isResizing}
   class:is-reordering={$isReordering}
+  class:stripe={$config.stripeRows}
   style="--row-height:{$rowHeight}px; --default-row-height:{DefaultRowHeight}px; --gutter-width:{GutterWidth}px; --max-cell-render-height:{MaxCellRenderHeight}px; --max-cell-render-width-overflow:{MaxCellRenderWidthOverflow}px; --content-lines:{$contentLines};"
 >
   <div class="controls">
@@ -120,7 +130,9 @@
       <RowHeightButton />
     </div>
     <div class="controls-right">
-      <UserAvatars />
+      {#if showAvatars}
+        <UserAvatars />
+      {/if}
     </div>
   </div>
   {#if $loaded}
@@ -131,7 +143,6 @@
           <HeaderRow />
           <GridBody />
         </div>
-        <BetaButton />
         {#if allowAddRows}
           <NewRow />
         {/if}
@@ -169,6 +180,7 @@
     /* Variables */
     --cell-background: var(--spectrum-global-color-gray-50);
     --cell-background-hover: var(--spectrum-global-color-gray-100);
+    --cell-background-alt: var(--cell-background);
     --cell-padding: 8px;
     --cell-spacing: 4px;
     --cell-border: 1px solid var(--spectrum-global-color-gray-200);
@@ -185,6 +197,9 @@
   .grid.is-reordering :global(*) {
     cursor: grabbing !important;
   }
+  .grid.stripe {
+    --cell-background-alt: var(--spectrum-global-color-gray-75);
+  }
 
   .grid-data-outer,
   .grid-data-inner {
diff --git a/packages/frontend-core/src/components/grid/layout/GridBody.svelte b/packages/frontend-core/src/components/grid/layout/GridBody.svelte
index 67f5f03898..016369df49 100644
--- a/packages/frontend-core/src/components/grid/layout/GridBody.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridBody.svelte
@@ -36,7 +36,11 @@
 <div bind:this={body} class="grid-body">
   <GridScrollWrapper scrollHorizontally scrollVertically wheelInteractive>
     {#each $renderedRows as row, idx}
-      <GridRow {row} {idx} invertY={idx >= $rowVerticalInversionIndex} />
+      <GridRow
+        {row}
+        top={idx === 0}
+        invertY={idx >= $rowVerticalInversionIndex}
+      />
     {/each}
     {#if $config.allowAddRows && $renderedColumns.length}
       <div
diff --git a/packages/frontend-core/src/components/grid/layout/GridRow.svelte b/packages/frontend-core/src/components/grid/layout/GridRow.svelte
index ff182d4ec2..0ccba0f170 100644
--- a/packages/frontend-core/src/components/grid/layout/GridRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/GridRow.svelte
@@ -3,7 +3,7 @@
   import DataCell from "../cells/DataCell.svelte"
 
   export let row
-  export let idx
+  export let top = false
   export let invertY = false
 
   const {
@@ -41,7 +41,8 @@
       invertX={columnIdx >= $columnHorizontalInversionIndex}
       highlighted={rowHovered || rowFocused || reorderSource === column.name}
       selected={rowSelected}
-      rowIdx={idx}
+      rowIdx={row.__idx}
+      topRow={top}
       focused={$focusedCellId === cellId}
       selectedUser={$selectedCellMap[cellId]}
       width={column.width}
diff --git a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
index be9fad00d0..9d6cc2275b 100644
--- a/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/HeaderRow.svelte
@@ -61,7 +61,7 @@
     border-right: var(--cell-border);
     border-bottom: var(--cell-border);
     background: var(--spectrum-global-color-gray-100);
-    z-index: 20;
+    z-index: 1;
   }
   .add:hover {
     background: var(--spectrum-global-color-gray-200);
diff --git a/packages/frontend-core/src/components/grid/layout/KeyboardShortcut.svelte b/packages/frontend-core/src/components/grid/layout/KeyboardShortcut.svelte
index 5024a24ea7..cac39bbf2f 100644
--- a/packages/frontend-core/src/components/grid/layout/KeyboardShortcut.svelte
+++ b/packages/frontend-core/src/components/grid/layout/KeyboardShortcut.svelte
@@ -38,7 +38,7 @@
     padding: 2px 6px;
     font-size: 12px;
     font-weight: 600;
-    background-color: var(--spectrum-global-color-gray-200);
+    background-color: var(--spectrum-global-color-gray-300);
     color: var(--spectrum-global-color-gray-700);
     border-radius: 4px;
     text-align: center;
diff --git a/packages/frontend-core/src/components/grid/layout/NewRow.svelte b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
index 8048a4e2fa..85b430f79b 100644
--- a/packages/frontend-core/src/components/grid/layout/NewRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
@@ -167,7 +167,7 @@
           focused={$focusedCellId === cellId}
           width={$stickyColumn.width}
           {updateValue}
-          rowIdx={0}
+          topRow={offset === 0}
           {invertY}
         >
           {#if $stickyColumn?.schema?.autocolumn}
@@ -193,7 +193,7 @@
                 row={newRow}
                 focused={$focusedCellId === cellId}
                 width={column.width}
-                rowIdx={0}
+                topRow={offset === 0}
                 invertX={columnIdx >= $columnHorizontalInversionIndex}
                 {invertY}
               >
@@ -219,7 +219,7 @@
       <Button size="M" secondary newStyles on:click={clear}>
         <div class="button-with-keys">
           Cancel
-          <KeyboardShortcut overlay keybind="Esc" />
+          <KeyboardShortcut keybind="Esc" />
         </div>
       </Button>
     </div>
diff --git a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
index 6301112110..801772ed51 100644
--- a/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
+++ b/packages/frontend-core/src/components/grid/layout/StickyColumn.svelte
@@ -82,7 +82,8 @@
               {rowFocused}
               selected={rowSelected}
               highlighted={rowHovered || rowFocused}
-              rowIdx={idx}
+              rowIdx={row.__idx}
+              topRow={idx === 0}
               focused={$focusedCellId === cellId}
               selectedUser={$selectedCellMap[cellId]}
               width={$stickyColumn.width}
diff --git a/packages/frontend-core/src/components/grid/layout/UserAvatars.svelte b/packages/frontend-core/src/components/grid/layout/UserAvatars.svelte
index be33b6713d..df705c97b4 100644
--- a/packages/frontend-core/src/components/grid/layout/UserAvatars.svelte
+++ b/packages/frontend-core/src/components/grid/layout/UserAvatars.svelte
@@ -1,13 +1,23 @@
 <script>
   import { getContext } from "svelte"
-  import Avatar from "./Avatar.svelte"
+  import UserAvatar from "../../UserAvatar.svelte"
 
   const { users } = getContext("grid")
+
+  $: uniqueUsers = unique($users)
+
+  const unique = users => {
+    let uniqueUsers = {}
+    users?.forEach(user => {
+      uniqueUsers[user.email] = user
+    })
+    return Object.values(uniqueUsers)
+  }
 </script>
 
 <div class="users">
-  {#each $users as user}
-    <Avatar {user} />
+  {#each uniqueUsers as user}
+    <UserAvatar {user} />
   {/each}
 </div>
 
@@ -15,6 +25,6 @@
   .users {
     display: flex;
     flex-direction: row;
-    gap: 8px;
+    gap: 4px;
   }
 </style>
diff --git a/packages/frontend-core/src/components/grid/lib/constants.js b/packages/frontend-core/src/components/grid/lib/constants.js
index a7209d6ea4..f078ef7274 100644
--- a/packages/frontend-core/src/components/grid/lib/constants.js
+++ b/packages/frontend-core/src/components/grid/lib/constants.js
@@ -1,4 +1,4 @@
-export const Padding = 128
+export const Padding = 256
 export const MaxCellRenderHeight = 252
 export const MaxCellRenderWidthOverflow = 200
 export const ScrollBarSize = 8
diff --git a/packages/frontend-core/src/components/grid/lib/websocket.js b/packages/frontend-core/src/components/grid/lib/websocket.js
index af2e247f98..11164b3148 100644
--- a/packages/frontend-core/src/components/grid/lib/websocket.js
+++ b/packages/frontend-core/src/components/grid/lib/websocket.js
@@ -1,62 +1,63 @@
 import { get } from "svelte/store"
-import { io } from "socket.io-client"
+import { createWebsocket } from "../../../utils"
+import { SocketEvent, GridSocketEvent } from "@budibase/shared-core"
 
-export const createWebsocket = context => {
-  const { rows, tableId, users, userId, focusedCellId } = context
-
-  // Determine connection info
-  const tls = location.protocol === "https:"
-  const proto = tls ? "wss:" : "ws:"
-  const host = location.hostname
-  const port = location.port || (tls ? 443 : 80)
-  const socket = io(`${proto}//${host}:${port}`, {
-    path: "/socket/grid",
-    // Cap reconnection attempts to 3 (total of 15 seconds before giving up)
-    reconnectionAttempts: 3,
-    // Delay reconnection attempt by 5 seconds
-    reconnectionDelay: 5000,
-    reconnectionDelayMax: 5000,
-    // Timeout after 4 seconds so we never stack requests
-    timeout: 4000,
-  })
+export const createGridWebsocket = context => {
+  const { rows, tableId, users, focusedCellId, table } = context
+  const socket = createWebsocket("/socket/grid")
 
   const connectToTable = tableId => {
     if (!socket.connected) {
       return
     }
     // Identify which table we are editing
-    socket.emit("select-table", tableId, response => {
+    socket.emit(GridSocketEvent.SelectTable, tableId, response => {
       // handle initial connection info
       users.set(response.users)
-      userId.set(response.id)
     })
   }
 
-  // Event handlers
+  // Built-in events
   socket.on("connect", () => {
     connectToTable(get(tableId))
   })
-  socket.on("row-update", data => {
-    if (data.id) {
-      rows.actions.refreshRow(data.id)
-    }
-  })
-  socket.on("user-update", user => {
-    users.actions.updateUser(user)
-  })
-  socket.on("user-disconnect", user => {
-    users.actions.removeUser(user)
-  })
   socket.on("connect_error", err => {
     console.log("Failed to connect to grid websocket:", err.message)
   })
 
+  // User events
+  socket.onOther(SocketEvent.UserUpdate, user => {
+    users.actions.updateUser(user)
+  })
+  socket.onOther(SocketEvent.UserDisconnect, user => {
+    users.actions.removeUser(user)
+  })
+
+  // Row events
+  socket.onOther(GridSocketEvent.RowChange, async data => {
+    if (data.id) {
+      rows.actions.replaceRow(data.id, data.row)
+    } else if (data.row.id) {
+      // Handle users table edge cased
+      await rows.actions.refreshRow(data.row.id)
+    }
+  })
+
+  // Table events
+  socket.onOther(GridSocketEvent.TableChange, data => {
+    // Only update table if one exists. If the table was deleted then we don't
+    // want to know - let the builder navigate away
+    if (data.table) {
+      table.set(data.table)
+    }
+  })
+
   // Change websocket connection when table changes
   tableId.subscribe(connectToTable)
 
   // Notify selected cell changes
   focusedCellId.subscribe($focusedCellId => {
-    socket.emit("select-cell", $focusedCellId)
+    socket.emit(GridSocketEvent.SelectCell, $focusedCellId)
   })
 
   return () => socket?.disconnect()
diff --git a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
index c7fa0a5cb7..a210e125ff 100644
--- a/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
+++ b/packages/frontend-core/src/components/grid/overlays/KeyboardManager.svelte
@@ -14,6 +14,7 @@
     dispatch,
     selectedRows,
     config,
+    menu,
   } = getContext("grid")
 
   const ignoredOriginSelectors = [
@@ -61,6 +62,7 @@
       } else {
         $focusedCellId = null
       }
+      menu.actions.close()
       return
     } else if (e.key === "Tab") {
       e.preventDefault()
@@ -224,10 +226,7 @@
     if (!id || id === NewRowID) {
       return
     }
-    selectedRows.update(state => {
-      state[id] = !state[id]
-      return state
-    })
+    selectedRows.actions.toggleRow(id)
   }
 
   onMount(() => {
diff --git a/packages/frontend-core/src/components/grid/stores/columns.js b/packages/frontend-core/src/components/grid/stores/columns.js
index e953977487..024fdc29bc 100644
--- a/packages/frontend-core/src/components/grid/stores/columns.js
+++ b/packages/frontend-core/src/components/grid/stores/columns.js
@@ -90,8 +90,8 @@ export const deriveStores = context => {
     // Update local state
     table.set(newTable)
 
-    // Broadcast event so that we can keep sync with external state
-    // (e.g. data section which maintains a list of table definitions)
+    // Broadcast change to external state can be updated, as this change
+    // will not be received by the builder websocket because we caused it ourselves
     dispatch("updatetable", newTable)
 
     // Update server
@@ -116,10 +116,24 @@ export const initialise = context => {
   const schema = derived(
     [table, schemaOverrides],
     ([$table, $schemaOverrides]) => {
-      let newSchema = $table?.schema
-      if (!newSchema) {
+      if (!$table?.schema) {
         return null
       }
+      let newSchema = { ...$table?.schema }
+
+      // Edge case to temporarily allow deletion of duplicated user
+      // fields that were saved with the "disabled" flag set.
+      // By overriding the saved schema we ensure only overrides can
+      // set the disabled flag.
+      // TODO: remove in future
+      Object.keys(newSchema).forEach(field => {
+        newSchema[field] = {
+          ...newSchema[field],
+          disabled: false,
+        }
+      })
+
+      // Apply schema overrides
       Object.keys($schemaOverrides || {}).forEach(field => {
         if (newSchema[field]) {
           newSchema[field] = {
@@ -160,7 +174,7 @@ export const initialise = context => {
       fields
         .map(field => ({
           name: field,
-          label: $schema[field].name || field,
+          label: $schema[field].displayName || field,
           schema: $schema[field],
           width: $schema[field].width || DefaultColumnWidth,
           visible: $schema[field].visible ?? true,
diff --git a/packages/frontend-core/src/components/grid/stores/reorder.js b/packages/frontend-core/src/components/grid/stores/reorder.js
index de343987db..a99c1b1ab2 100644
--- a/packages/frontend-core/src/components/grid/stores/reorder.js
+++ b/packages/frontend-core/src/components/grid/stores/reorder.js
@@ -4,9 +4,10 @@ const reorderInitialState = {
   sourceColumn: null,
   targetColumn: null,
   breakpoints: [],
-  initialMouseX: null,
-  scrollLeft: 0,
   gridLeft: 0,
+  width: 0,
+  latestX: 0,
+  increment: 0,
 }
 
 export const createStores = () => {
@@ -23,14 +24,24 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const { reorder, columns, visibleColumns, scroll, bounds, stickyColumn, ui } =
-    context
+  const {
+    reorder,
+    columns,
+    visibleColumns,
+    scroll,
+    bounds,
+    stickyColumn,
+    ui,
+    maxScrollLeft,
+  } = context
+
+  let autoScrollInterval
+  let isAutoScrolling
 
   // Callback when dragging on a colum header and starting reordering
   const startReordering = (column, e) => {
     const $visibleColumns = get(visibleColumns)
     const $bounds = get(bounds)
-    const $scroll = get(scroll)
     const $stickyColumn = get(stickyColumn)
     ui.actions.blur()
 
@@ -51,9 +62,8 @@ export const deriveStores = context => {
       sourceColumn: column,
       targetColumn: null,
       breakpoints,
-      initialMouseX: e.clientX,
-      scrollLeft: $scroll.left,
       gridLeft: $bounds.left,
+      width: $bounds.width,
     })
 
     // Add listeners to handle mouse movement
@@ -66,12 +76,44 @@ export const deriveStores = context => {
 
   // Callback when moving the mouse when reordering columns
   const onReorderMouseMove = e => {
+    // Immediately handle the current position
+    const x = e.clientX
+    reorder.update(state => ({
+      ...state,
+      latestX: x,
+    }))
+    considerReorderPosition()
+
+    // Check if we need to start auto-scrolling
     const $reorder = get(reorder)
+    const proximityCutoff = 140
+    const speedFactor = 8
+    const rightProximity = Math.max(0, $reorder.gridLeft + $reorder.width - x)
+    const leftProximity = Math.max(0, x - $reorder.gridLeft)
+    if (rightProximity < proximityCutoff) {
+      const weight = proximityCutoff - rightProximity
+      const increment = (weight / proximityCutoff) * speedFactor
+      reorder.update(state => ({ ...state, increment }))
+      startAutoScroll()
+    } else if (leftProximity < proximityCutoff) {
+      const weight = -1 * (proximityCutoff - leftProximity)
+      const increment = (weight / proximityCutoff) * speedFactor
+      reorder.update(state => ({ ...state, increment }))
+      startAutoScroll()
+    } else {
+      stopAutoScroll()
+    }
+  }
+
+  // Actual logic to consider the current position and determine the new order
+  const considerReorderPosition = () => {
+    const $reorder = get(reorder)
+    const $scroll = get(scroll)
 
     // Compute the closest breakpoint to the current position
     let targetColumn
     let minDistance = Number.MAX_SAFE_INTEGER
-    const mouseX = e.clientX - $reorder.gridLeft + $reorder.scrollLeft
+    const mouseX = $reorder.latestX - $reorder.gridLeft + $scroll.left
     $reorder.breakpoints.forEach(point => {
       const distance = Math.abs(point.x - mouseX)
       if (distance < minDistance) {
@@ -79,7 +121,6 @@ export const deriveStores = context => {
         targetColumn = point.column
       }
     })
-
     if (targetColumn !== $reorder.targetColumn) {
       reorder.update(state => ({
         ...state,
@@ -88,8 +129,35 @@ export const deriveStores = context => {
     }
   }
 
+  // Commences auto-scrolling in a certain direction, triggered when the mouse
+  // approaches the edges of the grid
+  const startAutoScroll = () => {
+    if (isAutoScrolling) {
+      return
+    }
+    isAutoScrolling = true
+    autoScrollInterval = setInterval(() => {
+      const $maxLeft = get(maxScrollLeft)
+      const { increment } = get(reorder)
+      scroll.update(state => ({
+        ...state,
+        left: Math.max(0, Math.min($maxLeft, state.left + increment)),
+      }))
+      considerReorderPosition()
+    }, 10)
+  }
+
+  // Stops auto scrolling
+  const stopAutoScroll = () => {
+    isAutoScrolling = false
+    clearInterval(autoScrollInterval)
+  }
+
   // Callback when stopping reordering columns
   const stopReordering = async () => {
+    // Ensure auto-scrolling is stopped
+    stopAutoScroll()
+
     // Swap position of columns
     let { sourceColumn, targetColumn } = get(reorder)
     moveColumn(sourceColumn, targetColumn)
diff --git a/packages/frontend-core/src/components/grid/stores/rows.js b/packages/frontend-core/src/components/grid/stores/rows.js
index b6dc8c05d0..198c05025c 100644
--- a/packages/frontend-core/src/components/grid/stores/rows.js
+++ b/packages/frontend-core/src/components/grid/stores/rows.js
@@ -214,8 +214,7 @@ export const deriveStores = context => {
   const addRow = async (row, idx, bubble = false) => {
     try {
       // Create row
-      let newRow = await API.saveRow({ ...row, tableId: get(tableId) })
-      newRow = await fetchRow(newRow._id)
+      const newRow = await API.saveRow({ ...row, tableId: get(tableId) })
 
       // Update state
       if (idx != null) {
@@ -268,27 +267,25 @@ export const deriveStores = context => {
     return res?.rows?.[0]
   }
 
-  // Refreshes a specific row, handling updates, addition or deletion
-  const refreshRow = async id => {
-    // Fetch row from the server again
-    const newRow = await fetchRow(id)
-
+  // Replaces a row in state with the newly defined row, handling updates,
+  // addition and deletion
+  const replaceRow = (id, row) => {
     // Get index of row to check if it exists
     const $rows = get(rows)
     const $rowLookupMap = get(rowLookupMap)
     const index = $rowLookupMap[id]
 
     // Process as either an update, addition or deletion
-    if (newRow) {
+    if (row) {
       if (index != null) {
         // An existing row was updated
         rows.update(state => {
-          state[index] = { ...newRow }
+          state[index] = { ...row }
           return state
         })
       } else {
         // A new row was created
-        handleNewRows([newRow])
+        handleNewRows([row])
       }
     } else if (index != null) {
       // A row was removed
@@ -296,6 +293,12 @@ export const deriveStores = context => {
     }
   }
 
+  // Refreshes a specific row
+  const refreshRow = async id => {
+    const row = await fetchRow(id)
+    replaceRow(id, row)
+  }
+
   // Refreshes all data
   const refreshData = () => {
     get(fetch)?.getInitialData()
@@ -341,10 +344,15 @@ export const deriveStores = context => {
       const saved = await API.saveRow({ ...row, ...get(rowChangeCache)[rowId] })
 
       // Update state after a successful change
-      rows.update(state => {
-        state[index] = saved
-        return state.slice()
-      })
+      if (saved?._id) {
+        rows.update(state => {
+          state[index] = saved
+          return state.slice()
+        })
+      } else if (saved?.id) {
+        // Handle users table edge case
+        await refreshRow(saved.id)
+      }
       rowChangeCache.update(state => {
         delete state[rowId]
         return state
@@ -428,6 +436,9 @@ export const deriveStores = context => {
 
   // Checks if we have a row with a certain ID
   const hasRow = id => {
+    if (id === NewRowID) {
+      return true
+    }
     return get(rowLookupMap)[id] != null
   }
 
@@ -455,6 +466,7 @@ export const deriveStores = context => {
         hasRow,
         loadNextPage,
         refreshRow,
+        replaceRow,
         refreshData,
         refreshTableDefinition,
       },
diff --git a/packages/frontend-core/src/components/grid/stores/ui.js b/packages/frontend-core/src/components/grid/stores/ui.js
index 85afad8a90..b62e883437 100644
--- a/packages/frontend-core/src/components/grid/stores/ui.js
+++ b/packages/frontend-core/src/components/grid/stores/ui.js
@@ -25,14 +25,33 @@ export const createStores = () => {
     null
   )
 
+  // Toggles whether a certain row ID is selected or not
+  const toggleSelectedRow = id => {
+    selectedRows.update(state => {
+      let newState = {
+        ...state,
+        [id]: !state[id],
+      }
+      if (!newState[id]) {
+        delete newState[id]
+      }
+      return newState
+    })
+  }
+
   return {
     focusedCellId,
     focusedCellAPI,
     focusedRowId,
     previousFocusedRowId,
-    selectedRows,
     hoveredRowId,
     rowHeight,
+    selectedRows: {
+      ...selectedRows,
+      actions: {
+        toggleRow: toggleSelectedRow,
+      },
+    },
   }
 }
 
diff --git a/packages/frontend-core/src/components/grid/stores/users.js b/packages/frontend-core/src/components/grid/stores/users.js
index 3a6ec5fb21..b6e74ef276 100644
--- a/packages/frontend-core/src/components/grid/stores/users.js
+++ b/packages/frontend-core/src/components/grid/stores/users.js
@@ -1,104 +1,59 @@
 import { writable, get, derived } from "svelte/store"
+import { helpers } from "@budibase/shared-core"
 
 export const createStores = () => {
   const users = writable([])
-  const userId = writable(null)
 
-  // Enrich users with unique colours
-  const enrichedUsers = derived(
-    [users, userId],
-    ([$users, $userId]) => {
-      return (
-        $users
-          .slice()
-          // Place current user first
-          .sort((a, b) => {
-            if (a.id === $userId) {
-              return -1
-            } else if (b.id === $userId) {
-              return 1
-            } else {
-              return 0
-            }
-          })
-          // Enrich users with colors
-          .map((user, idx) => {
-            // Generate random colour hue
-            let hue = 1
-            for (let i = 0; i < user.email.length && i < 5; i++) {
-              hue *= user.email.charCodeAt(i + 1)
-              hue /= 17
-            }
-            hue = hue % 360
-            const color =
-              idx === 0
-                ? "var(--spectrum-global-color-blue-400)"
-                : `hsl(${hue}, 50%, 40%)`
-
-            // Generate friendly label
-            let label = user.email
-            if (user.firstName) {
-              label = user.firstName
-              if (user.lastName) {
-                label += ` ${user.lastName}`
-              }
-            }
-
-            return {
-              ...user,
-              color,
-              label,
-            }
-          })
-      )
-    },
-    []
-  )
+  const enrichedUsers = derived(users, $users => {
+    return $users.map(user => ({
+      ...user,
+      color: helpers.getUserColor(user),
+      label: helpers.getUserLabel(user),
+    }))
+  })
 
   return {
     users: {
       ...users,
       subscribe: enrichedUsers.subscribe,
     },
-    userId,
   }
 }
 
 export const deriveStores = context => {
-  const { users, userId } = context
+  const { users, focusedCellId } = context
 
   // Generate a lookup map of cell ID to the user that has it selected, to make
   // lookups inside cells extremely fast
   const selectedCellMap = derived(
-    [users, userId],
-    ([$enrichedUsers, $userId]) => {
+    [users, focusedCellId],
+    ([$users, $focusedCellId]) => {
       let map = {}
-      $enrichedUsers.forEach(user => {
-        if (user.focusedCellId && user.id !== $userId) {
+      $users.forEach(user => {
+        if (user.focusedCellId && user.focusedCellId !== $focusedCellId) {
           map[user.focusedCellId] = user
         }
       })
       return map
-    },
-    {}
+    }
   )
 
   const updateUser = user => {
     const $users = get(users)
-    const index = $users.findIndex(x => x.id === user.id)
-    if (index === -1) {
+    if (!$users.some(x => x.sessionId === user.sessionId)) {
       users.set([...$users, user])
     } else {
       users.update(state => {
+        const index = state.findIndex(x => x.sessionId === user.sessionId)
         state[index] = user
         return state.slice()
       })
     }
   }
 
-  const removeUser = user => {
+  const removeUser = sessionId => {
     users.update(state => {
-      return state.filter(x => x.id !== user.id)
+      return state.filter(x => x.sessionId !== sessionId)
     })
   }
 
diff --git a/packages/frontend-core/src/components/index.js b/packages/frontend-core/src/components/index.js
index 88107da535..3005c85d01 100644
--- a/packages/frontend-core/src/components/index.js
+++ b/packages/frontend-core/src/components/index.js
@@ -1,4 +1,5 @@
 export { default as SplitPage } from "./SplitPage.svelte"
 export { default as TestimonialPage } from "./TestimonialPage.svelte"
 export { default as Testimonial } from "./Testimonial.svelte"
+export { default as UserAvatar } from "./UserAvatar.svelte"
 export { Grid } from "./grid"
diff --git a/packages/frontend-core/src/constants.js b/packages/frontend-core/src/constants.js
index 42b561d48d..0497a392f3 100644
--- a/packages/frontend-core/src/constants.js
+++ b/packages/frontend-core/src/constants.js
@@ -70,6 +70,7 @@ export const Features = {
   ENFORCEABLE_SSO: "enforceableSSO",
   BRANDING: "branding",
   SCIM: "scim",
+  SYNC_AUTOMATIONS: "syncAutomations",
 }
 
 // Role IDs
diff --git a/packages/frontend-core/src/utils/index.js b/packages/frontend-core/src/utils/index.js
index 6ac7c65c62..16dc4f323a 100644
--- a/packages/frontend-core/src/utils/index.js
+++ b/packages/frontend-core/src/utils/index.js
@@ -3,3 +3,4 @@ export * as JSONUtils from "./json"
 export * as CookieUtils from "./cookies"
 export * as RoleUtils from "./roles"
 export * as Utils from "./utils"
+export { createWebsocket } from "./websocket"
diff --git a/packages/frontend-core/src/utils/websocket.js b/packages/frontend-core/src/utils/websocket.js
new file mode 100644
index 0000000000..dee679eaef
--- /dev/null
+++ b/packages/frontend-core/src/utils/websocket.js
@@ -0,0 +1,60 @@
+import { io } from "socket.io-client"
+import { SocketEvent, SocketSessionTTL } from "@budibase/shared-core"
+import { APISessionID } from "../api"
+
+const DefaultOptions = {
+  heartbeat: true,
+}
+
+export const createWebsocket = (path, options = DefaultOptions) => {
+  if (!path) {
+    throw "A websocket path must be provided"
+  }
+  const { heartbeat } = {
+    ...DefaultOptions,
+    ...options,
+  }
+
+  // Determine connection info
+  const tls = location.protocol === "https:"
+  const proto = tls ? "wss:" : "ws:"
+  const host = location.hostname
+  const port = location.port || (tls ? 443 : 80)
+  let socket = io(`${proto}//${host}:${port}`, {
+    path,
+    // Cap reconnection attempts to 3 (total of 15 seconds before giving up)
+    reconnectionAttempts: 3,
+    // Delay reconnection attempt by 5 seconds
+    reconnectionDelay: 5000,
+    reconnectionDelayMax: 5000,
+    // Timeout after 4 seconds so we never stack requests
+    timeout: 4000,
+    // Disable polling and rely on websocket only, as HTTP transport
+    // will only work with sticky sessions which we don't have
+    transports: ["websocket"],
+  })
+
+  // Set up a heartbeat that's half of the session TTL
+  let interval
+  if (heartbeat) {
+    interval = setInterval(() => {
+      socket.emit(SocketEvent.Heartbeat)
+    }, SocketSessionTTL * 500)
+  }
+
+  socket.on("disconnect", () => {
+    clearInterval(interval)
+  })
+
+  // Helper utility to ignore events that were triggered due to API
+  // changes made by us
+  socket.onOther = (event, callback) => {
+    socket.on(event, data => {
+      if (data?.apiSessionId !== APISessionID) {
+        callback(data)
+      }
+    })
+  }
+
+  return socket
+}
diff --git a/packages/pro b/packages/pro
index aea8a4acb0..cd06642b86 160000
--- a/packages/pro
+++ b/packages/pro
@@ -1 +1 @@
-Subproject commit aea8a4acb0bae6a1036520bf4c6d8cae428cc7d9
+Subproject commit cd06642b860111aa1bd3443ee10076ca3abf03c3
diff --git a/packages/sdk/package.json b/packages/sdk/package.json
index 7e8b74698d..4d3c811b3d 100644
--- a/packages/sdk/package.json
+++ b/packages/sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/sdk",
-  "version": "0.0.1",
+  "version": "0.0.0",
   "description": "Budibase Public API SDK",
   "author": "Budibase",
   "license": "MPL-2.0",
diff --git a/packages/server/package.json b/packages/server/package.json
index 2ec1395b71..c73bba0f16 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/server",
   "email": "hi@budibase.com",
-  "version": "0.0.1",
+  "version": "0.0.0",
   "description": "Budibase Web Server",
   "main": "src/index.ts",
   "repository": {
@@ -11,6 +11,7 @@
   "scripts": {
     "prebuild": "rimraf dist/",
     "build": "node ./scripts/build.js",
+    "check:types": "tsc -p tsconfig.build.json --noEmit",
     "postbuild": "copyfiles -f ../client/dist/budibase-client.js ../client/manifest.json client",
     "build:dev": "yarn prebuild && tsc --build --watch --preserveWatchOutput",
     "debug": "yarn build && node --expose-gc --inspect=9222 dist/index.js",
@@ -45,12 +46,12 @@
   "license": "GPL-3.0",
   "dependencies": {
     "@apidevtools/swagger-parser": "10.0.3",
-    "@budibase/backend-core": "0.0.1",
-    "@budibase/client": "0.0.1",
-    "@budibase/pro": "0.0.1",
-    "@budibase/shared-core": "0.0.1",
-    "@budibase/string-templates": "0.0.1",
-    "@budibase/types": "0.0.1",
+    "@budibase/backend-core": "0.0.0",
+    "@budibase/client": "0.0.0",
+    "@budibase/pro": "0.0.0",
+    "@budibase/shared-core": "0.0.0",
+    "@budibase/string-templates": "0.0.0",
+    "@budibase/types": "0.0.0",
     "@bull-board/api": "3.7.0",
     "@bull-board/koa": "3.9.4",
     "@elastic/elasticsearch": "7.10.0",
@@ -58,6 +59,7 @@
     "@koa/router": "8.0.8",
     "@sendgrid/mail": "7.1.1",
     "@sentry/node": "6.17.7",
+    "@socket.io/redis-adapter": "^8.2.1",
     "airtable": "0.10.1",
     "arangojs": "7.2.0",
     "aws-sdk": "2.1030.0",
@@ -78,6 +80,7 @@
     "global-agent": "3.0.0",
     "google-auth-library": "7.12.0",
     "google-spreadsheet": "3.2.0",
+    "ioredis": "5.3.2",
     "jimp": "0.16.1",
     "joi": "17.6.0",
     "js-yaml": "4.1.0",
@@ -98,6 +101,7 @@
     "mssql": "6.2.3",
     "mysql2": "2.3.3",
     "node-fetch": "2.6.7",
+    "object-sizeof": "2.6.1",
     "open": "8.4.0",
     "openai": "^3.2.1",
     "pg": "8.10.0",
@@ -119,8 +123,8 @@
     "validate.js": "0.13.1",
     "vm2": "3.9.17",
     "worker-farm": "1.7.0",
-    "yargs": "13.2.4",
-    "xml2js": "0.5.0"
+    "xml2js": "0.5.0",
+    "yargs": "13.2.4"
   },
   "devDependencies": {
     "@babel/core": "7.17.4",
@@ -134,7 +138,6 @@
     "@types/bson": "4.2.0",
     "@types/global-agent": "2.1.1",
     "@types/google-spreadsheet": "3.1.5",
-    "@types/ioredis": "4.28.10",
     "@types/jest": "29.5.0",
     "@types/koa": "2.13.4",
     "@types/koa__router": "8.0.8",
@@ -154,7 +157,6 @@
     "copyfiles": "2.4.1",
     "docker-compose": "0.23.17",
     "eslint": "6.8.0",
-    "ioredis-mock": "7.2.0",
     "is-wsl": "2.2.0",
     "jest": "29.5.0",
     "jest-openapi": "0.14.2",
diff --git a/packages/server/src/api/controllers/application.ts b/packages/server/src/api/controllers/application.ts
index ff0dbe015b..9c89b48b8a 100644
--- a/packages/server/src/api/controllers/application.ts
+++ b/packages/server/src/api/controllers/application.ts
@@ -26,10 +26,13 @@ import {
   env as envCore,
 } from "@budibase/backend-core"
 import { USERS_TABLE_SCHEMA } from "../../constants"
-import { buildDefaultDocs } from "../../db/defaultData/datasource_bb_default"
+import {
+  DEFAULT_BB_DATASOURCE_ID,
+  buildDefaultDocs,
+} from "../../db/defaultData/datasource_bb_default"
 import { removeAppFromUserRoles } from "../../utilities/workerRequests"
 import { stringToReadStream, isQsTrue } from "../../utilities"
-import { getLocksById } from "../../utilities/redis"
+import { getLocksById, doesUserHaveLock } from "../../utilities/redis"
 import {
   updateClientLibrary,
   backupClientLibrary,
@@ -111,11 +114,7 @@ function checkAppName(
   }
 }
 
-async function createInstance(
-  appId: string,
-  template: any,
-  includeSampleData: boolean
-) {
+async function createInstance(appId: string, template: any) {
   const db = context.getAppDB()
   await db.put({
     _id: "_design/database",
@@ -142,21 +141,25 @@ async function createInstance(
   } else {
     // create the users table
     await db.put(USERS_TABLE_SCHEMA)
-
-    if (includeSampleData) {
-      // create ootb stock db
-      await addDefaultTables(db)
-    }
   }
 
   return { _id: appId }
 }
 
-async function addDefaultTables(db: Database) {
-  const defaultDbDocs = buildDefaultDocs()
+export const addSampleData = async (ctx: UserCtx) => {
+  const db = context.getAppDB()
 
-  // add in the default db data docs - tables, datasource, rows and links
-  await db.bulkDocs([...defaultDbDocs])
+  try {
+    // Check if default datasource exists before creating it
+    await sdk.datasources.get(DEFAULT_BB_DATASOURCE_ID)
+  } catch (err: any) {
+    const defaultDbDocs = buildDefaultDocs()
+
+    // add in the default db data docs - tables, datasource, rows and links
+    await db.bulkDocs([...defaultDbDocs])
+  }
+
+  ctx.status = 200
 }
 
 export async function fetch(ctx: UserCtx) {
@@ -227,6 +230,7 @@ export async function fetchAppPackage(ctx: UserCtx) {
     screens,
     layouts,
     clientLibPath,
+    hasLock: await doesUserHaveLock(application.appId, ctx.user),
   }
 }
 
@@ -247,16 +251,11 @@ async function performAppCreate(ctx: UserCtx) {
   if (ctx.request.files && ctx.request.files.templateFile) {
     instanceConfig.file = ctx.request.files.templateFile
   }
-  const includeSampleData = isQsTrue(ctx.request.body.sampleData)
   const tenantId = tenancy.isMultiTenant() ? tenancy.getTenantId() : null
   const appId = generateDevAppID(generateAppID(tenantId))
 
   return await context.doInAppContext(appId, async () => {
-    const instance = await createInstance(
-      appId,
-      instanceConfig,
-      includeSampleData
-    )
+    const instance = await createInstance(appId, instanceConfig)
     const db = context.getAppDB()
 
     let newApplication: App = {
diff --git a/packages/server/src/api/controllers/automation.ts b/packages/server/src/api/controllers/automation.ts
index ae49cd83f1..be7af7b075 100644
--- a/packages/server/src/api/controllers/automation.ts
+++ b/packages/server/src/api/controllers/automation.ts
@@ -14,9 +14,16 @@ import { deleteEntityMetadata } from "../../utilities"
 import { MetadataTypes } from "../../constants"
 import { setTestFlag, clearTestFlag } from "../../utilities/redis"
 import { context, cache, events } from "@budibase/backend-core"
-import { automations } from "@budibase/pro"
-import { Automation, BBContext } from "@budibase/types"
+import { automations, features } from "@budibase/pro"
+import {
+  Automation,
+  AutomationActionStepId,
+  AutomationResults,
+  BBContext,
+} from "@budibase/types"
 import { getActionDefinitions as actionDefs } from "../../automations/actions"
+import sdk from "../../sdk"
+import { db as dbCore } from "@budibase/backend-core"
 
 async function getActionDefinitions() {
   return removeDeprecated(await actionDefs())
@@ -257,13 +264,34 @@ export async function getDefinitionList(ctx: BBContext) {
 export async function trigger(ctx: BBContext) {
   const db = context.getAppDB()
   let automation = await db.get(ctx.params.id)
-  await triggers.externalTrigger(automation, {
-    ...ctx.request.body,
-    appId: ctx.appId,
-  })
-  ctx.body = {
-    message: `Automation ${automation._id} has been triggered.`,
-    automation,
+
+  let hasCollectStep = sdk.automations.utils.checkForCollectStep(automation)
+  if (hasCollectStep && (await features.isSyncAutomationsEnabled())) {
+    const response: AutomationResults = await triggers.externalTrigger(
+      automation,
+      {
+        fields: ctx.request.body.fields,
+        timeout: ctx.request.body.timeout * 1000 || 120000,
+      },
+      { getResponses: true }
+    )
+
+    let collectedValue = response.steps.find(
+      step => step.stepId === AutomationActionStepId.COLLECT
+    )
+    ctx.body = collectedValue?.outputs
+  } else {
+    if (ctx.appId && !dbCore.isProdAppID(ctx.appId)) {
+      ctx.throw(400, "Only apps in production support this endpoint")
+    }
+    await triggers.externalTrigger(automation, {
+      ...ctx.request.body,
+      appId: ctx.appId,
+    })
+    ctx.body = {
+      message: `Automation ${automation._id} has been triggered.`,
+      automation,
+    }
   }
 }
 
diff --git a/packages/server/src/api/controllers/datasource.ts b/packages/server/src/api/controllers/datasource.ts
index 2d7ba8224f..8fe0ab70da 100644
--- a/packages/server/src/api/controllers/datasource.ts
+++ b/packages/server/src/api/controllers/datasource.ts
@@ -21,11 +21,13 @@ import {
   CreateDatasourceRequest,
   VerifyDatasourceRequest,
   VerifyDatasourceResponse,
+  FetchDatasourceInfoRequest,
   FetchDatasourceInfoResponse,
   IntegrationBase,
   DatasourcePlus,
 } from "@budibase/types"
 import sdk from "../../sdk"
+import { builderSocket } from "../../websockets"
 
 function getErrorTables(errors: any, errorType: string) {
   return Object.entries(errors)
@@ -56,6 +58,21 @@ async function getConnector(
   return new Connector(datasource.config)
 }
 
+async function getAndMergeDatasource(datasource: Datasource) {
+  let existingDatasource: undefined | Datasource
+  if (datasource._id) {
+    existingDatasource = await sdk.datasources.get(datasource._id)
+  }
+  let enrichedDatasource = datasource
+  if (existingDatasource) {
+    enrichedDatasource = sdk.datasources.mergeConfigs(
+      datasource,
+      existingDatasource
+    )
+  }
+  return await sdk.datasources.enrich(enrichedDatasource)
+}
+
 async function buildSchemaHelper(datasource: Datasource) {
   const connector = (await getConnector(datasource)) as DatasourcePlus
   await connector.buildSchema(datasource._id!, datasource.entities!)
@@ -131,17 +148,7 @@ export async function verify(
   ctx: UserCtx<VerifyDatasourceRequest, VerifyDatasourceResponse>
 ) {
   const { datasource } = ctx.request.body
-  let existingDatasource: undefined | Datasource
-  if (datasource._id) {
-    existingDatasource = await sdk.datasources.get(datasource._id)
-  }
-  let enrichedDatasource = datasource
-  if (existingDatasource) {
-    enrichedDatasource = sdk.datasources.mergeConfigs(
-      datasource,
-      existingDatasource
-    )
-  }
+  const enrichedDatasource = await getAndMergeDatasource(datasource)
   const connector = await getConnector(enrichedDatasource)
   if (!connector.testConnection) {
     ctx.throw(400, "Connection information verification not supported")
@@ -155,11 +162,11 @@ export async function verify(
 }
 
 export async function information(
-  ctx: UserCtx<void, FetchDatasourceInfoResponse>
+  ctx: UserCtx<FetchDatasourceInfoRequest, FetchDatasourceInfoResponse>
 ) {
-  const datasourceId = ctx.params.datasourceId
-  const datasource = await sdk.datasources.get(datasourceId, { enriched: true })
-  const connector = (await getConnector(datasource)) as DatasourcePlus
+  const { datasource } = ctx.request.body
+  const enrichedDatasource = await getAndMergeDatasource(datasource)
+  const connector = (await getConnector(enrichedDatasource)) as DatasourcePlus
   if (!connector.getTableNames) {
     ctx.throw(400, "Table name fetching not supported by datasource")
   }
@@ -296,6 +303,7 @@ export async function update(ctx: UserCtx<any, UpdateDatasourceResponse>) {
   ctx.body = {
     datasource: await sdk.datasources.removeSecretSingle(datasource),
   }
+  builderSocket?.emitDatasourceUpdate(ctx, datasource)
 }
 
 export async function save(
@@ -338,6 +346,7 @@ export async function save(
     response.error = schemaError
   }
   ctx.body = response
+  builderSocket?.emitDatasourceUpdate(ctx, datasource)
 }
 
 async function destroyInternalTablesBySourceId(datasourceId: string) {
@@ -397,6 +406,7 @@ export async function destroy(ctx: UserCtx) {
 
   ctx.message = `Datasource deleted.`
   ctx.status = 200
+  builderSocket?.emitDatasourceDeletion(ctx, datasourceId)
 }
 
 export async function find(ctx: UserCtx) {
diff --git a/packages/server/src/api/controllers/deploy/index.ts b/packages/server/src/api/controllers/deploy/index.ts
index 60239d2c4c..6a31998c14 100644
--- a/packages/server/src/api/controllers/deploy/index.ts
+++ b/packages/server/src/api/controllers/deploy/index.ts
@@ -104,6 +104,7 @@ export async function fetchDeployments(ctx: any) {
     }
     ctx.body = Object.values(deployments.history).reverse()
   } catch (err) {
+    console.error(err)
     ctx.body = []
   }
 }
diff --git a/packages/server/src/api/controllers/plugin/index.ts b/packages/server/src/api/controllers/plugin/index.ts
index 31a3468178..a8a451c98c 100644
--- a/packages/server/src/api/controllers/plugin/index.ts
+++ b/packages/server/src/api/controllers/plugin/index.ts
@@ -71,7 +71,7 @@ export async function create(ctx: any) {
 
     const doc = await pro.plugins.storePlugin(metadata, directory, source)
 
-    clientAppSocket.emit("plugins-update", { name, hash: doc.hash })
+    clientAppSocket?.emit("plugins-update", { name, hash: doc.hash })
     ctx.body = {
       message: "Plugin uploaded successfully",
       plugins: [doc],
diff --git a/packages/server/src/api/controllers/row/external.ts b/packages/server/src/api/controllers/row/external.ts
index ee796e32d4..a68586b099 100644
--- a/packages/server/src/api/controllers/row/external.ts
+++ b/packages/server/src/api/controllers/row/external.ts
@@ -1,7 +1,7 @@
 import {
-  SortDirection,
   FieldTypes,
   NoEmptyFilterStrings,
+  SortDirection,
 } from "../../../constants"
 import {
   breakExternalTableId,
@@ -11,20 +11,34 @@ import { ExternalRequest, RunConfig } from "./ExternalRequest"
 import * as exporters from "../view/exporters"
 import { apiFileReturn } from "../../../utilities/fileSystem"
 import {
-  Operation,
-  UserCtx,
-  Row,
-  PaginationJson,
-  Table,
   Datasource,
   IncludeRelationship,
+  Operation,
+  PaginationJson,
+  Row,
   SortJson,
+  Table,
+  UserCtx,
 } from "@budibase/types"
 import sdk from "../../../sdk"
 import * as utils from "./utils"
 
 const { cleanExportRows } = require("./utils")
 
+async function getRow(
+  tableId: string,
+  rowId: string,
+  opts?: { relationships?: boolean }
+) {
+  const response = (await handleRequest(Operation.READ, tableId, {
+    id: breakRowIdField(rowId),
+    includeSqlRelationships: opts?.relationships
+      ? IncludeRelationship.INCLUDE
+      : IncludeRelationship.EXCLUDE,
+  })) as Row[]
+  return response ? response[0] : response
+}
+
 export async function handleRequest(
   operation: Operation,
   tableId: string,
@@ -63,11 +77,15 @@ export async function patch(ctx: UserCtx) {
   if (!validateResult.valid) {
     throw { validation: validateResult.errors }
   }
-  return handleRequest(Operation.UPDATE, tableId, {
+  const response = await handleRequest(Operation.UPDATE, tableId, {
     id: breakRowIdField(id),
     row: inputs,
-    includeSqlRelationships: IncludeRelationship.INCLUDE,
   })
+  const row = await getRow(tableId, id, { relationships: true })
+  return {
+    ...response,
+    row,
+  }
 }
 
 export async function save(ctx: UserCtx) {
@@ -80,10 +98,20 @@ export async function save(ctx: UserCtx) {
   if (!validateResult.valid) {
     throw { validation: validateResult.errors }
   }
-  return handleRequest(Operation.CREATE, tableId, {
+  const response = await handleRequest(Operation.CREATE, tableId, {
     row: inputs,
-    includeSqlRelationships: IncludeRelationship.EXCLUDE,
   })
+  const responseRow = response as { row: Row }
+  const rowId = responseRow.row._id
+  if (rowId) {
+    const row = await getRow(tableId, rowId, { relationships: true })
+    return {
+      ...response,
+      row,
+    }
+  } else {
+    return response
+  }
 }
 
 export async function fetchView(ctx: UserCtx) {
@@ -104,11 +132,7 @@ export async function fetch(ctx: UserCtx) {
 export async function find(ctx: UserCtx) {
   const id = ctx.params.rowId
   const tableId = ctx.params.tableId
-  const response = (await handleRequest(Operation.READ, tableId, {
-    id: breakRowIdField(id),
-    includeSqlRelationships: IncludeRelationship.EXCLUDE,
-  })) as Row[]
-  return response ? response[0] : response
+  return getRow(tableId, id)
 }
 
 export async function destroy(ctx: UserCtx) {
diff --git a/packages/server/src/api/controllers/row/index.ts b/packages/server/src/api/controllers/row/index.ts
index 349c4e72e7..91270429a4 100644
--- a/packages/server/src/api/controllers/row/index.ts
+++ b/packages/server/src/api/controllers/row/index.ts
@@ -4,6 +4,7 @@ import * as external from "./external"
 import { isExternalTable } from "../../../integrations/utils"
 import { Ctx } from "@budibase/types"
 import * as utils from "./utils"
+import { gridSocket } from "../../../websockets"
 
 function pickApi(tableId: any) {
   if (isExternalTable(tableId)) {
@@ -12,21 +13,9 @@ function pickApi(tableId: any) {
   return internal
 }
 
-function getTableId(ctx: any) {
-  if (ctx.request.body && ctx.request.body.tableId) {
-    return ctx.request.body.tableId
-  }
-  if (ctx.params && ctx.params.tableId) {
-    return ctx.params.tableId
-  }
-  if (ctx.params && ctx.params.viewName) {
-    return ctx.params.viewName
-  }
-}
-
 export async function patch(ctx: any): Promise<any> {
   const appId = ctx.appId
-  const tableId = getTableId(ctx)
+  const tableId = utils.getTableId(ctx)
   const body = ctx.request.body
   // if it doesn't have an _id then its save
   if (body && !body._id) {
@@ -47,6 +36,7 @@ export async function patch(ctx: any): Promise<any> {
       ctx.eventEmitter.emitRow(`row:update`, appId, row, table)
     ctx.message = `${table.name} updated successfully.`
     ctx.body = row
+    gridSocket?.emitRowUpdate(ctx, row)
   } catch (err) {
     ctx.throw(400, err)
   }
@@ -54,13 +44,13 @@ export async function patch(ctx: any): Promise<any> {
 
 export const save = async (ctx: any) => {
   const appId = ctx.appId
-  const tableId = getTableId(ctx)
+  const tableId = utils.getTableId(ctx)
   const body = ctx.request.body
   // if it has an ID already then its a patch
   if (body && body._id) {
     return patch(ctx)
   }
-  const { row, table } = await quotas.addRow(() =>
+  const { row, table, squashed } = await quotas.addRow(() =>
     quotas.addQuery(() => pickApi(tableId).save(ctx), {
       datasourceId: tableId,
     })
@@ -68,24 +58,26 @@ export const save = async (ctx: any) => {
   ctx.status = 200
   ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:save`, appId, row, table)
   ctx.message = `${table.name} saved successfully`
-  ctx.body = row
+  // prefer squashed for response
+  ctx.body = row || squashed
+  gridSocket?.emitRowUpdate(ctx, row || squashed)
 }
 export async function fetchView(ctx: any) {
-  const tableId = getTableId(ctx)
+  const tableId = utils.getTableId(ctx)
   ctx.body = await quotas.addQuery(() => pickApi(tableId).fetchView(ctx), {
     datasourceId: tableId,
   })
 }
 
 export async function fetch(ctx: any) {
-  const tableId = getTableId(ctx)
+  const tableId = utils.getTableId(ctx)
   ctx.body = await quotas.addQuery(() => pickApi(tableId).fetch(ctx), {
     datasourceId: tableId,
   })
 }
 
 export async function find(ctx: any) {
-  const tableId = getTableId(ctx)
+  const tableId = utils.getTableId(ctx)
   ctx.body = await quotas.addQuery(() => pickApi(tableId).find(ctx), {
     datasourceId: tableId,
   })
@@ -94,7 +86,7 @@ export async function find(ctx: any) {
 export async function destroy(ctx: any) {
   const appId = ctx.appId
   const inputs = ctx.request.body
-  const tableId = getTableId(ctx)
+  const tableId = utils.getTableId(ctx)
   let response, row
   if (inputs.rows) {
     let { rows } = await quotas.addQuery(
@@ -107,6 +99,7 @@ export async function destroy(ctx: any) {
     response = rows
     for (let row of rows) {
       ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:delete`, appId, row)
+      gridSocket?.emitRowDeletion(ctx, row._id)
     }
   } else {
     let resp = await quotas.addQuery(() => pickApi(tableId).destroy(ctx), {
@@ -116,6 +109,7 @@ export async function destroy(ctx: any) {
     response = resp.response
     row = resp.row
     ctx.eventEmitter && ctx.eventEmitter.emitRow(`row:delete`, appId, row)
+    gridSocket?.emitRowDeletion(ctx, row._id)
   }
   ctx.status = 200
   // for automations include the row that was deleted
@@ -124,7 +118,7 @@ export async function destroy(ctx: any) {
 }
 
 export async function search(ctx: any) {
-  const tableId = getTableId(ctx)
+  const tableId = utils.getTableId(ctx)
   ctx.status = 200
   ctx.body = await quotas.addQuery(() => pickApi(tableId).search(ctx), {
     datasourceId: tableId,
@@ -132,7 +126,7 @@ export async function search(ctx: any) {
 }
 
 export async function validate(ctx: Ctx) {
-  const tableId = getTableId(ctx)
+  const tableId = utils.getTableId(ctx)
   // external tables are hard to validate currently
   if (isExternalTable(tableId)) {
     ctx.body = { valid: true }
@@ -145,7 +139,7 @@ export async function validate(ctx: Ctx) {
 }
 
 export async function fetchEnrichedRow(ctx: any) {
-  const tableId = getTableId(ctx)
+  const tableId = utils.getTableId(ctx)
   ctx.body = await quotas.addQuery(
     () => pickApi(tableId).fetchEnrichedRow(ctx),
     {
@@ -155,7 +149,7 @@ export async function fetchEnrichedRow(ctx: any) {
 }
 
 export const exportRows = async (ctx: any) => {
-  const tableId = getTableId(ctx)
+  const tableId = utils.getTableId(ctx)
   ctx.body = await quotas.addQuery(() => pickApi(tableId).exportRows(ctx), {
     datasourceId: tableId,
   })
diff --git a/packages/server/src/api/controllers/row/internal.ts b/packages/server/src/api/controllers/row/internal.ts
index e3cb419236..87d8cd7e9a 100644
--- a/packages/server/src/api/controllers/row/internal.ts
+++ b/packages/server/src/api/controllers/row/internal.ts
@@ -415,7 +415,7 @@ export async function exportRows(ctx: UserCtx) {
 
     result = await outputProcessing(table, response)
   } else if (query) {
-    let searchResponse = await exports.search(ctx)
+    let searchResponse = await search(ctx)
     result = searchResponse.rows
   }
 
diff --git a/packages/server/src/api/controllers/row/staticFormula.ts b/packages/server/src/api/controllers/row/staticFormula.ts
index 6ba44dc23a..9f2c64c7b4 100644
--- a/packages/server/src/api/controllers/row/staticFormula.ts
+++ b/packages/server/src/api/controllers/row/staticFormula.ts
@@ -7,6 +7,7 @@ import {
 import { FieldTypes, FormulaTypes } from "../../../constants"
 import { context } from "@budibase/backend-core"
 import { Table, Row } from "@budibase/types"
+import * as linkRows from "../../../db/linkedRows"
 const { isEqual } = require("lodash")
 const { cloneDeep } = require("lodash/fp")
 
@@ -166,5 +167,9 @@ export async function finaliseRow(
   if (updateFormula) {
     await updateRelatedFormula(table, enrichedRow)
   }
-  return { row: enrichedRow, table }
+  const squashed = await linkRows.squashLinksToPrimaryDisplay(
+    table,
+    enrichedRow
+  )
+  return { row: enrichedRow, squashed, table }
 }
diff --git a/packages/server/src/api/controllers/row/utils.ts b/packages/server/src/api/controllers/row/utils.ts
index f6a87dd24c..f1edbf538b 100644
--- a/packages/server/src/api/controllers/row/utils.ts
+++ b/packages/server/src/api/controllers/row/utils.ts
@@ -154,3 +154,15 @@ export function cleanExportRows(
 
   return cleanRows
 }
+
+export function getTableId(ctx: any) {
+  if (ctx.request.body && ctx.request.body.tableId) {
+    return ctx.request.body.tableId
+  }
+  if (ctx.params && ctx.params.tableId) {
+    return ctx.params.tableId
+  }
+  if (ctx.params && ctx.params.viewName) {
+    return ctx.params.viewName
+  }
+}
diff --git a/packages/server/src/api/controllers/table/index.ts b/packages/server/src/api/controllers/table/index.ts
index cbbda7b930..5ade77592a 100644
--- a/packages/server/src/api/controllers/table/index.ts
+++ b/packages/server/src/api/controllers/table/index.ts
@@ -11,6 +11,7 @@ import { context, events } from "@budibase/backend-core"
 import { Table, UserCtx } from "@budibase/types"
 import sdk from "../../../sdk"
 import { jsonFromCsvString } from "../../../utilities/csv"
+import { builderSocket } from "../../../websockets"
 
 function pickApi({ tableId, table }: { tableId?: string; table?: Table }) {
   if (table && !tableId) {
@@ -77,6 +78,7 @@ export async function save(ctx: UserCtx) {
   ctx.eventEmitter &&
     ctx.eventEmitter.emitTable(`table:save`, appId, savedTable)
   ctx.body = savedTable
+  builderSocket?.emitTableUpdate(ctx, savedTable)
 }
 
 export async function destroy(ctx: UserCtx) {
@@ -89,6 +91,7 @@ export async function destroy(ctx: UserCtx) {
   ctx.status = 200
   ctx.table = deletedTable
   ctx.body = { message: `Table ${tableId} deleted.` }
+  builderSocket?.emitTableDeletion(ctx, tableId)
 }
 
 export async function bulkImport(ctx: UserCtx) {
diff --git a/packages/server/src/api/controllers/view/index.ts b/packages/server/src/api/controllers/view/index.ts
index ed2302f723..b194f3cb5e 100644
--- a/packages/server/src/api/controllers/view/index.ts
+++ b/packages/server/src/api/controllers/view/index.ts
@@ -16,6 +16,7 @@ import {
   View,
 } from "@budibase/types"
 import { cleanExportRows } from "../row/utils"
+import { builderSocket } from "../../../websockets"
 
 const { cloneDeep, isEqual } = require("lodash")
 
@@ -48,7 +49,7 @@ export async function save(ctx: Ctx) {
   if (!view.meta.schema) {
     view.meta.schema = table.schema
   }
-  table.views[viewName] = view.meta
+  table.views[viewName] = { ...view.meta, name: viewName }
   if (originalName) {
     delete table.views[originalName]
     existingTable.views[viewName] = existingTable.views[originalName]
@@ -56,10 +57,8 @@ export async function save(ctx: Ctx) {
   await db.put(table)
   await handleViewEvents(existingTable.views[viewName], table.views[viewName])
 
-  ctx.body = {
-    ...table.views[viewToSave.name],
-    name: viewToSave.name,
-  }
+  ctx.body = table.views[viewName]
+  builderSocket?.emitTableUpdate(ctx, table)
 }
 
 export async function calculationEvents(existingView: View, newView: View) {
@@ -128,6 +127,7 @@ export async function destroy(ctx: Ctx) {
   await events.view.deleted(view)
 
   ctx.body = view
+  builderSocket?.emitTableUpdate(ctx, table)
 }
 
 export async function exportView(ctx: Ctx) {
diff --git a/packages/server/src/api/controllers/webhook.ts b/packages/server/src/api/controllers/webhook.ts
index c3fc3892d3..ee92c70628 100644
--- a/packages/server/src/api/controllers/webhook.ts
+++ b/packages/server/src/api/controllers/webhook.ts
@@ -6,8 +6,11 @@ import {
   WebhookActionType,
   BBContext,
   Automation,
+  AutomationActionStepId,
 } from "@budibase/types"
 import sdk from "../../sdk"
+import * as pro from "@budibase/pro"
+
 const toJsonSchema = require("to-json-schema")
 const validate = require("jsonschema").validate
 
@@ -78,15 +81,36 @@ export async function trigger(ctx: BBContext) {
       if (webhook.action.type === WebhookActionType.AUTOMATION) {
         // trigger with both the pure request and then expand it
         // incase the user has produced a schema to bind to
-        await triggers.externalTrigger(target, {
-          body: ctx.request.body,
-          ...ctx.request.body,
-          appId: prodAppId,
-        })
-      }
-      ctx.status = 200
-      ctx.body = {
-        message: "Webhook trigger fired successfully",
+        let hasCollectStep = sdk.automations.utils.checkForCollectStep(target)
+
+        if (hasCollectStep && (await pro.features.isSyncAutomationsEnabled())) {
+          const response = await triggers.externalTrigger(
+            target,
+            {
+              body: ctx.request.body,
+              ...ctx.request.body,
+              appId: prodAppId,
+            },
+            { getResponses: true }
+          )
+
+          let collectedValue = response.steps.find(
+            (step: any) => step.stepId === AutomationActionStepId.COLLECT
+          )
+
+          ctx.status = 200
+          ctx.body = collectedValue.outputs
+        } else {
+          await triggers.externalTrigger(target, {
+            body: ctx.request.body,
+            ...ctx.request.body,
+            appId: prodAppId,
+          })
+          ctx.status = 200
+          ctx.body = {
+            message: "Webhook trigger fired successfully",
+          }
+        }
       }
     } catch (err: any) {
       if (err.status === 404) {
diff --git a/packages/server/src/api/routes/application.ts b/packages/server/src/api/routes/application.ts
index 0aa88568f3..0c1fa364ff 100644
--- a/packages/server/src/api/routes/application.ts
+++ b/packages/server/src/api/routes/application.ts
@@ -38,6 +38,11 @@ router
     authorized(permissions.BUILDER),
     controller.revertClient
   )
+  .post(
+    "/api/applications/:appId/sample",
+    authorized(permissions.BUILDER),
+    controller.addSampleData
+  )
   .post(
     "/api/applications/:appId/publish",
     authorized(permissions.BUILDER),
diff --git a/packages/server/src/api/routes/automation.ts b/packages/server/src/api/routes/automation.ts
index cb8b6042ae..489487271c 100644
--- a/packages/server/src/api/routes/automation.ts
+++ b/packages/server/src/api/routes/automation.ts
@@ -65,7 +65,6 @@ router
   )
   .post(
     "/api/automations/:id/trigger",
-    appInfoMiddleware({ appType: AppType.PROD }),
     paramResource("id"),
     authorized(
       permissions.PermissionType.AUTOMATION,
diff --git a/packages/server/src/api/routes/datasource.ts b/packages/server/src/api/routes/datasource.ts
index ac8256539c..f874d3c4aa 100644
--- a/packages/server/src/api/routes/datasource.ts
+++ b/packages/server/src/api/routes/datasource.ts
@@ -20,8 +20,8 @@ router
     authorized(permissions.BUILDER),
     datasourceController.verify
   )
-  .get(
-    "/api/datasources/:datasourceId/info",
+  .post(
+    "/api/datasources/info",
     authorized(permissions.BUILDER),
     datasourceController.information
   )
diff --git a/packages/server/src/api/routes/tests/automation.spec.js b/packages/server/src/api/routes/tests/automation.spec.ts
similarity index 75%
rename from packages/server/src/api/routes/tests/automation.spec.js
rename to packages/server/src/api/routes/tests/automation.spec.ts
index 9efc2b0d7e..178189555d 100644
--- a/packages/server/src/api/routes/tests/automation.spec.js
+++ b/packages/server/src/api/routes/tests/automation.spec.ts
@@ -1,15 +1,27 @@
-const {
+import {
   checkBuilderEndpoint,
   getAllTableRows,
   clearAllAutomations,
   testAutomation,
-} = require("./utilities/TestFunctions")
-const setup = require("./utilities")
-const { basicAutomation, newAutomation, automationTrigger, automationStep } = setup.structures
-const MAX_RETRIES = 4
-const { TRIGGER_DEFINITIONS, BUILTIN_ACTION_DEFINITIONS } = require("../../../automations")
-const { events } = require("@budibase/backend-core")
+} from "./utilities/TestFunctions"
+import * as setup from "./utilities"
+import {
+  TRIGGER_DEFINITIONS,
+  BUILTIN_ACTION_DEFINITIONS,
+} from "../../../automations"
+import { events } from "@budibase/backend-core"
+import sdk from "../../../sdk"
+import { Automation } from "@budibase/types"
+import { mocks } from "@budibase/backend-core/tests"
 
+const MAX_RETRIES = 4
+let {
+  basicAutomation,
+  newAutomation,
+  automationTrigger,
+  automationStep,
+  collectAutomation,
+} = setup.structures
 
 jest.setTimeout(30000)
 
@@ -24,6 +36,7 @@ describe("/automations", () => {
   })
 
   beforeEach(() => {
+    // @ts-ignore
     events.automation.deleted.mockClear()
   })
 
@@ -32,7 +45,7 @@ describe("/automations", () => {
       const res = await request
         .get(`/api/automations/action/list`)
         .set(config.defaultHeaders())
-        .expect('Content-Type', /json/)
+        .expect("Content-Type", /json/)
         .expect(200)
 
       expect(Object.keys(res.body).length).not.toEqual(0)
@@ -42,7 +55,7 @@ describe("/automations", () => {
       const res = await request
         .get(`/api/automations/trigger/list`)
         .set(config.defaultHeaders())
-        .expect('Content-Type', /json/)
+        .expect("Content-Type", /json/)
         .expect(200)
 
       expect(Object.keys(res.body).length).not.toEqual(0)
@@ -52,14 +65,18 @@ describe("/automations", () => {
       const res = await request
         .get(`/api/automations/definitions/list`)
         .set(config.defaultHeaders())
-        .expect('Content-Type', /json/)
+        .expect("Content-Type", /json/)
         .expect(200)
 
       let definitionsLength = Object.keys(BUILTIN_ACTION_DEFINITIONS).length
       definitionsLength-- // OUTGOING_WEBHOOK is deprecated
 
-      expect(Object.keys(res.body.action).length).toBeGreaterThanOrEqual(definitionsLength)
-      expect(Object.keys(res.body.trigger).length).toEqual(Object.keys(TRIGGER_DEFINITIONS).length)
+      expect(Object.keys(res.body.action).length).toBeGreaterThanOrEqual(
+        definitionsLength
+      )
+      expect(Object.keys(res.body.trigger).length).toEqual(
+        Object.keys(TRIGGER_DEFINITIONS).length
+      )
     })
   })
 
@@ -72,7 +89,7 @@ describe("/automations", () => {
         .post(`/api/automations`)
         .set(config.defaultHeaders())
         .send(automation)
-        .expect('Content-Type', /json/)
+        .expect("Content-Type", /json/)
         .expect(200)
 
       expect(res.body.message).toEqual("Automation created successfully")
@@ -91,7 +108,7 @@ describe("/automations", () => {
         .post(`/api/automations`)
         .set(config.defaultHeaders())
         .send(automation)
-        .expect('Content-Type', /json/)
+        .expect("Content-Type", /json/)
         .expect(200)
 
       expect(res.body.message).toEqual("Automation created successfully")
@@ -107,7 +124,7 @@ describe("/automations", () => {
         config,
         method: "POST",
         url: `/api/automations`,
-        body: automation
+        body: automation,
       })
     })
   })
@@ -118,7 +135,7 @@ describe("/automations", () => {
       const res = await request
         .get(`/api/automations/${automation._id}`)
         .set(config.defaultHeaders())
-        .expect('Content-Type', /json/)
+        .expect("Content-Type", /json/)
         .expect(200)
       expect(res.body._id).toEqual(automation._id)
       expect(res.body._rev).toEqual(automation._rev)
@@ -134,8 +151,8 @@ describe("/automations", () => {
         row: {
           name: "{{trigger.row.name}}",
           description: "{{trigger.row.description}}",
-          tableId: table._id
-        }
+          tableId: table._id,
+        },
       }
       automation.appId = config.appId
       automation = await config.createAutomation(automation)
@@ -162,23 +179,68 @@ describe("/automations", () => {
     })
   })
 
-  describe("update", () => {
+  describe("trigger", () => {
+    it("does not trigger an automation when not synchronous and in dev", async () => {
+      let automation = newAutomation()
+      automation = await config.createAutomation(automation)
+      const res = await request
+        .post(`/api/automations/${automation._id}/trigger`)
+        .set(config.defaultHeaders())
+        .expect("Content-Type", /json/)
+        .expect(400)
 
-    const update = async (automation) => {
+      expect(res.body.message).toEqual(
+        "Only apps in production support this endpoint"
+      )
+    })
+
+    it("triggers a synchronous automation", async () => {
+      mocks.licenses.useSyncAutomations()
+      let automation = collectAutomation()
+      automation = await config.createAutomation(automation)
+      const res = await request
+        .post(`/api/automations/${automation._id}/trigger`)
+        .set(config.defaultHeaders())
+        .expect("Content-Type", /json/)
+        .expect(200)
+
+      expect(res.body.success).toEqual(true)
+      expect(res.body.value).toEqual([1, 2, 3])
+    })
+
+    it("triggers an asynchronous automation", async () => {
+      let automation = newAutomation()
+      automation = await config.createAutomation(automation)
+      await config.publish()
+
+      const res = await request
+        .post(`/api/automations/${automation._id}/trigger`)
+        .set(config.defaultHeaders({}, true))
+        .expect("Content-Type", /json/)
+        .expect(200)
+
+      expect(res.body.message).toEqual(
+        `Automation ${automation._id} has been triggered.`
+      )
+    })
+  })
+
+  describe("update", () => {
+    const update = async (automation: Automation) => {
       return request
         .put(`/api/automations`)
         .set(config.defaultHeaders())
         .send(automation)
-        .expect('Content-Type', /json/)
+        .expect("Content-Type", /json/)
         .expect(200)
     }
 
-    const updateWithPost = async (automation) => {
+    const updateWithPost = async (automation: Automation) => {
       return request
         .post(`/api/automations`)
         .set(config.defaultHeaders())
         .send(automation)
-        .expect('Content-Type', /json/)
+        .expect("Content-Type", /json/)
         .expect(200)
     }
 
@@ -199,7 +261,9 @@ describe("/automations", () => {
       expect(automationRes._rev).not.toEqual(automation._rev)
       // content updates
       expect(automationRes.name).toEqual("Updated Name")
-      expect(message).toEqual(`Automation ${automation._id} updated successfully.`)
+      expect(message).toEqual(
+        `Automation ${automation._id} updated successfully.`
+      )
       // events
       expect(events.automation.created).not.toBeCalled()
       expect(events.automation.stepCreated).not.toBeCalled()
@@ -207,7 +271,6 @@ describe("/automations", () => {
       expect(events.automation.triggerUpdated).not.toBeCalled()
     })
 
-
     it("updates a automations name using POST request", async () => {
       let automation = newAutomation()
       await config.createAutomation(automation)
@@ -226,7 +289,9 @@ describe("/automations", () => {
       expect(automationRes._rev).not.toEqual(automation._rev)
       // content updates
       expect(automationRes.name).toEqual("Updated Name")
-      expect(message).toEqual(`Automation ${automation._id} updated successfully.`)
+      expect(message).toEqual(
+        `Automation ${automation._id} updated successfully.`
+      )
       // events
       expect(events.automation.created).not.toBeCalled()
       expect(events.automation.stepCreated).not.toBeCalled()
@@ -237,7 +302,9 @@ describe("/automations", () => {
     it("updates an automation trigger", async () => {
       let automation = newAutomation()
       automation = await config.createAutomation(automation)
-      automation.definition.trigger = automationTrigger(TRIGGER_DEFINITIONS.WEBHOOK)
+      automation.definition.trigger = automationTrigger(
+        TRIGGER_DEFINITIONS.WEBHOOK
+      )
       jest.clearAllMocks()
 
       await update(automation)
@@ -266,7 +333,6 @@ describe("/automations", () => {
       expect(events.automation.triggerUpdated).not.toBeCalled()
     })
 
-
     it("removes automation steps", async () => {
       let automation = newAutomation()
       automation.definition.steps.push(automationStep())
@@ -305,11 +371,11 @@ describe("/automations", () => {
     it("return all the automations for an instance", async () => {
       await clearAllAutomations(config)
       const autoConfig = basicAutomation()
-      automation = await config.createAutomation(autoConfig)
+      await config.createAutomation(autoConfig)
       const res = await request
         .get(`/api/automations`)
         .set(config.defaultHeaders())
-        .expect('Content-Type', /json/)
+        .expect("Content-Type", /json/)
         .expect(200)
 
       expect(res.body[0]).toEqual(expect.objectContaining(autoConfig))
@@ -330,7 +396,7 @@ describe("/automations", () => {
       const res = await request
         .delete(`/api/automations/${automation.id}/${automation.rev}`)
         .set(config.defaultHeaders())
-        .expect('Content-Type', /json/)
+        .expect("Content-Type", /json/)
         .expect(200)
 
       expect(res.body.id).toEqual(automation._id)
@@ -346,4 +412,13 @@ describe("/automations", () => {
       })
     })
   })
+
+  describe("checkForCollectStep", () => {
+    it("should return true if a collect step exists in an automation", async () => {
+      let automation = collectAutomation()
+      await config.createAutomation(automation)
+      let res = await sdk.automations.utils.checkForCollectStep(automation)
+      expect(res).toEqual(true)
+    })
+  })
 })
diff --git a/packages/server/src/api/routes/tests/view.spec.js b/packages/server/src/api/routes/tests/view.spec.js
index 522987ab29..df07ffa4af 100644
--- a/packages/server/src/api/routes/tests/view.spec.js
+++ b/packages/server/src/api/routes/tests/view.spec.js
@@ -114,8 +114,8 @@ describe("/views", () => {
       expect(res.body.tableId).toBe(table._id)
 
       const updatedTable = await config.getTable(table._id)
-      expect(updatedTable.views).toEqual({
-        TestView: {
+      const expectedObj = expect.objectContaining({
+        TestView: expect.objectContaining({
           field: "Price",
           calculation: "stats",
           tableId: table._id,
@@ -143,8 +143,9 @@ describe("/views", () => {
               type: "string",
             },
           },
-        },
+        }),
       })
+      expect(updatedTable.views).toEqual(expectedObj)
     })
   })
 
diff --git a/packages/server/src/api/routes/tests/webhook.spec.js b/packages/server/src/api/routes/tests/webhook.spec.ts
similarity index 74%
rename from packages/server/src/api/routes/tests/webhook.spec.js
rename to packages/server/src/api/routes/tests/webhook.spec.ts
index 55368fb8ab..e7046d07c8 100644
--- a/packages/server/src/api/routes/tests/webhook.spec.js
+++ b/packages/server/src/api/routes/tests/webhook.spec.ts
@@ -1,11 +1,13 @@
-const setup = require("./utilities")
-const { checkBuilderEndpoint } = require("./utilities/TestFunctions")
-const { basicWebhook, basicAutomation } = setup.structures
+import { Webhook } from "@budibase/types"
+import * as setup from "./utilities"
+import { checkBuilderEndpoint } from "./utilities/TestFunctions"
+import { mocks } from "@budibase/backend-core/tests"
+const { basicWebhook, basicAutomation, collectAutomation } = setup.structures
 
 describe("/webhooks", () => {
   let request = setup.getRequest()
   let config = setup.getConfig()
-  let webhook
+  let webhook: Webhook
 
   afterAll(setup.afterAll)
 
@@ -13,10 +15,11 @@ describe("/webhooks", () => {
     config.modeSelf()
     await config.init()
     const autoConfig = basicAutomation()
-    autoConfig.definition.trigger = {
-      schema: { outputs: { properties: {} } },
-      inputs: {},
+    autoConfig.definition.trigger.schema = {
+      outputs: { properties: {} },
+      inputs: { properties: {} },
     }
+    autoConfig.definition.trigger.inputs = {}
     await config.createAutomation(autoConfig)
     webhook = await config.createWebhook()
   }
@@ -70,7 +73,7 @@ describe("/webhooks", () => {
 
   describe("delete", () => {
     beforeAll(setupTest)
-    
+
     it("should successfully delete", async () => {
       const res = await request
         .delete(`/api/webhooks/${webhook._id}/${webhook._rev}`)
@@ -97,7 +100,7 @@ describe("/webhooks", () => {
       const res = await request
         .post(`/api/webhooks/schema/${config.getAppId()}/${webhook._id}`)
         .send({
-          a: 1
+          a: 1,
         })
         .set(config.defaultHeaders())
         .expect("Content-Type", /json/)
@@ -112,7 +115,7 @@ describe("/webhooks", () => {
       expect(fetch.body[0]).toBeDefined()
       expect(fetch.body[0].bodySchema).toEqual({
         properties: {
-          a: { type: "integer" }
+          a: { type: "integer" },
         },
         type: "object",
       })
@@ -131,4 +134,23 @@ describe("/webhooks", () => {
       expect(res.body.message).toBeDefined()
     })
   })
-})
\ No newline at end of file
+
+  it("should trigger a synchronous webhook call ", async () => {
+    mocks.licenses.useSyncAutomations()
+    let automation = collectAutomation()
+    let newAutomation = await config.createAutomation(automation)
+    let syncWebhook = await config.createWebhook(
+      basicWebhook(newAutomation._id)
+    )
+
+    // replicate changes before checking webhook
+    await config.publish()
+
+    const res = await request
+      .post(`/api/webhooks/trigger/${config.prodAppId}/${syncWebhook._id}`)
+      .expect("Content-Type", /json/)
+      .expect(200)
+    expect(res.body.success).toEqual(true)
+    expect(res.body.value).toEqual([1, 2, 3])
+  })
+})
diff --git a/packages/server/src/app.ts b/packages/server/src/app.ts
index f8f82f9fdc..274de89c57 100644
--- a/packages/server/src/app.ts
+++ b/packages/server/src/app.ts
@@ -61,7 +61,6 @@ if (env.isProd()) {
 
 const server = http.createServer(app.callback())
 destroyable(server)
-initialiseWebsockets(app, server)
 
 let shuttingDown = false,
   errCode = 0
diff --git a/packages/server/src/automations/actions.ts b/packages/server/src/automations/actions.ts
index 2f64e75816..81cf4d8176 100644
--- a/packages/server/src/automations/actions.ts
+++ b/packages/server/src/automations/actions.ts
@@ -14,6 +14,7 @@ import * as filter from "./steps/filter"
 import * as delay from "./steps/delay"
 import * as queryRow from "./steps/queryRows"
 import * as loop from "./steps/loop"
+import * as collect from "./steps/collect"
 import env from "../environment"
 import {
   AutomationStepSchema,
@@ -39,6 +40,7 @@ const ACTION_IMPLS: Record<
   DELAY: delay.run,
   FILTER: filter.run,
   QUERY_ROWS: queryRow.run,
+  COLLECT: collect.run,
   // these used to be lowercase step IDs, maintain for backwards compat
   discord: discord.run,
   slack: slack.run,
@@ -59,6 +61,7 @@ export const BUILTIN_ACTION_DEFINITIONS: Record<string, AutomationStepSchema> =
     FILTER: filter.definition,
     QUERY_ROWS: queryRow.definition,
     LOOP: loop.definition,
+    COLLECT: collect.definition,
     // these used to be lowercase step IDs, maintain for backwards compat
     discord: discord.definition,
     slack: slack.definition,
diff --git a/packages/server/src/automations/logging/index.ts b/packages/server/src/automations/logging/index.ts
index e3cc9d273c..9d16f15a67 100644
--- a/packages/server/src/automations/logging/index.ts
+++ b/packages/server/src/automations/logging/index.ts
@@ -2,6 +2,23 @@ import env from "../../environment"
 import { AutomationResults, Automation, App } from "@budibase/types"
 import { automations } from "@budibase/pro"
 import { db as dbUtils } from "@budibase/backend-core"
+import sizeof from "object-sizeof"
+
+const MAX_LOG_SIZE_MB = 5
+const MB_IN_BYTES = 1024 * 1024
+
+function sanitiseResults(results: AutomationResults) {
+  const message = `[removed] - max results size of ${MAX_LOG_SIZE_MB}MB exceeded`
+  for (let step of results.steps) {
+    step.inputs = {
+      message,
+    }
+    step.outputs = {
+      message,
+      success: step.outputs.success,
+    }
+  }
+}
 
 export async function storeLog(
   automation: Automation,
@@ -11,6 +28,10 @@ export async function storeLog(
   if (env.DISABLE_AUTOMATION_LOGS) {
     return
   }
+  const bytes = sizeof(results)
+  if (bytes / MB_IN_BYTES > MAX_LOG_SIZE_MB) {
+    sanitiseResults(results)
+  }
   await automations.logs.storeLog(automation, results)
 }
 
diff --git a/packages/server/src/automations/steps/bash.ts b/packages/server/src/automations/steps/bash.ts
index 820d0329db..61d446f12c 100644
--- a/packages/server/src/automations/steps/bash.ts
+++ b/packages/server/src/automations/steps/bash.ts
@@ -5,6 +5,7 @@ import environment from "../../environment"
 import {
   AutomationActionStepId,
   AutomationCustomIOType,
+  AutomationFeature,
   AutomationIOType,
   AutomationStepInput,
   AutomationStepSchema,
@@ -18,6 +19,9 @@ export const definition: AutomationStepSchema = {
   description: "Run a bash script",
   type: AutomationStepType.ACTION,
   internal: true,
+  features: {
+    [AutomationFeature.LOOPING]: true,
+  },
   stepId: AutomationActionStepId.EXECUTE_BASH,
   inputs: {},
   schema: {
diff --git a/packages/server/src/automations/steps/collect.ts b/packages/server/src/automations/steps/collect.ts
new file mode 100644
index 0000000000..ef1fe64772
--- /dev/null
+++ b/packages/server/src/automations/steps/collect.ts
@@ -0,0 +1,58 @@
+import {
+  AutomationActionStepId,
+  AutomationStepSchema,
+  AutomationStepInput,
+  AutomationStepType,
+  AutomationIOType,
+  AutomationFeature,
+} from "@budibase/types"
+
+export const definition: AutomationStepSchema = {
+  name: "Collect Data",
+  tagline: "Collect data to be sent to design",
+  icon: "Collection",
+  description:
+    "Collects specified data so it can be provided to the design section",
+  type: AutomationStepType.ACTION,
+  internal: true,
+  features: {},
+  stepId: AutomationActionStepId.COLLECT,
+  inputs: {},
+  schema: {
+    inputs: {
+      properties: {
+        collection: {
+          type: AutomationIOType.STRING,
+          title: "What to Collect",
+        },
+      },
+      required: ["collection"],
+    },
+    outputs: {
+      properties: {
+        success: {
+          type: AutomationIOType.BOOLEAN,
+          description: "Whether the action was successful",
+        },
+        value: {
+          type: AutomationIOType.STRING,
+          description: "Collected data",
+        },
+      },
+      required: ["success", "value"],
+    },
+  },
+}
+
+export async function run({ inputs }: AutomationStepInput) {
+  if (!inputs.collection) {
+    return {
+      success: false,
+    }
+  } else {
+    return {
+      success: true,
+      value: inputs.collection,
+    }
+  }
+}
diff --git a/packages/server/src/automations/steps/createRow.ts b/packages/server/src/automations/steps/createRow.ts
index dac929f1ee..d11baab5c6 100644
--- a/packages/server/src/automations/steps/createRow.ts
+++ b/packages/server/src/automations/steps/createRow.ts
@@ -4,6 +4,7 @@ import { buildCtx } from "./utils"
 import {
   AutomationActionStepId,
   AutomationCustomIOType,
+  AutomationFeature,
   AutomationIOType,
   AutomationStepInput,
   AutomationStepSchema,
@@ -17,6 +18,9 @@ export const definition: AutomationStepSchema = {
   description: "Add a row to your database",
   type: AutomationStepType.ACTION,
   internal: true,
+  features: {
+    [AutomationFeature.LOOPING]: true,
+  },
   stepId: AutomationActionStepId.CREATE_ROW,
   inputs: {},
   schema: {
diff --git a/packages/server/src/automations/steps/delay.ts b/packages/server/src/automations/steps/delay.ts
index 9cf578805c..4e04539998 100644
--- a/packages/server/src/automations/steps/delay.ts
+++ b/packages/server/src/automations/steps/delay.ts
@@ -14,6 +14,7 @@ export const definition: AutomationStepSchema = {
   description: "Delay the automation until an amount of time has passed",
   stepId: AutomationActionStepId.DELAY,
   internal: true,
+  features: {},
   inputs: {},
   schema: {
     inputs: {
diff --git a/packages/server/src/automations/steps/deleteRow.ts b/packages/server/src/automations/steps/deleteRow.ts
index 86c7703491..c8b6585cae 100644
--- a/packages/server/src/automations/steps/deleteRow.ts
+++ b/packages/server/src/automations/steps/deleteRow.ts
@@ -8,6 +8,7 @@ import {
   AutomationStepType,
   AutomationIOType,
   AutomationCustomIOType,
+  AutomationFeature,
 } from "@budibase/types"
 
 export const definition: AutomationStepSchema = {
@@ -18,6 +19,9 @@ export const definition: AutomationStepSchema = {
   type: AutomationStepType.ACTION,
   stepId: AutomationActionStepId.DELETE_ROW,
   internal: true,
+  features: {
+    [AutomationFeature.LOOPING]: true,
+  },
   inputs: {},
   schema: {
     inputs: {
diff --git a/packages/server/src/automations/steps/discord.ts b/packages/server/src/automations/steps/discord.ts
index c46220c3b2..c80e4ba66f 100644
--- a/packages/server/src/automations/steps/discord.ts
+++ b/packages/server/src/automations/steps/discord.ts
@@ -6,6 +6,7 @@ import {
   AutomationStepInput,
   AutomationStepType,
   AutomationIOType,
+  AutomationFeature,
 } from "@budibase/types"
 
 const DEFAULT_USERNAME = "Budibase Automate"
@@ -19,6 +20,9 @@ export const definition: AutomationStepSchema = {
   stepId: AutomationActionStepId.discord,
   type: AutomationStepType.ACTION,
   internal: false,
+  features: {
+    [AutomationFeature.LOOPING]: true,
+  },
   inputs: {},
   schema: {
     inputs: {
diff --git a/packages/server/src/automations/steps/executeQuery.ts b/packages/server/src/automations/steps/executeQuery.ts
index 4969400552..a9517b01a0 100644
--- a/packages/server/src/automations/steps/executeQuery.ts
+++ b/packages/server/src/automations/steps/executeQuery.ts
@@ -4,6 +4,7 @@ import * as automationUtils from "../automationUtils"
 import {
   AutomationActionStepId,
   AutomationCustomIOType,
+  AutomationFeature,
   AutomationIOType,
   AutomationStepInput,
   AutomationStepSchema,
@@ -18,6 +19,9 @@ export const definition: AutomationStepSchema = {
   type: AutomationStepType.ACTION,
   stepId: AutomationActionStepId.EXECUTE_QUERY,
   internal: true,
+  features: {
+    [AutomationFeature.LOOPING]: true,
+  },
   inputs: {},
   schema: {
     inputs: {
diff --git a/packages/server/src/automations/steps/executeScript.ts b/packages/server/src/automations/steps/executeScript.ts
index 9bd0eaed18..7ce6c1d0f4 100644
--- a/packages/server/src/automations/steps/executeScript.ts
+++ b/packages/server/src/automations/steps/executeScript.ts
@@ -4,6 +4,7 @@ import * as automationUtils from "../automationUtils"
 import {
   AutomationActionStepId,
   AutomationCustomIOType,
+  AutomationFeature,
   AutomationIOType,
   AutomationStepInput,
   AutomationStepSchema,
@@ -19,6 +20,9 @@ export const definition: AutomationStepSchema = {
   internal: true,
   stepId: AutomationActionStepId.EXECUTE_SCRIPT,
   inputs: {},
+  features: {
+    [AutomationFeature.LOOPING]: true,
+  },
   schema: {
     inputs: {
       properties: {
diff --git a/packages/server/src/automations/steps/filter.ts b/packages/server/src/automations/steps/filter.ts
index c7ab4210ec..3b000f8f29 100644
--- a/packages/server/src/automations/steps/filter.ts
+++ b/packages/server/src/automations/steps/filter.ts
@@ -28,6 +28,7 @@ export const definition: AutomationStepSchema = {
     "Conditionally halt automations which do not meet certain conditions",
   type: AutomationStepType.LOGIC,
   internal: true,
+  features: {},
   stepId: AutomationActionStepId.FILTER,
   inputs: {
     condition: FilterConditions.EQUAL,
diff --git a/packages/server/src/automations/steps/loop.ts b/packages/server/src/automations/steps/loop.ts
index fdbec83f2e..cdf494c288 100644
--- a/packages/server/src/automations/steps/loop.ts
+++ b/packages/server/src/automations/steps/loop.ts
@@ -13,6 +13,7 @@ export const definition: AutomationStepSchema = {
   description: "Loop",
   stepId: AutomationActionStepId.LOOP,
   internal: true,
+  features: {},
   inputs: {},
   schema: {
     inputs: {
diff --git a/packages/server/src/automations/steps/make.ts b/packages/server/src/automations/steps/make.ts
index 54e7175b79..e90648d573 100644
--- a/packages/server/src/automations/steps/make.ts
+++ b/packages/server/src/automations/steps/make.ts
@@ -6,6 +6,7 @@ import {
   AutomationStepInput,
   AutomationStepType,
   AutomationIOType,
+  AutomationFeature,
 } from "@budibase/types"
 
 export const definition: AutomationStepSchema = {
@@ -18,6 +19,9 @@ export const definition: AutomationStepSchema = {
   stepId: AutomationActionStepId.integromat,
   type: AutomationStepType.ACTION,
   internal: false,
+  features: {
+    [AutomationFeature.LOOPING]: true,
+  },
   inputs: {},
   schema: {
     inputs: {
diff --git a/packages/server/src/automations/steps/openai.ts b/packages/server/src/automations/steps/openai.ts
index 88d3fb8b85..8ae211579e 100644
--- a/packages/server/src/automations/steps/openai.ts
+++ b/packages/server/src/automations/steps/openai.ts
@@ -22,6 +22,7 @@ export const definition: AutomationStepSchema = {
   description: "Interact with the OpenAI ChatGPT API.",
   type: AutomationStepType.ACTION,
   internal: true,
+  features: {},
   stepId: AutomationActionStepId.OPENAI,
   inputs: {
     prompt: "",
diff --git a/packages/server/src/automations/steps/outgoingWebhook.ts b/packages/server/src/automations/steps/outgoingWebhook.ts
index f174935195..269c8c7157 100644
--- a/packages/server/src/automations/steps/outgoingWebhook.ts
+++ b/packages/server/src/automations/steps/outgoingWebhook.ts
@@ -4,6 +4,7 @@ import * as automationUtils from "../automationUtils"
 import {
   AutomationActionStepId,
   AutomationCustomIOType,
+  AutomationFeature,
   AutomationIOType,
   AutomationStepInput,
   AutomationStepSchema,
@@ -32,6 +33,9 @@ export const definition: AutomationStepSchema = {
   description: "Send a request of specified method to a URL",
   type: AutomationStepType.ACTION,
   internal: true,
+  features: {
+    [AutomationFeature.LOOPING]: true,
+  },
   stepId: AutomationActionStepId.OUTGOING_WEBHOOK,
   inputs: {
     requestMethod: "POST",
diff --git a/packages/server/src/automations/steps/queryRows.ts b/packages/server/src/automations/steps/queryRows.ts
index 1d7e8a419e..28da430858 100644
--- a/packages/server/src/automations/steps/queryRows.ts
+++ b/packages/server/src/automations/steps/queryRows.ts
@@ -6,6 +6,7 @@ import * as automationUtils from "../automationUtils"
 import {
   AutomationActionStepId,
   AutomationCustomIOType,
+  AutomationFeature,
   AutomationIOType,
   AutomationStepInput,
   AutomationStepSchema,
@@ -42,6 +43,9 @@ export const definition: AutomationStepSchema = {
   type: AutomationStepType.ACTION,
   stepId: AutomationActionStepId.QUERY_ROWS,
   internal: true,
+  features: {
+    [AutomationFeature.LOOPING]: true,
+  },
   inputs: {},
   schema: {
     inputs: {
diff --git a/packages/server/src/automations/steps/sendSmtpEmail.ts b/packages/server/src/automations/steps/sendSmtpEmail.ts
index c4af9aeaa9..448c374ce8 100644
--- a/packages/server/src/automations/steps/sendSmtpEmail.ts
+++ b/packages/server/src/automations/steps/sendSmtpEmail.ts
@@ -6,6 +6,7 @@ import {
   AutomationStepInput,
   AutomationStepType,
   AutomationIOType,
+  AutomationFeature,
 } from "@budibase/types"
 
 export const definition: AutomationStepSchema = {
@@ -15,6 +16,9 @@ export const definition: AutomationStepSchema = {
   name: "Send Email (SMTP)",
   type: AutomationStepType.ACTION,
   internal: true,
+  features: {
+    [AutomationFeature.LOOPING]: true,
+  },
   stepId: AutomationActionStepId.SEND_EMAIL_SMTP,
   inputs: {},
   schema: {
diff --git a/packages/server/src/automations/steps/serverLog.ts b/packages/server/src/automations/steps/serverLog.ts
index 382f7d4efc..eb75ca1f3b 100644
--- a/packages/server/src/automations/steps/serverLog.ts
+++ b/packages/server/src/automations/steps/serverLog.ts
@@ -4,6 +4,7 @@ import {
   AutomationStepInput,
   AutomationStepType,
   AutomationIOType,
+  AutomationFeature,
 } from "@budibase/types"
 
 /**
@@ -19,6 +20,9 @@ export const definition: AutomationStepSchema = {
   description: "Logs the given text to the server (using console.log)",
   type: AutomationStepType.ACTION,
   internal: true,
+  features: {
+    [AutomationFeature.LOOPING]: true,
+  },
   stepId: AutomationActionStepId.SERVER_LOG,
   inputs: {
     text: "",
diff --git a/packages/server/src/automations/steps/slack.ts b/packages/server/src/automations/steps/slack.ts
index 21ee6ed742..79544bf001 100644
--- a/packages/server/src/automations/steps/slack.ts
+++ b/packages/server/src/automations/steps/slack.ts
@@ -6,6 +6,7 @@ import {
   AutomationStepInput,
   AutomationStepType,
   AutomationIOType,
+  AutomationFeature,
 } from "@budibase/types"
 
 export const definition: AutomationStepSchema = {
@@ -16,6 +17,9 @@ export const definition: AutomationStepSchema = {
   stepId: AutomationActionStepId.slack,
   type: AutomationStepType.ACTION,
   internal: false,
+  features: {
+    [AutomationFeature.LOOPING]: true,
+  },
   inputs: {},
   schema: {
     inputs: {
diff --git a/packages/server/src/automations/steps/updateRow.ts b/packages/server/src/automations/steps/updateRow.ts
index 96ab1d1642..5ed4e19f61 100644
--- a/packages/server/src/automations/steps/updateRow.ts
+++ b/packages/server/src/automations/steps/updateRow.ts
@@ -4,6 +4,7 @@ import { buildCtx } from "./utils"
 import {
   AutomationActionStepId,
   AutomationCustomIOType,
+  AutomationFeature,
   AutomationIOType,
   AutomationStepInput,
   AutomationStepSchema,
@@ -17,6 +18,9 @@ export const definition: AutomationStepSchema = {
   description: "Update a row in your database",
   type: AutomationStepType.ACTION,
   internal: true,
+  features: {
+    [AutomationFeature.LOOPING]: true,
+  },
   stepId: AutomationActionStepId.UPDATE_ROW,
   inputs: {},
   schema: {
diff --git a/packages/server/src/automations/steps/zapier.ts b/packages/server/src/automations/steps/zapier.ts
index 006f9ce99b..d69ac39ba7 100644
--- a/packages/server/src/automations/steps/zapier.ts
+++ b/packages/server/src/automations/steps/zapier.ts
@@ -6,6 +6,7 @@ import {
   AutomationStepInput,
   AutomationStepType,
   AutomationIOType,
+  AutomationFeature,
 } from "@budibase/types"
 
 export const definition: AutomationStepSchema = {
@@ -13,6 +14,9 @@ export const definition: AutomationStepSchema = {
   stepId: AutomationActionStepId.zapier,
   type: AutomationStepType.ACTION,
   internal: false,
+  features: {
+    [AutomationFeature.LOOPING]: true,
+  },
   description: "Trigger a Zapier Zap via webhooks",
   tagline: "Trigger a Zapier Zap",
   icon: "ri-flashlight-line",
diff --git a/packages/server/src/automations/triggers.ts b/packages/server/src/automations/triggers.ts
index 3436c1be7a..922bc10343 100644
--- a/packages/server/src/automations/triggers.ts
+++ b/packages/server/src/automations/triggers.ts
@@ -10,6 +10,7 @@ import * as utils from "./utils"
 import env from "../environment"
 import { context, db as dbCore } from "@budibase/backend-core"
 import { Automation, Row, AutomationData, AutomationJob } from "@budibase/types"
+import { executeSynchronously } from "../threads/automation"
 
 export const TRIGGER_DEFINITIONS = definitions
 const JOB_OPTS = {
@@ -91,7 +92,7 @@ emitter.on("row:delete", async function (event) {
 
 export async function externalTrigger(
   automation: Automation,
-  params: { fields: Record<string, any> },
+  params: { fields: Record<string, any>; timeout?: number },
   { getResponses }: { getResponses?: boolean } = {}
 ) {
   if (
@@ -118,7 +119,7 @@ export async function externalTrigger(
       automation,
     }
     const job = { data } as AutomationJob
-    return utils.processEvent(job)
+    return executeSynchronously(job)
   } else {
     return automationQueue.add(data, JOB_OPTS)
   }
diff --git a/packages/server/src/db/inMemoryView.ts b/packages/server/src/db/inMemoryView.ts
index b38c72b29b..4e9301f4ee 100644
--- a/packages/server/src/db/inMemoryView.ts
+++ b/packages/server/src/db/inMemoryView.ts
@@ -25,9 +25,8 @@ export async function runView(
       }))
     )
     let fn = (doc: Document, emit: any) => emit(doc._id)
-    ;(0, eval)(
-      "fn = " + view?.map?.replace("function (doc)", "function (doc, emit)")
-    )
+    // BUDI-7060 -> indirect eval call appears to cause issues in cloud
+    eval("fn = " + view?.map?.replace("function (doc)", "function (doc, emit)"))
     const queryFns: any = {
       meta: view.meta,
       map: fn,
diff --git a/packages/server/src/db/linkedRows/index.ts b/packages/server/src/db/linkedRows/index.ts
index a6ed7de161..4d58d32f9b 100644
--- a/packages/server/src/db/linkedRows/index.ts
+++ b/packages/server/src/db/linkedRows/index.ts
@@ -189,11 +189,13 @@ export async function attachFullLinkedDocs(table: Table, rows: Row[]) {
  */
 export async function squashLinksToPrimaryDisplay(
   table: Table,
-  enriched: Row[]
+  enriched: Row[] | Row
 ) {
   // will populate this as we find them
   const linkedTables = [table]
-  for (let row of enriched) {
+  const isArray = Array.isArray(enriched)
+  let enrichedArray = !isArray ? [enriched] : enriched
+  for (let row of enrichedArray) {
     // this only fetches the table if its not already in array
     const rowTable = await getLinkedTable(row.tableId!, linkedTables)
     for (let [column, schema] of Object.entries(rowTable?.schema || {})) {
@@ -213,5 +215,5 @@ export async function squashLinksToPrimaryDisplay(
       row[column] = newLinks
     }
   }
-  return enriched
+  return isArray ? enrichedArray : enrichedArray[0]
 }
diff --git a/packages/server/src/environment.ts b/packages/server/src/environment.ts
index 3e5e475360..0ba708e7bb 100644
--- a/packages/server/src/environment.ts
+++ b/packages/server/src/environment.ts
@@ -80,6 +80,7 @@ const environment = {
   ENABLE_ANALYTICS: process.env.ENABLE_ANALYTICS,
   SELF_HOSTED: process.env.SELF_HOSTED,
   HTTP_MB_LIMIT: process.env.HTTP_MB_LIMIT,
+  FORKED_PROCESS_NAME: process.env.FORKED_PROCESS_NAME || "main",
   // old
   CLIENT_ID: process.env.CLIENT_ID,
   _set(key: string, value: any) {
diff --git a/packages/server/src/integration-test/postgres.spec.ts b/packages/server/src/integration-test/postgres.spec.ts
index ce16ca4aba..f72cbda1ea 100644
--- a/packages/server/src/integration-test/postgres.spec.ts
+++ b/packages/server/src/integration-test/postgres.spec.ts
@@ -25,6 +25,7 @@ const config = setup.getConfig()!
 jest.setTimeout(30000)
 
 jest.unmock("pg")
+jest.mock("../websockets")
 
 describe("postgres integrations", () => {
   let makeRequest: MakeRequestResponse,
@@ -1055,13 +1056,12 @@ describe("postgres integrations", () => {
     })
   })
 
-  describe("GET /api/datasources/:datasourceId/info", () => {
+  describe("POST /api/datasources/info", () => {
     it("should fetch information about postgres datasource", async () => {
       const primaryName = primaryPostgresTable.name
-      const response = await makeRequest(
-        "get",
-        `/api/datasources/${postgresDatasource._id}/info`
-      )
+      const response = await makeRequest("post", "/api/datasources/info", {
+        datasource: postgresDatasource,
+      })
       expect(response.status).toBe(200)
       expect(response.body.tableNames).toBeDefined()
       expect(response.body.tableNames.indexOf(primaryName)).not.toBe(-1)
diff --git a/packages/server/src/integrations/googlesheets.ts b/packages/server/src/integrations/googlesheets.ts
index aa1c2fb66f..8863aa0b3a 100644
--- a/packages/server/src/integrations/googlesheets.ts
+++ b/packages/server/src/integrations/googlesheets.ts
@@ -457,22 +457,41 @@ class GoogleSheetsIntegration implements DatasourcePlus {
   }) {
     try {
       await this.connect()
+      const hasFilters = dataFilters.hasFilters(query.filters)
+      const limit = query.paginate?.limit || 100
+      const page: number =
+        typeof query.paginate?.page === "number"
+          ? query.paginate.page
+          : parseInt(query.paginate?.page || "1")
+      const offset = (page - 1) * limit
       const sheet = this.client.sheetsByTitle[query.sheet]
       let rows: GoogleSpreadsheetRow[] = []
-      if (query.paginate) {
-        const limit = query.paginate.limit || 100
-        let page: number =
-          typeof query.paginate.page === "number"
-            ? query.paginate.page
-            : parseInt(query.paginate.page || "1")
+      if (query.paginate && !hasFilters) {
         rows = await sheet.getRows({
           limit,
-          offset: (page - 1) * limit,
+          offset,
         })
       } else {
         rows = await sheet.getRows()
       }
-      const filtered = dataFilters.runLuceneQuery(rows, query.filters)
+      // this is a special case - need to handle the _id, it doesn't exist
+      // we cannot edit the returned structure from google, it does not have
+      // setter functions and is immutable, easier to update the filters
+      // to look for the _rowNumber property rather than rowNumber
+      if (query.filters?.equal) {
+        const idFilterKeys = Object.keys(query.filters.equal).filter(filter =>
+          filter.includes(GOOGLE_SHEETS_PRIMARY_KEY)
+        )
+        for (let idFilterKey of idFilterKeys) {
+          const id = query.filters.equal[idFilterKey]
+          delete query.filters.equal[idFilterKey]
+          query.filters.equal[`_${GOOGLE_SHEETS_PRIMARY_KEY}`] = id
+        }
+      }
+      let filtered = dataFilters.runLuceneQuery(rows, query.filters)
+      if (hasFilters && query.paginate) {
+        filtered = filtered.slice(offset, offset + limit)
+      }
       const headerValues = sheet.headerValues
       let response = []
       for (let row of filtered) {
@@ -535,7 +554,12 @@ class GoogleSheetsIntegration implements DatasourcePlus {
     const row = rows[query.rowIndex]
     if (row) {
       await row.delete()
-      return [{ deleted: query.rowIndex }]
+      return [
+        {
+          deleted: query.rowIndex,
+          [GOOGLE_SHEETS_PRIMARY_KEY]: query.rowIndex,
+        },
+      ]
     } else {
       throw new Error("Row does not exist.")
     }
diff --git a/packages/server/src/integrations/redis.ts b/packages/server/src/integrations/redis.ts
index 26666ac800..a6372c8e13 100644
--- a/packages/server/src/integrations/redis.ts
+++ b/packages/server/src/integrations/redis.ts
@@ -177,7 +177,13 @@ class RedisIntegration {
       const pipeline = this.client.pipeline(pipelineCommands)
       const result = await pipeline.exec()
 
-      return result.map((output: string | string[]) => output[1])
+      return result?.map((output: any) => {
+        if (typeof output === "string") {
+          return output
+        } else if (Array.isArray(output)) {
+          return output[1]
+        }
+      })
     })
   }
 }
diff --git a/packages/server/src/middleware/builder.ts b/packages/server/src/middleware/builder.ts
index 5174f618a0..31c4da127c 100644
--- a/packages/server/src/middleware/builder.ts
+++ b/packages/server/src/middleware/builder.ts
@@ -9,8 +9,8 @@ import {
   checkDebounce,
   setDebounce,
 } from "../utilities/redis"
-import { db as dbCore, cache, permissions } from "@budibase/backend-core"
-import { BBContext, Database } from "@budibase/types"
+import { db as dbCore, cache } from "@budibase/backend-core"
+import { UserCtx, Database } from "@budibase/types"
 
 const DEBOUNCE_TIME_SEC = 30
 
@@ -23,7 +23,7 @@ const DEBOUNCE_TIME_SEC = 30
  * through the authorized middleware                *
  ****************************************************/
 
-async function checkDevAppLocks(ctx: BBContext) {
+async function checkDevAppLocks(ctx: UserCtx) {
   const appId = ctx.appId
 
   // if any public usage, don't proceed
@@ -35,15 +35,14 @@ async function checkDevAppLocks(ctx: BBContext) {
   if (!appId || !appId.startsWith(APP_DEV_PREFIX)) {
     return
   }
-  if (!(await doesUserHaveLock(appId, ctx.user))) {
-    ctx.throw(400, "User does not hold app lock.")
-  }
 
-  // they do have lock, update it
-  await updateLock(appId, ctx.user)
+  // If this user already owns the lock, then update it
+  if (await doesUserHaveLock(appId, ctx.user)) {
+    await updateLock(appId, ctx.user)
+  }
 }
 
-async function updateAppUpdatedAt(ctx: BBContext) {
+async function updateAppUpdatedAt(ctx: UserCtx) {
   const appId = ctx.appId
   // if debouncing skip this update
   // get methods also aren't updating
@@ -51,20 +50,29 @@ async function updateAppUpdatedAt(ctx: BBContext) {
     return
   }
   await dbCore.doWithDB(appId, async (db: Database) => {
-    const metadata = await db.get(DocumentType.APP_METADATA)
-    metadata.updatedAt = new Date().toISOString()
+    try {
+      const metadata = await db.get(DocumentType.APP_METADATA)
+      metadata.updatedAt = new Date().toISOString()
 
-    metadata.updatedBy = getGlobalIDFromUserMetadataID(ctx.user?.userId!)
+      metadata.updatedBy = getGlobalIDFromUserMetadataID(ctx.user?.userId!)
 
-    const response = await db.put(metadata)
-    metadata._rev = response.rev
-    await cache.app.invalidateAppMetadata(appId, metadata)
-    // set a new debounce record with a short TTL
-    await setDebounce(appId, DEBOUNCE_TIME_SEC)
+      const response = await db.put(metadata)
+      metadata._rev = response.rev
+      await cache.app.invalidateAppMetadata(appId, metadata)
+      // set a new debounce record with a short TTL
+      await setDebounce(appId, DEBOUNCE_TIME_SEC)
+    } catch (err: any) {
+      // if a 409 occurs, then multiple clients connected at the same time - ignore
+      if (err?.status === 409) {
+        return
+      } else {
+        throw err
+      }
+    }
   })
 }
 
-export default async function builder(ctx: BBContext) {
+export default async function builder(ctx: UserCtx) {
   const appId = ctx.appId
   // this only functions within an app context
   if (!appId) {
diff --git a/packages/server/src/sdk/app/automations/index.ts b/packages/server/src/sdk/app/automations/index.ts
index 1c9ce13455..16530cf085 100644
--- a/packages/server/src/sdk/app/automations/index.ts
+++ b/packages/server/src/sdk/app/automations/index.ts
@@ -1,5 +1,7 @@
 import * as webhook from "./webhook"
+import * as utils from "./utils"
 
 export default {
   webhook,
+  utils,
 }
diff --git a/packages/server/src/sdk/app/automations/utils.ts b/packages/server/src/sdk/app/automations/utils.ts
new file mode 100644
index 0000000000..79e70923f1
--- /dev/null
+++ b/packages/server/src/sdk/app/automations/utils.ts
@@ -0,0 +1,7 @@
+import { Automation, AutomationActionStepId } from "@budibase/types"
+
+export function checkForCollectStep(automation: Automation) {
+  return automation.definition.steps.some(
+    (step: any) => step.stepId === AutomationActionStepId.COLLECT
+  )
+}
diff --git a/packages/server/src/sdk/plugins/plugins.ts b/packages/server/src/sdk/plugins/plugins.ts
index 02000410bf..f6c26ca339 100644
--- a/packages/server/src/sdk/plugins/plugins.ts
+++ b/packages/server/src/sdk/plugins/plugins.ts
@@ -36,6 +36,6 @@ export async function processUploaded(plugin: FileType, source?: PluginSource) {
   }
 
   const doc = await pro.plugins.storePlugin(metadata, directory, source)
-  clientAppSocket.emit("plugin-update", { name: doc.name, hash: doc.hash })
+  clientAppSocket?.emit("plugin-update", { name: doc.name, hash: doc.hash })
   return doc
 }
diff --git a/packages/server/src/startup.ts b/packages/server/src/startup.ts
index 2fd59b7a8e..64a6c011c4 100644
--- a/packages/server/src/startup.ts
+++ b/packages/server/src/startup.ts
@@ -16,6 +16,7 @@ import * as bullboard from "./automations/bullboard"
 import * as pro from "@budibase/pro"
 import * as api from "./api"
 import sdk from "./sdk"
+import { initialise as initialiseWebsockets } from "./websockets"
 
 let STARTUP_RAN = false
 
@@ -64,6 +65,7 @@ export async function startup(app?: any, server?: any) {
   fileSystem.init()
   await redis.init()
   eventInit()
+  initialiseWebsockets(app, server)
 
   // run migrations on startup if not done via http
   // not recommended in a clustered environment
diff --git a/packages/server/src/tests/utilities/TestConfiguration.ts b/packages/server/src/tests/utilities/TestConfiguration.ts
index f5887e6558..995035aa97 100644
--- a/packages/server/src/tests/utilities/TestConfiguration.ts
+++ b/packages/server/src/tests/utilities/TestConfiguration.ts
@@ -373,7 +373,7 @@ class TestConfiguration {
 
   // HEADERS
 
-  defaultHeaders(extras = {}) {
+  defaultHeaders(extras = {}, prodApp = false) {
     const tenantId = this.getTenantId()
     const authObj: AuthToken = {
       userId: this.defaultUserValues.globalUserId,
@@ -390,7 +390,9 @@ class TestConfiguration {
       ...extras,
     }
 
-    if (this.appId) {
+    if (prodApp) {
+      headers[constants.Header.APP_ID] = this.prodAppId
+    } else if (this.appId) {
       headers[constants.Header.APP_ID] = this.appId
     }
     return headers
diff --git a/packages/server/src/tests/utilities/structures.ts b/packages/server/src/tests/utilities/structures.ts
index e4e03fb85d..71f30f0074 100644
--- a/packages/server/src/tests/utilities/structures.ts
+++ b/packages/server/src/tests/utilities/structures.ts
@@ -199,6 +199,48 @@ export function loopAutomation(tableId: string, loopOpts?: any): Automation {
   return automation as Automation
 }
 
+export function collectAutomation(tableId?: string): Automation {
+  const automation: any = {
+    name: "looping",
+    type: "automation",
+    definition: {
+      steps: [
+        {
+          id: "b",
+          type: "ACTION",
+          internal: true,
+          stepId: AutomationActionStepId.EXECUTE_SCRIPT,
+          inputs: {
+            code: "return [1,2,3]",
+          },
+          schema: BUILTIN_ACTION_DEFINITIONS.EXECUTE_SCRIPT.schema,
+        },
+        {
+          id: "c",
+          type: "ACTION",
+          internal: true,
+          stepId: AutomationActionStepId.COLLECT,
+          inputs: {
+            collection: "{{ literal steps.1.value }}",
+          },
+          schema: BUILTIN_ACTION_DEFINITIONS.SERVER_LOG.schema,
+        },
+      ],
+      trigger: {
+        id: "a",
+        type: "TRIGGER",
+        event: "row:save",
+        stepId: AutomationTriggerStepId.ROW_SAVED,
+        inputs: {
+          tableId,
+        },
+        schema: TRIGGER_DEFINITIONS.ROW_SAVED.schema,
+      },
+    },
+  }
+  return automation as Automation
+}
+
 export function basicRow(tableId: string) {
   return {
     name: "Test Contact",
diff --git a/packages/server/src/threads/automation.ts b/packages/server/src/threads/automation.ts
index e271ebba0b..9831a96936 100644
--- a/packages/server/src/threads/automation.ts
+++ b/packages/server/src/threads/automation.ts
@@ -19,6 +19,7 @@ import {
   AutomationStatus,
   AutomationMetadata,
   AutomationJob,
+  AutomationData,
 } from "@budibase/types"
 import {
   LoopStep,
@@ -30,6 +31,7 @@ import { WorkerCallback } from "./definitions"
 import { context, logging } from "@budibase/backend-core"
 import { processObject } from "@budibase/string-templates"
 import { cloneDeep } from "lodash/fp"
+import { performance } from "perf_hooks"
 import * as sdkUtils from "../sdk/utils"
 import env from "../environment"
 const FILTER_STEP_ID = actions.BUILTIN_ACTION_DEFINITIONS.FILTER.stepId
@@ -37,15 +39,23 @@ const LOOP_STEP_ID = actions.BUILTIN_ACTION_DEFINITIONS.LOOP.stepId
 const CRON_STEP_ID = triggerDefs.CRON.stepId
 const STOPPED_STATUS = { success: true, status: AutomationStatus.STOPPED }
 
-function getLoopIterations(loopStep: LoopStep, input: LoopInput) {
-  const binding = automationUtils.typecastForLooping(loopStep, input)
+function getLoopIterations(loopStep: LoopStep) {
+  let binding = loopStep.inputs.binding
   if (!binding) {
     return 0
   }
+  const isString = typeof binding === "string"
+  try {
+    if (isString) {
+      binding = JSON.parse(binding)
+    }
+  } catch (err) {
+    // ignore error - wasn't able to parse
+  }
   if (Array.isArray(binding)) {
     return binding.length
   }
-  if (typeof binding === "string") {
+  if (isString) {
     return automationUtils.stringSplit(binding).length
   }
   return 0
@@ -240,7 +250,9 @@ class Orchestrator {
     let loopStepNumber: any = undefined
     let loopSteps: LoopStep[] | undefined = []
     let metadata
+    let timeoutFlag = false
     let wasLoopStep = false
+    let timeout = this._job.data.event.timeout
     // check if this is a recurring automation,
     if (isProdAppID(this._appId) && isRecurring(automation)) {
       metadata = await this.getMetadata()
@@ -249,8 +261,18 @@ class Orchestrator {
         return
       }
     }
-
+    const start = performance.now()
     for (let step of automation.definition.steps) {
+      if (timeoutFlag) {
+        break
+      }
+
+      if (timeout) {
+        setTimeout(() => {
+          timeoutFlag = true
+        }, timeout || 12000)
+      }
+
       stepCount++
       let input: any,
         iterations = 1,
@@ -264,22 +286,17 @@ class Orchestrator {
 
       if (loopStep) {
         input = await processObject(loopStep.inputs, this._context)
-        iterations = getLoopIterations(loopStep as LoopStep, input)
+        iterations = getLoopIterations(loopStep as LoopStep)
       }
       for (let index = 0; index < iterations; index++) {
         let originalStepInput = cloneDeep(step.inputs)
         // Handle if the user has set a max iteration count or if it reaches the max limit set by us
         if (loopStep && input.binding) {
-          let newInput: any = await processObject(
-            loopStep.inputs,
-            cloneDeep(this._context)
-          )
-
           let tempOutput = { items: loopSteps, iterations: iterationCount }
           try {
-            newInput.binding = automationUtils.typecastForLooping(
+            loopStep.inputs.binding = automationUtils.typecastForLooping(
               loopStep as LoopStep,
-              newInput
+              loopStep.inputs as LoopInput
             )
           } catch (err) {
             this.updateContextAndOutput(loopStepNumber, step, tempOutput, {
@@ -290,13 +307,12 @@ class Orchestrator {
             loopStep = undefined
             break
           }
-
           let item = []
           if (
             typeof loopStep.inputs.binding === "string" &&
             loopStep.inputs.option === "String"
           ) {
-            item = automationUtils.stringSplit(newInput.binding)
+            item = automationUtils.stringSplit(loopStep.inputs.binding)
           } else if (Array.isArray(loopStep.inputs.binding)) {
             item = loopStep.inputs.binding
           }
@@ -338,6 +354,7 @@ class Orchestrator {
               }
             }
           }
+
           if (
             index === env.AUTOMATION_MAX_ITERATIONS ||
             index === parseInt(loopStep.inputs.iterations)
@@ -466,8 +483,25 @@ class Orchestrator {
       }
     }
 
+    const end = performance.now()
+    const executionTime = end - start
+
+    console.info(`Execution time: ${executionTime} milliseconds`, {
+      _logKey: "automation",
+      executionTime,
+    })
+
     // store the logs for the automation run
-    await storeLog(this._automation, this.executionOutput)
+    try {
+      await storeLog(this._automation, this.executionOutput)
+    } catch (e: any) {
+      if (e.status === 413 && e.request?.data) {
+        // if content is too large we shouldn't log it
+        delete e.request.data
+        e.request.data = { message: "removed due to large size" }
+      }
+      logging.logAlert("Error writing automation log", e)
+    }
     if (isProdAppID(this._appId) && isRecurring(automation) && metadata) {
       await this.updateMetadata(metadata)
     }
@@ -475,22 +509,56 @@ class Orchestrator {
   }
 }
 
-export function execute(job: Job, callback: WorkerCallback) {
+export function execute(job: Job<AutomationData>, callback: WorkerCallback) {
+  const appId = job.data.event.appId
+  const automationId = job.data.automation._id
+  if (!appId) {
+    throw new Error("Unable to execute, event doesn't contain app ID.")
+  }
+  if (!automationId) {
+    throw new Error("Unable to execute, event doesn't contain automation ID.")
+  }
+  return context.doInAutomationContext({
+    appId,
+    automationId,
+    task: async () => {
+      const envVars = await sdkUtils.getEnvironmentVariables()
+      // put into automation thread for whole context
+      await context.doInEnvironmentContext(envVars, async () => {
+        const automationOrchestrator = new Orchestrator(job)
+        try {
+          const response = await automationOrchestrator.execute()
+          callback(null, response)
+        } catch (err) {
+          callback(err)
+        }
+      })
+    },
+  })
+}
+
+export function executeSynchronously(job: Job) {
   const appId = job.data.event.appId
   if (!appId) {
     throw new Error("Unable to execute, event doesn't contain app ID.")
   }
+
+  const timeoutPromise = new Promise((resolve, reject) => {
+    setTimeout(() => {
+      reject(new Error("Timeout exceeded"))
+    }, job.data.event.timeout || 12000)
+  })
+
   return context.doInAppContext(appId, async () => {
     const envVars = await sdkUtils.getEnvironmentVariables()
     // put into automation thread for whole context
-    await context.doInEnvironmentContext(envVars, async () => {
+    return context.doInEnvironmentContext(envVars, async () => {
       const automationOrchestrator = new Orchestrator(job)
-      try {
-        const response = await automationOrchestrator.execute()
-        callback(null, response)
-      } catch (err) {
-        callback(err)
-      }
+      const response = await Promise.race([
+        automationOrchestrator.execute(),
+        timeoutPromise,
+      ])
+      return response
     })
   })
 }
diff --git a/packages/server/src/threads/index.ts b/packages/server/src/threads/index.ts
index 9b6bffa867..6afaa9bb4e 100644
--- a/packages/server/src/threads/index.ts
+++ b/packages/server/src/threads/index.ts
@@ -38,6 +38,9 @@ export class Thread {
     this.count = opts.count ? opts.count : 1
     this.disableThreading = this.shouldDisableThreading()
     if (!this.disableThreading) {
+      console.debug(
+        `[${env.FORKED_PROCESS_NAME}] initialising worker farm type=${type}`
+      )
       const workerOpts: any = {
         autoStart: true,
         maxConcurrentWorkers: this.count,
@@ -45,6 +48,7 @@ export class Thread {
           env: {
             ...process.env,
             FORKED_PROCESS: "1",
+            FORKED_PROCESS_NAME: type,
           },
         },
       }
@@ -54,6 +58,10 @@ export class Thread {
       }
       this.workers = workerFarm(workerOpts, typeToFile(type), ["execute"])
       Thread.workerRefs.push(this.workers)
+    } else {
+      console.debug(
+        `[${env.FORKED_PROCESS_NAME}] skipping worker farm type=${type}`
+      )
     }
   }
 
@@ -72,9 +80,7 @@ export class Thread {
       function fire(worker: any) {
         worker.execute(job, (err: any, response: any) => {
           if (err && err.type === "TimeoutError") {
-            reject(
-              new Error(`Query response time exceeded ${timeout}ms timeout.`)
-            )
+            reject(new Error(`Thread timeout exceeded ${timeout}ms timeout.`))
           } else if (err) {
             reject(err)
           } else {
diff --git a/packages/server/src/threads/utils.ts b/packages/server/src/threads/utils.ts
index 37c7a6d3f9..a0f3bbdc47 100644
--- a/packages/server/src/threads/utils.ts
+++ b/packages/server/src/threads/utils.ts
@@ -26,8 +26,10 @@ function makeVariableKey(queryId: string, variable: string) {
 export function threadSetup() {
   // don't run this if not threading
   if (env.isTest() || env.DISABLE_THREADING || !env.isInThread()) {
+    console.debug(`[${env.FORKED_PROCESS_NAME}] thread setup skipped`)
     return
   }
+  console.debug(`[${env.FORKED_PROCESS_NAME}] thread setup running`)
   db.init()
 }
 
diff --git a/packages/server/src/utilities/fileSystem/app.ts b/packages/server/src/utilities/fileSystem/app.ts
index 25600ee3f1..16681c2978 100644
--- a/packages/server/src/utilities/fileSystem/app.ts
+++ b/packages/server/src/utilities/fileSystem/app.ts
@@ -35,10 +35,20 @@ export const getComponentLibraryManifest = async (library: string) => {
   const filename = "manifest.json"
 
   if (env.isDev() || env.isTest()) {
-    const path = join(TOP_LEVEL_PATH, "packages/client", filename)
-    // always load from new so that updates are refreshed
-    delete require.cache[require.resolve(path)]
-    return require(path)
+    const paths = [
+      join(TOP_LEVEL_PATH, "packages/client", filename),
+      join(process.cwd(), "client", filename),
+    ]
+    for (let path of paths) {
+      if (fs.existsSync(path)) {
+        // always load from new so that updates are refreshed
+        delete require.cache[require.resolve(path)]
+        return require(path)
+      }
+    }
+    throw new Error(
+      `Unable to find ${filename} in development environment (may need to build).`
+    )
   }
 
   if (!appId) {
diff --git a/packages/server/src/utilities/redis.ts b/packages/server/src/utilities/redis.ts
index dc37baae58..d833ed2c10 100644
--- a/packages/server/src/utilities/redis.ts
+++ b/packages/server/src/utilities/redis.ts
@@ -1,12 +1,19 @@
-import { redis } from "@budibase/backend-core"
+import { redis, RedisClient } from "@budibase/backend-core"
 import { getGlobalIDFromUserMetadataID } from "../db/utils"
 import { ContextUser } from "@budibase/types"
+import env from "../environment"
 
 const APP_DEV_LOCK_SECONDS = 600
 const AUTOMATION_TEST_FLAG_SECONDS = 60
-let devAppClient: any, debounceClient: any, flagClient: any
+let devAppClient: RedisClient,
+  debounceClient: RedisClient,
+  flagClient: RedisClient
 
-// we init this as we want to keep the connection open all the time
+// We need to maintain a duplicate client for socket.io pub/sub
+let socketClient: RedisClient
+let socketSubClient: any
+
+// We init this as we want to keep the connection open all the time
 // reduces the performance hit
 export async function init() {
   devAppClient = new redis.Client(redis.utils.Databases.DEV_LOCKS)
@@ -15,12 +22,20 @@ export async function init() {
   await devAppClient.init()
   await debounceClient.init()
   await flagClient.init()
+
+  // Duplicate the socket client for pub/sub
+  socketClient = await redis.clients.getSocketClient()
+  if (!env.isTest()) {
+    socketSubClient = socketClient.getClient().duplicate()
+  }
 }
 
 export async function shutdown() {
+  console.log("REDIS SHUTDOWN")
   if (devAppClient) await devAppClient.finish()
   if (debounceClient) await debounceClient.finish()
   if (flagClient) await flagClient.finish()
+  if (socketSubClient) socketSubClient.disconnect()
   // shutdown core clients
   await redis.clients.shutdown()
   console.log("Redis shutdown")
@@ -86,3 +101,10 @@ export async function checkTestFlag(id: string) {
 export async function clearTestFlag(id: string) {
   await devAppClient.delete(id)
 }
+
+export function getSocketPubSubClients() {
+  return {
+    pub: socketClient.getClient(),
+    sub: socketSubClient,
+  }
+}
diff --git a/packages/server/src/utilities/rowProcessor/index.ts b/packages/server/src/utilities/rowProcessor/index.ts
index 44cab4d18b..4b6e0f6e87 100644
--- a/packages/server/src/utilities/rowProcessor/index.ts
+++ b/packages/server/src/utilities/rowProcessor/index.ts
@@ -216,7 +216,10 @@ export async function outputProcessing(
     }
   }
   if (opts.squash) {
-    enriched = await linkRows.squashLinksToPrimaryDisplay(table, enriched)
+    enriched = (await linkRows.squashLinksToPrimaryDisplay(
+      table,
+      enriched
+    )) as Row[]
   }
   return wasArray ? enriched : enriched[0]
 }
diff --git a/packages/server/src/utilities/rowProcessor/map.ts b/packages/server/src/utilities/rowProcessor/map.ts
index cf6823856c..69e49ae371 100644
--- a/packages/server/src/utilities/rowProcessor/map.ts
+++ b/packages/server/src/utilities/rowProcessor/map.ts
@@ -12,7 +12,7 @@ const parseArrayString = value => {
       result = JSON.parse(value.replace(/'/g, '"'))
       return result
     } catch (e) {
-      logging.logAlert("Could not parse row value", e)
+      logging.logWarn("Could not parse row value", e)
     }
   }
   return value
diff --git a/packages/server/src/websockets/builder.ts b/packages/server/src/websockets/builder.ts
new file mode 100644
index 0000000000..0015b7f601
--- /dev/null
+++ b/packages/server/src/websockets/builder.ts
@@ -0,0 +1,77 @@
+import authorized from "../middleware/authorized"
+import { BaseSocket } from "./websocket"
+import { permissions } from "@budibase/backend-core"
+import http from "http"
+import Koa from "koa"
+import { Datasource, Table, SocketSession, ContextUser } from "@budibase/types"
+import { gridSocket } from "./index"
+import { clearLock } from "../utilities/redis"
+import { Socket } from "socket.io"
+import { BuilderSocketEvent } from "@budibase/shared-core"
+
+export default class BuilderSocket extends BaseSocket {
+  constructor(app: Koa, server: http.Server) {
+    super(app, server, "/socket/builder", [authorized(permissions.BUILDER)])
+  }
+
+  async onConnect(socket?: Socket) {
+    // Initial identification of selected app
+    socket?.on(BuilderSocketEvent.SelectApp, async (appId, callback) => {
+      await this.joinRoom(socket, appId)
+
+      // Reply with all users in current room
+      const sessions = await this.getRoomSessions(appId)
+      callback({ users: sessions })
+    })
+  }
+
+  async onDisconnect(socket: Socket) {
+    // Remove app lock from this user if they have no other connections
+    try {
+      // @ts-ignore
+      const session: SocketSession = socket.data
+      const { _id, sessionId, room } = session
+      const sessions = await this.getRoomSessions(room)
+      const hasOtherSession = sessions.some(otherSession => {
+        return _id === otherSession._id && sessionId !== otherSession.sessionId
+      })
+      if (!hasOtherSession && room) {
+        // @ts-ignore
+        const user: ContextUser = { _id: socket.data._id }
+        await clearLock(room, user)
+      }
+    } catch (e) {
+      // This is fine, just means this user didn't hold the lock
+    }
+  }
+
+  emitTableUpdate(ctx: any, table: Table) {
+    this.emitToRoom(ctx, ctx.appId, BuilderSocketEvent.TableChange, {
+      id: table._id,
+      table,
+    })
+    gridSocket?.emitTableUpdate(ctx, table)
+  }
+
+  emitTableDeletion(ctx: any, id: string) {
+    this.emitToRoom(ctx, ctx.appId, BuilderSocketEvent.TableChange, {
+      id,
+      table: null,
+    })
+    gridSocket?.emitTableDeletion(ctx, id)
+  }
+
+  emitDatasourceUpdate(ctx: any, datasource: Datasource) {
+    this.emitToRoom(ctx, ctx.appId, BuilderSocketEvent.DatasourceChange, {
+      id: datasource._id,
+      datasource,
+    })
+  }
+
+  emitDatasourceDeletion(ctx: any, id: string) {
+    this.emitToRoom(ctx, ctx.appId, BuilderSocketEvent.DatasourceChange, {
+      id,
+      datasource: null,
+    })
+  }
+}
diff --git a/packages/server/src/websockets/client.ts b/packages/server/src/websockets/client.ts
index d59325f66e..165febb7a3 100644
--- a/packages/server/src/websockets/client.ts
+++ b/packages/server/src/websockets/client.ts
@@ -1,10 +1,10 @@
-import Socket from "./websocket"
+import { BaseSocket } from "./websocket"
 import authorized from "../middleware/authorized"
 import http from "http"
 import Koa from "koa"
 import { permissions } from "@budibase/backend-core"
 
-export default class ClientAppWebsocket extends Socket {
+export default class ClientAppWebsocket extends BaseSocket {
   constructor(app: Koa, server: http.Server) {
     super(app, server, "/socket/client", [authorized(permissions.BUILDER)])
   }
diff --git a/packages/server/src/websockets/grid.ts b/packages/server/src/websockets/grid.ts
index 886784cd2c..c12715990e 100644
--- a/packages/server/src/websockets/grid.ts
+++ b/packages/server/src/websockets/grid.ts
@@ -1,55 +1,55 @@
 import authorized from "../middleware/authorized"
-import Socket from "./websocket"
+import { BaseSocket } from "./websocket"
 import { permissions } from "@budibase/backend-core"
 import http from "http"
 import Koa from "koa"
+import { getTableId } from "../api/controllers/row/utils"
+import { Row, Table } from "@budibase/types"
+import { Socket } from "socket.io"
+import { GridSocketEvent } from "@budibase/shared-core"
 
-export default class GridSocket extends Socket {
+export default class GridSocket extends BaseSocket {
   constructor(app: Koa, server: http.Server) {
     super(app, server, "/socket/grid", [authorized(permissions.BUILDER)])
+  }
 
-    this.io.on("connection", socket => {
-      const user = socket.data.user
-      console.log(`Spreadsheet user connected: ${user?.id}`)
+  async onConnect(socket: Socket) {
+    // Initial identification of connected spreadsheet
+    socket.on(GridSocketEvent.SelectTable, async (tableId, callback) => {
+      await this.joinRoom(socket, tableId)
 
-      // Socket state
-      let currentRoom: string
+      // Reply with all users in current room
+      const sessions = await this.getRoomSessions(tableId)
+      callback({ users: sessions })
+    })
 
-      // Initial identification of connected spreadsheet
-      socket.on("select-table", async (tableId, callback) => {
-        // Leave current room
-        if (currentRoom) {
-          socket.to(currentRoom).emit("user-disconnect", socket.data.user)
-          socket.leave(currentRoom)
-        }
-
-        // Join new room
-        currentRoom = tableId
-        socket.join(currentRoom)
-        socket.to(currentRoom).emit("user-update", socket.data.user)
-
-        // Reply with all users in current room
-        const sockets = await this.io.in(currentRoom).fetchSockets()
-        callback({
-          users: sockets.map(socket => socket.data.user),
-          id: user.id,
-        })
-      })
-
-      // Handle users selecting a new cell
-      socket.on("select-cell", cellId => {
-        socket.data.user.selectedCellId = cellId
-        if (currentRoom) {
-          socket.to(currentRoom).emit("user-update", socket.data.user)
-        }
-      })
-
-      // Disconnection cleanup
-      socket.on("disconnect", () => {
-        if (currentRoom) {
-          socket.to(currentRoom).emit("user-disconnect", socket.data.user)
-        }
-      })
+    // Handle users selecting a new cell
+    socket.on(GridSocketEvent.SelectCell, cellId => {
+      this.updateUser(socket, { focusedCellId: cellId })
     })
   }
+
+  emitRowUpdate(ctx: any, row: Row) {
+    const tableId = getTableId(ctx)
+    this.emitToRoom(ctx, tableId, GridSocketEvent.RowChange, {
+      id: row._id,
+      row,
+    })
+  }
+
+  emitRowDeletion(ctx: any, id: string) {
+    const tableId = getTableId(ctx)
+    this.emitToRoom(ctx, tableId, GridSocketEvent.RowChange, { id, row: null })
+  }
+
+  emitTableUpdate(ctx: any, table: Table) {
+    this.emitToRoom(ctx, table._id!, GridSocketEvent.TableChange, {
+      id: table._id,
+      table,
+    })
+  }
+
+  emitTableDeletion(ctx: any, id: string) {
+    this.emitToRoom(ctx, id, GridSocketEvent.TableChange, { id, table: null })
+  }
 }
diff --git a/packages/server/src/websockets/index.ts b/packages/server/src/websockets/index.ts
index 60cdfb8aed..bb530b559e 100644
--- a/packages/server/src/websockets/index.ts
+++ b/packages/server/src/websockets/index.ts
@@ -1,14 +1,21 @@
 import http from "http"
 import Koa from "koa"
-import GridSocket from "./grid"
 import ClientAppSocket from "./client"
+import GridSocket from "./grid"
+import BuilderSocket from "./builder"
+import env from "../environment"
 
-let clientAppSocket: ClientAppSocket
-let gridSocket: GridSocket
+let clientAppSocket: ClientAppSocket | undefined
+let gridSocket: GridSocket | undefined
+let builderSocket: BuilderSocket | undefined
 
 export const initialise = (app: Koa, server: http.Server) => {
-  clientAppSocket = new ClientAppSocket(app, server)
-  gridSocket = new GridSocket(app, server)
+  // have to remove these for testing until ioredis-mock can be fully removed
+  if (!env.isTest()) {
+    clientAppSocket = new ClientAppSocket(app, server)
+    gridSocket = new GridSocket(app, server)
+    builderSocket = new BuilderSocket(app, server)
+  }
 }
 
-export { clientAppSocket, gridSocket }
+export { clientAppSocket, gridSocket, builderSocket }
diff --git a/packages/server/src/websockets/websocket.ts b/packages/server/src/websockets/websocket.ts
index 1b34168f14..3bf9f27416 100644
--- a/packages/server/src/websockets/websocket.ts
+++ b/packages/server/src/websockets/websocket.ts
@@ -3,18 +3,26 @@ import http from "http"
 import Koa from "koa"
 import Cookies from "cookies"
 import { userAgent } from "koa-useragent"
-import { auth } from "@budibase/backend-core"
+import { auth, Header, redis } from "@budibase/backend-core"
 import currentApp from "../middleware/currentapp"
+import { createAdapter } from "@socket.io/redis-adapter"
+import { Socket } from "socket.io"
+import { getSocketPubSubClients } from "../utilities/redis"
+import { SocketEvent, SocketSessionTTL } from "@budibase/shared-core"
+import { SocketSession } from "@budibase/types"
 
-export default class Socket {
+export class BaseSocket {
   io: Server
+  path: string
+  redisClient?: redis.Client
 
   constructor(
     app: Koa,
     server: http.Server,
-    path: string,
+    path: string = "/",
     additionalMiddlewares?: any[]
   ) {
+    this.path = path
     this.io = new Server(server, {
       path,
     })
@@ -59,12 +67,16 @@ export default class Socket {
         for (let [idx, middleware] of middlewares.entries()) {
           await middleware(ctx, () => {
             if (idx === middlewares.length - 1) {
-              // Middlewares are finished.
+              // Middlewares are finished
               // Extract some data from our enriched koa context to persist
               // as metadata for the socket
-              socket.data.user = {
-                id: ctx.user._id,
-                email: ctx.user.email,
+              const { _id, email, firstName, lastName } = ctx.user
+              socket.data = {
+                _id,
+                email,
+                firstName,
+                lastName,
+                sessionId: socket.id,
               }
               next()
             }
@@ -74,10 +86,197 @@ export default class Socket {
         next(error)
       }
     })
+
+    // Initialise redis before handling connections
+    this.initialise().then(() => {
+      this.io.on("connection", async socket => {
+        // Add built in handler for heartbeats
+        socket.on(SocketEvent.Heartbeat, async () => {
+          await this.extendSessionTTL(socket.data.sessionId)
+        })
+
+        // Add early disconnection handler to clean up and leave room
+        socket.on("disconnect", async () => {
+          // Run any custom disconnection logic before we leave the room,
+          // so that we have access to their room etc before disconnection
+          await this.onDisconnect(socket)
+
+          // Leave the current room when the user disconnects if we're in one
+          await this.leaveRoom(socket)
+        })
+
+        // Add handlers for this socket
+        await this.onConnect(socket)
+      })
+    })
+  }
+
+  async initialise() {
+    // Instantiate redis adapter.
+    // We use a fully qualified key name here as this bypasses the normal
+    // redis client#s key prefixing.
+    const { pub, sub } = getSocketPubSubClients()
+    const opts = {
+      key: `${redis.utils.Databases.SOCKET_IO}-${this.path}-pubsub`,
+    }
+    this.io.adapter(createAdapter(pub, sub, opts))
+
+    // Fetch redis client
+    this.redisClient = await redis.clients.getSocketClient()
+  }
+
+  // Gets the redis key for a certain session ID
+  getSessionKey(sessionId: string) {
+    return `${this.path}-session:${sessionId}`
+  }
+
+  // Gets the redis key for certain room name
+  getRoomKey(room: string) {
+    return `${this.path}-room:${room}`
+  }
+
+  async extendSessionTTL(sessionId: string) {
+    const key = this.getSessionKey(sessionId)
+    await this.redisClient?.setExpiry(key, SocketSessionTTL)
+  }
+
+  // Gets an array of all redis keys of users inside a certain room
+  async getRoomSessionIds(room: string): Promise<string[]> {
+    const keys = await this.redisClient?.get(this.getRoomKey(room))
+    return keys || []
+  }
+
+  // Sets the list of redis keys for users inside a certain room.
+  // There is no TTL on the actual room key map itself.
+  async setRoomSessionIds(room: string, ids: string[]) {
+    await this.redisClient?.store(this.getRoomKey(room), ids)
+  }
+
+  // Gets a list of all users inside a certain room
+  async getRoomSessions(room?: string): Promise<SocketSession[]> {
+    if (room) {
+      const sessionIds = await this.getRoomSessionIds(room)
+      const keys = sessionIds.map(this.getSessionKey.bind(this))
+      const sessions = await this.redisClient?.bulkGet(keys)
+      return Object.values(sessions || {})
+    } else {
+      return []
+    }
+  }
+
+  // Detects keys which have been pruned from redis due to TTL expiry in a certain
+  // room and broadcasts disconnection messages to ensure clients are aware
+  async pruneRoom(room: string) {
+    const sessionIds = await this.getRoomSessionIds(room)
+    const sessionsExist = await Promise.all(
+      sessionIds.map(id => this.redisClient?.exists(this.getSessionKey(id)))
+    )
+    const prunedSessionIds = sessionIds.filter((id, idx) => {
+      if (!sessionsExist[idx]) {
+        this.io.to(room).emit(SocketEvent.UserDisconnect, sessionIds[idx])
+        return false
+      }
+      return true
+    })
+
+    // Store new pruned keys
+    await this.setRoomSessionIds(room, prunedSessionIds)
+  }
+
+  // Adds a user to a certain room
+  async joinRoom(socket: Socket, room: string) {
+    if (!room) {
+      return
+    }
+    // Prune room before joining
+    await this.pruneRoom(room)
+
+    // Check if we're already in a room, as we'll need to leave if we are before we
+    // can join a different room
+    const oldRoom = socket.data.room
+    if (oldRoom && oldRoom !== room) {
+      await this.leaveRoom(socket)
+    }
+
+    // Join new room
+    if (!oldRoom || oldRoom !== room) {
+      socket.join(room)
+      socket.data.room = room
+    }
+
+    // Store in redis
+    // @ts-ignore
+    let user: SocketSession = socket.data
+    const { sessionId } = user
+    const key = this.getSessionKey(sessionId)
+    await this.redisClient?.store(key, user, SocketSessionTTL)
+    const sessionIds = await this.getRoomSessionIds(room)
+    if (!sessionIds.includes(sessionId)) {
+      await this.setRoomSessionIds(room, [...sessionIds, sessionId])
+    }
+
+    // Notify other users
+    socket.to(room).emit(SocketEvent.UserUpdate, user)
+  }
+
+  // Disconnects a socket from its current room
+  async leaveRoom(socket: Socket) {
+    // @ts-ignore
+    let user: SocketSession = socket.data
+    const { room, sessionId } = user
+    if (!room) {
+      return
+    }
+
+    // Leave room
+    socket.leave(room)
+    socket.data.room = undefined
+
+    // Delete from redis
+    const key = this.getSessionKey(sessionId)
+    await this.redisClient?.delete(key)
+    const sessionIds = await this.getRoomSessionIds(room)
+    await this.setRoomSessionIds(
+      room,
+      sessionIds.filter(id => id !== sessionId)
+    )
+
+    // Notify other users
+    socket.to(room).emit(SocketEvent.UserDisconnect, sessionId)
+  }
+
+  // Updates a connected user's metadata, assuming a room change is not required.
+  async updateUser(socket: Socket, patch: Object) {
+    socket.data = {
+      ...socket.data,
+      ...patch,
+    }
+
+    // If we're in a room, notify others of this change and update redis
+    if (socket.data.room) {
+      await this.joinRoom(socket, socket.data.room)
+    }
+  }
+
+  async onConnect(socket: Socket) {
+    // Override
+  }
+
+  async onDisconnect(socket: Socket) {
+    // Override
   }
 
   // Emit an event to all sockets
   emit(event: string, payload: any) {
     this.io.sockets.emit(event, payload)
   }
+
+  // Emit an event to everyone in a room, including metadata of whom
+  // the originator of the request was
+  emitToRoom(ctx: any, room: string, event: string, payload: any) {
+    this.io.in(room).emit(event, {
+      ...payload,
+      apiSessionId: ctx.headers?.[Header.SESSION_ID],
+    })
+  }
 }
diff --git a/packages/shared-core/package.json b/packages/shared-core/package.json
index 730c0376d0..b51f9732a0 100644
--- a/packages/shared-core/package.json
+++ b/packages/shared-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/shared-core",
-  "version": "0.0.1",
+  "version": "0.0.0",
   "description": "Shared data utils",
   "main": "dist/cjs/src/index.js",
   "types": "dist/mjs/src/index.d.ts",
@@ -20,7 +20,7 @@
     "dev:builder": "yarn prebuild && concurrently \"tsc -p tsconfig.build.json --watch\" \"tsc -p tsconfig-cjs.build.json --watch\""
   },
   "dependencies": {
-    "@budibase/types": "0.0.1"
+    "@budibase/types": "0.0.0"
   },
   "devDependencies": {
     "concurrently": "^7.6.0",
diff --git a/packages/shared-core/src/constants.ts b/packages/shared-core/src/constants.ts
index 35b02d1e15..5802a6d88a 100644
--- a/packages/shared-core/src/constants.ts
+++ b/packages/shared-core/src/constants.ts
@@ -67,3 +67,24 @@ export const SqlNumberTypeRangeMap = {
     min: -8388608,
   },
 }
+
+export enum SocketEvent {
+  UserUpdate = "UserUpdate",
+  UserDisconnect = "UserDisconnect",
+  Heartbeat = "Heartbeat",
+}
+
+export enum GridSocketEvent {
+  RowChange = "RowChange",
+  TableChange = "TableChange",
+  SelectTable = "SelectTable",
+  SelectCell = "SelectCell",
+}
+
+export enum BuilderSocketEvent {
+  SelectApp = "SelectApp",
+  TableChange = "TableChange",
+  DatasourceChange = "DatasourceChange",
+}
+
+export const SocketSessionTTL = 60
diff --git a/packages/shared-core/src/filters.ts b/packages/shared-core/src/filters.ts
index 1ffcebdd2b..7c2c34bf6b 100644
--- a/packages/shared-core/src/filters.ts
+++ b/packages/shared-core/src/filters.ts
@@ -455,3 +455,19 @@ export const luceneLimit = (docs: any[], limit: string) => {
   }
   return docs.slice(0, numLimit)
 }
+
+export const hasFilters = (query?: Query) => {
+  if (!query) {
+    return false
+  }
+  const skipped = ["allOr"]
+  for (let [key, value] of Object.entries(query)) {
+    if (skipped.includes(key) || typeof value !== "object") {
+      continue
+    }
+    if (Object.keys(value).length !== 0) {
+      return true
+    }
+  }
+  return false
+}
diff --git a/packages/shared-core/src/helpers/helpers.ts b/packages/shared-core/src/helpers/helpers.ts
index 8ecfc24b56..8b8f5a3918 100644
--- a/packages/shared-core/src/helpers/helpers.ts
+++ b/packages/shared-core/src/helpers/helpers.ts
@@ -1,3 +1,5 @@
+import { User } from "@budibase/types"
+
 /**
  * Gets a key within an object. The key supports dot syntax for retrieving deep
  * fields - e.g. "a.b.c".
@@ -21,3 +23,60 @@ export const deepGet = (obj: { [x: string]: any }, key: string) => {
   }
   return obj
 }
+
+/**
+ * Gets the initials to show in a user avatar.
+ * @param user the user
+ */
+export const getUserInitials = (user: User) => {
+  if (!user) {
+    return "?"
+  }
+  let initials = ""
+  initials += user.firstName ? user.firstName[0] : ""
+  initials += user.lastName ? user.lastName[0] : ""
+  return initials === "" ? user.email[0] : initials
+}
+
+/**
+ * Gets a deterministic colour for a particular user
+ * @param user the user
+ */
+export const getUserColor = (user: User) => {
+  let id = user?._id
+  if (!id) {
+    return "var(--spectrum-global-color-blue-400)"
+  }
+
+  // In order to generate the same color for global users as app users, we need
+  // to remove the app-specific table prefix
+  id = id.replace("ro_ta_users_", "")
+
+  // Generate a hue based on the ID
+  let hue = 1
+  for (let i = 0; i < id.length; i++) {
+    hue += id.charCodeAt(i)
+    hue = hue % 36
+  }
+  return `hsl(${hue * 10}, 50%, 40%)`
+}
+
+/**
+ * Gets a friendly label to describe who a user is.
+ * @param user the user
+ */
+export const getUserLabel = (user: User) => {
+  if (!user) {
+    return ""
+  }
+  const { firstName, lastName, email } = user
+  if (firstName && lastName) {
+    return `${firstName} ${lastName}`
+  } else if (firstName) {
+    return firstName
+  } else if (lastName) {
+    return lastName
+  } else {
+    return email
+  }
+}
diff --git a/packages/string-templates/package.json b/packages/string-templates/package.json
index 4ca866f18d..b1a276369f 100644
--- a/packages/string-templates/package.json
+++ b/packages/string-templates/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/string-templates",
-  "version": "0.0.1",
+  "version": "0.0.0",
   "description": "Handlebars wrapper for Budibase templating.",
   "main": "src/index.cjs",
   "module": "dist/bundle.mjs",
diff --git a/packages/types/package.json b/packages/types/package.json
index 6f6b5c9ec3..69eaa8b6b5 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@budibase/types",
-  "version": "0.0.1",
+  "version": "0.0.0",
   "description": "Budibase types",
   "main": "dist/cjs/index.js",
   "types": "dist/mjs/index.d.ts",
diff --git a/packages/types/src/api/web/app/datasource.ts b/packages/types/src/api/web/app/datasource.ts
index d15f65eb35..d692f17421 100644
--- a/packages/types/src/api/web/app/datasource.ts
+++ b/packages/types/src/api/web/app/datasource.ts
@@ -23,6 +23,10 @@ export interface VerifyDatasourceResponse {
   error?: string
 }
 
+export interface FetchDatasourceInfoRequest {
+  datasource: Datasource
+}
+
 export interface FetchDatasourceInfoResponse {
   tableNames: string[]
 }
diff --git a/packages/types/src/documents/app/automation.ts b/packages/types/src/documents/app/automation.ts
index a537b026d5..193a5a414a 100644
--- a/packages/types/src/documents/app/automation.ts
+++ b/packages/types/src/documents/app/automation.ts
@@ -57,6 +57,7 @@ export enum AutomationActionStepId {
   FILTER = "FILTER",
   QUERY_ROWS = "QUERY_ROWS",
   LOOP = "LOOP",
+  COLLECT = "COLLECT",
   OPENAI = "OPENAI",
   // these used to be lowercase step IDs, maintain for backwards compat
   discord = "discord",
@@ -123,6 +124,11 @@ export interface AutomationStepSchema {
     outputs: InputOutputBlock
   }
   custom?: boolean
+  features?: Partial<Record<AutomationFeature, boolean>>
+}
+
+export enum AutomationFeature {
+  LOOPING = "LOOPING",
 }
 
 export interface AutomationStep extends AutomationStepSchema {
diff --git a/packages/types/src/sdk/automations/index.ts b/packages/types/src/sdk/automations/index.ts
index f1e3d38101..c0e4bacabc 100644
--- a/packages/types/src/sdk/automations/index.ts
+++ b/packages/types/src/sdk/automations/index.ts
@@ -5,6 +5,7 @@ export interface AutomationDataEvent {
   appId?: string
   metadata?: AutomationMetadata
   automation?: Automation
+  timeout?: number
 }
 
 export interface AutomationData {
diff --git a/packages/types/src/sdk/index.ts b/packages/types/src/sdk/index.ts
index ed44c13667..49d0387a82 100644
--- a/packages/types/src/sdk/index.ts
+++ b/packages/types/src/sdk/index.ts
@@ -17,3 +17,4 @@ export * from "./auditLogs"
 export * from "./sso"
 export * from "./user"
 export * from "./cli"
+export * from "./websocket"
diff --git a/packages/types/src/sdk/licensing/feature.ts b/packages/types/src/sdk/licensing/feature.ts
index 97fbd36224..1cbdd55bcf 100644
--- a/packages/types/src/sdk/licensing/feature.ts
+++ b/packages/types/src/sdk/licensing/feature.ts
@@ -8,6 +8,7 @@ export enum Feature {
   ENFORCEABLE_SSO = "enforceableSSO",
   BRANDING = "branding",
   SCIM = "scim",
+  SYNC_AUTOMATIONS = "syncAutomations",
 }
 
 export type PlanFeatures = { [key in PlanType]: Feature[] | undefined }
diff --git a/packages/types/src/sdk/locks.ts b/packages/types/src/sdk/locks.ts
index 6147308f7d..a35e7b379b 100644
--- a/packages/types/src/sdk/locks.ts
+++ b/packages/types/src/sdk/locks.ts
@@ -6,6 +6,7 @@ export enum LockType {
    * No retries will take place and no error will be thrown.
    */
   TRY_ONCE = "try_once",
+  TRY_TWICE = "try_twice",
   DEFAULT = "default",
   DELAY_500 = "delay_500",
   CUSTOM = "custom",
diff --git a/packages/types/src/sdk/websocket.ts b/packages/types/src/sdk/websocket.ts
new file mode 100644
index 0000000000..4fa7e155d6
--- /dev/null
+++ b/packages/types/src/sdk/websocket.ts
@@ -0,0 +1,8 @@
+export interface SocketSession {
+  _id: string
+  email: string
+  firstName?: string
+  lastName?: string
+  sessionId: string
+  room?: string
+}
diff --git a/packages/worker/.dockerignore b/packages/worker/.dockerignore
index c4815909ba..8f79e19685 100644
--- a/packages/worker/.dockerignore
+++ b/packages/worker/.dockerignore
@@ -1,3 +1,4 @@
 *
 !/dist/
-!/docker_run.sh
\ No newline at end of file
+!/docker_run.sh
+!/package.json
\ No newline at end of file
diff --git a/packages/worker/Dockerfile b/packages/worker/Dockerfile
index 7b8f991013..a80ae00af1 100644
--- a/packages/worker/Dockerfile
+++ b/packages/worker/Dockerfile
@@ -12,7 +12,7 @@ RUN apk add --no-cache --virtual .gyp python3 make g++
 RUN yarn global add pm2
 
 
-COPY dist/package.json .
+COPY package.json .
 RUN yarn install --frozen-lockfile --production=true
 # Remove unneeded data from file system to reduce image size
 RUN apk del .gyp \
diff --git a/packages/worker/package.json b/packages/worker/package.json
index 684bd8755b..a90a4eb683 100644
--- a/packages/worker/package.json
+++ b/packages/worker/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@budibase/worker",
   "email": "hi@budibase.com",
-  "version": "0.0.1",
+  "version": "0.0.0",
   "description": "Budibase background service",
   "main": "src/index.ts",
   "repository": {
@@ -13,7 +13,8 @@
   ],
   "scripts": {
     "prebuild": "rimraf dist/",
-    "build": "cd ../.. && nx build @budibase/worker",
+    "build": "node ../../scripts/build.js",
+    "check:types": "tsc -p tsconfig.build.json --noEmit",
     "build:dev": "yarn prebuild && tsc --build --watch --preserveWatchOutput",
     "run:docker": "node dist/index.js",
     "debug": "yarn build && node --expose-gc --inspect=9223 dist/index.js",
@@ -37,10 +38,10 @@
   "author": "Budibase",
   "license": "GPL-3.0",
   "dependencies": {
-    "@budibase/backend-core": "0.0.1",
-    "@budibase/pro": "0.0.1",
-    "@budibase/string-templates": "0.0.1",
-    "@budibase/types": "0.0.1",
+    "@budibase/backend-core": "0.0.0",
+    "@budibase/pro": "0.0.0",
+    "@budibase/string-templates": "0.0.0",
+    "@budibase/types": "0.0.0",
     "@koa/router": "8.0.8",
     "@sentry/node": "6.17.7",
     "@techpass/passport-openidconnect": "0.3.2",
diff --git a/packages/worker/project.json b/packages/worker/project.json
deleted file mode 100644
index 65f9b2d567..0000000000
--- a/packages/worker/project.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-  "name": "@budibase/worker",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "targets": {
-    "build": {
-      "executor": "@nx/esbuild:esbuild",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "main": "packages/worker/src/index.ts",
-        "outputPath": "packages/worker/dist",
-        "outputFileName": "index.js",
-        "tsConfig": "packages/worker/tsconfig.build.json",
-        "assets": [
-          {
-            "glob": "**/*.hbs",
-            "input": "packages/worker/src/constants/templates",
-            "output": "."
-          }
-        ],
-        "external": ["graphql/*", "deasync", "mock-aws-s3", "nock"],
-        "format": ["cjs"],
-        "esbuildOptions": {
-          "outExtension": {
-            ".js": ".js"
-          },
-          "sourcemap": true
-        },
-        "minify": true,
-        "generatePackageJson": true,
-        "skipTypeCheck": true
-      },
-      "configurations": {
-        "production": {
-          "skipTypeCheck": false,
-          "esbuildOptions": {
-            "sourcemap": false
-          }
-        }
-      },
-      "dependsOn": [
-        {
-          "projects": ["@budibase/types", "@budibase/string-templates"],
-          "target": "build"
-        }
-      ]
-    }
-  }
-}
diff --git a/packages/worker/src/api/controllers/global/configs.ts b/packages/worker/src/api/controllers/global/configs.ts
index 66804c3b9c..afbb7c931d 100644
--- a/packages/worker/src/api/controllers/global/configs.ts
+++ b/packages/worker/src/api/controllers/global/configs.ts
@@ -11,7 +11,6 @@ import {
   tenancy,
 } from "@budibase/backend-core"
 import { checkAnyUserExists } from "../../../utilities/users"
-import { getLicensedConfig } from "../../../utilities/configs"
 import {
   Config,
   ConfigType,
diff --git a/qa-core/src/account-api/api/apis/AccountAPI.ts b/qa-core/src/account-api/api/apis/AccountAPI.ts
index a97fe29fd0..c18dde3d4a 100644
--- a/qa-core/src/account-api/api/apis/AccountAPI.ts
+++ b/qa-core/src/account-api/api/apis/AccountAPI.ts
@@ -58,4 +58,10 @@ export default class AccountAPI {
     }
     return [response, json]
   }
+
+  async delete(accountID: string) {
+    const [response, json] = await this.client.del(`/api/accounts/${accountID}`)
+    expect(response).toHaveStatusCode(200)
+    return response
+  }
 }
diff --git a/qa-core/src/internal-api/fixtures/datasources.ts b/qa-core/src/internal-api/fixtures/datasources.ts
index 4797f86631..c7f969a98c 100644
--- a/qa-core/src/internal-api/fixtures/datasources.ts
+++ b/qa-core/src/internal-api/fixtures/datasources.ts
@@ -1,4 +1,7 @@
+import { Datasource } from "@budibase/types"
 import { DatasourceRequest } from "../../types"
+import { generator } from "../../shared"
+
 // Add information about the data source to the fixtures file from 1password
 export const mongoDB = (): DatasourceRequest => {
   return {
@@ -70,3 +73,50 @@ export const restAPI = (): DatasourceRequest => {
     fetchSchema: false,
   }
 }
+
+export const generateRelationshipForMySQL = (
+  updatedDataSourceJson: any
+): Datasource => {
+  const entities = updatedDataSourceJson!.datasource!.entities!
+  const datasourceId = updatedDataSourceJson!.datasource!._id!
+  const relationShipBody = {
+    ...updatedDataSourceJson.datasource,
+    entities: {
+      ...updatedDataSourceJson.datasource.entities,
+      employees: {
+        ...entities.employees,
+        schema: {
+          ...entities.employees.schema,
+          salaries: {
+            tableId: `${datasourceId}__salaries`,
+            name: "salaries",
+            relationshipType: "many-to-one",
+            fieldName: "salary",
+            type: "link",
+            main: true,
+            _id: generator.string(),
+            foreignKey: "emp_no",
+          },
+        },
+      },
+      titles: {
+        ...entities.titles,
+        schema: {
+          ...entities.titles.schema,
+          employees: {
+            tableId: `${datasourceId}__employees`,
+            name: "employees",
+            relationshipType: "one-to-many",
+            fieldName: "emp_no",
+            type: "link",
+            main: true,
+            _id: generator.string(),
+            foreignKey: "emp_no",
+          },
+        },
+      },
+    },
+  }
+
+  return relationShipBody
+}
diff --git a/qa-core/src/internal-api/tests/dataSources/mariaDB.integration.spec.ts b/qa-core/src/internal-api/tests/dataSources/mariaDB.integration.spec.ts
index 3f479136f6..24c9cea94b 100644
--- a/qa-core/src/internal-api/tests/dataSources/mariaDB.integration.spec.ts
+++ b/qa-core/src/internal-api/tests/dataSources/mariaDB.integration.spec.ts
@@ -66,4 +66,41 @@ describe("Internal API - Data Sources: MariaDB", () => {
       updatedDataSourceJson.datasource._rev!
     )
   })
+
+  it("Create a relationship", async () => {
+    // Create app
+    await config.createApp()
+
+    // Get all integrations
+    await config.api.integrations.getAll()
+
+    // Add data source
+    const [dataSourceResponse, dataSourceJson] =
+      await config.api.datasources.add(fixtures.datasources.mariaDB())
+
+    // Update data source
+    const newDataSourceInfo = {
+      ...dataSourceJson.datasource,
+      name: "MariaDB2",
+    }
+    const [updatedDataSourceResponse, updatedDataSourceJson] =
+      await config.api.datasources.update(newDataSourceInfo)
+
+    // Query data source
+    const [queryResponse, queryJson] = await config.api.queries.preview(
+      fixtures.queries.mariaDB(updatedDataSourceJson.datasource._id!)
+    )
+
+    expect(queryJson.rows.length).toBeGreaterThan(9)
+    expect(queryJson.schemaFields).toEqual(
+      fixtures.queries.expectedSchemaFields.mariaDB
+    )
+
+    // Add relationship
+    const relationShipBody = fixtures.datasources.generateRelationshipForMySQL(
+      updatedDataSourceJson
+    )
+    const [relationshipResponse, relationshipJson] =
+      await config.api.datasources.update(relationShipBody)
+  })
 })
diff --git a/qa-core/src/internal-api/tests/dataSources/postgresSQL.integration.spec.ts b/qa-core/src/internal-api/tests/dataSources/postgresSQL.integration.spec.ts
index ccfcce6f55..2aabd608bc 100644
--- a/qa-core/src/internal-api/tests/dataSources/postgresSQL.integration.spec.ts
+++ b/qa-core/src/internal-api/tests/dataSources/postgresSQL.integration.spec.ts
@@ -37,7 +37,7 @@ describe("Internal API - Data Sources: PostgresSQL", () => {
       fixtures.queries.postgres(updatedDataSourceJson.datasource._id!)
     )
 
-    expect(queryJson.rows.length).toEqual(91)
+    expect(queryJson.rows.length).toBeGreaterThan(10)
     expect(queryJson.schemaFields).toEqual(
       fixtures.queries.expectedSchemaFields.postgres
     )
diff --git a/qa-core/src/jest/globalSetup.ts b/qa-core/src/jest/globalSetup.ts
index e222e7c043..12d227df02 100644
--- a/qa-core/src/jest/globalSetup.ts
+++ b/qa-core/src/jest/globalSetup.ts
@@ -2,7 +2,7 @@ import { DEFAULT_TENANT_ID, logging } from "@budibase/backend-core"
 import { AccountInternalAPI } from "../account-api"
 import * as fixtures from "../internal-api/fixtures"
 import { BudibaseInternalAPI } from "../internal-api"
-import { CreateAccountRequest, Feature } from "@budibase/types"
+import { Account, CreateAccountRequest, Feature } from "@budibase/types"
 import env from "../environment"
 import { APIRequestOpts } from "../types"
 
@@ -18,13 +18,13 @@ const API_OPTS: APIRequestOpts = { doExpect: false }
 // @ts-ignore
 global.qa = {}
 
-async function createAccount() {
+async function createAccount(): Promise<[CreateAccountRequest, Account]> {
   const account = fixtures.accounts.generateAccount()
   await accountsApi.accounts.validateEmail(account.email, API_OPTS)
   await accountsApi.accounts.validateTenantId(account.tenantId, API_OPTS)
   const [res, newAccount] = await accountsApi.accounts.create(account, API_OPTS)
   await updateLicense(newAccount.accountId)
-  return account
+  return [account, newAccount]
 }
 
 const UNLIMITED = { value: -1 }
@@ -85,9 +85,11 @@ async function setup() {
   console.log(`Environment: ${JSON.stringify(env)}`)
 
   if (env.multiTenancy) {
-    const account = await createAccount()
+    const [account, newAccount] = await createAccount()
     // @ts-ignore
     global.qa.tenantId = account.tenantId
+    // @ts-ignore
+    global.qa.accountId = newAccount.accountId
     await loginAsAccount(account)
   } else {
     // @ts-ignore
diff --git a/qa-core/src/jest/globalTeardown.ts b/qa-core/src/jest/globalTeardown.ts
index 9cd7fff041..51f6046f4f 100644
--- a/qa-core/src/jest/globalTeardown.ts
+++ b/qa-core/src/jest/globalTeardown.ts
@@ -1,7 +1,24 @@
+import { AccountInternalAPI } from "../account-api"
+import { BudibaseInternalAPI } from "../internal-api"
+import { APIRequestOpts } from "../types"
+
+const accountsApi = new AccountInternalAPI({})
+const internalApi = new BudibaseInternalAPI({})
+
+const API_OPTS: APIRequestOpts = { doExpect: false }
+
+async function deleteAccount() {
+  // @ts-ignore
+  const accountID = global.qa.accountId
+  await accountsApi.accounts.delete(accountID)
+}
+
 async function teardown() {
   console.log("\nGLOBAL TEARDOWN STARTING")
-
-  // TODO: Delete account and apps after test run
+  const env = await internalApi.environment.getEnvironment(API_OPTS)
+  if (env.multiTenancy) {
+    await deleteAccount()
+  }
 
   console.log("GLOBAL TEARDOWN COMPLETE")
 }
diff --git a/scripts/build.js b/scripts/build.js
index 34f0a70d35..5659dfa6ae 100755
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -30,7 +30,7 @@ function runBuild(entry, outfile) {
       NodeResolve({
         extensions: [".ts", ".js"],
         onResolved: resolved => {
-          if (resolved.includes("node_modules")) {
+          if (resolved.includes("node_modules") && !resolved.includes("/@budibase/pro/")) {
             return {
               external: true,
             }
diff --git a/scripts/syncLocalDependencies.js b/scripts/syncLocalDependencies.js
index d7bc8643bb..1c402e9a44 100755
--- a/scripts/syncLocalDependencies.js
+++ b/scripts/syncLocalDependencies.js
@@ -51,3 +51,10 @@ workspaces.forEach(workspace => {
     )
   }
 })
+
+const rootPackageJson = JSON.parse(fs.readFileSync("package.json", "utf-8"))
+delete rootPackageJson["resolutions"]
+fs.writeFileSync(
+  "package.json",
+  JSON.stringify(rootPackageJson, null, 2) + "\n"
+)
diff --git a/scripts/syncProPackage.js b/scripts/syncProPackage.js
index 833d14299b..bbbe33f44b 100755
--- a/scripts/syncProPackage.js
+++ b/scripts/syncProPackage.js
@@ -2,7 +2,7 @@ const fs = require("fs")
 const path = require("path")
 const { execSync } = require("child_process")
 
-let version = "0.0.1"
+let version = "0.0.0"
 const localPro = fs.existsSync("packages/pro/packages")
 if (!localPro) {
   const branchName = execSync("git rev-parse --abbrev-ref HEAD")
@@ -26,7 +26,7 @@ Object.keys(data).forEach(workspace => {
   // Loop through each dependency and update its version in package.json
   const packageJsonPath = path.join(data[workspace].location, "package.json")
   const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"))
-  if (packageJson.version !== "0.0.1") {
+  if (packageJson.version !== "0.0.0") {
     // Don't change if we are not using local versions
     return
   }
diff --git a/yarn.lock b/yarn.lock
index 0d9d795b8a..9a57eb4377 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1889,6 +1889,84 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@codemirror/autocomplete@^6.0.0", "@codemirror/autocomplete@^6.7.1":
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.7.1.tgz#3364799b78dff70fb8f81615536c52ea53ce40b2"
+  integrity sha512-hSxf9S0uB+GV+gBsjY1FZNo53e1FFdzPceRfCfD1gWOnV6o21GfB5J5Wg9G/4h76XZMPrF0A6OCK/Rz5+V1egg==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.6.0"
+    "@lezer/common" "^1.0.0"
+
+"@codemirror/commands@^6.2.4":
+  version "6.2.4"
+  resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.2.4.tgz#b8a0e5ce72448c092ba4c4b1d902e6f183948aec"
+  integrity sha512-42lmDqVH0ttfilLShReLXsDfASKLXzfyC36bzwcqzox9PlHulMcsUOfHXNo2X2aFMVNUoQ7j+d4q5bnfseYoOA==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.2.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/common" "^1.0.0"
+
+"@codemirror/lang-javascript@^6.1.8":
+  version "6.1.8"
+  resolved "https://registry.yarnpkg.com/@codemirror/lang-javascript/-/lang-javascript-6.1.8.tgz#2d0f7de0175f7ad05b6a71d3fe580809b884b339"
+  integrity sha512-5cIA6IOkslTu1DtldcYnj7hsBm3p+cD37qSaKvW1kV16M6q9ysKvKrveCOWgbrj4+ilSWRL2JtSLudbeB158xg==
+  dependencies:
+    "@codemirror/autocomplete" "^6.0.0"
+    "@codemirror/language" "^6.6.0"
+    "@codemirror/lint" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/javascript" "^1.0.0"
+
+"@codemirror/language@^6.0.0", "@codemirror/language@^6.6.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.6.0.tgz#2204407174a38a68053715c19e28ad61f491779f"
+  integrity sha512-cwUd6lzt3MfNYOobdjf14ZkLbJcnv4WtndYaoBkbor/vF+rCNguMPK0IRtvZJG4dsWiaWPcK8x1VijhvSxnstg==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/common" "^1.0.0"
+    "@lezer/highlight" "^1.0.0"
+    "@lezer/lr" "^1.0.0"
+    style-mod "^4.0.0"
+
+"@codemirror/lint@^6.0.0":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-6.2.1.tgz#654581d8cc293c315ecfa5c9d61d78c52bbd9ccd"
+  integrity sha512-y1muai5U/uUPAGRyHMx9mHuHLypPcHWxzlZGknp/U5Mdb5Ol8Q5ZLp67UqyTbNFJJ3unVxZ8iX3g1fMN79S1JQ==
+  dependencies:
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    crelt "^1.0.5"
+
+"@codemirror/state@^6.0.0", "@codemirror/state@^6.1.4", "@codemirror/state@^6.2.0":
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.2.0.tgz#a0fb08403ced8c2a68d1d0acee926bd20be922f2"
+  integrity sha512-69QXtcrsc3RYtOtd+GsvczJ319udtBf1PTrr2KbLWM/e2CXUPnh0Nz9AUo8WfhSQ7GeL8dPVNUmhQVgpmuaNGA==
+
+"@codemirror/theme-one-dark@^6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz#fcef9f9cfc17a07836cb7da17c9f6d7231064df8"
+  integrity sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/highlight" "^1.0.0"
+
+"@codemirror/view@^6.0.0", "@codemirror/view@^6.11.2", "@codemirror/view@^6.6.0":
+  version "6.11.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.11.2.tgz#964a746119e6d07c75fddecaf90cb463ccf59f71"
+  integrity sha512-AzxJ9Aub6ubBvoPBGvjcd4zITqcBBiLpJ89z0ZjnphOHncbvUvQcb9/WMVGpuwTT95+jW4knkH6gFIy0oLdaUQ==
+  dependencies:
+    "@codemirror/state" "^6.1.4"
+    style-mod "^4.0.0"
+    w3c-keyname "^2.2.4"
+
 "@colors/colors@1.5.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
@@ -2513,6 +2591,16 @@
   resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340"
   integrity sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==
 
+"@ioredis/as-callback@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@ioredis/as-callback/-/as-callback-3.0.0.tgz#b96c9b05e6701e85ec6a5e62fa254071b0aec97f"
+  integrity sha512-Kqv1rZ3WbgOrS+hgzJ5xG5WQuhvzzSTRYvNeyPMLOAM78MHSnuKI20JeJGbpuAt//LCuP0vsexZcorqW7kWhJg==
+
+"@ioredis/commands@^1.1.1", "@ioredis/commands@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@ioredis/commands/-/commands-1.2.0.tgz#6d61b3097470af1fdbbe622795b8921d42018e11"
+  integrity sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg==
+
 "@isaacs/string-locale-compare@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@isaacs/string-locale-compare/-/string-locale-compare-1.1.0.tgz#291c227e93fd407a96ecd59879a35809120e432b"
@@ -3470,7 +3558,7 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.13", "@jridgewell/trace-mapping@^0.3.14", "@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
+"@jridgewell/trace-mapping@^0.3.12", "@jridgewell/trace-mapping@^0.3.13", "@jridgewell/trace-mapping@^0.3.17", "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.17"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz#793041277af9073b0951a7fe0f0d8c4c98c36985"
   integrity sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==
@@ -3531,6 +3619,33 @@
     validate-npm-package-name "^4.0.0"
     yargs-parser "20.2.4"
 
+"@lezer/common@^1.0.0":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.0.2.tgz#8fb9b86bdaa2ece57e7d59e5ffbcb37d71815087"
+  integrity sha512-SVgiGtMnMnW3ActR8SXgsDhw7a0w0ChHSYAyAUxxrOiJ1OqYWEKk/xJd84tTSPo1mo6DXLObAJALNnd0Hrv7Ng==
+
+"@lezer/highlight@^1.0.0", "@lezer/highlight@^1.1.3":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.1.4.tgz#98ed821e89f72981b7ba590474e6ee86c8185619"
+  integrity sha512-IECkFmw2l7sFcYXrV8iT9GeY4W0fU4CxX0WMwhmhMIVjoDdD1Hr6q3G2NqVtLg/yVe5n7i4menG3tJ2r4eCrPQ==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
+"@lezer/javascript@^1.0.0":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@lezer/javascript/-/javascript-1.4.3.tgz#f59e764a0578184c6fb86abb5279a9679777c3ba"
+  integrity sha512-k7Eo9z9B1supZ5cCD4ilQv/RZVN30eUQL+gGbr6ybrEY3avBAL5MDiYi2aa23Aj0A79ry4rJRvPAwE2TM8bd+A==
+  dependencies:
+    "@lezer/highlight" "^1.1.3"
+    "@lezer/lr" "^1.3.0"
+
+"@lezer/lr@^1.0.0", "@lezer/lr@^1.3.0":
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-1.3.4.tgz#8795bf2ba4f69b998e8fb4b5a7c57ea68753474c"
+  integrity sha512-7o+e4og/QoC/6btozDPJqnzBhUaD1fMfmvnEKQO1wRRiTse1WxaJ3OMEXZJnkgT6HCcTVOctSoXK9jGJw2oe9g==
+  dependencies:
+    "@lezer/common" "^1.0.0"
+
 "@mapbox/node-pre-gyp@^1.0.0":
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.10.tgz#8e6735ccebbb1581e5a7e652244cadc8a844d03c"
@@ -3780,13 +3895,6 @@
   dependencies:
     "@nx/devkit" "16.2.2"
 
-"@nrwl/esbuild@16.2.1":
-  version "16.2.1"
-  resolved "https://registry.yarnpkg.com/@nrwl/esbuild/-/esbuild-16.2.1.tgz#83f8fbf2c7c541c220ccfff8be17a0e542aa7d01"
-  integrity sha512-qyNpdtPAzk2IhYmK5Qzn9gM1cvEtWFp6vJfgdbCKQngdqioYcJpGtdKhRm6Vcj8mFXF7zDgtUd2ecqJSiJU6VA==
-  dependencies:
-    "@nx/esbuild" "16.2.1"
-
 "@nrwl/js@16.2.1":
   version "16.2.1"
   resolved "https://registry.yarnpkg.com/@nrwl/js/-/js-16.2.1.tgz#6eacfa1f0658ca1e288da86b6c38be4846f2779a"
@@ -3839,21 +3947,6 @@
     tmp "~0.2.1"
     tslib "^2.3.0"
 
-"@nx/esbuild@16.2.1":
-  version "16.2.1"
-  resolved "https://registry.yarnpkg.com/@nx/esbuild/-/esbuild-16.2.1.tgz#157a408a617b5095ba1372ec27b03d6c9aa3b78c"
-  integrity sha512-jG4zsGc1EN+SfEBUky44+4cpj7M0Sf0v3pGWsw4hCOuBeLl6qW+eAcFypDXecDosS7ct/M2nEtlZP45IVDMZgQ==
-  dependencies:
-    "@nrwl/esbuild" "16.2.1"
-    "@nx/devkit" "16.2.1"
-    "@nx/js" "16.2.1"
-    chalk "^4.1.0"
-    dotenv "~10.0.0"
-    fast-glob "3.2.7"
-    fs-extra "^11.1.0"
-    tsconfig-paths "^4.1.2"
-    tslib "^2.3.0"
-
 "@nx/js@16.2.1":
   version "16.2.1"
   resolved "https://registry.yarnpkg.com/@nx/js/-/js-16.2.1.tgz#41c8c2d610131fa064bbb2b6bb25bd67ed06be79"
@@ -4632,6 +4725,15 @@
   resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553"
   integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==
 
+"@socket.io/redis-adapter@^8.2.1":
+  version "8.2.1"
+  resolved "https://registry.yarnpkg.com/@socket.io/redis-adapter/-/redis-adapter-8.2.1.tgz#36f75afc518d0e1fa4fa7c29e6d042f53ee7563b"
+  integrity sha512-6Dt7EZgGSBP0qvXeOKGx7NnSr2tPMbVDfDyL97zerZo+v69hMfL99skMCL3RKZlWVqLyRme2T0wcy3udHhtOsg==
+  dependencies:
+    debug "~4.3.1"
+    notepack.io "~3.0.1"
+    uid2 "1.0.0"
+
 "@spectrum-css/accordion@3.0.24":
   version "3.0.24"
   resolved "https://registry.yarnpkg.com/@spectrum-css/accordion/-/accordion-3.0.24.tgz#f89066c120c57b0cfc9aba66d60c39fc1cf69f74"
@@ -5484,11 +5586,6 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
-"@types/estree@^0.0.51":
-  version "0.0.51"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
-  integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
-
 "@types/express-serve-static-core@^4.17.33":
   version "4.17.33"
   resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.33.tgz#de35d30a9d637dc1450ad18dd583d75d5733d543"
@@ -5562,13 +5659,6 @@
   resolved "https://registry.yarnpkg.com/@types/http-errors/-/http-errors-2.0.1.tgz#20172f9578b225f6c7da63446f56d4ce108d5a65"
   integrity sha512-/K3ds8TRAfBvi5vfjuz8y6+GiAYBZ0x4tXv1Av6CWBWn0IlADc+ZX9pMq7oU0fNQPnBwIZl3rmeLp6SBApbxSQ==
 
-"@types/ioredis@4.28.0":
-  version "4.28.0"
-  resolved "https://registry.yarnpkg.com/@types/ioredis/-/ioredis-4.28.0.tgz#609b2ea0d91231df2dd7f67dd77436bc72584911"
-  integrity sha512-HSA/JQivJgV0e+353gvgu6WVoWvGRe0HyHOnAN2AvbVIhUlJBhNnnkP8gEEokrDWrxywrBkwo8NuDZ6TVPL9XA==
-  dependencies:
-    "@types/node" "*"
-
 "@types/ioredis@4.28.10":
   version "4.28.10"
   resolved "https://registry.yarnpkg.com/@types/ioredis/-/ioredis-4.28.10.tgz#40ceb157a4141088d1394bb87c98ed09a75a06ff"
@@ -6328,125 +6418,125 @@
     loupe "^2.3.6"
     pretty-format "^27.5.1"
 
-"@webassemblyjs/ast@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
-  integrity sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==
+"@webassemblyjs/ast@1.11.6", "@webassemblyjs/ast@^1.11.5":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.6.tgz#db046555d3c413f8966ca50a95176a0e2c642e24"
+  integrity sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==
   dependencies:
-    "@webassemblyjs/helper-numbers" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
+    "@webassemblyjs/helper-numbers" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
 
-"@webassemblyjs/floating-point-hex-parser@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz#f6c61a705f0fd7a6aecaa4e8198f23d9dc179e4f"
-  integrity sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==
+"@webassemblyjs/floating-point-hex-parser@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz#dacbcb95aff135c8260f77fa3b4c5fea600a6431"
+  integrity sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==
 
-"@webassemblyjs/helper-api-error@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz#1a63192d8788e5c012800ba6a7a46c705288fd16"
-  integrity sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==
+"@webassemblyjs/helper-api-error@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz#6132f68c4acd59dcd141c44b18cbebbd9f2fa768"
+  integrity sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==
 
-"@webassemblyjs/helper-buffer@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz#832a900eb444884cde9a7cad467f81500f5e5ab5"
-  integrity sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==
+"@webassemblyjs/helper-buffer@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.6.tgz#b66d73c43e296fd5e88006f18524feb0f2c7c093"
+  integrity sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==
 
-"@webassemblyjs/helper-numbers@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz#64d81da219fbbba1e3bd1bfc74f6e8c4e10a62ae"
-  integrity sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==
+"@webassemblyjs/helper-numbers@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz#cbce5e7e0c1bd32cf4905ae444ef64cea919f1b5"
+  integrity sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==
   dependencies:
-    "@webassemblyjs/floating-point-hex-parser" "1.11.1"
-    "@webassemblyjs/helper-api-error" "1.11.1"
+    "@webassemblyjs/floating-point-hex-parser" "1.11.6"
+    "@webassemblyjs/helper-api-error" "1.11.6"
     "@xtuc/long" "4.2.2"
 
-"@webassemblyjs/helper-wasm-bytecode@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz#f328241e41e7b199d0b20c18e88429c4433295e1"
-  integrity sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==
+"@webassemblyjs/helper-wasm-bytecode@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz#bb2ebdb3b83aa26d9baad4c46d4315283acd51e9"
+  integrity sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==
 
-"@webassemblyjs/helper-wasm-section@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz#21ee065a7b635f319e738f0dd73bfbda281c097a"
-  integrity sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==
+"@webassemblyjs/helper-wasm-section@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.6.tgz#ff97f3863c55ee7f580fd5c41a381e9def4aa577"
+  integrity sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==
   dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-buffer" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-    "@webassemblyjs/wasm-gen" "1.11.1"
+    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-buffer" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/wasm-gen" "1.11.6"
 
-"@webassemblyjs/ieee754@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz#963929e9bbd05709e7e12243a099180812992614"
-  integrity sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==
+"@webassemblyjs/ieee754@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz#bb665c91d0b14fffceb0e38298c329af043c6e3a"
+  integrity sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==
   dependencies:
     "@xtuc/ieee754" "^1.2.0"
 
-"@webassemblyjs/leb128@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.11.1.tgz#ce814b45574e93d76bae1fb2644ab9cdd9527aa5"
-  integrity sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==
+"@webassemblyjs/leb128@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.11.6.tgz#70e60e5e82f9ac81118bc25381a0b283893240d7"
+  integrity sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==
   dependencies:
     "@xtuc/long" "4.2.2"
 
-"@webassemblyjs/utf8@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.11.1.tgz#d1f8b764369e7c6e6bae350e854dec9a59f0a3ff"
-  integrity sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==
+"@webassemblyjs/utf8@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.11.6.tgz#90f8bc34c561595fe156603be7253cdbcd0fab5a"
+  integrity sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==
 
-"@webassemblyjs/wasm-edit@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz#ad206ebf4bf95a058ce9880a8c092c5dec8193d6"
-  integrity sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==
+"@webassemblyjs/wasm-edit@^1.11.5":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.6.tgz#c72fa8220524c9b416249f3d94c2958dfe70ceab"
+  integrity sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==
   dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-buffer" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-    "@webassemblyjs/helper-wasm-section" "1.11.1"
-    "@webassemblyjs/wasm-gen" "1.11.1"
-    "@webassemblyjs/wasm-opt" "1.11.1"
-    "@webassemblyjs/wasm-parser" "1.11.1"
-    "@webassemblyjs/wast-printer" "1.11.1"
+    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-buffer" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/helper-wasm-section" "1.11.6"
+    "@webassemblyjs/wasm-gen" "1.11.6"
+    "@webassemblyjs/wasm-opt" "1.11.6"
+    "@webassemblyjs/wasm-parser" "1.11.6"
+    "@webassemblyjs/wast-printer" "1.11.6"
 
-"@webassemblyjs/wasm-gen@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz#86c5ea304849759b7d88c47a32f4f039ae3c8f76"
-  integrity sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==
+"@webassemblyjs/wasm-gen@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.6.tgz#fb5283e0e8b4551cc4e9c3c0d7184a65faf7c268"
+  integrity sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==
   dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-    "@webassemblyjs/ieee754" "1.11.1"
-    "@webassemblyjs/leb128" "1.11.1"
-    "@webassemblyjs/utf8" "1.11.1"
+    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/ieee754" "1.11.6"
+    "@webassemblyjs/leb128" "1.11.6"
+    "@webassemblyjs/utf8" "1.11.6"
 
-"@webassemblyjs/wasm-opt@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz#657b4c2202f4cf3b345f8a4c6461c8c2418985f2"
-  integrity sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==
+"@webassemblyjs/wasm-opt@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.6.tgz#d9a22d651248422ca498b09aa3232a81041487c2"
+  integrity sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==
   dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-buffer" "1.11.1"
-    "@webassemblyjs/wasm-gen" "1.11.1"
-    "@webassemblyjs/wasm-parser" "1.11.1"
+    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-buffer" "1.11.6"
+    "@webassemblyjs/wasm-gen" "1.11.6"
+    "@webassemblyjs/wasm-parser" "1.11.6"
 
-"@webassemblyjs/wasm-parser@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz#86ca734534f417e9bd3c67c7a1c75d8be41fb199"
-  integrity sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==
+"@webassemblyjs/wasm-parser@1.11.6", "@webassemblyjs/wasm-parser@^1.11.5":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.6.tgz#bb85378c527df824004812bbdb784eea539174a1"
+  integrity sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==
   dependencies:
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/helper-api-error" "1.11.1"
-    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
-    "@webassemblyjs/ieee754" "1.11.1"
-    "@webassemblyjs/leb128" "1.11.1"
-    "@webassemblyjs/utf8" "1.11.1"
+    "@webassemblyjs/ast" "1.11.6"
+    "@webassemblyjs/helper-api-error" "1.11.6"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.6"
+    "@webassemblyjs/ieee754" "1.11.6"
+    "@webassemblyjs/leb128" "1.11.6"
+    "@webassemblyjs/utf8" "1.11.6"
 
-"@webassemblyjs/wast-printer@1.11.1":
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz#d0c73beda8eec5426f10ae8ef55cee5e7084c2f0"
-  integrity sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==
+"@webassemblyjs/wast-printer@1.11.6":
+  version "1.11.6"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.11.6.tgz#a7bf8dd7e362aeb1668ff43f35cb849f188eff20"
+  integrity sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==
   dependencies:
-    "@webassemblyjs/ast" "1.11.1"
+    "@webassemblyjs/ast" "1.11.6"
     "@xtuc/long" "4.2.2"
 
 "@webpack-cli/configtest@^1.2.0":
@@ -6601,10 +6691,10 @@ acorn-globals@^7.0.0:
     acorn "^8.1.0"
     acorn-walk "^8.0.2"
 
-acorn-import-assertions@^1.7.6:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz#ba2b5939ce62c238db6d93d81c9b111b29b855e9"
-  integrity sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==
+acorn-import-assertions@^1.9.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz#507276249d684797c84e0734ef84860334cfb1ac"
+  integrity sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==
 
 acorn-jsx@^5.2.0, acorn-jsx@^5.3.1:
   version "5.3.2"
@@ -9157,6 +9247,11 @@ create-require@^1.1.0:
   resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
   integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
 
+crelt@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.5.tgz#57c0d52af8c859e354bace1883eb2e1eb182bb94"
+  integrity sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==
+
 cron-parser@^4.2.1:
   version "4.7.1"
   resolved "https://registry.yarnpkg.com/cron-parser/-/cron-parser-4.7.1.tgz#1e325a6a18e797a634ada1e2599ece0b6b5ed177"
@@ -10595,10 +10690,10 @@ engine.io@~6.4.1:
     engine.io-parser "~5.0.3"
     ws "~8.11.0"
 
-enhanced-resolve@^5.10.0:
-  version "5.12.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz#300e1c90228f5b570c4d35babf263f6da7155634"
-  integrity sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==
+enhanced-resolve@^5.14.1:
+  version "5.14.1"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.14.1.tgz#de684b6803724477a4af5d74ccae5de52c25f6b3"
+  integrity sha512-Vklwq2vDKtl0y/vtwjSesgJ5MYS7Etuk5txS8VdKL4AOS1aUlD96zqIfsOSLQsdv3xgMRbtkWM8eG9XDfKUPow==
   dependencies:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
@@ -10767,10 +10862,10 @@ es-get-iterator@^1.1.2:
     isarray "^2.0.5"
     stop-iteration-iterator "^1.0.0"
 
-es-module-lexer@^0.9.0:
-  version "0.9.3"
-  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19"
-  integrity sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==
+es-module-lexer@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.2.1.tgz#ba303831f63e6a394983fde2f97ad77b22324527"
+  integrity sha512-9978wrXM50Y4rTMmW5kXIC09ZdXQZqkE4mxhwkd8VbzsGkXGPgV4zWuqQJgCEzYngdo2dYDa0l8xhX4fkSwJSg==
 
 es-set-tostringtag@^2.0.1:
   version "2.0.1"
@@ -11864,7 +11959,7 @@ fecha@^4.2.0:
   resolved "https://registry.yarnpkg.com/fecha/-/fecha-4.2.3.tgz#4d9ccdbc61e8629b259fdca67e65891448d569fd"
   integrity sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==
 
-fengari-interop@^0.1.2, fengari-interop@^0.1.3:
+fengari-interop@^0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/fengari-interop/-/fengari-interop-0.1.3.tgz#3ad37a90e7430b69b365441e9fc0ba168942a146"
   integrity sha512-EtZ+oTu3kEwVJnoymFPBVLIbQcCoy9uWCVnMA6h3M/RqHkUBsLYp29+RRHf9rKr6GwjubWREU1O7RretFIXjHw==
@@ -13901,39 +13996,28 @@ invert-kv@^2.0.0:
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02"
   integrity sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==
 
-ioredis-mock@5.8.0:
-  version "5.8.0"
-  resolved "https://registry.yarnpkg.com/ioredis-mock/-/ioredis-mock-5.8.0.tgz#99d3f0fe58419c2ff15c81cb4e13709aff8f2a44"
-  integrity sha512-PokVyNC/d3qaAyHAdf+Ex4HHBe7GdaSGrcn8pP7ran+pVmSrJ6Aofwm7Od5bQ5JtjDSiylEtIoZzEPYIjUKMHA==
-  dependencies:
-    fengari "^0.1.4"
-    fengari-interop "^0.1.2"
-    lodash "^4.17.21"
-    standard-as-callback "^2.1.0"
-
-ioredis-mock@7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/ioredis-mock/-/ioredis-mock-7.2.0.tgz#48f006c07ef7f1f93f75e60d8f9035fa46c4ef0a"
-  integrity sha512-xzABBG3NhfDBGxH1KX9n6vs7WGNn9lhcxMT3b+vjynVImxlUV+vOXU+tjGzSUnGmx4IYllA8RqbXN8z6ROMPVA==
+ioredis-mock@8.7.0:
+  version "8.7.0"
+  resolved "https://registry.yarnpkg.com/ioredis-mock/-/ioredis-mock-8.7.0.tgz#9877a85e0d233e1b49123d1c6e320df01e9a1d36"
+  integrity sha512-BJcSjkR3sIMKbH93fpFzwlWi/jl1kd5I3vLvGQxnJ/W/6bD2ksrxnyQN186ljAp3Foz4p1ivViDE3rZeKEAluA==
   dependencies:
+    "@ioredis/as-callback" "^3.0.0"
+    "@ioredis/commands" "^1.2.0"
     fengari "^0.1.4"
     fengari-interop "^0.1.3"
-    redis-commands "^1.7.0"
-    standard-as-callback "^2.1.0"
+    semver "^7.3.8"
 
-ioredis@4.28.0:
-  version "4.28.0"
-  resolved "https://registry.yarnpkg.com/ioredis/-/ioredis-4.28.0.tgz#5a2be3f37ff2075e2332f280eaeb02ab4d9ff0d3"
-  integrity sha512-I+zkeeWp3XFgPT2CtJKxvaF5FjGBGt4yGYljRjQecdQKteThuAsKqffeF1lgHVlYnuNeozRbPOCDNZ7tDWPeig==
+ioredis@5.3.2:
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/ioredis/-/ioredis-5.3.2.tgz#9139f596f62fc9c72d873353ac5395bcf05709f7"
+  integrity sha512-1DKMMzlIHM02eBBVOFQ1+AolGjs6+xEcM4PDL7NqOS6szq7H9jSaEkIUH6/a5Hl241LzW6JLSiAbNvTQjUupUA==
   dependencies:
+    "@ioredis/commands" "^1.1.1"
     cluster-key-slot "^1.1.0"
-    debug "^4.3.1"
-    denque "^1.1.0"
+    debug "^4.3.4"
+    denque "^2.1.0"
     lodash.defaults "^4.2.0"
-    lodash.flatten "^4.4.0"
     lodash.isarguments "^3.1.0"
-    p-map "^2.1.0"
-    redis-commands "1.7.0"
     redis-errors "^1.2.0"
     redis-parser "^3.0.0"
     standard-as-callback "^2.1.0"
@@ -18665,6 +18749,11 @@ normalize-url@^6.0.1:
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a"
   integrity sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==
 
+notepack.io@~3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/notepack.io/-/notepack.io-3.0.1.tgz#2c2c9de1bd4e64a79d34e33c413081302a0d4019"
+  integrity sha512-TKC/8zH5pXIAMVQio2TvVDTtPRX+DJPHDqjRbxogtFiByHyzKmy96RA0JtCQJ+WouyyL4A10xomQzgbUT+1jCg==
+
 npm-bundled@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.2.tgz#944c78789bd739035b70baa2ca5cc32b8d860bc1"
@@ -19051,6 +19140,13 @@ object-keys@~0.4.0:
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-0.4.0.tgz#28a6aae7428dd2c3a92f3d95f21335dd204e0336"
   integrity sha512-ncrLw+X55z7bkl5PnUvHwFK9FcGuFYo9gtjws2XtSzL+aZ8tm830P60WJ0dSmFVaSalWieW5MD7kEdnXda9yJw==
 
+object-sizeof@2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/object-sizeof/-/object-sizeof-2.6.1.tgz#1e2b6a01d182c268dbb07ee3403f539de45f63d3"
+  integrity sha512-a7VJ1Zx7ZuHceKwjgfsSqzV/X0PVGvpZz7ho3Dn4Cs0LLcR5e5WuV+gsbizmplD8s0nAXMJmckKB2rkSiPm/Gg==
+  dependencies:
+    buffer "^6.0.3"
+
 object-visit@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
@@ -21655,7 +21751,7 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
-redis-commands@1.7.0, redis-commands@^1.7.0:
+redis-commands@1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/redis-commands/-/redis-commands-1.7.0.tgz#15a6fea2d58281e27b1cd1acfb4b293e278c3a89"
   integrity sha512-nJWqw3bTFy21hX/CPKHth6sfhZbdiHP6bTawSgQBlKOVRG7EZkfHbbHwQJnrE4vsQf0CMNE+3gJ4Fmm16vdVlQ==
@@ -22427,7 +22523,7 @@ saxes@^6.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
-schema-utils@^3.1.0, schema-utils@^3.1.1:
+schema-utils@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
   integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==
@@ -22436,6 +22532,15 @@ schema-utils@^3.1.0, schema-utils@^3.1.1:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+schema-utils@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.2.tgz#36c10abca6f7577aeae136c804b0c741edeadc99"
+  integrity sha512-pvjEHOgWc9OWA/f/DE3ohBWTD6EleVLf7iFUkoSwAxttdBhB9QUebQgxER2kWueOvRJXPHNnyrvvh9eZINB8Eg==
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
 scim-patch@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/scim-patch/-/scim-patch-0.7.0.tgz#3f6d94256c07be415a74a49c0ff48dc91e4e0219"
@@ -22588,7 +22693,7 @@ serialize-javascript@^4.0.0:
   dependencies:
     randombytes "^2.1.0"
 
-serialize-javascript@^6.0.0:
+serialize-javascript@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.1.tgz#b206efb27c3da0b0ab6b52f48d170b7996458e5c"
   integrity sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==
@@ -22940,7 +23045,7 @@ socket.io-adapter@~2.5.2:
   dependencies:
     ws "~8.11.0"
 
-socket.io-client@^4.5.1, socket.io-client@^4.6.1:
+socket.io-client@^4.6.1:
   version "4.6.1"
   resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.6.1.tgz#80d97d5eb0feca448a0fb6d69a7b222d3d547eab"
   integrity sha512-5UswCV6hpaRsNg5kkEHVcbBIXEYoVbMQaHJBXJCyEQ+CiFPV1NIOY0XOFWG4XR4GZcB8Kn6AsRs/9cy9TbqVMQ==
@@ -22951,9 +23056,9 @@ socket.io-client@^4.5.1, socket.io-client@^4.6.1:
     socket.io-parser "~4.2.1"
 
 socket.io-parser@~4.2.1:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.2.tgz#1dd384019e25b7a3d374877f492ab34f2ad0d206"
-  integrity sha512-DJtziuKypFkMMHCm2uIshOYC7QaylbtzQwiMYDuCKy3OPkjLzu4B2vAhTlqipRHHzrI0NJeBAizTK7X+6m1jVw==
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.3.tgz#926bcc6658e2ae0883dc9dee69acbdc76e4e3667"
+  integrity sha512-JMafRntWVO2DCJimKsRTh/wnqVvO4hrfwOqtO7f+uzwsQMuxO6VwImtYxaQ+ieoyshWOTJyV0fA21lccEXRPpQ==
   dependencies:
     "@socket.io/component-emitter" "~3.1.0"
     debug "~4.3.1"
@@ -23685,6 +23790,11 @@ style-loader@^3.3.1:
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
   integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
 
+style-mod@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.0.3.tgz#136c4abc905f82a866a18b39df4dc08ec762b1ad"
+  integrity sha512-78Jv8kYJdjbvRwwijtCevYADfsI0lGzYJe4mMFdceO8l75DFFDoqBhR1jVDicDRRaX4//g1u9wKeo+ztc2h1Rw==
+
 stylehacks@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.1.tgz#7934a34eb59d7152149fa69d6e9e56f2fc34bcc9"
@@ -24110,18 +24220,18 @@ terminal-link@^2.0.0:
     ansi-escapes "^4.2.1"
     supports-hyperlinks "^2.0.0"
 
-terser-webpack-plugin@^5.1.3:
-  version "5.3.6"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.6.tgz#5590aec31aa3c6f771ce1b1acca60639eab3195c"
-  integrity sha512-kfLFk+PoLUQIbLmB1+PZDMRSZS99Mp+/MHqDNmMA6tOItzRt+Npe3E+fsMs5mfcM0wCtrrdU387UnV+vnSffXQ==
+terser-webpack-plugin@^5.3.7:
+  version "5.3.9"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.9.tgz#832536999c51b46d468067f9e37662a3b96adfe1"
+  integrity sha512-ZuXsqE07EcggTWQjXUj+Aot/OMcD0bMKGgF63f7UxYcu5/AJF53aIpK1YoP5xR9l6s/Hy2b+t1AM0bLNPRuhwA==
   dependencies:
-    "@jridgewell/trace-mapping" "^0.3.14"
+    "@jridgewell/trace-mapping" "^0.3.17"
     jest-worker "^27.4.5"
     schema-utils "^3.1.1"
-    serialize-javascript "^6.0.0"
-    terser "^5.14.1"
+    serialize-javascript "^6.0.1"
+    terser "^5.16.8"
 
-terser@^5.0.0, terser@^5.14.1:
+terser@^5.0.0:
   version "5.16.5"
   resolved "https://registry.yarnpkg.com/terser/-/terser-5.16.5.tgz#1c285ca0655f467f92af1bbab46ab72d1cb08e5a"
   integrity sha512-qcwfg4+RZa3YvlFh0qjifnzBHjKGNbtDo9yivMqMFDy9Q6FSaQWSB/j1xKhsoUFJIqDOM3TsN6D5xbrMrFcHbg==
@@ -24131,6 +24241,16 @@ terser@^5.0.0, terser@^5.14.1:
     commander "^2.20.0"
     source-map-support "~0.5.20"
 
+terser@^5.16.8:
+  version "5.17.6"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.17.6.tgz#d810e75e1bb3350c799cd90ebefe19c9412c12de"
+  integrity sha512-V8QHcs8YuyLkLHsJO5ucyff1ykrLVsR4dNnS//L5Y3NiSXpbK1J+WMVUs67eI0KTxs9JtHhgEQpXQVHlHI92DQ==
+  dependencies:
+    "@jridgewell/source-map" "^0.3.2"
+    acorn "^8.5.0"
+    commander "^2.20.0"
+    source-map-support "~0.5.20"
+
 test-console@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/test-console/-/test-console-2.0.0.tgz#a279f7e2e148815224d8446ffa5208f0077d68fb"
@@ -24826,6 +24946,11 @@ uid2@0.0.x:
   resolved "https://registry.yarnpkg.com/uid2/-/uid2-0.0.4.tgz#033f3b1d5d32505f5ce5f888b9f3b667123c0a44"
   integrity sha512-IevTus0SbGwQzYh3+fRsAMTVVPOoIVufzacXcHPmdlle1jUpq7BRL+mw3dgeLanvGZdwwbWhRV6XrcFNdBmjWA==
 
+uid2@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/uid2/-/uid2-1.0.0.tgz#ef8d95a128d7c5c44defa1a3d052eecc17a06bfb"
+  integrity sha512-+I6aJUv63YAcY9n4mQreLUt0d4lvwkkopDNmpomkAUz0fAkEMV9pRWxN0EjhW1YfRhcuyHg2v3mwddCDW1+LFQ==
+
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
@@ -25372,6 +25497,11 @@ w3c-hr-time@^1.0.2:
   dependencies:
     browser-process-hrtime "^1.0.0"
 
+w3c-keyname@^2.2.4:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.6.tgz#8412046116bc16c5d73d4e612053ea10a189c85f"
+  integrity sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==
+
 w3c-xmlserializer@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz#3e7104a05b75146cc60f564380b7f683acf1020a"
@@ -25502,21 +25632,21 @@ webpack-sources@^3.2.3:
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
 webpack@^5.64.2:
-  version "5.75.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.75.0.tgz#1e440468647b2505860e94c9ff3e44d5b582c152"
-  integrity sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==
+  version "5.84.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.84.0.tgz#011115617668744aece87a9eb68534487d84de1a"
+  integrity sha512-XezNK3kwJq6IyeoZmZ1uEqQs+42nTqIi4jYM/YjLwaJedUC1N3bwnCC0+UcnHJPfqWX0kGrQnMIvZZyWYaIZrA==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
-    "@types/estree" "^0.0.51"
-    "@webassemblyjs/ast" "1.11.1"
-    "@webassemblyjs/wasm-edit" "1.11.1"
-    "@webassemblyjs/wasm-parser" "1.11.1"
+    "@types/estree" "^1.0.0"
+    "@webassemblyjs/ast" "^1.11.5"
+    "@webassemblyjs/wasm-edit" "^1.11.5"
+    "@webassemblyjs/wasm-parser" "^1.11.5"
     acorn "^8.7.1"
-    acorn-import-assertions "^1.7.6"
+    acorn-import-assertions "^1.9.0"
     browserslist "^4.14.5"
     chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.10.0"
-    es-module-lexer "^0.9.0"
+    enhanced-resolve "^5.14.1"
+    es-module-lexer "^1.2.1"
     eslint-scope "5.1.1"
     events "^3.2.0"
     glob-to-regexp "^0.4.1"
@@ -25525,9 +25655,9 @@ webpack@^5.64.2:
     loader-runner "^4.2.0"
     mime-types "^2.1.27"
     neo-async "^2.6.2"
-    schema-utils "^3.1.0"
+    schema-utils "^3.1.2"
     tapable "^2.1.1"
-    terser-webpack-plugin "^5.1.3"
+    terser-webpack-plugin "^5.3.7"
     watchpack "^2.4.0"
     webpack-sources "^3.2.3"