diff --git a/lerna.json b/lerna.json
index 5b551ea7cf..030dde848c 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "3.7.2",
+  "version": "3.8.1",
   "npmClient": "yarn",
   "concurrency": 20,
   "command": {
diff --git a/packages/backend-core/package.json b/packages/backend-core/package.json
index 7510655ed7..1e23672ad7 100644
--- a/packages/backend-core/package.json
+++ b/packages/backend-core/package.json
@@ -69,7 +69,7 @@
     "rotating-file-stream": "3.1.0",
     "sanitize-s3-objectkey": "0.0.1",
     "semver": "^7.5.4",
-    "tar-fs": "2.1.1",
+    "tar-fs": "2.1.2",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
diff --git a/packages/backend-core/src/cache/writethrough.ts b/packages/backend-core/src/cache/writethrough.ts
index cd7409ca15..5a1d9f6a14 100644
--- a/packages/backend-core/src/cache/writethrough.ts
+++ b/packages/backend-core/src/cache/writethrough.ts
@@ -96,6 +96,24 @@ async function get<T extends Document>(db: Database, id: string): Promise<T> {
   return cacheItem.doc
 }
 
+async function tryGet<T extends Document>(
+  db: Database,
+  id: string
+): Promise<T | null> {
+  const cache = await getCache()
+  const cacheKey = makeCacheKey(db, id)
+  let cacheItem: CacheItem<T> | null = await cache.get(cacheKey)
+  if (!cacheItem) {
+    const doc = await db.tryGet<T>(id)
+    if (!doc) {
+      return null
+    }
+    cacheItem = makeCacheItem(doc)
+    await cache.store(cacheKey, cacheItem)
+  }
+  return cacheItem.doc
+}
+
 async function remove(db: Database, docOrId: any, rev?: any): Promise<void> {
   const cache = await getCache()
   if (!docOrId) {
@@ -123,10 +141,17 @@ export class Writethrough {
     return put(this.db, doc, writeRateMs)
   }
 
+  /**
+   * @deprecated use `tryGet` instead
+   */
   async get<T extends Document>(id: string) {
     return get<T>(this.db, id)
   }
 
+  async tryGet<T extends Document>(id: string) {
+    return tryGet<T>(this.db, id)
+  }
+
   async remove(docOrId: any, rev?: any) {
     return remove(this.db, docOrId, rev)
   }
diff --git a/packages/backend-core/src/configs/configs.ts b/packages/backend-core/src/configs/configs.ts
index f184bf87df..3747fff82e 100644
--- a/packages/backend-core/src/configs/configs.ts
+++ b/packages/backend-core/src/configs/configs.ts
@@ -47,6 +47,9 @@ export async function getConfig<T extends Config>(
 export async function save(
   config: Config
 ): Promise<{ id: string; rev: string }> {
+  if (!config._id) {
+    config._id = generateConfigID(config.type)
+  }
   const db = context.getGlobalDB()
   return db.put(config)
 }
diff --git a/packages/backend-core/src/configs/tests/configs.spec.ts b/packages/backend-core/src/configs/tests/configs.spec.ts
index 2c6a1948ec..5b5186109c 100644
--- a/packages/backend-core/src/configs/tests/configs.spec.ts
+++ b/packages/backend-core/src/configs/tests/configs.spec.ts
@@ -12,7 +12,6 @@ describe("configs", () => {
 
   const setDbPlatformUrl = async (dbUrl: string) => {
     const settingsConfig = {
-      _id: configs.generateConfigID(ConfigType.SETTINGS),
       type: ConfigType.SETTINGS,
       config: {
         platformUrl: dbUrl,
diff --git a/packages/backend-core/src/constants/db.ts b/packages/backend-core/src/constants/db.ts
index 3085b91ef1..28d389e6ba 100644
--- a/packages/backend-core/src/constants/db.ts
+++ b/packages/backend-core/src/constants/db.ts
@@ -60,6 +60,11 @@ export const StaticDatabases = {
   SCIM_LOGS: {
     name: "scim-logs",
   },
+  // Used by self-host users making use of Budicloud resources. Introduced when
+  // we started letting self-host users use Budibase AI in the cloud.
+  SELF_HOST_CLOUD: {
+    name: "self-host-cloud",
+  },
 }
 
 export const APP_PREFIX = prefixed(DocumentType.APP)
diff --git a/packages/backend-core/src/context/mainContext.ts b/packages/backend-core/src/context/mainContext.ts
index 8e0c71ff18..e701f111aa 100644
--- a/packages/backend-core/src/context/mainContext.ts
+++ b/packages/backend-core/src/context/mainContext.ts
@@ -157,6 +157,33 @@ export async function doInTenant<T>(
   return newContext(updates, task)
 }
 
+// We allow self-host licensed users to make use of some Budicloud services
+// (e.g. Budibase AI). When they do this, they use their license key as an API
+// key. We use that license key to identify the tenant ID, and we set the
+// context to be self-host using cloud. This affects things like where their
+// quota documents get stored (because we want to avoid creating a new global
+// DB for each self-host tenant).
+export async function doInSelfHostTenantUsingCloud<T>(
+  tenantId: string,
+  task: () => T
+): Promise<T> {
+  const updates = { tenantId, isSelfHostUsingCloud: true }
+  return newContext(updates, task)
+}
+
+export function isSelfHostUsingCloud() {
+  const context = Context.get()
+  return !!context?.isSelfHostUsingCloud
+}
+
+export function getSelfHostCloudDB() {
+  const context = Context.get()
+  if (!context || !context.isSelfHostUsingCloud) {
+    throw new Error("Self-host cloud DB not found")
+  }
+  return getDB(StaticDatabases.SELF_HOST_CLOUD.name)
+}
+
 export async function doInAppContext<T>(
   appId: string,
   task: () => T
@@ -325,6 +352,11 @@ export function getGlobalDB(): Database {
   if (!context || (env.MULTI_TENANCY && !context.tenantId)) {
     throw new Error("Global DB not found")
   }
+  if (context.isSelfHostUsingCloud) {
+    throw new Error(
+      "Global DB not found - self-host users using cloud don't have a global DB"
+    )
+  }
   return getDB(baseGlobalDBName(context?.tenantId))
 }
 
@@ -344,6 +376,11 @@ export function getAppDB(opts?: any): Database {
   if (!appId) {
     throw new Error("Unable to retrieve app DB - no app ID.")
   }
+  if (isSelfHostUsingCloud()) {
+    throw new Error(
+      "App DB not found - self-host users using cloud don't have app DBs"
+    )
+  }
   return getDB(appId, opts)
 }
 
diff --git a/packages/backend-core/src/context/types.ts b/packages/backend-core/src/context/types.ts
index 23598b951e..adee495e60 100644
--- a/packages/backend-core/src/context/types.ts
+++ b/packages/backend-core/src/context/types.ts
@@ -5,6 +5,7 @@ import { GoogleSpreadsheet } from "google-spreadsheet"
 // keep this out of Budibase types, don't want to expose context info
 export type ContextMap = {
   tenantId?: string
+  isSelfHostUsingCloud?: boolean
   appId?: string
   identity?: IdentityContext
   environmentVariables?: Record<string, string>
diff --git a/packages/backend-core/src/sql/sql.ts b/packages/backend-core/src/sql/sql.ts
index 937f88c846..fa4742f23f 100644
--- a/packages/backend-core/src/sql/sql.ts
+++ b/packages/backend-core/src/sql/sql.ts
@@ -6,6 +6,7 @@ import {
   isInvalidISODateString,
   isValidFilter,
   isValidISODateString,
+  isValidTime,
   sqlLog,
   validateManyToMany,
 } from "./utils"
@@ -417,11 +418,17 @@ class InternalBuilder {
     }
 
     if (typeof input === "string" && schema.type === FieldType.DATETIME) {
-      if (isInvalidISODateString(input)) {
-        return null
-      }
-      if (isValidISODateString(input)) {
-        return new Date(input.trim())
+      if (schema.timeOnly) {
+        if (!isValidTime(input)) {
+          return null
+        }
+      } else {
+        if (isInvalidISODateString(input)) {
+          return null
+        }
+        if (isValidISODateString(input)) {
+          return new Date(input.trim())
+        }
       }
     }
     return input
diff --git a/packages/backend-core/src/sql/tests/utils.spec.ts b/packages/backend-core/src/sql/tests/utils.spec.ts
new file mode 100644
index 0000000000..819a0aa581
--- /dev/null
+++ b/packages/backend-core/src/sql/tests/utils.spec.ts
@@ -0,0 +1,35 @@
+import { isValidISODateString, isInvalidISODateString } from "../utils"
+
+describe("ISO date string validity checks", () => {
+  it("accepts a valid ISO date string without a time", () => {
+    const str = "2013-02-01"
+    const valid = isValidISODateString(str)
+    const invalid = isInvalidISODateString(str)
+    expect(valid).toEqual(true)
+    expect(invalid).toEqual(false)
+  })
+
+  it("accepts a valid ISO date string with a time", () => {
+    const str = "2013-02-01T01:23:45Z"
+    const valid = isValidISODateString(str)
+    const invalid = isInvalidISODateString(str)
+    expect(valid).toEqual(true)
+    expect(invalid).toEqual(false)
+  })
+
+  it("accepts a valid ISO date string with a time and millis", () => {
+    const str = "2013-02-01T01:23:45.678Z"
+    const valid = isValidISODateString(str)
+    const invalid = isInvalidISODateString(str)
+    expect(valid).toEqual(true)
+    expect(invalid).toEqual(false)
+  })
+
+  it("rejects an invalid ISO date string", () => {
+    const str = "2013-523-814T444:22:11Z"
+    const valid = isValidISODateString(str)
+    const invalid = isInvalidISODateString(str)
+    expect(valid).toEqual(false)
+    expect(invalid).toEqual(true)
+  })
+})
diff --git a/packages/backend-core/src/sql/utils.ts b/packages/backend-core/src/sql/utils.ts
index 33f51b23ac..144a2f39ab 100644
--- a/packages/backend-core/src/sql/utils.ts
+++ b/packages/backend-core/src/sql/utils.ts
@@ -14,7 +14,7 @@ import environment from "../environment"
 const DOUBLE_SEPARATOR = `${SEPARATOR}${SEPARATOR}`
 const ROW_ID_REGEX = /^\[.*]$/g
 const ENCODED_SPACE = encodeURIComponent(" ")
-const ISO_DATE_REGEX = /^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}.\d{3}Z)?$/
+const ISO_DATE_REGEX = /^\d{4}-\d{2}-\d{2}(?:T\d{2}:\d{2}:\d{2}(?:.\d{3})?Z)?$/
 const TIME_REGEX = /^(?:\d{2}:)?(?:\d{2}:)(?:\d{2})$/
 
 export function isExternalTableID(tableId: string) {
@@ -142,17 +142,17 @@ export function breakRowIdField(_id: string | { _id: string }): any[] {
   }
 }
 
-export function isInvalidISODateString(str: string) {
+export function isValidISODateString(str: string) {
   const trimmedValue = str.trim()
   if (!ISO_DATE_REGEX.test(trimmedValue)) {
     return false
   }
-  let d = new Date(trimmedValue)
-  return isNaN(d.getTime())
+  const d = new Date(trimmedValue)
+  return !isNaN(d.getTime())
 }
 
-export function isValidISODateString(str: string) {
-  return ISO_DATE_REGEX.test(str.trim())
+export function isInvalidISODateString(str: string) {
+  return !isValidISODateString(str)
 }
 
 export function isValidFilter(value: any) {
diff --git a/packages/bbui/src/Form/Core/Select.svelte b/packages/bbui/src/Form/Core/Select.svelte
index 4a921f163c..115209054c 100644
--- a/packages/bbui/src/Form/Core/Select.svelte
+++ b/packages/bbui/src/Form/Core/Select.svelte
@@ -35,7 +35,7 @@
   export let footer: string | undefined = undefined
   export let open: boolean = false
   export let searchTerm: string | undefined = undefined
-  export let loading: boolean | undefined = undefined
+  export let loading: boolean | undefined = false
   export let onOptionMouseenter = () => {}
   export let onOptionMouseleave = () => {}
   export let customPopoverHeight: string | undefined = undefined
diff --git a/packages/bbui/src/Form/Core/TextArea.svelte b/packages/bbui/src/Form/Core/TextArea.svelte
index 30c1993f9b..15cc13a7fa 100644
--- a/packages/bbui/src/Form/Core/TextArea.svelte
+++ b/packages/bbui/src/Form/Core/TextArea.svelte
@@ -75,6 +75,7 @@
   class:is-disabled={disabled}
   class:is-focused={isFocused}
 >
+  <!-- We need to ignore prettier here as we want no whitespace -->
   <!-- prettier-ignore -->
   <textarea
     bind:this={textarea}
@@ -90,6 +91,7 @@
     on:blur
     on:keypress
   >{value || ""}</textarea>
+  <slot />
 </div>
 
 <style>
diff --git a/packages/bbui/src/Form/Core/TextField.svelte b/packages/bbui/src/Form/Core/TextField.svelte
index 5bb2774cdf..b6839c5558 100644
--- a/packages/bbui/src/Form/Core/TextField.svelte
+++ b/packages/bbui/src/Form/Core/TextField.svelte
@@ -114,6 +114,7 @@
     inputmode={getInputMode(type)}
     autocomplete={autocompleteValue}
   />
+  <slot />
 </div>
 
 <style>
diff --git a/packages/bbui/src/Form/Input.svelte b/packages/bbui/src/Form/Input.svelte
index 09500d649e..8e260a46fe 100644
--- a/packages/bbui/src/Form/Input.svelte
+++ b/packages/bbui/src/Form/Input.svelte
@@ -41,5 +41,7 @@
     on:blur
     on:focus
     on:keyup
-  />
+  >
+    <slot />
+  </TextField>
 </Field>
diff --git a/packages/bbui/src/Form/Select.svelte b/packages/bbui/src/Form/Select.svelte
index f5d843d3e8..3e7d4725e1 100644
--- a/packages/bbui/src/Form/Select.svelte
+++ b/packages/bbui/src/Form/Select.svelte
@@ -38,6 +38,7 @@
   export let compare: any = undefined
   export let onOptionMouseenter = () => {}
   export let onOptionMouseleave = () => {}
+  export let loading: boolean | undefined = false
 
   const dispatch = createEventDispatcher()
   const onChange = (e: CustomEvent<any>) => {
@@ -56,6 +57,7 @@
 <Field {helpText} {label} {labelPosition} {error} {tooltip}>
   <Select
     {quiet}
+    {loading}
     {disabled}
     {readonly}
     {value}
diff --git a/packages/bbui/src/Form/TextArea.svelte b/packages/bbui/src/Form/TextArea.svelte
index 92563cd8e2..403dc4d0dd 100644
--- a/packages/bbui/src/Form/TextArea.svelte
+++ b/packages/bbui/src/Form/TextArea.svelte
@@ -7,11 +7,13 @@
   export let label: string | undefined = undefined
   export let labelPosition = "above"
   export let placeholder: string | undefined = undefined
-  export let disabled = false
+  export let readonly: boolean = false
+  export let disabled: boolean = false
   export let error: string | undefined = undefined
   export let height: number | undefined = undefined
   export let minHeight: number | undefined = undefined
   export let helpText: string | undefined = undefined
+  export let updateOnChange: boolean = false
 
   let textarea: TextArea
   export function focus() {
@@ -33,11 +35,16 @@
   <TextArea
     bind:this={textarea}
     {disabled}
+    {readonly}
     {value}
     {placeholder}
     {height}
     {minHeight}
+    {updateOnChange}
     on:change={onChange}
     on:keypress
-  />
+    on:scrollable
+  >
+    <slot />
+  </TextArea>
 </Field>
diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
index 7fd1a2485f..4dd1cc983f 100644
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -10,7 +10,7 @@
   export let color: string | undefined = undefined
   export let hoverColor: string | undefined = undefined
   export let tooltip: string | undefined = undefined
-  export let tooltipPosition = TooltipPosition.Bottom
+  export let tooltipPosition: TooltipPosition = TooltipPosition.Bottom
   export let tooltipType = TooltipType.Default
   export let tooltipColor: string | undefined = undefined
   export let tooltipWrap: boolean = true
diff --git a/packages/bbui/src/helpers.ts b/packages/bbui/src/helpers.ts
index 330f381d53..10ccf4683d 100644
--- a/packages/bbui/src/helpers.ts
+++ b/packages/bbui/src/helpers.ts
@@ -211,9 +211,12 @@ const localeDateFormat = new Intl.DateTimeFormat()
 
 // Formats a dayjs date according to schema flags
 export const getDateDisplayValue = (
-  value: dayjs.Dayjs | null,
+  value: dayjs.Dayjs | string | null,
   { enableTime = true, timeOnly = false } = {}
 ): string => {
+  if (typeof value === "string") {
+    value = dayjs(value)
+  }
   if (!value?.isValid()) {
     return ""
   }
diff --git a/packages/builder/src/assets.d.ts b/packages/builder/src/assets.d.ts
new file mode 100644
index 0000000000..2315432dfa
--- /dev/null
+++ b/packages/builder/src/assets.d.ts
@@ -0,0 +1,9 @@
+declare module "*.png" {
+  const value: string
+  export default value
+}
+
+declare module "*.svg" {
+  const value: string
+  export default value
+}
diff --git a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
index 0b68d8e4b3..caad0d6ed2 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/DraggableCanvas.svelte
@@ -134,9 +134,6 @@
   // Size of the view port
   let viewDims = {}
 
-  // Edge around the draggable content
-  let contentDragPadding = 200
-
   // Auto scroll
   let scrollInterval
 
@@ -234,7 +231,7 @@
           : {}),
       }))
 
-      offsetX = offsetX - xBump
+      offsetX -= xBump
     } else if (e.ctrlKey || e.metaKey) {
       // Scale the content on scrolling
       let updatedScale
@@ -261,7 +258,7 @@
             }
           : {}),
       }))
-      offsetY = offsetY - yBump
+      offsetY -= yBump
     }
   }
 
@@ -335,8 +332,8 @@
                 scrollX: state.scrollX + xInterval,
                 scrollY: state.scrollY + yInterval,
               }))
-              offsetX = offsetX + xInterval
-              offsetY = offsetY + yInterval
+              offsetX += xInterval
+              offsetY += yInterval
             }
           }
 
@@ -488,22 +485,35 @@
   const viewToFocusEle = () => {
     if ($focusElement) {
       const viewWidth = viewDims.width
+      const viewHeight = viewDims.height
 
       // The amount to shift the content in order to center the trigger on load.
-      // The content is also padded with `contentDragPadding`
       // The sidebar offset factors into the left positioning of the content here.
       const targetX =
         contentWrap.getBoundingClientRect().x -
         $focusElement.x +
-        (viewWidth / 2 - $focusElement.width / 2)
+        (viewWidth - $focusElement.width) / 2
+
+      const targetY =
+        contentWrap.getBoundingClientRect().y -
+        $focusElement.y +
+        (viewHeight - $focusElement.height) / 2
 
       // Update the content position state
       // Shift the content up slightly to accommodate the padding
       contentPos.update(state => ({
         ...state,
         x: targetX,
-        y: -(contentDragPadding / 2),
+        y: Number.isInteger($focusElement.targetY)
+          ? $focusElement.targetY
+          : targetY,
       }))
+
+      // Be sure to set the initial offset correctly
+      offsetX = targetX
+      offsetY = Number.isInteger($focusElement.targetY)
+        ? $focusElement.targetY
+        : targetY
     }
   }
 
@@ -550,7 +560,6 @@
   aria-label="Viewport for building automations"
   on:mouseup={onMouseUp}
   on:mousemove={Utils.domDebounce(onMouseMove)}
-  style={`--dragPadding: ${contentDragPadding}px;`}
 >
   <svg class="draggable-background" style={`--dotSize: ${dotSize};`}>
     <!-- Small 2px offset to tuck the points under the viewport on load-->
@@ -617,7 +626,6 @@
     transform-origin: 50% 50%;
     transform: scale(var(--scale));
     user-select: none;
-    padding: var(--dragPadding);
   }
 
   .content-wrap {
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
index 9f1d516c31..7d64229e38 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ActionModal.svelte
@@ -9,7 +9,7 @@
     Tags,
     Tag,
   } from "@budibase/bbui"
-  import { AutomationActionStepId } from "@budibase/types"
+  import { AutomationActionStepId, BlockDefinitionTypes } from "@budibase/types"
   import { automationStore, selectedAutomation } from "@/stores/builder"
   import { admin, licensing } from "@/stores/portal"
   import { externalActions } from "./ExternalActions"
@@ -124,15 +124,20 @@
 
     try {
       const newBlock = automationStore.actions.constructBlock(
-        "ACTION",
+        BlockDefinitionTypes.ACTION,
         action.stepId,
         action
       )
-
       await automationStore.actions.addBlockToAutomation(
         newBlock,
         blockRef ? blockRef.pathTo : block.pathTo
       )
+
+      // Determine presence of the block before focusing
+      const createdBlock = $selectedAutomation.blockRefs[newBlock.id]
+      const createdBlockLoc = (createdBlock?.pathTo || []).at(-1)
+      await automationStore.actions.selectNode(createdBlockLoc?.id)
+
       modal.hide()
     } catch (error) {
       console.error(error)
@@ -167,8 +172,8 @@
             <img
               width={20}
               height={20}
-              src={getExternalAction(action.stepId).icon}
-              alt={getExternalAction(action.stepId).name}
+              src={getExternalAction(action.stepId)?.icon}
+              alt={getExternalAction(action.stepId)?.name}
             />
             <span class="icon-spacing">
               <Body size="XS">
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte
index cdf0f82225..bc4f5fcf29 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/BranchNode.svelte
@@ -3,30 +3,28 @@
   import {
     Drawer,
     DrawerContent,
-    ActionButton,
     Icon,
-    Layout,
     Body,
     Divider,
-    TooltipPosition,
-    TooltipType,
     Button,
     Modal,
     ModalContent,
   } from "@budibase/bbui"
   import PropField from "@/components/automation/SetupPanel/PropField.svelte"
   import AutomationBindingPanel from "@/components/common/bindings/ServerBindingPanel.svelte"
-  import FlowItemHeader from "./FlowItemHeader.svelte"
   import FlowItemActions from "./FlowItemActions.svelte"
+  import FlowItemStatus from "./FlowItemStatus.svelte"
   import {
     automationStore,
     selectedAutomation,
     evaluationContext,
+    contextMenuStore,
   } from "@/stores/builder"
   import { QueryUtils, Utils, memo } from "@budibase/frontend-core"
   import { cloneDeep } from "lodash/fp"
   import { createEventDispatcher, getContext } from "svelte"
   import DragZone from "./DragZone.svelte"
+  import BlockHeader from "../../SetupPanel/BlockHeader.svelte"
 
   const dispatch = createEventDispatcher()
 
@@ -41,7 +39,6 @@
   const memoContext = memo({})
 
   let drawer
-  let open = true
   let confirmDeleteModal
 
   $: memoContext.set($evaluationContext)
@@ -61,6 +58,65 @@
     branchNode: true,
     pathTo: (pathTo || []).concat({ branchIdx, branchStepId: step.id }),
   }
+
+  const getContextMenuItems = () => {
+    return [
+      {
+        icon: "Delete",
+        name: "Delete",
+        keyBind: null,
+        visible: true,
+        disabled: false,
+        callback: async () => {
+          const branchSteps = step.inputs?.children[branch.id]
+          if (branchSteps.length) {
+            confirmDeleteModal.show()
+          } else {
+            await automationStore.actions.deleteBranch(
+              branchBlockRef.pathTo,
+              $selectedAutomation.data
+            )
+          }
+        },
+      },
+      {
+        icon: "ArrowLeft",
+        name: "Move left",
+        keyBind: null,
+        visible: true,
+        disabled: branchIdx == 0,
+        callback: async () => {
+          automationStore.actions.branchLeft(
+            branchBlockRef.pathTo,
+            $selectedAutomation.data,
+            step
+          )
+        },
+      },
+      {
+        icon: "ArrowRight",
+        name: "Move right",
+        keyBind: null,
+        visible: true,
+        disabled: isLast,
+        callback: async () => {
+          automationStore.actions.branchRight(
+            branchBlockRef.pathTo,
+            $selectedAutomation.data,
+            step
+          )
+        },
+      },
+    ]
+  }
+
+  const openContextMenu = e => {
+    e.preventDefault()
+    e.stopPropagation()
+
+    const items = getContextMenuItems()
+    contextMenuStore.open(branch.id, items, { x: e.clientX, y: e.clientY })
+  }
 </script>
 
 <Modal bind:this={confirmDeleteModal}>
@@ -112,7 +168,7 @@
   </DrawerContent>
 </Drawer>
 
-<div class="flow-item">
+<div class="flow-item branch">
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class={`block branch-node hoverable`}
@@ -121,96 +177,64 @@
       e.stopPropagation()
     }}
   >
-    <FlowItemHeader
-      {automation}
-      {open}
-      itemName={branch.name}
-      block={step}
-      deleteStep={async () => {
-        const branchSteps = step.inputs?.children[branch.id]
-        if (branchSteps.length) {
-          confirmDeleteModal.show()
-        } else {
-          await automationStore.actions.deleteBranch(
-            branchBlockRef.pathTo,
-            $selectedAutomation.data
-          )
-        }
-      }}
-      on:update={async e => {
-        let stepUpdate = cloneDeep(step)
-        let branchUpdate = stepUpdate.inputs?.branches.find(
-          stepBranch => stepBranch.id == branch.id
-        )
-        branchUpdate.name = e.detail
+    <div class="block-float">
+      <FlowItemStatus
+        block={step}
+        {automation}
+        {branch}
+        hideStatus={$view?.dragging}
+      />
+    </div>
+    <div class="blockSection">
+      <div class="heading">
+        <BlockHeader
+          {automation}
+          block={step}
+          itemName={branch.name}
+          on:update={async e => {
+            let stepUpdate = cloneDeep(step)
+            let branchUpdate = stepUpdate.inputs?.branches.find(
+              stepBranch => stepBranch.id == branch.id
+            )
+            branchUpdate.name = e.detail
 
-        const updatedAuto = automationStore.actions.updateStep(
-          pathTo,
-          $selectedAutomation.data,
-          stepUpdate
-        )
-        await automationStore.actions.save(updatedAuto)
-      }}
-      on:toggle={() => (open = !open)}
-    >
-      <div slot="custom-actions" class="branch-actions">
-        <Icon
-          on:click={() => {
-            automationStore.actions.branchLeft(
-              branchBlockRef.pathTo,
+            const updatedAuto = automationStore.actions.updateStep(
+              pathTo,
               $selectedAutomation.data,
-              step
+              stepUpdate
             )
+            await automationStore.actions.save(updatedAuto)
           }}
-          tooltip={"Move left"}
-          tooltipType={TooltipType.Info}
-          tooltipPosition={TooltipPosition.Top}
-          hoverable
-          disabled={branchIdx == 0}
-          name="ArrowLeft"
-        />
-        <Icon
-          on:click={() => {
-            automationStore.actions.branchRight(
-              branchBlockRef.pathTo,
-              $selectedAutomation.data,
-              step
-            )
-          }}
-          tooltip={"Move right"}
-          tooltipType={TooltipType.Info}
-          tooltipPosition={TooltipPosition.Top}
-          hoverable
-          disabled={isLast}
-          name="ArrowRight"
         />
+        <div class="actions">
+          <Icon
+            name="Info"
+            tooltip="Branch sequencing checks each option in order and follows the first one that matches the rules."
+          />
+          <Icon
+            on:click={e => {
+              openContextMenu(e)
+            }}
+            size="S"
+            hoverable
+            name="MoreSmallList"
+          />
+        </div>
       </div>
-    </FlowItemHeader>
-    {#if open}
-      <Divider noMargin />
-      <div class="blockSection">
-        <!-- Content body for possible slot -->
-        <Layout noPadding>
-          <PropField label="Only run when">
-            <ActionButton fullWidth on:click={drawer.show}>
-              {editableConditionUI?.groups?.length
-                ? "Update condition"
-                : "Add condition"}
-            </ActionButton>
-          </PropField>
-          <div class="footer">
-            <Icon
-              name="InfoOutline"
-              size="S"
-              color="var(--spectrum-global-color-gray-700)"
-            />
-            <Body size="XS" color="var(--spectrum-global-color-gray-700)">
-              Only the first branch which matches its condition will run
-            </Body>
-          </div>
-        </Layout>
-      </div>
-    {/if}
+    </div>
+
+    <Divider noMargin />
+    <div class="blockSection filter-button">
+      <PropField label="Only run when:" fullWidth>
+        <div style="width: 100%">
+          <Button secondary on:click={drawer.show}>
+            {editableConditionUI?.groups?.length
+              ? "Update condition"
+              : "Add condition"}
+          </Button>
+        </div>
+      </PropField>
+    </div>
   </div>
 
   <div class="separator" />
@@ -227,6 +251,9 @@
 </div>
 
 <style>
+  .filter-button :global(.spectrum-Button) {
+    width: 100%;
+  }
   .branch-actions {
     display: flex;
     gap: var(--spacing-l);
@@ -264,7 +291,7 @@
     display: inline-block;
   }
   .block {
-    width: 480px;
+    width: 360px;
     font-size: 16px;
     background-color: var(--background);
     border: 1px solid var(--spectrum-global-color-gray-300);
@@ -289,4 +316,30 @@
     align-items: center;
     gap: var(--spacing-s);
   }
+
+  .branch-node {
+    position: relative;
+  }
+
+  .block-float {
+    pointer-events: none;
+    width: 100%;
+    position: absolute;
+    top: -35px;
+    left: 0px;
+  }
+
+  .blockSection .heading {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-m);
+  }
+
+  .blockSection .heading .actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-m);
+  }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ExternalActions.js b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ExternalActions.js
deleted file mode 100644
index d5d382485c..0000000000
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ExternalActions.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import DiscordLogo from "assets/discord.svg"
-import ZapierLogo from "assets/zapier.png"
-import n8nLogo from "assets/n8n_square.png"
-import MakeLogo from "assets/make.svg"
-import SlackLogo from "assets/slack.svg"
-
-export const externalActions = {
-  zapier: { name: "zapier", icon: ZapierLogo },
-  discord: { name: "discord", icon: DiscordLogo },
-  slack: { name: "slack", icon: SlackLogo },
-  integromat: { name: "integromat", icon: MakeLogo },
-  n8n: { name: "n8n", icon: n8nLogo },
-}
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ExternalActions.ts b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ExternalActions.ts
new file mode 100644
index 0000000000..cb9fa407d5
--- /dev/null
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/ExternalActions.ts
@@ -0,0 +1,20 @@
+import DiscordLogo from "assets/discord.svg"
+import ZapierLogo from "assets/zapier.png"
+import n8nLogo from "assets/n8n_square.png"
+import MakeLogo from "assets/make.svg"
+import SlackLogo from "assets/slack.svg"
+import { AutomationActionStepId } from "@budibase/types"
+
+export type ExternalAction = {
+  name: string
+  icon: string
+}
+export const externalActions: Partial<
+  Record<AutomationActionStepId, ExternalAction>
+> = {
+  [AutomationActionStepId.zapier]: { name: "zapier", icon: ZapierLogo },
+  [AutomationActionStepId.discord]: { name: "discord", icon: DiscordLogo },
+  [AutomationActionStepId.slack]: { name: "slack", icon: SlackLogo },
+  [AutomationActionStepId.integromat]: { name: "integromat", icon: MakeLogo },
+  [AutomationActionStepId.n8n]: { name: "n8n", icon: n8nLogo },
+}
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
index 01f0032e58..f705edcda6 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
@@ -3,6 +3,7 @@
     automationStore,
     automationHistoryStore,
     selectedAutomation,
+    appStore,
   } from "@/stores/builder"
   import ConfirmDialog from "@/components/common/ConfirmDialog.svelte"
   import TestDataModal from "./TestDataModal.svelte"
@@ -19,6 +20,9 @@
   import { memo } from "@budibase/frontend-core"
   import { sdk } from "@budibase/shared-core"
   import DraggableCanvas from "../DraggableCanvas.svelte"
+  import { onMount } from "svelte"
+  import { environment } from "@/stores/portal"
+  import Count from "../../SetupPanel/Count.svelte"
 
   export let automation
 
@@ -31,6 +35,10 @@
   let treeEle
   let draggable
 
+  let prodErrors
+
+  $: $automationStore.showTestModal === true && testDataModal.show()
+
   // Memo auto - selectedAutomation
   $: memoAutomation.set(automation)
 
@@ -63,53 +71,65 @@
       notifications.error("Error deleting automation")
     }
   }
+
+  onMount(async () => {
+    try {
+      await automationStore.actions.initAppSelf()
+      await environment.loadVariables()
+      const response = await automationStore.actions.getLogs({
+        automationId: automation._id,
+        status: "error",
+      })
+      prodErrors = response?.data?.length || 0
+    } catch (error) {
+      console.error(error)
+    }
+  })
 </script>
 
-<div class="header" class:scrolling>
-  <div class="header-left">
-    <UndoRedoControl store={automationHistoryStore} showButtonGroup />
-
-    <div class="zoom">
-      <div class="group">
-        <ActionButton icon="Add" quiet on:click={draggable.zoomIn} />
-        <ActionButton icon="Remove" quiet on:click={draggable.zoomOut} />
-      </div>
+<div class="automation-heading">
+  <div class="actions-left">
+    <div class="automation-name">
+      {automation.name}
     </div>
-
-    <Button
-      secondary
-      on:click={() => {
-        draggable.zoomToFit()
-      }}
-    >
-      Zoom to fit
-    </Button>
   </div>
-  <div class="controls">
-    <Button
-      icon={"Play"}
-      cta
+  <div class="actions-right">
+    <ActionButton
+      icon="Play"
+      quiet
       disabled={!automation?.definition?.trigger}
       on:click={() => {
-        testDataModal.show()
+        automationStore.update(state => ({ ...state, showTestModal: true }))
       }}
     >
       Run test
-    </Button>
-    <div class="buttons">
-      {#if !$automationStore.showTestPanel && $automationStore.testResults}
-        <Button
-          secondary
-          icon={"Multiple"}
-          disabled={!$automationStore.testResults}
-          on:click={() => {
-            $automationStore.showTestPanel = true
-          }}
-        >
-          Test details
-        </Button>
-      {/if}
-    </div>
+    </ActionButton>
+    <Count
+      count={prodErrors}
+      tooltip={"There are errors in production"}
+      hoverable={false}
+    >
+      <ActionButton
+        icon="Folder"
+        quiet
+        selected={prodErrors}
+        on:click={() => {
+          const params = new URLSearchParams({
+            ...(prodErrors ? { open: "error" } : {}),
+            automationId: automation._id,
+          })
+          window.open(
+            `/builder/app/${
+              $appStore.appId
+            }/settings/automations?${params.toString()}`,
+            "_blank"
+          )
+        }}
+      >
+        Logs
+      </ActionButton>
+    </Count>
+
     {#if !isRowAction}
       <div class="toggle-active setting-spacing">
         <Toggle
@@ -126,33 +146,59 @@
   </div>
 </div>
 
-<div class="root" bind:this={treeEle}>
-  <DraggableCanvas
-    bind:this={draggable}
-    draggableClasses={[
-      "main-content",
-      "content",
-      "block",
-      "branched",
-      "branch",
-      "flow-item",
-      "branch-wrap",
-    ]}
-  >
-    <span class="main-content" slot="content">
-      {#if Object.keys(blockRefs).length}
-        {#each blocks as block, idx (block.id)}
-          <StepNode
-            step={blocks[idx]}
-            stepIdx={idx}
-            isLast={blocks?.length - 1 === idx}
-            automation={$memoAutomation}
-            blocks={blockRefs}
-          />
-        {/each}
-      {/if}
-    </span>
-  </DraggableCanvas>
+<div class="main-flow">
+  <div class="canvas-heading" class:scrolling>
+    <div class="canvas-controls">
+      <div class="canvas-heading-left">
+        <UndoRedoControl store={automationHistoryStore} showButtonGroup />
+
+        <div class="zoom">
+          <div class="group">
+            <ActionButton icon="Add" quiet on:click={draggable.zoomIn} />
+            <ActionButton icon="Remove" quiet on:click={draggable.zoomOut} />
+          </div>
+        </div>
+
+        <Button
+          secondary
+          on:click={() => {
+            draggable.zoomToFit()
+          }}
+        >
+          Zoom to fit
+        </Button>
+      </div>
+    </div>
+  </div>
+
+  <div class="root" bind:this={treeEle}>
+    <DraggableCanvas
+      bind:this={draggable}
+      draggableClasses={[
+        "main-content",
+        "content",
+        "block",
+        "branched",
+        "branch",
+        "flow-item",
+        "branch-wrap",
+      ]}
+    >
+      <span class="main-content" slot="content">
+        {#if Object.keys(blockRefs).length}
+          {#each blocks as block, idx (block.id)}
+            <StepNode
+              step={blocks[idx]}
+              stepIdx={idx}
+              isLast={blocks?.length - 1 === idx}
+              automation={$memoAutomation}
+              blocks={blockRefs}
+            />
+          {/each}
+        {/if}
+      </span>
+    </DraggableCanvas>
+  </div>
 </div>
 
 <ConfirmDialog
@@ -166,11 +212,50 @@
   This action cannot be undone.
 </ConfirmDialog>
 
-<Modal bind:this={testDataModal} width="30%" zIndex={5}>
+<Modal
+  bind:this={testDataModal}
+  zIndex={5}
+  on:hide={() => {
+    automationStore.update(state => ({ ...state, showTestModal: false }))
+  }}
+>
   <TestDataModal />
 </Modal>
 
 <style>
+  .main-flow {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .canvas-heading {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    pointer-events: none;
+  }
+
+  .automation-heading {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    background: var(--background);
+    padding: var(--spacing-m) var(--spacing-l);
+    box-sizing: border-box;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--spectrum-global-color-gray-200);
+  }
+
+  .automation-heading .actions-right {
+    display: flex;
+    gap: var(--spacing-xl);
+  }
+
+  .automation-name :global(.spectrum-Heading) {
+    font-weight: 600;
+  }
+
   .toggle-active :global(.spectrum-Switch) {
     margin: 0px;
   }
@@ -181,12 +266,12 @@
     align-items: center;
   }
 
-  .header-left {
+  .canvas-heading-left {
     display: flex;
     gap: var(--spacing-l);
   }
 
-  .header-left :global(div) {
+  .canvas-heading-left :global(div) {
     border-right: none;
   }
 
@@ -207,50 +292,31 @@
     box-sizing: border-box;
   }
 
-  .header.scrolling {
+  .canvas-heading.scrolling {
     background: var(--background);
     border-bottom: var(--border-light);
     z-index: 1;
   }
 
-  .header {
-    z-index: 1;
+  .canvas-controls {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: var(--spacing-l);
-    flex: 0 0 60px;
     padding-right: var(--spacing-xl);
-    position: absolute;
     width: 100%;
     box-sizing: border-box;
     pointer-events: none;
   }
 
-  .header > * {
+  .canvas-controls > * {
     pointer-events: auto;
   }
 
-  .controls {
-    display: flex;
-    gap: var(--spacing-l);
-  }
-
-  .controls .toggle-active :global(.spectrum-Switch-label) {
+  .toggle-active :global(.spectrum-Switch-label) {
     margin-right: 0px;
   }
 
-  .buttons {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    gap: var(--spacing-s);
-  }
-
-  .buttons:hover {
-    cursor: pointer;
-  }
-
   .group {
     border-radius: 4px;
     display: flex;
@@ -266,17 +332,17 @@
     border-bottom-right-radius: 0;
   }
 
-  .header-left .group :global(.spectrum-Button),
-  .header-left .group :global(.spectrum-ActionButton),
-  .header-left .group :global(.spectrum-Icon) {
+  .canvas-heading-left .group :global(.spectrum-Button),
+  .canvas-heading-left .group :global(.spectrum-ActionButton),
+  .canvas-heading-left .group :global(.spectrum-Icon) {
     color: var(--spectrum-global-color-gray-900) !important;
   }
-  .header-left .group :global(.spectrum-Button),
-  .header-left .group :global(.spectrum-ActionButton) {
+  .canvas-heading-left .group :global(.spectrum-Button),
+  .canvas-heading-left .group :global(.spectrum-ActionButton) {
     background: var(--spectrum-global-color-gray-200) !important;
   }
-  .header-left .group :global(.spectrum-Button:hover),
-  .header-left .group :global(.spectrum-ActionButton:hover) {
+  .canvas-heading-left .group :global(.spectrum-Button:hover),
+  .canvas-heading-left .group :global(.spectrum-ActionButton:hover) {
     background: var(--spectrum-global-color-gray-300) !important;
   }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
index 95df59b249..af6849b14d 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
@@ -1,38 +1,21 @@
 <script>
-  import {
-    automationStore,
-    permissions,
-    selectedAutomation,
-    tables,
-  } from "@/stores/builder"
-  import {
-    Icon,
-    Divider,
-    Layout,
-    Detail,
-    Modal,
-    Label,
-    AbsTooltip,
-  } from "@budibase/bbui"
+  import { automationStore, selectedAutomation, tables } from "@/stores/builder"
+  import { Modal } from "@budibase/bbui"
   import { sdk } from "@budibase/shared-core"
-  import AutomationBlockSetup from "../../SetupPanel/AutomationBlockSetup.svelte"
   import CreateWebhookModal from "@/components/automation/Shared/CreateWebhookModal.svelte"
-  import FlowItemHeader from "./FlowItemHeader.svelte"
-  import RoleSelect from "@/components/design/settings/controls/RoleSelect.svelte"
-  import { ActionStepID, TriggerStepID } from "@/constants/backend/automations"
+  import { ActionStepID } from "@/constants/backend/automations"
   import { AutomationStepType } from "@budibase/types"
   import FlowItemActions from "./FlowItemActions.svelte"
+  import FlowItemStatus from "./FlowItemStatus.svelte"
   import DragHandle from "@/components/design/settings/controls/DraggableList/drag-handle.svelte"
   import { getContext } from "svelte"
   import DragZone from "./DragZone.svelte"
   import InfoDisplay from "@/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
+  import BlockHeader from "../../SetupPanel/BlockHeader.svelte"
 
   export let block
   export let blockRef
-  export let testDataModal
-  export let idx
   export let automation
-  export let bindings
   export let draggable = true
 
   const view = getContext("draggableView")
@@ -40,13 +23,47 @@
   const contentPos = getContext("contentPos")
 
   let webhookModal
-  let open = true
-  let showLooping = false
-  let role
   let blockEle
   let positionStyles
   let blockDims
 
+  $: pathSteps = loadSteps(blockRef)
+
+  $: collectBlockExists = pathSteps.some(
+    step => step.stepId === ActionStepID.COLLECT
+  )
+
+  $: isTrigger = block.type === AutomationStepType.TRIGGER
+  $: lastStep = blockRef?.terminating
+
+  $: triggerInfo = sdk.automations.isRowAction($selectedAutomation?.data) && {
+    title: "Automation trigger",
+    tableName: $tables.list.find(
+      x =>
+        x._id === $selectedAutomation.data?.definition?.trigger?.inputs?.tableId
+    )?.name,
+  }
+
+  $: selectedNodeId = $automationStore.selectedNodeId
+  $: selected = block.id === selectedNodeId
+  $: dragging = $view?.moveStep && $view?.moveStep?.id === block.id
+
+  $: if (dragging && blockEle) {
+    updateBlockDims()
+  }
+
+  $: placeholderDims = buildPlaceholderStyles(blockDims)
+
+  // Move the selected item
+  // Listen for scrolling in the content. As its scrolled this will be updated
+  $: move(
+    blockEle,
+    $view?.dragSpot,
+    dragging,
+    $contentPos?.scrollX,
+    $contentPos?.scrollY
+  )
+
   const updateBlockDims = () => {
     if (!blockEle) {
       return
@@ -66,48 +83,8 @@
       : []
   }
 
-  $: pathSteps = loadSteps(blockRef)
-
-  $: collectBlockExists = pathSteps.some(
-    step => step.stepId === ActionStepID.COLLECT
-  )
-  $: automationId = automation?._id
-  $: isTrigger = block.type === AutomationStepType.TRIGGER
-  $: lastStep = blockRef?.terminating
-
-  $: loopBlock = pathSteps.find(x => x.blockToLoop === block.id)
-  $: isAppAction = block?.stepId === TriggerStepID.APP
-  $: isAppAction && setPermissions(role)
-  $: isAppAction && getPermissions(automationId)
-
-  $: triggerInfo = sdk.automations.isRowAction($selectedAutomation?.data) && {
-    title: "Automation trigger",
-    tableName: $tables.list.find(
-      x =>
-        x._id === $selectedAutomation.data?.definition?.trigger?.inputs?.tableId
-    )?.name,
-  }
-
-  $: selected = $view?.moveStep && $view?.moveStep?.id === block.id
-
-  $: if (selected && blockEle) {
-    updateBlockDims()
-  }
-
-  $: placeholderDims = buildPlaceholderStyles(blockDims)
-
-  // Move the selected item
-  // Listen for scrolling in the content. As its scrolled this will be updated
-  $: move(
-    blockEle,
-    $view?.dragSpot,
-    selected,
-    $contentPos?.scrollX,
-    $contentPos?.scrollY
-  )
-
-  const move = (block, dragPos, selected, scrollX, scrollY) => {
-    if ((!block && !selected) || !dragPos) {
+  const move = (block, dragPos, dragging, scrollX, scrollY) => {
+    if ((!block && !dragging) || !dragPos) {
       return
     }
     positionStyles = `
@@ -125,52 +102,6 @@
             --psheight: ${Math.round(height)}px;`
   }
 
-  async function setPermissions(role) {
-    if (!role || !automationId) {
-      return
-    }
-    await permissions.save({
-      level: "execute",
-      role,
-      resource: automationId,
-    })
-  }
-
-  async function getPermissions(automationId) {
-    if (!automationId) {
-      return
-    }
-    const perms = await permissions.forResource(automationId)
-    if (!perms["execute"]) {
-      role = "BASIC"
-    } else {
-      role = perms["execute"].role
-    }
-  }
-
-  async function deleteStep() {
-    await automationStore.actions.deleteAutomationBlock(blockRef.pathTo)
-  }
-
-  async function removeLooping() {
-    let loopBlockRef = $selectedAutomation.blockRefs[blockRef.looped]
-    await automationStore.actions.deleteAutomationBlock(loopBlockRef.pathTo)
-  }
-
-  async function addLooping() {
-    const loopDefinition = $automationStore.blockDefinitions.ACTION.LOOP
-    const loopBlock = automationStore.actions.constructBlock(
-      "ACTION",
-      "LOOP",
-      loopDefinition
-    )
-    loopBlock.blockToLoop = block.id
-    await automationStore.actions.addBlockToAutomation(
-      loopBlock,
-      blockRef.pathTo
-    )
-  }
-
   const onHandleMouseDown = e => {
     if (isTrigger) {
       e.preventDefault()
@@ -205,143 +136,58 @@
   <div
     id={`block-${block.id}`}
     class={`block ${block.type} hoverable`}
-    class:selected
+    class:dragging
     class:draggable
+    class:selected
   >
     <div class="wrap">
-      {#if $view.dragging && selected}
+      {#if $view.dragging && dragging}
         <div class="drag-placeholder" style={placeholderDims} />
       {/if}
-
       <div
         bind:this={blockEle}
         class="block-content"
-        class:dragging={$view.dragging && selected}
+        class:dragging={$view.dragging && dragging}
         style={positionStyles}
         on:mousedown={e => {
           e.stopPropagation()
         }}
       >
+        <div class="block-float">
+          <FlowItemStatus {block} {automation} hideStatus={$view?.dragging} />
+        </div>
         {#if draggable}
           <div
             class="handle"
-            class:grabbing={selected}
+            class:grabbing={dragging}
             on:mousedown={onHandleMouseDown}
           >
             <DragHandle />
           </div>
         {/if}
-        <div class="block-core">
-          {#if loopBlock}
+        <div
+          class="block-core"
+          on:click={async () => {
+            await automationStore.actions.selectNode(block.id)
+          }}
+        >
+          <div class="blockSection block-info">
+            <BlockHeader
+              disabled
+              {automation}
+              {block}
+              on:update={e =>
+                automationStore.actions.updateBlockTitle(block, e.detail)}
+            />
+          </div>
+
+          {#if isTrigger && triggerInfo}
             <div class="blockSection">
-              <div
-                on:click={() => {
-                  showLooping = !showLooping
-                }}
-                class="splitHeader"
-              >
-                <div class="center-items">
-                  <svg
-                    width="28px"
-                    height="28px"
-                    class="spectrum-Icon"
-                    style="color:var(--spectrum-global-color-gray-700);"
-                    focusable="false"
-                  >
-                    <use xlink:href="#spectrum-icon-18-Reuse" />
-                  </svg>
-                  <div class="iconAlign">
-                    <Detail size="S">Looping</Detail>
-                  </div>
-                </div>
-
-                <div class="blockTitle">
-                  <AbsTooltip type="negative" text="Remove looping">
-                    <Icon
-                      on:click={removeLooping}
-                      hoverable
-                      name="DeleteOutline"
-                    />
-                  </AbsTooltip>
-
-                  <div style="margin-left: 10px;" on:click={() => {}}>
-                    <Icon
-                      hoverable
-                      name={showLooping ? "ChevronDown" : "ChevronUp"}
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <Divider noMargin />
-            {#if !showLooping}
-              <div class="blockSection">
-                <Layout noPadding gap="S">
-                  <AutomationBlockSetup
-                    schemaProperties={Object.entries(
-                      $automationStore.blockDefinitions.ACTION.LOOP.schema
-                        .inputs.properties
-                    )}
-                    {webhookModal}
-                    block={loopBlock}
-                    {automation}
-                    {bindings}
-                  />
-                </Layout>
-              </div>
-              <Divider noMargin />
-            {/if}
-          {/if}
-
-          <FlowItemHeader
-            {automation}
-            {open}
-            {block}
-            {testDataModal}
-            {idx}
-            {addLooping}
-            {deleteStep}
-            on:toggle={() => (open = !open)}
-            on:update={async e => {
-              const newName = e.detail
-              if (newName.length === 0) {
-                await automationStore.actions.deleteAutomationName(block.id)
-              } else {
-                await automationStore.actions.saveAutomationName(
-                  block.id,
-                  newName
-                )
-              }
-            }}
-          />
-          {#if open}
-            <Divider noMargin />
-            <div class="blockSection">
-              <Layout noPadding gap="S">
-                {#if isAppAction}
-                  <div>
-                    <Label>Role</Label>
-                    <RoleSelect bind:value={role} />
-                  </div>
-                {/if}
-                <AutomationBlockSetup
-                  schemaProperties={Object.entries(
-                    block?.schema?.inputs?.properties || {}
-                  )}
-                  {block}
-                  {webhookModal}
-                  {automation}
-                  {bindings}
-                />
-                {#if isTrigger && triggerInfo}
-                  <InfoDisplay
-                    title={triggerInfo.title}
-                    body="This trigger is tied to your '{triggerInfo.tableName}' table"
-                    icon="InfoOutline"
-                  />
-                {/if}
-              </Layout>
+              <InfoDisplay
+                title={triggerInfo.title}
+                body="This trigger is tied to your '{triggerInfo.tableName}' table"
+                icon="InfoOutline"
+              />
             </div>
           {/if}
         </div>
@@ -397,7 +243,7 @@
     display: inline-block;
   }
   .block {
-    width: 480px;
+    width: 360px;
     font-size: 16px;
     border-radius: 4px;
     cursor: default;
@@ -419,6 +265,8 @@
     padding: 6px;
     color: var(--grey-6);
     cursor: grab;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
   }
   .block.draggable .wrap .handle.grabbing {
     cursor: grabbing;
@@ -469,4 +317,22 @@
     top: var(--blockPosY);
     left: var(--blockPosX);
   }
+  .block-float {
+    pointer-events: none;
+    width: 100%;
+    position: absolute;
+    top: -35px;
+    left: 0px;
+  }
+  .block-core {
+    cursor: pointer;
+  }
+  .block.selected .block-content {
+    border-color: var(--spectrum-global-color-blue-700);
+    transition: border 130ms ease-out;
+  }
+
+  .block-info {
+    pointer-events: none;
+  }
 </style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemStatus.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemStatus.svelte
new file mode 100644
index 0000000000..96d8d1ab0f
--- /dev/null
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItemStatus.svelte
@@ -0,0 +1,162 @@
+<script lang="ts">
+  import { automationStore, selectedAutomation } from "@/stores/builder"
+  import {
+    type FlowItemStatus,
+    DataMode,
+    FilterableRowTriggers,
+    FlowStatusType,
+  } from "@/types/automations"
+  import {
+    type AutomationStep,
+    type AutomationStepResult,
+    type AutomationTrigger,
+    type AutomationTriggerResult,
+    type Branch,
+    type DidNotTriggerResponse,
+    type TestAutomationResponse,
+    type AutomationTriggerStepId,
+    isDidNotTriggerResponse,
+    isTrigger,
+    isBranchStep,
+    isFilterStep,
+  } from "@budibase/types"
+  import { ActionButton } from "@budibase/bbui"
+
+  export let block: AutomationStep | AutomationTrigger | undefined
+  export let branch: Branch | undefined
+  export let hideStatus: boolean | undefined = false
+
+  $: blockRef = block?.id ? $selectedAutomation.blockRefs[block?.id] : null
+  $: isTriggerBlock = block ? isTrigger(block) : false
+
+  $: testResults = $automationStore.testResults as TestAutomationResponse
+  $: blockResult = automationStore.actions.processBlockResults(
+    testResults,
+    block
+  )
+  $: flowStatus = getFlowStatus(blockResult)
+
+  const getFlowStatus = (
+    result?:
+      | AutomationTriggerResult
+      | AutomationStepResult
+      | DidNotTriggerResponse
+  ): FlowItemStatus | undefined => {
+    if (!result || !block) {
+      return
+    }
+    const outputs = result?.outputs
+    const isFilteredRowTrigger =
+      isTriggerBlock &&
+      isDidNotTriggerResponse(testResults) &&
+      FilterableRowTriggers.includes(block.stepId as AutomationTriggerStepId)
+
+    if (
+      isFilteredRowTrigger ||
+      (isFilterStep(block) && "result" in outputs && outputs.result === false)
+    ) {
+      return {
+        message: "Stopped",
+        icon: "Alert",
+        type: FlowStatusType.WARN,
+      }
+    }
+
+    if (branch && isBranchStep(block)) {
+      // Do not give status markers to branch nodes that were not part of the run.
+      if ("branchId" in outputs && outputs.branchId !== branch.id) return
+
+      // Mark branches as stopped when no branch criteria was met
+      if (outputs.success == false) {
+        return {
+          message: "Stopped",
+          icon: "Alert",
+          type: FlowStatusType.WARN,
+        }
+      }
+    }
+
+    const success = outputs?.success || isTriggerBlock
+    return {
+      message: success ? "Completed" : "Failed",
+      icon: success ? "CheckmarkCircle" : "AlertCircleFilled",
+      type:
+        success || isTriggerBlock
+          ? FlowStatusType.SUCCESS
+          : FlowStatusType.ERROR,
+    }
+  }
+</script>
+
+<div class="flow-item-status">
+  {#if blockRef}
+    {#if isTriggerBlock}
+      <span class="block-type">
+        <ActionButton size="S" active={false} icon="Workflow">
+          Trigger
+        </ActionButton>
+      </span>
+    {:else if blockRef.looped}
+      <ActionButton size="S" active={false} icon="Reuse">Looping</ActionButton>
+    {:else}
+      <span />
+    {/if}
+    {#if blockResult && flowStatus && !hideStatus}
+      <span class={`flow-${flowStatus.type}`}>
+        <ActionButton
+          size="S"
+          icon={flowStatus.icon}
+          tooltip={flowStatus?.tooltip}
+          on:click={async () => {
+            if (branch || !block) {
+              return
+            }
+            await automationStore.actions.selectNode(
+              block?.id,
+              flowStatus.type == FlowStatusType.SUCCESS
+                ? DataMode.OUTPUT
+                : DataMode.ERRORS
+            )
+          }}
+        >
+          {flowStatus.message}
+        </ActionButton>
+      </span>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .flow-item-status {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: var(--spacing-s);
+    align-items: center;
+    pointer-events: none;
+  }
+  .flow-item-status :global(> *) {
+    pointer-events: all;
+  }
+  .flow-item-status .block-type {
+    pointer-events: none;
+  }
+  .flow-item-status :global(.spectrum-ActionButton),
+  .flow-item-status :global(.spectrum-ActionButton .spectrum-Icon) {
+    color: var(--spectrum-alias-text-color-hover);
+  }
+  .flow-success :global(.spectrum-ActionButton) {
+    background-color: var(--spectrum-semantic-positive-color-status);
+    border-color: var(--spectrum-semantic-positive-color-status);
+  }
+  .flow-error :global(.spectrum-ActionButton) {
+    background-color: var(--spectrum-semantic-negative-color-status);
+    border-color: var(--spectrum-semantic-negative-color-status);
+  }
+  .flow-warn :global(.spectrum-ActionButton) {
+    background-color: var(--spectrum-global-color-gray-300);
+    border-color: var(--spectrum-global-color-gray-300);
+  }
+  .flow-warn :global(.spectrum-ActionButton .spectrum-Icon) {
+    color: var(--spectrum-global-color-yellow-600);
+  }
+</style>
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/StepNode.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/StepNode.svelte
index fbd49723be..cccc44f4e9 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/StepNode.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/StepNode.svelte
@@ -46,16 +46,26 @@
     ...userBindings,
     ...settingBindings,
   ]
+
   onMount(() => {
     // Register the trigger as the focus element for the automation
     // Onload, the canvas will use the dimensions to center the step
     if (stepEle && step.type === "TRIGGER" && !$view.focusEle) {
       const { width, height, left, right, top, bottom, x, y } =
         stepEle.getBoundingClientRect()
-
       view.update(state => ({
         ...state,
-        focusEle: { width, height, left, right, top, bottom, x, y },
+        focusEle: {
+          width,
+          height,
+          left,
+          right,
+          top,
+          bottom,
+          x,
+          y,
+          ...(step.type === "TRIGGER" ? { targetY: 100 } : {}),
+        },
       }))
     }
   })
diff --git a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
index c962d4fd39..2538cb2853 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/TestDataModal.svelte
@@ -122,7 +122,6 @@
     await tick()
     try {
       await automationStore.actions.test($selectedAutomation.data, testData)
-      $automationStore.showTestPanel = true
     } catch (error) {
       notifications.error(error)
     }
diff --git a/packages/builder/src/components/automation/AutomationBuilder/StepPanel.svelte b/packages/builder/src/components/automation/AutomationBuilder/StepPanel.svelte
new file mode 100644
index 0000000000..e11598ae78
--- /dev/null
+++ b/packages/builder/src/components/automation/AutomationBuilder/StepPanel.svelte
@@ -0,0 +1,270 @@
+<script lang="ts">
+  import { ActionButton, Button, Divider, Icon, Modal } from "@budibase/bbui"
+  import {
+    type Automation,
+    type AutomationStep,
+    type AutomationTrigger,
+    type BlockRef,
+    AutomationTriggerStepId,
+    isBranchStep,
+    isTrigger,
+    AutomationFeature,
+  } from "@budibase/types"
+  import { memo } from "@budibase/frontend-core"
+  import {
+    automationStore,
+    selectedAutomation,
+    evaluationContext,
+  } from "@/stores/builder"
+  import BlockData from "../SetupPanel/BlockData.svelte"
+  import BlockProperties from "../SetupPanel/BlockProperties.svelte"
+  import BlockHeader from "../SetupPanel/BlockHeader.svelte"
+  import { PropField } from "../SetupPanel"
+  import RoleSelect from "@/components/common/RoleSelect.svelte"
+  import { type AutomationContext } from "@/stores/builder/automations"
+  import CreateWebhookModal from "@/components/automation/Shared/CreateWebhookModal.svelte"
+  import { getVerticalResizeActions } from "@/components/common/resizable"
+
+  const [resizable, resizableHandle] = getVerticalResizeActions()
+
+  const memoAutomation = memo<Automation | undefined>($selectedAutomation.data)
+  const memoBlock = memo<AutomationStep | AutomationTrigger | undefined>()
+  const memoContext = memo({} as AutomationContext)
+
+  let role: string | undefined
+  let webhookModal: Modal | undefined
+
+  $: memoAutomation.set($selectedAutomation.data)
+  $: memoContext.set($evaluationContext)
+
+  $: selectedNodeId = $automationStore.selectedNodeId
+  $: blockRefs = $selectedAutomation.blockRefs
+  $: blockRef = selectedNodeId ? blockRefs[selectedNodeId] : undefined
+  $: block = automationStore.actions.getBlockByRef($memoAutomation, blockRef)
+
+  $: memoBlock.set(block)
+
+  $: isStep = !!$memoBlock && !isTrigger($memoBlock)
+  $: pathSteps = loadPathSteps(blockRef, $memoAutomation)
+  $: loopBlock = pathSteps.find(
+    x => $memoBlock && x.blockToLoop === $memoBlock.id
+  )
+
+  $: isAppAction = block?.stepId === AutomationTriggerStepId.APP
+  $: isAppAction && fetchPermissions($memoAutomation?._id)
+  $: isAppAction &&
+    automationStore.actions.setPermissions(role, $memoAutomation)
+
+  const fetchPermissions = async (automationId?: string) => {
+    if (!automationId) {
+      return
+    }
+    role = await automationStore.actions.getPermissions(automationId)
+  }
+
+  const loadPathSteps = (
+    blockRef: BlockRef | undefined,
+    automation: Automation | undefined
+  ) => {
+    return blockRef && automation
+      ? automationStore.actions.getPathSteps(blockRef.pathTo, automation)
+      : []
+  }
+</script>
+
+<Modal bind:this={webhookModal}>
+  <CreateWebhookModal />
+</Modal>
+
+<div class="panel heading">
+  <div class="details">
+    <BlockHeader
+      automation={$memoAutomation}
+      block={$memoBlock}
+      on:update={e => {
+        if ($memoBlock && !isTrigger($memoBlock)) {
+          automationStore.actions.updateBlockTitle($memoBlock, e.detail)
+        }
+      }}
+    />
+    <Icon
+      name="Close"
+      hoverable
+      on:click={() => {
+        automationStore.actions.selectNode()
+      }}
+    />
+  </div>
+  {#if isStep}
+    <div class="step-actions">
+      {#if $memoBlock && !isBranchStep($memoBlock) && ($memoBlock.features?.[AutomationFeature.LOOPING] || !$memoBlock.features)}
+        <ActionButton
+          quiet
+          noPadding
+          icon="RotateCW"
+          on:click={async () => {
+            if (loopBlock) {
+              await automationStore.actions.removeLooping(blockRef)
+            } else {
+              await automationStore.actions.addLooping(blockRef)
+            }
+          }}
+        >
+          {loopBlock ? `Stop Looping` : `Loop`}
+        </ActionButton>
+      {/if}
+      <ActionButton
+        quiet
+        noPadding
+        icon="DeleteOutline"
+        on:click={async () => {
+          if (!blockRef) {
+            return
+          }
+          await automationStore.actions.deleteAutomationBlock(blockRef.pathTo)
+        }}
+      >
+        Delete
+      </ActionButton>
+    </div>
+  {/if}
+</div>
+<Divider noMargin />
+<div class="panel config" use:resizable>
+  <div class="content">
+    {#if loopBlock}
+      <span class="loop">
+        <BlockProperties
+          block={loopBlock}
+          context={$memoContext}
+          automation={$memoAutomation}
+        />
+      </span>
+      <Divider noMargin />
+    {:else if isAppAction}
+      <PropField label="Role" fullWidth>
+        <RoleSelect bind:value={role} />
+      </PropField>
+    {/if}
+    <span class="props">
+      <BlockProperties
+        block={$memoBlock}
+        context={$memoContext}
+        automation={$memoAutomation}
+      />
+    </span>
+
+    {#if block?.stepId === AutomationTriggerStepId.WEBHOOK}
+      <Button
+        secondary
+        on:click={() => {
+          if (!webhookModal) return
+          webhookModal.show()
+        }}
+      >
+        Set Up Webhook
+      </Button>
+    {/if}
+  </div>
+  <div
+    role="separator"
+    class="divider"
+    class:disabled={false}
+    use:resizableHandle
+  />
+</div>
+
+<div class="panel data">
+  <BlockData
+    context={$memoContext}
+    block={$memoBlock}
+    automation={$memoAutomation}
+    on:run={() => {
+      automationStore.update(state => ({
+        ...state,
+        showTestModal: true,
+      }))
+    }}
+  />
+</div>
+
+<style>
+  .step-actions {
+    display: flex;
+    gap: var(--spacing-l);
+    align-items: center;
+    margin-top: var(--spacing-s);
+  }
+  .heading.panel {
+    display: flex;
+    flex-direction: column;
+  }
+  .panel,
+  .config.panel .content {
+    padding: var(--spacing-l);
+  }
+  .config.panel {
+    padding: 0px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-height: 200px;
+    max-height: 550px;
+    transition: height 300ms ease-out, max-height 300ms ease-out;
+    height: 400px;
+    box-sizing: border-box;
+  }
+  .config.panel .content {
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-l);
+  }
+  .config.panel .loop,
+  .config.panel .content .props {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-l);
+  }
+  .data.panel {
+    padding: 0px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: auto;
+    overflow-x: hidden;
+  }
+  .divider {
+    position: absolute;
+    bottom: 0;
+    transform: translateY(50%);
+    height: 16px;
+    width: 100%;
+  }
+  .divider:after {
+    content: "";
+    position: absolute;
+    background: var(--spectrum-global-color-gray-200);
+    height: 2px;
+    width: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    transition: background 130ms ease-out;
+  }
+  .divider:hover {
+    cursor: row-resize;
+  }
+  .divider:hover:after {
+    background: var(--spectrum-global-color-gray-300);
+  }
+  .divider.disabled {
+    cursor: auto;
+  }
+  .divider.disabled:after {
+    background: var(--spectrum-global-color-gray-200);
+  }
+  .details {
+    display: flex;
+    gap: var(--spacing-l);
+  }
+</style>
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationCustomLayout.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationCustomLayout.svelte
new file mode 100644
index 0000000000..a4aac22977
--- /dev/null
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationCustomLayout.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import {
+    type AutomationStep,
+    type AutomationTrigger,
+    type EnrichedBinding,
+  } from "@budibase/types"
+  import { PropField } from "."
+  import { type SchemaConfigProps } from "@/types/automations"
+
+  export let block: AutomationStep | AutomationTrigger | undefined = undefined
+  export let context: {} | undefined
+  export let bindings: EnrichedBinding[] | undefined = undefined
+  export let layout: SchemaConfigProps[] | undefined
+</script>
+
+{#if layout}
+  {#each layout as config}
+    {#if config.wrapped === false}
+      <svelte:component
+        this={config.comp}
+        {...config?.props ? config.props() : {}}
+        {bindings}
+        {block}
+        {context}
+        on:change={config.onChange}
+      />
+    {:else}
+      <PropField
+        label={config.title}
+        labelTooltip={config.tooltip || ""}
+        fullWidth
+      >
+        <svelte:component
+          this={config.comp}
+          {...config?.props ? config.props() : {}}
+          {bindings}
+          {block}
+          {context}
+          on:change={config.onChange}
+        />
+      </PropField>
+    {/if}
+  {/each}
+{/if}
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationSchemaLayout.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationSchemaLayout.svelte
new file mode 100644
index 0000000000..6011e2753d
--- /dev/null
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationSchemaLayout.svelte
@@ -0,0 +1,389 @@
+<script lang="ts">
+  import {
+    type BaseIOStructure,
+    type AutomationStep,
+    type AutomationTrigger,
+    AutomationActionStepId,
+    AutomationCustomIOType,
+    AutomationIOType,
+    AutomationStepType,
+  } from "@budibase/types"
+  import {
+    AutomationSelector,
+    CronBuilder,
+    DateSelector,
+    ExecuteScript,
+    ExecuteScriptV2,
+    FieldSelector,
+    FileSelector,
+    FilterSelector,
+    PropField,
+    QueryParamSelector,
+    SchemaSetup,
+    TableSelector,
+  } from "."
+  import { getFieldLabel, getInputValue } from "./layouts"
+  import { automationStore, tables } from "@/stores/builder"
+  import {
+    type AutomationSchemaConfig,
+    type FieldProps,
+    type FormUpdate,
+    type FileSelectorMeta,
+    type StepInputs,
+    SchemaFieldTypes,
+    customTypeToSchema,
+    typeToSchema,
+  } from "@/types/automations"
+  import { Select, Checkbox } from "@budibase/bbui"
+  import {
+    DrawerBindableInput,
+    ServerBindingPanel as AutomationBindingPanel,
+  } from "@/components/common/bindings"
+  import Editor from "@/components/integration/QueryEditor.svelte"
+  import WebhookDisplay from "@/components/automation/Shared/WebhookDisplay.svelte"
+
+  export let block: AutomationStep | AutomationTrigger | undefined = undefined
+  export let context: {} | undefined
+  export let bindings: any[] | undefined = undefined
+
+  const SchemaTypes: AutomationSchemaConfig = {
+    [SchemaFieldTypes.ENUM]: {
+      comp: Select,
+      props: (opts: FieldProps = {} as FieldProps) => {
+        const field = opts.field
+        return {
+          placeholder: false,
+          options: field.enum,
+          getOptionLabel: (x: string, idx: number) => {
+            return field.pretty ? field.pretty[idx] : x
+          },
+          disabled: field.readonly,
+        }
+      },
+    },
+    [SchemaFieldTypes.TABLE]: {
+      comp: TableSelector,
+      props: (opts: FieldProps = {} as FieldProps) => {
+        const field = opts.field
+        return {
+          isTrigger,
+          disabled: field.readonly,
+        }
+      },
+    },
+    [SchemaFieldTypes.FILTER]: {
+      comp: FilterSelector,
+      props: (opts: FieldProps = {} as FieldProps) => {
+        const { key } = opts
+        return {
+          key,
+        }
+      },
+      onChange: (e: CustomEvent<FormUpdate>) => {
+        const update = e.detail
+        if (block) {
+          automationStore.actions.requestUpdate(update, block)
+        }
+      },
+    },
+    [SchemaFieldTypes.COLUMN]: {
+      comp: Select,
+      props: (opts: FieldProps = {} as FieldProps) => {
+        const field = opts.field
+        return {
+          options: Object.keys(table?.schema || {}),
+          disabled: field.readonly,
+        }
+      },
+    },
+    [SchemaFieldTypes.CODE_V2]: {
+      comp: ExecuteScriptV2,
+      fullWidth: true,
+    },
+    [SchemaFieldTypes.BOOL]: {
+      comp: Checkbox,
+    },
+    [SchemaFieldTypes.DATE]: {
+      comp: DateSelector,
+      props: (opts: FieldProps = {} as FieldProps) => {
+        const { field, key } = opts
+        return {
+          title: field.title ?? getFieldLabel(key, field),
+          disabled: field.readonly,
+        }
+      },
+    },
+    [SchemaFieldTypes.TRIGGER_SCHEMA]: {
+      comp: SchemaSetup,
+      fullWidth: true,
+    },
+    [SchemaFieldTypes.JSON]: {
+      comp: Editor,
+      props: (opts: FieldProps = {} as FieldProps) => {
+        const { field, value: editorBody } = opts
+        return {
+          value: editorBody?.value,
+          editorHeight: "250",
+          editorWidth: "448",
+          mode: "json",
+          readOnly: field.readonly,
+        }
+      },
+    },
+    [SchemaFieldTypes.FILE]: {
+      comp: FileSelector,
+      props: (opts: FieldProps = {} as FieldProps) => {
+        const { field } = opts
+        const meta = getInputValue(inputData, "meta") as FileSelectorMeta
+        return {
+          buttonText:
+            field.type === "attachment" ? "Add attachment" : "Add signature",
+          useAttachmentBinding: meta?.useAttachmentBinding,
+        }
+      },
+      onChange: (e: CustomEvent<FormUpdate>) => {
+        const update = e.detail
+        if (block) {
+          automationStore.actions.requestUpdate(update, block)
+        }
+      },
+      fullWidth: true,
+    },
+    [SchemaFieldTypes.CRON]: {
+      comp: CronBuilder,
+      props: (opts: FieldProps = {} as FieldProps) => {
+        const { value } = opts
+        return {
+          cronExpression: value,
+        }
+      },
+    },
+    [SchemaFieldTypes.LOOP_OPTION]: {
+      comp: Select,
+      props: () => {
+        return {
+          autoWidth: true,
+          options: ["Array", "String"],
+          defaultValue: "Array",
+        }
+      },
+    },
+    [SchemaFieldTypes.AUTOMATION_FIELDS]: {
+      comp: AutomationSelector,
+      props: (opts: FieldProps = {} as FieldProps) => {
+        const { field } = opts
+        return {
+          title: field.title,
+        }
+      },
+      fullWidth: true,
+      wrapped: false,
+    },
+    [SchemaFieldTypes.WEBHOOK_URL]: {
+      comp: WebhookDisplay,
+    },
+    [SchemaFieldTypes.QUERY_PARAMS]: {
+      comp: QueryParamSelector,
+    },
+    [SchemaFieldTypes.CODE]: {
+      comp: ExecuteScript,
+      fullWidth: true,
+    },
+    [SchemaFieldTypes.STRING]: {
+      comp: DrawerBindableInput,
+      props: (opts: FieldProps = {} as FieldProps) => {
+        const { key, field } = opts
+        return {
+          title: field.title ?? getFieldLabel(key, field),
+          panel: AutomationBindingPanel,
+          type: field.customType,
+          updateOnChange: false,
+        }
+      },
+    },
+    [SchemaFieldTypes.QUERY_LIMIT]: {
+      comp: DrawerBindableInput,
+      props: (opts: FieldProps = {} as FieldProps) => {
+        const { key, field } = opts
+        return {
+          title: field.title ?? getFieldLabel(key, field),
+          panel: AutomationBindingPanel,
+          type: field.customType,
+          updateOnChange: false,
+          placeholder: queryLimit,
+        }
+      },
+    },
+    // Not a core schema type.
+    [SchemaFieldTypes.FIELDS]: {
+      comp: FieldSelector,
+      props: () => {
+        return {
+          isTestModal: false,
+        }
+      },
+      fullWidth: true,
+    },
+  }
+
+  $: isTrigger = block?.type === AutomationStepType.TRIGGER
+
+  // The step input properties
+  $: inputData = automationStore.actions.getInputData(block)
+
+  // Automation definition properties
+  $: schemaProperties = Object.entries(block?.schema?.inputs?.properties || {})
+
+  // Used for field labelling
+  $: requiredProperties = block ? block.schema["inputs"].required : []
+
+  $: tableId = inputData && "tableId" in inputData ? inputData.tableId : null
+  $: table = tableId
+    ? $tables.list.find(table => table._id === tableId)
+    : { schema: {} }
+
+  $: queryLimit = tableId?.includes("datasource") ? "∞" : "1000"
+
+  const canShowField = (value: BaseIOStructure, inputData?: StepInputs) => {
+    if (!inputData) {
+      console.error("Cannot determine field visibility without field data")
+      return false
+    }
+    const dependsOn = value?.dependsOn
+    return !dependsOn || !!getInputValue(inputData, dependsOn)
+  }
+
+  const defaultChange = (
+    update: FormUpdate,
+    block?: AutomationTrigger | AutomationStep
+  ) => {
+    if (block) {
+      automationStore.actions.requestUpdate(update, block)
+    }
+  }
+
+  /**
+   *
+   * Build the core props used to page the Automation Schema field.
+   *
+   * @param key
+   * @param field
+   * @param block
+   */
+  const schemaToUI = (
+    key: string,
+    field: BaseIOStructure,
+    block?: AutomationStep | AutomationTrigger
+  ) => {
+    if (!block) {
+      console.error("Could not process UI elements.")
+      return {}
+    }
+    const type = getFieldType(field, block)
+    const config = type ? SchemaTypes[type] : null
+    const title = getFieldLabel(key, field, requiredProperties?.includes(key))
+    const value = getInputValue(inputData, key)
+    const meta = getInputValue(inputData, "meta")
+
+    return {
+      meta,
+      config,
+      value,
+      title,
+      props: config?.props
+        ? config.props({ key, field, block, value, meta, title })
+        : {},
+    }
+  }
+
+  /**
+   * Determine the correct UI element based on the automation
+   * schema configuration.
+   *
+   * @param field
+   * @param block
+   */
+  const getFieldType = (
+    field: BaseIOStructure,
+    block?: AutomationStep | AutomationTrigger
+  ) => {
+    // Direct customType map
+    const customType = field.customType && customTypeToSchema[field.customType]
+    if (customType) {
+      return customType
+    }
+
+    // Direct type map
+    const fieldType = field.type && typeToSchema[field.type]
+    if (fieldType) {
+      return fieldType
+    }
+
+    // Enum Field
+    if (field.type === AutomationIOType.STRING && field.enum) {
+      return SchemaFieldTypes.ENUM
+    }
+
+    // JS V2
+    if (
+      field.customType === AutomationCustomIOType.CODE &&
+      block?.stepId === AutomationActionStepId.EXECUTE_SCRIPT_V2
+    ) {
+      return SchemaFieldTypes.CODE_V2
+    }
+
+    // Filter step or trigger
+    if (
+      field.customType === AutomationCustomIOType.FILTERS ||
+      field.customType === AutomationCustomIOType.TRIGGER_FILTER
+    ) {
+      return SchemaFieldTypes.FILTER
+    }
+
+    // Default string/number UX
+    if (
+      field.type === AutomationIOType.STRING ||
+      field.type === AutomationIOType.NUMBER
+    ) {
+      // "integer" removed as it isnt present in the type
+      return SchemaFieldTypes.STRING
+    }
+  }
+</script>
+
+{#each schemaProperties as [key, field]}
+  {#if canShowField(field, inputData)}
+    {@const { config, props, value, title } = schemaToUI(key, field, block)}
+    {#if config}
+      {#if config.wrapped === false}
+        <svelte:component
+          this={config.comp}
+          {bindings}
+          {block}
+          {context}
+          {key}
+          {...{ value, ...props }}
+          on:change={config.onChange ??
+            (e => {
+              defaultChange({ [key]: e.detail }, block)
+            })}
+        />
+      {:else}
+        <PropField label={title} fullWidth labelTooltip={config.tooltip || ""}>
+          <svelte:component
+            this={config.comp}
+            {bindings}
+            {block}
+            {context}
+            {key}
+            {...{ value, ...props }}
+            on:change={config.onChange ??
+              (e => {
+                defaultChange({ [key]: e.detail }, block)
+              })}
+          />
+        </PropField>
+      {/if}
+    {/if}
+  {/if}
+{/each}
diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte
index a9cb3cc64f..d9d37edda2 100644
--- a/packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationSelector.svelte
@@ -1,15 +1,18 @@
 <script>
-  import { Select, Label } from "@budibase/bbui"
+  import { Select } from "@budibase/bbui"
   import { createEventDispatcher } from "svelte"
   import { automationStore, selectedAutomation } from "@/stores/builder"
   import { TriggerStepID } from "@/constants/backend/automations"
   import DrawerBindableInput from "../../common/bindings/DrawerBindableInput.svelte"
   import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
+  import PropField from "./PropField.svelte"
 
   const dispatch = createEventDispatcher()
 
   export let value
   export let bindings = []
+  export let title
+
   const onChangeAutomation = e => {
     value.automationId = e.detail
     dispatch("change", value)
@@ -33,9 +36,8 @@
   )
 </script>
 
-<div class="schema-field">
-  <Label>Automation</Label>
-  <div class="field-width">
+<div class="selector">
+  <PropField label={title} fullWidth>
     <Select
       on:change={onChangeAutomation}
       value={value.automationId}
@@ -43,13 +45,12 @@
       getOptionValue={automation => automation._id}
       getOptionLabel={automation => automation.name}
     />
-  </div>
+  </PropField>
 </div>
 {#if Object.keys(automationFields)}
   {#each Object.keys(automationFields) as field}
     <div class="schema-field">
-      <Label>{field}</Label>
-      <div class="field-width">
+      <PropField label={field} fullWidth>
         <DrawerBindableInput
           panel={AutomationBindingPanel}
           extraThin
@@ -59,27 +60,12 @@
           {bindings}
           updateOnChange={false}
         />
-      </div>
+      </PropField>
     </div>
   {/each}
 {/if}
 
 <style>
-  .field-width {
-    width: 320px;
-  }
-
-  .schema-field {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-direction: row;
-    align-items: center;
-    gap: 10px;
-    flex: 1;
-    margin-bottom: 10px;
-  }
-
   .schema-field :global(label) {
     text-transform: capitalize;
   }
diff --git a/packages/builder/src/components/automation/SetupPanel/BlockData.svelte b/packages/builder/src/components/automation/SetupPanel/BlockData.svelte
new file mode 100644
index 0000000000..ba13f31d72
--- /dev/null
+++ b/packages/builder/src/components/automation/SetupPanel/BlockData.svelte
@@ -0,0 +1,385 @@
+<script lang="ts">
+  import {
+    Divider,
+    ActionButton,
+    notifications,
+    Helpers,
+    Icon,
+    Button,
+  } from "@budibase/bbui"
+  import JSONViewer, {
+    type JSONViewerClickEvent,
+  } from "@/components/common/JSONViewer.svelte"
+  import {
+    type AutomationStep,
+    type AutomationTrigger,
+    type Automation,
+    type LoopStepInputs,
+    type DidNotTriggerResponse,
+    type TestAutomationResponse,
+    type BlockRef,
+    type AutomationIOProps,
+    type AutomationStepResult,
+    AutomationStepStatus,
+    AutomationStatus,
+    AutomationStepType,
+    isDidNotTriggerResponse,
+    isTrigger,
+    isFilterStep,
+    isLoopStep,
+    BlockDefinitionTypes,
+    AutomationActionStepId,
+  } from "@budibase/types"
+  import Count from "./Count.svelte"
+  import { automationStore, selectedAutomation } from "@/stores/builder"
+  import {
+    type BlockStatus,
+    BlockStatusSource,
+    BlockStatusType,
+    DataMode,
+    RowSteps,
+  } from "@/types/automations"
+  import { createEventDispatcher } from "svelte"
+  import { cloneDeep } from "lodash"
+  import { type AutomationContext } from "@/stores/builder/automations"
+
+  export let context: AutomationContext | undefined
+  export let block: AutomationStep | AutomationTrigger | undefined
+  export let automation: Automation | undefined
+
+  const dispatch = createEventDispatcher()
+
+  const DataModeTabs = {
+    [DataMode.INPUT]: "Data In",
+    [DataMode.OUTPUT]: "Data Out",
+    [DataMode.ERRORS]: "Errors",
+  }
+
+  // Add explicit weight to the issue types
+  const issueOrder = {
+    [BlockStatusType.ERROR]: 0,
+    [BlockStatusType.WARN]: 1,
+    [BlockStatusType.INFO]: 2,
+  }
+
+  let dataMode: DataMode = DataMode.INPUT
+  let issues: BlockStatus[] = []
+
+  $: blockRef = block?.id
+    ? $selectedAutomation?.blockRefs?.[block.id]
+    : undefined
+
+  // The loop block associated with the selected block
+  $: loopRef = blockRef?.looped
+    ? $selectedAutomation.blockRefs[blockRef.looped]
+    : undefined
+  $: loopBlock = automationStore.actions.getBlockByRef(automation, loopRef)
+
+  $: if ($automationStore.selectedNodeId) {
+    dataMode = $automationStore.selectedNodeMode || DataMode.INPUT
+  }
+
+  $: testResults = $automationStore.testResults as TestAutomationResponse
+  $: blockResults = automationStore.actions.processBlockResults(
+    testResults,
+    block
+  )
+  $: processTestIssues(testResults, block)
+
+  /**
+   * Take the results of an automation and generate a
+   * list of graded issues. If the conditions get bigger they
+   * could be broken out.
+   *
+   * @param testResults
+   * @param block
+   */
+  const processTestIssues = (
+    testResults: TestAutomationResponse,
+    block: AutomationStep | AutomationTrigger | undefined
+  ) => {
+    // Reset issues
+    issues = []
+
+    if (!testResults || !block || !blockResults) {
+      return
+    }
+
+    // Process loop issues
+    if (blockRef?.looped && loopBlock && isLoopStep(loopBlock)) {
+      const inputs = loopBlock.inputs as LoopStepInputs
+      const loopMax = Number(inputs.iterations)
+      const loopOutputs = blockResults?.outputs
+
+      let loopMessage = "There was an error"
+
+      // Not technically failed as it continues to run
+      if (loopOutputs?.status === AutomationStepStatus.MAX_ITERATIONS) {
+        loopMessage = `The maximum number of iterations (${loopMax}) has been reached.`
+      } else if (
+        loopOutputs?.status === AutomationStepStatus.FAILURE_CONDITION
+      ) {
+        loopMessage = `The failure condition for the loop was hit: ${inputs.failure}.
+          The loop was terminated`
+      } else if (loopOutputs?.status === AutomationStepStatus.INCORRECT_TYPE) {
+        loopMessage = `An 'Input Type' of '${inputs.option}' was configured which does
+          not match the value supplied`
+      }
+
+      issues.push({
+        message: loopMessage,
+        type: BlockStatusType.ERROR,
+        source: BlockStatusSource.AUTOMATION_RESULTS,
+      })
+    }
+
+    // Process filtered row issues
+    else if (isTrigger(block) && isDidNotTriggerResponse(testResults)) {
+      issues.push({
+        message: (blockResults as DidNotTriggerResponse).message,
+        type: BlockStatusType.WARN,
+        source: BlockStatusSource.AUTOMATION_RESULTS,
+      })
+    }
+
+    // Filter step
+    else if (
+      isFilterStep(block) &&
+      blockResults?.outputs.status === AutomationStatus.STOPPED
+    ) {
+      issues.push({
+        message: `The conditions were not met and 
+          the automation flow was stopped.`,
+        type: BlockStatusType.WARN,
+        source: BlockStatusSource.AUTOMATION_RESULTS,
+      })
+    }
+
+    // Row step issues
+    else if (!isTrigger(block) && RowSteps.includes(block.stepId)) {
+      const outputs = (blockResults as AutomationStepResult)?.outputs
+      if (outputs.success) return
+      issues.push({
+        message: `Could not complete the row request: 
+          ${outputs.response?.message || JSON.stringify(outputs.response)}`,
+        type: BlockStatusType.ERROR,
+        source: BlockStatusSource.AUTOMATION_RESULTS,
+      })
+    }
+
+    // Default on error.
+    else if (!isTrigger(block) && !blockResults.outputs.success) {
+      issues.push({
+        message: `There was an issue with the step. See 'Data out' for more information`,
+        type: BlockStatusType.ERROR,
+        source: BlockStatusSource.AUTOMATION_RESULTS,
+      })
+    }
+
+    // Sort the issues
+    issues.sort((a, b) => issueOrder[a.type] - issueOrder[b.type])
+  }
+
+  const copyContext = (e: JSONViewerClickEvent) => {
+    Helpers.copyToClipboard(JSON.stringify(e.detail?.value))
+    notifications.success("Copied to clipboard")
+  }
+
+  /**
+   * Take the core AutomationContext and humanise it
+   * Before the test is run, populate the "Data in" values
+   * with the schema definition keyed by the readable step names.
+   */
+  const parseContext = (context?: AutomationContext, blockRef?: BlockRef) => {
+    if (!blockRef || !automation) {
+      return
+    }
+
+    let clonetext = cloneDeep(context)
+
+    const pathSteps = automationStore.actions.getPathSteps(
+      blockRef.pathTo,
+      automation
+    )
+
+    const defs = $automationStore.blockDefinitions
+    const stepNames = automation.definition.stepNames
+    const loopDef =
+      defs[BlockDefinitionTypes.ACTION]?.[AutomationActionStepId.LOOP]
+
+    // Exclude the trigger and loops from steps
+    const filteredSteps: Record<string, AutomationStep | AutomationIOProps> =
+      pathSteps
+        .slice(0, -1)
+        .filter(
+          (step): step is AutomationStep =>
+            step.type === AutomationStepType.ACTION &&
+            step.stepId !== AutomationActionStepId.LOOP
+        )
+        .reduce(
+          (
+            acc: Record<string, AutomationStep | AutomationIOProps>,
+            step: AutomationStep
+          ) => {
+            // Process the block
+            const blockRef = $selectedAutomation.blockRefs[step.id]
+            const blockDefinition =
+              defs[BlockDefinitionTypes.ACTION]?.[step.stepId]
+
+            // Check if the block has a loop
+            const loopRef = blockRef.looped
+              ? $selectedAutomation.blockRefs[blockRef.looped]
+              : undefined
+
+            const testData = context?.steps?.[step.id]
+            const sampleDef = loopRef ? loopDef : blockDefinition
+
+            // Prioritise the display of testData and fallback to step defs
+            // This will ensure users have at least an idea of what they are looking at
+            acc[stepNames?.[step.id] || step.name] =
+              testData || sampleDef?.schema.outputs.properties || {}
+
+            return acc
+          },
+          {} as Record<string, AutomationStep | AutomationIOProps>
+        )
+
+    return { ...clonetext, steps: filteredSteps }
+  }
+
+  $: parsedContext = parseContext(context, blockRef)
+</script>
+
+<div class="tabs">
+  {#each Object.values(DataMode) as mode}
+    <Count count={mode === DataMode.ERRORS ? issues.length : 0}>
+      <ActionButton
+        selected={mode === dataMode}
+        quiet
+        on:click={() => {
+          dataMode = mode
+        }}
+      >
+        {DataModeTabs[mode]}
+      </ActionButton>
+    </Count>
+  {/each}
+</div>
+<Divider noMargin />
+<div class="viewer">
+  {#if dataMode === DataMode.INPUT}
+    <JSONViewer
+      value={parsedContext}
+      showCopyIcon
+      on:click-copy={copyContext}
+    />
+  {:else if dataMode === DataMode.OUTPUT}
+    {#if blockResults}
+      <JSONViewer
+        value={blockResults.outputs}
+        showCopyIcon
+        on:click-copy={copyContext}
+      />
+    {:else if testResults && !blockResults}
+      <div class="content">
+        <span class="info">
+          This step was not executed as part of the test run
+        </span>
+      </div>
+    {:else}
+      <div class="content">
+        <span class="info">
+          Run the automation to show the output of this step
+        </span>
+        <Button
+          size={"S"}
+          icon={"Play"}
+          secondary
+          on:click={() => {
+            dispatch("run")
+          }}
+        >
+          Run
+        </Button>
+      </div>
+    {/if}
+  {:else}
+    <div class="issues" class:empty={!issues.length}>
+      {#if issues.length === 0}
+        <span>There are no current issues</span>
+      {:else}
+        {#each issues as issue}
+          <div class={`issue ${issue.type}`}>
+            <div class="icon"><Icon name="Alert" /></div>
+            <!-- For custom automations, the error message needs a default -->
+            <div class="message">
+              {issue.message || "There was an error"}
+            </div>
+          </div>
+          <Divider noMargin />
+        {/each}
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .content .info {
+    text-align: center;
+    max-width: 70%;
+  }
+  .tabs,
+  .viewer {
+    padding: var(--spacing-l);
+  }
+  .viewer {
+    overflow-y: scroll;
+    flex: 1;
+    padding-right: 0px;
+  }
+  .viewer .content {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: var(--spacing-l);
+  }
+  .tabs {
+    display: flex;
+    gap: var(--spacing-s);
+    padding: var(--spacing-m) var(--spacing-l);
+  }
+  .issue {
+    display: flex;
+    gap: var(--spacing-s);
+    width: 100%;
+    box-sizing: border-box;
+    padding-bottom: var(--spacing-l);
+  }
+  .issues {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+  .issues.empty {
+    align-items: center;
+    justify-content: center;
+  }
+  .issue.error .icon {
+    color: var(--spectrum-global-color-static-red-600);
+  }
+  .issue.warn .icon {
+    color: var(--spectrum-global-color-static-yellow-600);
+  }
+  .issues :global(hr.spectrum-Divider:last-child) {
+    display: none;
+  }
+  .issues .issue:not(:first-child) {
+    padding-top: var(--spacing-l);
+  }
+  .issues {
+    word-break: break-word;
+  }
+</style>
diff --git a/packages/builder/src/components/automation/SetupPanel/BlockHeader.svelte b/packages/builder/src/components/automation/SetupPanel/BlockHeader.svelte
new file mode 100644
index 0000000000..bdb1824dab
--- /dev/null
+++ b/packages/builder/src/components/automation/SetupPanel/BlockHeader.svelte
@@ -0,0 +1,236 @@
+<script lang="ts">
+  import { Body, Tags, Tag, Icon, TooltipPosition } from "@budibase/bbui"
+  import {
+    type AutomationStep,
+    type AutomationTrigger,
+    type Automation,
+    AutomationStepType,
+    isBranchStep,
+    isActionStep,
+  } from "@budibase/types"
+  import {
+    type ExternalAction,
+    externalActions,
+  } from "@/components/automation/AutomationBuilder/FlowChart/ExternalActions"
+  import { automationStore } from "@/stores/builder"
+  import { createEventDispatcher } from "svelte"
+
+  export let block: AutomationStep | AutomationTrigger | undefined = undefined
+  export let automation: Automation | undefined = undefined
+  export let itemName: string | undefined = undefined
+  export let disabled: boolean = false
+
+  const dispatch = createEventDispatcher()
+
+  let externalAction: ExternalAction | undefined
+  let editing: boolean
+  let validRegex: RegExp = /^[A-Za-z0-9_\s]+$/
+
+  $: stepNames = automation?.definition.stepNames || {}
+  $: blockHeading = getHeading(itemName, block) || ""
+  $: blockNameError = getStepNameError(blockHeading)
+  $: isBranch = block && isBranchStep(block)
+
+  const getHeading = (
+    itemName?: string,
+    block?: AutomationStep | AutomationTrigger
+  ) => {
+    if (itemName) {
+      return itemName
+    } else if (block) {
+      return stepNames?.[block?.id] || block?.name
+    }
+  }
+
+  $: isTrigger = block?.type === AutomationStepType.TRIGGER
+  $: allSteps = automation?.definition.steps || []
+  $: blockDefinition = automationStore.actions.getBlockDefinition(block)
+
+  // Put the type in the header if they change the name
+  // Otherwise the info is obscured
+  $: blockTitle = isBranch
+    ? "Branch"
+    : `${
+        block &&
+        block?.id in stepNames &&
+        stepNames[block?.id] !== blockDefinition?.name
+          ? blockDefinition?.name
+          : "Step"
+      }`
+
+  // Parse external actions
+  $: if (block && isActionStep(block) && block?.stepId in externalActions) {
+    externalAction = externalActions[block?.stepId]
+  } else {
+    externalAction = undefined
+  }
+
+  const getStepNameError = (name: string) => {
+    if (!block) {
+      return
+    }
+    const duplicateError =
+      "This name already exists, please enter a unique name"
+    if (editing) {
+      for (const [key, value] of Object.entries(stepNames)) {
+        if (name !== block.name && name === value && key !== block.id) {
+          return duplicateError
+        }
+      }
+
+      for (const step of allSteps) {
+        if (step.id !== block.id && name === step.name) {
+          return duplicateError
+        }
+      }
+    }
+
+    if (name !== block.name && name?.length > 0) {
+      let invalidRoleName = !validRegex.test(name)
+      if (invalidRoleName) {
+        return "Please enter a name consisting of only alphanumeric symbols and underscores"
+      }
+    }
+  }
+
+  const startEditing = () => {
+    editing = true
+  }
+
+  const stopEditing = () => {
+    editing = false
+    if (blockNameError) {
+      blockHeading =
+        (block ? stepNames[block?.id] : undefined) || block?.name || ""
+    } else {
+      dispatch("update", blockHeading)
+    }
+  }
+
+  const handleInput = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    blockHeading = target.value.trim()
+  }
+</script>
+
+<div class="block-details">
+  {#if block}
+    {#if externalAction}
+      <img
+        alt={externalAction.name}
+        src={externalAction.icon}
+        width="28px"
+        height="28px"
+      />
+    {:else}
+      <svg
+        width="28px"
+        height="28px"
+        class="spectrum-Icon"
+        style="color:var(--spectrum-global-color-gray-700);"
+        focusable="false"
+      >
+        <use xlink:href="#spectrum-icon-18-{block.icon}" />
+      </svg>
+    {/if}
+    <div class="heading">
+      {#if isTrigger}
+        <Body size="XS"><b>Trigger</b></Body>
+      {:else}
+        <Body size="XS">
+          <div class="step">
+            <b>{blockTitle}</b>
+            {#if blockDefinition?.deprecated}
+              <Tags>
+                <Tag invalid>Deprecated</Tag>
+              </Tags>
+            {/if}
+          </div>
+        </Body>
+      {/if}
+      <input
+        class="input-text"
+        placeholder={`Enter step name`}
+        name="name"
+        autocomplete="off"
+        disabled={isTrigger || disabled}
+        value={blockHeading}
+        on:input={handleInput}
+        on:click={e => {
+          e.stopPropagation()
+          startEditing()
+        }}
+        on:keydown={async e => {
+          if (e.key === "Enter") {
+            stopEditing()
+          }
+        }}
+        on:blur={stopEditing}
+      />
+    </div>
+  {/if}
+  {#if blockNameError && editing}
+    <div class="error-container">
+      <div class="error-icon">
+        <Icon
+          size="S"
+          name="Alert"
+          tooltip={blockNameError}
+          tooltipPosition={TooltipPosition.Left}
+        />
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .step {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+  input {
+    color: var(--ink);
+    background-color: transparent;
+    border: 1px solid transparent;
+    box-sizing: border-box;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 100%;
+  }
+
+  .input-text {
+    font-size: var(--spectrum-alias-font-size-default);
+    font-family: var(--font-sans);
+    text-overflow: ellipsis;
+    padding-left: 0px;
+    border: 0px;
+  }
+
+  input:focus {
+    outline: none;
+  }
+
+  /* Hide arrows for number fields */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  .block-details {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-l);
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .error-icon :global(.spectrum-Icon) {
+    fill: var(--spectrum-global-color-red-600);
+  }
+
+  .heading {
+    flex: 1;
+  }
+</style>
diff --git a/packages/builder/src/components/automation/SetupPanel/BlockProperties.svelte b/packages/builder/src/components/automation/SetupPanel/BlockProperties.svelte
new file mode 100644
index 0000000000..6458c7aee8
--- /dev/null
+++ b/packages/builder/src/components/automation/SetupPanel/BlockProperties.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { automationStore } from "@/stores/builder"
+  import { memo } from "@budibase/frontend-core"
+  import { environment } from "@/stores/portal"
+  import {
+    type AutomationStep,
+    type AutomationTrigger,
+    type Automation,
+  } from "@budibase/types"
+  import { type SchemaConfigProps } from "@/types/automations"
+  import { writable } from "svelte/store"
+  import { getCustomStepLayout } from "./layouts"
+  import AutomationSchemaLayout from "./AutomationSchemaLayout.svelte"
+  import AutomationCustomLayout from "./AutomationCustomLayout.svelte"
+
+  export let block: AutomationStep | AutomationTrigger | undefined = undefined
+  export let automation: Automation | undefined = undefined
+  export let context: {} | undefined
+
+  const memoEnvVariables = memo($environment.variables)
+
+  // Databindings requires TypeScript conversion
+  let environmentBindings: any[]
+
+  // All bindings available to this point
+  $: availableBindings = automationStore.actions.getPathBindings(
+    block?.id,
+    automation
+  )
+
+  // Fetch the env bindings
+  $: if ($memoEnvVariables) {
+    environmentBindings = automationStore.actions.buildEnvironmentBindings()
+  }
+  $: userBindings = automationStore.actions.buildUserBindings()
+  $: settingBindings = automationStore.actions.buildSettingBindings()
+
+  // Combine all bindings for the step
+  $: bindings = [
+    ...availableBindings,
+    ...environmentBindings,
+    ...userBindings,
+    ...settingBindings,
+  ]
+
+  // Store for any UX related data
+  const stepStore = writable<Record<string, any>>({})
+  $: if (block?.id) {
+    stepStore.update(state => ({ ...state, [block.id]: {} }))
+  }
+
+  // Determine if any custom step layouts have been created
+  let customLayout: SchemaConfigProps[] | undefined
+  $: if ($stepStore) {
+    customLayout = getCustomStepLayout(block, stepStore)
+  }
+</script>
+
+{#if customLayout}
+  <!-- Render custom layout 1 or more components in a custom layout -->
+  <AutomationCustomLayout {context} {bindings} {block} layout={customLayout} />
+{:else}
+  <!-- Render Automation Step Schema > [string, BaseIOStructure][] -->
+  <AutomationSchemaLayout {context} {bindings} {block} />
+{/if}
diff --git a/packages/builder/src/components/automation/SetupPanel/Count.svelte b/packages/builder/src/components/automation/SetupPanel/Count.svelte
new file mode 100644
index 0000000000..4f49dc468f
--- /dev/null
+++ b/packages/builder/src/components/automation/SetupPanel/Count.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { createEventDispatcher } from "svelte"
+  import { AbsTooltip } from "@budibase/bbui"
+
+  export let count: number = 0
+  export let tooltip: string | undefined = undefined
+  export let hoverable: boolean = true
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<div class="wrapper">
+  <AbsTooltip text={tooltip}>
+    {#if count}
+      <span
+        class="count"
+        role="button"
+        tabindex="-1"
+        aria-label={`Notifications ${count}`}
+        class:hoverable
+        on:mouseenter={() => {
+          dispatch("hover")
+        }}
+      >
+        {count}
+      </span>
+    {/if}
+  </AbsTooltip>
+  <slot />
+</div>
+
+<style>
+  .wrapper {
+    position: relative;
+  }
+  .count {
+    position: absolute;
+    right: -6px;
+    top: -6px;
+    background: var(--spectrum-global-color-static-red-600);
+    color: white;
+    border-radius: 8px;
+    padding: 0 4px;
+    z-index: 2;
+    font-size: 0.8em;
+    cursor: default;
+  }
+  .count.hoverable {
+    cursor: pointer;
+  }
+</style>
diff --git a/packages/builder/src/components/automation/SetupPanel/DateSelector.svelte b/packages/builder/src/components/automation/SetupPanel/DateSelector.svelte
new file mode 100644
index 0000000000..f5dff35822
--- /dev/null
+++ b/packages/builder/src/components/automation/SetupPanel/DateSelector.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import {
+    DrawerBindableSlot,
+    ServerBindingPanel as AutomationBindingPanel,
+  } from "@/components/common/bindings"
+  import { DatePicker } from "@budibase/bbui"
+  import { type EnrichedBinding } from "@budibase/types"
+  import { createEventDispatcher } from "svelte"
+
+  export let context: Record<any, any> | undefined = undefined
+  export let bindings: EnrichedBinding[] | undefined = undefined
+  export let value: string | undefined = undefined
+  export let title: string | undefined = undefined
+  export let disabled: boolean | undefined = false
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<DrawerBindableSlot
+  {title}
+  panel={AutomationBindingPanel}
+  type={"date"}
+  {value}
+  on:change={e => dispatch("change", e.detail)}
+  {bindings}
+  allowJS={true}
+  updateOnChange={false}
+  {disabled}
+  {context}
+>
+  <DatePicker
+    {value}
+    on:change={e => {
+      dispatch("change", e.detail)
+    }}
+  />
+</DrawerBindableSlot>
diff --git a/packages/builder/src/components/automation/SetupPanel/ExecuteScript.svelte b/packages/builder/src/components/automation/SetupPanel/ExecuteScript.svelte
new file mode 100644
index 0000000000..26047893c8
--- /dev/null
+++ b/packages/builder/src/components/automation/SetupPanel/ExecuteScript.svelte
@@ -0,0 +1,111 @@
+<script lang="ts">
+  import { BindingSidePanel } from "@/components/common/bindings"
+  import {
+    BindingType,
+    BindingHelpers,
+  } from "@/components/common/bindings/utils"
+  import CodeEditor from "@/components/common/CodeEditor/CodeEditor.svelte"
+  import {
+    bindingsToCompletions,
+    hbAutocomplete,
+    EditorModes,
+  } from "@/components/common/CodeEditor"
+  import { CodeEditorModal } from "@/components/automation/SetupPanel"
+  import { createEventDispatcher } from "svelte"
+  import {
+    AutomationActionStepId,
+    type AutomationStep,
+    type CaretPositionFn,
+    type InsertAtPositionFn,
+    type EnrichedBinding,
+    BindingMode,
+  } from "@budibase/types"
+
+  const dispatch = createEventDispatcher()
+
+  export let value: string | undefined
+  export let isJS: boolean = true
+  export let block: AutomationStep
+  export let context
+  export let bindings
+
+  let getCaretPosition: CaretPositionFn | undefined
+  let insertAtPos: InsertAtPositionFn | undefined
+
+  $: codeMode =
+    block.stepId === AutomationActionStepId.EXECUTE_BASH
+      ? EditorModes.Handlebars
+      : EditorModes.JS
+  $: bindingsHelpers = new BindingHelpers(getCaretPosition, insertAtPos, {
+    disableWrapping: true,
+  })
+  $: editingJs = codeMode === EditorModes.JS
+  $: stepCompletions =
+    codeMode === EditorModes.Handlebars
+      ? [hbAutocomplete([...bindingsToCompletions(bindings, codeMode)])]
+      : []
+
+  const addBinding = (binding: EnrichedBinding) =>
+    bindingsHelpers.onSelectBinding(value, binding, {
+      js: true,
+      dontDecode: true,
+      type: BindingType.RUNTIME,
+    })
+</script>
+
+<!-- DEPRECATED -->
+<CodeEditorModal
+  on:hide={() => {
+    // Push any pending changes when the window closes
+    dispatch("change", value)
+  }}
+>
+  <div class:js-editor={isJS}>
+    <div class:js-code={isJS} style="width:100%;height:500px;">
+      <CodeEditor
+        {value}
+        on:change={e => {
+          // need to pass without the value inside
+          value = e.detail
+        }}
+        completions={stepCompletions}
+        mode={codeMode}
+        autocompleteEnabled={codeMode !== EditorModes.JS}
+        bind:getCaretPosition
+        bind:insertAtPos
+        placeholder={codeMode === EditorModes.Handlebars
+          ? "Add bindings by typing {{"
+          : null}
+      />
+    </div>
+    {#if editingJs}
+      <div class="js-binding-picker">
+        <BindingSidePanel
+          {bindings}
+          allowHelpers={false}
+          {addBinding}
+          mode={BindingMode.JavaScript}
+          {context}
+        />
+      </div>
+    {/if}
+  </div>
+</CodeEditorModal>
+
+<style>
+  .js-editor {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    width: 100%;
+  }
+
+  .js-code {
+    flex: 7;
+  }
+
+  .js-binding-picker {
+    flex: 3;
+    margin-top: calc((var(--spacing-xl) * -1) + 1px);
+  }
+</style>
diff --git a/packages/builder/src/components/automation/SetupPanel/ExecuteScriptV2.svelte b/packages/builder/src/components/automation/SetupPanel/ExecuteScriptV2.svelte
new file mode 100644
index 0000000000..a5ba264f60
--- /dev/null
+++ b/packages/builder/src/components/automation/SetupPanel/ExecuteScriptV2.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+  import {
+    DrawerBindableSlot,
+    ServerBindingPanel as AutomationBindingPanel,
+  } from "@/components/common/bindings"
+  import { createEventDispatcher } from "svelte"
+  import { type EnrichedBinding, FieldType } from "@budibase/types"
+  import CodeEditorField from "@/components/common/bindings/CodeEditorField.svelte"
+  import { DropdownPosition } from "@/components/common/CodeEditor/CodeEditor.svelte"
+
+  export let value: string
+  export let context: Record<any, any> | undefined = undefined
+  export let bindings: EnrichedBinding[] | undefined
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<div class="scriptv2-wrapper">
+  <DrawerBindableSlot
+    title={"Edit Code"}
+    panel={AutomationBindingPanel}
+    type={FieldType.LONGFORM}
+    on:change={e => dispatch("change", e.detail)}
+    {value}
+    {bindings}
+    allowJS={true}
+    allowHBS={false}
+    updateOnChange={false}
+    {context}
+  >
+    <div class="field-wrap code-editor">
+      <CodeEditorField
+        {value}
+        {bindings}
+        {context}
+        placeholder={"Add bindings by typing $"}
+        on:change={e => dispatch("change", e.detail)}
+        dropdown={DropdownPosition.Relative}
+      />
+    </div>
+  </DrawerBindableSlot>
+</div>
+
+<style>
+  .field-wrap :global(.cm-editor),
+  .field-wrap :global(.cm-scroller) {
+    border-radius: 4px;
+  }
+  .field-wrap {
+    box-sizing: border-box;
+    border: 1px solid var(--spectrum-global-color-gray-400);
+    border-radius: 4px;
+  }
+  .field-wrap.code-editor {
+    height: 180px;
+  }
+
+  .scriptv2-wrapper :global(.icon.slot-icon),
+  .scriptv2-wrapper :global(.text-area-slot-icon) {
+    right: 1px;
+    top: 1px;
+    border-top-right-radius: var(--spectrum-alias-border-radius-regular);
+    border-bottom-left-radius: var(--spectrum-alias-border-radius-regular);
+    border-right: 0px;
+    border-bottom: 1px solid var(--spectrum-alias-border-color);
+  }
+</style>
diff --git a/packages/builder/src/components/automation/SetupPanel/FileSelector.svelte b/packages/builder/src/components/automation/SetupPanel/FileSelector.svelte
new file mode 100644
index 0000000000..2ca1b02191
--- /dev/null
+++ b/packages/builder/src/components/automation/SetupPanel/FileSelector.svelte
@@ -0,0 +1,89 @@
+<script lang="ts">
+  import KeyValueBuilder from "@/components/integration/KeyValueBuilder.svelte"
+  import { Toggle } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import {
+    DrawerBindableInput,
+    ServerBindingPanel as AutomationBindingPanel,
+  } from "@/components/common/bindings"
+  import { type KeyValuePair } from "@/types/automations"
+
+  export let useAttachmentBinding
+  export let buttonText
+  export let key
+  export let context
+  export let value
+  export let bindings
+
+  const dispatch = createEventDispatcher()
+
+  interface Attachment {
+    filename: string
+    url: string
+  }
+
+  const handleAttachmentParams = (keyValueObj: Attachment[]) => {
+    let params: Record<string, string> = {}
+    if (keyValueObj?.length) {
+      for (let param of keyValueObj) {
+        params[param.url] = param.filename
+      }
+    }
+    return params
+  }
+
+  const handleKeyValueChange = (e: CustomEvent<KeyValuePair[]>) => {
+    const update = {
+      [key]: e.detail.map(({ name, value }) => ({
+        url: name,
+        filename: value,
+      })),
+    }
+
+    dispatch("change", update)
+  }
+</script>
+
+<div class="attachment-field-wrapper">
+  <div class="toggle-container">
+    <Toggle
+      value={useAttachmentBinding}
+      text={"Use bindings"}
+      on:change={e => {
+        dispatch("change", {
+          [key]: null,
+          meta: {
+            useAttachmentBinding: e.detail,
+          },
+        })
+      }}
+    />
+  </div>
+
+  <div class="attachment-field-width">
+    {#if !useAttachmentBinding}
+      {#key value}
+        <KeyValueBuilder
+          on:change={handleKeyValueChange}
+          object={handleAttachmentParams(value)}
+          allowJS
+          {bindings}
+          keyBindings
+          customButtonText={buttonText}
+          keyPlaceholder={"URL"}
+          valuePlaceholder={"Filename"}
+          {context}
+        />
+      {/key}
+    {:else}
+      <DrawerBindableInput
+        panel={AutomationBindingPanel}
+        {value}
+        on:change={e => dispatch("change", { [key]: e.detail })}
+        {bindings}
+        updateOnChange={false}
+        {context}
+      />
+    {/if}
+  </div>
+</div>
diff --git a/packages/builder/src/components/automation/SetupPanel/FilterSelector.svelte b/packages/builder/src/components/automation/SetupPanel/FilterSelector.svelte
new file mode 100644
index 0000000000..6de5e54398
--- /dev/null
+++ b/packages/builder/src/components/automation/SetupPanel/FilterSelector.svelte
@@ -0,0 +1,122 @@
+<script lang="ts">
+  import { ActionButton, Drawer, DrawerContent, Button } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+  import { getSchemaForDatasourcePlus } from "@/dataBinding"
+  import { ServerBindingPanel as AutomationBindingPanel } from "@/components/common/bindings"
+  import FilterBuilder from "@/components/design/settings/controls/FilterEditor/FilterBuilder.svelte"
+  import { tables, automationStore } from "@/stores/builder"
+  import type {
+    AutomationStep,
+    AutomationTrigger,
+    BaseIOStructure,
+    UISearchFilter,
+  } from "@budibase/types"
+  import { AutomationCustomIOType } from "@budibase/types"
+  import { utils } from "@budibase/shared-core"
+  import { QueryUtils, Utils, search } from "@budibase/frontend-core"
+  import { cloneDeep } from "lodash"
+  import { type DynamicProperties, type StepInputs } from "@/types/automations"
+
+  export let block: AutomationStep | AutomationTrigger | undefined
+  export let context
+  export let bindings
+  export let key
+
+  // Mix in dynamic filter props
+  type DynamicInputs = StepInputs & DynamicProperties
+
+  const dispatch = createEventDispatcher()
+
+  let drawer: Drawer
+
+  $: inputData = automationStore.actions.getInputData(block)
+
+  $: schemaProperties = Object.entries(block?.schema?.inputs?.properties || {})
+  $: filters = lookForFilters(schemaProperties)
+  $: filterCount =
+    filters?.groups?.reduce((acc: number, group) => {
+      acc = acc += group?.filters?.length || 0
+      return acc
+    }, 0) || 0
+
+  $: tempFilters = cloneDeep(filters)
+
+  $: tableId = inputData && "tableId" in inputData ? inputData.tableId : null
+
+  $: schema = getSchemaForDatasourcePlus(tableId, {
+    searchableSchema: true,
+  }).schema
+
+  $: schemaFields = search.getFields(
+    $tables.list,
+    Object.values(schema || {}),
+    { allowLinks: false }
+  )
+
+  const lookForFilters = (
+    properties: [string, BaseIOStructure][]
+  ): UISearchFilter | undefined => {
+    if (!properties || !inputData) {
+      return
+    }
+
+    let filter: UISearchFilter | undefined
+
+    // Does not appear in the test modal. Check testData
+    const inputs = inputData as DynamicInputs
+    for (let [key, field] of properties) {
+      // need to look for the builder definition (keyed separately, see saveFilters)
+      if (
+        (field.customType === AutomationCustomIOType.FILTERS ||
+          field.customType === AutomationCustomIOType.TRIGGER_FILTER) &&
+        `${key}-def` in inputs
+      ) {
+        filter = inputs[`${key}-def`]
+        break
+      }
+    }
+
+    return Array.isArray(filter) ? utils.processSearchFilters(filter) : filter
+  }
+
+  function saveFilters(key: string, filters?: UISearchFilter) {
+    const update = filters ? Utils.parseFilter(filters) : filters
+    const query = QueryUtils.buildQuery(update)
+
+    dispatch("change", {
+      [key]: query,
+      [`${key}-def`]: update, // need to store the builder definition in the automation
+    })
+
+    drawer.hide()
+  }
+</script>
+
+<ActionButton fullWidth on:click={drawer.show}>
+  {filterCount > 0 ? "Update Filter" : "No Filter set"}
+</ActionButton>
+
+<Drawer
+  bind:this={drawer}
+  title="Filtering"
+  forceModal
+  on:drawerShow={() => {
+    tempFilters = filters
+  }}
+>
+  <Button cta slot="buttons" on:click={() => saveFilters(key, tempFilters)}>
+    Save
+  </Button>
+
+  <DrawerContent slot="body">
+    <FilterBuilder
+      filters={tempFilters}
+      {bindings}
+      {schemaFields}
+      datasource={{ type: "table", tableId }}
+      panel={AutomationBindingPanel}
+      on:change={e => (tempFilters = e.detail)}
+      evaluationContext={context}
+    />
+  </DrawerContent>
+</Drawer>
diff --git a/packages/builder/src/components/automation/SetupPanel/PropField.svelte b/packages/builder/src/components/automation/SetupPanel/PropField.svelte
index ba3c0ff081..6f202719bd 100644
--- a/packages/builder/src/components/automation/SetupPanel/PropField.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/PropField.svelte
@@ -1,10 +1,10 @@
-<script>
+<script lang="ts">
   import { Label } from "@budibase/bbui"
 
-  export let label
-  export let labelTooltip
-  export let fullWidth = false
-  export let componentWidth = 320
+  export let label: string | undefined = ""
+  export let labelTooltip: string | undefined = ""
+  export let fullWidth: boolean | undefined = false
+  export let componentWidth: number | undefined = 320
 </script>
 
 <div
diff --git a/packages/builder/src/components/automation/SetupPanel/RowFetch.svelte b/packages/builder/src/components/automation/SetupPanel/RowFetch.svelte
new file mode 100644
index 0000000000..7260957342
--- /dev/null
+++ b/packages/builder/src/components/automation/SetupPanel/RowFetch.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+  import { API } from "@/api"
+  import { tables } from "@/stores/builder"
+  import { type TableDatasource, SortOrder } from "@budibase/types"
+  import { fetchData } from "@budibase/frontend-core"
+  import type TableFetch from "@budibase/frontend-core/src/fetch/TableFetch"
+  import { Select } from "@budibase/bbui"
+
+  export let tableId: string | undefined
+
+  let datasource: TableDatasource
+  let fetch: TableFetch | undefined
+  let rowSearchTerm = ""
+  let selectedRow
+
+  $: primaryDisplay = table?.primaryDisplay
+
+  $: table = tableId
+    ? $tables.list.find(table => table._id === tableId)
+    : undefined
+
+  $: if (table && tableId) {
+    datasource = { type: "table", tableId }
+    fetch = createFetch(datasource)
+  }
+
+  $: if (rowSearchTerm && primaryDisplay) {
+    fetch?.update({
+      query: {
+        fuzzy: {
+          [primaryDisplay]: rowSearchTerm || "",
+        },
+      },
+    })
+  }
+
+  const createFetch = (datasource: TableDatasource) => {
+    if (!datasource || !primaryDisplay) {
+      return
+    }
+
+    return fetchData({
+      API,
+      datasource,
+      options: {
+        sortColumn: primaryDisplay,
+        sortOrder: SortOrder.ASCENDING,
+        query: {
+          fuzzy: {
+            [primaryDisplay]: rowSearchTerm || "",
+          },
+        },
+        limit: 20,
+      },
+    })
+  }
+
+  $: fetchedRows = fetch ? $fetch?.rows : []
+  $: fetchLoading = fetch ? $fetch?.loading : false
+
+  const compare = (a: any, b: any) => {
+    primaryDisplay && a?.[primaryDisplay] === b?.[primaryDisplay]
+  }
+</script>
+
+<Select
+  placeholder={"Select a row"}
+  options={fetchedRows}
+  loading={fetchLoading}
+  value={selectedRow}
+  autocomplete={true}
+  getOptionLabel={row => (primaryDisplay ? row?.[primaryDisplay] : "")}
+  {compare}
+/>
diff --git a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
index 0cd6d98c33..73b2aba18d 100644
--- a/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
@@ -11,8 +11,6 @@
   import { FieldType } from "@budibase/types"
 
   import RowSelectorTypes from "./RowSelectorTypes.svelte"
-  import DrawerBindableSlot from "../../common/bindings/DrawerBindableSlot.svelte"
-  import AutomationBindingPanel from "../../common/bindings/ServerBindingPanel.svelte"
   import { FIELDS } from "@/constants/backend"
   import { capitalise } from "@/helpers"
   import { memo } from "@budibase/frontend-core"
@@ -26,6 +24,8 @@
   export let bindings
   export let isTestModal
   export let context = {}
+  export let componentWidth
+  export let fullWidth = false
 
   const typeToField = Object.values(FIELDS).reduce((acc, field) => {
     acc[field.type] = field
@@ -234,66 +234,28 @@
     )
     dispatch("change", result)
   }
-
-  /**
-   * Converts arrays into strings. The CodeEditor expects a string or encoded JS
-   * @param{object} fieldValue
-   */
-  const drawerValue = fieldValue => {
-    return Array.isArray(fieldValue) ? fieldValue.join(",") : fieldValue
-  }
 </script>
 
 {#each schemaFields || [] as [field, schema]}
   {#if !schema.autocolumn && Object.hasOwn(editableFields, field)}
-    <PropField label={field} fullWidth={isFullWidth(schema.type)}>
+    <PropField
+      label={field}
+      fullWidth={fullWidth || isFullWidth(schema.type)}
+      {componentWidth}
+    >
       <div class="prop-control-wrap">
-        {#if isTestModal}
-          <RowSelectorTypes
-            {isTestModal}
-            {field}
-            {schema}
-            bindings={parsedBindings}
-            value={editableRow}
-            meta={{
-              fields: editableFields,
-            }}
-            {onChange}
-            {context}
-          />
-        {:else}
-          <DrawerBindableSlot
-            title={$memoStore?.row?.title || field}
-            panel={AutomationBindingPanel}
-            type={schema.type}
-            {schema}
-            value={drawerValue(editableRow[field])}
-            on:change={e =>
-              onChange({
-                row: {
-                  [field]: e.detail,
-                },
-              })}
-            {bindings}
-            allowJS={true}
-            updateOnChange={false}
-            drawerLeft="260px"
-            {context}
-          >
-            <RowSelectorTypes
-              {isTestModal}
-              {field}
-              {schema}
-              bindings={parsedBindings}
-              value={editableRow}
-              meta={{
-                fields: editableFields,
-              }}
-              {context}
-              onChange={change => onChange(change)}
-            />
-          </DrawerBindableSlot>
-        {/if}
+        <RowSelectorTypes
+          {isTestModal}
+          {field}
+          {schema}
+          bindings={parsedBindings}
+          value={editableRow}
+          meta={{
+            fields: editableFields,
+          }}
+          {onChange}
+          {context}
+        />
       </div>
     </PropField>
   {/if}
@@ -305,24 +267,30 @@
     class:empty={Object.is(editableFields, {})}
     bind:this={popoverAnchor}
   >
-    <ActionButton
-      icon="Add"
-      on:click={() => {
-        customPopover.show()
-      }}
-      disabled={!schemaFields}
-      >Add fields
-    </ActionButton>
-    <ActionButton
-      icon="Remove"
-      on:click={() => {
-        dispatch("change", {
-          meta: { fields: {} },
-          row: {},
-        })
-      }}
-      >Clear
-    </ActionButton>
+    <PropField {componentWidth} {fullWidth}>
+      <div class="prop-control-wrap">
+        <ActionButton
+          on:click={() => {
+            customPopover.show()
+          }}
+          disabled={!schemaFields}
+        >
+          Edit fields
+        </ActionButton>
+        {#if schemaFields.length}
+          <ActionButton
+            on:click={() => {
+              dispatch("change", {
+                meta: { fields: {} },
+                row: {},
+              })
+            }}
+          >
+            Clear
+          </ActionButton>
+        {/if}
+      </div>
+    </PropField>
   </div>
 {/if}
 
@@ -388,11 +356,4 @@
   .prop-control-wrap :global(.icon.json-slot-icon) {
     right: 1px !important;
   }
-
-  .add-fields-btn {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    gap: var(--spacing-s);
-  }
 </style>
diff --git a/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
index 5488e9651c..45c81af14a 100644
--- a/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
@@ -7,7 +7,7 @@
   const dispatch = createEventDispatcher()
 
   export let value
-  export let isTrigger
+  export let isTrigger = false
   export let disabled = false
 
   $: filteredTables = $tables.list.filter(table => {
diff --git a/packages/builder/src/components/automation/SetupPanel/index.ts b/packages/builder/src/components/automation/SetupPanel/index.ts
new file mode 100644
index 0000000000..1a99b48e7c
--- /dev/null
+++ b/packages/builder/src/components/automation/SetupPanel/index.ts
@@ -0,0 +1,33 @@
+// Schema UX Types
+import FilterSelector from "./FilterSelector.svelte"
+import ExecuteScript from "./ExecuteScript.svelte"
+import ExecuteScriptV2 from "./ExecuteScriptV2.svelte"
+import DateSelector from "./DateSelector.svelte"
+import SchemaSetup from "./SchemaSetup.svelte"
+import TableSelector from "./TableSelector.svelte"
+import CronBuilder from "./CronBuilder.svelte"
+import FieldSelector from "./FieldSelector.svelte"
+import FileSelector from "./FileSelector.svelte"
+import RowSelector from "./RowSelector.svelte"
+import AutomationSelector from "./AutomationSelector.svelte"
+import PropField from "./PropField.svelte"
+import QueryParamSelector from "./QueryParamSelector.svelte"
+import CodeEditorModal from "./CodeEditorModal.svelte"
+
+export {
+  FilterSelector,
+  ExecuteScriptV2,
+  DateSelector,
+  SchemaSetup,
+  TableSelector,
+  CronBuilder,
+  FieldSelector,
+  FileSelector,
+  RowSelector,
+  AutomationSelector,
+  PropField,
+  QueryParamSelector,
+  CodeEditorModal,
+  // DEPRECATED
+  ExecuteScript,
+}
diff --git a/packages/builder/src/components/automation/SetupPanel/layouts.ts b/packages/builder/src/components/automation/SetupPanel/layouts.ts
new file mode 100644
index 0000000000..0cf3a8a09a
--- /dev/null
+++ b/packages/builder/src/components/automation/SetupPanel/layouts.ts
@@ -0,0 +1,330 @@
+import { DrawerBindableInput } from "@/components/common/bindings"
+import { automationStore, selectedAutomation } from "@/stores/builder"
+import { Divider, Helpers, Select } from "@budibase/bbui"
+import {
+  AutomationEventType,
+  AutomationStep,
+  AutomationStepType,
+  AutomationTrigger,
+  BaseIOStructure,
+  isTrigger,
+  Row,
+} from "@budibase/types"
+import AutomationBindingPanel from "@/components/common/bindings/ServerBindingPanel.svelte"
+import { RowSelector, TableSelector } from "."
+import { get, Writable } from "svelte/store"
+import {
+  type StepInputs,
+  type SchemaConfigProps,
+  type FormUpdate,
+} from "@/types/automations"
+import RowFetch from "./RowFetch.svelte"
+
+export const getInputValue = (inputData: StepInputs, key: string) => {
+  const idxInput = inputData as Record<string, unknown>
+  return idxInput?.[key]
+}
+
+// We do not enforce required fields.
+export const getFieldLabel = (
+  key: string,
+  value: BaseIOStructure,
+  isRequired = false
+) => {
+  const requiredSuffix = isRequired ? "*" : ""
+  const label = `${
+    value.title || (key === "row" ? "Row" : key)
+  } ${requiredSuffix}`
+  return Helpers.capitalise(label)
+}
+
+/**
+ * Returns a custom step layout. This generates an array of ui elements
+ * intended to be rendered as a uniform column
+ * If you intend to have a completely unique UX,
+ *
+ * @param block
+ * @param stepState
+ * @param isTest
+ * @returns
+ */
+
+export const getCustomStepLayout = (
+  block: AutomationStep | AutomationTrigger | undefined,
+  stepState: Writable<Record<string, any>>,
+  isTest = false
+): SchemaConfigProps[] | undefined => {
+  if (!block) {
+    return
+  }
+
+  // Use the test data for test mode otherwise resolve trigger/step inputs by block
+  const fieldData = isTest
+    ? get(selectedAutomation)?.data?.testData
+    : automationStore.actions.getInputData(block)
+
+  const coreDivider = {
+    comp: Divider,
+    props: () => ({
+      noMargin: true,
+    }),
+    wrapped: false,
+  }
+
+  const getIdConfig = (rowIdentifier: string): SchemaConfigProps[] => {
+    const schema =
+      block.type === AutomationStepType.TRIGGER
+        ? block.schema.outputs.properties
+        : block.schema.inputs.properties
+
+    const rowIdEntry = schema[rowIdentifier]
+    if (!rowIdEntry) {
+      return []
+    }
+
+    const rowIdlabel = getFieldLabel(rowIdentifier, rowIdEntry)
+
+    const layout: SchemaConfigProps[] = [
+      {
+        comp: DrawerBindableInput,
+        title: rowIdlabel,
+        onChange: (e: CustomEvent<FormUpdate>) => {
+          const update = { [rowIdentifier]: e.detail }
+          if (block) {
+            automationStore.actions.requestUpdate(update, block)
+          }
+        },
+        props: () => {
+          return {
+            panel: AutomationBindingPanel,
+            value: getInputValue(fieldData, rowIdentifier),
+            updateOnChange: false,
+          }
+        },
+      },
+    ]
+
+    return layout
+  }
+
+  const getRowSelector = (): SchemaConfigProps[] => {
+    const row: Row = getInputValue(fieldData, "row") as Row
+    const meta: Record<string, unknown> = getInputValue(
+      fieldData,
+      "meta"
+    ) as Record<string, unknown>
+
+    return [
+      {
+        comp: RowSelector,
+        wrapped: false,
+        props: () => ({
+          row,
+          meta: meta || {},
+          componentWidth: 280,
+          fullWidth: true,
+        }),
+        onChange: (e: CustomEvent<FormUpdate>) => {
+          if (block) {
+            const metaUpdate = e.detail?.meta as Record<string, unknown>
+
+            automationStore.actions.requestUpdate(
+              {
+                row: e.detail.row,
+                meta: {
+                  fields: metaUpdate?.fields || {},
+                },
+              },
+              block
+            )
+          }
+        },
+      },
+    ]
+  }
+
+  const getTableSelector = (): SchemaConfigProps[] => {
+    const row: Row = getInputValue(fieldData, "row") as Row
+    return [
+      {
+        comp: TableSelector,
+        title: "Table",
+        onChange: (e: CustomEvent) => {
+          const rowKey = get(stepState)[block.id]?.rowType || "row"
+          automationStore.actions.requestUpdate(
+            {
+              _tableId: e.detail,
+              meta: {},
+              [rowKey]: e.detail
+                ? {
+                    tableId: e.detail,
+                  }
+                : {},
+            },
+            block
+          )
+        },
+        props: () => ({
+          isTrigger: isTrigger(block),
+          value: row?.tableId ?? "",
+          disabled: isTest,
+        }),
+      },
+    ]
+  }
+
+  // STEP
+  if (automationStore.actions.isRowStep(block)) {
+    const layout: SchemaConfigProps[] = [
+      ...getTableSelector(),
+      ...getIdConfig("rowId"),
+      coreDivider,
+      ...getRowSelector(),
+    ]
+    return layout
+  } else if (automationStore.actions.isRowTrigger(block) && isTest) {
+    // TRIGGER/TEST - Will be used to replace the test modal
+    const schema = block.schema.outputs.properties
+
+    const getRevConfig = (): SchemaConfigProps[] => {
+      // part of outputs for row type
+      const rowRevEntry = schema["revision"]
+      if (!rowRevEntry) {
+        return []
+      }
+      const rowRevlabel = getFieldLabel("revision", rowRevEntry)
+      const selected = get(selectedAutomation)
+      const triggerOutputs = selected.data?.testData
+
+      return [
+        {
+          comp: DrawerBindableInput,
+          title: rowRevlabel,
+          onChange: (e: CustomEvent<FormUpdate>) => {
+            const update = { ["revision"]: e.detail }
+            if (block) {
+              automationStore.actions.requestUpdate(update, block)
+            }
+          },
+          props: () => ({
+            panel: AutomationBindingPanel,
+            value: triggerOutputs ? triggerOutputs["revision"] : undefined,
+            updateOnChange: false,
+          }),
+        },
+      ]
+    }
+
+    // A select to switch from `row` to `oldRow`
+    const getRowTypeConfig = (): SchemaConfigProps[] => {
+      if (block.event !== AutomationEventType.ROW_UPDATE) {
+        return []
+      }
+
+      if (!get(stepState)?.[block.id]?.rowType) {
+        stepState.update(state => ({
+          ...state,
+          [block.id]: {
+            rowType: "row",
+          },
+        }))
+      }
+
+      type RowType = { name: string; id: string }
+
+      return [
+        {
+          comp: Select,
+          tooltip: `You can configure test data for both the updated row and
+          the old row, if you need it. Just select the one you wish to alter`,
+          title: "Row data",
+          props: () => ({
+            value: get(stepState)?.[block.id].rowType,
+            placeholder: false,
+            getOptionLabel: (type: RowType) => type.name,
+            getOptionValue: (type: RowType) => type.id,
+            options: [
+              {
+                id: "row",
+                name: "Updated row",
+              },
+              { id: "oldRow", name: "Old row" },
+            ] as RowType[],
+          }),
+          onChange: (e: CustomEvent) => {
+            if (e.detail === get(stepState)?.[block.id].rowType) {
+              return
+            }
+            stepState.update(state => ({
+              ...state,
+              [block.id]: {
+                rowType: e.detail,
+              },
+            }))
+          },
+        },
+      ]
+    }
+
+    const getTriggerRowSelector = (): SchemaConfigProps[] => {
+      const rowKey = get(stepState)?.[block.id]?.rowType ?? "row"
+      const rowData: Row = getInputValue(fieldData, rowKey) as Row
+      const row: Row = getInputValue(fieldData, "row") as Row
+      const meta: Record<string, unknown> = getInputValue(
+        fieldData,
+        "meta"
+      ) as Record<string, unknown>
+      return [
+        {
+          comp: RowSelector,
+          wrapped: false,
+          props: () => ({
+            componentWidth: 280,
+            row: rowData || {
+              tableId: row?.tableId,
+            },
+            meta: {
+              fields: meta?.oldFields || {},
+            },
+          }),
+          onChange: (e: CustomEvent<FormUpdate>) => {
+            const metaUpdate = e.detail?.meta as Record<string, unknown>
+
+            const update = {
+              [rowKey]: e.detail.row,
+              meta: {
+                fields: meta?.fields || {},
+                oldFields:
+                  (metaUpdate?.fields as Record<string, unknown>) || {},
+              },
+            }
+            if (block) {
+              automationStore.actions.requestUpdate(update, block)
+            }
+          },
+        },
+      ]
+    }
+
+    const layout: SchemaConfigProps[] = [
+      ...getTableSelector(),
+      {
+        comp: RowFetch,
+        title: "Row",
+        props: () => {
+          return {
+            tableId: "ta_bb_employee",
+            meta: getInputValue(fieldData, "meta"),
+          }
+        },
+        onChange: () => {},
+      },
+      ...getIdConfig("id"),
+      ...getRevConfig(),
+      ...getRowTypeConfig(),
+      coreDivider,
+      ...getTriggerRowSelector(),
+    ]
+    return layout
+  }
+}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/grid/GridViewCalculationButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/grid/GridViewCalculationButton.svelte
index 7733a90bad..1e5ea1ebf6 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/grid/GridViewCalculationButton.svelte
+++ b/packages/builder/src/components/backend/DataTable/buttons/grid/GridViewCalculationButton.svelte
@@ -6,7 +6,13 @@
     Multiselect,
     Button,
   } from "@budibase/bbui"
-  import { CalculationType, canGroupBy, isNumeric } from "@budibase/types"
+  import {
+    CalculationType,
+    canGroupBy,
+    FieldType,
+    isNumeric,
+    isNumericStaticFormula,
+  } from "@budibase/types"
   import InfoDisplay from "@/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/InfoDisplay.svelte"
   import { getContext } from "svelte"
   import DetailPopover from "@/components/common/DetailPopover.svelte"
@@ -94,10 +100,15 @@
         if (fieldSchema.calculationType) {
           return false
         }
+        // static numeric formulas will work
+        if (isNumericStaticFormula(fieldSchema)) {
+          return true
+        }
         // Only allow numeric columns for most calculation types
         if (
           self.type !== CalculationType.COUNT &&
-          !isNumeric(fieldSchema.type)
+          !isNumeric(fieldSchema.type) &&
+          fieldSchema.responseType !== FieldType.NUMBER
         ) {
           return false
         }
diff --git a/packages/builder/src/components/backend/TableNavigator/ExistingTableDataImport.svelte b/packages/builder/src/components/backend/TableNavigator/ExistingTableDataImport.svelte
index beddf447df..39f4238e3a 100644
--- a/packages/builder/src/components/backend/TableNavigator/ExistingTableDataImport.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/ExistingTableDataImport.svelte
@@ -45,7 +45,7 @@
     },
     {
       label: "Multi-select",
-      value: FieldType.ARRAY.type,
+      value: FieldType.ARRAY,
     },
     {
       label: "Barcode/QR",
diff --git a/packages/builder/src/components/common/RoleSelect.svelte b/packages/builder/src/components/common/RoleSelect.svelte
index 62c33458bf..6ee569f786 100644
--- a/packages/builder/src/components/common/RoleSelect.svelte
+++ b/packages/builder/src/components/common/RoleSelect.svelte
@@ -7,15 +7,15 @@
   import { createEventDispatcher } from "svelte"
   import { capitalise } from "@/helpers"
 
-  export let value
-  export let error
+  export let value = undefined
+  export let error = undefined
   export let placeholder = null
   export let autoWidth = false
   export let quiet = false
   export let allowPublic = true
   export let allowRemove = false
   export let disabled = false
-  export let align
+  export let align = undefined
   export let footer = null
   export let allowedRoles = null
   export let allowCreator = false
@@ -135,7 +135,6 @@
     {autoWidth}
     {quiet}
     {disabled}
-    {align}
     {footer}
     bind:value
     on:change={onChange}
diff --git a/packages/builder/src/components/common/bindings/BindingPanel.svelte b/packages/builder/src/components/common/bindings/BindingPanel.svelte
index 3d9d77509e..6ae0579f33 100644
--- a/packages/builder/src/components/common/bindings/BindingPanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingPanel.svelte
@@ -49,11 +49,11 @@
 
   export let bindings: EnrichedBinding[] = []
   export let value: string = ""
-  export let allowHBS = true
-  export let allowJS = false
+  export let allowHBS: boolean | undefined = true
+  export let allowJS: boolean | undefined = false
   export let allowHelpers = true
   export let allowSnippets = true
-  export let context = null
+  export let context: Record<any, any> | undefined = undefined
   export let snippets: Snippet[] | null = null
   export let autofocusEditor = false
   export let placeholder: string | null = null
@@ -128,7 +128,7 @@
     }
   }
 
-  const getModeOptions = (allowHBS: boolean, allowJS: boolean) => {
+  const getModeOptions = (allowHBS = true, allowJS = false) => {
     let options = []
     if (allowHBS) {
       options.push(BindingMode.Text)
diff --git a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
index 513be45692..ec5876365f 100644
--- a/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
+++ b/packages/builder/src/components/common/bindings/BindingSidePanel.svelte
@@ -21,15 +21,15 @@
   import SnippetDrawer from "./SnippetDrawer.svelte"
   import UpgradeButton from "@/pages/builder/portal/_components/UpgradeButton.svelte"
 
-  export let addHelper: (_helper: Helper, _js?: boolean) => void
-  export let addBinding: (_binding: EnrichedBinding) => void
-  export let addSnippet: (_snippet: Snippet) => void
-  export let bindings: EnrichedBinding[]
-  export let snippets: Snippet[] | null
-  export let mode: BindingMode
-  export let allowHelpers: boolean
-  export let allowSnippets: boolean
-  export let context = null
+  export let addHelper: (_helper: Helper, _js?: boolean) => void = () => {}
+  export let addBinding: (_binding: EnrichedBinding) => void = () => {}
+  export let addSnippet: (_snippet: Snippet) => void = () => {}
+  export let bindings: EnrichedBinding[] | undefined
+  export let snippets: Snippet[] | null = null
+  export let mode: BindingMode | undefined = BindingMode.Text
+  export let allowHelpers: boolean = true
+  export let allowSnippets: boolean = true
+  export let context: Record<any, any> | undefined = undefined
 
   let search = ""
   let searching = false
@@ -93,7 +93,7 @@
     search
   )
 
-  function onModeChange(_mode: BindingMode) {
+  function onModeChange(_mode: BindingMode | undefined) {
     selectedCategory = null
   }
   $: onModeChange(mode)
diff --git a/packages/builder/src/components/common/bindings/CodeEditorField.svelte b/packages/builder/src/components/common/bindings/CodeEditorField.svelte
index 942a6fd1bd..edf731f90f 100644
--- a/packages/builder/src/components/common/bindings/CodeEditorField.svelte
+++ b/packages/builder/src/components/common/bindings/CodeEditorField.svelte
@@ -36,10 +36,10 @@
   export let value: string = ""
   export let allowHelpers = true
   export let allowSnippets = true
-  export let context = null
+  export let context: Record<any, any> | undefined = undefined
   export let autofocusEditor = false
-  export let placeholder = null
-  export let height = 180
+  export let placeholder: string | undefined
+  export let dropdown = DropdownPosition.Absolute
 
   let getCaretPosition: CaretPositionFn | undefined
   let insertAtPos: InsertAtPositionFn | undefined
@@ -126,26 +126,25 @@
   }
 
   const updateValue = (val: any) => {
-    dispatch("change", readableToRuntimeBinding(bindings, val))
+    if (!val) {
+      dispatch("change", null)
+    }
+    const update = readableToRuntimeBinding(bindings, encodeJSBinding(val))
+    dispatch("change", update)
   }
 
-  const onChangeJSValue = (e: { detail: string }) => {
-    if (!e.detail?.trim()) {
-      // Don't bother saving empty values as JS
-      updateValue(null)
-    } else {
-      updateValue(encodeJSBinding(e.detail))
-    }
+  const onBlurJSValue = (e: { detail: string }) => {
+    // Don't bother saving empty values as JS
+    updateValue(e.detail?.trim())
   }
 </script>
 
-<div class="code-panel" style="height:{height}px;">
+<div class="code-panel">
   <div class="editor">
     {#key jsCompletions}
       <CodeEditor
         value={jsValue || ""}
-        on:change={onChangeJSValue}
-        on:blur
+        on:blur={onBlurJSValue}
         completions={jsCompletions}
         {bindings}
         mode={EditorModes.JS}
@@ -155,7 +154,7 @@
         placeholder={placeholder ||
           "Add bindings by typing $ or use the menu on the right"}
         jsBindingWrapping
-        dropdown={DropdownPosition.Absolute}
+        {dropdown}
       />
     {/key}
   </div>
@@ -164,6 +163,7 @@
 <style>
   .code-panel {
     display: flex;
+    height: 100%;
   }
 
   /* Editor */
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
index ae9ff92ecf..fec3020f7f 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableInput.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Icon, Input, Drawer, Button, CoreTextArea } from "@budibase/bbui"
+  import { Icon, Input, Drawer, Button, TextArea } from "@budibase/bbui"
   import {
     readableToRuntimeBinding,
     runtimeToReadableBinding,
@@ -67,7 +67,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="control" class:multiline class:disabled class:scrollable>
   <svelte:component
-    this={multiline ? CoreTextArea : Input}
+    this={multiline ? TextArea : Input}
     {label}
     {disabled}
     readonly={isJS}
@@ -78,18 +78,19 @@
     {placeholder}
     {updateOnChange}
     {autocomplete}
-  />
-  {#if !disabled && !disableBindings}
-    <div
-      class="icon"
-      on:click={() => {
-        builderStore.propertyFocus(key)
-        bindingDrawer.show()
-      }}
-    >
-      <Icon size="S" name="FlashOn" />
-    </div>
-  {/if}
+  >
+    {#if !disabled && !disableBindings}
+      <div
+        class="icon"
+        on:click={() => {
+          builderStore.propertyFocus(key)
+          bindingDrawer.show()
+        }}
+      >
+        <Icon size="S" name="FlashOn" />
+      </div>
+    {/if}
+  </svelte:component>
 </div>
 <Drawer
   on:drawerHide={onDrawerHide}
diff --git a/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte b/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
index 617b6aa590..0982fd6329 100644
--- a/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
@@ -14,14 +14,15 @@
   export let value = ""
   export let bindings = []
   export let title = "Bindings"
-  export let placeholder
-  export let label
+  export let placeholder = undefined
+  export let label = undefined
   export let disabled = false
   export let allowJS = true
   export let allowHelpers = true
   export let updateOnChange = true
-  export let type
-  export let schema
+  export let type = undefined
+  export let schema = undefined
+
   export let allowHBS = true
   export let context = {}
 
@@ -230,7 +231,6 @@
   }
 
   .icon {
-    right: 1px;
     bottom: 1px;
     position: absolute;
     justify-content: center;
@@ -239,8 +239,6 @@
     flex-direction: row;
     box-sizing: border-box;
     border-left: 1px solid var(--spectrum-alias-border-color);
-    border-top-right-radius: var(--spectrum-alias-border-radius-regular);
-    border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
     width: 31px;
     color: var(--spectrum-alias-text-color);
     background-color: var(--spectrum-global-color-gray-75);
diff --git a/packages/builder/src/components/design/ScreenDetailsModal.svelte b/packages/builder/src/components/design/ScreenDetailsModal.svelte
index 3f8e08d031..410ddee8a9 100644
--- a/packages/builder/src/components/design/ScreenDetailsModal.svelte
+++ b/packages/builder/src/components/design/ScreenDetailsModal.svelte
@@ -80,5 +80,6 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    margin-top: 4px;
   }
 </style>
diff --git a/packages/builder/src/components/design/settings/componentSettings.js b/packages/builder/src/components/design/settings/componentSettings.js
index 1cf4b0211c..86014f152c 100644
--- a/packages/builder/src/components/design/settings/componentSettings.js
+++ b/packages/builder/src/components/design/settings/componentSettings.js
@@ -22,6 +22,7 @@ import ValidationEditor from "./controls/ValidationEditor/ValidationEditor.svelt
 import DrawerBindableInput from "@/components/common/bindings/DrawerBindableInput.svelte"
 import ColumnEditor from "./controls/ColumnEditor/ColumnEditor.svelte"
 import BasicColumnEditor from "./controls/ColumnEditor/BasicColumnEditor.svelte"
+import TopLevelColumnEditor from "./controls/ColumnEditor/TopLevelColumnEditor.svelte"
 import GridColumnEditor from "./controls/GridColumnConfiguration/GridColumnConfiguration.svelte"
 import BarButtonList from "./controls/BarButtonList.svelte"
 import FieldConfiguration from "./controls/FieldConfiguration/FieldConfiguration.svelte"
@@ -62,7 +63,10 @@ const componentMap = {
   stepConfiguration: FormStepConfiguration,
   formStepControls: FormStepControls,
   columns: ColumnEditor,
+  // "Basic" actually includes nested JSON and relationship fields
   "columns/basic": BasicColumnEditor,
+  // "Top level" is only the top level schema fields
+  "columns/toplevel": TopLevelColumnEditor,
   "columns/grid": GridColumnEditor,
   tableConditions: TableConditionEditor,
   "field/sortable": SortableFieldSelect,
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte
index 09734c2ca4..df7932c74d 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnDrawer.svelte
@@ -145,7 +145,7 @@
         <div class="column">
           <div class="wide">
             <Body size="S">
-              By default, all columns will automatically be shown.
+              The default column configuration will automatically be shown.
               <br />
               You can manually control which columns are included by adding them
               below.
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte
index 5e27b591f8..fab905e8b7 100644
--- a/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/ColumnEditor.svelte
@@ -10,10 +10,18 @@
   } from "@/dataBinding"
   import { selectedScreen, tables } from "@/stores/builder"
 
-  export let componentInstance
+  const getSearchableFields = (schema, tableList) => {
+    return search.getFields(tableList, Object.values(schema || {}), {
+      allowLinks: true,
+    })
+  }
+
+  export let componentInstance = undefined
   export let value = []
   export let allowCellEditing = true
   export let allowReorder = true
+  export let getSchemaFields = getSearchableFields
+  export let placeholder = "All columns"
 
   const dispatch = createEventDispatcher()
 
@@ -28,13 +36,7 @@
     : enrichedSchemaFields?.map(field => field.name)
   $: sanitisedValue = getValidColumns(value, options)
   $: updateBoundValue(sanitisedValue)
-  $: enrichedSchemaFields = search.getFields(
-    $tables.list,
-    Object.values(schema || {}),
-    {
-      allowLinks: true,
-    }
-  )
+  $: enrichedSchemaFields = getSchemaFields(schema, $tables.list)
 
   $: {
     value = (value || []).filter(
@@ -44,7 +46,7 @@
 
   const getText = value => {
     if (!value?.length) {
-      return "All columns"
+      return placeholder
     }
     let text = `${value.length} column`
     if (value.length !== 1) {
diff --git a/packages/builder/src/components/design/settings/controls/ColumnEditor/TopLevelColumnEditor.svelte b/packages/builder/src/components/design/settings/controls/ColumnEditor/TopLevelColumnEditor.svelte
new file mode 100644
index 0000000000..69a80a85da
--- /dev/null
+++ b/packages/builder/src/components/design/settings/controls/ColumnEditor/TopLevelColumnEditor.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import ColumnEditor from "./ColumnEditor.svelte"
+  import type { TableSchema } from "@budibase/types"
+
+  const getTopLevelSchemaFields = (schema: TableSchema) => {
+    return Object.values(schema).filter(fieldSchema => !fieldSchema.nestedJSON)
+  }
+</script>
+
+<ColumnEditor
+  {...$$props}
+  on:change
+  allowCellEditing={false}
+  getSchemaFields={getTopLevelSchemaFields}
+/>
diff --git a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterBuilder.svelte b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterBuilder.svelte
index cf45fad78a..e2a613ee98 100644
--- a/packages/builder/src/components/design/settings/controls/FilterEditor/FilterBuilder.svelte
+++ b/packages/builder/src/components/design/settings/controls/FilterEditor/FilterBuilder.svelte
@@ -7,15 +7,15 @@
     readableToRuntimeBinding,
   } from "@/dataBinding"
 
-  export let schemaFields
-  export let filters
+  export let schemaFields = undefined
+  export let filters = undefined
   export let bindings = []
   export let panel = ClientBindingPanel
   export let allowBindings = true
-  export let allowOnEmpty
-  export let datasource
-  export let builderType
-  export let docsURL
+  export let allowOnEmpty = undefined
+  export let datasource = undefined
+  export let builderType = undefined
+  export let docsURL = undefined
   export let evaluationContext = {}
 </script>
 
diff --git a/packages/builder/src/components/integration/KeyValueBuilder.svelte b/packages/builder/src/components/integration/KeyValueBuilder.svelte
index a85800e8ad..5598b5e353 100644
--- a/packages/builder/src/components/integration/KeyValueBuilder.svelte
+++ b/packages/builder/src/components/integration/KeyValueBuilder.svelte
@@ -15,24 +15,23 @@
 
   const dispatch = createEventDispatcher()
 
-  export let defaults
+  export let defaults = undefined
   export let object = defaults || {}
   export let activity = {}
-  export let readOnly
-  export let noAddButton
-  export let name
+  export let readOnly = false
+  export let noAddButton = false
+  export let name = ""
   export let headings = false
-  export let options
-  export let toggle
+  export let options = undefined
+  export let toggle = false
   export let keyPlaceholder = "Key"
   export let valuePlaceholder = "Value"
-  export let valueHeading
-  export let keyHeading
-  export let tooltip
-  export let menuItems
+  export let valueHeading = ""
+  export let keyHeading = ""
+  export let tooltip = ""
+  export let menuItems = []
   export let showMenu = false
   export let bindings = []
-  export let bindingDrawerLeft
   export let allowHelpers = true
   export let customButtonText = null
   export let keyBindings = false
@@ -140,7 +139,6 @@
           value={field.name}
           {allowJS}
           {allowHelpers}
-          drawerLeft={bindingDrawerLeft}
           {context}
         />
       {:else}
@@ -167,7 +165,6 @@
           value={field.value}
           {allowJS}
           {allowHelpers}
-          drawerLeft={bindingDrawerLeft}
           {context}
         />
       {:else}
diff --git a/packages/builder/src/components/integration/QueryViewerBindingBuilder.svelte b/packages/builder/src/components/integration/QueryViewerBindingBuilder.svelte
index 8e8977b2c4..dc60bdd52e 100644
--- a/packages/builder/src/components/integration/QueryViewerBindingBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryViewerBindingBuilder.svelte
@@ -21,7 +21,6 @@
   keyPlaceholder="Binding name"
   valuePlaceholder="Default"
   bindings={[...userBindings]}
-  bindingDrawerLeft="260px"
   allowHelpers={false}
   on:change
 />
diff --git a/packages/builder/src/components/integration/RestQueryViewer.svelte b/packages/builder/src/components/integration/RestQueryViewer.svelte
index 2f5a62be3f..4752123ff4 100644
--- a/packages/builder/src/components/integration/RestQueryViewer.svelte
+++ b/packages/builder/src/components/integration/RestQueryViewer.svelte
@@ -582,7 +582,6 @@
                 ...globalDynamicRequestBindings,
                 ...dataSourceStaticBindings,
               ]}
-              bindingDrawerLeft="260px"
             />
           </Tab>
           <Tab title="Params">
@@ -591,7 +590,6 @@
               name="param"
               headings
               bindings={mergedBindings}
-              bindingDrawerLeft="260px"
             />
           </Tab>
           <Tab title="Headers">
@@ -602,7 +600,6 @@
               name="header"
               headings
               bindings={mergedBindings}
-              bindingDrawerLeft="260px"
             />
           </Tab>
           <Tab title="Body">
diff --git a/packages/builder/src/components/integration/rest/AuthPicker.svelte b/packages/builder/src/components/integration/rest/AuthPicker.svelte
index e8bf25d9ce..fd7773a7d2 100644
--- a/packages/builder/src/components/integration/rest/AuthPicker.svelte
+++ b/packages/builder/src/components/integration/rest/AuthPicker.svelte
@@ -11,8 +11,7 @@
   import { goto } from "@roxi/routify"
   import { appStore, oauth2 } from "@/stores/builder"
   import DetailPopover from "@/components/common/DetailPopover.svelte"
-  import { featureFlag } from "@/helpers"
-  import { FeatureFlag, RestAuthType } from "@budibase/types"
+  import { RestAuthType } from "@budibase/types"
   import { onMount } from "svelte"
 
   type Config = { label: string; value: string }
@@ -57,15 +56,13 @@
 
   $: title = !authConfig ? "Authentication" : `Auth: ${authConfig.label}`
 
-  $: oauth2Enabled = featureFlag.isEnabled(FeatureFlag.OAUTH2_CONFIG)
-
   onMount(() => {
     oauth2.fetch()
   })
 </script>
 
 <DetailPopover bind:this={popover} {title} align={PopoverAlignment.Right}>
-  <div slot="anchor" class:display-new={!authConfig && oauth2Enabled}>
+  <div slot="anchor" class:display-new={!authConfig}>
     <ActionButton icon="LockClosed" quiet selected>
       {#if !authConfig}
         Authentication
@@ -96,25 +93,23 @@
     >
   </div>
 
-  {#if oauth2Enabled}
-    <Divider />
+  <Divider />
 
-    <Body size="S" color="var(--spectrum-global-color-gray-700)">
-      OAuth 2.0 (Token-Based Authentication)
-    </Body>
+  <Body size="S" color="var(--spectrum-global-color-gray-700)">
+    OAuth 2.0 (Token-Based Authentication)
+  </Body>
+
+  {#if $oauth2.configs.length}
+    <List>
+      {#each $oauth2.configs as config}
+        <ListItem
+          title={config.name}
+          on:click={() => selectConfiguration(config._id, RestAuthType.OAUTH2)}
+          selected={config._id === authConfigId}
+        />
+      {/each}
+    </List>
 
-    {#if $oauth2.configs.length}
-      <List>
-        {#each $oauth2.configs as config}
-          <ListItem
-            title={config.name}
-            on:click={() =>
-              selectConfiguration(config._id, RestAuthType.OAUTH2)}
-            selected={config._id === authConfigId}
-          />
-        {/each}
-      </List>
-    {/if}
     <div>
       <Button secondary icon="Add" on:click={addOAuth2Configuration}
         >Add OAuth2</Button
diff --git a/packages/builder/src/constants/index.ts b/packages/builder/src/constants/index.ts
index 3c3a6888ad..7068a1bb96 100644
--- a/packages/builder/src/constants/index.ts
+++ b/packages/builder/src/constants/index.ts
@@ -71,4 +71,5 @@ export const AutoScreenTypes = {
   BLANK: "blank",
   TABLE: "table",
   FORM: "form",
+  PDF: "pdf",
 }
diff --git a/packages/builder/src/dataBinding.js b/packages/builder/src/dataBinding.js
index 1011774ac5..ada1ee274d 100644
--- a/packages/builder/src/dataBinding.js
+++ b/packages/builder/src/dataBinding.js
@@ -26,7 +26,7 @@ import {
   getJsHelperList,
 } from "@budibase/string-templates"
 import { TableNames } from "./constants"
-import { JSONUtils, Constants } from "@budibase/frontend-core"
+import { JSONUtils, Constants, SchemaUtils } from "@budibase/frontend-core"
 import ActionDefinitions from "@/components/design/settings/controls/ButtonActionEditor/manifest.json"
 import { environment, licensing } from "@/stores/portal"
 import { convertOldFieldFormat } from "@/components/design/settings/controls/FieldConfiguration/utils"
@@ -1026,25 +1026,7 @@ export const getSchemaForDatasource = (asset, datasource, options) => {
 
     // Check for any JSON fields so we can add any top level properties
     if (schema) {
-      let jsonAdditions = {}
-      Object.keys(schema).forEach(fieldKey => {
-        const fieldSchema = schema[fieldKey]
-        if (fieldSchema?.type === "json") {
-          const jsonSchema = JSONUtils.convertJSONSchemaToTableSchema(
-            fieldSchema,
-            {
-              squashObjects: true,
-            }
-          )
-          Object.keys(jsonSchema).forEach(jsonKey => {
-            jsonAdditions[`${fieldKey}.${jsonKey}`] = {
-              type: jsonSchema[jsonKey].type,
-              nestedJSON: true,
-            }
-          })
-        }
-      })
-      schema = { ...schema, ...jsonAdditions }
+      schema = SchemaUtils.addNestedJSONSchemaFields(schema)
     }
 
     // Determine if we should add ID and rev to the schema
diff --git a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
index f133b5e2cb..33f88e43dc 100644
--- a/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/automation/_layout.svelte
@@ -3,8 +3,7 @@
   import AutomationPanel from "@/components/automation/AutomationPanel/AutomationPanel.svelte"
   import CreateAutomationModal from "@/components/automation/AutomationPanel/CreateAutomationModal.svelte"
   import CreateWebhookModal from "@/components/automation/Shared/CreateWebhookModal.svelte"
-  import TestPanel from "@/components/automation/AutomationBuilder/TestPanel.svelte"
-  import { onDestroy, onMount } from "svelte"
+  import { onDestroy } from "svelte"
   import { syncURLToState } from "@/helpers/urlStateSync"
   import * as routify from "@roxi/routify"
   import {
@@ -12,8 +11,10 @@
     automationStore,
     selectedAutomation,
   } from "@/stores/builder"
+  import StepPanel from "@/components/automation/AutomationBuilder/StepPanel.svelte"
 
   $: automationId = $selectedAutomation?.data?._id
+  $: blockRefs = $selectedAutomation.blockRefs
   $: builderStore.selectResource(automationId)
 
   const stopSyncing = syncURLToState({
@@ -29,15 +30,6 @@
   let modal
   let webhookModal
 
-  onMount(async () => {
-    await automationStore.actions.initAppSelf()
-
-    // Init the binding evaluation context
-    automationStore.actions.initContext()
-
-    $automationStore.showTestPanel = false
-  })
-
   onDestroy(stopSyncing)
 </script>
 
@@ -70,15 +62,16 @@
     {/if}
   </div>
 
-  {#if $automationStore.showTestPanel}
-    <div class="setup">
-      <TestPanel automation={$selectedAutomation.data} />
+  {#if blockRefs[$automationStore.selectedNodeId] && $automationStore.selectedNodeId}
+    <div class="step-panel">
+      <StepPanel />
     </div>
   {/if}
+
   <Modal bind:this={modal}>
     <CreateAutomationModal {webhookModal} />
   </Modal>
-  <Modal bind:this={webhookModal} width="30%">
+  <Modal bind:this={webhookModal}>
     <CreateWebhookModal />
   </Modal>
 </div>
@@ -115,16 +108,17 @@
   .main {
     width: 300px;
   }
-  .setup {
-    padding-top: 9px;
+
+  .step-panel {
     border-left: var(--border-light);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
-    gap: var(--spacing-l);
     background-color: var(--background);
-    grid-column: 3;
     overflow: auto;
+    grid-column: 3;
+    width: 360px;
+    max-width: 360px;
   }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
index 31479bc820..1da03377b5 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/GeneralPanel.svelte
@@ -16,6 +16,7 @@
   import { getBindableProperties } from "@/dataBinding"
   import BarButtonList from "@/components/design/settings/controls/BarButtonList.svelte"
   import URLVariableTestInput from "@/components/design/settings/controls/URLVariableTestInput.svelte"
+  import { DrawerBindableInput } from "@/components/common/bindings"
 
   $: bindings = getBindableProperties($selectedScreen, null)
   $: screenSettings = getScreenSettings($selectedScreen)
@@ -23,7 +24,59 @@
   let errors = {}
 
   const getScreenSettings = screen => {
-    let settings = [
+    // Determine correct screen settings for the top level component
+    let screenComponentSettings = []
+    switch ($selectedScreen.props._component) {
+      case "@budibase/standard-components/pdf":
+        screenComponentSettings = [
+          {
+            key: "props.fileName",
+            label: "PDF title",
+            defaultValue: "Report",
+            control: DrawerBindableInput,
+          },
+          {
+            key: "props.buttonText",
+            label: "Button text",
+            defaultValue: "Download PDF",
+            control: DrawerBindableInput,
+          },
+        ]
+        break
+      default:
+        screenComponentSettings = [
+          {
+            key: "width",
+            label: "Width",
+            control: Select,
+            props: {
+              options: ["Extra small", "Small", "Medium", "Large", "Max"],
+              placeholder: "Default",
+              disabled: !!screen.layoutId,
+            },
+          },
+          {
+            key: "props.layout",
+            label: "Layout",
+            defaultValue: "flex",
+            control: BarButtonList,
+            props: {
+              options: [
+                {
+                  barIcon: "ModernGridView",
+                  value: "flex",
+                },
+                {
+                  barIcon: "ViewGrid",
+                  value: "grid",
+                },
+              ],
+            },
+          },
+        ]
+    }
+
+    return [
       {
         key: "routing.homeScreen",
         control: Checkbox,
@@ -66,34 +119,7 @@
         label: "On screen load",
         control: ButtonActionEditor,
       },
-      {
-        key: "width",
-        label: "Width",
-        control: Select,
-        props: {
-          options: ["Extra small", "Small", "Medium", "Large", "Max"],
-          placeholder: "Default",
-          disabled: !!screen.layoutId,
-        },
-      },
-      {
-        key: "props.layout",
-        label: "Layout",
-        defaultValue: "flex",
-        control: BarButtonList,
-        props: {
-          options: [
-            {
-              barIcon: "ModernGridView",
-              value: "flex",
-            },
-            {
-              barIcon: "ViewGrid",
-              value: "grid",
-            },
-          ],
-        },
-      },
+      ...screenComponentSettings,
       {
         key: "urlTest",
         control: URLVariableTestInput,
@@ -102,8 +128,6 @@
         },
       },
     ]
-
-    return settings
   }
 
   const routeTaken = url => {
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/ThemePanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/ThemePanel.svelte
index af693a872f..c1e68010ad 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/ThemePanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/ThemePanel.svelte
@@ -26,7 +26,9 @@
 
 <div class="info">
   <Icon name="InfoOutline" size="S" />
-  <Body size="S">These settings apply to all screens</Body>
+  <Body size="S">
+    These settings apply to all screens. PDFs are always light theme.
+  </Body>
 </div>
 <Layout noPadding gap="S">
   <Layout noPadding gap="XS">
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
index 1654ff5e06..3dccd97701 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
@@ -58,7 +58,7 @@
     // Get initial set of allowed components
     let allowedComponents = []
     const definition = componentStore.getDefinition(component?._component)
-    if (definition.legalDirectChildren?.length) {
+    if (definition?.legalDirectChildren?.length) {
       allowedComponents = definition.legalDirectChildren.map(x => {
         return `@budibase/standard-components/${x}`
       })
@@ -67,7 +67,7 @@
     }
 
     // Build up list of illegal children from ancestors
-    let illegalChildren = definition.illegalChildren || []
+    let illegalChildren = definition?.illegalChildren || []
     path.forEach(ancestor => {
       // Sidepanels and modals can be nested anywhere in the component tree, but really they are always rendered at the top level.
       // Because of this, it doesn't make sense to carry over any parent illegal children to them, so the array is reset here.
@@ -144,11 +144,6 @@
       }
     })
 
-    // Swap blocks and plugins
-    let tmp = enrichedStructure[1]
-    enrichedStructure[1] = enrichedStructure[0]
-    enrichedStructure[0] = tmp
-
     return enrichedStructure
   }
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
index d809095dc0..c4ee0c9dd4 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
@@ -20,9 +20,11 @@
     "name": "Data",
     "icon": "Data",
     "children": [
+      "singlerowprovider",
       "dataprovider",
       "repeater",
       "gridblock",
+      "pdftable",
       "spreadsheet",
       "dynamicfilter",
       "daterangepicker"
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
index 9dd7aab640..be409eff09 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
@@ -1,10 +1,13 @@
 <script>
   import DevicePreviewSelect from "./DevicePreviewSelect.svelte"
   import AppPreview from "./AppPreview.svelte"
-  import { screenStore, appStore } from "@/stores/builder"
+  import { screenStore, appStore, selectedScreen } from "@/stores/builder"
   import UndoRedoControl from "@/components/common/UndoRedoControl.svelte"
   import ScreenErrorsButton from "./ScreenErrorsButton.svelte"
   import { Divider } from "@budibase/bbui"
+  import { ScreenVariant } from "@budibase/types"
+
+  $: isPDF = $selectedScreen?.variant === ScreenVariant.PDF
 </script>
 
 <div class="app-panel">
@@ -14,10 +17,12 @@
       <UndoRedoControl store={screenStore.history} />
     </div>
     <div class="header-right">
-      {#if $appStore.clientFeatures.devicePreview}
-        <DevicePreviewSelect />
+      {#if !isPDF}
+        {#if $appStore.clientFeatures.devicePreview}
+          <DevicePreviewSelect />
+        {/if}
+        <Divider vertical />
       {/if}
-      <Divider vertical />
       <ScreenErrorsButton />
     </div>
   </div>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
index edc502bbb4..12186a7055 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/CreateScreenModal.svelte
@@ -53,7 +53,7 @@
         // Otherwise choose a datasource
         datasourceModal.show()
       }
-    } else if (mode === AutoScreenTypes.BLANK) {
+    } else if (mode === AutoScreenTypes.BLANK || mode === AutoScreenTypes.PDF) {
       screenDetailsModal.show()
     } else {
       throw new Error("Invalid mode provided")
@@ -101,8 +101,11 @@
     }
   }
 
-  const createBlankScreen = async ({ route }) => {
-    const screenTemplates = screenTemplating.blank({ route, screens })
+  const createBasicScreen = async ({ route }) => {
+    const screenTemplates =
+      mode === AutoScreenTypes.BLANK
+        ? screenTemplating.blank({ route, screens })
+        : screenTemplating.pdf({ route, screens })
     const newScreens = await createScreens(screenTemplates)
     loadNewScreen(newScreens[0])
   }
@@ -243,7 +246,7 @@
 </Modal>
 
 <Modal bind:this={screenDetailsModal}>
-  <ScreenDetailsModal onConfirm={createBlankScreen} />
+  <ScreenDetailsModal onConfirm={createBasicScreen} />
 </Modal>
 
 <Modal bind:this={formTypeModal}>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/images/pdf.svg b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/images/pdf.svg
new file mode 100644
index 0000000000..16ac02e2d7
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/images/pdf.svg
@@ -0,0 +1,38 @@
+<svg width="118" height="65" viewBox="0 0 118 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_1099_17726)">
+        <g clip-path="url(#clip1_1099_17726)" filter="url(#filter0_d_1099_17726)">
+            <rect width="118" height="65" fill="#D8B500"/>
+            <mask id="mask0_1099_17726" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="118" height="65">
+                <rect width="118" height="65" fill="white"/>
+            </mask>
+            <g mask="url(#mask0_1099_17726)">
+            </g>
+        </g>
+        <rect x="38.0762" y="22.3271" width="41.6766" height="42.6718" fill="white" fill-opacity="0.5"/>
+        <rect x="23.1543" y="11.4121" width="71.3021" height="53.5878" fill="url(#paint0_linear_1099_17726)"/>
+        <rect x="23.6543" y="11.9121" width="70.3021" height="52.5878" stroke="white" stroke-opacity="0.2"/>
+        <path d="M44.1365 45.7637V34.0637H48.4205C49.2725 34.0637 50.0585 34.1837 50.7785 34.4237C51.4985 34.6637 52.0745 35.0657 52.5065 35.6297C52.9505 36.1937 53.1725 36.9677 53.1725 37.9517C53.1725 38.8997 52.9505 39.6797 52.5065 40.2917C52.0745 40.8917 51.4985 41.3357 50.7785 41.6237C50.0705 41.9117 49.3085 42.0557 48.4925 42.0557H47.2325V45.7637H44.1365ZM47.2325 39.6077H48.3485C48.9605 39.6077 49.4105 39.4637 49.6985 39.1757C49.9985 38.8757 50.1485 38.4677 50.1485 37.9517C50.1485 37.4237 49.9865 37.0517 49.6625 36.8357C49.3385 36.6197 48.8765 36.5117 48.2765 36.5117H47.2325V39.6077ZM55.0877 45.7637V34.0637H58.5437C59.7317 34.0637 60.7757 34.2617 61.6757 34.6577C62.5877 35.0417 63.2957 35.6597 63.7997 36.5117C64.3037 37.3637 64.5557 38.4797 64.5557 39.8597C64.5557 41.2397 64.3037 42.3677 63.7997 43.2437C63.2957 44.1077 62.6057 44.7437 61.7297 45.1517C60.8537 45.5597 59.8517 45.7637 58.7237 45.7637H55.0877ZM58.1837 43.2797H58.3637C58.9277 43.2797 59.4377 43.1837 59.8937 42.9917C60.3497 42.7997 60.7097 42.4577 60.9737 41.9657C61.2497 41.4737 61.3877 40.7717 61.3877 39.8597C61.3877 38.9477 61.2497 38.2577 60.9737 37.7897C60.7097 37.3097 60.3497 36.9857 59.8937 36.8177C59.4377 36.6377 58.9277 36.5477 58.3637 36.5477H58.1837V43.2797ZM66.6365 45.7637V34.0637H74.2685V36.6557H69.7325V38.8877H73.6205V41.4797H69.7325V45.7637H66.6365Z" fill="white"/>
+    </g>
+    <defs>
+        <filter id="filter0_d_1099_17726" x="-10" y="-6" width="138" height="85" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+            <feOffset dy="4"/>
+            <feGaussianBlur stdDeviation="5"/>
+            <feComposite in2="hardAlpha" operator="out"/>
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1099_17726"/>
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1099_17726" result="shape"/>
+        </filter>
+        <linearGradient id="paint0_linear_1099_17726" x1="23.1543" y1="11.4121" x2="94.0187" y2="65.5726" gradientUnits="userSpaceOnUse">
+            <stop stop-color="white" stop-opacity="0.6"/>
+            <stop offset="1" stop-color="white" stop-opacity="0"/>
+        </linearGradient>
+        <clipPath id="clip0_1099_17726">
+            <rect width="118" height="65" fill="white"/>
+        </clipPath>
+        <clipPath id="clip1_1099_17726">
+            <rect width="118" height="65" fill="white"/>
+        </clipPath>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte
index bbd6fda256..d50d284965 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/NewScreen/index.svelte
@@ -4,8 +4,10 @@
   import blank from "./images/blank.svg"
   import table from "./images/tableInline.svg"
   import form from "./images/formUpdate.svg"
+  import pdf from "./images/pdf.svg"
   import CreateScreenModal from "./CreateScreenModal.svelte"
   import { screenStore } from "@/stores/builder"
+  import { AutoScreenTypes } from "@/constants"
 
   export let onClose = null
 
@@ -27,32 +29,54 @@
     </div>
 
     <div class="cards">
-      <div class="card" on:click={() => createScreenModal.show("blank")}>
+      <div
+        class="card"
+        on:click={() => createScreenModal.show(AutoScreenTypes.BLANK)}
+      >
         <div class="image">
           <img alt="A blank screen" src={blank} />
         </div>
         <div class="text">
-          <Body size="S">Blank</Body>
+          <Body size="M">Blank</Body>
           <Body size="XS">Add an empty blank screen</Body>
         </div>
       </div>
 
-      <div class="card" on:click={() => createScreenModal.show("table")}>
+      <div
+        class="card"
+        on:click={() => createScreenModal.show(AutoScreenTypes.TABLE)}
+      >
         <div class="image">
           <img alt="A table of data" src={table} />
         </div>
         <div class="text">
-          <Body size="S">Table</Body>
+          <Body size="M">Table</Body>
           <Body size="XS">List rows in a table</Body>
         </div>
       </div>
 
-      <div class="card" on:click={() => createScreenModal.show("form")}>
+      <div
+        class="card"
+        on:click={() => createScreenModal.show(AutoScreenTypes.PDF)}
+      >
+        <div class="image">
+          <img alt="A form containing data" src={pdf} width="185" />
+        </div>
+        <div class="text">
+          <Body size="M">PDF</Body>
+          <Body size="XS">Create, edit and export your PDF</Body>
+        </div>
+      </div>
+
+      <div
+        class="card"
+        on:click={() => createScreenModal.show(AutoScreenTypes.FORM)}
+      >
         <div class="image">
           <img alt="A form containing data" src={form} />
         </div>
         <div class="text">
-          <Body size="S">Form</Body>
+          <Body size="M">Form</Body>
           <Body size="XS">Capture data from your users</Body>
         </div>
       </div>
@@ -111,14 +135,13 @@
   .text {
     border: 1px solid var(--grey-4);
     border-radius: 0 0 4px 4px;
-    padding: 8px 16px 13px 16px;
-  }
-
-  .text :global(p:nth-child(1)) {
-    margin-bottom: 6px;
+    padding: 12px 16px 12px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
   }
 
   .text :global(p:nth-child(2)) {
-    color: var(--grey-6);
+    color: var(--spectrum-global-color-gray-600);
   }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
index d0d37cfb79..1113ab03b6 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/_layout.svelte
@@ -4,12 +4,8 @@
   import { url, isActive } from "@roxi/routify"
   import DeleteModal from "@/components/deploy/DeleteModal.svelte"
   import { isOnlyUser, appStore } from "@/stores/builder"
-  import { featureFlag } from "@/helpers"
-  import { FeatureFlag } from "@budibase/types"
 
   let deleteModal: DeleteModal
-
-  $: oauth2Enabled = featureFlag.isEnabled(FeatureFlag.OAUTH2_CONFIG)
 </script>
 
 <!-- routify:options index=4 -->
@@ -48,13 +44,11 @@
             url={$url("./version")}
             active={$isActive("./version")}
           />
-          {#if oauth2Enabled}
-            <SideNavItem
-              text="OAuth2"
-              url={$url("./oauth2")}
-              active={$isActive("./oauth2")}
-            />
-          {/if}
+          <SideNavItem
+            text="OAuth2"
+            url={$url("./oauth2")}
+            active={$isActive("./oauth2")}
+          />
           <SideNavItem
             text="App scripts"
             url={$url("./scripts")}
diff --git a/packages/builder/src/pages/builder/app/[application]/settings/automations/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/automations/index.svelte
index 9b4be9689c..6a3e4b669b 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/automations/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/automations/index.svelte
@@ -147,6 +147,13 @@
     await automationStore.actions.fetch()
     const params = new URLSearchParams(window.location.search)
     const shouldOpen = params.get("open") === ERROR
+    const defaultAutoId = params.get("automationId")
+    const defaultAuto = $automationStore.automations.find(
+      auto => auto._id === defaultAutoId || undefined
+    )
+
+    automationId = defaultAuto?._id || undefined
+
     if (shouldOpen) {
       status = ERROR
     }
diff --git a/packages/builder/src/pages/builder/portal/account/upgrade.svelte b/packages/builder/src/pages/builder/portal/account/upgrade.svelte
index 3440cd71ea..b5d4346db3 100644
--- a/packages/builder/src/pages/builder/portal/account/upgrade.svelte
+++ b/packages/builder/src/pages/builder/portal/account/upgrade.svelte
@@ -20,6 +20,7 @@
   import { API } from "@/api"
   import { onMount } from "svelte"
   import { sdk } from "@budibase/shared-core"
+  import { getFormattedPlanName } from "@/helpers/planTitle"
 
   $: license = $auth.user.license
   $: upgradeUrl = `${$admin.accountPortalUrl}/portal/upgrade`
@@ -260,7 +261,11 @@
     <Layout gap="XS" noPadding>
       <Heading size="XS">Plan</Heading>
       <Layout noPadding gap="S">
-        <Body size="S">You are currently on the {license.plan.type} plan</Body>
+        <Body size="S"
+          >You are currently on the <b
+            >{getFormattedPlanName(license.plan.type)}</b
+          ></Body
+        >
         <div>
           <Body size="S"
             >If you purchase or update your plan on the account</Body
diff --git a/packages/builder/src/stores/builder/automations.ts b/packages/builder/src/stores/builder/automations.ts
index 57c26dbb85..47b5be8dd9 100644
--- a/packages/builder/src/stores/builder/automations.ts
+++ b/packages/builder/src/stores/builder/automations.ts
@@ -4,13 +4,14 @@ import { cloneDeep } from "lodash/fp"
 import { generate } from "shortid"
 import { createHistoryStore, HistoryStore } from "@/stores/builder/history"
 import { licensing, organisation, environment } from "@/stores/portal"
-import { tables, appStore } from "@/stores/builder"
+import { tables, appStore, permissions } from "@/stores/builder"
 import { notifications } from "@budibase/bbui"
 import {
   getEnvironmentBindings,
   migrateReferencesInObject,
   getUserBindings,
   getSettingBindings,
+  getSchemaForDatasourcePlus,
 } from "@/dataBinding"
 import {
   AutomationTriggerStepId,
@@ -25,7 +26,8 @@ import {
   UILogicalOperator,
   EmptyFilterOption,
   AutomationIOType,
-  BranchPath,
+  BlockPath,
+  BlockRef,
   BlockDefinitions,
   isBranchStep,
   isTrigger,
@@ -41,35 +43,43 @@ import {
   RowActionTriggerOutputs,
   WebhookTriggerOutputs,
   AutomationCustomIOType,
+  AutomationStepInputs,
+  AutomationIOProps,
+  AutomationTriggerInputs,
+  AppActionTrigger,
+  RowActionTriggerInputs,
+  RowActionTrigger,
+  EnrichedBinding,
+  BlockDefinitionTypes,
   AutomationTriggerResultOutputs,
   AutomationTriggerResult,
   AutomationStepType,
+  PermissionLevel,
+  isDidNotTriggerResponse,
+  AutomationResults,
+  isActionStep,
 } from "@budibase/types"
 import { ActionStepID, TriggerStepID } from "@/constants/backend/automations"
 import { FIELDS as COLUMNS } from "@/constants/backend"
 import { sdk } from "@budibase/shared-core"
 import { rowActions } from "./rowActions"
 import { getNewStepName } from "@/helpers/automations/nameHelpers"
-import { QueryUtils } from "@budibase/frontend-core"
+import { QueryUtils, Utils } from "@budibase/frontend-core"
 import { BudiStore, DerivedBudiStore } from "@/stores/BudiStore"
-
-interface AutomationState {
-  automations: Automation[]
-  testResults?: TestAutomationResponse
-  showTestPanel: boolean
-  blockDefinitions: BlockDefinitions
-  selectedAutomationId: string | null
-  appSelf?: AppSelfResponse
-}
-
-interface DerivedAutomationState extends AutomationState {
-  data: Automation | null
-  blockRefs: Record<string, any>
-}
+import {
+  DataMode,
+  FilterableRowTriggers,
+  RowTriggers,
+  type AutomationState,
+  type DerivedAutomationState,
+  type FormUpdate,
+  type StepInputs,
+} from "@/types/automations"
+import { TableNames } from "@/constants"
 
 const initialAutomationState: AutomationState = {
   automations: [],
-  showTestPanel: false,
+  showTestModal: false,
   blockDefinitions: {
     TRIGGER: {},
     CREATABLE_TRIGGER: {},
@@ -101,114 +111,117 @@ const getFinalDefinitions = (
 
 const automationActions = (store: AutomationStore) => ({
   /**
-   * Generates a derived store acting as an evaluation context
-   * for bindings in automations
-   *
-   * @returns {Readable<AutomationContext>}
+   * @param {Automation} auto
+   * @param {BlockRef} blockRef
+   * @returns
    */
-  generateContext: (): Readable<AutomationContext> => {
-    return derived(
-      [organisation, store.selected, environment, tables],
-      ([$organisation, $selectedAutomation, $env, $tables]) => {
-        const { platformUrl: url, company, logoUrl: logo } = $organisation
+  getBlockByRef: (
+    auto?: Automation,
+    blockRef?: BlockRef
+  ): AutomationStep | AutomationTrigger | undefined => {
+    if (!blockRef || !auto) {
+      return
+    }
 
-        const results: TestAutomationResponse | undefined =
-          $selectedAutomation?.testResults
+    const target = automationStore.actions
+      .getPathSteps(blockRef.pathTo, auto)
+      .at(-1)
 
-        const testData: AutomationTriggerResultOutputs | undefined =
-          $selectedAutomation.data?.testData
-        const triggerDef = $selectedAutomation.data?.definition?.trigger
-
-        const isWebhook = triggerDef?.stepId === TriggerStepID.WEBHOOK
-        const isRowAction = triggerDef?.stepId === TriggerStepID.ROW_ACTION
-        const rowActionTableId = triggerDef?.inputs?.tableId
-        const rowActionTable = rowActionTableId
-          ? $tables.list.find(table => table._id === rowActionTableId)
-          : undefined
-
-        let triggerData: AutomationTriggerResultOutputs | undefined
-
-        if (results && isAutomationResults(results)) {
-          const automationTrigger: AutomationTriggerResult | undefined =
-            results?.trigger
-
-          const outputs: AutomationTriggerResultOutputs | undefined =
-            automationTrigger?.outputs
-          triggerData = outputs ? outputs : undefined
-
-          if (triggerData) {
-            if (isRowAction && rowActionTable) {
-              const rowTrigger = triggerData as RowActionTriggerOutputs
-              // Row action table must always be retrieved as it is never
-              // returned in the test results
-              rowTrigger.table = rowActionTable
-            } else if (isWebhook) {
-              const webhookTrigger = triggerData as WebhookTriggerOutputs
-              // Ensure it displays in the event that the configuration have been skipped
-              webhookTrigger.body = webhookTrigger.body ?? {}
-            }
-          }
-
-          // Clean up unnecessary data from the context
-          // Meta contains UI/UX config data. Non-bindable
-          delete triggerData?.meta
-        } else {
-          // Substitute test data in place of the trigger data if the test hasn't been run
-          triggerData = testData
-        }
-
-        // AppSelf context required to mirror server user context
-        const userContext = $selectedAutomation.appSelf || {}
-
-        // Extract step results from a valid response
-        const stepResults =
-          results && isAutomationResults(results) ? results?.steps : []
-
-        return {
-          user: userContext,
-          // Merge in the trigger data.
-          ...(triggerData ? { trigger: { ...triggerData } } : {}),
-          // This will initially be empty for each step but will populate
-          // upon running the test.
-          steps: stepResults.reduce(
-            (acc: Record<string, any>, res: Record<string, any>) => {
-              acc[res.id] = res.outputs
-              return acc
-            },
-            {}
-          ),
-          env: ($env?.variables || []).reduce(
-            (acc: Record<string, any>, variable: Record<string, any>) => {
-              acc[variable.name] = ""
-              return acc
-            },
-            {}
-          ),
-          settings: { url, company, logo },
-        }
-      }
-    )
+    return target as AutomationStep | AutomationTrigger | undefined
   },
 
   /**
-   * Initialise the automation evaluation context
+   * Build and retrieve the block input properties from a Trigger/Step
+   * @param {AutomationStep | AutomationTrigger} block
+   * @returns
    */
-  initContext: () => {
-    store.context = store.actions.generateContext()
+  getInputData: (block?: AutomationStep | AutomationTrigger): StepInputs => {
+    if (!block) {
+      console.error("Block required to generate step input data")
+      return
+    }
+    let newInputData
+
+    if (isTrigger(block)) {
+      const triggerInputs: AutomationTriggerInputs<typeof block.stepId> =
+        block.inputs
+      newInputData = cloneDeep(triggerInputs)
+    } else if (isActionStep(block)) {
+      const blockInputs: AutomationStepInputs<typeof block.stepId> =
+        block.inputs
+      newInputData = cloneDeep(blockInputs)
+    }
+
+    store.actions.setDefaultEnumValues(
+      newInputData,
+      block.schema?.inputs?.properties
+    )
+
+    return newInputData
   },
+
+  /**
+   * Parses through the provided prop schema updates any enum
+   * values with the first option if no value is currently set.
+   *
+   * @param inputData
+   */
+  setDefaultEnumValues: (
+    inputData:
+      | AutomationStepInputs<AutomationActionStepId>
+      | AutomationTriggerInputs<AutomationTriggerStepId>,
+    inputPropSchema: AutomationIOProps
+  ) => {
+    // In order to alter enum fields you must make the inputData indexable
+    const idxInput = inputData as Record<string, unknown>
+
+    const schemaProperties = Object.entries(inputPropSchema)
+
+    for (const [key, value] of schemaProperties) {
+      if (
+        value.type === AutomationIOType.STRING &&
+        value.enum &&
+        !idxInput[key]
+      ) {
+        idxInput[key] = value.enum[0]
+      }
+    }
+  },
+
   /**
    * Fetches the app user context used for live evaluation
-   * This matches the context used on the server
+   * This matches the context used on the server. Only expose
+   * valid schema values used in bindings
    * @returns {AppSelfResponse | null}
    */
   initAppSelf: async (): Promise<AppSelfResponse | null> => {
     // Fetch and update the app self if it hasn't been set
-    const appSelfResponse = await API.fetchSelf()
+    const appSelfResponse: AppSelfResponse | null = await API.fetchSelf()
+
+    if (!appSelfResponse) {
+      return appSelfResponse
+    }
+    const { schema }: { schema: Record<string, any> } =
+      getSchemaForDatasourcePlus(TableNames.USERS, null)
+
+    const keys = [...Object.keys(schema), "globalId"] as Array<
+      keyof AppSelfResponse
+    >
+
+    // Reduce the fields to include the same elements as seen in the bindings
+    const serverUser = keys.reduce((acc, key) => {
+      if (key in appSelfResponse) {
+        acc[key] = appSelfResponse[key]
+      }
+      return acc
+    }, {} as Partial<AppSelfResponse>)
+
     store.update(state => ({
       ...state,
-      ...(appSelfResponse ? { appSelf: appSelfResponse } : {}),
+      appSelf: serverUser,
     }))
-    return appSelfResponse
+
+    return serverUser
   },
   /**
    * Move a given block from one location on the tree to another.
@@ -218,8 +231,8 @@ const automationActions = (store: AutomationStore) => ({
    * @param {Object} automation the automaton to be mutated
    */
   moveBlock: async (
-    sourcePath: BranchPath[],
-    destPath: BranchPath[],
+    sourcePath: BlockPath[],
+    destPath: BlockPath[],
     automation: Automation
   ) => {
     // The last part of the source node address, containing the id.
@@ -295,7 +308,7 @@ const automationActions = (store: AutomationStore) => ({
    * @param {*} automation the automation to alter.
    * @returns {Object} contains the deleted nodes and new updated automation
    */
-  deleteBlock: (pathTo: Array<BranchPath>, automation: Automation) => {
+  deleteBlock: (pathTo: Array<BlockPath>, automation: Automation) => {
     let newAutomation = cloneDeep(automation)
 
     const steps = [
@@ -383,7 +396,7 @@ const automationActions = (store: AutomationStore) => ({
   registerBlock: (
     blocks: Record<string, any>,
     block: AutomationStep | AutomationTrigger,
-    pathTo: Array<BranchPath>,
+    pathTo: Array<BlockPath>,
     terminating: boolean
   ) => {
     blocks[block.id] = {
@@ -409,7 +422,7 @@ const automationActions = (store: AutomationStore) => ({
    * @returns {Array<AutomationStep | AutomationTrigger>} all steps encountered on the provided path
    */
   getPathSteps: (
-    pathWay: Array<BranchPath>,
+    pathWay: Array<BlockPath>,
     automation: Automation
   ): Array<AutomationStep | AutomationTrigger> => {
     // Base Steps, including trigger
@@ -421,20 +434,23 @@ const automationActions = (store: AutomationStore) => ({
     let result: (AutomationStep | AutomationTrigger)[] = []
     pathWay.forEach(path => {
       const { stepIdx, branchIdx } = path
+      let last: AutomationStep | AutomationTrigger | undefined = result.length
+        ? result[result.length - 1]
+        : undefined
       if (!result.length) {
         // Preceeding steps.
         result = steps.slice(0, stepIdx + 1)
         return
       }
-      let last = result[result.length - 1]
-      if (isBranchStep(last)) {
-        if (Number.isInteger(branchIdx)) {
-          const branchId = last.inputs.branches[branchIdx].id
-          const children = last.inputs.children?.[branchId] || []
-          const stepChildren = children.slice(0, stepIdx + 1)
-          // Preceeding steps.
-          result = result.concat(stepChildren)
-        }
+
+      if (Number.isInteger(branchIdx)) {
+        const branch = last as BranchStep
+        const branchId = branch.inputs?.branches[branchIdx].id
+        const children = branch.inputs?.children?.[branchId] ?? []
+
+        const stepChildren = children.slice(0, stepIdx + 1)
+        // Preceeding steps.
+        result = result.concat(stepChildren)
       }
     })
     return result
@@ -452,7 +468,7 @@ const automationActions = (store: AutomationStore) => ({
    * @returns
    */
   updateStep: (
-    pathWay: Array<BranchPath>,
+    pathWay: Array<BlockPath>,
     automation: Automation,
     update: AutomationStep | AutomationTrigger,
     insert = false
@@ -560,14 +576,17 @@ const automationActions = (store: AutomationStore) => ({
    * step preceding it.
    *
    * @param {string} id the step id of the target
-   * @returns {Array<Object>} all bindings on the path to this step
+   * @param {Automation} automation the automation to be searched
+   * @returns {Array<EnrichedBinding>} all bindings on the path to this step
    */
-  getPathBindings: (id: string) => {
+  getPathBindings: (id?: string, automation?: Automation) => {
+    if (!automation || !id) {
+      console.error("getPathBindings: requires a valid step id and automation")
+      return []
+    }
     const block = get(selectedAutomation)?.blockRefs[id]
-    return store.actions.getAvailableBindings(
-      block,
-      get(selectedAutomation)?.data
-    )
+
+    return store.actions.getAvailableBindings(block, automation)
   },
 
   /**
@@ -635,7 +654,10 @@ const automationActions = (store: AutomationStore) => ({
     return blockRefs
   },
 
-  getAvailableBindings: (block: any, automation: Automation | null) => {
+  getAvailableBindings: (
+    block: any,
+    automation: Automation
+  ): EnrichedBinding[] => {
     if (!block || !automation?.definition) {
       return []
     }
@@ -758,8 +780,14 @@ const automationActions = (store: AutomationStore) => ({
 
       if (blockIdx === 0 && isTrigger(pathBlock)) {
         if (isRowUpdateTrigger(pathBlock) || isRowSaveTrigger(pathBlock)) {
+          const rowTrigger = pathBlock as AutomationTrigger
+
+          const inputs = rowTrigger.inputs as Exclude<
+            AutomationTriggerInputs<typeof pathBlock.stepId>,
+            void
+          >
           let table: any = get(tables).list.find(
-            (table: Table) => table._id === pathBlock.inputs.tableId
+            (table: Table) => table._id === inputs.tableId
           )
 
           for (const key in table?.schema) {
@@ -770,10 +798,15 @@ const automationActions = (store: AutomationStore) => ({
           }
           delete schema.row
         } else if (isAppTrigger(pathBlock)) {
+          const appActionTrigger = pathBlock as AppActionTrigger
+          const inputs = appActionTrigger.inputs as Exclude<
+            AutomationTriggerInputs<typeof pathBlock.stepId>,
+            void
+          >
           schema = Object.fromEntries(
-            Object.keys(pathBlock.inputs.fields || []).map(key => [
+            Object.keys(inputs.fields || {}).map(key => [
               key,
-              { type: pathBlock.inputs.fields[key] },
+              { type: inputs.fields?.[key] },
             ])
           )
         }
@@ -918,11 +951,11 @@ const automationActions = (store: AutomationStore) => ({
   },
 
   processBlockInputs: async (
-    block: AutomationStep,
-    data: Record<string, any>
-  ) => {
+    block: AutomationStep | AutomationTrigger,
+    data: FormUpdate
+  ): Promise<Automation | undefined> => {
     // Create new modified block
-    let newBlock: AutomationStep & { inputs: any } = {
+    let newBlock: { inputs: any } & (AutomationStep | AutomationTrigger) = {
       ...block,
       inputs: {
         ...block.inputs,
@@ -941,7 +974,8 @@ const automationActions = (store: AutomationStore) => ({
     // Create new modified automation
     const automation = get(selectedAutomation)?.data
     if (!automation) {
-      return false
+      console.error("Could not process input blocks. No selected automation")
+      return
     }
     const newAutomation = store.actions.getUpdatedDefinition(
       automation,
@@ -950,7 +984,7 @@ const automationActions = (store: AutomationStore) => ({
 
     // Don't save if no changes were made
     if (JSON.stringify(newAutomation) === JSON.stringify(automation)) {
-      return false
+      return
     }
 
     return newAutomation
@@ -961,7 +995,7 @@ const automationActions = (store: AutomationStore) => ({
     data: Record<string, any>
   ) => {
     const newAutomation = await store.actions.processBlockInputs(block, data)
-    if (newAutomation === false) {
+    if (!newAutomation) {
       return
     }
     await store.actions.save(newAutomation)
@@ -975,7 +1009,6 @@ const automationActions = (store: AutomationStore) => ({
       const message = err.message || err.status || JSON.stringify(err)
       throw `Automation test failed - ${message}`
     }
-
     store.update(state => {
       state.testResults = result
       return state
@@ -1041,7 +1074,11 @@ const automationActions = (store: AutomationStore) => ({
     return newAutomation
   },
 
-  constructBlock: (type: string, stepId: string, blockDefinition: any) => {
+  constructBlock: (
+    type: BlockDefinitionTypes,
+    stepId: string,
+    blockDefinition: any
+  ) => {
     const newStep = {
       ...blockDefinition,
       inputs: blockDefinition.inputs || {},
@@ -1062,7 +1099,11 @@ const automationActions = (store: AutomationStore) => ({
    */
   generateBranchBlock: () => {
     const branchDefinition = get(store).blockDefinitions.ACTION.BRANCH
-    return store.actions.constructBlock("ACTION", "BRANCH", branchDefinition)
+    return store.actions.constructBlock(
+      BlockDefinitionTypes.ACTION,
+      "BRANCH",
+      branchDefinition
+    )
   },
 
   /**
@@ -1072,7 +1113,10 @@ const automationActions = (store: AutomationStore) => ({
    * @param {Object} block the new block
    * @param {Array<Object>} pathWay location of insert point
    */
-  addBlockToAutomation: async (block: AutomationStep, pathWay: Array<any>) => {
+  addBlockToAutomation: async (
+    block: AutomationStep,
+    pathWay: Array<BlockPath>
+  ) => {
     const automation = get(selectedAutomation)?.data
     if (!automation) {
       return
@@ -1287,7 +1331,7 @@ const automationActions = (store: AutomationStore) => ({
    * @param {Object} block
    */
   branchRight: async (
-    pathTo: Array<BranchPath>,
+    pathTo: Array<BlockPath>,
     automation: Automation,
     block: BranchStep
   ) => {
@@ -1436,7 +1480,7 @@ const automationActions = (store: AutomationStore) => ({
    *
    * @param {Array<Object>} pathTo the path to the target node
    */
-  deleteAutomationBlock: async (pathTo: Array<BranchPath>) => {
+  deleteAutomationBlock: async (pathTo: Array<BlockPath>) => {
     const automation = get(selectedAutomation)?.data
     if (!automation) {
       return
@@ -1564,7 +1608,8 @@ const automationActions = (store: AutomationStore) => ({
     store.update(state => {
       state.selectedAutomationId = id
       delete state.testResults
-      state.showTestPanel = false
+      state.showTestModal = false
+      delete state.selectedNodeId
       return state
     })
   },
@@ -1573,6 +1618,243 @@ const automationActions = (store: AutomationStore) => ({
     return get(store.store).automations?.find(x => x._id === id)
   },
 
+  getBlockDefinition: (block?: AutomationStep | AutomationTrigger) => {
+    if (!block) {
+      return
+    }
+    const isTrigger = block?.type === AutomationStepType.TRIGGER
+    const definitionType = isTrigger
+      ? BlockDefinitionTypes.TRIGGER
+      : BlockDefinitionTypes.ACTION
+    const definitions = get(store).blockDefinitions[definitionType]
+    if (isTrigger) {
+      const triggerDefs =
+        definitions as Partial<GetAutomationTriggerDefinitionsResponse>
+      return triggerDefs[block.stepId as AutomationTriggerStepId]
+    }
+
+    const stepDefs =
+      definitions as Partial<GetAutomationActionDefinitionsResponse>
+    return stepDefs[block.stepId as AutomationActionStepId]
+  },
+
+  /**
+   * Determine if the trigger block type is a row trigger type
+   * that supports oldRow/row
+   * @param trigger
+   * @returns {boolean}
+   */
+  isRowTrigger: (
+    block?: AutomationTrigger | AutomationStep | undefined
+  ): boolean => {
+    if (!block || block.type !== AutomationStepType.TRIGGER) {
+      return false
+    }
+    const stepId = block.stepId as AutomationTriggerStepId
+
+    return RowTriggers.includes(stepId)
+  },
+
+  /**
+   * Determine if the block is a row step type
+   * The determines if something has a row/oldrow ux
+   */
+  isRowStep: (
+    block?: AutomationTrigger | AutomationStep | undefined
+  ): boolean => {
+    if (!block || block.type !== AutomationStepType.ACTION) {
+      return false
+    }
+    const stepId = block.stepId as AutomationActionStepId
+    const rowSteps = [
+      AutomationActionStepId.UPDATE_ROW,
+      AutomationActionStepId.CREATE_ROW,
+    ]
+    return rowSteps.includes(stepId)
+  },
+
+  /**
+   * Handler for row trigger automation updates.
+   * @param {object} update - An automation block.inputs update object
+   * @param {string} [update.tableId] - The ID of the table
+   * @param {object} [update.filters] - Filter configuration for the row trigger
+   * @param {object} [update.filters-def] - Filter definitions for the row trigger
+   * @example
+   * // Example with tableId
+   * onRowTriggerUpdate({
+   *   "tableId" : "ta_bb_employee"
+   * })
+   * @example
+   * // Example with filters
+   * onRowTriggerUpdate({
+   *   filters: {
+   *     equal: { "1:Approved": "true" }
+   *   },
+   *   "filters-def": [{
+   *     id: "oH1T4S49n",
+   *     field: "1:Approved",
+   *     operator: "equal",
+   *     value: "true",
+   *     valueType: "Value",
+   *     type: "string"
+   *   }]
+   * })
+   */
+  onRowTriggerUpdate: async (update: FormUpdate, block: AutomationTrigger) => {
+    if (
+      ["tableId", AutomationCustomIOType.FILTERS, "meta"].some(key =>
+        Object.hasOwn(update, key)
+      )
+    ) {
+      try {
+        const automation = get(selectedAutomation)?.data
+
+        if (!automation) {
+          console.error("No automation for update")
+          return
+        }
+
+        let updatedAutomation: Automation | undefined
+
+        if (
+          Object.hasOwn(update, "tableId") &&
+          automation.testData?.row?.tableId !== update.tableId
+        ) {
+          const reqSchema = getSchemaForDatasourcePlus(update.tableId, {
+            searchableSchema: true,
+          }).schema
+
+          updatedAutomation = await automationStore.actions.processBlockInputs(
+            block,
+            {
+              schema: reqSchema,
+              ...update,
+            }
+          )
+
+          const refeshedTestData: AutomationTriggerResultOutputs = {
+            row: { tableId: update.tableId },
+            oldRow: { tableId: update.tableId },
+            meta: {},
+            id: "",
+            revision: "",
+          }
+
+          // Reset testData when tableId changes
+          updatedAutomation = updatedAutomation
+            ? {
+                ...updatedAutomation,
+                testData: refeshedTestData,
+              }
+            : undefined
+        } else {
+          // For filters update, just process block inputs without resetting testData
+          updatedAutomation = await automationStore.actions.processBlockInputs(
+            block,
+            update
+          )
+        }
+
+        if (updatedAutomation) {
+          await automationStore.actions.save(updatedAutomation)
+        }
+      } catch (e) {
+        console.error("Error saving automation", e)
+        notifications.error("Error saving automation")
+      }
+    }
+  },
+
+  onAppTriggerUpdate: async (update: FormUpdate, block: AutomationTrigger) => {
+    try {
+      // Parse the block inputs as usual
+      const updatedAutomation =
+        await automationStore.actions.processBlockInputs(block, {
+          schema: {},
+          ...update,
+        })
+
+      if (!updatedAutomation) {
+        return
+      }
+      // Exclude default or invalid data from the test data
+      let updatedFields: Record<string, any> = {}
+      const inputs: Record<string, any> | void = block?.inputs
+      const fieldsRequest = update.fields as Record<string, unknown>
+
+      for (const key of Object.keys(inputs?.fields || {})) {
+        if (Object.hasOwn(fieldsRequest, key)) {
+          if (key !== "") {
+            updatedFields[key] = updatedAutomation.testData?.fields?.[key]
+          }
+        }
+      }
+
+      // Save the entire automation and reset the testData
+      await automationStore.actions.save({
+        ...updatedAutomation,
+        testData: {
+          fields: updatedFields,
+        },
+      })
+    } catch (e) {
+      console.error("Error saving automation", e)
+      notifications.error("Error saving automation")
+    }
+  },
+
+  // Step Update Update
+  requestUpdate: Utils.sequential(
+    async (update: FormUpdate, block: AutomationTrigger | AutomationStep) => {
+      if (!block || !update) {
+        console.error("Invalid update. Block and update body required")
+        return
+      }
+
+      const request = cloneDeep(update)
+
+      const rowSteps = [
+        AutomationTriggerStepId.ROW_DELETED,
+        AutomationTriggerStepId.ROW_SAVED,
+        AutomationTriggerStepId.ROW_UPDATED,
+      ]
+
+      // Process app trigger updates
+      if (isTrigger(block)) {
+        // Row trigger
+        if (rowSteps.includes(block.stepId!)) {
+          await store.actions.onRowTriggerUpdate(request, block)
+          return
+        }
+        // App trigger
+        if (block.stepId === AutomationTriggerStepId.APP) {
+          await store.actions.onAppTriggerUpdate(request, block)
+          return
+        }
+      }
+
+      // We need to cache the schema as part of the definition because it is
+      // used in the server to detect relationships. It would be far better to
+      // instead fetch the schema in the backend at runtime.
+      // If _tableId is explicitly included in the update request, the schema will be requested
+      let schema: Record<any, any> = {}
+      if (request?._tableId) {
+        schema = getSchemaForDatasourcePlus(request._tableId, {
+          searchableSchema: true,
+        }).schema
+        delete request._tableId
+      }
+      try {
+        const data = { schema, ...request }
+        const stepBlock = block as AutomationStep
+        await automationStore.actions.updateBlockInputs(stepBlock, data)
+      } catch (error) {
+        console.error("Error saving automation", error)
+        notifications.error("Error saving automation")
+      }
+    }
+  ),
+
   save: async (automation: Automation) => {
     const response = await API.updateAutomation(automation)
     await store.actions.fetch()
@@ -1583,10 +1865,12 @@ const automationActions = (store: AutomationStore) => ({
   delete: async (automation: Automation) => {
     const isRowAction = sdk.automations.isRowAction(automation)
     if (isRowAction) {
-      await rowActions.delete(
-        automation.definition.trigger.inputs.tableId,
-        automation.definition.trigger.inputs.rowActionId
-      )
+      const rowAction = automation.definition.trigger as RowActionTrigger
+      const inputs = rowAction.inputs as AutomationTriggerInputs<
+        typeof rowAction.stepId
+      >
+
+      await rowActions.delete(inputs.tableId, inputs.rowActionId)
     } else {
       await API.deleteAutomation(automation._id!, automation._rev!)
     }
@@ -1601,13 +1885,136 @@ const automationActions = (store: AutomationStore) => ({
       return state
     })
   },
+
+  /**
+   * Update or clear the name of the target block from
+   * the selected automation.
+   *
+   * @param block
+   * @param newName
+   */
+  updateBlockTitle: async (block: AutomationStep, newName: string) => {
+    if (newName.trim().length === 0) {
+      await automationStore.actions.deleteAutomationName(block.id)
+    } else {
+      await automationStore.actions.saveAutomationName(block.id, newName)
+    }
+  },
+
+  /**
+   * Update the resource role for the automation resource
+   * @param role
+   * @returns
+   */
+  setPermissions: async (role?: string, automation?: Automation) => {
+    if (!role || !automation?._id) {
+      return
+    }
+    await permissions.save({
+      level: PermissionLevel.EXECUTE,
+      role,
+      resource: automation?._id,
+    })
+  },
+
+  getPermissions: async (automationId?: string) => {
+    if (!automationId) {
+      return
+    }
+    const perms = await permissions.forResource(automationId)
+    if (!perms[PermissionLevel.EXECUTE]) {
+      return "BASIC"
+    } else {
+      return perms[PermissionLevel.EXECUTE].role
+    }
+  },
+
+  processBlockResults: (
+    testResults?: TestAutomationResponse,
+    block?: AutomationStep | AutomationTrigger
+  ) => {
+    if (!testResults || !block) {
+      return
+    }
+
+    // DidNotTriggerResponse result for a row step filter
+    if (
+      isTrigger(block) &&
+      isDidNotTriggerResponse(testResults) &&
+      FilterableRowTriggers.includes(block.stepId)
+    ) {
+      return testResults
+    }
+
+    // Process the step/trigger automation results as normal.
+    const stepTestResults = testResults as AutomationResults
+    return (stepTestResults?.steps || []).find(step =>
+      block.id ? step.id === block.id : step.stepId === block.stepId
+    )
+  },
+
+  /**
+   * Remove the target loop block from the automation and save.
+   * @param blockRef The target loop block
+   * @returns
+   */
+  removeLooping: async (blockRef?: BlockRef) => {
+    if (!blockRef?.looped) {
+      return
+    }
+    let loopBlockRef = get(selectedAutomation).blockRefs[blockRef.looped]
+    if (loopBlockRef) {
+      await automationStore.actions.deleteAutomationBlock(loopBlockRef.pathTo)
+    }
+  },
+
+  /**
+   * Creates a brand new loop block using the blockRef id as the
+   * blockToLoop value. The new loop block is then added to the automation and saved
+   * @param blockRef The block to be looped
+   * @returns
+   */
+  addLooping: async (blockRef?: BlockRef) => {
+    if (!blockRef) {
+      return
+    }
+    const loopDefinition = get(store).blockDefinitions.ACTION.LOOP
+    const loopBlock = automationStore.actions.constructBlock(
+      BlockDefinitionTypes.ACTION,
+      AutomationActionStepId.LOOP,
+      loopDefinition
+    )
+    const blockDest = blockRef.pathTo.at(-1)
+    loopBlock.blockToLoop = blockDest!.id
+
+    await automationStore.actions.addBlockToAutomation(
+      loopBlock,
+      blockRef.pathTo
+    )
+  },
+
+  /**
+   * Focus the automation canvas on one particular step in the
+   * automation. Open the sidebar and set the data mode.
+   * @param blockId
+   * @param mode Defaults to DataMode.Input
+   */
+  selectNode: async (blockId?: string, mode?: DataMode) => {
+    store.update(state => {
+      return {
+        ...state,
+        selectedNodeId: blockId,
+        selectedNodeMode: mode ?? DataMode.INPUT,
+      }
+    })
+  },
 })
 
 export interface AutomationContext {
   user: AppSelfResponse | null
   trigger?: AutomationTriggerResultOutputs
   steps: Record<string, AutomationStep>
-  env: Record<string, any>
+  env?: Record<string, any>
   settings: Record<string, any>
 }
 
@@ -1620,7 +2027,6 @@ export class SelectedAutomationStore extends DerivedBudiStore<
       return derived(automationStore, $store => {
         if (!$store.selectedAutomationId) {
           return {
-            data: null,
             blockRefs: {},
             ...$store,
           }
@@ -1632,13 +2038,12 @@ export class SelectedAutomationStore extends DerivedBudiStore<
 
         if (!selected) {
           return {
-            data: null,
             blockRefs: {},
             ...$store,
           }
         }
 
-        const blockRefs: Record<string, any> = {}
+        const blockRefs: Record<string, BlockRef> = {}
         const updatedAuto = cloneDeep(selected)
 
         // Only traverse if we have a valid automation
@@ -1676,7 +2081,6 @@ class AutomationStore extends BudiStore<AutomationState> {
   history: HistoryStore<Automation>
   actions: ReturnType<typeof automationActions>
   selected: SelectedAutomationStore
-  context: Readable<AutomationContext> | undefined
 
   constructor() {
     super(initialAutomationState)
@@ -1701,19 +2105,138 @@ export const automationStore = new AutomationStore()
 export const automationHistoryStore = automationStore.history
 export const selectedAutomation = automationStore.selected
 
-// Define an empty evaluate context at the start
+/**
+ * Pad out a base default context for subscribers
+ */
 const emptyContext: AutomationContext = {
   user: {},
   steps: {},
-  env: {},
-  settings: {},
+  settings: {
+    url: "",
+    company: "",
+    logo: "",
+  },
 }
 
-// Page layout kicks off initialisation, subscription happens within the page
-export const evaluationContext: Readable<AutomationContext> = readable(
-  emptyContext,
-  set => {
-    const unsubscribe = automationStore.context?.subscribe(set) ?? (() => {})
-    return () => unsubscribe()
+const generateContext = () => {
+  if (!organisation || !automationStore?.selected || !environment || !tables) {
+    return readable(emptyContext)
   }
-)
+  return derived(
+    [organisation, automationStore.selected, environment, tables],
+    ([
+      $organisation,
+      $selectedAutomation,
+      $env,
+      $tables,
+    ]): AutomationContext => {
+      const { platformUrl: url, company, logoUrl: logo } = $organisation
+
+      const results: TestAutomationResponse | undefined =
+        $selectedAutomation?.testResults
+
+      const testData: AutomationTriggerResultOutputs | undefined =
+        $selectedAutomation.data?.testData
+
+      const triggerDef = $selectedAutomation.data?.definition?.trigger
+
+      const isWebhook = triggerDef?.stepId === AutomationTriggerStepId.WEBHOOK
+      const isRowAction =
+        triggerDef?.stepId === AutomationTriggerStepId.ROW_ACTION
+
+      const triggerInputs = triggerDef
+        ? (triggerDef.inputs as AutomationTriggerInputs<
+            typeof triggerDef.stepId
+          >)
+        : undefined
+
+      let triggerData: AutomationTriggerResultOutputs | undefined
+
+      if (results && isAutomationResults(results)) {
+        const automationTrigger: AutomationTriggerResult | undefined =
+          results?.trigger
+
+        const outputs: AutomationTriggerResultOutputs | undefined =
+          automationTrigger?.outputs
+        triggerData = outputs ? outputs : undefined
+
+        if (triggerData) {
+          if (isRowAction) {
+            const rowActionInputs: RowActionTriggerInputs =
+              triggerInputs as RowActionTriggerInputs
+            const rowActionTableId = rowActionInputs.tableId
+            const rowActionTable = $tables.list.find(
+              table => table._id === rowActionTableId
+            )
+
+            const rowTriggerOutputs = triggerData as RowActionTriggerOutputs
+
+            if (rowActionTable) {
+              // Row action table must always be retrieved as it is never
+              // returned in the test results
+              rowTriggerOutputs.table = rowActionTable
+            }
+          } else if (isWebhook) {
+            const webhookTrigger = triggerData as WebhookTriggerOutputs
+            // Ensure it displays in the event that the configuration was been skipped
+            webhookTrigger.body = webhookTrigger.body ?? {}
+          }
+        }
+
+        // Clean up unnecessary data from the context
+        // Meta contains UI/UX config data. Non-bindable
+        delete triggerData?.meta
+      } else {
+        // Substitute test data in place of the trigger data if the test hasn't been run
+        triggerData = testData
+      }
+
+      // AppSelf context required to mirror server user context
+      const userContext = $selectedAutomation.appSelf || {}
+
+      // Extract step results from a valid response
+      const stepResults =
+        results && isAutomationResults(results) ? results?.steps : []
+
+      // Env vars require a license. In the event they are empty or unavailable
+      // the UI wont display an empty section in the context
+      const envVars = $env?.variables.length
+        ? $env?.variables.reduce(
+            (acc: Record<string, any>, variable: Record<string, any>) => {
+              acc[variable.name] = ""
+              return acc
+            },
+            {}
+          )
+        : undefined
+
+      // Result data from a completed test run
+      // Initially contain info around
+      const stepContext = stepResults.reduce(
+        (acc: Record<string, any>, res: Record<string, any>) => {
+          acc[res.id] = res.outputs
+          return acc
+        },
+        {}
+      )
+
+      return {
+        user: userContext,
+        // Merge in the trigger data.
+        ...(triggerData ? { trigger: { ...triggerData } } : {}),
+        steps: stepContext,
+        ...(envVars ? { env: envVars } : {}),
+        settings: { url, company, logo },
+      }
+    },
+    emptyContext
+  )
+}
+
+/**
+ * Generates a derived store acting as an evaluation context
+ * for bindings in automations
+ *
+ * @returns {Readable<AutomationContext>}
+ */
+export const evaluationContext: Readable<AutomationContext> = generateContext()
diff --git a/packages/builder/src/stores/builder/screens.ts b/packages/builder/src/stores/builder/screens.ts
index 51072adbb8..a67490badb 100644
--- a/packages/builder/src/stores/builder/screens.ts
+++ b/packages/builder/src/stores/builder/screens.ts
@@ -4,22 +4,24 @@ import { Helpers } from "@budibase/bbui"
 import { RoleUtils, Utils } from "@budibase/frontend-core"
 import { findAllMatchingComponents } from "@/helpers/components"
 import {
-  layoutStore,
   appStore,
   componentStore,
+  layoutStore,
   navigationStore,
+  previewStore,
   selectedComponent,
 } from "@/stores/builder"
 import { createHistoryStore, HistoryStore } from "@/stores/builder/history"
 import { API } from "@/api"
 import { BudiStore } from "../BudiStore"
 import {
-  FetchAppPackageResponse,
-  DeleteScreenResponse,
-  Screen,
   Component,
-  SaveScreenResponse,
   ComponentDefinition,
+  DeleteScreenResponse,
+  FetchAppPackageResponse,
+  SaveScreenResponse,
+  Screen,
+  ScreenVariant,
 } from "@budibase/types"
 
 interface ScreenState {
@@ -115,6 +117,14 @@ export class ScreenStore extends BudiStore<ScreenState> {
       state.selectedScreenId = screen._id
       return state
     })
+
+    // If this is a PDF screen, ensure we're on desktop
+    if (
+      screen.variant === ScreenVariant.PDF &&
+      get(previewStore).previewDevice !== "desktop"
+    ) {
+      previewStore.setDevice("desktop")
+    }
   }
 
   /**
diff --git a/packages/builder/src/templates/screenTemplating/Screen.js b/packages/builder/src/templates/screenTemplating/Screen.js
index da3c83820e..4eb0e7a098 100644
--- a/packages/builder/src/templates/screenTemplating/Screen.js
+++ b/packages/builder/src/templates/screenTemplating/Screen.js
@@ -1,5 +1,6 @@
 import { BaseStructure } from "../BaseStructure"
 import { Helpers } from "@budibase/bbui"
+import { ScreenVariant } from "@budibase/types"
 
 export class Screen extends BaseStructure {
   constructor() {
@@ -81,3 +82,25 @@ export class Screen extends BaseStructure {
     return this
   }
 }
+
+export class PDFScreen extends Screen {
+  constructor() {
+    super()
+    this._json.variant = ScreenVariant.PDF
+    this._json.width = "Max"
+    this._json.showNavigation = false
+    this._json.props = {
+      _id: Helpers.uuid(),
+      _component: "@budibase/standard-components/pdf",
+      _styles: {
+        normal: {},
+        hover: {},
+        active: {},
+        selected: {},
+      },
+      _children: [],
+      _instanceName: "PDF",
+      title: "PDF",
+    }
+  }
+}
diff --git a/packages/builder/src/templates/screenTemplating/index.js b/packages/builder/src/templates/screenTemplating/index.js
index ff15687776..855f255a3a 100644
--- a/packages/builder/src/templates/screenTemplating/index.js
+++ b/packages/builder/src/templates/screenTemplating/index.js
@@ -1,3 +1,4 @@
 export { default as blank } from "./blank"
 export { default as form } from "./form"
 export { default as table } from "./table"
+export { default as pdf } from "./pdf"
diff --git a/packages/builder/src/templates/screenTemplating/pdf.js b/packages/builder/src/templates/screenTemplating/pdf.js
new file mode 100644
index 0000000000..5c10e5cec2
--- /dev/null
+++ b/packages/builder/src/templates/screenTemplating/pdf.js
@@ -0,0 +1,20 @@
+import { PDFScreen } from "./Screen"
+import { capitalise } from "@/helpers"
+import getValidRoute from "./getValidRoute"
+import { Roles } from "@/constants/backend"
+
+const pdf = ({ route, screens }) => {
+  const validRoute = getValidRoute(screens, route, Roles.BASIC)
+
+  const template = new PDFScreen().role(Roles.BASIC).route(validRoute).json()
+
+  return [
+    {
+      data: template,
+      navigationLinkLabel:
+        validRoute === "/" ? null : capitalise(validRoute.split("/")[1]),
+    },
+  ]
+}
+
+export default pdf
diff --git a/packages/builder/src/types/automations.ts b/packages/builder/src/types/automations.ts
new file mode 100644
index 0000000000..961dabf2eb
--- /dev/null
+++ b/packages/builder/src/types/automations.ts
@@ -0,0 +1,213 @@
+import {
+  type AutomationStep,
+  type AutomationStepInputs,
+  type AutomationTrigger,
+  type AutomationTriggerInputs,
+  type BaseIOStructure,
+  type UISearchFilter,
+  type TestAutomationResponse,
+  type AppSelfResponse,
+  type Automation,
+  type BlockDefinitions,
+  type BlockRef,
+  AutomationActionStepId,
+  AutomationTriggerStepId,
+  AutomationCustomIOType,
+  AutomationIOType,
+} from "@budibase/types"
+import { SvelteComponent } from "svelte"
+
+export enum DataMode {
+  INPUT = "data_in",
+  OUTPUT = "data_out",
+  ERRORS = "errors",
+}
+
+export enum SchemaFieldTypes {
+  JSON = "json",
+  ENUM = "enum",
+  BOOL = "boolean",
+  DATE = "date",
+  FILE = "file",
+  FILTER = "filter",
+  CRON = "cron",
+  FIELDS = "fields",
+  TABLE = "table",
+  COLUMN = "column",
+  AUTOMATION_FIELDS = "automation_fields",
+  WEBHOOK_URL = "webhook_url",
+  TRIGGER_SCHEMA = "trigger_schema",
+  LOOP_OPTION = "loop_option",
+  CODE = "code",
+  CODE_V2 = "code_v2",
+  STRING = "string",
+  QUERY_PARAMS = "query_params",
+  QUERY_LIMIT = "query_limit",
+}
+
+export type KeyValuePair = {
+  name: string
+  value: string
+}
+
+// Required for filter fields. The have a definition entry
+// as well as a configuration
+export type DynamicProperties = {
+  [property: `${string}-def`]: UISearchFilter
+}
+
+// Form field update by property key
+export type FormUpdate = Record<string, unknown>
+
+export type AutomationSchemaConfig = Record<SchemaFieldTypes, SchemaConfigProps>
+
+export type FieldProps = {
+  key: string
+  field: BaseIOStructure
+  block: AutomationStep | AutomationTrigger
+  value: any
+  meta: any
+  title: string
+}
+
+// Unused for the moment
+export type InputMeta = {
+  meta?: AutomationStepInputMeta<AutomationActionStepId>
+}
+
+// This is still Attachment Specific and technically reusable.
+export type FileSelectorMeta = { useAttachmentBinding: boolean }
+
+export type AutomationStepInputMeta<T extends AutomationActionStepId> =
+  T extends AutomationActionStepId.SEND_EMAIL_SMTP
+    ? { meta: FileSelectorMeta }
+    : { meta?: Record<string, unknown> }
+
+export type StepInputs =
+  | AutomationStepInputs<AutomationActionStepId> //& InputMeta
+  | AutomationTriggerInputs<AutomationTriggerStepId> //& InputMeta
+  | undefined
+
+export const RowTriggers = [
+  AutomationTriggerStepId.ROW_UPDATED,
+  AutomationTriggerStepId.ROW_SAVED,
+  AutomationTriggerStepId.ROW_DELETED,
+  AutomationTriggerStepId.ROW_ACTION,
+]
+
+export const RowSteps = [
+  AutomationActionStepId.CREATE_ROW,
+  AutomationActionStepId.UPDATE_ROW,
+  AutomationActionStepId.DELETE_ROW,
+]
+
+export const FilterableRowTriggers = [
+  AutomationTriggerStepId.ROW_UPDATED,
+  AutomationTriggerStepId.ROW_SAVED,
+]
+
+/**
+ * Used to define how to represent automation setting
+ * forms
+ */
+export interface SchemaConfigProps {
+  comp: typeof SvelteComponent<any>
+  onChange?: (e: CustomEvent) => void
+  props?: (opts?: FieldProps) => Record<string, unknown>
+  fullWidth?: boolean
+  title?: string
+  tooltip?: string
+  wrapped?: boolean
+}
+
+export interface AutomationState {
+  automations: Automation[]
+  testResults?: TestAutomationResponse
+  showTestModal: boolean
+  blockDefinitions: BlockDefinitions
+  selectedAutomationId: string | null
+  appSelf?: AppSelfResponse
+  selectedNodeId?: string
+  selectedNodeMode?: DataMode
+}
+
+export interface DerivedAutomationState extends AutomationState {
+  data?: Automation
+  blockRefs: Record<string, BlockRef>
+}
+
+/**
+ * BlockProperties - Direct mapping of customType to SchemaFieldTypes
+ */
+export const customTypeToSchema: Record<string, SchemaFieldTypes> = {
+  [AutomationCustomIOType.TRIGGER_SCHEMA]: SchemaFieldTypes.TRIGGER_SCHEMA,
+  [AutomationCustomIOType.TABLE]: SchemaFieldTypes.TABLE,
+  [AutomationCustomIOType.COLUMN]: SchemaFieldTypes.COLUMN,
+  [AutomationCustomIOType.CRON]: SchemaFieldTypes.CRON,
+  [AutomationCustomIOType.LOOP_OPTION]: SchemaFieldTypes.LOOP_OPTION,
+  [AutomationCustomIOType.AUTOMATION_FIELDS]:
+    SchemaFieldTypes.AUTOMATION_FIELDS,
+  [AutomationCustomIOType.WEBHOOK_URL]: SchemaFieldTypes.WEBHOOK_URL,
+  [AutomationCustomIOType.QUERY_LIMIT]: SchemaFieldTypes.QUERY_LIMIT,
+  ["fields"]: SchemaFieldTypes.FIELDS,
+}
+
+/**
+ * BlockProperties - Direct mapping of type to SchemaFieldTypes
+ */
+export const typeToSchema: Partial<Record<AutomationIOType, SchemaFieldTypes>> =
+  {
+    [AutomationIOType.BOOLEAN]: SchemaFieldTypes.BOOL,
+    [AutomationIOType.DATE]: SchemaFieldTypes.DATE,
+    [AutomationIOType.JSON]: SchemaFieldTypes.JSON,
+    [AutomationIOType.ATTACHMENT]: SchemaFieldTypes.FILE,
+  }
+
+/**
+ * FlowItem - Status type enums for grading issues
+ */
+export enum FlowStatusType {
+  INFO = "info",
+  WARN = "warn",
+  ERROR = "error",
+  SUCCESS = "success",
+}
+
+/**
+ * FlowItemStatus - Message structure for building information
+ * pills that hover above the steps in the automation tree
+ */
+export type FlowItemStatus = {
+  message: string
+  icon: string
+  type: FlowStatusType
+  tooltip?: string
+}
+
+/**
+ * BlockData - Status type designation for errors or issues arising from
+ * test runs or other automation concerns
+ */
+export enum BlockStatusType {
+  INFO = "info",
+  WARN = "warn",
+  ERROR = "error",
+}
+
+/**
+ * BlockData - Source type used to discern the source of the issues
+ */
+export enum BlockStatusSource {
+  AUTOMATION_RESULTS = "results",
+  VALIDATION = "validation",
+}
+
+/**
+ * BlockData - Message structure for building out issues to be displayed
+ * in the Step Panel in automations
+ */
+export type BlockStatus = {
+  message: string
+  type: BlockStatusType
+  source?: BlockStatusSource
+}
diff --git a/packages/builder/tsconfig.json b/packages/builder/tsconfig.json
index a9e640123f..d23867ffc6 100644
--- a/packages/builder/tsconfig.json
+++ b/packages/builder/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "./tsconfig.build.json",
   "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
     "outDir": "./dist",
     "lib": ["ESNext"],
     "baseUrl": ".",
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index fc0d5a4614..64f3c34a60 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -8017,6 +8017,32 @@
         "key": "text",
         "wide": true
       },
+      {
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "defaultValue": "14px",
+        "showInBar": true,
+        "placeholder": "Default",
+        "options": [
+          {
+            "label": "Small",
+            "value": "12px"
+          },
+          {
+            "label": "Medium",
+            "value": "14px"
+          },
+          {
+            "label": "Large",
+            "value": "18px"
+          },
+          {
+            "label": "Extra large",
+            "value": "24px"
+          }
+        ]
+      },
       {
         "type": "select",
         "label": "Alignment",
@@ -8058,5 +8084,133 @@
         "showInBar": true
       }
     ]
+  },
+  "pdf": {
+    "name": "PDF Generator",
+    "icon": "Document",
+    "hasChildren": true,
+    "showEmptyState": false,
+    "illegalChildren": ["sidepanel", "modal", "gridblock"],
+    "grid": {
+      "hAlign": "center",
+      "vAlign": "start"
+    },
+    "size": {
+      "width": 800,
+      "height": 1200
+    },
+    "description": "A component to render PDFs from other Budibase components",
+    "settings": [
+      {
+        "type": "text",
+        "label": "PDF title",
+        "key": "fileName",
+        "defaultValue": "Report"
+      },
+      {
+        "type": "text",
+        "label": "Button text",
+        "key": "buttonText",
+        "defaultValue": "Download PDF"
+      }
+    ]
+  },
+  "pdftable": {
+    "name": "PDF Table",
+    "icon": "Table",
+    "styles": ["size"],
+    "size": {
+      "width": 600,
+      "height": 304
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
+    },
+    "settings": [
+      {
+        "type": "dataSource",
+        "label": "Data",
+        "key": "datasource",
+        "required": true
+      },
+      {
+        "type": "filter",
+        "label": "Filtering",
+        "key": "filter",
+        "resetOn": "datasource",
+        "dependsOn": {
+          "setting": "datasource.type",
+          "value": "custom",
+          "invert": true
+        }
+      },
+      {
+        "type": "field/sortable",
+        "label": "Sort column",
+        "key": "sortColumn",
+        "placeholder": "Default",
+        "resetOn": "datasource",
+        "dependsOn": {
+          "setting": "datasource.type",
+          "value": "custom",
+          "invert": true
+        }
+      },
+      {
+        "type": "select",
+        "label": "Sort order",
+        "key": "sortOrder",
+        "resetOn": "datasource",
+        "options": ["Ascending", "Descending"],
+        "defaultValue": "Ascending",
+        "dependsOn": "sortColumn"
+      },
+      {
+        "type": "columns/toplevel",
+        "label": "Columns",
+        "key": "columns",
+        "resetOn": "datasource",
+        "placeholder": "First 3 columns"
+      },
+      {
+        "type": "number",
+        "label": "Limit",
+        "key": "limit",
+        "defaultValue": 10
+      }
+    ]
+  },
+  "singlerowprovider": {
+    "name": "Single Row Provider",
+    "icon": "SQLQuery",
+    "hasChildren": true,
+    "actions": ["RefreshDatasource"],
+    "size": {
+      "width": 500,
+      "height": 200
+    },
+    "grid": {
+      "hAlign": "stretch",
+      "vAlign": "stretch"
+    },
+    "settings": [
+      {
+        "type": "table",
+        "label": "Datasource",
+        "key": "datasource",
+        "required": true
+      },
+      {
+        "type": "text",
+        "label": "Row ID",
+        "key": "rowId",
+        "required": true,
+        "resetOn": "datasource"
+      }
+    ],
+    "context": {
+      "type": "schema"
+    }
   }
 }
diff --git a/packages/client/package.json b/packages/client/package.json
index daaf0ca433..00e7b8538c 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -29,6 +29,7 @@
     "apexcharts": "^3.48.0",
     "dayjs": "^1.10.8",
     "downloadjs": "1.4.7",
+    "html2pdf.js": "^0.9.3",
     "html5-qrcode": "^2.3.8",
     "leaflet": "^1.7.1",
     "sanitize-html": "^2.13.0",
diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte
index cacb4f64c1..04a16aa701 100644
--- a/packages/client/src/components/BlockComponent.svelte
+++ b/packages/client/src/components/BlockComponent.svelte
@@ -1,20 +1,20 @@
 <script>
   import { getContext, onDestroy } from "svelte"
   import { generate } from "shortid"
-  import { builderStore } from "../stores/builder"
+  import { builderStore } from "@/stores/builder"
   import Component from "@/components/Component.svelte"
 
   export let type
-  export let props
-  export let styles
-  export let context
-  export let name
+  export let props = undefined
+  export let styles = undefined
+  export let context = undefined
+  export let name = undefined
   export let order = 0
   export let containsSlot = false
 
   // ID is only exposed as a prop so that it can be bound to from parent
   // block components
-  export let id
+  export let id = undefined
 
   const component = getContext("component")
   const block = getContext("block")
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 77414ed37f..99fd9e8737 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -196,8 +196,6 @@
   }
 
   // Metadata to pass into grid action to apply CSS
-  const checkGrid = x =>
-    x?._component?.endsWith("/container") && x?.layout === "grid"
   $: insideGrid = checkGrid(parent)
   $: isGrid = checkGrid(instance)
   $: gridMetadata = {
@@ -601,6 +599,18 @@
     }
   }
 
+  const checkGrid = x => {
+    // Check for a grid container
+    if (x?._component?.endsWith("/container") && x?.layout === "grid") {
+      return true
+    }
+    // Check for a PDF (always grid)
+    if (x?._component?.endsWith("/pdf")) {
+      return true
+    }
+    return false
+  }
+
   onMount(() => {
     // Register this component instance for external access
     if ($appStore.isDevApp) {
diff --git a/packages/client/src/components/CustomThemeWrapper.svelte b/packages/client/src/components/CustomThemeWrapper.svelte
index 61f3b577a8..75ab1dfaf1 100644
--- a/packages/client/src/components/CustomThemeWrapper.svelte
+++ b/packages/client/src/components/CustomThemeWrapper.svelte
@@ -1,12 +1,18 @@
 <script>
   import { themeStore } from "@/stores"
   import { setContext } from "svelte"
-  import { Context } from "@budibase/bbui"
+  import { Context, Helpers } from "@budibase/bbui"
 
-  setContext(Context.PopoverRoot, "#theme-root")
+  export let popoverRoot = true
+
+  const id = Helpers.uuid()
+
+  if (popoverRoot) {
+    setContext(Context.PopoverRoot, `#id`)
+  }
 </script>
 
-<div style={$themeStore.customThemeCss} id="theme-root">
+<div style={$themeStore.customThemeCss} {id}>
   <slot />
 </div>
 
diff --git a/packages/client/src/components/app/SingleRowProvider.svelte b/packages/client/src/components/app/SingleRowProvider.svelte
new file mode 100644
index 0000000000..b8a25a6005
--- /dev/null
+++ b/packages/client/src/components/app/SingleRowProvider.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { getContext } from "svelte"
+  import type { Row, TableDatasource, ViewDatasource } from "@budibase/types"
+
+  export let datasource: TableDatasource | ViewDatasource
+  export let rowId: string
+
+  const component = getContext("component")
+  const { styleable, API, Provider, ActionTypes } = getContext("sdk")
+
+  let row: Row | undefined
+
+  $: datasourceId =
+    datasource.type === "table" ? datasource.tableId : datasource.id
+  $: fetchRow(datasourceId, rowId)
+  $: actions = [
+    {
+      type: ActionTypes.RefreshDatasource,
+      callback: () => fetchRow(datasourceId, rowId),
+      metadata: { dataSource: datasource },
+    },
+  ]
+
+  const fetchRow = async (datasourceId: string, rowId: string) => {
+    try {
+      row = await API.fetchRow(datasourceId, rowId)
+    } catch (e) {
+      row = undefined
+    }
+  }
+</script>
+
+<div use:styleable={$component.styles}>
+  <Provider {actions} data={row ?? null}>
+    <slot />
+  </Provider>
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+</style>
diff --git a/packages/client/src/components/app/Text.svelte b/packages/client/src/components/app/Text.svelte
index 1880669c15..c4937fec3d 100644
--- a/packages/client/src/components/app/Text.svelte
+++ b/packages/client/src/components/app/Text.svelte
@@ -2,23 +2,29 @@
   import { getContext } from "svelte"
   import { MarkdownViewer } from "@budibase/bbui"
 
-  export let text: string = ""
+  export let text: any = ""
   export let color: string | undefined = undefined
   export let align: "left" | "center" | "right" | "justify" = "left"
+  export let size: string | undefined = "14px"
 
   const component = getContext("component")
   const { styleable } = getContext("sdk")
 
   // Add in certain settings to styles
-  $: styles = enrichStyles($component.styles, color, align)
+  $: styles = enrichStyles($component.styles, color, align, size)
+
+  // Ensure we're always passing in a string value to the markdown editor
+  $: safeText = stringify(text)
 
   const enrichStyles = (
     styles: any,
     colorStyle: typeof color,
-    alignStyle: typeof align
+    alignStyle: typeof align,
+    size: string | undefined
   ) => {
     let additions: Record<string, string> = {
       "text-align": alignStyle,
+      "font-size": size || "14px",
     }
     if (colorStyle) {
       additions.color = colorStyle
@@ -31,10 +37,24 @@
       },
     }
   }
+
+  const stringify = (text: any): string => {
+    if (text == null) {
+      return ""
+    }
+    if (typeof text !== "string") {
+      try {
+        return JSON.stringify(text)
+      } catch (e) {
+        return ""
+      }
+    }
+    return text
+  }
 </script>
 
 <div use:styleable={styles}>
-  <MarkdownViewer value={text} />
+  <MarkdownViewer value={safeText} />
 </div>
 
 <style>
diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte
index 03598d53bd..66b7e14bac 100644
--- a/packages/client/src/components/app/container/GridContainer.svelte
+++ b/packages/client/src/components/app/container/GridContainer.svelte
@@ -135,12 +135,18 @@
   use:styleable={$styles}
   data-cols={GridColumns}
   data-col-size={colSize}
+  data-required-rows={requiredRows}
   on:click={onClick}
 >
   {#if inBuilder}
-    <div class="underlay">
-      {#each { length: GridColumns * rows } as _, idx}
-        <div class="placeholder" class:first-col={idx % GridColumns === 0} />
+    <div class="underlay-h">
+      {#each { length: rows } as _}
+        <div class="placeholder-h" />
+      {/each}
+    </div>
+    <div class="underlay-v">
+      {#each { length: GridColumns } as _}
+        <div class="placeholder-v" />
       {/each}
     </div>
   {/if}
@@ -151,7 +157,8 @@
 
 <style>
   .grid,
-  .underlay {
+  .underlay-h,
+  .underlay-v {
     height: var(--height) !important;
     min-height: var(--min-height) !important;
     max-height: none !important;
@@ -161,37 +168,45 @@
     grid-template-columns: repeat(var(--cols), calc(var(--col-size) * 1px));
     position: relative;
   }
-  .underlay {
+  .clickable {
+    cursor: pointer;
+  }
+
+  /* Underlay grid lines */
+  .underlay-h,
+  .underlay-v {
+    z-index: 0;
     display: none;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    border-top: 1px solid var(--spectrum-global-color-gray-900);
     opacity: 0.1;
     pointer-events: none;
   }
-  .underlay {
-    z-index: 0;
-  }
-  .placeholder {
+  .placeholder-h {
     border-bottom: 1px solid var(--spectrum-global-color-gray-900);
+    grid-column: 1 / -1;
+  }
+  .placeholder-h:first-child {
+    border-top: 1px solid var(--spectrum-global-color-gray-900);
+  }
+  .placeholder-v {
     border-right: 1px solid var(--spectrum-global-color-gray-900);
+    grid-row: 1 / -1;
   }
-  .placeholder.first-col {
+  .placeholder-v:first-child {
     border-left: 1px solid var(--spectrum-global-color-gray-900);
   }
-  .clickable {
-    cursor: pointer;
-  }
 
   /* Highlight grid lines when resizing children */
-  :global(.grid.highlight > .underlay) {
+  :global(.grid.highlight > .underlay-h),
+  :global(.grid.highlight > .underlay-v) {
     display: grid;
   }
 
-  /* Highlight sibling borders when resizing childern */
+  /* Highlight sibling borders when resizing children */
   :global(.grid.highlight > .component:not(.dragging)) {
     outline: 2px solid var(--spectrum-global-color-static-blue-200);
     pointer-events: none !important;
diff --git a/packages/client/src/components/app/index.js b/packages/client/src/components/app/index.js
index 78a3657024..35e7d21d67 100644
--- a/packages/client/src/components/app/index.js
+++ b/packages/client/src/components/app/index.js
@@ -36,10 +36,12 @@ export { default as sidepanel } from "./SidePanel.svelte"
 export { default as modal } from "./Modal.svelte"
 export { default as gridblock } from "./GridBlock.svelte"
 export { default as textv2 } from "./Text.svelte"
+export { default as singlerowprovider } from "./SingleRowProvider.svelte"
 export * from "./charts"
 export * from "./forms"
 export * from "./blocks"
 export * from "./dynamic-filter"
+export * from "./pdf"
 
 // Deprecated component left for compatibility in old apps
 export * from "./deprecated/table"
diff --git a/packages/client/src/components/app/pdf/PDF.svelte b/packages/client/src/components/app/pdf/PDF.svelte
new file mode 100644
index 0000000000..bfdb893106
--- /dev/null
+++ b/packages/client/src/components/app/pdf/PDF.svelte
@@ -0,0 +1,191 @@
+<script lang="ts">
+  import { getContext, onMount, tick } from "svelte"
+  import { Heading, Button } from "@budibase/bbui"
+  import { htmlToPdf, pxToPt, A4HeightPx, type PDFOptions } from "./pdf"
+  import { GridRowHeight } from "@/constants"
+  import CustomThemeWrapper from "@/components/CustomThemeWrapper.svelte"
+
+  const component = getContext("component")
+  const { styleable, Block, BlockComponent } = getContext("sdk")
+
+  export let fileName: string | undefined
+  export let buttonText: string | undefined
+
+  // Derive dimension calculations
+  const DesiredRows = 40
+  const innerPageHeightPx = GridRowHeight * DesiredRows
+  const doubleMarginPx = A4HeightPx - innerPageHeightPx
+  const marginPt = pxToPt(doubleMarginPx / 2)
+
+  let rendering = false
+  let pageCount = 1
+  let ref: HTMLElement
+  let gridRef: HTMLElement
+
+  $: safeName = fileName || "Report"
+  $: safeButtonText = buttonText || "Download PDF"
+  $: heightPx = pageCount * innerPageHeightPx + doubleMarginPx
+  $: pageStyle = `--height:${heightPx}px; --margin:${marginPt}pt;`
+  $: gridMinHeight = pageCount * DesiredRows * GridRowHeight
+
+  const generatePDF = async () => {
+    rendering = true
+    await tick()
+    preprocessCSS()
+    try {
+      const opts: PDFOptions = {
+        fileName: safeName,
+        marginPt,
+        footer: true,
+      }
+      await htmlToPdf(ref, opts)
+    } catch (error) {
+      console.error("Error rendering PDF", error)
+    }
+    rendering = false
+  }
+
+  const preprocessCSS = () => {
+    const els = document.getElementsByClassName("grid-child")
+    for (let el of els) {
+      if (!(el instanceof HTMLElement)) {
+        return
+      }
+      // Get the computed values and assign them back to the style, simplifying
+      // the CSS that gets handled by HTML2PDF
+      const styles = window.getComputedStyle(el)
+      el.style.setProperty("grid-column-end", styles.gridColumnEnd, "important")
+    }
+  }
+
+  const getDividerStyle = (idx: number) => {
+    const top = (idx + 1) * innerPageHeightPx + doubleMarginPx / 2
+    return `--idx:"${idx + 1}"; --top:${top}px;`
+  }
+
+  const handleGridMutation = () => {
+    const rows = parseInt(gridRef.dataset.requiredRows || "1")
+    const nextPageCount = Math.max(1, Math.ceil(rows / DesiredRows))
+    if (nextPageCount > pageCount || !gridRef.classList.contains("highlight")) {
+      pageCount = nextPageCount
+    }
+  }
+
+  onMount(() => {
+    // Observe required content rows and use this to determine required pages
+    const gridDOMID = `${$component.id}-grid-dom`
+    gridRef = document.getElementsByClassName(gridDOMID)[0] as HTMLElement
+    const mutationObserver = new MutationObserver(handleGridMutation)
+    mutationObserver.observe(gridRef, {
+      attributes: true,
+      attributeFilter: ["data-required-rows", "class"],
+    })
+    return () => {
+      mutationObserver.disconnect()
+    }
+  })
+</script>
+
+<Block>
+  <div class="wrapper" style="--margin:{marginPt}pt;">
+    <div class="container" use:styleable={$component.styles}>
+      <div class="title">
+        <Heading size="M">{safeName}</Heading>
+        <Button disabled={rendering} cta on:click={generatePDF}>
+          {safeButtonText}
+        </Button>
+      </div>
+      <div class="page" style={pageStyle}>
+        {#if pageCount > 1}
+          {#each { length: pageCount } as _, idx}
+            <div
+              class="divider"
+              class:last={idx === pageCount - 1}
+              style={getDividerStyle(idx)}
+            />
+          {/each}
+        {/if}
+        <div
+          class="spectrum spectrum--medium spectrum--light pageContent"
+          bind:this={ref}
+        >
+          <CustomThemeWrapper popoverRoot={false}>
+            <BlockComponent
+              type="container"
+              props={{ layout: "grid" }}
+              styles={{
+                normal: {
+                  height: `${gridMinHeight}px`,
+                },
+              }}
+              context="grid"
+            >
+              <slot />
+            </BlockComponent>
+          </CustomThemeWrapper>
+        </div>
+      </div>
+    </div>
+  </div>
+</Block>
+
+<style>
+  .wrapper {
+    width: 100%;
+    height: 100%;
+    padding: 64px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: flex-start;
+  }
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    width: 595.28pt;
+    gap: var(--spacing-xl);
+    align-self: center;
+  }
+  .title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .page {
+    width: 595.28pt;
+    min-height: var(--height);
+    padding: var(--margin);
+    background-color: white;
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: flex-start;
+    align-items: stretch;
+    box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.1);
+    flex-direction: column;
+    margin: 0 auto;
+    position: relative;
+  }
+  .pageContent {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    background: white;
+  }
+  .divider {
+    width: 100%;
+    height: 2px;
+    background: var(--spectrum-global-color-static-gray-400);
+    position: absolute;
+    left: 0;
+    top: var(--top);
+    transform: translateY(-50%);
+  }
+  .divider.last {
+    top: calc(var(--top) + var(--margin));
+    background: transparent;
+  }
+</style>
diff --git a/packages/client/src/components/app/pdf/PDFTable.svelte b/packages/client/src/components/app/pdf/PDFTable.svelte
new file mode 100644
index 0000000000..e4d415fa01
--- /dev/null
+++ b/packages/client/src/components/app/pdf/PDFTable.svelte
@@ -0,0 +1,143 @@
+<script lang="ts">
+  import type {
+    DataFetchDatasource,
+    FieldSchema,
+    GroupUserDatasource,
+    SortOrder,
+    TableSchema,
+    UISearchFilter,
+    UserDatasource,
+  } from "@budibase/types"
+  import { fetchData, QueryUtils, stringifyRow } from "@budibase/frontend-core"
+  import { getContext } from "svelte"
+
+  type ProviderDatasource = Exclude<
+    DataFetchDatasource,
+    UserDatasource | GroupUserDatasource
+  >
+  type ChosenColumns = Array<{ name: string; displayName?: string }> | undefined
+  type Schema = { [key: string]: FieldSchema & { displayName: string } }
+
+  export let datasource: ProviderDatasource
+  export let filter: UISearchFilter | undefined = undefined
+  export let sortColumn: string | undefined = undefined
+  export let sortOrder: SortOrder | undefined = undefined
+  export let columns: ChosenColumns = undefined
+  export let limit: number = 20
+
+  const component = getContext("component")
+  const { styleable, API } = getContext("sdk")
+
+  $: query = QueryUtils.buildQuery(filter)
+  $: fetch = createFetch(datasource)
+  $: fetch.update({
+    query,
+    sortColumn,
+    sortOrder,
+    limit,
+  })
+  $: schema = sanitizeSchema($fetch.schema, columns)
+  $: columnCount = Object.keys(schema).length
+  $: rowCount = $fetch.rows?.length || 0
+  $: stringifiedRows = ($fetch?.rows || []).map(row =>
+    stringifyRow(row, schema)
+  )
+
+  const createFetch = (datasource: ProviderDatasource) => {
+    return fetchData({
+      API,
+      datasource,
+      options: {
+        query,
+        sortColumn,
+        sortOrder,
+        limit,
+        paginate: false,
+      },
+    })
+  }
+
+  const sanitizeSchema = (
+    schema: TableSchema | null,
+    columns: ChosenColumns
+  ): Schema => {
+    if (!schema) {
+      return {}
+    }
+    let sanitized: Schema = {}
+
+    // Clean out hidden fields and ensure we have
+    Object.entries(schema).forEach(([field, fieldSchema]) => {
+      if (fieldSchema.visible !== false) {
+        sanitized[field] = {
+          ...fieldSchema,
+          displayName: field,
+        }
+      }
+    })
+
+    // Clean out unselected columns.
+    // Default to first 3 columns if none specified, as we are width contrained.
+    if (!columns?.length) {
+      columns = Object.values(sanitized).slice(0, 3)
+    }
+    let pruned: Schema = {}
+    for (let col of columns) {
+      if (sanitized[col.name]) {
+        pruned[col.name] = {
+          ...sanitized[col.name],
+          displayName: col.displayName || sanitized[col.name].displayName,
+        }
+      }
+    }
+    sanitized = pruned
+
+    return sanitized
+  }
+</script>
+
+<div class="vars" style="--cols:{columnCount}; --rows:{rowCount};">
+  <div class="table" class:valid={!!schema} use:styleable={$component.styles}>
+    {#if schema}
+      {#each Object.keys(schema) as col}
+        <div class="cell header">{schema[col].displayName}</div>
+      {/each}
+      {#each stringifiedRows as row}
+        {#each Object.keys(schema) as col}
+          <div class="cell">{row[col]}</div>
+        {/each}
+      {/each}
+    {/if}
+  </div>
+</div>
+
+<style>
+  .vars {
+    display: contents;
+    --border-color: var(--spectrum-global-color-gray-300);
+  }
+  .table {
+    display: grid;
+    grid-template-columns: repeat(var(--cols), minmax(40px, auto));
+    grid-template-rows: repeat(var(--rows), max-content);
+    overflow: hidden;
+    background: var(--spectrum-global-color-gray-50);
+  }
+  .table.valid {
+    border-left: 1px solid var(--border-color);
+    border-top: 1px solid var(--border-color);
+  }
+  .cell {
+    border-right: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
+    padding: var(--spacing-xs) var(--spacing-s);
+    overflow: hidden;
+    word-break: break-word;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+  .cell.header {
+    font-weight: 600;
+  }
+</style>
diff --git a/packages/client/src/components/app/pdf/index.ts b/packages/client/src/components/app/pdf/index.ts
new file mode 100644
index 0000000000..ae100c894b
--- /dev/null
+++ b/packages/client/src/components/app/pdf/index.ts
@@ -0,0 +1,2 @@
+export { default as pdf } from "./PDF.svelte"
+export { default as pdftable } from "./PDFTable.svelte"
diff --git a/packages/client/src/components/app/pdf/pdf.ts b/packages/client/src/components/app/pdf/pdf.ts
new file mode 100644
index 0000000000..ed47dc9831
--- /dev/null
+++ b/packages/client/src/components/app/pdf/pdf.ts
@@ -0,0 +1,78 @@
+// @ts-ignore
+import html2pdf from "html2pdf.js"
+
+export const pxToPt = (px: number) => (px / 4) * 3
+export const ptToPx = (pt: number) => (pt / 3) * 4
+
+export const A4HeightPx = ptToPx(841.92) + 1
+
+export interface PDFOptions {
+  fileName?: string
+  marginPt?: number
+  orientation?: "portrait" | "landscape"
+  htmlScale?: number
+  footer?: boolean
+}
+
+export async function htmlToPdf(el: HTMLElement, opts: PDFOptions = {}) {
+  const userOpts: Required<PDFOptions> = {
+    fileName: "file.pdf",
+    marginPt: 60,
+    orientation: "portrait",
+    htmlScale: 1,
+    footer: true,
+    ...opts,
+  }
+
+  return new Promise(resolve => {
+    // Sanity check title
+    let fileName = userOpts.fileName
+    if (!fileName.endsWith(".pdf")) {
+      fileName += ".pdf"
+    }
+
+    // Config
+    const options = {
+      margin: userOpts.marginPt,
+      filename: fileName,
+      image: { type: "jpeg", quality: 0.95 },
+      html2canvas: { dpi: 192, scale: 2, useCORS: true },
+      jsPDF: {
+        orientation: userOpts.orientation,
+        unit: "pt",
+        format: "a4",
+      },
+      pagebreak: { avoid: ".no-break" },
+
+      // Custom params
+      htmlScale: userOpts.htmlScale,
+    }
+
+    let worker = html2pdf().set(options).from(el).toPdf()
+
+    // Add footer if required
+    if (opts.footer) {
+      worker = worker.get("pdf").then((pdf: any) => {
+        const totalPages = pdf.internal.getNumberOfPages()
+        for (let i = 1; i <= totalPages; i++) {
+          pdf.setPage(i)
+          pdf.setFontSize(10)
+          pdf.setTextColor(200)
+          pdf.text(
+            `Page ${i} of ${totalPages}`,
+            pdf.internal.pageSize.getWidth() - options.margin,
+            pdf.internal.pageSize.getHeight() - options.margin / 2,
+            "right"
+          )
+          pdf.text(
+            options.filename.replace(".pdf", ""),
+            options.margin,
+            pdf.internal.pageSize.getHeight() - options.margin / 2
+          )
+        }
+      })
+    }
+
+    worker.save().then(resolve)
+  })
+}
diff --git a/packages/client/src/index.ts b/packages/client/src/index.ts
index 43c5d71d68..2685942921 100644
--- a/packages/client/src/index.ts
+++ b/packages/client/src/index.ts
@@ -31,6 +31,8 @@ import {
 } from "@budibase/types"
 import { ActionTypes } from "@/constants"
 import { APIClient } from "@budibase/frontend-core"
+import BlockComponent from "./components/BlockComponent.svelte"
+import Block from "./components/Block.svelte"
 
 // Provide svelte and svelte/internal as globals for custom components
 import * as svelte from "svelte"
@@ -89,6 +91,8 @@ export interface SDK {
   notificationStore: typeof notificationStore
   environmentStore: typeof environmentStore
   appStore: typeof appStore
+  Block: typeof Block
+  BlockComponent: typeof BlockComponent
 }
 
 let app: ClientApp
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index 1cc205b382..7340e6828c 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -8,6 +8,7 @@ import { RoleUtils } from "@budibase/frontend-core"
 import { findComponentById, findComponentParent } from "../utils/components.js"
 import { Helpers } from "@budibase/bbui"
 import { DNDPlaceholderID, ScreenslotID, ScreenslotType } from "@/constants"
+import { ScreenVariant } from "@budibase/types"
 
 const createScreenStore = () => {
   const store = derived(
@@ -193,5 +194,8 @@ const createScreenStore = () => {
 export const screenStore = createScreenStore()
 
 export const isGridScreen = derived(screenStore, $screenStore => {
-  return $screenStore.activeScreen?.props?.layout === "grid"
+  return (
+    $screenStore.activeScreen?.props?.layout === "grid" ||
+    $screenStore.activeScreen?.variant === ScreenVariant.PDF
+  )
 })
diff --git a/packages/client/src/utils/grid.ts b/packages/client/src/utils/grid.ts
index 3412e734c6..08520ff781 100644
--- a/packages/client/src/utils/grid.ts
+++ b/packages/client/src/utils/grid.ts
@@ -116,6 +116,9 @@ export const gridLayout = (node: HTMLDivElement, metadata: GridMetadata) => {
       return
     }
 
+    // Add a unique class to elements we mutate so we can easily find them later
+    node.classList.add("grid-child")
+
     // Callback to select the component when clicking on the wrapper
     selectComponent = (e: Event) => {
       e.stopPropagation()
diff --git a/packages/frontend-core/src/components/grid/cells/NumberCell.svelte b/packages/frontend-core/src/components/grid/cells/NumberCell.svelte
index c8ae96ef21..5ac6e14b6e 100644
--- a/packages/frontend-core/src/components/grid/cells/NumberCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/NumberCell.svelte
@@ -1,8 +1,5 @@
-<script context="module">
-  const NumberFormatter = Intl.NumberFormat()
-</script>
-
 <script>
+  import { formatNumber } from "@budibase/frontend-core"
   import TextCell from "./TextCell.svelte"
 
   export let api
@@ -13,18 +10,6 @@
     const newValue = isNaN(float) ? null : float
     onChange(newValue)
   }
-
-  const formatNumber = value => {
-    const type = typeof value
-    if (type !== "string" && type !== "number") {
-      return ""
-    }
-    if (type === "string" && !value.trim().length) {
-      return ""
-    }
-    const res = NumberFormatter.format(value)
-    return res === "NaN" ? value : res
-  }
 </script>
 
 <TextCell
diff --git a/packages/frontend-core/src/components/grid/stores/config.ts b/packages/frontend-core/src/components/grid/stores/config.ts
index 687ec73e3f..a77fdd8e74 100644
--- a/packages/frontend-core/src/components/grid/stores/config.ts
+++ b/packages/frontend-core/src/components/grid/stores/config.ts
@@ -82,8 +82,9 @@ export const deriveStores = (context: StoreContext): ConfigDerivedStore => {
         config.canEditColumns = false
       }
 
-      // Determine if we can select rows
-      config.canSelectRows = !!config.canDeleteRows || !!config.canAddRows
+      // Determine if we can select rows. Always true in the meantime as you can
+      // use the selected rows binding regardless of readonly state.
+      config.canSelectRows = true
 
       return config
     }
diff --git a/packages/frontend-core/src/utils/formatting.ts b/packages/frontend-core/src/utils/formatting.ts
new file mode 100644
index 0000000000..af0fe5ebd2
--- /dev/null
+++ b/packages/frontend-core/src/utils/formatting.ts
@@ -0,0 +1,149 @@
+import {
+  BBReferenceFieldSubType,
+  FieldSchema,
+  FieldType,
+  Row,
+  TableSchema,
+} from "@budibase/types"
+import { Helpers } from "@budibase/bbui"
+
+// Singleton formatter to save us creating one every time
+const NumberFormatter = Intl.NumberFormat()
+
+export type StringifiedRow = { [key: string]: string }
+
+// Formats a number according to the locale
+export const formatNumber = (value: any): string => {
+  const type = typeof value
+  if (type !== "string" && type !== "number") {
+    return ""
+  }
+  if (type === "string" && !value.trim().length) {
+    return ""
+  }
+  const res = NumberFormatter.format(value)
+  return res === "NaN" ? stringifyValue(value) : res
+}
+
+// Attempts to stringify any type of value
+const stringifyValue = (value: any): string => {
+  if (value == null) {
+    return ""
+  }
+  if (typeof value === "string") {
+    return value
+  }
+  if (typeof value.toString === "function") {
+    return stringifyValue(value.toString())
+  }
+  try {
+    return JSON.stringify(value)
+  } catch (e) {
+    return ""
+  }
+}
+
+const stringifyField = (value: any, schema: FieldSchema): string => {
+  switch (schema.type) {
+    // Auto should not exist as it should always be typed by its underlying
+    // real type, like date or user
+    case FieldType.AUTO:
+      return ""
+
+    // Just state whether signatures exist or not
+    case FieldType.SIGNATURE_SINGLE:
+      return value ? "Yes" : "No"
+
+    // Extract attachment names
+    case FieldType.ATTACHMENT_SINGLE:
+    case FieldType.ATTACHMENTS: {
+      if (!value) {
+        return ""
+      }
+      const arrayValue = Array.isArray(value) ? value : [value]
+      return arrayValue
+        .map(x => x.name)
+        .filter(x => !!x)
+        .join(", ")
+    }
+
+    // Extract primary displays from relationships
+    case FieldType.LINK: {
+      if (!value) {
+        return ""
+      }
+      const arrayValue = Array.isArray(value) ? value : [value]
+      return arrayValue
+        .map(x => x.primaryDisplay)
+        .filter(x => !!x)
+        .join(", ")
+    }
+
+    // Stringify JSON blobs
+    case FieldType.JSON:
+      return value ? JSON.stringify(value) : ""
+
+    // User is the only BB reference subtype right now
+    case FieldType.BB_REFERENCE:
+    case FieldType.BB_REFERENCE_SINGLE: {
+      if (
+        schema.subtype !== BBReferenceFieldSubType.USERS &&
+        schema.subtype !== BBReferenceFieldSubType.USER
+      ) {
+        return ""
+      }
+      if (!value) {
+        return ""
+      }
+      const arrayVal = Array.isArray(value) ? value : [value]
+      return arrayVal?.map((user: any) => user.primaryDisplay).join(", ") || ""
+    }
+
+    // Join arrays with commas
+    case FieldType.ARRAY:
+      return value?.join(", ") || ""
+
+    // Just capitalise booleans
+    case FieldType.BOOLEAN:
+      return Helpers.capitalise(value?.toString() || "false")
+
+    // Format dates into something readable
+    case FieldType.DATETIME: {
+      return Helpers.getDateDisplayValue(value, {
+        enableTime: !schema.dateOnly,
+        timeOnly: schema.timeOnly,
+      })
+    }
+
+    // Format numbers using a locale string
+    case FieldType.NUMBER:
+      return formatNumber(value)
+
+    // Simple string types
+    case FieldType.STRING:
+    case FieldType.LONGFORM:
+    case FieldType.BIGINT:
+    case FieldType.OPTIONS:
+    case FieldType.AI:
+    case FieldType.BARCODEQR:
+      return value || ""
+
+    // Fallback for unknown types or future column types that we forget to add
+    case FieldType.FORMULA:
+    default:
+      return stringifyValue(value)
+  }
+}
+
+// Stringifies every property of a row, ensuring they are all human-readable
+// strings for display
+export const stringifyRow = (row: Row, schema: TableSchema): StringifiedRow => {
+  let stringified: StringifiedRow = {}
+  Object.entries(schema).forEach(([field, fieldSchema]) => {
+    stringified[field] = stringifyField(
+      Helpers.deepGet(row, field),
+      fieldSchema
+    )
+  })
+  return stringified
+}
diff --git a/packages/frontend-core/src/utils/index.ts b/packages/frontend-core/src/utils/index.ts
index e1f66d348d..314353bfc8 100644
--- a/packages/frontend-core/src/utils/index.ts
+++ b/packages/frontend-core/src/utils/index.ts
@@ -15,3 +15,4 @@ export * from "./relatedColumns"
 export * from "./table"
 export * from "./components"
 export * from "./validation"
+export * from "./formatting"
diff --git a/packages/frontend-core/src/utils/schema.js b/packages/frontend-core/src/utils/schema.js
index cd55d4983d..135dbd3e35 100644
--- a/packages/frontend-core/src/utils/schema.js
+++ b/packages/frontend-core/src/utils/schema.js
@@ -1,5 +1,6 @@
 import { helpers } from "@budibase/shared-core"
 import { TypeIconMap } from "../constants"
+import { convertJSONSchemaToTableSchema } from "./json"
 
 export const getColumnIcon = column => {
   // For some reason we have remix icons saved under this property sometimes,
@@ -24,3 +25,25 @@ export const getColumnIcon = column => {
 
   return result || "Text"
 }
+
+export const addNestedJSONSchemaFields = schema => {
+  if (!schema) {
+    return schema
+  }
+  let jsonAdditions = {}
+  Object.keys(schema).forEach(fieldKey => {
+    const fieldSchema = schema[fieldKey]
+    if (fieldSchema?.type === "json") {
+      const jsonSchema = convertJSONSchemaToTableSchema(fieldSchema, {
+        squashObjects: true,
+      })
+      Object.keys(jsonSchema).forEach(jsonKey => {
+        jsonAdditions[`${fieldKey}.${jsonKey}`] = {
+          type: jsonSchema[jsonKey].type,
+          nestedJSON: true,
+        }
+      })
+    }
+  })
+  return { ...schema, ...jsonAdditions }
+}
diff --git a/packages/pro b/packages/pro
index ee9eb351c9..8e3db23290 160000
--- a/packages/pro
+++ b/packages/pro
@@ -1 +1 @@
-Subproject commit ee9eb351c94340808858bbc7e881a48983f80f34
+Subproject commit 8e3db232903de9dc30706fc5ab712a14116a5935
diff --git a/packages/server/package.json b/packages/server/package.json
index e9bf4bbf15..18b13cba90 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -49,6 +49,7 @@
   "author": "Budibase",
   "license": "GPL-3.0",
   "dependencies": {
+    "@anthropic-ai/sdk": "^0.27.3",
     "@apidevtools/swagger-parser": "10.0.3",
     "@aws-sdk/client-dynamodb": "3.709.0",
     "@aws-sdk/client-s3": "3.709.0",
diff --git a/packages/server/scripts/dev/manage.js b/packages/server/scripts/dev/manage.js
index a07fa1b582..a5af8650ef 100644
--- a/packages/server/scripts/dev/manage.js
+++ b/packages/server/scripts/dev/manage.js
@@ -47,6 +47,7 @@ async function init() {
     VERSION: "0.0.0+local",
     PASSWORD_MIN_LENGTH: "1",
     OPENAI_API_KEY: "sk-abcdefghijklmnopqrstuvwxyz1234567890abcd",
+    BUDICLOUD_URL: "https://budibaseqa.app",
   }
 
   config = { ...config, ...existingConfig }
diff --git a/packages/server/src/api/controllers/assets.ts b/packages/server/src/api/controllers/assets.ts
new file mode 100644
index 0000000000..909c49751f
--- /dev/null
+++ b/packages/server/src/api/controllers/assets.ts
@@ -0,0 +1,12 @@
+import { join } from "../../utilities/centralPath"
+import { TOP_LEVEL_PATH, DEV_ASSET_PATH } from "../../utilities/fileSystem"
+import { Ctx } from "@budibase/types"
+import env from "../../environment"
+import send from "koa-send"
+
+// this is a public endpoint with no middlewares
+export const serveBuilderAssets = async function (ctx: Ctx<void, void>) {
+  let topLevelPath = env.isDev() ? DEV_ASSET_PATH : TOP_LEVEL_PATH
+  const builderPath = join(topLevelPath, "builder")
+  await send(ctx, ctx.file, { root: builderPath })
+}
diff --git a/packages/server/src/api/controllers/row/index.ts b/packages/server/src/api/controllers/row/index.ts
index 8f4629a5b0..1d0271a726 100644
--- a/packages/server/src/api/controllers/row/index.ts
+++ b/packages/server/src/api/controllers/row/index.ts
@@ -144,9 +144,11 @@ export async function find(ctx: UserCtx<void, FindRowResponse>) {
   const { tableId, viewId } = utils.getSourceId(ctx)
   const sourceId = viewId || tableId
   const rowId = ctx.params.rowId
-
-  const response = await sdk.rows.find(sourceId, rowId)
-  ctx.body = response
+  try {
+    ctx.body = await sdk.rows.find(sourceId, rowId)
+  } catch (e) {
+    ctx.throw(404, "That row couldn't be found")
+  }
 }
 
 function isDeleteRows(input: any): input is DeleteRows {
diff --git a/packages/server/src/api/controllers/static/index.ts b/packages/server/src/api/controllers/static/index.ts
index 3d30e601db..aac4ec5d84 100644
--- a/packages/server/src/api/controllers/static/index.ts
+++ b/packages/server/src/api/controllers/static/index.ts
@@ -76,11 +76,6 @@ export const toggleBetaUiFeature = async function (
   }
 }
 
-export const serveBuilder = async function (ctx: Ctx<void, void>) {
-  const builderPath = join(TOP_LEVEL_PATH, "builder")
-  await send(ctx, ctx.file, { root: builderPath })
-}
-
 export const uploadFile = async function (
   ctx: Ctx<void, ProcessAttachmentResponse>
 ) {
diff --git a/packages/server/src/api/controllers/table/tests/utils.spec.ts b/packages/server/src/api/controllers/table/tests/utils.spec.ts
index f9d6d707e2..1fe459828c 100644
--- a/packages/server/src/api/controllers/table/tests/utils.spec.ts
+++ b/packages/server/src/api/controllers/table/tests/utils.spec.ts
@@ -1,4 +1,9 @@
-import { AIOperationEnum, AutoFieldSubType, FieldType } from "@budibase/types"
+import {
+  AIOperationEnum,
+  AutoFieldSubType,
+  FieldType,
+  JsonFieldSubType,
+} from "@budibase/types"
 import TestConfiguration from "../../../../tests/utilities/TestConfiguration"
 import { importToRows } from "../utils"
 
@@ -152,5 +157,33 @@ describe("utils", () => {
         ])
       })
     })
+
+    it("coerces strings into arrays for array fields", async () => {
+      await config.doInContext(config.appId, async () => {
+        const table = await config.createTable({
+          name: "table",
+          type: "table",
+          schema: {
+            colours: {
+              name: "colours",
+              type: FieldType.ARRAY,
+              constraints: {
+                type: JsonFieldSubType.ARRAY,
+                inclusion: ["red"],
+              },
+            },
+          },
+        })
+
+        const data = [{ colours: "red" }]
+
+        const result = await importToRows(data, table, config.user?._id)
+        expect(result).toEqual([
+          expect.objectContaining({
+            colours: ["red"],
+          }),
+        ])
+      })
+    })
   })
 })
diff --git a/packages/server/src/api/controllers/table/utils.ts b/packages/server/src/api/controllers/table/utils.ts
index d6b29dc12c..e18cdf56a7 100644
--- a/packages/server/src/api/controllers/table/utils.ts
+++ b/packages/server/src/api/controllers/table/utils.ts
@@ -155,13 +155,19 @@ export async function importToRows(
           schema.type === FieldType.ARRAY) &&
         row[fieldName]
       ) {
-        const rowVal = Array.isArray(row[fieldName])
-          ? row[fieldName]
-          : [row[fieldName]]
+        const isArray = Array.isArray(row[fieldName])
+
+        // Add option to inclusion constraints
+        const rowVal = isArray ? row[fieldName] : [row[fieldName]]
         let merged = [...schema.constraints!.inclusion!, ...rowVal]
         let superSet = new Set(merged)
         schema.constraints!.inclusion = Array.from(superSet)
         schema.constraints!.inclusion.sort()
+
+        // If array type, ensure we import the value as an array
+        if (!isArray && schema.type === FieldType.ARRAY) {
+          row[fieldName] = rowVal
+        }
       }
     }
 
diff --git a/packages/server/src/api/index.ts b/packages/server/src/api/index.ts
index 53be2b30a9..9b10d64367 100644
--- a/packages/server/src/api/index.ts
+++ b/packages/server/src/api/index.ts
@@ -8,6 +8,7 @@ import { middleware as pro } from "@budibase/pro"
 import { apiEnabled, automationsEnabled } from "../features"
 import migrations from "../middleware/appMigrations"
 import { automationQueue } from "../automations"
+import assetRouter from "./routes/assets"
 
 export { shutdown } from "./routes/public"
 const compress = require("koa-compress")
@@ -44,6 +45,12 @@ if (apiEnabled()) {
     )
     // re-direct before any middlewares occur
     .redirect("/", "/builder")
+
+  // send assets before middleware
+  router.use(assetRouter.routes())
+  router.use(assetRouter.allowedMethods())
+
+  router
     .use(
       auth.buildAuthMiddleware([], {
         publicAllowed: true,
diff --git a/packages/server/src/api/routes/assets.ts b/packages/server/src/api/routes/assets.ts
new file mode 100644
index 0000000000..c140408f0b
--- /dev/null
+++ b/packages/server/src/api/routes/assets.ts
@@ -0,0 +1,11 @@
+import { addFileManagement } from "../utils"
+import { serveBuilderAssets } from "../controllers/assets"
+import Router from "@koa/router"
+
+const router: Router = new Router()
+
+addFileManagement(router)
+
+router.get("/builder/:file*", serveBuilderAssets)
+
+export default router
diff --git a/packages/server/src/api/routes/static.ts b/packages/server/src/api/routes/static.ts
index f331609923..2fefba301e 100644
--- a/packages/server/src/api/routes/static.ts
+++ b/packages/server/src/api/routes/static.ts
@@ -1,35 +1,17 @@
 import Router from "@koa/router"
 import * as controller from "../controllers/static"
-import { budibaseTempDir } from "../../utilities/budibaseDir"
 import authorized from "../../middleware/authorized"
 import { permissions } from "@budibase/backend-core"
-import env from "../../environment"
+import { addFileManagement } from "../utils"
 import { paramResource } from "../../middleware/resourceId"
-import { devClientLibPath } from "../../utilities/fileSystem"
 
 const { BUILDER, PermissionType, PermissionLevel } = permissions
 
 const router: Router = new Router()
 
-/* istanbul ignore next */
-router.param("file", async (file: any, ctx: any, next: any) => {
-  ctx.file = file && file.includes(".") ? file : "index.html"
-  if (!ctx.file.startsWith("budibase-client")) {
-    return next()
-  }
-  // test serves from require
-  if (env.isTest()) {
-    const path = devClientLibPath()
-    ctx.devPath = path.split(ctx.file)[0]
-  } else if (env.isDev()) {
-    // Serving the client library from your local dir in dev
-    ctx.devPath = budibaseTempDir()
-  }
-  return next()
-})
+addFileManagement(router)
 
 router
-  .get("/builder/:file*", controller.serveBuilder)
   .get("/api/assets/client", controller.serveClientLibrary)
   .post("/api/attachments/process", authorized(BUILDER), controller.uploadFile)
   .post("/api/beta/:feature", controller.toggleBetaUiFeature)
diff --git a/packages/server/src/api/routes/tests/ai.spec.ts b/packages/server/src/api/routes/tests/ai.spec.ts
new file mode 100644
index 0000000000..ad2ae7dc50
--- /dev/null
+++ b/packages/server/src/api/routes/tests/ai.spec.ts
@@ -0,0 +1,344 @@
+import { mockChatGPTResponse } from "../../../tests/utilities/mocks/ai/openai"
+import TestConfiguration from "../../../tests/utilities/TestConfiguration"
+import nock from "nock"
+import { configs, env, features, setEnv } from "@budibase/backend-core"
+import {
+  AIInnerConfig,
+  ConfigType,
+  License,
+  PlanModel,
+  PlanType,
+  ProviderConfig,
+} from "@budibase/types"
+import { context } from "@budibase/backend-core"
+import { mocks } from "@budibase/backend-core/tests"
+import { MockLLMResponseFn } from "../../../tests/utilities/mocks/ai"
+import { mockAnthropicResponse } from "../../../tests/utilities/mocks/ai/anthropic"
+
+function dedent(str: string) {
+  return str
+    .split("\n")
+    .map(line => line.trim())
+    .join("\n")
+}
+
+type SetupFn = (
+  config: TestConfiguration
+) => Promise<() => Promise<void> | void>
+interface TestSetup {
+  name: string
+  setup: SetupFn
+  mockLLMResponse: MockLLMResponseFn
+}
+
+function budibaseAI(): SetupFn {
+  return async () => {
+    const cleanup = setEnv({
+      OPENAI_API_KEY: "test-key",
+    })
+    mocks.licenses.useBudibaseAI()
+    return async () => {
+      mocks.licenses.useCloudFree()
+      cleanup()
+    }
+  }
+}
+
+function customAIConfig(providerConfig: Partial<ProviderConfig>): SetupFn {
+  return async (config: TestConfiguration) => {
+    mocks.licenses.useAICustomConfigs()
+
+    const innerConfig: AIInnerConfig = {
+      myaiconfig: {
+        provider: "OpenAI",
+        name: "OpenAI",
+        apiKey: "test-key",
+        defaultModel: "gpt-4o-mini",
+        active: true,
+        isDefault: true,
+        ...providerConfig,
+      },
+    }
+
+    const { id, rev } = await config.doInTenant(
+      async () =>
+        await configs.save({
+          type: ConfigType.AI,
+          config: innerConfig,
+        })
+    )
+
+    return async () => {
+      mocks.licenses.useCloudFree()
+
+      await config.doInTenant(async () => {
+        const db = context.getGlobalDB()
+        await db.remove(id, rev)
+      })
+    }
+  }
+}
+
+const allProviders: TestSetup[] = [
+  {
+    name: "OpenAI API key",
+    setup: async () => {
+      return setEnv({
+        OPENAI_API_KEY: "test-key",
+      })
+    },
+    mockLLMResponse: mockChatGPTResponse,
+  },
+  {
+    name: "OpenAI API key with custom config",
+    setup: customAIConfig({ provider: "OpenAI", defaultModel: "gpt-4o-mini" }),
+    mockLLMResponse: mockChatGPTResponse,
+  },
+  {
+    name: "Anthropic API key with custom config",
+    setup: customAIConfig({
+      provider: "Anthropic",
+      defaultModel: "claude-3-5-sonnet-20240620",
+    }),
+    mockLLMResponse: mockAnthropicResponse,
+  },
+  {
+    name: "BudibaseAI",
+    setup: budibaseAI(),
+    mockLLMResponse: mockChatGPTResponse,
+  },
+]
+
+describe("AI", () => {
+  const config = new TestConfiguration()
+
+  beforeAll(async () => {
+    await config.init()
+  })
+
+  afterAll(() => {
+    config.end()
+  })
+
+  beforeEach(() => {
+    nock.cleanAll()
+  })
+
+  describe.each(allProviders)(
+    "provider: $name",
+    ({ setup, mockLLMResponse }: TestSetup) => {
+      let cleanup: () => Promise<void> | void
+      beforeAll(async () => {
+        cleanup = await setup(config)
+      })
+
+      afterAll(async () => {
+        const maybePromise = cleanup()
+        if (maybePromise) {
+          await maybePromise
+        }
+      })
+
+      describe("POST /api/ai/js", () => {
+        let cleanup: () => void
+        beforeAll(() => {
+          cleanup = features.testutils.setFeatureFlags("*", {
+            AI_JS_GENERATION: true,
+          })
+        })
+
+        afterAll(() => {
+          cleanup()
+        })
+
+        it("handles correct plain code response", async () => {
+          mockLLMResponse(`return 42`)
+
+          const { code } = await config.api.ai.generateJs({ prompt: "test" })
+          expect(code).toBe("return 42")
+        })
+
+        it("handles correct markdown code response", async () => {
+          mockLLMResponse(
+            dedent(`
+                \`\`\`js
+                return 42
+                \`\`\`
+            `)
+          )
+
+          const { code } = await config.api.ai.generateJs({ prompt: "test" })
+          expect(code).toBe("return 42")
+        })
+
+        it("handles multiple markdown code blocks returned", async () => {
+          mockLLMResponse(
+            dedent(`
+                This:
+
+                \`\`\`js
+                return 42
+                \`\`\`
+
+                Or this:
+
+                \`\`\`js
+                return 10
+                \`\`\`
+            `)
+          )
+
+          const { code } = await config.api.ai.generateJs({ prompt: "test" })
+          expect(code).toBe("return 42")
+        })
+
+        // TODO: handle when this happens
+        it.skip("handles no code response", async () => {
+          mockLLMResponse("I'm sorry, you're quite right, etc.")
+          const { code } = await config.api.ai.generateJs({ prompt: "test" })
+          expect(code).toBe("")
+        })
+
+        it("handles LLM errors", async () => {
+          mockLLMResponse(() => {
+            throw new Error("LLM error")
+          })
+          await config.api.ai.generateJs({ prompt: "test" }, { status: 500 })
+        })
+      })
+
+      describe("POST /api/ai/cron", () => {
+        it("handles correct cron response", async () => {
+          mockLLMResponse("0 0 * * *")
+
+          const { message } = await config.api.ai.generateCron({
+            prompt: "test",
+          })
+          expect(message).toBe("0 0 * * *")
+        })
+
+        it("handles expected LLM error", async () => {
+          mockLLMResponse("Error generating cron: skill issue")
+
+          await config.api.ai.generateCron(
+            {
+              prompt: "test",
+            },
+            { status: 400 }
+          )
+        })
+
+        it("handles unexpected LLM error", async () => {
+          mockLLMResponse(() => {
+            throw new Error("LLM error")
+          })
+
+          await config.api.ai.generateCron(
+            {
+              prompt: "test",
+            },
+            { status: 500 }
+          )
+        })
+      })
+    }
+  )
+})
+
+describe("BudibaseAI", () => {
+  const config = new TestConfiguration()
+  let cleanup: () => void | Promise<void>
+  beforeAll(async () => {
+    await config.init()
+    cleanup = await budibaseAI()(config)
+  })
+
+  afterAll(async () => {
+    if ("then" in cleanup) {
+      await cleanup()
+    } else {
+      cleanup()
+    }
+    config.end()
+  })
+
+  describe("POST /api/ai/chat", () => {
+    let envCleanup: () => void
+    let featureCleanup: () => void
+    beforeAll(() => {
+      envCleanup = setEnv({ SELF_HOSTED: false })
+      featureCleanup = features.testutils.setFeatureFlags("*", {
+        AI_JS_GENERATION: true,
+      })
+    })
+
+    afterAll(() => {
+      featureCleanup()
+      envCleanup()
+    })
+
+    beforeEach(() => {
+      nock.cleanAll()
+      const license: License = {
+        plan: {
+          type: PlanType.FREE,
+          model: PlanModel.PER_USER,
+          usesInvoicing: false,
+        },
+        features: [],
+        quotas: {} as any,
+        tenantId: config.tenantId,
+      }
+      nock(env.ACCOUNT_PORTAL_URL).get("/api/license").reply(200, license)
+    })
+
+    it("handles correct chat response", async () => {
+      mockChatGPTResponse("Hi there!")
+      const { message } = await config.api.ai.chat({
+        messages: [{ role: "user", content: "Hello!" }],
+        licenseKey: "test-key",
+      })
+      expect(message).toBe("Hi there!")
+    })
+
+    it("handles chat response error", async () => {
+      mockChatGPTResponse(() => {
+        throw new Error("LLM error")
+      })
+      await config.api.ai.chat(
+        {
+          messages: [{ role: "user", content: "Hello!" }],
+          licenseKey: "test-key",
+        },
+        { status: 500 }
+      )
+    })
+
+    it("handles no license", async () => {
+      nock.cleanAll()
+      nock(env.ACCOUNT_PORTAL_URL).get("/api/license").reply(404)
+      await config.api.ai.chat(
+        {
+          messages: [{ role: "user", content: "Hello!" }],
+          licenseKey: "test-key",
+        },
+        {
+          status: 403,
+        }
+      )
+    })
+
+    it("handles no license key", async () => {
+      await config.api.ai.chat(
+        {
+          messages: [{ role: "user", content: "Hello!" }],
+          // @ts-expect-error - intentionally wrong
+          licenseKey: undefined,
+        },
+        {
+          status: 403,
+        }
+      )
+    })
+  })
+})
diff --git a/packages/server/src/api/routes/tests/assets.spec.ts b/packages/server/src/api/routes/tests/assets.spec.ts
new file mode 100644
index 0000000000..e74eab4f07
--- /dev/null
+++ b/packages/server/src/api/routes/tests/assets.spec.ts
@@ -0,0 +1,34 @@
+import fs from "fs"
+import { join } from "path"
+import { DEV_ASSET_PATH } from "../../../utilities/fileSystem"
+import * as setup from "./utilities"
+
+const path = join(DEV_ASSET_PATH, "builder")
+let addedPath = false
+const config = setup.getConfig()
+
+beforeAll(async () => {
+  if (!fs.existsSync(path)) {
+    addedPath = true
+    fs.mkdirSync(path)
+  }
+  const indexPath = join(path, "index.html")
+  if (!fs.existsSync(indexPath)) {
+    fs.writeFileSync(indexPath, "<html></html>", "utf8")
+    addedPath = true
+  }
+  await config.init()
+})
+
+afterAll(() => {
+  if (addedPath) {
+    fs.rmSync(path, { recursive: true })
+  }
+})
+
+describe("/builder/:file*", () => {
+  it("should be able to retrieve the builder file", async () => {
+    const res = await config.api.assets.get("index.html")
+    expect(res.text).toContain("<html")
+  })
+})
diff --git a/packages/server/src/api/routes/tests/automation.spec.ts b/packages/server/src/api/routes/tests/automation.spec.ts
index c41746cb2d..67c5f396b8 100644
--- a/packages/server/src/api/routes/tests/automation.spec.ts
+++ b/packages/server/src/api/routes/tests/automation.spec.ts
@@ -16,6 +16,9 @@ import {
   FieldType,
   FilterCondition,
   isDidNotTriggerResponse,
+  RowActionTriggerInputs,
+  RowCreatedTriggerInputs,
+  RowDeletedTriggerInputs,
   SettingsConfig,
   Table,
 } from "@budibase/types"
@@ -259,7 +262,10 @@ describe("/automations", () => {
     it("tests the automation successfully", async () => {
       let table = await config.createTable()
       let automation = newAutomation()
-      automation.definition.trigger.inputs.tableId = table._id
+      const triggerInputs = automation.definition.trigger
+        .inputs as RowCreatedTriggerInputs
+      triggerInputs.tableId = table._id!
+
       automation.definition.steps[0].inputs = {
         row: {
           name: "{{trigger.row.name}}",
@@ -487,22 +493,28 @@ describe("/automations", () => {
         .serverLog({ text: "test" })
         .save()
 
-      automation.definition.trigger.inputs.tableId = "newTableId"
+      const triggerInputs = automation.definition.trigger
+        .inputs as RowDeletedTriggerInputs
+
+      triggerInputs.tableId = "newTableId"
       const { automation: updatedAutomation } =
         await config.api.automation.update(automation)
 
-      expect(updatedAutomation.definition.trigger.inputs.tableId).toEqual(
-        "newTableId"
-      )
+      const updatedTriggerInputs = updatedAutomation.definition.trigger
+        .inputs as RowDeletedTriggerInputs
+
+      expect(updatedTriggerInputs.tableId).toEqual("newTableId")
     })
 
     it("cannot update a readonly field", async () => {
       const { automation } = await createAutomationBuilder(config)
-        .onRowAction({ tableId: "tableId" })
+        .onRowAction({ tableId: "tableId", rowActionId: "someId" })
         .serverLog({ text: "test" })
         .save()
 
-      automation.definition.trigger.inputs.tableId = "newTableId"
+      const triggerInputs = automation.definition.trigger
+        .inputs as RowActionTriggerInputs
+      triggerInputs.tableId = "newTableId"
       await config.api.automation.update(automation, {
         status: 400,
         body: {
diff --git a/packages/server/src/api/routes/tests/row.spec.ts b/packages/server/src/api/routes/tests/row.spec.ts
index c55db8640c..3fb882ff2f 100644
--- a/packages/server/src/api/routes/tests/row.spec.ts
+++ b/packages/server/src/api/routes/tests/row.spec.ts
@@ -46,7 +46,7 @@ import { withEnv } from "../../../environment"
 import { JsTimeoutError } from "@budibase/string-templates"
 import { isDate } from "../../../utilities"
 import nock from "nock"
-import { mockChatGPTResponse } from "../../../tests/utilities/mocks/openai"
+import { mockChatGPTResponse } from "../../../tests/utilities/mocks/ai/openai"
 
 const timestamp = new Date("2023-01-26T11:48:57.597Z").toISOString()
 tk.freeze(timestamp)
diff --git a/packages/server/src/api/routes/tests/search.spec.ts b/packages/server/src/api/routes/tests/search.spec.ts
index e115297ee9..7a7f388a2c 100644
--- a/packages/server/src/api/routes/tests/search.spec.ts
+++ b/packages/server/src/api/routes/tests/search.spec.ts
@@ -44,7 +44,7 @@ import { generator, structures, mocks } from "@budibase/backend-core/tests"
 import { DEFAULT_EMPLOYEE_TABLE_SCHEMA } from "../../../db/defaultData/datasource_bb_default"
 import { generateRowIdField } from "../../../integrations/utils"
 import { cloneDeep } from "lodash/fp"
-import { mockChatGPTResponse } from "../../../tests/utilities/mocks/openai"
+import { mockChatGPTResponse } from "../../../tests/utilities/mocks/ai/openai"
 
 const descriptions = datasourceDescribe({ plus: true })
 
diff --git a/packages/server/src/api/routes/tests/viewV2.spec.ts b/packages/server/src/api/routes/tests/viewV2.spec.ts
index ad41aa618c..261cd097d9 100644
--- a/packages/server/src/api/routes/tests/viewV2.spec.ts
+++ b/packages/server/src/api/routes/tests/viewV2.spec.ts
@@ -35,13 +35,14 @@ import {
   ViewV2,
   ViewV2Schema,
   ViewV2Type,
+  FormulaType,
 } from "@budibase/types"
 import { generator, mocks } from "@budibase/backend-core/tests"
 import { datasourceDescribe } from "../../../integrations/tests/utils"
 import merge from "lodash/merge"
 import { quotas } from "@budibase/pro"
 import { context, db, events, roles, setEnv } from "@budibase/backend-core"
-import { mockChatGPTResponse } from "../../../tests/utilities/mocks/openai"
+import { mockChatGPTResponse } from "../../../tests/utilities/mocks/ai/openai"
 import nock from "nock"
 
 const descriptions = datasourceDescribe({ plus: true })
@@ -3865,6 +3866,48 @@ if (descriptions.length) {
               expect(rows[0].count).toEqual(2)
             })
 
+            isInternal &&
+              it("should be able to max a static formula field", async () => {
+                const table = await config.api.table.save(
+                  saveTableRequest({
+                    schema: {
+                      string: {
+                        type: FieldType.STRING,
+                        name: "string",
+                      },
+                      formula: {
+                        type: FieldType.FORMULA,
+                        name: "formula",
+                        formulaType: FormulaType.STATIC,
+                        responseType: FieldType.NUMBER,
+                        formula: "{{ string }}",
+                      },
+                    },
+                  })
+                )
+                await config.api.row.save(table._id!, {
+                  string: "1",
+                })
+                await config.api.row.save(table._id!, {
+                  string: "2",
+                })
+                const view = await config.api.viewV2.create({
+                  tableId: table._id!,
+                  name: generator.guid(),
+                  type: ViewV2Type.CALCULATION,
+                  schema: {
+                    maxFormula: {
+                      visible: true,
+                      calculationType: CalculationType.MAX,
+                      field: "formula",
+                    },
+                  },
+                })
+                const { rows } = await config.api.row.search(view.id)
+                expect(rows.length).toEqual(1)
+                expect(rows[0].maxFormula).toEqual(2)
+              })
+
             it("should not be able to COUNT(DISTINCT ...) against a non-existent field", async () => {
               await config.api.viewV2.create(
                 {
diff --git a/packages/server/src/api/utils.ts b/packages/server/src/api/utils.ts
new file mode 100644
index 0000000000..67b4a8475a
--- /dev/null
+++ b/packages/server/src/api/utils.ts
@@ -0,0 +1,23 @@
+import env from "../environment"
+import { devClientLibPath } from "../utilities/fileSystem"
+import { budibaseTempDir } from "../utilities/budibaseDir"
+import Router from "@koa/router"
+
+export function addFileManagement(router: Router) {
+  /* istanbul ignore next */
+  router.param("file", async (file: any, ctx: any, next: any) => {
+    ctx.file = file && file.includes(".") ? file : "index.html"
+    if (!ctx.file.startsWith("budibase-client")) {
+      return next()
+    }
+    // test serves from require
+    if (env.isTest()) {
+      const path = devClientLibPath()
+      ctx.devPath = path.split(ctx.file)[0]
+    } else if (env.isDev()) {
+      // Serving the client library from your local dir in dev
+      ctx.devPath = budibaseTempDir()
+    }
+    return next()
+  })
+}
diff --git a/packages/server/src/automations/tests/steps/openai.spec.ts b/packages/server/src/automations/tests/steps/openai.spec.ts
index a06c633e5e..3ad03eb1b2 100644
--- a/packages/server/src/automations/tests/steps/openai.spec.ts
+++ b/packages/server/src/automations/tests/steps/openai.spec.ts
@@ -1,11 +1,8 @@
 import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
-import { setEnv as setCoreEnv } from "@budibase/backend-core"
+import { setEnv as setCoreEnv, withEnv } from "@budibase/backend-core"
 import { Model, MonthlyQuotaName, QuotaUsageType } from "@budibase/types"
 import TestConfiguration from "../../..//tests/utilities/TestConfiguration"
-import {
-  mockChatGPTError,
-  mockChatGPTResponse,
-} from "../../../tests/utilities/mocks/openai"
+import { mockChatGPTResponse } from "../../../tests/utilities/mocks/ai/openai"
 import nock from "nock"
 import { mocks } from "@budibase/backend-core/tests"
 import { quotas } from "@budibase/pro"
@@ -83,7 +80,9 @@ describe("test the openai action", () => {
   })
 
   it("should present the correct error message when an error is thrown from the createChatCompletion call", async () => {
-    mockChatGPTError()
+    mockChatGPTResponse(() => {
+      throw new Error("oh no")
+    })
 
     const result = await expectAIUsage(0, () =>
       createAutomationBuilder(config)
@@ -108,11 +107,13 @@ describe("test the openai action", () => {
     // path, because we've enabled Budibase AI. The exact value depends on a
     // calculation we use to approximate cost. This uses Budibase's OpenAI API
     // key, so we charge users for it.
-    const result = await expectAIUsage(14, () =>
-      createAutomationBuilder(config)
-        .onAppAction()
-        .openai({ model: Model.GPT_4O_MINI, prompt: "Hello, world" })
-        .test({ fields: {} })
+    const result = await withEnv({ SELF_HOSTED: false }, () =>
+      expectAIUsage(14, () =>
+        createAutomationBuilder(config)
+          .onAppAction()
+          .openai({ model: Model.GPT_4O_MINI, prompt: "Hello, world" })
+          .test({ fields: {} })
+      )
     )
 
     expect(result.steps[0].outputs.response).toEqual("This is a test")
diff --git a/packages/server/src/automations/tests/triggers/appAction.spec.ts b/packages/server/src/automations/tests/triggers/appAction.spec.ts
index 97c34b35dc..25a1573b23 100644
--- a/packages/server/src/automations/tests/triggers/appAction.spec.ts
+++ b/packages/server/src/automations/tests/triggers/appAction.spec.ts
@@ -1,7 +1,7 @@
 import { createAutomationBuilder } from "../utilities/AutomationTestBuilder"
 import TestConfiguration from "../../../tests/utilities/TestConfiguration"
 import { captureAutomationResults } from "../utilities"
-import { Automation } from "@budibase/types"
+import { Automation, AutomationIOType } from "@budibase/types"
 
 describe("app action trigger", () => {
   const config = new TestConfiguration()
@@ -48,7 +48,11 @@ describe("app action trigger", () => {
   it("should correct coerce values based on the schema", async () => {
     const { automation } = await createAutomationBuilder(config)
       .onAppAction({
-        fields: { text: "string", number: "number", boolean: "boolean" },
+        fields: {
+          text: AutomationIOType.STRING,
+          number: AutomationIOType.NUMBER,
+          boolean: AutomationIOType.BOOLEAN,
+        },
       })
       .serverLog({
         text: "{{ fields.text }} {{ fields.number }} {{ fields.boolean }}",
diff --git a/packages/server/src/automations/triggers.ts b/packages/server/src/automations/triggers.ts
index 5fd3c51d3e..9dc2b4af7f 100644
--- a/packages/server/src/automations/triggers.ts
+++ b/packages/server/src/automations/triggers.ts
@@ -23,6 +23,8 @@ import {
   AutomationResults,
   DidNotTriggerResponse,
   Table,
+  AutomationTriggerStepId,
+  AutomationTriggerInputs,
 } from "@budibase/types"
 import { executeInThread } from "../threads/automation"
 import { dataFilters, sdk } from "@budibase/shared-core"
@@ -35,6 +37,26 @@ const JOB_OPTS = {
 import * as automationUtils from "../automations/automationUtils"
 import { doesTableExist } from "../sdk/app/tables/getters"
 
+type RowTriggerStepId =
+  | AutomationTriggerStepId.ROW_ACTION
+  | AutomationTriggerStepId.ROW_DELETED
+  | AutomationTriggerStepId.ROW_SAVED
+  | AutomationTriggerStepId.ROW_UPDATED
+
+type RowTriggerInputs = Extract<
+  AutomationTriggerInputs<RowTriggerStepId>,
+  { tableId: string }
+>
+
+type RowFilterStepId =
+  | AutomationTriggerStepId.ROW_SAVED
+  | AutomationTriggerStepId.ROW_UPDATED
+
+type RowFilterInputs = Extract<
+  AutomationTriggerInputs<RowFilterStepId>,
+  { filters?: SearchFilters }
+>
+
 async function getAllAutomations() {
   const db = context.getAppDB()
   let automations = await db.allDocs<Automation>(
@@ -64,11 +86,14 @@ async function queueRelevantRowAutomations(
     // make sure it is the correct table ID as well
     automations = automations.filter(automation => {
       const trigger = automation.definition.trigger
+
+      const triggerInputs = trigger?.inputs as RowTriggerInputs
+
       return (
         trigger &&
         trigger.event === eventType &&
         !automation.disabled &&
-        trigger?.inputs?.tableId === event.row.tableId
+        triggerInputs?.tableId === event.row.tableId
       )
     })
 
@@ -183,7 +208,9 @@ export async function externalTrigger(
   ) {
     // values are likely to be submitted as strings, so we shall convert to correct type
     const coercedFields: any = {}
-    const fields = automation.definition.trigger.inputs.fields
+    const triggerInputs = automation.definition.trigger.inputs
+    const fields =
+      triggerInputs && "fields" in triggerInputs ? triggerInputs.fields : {}
     for (const key of Object.keys(fields || {})) {
       coercedFields[key] = coerce(params.fields[key], fields[key])
     }
@@ -269,8 +296,9 @@ async function checkTriggerFilters(
   event: { row: Row; oldRow: Row }
 ): Promise<boolean> {
   const trigger = automation.definition.trigger
-  const filters = trigger?.inputs?.filters
-  const tableId = trigger?.inputs?.tableId
+  const triggerInputs = trigger.inputs as RowFilterInputs
+  const filters = triggerInputs?.filters
+  const tableId = triggerInputs?.tableId
 
   if (!filters) {
     return true
diff --git a/packages/server/src/automations/utils.ts b/packages/server/src/automations/utils.ts
index f44cc30147..1fa346be19 100644
--- a/packages/server/src/automations/utils.ts
+++ b/packages/server/src/automations/utils.ts
@@ -1,17 +1,21 @@
 import { Thread, ThreadType } from "../threads"
-import { automations } from "@budibase/shared-core"
 import { automationQueue } from "./bullboard"
 import { updateEntityMetadata } from "../utilities"
 import { context, db as dbCore, utils } from "@budibase/backend-core"
 import { getAutomationMetadataParams } from "../db/utils"
 import { quotas } from "@budibase/pro"
-import { Automation, AutomationJob, MetadataType } from "@budibase/types"
+import {
+  Automation,
+  AutomationJob,
+  CronTriggerInputs,
+  isCronTrigger,
+  MetadataType,
+} from "@budibase/types"
 import { automationsEnabled } from "../features"
 import { helpers, REBOOT_CRON } from "@budibase/shared-core"
 import tracer from "dd-trace"
 import { JobId } from "bull"
 
-const CRON_STEP_ID = automations.triggers.definitions.CRON.stepId
 let Runner: Thread
 if (automationsEnabled()) {
   Runner = new Thread(ThreadType.AUTOMATION)
@@ -60,7 +64,11 @@ export async function processEvent(job: AutomationJob) {
     const task = async () => {
       try {
         return await tracer.trace("task", async () => {
-          if (isCronTrigger(job.data.automation) && !job.data.event.timestamp) {
+          const trigger = job.data.automation
+            ? job.data.automation.definition.trigger
+            : null
+          const isCron = trigger && isCronTrigger(trigger)
+          if (isCron && !job.data.event.timestamp) {
             // Requires the timestamp at run time
             job.data.event.timestamp = Date.now()
           }
@@ -147,17 +155,14 @@ export async function clearMetadata() {
   await db.bulkDocs(automationMetadata)
 }
 
-export function isCronTrigger(auto: Automation) {
-  return (
-    auto &&
-    auto.definition.trigger &&
-    auto.definition.trigger.stepId === CRON_STEP_ID
-  )
-}
-
 export function isRebootTrigger(auto: Automation) {
   const trigger = auto ? auto.definition.trigger : null
-  return isCronTrigger(auto) && trigger?.inputs.cron === REBOOT_CRON
+  const isCron = trigger && isCronTrigger(trigger)
+  if (!isCron) {
+    return false
+  }
+  const inputs = trigger?.inputs as CronTriggerInputs
+  return inputs.cron === REBOOT_CRON
 }
 
 /**
@@ -171,12 +176,13 @@ export async function enableCronTrigger(appId: any, automation: Automation) {
 
   // need to create cron job
   if (
-    isCronTrigger(automation) &&
+    trigger &&
+    isCronTrigger(trigger) &&
     !isRebootTrigger(automation) &&
-    !automation.disabled &&
-    trigger?.inputs.cron
+    !automation.disabled
   ) {
-    const cronExp = trigger.inputs.cron
+    const inputs = trigger.inputs as CronTriggerInputs
+    const cronExp = inputs.cron
     const validation = helpers.cron.validate(cronExp)
     if (!validation.valid) {
       throw new Error(
diff --git a/packages/server/src/constants/screens.ts b/packages/server/src/constants/screens.ts
index 41c1e74874..3a7413633d 100644
--- a/packages/server/src/constants/screens.ts
+++ b/packages/server/src/constants/screens.ts
@@ -365,7 +365,11 @@ export function createSampleDataTableScreen(): Screen {
           _component: "@budibase/standard-components/textv2",
           _styles: {
             normal: {
+              "--grid-desktop-col-start": 1,
               "--grid-desktop-col-end": 3,
+              "--grid-desktop-row-start": 1,
+              "--grid-desktop-row-end": 3,
+              "--grid-mobile-col-end": 7,
             },
             hover: {},
             active: {},
@@ -384,6 +388,7 @@ export function createSampleDataTableScreen(): Screen {
               "--grid-desktop-row-start": 1,
               "--grid-desktop-row-end": 3,
               "--grid-desktop-h-align": "end",
+              "--grid-mobile-col-start": 7,
             },
             hover: {},
             active: {},
diff --git a/packages/server/src/sdk/app/automations/crud.ts b/packages/server/src/sdk/app/automations/crud.ts
index 764b1df784..de98ca25e9 100644
--- a/packages/server/src/sdk/app/automations/crud.ts
+++ b/packages/server/src/sdk/app/automations/crud.ts
@@ -40,7 +40,7 @@ function cleanAutomationInputs(automation: Automation) {
     if (step == null) {
       continue
     }
-    for (const key of Object.keys(step.inputs)) {
+    for (const key of Object.keys(step.inputs || {})) {
       const inputName = key as keyof typeof step.inputs
       if (!step.inputs[inputName] || step.inputs[inputName] === "") {
         delete step.inputs[inputName]
diff --git a/packages/server/src/sdk/app/backups/imports.ts b/packages/server/src/sdk/app/backups/imports.ts
index 85f5b030bd..bc4d4671c0 100644
--- a/packages/server/src/sdk/app/backups/imports.ts
+++ b/packages/server/src/sdk/app/backups/imports.ts
@@ -6,6 +6,7 @@ import {
   AutomationTriggerStepId,
   RowAttachment,
   FieldType,
+  WebhookTriggerInputs,
 } from "@budibase/types"
 import { getAutomationParams } from "../../../db/utils"
 import { budibaseTempDir } from "../../../utilities/budibaseDir"
@@ -99,7 +100,7 @@ async function updateAutomations(prodAppId: string, db: Database) {
     if (
       automation.definition.trigger?.stepId === AutomationTriggerStepId.WEBHOOK
     ) {
-      const old = automation.definition.trigger.inputs
+      const old = automation.definition.trigger.inputs as WebhookTriggerInputs
       automation.definition.trigger.inputs = {
         schemaUrl: old.schemaUrl.replace(oldDevAppId, devAppId),
         triggerUrl: old.triggerUrl.replace(oldProdAppId, prodAppId),
diff --git a/packages/server/src/sdk/app/views/index.ts b/packages/server/src/sdk/app/views/index.ts
index b3edc92e17..7f67e95e66 100644
--- a/packages/server/src/sdk/app/views/index.ts
+++ b/packages/server/src/sdk/app/views/index.ts
@@ -4,6 +4,7 @@ import {
   canGroupBy,
   FieldType,
   isNumeric,
+  isNumericStaticFormula,
   PermissionLevel,
   RelationSchemaField,
   RenameColumn,
@@ -176,7 +177,11 @@ async function guardCalculationViewSchema(
     }
 
     const isCount = schema.calculationType === CalculationType.COUNT
-    if (!isCount && !isNumeric(targetSchema.type)) {
+    if (
+      !isCount &&
+      !isNumeric(targetSchema.type) &&
+      !isNumericStaticFormula(targetSchema)
+    ) {
       throw new HTTPError(
         `Calculation field "${name}" references field "${schema.field}" which is not a numeric field`,
         400
diff --git a/packages/server/src/tests/utilities/api/ai.ts b/packages/server/src/tests/utilities/api/ai.ts
new file mode 100644
index 0000000000..efaa321f09
--- /dev/null
+++ b/packages/server/src/tests/utilities/api/ai.ts
@@ -0,0 +1,47 @@
+import {
+  ChatCompletionRequest,
+  ChatCompletionResponse,
+  GenerateCronRequest,
+  GenerateCronResponse,
+  GenerateJsRequest,
+  GenerateJsResponse,
+} from "@budibase/types"
+import { Expectations, TestAPI } from "./base"
+import { constants } from "@budibase/backend-core"
+
+export class AIAPI extends TestAPI {
+  generateJs = async (
+    req: GenerateJsRequest,
+    expectations?: Expectations
+  ): Promise<GenerateJsResponse> => {
+    return await this._post<GenerateJsResponse>(`/api/ai/js`, {
+      body: req,
+      expectations,
+    })
+  }
+
+  generateCron = async (
+    req: GenerateCronRequest,
+    expectations?: Expectations
+  ): Promise<GenerateCronResponse> => {
+    return await this._post<GenerateCronResponse>(`/api/ai/cron`, {
+      body: req,
+      expectations,
+    })
+  }
+
+  chat = async (
+    req: ChatCompletionRequest & { licenseKey: string },
+    expectations?: Expectations
+  ): Promise<ChatCompletionResponse> => {
+    const headers: Record<string, string> = {}
+    if (req.licenseKey) {
+      headers[constants.Header.LICENSE_KEY] = req.licenseKey
+    }
+    return await this._post<ChatCompletionResponse>(`/api/ai/chat`, {
+      body: req,
+      headers,
+      expectations,
+    })
+  }
+}
diff --git a/packages/server/src/tests/utilities/api/assets.ts b/packages/server/src/tests/utilities/api/assets.ts
new file mode 100644
index 0000000000..6cb9f5dbe8
--- /dev/null
+++ b/packages/server/src/tests/utilities/api/assets.ts
@@ -0,0 +1,8 @@
+import { TestAPI } from "./base"
+
+export class AssetsAPI extends TestAPI {
+  get = async (path: string) => {
+    // has to be raw, body isn't JSON
+    return await this._requestRaw("get", `/builder/${path}`)
+  }
+}
diff --git a/packages/server/src/tests/utilities/api/index.ts b/packages/server/src/tests/utilities/api/index.ts
index 8ed51cdc3a..9c00b77b73 100644
--- a/packages/server/src/tests/utilities/api/index.ts
+++ b/packages/server/src/tests/utilities/api/index.ts
@@ -21,8 +21,11 @@ import { EnvironmentAPI } from "./environment"
 import { UserPublicAPI } from "./public/user"
 import { MiscAPI } from "./misc"
 import { OAuth2API } from "./oauth2"
+import { AssetsAPI } from "./assets"
+import { AIAPI } from "./ai"
 
 export default class API {
+  ai: AIAPI
   application: ApplicationAPI
   attachment: AttachmentAPI
   automation: AutomationAPI
@@ -44,12 +47,14 @@ export default class API {
   user: UserAPI
   viewV2: ViewV2API
   webhook: WebhookAPI
+  assets: AssetsAPI
 
   public: {
     user: UserPublicAPI
   }
 
   constructor(config: TestConfiguration) {
+    this.ai = new AIAPI(config)
     this.application = new ApplicationAPI(config)
     this.attachment = new AttachmentAPI(config)
     this.automation = new AutomationAPI(config)
@@ -71,6 +76,7 @@ export default class API {
     this.user = new UserAPI(config)
     this.viewV2 = new ViewV2API(config)
     this.webhook = new WebhookAPI(config)
+    this.assets = new AssetsAPI(config)
     this.public = {
       user: new UserPublicAPI(config),
     }
diff --git a/packages/server/src/tests/utilities/mocks/ai/anthropic.ts b/packages/server/src/tests/utilities/mocks/ai/anthropic.ts
new file mode 100644
index 0000000000..ff0413aee1
--- /dev/null
+++ b/packages/server/src/tests/utilities/mocks/ai/anthropic.ts
@@ -0,0 +1,48 @@
+import AnthropicClient from "@anthropic-ai/sdk"
+import nock from "nock"
+import { MockLLMResponseFn, MockLLMResponseOpts } from "."
+
+let chatID = 1
+const SPACE_REGEX = /\s+/g
+
+export const mockAnthropicResponse: MockLLMResponseFn = (
+  answer: string | ((prompt: string) => string),
+  opts?: MockLLMResponseOpts
+) => {
+  return nock(opts?.host || "https://api.anthropic.com")
+    .post("/v1/messages")
+    .reply((uri: string, body: nock.Body) => {
+      const req = body as AnthropicClient.MessageCreateParamsNonStreaming
+      const prompt = req.messages[0].content
+      if (typeof prompt !== "string") {
+        throw new Error("Anthropic mock only supports string prompts")
+      }
+
+      let content
+      if (typeof answer === "function") {
+        try {
+          content = answer(prompt)
+        } catch (e) {
+          return [500, "Internal Server Error"]
+        }
+      } else {
+        content = answer
+      }
+
+      const resp: AnthropicClient.Messages.Message = {
+        id: `${chatID++}`,
+        type: "message",
+        role: "assistant",
+        model: req.model,
+        stop_reason: "end_turn",
+        usage: {
+          input_tokens: prompt.split(SPACE_REGEX).length,
+          output_tokens: content.split(SPACE_REGEX).length,
+        },
+        stop_sequence: null,
+        content: [{ type: "text", text: content }],
+      }
+      return [200, resp]
+    })
+    .persist()
+}
diff --git a/packages/server/src/tests/utilities/mocks/ai/index.ts b/packages/server/src/tests/utilities/mocks/ai/index.ts
new file mode 100644
index 0000000000..87f8ce77be
--- /dev/null
+++ b/packages/server/src/tests/utilities/mocks/ai/index.ts
@@ -0,0 +1,10 @@
+import { Scope } from "nock"
+
+export interface MockLLMResponseOpts {
+  host?: string
+}
+
+export type MockLLMResponseFn = (
+  answer: string | ((prompt: string) => string),
+  opts?: MockLLMResponseOpts
+) => Scope
diff --git a/packages/server/src/tests/utilities/mocks/openai.ts b/packages/server/src/tests/utilities/mocks/ai/openai.ts
similarity index 81%
rename from packages/server/src/tests/utilities/mocks/openai.ts
rename to packages/server/src/tests/utilities/mocks/ai/openai.ts
index 7fcc0c08fc..827caad9be 100644
--- a/packages/server/src/tests/utilities/mocks/openai.ts
+++ b/packages/server/src/tests/utilities/mocks/ai/openai.ts
@@ -1,12 +1,9 @@
 import nock from "nock"
+import { MockLLMResponseFn, MockLLMResponseOpts } from "."
 
 let chatID = 1
 const SPACE_REGEX = /\s+/g
 
-interface MockChatGPTResponseOpts {
-  host?: string
-}
-
 interface Message {
   role: string
   content: string
@@ -47,19 +44,24 @@ interface ChatCompletionResponse {
   usage: Usage
 }
 
-export function mockChatGPTResponse(
+export const mockChatGPTResponse: MockLLMResponseFn = (
   answer: string | ((prompt: string) => string),
-  opts?: MockChatGPTResponseOpts
-) {
+  opts?: MockLLMResponseOpts
+) => {
   return nock(opts?.host || "https://api.openai.com")
     .post("/v1/chat/completions")
-    .reply(200, (uri: string, requestBody: ChatCompletionRequest) => {
-      const messages = requestBody.messages
+    .reply((uri: string, body: nock.Body) => {
+      const req = body as ChatCompletionRequest
+      const messages = req.messages
       const prompt = messages[0].content
 
       let content
       if (typeof answer === "function") {
-        content = answer(prompt)
+        try {
+          content = answer(prompt)
+        } catch (e) {
+          return [500, "Internal Server Error"]
+        }
       } else {
         content = answer
       }
@@ -76,7 +78,7 @@ export function mockChatGPTResponse(
         id: `chatcmpl-${chatID}`,
         object: "chat.completion",
         created: Math.floor(Date.now() / 1000),
-        model: requestBody.model,
+        model: req.model,
         system_fingerprint: `fp_${chatID}`,
         choices: [
           {
@@ -97,14 +99,7 @@ export function mockChatGPTResponse(
           },
         },
       }
-      return response
+      return [200, response]
     })
     .persist()
 }
-
-export function mockChatGPTError() {
-  return nock("https://api.openai.com")
-    .post("/v1/chat/completions")
-    .reply(500, "Internal Server Error")
-    .persist()
-}
diff --git a/packages/server/src/utilities/fileSystem/filesystem.ts b/packages/server/src/utilities/fileSystem/filesystem.ts
index b0a67ac94e..10feb3c404 100644
--- a/packages/server/src/utilities/fileSystem/filesystem.ts
+++ b/packages/server/src/utilities/fileSystem/filesystem.ts
@@ -8,6 +8,7 @@ import { v4 as uuid } from "uuid"
 
 export const TOP_LEVEL_PATH =
   env.TOP_LEVEL_PATH || resolve(join(__dirname, "..", "..", ".."))
+export const DEV_ASSET_PATH = join(TOP_LEVEL_PATH, "packages", "server")
 
 /**
  * Upon first startup of instance there may not be everything we need in tmp directory, set it up.
diff --git a/packages/server/src/utilities/schema.ts b/packages/server/src/utilities/schema.ts
index 8309014a61..8982743106 100644
--- a/packages/server/src/utilities/schema.ts
+++ b/packages/server/src/utilities/schema.ts
@@ -106,7 +106,7 @@ export function validate(
       } else if (
         // If provided must be a valid date
         columnType === FieldType.DATETIME &&
-        isNaN(new Date(columnData).getTime())
+        sql.utils.isInvalidISODateString(columnData)
       ) {
         results.schemaValidation[columnName] = false
       } else if (
diff --git a/packages/shared-core/src/automations/steps/triggerAutomationRun.ts b/packages/shared-core/src/automations/steps/triggerAutomationRun.ts
index 3aa78b6015..d83e3506c5 100644
--- a/packages/shared-core/src/automations/steps/triggerAutomationRun.ts
+++ b/packages/shared-core/src/automations/steps/triggerAutomationRun.ts
@@ -28,7 +28,7 @@ export const definition: AutomationStepDefinition = {
             },
           },
           customType: AutomationCustomIOType.AUTOMATION_FIELDS,
-          title: "automatioFields",
+          title: "Automation Fields",
           required: ["automationId"],
         },
         timeout: {
diff --git a/packages/types/src/api/web/ai.ts b/packages/types/src/api/web/ai.ts
index d22221dc0d..392d849e32 100644
--- a/packages/types/src/api/web/ai.ts
+++ b/packages/types/src/api/web/ai.ts
@@ -1,5 +1,18 @@
 import { EnrichedBinding } from "../../ui"
 
+export interface Message {
+  role: "system" | "user"
+  content: string
+}
+
+export interface ChatCompletionRequest {
+  messages: Message[]
+}
+
+export interface ChatCompletionResponse {
+  message?: string
+}
+
 export interface GenerateJsRequest {
   prompt: string
   bindings?: EnrichedBinding[]
@@ -9,6 +22,14 @@ export interface GenerateJsResponse {
   code: string
 }
 
+export interface GenerateCronRequest {
+  prompt: string
+}
+
+export interface GenerateCronResponse {
+  message?: string
+}
+
 export interface GenerateTablesRequest {
   prompt: string
   addData: boolean
diff --git a/packages/types/src/documents/app/automation/StepInputsOutputs.ts b/packages/types/src/documents/app/automation/StepInputsOutputs.ts
index fb4dd676f2..b614c0d7f3 100644
--- a/packages/types/src/documents/app/automation/StepInputsOutputs.ts
+++ b/packages/types/src/documents/app/automation/StepInputsOutputs.ts
@@ -320,6 +320,7 @@ export type WebhookTriggerOutputs = Record<string, any> & {
 
 export type RowActionTriggerInputs = {
   tableId: string
+  rowActionId: string
 }
 
 export type RowActionTriggerOutputs = {
diff --git a/packages/types/src/documents/app/automation/automation.ts b/packages/types/src/documents/app/automation/automation.ts
index 1682c53e0a..26ed11c0d4 100644
--- a/packages/types/src/documents/app/automation/automation.ts
+++ b/packages/types/src/documents/app/automation/automation.ts
@@ -148,20 +148,20 @@ export interface BaseIOStructure {
   dependsOn?: string
   enum?: string[]
   pretty?: string[]
-  properties?: {
-    [key: string]: BaseIOStructure
-  }
+  properties?: AutomationIOProps
   required?: string[]
   readonly?: true
 }
 
 export interface InputOutputBlock {
-  properties: {
-    [key: string]: BaseIOStructure
-  }
+  properties: AutomationIOProps
   required?: string[]
 }
 
+export interface AutomationIOProps {
+  [key: string]: BaseIOStructure
+}
+
 export enum AutomationFeature {
   LOOPING = "LOOPING",
 }
diff --git a/packages/types/src/documents/app/automation/schema.ts b/packages/types/src/documents/app/automation/schema.ts
index e47c8131b3..a8825aa0fb 100644
--- a/packages/types/src/documents/app/automation/schema.ts
+++ b/packages/types/src/documents/app/automation/schema.ts
@@ -7,6 +7,7 @@ import {
   InputOutputBlock,
   AutomationTriggerStepId,
   AutomationEventType,
+  AutomationIOType,
 } from "./automation"
 import {
   CollectStepInputs,
@@ -57,6 +58,7 @@ import {
   RowCreatedTriggerOutputs,
   RowUpdatedTriggerOutputs,
   WebhookTriggerOutputs,
+  RowActionTriggerInputs,
 } from "./StepInputsOutputs"
 
 export type ActionImplementations<T extends Hosting> = {
@@ -383,6 +385,30 @@ export function isAppTrigger(
   return step.stepId === AutomationTriggerStepId.APP
 }
 
+export function isFilterStep(
+  step: AutomationStep | AutomationTrigger
+): step is FilterStep {
+  return step.stepId === AutomationActionStepId.FILTER
+}
+
+export function isLoopStep(
+  step: AutomationStep | AutomationTrigger
+): step is LoopStep {
+  return step.stepId === AutomationActionStepId.LOOP
+}
+
+export function isActionStep(
+  step: AutomationStep | AutomationTrigger
+): step is AutomationStep {
+  return step.type === AutomationStepType.ACTION
+}
+
+export function isCronTrigger(
+  trigger: AutomationStep | AutomationTrigger
+): trigger is CronTrigger {
+  return trigger.stepId === AutomationTriggerStepId.CRON
+}
+
 type EmptyInputs = {}
 export type AutomationStepDefinition = Omit<AutomationStep, "id" | "inputs"> & {
   inputs: EmptyInputs
@@ -399,11 +425,13 @@ export type AutomationTriggerDefinition = Omit<
 
 export type AutomationTriggerInputs<T extends AutomationTriggerStepId> =
   T extends AutomationTriggerStepId.APP
-    ? void | Record<string, any>
+    ?
+        | void
+        | (Record<string, any> & { fields?: Record<string, AutomationIOType> })
     : T extends AutomationTriggerStepId.CRON
     ? CronTriggerInputs
     : T extends AutomationTriggerStepId.ROW_ACTION
-    ? Record<string, any>
+    ? RowActionTriggerInputs
     : T extends AutomationTriggerStepId.ROW_DELETED
     ? RowDeletedTriggerInputs
     : T extends AutomationTriggerStepId.ROW_SAVED
@@ -439,7 +467,7 @@ export interface AutomationTriggerSchema<
   event?: AutomationEventType
   cronJobId?: string
   stepId: TTrigger
-  inputs: AutomationTriggerInputs<TTrigger> & Record<string, any> // The record union to be removed once the types are fixed
+  inputs: AutomationTriggerInputs<AutomationTriggerStepId>
 }
 
 export type AutomationTrigger =
diff --git a/packages/types/src/documents/app/row.ts b/packages/types/src/documents/app/row.ts
index 4c32e45a8c..e508c4e3c0 100644
--- a/packages/types/src/documents/app/row.ts
+++ b/packages/types/src/documents/app/row.ts
@@ -1,4 +1,5 @@
 import { Document } from "../document"
+import { FieldSchema, FormulaType } from "./table"
 
 export enum FieldType {
   /**
@@ -147,6 +148,15 @@ export function isNumeric(type: FieldType) {
   return NumericTypes.includes(type)
 }
 
+export function isNumericStaticFormula(schema: FieldSchema) {
+  return (
+    schema.type === FieldType.FORMULA &&
+    schema.formulaType === FormulaType.STATIC &&
+    schema.responseType &&
+    isNumeric(schema.responseType)
+  )
+}
+
 export const GroupByTypes = [
   FieldType.STRING,
   FieldType.LONGFORM,
diff --git a/packages/types/src/documents/app/screen.ts b/packages/types/src/documents/app/screen.ts
index f1a119083c..29bc5a97e3 100644
--- a/packages/types/src/documents/app/screen.ts
+++ b/packages/types/src/documents/app/screen.ts
@@ -15,6 +15,10 @@ export interface ScreenRouting {
   homeScreen?: boolean
 }
 
+export enum ScreenVariant {
+  PDF = "pdf",
+}
+
 export interface Screen extends Document {
   layoutId?: string
   showNavigation?: boolean
@@ -24,6 +28,7 @@ export interface Screen extends Document {
   name?: string
   pluginAdded?: boolean
   onLoad?: EventHandler[]
+  variant?: ScreenVariant
 }
 
 export interface ScreenRoutesViewOutput extends Document {
diff --git a/packages/types/src/documents/app/table/schema.ts b/packages/types/src/documents/app/table/schema.ts
index 86e15e4974..e3f9d3af3f 100644
--- a/packages/types/src/documents/app/table/schema.ts
+++ b/packages/types/src/documents/app/table/schema.ts
@@ -207,6 +207,8 @@ export interface BaseFieldSchema extends UIFieldMetadata {
   autocolumn?: boolean
   autoReason?: AutoReason.FOREIGN_KEY
   subtype?: never
+  // added when enriching nested JSON fields into schema
+  nestedJSON?: boolean
 }
 
 interface OtherFieldMetadata extends BaseFieldSchema {
diff --git a/packages/types/src/documents/global/config.ts b/packages/types/src/documents/global/config.ts
index bd0340595c..422486e30f 100644
--- a/packages/types/src/documents/global/config.ts
+++ b/packages/types/src/documents/global/config.ts
@@ -117,6 +117,7 @@ export type AIProvider =
   | "AzureOpenAI"
   | "TogetherAI"
   | "Custom"
+  | "BudibaseAI"
 
 export interface ProviderConfig {
   provider: AIProvider
diff --git a/packages/types/src/sdk/featureFlag.ts b/packages/types/src/sdk/featureFlag.ts
index 49a07c2009..3a8bd2ae7d 100644
--- a/packages/types/src/sdk/featureFlag.ts
+++ b/packages/types/src/sdk/featureFlag.ts
@@ -1,7 +1,6 @@
 export enum FeatureFlag {
   USE_ZOD_VALIDATOR = "USE_ZOD_VALIDATOR",
   AI_JS_GENERATION = "AI_JS_GENERATION",
-  OAUTH2_CONFIG = "OAUTH2_CONFIG",
 
   // Account-portal
   DIRECT_LOGIN_TO_ACCOUNT_PORTAL = "DIRECT_LOGIN_TO_ACCOUNT_PORTAL",
@@ -10,7 +9,6 @@ export enum FeatureFlag {
 export const FeatureFlagDefaults: Record<FeatureFlag, boolean> = {
   [FeatureFlag.USE_ZOD_VALIDATOR]: false,
   [FeatureFlag.AI_JS_GENERATION]: false,
-  [FeatureFlag.OAUTH2_CONFIG]: false,
 
   // Account-portal
   [FeatureFlag.DIRECT_LOGIN_TO_ACCOUNT_PORTAL]: false,
diff --git a/packages/types/src/sdk/licensing/feature.ts b/packages/types/src/sdk/licensing/feature.ts
index 3072935682..6ed2456ea6 100644
--- a/packages/types/src/sdk/licensing/feature.ts
+++ b/packages/types/src/sdk/licensing/feature.ts
@@ -19,6 +19,7 @@ export enum Feature {
   VIEW_READONLY_COLUMNS = "viewReadonlyColumns",
   BUDIBASE_AI = "budibaseAI",
   AI_CUSTOM_CONFIGS = "aiCustomConfigs",
+  PWA = "pwa",
 }
 
 export type PlanFeatures = { [key in PlanType]: Feature[] | undefined }
diff --git a/packages/types/src/ui/stores/automations.ts b/packages/types/src/ui/stores/automations.ts
index 0af4be0c1a..114f534d2a 100644
--- a/packages/types/src/ui/stores/automations.ts
+++ b/packages/types/src/ui/stores/automations.ts
@@ -3,15 +3,28 @@ import {
   GetAutomationTriggerDefinitionsResponse,
 } from "../../api"
 
-export interface BranchPath {
+export interface BlockPath {
   stepIdx: number
   branchIdx: number
   branchStepId: string
   id: string
 }
 
-export interface BlockDefinitions {
-  TRIGGER: Partial<GetAutomationTriggerDefinitionsResponse>
-  CREATABLE_TRIGGER: Partial<GetAutomationTriggerDefinitionsResponse>
-  ACTION: Partial<GetAutomationActionDefinitionsResponse>
+export interface BlockRef {
+  id: string
+  looped?: string
+  pathTo: BlockPath[]
+  terminating?: boolean
+}
+
+export enum BlockDefinitionTypes {
+  TRIGGER = "TRIGGER",
+  CREATABLE_TRIGGER = "CREATABLE_TRIGGER",
+  ACTION = "ACTION",
+}
+
+export interface BlockDefinitions {
+  [BlockDefinitionTypes.TRIGGER]: Partial<GetAutomationTriggerDefinitionsResponse>
+  [BlockDefinitionTypes.CREATABLE_TRIGGER]: Partial<GetAutomationTriggerDefinitionsResponse>
+  [BlockDefinitionTypes.ACTION]: Partial<GetAutomationActionDefinitionsResponse>
 }
diff --git a/yarn.lock b/yarn.lock
index c317834460..81eedc9591 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7527,6 +7527,11 @@ a-sync-waterfall@^1.0.0:
   resolved "https://registry.yarnpkg.com/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz#75b6b6aa72598b497a125e7a2770f14f4c8a1fa7"
   integrity sha512-RYTOHHdWipFUliRFMCS4X2Yn2X8M87V/OpSqWzKKOGhzqyUxzyVmhHDH9sAvG+ZuQf/TAOFsLCpMw09I1ufUnA==
 
+abab@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
+  integrity sha512-I+Wi+qiE2kUXyrRhNsWv6XsjUTBJjSoVSctKNBfLG5zG/Xe7Rjbxf13+vqYHNTwHaFU+FtSlVxOCTiMEVtPv0A==
+
 abab@^2.0.3, abab@^2.0.5, abab@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
@@ -7598,6 +7603,13 @@ accepts@^1.3.5, accepts@^1.3.7, accepts@~1.3.4, accepts@~1.3.8:
     mime-types "~2.1.34"
     negotiator "0.6.3"
 
+acorn-globals@^1.0.4:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-1.0.9.tgz#55bb5e98691507b74579d0513413217c380c54cf"
+  integrity sha512-j3/4pkfih8W4NK22gxVSXcEonTpAHOHh0hu5BoZrKcOsW/4oBPxTi4Yk3SAj+FhC1f3+bRTkXdm4019gw1vg9g==
+  dependencies:
+    acorn "^2.1.0"
+
 acorn-globals@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45"
@@ -7636,6 +7648,11 @@ acorn-walk@^8.0.2, acorn-walk@^8.1.1, acorn-walk@^8.2.0:
   dependencies:
     acorn "^8.11.0"
 
+acorn@^2.1.0, acorn@^2.4.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-2.7.0.tgz#ab6e7d9d886aaca8b085bc3312b79a198433f0e7"
+  integrity sha512-pXK8ez/pVjqFdAgBkF1YPVRacuLQ9EXBKaKWaeh58WNfMkCmZhOZzu+NtKSPD5PHmCCHheQ5cD29qM1K4QTxIg==
+
 acorn@^5.2.1:
   version "5.7.4"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
@@ -7951,6 +7968,11 @@ array-differ@^3.0.0:
   resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-3.0.0.tgz#3cbb3d0f316810eafcc47624734237d6aee4ae6b"
   integrity sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==
 
+array-equal@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.2.tgz#a8572e64e822358271250b9156d20d96ef5dec04"
+  integrity sha512-gUHx76KtnhEgB3HOuFYiCm3FIdEs6ocM2asHvNTkfu/Y09qQVrrVVaOKENmS2KkSaGoxgXNqC+ZVtR/n0MOkSA==
+
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
@@ -8371,6 +8393,11 @@ base62@^1.1.0:
   resolved "https://registry.yarnpkg.com/base62/-/base62-1.2.8.tgz#1264cb0fb848d875792877479dbe8bae6bae3428"
   integrity sha512-V6YHUbjLxN1ymqNLb1DPHoU1CpfdL7d2YTIp5W3U4hhoG4hhxNmsFDs66M9EXxBiSEke5Bt5dwdfMwwZF70iLA==
 
+base64-arraybuffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
+  integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
+
 base64-js@^1.0.2, base64-js@^1.3.0, base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -8853,6 +8880,16 @@ caniuse-lite@^1.0.30001449:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001460.tgz#31d2e26f0a2309860ed3eff154e03890d9d851a7"
   integrity sha512-Bud7abqjvEjipUkpLs4D7gR0l8hBYBHoa+tGtKJHvT2AYzLp1z7EmVkUT4ERpVUfca8S2HGIVs883D8pUH1ZzQ==
 
+canvg@^1.0:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/canvg/-/canvg-1.5.3.tgz#aad17915f33368bf8eb80b25d129e3ae922ddc5f"
+  integrity sha512-7Gn2IuQzvUQWPIuZuFHrzsTM0gkPz2RRT9OcbdmA03jeKk8kltrD8gqUzNX15ghY/4PV5bbe5lmD6yDLDY6Ybg==
+  dependencies:
+    jsdom "^8.1.0"
+    rgbcolor "^1.0.1"
+    stackblur-canvas "^1.4.1"
+    xmldom "^0.1.22"
+
 caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
@@ -8863,6 +8900,11 @@ catering@^2.0.0, catering@^2.1.0:
   resolved "https://registry.yarnpkg.com/catering/-/catering-2.1.1.tgz#66acba06ed5ee28d5286133982a927de9a04b510"
   integrity sha512-K7Qy8O9p76sL3/3m7/zLKbRkyOlSZAgzEaLhyj2mXS8PsCud2Eo4hAb8aLtZqHh0QGqLcb9dlJSu6lHRVENm1w==
 
+cf-blob.js@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/cf-blob.js/-/cf-blob.js-0.0.1.tgz#f5ab7e12e798caf08ccf828c69aba0f063d83f99"
+  integrity sha512-KkUmNT/rgVK+KehG7cSvbLwMb+OS5Qby6ADB4LP12jtx6rfVvHCdyqFUjAeQnDpGpQNNwvpi0R/tluT2J6P99Q==
+
 chai@^4.3.7:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/chai/-/chai-4.5.0.tgz#707e49923afdd9b13a8b0b47d33d732d13812fd8"
@@ -9701,6 +9743,13 @@ crypto-randomuuid@^1.0.0:
   resolved "https://registry.yarnpkg.com/crypto-randomuuid/-/crypto-randomuuid-1.0.0.tgz#acf583e5e085e867ae23e107ff70279024f9e9e7"
   integrity sha512-/RC5F4l1SCqD/jazwUF6+t34Cd8zTSAGZ7rvvZu1whZUhD2a5MOGKjSGowoGcpj/cbVZk1ZODIooJEQQq3nNAA==
 
+css-line-break@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-2.1.0.tgz#bfef660dfa6f5397ea54116bb3cb4873edbc4fa0"
+  integrity sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==
+  dependencies:
+    utrie "^1.0.2"
+
 css-tree@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"
@@ -9719,15 +9768,22 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+cssom@0.3.x, "cssom@>= 0.3.0 < 0.4.0", cssom@~0.3.6:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+
 cssom@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
   integrity sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==
 
-cssom@~0.3.6:
-  version "0.3.8"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
-  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+"cssstyle@>= 0.2.34 < 0.3.0":
+  version "0.2.37"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-0.2.37.tgz#541097234cb2513c83ceed3acddc27ff27987d54"
+  integrity sha512-FUpKc+1FNBsHUr9IsfSGCovr8VuGOiiuzlgCyppKBjJi2jYTOFLN3oiiNRMIvYqbFzF38mqKj4BgcevzU5/kIA==
+  dependencies:
+    cssom "0.3.x"
 
 cssstyle@^2.3.0:
   version "2.3.0"
@@ -11039,6 +11095,11 @@ es6-error@^4.0.1, es6-error@^4.1.1:
   resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.1.1.tgz#9e3af407459deed47e9a91f9b885a84eb05c561d"
   integrity sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==
 
+es6-promise@^4.2.5:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.8.tgz#4eb21594c972bc40553d276e510539143db53e0a"
+  integrity sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==
+
 esbuild-node-externals@^1.14.0:
   version "1.14.0"
   resolved "https://registry.yarnpkg.com/esbuild-node-externals/-/esbuild-node-externals-1.14.0.tgz#fc2950c67a068dc2b538fd1381ad7d8e20a6f54d"
@@ -11105,6 +11166,18 @@ escape-string-regexp@^4.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
+escodegen@^1.6.1:
+  version "1.14.3"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503"
+  integrity sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==
+  dependencies:
+    esprima "^4.0.1"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.6.1"
+
 escodegen@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.0.0.tgz#5e32b12833e8aa8fa35e1bf0befa89380484c7dd"
@@ -11382,7 +11455,7 @@ esrecurse@^4.3.0:
   dependencies:
     estraverse "^5.2.0"
 
-estraverse@^4.1.1:
+estraverse@^4.1.1, estraverse@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
   integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
@@ -11772,6 +11845,11 @@ file-entry-cache@^8.0.0:
   dependencies:
     flat-cache "^4.0.0"
 
+file-saver@1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-1.3.8.tgz#e68a30c7cb044e2fb362b428469feb291c2e09d8"
+  integrity sha512-spKHSBQIxxS81N/O21WmuXA2F6wppUCsutpzenOeZzOCCJ5gEfcbqJP983IrpLXzYmXnMUa6J03SubcNPdKrlg==
+
 file-type@^11.1.0:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/file-type/-/file-type-11.1.0.tgz#93780f3fed98b599755d846b99a1617a2ad063b8"
@@ -12979,6 +13057,23 @@ html-tag@^2.0.0:
     is-self-closing "^1.0.1"
     kind-of "^6.0.0"
 
+html2canvas@^1.0.0-alpha.12:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
+  integrity sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==
+  dependencies:
+    css-line-break "^2.1.0"
+    text-segmentation "^1.0.3"
+
+html2pdf.js@^0.9.3:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/html2pdf.js/-/html2pdf.js-0.9.3.tgz#e7fc6143f748ce253670eaae403987342b66b15c"
+  integrity sha512-M254g3Z+ZsjtQFDxJlU6E8Zgb8xOpCBQQM1lFPn4Lq+myAdWoYtMFnwlVo/eOI9R1cG75+YmMSDQofkugwOV/Q==
+  dependencies:
+    es6-promise "^4.2.5"
+    html2canvas "^1.0.0-alpha.12"
+    jspdf "1.4.1"
+
 html5-qrcode@^2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/html5-qrcode/-/html5-qrcode-2.3.8.tgz#0b0cdf7a9926cfd4be530e13a51db47592adfa0d"
@@ -13129,7 +13224,7 @@ ical-generator@4.1.0:
   dependencies:
     uuid-random "^1.3.2"
 
-iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.5:
+iconv-lite@0.4.24, iconv-lite@^0.4.13, iconv-lite@^0.4.24, iconv-lite@^0.4.5:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -14618,6 +14713,29 @@ jsdom@^24.1.1:
     ws "^8.18.0"
     xml-name-validator "^5.0.0"
 
+jsdom@^8.1.0:
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-8.5.0.tgz#d4d8f5dbf2768635b62a62823b947cf7071ebc98"
+  integrity sha512-rvWfcn2O8SrXPaX5fTYIfPVwvnbU8DnZkjAXK305wfP67csyaJBhgg0F2aU6imqJ+lZmj9EmrBAXy6rWHf2/9Q==
+  dependencies:
+    abab "^1.0.0"
+    acorn "^2.4.0"
+    acorn-globals "^1.0.4"
+    array-equal "^1.0.0"
+    cssom ">= 0.3.0 < 0.4.0"
+    cssstyle ">= 0.2.34 < 0.3.0"
+    escodegen "^1.6.1"
+    iconv-lite "^0.4.13"
+    nwmatcher ">= 1.3.7 < 2.0.0"
+    parse5 "^1.5.1"
+    request "^2.55.0"
+    sax "^1.1.4"
+    symbol-tree ">= 3.1.0 < 4.0.0"
+    tough-cookie "^2.2.0"
+    webidl-conversions "^3.0.1"
+    whatwg-url "^2.0.1"
+    xml-name-validator ">= 2.0.1 < 3.0.0"
+
 jsesc@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e"
@@ -14737,6 +14855,17 @@ jsonwebtoken@9.0.2, jsonwebtoken@^9.0.0:
     ms "^2.1.1"
     semver "^7.5.4"
 
+jspdf@1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jspdf/-/jspdf-1.4.1.tgz#8dbd437986346d65efe20ede5361927666b8e4ca"
+  integrity sha512-2vYVdrvrQUdKKPyWHw81t1jEYYAJ6uFJ/HtTcGbI4qXIQEdl18dLEuL2wTeSv2GzeQLSgUvEvwsXsszuHK+PTw==
+  dependencies:
+    canvg "^1.0"
+    cf-blob.js "0.0.1"
+    file-saver "1.3.8"
+    omggif "1.0.7"
+    stackblur "^1.0.0"
+
 jsprim@^1.2.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.2.tgz#712c65533a15c878ba59e9ed5f0e26d5b77c5feb"
@@ -16783,6 +16912,11 @@ nunjucks@^3.2.3:
     asap "^2.0.3"
     commander "^5.1.0"
 
+"nwmatcher@>= 1.3.7 < 2.0.0":
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.4.4.tgz#2285631f34a95f0d0395cd900c96ed39b58f346e"
+  integrity sha512-3iuY4N5dhgMpCUrOVnuAdGrgxVqV2cJpM+XNccjR2DKOB1RUP0aA+wGXEiNziG/UKboFyGBIoKOaNlJxx8bciQ==
+
 nwsapi@^2.2.0, nwsapi@^2.2.4:
   version "2.2.12"
   resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.12.tgz#fb6af5c0ec35b27b4581eb3bbad34ec9e5c696f8"
@@ -16964,6 +17098,11 @@ obliterator@^1.6.1:
   resolved "https://registry.yarnpkg.com/obliterator/-/obliterator-1.6.1.tgz#dea03e8ab821f6c4d96a299e17aef6a3af994ef3"
   integrity sha512-9WXswnqINnnhOG/5SLimUlzuU1hFJUc8zkwyD59Sd+dPOMf05PmnYG/d6Q7HZ+KmgkZJa1PxRso6QdM3sTNHig==
 
+omggif@1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/omggif/-/omggif-1.0.7.tgz#59d2eecb0263de84635b3feb887c0c9973f1e49d"
+  integrity sha512-KVVUF85EHKUB9kxxT2D8CksGgfayZKxWtH/+i34zbyDdxFHvsqQs+O756usW7uri2YBD8jE/8GgAsA6wVA1tjg==
+
 omggif@^1.0.10:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/omggif/-/omggif-1.0.10.tgz#ddaaf90d4a42f532e9e7cb3a95ecdd47f17c7b19"
@@ -17434,6 +17573,11 @@ parse5@6.0.1:
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
 
+parse5@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-1.5.1.tgz#9b7f3b0de32be78dc2401b17573ccaf0f6f59d94"
+  integrity sha512-w2jx/0tJzvgKwZa58sj2vAYq/S/K1QJfIB3cWYea/Iu1scFPDQQ3IQiVZTHWtRBwAjv2Yd7S/xeZf3XqLDb3bA==
+
 parse5@^7.1.2:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.1.2.tgz#0736bebbfd77793823240a23b7fc5e010b7f8e32"
@@ -18997,7 +19141,7 @@ remixicon@2.5.0:
   resolved "https://registry.yarnpkg.com/remixicon/-/remixicon-2.5.0.tgz#b5e245894a1550aa23793f95daceadbf96ad1a41"
   integrity sha512-q54ra2QutYDZpuSnFjmeagmEiN9IMo56/zz5dDNitzKD23oFRw77cWo4TsrAdmdkPiEn8mxlrTqxnkujDbEGww==
 
-request@^2.88.0:
+request@^2.55.0, request@^2.88.0:
   version "2.88.2"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
   integrity sha512-MsvtOrfG9ZcrOwAW+Qi+F6HbD0CWXEh9ou77uOb7FM2WPhwT7smM833PzanhJLsgXjN89Ir6V2PczXNnMpwKhw==
@@ -19162,6 +19306,11 @@ rfdc@^1.3.0, rfdc@^1.3.1:
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.4.1.tgz#778f76c4fb731d93414e8f925fbecf64cce7f6ca"
   integrity sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
 
+rgbcolor@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/rgbcolor/-/rgbcolor-1.0.1.tgz#d6505ecdb304a6595da26fa4b43307306775945d"
+  integrity sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==
+
 rimraf@3.0.2, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
@@ -19387,6 +19536,11 @@ sax@>=0.6.0:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+sax@^1.1.4:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.4.1.tgz#44cc8988377f126304d3b3fc1010c733b929ef0f"
+  integrity sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==
+
 saxes@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"
@@ -20049,6 +20203,16 @@ stackback@0.0.2:
   resolved "https://registry.yarnpkg.com/stackback/-/stackback-0.0.2.tgz#1ac8a0d9483848d1695e418b6d031a3c3ce68e3b"
   integrity sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==
 
+stackblur-canvas@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/stackblur-canvas/-/stackblur-canvas-1.4.1.tgz#849aa6f94b272ff26f6471fa4130ed1f7e47955b"
+  integrity sha512-TfbTympL5C1K+F/RizDkMBqH18EkUKU8V+4PphIXR+fWhZwwRi3bekP04gy2TOwOT3R6rJQJXAXFrbcZde7wow==
+
+stackblur@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stackblur/-/stackblur-1.0.0.tgz#b407a7e05c93b08d66883bb808d7cba3a503f12f"
+  integrity sha512-K92JX8alrs0pTox5U2arVBqB8tJmak9dh9i4Xausy94TnnGMdLfTn7P2Dp/NOzlmxvEs7lDzeryo8YqOy0BHRQ==
+
 standard-as-callback@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/standard-as-callback/-/standard-as-callback-2.1.0.tgz#8953fc05359868a77b5b9739a665c5977bb7df45"
@@ -20608,7 +20772,7 @@ swagger-parser@10.0.2:
   dependencies:
     "@apidevtools/swagger-parser" "10.0.2"
 
-symbol-tree@^3.2.4:
+"symbol-tree@>= 3.1.0 < 4.0.0", symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
@@ -20618,10 +20782,10 @@ tapable@^2.2.0:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
 
-tar-fs@2.1.1, tar-fs@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784"
-  integrity sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==
+tar-fs@2.1.2, tar-fs@^2.0.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.2.tgz#425f154f3404cb16cb8ff6e671d45ab2ed9596c5"
+  integrity sha512-EsaAXwxmx8UB7FRKqeozqEPop69DXcmYwTQwXvyAPF352HJsPdkVhvTaDPYqfNgruveJIJy3TA2l+2zj8LJIJA==
   dependencies:
     chownr "^1.1.1"
     mkdirp-classic "^0.5.2"
@@ -20793,6 +20957,13 @@ text-hex@1.0.x:
   resolved "https://registry.yarnpkg.com/text-hex/-/text-hex-1.0.0.tgz#69dc9c1b17446ee79a92bf5b884bb4b9127506f5"
   integrity sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==
 
+text-segmentation@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/text-segmentation/-/text-segmentation-1.0.3.tgz#52a388159efffe746b24a63ba311b6ac9f2d7943"
+  integrity sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==
+  dependencies:
+    utrie "^1.0.2"
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -20986,7 +21157,7 @@ touch@^3.1.0:
   dependencies:
     nopt "~1.0.10"
 
-tough-cookie@4.1.3, "tough-cookie@^2.3.3 || ^3.0.1 || ^4.0.0", tough-cookie@^4.0.0, tough-cookie@^4.1.2, tough-cookie@^4.1.4, tough-cookie@~2.5.0:
+tough-cookie@4.1.3, tough-cookie@^2.2.0, "tough-cookie@^2.3.3 || ^3.0.1 || ^4.0.0", tough-cookie@^4.0.0, tough-cookie@^4.1.2, tough-cookie@^4.1.4, tough-cookie@~2.5.0:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
   integrity sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==
@@ -21598,6 +21769,13 @@ utils-merge@1.0.1, utils-merge@1.x.x, utils-merge@^1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
+utrie@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/utrie/-/utrie-1.0.2.tgz#d42fe44de9bc0119c25de7f564a6ed1b2c87a645"
+  integrity sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==
+  dependencies:
+    base64-arraybuffer "^1.0.2"
+
 uue@3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/uue/-/uue-3.1.2.tgz#e99368414e87200012eb37de4dbaebaa1c742ad2"
@@ -21849,7 +22027,7 @@ webfinger@^0.4.2:
     step "0.0.x"
     xml2js "0.1.x"
 
-webidl-conversions@^3.0.0:
+webidl-conversions@^3.0.0, webidl-conversions@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
   integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
@@ -21929,6 +22107,14 @@ whatwg-url@^14.0.0:
     tr46 "^5.0.0"
     webidl-conversions "^7.0.0"
 
+whatwg-url@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-2.0.1.tgz#5396b2043f020ee6f704d9c45ea8519e724de659"
+  integrity sha512-sX+FT4N6iR0ZiqGqyDEKklyfMGR99zvxZD+LQ8IGae5uVGswQ7DOeLPB5KgJY8FzkwSzwqOXLQeVQvtOTSQU9Q==
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
 whatwg-url@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
@@ -22218,6 +22404,11 @@ xhr@^2.4.1:
     parse-headers "^2.0.0"
     xtend "^4.0.0"
 
+"xml-name-validator@>= 2.0.1 < 3.0.0":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-2.0.1.tgz#4d8b8f1eccd3419aa362061becef515e1e559635"
+  integrity sha512-jRKe/iQYMyVJpzPH+3HL97Lgu5HrCfii+qSo+TfjKHtOnvbnvdVfMYrn9Q34YV81M2e5sviJlI6Ko9y+nByzvA==
+
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
@@ -22256,6 +22447,11 @@ xmlchars@^2.2.0:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
+xmldom@^0.1.22:
+  version "0.1.31"
+  resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.31.tgz#b76c9a1bd9f0a9737e5a72dc37231cf38375e2ff"
+  integrity sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==
+
 xmlhttprequest-ssl@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"