From f9f490b44036178b67c4299143e9b4f10be520d3 Mon Sep 17 00:00:00 2001
From: Kristaps Fabians Geikins <fabians@speckle.systems>
Date: Wed, 20 Mar 2024 16:51:24 +0100
Subject: [PATCH 01/22] fix(server): allow standard users to batch invite to
 server (#2150)

* fix(server): allow standard users to batch invite to server

* added max 10 invite batch limit

* minor change
---
 .../assets/serverinvites/typedefs/serverInvites.graphql  | 2 +-
 packages/server/modules/core/graph/resolvers/projects.ts | 9 +++++++++
 .../serverinvites/graph/resolvers/serverInvites.ts       | 7 +++++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/server/assets/serverinvites/typedefs/serverInvites.graphql b/packages/server/assets/serverinvites/typedefs/serverInvites.graphql
index 8029295f0e..0b807cc2c1 100644
--- a/packages/server/assets/serverinvites/typedefs/serverInvites.graphql
+++ b/packages/server/assets/serverinvites/typedefs/serverInvites.graphql
@@ -14,7 +14,7 @@ extend type Mutation {
     @hasScope(scope: "users:invite")
 
   serverInviteBatchCreate(input: [ServerInviteCreateInput!]!): Boolean!
-    @hasServerRole(role: SERVER_ADMIN)
+    @hasServerRole(role: SERVER_USER)
     @hasScope(scope: "users:invite")
 
   streamInviteBatchCreate(input: [StreamInviteCreateInput!]!): Boolean!
diff --git a/packages/server/modules/core/graph/resolvers/projects.ts b/packages/server/modules/core/graph/resolvers/projects.ts
index 763a869b5b..db7c54baf1 100644
--- a/packages/server/modules/core/graph/resolvers/projects.ts
+++ b/packages/server/modules/core/graph/resolvers/projects.ts
@@ -25,6 +25,7 @@ import {
 } from '@/modules/core/services/streams/management'
 import { createOnboardingStream } from '@/modules/core/services/streams/onboarding'
 import { removeStreamCollaborator } from '@/modules/core/services/streams/streamAccessService'
+import { InviteCreateValidationError } from '@/modules/serverinvites/errors'
 import { cancelStreamInvite } from '@/modules/serverinvites/services/inviteProcessingService'
 import {
   getPendingStreamCollaborators,
@@ -145,6 +146,14 @@ export = {
         Roles.Stream.Owner,
         ctx.resourceAccessRules
       )
+
+      const inviteCount = args.input.length
+      if (inviteCount > 10 && ctx.role !== Roles.Server.Admin) {
+        throw new InviteCreateValidationError(
+          'Maximum 10 invites can be sent at once by non admins'
+        )
+      }
+
       const inputBatches = chunk(args.input, 10)
       for (const batch of inputBatches) {
         await Promise.all(
diff --git a/packages/server/modules/serverinvites/graph/resolvers/serverInvites.ts b/packages/server/modules/serverinvites/graph/resolvers/serverInvites.ts
index fc8e3e0b17..be5b1af36c 100644
--- a/packages/server/modules/serverinvites/graph/resolvers/serverInvites.ts
+++ b/packages/server/modules/serverinvites/graph/resolvers/serverInvites.ts
@@ -86,6 +86,13 @@ export = {
     async serverInviteBatchCreate(_parent, args, context) {
       const { input: paramsArray } = args
 
+      const inviteCount = paramsArray.length
+      if (inviteCount > 10 && context.role !== Roles.Server.Admin) {
+        throw new InviteCreateValidationError(
+          'Maximum 10 invites can be sent at once by non admins'
+        )
+      }
+
       // Batch calls so that we don't kill the server
       const batches = chunk(paramsArray, 50)
       for (const paramsBatchArray of batches) {

From ffb7ed1a7cae91deee37fbd5546965e69d53d3b8 Mon Sep 17 00:00:00 2001
From: Kristaps Fabians Geikins <fabis94@live.com>
Date: Thu, 21 Mar 2024 11:49:31 +0200
Subject: [PATCH 02/22] enabling dev to skip migrations

---
 .../migrations/20240305120620_automate.ts     |  9 ++--
 .../20240304143445_rename_tables.ts           |  3 ++
 packages/server/modules/core/dbSchema.ts      | 51 +++++++++++--------
 .../modules/shared/helpers/envHelper.ts       |  8 +++
 4 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/packages/server/modules/automate/migrations/20240305120620_automate.ts b/packages/server/modules/automate/migrations/20240305120620_automate.ts
index cd3ec19d07..13cc53b702 100644
--- a/packages/server/modules/automate/migrations/20240305120620_automate.ts
+++ b/packages/server/modules/automate/migrations/20240305120620_automate.ts
@@ -6,6 +6,9 @@ const REVISION_FUNCTIONS_TABLE_NAME = 'automation_revision_functions'
 const AUTOMATION_RUNS_TABLE_NAME = 'automation_runs'
 
 export async function up(knex: Knex): Promise<void> {
+  // TODO: Remove, this is a temporary shortcut to avoid messing up the db schema which makes it difficult to jump to different branches
+  if (process.env.SKIP_AUTOMATE_MIGRATION_DEV) return
+
   await knex.schema.createTable(AUTOMATIONS_TABLE_NAME, (table) => {
     table.text('id').primary({ constraintName: 'automation_id_pk' })
     table.text('name').notNullable()
@@ -77,8 +80,8 @@ export async function up(knex: Knex): Promise<void> {
 }
 
 export async function down(knex: Knex): Promise<void> {
-  await knex.schema.dropTable(AUTOMATIONS_TABLE_NAME)
-  await knex.schema.dropTable(REVISIONS_TABLE_NAME)
-  await knex.schema.dropTable(REVISION_FUNCTIONS_TABLE_NAME)
   await knex.schema.dropTable(AUTOMATION_RUNS_TABLE_NAME)
+  await knex.schema.dropTable(REVISION_FUNCTIONS_TABLE_NAME)
+  await knex.schema.dropTable(REVISIONS_TABLE_NAME)
+  await knex.schema.dropTable(AUTOMATIONS_TABLE_NAME)
 }
diff --git a/packages/server/modules/betaAutomations/migrations/20240304143445_rename_tables.ts b/packages/server/modules/betaAutomations/migrations/20240304143445_rename_tables.ts
index 01790cb347..5ac5bce10d 100644
--- a/packages/server/modules/betaAutomations/migrations/20240304143445_rename_tables.ts
+++ b/packages/server/modules/betaAutomations/migrations/20240304143445_rename_tables.ts
@@ -13,6 +13,9 @@ const AUTOMATION_FUNCTION_RUNS_RESULT_VERSIONS_TABLE_NAME_NEW =
   'beta_automation_function_runs_result_versions'
 
 export async function up(knex: Knex): Promise<void> {
+  // TODO: Remove, this is a temporary shortcut to avoid messing up the db schema which makes it difficult to jump to different branches
+  if (process.env.SKIP_AUTOMATE_MIGRATION_DEV) return
+
   await knex.schema.renameTable(AUTOMATIONS_TABLE_NAME_OLD, AUTOMATIONS_TABLE_NAME_NEW)
   await knex.schema.renameTable(
     AUTOMATION_RUNS_TABLE_NAME_OLD,
diff --git a/packages/server/modules/core/dbSchema.ts b/packages/server/modules/core/dbSchema.ts
index 49ecf2cc43..4d6b66cfd4 100644
--- a/packages/server/modules/core/dbSchema.ts
+++ b/packages/server/modules/core/dbSchema.ts
@@ -4,6 +4,7 @@ import knex from '@/db/knex'
 import { BaseMetaRecord } from '@/modules/core/helpers/meta'
 import { Knex } from 'knex'
 import { reduce } from 'lodash'
+import { skipAutomateMigrations } from '@/modules/shared/helpers/envHelper'
 
 type BaseInnerSchemaConfig<T extends string, C extends string> = {
   /**
@@ -461,28 +462,36 @@ export const FileUploads = buildTableHelper('file_uploads', [
   'convertedCommitId'
 ])
 
-export const Automations = buildTableHelper('beta_automations', [
-  'automationId',
-  'automationRevisionId',
-  'automationName',
-  'projectId',
-  'modelId',
-  'createdAt',
-  'updatedAt',
-  'webhookId'
-])
+export const Automations = buildTableHelper(
+  skipAutomateMigrations() ? 'automations' : 'beta_automations',
+  [
+    'automationId',
+    'automationRevisionId',
+    'automationName',
+    'projectId',
+    'modelId',
+    'createdAt',
+    'updatedAt',
+    'webhookId'
+  ]
+)
 
-export const AutomationRuns = buildTableHelper('beta_automation_runs', [
-  'automationId',
-  'automationRevisionId',
-  'automationRunId',
-  'versionId',
-  'createdAt',
-  'updatedAt'
-])
+export const AutomationRuns = buildTableHelper(
+  skipAutomateMigrations() ? 'automation_runs' : 'beta_automation_runs',
+  [
+    'automationId',
+    'automationRevisionId',
+    'automationRunId',
+    'versionId',
+    'createdAt',
+    'updatedAt'
+  ]
+)
 
 export const AutomationFunctionRuns = buildTableHelper(
-  'beta_automation_function_runs',
+  skipAutomateMigrations()
+    ? 'automation_function_runs'
+    : 'beta_automation_function_runs',
   [
     'automationRunId',
     'functionId',
@@ -497,7 +506,9 @@ export const AutomationFunctionRuns = buildTableHelper(
 )
 
 export const AutomationFunctionRunsResultVersions = buildTableHelper(
-  'beta_automation_function_runs_result_versions',
+  skipAutomateMigrations()
+    ? 'automation_function_runs_result_version'
+    : 'beta_automation_function_runs_result_versions',
   ['automationRunId', 'functionId', 'resultVersionId']
 )
 
diff --git a/packages/server/modules/shared/helpers/envHelper.ts b/packages/server/modules/shared/helpers/envHelper.ts
index 24940c84d0..8cfb98efec 100644
--- a/packages/server/modules/shared/helpers/envHelper.ts
+++ b/packages/server/modules/shared/helpers/envHelper.ts
@@ -274,6 +274,14 @@ export function delayGraphqlResponsesBy() {
   if (!isDevEnv()) return 0
   return getIntFromEnv('DELAY_GQL_RESPONSES_BY', '0')
 }
+
+/**
+ * TODO: Remove, this is a temporary shortcut to avoid messing up the db schema which makes it difficult to jump to different branches
+ */
+export function skipAutomateMigrations() {
+  return getBooleanFromEnv('SKIP_AUTOMATE_MIGRATION_DEV')
+}
+
 export const { ENABLE_AUTOMATE_MODULE } = parseEnv(process.env, {
   ENABLE_AUTOMATE_MODULE: z.boolean().default(false)
 })

From 32a5a36ae35971675393f2b6080c175c89077180 Mon Sep 17 00:00:00 2001
From: Kristaps Fabians Geikins <fabians@speckle.systems>
Date: Thu, 21 Mar 2024 11:18:00 +0100
Subject: [PATCH 03/22] feat(fe2): project tabs synced w/ URL + various
 hydration mismatch fixes (#2149)

* WIP project tabs + resolved various hydration mismatches

* hydration mismatch workaround

* getting rid if old pages

* fixed page tab underlines

* minor cleanup

* support trailing slash

* a few viewer bugfixes
---
 .../components/common/model/Select.vue        |   4 +
 .../CreateEditApplicationDialog.vue           |   4 +
 .../developer-settings/CreateTokenDialog.vue  |   4 +
 .../components/form/select/ProjectRoles.vue   |   4 +
 .../components/form/select/Projects.vue       |   4 +
 .../components/form/select/ServerRoles.vue    |   4 +
 .../components/form/select/Users.vue          |   4 +
 .../components/header/NavNotifications.vue    |   3 +-
 .../frontend-2/components/header/NavShare.vue |   3 +-
 .../components/header/NavUserMenu.vue         |   3 +-
 .../project/CommentPermissionsSelect.vue      |   4 +
 .../components/project/VisibilitySelect.vue   |   4 +
 .../project/page/discussions/Header.vue       |   3 +
 .../project/page/discussions/Tab.vue          |  10 +-
 .../project/page/models/Actions.vue           |   2 +
 .../components/project/page/models/Header.vue |   4 +
 .../components/project/page/models/Tab.vue    |  10 +-
 .../project/page/team/PermissionSelect.vue    |   4 +
 .../webhooks-page/CreateOrEditDialog.vue      |   4 +
 .../components/viewer/explode/Menu.vue        |  72 +++---
 .../viewer/measurements/UnitSelect.vue        |   5 +
 .../frontend-2/components/viewer/sun/Menu.vue | 170 ++++++-------
 .../components/viewer/views/Menu.vue          |   3 +-
 .../lib/common/generated/gql/gql.ts           |  16 +-
 .../lib/common/generated/gql/graphql.ts       |   8 +-
 .../frontend-2/lib/common/helpers/route.ts    |  12 +-
 .../lib/projects/graphql/queries.ts           |   4 +
 .../lib/viewer/composables/setup.ts           |   9 +-
 .../pages/projects/[id]/discussions.vue       |  59 -----
 .../frontend-2/pages/projects/[id]/index.vue  |  90 ++++++-
 .../pages/projects/[id]/index/discussions.vue |   3 +
 .../pages/projects/[id]/index/index.vue       |   5 +
 .../pages/projects/[id]/models/index.vue      |  80 ------
 .../src/components/form/select/Badges.vue     |   4 +
 .../src/components/form/select/Base.vue       |  16 +-
 .../src/components/form/select/SourceApps.vue |   8 +
 .../src/components/layout/Menu.vue            |   3 +-
 .../src/components/layout/PageTabs.stories.ts |  79 +++++-
 .../src/components/layout/PageTabs.vue        |  49 ++--
 .../src/components/user/AvatarEditable.vue    |   3 +
 .../ui-components/src/composables/testing.ts  |  35 +++
 .../src/helpers/layout/components.ts          |   2 +-
 yarn.lock                                     | 227 +++---------------
 43 files changed, 503 insertions(+), 541 deletions(-)
 delete mode 100644 packages/frontend-2/pages/projects/[id]/discussions.vue
 create mode 100644 packages/frontend-2/pages/projects/[id]/index/discussions.vue
 create mode 100644 packages/frontend-2/pages/projects/[id]/index/index.vue
 delete mode 100644 packages/frontend-2/pages/projects/[id]/models/index.vue
 create mode 100644 packages/ui-components/src/composables/testing.ts

diff --git a/packages/frontend-2/components/common/model/Select.vue b/packages/frontend-2/components/common/model/Select.vue
index 32d2ebdd28..3b8795e2a3 100644
--- a/packages/frontend-2/components/common/model/Select.vue
+++ b/packages/frontend-2/components/common/model/Select.vue
@@ -8,6 +8,8 @@
     :multiple="multiple"
     :disabled="!items.length"
     :allow-unset="allowUnset"
+    :label-id="labelId"
+    :button-id="buttonId"
     by="id"
   >
     <template #nothing-selected>
@@ -113,6 +115,8 @@ const { result, onResult, fetchMore } = useQuery(
   })
 )
 
+const buttonId = useId()
+const labelId = useId()
 const elementToWatchForChanges = ref(null as Nullable<HTMLElement>)
 const itemContainer = ref(null as Nullable<HTMLElement>)
 
diff --git a/packages/frontend-2/components/developer-settings/CreateEditApplicationDialog.vue b/packages/frontend-2/components/developer-settings/CreateEditApplicationDialog.vue
index bc33b018d7..4017917f3d 100644
--- a/packages/frontend-2/components/developer-settings/CreateEditApplicationDialog.vue
+++ b/packages/frontend-2/components/developer-settings/CreateEditApplicationDialog.vue
@@ -31,6 +31,8 @@
           :rules="[isItemSelected]"
           show-label
           :items="applicationScopes"
+          :label-id="badgesLabelId"
+          :button-id="badgesButtonId"
           by="id"
         />
         <FormTextInput
@@ -95,6 +97,8 @@ const { mutate: editApplication } = useMutation(editApplicationMutation)
 const { triggerNotification } = useGlobalToast()
 const { handleSubmit, resetForm } = useForm<ApplicationFormValues>()
 
+const badgesLabelId = useId()
+const badgesButtonId = useId()
 const name = ref('')
 const scopes = ref<typeof applicationScopes.value>([])
 const redirectUrl = ref('')
diff --git a/packages/frontend-2/components/developer-settings/CreateTokenDialog.vue b/packages/frontend-2/components/developer-settings/CreateTokenDialog.vue
index fcbdeca658..8ad44c82fa 100644
--- a/packages/frontend-2/components/developer-settings/CreateTokenDialog.vue
+++ b/packages/frontend-2/components/developer-settings/CreateTokenDialog.vue
@@ -30,6 +30,8 @@
           show-label
           :items="apiTokenScopes"
           mount-menu-on-body
+          :label-id="badgesLabelId"
+          :button-id="badgesButtonId"
           by="id"
         />
       </div>
@@ -62,6 +64,8 @@ const { handleSubmit } = useForm<TokenFormValues>()
 
 const isOpen = defineModel<boolean>('open', { required: true })
 
+const badgesLabelId = useId()
+const badgesButtonId = useId()
 const name = ref('')
 const scopes = ref<typeof apiTokenScopes.value>([])
 
diff --git a/packages/frontend-2/components/form/select/ProjectRoles.vue b/packages/frontend-2/components/form/select/ProjectRoles.vue
index 43e98bfeab..148520d022 100644
--- a/packages/frontend-2/components/form/select/ProjectRoles.vue
+++ b/packages/frontend-2/components/form/select/ProjectRoles.vue
@@ -7,6 +7,8 @@
     name="projectRoles"
     label="Project roles"
     class="min-w-[150px]"
+    :label-id="labelId"
+    :button-id="buttonId"
   >
     <template #nothing-selected>
       {{ multiple ? 'Select roles' : 'Select role' }}
@@ -59,6 +61,8 @@ const props = defineProps<{
 
 const elementToWatchForChanges = ref(null as Nullable<HTMLElement>)
 const itemContainer = ref(null as Nullable<HTMLElement>)
+const labelId = useId()
+const buttonId = useId()
 
 const { selectedValue, isArrayValue, isMultiItemArrayValue, hiddenSelectedItemCount } =
   useFormSelectChildInternals<StreamRoles>({
diff --git a/packages/frontend-2/components/form/select/Projects.vue b/packages/frontend-2/components/form/select/Projects.vue
index 81c9ac0410..579e9ab623 100644
--- a/packages/frontend-2/components/form/select/Projects.vue
+++ b/packages/frontend-2/components/form/select/Projects.vue
@@ -8,6 +8,8 @@
     :label="label"
     :show-label="showLabel"
     :name="name || 'projects'"
+    :label-id="labelId"
+    :button-id="buttonId"
     by="id"
   >
     <template #nothing-selected>
@@ -128,6 +130,8 @@ const props = defineProps({
 
 const elementToWatchForChanges = ref(null as Nullable<HTMLElement>)
 const itemContainer = ref(null as Nullable<HTMLElement>)
+const labelId = useId()
+const buttonId = useId()
 
 const { selectedValue, hiddenSelectedItemCount, isArrayValue, isMultiItemArrayValue } =
   useFormSelectChildInternals<FormSelectProjects_ProjectFragment>({
diff --git a/packages/frontend-2/components/form/select/ServerRoles.vue b/packages/frontend-2/components/form/select/ServerRoles.vue
index 5f56f80836..459db1227f 100644
--- a/packages/frontend-2/components/form/select/ServerRoles.vue
+++ b/packages/frontend-2/components/form/select/ServerRoles.vue
@@ -8,6 +8,8 @@
     label="Server roles"
     class="min-w-[110px]"
     :fully-control-value="fullyControlValue"
+    :label-id="labelId"
+    :button-id="buttonId"
   >
     <template #nothing-selected>
       {{ multiple ? 'Select roles' : 'Select role' }}
@@ -67,6 +69,8 @@ const props = defineProps({
 
 const elementToWatchForChanges = ref(null as Nullable<HTMLElement>)
 const itemContainer = ref(null as Nullable<HTMLElement>)
+const labelId = useId()
+const buttonId = useId()
 
 const { selectedValue, isMultiItemArrayValue, hiddenSelectedItemCount, firstItem } =
   useFormSelectChildInternals<ServerRoles>({
diff --git a/packages/frontend-2/components/form/select/Users.vue b/packages/frontend-2/components/form/select/Users.vue
index 3dab387772..cb8a87c1eb 100644
--- a/packages/frontend-2/components/form/select/Users.vue
+++ b/packages/frontend-2/components/form/select/Users.vue
@@ -9,6 +9,8 @@
     :label="label"
     :show-label="showLabel"
     :name="name || 'users'"
+    :label-id="labelId"
+    :button-id="buttonId"
     by="id"
   >
     <template #nothing-selected>
@@ -138,6 +140,8 @@ const props = defineProps({
 
 const elementToWatchForChanges = ref(null as Nullable<HTMLElement>)
 const itemContainer = ref(null as Nullable<HTMLElement>)
+const labelId = useId()
+const buttonId = useId()
 
 const { selectedValue, hiddenSelectedItemCount, isArrayValue, isMultiItemArrayValue } =
   useFormSelectChildInternals<FormUsersSelectItemFragment>({
diff --git a/packages/frontend-2/components/header/NavNotifications.vue b/packages/frontend-2/components/header/NavNotifications.vue
index 2421862f9e..2e3ef27cba 100644
--- a/packages/frontend-2/components/header/NavNotifications.vue
+++ b/packages/frontend-2/components/header/NavNotifications.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="hasNotifications">
     <Menu as="div" class="flex items-center">
-      <MenuButton v-slot="{ open: menuOpen }" as="div">
+      <MenuButton :id="menuButtonId" v-slot="{ open: menuOpen }" as="div">
         <div class="cursor-pointer">
           <span class="sr-only">Open notifications menu</span>
           <div class="relative">
@@ -50,6 +50,7 @@ import { XMarkIcon, BellIcon } from '@heroicons/vue/24/outline'
 import { useActiveUser } from '~~/lib/auth/composables/activeUser'
 
 const { activeUser } = useActiveUser()
+const menuButtonId = useId()
 
 const hasNotifications = computed(() => {
   if (!activeUser.value) return false
diff --git a/packages/frontend-2/components/header/NavShare.vue b/packages/frontend-2/components/header/NavShare.vue
index d7e1b5ea70..79aa7fef96 100644
--- a/packages/frontend-2/components/header/NavShare.vue
+++ b/packages/frontend-2/components/header/NavShare.vue
@@ -3,7 +3,7 @@
     as="div"
     class="flex items-center relative sm:border-r border-outline-1 sm:pr-4"
   >
-    <MenuButton as="div">
+    <MenuButton :id="menuButtonId" as="div">
       <FormButton
         class="hidden sm:flex"
         size="sm"
@@ -101,6 +101,7 @@ const props = defineProps<{
 
 const { copy } = useClipboard()
 const copyModelLink = useCopyModelLink()
+const menuButtonId = useId()
 
 const embedDialogOpen = ref(false)
 
diff --git a/packages/frontend-2/components/header/NavUserMenu.vue b/packages/frontend-2/components/header/NavUserMenu.vue
index 87b3794bf4..9755b01cd2 100644
--- a/packages/frontend-2/components/header/NavUserMenu.vue
+++ b/packages/frontend-2/components/header/NavUserMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <Menu as="div" class="flex items-center">
-      <MenuButton v-slot="{ open: userOpen }">
+      <MenuButton :id="menuButtonId" v-slot="{ open: userOpen }">
         <span class="sr-only">Open user menu</span>
         <UserAvatar v-if="!userOpen" size="lg" :user="activeUser" hover-effect />
         <UserAvatar v-else size="lg" hover-effect>
@@ -163,6 +163,7 @@ const route = useRoute()
 
 const showInviteDialog = ref(false)
 const showProfileEditDialog = ref(false)
+const menuButtonId = useId()
 
 const Icon = computed(() => (isDarkTheme.value ? SunIcon : MoonIcon))
 const version = computed(() => serverInfo.value?.version)
diff --git a/packages/frontend-2/components/project/CommentPermissionsSelect.vue b/packages/frontend-2/components/project/CommentPermissionsSelect.vue
index c448c93128..6417678de0 100644
--- a/packages/frontend-2/components/project/CommentPermissionsSelect.vue
+++ b/packages/frontend-2/components/project/CommentPermissionsSelect.vue
@@ -7,6 +7,8 @@
     :name="name || 'commentPermissions'"
     :allow-unset="false"
     :disabled="disabled"
+    :label-id="labelId"
+    :button-id="buttonId"
     by="id"
   >
     <template #something-selected="{ value }">
@@ -41,6 +43,8 @@ const props = defineProps<{
   disabled?: boolean
 }>()
 
+const labelId = useId()
+const buttonId = useId()
 const items = ref(commentPermissionsSelectItems)
 
 const selectedValue = computed({
diff --git a/packages/frontend-2/components/project/VisibilitySelect.vue b/packages/frontend-2/components/project/VisibilitySelect.vue
index d00c838a73..785016ff96 100644
--- a/packages/frontend-2/components/project/VisibilitySelect.vue
+++ b/packages/frontend-2/components/project/VisibilitySelect.vue
@@ -7,6 +7,8 @@
     :name="name || 'visibility'"
     :allow-unset="false"
     :disabled="disabled"
+    :label-id="labelId"
+    :button-id="buttonId"
     by="id"
   >
     <template #something-selected="{ value }">
@@ -44,6 +46,8 @@ const props = defineProps<{
   disabled?: boolean
 }>()
 
+const labelId = useId()
+const buttonId = useId()
 const items = ref<
   Record<
     ProjectVisibility,
diff --git a/packages/frontend-2/components/project/page/discussions/Header.vue b/packages/frontend-2/components/project/page/discussions/Header.vue
index 6f6a4c1682..c111e2b526 100644
--- a/packages/frontend-2/components/project/page/discussions/Header.vue
+++ b/packages/frontend-2/components/project/page/discussions/Header.vue
@@ -4,6 +4,7 @@
       <h1 class="block h4 font-bold">Discussions</h1>
       <div class="space-x-2 flex items-center">
         <FormCheckbox
+          :id="checkboxId"
           v-model="finalIncludeArchived"
           name="includeArchived"
           :value="true"
@@ -47,4 +48,6 @@ const finalIncludeArchived = computed({
   get: () => props.includeArchived,
   set: (newVal) => emit('update:include-archived', newVal)
 })
+
+const checkboxId = useId()
 </script>
diff --git a/packages/frontend-2/components/project/page/discussions/Tab.vue b/packages/frontend-2/components/project/page/discussions/Tab.vue
index 9a68fb4fce..07a7850f16 100644
--- a/packages/frontend-2/components/project/page/discussions/Tab.vue
+++ b/packages/frontend-2/components/project/page/discussions/Tab.vue
@@ -17,16 +17,9 @@
 <script setup lang="ts">
 import { useQuery } from '@vue/apollo-composable'
 import type { Optional } from '~~/../shared/dist-esm'
-import {
-  useGeneralProjectPageUpdateTracking,
-  useProjectPageItemViewType
-} from '~~/lib/projects/composables/projectPages'
+import { useProjectPageItemViewType } from '~~/lib/projects/composables/projectPages'
 import { projectDiscussionsPageQuery } from '~~/lib/projects/graphql/queries'
 
-definePageMeta({
-  middleware: ['require-valid-project']
-})
-
 const gridOrList = useProjectPageItemViewType('Discussions')
 const includeArchived = ref(undefined as Optional<true>)
 
@@ -35,7 +28,6 @@ const projectId = computed(() => route.params.id as string)
 const { result } = useQuery(projectDiscussionsPageQuery, () => ({
   projectId: projectId.value
 }))
-useGeneralProjectPageUpdateTracking({ projectId })
 
 const project = computed(() => result.value?.project)
 </script>
diff --git a/packages/frontend-2/components/project/page/models/Actions.vue b/packages/frontend-2/components/project/page/models/Actions.vue
index 5582e04911..a77994ab5d 100644
--- a/packages/frontend-2/components/project/page/models/Actions.vue
+++ b/packages/frontend-2/components/project/page/models/Actions.vue
@@ -3,6 +3,7 @@
   <div>
     <LayoutMenu
       v-model:open="showActionsMenu"
+      :menu-id="menuId"
       :items="actionsItems"
       @click.stop.prevent
       @chosen="onActionChosen"
@@ -89,6 +90,7 @@ const props = defineProps<{
 
 const copyModelLink = useCopyModelLink()
 const { copy } = useClipboard()
+const menuId = useId()
 
 const showActionsMenu = ref(false)
 const openDialog = ref(null as Nullable<ActionTypes>)
diff --git a/packages/frontend-2/components/project/page/models/Header.vue b/packages/frontend-2/components/project/page/models/Header.vue
index cc5409b35c..b615516c2b 100644
--- a/packages/frontend-2/components/project/page/models/Header.vue
+++ b/packages/frontend-2/components/project/page/models/Header.vue
@@ -62,6 +62,8 @@
               class="grow shrink sm:w-[120px] md:w-44"
               clearable
               fixed-height
+              :label-id="sourceAppsLabelId"
+              :button-id="sourceAppsBtnId"
             />
             <LayoutGridListToggle v-model="finalGridOrList" class="shrink-0" />
           </div>
@@ -135,6 +137,8 @@ const props = defineProps<{
 }>()
 
 const localSearch = ref('')
+const sourceAppsLabelId = useId()
+const sourceAppsBtnId = useId()
 
 const mp = useMixpanel()
 const trackFederateAll = () =>
diff --git a/packages/frontend-2/components/project/page/models/Tab.vue b/packages/frontend-2/components/project/page/models/Tab.vue
index ed135804ca..760f1a9068 100644
--- a/packages/frontend-2/components/project/page/models/Tab.vue
+++ b/packages/frontend-2/components/project/page/models/Tab.vue
@@ -28,14 +28,7 @@ import { useQuery } from '@vue/apollo-composable'
 import type { SourceAppDefinition } from '@speckle/shared'
 import type { FormUsersSelectItemFragment } from '~~/lib/common/generated/gql/graphql'
 import { projectModelsPageQuery } from '~~/lib/projects/graphql/queries'
-import {
-  useGeneralProjectPageUpdateTracking,
-  useProjectPageItemViewType
-} from '~~/lib/projects/composables/projectPages'
-
-definePageMeta({
-  middleware: ['require-valid-project']
-})
+import { useProjectPageItemViewType } from '~~/lib/projects/composables/projectPages'
 
 const route = useRoute()
 const projectId = computed(() => route.params.id as string)
@@ -51,7 +44,6 @@ const { result } = useQuery(projectModelsPageQuery, () => ({
 }))
 
 const project = computed(() => result.value?.project)
-useGeneralProjectPageUpdateTracking({ projectId })
 
 const clearSearch = () => {
   search.value = ''
diff --git a/packages/frontend-2/components/project/page/team/PermissionSelect.vue b/packages/frontend-2/components/project/page/team/PermissionSelect.vue
index b84edbe126..96ad54f486 100644
--- a/packages/frontend-2/components/project/page/team/PermissionSelect.vue
+++ b/packages/frontend-2/components/project/page/team/PermissionSelect.vue
@@ -8,6 +8,8 @@
     :name="name || 'role'"
     :allow-unset="false"
     :disabled="disabled"
+    :label-id="labelId"
+    :button-id="buttonId"
     hide-checkmarks
     by="id"
     class="min-w-[85px]"
@@ -54,6 +56,8 @@ const props = defineProps<{
   hideOwner?: boolean
 }>()
 
+const labelId = useId()
+const buttonId = useId()
 const items = ref(
   reduce(
     roleSelectItems,
diff --git a/packages/frontend-2/components/project/webhooks-page/CreateOrEditDialog.vue b/packages/frontend-2/components/project/webhooks-page/CreateOrEditDialog.vue
index 8687ba4499..da9c7839f6 100644
--- a/packages/frontend-2/components/project/webhooks-page/CreateOrEditDialog.vue
+++ b/packages/frontend-2/components/project/webhooks-page/CreateOrEditDialog.vue
@@ -49,6 +49,8 @@
           :rules="[isItemSelected]"
           show-label
           :items="webhookTriggerItems"
+          :label-id="badgesLabelId"
+          :button-id="badgesButtonId"
           by="id"
         />
       </div>
@@ -100,6 +102,8 @@ const triggers = ref<typeof webhookTriggerItems.value>([])
 const url = ref('')
 const description = ref('')
 const secret = ref('')
+const badgesLabelId = useId()
+const badgesButtonId = useId()
 
 const webhookTriggerItems = computed(() => {
   return Object.values(WebhookTriggers).map((value) => ({
diff --git a/packages/frontend-2/components/viewer/explode/Menu.vue b/packages/frontend-2/components/viewer/explode/Menu.vue
index f37532dc1b..ed557a6245 100644
--- a/packages/frontend-2/components/viewer/explode/Menu.vue
+++ b/packages/frontend-2/components/viewer/explode/Menu.vue
@@ -1,40 +1,42 @@
 <template>
-  <Popover as="div" class="relative z-30">
-    <PopoverButton v-slot="{ open }" as="template">
-      <ViewerControlsButtonToggle flat secondary :active="open || isActive">
-        <!-- <ChevronUpDownIcon class="w-5 h-5 rotate-45" /> -->
-        <IconExplode class="h-4 w-4 sm:h-5 sm:w-5" />
-      </ViewerControlsButtonToggle>
-    </PopoverButton>
-    <Transition
-      enter-active-class="transform ease-out duration-300 transition"
-      enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-      enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
-      leave-active-class="transition ease-in duration-100"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
-    >
-      <PopoverPanel
-        class="absolute translate-x-0 left-12 top-0 p-2 bg-foundation max-h-64 simple-scrollbar overflow-y-auto outline outline-2 outline-primary-muted rounded-lg shadow-lg overflow-hidden flex flex-col space-y-2"
+  <div class="relative z-30">
+    <Popover as="div" class="relative z-30">
+      <PopoverButton v-slot="{ open }" as="template">
+        <ViewerControlsButtonToggle flat secondary :active="open || isActive">
+          <!-- <ChevronUpDownIcon class="w-5 h-5 rotate-45" /> -->
+          <IconExplode class="h-4 w-4 sm:h-5 sm:w-5" />
+        </ViewerControlsButtonToggle>
+      </PopoverButton>
+      <Transition
+        enter-active-class="transform ease-out duration-300 transition"
+        enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+        enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
+        leave-active-class="transition ease-in duration-100"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
       >
-        <div class="flex items-center space-x-1">
-          <input
-            id="intensity"
-            v-model="explodeFactor"
-            class="w-24 sm:w-32 h-2 mr-2"
-            type="range"
-            name="intensity"
-            min="0"
-            max="1"
-            step="0.01"
-          />
-          <label class="text-xs sm:text-sm text-foreground-2" for="intensity">
-            Intensity
-          </label>
-        </div>
-      </PopoverPanel>
-    </Transition>
-  </Popover>
+        <PopoverPanel
+          class="absolute translate-x-0 left-12 top-0 p-2 bg-foundation max-h-64 simple-scrollbar overflow-y-auto outline outline-2 outline-primary-muted rounded-lg shadow-lg overflow-hidden flex flex-col space-y-2"
+        >
+          <div class="flex items-center space-x-1">
+            <input
+              id="intensity"
+              v-model="explodeFactor"
+              class="w-24 sm:w-32 h-2 mr-2"
+              type="range"
+              name="intensity"
+              min="0"
+              max="1"
+              step="0.01"
+            />
+            <label class="text-xs sm:text-sm text-foreground-2" for="intensity">
+              Intensity
+            </label>
+          </div>
+        </PopoverPanel>
+      </Transition>
+    </Popover>
+  </div>
 </template>
 <script setup lang="ts">
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
diff --git a/packages/frontend-2/components/viewer/measurements/UnitSelect.vue b/packages/frontend-2/components/viewer/measurements/UnitSelect.vue
index 8032b5408f..bab497619d 100644
--- a/packages/frontend-2/components/viewer/measurements/UnitSelect.vue
+++ b/packages/frontend-2/components/viewer/measurements/UnitSelect.vue
@@ -6,6 +6,8 @@
     :show-label="false"
     :name="name || 'units'"
     :allow-unset="false"
+    :label-id="labelId"
+    :button-id="buttonId"
   >
     <template #something-selected>
       <div>{{ fullUnitName }}</div>
@@ -32,6 +34,9 @@ const props = defineProps<{
   name?: string
 }>()
 
+const labelId = useId()
+const buttonId = useId()
+
 // Use a ref for unitDisplayNames
 const unitDisplayNames = ref<UnitDisplayNames>({
   mm: 'Millimeters',
diff --git a/packages/frontend-2/components/viewer/sun/Menu.vue b/packages/frontend-2/components/viewer/sun/Menu.vue
index d0931b8870..0b7bbf932e 100644
--- a/packages/frontend-2/components/viewer/sun/Menu.vue
+++ b/packages/frontend-2/components/viewer/sun/Menu.vue
@@ -1,90 +1,92 @@
 <template>
-  <Popover as="div" class="relative z-30">
-    <PopoverButton v-slot="{ open }" as="template">
-      <ViewerControlsButtonToggle flat secondary :active="open">
-        <SunIcon class="w-5 h-5" />
-      </ViewerControlsButtonToggle>
-    </PopoverButton>
-    <Transition
-      enter-active-class="transform ease-out duration-300 transition"
-      enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-      enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
-      leave-active-class="transition ease-in duration-100"
-      leave-from-class="opacity-100"
-      leave-to-class="opacity-0"
-    >
-      <PopoverPanel
-        class="absolute translate-x-0 left-10 sm:left-12 top-2 bg-foundation max-h-64 simple-scrollbar overflow-y-auto outline outline-2 outline-primary-muted rounded-lg shadow-lg overflow-hidden flex flex-col space-y-2"
+  <div class="relative z-30">
+    <Popover as="div" class="relative z-30">
+      <PopoverButton v-slot="{ open }" as="template">
+        <ViewerControlsButtonToggle flat secondary :active="open">
+          <SunIcon class="w-5 h-5" />
+        </ViewerControlsButtonToggle>
+      </PopoverButton>
+      <Transition
+        enter-active-class="transform ease-out duration-300 transition"
+        enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+        enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
+        leave-active-class="transition ease-in duration-100"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
       >
-        <div class="p-2 border-b border-outline flex gap-2 items-center">
-          <div class="scale-90">
-            <FormSwitch v-model="sunlightShadows" />
+        <PopoverPanel
+          class="absolute translate-x-0 left-10 sm:left-12 top-2 bg-foundation max-h-64 simple-scrollbar overflow-y-auto outline outline-2 outline-primary-muted rounded-lg shadow-lg overflow-hidden flex flex-col space-y-2"
+        >
+          <div class="p-2 border-b border-outline flex gap-2 items-center">
+            <div class="scale-90">
+              <FormSwitch v-model="sunlightShadows" />
+            </div>
+            <span class="text-foreground text-sm">Sun Shadows</span>
           </div>
-          <span class="text-foreground text-sm">Sun Shadows</span>
-        </div>
-        <div class="flex items-center gap-1 px-2">
-          <input
-            id="intensity"
-            v-model="intensity"
-            class="w-24 sm:w-32 h-2 mr-2"
-            type="range"
-            name="intensity"
-            min="1"
-            max="10"
-            step="0.05"
-          />
-          <label class="text-xs sm:text-sm text-foreground-2" for="intensity">
-            Intensity
-          </label>
-        </div>
-        <div class="flex items-center gap-1 px-2">
-          <input
-            id="elevation"
-            v-model="elevation"
-            class="w-24 sm:w-32 h-2 mr-2"
-            type="range"
-            name="elevation"
-            min="0"
-            :max="Math.PI"
-            step="0.05"
-          />
-          <label class="text-xs sm:text-sm text-foreground-2" for="elevation">
-            Elevation
-          </label>
-        </div>
-        <div class="flex items-center gap-1 px-2">
-          <input
-            id="azimuth"
-            v-model="azimuth"
-            class="w-24 sm:w-32 h-2 mr-2"
-            type="range"
-            name="azimuth"
-            :min="-Math.PI * 0.5"
-            :max="Math.PI * 0.5"
-            step="0.05"
-          />
-          <label class="text-xs sm:text-sm text-foreground-2" for="azimuth">
-            Azimuth
-          </label>
-        </div>
-        <div class="flex items-center gap-1 px-2 pb-2">
-          <input
-            id="indirect"
-            v-model="indirectLightIntensity"
-            class="w-24 sm:w-32 h-2 mr-2"
-            type="range"
-            name="indirect"
-            min="0"
-            max="5"
-            step="0.05"
-          />
-          <label class="text-xs sm:text-sm text-foreground-2" for="indirect">
-            Indirect
-          </label>
-        </div>
-      </PopoverPanel>
-    </Transition>
-  </Popover>
+          <div class="flex items-center gap-1 px-2">
+            <input
+              id="intensity"
+              v-model="intensity"
+              class="w-24 sm:w-32 h-2 mr-2"
+              type="range"
+              name="intensity"
+              min="1"
+              max="10"
+              step="0.05"
+            />
+            <label class="text-xs sm:text-sm text-foreground-2" for="intensity">
+              Intensity
+            </label>
+          </div>
+          <div class="flex items-center gap-1 px-2">
+            <input
+              id="elevation"
+              v-model="elevation"
+              class="w-24 sm:w-32 h-2 mr-2"
+              type="range"
+              name="elevation"
+              min="0"
+              :max="Math.PI"
+              step="0.05"
+            />
+            <label class="text-xs sm:text-sm text-foreground-2" for="elevation">
+              Elevation
+            </label>
+          </div>
+          <div class="flex items-center gap-1 px-2">
+            <input
+              id="azimuth"
+              v-model="azimuth"
+              class="w-24 sm:w-32 h-2 mr-2"
+              type="range"
+              name="azimuth"
+              :min="-Math.PI * 0.5"
+              :max="Math.PI * 0.5"
+              step="0.05"
+            />
+            <label class="text-xs sm:text-sm text-foreground-2" for="azimuth">
+              Azimuth
+            </label>
+          </div>
+          <div class="flex items-center gap-1 px-2 pb-2">
+            <input
+              id="indirect"
+              v-model="indirectLightIntensity"
+              class="w-24 sm:w-32 h-2 mr-2"
+              type="range"
+              name="indirect"
+              min="0"
+              max="5"
+              step="0.05"
+            />
+            <label class="text-xs sm:text-sm text-foreground-2" for="indirect">
+              Indirect
+            </label>
+          </div>
+        </PopoverPanel>
+      </Transition>
+    </Popover>
+  </div>
 </template>
 <script setup lang="ts">
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
diff --git a/packages/frontend-2/components/viewer/views/Menu.vue b/packages/frontend-2/components/viewer/views/Menu.vue
index d722fd7467..fbcbb071fc 100644
--- a/packages/frontend-2/components/viewer/views/Menu.vue
+++ b/packages/frontend-2/components/viewer/views/Menu.vue
@@ -1,6 +1,6 @@
 <template>
   <Menu as="div" class="relative z-30">
-    <MenuButton v-slot="{ open }" as="template">
+    <MenuButton :id="menuButtonId" v-slot="{ open }" as="template">
       <ViewerControlsButtonToggle flat secondary :active="open">
         <IconViews class="w-5 h-5" />
       </ViewerControlsButtonToggle>
@@ -74,6 +74,7 @@ const {
 } = useInjectedViewerState()
 const { setView: setViewRaw } = useCameraUtilities()
 const mp = useMixpanel()
+const menuButtonId = useId()
 
 const setView = (v: CanonicalView | SpeckleView) => {
   setViewRaw(v)
diff --git a/packages/frontend-2/lib/common/generated/gql/gql.ts b/packages/frontend-2/lib/common/generated/gql/gql.ts
index 27c76d42f1..8977ca30b2 100644
--- a/packages/frontend-2/lib/common/generated/gql/gql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/gql.ts
@@ -124,10 +124,10 @@ const documents = {
     "\n  query ProjectLatestCommentThreads(\n    $projectId: String!\n    $cursor: String = null\n    $filter: ProjectCommentsFilter = null\n  ) {\n    project(id: $projectId) {\n      id\n      commentThreads(cursor: $cursor, limit: 8, filter: $filter) {\n        totalCount\n        cursor\n        items {\n          ...ProjectPageLatestItemsCommentItem\n        }\n      }\n    }\n  }\n": types.ProjectLatestCommentThreadsDocument,
     "\n  query ProjectInvite($projectId: String!, $token: String) {\n    projectInvite(projectId: $projectId, token: $token) {\n      ...ProjectsInviteBanner\n    }\n  }\n": types.ProjectInviteDocument,
     "\n  query ProjectModelCheck($projectId: String!, $modelId: String!) {\n    project(id: $projectId) {\n      model(id: $modelId) {\n        id\n      }\n    }\n  }\n": types.ProjectModelCheckDocument,
-    "\n  query ProjectModelPage(\n    $projectId: String!\n    $modelId: String!\n    $versionsCursor: String\n  ) {\n    project(id: $projectId) {\n      ...ProjectModelPageHeaderProject\n      ...ProjectModelPageVersionsProject\n    }\n  }\n": types.ProjectModelPageDocument,
-    "\n  query ProjectModelVersions(\n    $projectId: String!\n    $modelId: String!\n    $versionsCursor: String\n  ) {\n    project(id: $projectId) {\n      ...ProjectModelPageVersionsPagination\n    }\n  }\n": types.ProjectModelVersionsDocument,
-    "\n  query ProjectModelsPage($projectId: String!) {\n    project(id: $projectId) {\n      ...ProjectModelsPageHeader_Project\n      ...ProjectModelsPageResults_Project\n    }\n  }\n": types.ProjectModelsPageDocument,
-    "\n  query ProjectDiscussionsPage($projectId: String!) {\n    project(id: $projectId) {\n      ...ProjectDiscussionsPageHeader_Project\n      ...ProjectDiscussionsPageResults_Project\n    }\n  }\n": types.ProjectDiscussionsPageDocument,
+    "\n  query ProjectModelPage(\n    $projectId: String!\n    $modelId: String!\n    $versionsCursor: String\n  ) {\n    project(id: $projectId) {\n      id\n      ...ProjectModelPageHeaderProject\n      ...ProjectModelPageVersionsProject\n    }\n  }\n": types.ProjectModelPageDocument,
+    "\n  query ProjectModelVersions(\n    $projectId: String!\n    $modelId: String!\n    $versionsCursor: String\n  ) {\n    project(id: $projectId) {\n      id\n      ...ProjectModelPageVersionsPagination\n    }\n  }\n": types.ProjectModelVersionsDocument,
+    "\n  query ProjectModelsPage($projectId: String!) {\n    project(id: $projectId) {\n      id\n      ...ProjectModelsPageHeader_Project\n      ...ProjectModelsPageResults_Project\n    }\n  }\n": types.ProjectModelsPageDocument,
+    "\n  query ProjectDiscussionsPage($projectId: String!) {\n    project(id: $projectId) {\n      id\n      ...ProjectDiscussionsPageHeader_Project\n      ...ProjectDiscussionsPageResults_Project\n    }\n  }\n": types.ProjectDiscussionsPageDocument,
     "\n  query ProjectWebhooks($projectId: String!) {\n    project(id: $projectId) {\n      id\n      name\n      webhooks {\n        items {\n          streamId\n          triggers\n          enabled\n          url\n          id\n          description\n          history(limit: 5) {\n            items {\n              status\n              statusInfo\n            }\n          }\n        }\n        totalCount\n      }\n    }\n  }\n": types.ProjectWebhooksDocument,
     "\n  query Blob($blobId: String!, $streamId: String!) {\n    stream(id: $streamId) {\n      blob(id: $blobId) {\n        id\n        fileName\n        fileType\n        fileSize\n        createdAt\n      }\n    }\n  }\n": types.BlobDocument,
     "\n  subscription OnProjectUpdated($id: String!) {\n    projectUpdated(id: $id) {\n      id\n      type\n      project {\n        ...ProjectPageProject\n        ...ProjectDashboardItemNoModels\n      }\n    }\n  }\n": types.OnProjectUpdatedDocument,
@@ -638,19 +638,19 @@ export function graphql(source: "\n  query ProjectModelCheck($projectId: String!
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query ProjectModelPage(\n    $projectId: String!\n    $modelId: String!\n    $versionsCursor: String\n  ) {\n    project(id: $projectId) {\n      ...ProjectModelPageHeaderProject\n      ...ProjectModelPageVersionsProject\n    }\n  }\n"): (typeof documents)["\n  query ProjectModelPage(\n    $projectId: String!\n    $modelId: String!\n    $versionsCursor: String\n  ) {\n    project(id: $projectId) {\n      ...ProjectModelPageHeaderProject\n      ...ProjectModelPageVersionsProject\n    }\n  }\n"];
+export function graphql(source: "\n  query ProjectModelPage(\n    $projectId: String!\n    $modelId: String!\n    $versionsCursor: String\n  ) {\n    project(id: $projectId) {\n      id\n      ...ProjectModelPageHeaderProject\n      ...ProjectModelPageVersionsProject\n    }\n  }\n"): (typeof documents)["\n  query ProjectModelPage(\n    $projectId: String!\n    $modelId: String!\n    $versionsCursor: String\n  ) {\n    project(id: $projectId) {\n      id\n      ...ProjectModelPageHeaderProject\n      ...ProjectModelPageVersionsProject\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query ProjectModelVersions(\n    $projectId: String!\n    $modelId: String!\n    $versionsCursor: String\n  ) {\n    project(id: $projectId) {\n      ...ProjectModelPageVersionsPagination\n    }\n  }\n"): (typeof documents)["\n  query ProjectModelVersions(\n    $projectId: String!\n    $modelId: String!\n    $versionsCursor: String\n  ) {\n    project(id: $projectId) {\n      ...ProjectModelPageVersionsPagination\n    }\n  }\n"];
+export function graphql(source: "\n  query ProjectModelVersions(\n    $projectId: String!\n    $modelId: String!\n    $versionsCursor: String\n  ) {\n    project(id: $projectId) {\n      id\n      ...ProjectModelPageVersionsPagination\n    }\n  }\n"): (typeof documents)["\n  query ProjectModelVersions(\n    $projectId: String!\n    $modelId: String!\n    $versionsCursor: String\n  ) {\n    project(id: $projectId) {\n      id\n      ...ProjectModelPageVersionsPagination\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query ProjectModelsPage($projectId: String!) {\n    project(id: $projectId) {\n      ...ProjectModelsPageHeader_Project\n      ...ProjectModelsPageResults_Project\n    }\n  }\n"): (typeof documents)["\n  query ProjectModelsPage($projectId: String!) {\n    project(id: $projectId) {\n      ...ProjectModelsPageHeader_Project\n      ...ProjectModelsPageResults_Project\n    }\n  }\n"];
+export function graphql(source: "\n  query ProjectModelsPage($projectId: String!) {\n    project(id: $projectId) {\n      id\n      ...ProjectModelsPageHeader_Project\n      ...ProjectModelsPageResults_Project\n    }\n  }\n"): (typeof documents)["\n  query ProjectModelsPage($projectId: String!) {\n    project(id: $projectId) {\n      id\n      ...ProjectModelsPageHeader_Project\n      ...ProjectModelsPageResults_Project\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query ProjectDiscussionsPage($projectId: String!) {\n    project(id: $projectId) {\n      ...ProjectDiscussionsPageHeader_Project\n      ...ProjectDiscussionsPageResults_Project\n    }\n  }\n"): (typeof documents)["\n  query ProjectDiscussionsPage($projectId: String!) {\n    project(id: $projectId) {\n      ...ProjectDiscussionsPageHeader_Project\n      ...ProjectDiscussionsPageResults_Project\n    }\n  }\n"];
+export function graphql(source: "\n  query ProjectDiscussionsPage($projectId: String!) {\n    project(id: $projectId) {\n      id\n      ...ProjectDiscussionsPageHeader_Project\n      ...ProjectDiscussionsPageResults_Project\n    }\n  }\n"): (typeof documents)["\n  query ProjectDiscussionsPage($projectId: String!) {\n    project(id: $projectId) {\n      id\n      ...ProjectDiscussionsPageHeader_Project\n      ...ProjectDiscussionsPageResults_Project\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/packages/frontend-2/lib/common/generated/gql/graphql.ts b/packages/frontend-2/lib/common/generated/gql/graphql.ts
index d17f3714a1..79414eaf95 100644
--- a/packages/frontend-2/lib/common/generated/gql/graphql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/graphql.ts
@@ -3885,10 +3885,10 @@ export const ProjectModelChildrenTreeDocument = {"kind":"Document","definitions"
 export const ProjectLatestCommentThreadsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectLatestCommentThreads"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cursor"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}},"defaultValue":{"kind":"NullValue"}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filter"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ProjectCommentsFilter"}},"defaultValue":{"kind":"NullValue"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"commentThreads"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"cursor"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cursor"}}},{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"8"}},{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filter"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}},{"kind":"Field","name":{"kind":"Name","value":"cursor"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageLatestItemsCommentItem"}}]}}]}}]}}]}},...ProjectPageLatestItemsCommentItemFragmentDoc.definitions,...FormUsersSelectItemFragmentDoc.definitions]} as unknown as DocumentNode<ProjectLatestCommentThreadsQuery, ProjectLatestCommentThreadsQueryVariables>;
 export const ProjectInviteDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectInvite"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"token"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projectInvite"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"projectId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}},{"kind":"Argument","name":{"kind":"Name","value":"token"},"value":{"kind":"Variable","name":{"kind":"Name","value":"token"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectsInviteBanner"}}]}}]}},...ProjectsInviteBannerFragmentDoc.definitions,...LimitedUserAvatarFragmentDoc.definitions]} as unknown as DocumentNode<ProjectInviteQuery, ProjectInviteQueryVariables>;
 export const ProjectModelCheckDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectModelCheck"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"modelId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"model"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"modelId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]} as unknown as DocumentNode<ProjectModelCheckQuery, ProjectModelCheckQueryVariables>;
-export const ProjectModelPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectModelPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"modelId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"versionsCursor"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectModelPageHeaderProject"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectModelPageVersionsProject"}}]}}]}},...ProjectModelPageHeaderProjectFragmentDoc.definitions,...ProjectModelPageVersionsProjectFragmentDoc.definitions,...ProjectPageProjectHeaderFragmentDoc.definitions,...PendingFileUploadFragmentDoc.definitions,...ProjectModelPageVersionsPaginationFragmentDoc.definitions,...ProjectModelPageVersionsCardVersionFragmentDoc.definitions,...LimitedUserAvatarFragmentDoc.definitions,...ProjectModelPageDialogDeleteVersionFragmentDoc.definitions,...ProjectModelPageDialogMoveToVersionFragmentDoc.definitions,...ModelCardAutomationStatus_VersionFragmentDoc.definitions,...ModelCardAutomationStatus_AutomationsStatusFragmentDoc.definitions,...ProjectsModelPageEmbed_ProjectFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions]} as unknown as DocumentNode<ProjectModelPageQuery, ProjectModelPageQueryVariables>;
-export const ProjectModelVersionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectModelVersions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"modelId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"versionsCursor"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectModelPageVersionsPagination"}}]}}]}},...ProjectModelPageVersionsPaginationFragmentDoc.definitions,...ProjectModelPageVersionsCardVersionFragmentDoc.definitions,...LimitedUserAvatarFragmentDoc.definitions,...ProjectModelPageDialogDeleteVersionFragmentDoc.definitions,...ProjectModelPageDialogMoveToVersionFragmentDoc.definitions,...ModelCardAutomationStatus_VersionFragmentDoc.definitions,...ModelCardAutomationStatus_AutomationsStatusFragmentDoc.definitions,...ProjectsModelPageEmbed_ProjectFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions]} as unknown as DocumentNode<ProjectModelVersionsQuery, ProjectModelVersionsQueryVariables>;
-export const ProjectModelsPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectModelsPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectModelsPageHeader_Project"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectModelsPageResults_Project"}}]}}]}},...ProjectModelsPageHeader_ProjectFragmentDoc.definitions,...FormUsersSelectItemFragmentDoc.definitions,...ProjectModelsPageResults_ProjectFragmentDoc.definitions,...ProjectPageLatestItemsModelsFragmentDoc.definitions,...ProjectPageModelsStructureItem_ProjectFragmentDoc.definitions,...ProjectPageModelsActions_ProjectFragmentDoc.definitions,...ProjectsModelPageEmbed_ProjectFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions]} as unknown as DocumentNode<ProjectModelsPageQuery, ProjectModelsPageQueryVariables>;
-export const ProjectDiscussionsPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectDiscussionsPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDiscussionsPageHeader_Project"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDiscussionsPageResults_Project"}}]}}]}},...ProjectDiscussionsPageHeader_ProjectFragmentDoc.definitions,...ProjectDiscussionsPageResults_ProjectFragmentDoc.definitions]} as unknown as DocumentNode<ProjectDiscussionsPageQuery, ProjectDiscussionsPageQueryVariables>;
+export const ProjectModelPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectModelPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"modelId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"versionsCursor"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectModelPageHeaderProject"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectModelPageVersionsProject"}}]}}]}},...ProjectModelPageHeaderProjectFragmentDoc.definitions,...ProjectModelPageVersionsProjectFragmentDoc.definitions,...ProjectPageProjectHeaderFragmentDoc.definitions,...PendingFileUploadFragmentDoc.definitions,...ProjectModelPageVersionsPaginationFragmentDoc.definitions,...ProjectModelPageVersionsCardVersionFragmentDoc.definitions,...LimitedUserAvatarFragmentDoc.definitions,...ProjectModelPageDialogDeleteVersionFragmentDoc.definitions,...ProjectModelPageDialogMoveToVersionFragmentDoc.definitions,...ModelCardAutomationStatus_VersionFragmentDoc.definitions,...ModelCardAutomationStatus_AutomationsStatusFragmentDoc.definitions,...ProjectsModelPageEmbed_ProjectFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions]} as unknown as DocumentNode<ProjectModelPageQuery, ProjectModelPageQueryVariables>;
+export const ProjectModelVersionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectModelVersions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"modelId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"versionsCursor"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectModelPageVersionsPagination"}}]}}]}},...ProjectModelPageVersionsPaginationFragmentDoc.definitions,...ProjectModelPageVersionsCardVersionFragmentDoc.definitions,...LimitedUserAvatarFragmentDoc.definitions,...ProjectModelPageDialogDeleteVersionFragmentDoc.definitions,...ProjectModelPageDialogMoveToVersionFragmentDoc.definitions,...ModelCardAutomationStatus_VersionFragmentDoc.definitions,...ModelCardAutomationStatus_AutomationsStatusFragmentDoc.definitions,...ProjectsModelPageEmbed_ProjectFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions]} as unknown as DocumentNode<ProjectModelVersionsQuery, ProjectModelVersionsQueryVariables>;
+export const ProjectModelsPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectModelsPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectModelsPageHeader_Project"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectModelsPageResults_Project"}}]}}]}},...ProjectModelsPageHeader_ProjectFragmentDoc.definitions,...FormUsersSelectItemFragmentDoc.definitions,...ProjectModelsPageResults_ProjectFragmentDoc.definitions,...ProjectPageLatestItemsModelsFragmentDoc.definitions,...ProjectPageModelsStructureItem_ProjectFragmentDoc.definitions,...ProjectPageModelsActions_ProjectFragmentDoc.definitions,...ProjectsModelPageEmbed_ProjectFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions]} as unknown as DocumentNode<ProjectModelsPageQuery, ProjectModelsPageQueryVariables>;
+export const ProjectDiscussionsPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectDiscussionsPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDiscussionsPageHeader_Project"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDiscussionsPageResults_Project"}}]}}]}},...ProjectDiscussionsPageHeader_ProjectFragmentDoc.definitions,...ProjectDiscussionsPageResults_ProjectFragmentDoc.definitions]} as unknown as DocumentNode<ProjectDiscussionsPageQuery, ProjectDiscussionsPageQueryVariables>;
 export const ProjectWebhooksDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectWebhooks"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"webhooks"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"streamId"}},{"kind":"Field","name":{"kind":"Name","value":"triggers"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"history"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"5"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"statusInfo"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}}]}}]} as unknown as DocumentNode<ProjectWebhooksQuery, ProjectWebhooksQueryVariables>;
 export const BlobDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Blob"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"blobId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"streamId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stream"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"streamId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"blob"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"blobId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"fileName"}},{"kind":"Field","name":{"kind":"Name","value":"fileType"}},{"kind":"Field","name":{"kind":"Name","value":"fileSize"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}}]}}]}}]}}]} as unknown as DocumentNode<BlobQuery, BlobQueryVariables>;
 export const OnProjectUpdatedDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"OnProjectUpdated"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projectUpdated"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"project"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageProject"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDashboardItemNoModels"}}]}}]}}]}},...ProjectPageProjectFragmentDoc.definitions,...ProjectPageProjectHeaderFragmentDoc.definitions,...ProjectPageStatsBlockTeamFragmentDoc.definitions,...LimitedUserAvatarFragmentDoc.definitions,...ProjectPageTeamDialogFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions,...ProjectPageStatsBlockVersionsFragmentDoc.definitions,...ProjectPageStatsBlockModelsFragmentDoc.definitions,...ProjectPageStatsBlockCommentsFragmentDoc.definitions,...ProjectPageLatestItemsModelsFragmentDoc.definitions,...ProjectPageModelsStructureItem_ProjectFragmentDoc.definitions,...ProjectPageModelsActions_ProjectFragmentDoc.definitions,...ProjectsModelPageEmbed_ProjectFragmentDoc.definitions,...ProjectPageLatestItemsCommentsFragmentDoc.definitions,...ProjectDashboardItemNoModelsFragmentDoc.definitions,...ProjectPageModelsCardProjectFragmentDoc.definitions]} as unknown as DocumentNode<OnProjectUpdatedSubscription, OnProjectUpdatedSubscriptionVariables>;
diff --git a/packages/frontend-2/lib/common/helpers/route.ts b/packages/frontend-2/lib/common/helpers/route.ts
index 672c4c1bcc..2d0ea40419 100644
--- a/packages/frontend-2/lib/common/helpers/route.ts
+++ b/packages/frontend-2/lib/common/helpers/route.ts
@@ -11,7 +11,17 @@ export const forgottenPasswordRoute = '/authn/forgotten-password'
 export const onboardingRoute = '/onboarding'
 export const downloadManagerRoute = '/download-manager'
 export const serverManagementRoute = '/server-management'
-export const projectRoute = (id: string) => `/projects/${id}`
+export const projectRoute = (
+  id: string,
+  tab?: 'models' | 'discussions' | 'automations'
+) => {
+  let res = `/projects/${id}`
+  if (tab && tab !== 'models') {
+    res += `/${tab}`
+  }
+
+  return res
+}
 export const modelRoute = (
   projectId: string,
   resourceIdString: string,
diff --git a/packages/frontend-2/lib/projects/graphql/queries.ts b/packages/frontend-2/lib/projects/graphql/queries.ts
index 41ebbb31ba..6269566994 100644
--- a/packages/frontend-2/lib/projects/graphql/queries.ts
+++ b/packages/frontend-2/lib/projects/graphql/queries.ts
@@ -167,6 +167,7 @@ export const projectModelPageQuery = graphql(`
     $versionsCursor: String
   ) {
     project(id: $projectId) {
+      id
       ...ProjectModelPageHeaderProject
       ...ProjectModelPageVersionsProject
     }
@@ -180,6 +181,7 @@ export const projectModelVersionsQuery = graphql(`
     $versionsCursor: String
   ) {
     project(id: $projectId) {
+      id
       ...ProjectModelPageVersionsPagination
     }
   }
@@ -188,6 +190,7 @@ export const projectModelVersionsQuery = graphql(`
 export const projectModelsPageQuery = graphql(`
   query ProjectModelsPage($projectId: String!) {
     project(id: $projectId) {
+      id
       ...ProjectModelsPageHeader_Project
       ...ProjectModelsPageResults_Project
     }
@@ -197,6 +200,7 @@ export const projectModelsPageQuery = graphql(`
 export const projectDiscussionsPageQuery = graphql(`
   query ProjectDiscussionsPage($projectId: String!) {
     project(id: $projectId) {
+      id
       ...ProjectDiscussionsPageHeader_Project
       ...ProjectDiscussionsPageResults_Project
     }
diff --git a/packages/frontend-2/lib/viewer/composables/setup.ts b/packages/frontend-2/lib/viewer/composables/setup.ts
index 84010fe2e5..8dccff8529 100644
--- a/packages/frontend-2/lib/viewer/composables/setup.ts
+++ b/packages/frontend-2/lib/viewer/composables/setup.ts
@@ -998,10 +998,15 @@ export function useSetupViewer(params: UseSetupViewerParams): InjectableViewerSt
   const stateWithResources = setupResourceResponse(initialStateWithRequest)
   const state: InjectableViewerState = setupInterfaceState(stateWithResources)
 
+  // We don't want the state to ever be proxified (e.g. when passed through props),
+  // cause that will break composables (refs will be automatically unwrapped as if
+  // they're accessed in a template)
+  const rawState = markRaw(state)
+
   // Inject it into descendant components
-  provide(InjectableViewerStateKey, state)
+  provide(InjectableViewerStateKey, rawState)
 
-  return state
+  return rawState
 }
 
 /**
diff --git a/packages/frontend-2/pages/projects/[id]/discussions.vue b/packages/frontend-2/pages/projects/[id]/discussions.vue
deleted file mode 100644
index 93ec0dcbc0..0000000000
--- a/packages/frontend-2/pages/projects/[id]/discussions.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <div>
-    <div>
-      <Portal to="navigation">
-        <HeaderNavLink
-          v-if="project"
-          :to="projectRoute(project.id)"
-          :name="project.name"
-        ></HeaderNavLink>
-      </Portal>
-    </div>
-
-    <div v-if="project">
-      <ProjectPageDiscussionsHeader
-        v-model:grid-or-list="gridOrList"
-        v-model:include-archived="includeArchived"
-        :project="project"
-      />
-      <ProjectPageDiscussionsResults
-        :grid-or-list="gridOrList"
-        :project="project"
-        :include-archived="!!includeArchived"
-      />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { useQuery } from '@vue/apollo-composable'
-import type { Optional } from '~~/../shared/dist-esm'
-import { projectRoute } from '~~/lib/common/helpers/route'
-import {
-  useGeneralProjectPageUpdateTracking,
-  useProjectPageItemViewType
-} from '~~/lib/projects/composables/projectPages'
-import { projectDiscussionsPageQuery } from '~~/lib/projects/graphql/queries'
-
-definePageMeta({
-  middleware: ['require-valid-project']
-})
-
-const gridOrList = useProjectPageItemViewType('Discussions')
-const includeArchived = ref(undefined as Optional<true>)
-
-const route = useRoute()
-const projectId = computed(() => route.params.id as string)
-const { result } = useQuery(projectDiscussionsPageQuery, () => ({
-  projectId: projectId.value
-}))
-useGeneralProjectPageUpdateTracking({ projectId })
-
-const project = computed(() => result.value?.project)
-const title = computed(() =>
-  project.value?.name.length ? `Discussions - ${project.value.name}` : ''
-)
-
-useHead({
-  title
-})
-</script>
diff --git a/packages/frontend-2/pages/projects/[id]/index.vue b/packages/frontend-2/pages/projects/[id]/index.vue
index a42a7529e9..e79a33bc94 100644
--- a/packages/frontend-2/pages/projects/[id]/index.vue
+++ b/packages/frontend-2/pages/projects/[id]/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <template v-if="project">
+    <div v-if="project">
       <ProjectsInviteBanner
         :invite="invite"
         :show-stream-name="false"
@@ -16,23 +16,26 @@
           class="w-full md:w-72 shrink-0"
         />
       </div>
-    </template>
-    <!-- No v-if=project to ensure internal queries trigger ASAP -->
-    <LayoutPageTabs v-if="project" v-slot="{ activeItem }" :items="pageTabItems">
-      <ProjectPageModelsTab v-if="activeItem.id === 'models'" />
-      <ProjectPageDiscussionsTab v-if="activeItem.id === 'discussions'" />
-      <!-- <ProjectPageAutomationsTab v-if="activeItem.id === 'automations'" /> -->
-    </LayoutPageTabs>
+      <LayoutPageTabs v-model:active-item="activePageTab" :items="pageTabItems">
+        <NuxtPage />
+      </LayoutPageTabs>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
-import { useQuery } from '@vue/apollo-composable'
+import { useApolloClient, useQuery } from '@vue/apollo-composable'
 import type { Optional } from '@speckle/shared'
 import { graphql } from '~~/lib/common/generated/gql'
-import { projectPageQuery } from '~~/lib/projects/graphql/queries'
+import {
+  projectDiscussionsPageQuery,
+  projectModelsPageQuery,
+  projectPageQuery
+} from '~~/lib/projects/graphql/queries'
 import { useGeneralProjectPageUpdateTracking } from '~~/lib/projects/composables/projectPages'
 import { LayoutPageTabs, type LayoutPageTabItem } from '@speckle/ui-components'
 import { CubeIcon, ChatBubbleLeftRightIcon } from '@heroicons/vue/24/outline'
+import { projectRoute } from '~/lib/common/helpers/route'
+import { convertThrowIntoFetchResult } from '~/lib/common/helpers/graphql'
 
 graphql(`
   fragment ProjectPageProject on Project {
@@ -50,7 +53,17 @@ graphql(`
 `)
 
 definePageMeta({
-  middleware: ['require-valid-project']
+  middleware: [
+    'require-valid-project',
+    function (to) {
+      // Redirect from /projects/:id/models to /projects/:id
+      const projectId = to.params.id as string
+      if (/\/models\/?$/i.test(to.path)) {
+        return navigateTo(projectRoute(projectId))
+      }
+    }
+  ],
+  alias: '/projects/:id/models'
 })
 
 const route = useRoute()
@@ -118,4 +131,59 @@ const pageTabItems = computed((): LayoutPageTabItem[] => [
   //   tag: 'New'
   // }
 ])
+
+const activePageTab = computed({
+  get: () => {
+    const path = router.currentRoute.value.path
+    if (/\/discussions\/?$/i.test(path)) return pageTabItems.value[1]
+    if (/\/automations\/?$/i.test(path)) return pageTabItems.value[2]
+    return pageTabItems.value[0]
+  },
+  set: (val: LayoutPageTabItem) => {
+    switch (val.id) {
+      case 'models':
+        router.push({ path: projectRoute(projectId.value, 'models') })
+        break
+      case 'discussions':
+        router.push({ path: projectRoute(projectId.value, 'discussions') })
+        break
+      case 'automations':
+        router.push({ path: projectRoute(projectId.value, 'automations') })
+        break
+    }
+  }
+})
+
+if (process.server) {
+  /**
+   * There seems to be some sort of vue/nuxt bug where Apollo queries in tabs cause
+   * weird hydration mismatches. Honestly I've no idea wtf is happening, but if we preload
+   * those queries from the root page it seems to work. This is a hack, but it works.
+   *
+   * Hopefully we can figure this out at some point, cause this is quite nasty
+   */
+
+  const serverActiveTab = activePageTab.value
+  const client = useApolloClient().client
+
+  if (serverActiveTab.id === 'models') {
+    await client
+      .query({
+        query: projectModelsPageQuery,
+        variables: {
+          projectId: projectId.value
+        }
+      })
+      .catch(convertThrowIntoFetchResult)
+  } else if (serverActiveTab.id === 'discussions') {
+    await client
+      .query({
+        query: projectDiscussionsPageQuery,
+        variables: {
+          projectId: projectId.value
+        }
+      })
+      .catch(convertThrowIntoFetchResult)
+  }
+}
 </script>
diff --git a/packages/frontend-2/pages/projects/[id]/index/discussions.vue b/packages/frontend-2/pages/projects/[id]/index/discussions.vue
new file mode 100644
index 0000000000..5bf4a041d6
--- /dev/null
+++ b/packages/frontend-2/pages/projects/[id]/index/discussions.vue
@@ -0,0 +1,3 @@
+<template>
+  <ProjectPageDiscussionsTab />
+</template>
diff --git a/packages/frontend-2/pages/projects/[id]/index/index.vue b/packages/frontend-2/pages/projects/[id]/index/index.vue
new file mode 100644
index 0000000000..9a51a435cd
--- /dev/null
+++ b/packages/frontend-2/pages/projects/[id]/index/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <ProjectPageModelsTab />
+  </div>
+</template>
diff --git a/packages/frontend-2/pages/projects/[id]/models/index.vue b/packages/frontend-2/pages/projects/[id]/models/index.vue
deleted file mode 100644
index fe2036c6ce..0000000000
--- a/packages/frontend-2/pages/projects/[id]/models/index.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <div>
-    <div>
-      <Portal to="navigation">
-        <HeaderNavLink
-          v-if="project"
-          :to="projectRoute(project.id)"
-          :name="project.name"
-        ></HeaderNavLink>
-      </Portal>
-    </div>
-
-    <div v-if="project">
-      <ProjectPageModelsHeader
-        v-model:selected-apps="selectedApps"
-        v-model:selected-members="selectedMembers"
-        v-model:grid-or-list="gridOrList"
-        v-model:search="search"
-        :project="project"
-        :disabled="loading"
-        class="z-[1] relative"
-      />
-      <ProjectPageModelsResults
-        v-model:grid-or-list="gridOrList"
-        v-model:search="search"
-        v-model:loading="loading"
-        :source-apps="selectedApps"
-        :contributors="selectedMembers"
-        :project="project"
-        class="z-[0] relative"
-        @clear-search="clearSearch"
-      />
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { useQuery } from '@vue/apollo-composable'
-import { projectRoute } from '~~/lib/common/helpers/route'
-import type { SourceAppDefinition } from '@speckle/shared'
-import type { FormUsersSelectItemFragment } from '~~/lib/common/generated/gql/graphql'
-import { projectModelsPageQuery } from '~~/lib/projects/graphql/queries'
-import {
-  useGeneralProjectPageUpdateTracking,
-  useProjectPageItemViewType
-} from '~~/lib/projects/composables/projectPages'
-
-definePageMeta({
-  middleware: ['require-valid-project']
-})
-
-const route = useRoute()
-const projectId = computed(() => route.params.id as string)
-
-const selectedMembers = ref([] as FormUsersSelectItemFragment[])
-const selectedApps = ref([] as SourceAppDefinition[])
-const gridOrList = useProjectPageItemViewType('Models')
-const search = ref('')
-const loading = ref(false)
-
-const { result } = useQuery(projectModelsPageQuery, () => ({
-  projectId: projectId.value
-}))
-
-const project = computed(() => result.value?.project)
-useGeneralProjectPageUpdateTracking({ projectId })
-
-const clearSearch = () => {
-  search.value = ''
-  selectedMembers.value = []
-  selectedApps.value = []
-}
-
-const title = computed(() =>
-  project.value?.name.length ? `Models - ${project.value.name}` : ''
-)
-
-useHead({
-  title
-})
-</script>
diff --git a/packages/ui-components/src/components/form/select/Badges.vue b/packages/ui-components/src/components/form/select/Badges.vue
index b11cf4ab09..93f300ba5b 100644
--- a/packages/ui-components/src/components/form/select/Badges.vue
+++ b/packages/ui-components/src/components/form/select/Badges.vue
@@ -8,6 +8,8 @@
     :help="help"
     :rules="rules"
     :by="by"
+    :label-id="labelId"
+    :button-id="buttonId"
   >
     <template #something-selected="{ value }">
       <ul class="flex flex-wrap gap-1.5 text-xs">
@@ -58,6 +60,8 @@ const props = defineProps<{
   multiple?: boolean
   rules?: Array<any>
   by: string
+  labelId?: string
+  buttonId?: string
 }>()
 
 const { selectedValue, isArrayValue } = useFormSelectChildInternals<SingleItem>({
diff --git a/packages/ui-components/src/components/form/select/Base.vue b/packages/ui-components/src/components/form/select/Base.vue
index adacb903e8..3b2e20e549 100644
--- a/packages/ui-components/src/components/form/select/Base.vue
+++ b/packages/ui-components/src/components/form/select/Base.vue
@@ -10,6 +10,7 @@
       as="div"
     >
       <ListboxLabel
+        :id="labelId"
         class="block label text-foreground-2 mb-2"
         :class="{ 'sr-only': !showLabel }"
       >
@@ -17,7 +18,12 @@
       </ListboxLabel>
       <div :class="buttonsWrapperClasses">
         <!-- <div class="relative flex"> -->
-        <ListboxButton ref="listboxButton" v-slot="{ open }" :class="buttonClasses">
+        <ListboxButton
+          :id="buttonId"
+          ref="listboxButton"
+          v-slot="{ open }"
+          :class="buttonClasses"
+        >
           <div class="flex items-center justify-between w-full">
             <div class="block truncate grow text-left text-xs sm:text-sm">
               <template
@@ -387,6 +393,14 @@ const props = defineProps({
   mountMenuOnBody: {
     type: Boolean,
     default: false
+  },
+  labelId: {
+    type: String,
+    default: undefined
+  },
+  buttonId: {
+    type: String,
+    default: undefined
   }
 })
 
diff --git a/packages/ui-components/src/components/form/select/SourceApps.vue b/packages/ui-components/src/components/form/select/SourceApps.vue
index 0b1e96920e..210ce25efe 100644
--- a/packages/ui-components/src/components/form/select/SourceApps.vue
+++ b/packages/ui-components/src/components/form/select/SourceApps.vue
@@ -11,6 +11,8 @@
     :filter-predicate="searchFilterPredicate"
     :clearable="clearable"
     :help="help"
+    :label-id="labelId"
+    :button-id="buttonId"
     by="name"
   >
     <template #nothing-selected>
@@ -131,6 +133,12 @@ const props = defineProps({
   },
   help: {
     type: String
+  },
+  labelId: {
+    type: String
+  },
+  buttonId: {
+    type: String
   }
 })
 
diff --git a/packages/ui-components/src/components/layout/Menu.vue b/packages/ui-components/src/components/layout/Menu.vue
index 470728d276..2406ec4446 100644
--- a/packages/ui-components/src/components/layout/Menu.vue
+++ b/packages/ui-components/src/components/layout/Menu.vue
@@ -1,7 +1,7 @@
 <template>
   <Menu v-slot="{ open: isMenuOpen }" as="div" class="relative inline-block">
     <div>
-      <MenuButton ref="menuButton" class="hidden" @click.stop.prevent />
+      <MenuButton :id="menuId" ref="menuButton" class="hidden" @click.stop.prevent />
       <!-- conditional pointer-events-none is necessary to avoid double events when clicking on the button when the menu is already open -->
       <div :class="isMenuOpen ? 'pointer-events-none' : ''">
         <slot :toggle="toggle" :open="processOpen(isMenuOpen)" />
@@ -69,6 +69,7 @@ const props = defineProps<{
    * 2D array so that items can be grouped with dividers between them
    */
   items: LayoutMenuItem[][]
+  menuId?: string
 }>()
 
 const menuItems = ref(null as Nullable<{ el: HTMLDivElement }>)
diff --git a/packages/ui-components/src/components/layout/PageTabs.stories.ts b/packages/ui-components/src/components/layout/PageTabs.stories.ts
index 465039a5ee..4d91bbb646 100644
--- a/packages/ui-components/src/components/layout/PageTabs.stories.ts
+++ b/packages/ui-components/src/components/layout/PageTabs.stories.ts
@@ -7,6 +7,14 @@ import {
   BoltIcon,
   ChatBubbleLeftRightIcon
 } from '@heroicons/vue/24/outline'
+import { useStorybookVmodel } from '~~/src/composables/testing'
+
+const items: LayoutPageTabItem[] = [
+  { title: 'Models', id: 'models', icon: CubeIcon, count: 300 },
+  { title: 'Discussions', id: 'discussions', icon: ChatBubbleLeftRightIcon },
+  { title: 'Automations', id: 'automations', icon: BoltIcon, tag: 'New' },
+  { title: 'Settings', id: 'settings', icon: Cog6ToothIcon }
+]
 
 export default {
   component: LayoutPageTabs,
@@ -16,33 +24,47 @@ export default {
         component: 'Page tabs component'
       }
     }
+  },
+  argTypes: {
+    items: {
+      description: 'Array of items to display in the tab'
+    },
+    title: {
+      description: 'Title of the tab'
+    },
+    vertical: {
+      description: 'Whether to display the tabs vertically'
+    },
+    activeItem: {
+      description: 'The active item model. Not required.'
+    },
+    'update:activeItem': {
+      description: 'Event emitted when the active item changes',
+      type: 'function',
+      action: 'v-model:activeItem'
+    }
   }
 } as Meta
 
-const items: LayoutPageTabItem[] = [
-  { title: 'Models', id: 'models', icon: CubeIcon, count: 300 },
-  { title: 'Discussions', id: 'discussions', icon: ChatBubbleLeftRightIcon },
-  { title: 'Automations', id: 'automations', icon: BoltIcon, tag: 'New' },
-  { title: 'Settings', id: 'settings', icon: Cog6ToothIcon }
-]
-
 export const Default: StoryObj = {
-  render: (args) => ({
+  render: (args, ctx) => ({
     components: { LayoutPageTabs },
     setup() {
-      return { args }
+      const { model } = useStorybookVmodel({ args, prop: 'activeItem', ctx })
+      return { args, model }
     },
     template: `
     <div>
-      <LayoutPageTabs v-slot="{ activeItem }" v-bind="args">
-        <div>Title: {{ activeItem.title }}</div>
-        <div>ID: {{ activeItem.id }}</div>
+      <LayoutPageTabs v-slot="{ activeItem }" v-bind="args" v-model:activeItem="model">
+        <div>Title: {{ activeItem?.title }}</div>
+        <div>ID: {{ activeItem?.id }}</div>
       </LayoutPageTabs>
     </div>`
   }),
   args: {
     items,
-    title: 'Settings'
+    title: 'Settings',
+    activeItem: items[0]
   }
 }
 
@@ -53,3 +75,34 @@ export const Vertical: StoryObj = {
     vertical: true
   }
 }
+
+export const WithActiveItemModel: StoryObj = {
+  ...Default,
+  args: {
+    ...Default.args,
+    activeItem: items[2]
+  }
+}
+
+export const WithActiveItemModelBlocked: StoryObj = {
+  ...WithActiveItemModel,
+  render: (args, ctx) => ({
+    components: { LayoutPageTabs },
+    setup() {
+      const { model } = useStorybookVmodel({
+        args,
+        prop: 'activeItem',
+        ctx,
+        blockChanges: true
+      })
+      return { args, model }
+    },
+    template: `
+    <div>
+      <LayoutPageTabs v-slot="{ activeItem }" v-bind="args" v-model:activeItem="model">
+        <div>Title: {{ activeItem?.title }}</div>
+        <div>ID: {{ activeItem?.id }}</div>
+      </LayoutPageTabs>
+    </div>`
+  })
+}
diff --git a/packages/ui-components/src/components/layout/PageTabs.vue b/packages/ui-components/src/components/layout/PageTabs.vue
index 91e676512e..f325c17af2 100644
--- a/packages/ui-components/src/components/layout/PageTabs.vue
+++ b/packages/ui-components/src/components/layout/PageTabs.vue
@@ -41,12 +41,12 @@
           :data-tab-id="item.id"
           class="tab-button relative z-10 flex items-center gap-1.5 pb-2 border-b-[2px] border-transparent text-base max-w-max px-2"
           :class="[
-            activeItem.id === item.id
+            activeItem?.id === item.id
               ? 'text-primary hover:text-primary'
               : 'text-foreground',
             vertical ? 'hover:border-outline' : 'hover:border-outline-2'
           ]"
-          @click="onTabClick(item)"
+          @click="setActiveItem(item)"
         >
           <Component
             :is="item.icon"
@@ -58,7 +58,7 @@
             v-if="item.count"
             class="rounded-full px-2 text-[11px] transition-all min-w-6"
             :class="
-              activeItem.id === item.id
+              activeItem?.id === item.id
                 ? 'text-primary bg-blue-100'
                 : 'text-foreground-2 bg-gray-200 dark:bg-foundation'
             "
@@ -80,10 +80,10 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed, ref, watch, type CSSProperties } from 'vue'
+import { computed, ref, type CSSProperties, onMounted, watch } from 'vue'
 import type { LayoutPageTabItem } from '~~/src/helpers/layout/components'
+import type { Nullable } from '@speckle/shared'
 import { isClient } from '@vueuse/core'
-import type { MaybeNullOrUndefined, Nullable } from '@speckle/shared'
 
 const props = defineProps<{
   items: LayoutPageTabItem[]
@@ -91,16 +91,11 @@ const props = defineProps<{
   title?: string
 }>()
 
+const activeItem = defineModel<LayoutPageTabItem>('activeItem', { required: true })
 const buttonContainer = ref(null as Nullable<HTMLDivElement>)
-const activeItemId = ref<string | null>(null)
-
-const activeItem = computed(() => {
-  const item = props.items.find((i) => i.id === activeItemId.value)
-  return item || props.items[0]
-})
 
 const activeItemRef = computed(() => {
-  const id = activeItemId.value
+  const id = activeItem.value?.id
   if (!id) return null
 
   const parent = buttonContainer.value
@@ -119,21 +114,25 @@ const borderStyle = computed(() => {
   return style
 })
 
-const onTabClick = (item: LayoutPageTabItem) => {
-  activeItemId.value = item.id
+const setActiveItem = (item: LayoutPageTabItem) => {
+  activeItem.value = item
 }
 
-const setActiveItem = (item: MaybeNullOrUndefined<LayoutPageTabItem>) => {
-  if (!isClient || !item?.id) return
+if (isClient) {
+  // Doing onMounted & watch separately to avoid hydration mismatch
+  onMounted(() => {
+    if (props.items.length && !activeItem.value) {
+      setActiveItem(props.items[0])
+    }
+  })
 
-  activeItemId.value = item.id
+  watch(
+    () => [props.items, activeItem.value] as const,
+    ([newItems, activeItem]) => {
+      if (newItems.length && !activeItem) {
+        setActiveItem(newItems[0])
+      }
+    }
+  )
 }
-
-watch(
-  () => props.items,
-  (newItems) => {
-    setActiveItem(newItems[0])
-  },
-  { immediate: true }
-)
 </script>
diff --git a/packages/ui-components/src/components/user/AvatarEditable.vue b/packages/ui-components/src/components/user/AvatarEditable.vue
index e5ccad15c0..d5253acfab 100644
--- a/packages/ui-components/src/components/user/AvatarEditable.vue
+++ b/packages/ui-components/src/components/user/AvatarEditable.vue
@@ -69,6 +69,9 @@ const { value, errorMessage } = useField<ModelType>(props.name, props.rules, {
   initialValue: props.modelValue || undefined
 })
 
+// 'local' was recently removed, but we still want to keep backwards compatibility w/ older vue versions, so have to use this workaround
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
 const editMode = defineModel<boolean>('editMode', { local: true })
 
 const modelAsUser = computed(
diff --git a/packages/ui-components/src/composables/testing.ts b/packages/ui-components/src/composables/testing.ts
new file mode 100644
index 0000000000..1e2d9fa01e
--- /dev/null
+++ b/packages/ui-components/src/composables/testing.ts
@@ -0,0 +1,35 @@
+import { action } from '@storybook/addon-actions'
+import type { StoryContext } from '@storybook/vue3'
+import { computed } from 'vue'
+
+/**
+ * Composable for use in storybook to create a v-model binding that properly reports changes to the Actions tab
+ * and also updates the model in the Controls tab
+ */
+export const useStorybookVmodel = (params: {
+  args: Record<string, unknown>
+  prop: string
+  ctx: StoryContext
+  /**
+   * Prevents the model from being updated
+   */
+  blockChanges?: boolean
+}) => {
+  const { args, prop, ctx, blockChanges } = params
+  const storybookAction = action(`update:${prop as string}`)
+
+  const modelValue = computed({
+    get: () => params.args[prop],
+    set: (newVal) => {
+      if (!blockChanges) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        ctx.updateArgs({ ...args, [prop]: newVal })
+      }
+      storybookAction(JSON.parse(JSON.stringify(newVal))) // parse/stringify to clean up fn refs
+    }
+  })
+
+  return {
+    model: modelValue
+  }
+}
diff --git a/packages/ui-components/src/helpers/layout/components.ts b/packages/ui-components/src/helpers/layout/components.ts
index 8c681833ac..f02f3ae265 100644
--- a/packages/ui-components/src/helpers/layout/components.ts
+++ b/packages/ui-components/src/helpers/layout/components.ts
@@ -13,7 +13,7 @@ export type LayoutTabItem<I extends string = string> = {
 export type LayoutPageTabItem<I extends string = string> = {
   title: string
   id: I
-  icon: ConcreteComponent
+  icon?: ConcreteComponent
   count?: number
   tag?: string
 }
diff --git a/yarn.lock b/yarn.lock
index babada01ce..832dbc193f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -19103,16 +19103,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-dom@npm:3.3.4, @vue/compiler-dom@npm:^3.3.0":
-  version: 3.3.4
-  resolution: "@vue/compiler-dom@npm:3.3.4"
-  dependencies:
-    "@vue/compiler-core": 3.3.4
-    "@vue/shared": 3.3.4
-  checksum: 1c2ac0c89de8eef7be1c568d57504e6245adaaec40c2c4d9717bc231ca10bf682d918a3b358d24c786eeaf8e0d7eb8a65f57d9044775a304783fde1d069a1896
-  languageName: node
-  linkType: hard
-
 "@vue/compiler-dom@npm:3.3.8, @vue/compiler-dom@npm:^3.3.4, @vue/compiler-dom@npm:^3.3.8":
   version: 3.3.8
   resolution: "@vue/compiler-dom@npm:3.3.8"
@@ -19133,50 +19123,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-sfc@npm:2.7.5":
-  version: 2.7.5
-  resolution: "@vue/compiler-sfc@npm:2.7.5"
-  dependencies:
-    "@babel/parser": ^7.18.4
-    postcss: ^8.4.14
-    source-map: ^0.6.1
-  checksum: 81608274dd12b5794f8e5d8a083837feb0da0b4dec490e5c7ab44475b91ae21415ee686b9b6691d81eab7d28baad140fabede6c2aea46d11505ae562207c71ed
-  languageName: node
-  linkType: hard
-
-"@vue/compiler-sfc@npm:3.3.4":
+"@vue/compiler-dom@npm:^3.3.0":
   version: 3.3.4
-  resolution: "@vue/compiler-sfc@npm:3.3.4"
+  resolution: "@vue/compiler-dom@npm:3.3.4"
   dependencies:
-    "@babel/parser": ^7.20.15
     "@vue/compiler-core": 3.3.4
-    "@vue/compiler-dom": 3.3.4
-    "@vue/compiler-ssr": 3.3.4
-    "@vue/reactivity-transform": 3.3.4
     "@vue/shared": 3.3.4
-    estree-walker: ^2.0.2
-    magic-string: ^0.30.0
-    postcss: ^8.1.10
-    source-map-js: ^1.0.2
-  checksum: 0a0adfdd3e812f528e25e4b3bbf14b2296b719a8aac609eca42035295527cc253b918a552dc15218e917efef26b7ca94054dc8784a1a18c06c3d4bb4d18ab8b9
+  checksum: 1c2ac0c89de8eef7be1c568d57504e6245adaaec40c2c4d9717bc231ca10bf682d918a3b358d24c786eeaf8e0d7eb8a65f57d9044775a304783fde1d069a1896
   languageName: node
   linkType: hard
 
-"@vue/compiler-sfc@npm:3.3.8, @vue/compiler-sfc@npm:^3.3.8":
-  version: 3.3.8
-  resolution: "@vue/compiler-sfc@npm:3.3.8"
+"@vue/compiler-sfc@npm:2.7.5":
+  version: 2.7.5
+  resolution: "@vue/compiler-sfc@npm:2.7.5"
   dependencies:
-    "@babel/parser": ^7.23.0
-    "@vue/compiler-core": 3.3.8
-    "@vue/compiler-dom": 3.3.8
-    "@vue/compiler-ssr": 3.3.8
-    "@vue/reactivity-transform": 3.3.8
-    "@vue/shared": 3.3.8
-    estree-walker: ^2.0.2
-    magic-string: ^0.30.5
-    postcss: ^8.4.31
-    source-map-js: ^1.0.2
-  checksum: 7f931f3fe3fd117974b20f497267e9c29fea83d5703fe65aad5f0ea63c9563581b186acf02cdd1d85526395f0067dde9d05c5e522d9cffba2168b16c4a9414d9
+    "@babel/parser": ^7.18.4
+    postcss: ^8.4.14
+    source-map: ^0.6.1
+  checksum: 81608274dd12b5794f8e5d8a083837feb0da0b4dec490e5c7ab44475b91ae21415ee686b9b6691d81eab7d28baad140fabede6c2aea46d11505ae562207c71ed
   languageName: node
   linkType: hard
 
@@ -19251,6 +19215,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/compiler-sfc@npm:^3.3.8":
+  version: 3.3.8
+  resolution: "@vue/compiler-sfc@npm:3.3.8"
+  dependencies:
+    "@babel/parser": ^7.23.0
+    "@vue/compiler-core": 3.3.8
+    "@vue/compiler-dom": 3.3.8
+    "@vue/compiler-ssr": 3.3.8
+    "@vue/reactivity-transform": 3.3.8
+    "@vue/shared": 3.3.8
+    estree-walker: ^2.0.2
+    magic-string: ^0.30.5
+    postcss: ^8.4.31
+    source-map-js: ^1.0.2
+  checksum: 7f931f3fe3fd117974b20f497267e9c29fea83d5703fe65aad5f0ea63c9563581b186acf02cdd1d85526395f0067dde9d05c5e522d9cffba2168b16c4a9414d9
+  languageName: node
+  linkType: hard
+
 "@vue/compiler-ssr@npm:3.2.41":
   version: 3.2.41
   resolution: "@vue/compiler-ssr@npm:3.2.41"
@@ -19281,16 +19263,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-ssr@npm:3.3.4":
-  version: 3.3.4
-  resolution: "@vue/compiler-ssr@npm:3.3.4"
-  dependencies:
-    "@vue/compiler-dom": 3.3.4
-    "@vue/shared": 3.3.4
-  checksum: 5d1875d55ea864080dd90e5d81a29f93308e312faf00163db5b391b38c2fe799fd3eb58955823dc632f2f8bdd271a4534cc0020646b7f82717be1a8d30dc16e7
-  languageName: node
-  linkType: hard
-
 "@vue/compiler-ssr@npm:3.3.8":
   version: 3.3.8
   resolution: "@vue/compiler-ssr@npm:3.3.8"
@@ -19451,19 +19423,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/reactivity-transform@npm:3.3.4":
-  version: 3.3.4
-  resolution: "@vue/reactivity-transform@npm:3.3.4"
-  dependencies:
-    "@babel/parser": ^7.20.15
-    "@vue/compiler-core": 3.3.4
-    "@vue/shared": 3.3.4
-    estree-walker: ^2.0.2
-    magic-string: ^0.30.0
-  checksum: b425e78b2084ac7037887fbe012dcad5e5963ac9714ae15a04fda1c6766ec8c53ef231de1cfdc4d3cf46bd5d84bfec8ebdccf48da4ff5ee2f4b5084e54f0a1b1
-  languageName: node
-  linkType: hard
-
 "@vue/reactivity-transform@npm:3.3.8":
   version: 3.3.8
   resolution: "@vue/reactivity-transform@npm:3.3.8"
@@ -19477,24 +19436,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/reactivity@npm:3.3.4, @vue/reactivity@npm:^3.3.0":
-  version: 3.3.4
-  resolution: "@vue/reactivity@npm:3.3.4"
-  dependencies:
-    "@vue/shared": 3.3.4
-  checksum: 81c3d0c587d23656a57a7a31afb51357274f6512b51baffc67cda183b2361a7e65e646029c26a8bc28587f26b65bba808dcd93cdd3bacab48d2b99d11ad0ec97
-  languageName: node
-  linkType: hard
-
-"@vue/reactivity@npm:3.3.8":
-  version: 3.3.8
-  resolution: "@vue/reactivity@npm:3.3.8"
-  dependencies:
-    "@vue/shared": 3.3.8
-  checksum: 6c6e83c2c9cd29e230d7d45f8c60f9f344129a8904127c0e403f29c1727fb67ed903379c56f9e9fc4166f5e1ba29202604ac77f011d5e3fe7c8f32d6efe7f12a
-  languageName: node
-  linkType: hard
-
 "@vue/reactivity@npm:3.4.21":
   version: 3.4.21
   resolution: "@vue/reactivity@npm:3.4.21"
@@ -19513,23 +19454,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/runtime-core@npm:3.3.4":
+"@vue/reactivity@npm:^3.3.0":
   version: 3.3.4
-  resolution: "@vue/runtime-core@npm:3.3.4"
+  resolution: "@vue/reactivity@npm:3.3.4"
   dependencies:
-    "@vue/reactivity": 3.3.4
     "@vue/shared": 3.3.4
-  checksum: d402da51269658cba5d857d65fbe322121160bcb1a6fcf03601d5183705e92505c6e90418f491a331ca3e27628f457a6ca7158b9add25f5b0cf5cf53664b8011
-  languageName: node
-  linkType: hard
-
-"@vue/runtime-core@npm:3.3.8":
-  version: 3.3.8
-  resolution: "@vue/runtime-core@npm:3.3.8"
-  dependencies:
-    "@vue/reactivity": 3.3.8
-    "@vue/shared": 3.3.8
-  checksum: 14b6a5293a25d80c681829b512be5b749fd66e9de4a5de65c9f7d6c82283d4ecb408e84bc485e214627cdb80d40ac8e9970a885592cec2d50acea29ec2ac6f18
+  checksum: 81c3d0c587d23656a57a7a31afb51357274f6512b51baffc67cda183b2361a7e65e646029c26a8bc28587f26b65bba808dcd93cdd3bacab48d2b99d11ad0ec97
   languageName: node
   linkType: hard
 
@@ -19543,28 +19473,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/runtime-dom@npm:3.3.4":
-  version: 3.3.4
-  resolution: "@vue/runtime-dom@npm:3.3.4"
-  dependencies:
-    "@vue/runtime-core": 3.3.4
-    "@vue/shared": 3.3.4
-    csstype: ^3.1.1
-  checksum: dac9ada7f6128bcccc031fe5c25d00db94ffb7c011fcb70bada22fa4d889ff842eeb139ab9304bcc52cb5ae9030911a52cb3510b691bb190bbe5fab680b4411a
-  languageName: node
-  linkType: hard
-
-"@vue/runtime-dom@npm:3.3.8":
-  version: 3.3.8
-  resolution: "@vue/runtime-dom@npm:3.3.8"
-  dependencies:
-    "@vue/runtime-core": 3.3.8
-    "@vue/shared": 3.3.8
-    csstype: ^3.1.2
-  checksum: fec87df42b536e52da4ff44a0fc715314db0729d22893ba0d5420368dd0b2b8e4f32b51c2dcf0f1420c4b620a235e86a4b7c70d6a4d68ba28839f91bd18047e7
-  languageName: node
-  linkType: hard
-
 "@vue/runtime-dom@npm:3.4.21":
   version: 3.4.21
   resolution: "@vue/runtime-dom@npm:3.4.21"
@@ -19576,30 +19484,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/server-renderer@npm:3.3.4":
-  version: 3.3.4
-  resolution: "@vue/server-renderer@npm:3.3.4"
-  dependencies:
-    "@vue/compiler-ssr": 3.3.4
-    "@vue/shared": 3.3.4
-  peerDependencies:
-    vue: 3.3.4
-  checksum: e8598ed1a44df70edaea0ad6786aea6443b9b3d9266249eec5690401859d72d45a1e29ba3eef20e37a95f020abd5e763088b79070ee848af436a4390a253a37a
-  languageName: node
-  linkType: hard
-
-"@vue/server-renderer@npm:3.3.8":
-  version: 3.3.8
-  resolution: "@vue/server-renderer@npm:3.3.8"
-  dependencies:
-    "@vue/compiler-ssr": 3.3.8
-    "@vue/shared": 3.3.8
-  peerDependencies:
-    vue: 3.3.8
-  checksum: b0577acc10e3b108b4f631af6b9d349747ac49bcce2e3bac7b237bdeaa295effe8e8ac3547fa5d0dc51e8d419d7553a3cb50c07b21ea9df8c422ee0acd9fbcf9
-  languageName: node
-  linkType: hard
-
 "@vue/server-renderer@npm:3.4.21":
   version: 3.4.21
   resolution: "@vue/server-renderer@npm:3.4.21"
@@ -24576,13 +24460,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csstype@npm:^3.1.1, csstype@npm:^3.1.2":
-  version: 3.1.2
-  resolution: "csstype@npm:3.1.2"
-  checksum: e1a52e6c25c1314d6beef5168da704ab29c5186b877c07d822bd0806717d9a265e8493a2e35ca7e68d0f5d472d43fac1cdce70fd79fd0853dff81f3028d857b5
-  languageName: node
-  linkType: hard
-
 "csstype@npm:^3.1.3":
   version: 3.1.3
   resolution: "csstype@npm:3.1.3"
@@ -47896,14 +47773,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue@npm:^2.6.10":
-  version: 2.6.14
-  resolution: "vue@npm:2.6.14"
-  checksum: 23524a1bdca094d62cb3491a46317eed75184b5d61d28fa846ea5d2b241c1cc7084fc67ee259d47a50a6d0bbc33ecaceb7bb52bff81312fe7da07263f3419942
-  languageName: node
-  linkType: hard
-
-"vue@npm:^2.7.5":
+"vue@npm:^2.6.10, vue@npm:^2.7.5":
   version: 2.7.5
   resolution: "vue@npm:2.7.5"
   dependencies:
@@ -47913,38 +47783,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue@npm:^3.3.4":
-  version: 3.3.4
-  resolution: "vue@npm:3.3.4"
-  dependencies:
-    "@vue/compiler-dom": 3.3.4
-    "@vue/compiler-sfc": 3.3.4
-    "@vue/runtime-dom": 3.3.4
-    "@vue/server-renderer": 3.3.4
-    "@vue/shared": 3.3.4
-  checksum: 58b6c62a66a375ce5df460fcb7ba41b37c8637c635faf06ef472ae4197f412cf9ad83586cd8e3f66c486404fbe8550e694f90ff724a571d1ba78830791099c59
-  languageName: node
-  linkType: hard
-
-"vue@npm:^3.3.8":
-  version: 3.3.8
-  resolution: "vue@npm:3.3.8"
-  dependencies:
-    "@vue/compiler-dom": 3.3.8
-    "@vue/compiler-sfc": 3.3.8
-    "@vue/runtime-dom": 3.3.8
-    "@vue/server-renderer": 3.3.8
-    "@vue/shared": 3.3.8
-  peerDependencies:
-    typescript: "*"
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 560c18aa37f3f2351de8245f7844611409e7b7cbaabaae0993bdacd6090bb5ca81d89366e324babfdc7063f2312de5b62b56fe8b4dadc586baef8e0968eb6e14
-  languageName: node
-  linkType: hard
-
-"vue@npm:^3.4.21":
+"vue@npm:^3.3.4, vue@npm:^3.3.8, vue@npm:^3.4.21":
   version: 3.4.21
   resolution: "vue@npm:3.4.21"
   dependencies:

From 04fd9409d38f84b916e8339646730b68da66a0cf Mon Sep 17 00:00:00 2001
From: Kristaps Fabians Geikins <fabis94@live.com>
Date: Thu, 21 Mar 2024 13:46:02 +0200
Subject: [PATCH 04/22] feat(fe2): allow disabling objectloader cache

---
 .../frontend-2/lib/viewer/composables/setup/postSetup.ts    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/frontend-2/lib/viewer/composables/setup/postSetup.ts b/packages/frontend-2/lib/viewer/composables/setup/postSetup.ts
index 53be5dd489..d8e1866085 100644
--- a/packages/frontend-2/lib/viewer/composables/setup/postSetup.ts
+++ b/packages/frontend-2/lib/viewer/composables/setup/postSetup.ts
@@ -43,7 +43,7 @@ import { arraysEqual, isNonNullable } from '~~/lib/common/helpers/utils'
 import { getTargetObjectIds } from '~~/lib/object-sidebar/helpers'
 import { Vector3 } from 'three'
 import { areVectorsLooselyEqual } from '~~/lib/viewer/helpers/three'
-import type { Nullable } from '@speckle/shared'
+import { SafeLocalStorage, type Nullable } from '@speckle/shared'
 import { useCameraUtilities } from '~~/lib/viewer/composables/ui'
 import { onKeyStroke, watchTriggerable } from '@vueuse/core'
 import { setupDebugMode } from '~~/lib/viewer/composables/setup/dev'
@@ -74,6 +74,8 @@ function useViewerIsBusyEventHandler() {
 function useViewerObjectAutoLoading() {
   if (process.server) return
 
+  const disableViewerCache =
+    SafeLocalStorage.get('FE2_FORCE_DISABLE_VIEWER_CACHE') === 'true'
   const authToken = useAuthCookie()
   const getObjectUrl = useGetObjectUrl()
   const {
@@ -100,7 +102,7 @@ function useViewerObjectAutoLoading() {
       viewer.loadObjectAsync(
         objectUrl,
         authToken.value || undefined,
-        undefined,
+        disableViewerCache ? false : undefined, // TODO: Undo
         options?.zoomToObject
       )
     }

From a489a7bb9aa316edbee212dad33e4cb0e00bb957 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle
 <139135120+andrewwallacespeckle@users.noreply.github.com>
Date: Thu, 21 Mar 2024 13:25:14 +0000
Subject: [PATCH 05/22] Replace YouTube video with Vimeo  (#2152)

* Update Whats New Dialog

* Loop Vimeo Video

* Update FE1 Video to vimeo

* Fix fe1 warning
---
 .../components/projects/NewSpeckle/Dialog.vue | 29 +++++++++++++++----
 .../frontend/src/main/dialogs/NewSpeckle.vue  | 19 ++++++------
 2 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/packages/frontend-2/components/projects/NewSpeckle/Dialog.vue b/packages/frontend-2/components/projects/NewSpeckle/Dialog.vue
index 2102808ab5..36a1b400e7 100644
--- a/packages/frontend-2/components/projects/NewSpeckle/Dialog.vue
+++ b/packages/frontend-2/components/projects/NewSpeckle/Dialog.vue
@@ -4,14 +4,33 @@
       What's New in Speckle?
     </h2>
     <p class="text-foreground-2 text-center mb-6">A new way to collaborate in AEC.</p>
-    <div class="aspect-video w-full">
+    <div class="relative bg-white">
+      <div class="absolute inset-0 flex items-center justify-center" role="status">
+        <svg
+          aria-hidden="true"
+          class="w-6 h-6 text-outline-2 animate-spin fill-primary"
+          viewBox="0 0 100 101"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+            fill="currentColor"
+          />
+          <path
+            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+            fill="currentFill"
+          />
+        </svg>
+        <span class="sr-only">Loading...</span>
+      </div>
       <iframe
-        class="w-full h-full"
-        src="https://www.youtube.com/embed/QI5pVV1GCNs?si=op1o9Ud4fOKsQlWe"
-        title="YouTube video player"
+        title="What's new in Speckle?"
+        src="https://player.vimeo.com/video/925455838?h=052c422cae&autoplay=1&title=0&loop=1&byline=0&portrait=0&controls=0&muted=1"
         frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allow="autoplay; fullscreen;"
         allowfullscreen
+        class="aspect-video w-full relative z-10"
       ></iframe>
     </div>
   </LayoutDialog>
diff --git a/packages/frontend/src/main/dialogs/NewSpeckle.vue b/packages/frontend/src/main/dialogs/NewSpeckle.vue
index 012c4cd986..07d762f9b2 100644
--- a/packages/frontend/src/main/dialogs/NewSpeckle.vue
+++ b/packages/frontend/src/main/dialogs/NewSpeckle.vue
@@ -11,16 +11,17 @@
       </div>
       <v-row no-gutters align="center" justify="space-between" class="pa-6">
         <v-col cols="12" md="7">
-          <iframe
-            style="width: 100%; height: 100%; min-height: 250px"
-            src="https://www.youtube.com/embed/QI5pVV1GCNs?si=op1o9Ud4fOKsQlWe"
-            title="YouTube video player"
-            frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-            allowfullscreen
-          ></iframe>
+          <div style="padding: 56.25% 0 0 0; position: relative">
+            <iframe
+              src="https://player.vimeo.com/video/925455838?h=052c422cae&autoplay=1&title=0&loop=1&byline=0&portrait=0&controls=0&muted=1"
+              style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
+              frameborder="0"
+              allow="autoplay"
+              allowfullscreen
+            ></iframe>
+          </div>
         </v-col>
-        <v-col cols="12" md="5" class="pt-4 pt-md-0 pb-md-2 pl-8">
+        <v-col cols="12" md="5" class="pt-8 pt-md-0 pb-md-2 pl-md-8">
           <h2>What’s New?</h2>
           <div class="d-flex align-center py-2">
             <svg

From 663eaac5a28e7dcdcb63266eca95e690d23e195b Mon Sep 17 00:00:00 2001
From: Kristaps Fabians Geikins <fabians@speckle.systems>
Date: Fri, 22 Mar 2024 10:27:34 +0100
Subject: [PATCH 06/22] fix(server): commit import not finishing correctly
 (#2153)

* fix(server): commit import not finishing correctly

* awaiting last batch added

* minor fix
---
 packages/frontend-2/lib/viewer/composables/setup/postSetup.ts | 2 +-
 packages/server/modules/cross-server-sync/services/commit.ts  | 3 +++
 packages/shared/src/core/helpers/utility.ts                   | 3 ++-
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/frontend-2/lib/viewer/composables/setup/postSetup.ts b/packages/frontend-2/lib/viewer/composables/setup/postSetup.ts
index d8e1866085..714bdf9846 100644
--- a/packages/frontend-2/lib/viewer/composables/setup/postSetup.ts
+++ b/packages/frontend-2/lib/viewer/composables/setup/postSetup.ts
@@ -102,7 +102,7 @@ function useViewerObjectAutoLoading() {
       viewer.loadObjectAsync(
         objectUrl,
         authToken.value || undefined,
-        disableViewerCache ? false : undefined, // TODO: Undo
+        disableViewerCache ? false : undefined,
         options?.zoomToObject
       )
     }
diff --git a/packages/server/modules/cross-server-sync/services/commit.ts b/packages/server/modules/cross-server-sync/services/commit.ts
index be6c6cd6d9..d280c70a3f 100644
--- a/packages/server/modules/cross-server-sync/services/commit.ts
+++ b/packages/server/modules/cross-server-sync/services/commit.ts
@@ -564,6 +564,9 @@ const loadAllObjectsFromParent = async (
       batchPromises = []
     }
   }
+
+  // If any remaining promises - await them
+  await Promise.all(batchPromises)
 }
 
 /**
diff --git a/packages/shared/src/core/helpers/utility.ts b/packages/shared/src/core/helpers/utility.ts
index e2bedb614e..83c72dbdb6 100644
--- a/packages/shared/src/core/helpers/utility.ts
+++ b/packages/shared/src/core/helpers/utility.ts
@@ -32,7 +32,8 @@ export const retry = async <V = unknown>(fn: () => MaybeAsync<V>, n: number) =>
   let lastError: Error | undefined
   for (let i = 0; i < n; i++) {
     try {
-      return await Promise.resolve(fn())
+      const res = await Promise.resolve(fn())
+      return res
     } catch (error) {
       lastError = ensureError(error)
     }

From c3fead98a2118ef696b8001c68192b61e228f7c5 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle
 <139135120+andrewwallacespeckle@users.noreply.github.com>
Date: Fri, 22 Mar 2024 14:14:28 +0000
Subject: [PATCH 07/22] Swap Order of grid/list to reflect new default (#2156)

---
 .../src/components/layout/GridListToggle.vue           | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/ui-components/src/components/layout/GridListToggle.vue b/packages/ui-components/src/components/layout/GridListToggle.vue
index 1c9f40c113..f816d95e6b 100644
--- a/packages/ui-components/src/components/layout/GridListToggle.vue
+++ b/packages/ui-components/src/components/layout/GridListToggle.vue
@@ -7,7 +7,7 @@
       <div
         class="absolute transition"
         :class="{
-          'translate-x-7': value !== GridListToggleValue.Grid
+          'translate-x-7': value !== GridListToggleValue.List
         }"
       >
         <div
@@ -15,16 +15,16 @@
         />
       </div>
       <div
-        v-tippy="'Grid View'"
+        v-tippy="'List View'"
         class="relative z-10 flex gap-1 items-center p-1 rounded-l"
       >
-        <Squares2X2Icon class="h-5 w-5" />
+        <Bars3Icon class="h-5 w-5" />
       </div>
       <div
-        v-tippy="'List View'"
+        v-tippy="'Grid View'"
         class="relative z-10 flex gap-1 items-center p-1 rounded-r"
       >
-        <Bars3Icon class="h-5 w-5" />
+        <Squares2X2Icon class="h-5 w-5" />
       </div>
     </div>
   </button>

From 2a0e1b899ec83add00f35bbe98267c50361f0943 Mon Sep 17 00:00:00 2001
From: Kristaps Fabians Geikins <fabians@speckle.systems>
Date: Mon, 25 Mar 2024 10:40:17 +0100
Subject: [PATCH 08/22] fix(fe2): overriding some view names that datadog
 resolves incorrectly (#2158)

---
 packages/frontend-2/plugins/002-rum.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/frontend-2/plugins/002-rum.ts b/packages/frontend-2/plugins/002-rum.ts
index ac46f28ac7..6b4d6eeb5c 100644
--- a/packages/frontend-2/plugins/002-rum.ts
+++ b/packages/frontend-2/plugins/002-rum.ts
@@ -209,6 +209,12 @@ async function initRumServer(app: PluginNuxtApp) {
                 ` +
               (distinctId ? `window.DD_RUM.setUser({ id: '${distinctId}' });` : '') +
               `
+                // Regexes for view name overrides
+                const viewNameRegexes = [
+                  {rgx: /^\\/projects\\/\\w+?\\/models\\/[\\w,$@]+$/i, name: '/projects/?/models/?'},
+                  {rgx: /^\\/authn\\/verify\\/\\w+?\\/\\w+$/i, name: '/authn/verify/?/?'}
+                ]
+
                 window.DD_RUM.setGlobalContextProperty('serverBaseUrl', '${baseUrl}');
                 window.DD_RUM.init({
                   clientToken: '${datadogClientToken}',
@@ -223,6 +229,17 @@ async function initRumServer(app: PluginNuxtApp) {
                   trackResources: true,
                   trackLongTasks: true,
                   defaultPrivacyLevel: 'mask-user-input',
+                  beforeSend: (event) => {
+                    const path = new URL(event.view.url).pathname
+                    for (const { rgx, name } of viewNameRegexes) {
+                      if (rgx.test(path)) {
+                        event.view.name = name
+                        break
+                      }
+                    }
+
+                    // console.log(event)
+                  }
                 });
               })
           `

From fc667dbbae213943f9aa5d79800055645806ea00 Mon Sep 17 00:00:00 2001
From: Iain Sproat <68657+iainsproat@users.noreply.github.com>
Date: Mon, 25 Mar 2024 12:45:15 +0000
Subject: [PATCH 09/22] chore(deps): bump webpack-dev-server from 4.9.0 to
 4.15.2 (#2159)

- address https://github.com/specklesystems/speckle-server/security/dependabot/225
---
 yarn.lock | 131 ++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 82 insertions(+), 49 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 832dbc193f..5615d9aa3e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17081,6 +17081,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/http-errors@npm:*":
+  version: 2.0.4
+  resolution: "@types/http-errors@npm:2.0.4"
+  checksum: 1f3d7c3b32c7524811a45690881736b3ef741bf9849ae03d32ad1ab7062608454b150a4e7f1351f83d26a418b2d65af9bdc06198f1c079d75578282884c4e8e3
+  languageName: node
+  linkType: hard
+
 "@types/http-proxy@npm:^1.17.11":
   version: 1.17.11
   resolution: "@types/http-proxy@npm:1.17.11"
@@ -17296,6 +17303,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/mime@npm:*":
+  version: 3.0.4
+  resolution: "@types/mime@npm:3.0.4"
+  checksum: a6139c8e1f705ef2b064d072f6edc01f3c099023ad7c4fce2afc6c2bf0231888202adadbdb48643e8e20da0ce409481a49922e737eca52871b3dc08017455843
+  languageName: node
+  linkType: hard
+
 "@types/mime@npm:^1":
   version: 1.3.2
   resolution: "@types/mime@npm:1.3.2"
@@ -17401,6 +17415,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node-forge@npm:^1.3.0":
+  version: 1.3.11
+  resolution: "@types/node-forge@npm:1.3.11"
+  dependencies:
+    "@types/node": "*"
+  checksum: 1e86bd55b92a492eaafd75f6d01f31e7d86a5cdadd0c6bcdc0b1df4103b7f99bb75b832efd5217c7ddda5c781095dc086a868e20b9de00f5a427ddad4c296cd5
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:*, @types/node@npm:>=12":
   version: 17.0.31
   resolution: "@types/node@npm:17.0.31"
@@ -17782,6 +17805,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/serve-static@npm:^1.13.10":
+  version: 1.15.5
+  resolution: "@types/serve-static@npm:1.15.5"
+  dependencies:
+    "@types/http-errors": "*"
+    "@types/mime": "*"
+    "@types/node": "*"
+  checksum: 0ff4b3703cf20ba89c9f9e345bc38417860a88e85863c8d6fe274a543220ab7f5f647d307c60a71bb57dc9559f0890a661e8dc771a6ec5ef195d91c8afc4a893
+  languageName: node
+  linkType: hard
+
 "@types/sockjs@npm:^0.3.33":
   version: 0.3.33
   resolution: "@types/sockjs@npm:0.3.33"
@@ -17915,7 +17949,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/ws@npm:^8.0.0, @types/ws@npm:^8.5.1":
+"@types/ws@npm:^8.0.0":
   version: 8.5.3
   resolution: "@types/ws@npm:8.5.3"
   dependencies:
@@ -17924,6 +17958,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/ws@npm:^8.5.5":
+  version: 8.5.10
+  resolution: "@types/ws@npm:8.5.10"
+  dependencies:
+    "@types/node": "*"
+  checksum: 3ec416ea2be24042ebd677932a462cf16d2080393d8d7d0b1b3f5d6eaa4a7387aaf0eefb99193c0bfd29444857cf2e0c3ac89899e130550dc6c14ada8a46d25e
+  languageName: node
+  linkType: hard
+
 "@types/yargs-parser@npm:*":
   version: 21.0.0
   resolution: "@types/yargs-parser@npm:21.0.0"
@@ -23641,10 +23684,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"connect-history-api-fallback@npm:^1.6.0":
-  version: 1.6.0
-  resolution: "connect-history-api-fallback@npm:1.6.0"
-  checksum: 804ca2be28c999032ecd37a9f71405e5d7b7a4b3defcebbe41077bb8c5a0a150d7b59f51dcc33b2de30bc7e217a31d10f8cfad27e8e74c2fc7655eeba82d6e7e
+"connect-history-api-fallback@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "connect-history-api-fallback@npm:2.0.0"
+  checksum: dc5368690f4a5c413889792f8df70d5941ca9da44523cde3f87af0745faee5ee16afb8195434550f0504726642734f2683d6c07f8b460f828a12c45fbd4c9a68
   languageName: node
   linkType: hard
 
@@ -28187,10 +28230,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-monkey@npm:1.0.3":
-  version: 1.0.3
-  resolution: "fs-monkey@npm:1.0.3"
-  checksum: cf50804833f9b88a476911ae911fe50f61a98d986df52f890bd97e7262796d023698cb2309fa9b74fdd8974f04315b648748a0a8ee059e7d5257b293bfc409c0
+"fs-monkey@npm:^1.0.4":
+  version: 1.0.5
+  resolution: "fs-monkey@npm:1.0.5"
+  checksum: 424b67f65b37fe66117ae2bb061f790fe6d4b609e1d160487c74b3d69fbf42f262c665ccfba32e8b5f113f96f92e9a58fcdebe42d5f6649bdfc72918093a3119
   languageName: node
   linkType: hard
 
@@ -34448,12 +34491,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"memfs@npm:^3.4.1":
-  version: 3.4.1
-  resolution: "memfs@npm:3.4.1"
+"memfs@npm:^3.4.3":
+  version: 3.5.3
+  resolution: "memfs@npm:3.5.3"
   dependencies:
-    fs-monkey: 1.0.3
-  checksum: 6d2f49d447d1be24ff9c747618933784eeb059189bc6a0d77b7a51c7daf06e2d3a74674a2e2ff1520e2c312bf91e719ed37144cf05087379b3ba0aef0b6aa062
+    fs-monkey: ^1.0.4
+  checksum: 18dfdeacad7c8047b976a6ccd58bc98ba76e122ad3ca0e50a21837fe2075fc0d9aafc58ab9cf2576c2b6889da1dd2503083f2364191b695273f40969db2ecc44
   languageName: node
   linkType: hard
 
@@ -42663,12 +42706,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"selfsigned@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "selfsigned@npm:2.0.1"
+"selfsigned@npm:^2.1.1":
+  version: 2.4.1
+  resolution: "selfsigned@npm:2.4.1"
   dependencies:
+    "@types/node-forge": ^1.3.0
     node-forge: ^1
-  checksum: 864e65c2f31ca877bce3ccdaa3bdef5e1e992b63b2a03641e00c24cd305bf2acce093431d1fed2e5ae9f526558db4be5e90baa2b3474c0428fcf7e25cc86ac93
+  checksum: 38b91c56f1d7949c0b77f9bbe4545b19518475cae15e7d7f0043f87b1626710b011ce89879a88969651f650a19d213bb15b7d5b4c2877df9eeeff7ba8f8b9bfa
   languageName: node
   linkType: hard
 
@@ -43246,7 +43290,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sockjs@npm:^0.3.21":
+"sockjs@npm:^0.3.24":
   version: 0.3.24
   resolution: "sockjs@npm:0.3.24"
   dependencies:
@@ -48054,61 +48098,65 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-dev-middleware@npm:^5.3.1":
-  version: 5.3.1
-  resolution: "webpack-dev-middleware@npm:5.3.1"
+"webpack-dev-middleware@npm:^5.3.4":
+  version: 5.3.4
+  resolution: "webpack-dev-middleware@npm:5.3.4"
   dependencies:
     colorette: ^2.0.10
-    memfs: ^3.4.1
+    memfs: ^3.4.3
     mime-types: ^2.1.31
     range-parser: ^1.2.1
     schema-utils: ^4.0.0
   peerDependencies:
     webpack: ^4.0.0 || ^5.0.0
-  checksum: 32e36b5893dde4107e5bb758afdc7fc61fd238a62635cb2964ed6b61e363793275a40870479daeae3fa3b87678c1311f44ba7492f6ebf30fe9360f2aab30bae1
+  checksum: 90cf3e27d0714c1a745454a1794f491b7076434939340605b9ee8718ba2b85385b120939754e9fdbd6569811e749dee53eec319e0d600e70e0b0baffd8e3fb13
   languageName: node
   linkType: hard
 
 "webpack-dev-server@npm:^4.6.0":
-  version: 4.9.0
-  resolution: "webpack-dev-server@npm:4.9.0"
+  version: 4.15.2
+  resolution: "webpack-dev-server@npm:4.15.2"
   dependencies:
     "@types/bonjour": ^3.5.9
     "@types/connect-history-api-fallback": ^1.3.5
     "@types/express": ^4.17.13
     "@types/serve-index": ^1.9.1
+    "@types/serve-static": ^1.13.10
     "@types/sockjs": ^0.3.33
-    "@types/ws": ^8.5.1
+    "@types/ws": ^8.5.5
     ansi-html-community: ^0.0.8
     bonjour-service: ^1.0.11
     chokidar: ^3.5.3
     colorette: ^2.0.10
     compression: ^1.7.4
-    connect-history-api-fallback: ^1.6.0
+    connect-history-api-fallback: ^2.0.0
     default-gateway: ^6.0.3
     express: ^4.17.3
     graceful-fs: ^4.2.6
     html-entities: ^2.3.2
     http-proxy-middleware: ^2.0.3
     ipaddr.js: ^2.0.1
+    launch-editor: ^2.6.0
     open: ^8.0.9
     p-retry: ^4.5.0
     rimraf: ^3.0.2
     schema-utils: ^4.0.0
-    selfsigned: ^2.0.1
+    selfsigned: ^2.1.1
     serve-index: ^1.9.1
-    sockjs: ^0.3.21
+    sockjs: ^0.3.24
     spdy: ^4.0.2
-    webpack-dev-middleware: ^5.3.1
-    ws: ^8.4.2
+    webpack-dev-middleware: ^5.3.4
+    ws: ^8.13.0
   peerDependencies:
     webpack: ^4.37.0 || ^5.0.0
   peerDependenciesMeta:
+    webpack:
+      optional: true
     webpack-cli:
       optional: true
   bin:
     webpack-dev-server: bin/webpack-dev-server.js
-  checksum: 3ee3fc9650ede7be37440d404fea2420310f3fb6dfdcfdb71b1d9e4675b04f05843832c9be68ecd4bd4e8e2c960e5d9da299990bd29d05702edfd013fef9e8c8
+  checksum: 123507129cb4d55fdc5fabdd177574f31133605748372bb11353307b7a583ef25c6fd27b6addf56bf070ba44c88d5da861771c2ec55f52405082ec9efd01f039
   languageName: node
   linkType: hard
 
@@ -48588,7 +48636,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.16.0":
+"ws@npm:^8.13.0, ws@npm:^8.16.0":
   version: 8.16.0
   resolution: "ws@npm:8.16.0"
   peerDependencies:
@@ -48633,21 +48681,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.4.2":
-  version: 8.6.0
-  resolution: "ws@npm:8.6.0"
-  peerDependencies:
-    bufferutil: ^4.0.1
-    utf-8-validate: ^5.0.2
-  peerDependenciesMeta:
-    bufferutil:
-      optional: true
-    utf-8-validate:
-      optional: true
-  checksum: e2fca82059f1e087d0c78e2f37135e1b8332bc804fce46f83c2db1cb8571685abf9d2c99b964bab3752536ad90b99b46fb8d1428899aed3e560684ab4641bffd
-  languageName: node
-  linkType: hard
-
 "ws@npm:^8.9.0":
   version: 8.9.0
   resolution: "ws@npm:8.9.0"

From 3fcd788c81acc00882697e3cab6ff03ed1426f79 Mon Sep 17 00:00:00 2001
From: Kristaps Fabians Geikins <fabians@speckle.systems>
Date: Mon, 25 Mar 2024 14:18:39 +0100
Subject: [PATCH 10/22] fix(fe2): further datadog view name improvements
 (#2161)

* fix(fe2): further datadog view name improvements

* minor fix
---
 packages/frontend-2/plugins/002-rum.ts        | 39 ++++++++++---------
 .../frontend-2/type-augmentations/vue.d.ts    |  6 ++-
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/packages/frontend-2/plugins/002-rum.ts b/packages/frontend-2/plugins/002-rum.ts
index 6b4d6eeb5c..847b6f1389 100644
--- a/packages/frontend-2/plugins/002-rum.ts
+++ b/packages/frontend-2/plugins/002-rum.ts
@@ -30,7 +30,7 @@ async function initRumClient(app: PluginNuxtApp) {
       const newTags = (to.meta.raygunTags || []) as string[]
       setupTags(newTags)
 
-      if (!from.path || from.path === to.path) return
+      if (!from?.path || from.path === to.path) return
 
       rg4js('trackEvent', {
         type: 'pageView',
@@ -94,6 +94,18 @@ async function initRumClient(app: PluginNuxtApp) {
       },
       { immediate: true }
     )
+
+    router.beforeEach((to, from) => {
+      if (!('setUser' in datadog)) return
+      if (!from?.path || from.path === to.path) return
+
+      const pathDefinition = to.matched[to.matched.length - 1].path
+      const routeName = to.meta.datadogName
+
+      datadog.startView({
+        name: routeName || pathDefinition || 'unknown'
+      })
+    })
   }
 }
 
@@ -195,6 +207,10 @@ async function initRumServer(app: PluginNuxtApp) {
     const { distinctId } = await initUser()
 
     app.hook('app:rendered', (context) => {
+      const route = app._route
+      const pathDefinition = route.matched[route.matched.length - 1].path
+      const routeName = route.meta.datadogName
+
       context.ssrContext!.head.push({
         script: [
           {
@@ -209,12 +225,6 @@ async function initRumServer(app: PluginNuxtApp) {
                 ` +
               (distinctId ? `window.DD_RUM.setUser({ id: '${distinctId}' });` : '') +
               `
-                // Regexes for view name overrides
-                const viewNameRegexes = [
-                  {rgx: /^\\/projects\\/\\w+?\\/models\\/[\\w,$@]+$/i, name: '/projects/?/models/?'},
-                  {rgx: /^\\/authn\\/verify\\/\\w+?\\/\\w+$/i, name: '/authn/verify/?/?'}
-                ]
-
                 window.DD_RUM.setGlobalContextProperty('serverBaseUrl', '${baseUrl}');
                 window.DD_RUM.init({
                   clientToken: '${datadogClientToken}',
@@ -229,18 +239,11 @@ async function initRumServer(app: PluginNuxtApp) {
                   trackResources: true,
                   trackLongTasks: true,
                   defaultPrivacyLevel: 'mask-user-input',
-                  beforeSend: (event) => {
-                    const path = new URL(event.view.url).pathname
-                    for (const { rgx, name } of viewNameRegexes) {
-                      if (rgx.test(path)) {
-                        event.view.name = name
-                        break
-                      }
-                    }
-
-                    // console.log(event)
-                  }
+                  trackViewsManually: true
                 });
+                window.DD_RUM.startView({
+                  name: '${routeName || pathDefinition || 'unknown'}'
+                })
               })
           `
           }
diff --git a/packages/frontend-2/type-augmentations/vue.d.ts b/packages/frontend-2/type-augmentations/vue.d.ts
index 5fd3114b07..98d95e5f13 100644
--- a/packages/frontend-2/type-augmentations/vue.d.ts
+++ b/packages/frontend-2/type-augmentations/vue.d.ts
@@ -1,9 +1,13 @@
 declare module 'nuxt/dist/pages/runtime' {
   interface PageMeta {
     /**
-     * Optinal tags to be sent to Raygun
+     * Optional tags to be sent to Raygun
      */
     raygunTags?: string[]
+    /**
+     * Optional view name to override the default one
+     */
+    datadogName?: string
   }
 }
 

From f2f4380374d3bd90edcf51ba5130a4f4206fd139 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle
 <139135120+andrewwallacespeckle@users.noreply.github.com>
Date: Mon, 25 Mar 2024 13:35:04 +0000
Subject: [PATCH 11/22] feat(fe2): dont zoom out when quick measuring in
 perpendicular mode (#2160)

* WIP - To confirm

* Check for measure mode in selection.ts

* Remove un-needed change

* Only disable when in perpendicular mode

* Update naming
---
 .../frontend-2/lib/viewer/composables/setup/selection.ts   | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/frontend-2/lib/viewer/composables/setup/selection.ts b/packages/frontend-2/lib/viewer/composables/setup/selection.ts
index 7ecf32a731..172c4d64e5 100644
--- a/packages/frontend-2/lib/viewer/composables/setup/selection.ts
+++ b/packages/frontend-2/lib/viewer/composables/setup/selection.ts
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 
+import { MeasurementType } from '@speckle/viewer'
 import type { SpeckleObject } from '~~/lib/common/helpers/sceneExplorer'
 import { useMixpanel } from '~~/lib/core/composables/mp'
 import { useInjectedViewerState } from '~~/lib/viewer/composables/setup'
@@ -83,6 +84,12 @@ function useSelectOrZoomOnSelection() {
         })
       },
       doubleClickCallback: (args, { firstVisibleSelectionHit }) => {
+        const isMeasureMode = state.ui.measurement.enabled.value
+        const measurementType = state.ui.measurement.options.value.type
+
+        if (isMeasureMode && measurementType === MeasurementType.PERPENDICULAR) {
+          return
+        }
         if (!args) return zoom()
         if (!args.hits) return zoom()
         if (args.hits.length === 0) return zoom()

From aeaf43bd6d27dd7e98085bf7198d12817b7cc5ee Mon Sep 17 00:00:00 2001
From: Alexandru Popovici <alexandrupopoviciioan@gmail.com>
Date: Mon, 25 Mar 2024 15:45:05 +0200
Subject: [PATCH 12/22] Fix for #WBX-435 (#2148)

---
 packages/viewer-sandbox/src/main.ts                          | 3 ++-
 packages/viewer/src/modules/extensions/FilteringExtension.ts | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/viewer-sandbox/src/main.ts b/packages/viewer-sandbox/src/main.ts
index c5d8c19568..295d9a50b8 100644
--- a/packages/viewer-sandbox/src/main.ts
+++ b/packages/viewer-sandbox/src/main.ts
@@ -120,7 +120,7 @@ const getStream = () => {
     // prettier-ignore
     // 'https://speckle.xyz/streams/da9e320dad/commits/5388ef24b8?c=%5B-7.66134,10.82932,6.41935,-0.07739,-13.88552,1.8697,0,1%5D'
     // Revit sample house (good for bim-like stuff with many display meshes)
-    'https://speckle.xyz/streams/da9e320dad/commits/5388ef24b8'
+    // 'https://speckle.xyz/streams/da9e320dad/commits/5388ef24b8'
     // 'https://latest.speckle.dev/streams/58b5648c4d/commits/60371ecb2d'
     // 'Super' heavy revit shit
     // 'https://speckle.xyz/streams/e6f9156405/commits/0694d53bb5'
@@ -372,6 +372,7 @@ const getStream = () => {
 
     // Rebar
     // 'https://speckle.xyz/streams/b4086833f8/commits/94df4c6d16?overlay=c5b9c260ea,e3dc287d61,eaedd7d0a5,7f126ce0dd,02fee34ce3,9bda31611f,110282c4db,533c311e29,bf6814d779,1ba52affcf,cc4e75125e,3fd628e4e3'
+    'http://127.0.0.1:3000/streams/30b75f0dea/objects/db765ed44ae10176c0bf8ba60d1ce67d'
   )
 }
 
diff --git a/packages/viewer/src/modules/extensions/FilteringExtension.ts b/packages/viewer/src/modules/extensions/FilteringExtension.ts
index 0b36a804d4..d9afb6a284 100644
--- a/packages/viewer/src/modules/extensions/FilteringExtension.ts
+++ b/packages/viewer/src/modules/extensions/FilteringExtension.ts
@@ -174,8 +174,8 @@ export class FilteringExtension extends Extension {
   }
 
   private visibilityWalk(node: TreeNode): boolean {
-    if (!node.model.atomic) return true
-    if (this.VisibilityState.ids[node.model.raw.id]) {
+    // if (!node.model.atomic) return true
+    if (this.VisibilityState.ids[node.model.id]) {
       this.VisibilityState.rvs.push(
         ...this.WTI.getRenderTree().getRenderViewsForNode(node, node)
       )

From 1f48de66f38250f0cfef956711ebc1c7194bb6e0 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle
 <139135120+andrewwallacespeckle@users.noreply.github.com>
Date: Mon, 25 Mar 2024 16:20:59 +0000
Subject: [PATCH 13/22] Fix console warnings around form elements (#2157)

---
 .../frontend-2/components/common/EditableTitleDescription.vue   | 2 ++
 packages/ui-components/src/components/form/select/Base.vue      | 1 +
 2 files changed, 3 insertions(+)

diff --git a/packages/frontend-2/components/common/EditableTitleDescription.vue b/packages/frontend-2/components/common/EditableTitleDescription.vue
index 95f6995447..46df5cc0ef 100644
--- a/packages/frontend-2/components/common/EditableTitleDescription.vue
+++ b/packages/frontend-2/components/common/EditableTitleDescription.vue
@@ -11,6 +11,7 @@
         >
           <textarea
             v-model="title"
+            name="Title"
             maxlength="512"
             :class="titleInputClasses"
             placeholder="Please enter a valid title"
@@ -42,6 +43,7 @@
         >
           <textarea
             v-model="description"
+            name="Description"
             :class="[
               ...descriptionInputClasses,
               description ? 'focus:min-w-0' : 'min-w-[260px]'
diff --git a/packages/ui-components/src/components/form/select/Base.vue b/packages/ui-components/src/components/form/select/Base.vue
index 3b2e20e549..47ca9f62ae 100644
--- a/packages/ui-components/src/components/form/select/Base.vue
+++ b/packages/ui-components/src/components/form/select/Base.vue
@@ -13,6 +13,7 @@
         :id="labelId"
         class="block label text-foreground-2 mb-2"
         :class="{ 'sr-only': !showLabel }"
+        :for="buttonId"
       >
         {{ label }}
       </ListboxLabel>

From 45b958397f74103b7e6c62f11c92042a003538a6 Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle
 <139135120+andrewwallacespeckle@users.noreply.github.com>
Date: Mon, 25 Mar 2024 16:53:39 +0000
Subject: [PATCH 14/22] feat(fe2): vimeo video wrapper component and update
 links from youtube (#2155)

* Swap Onboarding videos from YouTube to Vimeo

* New VideoWrapper Component

* Update name to VimeoEmbed
---
 .../onboarding/dialog/AccountLink.vue         | 23 +++-----
 .../onboarding/dialog/FirstSend.vue           | 23 +++-----
 .../components/onboarding/dialog/Manager.vue  | 22 +++----
 .../components/projects/NewSpeckle/Dialog.vue | 36 +++---------
 .../components/common/VimeoEmbed.stories.ts   | 58 +++++++++++++++++++
 .../src/components/common/VimeoEmbed.vue      | 44 ++++++++++++++
 packages/ui-components/src/lib.ts             |  2 +
 7 files changed, 136 insertions(+), 72 deletions(-)
 create mode 100644 packages/ui-components/src/components/common/VimeoEmbed.stories.ts
 create mode 100644 packages/ui-components/src/components/common/VimeoEmbed.vue

diff --git a/packages/frontend-2/components/onboarding/dialog/AccountLink.vue b/packages/frontend-2/components/onboarding/dialog/AccountLink.vue
index cb613496ab..13a6f970ae 100644
--- a/packages/frontend-2/components/onboarding/dialog/AccountLink.vue
+++ b/packages/frontend-2/components/onboarding/dialog/AccountLink.vue
@@ -1,21 +1,13 @@
 <template>
   <OnboardingDialogBase v-model:open="openState">
     <template #header>Log In 🔑</template>
-    <div
-      class="w-full h-[351px] bg-primary rounded-xl flex items-center justify-center overflow-hidden"
-    >
-      <iframe
-        width="560"
-        height="315"
-        src="https://www.youtube-nocookie.com/embed/enJk9lslnvs?rel=0&autoplay=1"
-        title="YouTube video player"
-        frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        class="w-full h-full"
-      ></iframe>
-    </div>
-
-    <div class="flex justify-center">
+    <CommonVimeoEmbed
+      vimeo-id="925894038"
+      title="Onboarding: Log in to your Speckle account"
+      autoplay
+      controls
+    />
+    <div class="flex justify-center mt-2">
       <FormButton size="xl" class="shadow-md" @click="authoriseManager()">
         Authorize Manager
       </FormButton>
@@ -24,6 +16,7 @@
 </template>
 <script setup lang="ts">
 import { useSynchronizedCookie } from '~~/lib/common/composables/reactiveCookie'
+import { CommonVimeoEmbed } from '@speckle/ui-components'
 
 const props = defineProps<{
   open: boolean
diff --git a/packages/frontend-2/components/onboarding/dialog/FirstSend.vue b/packages/frontend-2/components/onboarding/dialog/FirstSend.vue
index 01c831d6ec..a22bec4d46 100644
--- a/packages/frontend-2/components/onboarding/dialog/FirstSend.vue
+++ b/packages/frontend-2/components/onboarding/dialog/FirstSend.vue
@@ -1,20 +1,13 @@
 <template>
   <OnboardingDialogBase v-model:open="openState">
     <template #header>Your First Model Upload ⬆️</template>
-    <div
-      class="w-full h-[351px] bg-primary rounded-xl flex items-center justify-center overflow-hidden"
-    >
-      <iframe
-        width="560"
-        height="315"
-        src="https://www.youtube-nocookie.com/embed/SGnwuzieufw?rel=0&autoplay=1"
-        title="YouTube video player"
-        frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        class="w-full h-full"
-      ></iframe>
-    </div>
-    <div class="flex justify-center">
+    <CommonVimeoEmbed
+      vimeo-id="925894349"
+      title="Onboarding: First Model Upload"
+      autoplay
+      controls
+    />
+    <div class="flex justify-center my-1">
       <FormButton size="xl" class="shadow-md" @click="emit('done')">Got it!</FormButton>
     </div>
   </OnboardingDialogBase>
@@ -22,6 +15,8 @@
 <script setup lang="ts">
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { CubeIcon } from '@heroicons/vue/24/solid'
+import { CommonVimeoEmbed } from '@speckle/ui-components'
+
 const props = defineProps<{
   open: boolean
 }>()
diff --git a/packages/frontend-2/components/onboarding/dialog/Manager.vue b/packages/frontend-2/components/onboarding/dialog/Manager.vue
index 2d52c3f660..f1bd7f20a9 100644
--- a/packages/frontend-2/components/onboarding/dialog/Manager.vue
+++ b/packages/frontend-2/components/onboarding/dialog/Manager.vue
@@ -1,20 +1,13 @@
 <template>
   <OnboardingDialogBase v-model:open="openState">
     <template #header>Install Manager ⚙️</template>
-    <div
-      class="w-full aspect-video bg-primary rounded-xl flex items-center justify-center overflow-hidden"
-    >
-      <iframe
-        width="560"
-        height="315"
-        src="https://www.youtube-nocookie.com/embed/ckP97qTGXDQ?rel=0&autoplay=1&"
-        title="YouTube video player"
-        frameborder="0"
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        class="w-full h-full"
-      ></iframe>
-    </div>
-    <div>
+    <CommonVimeoEmbed
+      vimeo-id="925892633"
+      title="Onboarding: How to install Manager"
+      autoplay
+      controls
+    />
+    <div class="mt-2">
       <div v-if="hasSupportedOs" class="flex justify-center flex-col space-y-2">
         <FormButton
           size="xl"
@@ -48,6 +41,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { useSynchronizedCookie } from '~~/lib/common/composables/reactiveCookie'
 import { useMixpanel } from '~~/lib/core/composables/mp'
+import { CommonVimeoEmbed } from '@speckle/ui-components'
 
 const props = defineProps<{
   open: boolean
diff --git a/packages/frontend-2/components/projects/NewSpeckle/Dialog.vue b/packages/frontend-2/components/projects/NewSpeckle/Dialog.vue
index 36a1b400e7..f443b8327a 100644
--- a/packages/frontend-2/components/projects/NewSpeckle/Dialog.vue
+++ b/packages/frontend-2/components/projects/NewSpeckle/Dialog.vue
@@ -4,41 +4,19 @@
       What's New in Speckle?
     </h2>
     <p class="text-foreground-2 text-center mb-6">A new way to collaborate in AEC.</p>
-    <div class="relative bg-white">
-      <div class="absolute inset-0 flex items-center justify-center" role="status">
-        <svg
-          aria-hidden="true"
-          class="w-6 h-6 text-outline-2 animate-spin fill-primary"
-          viewBox="0 0 100 101"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-            fill="currentColor"
-          />
-          <path
-            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-            fill="currentFill"
-          />
-        </svg>
-        <span class="sr-only">Loading...</span>
-      </div>
-      <iframe
-        title="What's new in Speckle?"
-        src="https://player.vimeo.com/video/925455838?h=052c422cae&autoplay=1&title=0&loop=1&byline=0&portrait=0&controls=0&muted=1"
-        frameborder="0"
-        allow="autoplay; fullscreen;"
-        allowfullscreen
-        class="aspect-video w-full relative z-10"
-      ></iframe>
-    </div>
+    <CommonVimeoEmbed
+      vimeo-id="925455838"
+      title="What's new in Speckle?"
+      autoplay
+      muted
+    />
   </LayoutDialog>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/outline'
+import { CommonVimeoEmbed } from '@speckle/ui-components'
 
 const open = defineModel<boolean>('open', { required: true })
 
diff --git a/packages/ui-components/src/components/common/VimeoEmbed.stories.ts b/packages/ui-components/src/components/common/VimeoEmbed.stories.ts
new file mode 100644
index 0000000000..6eaecf72a0
--- /dev/null
+++ b/packages/ui-components/src/components/common/VimeoEmbed.stories.ts
@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CommonVimeoEmbed from '~~/src/components/common/VimeoEmbed.vue'
+
+type StoryType = StoryObj<{
+  autoplay: boolean
+  muted: boolean
+  controls: boolean
+  vimeoId: string
+}>
+
+export default {
+  title: 'Components/Common/VimeoEmbed',
+  component: CommonVimeoEmbed,
+  argTypes: {
+    autoplay: {
+      control: { type: 'boolean' }
+    },
+    muted: {
+      control: { type: 'boolean' }
+    },
+    controls: {
+      control: { type: 'boolean' }
+    },
+    vimeoId: {
+      control: { type: 'text' }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A wrapper component for Vimeo video embeds with configurable options for autoplay, muted audio, and visibility of controls.'
+      }
+    }
+  }
+} as Meta<typeof CommonVimeoEmbed>
+
+export const Default: StoryType = {
+  render: (args) => ({
+    components: { CommonVimeoEmbed },
+    setup: () => ({ args }),
+    template: '<CommonVimeoEmbed v-bind="args" />'
+  }),
+  args: {
+    autoplay: false,
+    muted: false,
+    controls: true,
+    vimeoId: '925894349'
+  }
+}
+
+export const NoControls: StoryType = {
+  ...Default,
+  args: {
+    ...Default.args,
+    controls: false
+  }
+}
diff --git a/packages/ui-components/src/components/common/VimeoEmbed.vue b/packages/ui-components/src/components/common/VimeoEmbed.vue
new file mode 100644
index 0000000000..f98d8c2a7f
--- /dev/null
+++ b/packages/ui-components/src/components/common/VimeoEmbed.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="relative bg-foundation">
+    <div class="absolute inset-0 flex items-center justify-center" role="status">
+      <svg
+        aria-hidden="true"
+        class="w-6 h-6 text-outline-2 animate-spin fill-primary"
+        viewBox="0 0 100 101"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+          fill="currentColor"
+        />
+        <path
+          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+          fill="currentFill"
+        />
+      </svg>
+      <span class="sr-only">Loading...</span>
+    </div>
+
+    <iframe
+      :title="title"
+      :src="`https://player.vimeo.com/video/${vimeoId}?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=${
+        autoplay ? '1' : '0'
+      }&muted=${muted ? '1' : '0'}&controls=${controls ? '1' : '0'}`"
+      frameborder="0"
+      allow="autoplay; fullscreen;"
+      allowfullscreen
+      class="aspect-video w-full relative z-10"
+    ></iframe>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  vimeoId: string
+  title: string
+  autoplay?: boolean
+  muted?: boolean
+  controls?: boolean
+}>()
+</script>
diff --git a/packages/ui-components/src/lib.ts b/packages/ui-components/src/lib.ts
index 1605a3517b..13d95defa1 100644
--- a/packages/ui-components/src/lib.ts
+++ b/packages/ui-components/src/lib.ts
@@ -16,6 +16,7 @@ import { TailwindBreakpoints } from '~~/src/helpers/tailwind'
 import CommonStepsNumber from '~~/src/components/common/steps/Number.vue'
 import CommonStepsBullet from '~~/src/components/common/steps/Bullet.vue'
 import CommonAnimationInstructional from '~~/src/components/common/animation/Instructional.vue'
+import CommonVimeoEmbed from '~~/src/components/common/VimeoEmbed.vue'
 import FormCardButton from '~~/src/components/form/CardButton.vue'
 import FormCheckbox from '~~/src/components/form/Checkbox.vue'
 import FormRadio from '~~/src/components/form/Radio.vue'
@@ -102,6 +103,7 @@ export {
   CommonStepsBullet,
   CommonStepsNumber,
   CommonAnimationInstructional,
+  CommonVimeoEmbed,
   FormCardButton,
   FormCheckbox,
   FormRadio,

From f650d8645f9fd688399d3831e5564aa3b9555f72 Mon Sep 17 00:00:00 2001
From: Kristaps Fabians Geikins <fabians@speckle.systems>
Date: Tue, 26 Mar 2024 09:18:54 +0100
Subject: [PATCH 15/22] fix(fe2): further datadog view name resolution
 improvements (#2164)

* fix(fe2): further datadog view name resolution improvements

* minor improvement

* auto accept invite fix
---
 .../error/page/ProjectInviteBanner.vue        |  2 ++
 packages/frontend-2/plugins/002-rum.ts        | 29 +++++++++++--------
 .../frontend-2/type-augmentations/window.d.ts |  4 +++
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/frontend-2/components/error/page/ProjectInviteBanner.vue b/packages/frontend-2/components/error/page/ProjectInviteBanner.vue
index b2a16c0f5a..bfdba55eb1 100644
--- a/packages/frontend-2/components/error/page/ProjectInviteBanner.vue
+++ b/packages/frontend-2/components/error/page/ProjectInviteBanner.vue
@@ -4,6 +4,7 @@
       v-if="invite"
       :invite="invite"
       :show-stream-name="false"
+      :auto-accept="shouldAutoAcceptInvite"
       @processed="onProcessed"
     />
   </NuxtErrorBoundary>
@@ -20,6 +21,7 @@ const logger = useLogger()
 
 const token = computed(() => route.query.token as Optional<string>)
 const projectId = computed(() => route.params.id as Optional<string>)
+const shouldAutoAcceptInvite = computed(() => route.query.accept === 'true')
 
 const { result } = useQuery(
   projectInviteQuery,
diff --git a/packages/frontend-2/plugins/002-rum.ts b/packages/frontend-2/plugins/002-rum.ts
index 847b6f1389..58564bdcca 100644
--- a/packages/frontend-2/plugins/002-rum.ts
+++ b/packages/frontend-2/plugins/002-rum.ts
@@ -95,16 +95,12 @@ async function initRumClient(app: PluginNuxtApp) {
       { immediate: true }
     )
 
-    router.beforeEach((to, from) => {
-      if (!('setUser' in datadog)) return
-      if (!from?.path || from.path === to.path) return
-
+    router.beforeEach((to) => {
       const pathDefinition = to.matched[to.matched.length - 1].path
-      const routeName = to.meta.datadogName
+      const routeName = to.meta.datadogName || pathDefinition
+      const realPath = to.path
 
-      datadog.startView({
-        name: routeName || pathDefinition || 'unknown'
-      })
+      window.DD_RUM_START_VIEW?.(realPath, routeName)
     })
   }
 }
@@ -209,7 +205,8 @@ async function initRumServer(app: PluginNuxtApp) {
     app.hook('app:rendered', (context) => {
       const route = app._route
       const pathDefinition = route.matched[route.matched.length - 1].path
-      const routeName = route.meta.datadogName
+      const pathReal = route.path
+      const routeName = route.meta.datadogName || pathDefinition
 
       context.ssrContext!.head.push({
         script: [
@@ -241,9 +238,17 @@ async function initRumServer(app: PluginNuxtApp) {
                   defaultPrivacyLevel: 'mask-user-input',
                   trackViewsManually: true
                 });
-                window.DD_RUM.startView({
-                  name: '${routeName || pathDefinition || 'unknown'}'
-                })
+
+                window.DD_RUM_START_VIEW = (path, name) => {
+                  if (window.DD_RUM_REGISTERED_PATH === path) return
+
+                  window.DD_RUM_REGISTERED_PATH = path
+                  window.DD_RUM.startView({
+                    name
+                  })
+                  console.debug('DDR Started view: ' + name)
+                }
+                window.DD_RUM_START_VIEW('${pathReal}', '${routeName}')
               })
           `
           }
diff --git a/packages/frontend-2/type-augmentations/window.d.ts b/packages/frontend-2/type-augmentations/window.d.ts
index f2c67eb311..c15521f1dd 100644
--- a/packages/frontend-2/type-augmentations/window.d.ts
+++ b/packages/frontend-2/type-augmentations/window.d.ts
@@ -4,6 +4,10 @@ declare global {
     DD_RUM?:
       | Pick<import('@datadog/browser-rum').RumGlobal, 'onReady'>
       | import('@datadog/browser-rum').RumGlobal
+    /**
+     * Start a new DD RUM view. Function is idempotent and can be safely called multiple times.
+     */
+    DD_RUM_START_VIEW?: (path: string, name: string) => void
   }
 }
 

From 8304f02b40dc747c9635c88d24dd2c48189f3c0a Mon Sep 17 00:00:00 2001
From: Kristaps Fabians Geikins <fabis94@live.com>
Date: Tue, 26 Mar 2024 10:21:37 +0200
Subject: [PATCH 16/22] Merge branch 'main' into
 fabians/fe2-automate-integration


From f7b4446196e725865079ad7c57050eda6f501529 Mon Sep 17 00:00:00 2001
From: Kristaps Fabians Geikins <fabis94@live.com>
Date: Tue, 26 Mar 2024 11:02:14 +0200
Subject: [PATCH 17/22] tabs set up for single automation page

---
 .../project/page/automations/Row.vue          | 17 +++++++++++--
 .../project/page/automations/Tab.vue          | 24 ++++---------------
 .../lib/common/generated/gql/gql.ts           | 10 ++++----
 .../lib/common/generated/gql/graphql.ts       | 20 ++++++++--------
 .../frontend-2/lib/common/helpers/route.ts    |  4 ++++
 .../lib/projects/graphql/queries.ts           | 15 ++++++++++++
 .../frontend-2/pages/projects/[id]/index.vue  | 12 +++++++++-
 .../pages/projects/[id]/index/automations.vue |  3 +++
 .../projects/[id]/index/automations/[aid].vue |  3 +++
 .../projects/[id]/index/automations/index.vue |  3 +++
 10 files changed, 73 insertions(+), 38 deletions(-)
 create mode 100644 packages/frontend-2/pages/projects/[id]/index/automations.vue
 create mode 100644 packages/frontend-2/pages/projects/[id]/index/automations/[aid].vue
 create mode 100644 packages/frontend-2/pages/projects/[id]/index/automations/index.vue

diff --git a/packages/frontend-2/components/project/page/automations/Row.vue b/packages/frontend-2/components/project/page/automations/Row.vue
index 603771e603..f421d30e76 100644
--- a/packages/frontend-2/components/project/page/automations/Row.vue
+++ b/packages/frontend-2/components/project/page/automations/Row.vue
@@ -1,7 +1,14 @@
 <template>
   <div class="flex flex-col gap-4">
     <div class="flex items-center py-2 border-b border-outline-3">
-      <h2 class="h6 font-bold">{{ automation.name }}</h2>
+      <CommonTextLink
+        :icon-right="ChevronRightIcon"
+        size="lg"
+        class="!font-bold"
+        :to="projectAutomationRoute(projectId, automation.id)"
+      >
+        {{ automation.name }}
+      </CommonTextLink>
     </div>
     <div class="flex gap-1 items-center">
       <Component :is="enabledIcon" class="w-5 h-5" />
@@ -59,10 +66,16 @@
   </div>
 </template>
 <script setup lang="ts">
-import { PlayIcon, PauseIcon, EyeIcon } from '@heroicons/vue/24/outline'
+import {
+  PlayIcon,
+  PauseIcon,
+  EyeIcon,
+  ChevronRightIcon
+} from '@heroicons/vue/24/outline'
 import { useAutomationRunDetailsFns } from '~/lib/automations/composables/runs'
 import { graphql } from '~/lib/common/generated/gql'
 import { type ProjectPageAutomationsRow_AutomationFragment } from '~/lib/common/generated/gql/graphql'
+import { projectAutomationRoute } from '~/lib/common/helpers/route'
 import { useViewerRouteBuilder } from '~/lib/projects/composables/models'
 
 type AutomateRun = ProjectPageAutomationsRow_AutomationFragment['runs']['items'][0]
diff --git a/packages/frontend-2/components/project/page/automations/Tab.vue b/packages/frontend-2/components/project/page/automations/Tab.vue
index e14c49103a..c2ecfdcb2e 100644
--- a/packages/frontend-2/components/project/page/automations/Tab.vue
+++ b/packages/frontend-2/components/project/page/automations/Tab.vue
@@ -5,7 +5,7 @@
       :has-automations="hasAutomations && isAutomateEnabled"
     />
     <template v-if="loading">
-      <CommonLoadingIcon />
+      <CommonLoadingBar loading />
     </template>
     <template v-else>
       <ProjectPageAutomationsEmptyState
@@ -36,25 +36,9 @@
   </div>
 </template>
 <script setup lang="ts">
-import { CommonLoadingIcon } from '@speckle/ui-components'
 import { useQuery } from '@vue/apollo-composable'
-import { graphql } from '~/lib/common/generated/gql'
 import type { AutomationRunDetailsFragment } from '~/lib/common/generated/gql/graphql'
-
-const automationsTabQuery = graphql(`
-  query ProjectAutomationsTab($projectId: String!, $search: String, $cursor: String) {
-    project(id: $projectId) {
-      id
-      automations(filter: $search, cursor: $cursor, limit: 5) {
-        totalCount
-        items {
-          ...ProjectPageAutomationsRow_Automation
-        }
-      }
-    }
-    ...ProjectPageAutomationsEmptyState_Query
-  }
-`)
+import { projectAutomationsTabQuery } from '~/lib/projects/graphql/queries'
 
 const route = useRoute()
 const projectId = computed(() => route.params.id as string)
@@ -69,10 +53,10 @@ const openedRun = ref<{
 const runInfoOpen = ref(false)
 
 const { result, loading } = useQuery(
-  automationsTabQuery,
+  projectAutomationsTabQuery,
   () => ({
     projectId: projectId.value,
-    search: search.value,
+    search: search.value?.length ? search.value : null,
     // TODO: Pagination & search
     cursor: null
   }),
diff --git a/packages/frontend-2/lib/common/generated/gql/gql.ts b/packages/frontend-2/lib/common/generated/gql/gql.ts
index 3047226f46..df289245bf 100644
--- a/packages/frontend-2/lib/common/generated/gql/gql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/gql.ts
@@ -35,7 +35,6 @@ const documents = {
     "\n  fragment ProjectPageProjectHeader on Project {\n    id\n    role\n    name\n    description\n    visibility\n    allowPublicComments\n  }\n": types.ProjectPageProjectHeaderFragmentDoc,
     "\n  fragment ProjectPageAutomationsEmptyState_Query on Query {\n    automateFunctions(limit: 9) {\n      items {\n        ...AutomationsFunctionsCard_AutomateFunction\n      }\n    }\n  }\n": types.ProjectPageAutomationsEmptyState_QueryFragmentDoc,
     "\n  fragment ProjectPageAutomationsRow_Automation on Automation {\n    id\n    name\n    enabled\n    model {\n      id\n      name\n    }\n    runs(limit: 5) {\n      totalCount\n      items {\n        ...AutomationRunDetails\n      }\n    }\n  }\n": types.ProjectPageAutomationsRow_AutomationFragmentDoc,
-    "\n  query ProjectAutomationsTab($projectId: String!, $search: String, $cursor: String) {\n    project(id: $projectId) {\n      id\n      automations(filter: $search, cursor: $cursor, limit: 5) {\n        totalCount\n        items {\n          ...ProjectPageAutomationsRow_Automation\n        }\n      }\n    }\n    ...ProjectPageAutomationsEmptyState_Query\n  }\n": types.ProjectAutomationsTabDocument,
     "\n  fragment ProjectDiscussionsPageHeader_Project on Project {\n    id\n    name\n  }\n": types.ProjectDiscussionsPageHeader_ProjectFragmentDoc,
     "\n  fragment ProjectDiscussionsPageResults_Project on Project {\n    id\n  }\n": types.ProjectDiscussionsPageResults_ProjectFragmentDoc,
     "\n  fragment ProjectPageLatestItemsComments on Project {\n    id\n    commentThreadCount: commentThreads(limit: 0) {\n      totalCount\n    }\n  }\n": types.ProjectPageLatestItemsCommentsFragmentDoc,
@@ -133,6 +132,7 @@ const documents = {
     "\n  query ProjectModelVersions(\n    $projectId: String!\n    $modelId: String!\n    $versionsCursor: String\n  ) {\n    project(id: $projectId) {\n      id\n      ...ProjectModelPageVersionsPagination\n    }\n  }\n": types.ProjectModelVersionsDocument,
     "\n  query ProjectModelsPage($projectId: String!) {\n    project(id: $projectId) {\n      id\n      ...ProjectModelsPageHeader_Project\n      ...ProjectModelsPageResults_Project\n    }\n  }\n": types.ProjectModelsPageDocument,
     "\n  query ProjectDiscussionsPage($projectId: String!) {\n    project(id: $projectId) {\n      id\n      ...ProjectDiscussionsPageHeader_Project\n      ...ProjectDiscussionsPageResults_Project\n    }\n  }\n": types.ProjectDiscussionsPageDocument,
+    "\n  query ProjectAutomationsTab($projectId: String!, $search: String, $cursor: String) {\n    project(id: $projectId) {\n      id\n      automations(filter: $search, cursor: $cursor, limit: 5) {\n        totalCount\n        items {\n          ...ProjectPageAutomationsRow_Automation\n        }\n      }\n    }\n    ...ProjectPageAutomationsEmptyState_Query\n  }\n": types.ProjectAutomationsTabDocument,
     "\n  query ProjectWebhooks($projectId: String!) {\n    project(id: $projectId) {\n      id\n      name\n      webhooks {\n        items {\n          streamId\n          triggers\n          enabled\n          url\n          id\n          description\n          history(limit: 5) {\n            items {\n              status\n              statusInfo\n            }\n          }\n        }\n        totalCount\n      }\n    }\n  }\n": types.ProjectWebhooksDocument,
     "\n  query Blob($blobId: String!, $streamId: String!) {\n    stream(id: $streamId) {\n      blob(id: $blobId) {\n        id\n        fileName\n        fileType\n        fileSize\n        createdAt\n      }\n    }\n  }\n": types.BlobDocument,
     "\n  subscription OnProjectUpdated($id: String!) {\n    projectUpdated(id: $id) {\n      id\n      type\n      project {\n        ...ProjectPageProject\n        ...ProjectDashboardItemNoModels\n      }\n    }\n  }\n": types.OnProjectUpdatedDocument,
@@ -284,10 +284,6 @@ export function graphql(source: "\n  fragment ProjectPageAutomationsEmptyState_Q
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  fragment ProjectPageAutomationsRow_Automation on Automation {\n    id\n    name\n    enabled\n    model {\n      id\n      name\n    }\n    runs(limit: 5) {\n      totalCount\n      items {\n        ...AutomationRunDetails\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment ProjectPageAutomationsRow_Automation on Automation {\n    id\n    name\n    enabled\n    model {\n      id\n      name\n    }\n    runs(limit: 5) {\n      totalCount\n      items {\n        ...AutomationRunDetails\n      }\n    }\n  }\n"];
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function graphql(source: "\n  query ProjectAutomationsTab($projectId: String!, $search: String, $cursor: String) {\n    project(id: $projectId) {\n      id\n      automations(filter: $search, cursor: $cursor, limit: 5) {\n        totalCount\n        items {\n          ...ProjectPageAutomationsRow_Automation\n        }\n      }\n    }\n    ...ProjectPageAutomationsEmptyState_Query\n  }\n"): (typeof documents)["\n  query ProjectAutomationsTab($projectId: String!, $search: String, $cursor: String) {\n    project(id: $projectId) {\n      id\n      automations(filter: $search, cursor: $cursor, limit: 5) {\n        totalCount\n        items {\n          ...ProjectPageAutomationsRow_Automation\n        }\n      }\n    }\n    ...ProjectPageAutomationsEmptyState_Query\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -676,6 +672,10 @@ export function graphql(source: "\n  query ProjectModelsPage($projectId: String!
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  query ProjectDiscussionsPage($projectId: String!) {\n    project(id: $projectId) {\n      id\n      ...ProjectDiscussionsPageHeader_Project\n      ...ProjectDiscussionsPageResults_Project\n    }\n  }\n"): (typeof documents)["\n  query ProjectDiscussionsPage($projectId: String!) {\n    project(id: $projectId) {\n      id\n      ...ProjectDiscussionsPageHeader_Project\n      ...ProjectDiscussionsPageResults_Project\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query ProjectAutomationsTab($projectId: String!, $search: String, $cursor: String) {\n    project(id: $projectId) {\n      id\n      automations(filter: $search, cursor: $cursor, limit: 5) {\n        totalCount\n        items {\n          ...ProjectPageAutomationsRow_Automation\n        }\n      }\n    }\n    ...ProjectPageAutomationsEmptyState_Query\n  }\n"): (typeof documents)["\n  query ProjectAutomationsTab($projectId: String!, $search: String, $cursor: String) {\n    project(id: $projectId) {\n      id\n      automations(filter: $search, cursor: $cursor, limit: 5) {\n        totalCount\n        items {\n          ...ProjectPageAutomationsRow_Automation\n        }\n      }\n    }\n    ...ProjectPageAutomationsEmptyState_Query\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/packages/frontend-2/lib/common/generated/gql/graphql.ts b/packages/frontend-2/lib/common/generated/gql/graphql.ts
index 3e65432770..036f2c7e7d 100644
--- a/packages/frontend-2/lib/common/generated/gql/graphql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/graphql.ts
@@ -3071,15 +3071,6 @@ export type ProjectPageAutomationsEmptyState_QueryFragment = { __typename?: 'Que
 
 export type ProjectPageAutomationsRow_AutomationFragment = { __typename?: 'Automation', id: string, name: string, enabled: boolean, model: { __typename?: 'Model', id: string, name: string }, runs: { __typename?: 'AutomateRunCollection', totalCount: number, items: Array<{ __typename?: 'AutomateRun', id: string, status: AutomateRunStatus, reason?: string | null, createdAt: string, updatedAt: string, version: { __typename?: 'Version', id: string } }> } };
 
-export type ProjectAutomationsTabQueryVariables = Exact<{
-  projectId: Scalars['String'];
-  search?: InputMaybe<Scalars['String']>;
-  cursor?: InputMaybe<Scalars['String']>;
-}>;
-
-
-export type ProjectAutomationsTabQuery = { __typename?: 'Query', project: { __typename?: 'Project', id: string, automations: { __typename?: 'AutomationCollection', totalCount: number, items: Array<{ __typename?: 'Automation', id: string, name: string, enabled: boolean, model: { __typename?: 'Model', id: string, name: string }, runs: { __typename?: 'AutomateRunCollection', totalCount: number, items: Array<{ __typename?: 'AutomateRun', id: string, status: AutomateRunStatus, reason?: string | null, createdAt: string, updatedAt: string, version: { __typename?: 'Version', id: string } }> } }> } }, automateFunctions: { __typename?: 'AutomateFunctionCollection', items: Array<{ __typename?: 'AutomateFunction', id: string, name: string, isFeatured: boolean, description: string, logo?: string | null, creator: { __typename?: 'LimitedUser', id: string, name: string } }> } };
-
 export type ProjectDiscussionsPageHeader_ProjectFragment = { __typename?: 'Project', id: string, name: string };
 
 export type ProjectDiscussionsPageResults_ProjectFragment = { __typename?: 'Project', id: string };
@@ -3557,6 +3548,15 @@ export type ProjectDiscussionsPageQueryVariables = Exact<{
 
 export type ProjectDiscussionsPageQuery = { __typename?: 'Query', project: { __typename?: 'Project', id: string, name: string } };
 
+export type ProjectAutomationsTabQueryVariables = Exact<{
+  projectId: Scalars['String'];
+  search?: InputMaybe<Scalars['String']>;
+  cursor?: InputMaybe<Scalars['String']>;
+}>;
+
+
+export type ProjectAutomationsTabQuery = { __typename?: 'Query', project: { __typename?: 'Project', id: string, automations: { __typename?: 'AutomationCollection', totalCount: number, items: Array<{ __typename?: 'Automation', id: string, name: string, enabled: boolean, model: { __typename?: 'Model', id: string, name: string }, runs: { __typename?: 'AutomateRunCollection', totalCount: number, items: Array<{ __typename?: 'AutomateRun', id: string, status: AutomateRunStatus, reason?: string | null, createdAt: string, updatedAt: string, version: { __typename?: 'Version', id: string } }> } }> } }, automateFunctions: { __typename?: 'AutomateFunctionCollection', items: Array<{ __typename?: 'AutomateFunction', id: string, name: string, isFeatured: boolean, description: string, logo?: string | null, creator: { __typename?: 'LimitedUser', id: string, name: string } }> } };
+
 export type ProjectWebhooksQueryVariables = Exact<{
   projectId: Scalars['String'];
 }>;
@@ -3938,7 +3938,6 @@ export const ProjectPageProjectFragmentDoc = {"kind":"Document","definitions":[{
 export const RegisterPanelServerInviteDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"RegisterPanelServerInvite"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"token"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"serverInviteByToken"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"token"},"value":{"kind":"Variable","name":{"kind":"Name","value":"token"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}}]}}]}}]} as unknown as DocumentNode<RegisterPanelServerInviteQuery, RegisterPanelServerInviteQueryVariables>;
 export const EmailVerificationBannerStateDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"EmailVerificationBannerState"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"activeUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}},{"kind":"Field","name":{"kind":"Name","value":"verified"}},{"kind":"Field","name":{"kind":"Name","value":"hasPendingVerification"}}]}}]}}]} as unknown as DocumentNode<EmailVerificationBannerStateQuery, EmailVerificationBannerStateQueryVariables>;
 export const RequestVerificationDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"RequestVerification"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"requestVerification"}}]}}]} as unknown as DocumentNode<RequestVerificationMutation, RequestVerificationMutationVariables>;
-export const ProjectAutomationsTabDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectAutomationsTab"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"search"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cursor"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"automations"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"search"}}},{"kind":"Argument","name":{"kind":"Name","value":"cursor"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cursor"}}},{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"5"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageAutomationsRow_Automation"}}]}}]}}]}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageAutomationsEmptyState_Query"}}]}},...ProjectPageAutomationsRow_AutomationFragmentDoc.definitions,...AutomationRunDetailsFragmentDoc.definitions,...ProjectPageAutomationsEmptyState_QueryFragmentDoc.definitions,...AutomationsFunctionsCard_AutomateFunctionFragmentDoc.definitions]} as unknown as DocumentNode<ProjectAutomationsTabQuery, ProjectAutomationsTabQueryVariables>;
 export const OnUserProjectsUpdateDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"OnUserProjectsUpdate"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"userProjectsUpdated"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"project"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDashboardItem"}}]}}]}}]}},...ProjectDashboardItemFragmentDoc.definitions,...ProjectDashboardItemNoModelsFragmentDoc.definitions,...ProjectPageModelsCardProjectFragmentDoc.definitions,...ProjectPageModelsActions_ProjectFragmentDoc.definitions,...ProjectsModelPageEmbed_ProjectFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions,...ProjectPageLatestItemsModelItemFragmentDoc.definitions,...PendingFileUploadFragmentDoc.definitions,...ProjectPageModelsCardRenameDialogFragmentDoc.definitions,...ProjectPageModelsCardDeleteDialogFragmentDoc.definitions,...ProjectPageModelsActionsFragmentDoc.definitions,...ModelCardAutomationStatus_ModelFragmentDoc.definitions,...ModelCardAutomationStatus_AutomationsStatusFragmentDoc.definitions]} as unknown as DocumentNode<OnUserProjectsUpdateSubscription, OnUserProjectsUpdateSubscriptionVariables>;
 export const ActiveUserMainMetadataDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ActiveUserMainMetadata"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"activeUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"bio"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"isOnboardingFinished"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"verified"}},{"kind":"Field","name":{"kind":"Name","value":"notificationPreferences"}}]}}]}}]} as unknown as DocumentNode<ActiveUserMainMetadataQuery, ActiveUserMainMetadataQueryVariables>;
 export const CreateOnboardingProjectDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateOnboardingProject"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projectMutations"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createForOnboarding"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageProject"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDashboardItem"}}]}}]}}]}},...ProjectPageProjectFragmentDoc.definitions,...ProjectPageProjectHeaderFragmentDoc.definitions,...ProjectPageStatsBlockTeamFragmentDoc.definitions,...LimitedUserAvatarFragmentDoc.definitions,...ProjectPageTeamDialogFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions,...ProjectPageStatsBlockModelsFragmentDoc.definitions,...ProjectPageStatsBlockCommentsFragmentDoc.definitions,...ProjectDashboardItemFragmentDoc.definitions,...ProjectDashboardItemNoModelsFragmentDoc.definitions,...ProjectPageModelsCardProjectFragmentDoc.definitions,...ProjectPageModelsActions_ProjectFragmentDoc.definitions,...ProjectsModelPageEmbed_ProjectFragmentDoc.definitions,...ProjectPageLatestItemsModelItemFragmentDoc.definitions,...PendingFileUploadFragmentDoc.definitions,...ProjectPageModelsCardRenameDialogFragmentDoc.definitions,...ProjectPageModelsCardDeleteDialogFragmentDoc.definitions,...ProjectPageModelsActionsFragmentDoc.definitions,...ModelCardAutomationStatus_ModelFragmentDoc.definitions,...ModelCardAutomationStatus_AutomationsStatusFragmentDoc.definitions]} as unknown as DocumentNode<CreateOnboardingProjectMutation, CreateOnboardingProjectMutationVariables>;
@@ -3995,6 +3994,7 @@ export const ProjectModelPageDocument = {"kind":"Document","definitions":[{"kind
 export const ProjectModelVersionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectModelVersions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"modelId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"versionsCursor"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectModelPageVersionsPagination"}}]}}]}},...ProjectModelPageVersionsPaginationFragmentDoc.definitions,...ProjectModelPageVersionsCardVersionFragmentDoc.definitions,...LimitedUserAvatarFragmentDoc.definitions,...ProjectModelPageDialogDeleteVersionFragmentDoc.definitions,...ProjectModelPageDialogMoveToVersionFragmentDoc.definitions,...ModelCardAutomationStatus_VersionFragmentDoc.definitions,...ModelCardAutomationStatus_AutomationsStatusFragmentDoc.definitions,...ProjectsModelPageEmbed_ProjectFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions]} as unknown as DocumentNode<ProjectModelVersionsQuery, ProjectModelVersionsQueryVariables>;
 export const ProjectModelsPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectModelsPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectModelsPageHeader_Project"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectModelsPageResults_Project"}}]}}]}},...ProjectModelsPageHeader_ProjectFragmentDoc.definitions,...FormUsersSelectItemFragmentDoc.definitions,...ProjectModelsPageResults_ProjectFragmentDoc.definitions,...ProjectPageLatestItemsModelsFragmentDoc.definitions,...ProjectPageModelsStructureItem_ProjectFragmentDoc.definitions,...ProjectPageModelsActions_ProjectFragmentDoc.definitions,...ProjectsModelPageEmbed_ProjectFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions]} as unknown as DocumentNode<ProjectModelsPageQuery, ProjectModelsPageQueryVariables>;
 export const ProjectDiscussionsPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectDiscussionsPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDiscussionsPageHeader_Project"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDiscussionsPageResults_Project"}}]}}]}},...ProjectDiscussionsPageHeader_ProjectFragmentDoc.definitions,...ProjectDiscussionsPageResults_ProjectFragmentDoc.definitions]} as unknown as DocumentNode<ProjectDiscussionsPageQuery, ProjectDiscussionsPageQueryVariables>;
+export const ProjectAutomationsTabDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectAutomationsTab"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"search"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cursor"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"automations"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"search"}}},{"kind":"Argument","name":{"kind":"Name","value":"cursor"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cursor"}}},{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"5"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageAutomationsRow_Automation"}}]}}]}}]}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageAutomationsEmptyState_Query"}}]}},...ProjectPageAutomationsRow_AutomationFragmentDoc.definitions,...AutomationRunDetailsFragmentDoc.definitions,...ProjectPageAutomationsEmptyState_QueryFragmentDoc.definitions,...AutomationsFunctionsCard_AutomateFunctionFragmentDoc.definitions]} as unknown as DocumentNode<ProjectAutomationsTabQuery, ProjectAutomationsTabQueryVariables>;
 export const ProjectWebhooksDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectWebhooks"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"webhooks"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"streamId"}},{"kind":"Field","name":{"kind":"Name","value":"triggers"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"history"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"5"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"statusInfo"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}}]}}]} as unknown as DocumentNode<ProjectWebhooksQuery, ProjectWebhooksQueryVariables>;
 export const BlobDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Blob"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"blobId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"streamId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stream"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"streamId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"blob"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"blobId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"fileName"}},{"kind":"Field","name":{"kind":"Name","value":"fileType"}},{"kind":"Field","name":{"kind":"Name","value":"fileSize"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}}]}}]}}]}}]} as unknown as DocumentNode<BlobQuery, BlobQueryVariables>;
 export const OnProjectUpdatedDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"OnProjectUpdated"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projectUpdated"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"project"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageProject"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDashboardItemNoModels"}}]}}]}}]}},...ProjectPageProjectFragmentDoc.definitions,...ProjectPageProjectHeaderFragmentDoc.definitions,...ProjectPageStatsBlockTeamFragmentDoc.definitions,...LimitedUserAvatarFragmentDoc.definitions,...ProjectPageTeamDialogFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions,...ProjectPageStatsBlockModelsFragmentDoc.definitions,...ProjectPageStatsBlockCommentsFragmentDoc.definitions,...ProjectDashboardItemNoModelsFragmentDoc.definitions,...ProjectPageModelsCardProjectFragmentDoc.definitions,...ProjectPageModelsActions_ProjectFragmentDoc.definitions,...ProjectsModelPageEmbed_ProjectFragmentDoc.definitions]} as unknown as DocumentNode<OnProjectUpdatedSubscription, OnProjectUpdatedSubscriptionVariables>;
diff --git a/packages/frontend-2/lib/common/helpers/route.ts b/packages/frontend-2/lib/common/helpers/route.ts
index 2d0ea40419..17aa14c86e 100644
--- a/packages/frontend-2/lib/common/helpers/route.ts
+++ b/packages/frontend-2/lib/common/helpers/route.ts
@@ -22,6 +22,10 @@ export const projectRoute = (
 
   return res
 }
+export const projectAutomationRoute = (projectId: string, automationId: string) => {
+  return `${projectRoute(projectId, 'automations')}/${automationId}`
+}
+
 export const modelRoute = (
   projectId: string,
   resourceIdString: string,
diff --git a/packages/frontend-2/lib/projects/graphql/queries.ts b/packages/frontend-2/lib/projects/graphql/queries.ts
index 6269566994..227ad506f5 100644
--- a/packages/frontend-2/lib/projects/graphql/queries.ts
+++ b/packages/frontend-2/lib/projects/graphql/queries.ts
@@ -207,6 +207,21 @@ export const projectDiscussionsPageQuery = graphql(`
   }
 `)
 
+export const projectAutomationsTabQuery = graphql(`
+  query ProjectAutomationsTab($projectId: String!, $search: String, $cursor: String) {
+    project(id: $projectId) {
+      id
+      automations(filter: $search, cursor: $cursor, limit: 5) {
+        totalCount
+        items {
+          ...ProjectPageAutomationsRow_Automation
+        }
+      }
+    }
+    ...ProjectPageAutomationsEmptyState_Query
+  }
+`)
+
 export const projectWebhooksQuery = graphql(`
   query ProjectWebhooks($projectId: String!) {
     project(id: $projectId) {
diff --git a/packages/frontend-2/pages/projects/[id]/index.vue b/packages/frontend-2/pages/projects/[id]/index.vue
index b61eb53d7b..df33a08eaa 100644
--- a/packages/frontend-2/pages/projects/[id]/index.vue
+++ b/packages/frontend-2/pages/projects/[id]/index.vue
@@ -27,6 +27,7 @@ import { useApolloClient, useQuery } from '@vue/apollo-composable'
 import type { Optional } from '@speckle/shared'
 import { graphql } from '~~/lib/common/generated/gql'
 import {
+  projectAutomationsTabQuery,
   projectDiscussionsPageQuery,
   projectModelsPageQuery,
   projectPageQuery
@@ -133,7 +134,7 @@ const activePageTab = computed({
   get: () => {
     const path = router.currentRoute.value.path
     if (/\/discussions\/?$/i.test(path)) return pageTabItems.value[1]
-    if (/\/automations\/?$/i.test(path)) return pageTabItems.value[2]
+    if (/\/automations\/?.*$/i.test(path)) return pageTabItems.value[2]
     return pageTabItems.value[0]
   },
   set: (val: LayoutPageTabItem) => {
@@ -181,6 +182,15 @@ if (process.server) {
         }
       })
       .catch(convertThrowIntoFetchResult)
+  } else if (serverActiveTab.id === 'automations') {
+    await client.query({
+      query: projectAutomationsTabQuery,
+      variables: {
+        projectId: projectId.value,
+        search: null,
+        cursor: null
+      }
+    })
   }
 }
 </script>
diff --git a/packages/frontend-2/pages/projects/[id]/index/automations.vue b/packages/frontend-2/pages/projects/[id]/index/automations.vue
new file mode 100644
index 0000000000..8f62b8bf92
--- /dev/null
+++ b/packages/frontend-2/pages/projects/[id]/index/automations.vue
@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>
diff --git a/packages/frontend-2/pages/projects/[id]/index/automations/[aid].vue b/packages/frontend-2/pages/projects/[id]/index/automations/[aid].vue
new file mode 100644
index 0000000000..b33092b0de
--- /dev/null
+++ b/packages/frontend-2/pages/projects/[id]/index/automations/[aid].vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Hello and welcome!</div>
+</template>
diff --git a/packages/frontend-2/pages/projects/[id]/index/automations/index.vue b/packages/frontend-2/pages/projects/[id]/index/automations/index.vue
new file mode 100644
index 0000000000..5762eefe0a
--- /dev/null
+++ b/packages/frontend-2/pages/projects/[id]/index/automations/index.vue
@@ -0,0 +1,3 @@
+<template>
+  <ProjectPageAutomationsTab />
+</template>

From 6c7d07d0ac670324c7183f122558e698ab203452 Mon Sep 17 00:00:00 2001
From: Kristaps Fabians Geikins <fabis94@live.com>
Date: Tue, 26 Mar 2024 13:31:47 +0200
Subject: [PATCH 18/22] refactored editable title/description

---
 .../common/EditableTitleDescription.vue       | 205 +-----------------
 .../common/editable/Description.vue           |  64 ++++++
 .../components/common/editable/Title.vue      |  54 +++++
 .../components/project/page/Header.vue        |   3 +-
 .../project/page/automation/Header.vue        |  21 ++
 .../project/page/automations/Header.vue       |   2 +-
 .../pages/projects/[id]/index/automations.vue |   2 +-
 .../projects/[id]/index/automations/[aid].vue |   5 +-
 packages/tailwind-theme/src/plugin.ts         |  17 ++
 .../src/composables/form/textInput.ts         |  85 +++++++-
 10 files changed, 246 insertions(+), 212 deletions(-)
 create mode 100644 packages/frontend-2/components/common/editable/Description.vue
 create mode 100644 packages/frontend-2/components/common/editable/Title.vue
 create mode 100644 packages/frontend-2/components/project/page/automation/Header.vue

diff --git a/packages/frontend-2/components/common/EditableTitleDescription.vue b/packages/frontend-2/components/common/EditableTitleDescription.vue
index 46df5cc0ef..28ac4dc9f1 100644
--- a/packages/frontend-2/components/common/EditableTitleDescription.vue
+++ b/packages/frontend-2/components/common/EditableTitleDescription.vue
@@ -1,205 +1,14 @@
 <template>
   <div>
-    <!-- Editable Title -->
-    <div class="flex group">
-      <label class="max-w-full overflow-hidden">
-        <div class="sr-only">Edit title</div>
-        <div
-          :class="titleInputClasses"
-          class="grow-textarea"
-          :data-replicated-value="title"
-        >
-          <textarea
-            v-model="title"
-            name="Title"
-            maxlength="512"
-            :class="titleInputClasses"
-            placeholder="Please enter a valid title"
-            rows="1"
-            spellcheck="false"
-            :disabled="isDisabled"
-            :cols="title && title.length < 20 ? title.length : undefined"
-            data-type="title"
-            @keydown="onInputKeydown"
-            @blur="onBlur('title')"
-            @input="onTitleInput"
-          />
-        </div>
-      </label>
-      <PencilIcon
-        v-if="canEdit"
-        class="shrink-0 ml-2 mt-3 w-4 h-4 opacity-0 group-hover:opacity-100 transition text-foreground-2"
-      />
-    </div>
-
-    <!-- Editable Description -->
-    <div class="flex gap-x-2 group">
-      <label>
-        <div class="sr-only">Edit description</div>
-        <div
-          class="grow-textarea"
-          :data-replicated-value="description"
-          :class="descriptionInputClasses"
-        >
-          <textarea
-            v-model="description"
-            name="Description"
-            :class="[
-              ...descriptionInputClasses,
-              description ? 'focus:min-w-0' : 'min-w-[260px]'
-            ]"
-            :placeholder="description ? undefined : 'Click here to add a description.'"
-            :disabled="isDisabled"
-            rows="1"
-            spellcheck="false"
-            maxlength="1000"
-            :cols="
-              description && description?.length < 20 ? description.length : undefined
-            "
-            data-type="description"
-            @keydown="onInputKeydown"
-            @blur="onBlur('description')"
-            @input="onDescriptionInput"
-          />
-        </div>
-      </label>
-      <div class="shrink-0 ml-2 mt-1 text-foreground-2">
-        <PencilIcon
-          v-if="canEdit"
-          class="w-4 h-4 opacity-0 group-hover:opacity-100 transition text-foreground-2"
-        />
-      </div>
-    </div>
+    <CommonEditableTitle v-model="title" :disabled="disabled" />
+    <CommonEditableDescription v-model="description" :disabled="disabled" />
   </div>
 </template>
-
 <script setup lang="ts">
-import { PencilIcon } from '@heroicons/vue/20/solid'
-import { debounce } from 'lodash-es'
-
-const props = defineProps({
-  title: String,
-  description: String,
-  canEdit: Boolean,
-  isDisabled: Boolean
-})
-
-const emit = defineEmits(['update:title', 'update:description'])
-
-const title = ref(props.title)
-const description = ref(props.description)
-
-const lastTitleValue = ref(props.title)
-const lastDescriptionValue = ref(props.description)
-
-const titleDebounceSaved = ref(false)
-const descriptionDebounceSaved = ref(false)
-
-const emitTitle = () => {
-  lastTitleValue.value = title.value
-  titleDebounceSaved.value = true
-  emit('update:title', title.value)
-}
-
-const emitDescription = () => {
-  lastDescriptionValue.value = description.value
-  descriptionDebounceSaved.value = true
-  emit('update:description', description.value)
-}
-
-const debouncedEmitTitle = debounce(emitTitle, 2000)
-const debouncedEmitDescription = debounce(emitDescription, 2000)
-
-const titleInputClasses = computed(() => [
-  'h3 tracking-tight border-0 border-b-2 transition focus:border-outline-3 max-w-full',
-  'p-0 pb-1 bg-transparent border-transparent focus:outline-none focus:ring-0'
-])
-
-const descriptionInputClasses = computed(() => [
-  'normal placeholder:text-foreground-2 text-foreground-2 focus:text-foreground',
-  'border-0 border-b-2 focus:border-outline-3',
-  'p-0 bg-transparent border-transparent focus:outline-none focus:ring-0'
-])
+defineProps<{
+  disabled?: boolean
+}>()
 
-const onInputKeydown = (e: KeyboardEvent) => {
-  if (e.target instanceof HTMLElement) {
-    if (e.target.dataset.type === 'title' && e.code === 'Enter') {
-      e.preventDefault()
-      e.target.blur()
-    }
-  }
-}
-
-const onBlur = (inputType: string) => {
-  debouncedEmitTitle.cancel()
-  debouncedEmitDescription.cancel()
-
-  if (inputType === 'title' && !titleDebounceSaved.value) {
-    if (lastTitleValue.value !== title.value) {
-      lastTitleValue.value = title.value
-      emitTitle()
-    }
-  } else if (inputType === 'description' && !descriptionDebounceSaved.value) {
-    if (lastDescriptionValue.value !== description.value) {
-      lastDescriptionValue.value = description.value
-      emitDescription()
-    }
-  }
-}
-
-const onTitleInput = () => {
-  titleDebounceSaved.value = false
-  debouncedEmitTitle()
-}
-
-const onDescriptionInput = () => {
-  descriptionDebounceSaved.value = false
-  debouncedEmitDescription()
-}
-
-watch(
-  () => props.title,
-  (newVal) => {
-    title.value = newVal
-  }
-)
-watch(
-  () => props.description,
-  (newVal) => {
-    description.value = newVal
-  }
-)
+const description = defineModel<string>('description', { required: true })
+const title = defineModel<string>('title', { required: true })
 </script>
-
-<style scoped>
-/** more info: https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ */
-.grow-textarea {
-  /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
-  display: grid;
-}
-
-.grow-textarea::after {
-  /* Note the weird space! Needed to preventy jumpy behavior */
-  content: attr(data-replicated-value) ' ';
-
-  /* This is how textarea text behaves */
-  white-space: pre-wrap;
-
-  /* Hidden from view, clicks, and screen readers */
-  visibility: hidden;
-}
-
-.grow-textarea > textarea {
-  /* You could leave this, but after a user resizes, then it ruins the auto sizing */
-  resize: none;
-
-  /* Firefox shows scrollbar on growth, you can hide like this. */
-  overflow: hidden;
-}
-
-.grow-textarea > textarea,
-.grow-textarea::after {
-  /* Place on top of each other - has to have the same styling as the textarea! */
-  grid-area: 1 / 1 / 2 / 2;
-}
-</style>
diff --git a/packages/frontend-2/components/common/editable/Description.vue b/packages/frontend-2/components/common/editable/Description.vue
new file mode 100644
index 0000000000..20b382685d
--- /dev/null
+++ b/packages/frontend-2/components/common/editable/Description.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="flex gap-x-2 group">
+    <label>
+      <div class="sr-only">Edit description</div>
+      <div
+        class="grow-textarea"
+        :data-replicated-value="visibleDescription"
+        :class="descriptionInputClasses"
+      >
+        <textarea
+          name="Description"
+          :class="[
+            ...descriptionInputClasses,
+            visibleDescription ? 'focus:min-w-0' : 'min-w-[260px]'
+          ]"
+          :placeholder="
+            visibleDescription ? undefined : 'Click here to add a description.'
+          "
+          :disabled="disabled"
+          rows="1"
+          spellcheck="false"
+          maxlength="1000"
+          :cols="
+            visibleDescription && visibleDescription?.length < 20
+              ? visibleDescription.length
+              : undefined
+          "
+          data-type="description"
+          :value="visibleDescription"
+          v-on="on"
+        />
+      </div>
+    </label>
+    <div class="shrink-0 ml-2 mt-1 text-foreground-2">
+      <PencilIcon
+        v-if="!disabled"
+        class="w-4 h-4 opacity-0 group-hover:opacity-100 transition text-foreground-2"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { PencilIcon } from '@heroicons/vue/20/solid'
+import { useDebouncedTextInput } from '@speckle/ui-components'
+
+defineProps<{
+  disabled?: boolean
+}>()
+
+const description = defineModel<string>({ required: true })
+const { on, bind } = useDebouncedTextInput({
+  model: description,
+  submitOnEnter: false,
+  debouncedBy: 2000,
+  isBasicHtmlInput: true
+})
+const visibleDescription = computed(() => bind.modelValue.value)
+
+const descriptionInputClasses = computed(() => [
+  'normal placeholder:text-foreground-2 text-foreground-2 focus:text-foreground',
+  'border-0 border-b-2 focus:border-outline-3',
+  'p-0 bg-transparent border-transparent focus:outline-none focus:ring-0'
+])
+</script>
diff --git a/packages/frontend-2/components/common/editable/Title.vue b/packages/frontend-2/components/common/editable/Title.vue
new file mode 100644
index 0000000000..71c300fc89
--- /dev/null
+++ b/packages/frontend-2/components/common/editable/Title.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="flex group">
+    <label class="max-w-full overflow-hidden">
+      <div class="sr-only">Edit title</div>
+      <div
+        :class="titleInputClasses"
+        class="grow-textarea"
+        :data-replicated-value="visibleTitle"
+      >
+        <textarea
+          name="Title"
+          maxlength="512"
+          :class="titleInputClasses"
+          placeholder="Please enter a valid title"
+          rows="1"
+          spellcheck="false"
+          :disabled="disabled"
+          :cols="
+            visibleTitle && visibleTitle.length < 20 ? visibleTitle.length : undefined
+          "
+          data-type="title"
+          :value="visibleTitle"
+          v-on="on"
+        />
+      </div>
+    </label>
+    <PencilIcon
+      v-if="!disabled"
+      class="shrink-0 ml-2 mt-3 w-4 h-4 opacity-0 group-hover:opacity-100 transition text-foreground-2"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { PencilIcon } from '@heroicons/vue/20/solid'
+import { useDebouncedTextInput } from '@speckle/ui-components'
+
+defineProps<{
+  disabled?: boolean
+}>()
+
+const title = defineModel<string>({ required: true })
+const { on, bind } = useDebouncedTextInput({
+  model: title,
+  debouncedBy: 2000,
+  isBasicHtmlInput: true,
+  submitOnEnter: true
+})
+const visibleTitle = computed(() => bind.modelValue.value)
+
+const titleInputClasses = computed(() => [
+  'h3 tracking-tight border-0 border-b-2 transition focus:border-outline-3 max-w-full',
+  'p-0 pb-1 bg-transparent border-transparent focus:outline-none focus:ring-0'
+])
+</script>
diff --git a/packages/frontend-2/components/project/page/Header.vue b/packages/frontend-2/components/project/page/Header.vue
index a6247ec128..4d8e35b7a0 100644
--- a/packages/frontend-2/components/project/page/Header.vue
+++ b/packages/frontend-2/components/project/page/Header.vue
@@ -10,8 +10,7 @@
     <CommonEditableTitleDescription
       :title="titleState"
       :description="descriptionState"
-      :can-edit="canEdit"
-      :is-disabled="anyMutationsLoading"
+      :disabled="anyMutationsLoading || !canEdit"
       @update:title="handleUpdateTitle"
       @update:description="handleUpdateDescription"
     />
diff --git a/packages/frontend-2/components/project/page/automation/Header.vue b/packages/frontend-2/components/project/page/automation/Header.vue
new file mode 100644
index 0000000000..ff573f85ea
--- /dev/null
+++ b/packages/frontend-2/components/project/page/automation/Header.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="flex flex-col">
+    <CommonTextLink :icon-left="ArrowLeftIcon" size="xs" :to="automationsLink">
+      Go Back to Automations
+    </CommonTextLink>
+    <div class="flex gap-1 items-center">
+      <h1 class="block h4 font-bold">Automations</h1>
+      <ChevronRightIcon class="w-5 h-5" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ArrowLeftIcon } from '@heroicons/vue/24/outline'
+import { ChevronRightIcon } from '@heroicons/vue/24/solid'
+import { projectRoute } from '~/lib/common/helpers/route'
+
+const route = useRoute()
+const projectId = computed(() => route.params.id as string)
+
+const automationsLink = computed(() => projectRoute(projectId.value, 'automations'))
+</script>
diff --git a/packages/frontend-2/components/project/page/automations/Header.vue b/packages/frontend-2/components/project/page/automations/Header.vue
index e91ec054e6..22e5b4389a 100644
--- a/packages/frontend-2/components/project/page/automations/Header.vue
+++ b/packages/frontend-2/components/project/page/automations/Header.vue
@@ -32,6 +32,6 @@ defineProps<{
   hasAutomations?: boolean
 }>()
 
-const search = defineModel<string>('search', { local: true })
+const search = defineModel<string>('search')
 const { on, bind } = useDebouncedTextInput({ model: search })
 </script>
diff --git a/packages/frontend-2/pages/projects/[id]/index/automations.vue b/packages/frontend-2/pages/projects/[id]/index/automations.vue
index 8f62b8bf92..0850dc6ca9 100644
--- a/packages/frontend-2/pages/projects/[id]/index/automations.vue
+++ b/packages/frontend-2/pages/projects/[id]/index/automations.vue
@@ -1,3 +1,3 @@
 <template>
-  <NuxtPage />
+  <div><NuxtPage /></div>
 </template>
diff --git a/packages/frontend-2/pages/projects/[id]/index/automations/[aid].vue b/packages/frontend-2/pages/projects/[id]/index/automations/[aid].vue
index b33092b0de..739c92074a 100644
--- a/packages/frontend-2/pages/projects/[id]/index/automations/[aid].vue
+++ b/packages/frontend-2/pages/projects/[id]/index/automations/[aid].vue
@@ -1,3 +1,6 @@
 <template>
-  <div>Hello and welcome!</div>
+  <div class="flex flex-col gap-8 items-start">
+    <ProjectPageAutomationHeader />
+  </div>
 </template>
+<script setup lang="ts"></script>
diff --git a/packages/tailwind-theme/src/plugin.ts b/packages/tailwind-theme/src/plugin.ts
index 1c9287e6f4..34fd35ebf2 100644
--- a/packages/tailwind-theme/src/plugin.ts
+++ b/packages/tailwind-theme/src/plugin.ts
@@ -238,6 +238,23 @@ export default plugin(function ({ addComponents, addBase }) {
       '&::-webkit-scrollbar-thumb:active': {
         background: 'rgba(90 90 90 10100%)'
       }
+    },
+    // Auto-growing textarea for editable fields
+    // more info: https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/
+    '.grow-textarea': {
+      display: 'grid',
+      '&::after': {
+        content: "attr(data-replicated-value) ' '",
+        visibility: 'hidden',
+        'white-space': 'pre-wrap'
+      },
+      '& > textarea': {
+        resize: 'none',
+        overflow: 'hidden'
+      },
+      '& > textarea, &::after': {
+        'grid-area': '1 / 1 / 2 / 2'
+      }
     }
   })
 }, preset)
diff --git a/packages/ui-components/src/composables/form/textInput.ts b/packages/ui-components/src/composables/form/textInput.ts
index 01cfa771c8..e7041dfade 100644
--- a/packages/ui-components/src/composables/form/textInput.ts
+++ b/packages/ui-components/src/composables/form/textInput.ts
@@ -5,7 +5,7 @@ import { computed, onMounted, ref, unref, watch } from 'vue'
 import type { Ref, ToRefs } from 'vue'
 import type { MaybeNullOrUndefined, Nullable } from '@speckle/shared'
 import { nanoid } from 'nanoid'
-import { debounce, isArray } from 'lodash'
+import { debounce, isArray, isBoolean, isString, isUndefined, noop } from 'lodash'
 
 export type InputColor = 'page' | 'foundation' | 'transparent'
 
@@ -152,12 +152,14 @@ export function useTextInputCore<V extends string | string[] = string>(params: {
   }
 }
 
+type FormInputChangeEvent = { event?: Event; value: string }
+
 /**
  * Attach returned on and bind using v-on and v-bind, and then you can use the returned `value`
  * ref to get the input's value while ensuring normal input events are debounced and only change/clear
  * events cause the value to propagate immediately
  *
- * Very useful for search inputs!
+ * Very useful for search inputs and other kind of auto-submitting inputs!
  */
 export function useDebouncedTextInput(params: {
   /**
@@ -170,30 +172,95 @@ export function useDebouncedTextInput(params: {
    * Optionally pass in the model ref that should be used as the source of truth
    */
   model?: Ref<MaybeNullOrUndefined<string>>
+
+  /**
+   * Set to true if you're tracking changes on a basic HTML input element. This will change the events
+   * being used (e.g. input instead of update:modelValue)
+   *
+   * Default: false
+   */
+  isBasicHtmlInput?: boolean
+
+  /**
+   * Set to false if you don't want the change event to be emitted on Enter key press.
+   * Setting only works for basic html inputs currently!
+   *
+   * Default: Default behavior (true for input, false for textarea)
+   */
+  submitOnEnter?: boolean
+
+  /**
+   * Set to true if you want to see debug output for how events fire and are handled
+   */
+  debug?: boolean | ((...logArgs: unknown[]) => void)
 }) {
-  const { debouncedBy = 1000 } = params
+  const { debouncedBy = 1000, isBasicHtmlInput = false, submitOnEnter } = params
+  const log = params.debug
+    ? isBoolean(params.debug)
+      ? console.debug
+      : params.debug
+    : noop
 
   const value = params.model || ref('')
   const model = ref(value.value)
 
+  const getValue = (val: string | InputEvent | Event | FormInputChangeEvent) => {
+    if (isString(val)) return val
+    if ('value' in val) return val.value
+
+    const target = val.target as Nullable<HTMLInputElement | HTMLTextAreaElement>
+    return target?.value || ''
+  }
+
   const debouncedValueUpdate = debounce((val: string) => {
     value.value = val
+    log('Value updated: ' + val)
   }, debouncedBy)
 
+  const inputEventName = isBasicHtmlInput ? 'input' : 'update:modelValue'
   const on = {
-    'update:modelValue': (val: string) => {
-      model.value = val
-      debouncedValueUpdate(val)
+    [inputEventName]: (val: string | InputEvent) => {
+      const newVal = getValue(val)
+      model.value = newVal
+      debouncedValueUpdate(newVal)
+      log(`Input event [${inputEventName}] triggered: ${newVal}`)
     },
     clear: () => {
       debouncedValueUpdate.cancel()
       model.value = ''
       value.value = ''
+      log('Clear event')
     },
-    change: (val: { event?: Event; value: string }) => {
+    change: (val: FormInputChangeEvent | Event) => {
+      const newVal = getValue(val)
       debouncedValueUpdate.cancel()
-      value.value = val.value
-      model.value = val.value
+      value.value = newVal
+      model.value = newVal
+      log('Change event: ' + newVal)
+    },
+    keydown: (e: KeyboardEvent) => {
+      if (!isBasicHtmlInput) return
+      if (isUndefined(submitOnEnter)) return
+
+      const isEnter = e.key === 'Enter'
+      if (!isEnter) return
+
+      const isTextarea = e.target instanceof HTMLTextAreaElement
+
+      if (isTextarea) {
+        if (submitOnEnter) {
+          log('Triggering submit on enter')
+          e.preventDefault()
+          e.stopPropagation()
+          on.change(e)
+        }
+      } else {
+        if (!submitOnEnter) {
+          log('Preventing submit on enter')
+          e.preventDefault()
+          e.stopPropagation()
+        }
+      }
     }
   }
   const bind = {

From 24dab67ab0c7d2772b41a756c18248e26ab29b25 Mon Sep 17 00:00:00 2001
From: Kristaps Fabians Geikins <fabis94@live.com>
Date: Tue, 26 Mar 2024 13:33:17 +0200
Subject: [PATCH 19/22] models title fix

---
 packages/frontend-2/components/project/model-page/Header.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/frontend-2/components/project/model-page/Header.vue b/packages/frontend-2/components/project/model-page/Header.vue
index 6af807300b..87544f8396 100644
--- a/packages/frontend-2/components/project/model-page/Header.vue
+++ b/packages/frontend-2/components/project/model-page/Header.vue
@@ -15,8 +15,7 @@
     <CommonEditableTitleDescription
       :title="titleState"
       :description="descriptionState"
-      :can-edit="canEdit"
-      :is-disabled="anyMutationsLoading"
+      :disabled="anyMutationsLoading || !canEdit"
       @update:title="handleUpdateTitle"
       @update:description="handleUpdateDescription"
     />

From e6e430e8fab1a5dcddc15331d44dbd886c760566 Mon Sep 17 00:00:00 2001
From: Kristaps Fabians Geikins <fabis94@live.com>
Date: Tue, 26 Mar 2024 14:06:40 +0200
Subject: [PATCH 20/22] update title mutation

---
 .../project/page/automation/Header.vue        | 49 ++++++++++++++++--
 .../lib/common/generated/gql/gql.ts           | 20 ++++++++
 .../lib/common/generated/gql/graphql.ts       | 51 +++++++++++++++++++
 .../composables/automationManagement.ts       | 45 ++++++++++++++++
 .../lib/projects/graphql/mutations.ts         | 13 +++++
 .../lib/projects/graphql/queries.ts           | 12 +++++
 .../projects/[id]/index/automations/[aid].vue | 31 +++++++++--
 .../assets/automate/typedefs/automate.graphql | 14 +++++
 .../modules/core/graph/generated/graphql.ts   | 39 ++++++++++++++
 .../graph/generated/graphql.ts                | 27 ++++++++++
 packages/server/modules/mocks.ts              | 13 +++++
 .../server/test/graphql/generated/graphql.ts  | 27 ++++++++++
 12 files changed, 334 insertions(+), 7 deletions(-)
 create mode 100644 packages/frontend-2/lib/projects/composables/automationManagement.ts

diff --git a/packages/frontend-2/components/project/page/automation/Header.vue b/packages/frontend-2/components/project/page/automation/Header.vue
index ff573f85ea..3e359eb33f 100644
--- a/packages/frontend-2/components/project/page/automation/Header.vue
+++ b/packages/frontend-2/components/project/page/automation/Header.vue
@@ -1,21 +1,62 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col items-start">
     <CommonTextLink :icon-left="ArrowLeftIcon" size="xs" :to="automationsLink">
       Go Back to Automations
     </CommonTextLink>
     <div class="flex gap-1 items-center">
       <h1 class="block h4 font-bold">Automations</h1>
       <ChevronRightIcon class="w-5 h-5" />
+      <CommonEditableTitle v-model="name" />
     </div>
   </div>
 </template>
 <script setup lang="ts">
 import { ArrowLeftIcon } from '@heroicons/vue/24/outline'
 import { ChevronRightIcon } from '@heroicons/vue/24/solid'
+import { graphql } from '~/lib/common/generated/gql'
+import type { ProjectPageAutomationHeader_AutomationFragment } from '~/lib/common/generated/gql/graphql'
 import { projectRoute } from '~/lib/common/helpers/route'
+import { useUpdateAutomation } from '~/lib/projects/composables/automationManagement'
 
-const route = useRoute()
-const projectId = computed(() => route.params.id as string)
+graphql(`
+  fragment ProjectPageAutomationHeader_Automation on Automation {
+    id
+    name
+  }
+`)
 
-const automationsLink = computed(() => projectRoute(projectId.value, 'automations'))
+const props = defineProps<{
+  projectId: string
+  automation: ProjectPageAutomationHeader_AutomationFragment
+}>()
+
+const updateAutomation = useUpdateAutomation()
+
+const automationsLink = computed(() => projectRoute(props.projectId, 'automations'))
+const name = computed({
+  get: () => props.automation.name,
+  set: async (newVal) => {
+    if (newVal === props.automation.name) return
+
+    const args = {
+      projectId: props.projectId,
+      input: {
+        id: props.automation.id,
+        name: newVal
+      }
+    }
+    await updateAutomation(args, {
+      optimisticResponse: {
+        projectMutations: {
+          automationMutations: {
+            update: {
+              id: args.input.id,
+              name: args.input.name || props.automation.name
+            }
+          }
+        }
+      }
+    })
+  }
+})
 </script>
diff --git a/packages/frontend-2/lib/common/generated/gql/gql.ts b/packages/frontend-2/lib/common/generated/gql/gql.ts
index df289245bf..eab2abe984 100644
--- a/packages/frontend-2/lib/common/generated/gql/gql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/gql.ts
@@ -33,6 +33,7 @@ const documents = {
     "\n  fragment ProjectsModelPageEmbed_Project on Project {\n    id\n    ...ProjectsPageTeamDialogManagePermissions_Project\n  }\n": types.ProjectsModelPageEmbed_ProjectFragmentDoc,
     "\n  fragment ProjectModelPageVersionsCardVersion on Version {\n    id\n    message\n    authorUser {\n      ...LimitedUserAvatar\n    }\n    createdAt\n    previewUrl\n    sourceApplication\n    commentThreadCount: commentThreads(limit: 0) {\n      totalCount\n    }\n    ...ProjectModelPageDialogDeleteVersion\n    ...ProjectModelPageDialogMoveToVersion\n    ...ModelCardAutomationStatus_Version\n  }\n": types.ProjectModelPageVersionsCardVersionFragmentDoc,
     "\n  fragment ProjectPageProjectHeader on Project {\n    id\n    role\n    name\n    description\n    visibility\n    allowPublicComments\n  }\n": types.ProjectPageProjectHeaderFragmentDoc,
+    "\n  fragment ProjectPageAutomationHeader_Automation on Automation {\n    id\n    name\n  }\n": types.ProjectPageAutomationHeader_AutomationFragmentDoc,
     "\n  fragment ProjectPageAutomationsEmptyState_Query on Query {\n    automateFunctions(limit: 9) {\n      items {\n        ...AutomationsFunctionsCard_AutomateFunction\n      }\n    }\n  }\n": types.ProjectPageAutomationsEmptyState_QueryFragmentDoc,
     "\n  fragment ProjectPageAutomationsRow_Automation on Automation {\n    id\n    name\n    enabled\n    model {\n      id\n      name\n    }\n    runs(limit: 5) {\n      totalCount\n      items {\n        ...AutomationRunDetails\n      }\n    }\n  }\n": types.ProjectPageAutomationsRow_AutomationFragmentDoc,
     "\n  fragment ProjectDiscussionsPageHeader_Project on Project {\n    id\n    name\n  }\n": types.ProjectDiscussionsPageHeader_ProjectFragmentDoc,
@@ -117,6 +118,7 @@ const documents = {
     "\n  mutation deleteWebhook($webhook: WebhookDeleteInput!) {\n    webhookDelete(webhook: $webhook)\n  }\n": types.DeleteWebhookDocument,
     "\n  mutation createWebhook($webhook: WebhookCreateInput!) {\n    webhookCreate(webhook: $webhook)\n  }\n": types.CreateWebhookDocument,
     "\n  mutation updateWebhook($webhook: WebhookUpdateInput!) {\n    webhookUpdate(webhook: $webhook)\n  }\n": types.UpdateWebhookDocument,
+    "\n  mutation UpdateAutomation($projectId: ID!, $input: ProjectAutomationUpdateInput!) {\n    projectMutations {\n      automationMutations(projectId: $projectId) {\n        update(input: $input) {\n          id\n          ...ProjectPageAutomationPage_Automation\n        }\n      }\n    }\n  }\n": types.UpdateAutomationDocument,
     "\n  query ProjectAccessCheck($id: String!) {\n    project(id: $id) {\n      id\n    }\n  }\n": types.ProjectAccessCheckDocument,
     "\n  query ProjectsDashboardQuery($filter: UserProjectsFilter, $cursor: String) {\n    activeUser {\n      id\n      projects(filter: $filter, limit: 6, cursor: $cursor) {\n        cursor\n        totalCount\n        items {\n          ...ProjectDashboardItem\n        }\n      }\n      ...ProjectsInviteBanners\n    }\n  }\n": types.ProjectsDashboardQueryDocument,
     "\n  query ProjectPageQuery($id: String!, $token: String) {\n    project(id: $id) {\n      ...ProjectPageProject\n    }\n    projectInvite(projectId: $id, token: $token) {\n      ...ProjectsInviteBanner\n    }\n  }\n": types.ProjectPageQueryDocument,
@@ -133,6 +135,7 @@ const documents = {
     "\n  query ProjectModelsPage($projectId: String!) {\n    project(id: $projectId) {\n      id\n      ...ProjectModelsPageHeader_Project\n      ...ProjectModelsPageResults_Project\n    }\n  }\n": types.ProjectModelsPageDocument,
     "\n  query ProjectDiscussionsPage($projectId: String!) {\n    project(id: $projectId) {\n      id\n      ...ProjectDiscussionsPageHeader_Project\n      ...ProjectDiscussionsPageResults_Project\n    }\n  }\n": types.ProjectDiscussionsPageDocument,
     "\n  query ProjectAutomationsTab($projectId: String!, $search: String, $cursor: String) {\n    project(id: $projectId) {\n      id\n      automations(filter: $search, cursor: $cursor, limit: 5) {\n        totalCount\n        items {\n          ...ProjectPageAutomationsRow_Automation\n        }\n      }\n    }\n    ...ProjectPageAutomationsEmptyState_Query\n  }\n": types.ProjectAutomationsTabDocument,
+    "\n  query ProjectAutomationPage($projectId: String!, $automationId: String!) {\n    project(id: $projectId) {\n      id\n      automation(id: $automationId) {\n        id\n        ...ProjectPageAutomationPage_Automation\n      }\n    }\n  }\n": types.ProjectAutomationPageDocument,
     "\n  query ProjectWebhooks($projectId: String!) {\n    project(id: $projectId) {\n      id\n      name\n      webhooks {\n        items {\n          streamId\n          triggers\n          enabled\n          url\n          id\n          description\n          history(limit: 5) {\n            items {\n              status\n              statusInfo\n            }\n          }\n        }\n        totalCount\n      }\n    }\n  }\n": types.ProjectWebhooksDocument,
     "\n  query Blob($blobId: String!, $streamId: String!) {\n    stream(id: $streamId) {\n      blob(id: $blobId) {\n        id\n        fileName\n        fileType\n        fileSize\n        createdAt\n      }\n    }\n  }\n": types.BlobDocument,
     "\n  subscription OnProjectUpdated($id: String!) {\n    projectUpdated(id: $id) {\n      id\n      type\n      project {\n        ...ProjectPageProject\n        ...ProjectDashboardItemNoModels\n      }\n    }\n  }\n": types.OnProjectUpdatedDocument,
@@ -180,6 +183,7 @@ const documents = {
     "\n  query LegacyViewerCommitRedirectMetadata($streamId: String!, $commitId: String!) {\n    stream(id: $streamId) {\n      commit(id: $commitId) {\n        id\n        branch {\n          id\n        }\n      }\n    }\n  }\n": types.LegacyViewerCommitRedirectMetadataDocument,
     "\n  query ResolveCommentLink($commentId: String!, $projectId: String!) {\n    comment(id: $commentId, streamId: $projectId) {\n      ...LinkableComment\n    }\n  }\n": types.ResolveCommentLinkDocument,
     "\n  fragment ProjectPageProject on Project {\n    id\n    createdAt\n    ...ProjectPageProjectHeader\n    ...ProjectPageStatsBlockTeam\n    ...ProjectPageTeamDialog\n    ...ProjectPageStatsBlockModels\n    ...ProjectPageStatsBlockComments\n  }\n": types.ProjectPageProjectFragmentDoc,
+    "\n  fragment ProjectPageAutomationPage_Automation on Automation {\n    id\n    ...ProjectPageAutomationHeader_Automation\n  }\n": types.ProjectPageAutomationPage_AutomationFragmentDoc,
 };
 
 /**
@@ -276,6 +280,10 @@ export function graphql(source: "\n  fragment ProjectModelPageVersionsCardVersio
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  fragment ProjectPageProjectHeader on Project {\n    id\n    role\n    name\n    description\n    visibility\n    allowPublicComments\n  }\n"): (typeof documents)["\n  fragment ProjectPageProjectHeader on Project {\n    id\n    role\n    name\n    description\n    visibility\n    allowPublicComments\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  fragment ProjectPageAutomationHeader_Automation on Automation {\n    id\n    name\n  }\n"): (typeof documents)["\n  fragment ProjectPageAutomationHeader_Automation on Automation {\n    id\n    name\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -612,6 +620,10 @@ export function graphql(source: "\n  mutation createWebhook($webhook: WebhookCre
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  mutation updateWebhook($webhook: WebhookUpdateInput!) {\n    webhookUpdate(webhook: $webhook)\n  }\n"): (typeof documents)["\n  mutation updateWebhook($webhook: WebhookUpdateInput!) {\n    webhookUpdate(webhook: $webhook)\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  mutation UpdateAutomation($projectId: ID!, $input: ProjectAutomationUpdateInput!) {\n    projectMutations {\n      automationMutations(projectId: $projectId) {\n        update(input: $input) {\n          id\n          ...ProjectPageAutomationPage_Automation\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  mutation UpdateAutomation($projectId: ID!, $input: ProjectAutomationUpdateInput!) {\n    projectMutations {\n      automationMutations(projectId: $projectId) {\n        update(input: $input) {\n          id\n          ...ProjectPageAutomationPage_Automation\n        }\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -676,6 +688,10 @@ export function graphql(source: "\n  query ProjectDiscussionsPage($projectId: St
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  query ProjectAutomationsTab($projectId: String!, $search: String, $cursor: String) {\n    project(id: $projectId) {\n      id\n      automations(filter: $search, cursor: $cursor, limit: 5) {\n        totalCount\n        items {\n          ...ProjectPageAutomationsRow_Automation\n        }\n      }\n    }\n    ...ProjectPageAutomationsEmptyState_Query\n  }\n"): (typeof documents)["\n  query ProjectAutomationsTab($projectId: String!, $search: String, $cursor: String) {\n    project(id: $projectId) {\n      id\n      automations(filter: $search, cursor: $cursor, limit: 5) {\n        totalCount\n        items {\n          ...ProjectPageAutomationsRow_Automation\n        }\n      }\n    }\n    ...ProjectPageAutomationsEmptyState_Query\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query ProjectAutomationPage($projectId: String!, $automationId: String!) {\n    project(id: $projectId) {\n      id\n      automation(id: $automationId) {\n        id\n        ...ProjectPageAutomationPage_Automation\n      }\n    }\n  }\n"): (typeof documents)["\n  query ProjectAutomationPage($projectId: String!, $automationId: String!) {\n    project(id: $projectId) {\n      id\n      automation(id: $automationId) {\n        id\n        ...ProjectPageAutomationPage_Automation\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -864,6 +880,10 @@ export function graphql(source: "\n  query ResolveCommentLink($commentId: String
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(source: "\n  fragment ProjectPageProject on Project {\n    id\n    createdAt\n    ...ProjectPageProjectHeader\n    ...ProjectPageStatsBlockTeam\n    ...ProjectPageTeamDialog\n    ...ProjectPageStatsBlockModels\n    ...ProjectPageStatsBlockComments\n  }\n"): (typeof documents)["\n  fragment ProjectPageProject on Project {\n    id\n    createdAt\n    ...ProjectPageProjectHeader\n    ...ProjectPageStatsBlockTeam\n    ...ProjectPageTeamDialog\n    ...ProjectPageStatsBlockModels\n    ...ProjectPageStatsBlockComments\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  fragment ProjectPageAutomationPage_Automation on Automation {\n    id\n    ...ProjectPageAutomationHeader_Automation\n  }\n"): (typeof documents)["\n  fragment ProjectPageAutomationPage_Automation on Automation {\n    id\n    ...ProjectPageAutomationHeader_Automation\n  }\n"];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};
diff --git a/packages/frontend-2/lib/common/generated/gql/graphql.ts b/packages/frontend-2/lib/common/generated/gql/graphql.ts
index 036f2c7e7d..bafdbfdfd6 100644
--- a/packages/frontend-2/lib/common/generated/gql/graphql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/graphql.ts
@@ -1477,6 +1477,7 @@ export type PendingStreamCollaborator = {
 export type Project = {
   __typename?: 'Project';
   allowPublicComments: Scalars['Boolean'];
+  automation?: Maybe<Automation>;
   automations: AutomationCollection;
   /** All comment threads in this project */
   commentThreads: ProjectCommentCollection;
@@ -1516,6 +1517,11 @@ export type Project = {
 };
 
 
+export type ProjectAutomationArgs = {
+  id: Scalars['String'];
+};
+
+
 export type ProjectAutomationsArgs = {
   cursor?: InputMaybe<Scalars['String']>;
   filter?: InputMaybe<Scalars['String']>;
@@ -1580,6 +1586,21 @@ export type ProjectWebhooksArgs = {
   id?: InputMaybe<Scalars['String']>;
 };
 
+export type ProjectAutomationMutations = {
+  __typename?: 'ProjectAutomationMutations';
+  update?: Maybe<Automation>;
+};
+
+
+export type ProjectAutomationMutationsUpdateArgs = {
+  input: ProjectAutomationUpdateInput;
+};
+
+export type ProjectAutomationUpdateInput = {
+  id: Scalars['ID'];
+  name?: InputMaybe<Scalars['String']>;
+};
+
 export type ProjectAutomationsStatusUpdatedMessage = {
   __typename?: 'ProjectAutomationsStatusUpdatedMessage';
   model: Model;
@@ -1753,6 +1774,7 @@ export enum ProjectModelsUpdatedMessageType {
 
 export type ProjectMutations = {
   __typename?: 'ProjectMutations';
+  automationMutations: ProjectAutomationMutations;
   /** Create new project */
   create: Project;
   /**
@@ -1773,6 +1795,11 @@ export type ProjectMutations = {
 };
 
 
+export type ProjectMutationsAutomationMutationsArgs = {
+  projectId: Scalars['ID'];
+};
+
+
 export type ProjectMutationsCreateArgs = {
   input?: InputMaybe<ProjectCreateInput>;
 };
@@ -3067,6 +3094,8 @@ export type ProjectModelPageVersionsCardVersionFragment = { __typename?: 'Versio
 
 export type ProjectPageProjectHeaderFragment = { __typename?: 'Project', id: string, role?: string | null, name: string, description?: string | null, visibility: ProjectVisibility, allowPublicComments: boolean };
 
+export type ProjectPageAutomationHeader_AutomationFragment = { __typename?: 'Automation', id: string, name: string };
+
 export type ProjectPageAutomationsEmptyState_QueryFragment = { __typename?: 'Query', automateFunctions: { __typename?: 'AutomateFunctionCollection', items: Array<{ __typename?: 'AutomateFunction', id: string, name: string, isFeatured: boolean, description: string, logo?: string | null, creator: { __typename?: 'LimitedUser', id: string, name: string } }> } };
 
 export type ProjectPageAutomationsRow_AutomationFragment = { __typename?: 'Automation', id: string, name: string, enabled: boolean, model: { __typename?: 'Model', id: string, name: string }, runs: { __typename?: 'AutomateRunCollection', totalCount: number, items: Array<{ __typename?: 'AutomateRun', id: string, status: AutomateRunStatus, reason?: string | null, createdAt: string, updatedAt: string, version: { __typename?: 'Version', id: string } }> } };
@@ -3426,6 +3455,14 @@ export type UpdateWebhookMutationVariables = Exact<{
 
 export type UpdateWebhookMutation = { __typename?: 'Mutation', webhookUpdate: string };
 
+export type UpdateAutomationMutationVariables = Exact<{
+  projectId: Scalars['ID'];
+  input: ProjectAutomationUpdateInput;
+}>;
+
+
+export type UpdateAutomationMutation = { __typename?: 'Mutation', projectMutations: { __typename?: 'ProjectMutations', automationMutations: { __typename?: 'ProjectAutomationMutations', update?: { __typename?: 'Automation', id: string, name: string } | null } } };
+
 export type ProjectAccessCheckQueryVariables = Exact<{
   id: Scalars['String'];
 }>;
@@ -3557,6 +3594,14 @@ export type ProjectAutomationsTabQueryVariables = Exact<{
 
 export type ProjectAutomationsTabQuery = { __typename?: 'Query', project: { __typename?: 'Project', id: string, automations: { __typename?: 'AutomationCollection', totalCount: number, items: Array<{ __typename?: 'Automation', id: string, name: string, enabled: boolean, model: { __typename?: 'Model', id: string, name: string }, runs: { __typename?: 'AutomateRunCollection', totalCount: number, items: Array<{ __typename?: 'AutomateRun', id: string, status: AutomateRunStatus, reason?: string | null, createdAt: string, updatedAt: string, version: { __typename?: 'Version', id: string } }> } }> } }, automateFunctions: { __typename?: 'AutomateFunctionCollection', items: Array<{ __typename?: 'AutomateFunction', id: string, name: string, isFeatured: boolean, description: string, logo?: string | null, creator: { __typename?: 'LimitedUser', id: string, name: string } }> } };
 
+export type ProjectAutomationPageQueryVariables = Exact<{
+  projectId: Scalars['String'];
+  automationId: Scalars['String'];
+}>;
+
+
+export type ProjectAutomationPageQuery = { __typename?: 'Query', project: { __typename?: 'Project', id: string, automation?: { __typename?: 'Automation', id: string, name: string } | null } };
+
 export type ProjectWebhooksQueryVariables = Exact<{
   projectId: Scalars['String'];
 }>;
@@ -3867,6 +3912,8 @@ export type ResolveCommentLinkQuery = { __typename?: 'Query', comment?: { __type
 
 export type ProjectPageProjectFragment = { __typename?: 'Project', id: string, createdAt: string, role?: string | null, name: string, description?: string | null, visibility: ProjectVisibility, allowPublicComments: boolean, team: Array<{ __typename?: 'ProjectCollaborator', id: string, role: string, user: { __typename?: 'LimitedUser', role?: string | null, id: string, name: string, avatar?: string | null } }>, invitedTeam?: Array<{ __typename?: 'PendingStreamCollaborator', id: string, title: string, inviteId: string, role: string, user?: { __typename?: 'LimitedUser', role?: string | null, id: string, name: string, avatar?: string | null } | null }> | null, modelCount: { __typename?: 'ModelCollection', totalCount: number }, commentThreadCount: { __typename?: 'ProjectCommentCollection', totalCount: number } };
 
+export type ProjectPageAutomationPage_AutomationFragment = { __typename?: 'Automation', id: string, name: string };
+
 export const AuthRegisterPanelServerInfoFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AuthRegisterPanelServerInfo"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ServerInfo"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"inviteOnly"}}]}}]} as unknown as DocumentNode<AuthRegisterPanelServerInfoFragment, unknown>;
 export const ServerTermsOfServicePrivacyPolicyFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ServerTermsOfServicePrivacyPolicyFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ServerInfo"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"termsOfService"}}]}}]} as unknown as DocumentNode<ServerTermsOfServicePrivacyPolicyFragmentFragment, unknown>;
 export const AuthStategiesServerInfoFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AuthStategiesServerInfoFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ServerInfo"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"authStrategies"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"url"}}]}}]}}]} as unknown as DocumentNode<AuthStategiesServerInfoFragmentFragment, unknown>;
@@ -3935,6 +3982,8 @@ export const ProjectPageStatsBlockTeamFragmentDoc = {"kind":"Document","definiti
 export const ProjectPageStatsBlockModelsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageStatsBlockModels"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"modelCount"},"name":{"kind":"Name","value":"models"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"0"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}}]} as unknown as DocumentNode<ProjectPageStatsBlockModelsFragment, unknown>;
 export const ProjectPageStatsBlockCommentsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageStatsBlockComments"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"commentThreadCount"},"name":{"kind":"Name","value":"commentThreads"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"0"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}}]} as unknown as DocumentNode<ProjectPageStatsBlockCommentsFragment, unknown>;
 export const ProjectPageProjectFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageProject"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageProjectHeader"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageStatsBlockTeam"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageTeamDialog"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageStatsBlockModels"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageStatsBlockComments"}}]}}]} as unknown as DocumentNode<ProjectPageProjectFragment, unknown>;
+export const ProjectPageAutomationHeader_AutomationFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageAutomationHeader_Automation"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Automation"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]} as unknown as DocumentNode<ProjectPageAutomationHeader_AutomationFragment, unknown>;
+export const ProjectPageAutomationPage_AutomationFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageAutomationPage_Automation"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Automation"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageAutomationHeader_Automation"}}]}}]} as unknown as DocumentNode<ProjectPageAutomationPage_AutomationFragment, unknown>;
 export const RegisterPanelServerInviteDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"RegisterPanelServerInvite"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"token"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"serverInviteByToken"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"token"},"value":{"kind":"Variable","name":{"kind":"Name","value":"token"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}}]}}]}}]} as unknown as DocumentNode<RegisterPanelServerInviteQuery, RegisterPanelServerInviteQueryVariables>;
 export const EmailVerificationBannerStateDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"EmailVerificationBannerState"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"activeUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}},{"kind":"Field","name":{"kind":"Name","value":"verified"}},{"kind":"Field","name":{"kind":"Name","value":"hasPendingVerification"}}]}}]}}]} as unknown as DocumentNode<EmailVerificationBannerStateQuery, EmailVerificationBannerStateQueryVariables>;
 export const RequestVerificationDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"RequestVerification"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"requestVerification"}}]}}]} as unknown as DocumentNode<RequestVerificationMutation, RequestVerificationMutationVariables>;
@@ -3979,6 +4028,7 @@ export const UpdateVersionDocument = {"kind":"Document","definitions":[{"kind":"
 export const DeleteWebhookDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"deleteWebhook"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"webhook"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"WebhookDeleteInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"webhookDelete"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"webhook"},"value":{"kind":"Variable","name":{"kind":"Name","value":"webhook"}}}]}]}}]} as unknown as DocumentNode<DeleteWebhookMutation, DeleteWebhookMutationVariables>;
 export const CreateWebhookDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"createWebhook"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"webhook"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"WebhookCreateInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"webhookCreate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"webhook"},"value":{"kind":"Variable","name":{"kind":"Name","value":"webhook"}}}]}]}}]} as unknown as DocumentNode<CreateWebhookMutation, CreateWebhookMutationVariables>;
 export const UpdateWebhookDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"updateWebhook"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"webhook"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"WebhookUpdateInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"webhookUpdate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"webhook"},"value":{"kind":"Variable","name":{"kind":"Name","value":"webhook"}}}]}]}}]} as unknown as DocumentNode<UpdateWebhookMutation, UpdateWebhookMutationVariables>;
+export const UpdateAutomationDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateAutomation"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ProjectAutomationUpdateInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projectMutations"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"automationMutations"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"projectId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"update"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageAutomationPage_Automation"}}]}}]}}]}}]}},...ProjectPageAutomationPage_AutomationFragmentDoc.definitions,...ProjectPageAutomationHeader_AutomationFragmentDoc.definitions]} as unknown as DocumentNode<UpdateAutomationMutation, UpdateAutomationMutationVariables>;
 export const ProjectAccessCheckDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectAccessCheck"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<ProjectAccessCheckQuery, ProjectAccessCheckQueryVariables>;
 export const ProjectsDashboardQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectsDashboardQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filter"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"UserProjectsFilter"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cursor"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"activeUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"projects"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filter"}}},{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"6"}},{"kind":"Argument","name":{"kind":"Name","value":"cursor"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cursor"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cursor"}},{"kind":"Field","name":{"kind":"Name","value":"totalCount"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDashboardItem"}}]}}]}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectsInviteBanners"}}]}}]}},...ProjectDashboardItemFragmentDoc.definitions,...ProjectDashboardItemNoModelsFragmentDoc.definitions,...ProjectPageModelsCardProjectFragmentDoc.definitions,...ProjectPageModelsActions_ProjectFragmentDoc.definitions,...ProjectsModelPageEmbed_ProjectFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions,...ProjectPageLatestItemsModelItemFragmentDoc.definitions,...PendingFileUploadFragmentDoc.definitions,...ProjectPageModelsCardRenameDialogFragmentDoc.definitions,...ProjectPageModelsCardDeleteDialogFragmentDoc.definitions,...ProjectPageModelsActionsFragmentDoc.definitions,...ModelCardAutomationStatus_ModelFragmentDoc.definitions,...ModelCardAutomationStatus_AutomationsStatusFragmentDoc.definitions,...ProjectsInviteBannersFragmentDoc.definitions,...ProjectsInviteBannerFragmentDoc.definitions,...LimitedUserAvatarFragmentDoc.definitions]} as unknown as DocumentNode<ProjectsDashboardQueryQuery, ProjectsDashboardQueryQueryVariables>;
 export const ProjectPageQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectPageQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"token"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageProject"}}]}},{"kind":"Field","name":{"kind":"Name","value":"projectInvite"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"projectId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}},{"kind":"Argument","name":{"kind":"Name","value":"token"},"value":{"kind":"Variable","name":{"kind":"Name","value":"token"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectsInviteBanner"}}]}}]}},...ProjectPageProjectFragmentDoc.definitions,...ProjectPageProjectHeaderFragmentDoc.definitions,...ProjectPageStatsBlockTeamFragmentDoc.definitions,...LimitedUserAvatarFragmentDoc.definitions,...ProjectPageTeamDialogFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions,...ProjectPageStatsBlockModelsFragmentDoc.definitions,...ProjectPageStatsBlockCommentsFragmentDoc.definitions,...ProjectsInviteBannerFragmentDoc.definitions]} as unknown as DocumentNode<ProjectPageQueryQuery, ProjectPageQueryQueryVariables>;
@@ -3995,6 +4045,7 @@ export const ProjectModelVersionsDocument = {"kind":"Document","definitions":[{"
 export const ProjectModelsPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectModelsPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectModelsPageHeader_Project"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectModelsPageResults_Project"}}]}}]}},...ProjectModelsPageHeader_ProjectFragmentDoc.definitions,...FormUsersSelectItemFragmentDoc.definitions,...ProjectModelsPageResults_ProjectFragmentDoc.definitions,...ProjectPageLatestItemsModelsFragmentDoc.definitions,...ProjectPageModelsStructureItem_ProjectFragmentDoc.definitions,...ProjectPageModelsActions_ProjectFragmentDoc.definitions,...ProjectsModelPageEmbed_ProjectFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions]} as unknown as DocumentNode<ProjectModelsPageQuery, ProjectModelsPageQueryVariables>;
 export const ProjectDiscussionsPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectDiscussionsPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDiscussionsPageHeader_Project"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDiscussionsPageResults_Project"}}]}}]}},...ProjectDiscussionsPageHeader_ProjectFragmentDoc.definitions,...ProjectDiscussionsPageResults_ProjectFragmentDoc.definitions]} as unknown as DocumentNode<ProjectDiscussionsPageQuery, ProjectDiscussionsPageQueryVariables>;
 export const ProjectAutomationsTabDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectAutomationsTab"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"search"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cursor"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"automations"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"search"}}},{"kind":"Argument","name":{"kind":"Name","value":"cursor"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cursor"}}},{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"5"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageAutomationsRow_Automation"}}]}}]}}]}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageAutomationsEmptyState_Query"}}]}},...ProjectPageAutomationsRow_AutomationFragmentDoc.definitions,...AutomationRunDetailsFragmentDoc.definitions,...ProjectPageAutomationsEmptyState_QueryFragmentDoc.definitions,...AutomationsFunctionsCard_AutomateFunctionFragmentDoc.definitions]} as unknown as DocumentNode<ProjectAutomationsTabQuery, ProjectAutomationsTabQueryVariables>;
+export const ProjectAutomationPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectAutomationPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"automationId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"automation"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"automationId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageAutomationPage_Automation"}}]}}]}}]}},...ProjectPageAutomationPage_AutomationFragmentDoc.definitions,...ProjectPageAutomationHeader_AutomationFragmentDoc.definitions]} as unknown as DocumentNode<ProjectAutomationPageQuery, ProjectAutomationPageQueryVariables>;
 export const ProjectWebhooksDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectWebhooks"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"webhooks"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"streamId"}},{"kind":"Field","name":{"kind":"Name","value":"triggers"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"history"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"5"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"statusInfo"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}}]}}]} as unknown as DocumentNode<ProjectWebhooksQuery, ProjectWebhooksQueryVariables>;
 export const BlobDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Blob"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"blobId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"streamId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stream"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"streamId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"blob"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"blobId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"fileName"}},{"kind":"Field","name":{"kind":"Name","value":"fileType"}},{"kind":"Field","name":{"kind":"Name","value":"fileSize"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}}]}}]}}]}}]} as unknown as DocumentNode<BlobQuery, BlobQueryVariables>;
 export const OnProjectUpdatedDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"OnProjectUpdated"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projectUpdated"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"project"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageProject"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDashboardItemNoModels"}}]}}]}}]}},...ProjectPageProjectFragmentDoc.definitions,...ProjectPageProjectHeaderFragmentDoc.definitions,...ProjectPageStatsBlockTeamFragmentDoc.definitions,...LimitedUserAvatarFragmentDoc.definitions,...ProjectPageTeamDialogFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions,...ProjectPageStatsBlockModelsFragmentDoc.definitions,...ProjectPageStatsBlockCommentsFragmentDoc.definitions,...ProjectDashboardItemNoModelsFragmentDoc.definitions,...ProjectPageModelsCardProjectFragmentDoc.definitions,...ProjectPageModelsActions_ProjectFragmentDoc.definitions,...ProjectsModelPageEmbed_ProjectFragmentDoc.definitions]} as unknown as DocumentNode<OnProjectUpdatedSubscription, OnProjectUpdatedSubscriptionVariables>;
diff --git a/packages/frontend-2/lib/projects/composables/automationManagement.ts b/packages/frontend-2/lib/projects/composables/automationManagement.ts
new file mode 100644
index 0000000000..fd6427d895
--- /dev/null
+++ b/packages/frontend-2/lib/projects/composables/automationManagement.ts
@@ -0,0 +1,45 @@
+import { useMutation } from '@vue/apollo-composable'
+import type {
+  UpdateAutomationMutation,
+  UpdateAutomationMutationVariables
+} from '~/lib/common/generated/gql/graphql'
+import {
+  convertThrowIntoFetchResult,
+  getFirstErrorMessage
+} from '~/lib/common/helpers/graphql'
+import { updateAutomationMutation } from '~/lib/projects/graphql/mutations'
+
+export function useUpdateAutomation() {
+  const { activeUser } = useActiveUser()
+  const { triggerNotification } = useGlobalToast()
+  const { mutate: updateAutomation } = useMutation(updateAutomationMutation)
+
+  return async (
+    update: UpdateAutomationMutationVariables,
+    options?: Partial<{
+      optimisticResponse: UpdateAutomationMutation
+    }>
+  ) => {
+    if (!activeUser.value) return
+
+    const result = await updateAutomation(update, {
+      optimisticResponse: options?.optimisticResponse
+    }).catch(convertThrowIntoFetchResult)
+
+    if (result?.data?.projectMutations.automationMutations.update?.id) {
+      triggerNotification({
+        type: ToastNotificationType.Success,
+        title: 'Automation updated'
+      })
+    } else {
+      const errMsg = getFirstErrorMessage(result?.errors)
+      triggerNotification({
+        type: ToastNotificationType.Danger,
+        title: 'Automation update failed',
+        description: errMsg
+      })
+    }
+
+    return result?.data?.projectMutations.automationMutations.update
+  }
+}
diff --git a/packages/frontend-2/lib/projects/graphql/mutations.ts b/packages/frontend-2/lib/projects/graphql/mutations.ts
index af3f2e3d38..18204a24a4 100644
--- a/packages/frontend-2/lib/projects/graphql/mutations.ts
+++ b/packages/frontend-2/lib/projects/graphql/mutations.ts
@@ -163,3 +163,16 @@ export const updateWebhookMutation = graphql(`
     webhookUpdate(webhook: $webhook)
   }
 `)
+
+export const updateAutomationMutation = graphql(`
+  mutation UpdateAutomation($projectId: ID!, $input: ProjectAutomationUpdateInput!) {
+    projectMutations {
+      automationMutations(projectId: $projectId) {
+        update(input: $input) {
+          id
+          ...ProjectPageAutomationPage_Automation
+        }
+      }
+    }
+  }
+`)
diff --git a/packages/frontend-2/lib/projects/graphql/queries.ts b/packages/frontend-2/lib/projects/graphql/queries.ts
index 227ad506f5..02efa0dd23 100644
--- a/packages/frontend-2/lib/projects/graphql/queries.ts
+++ b/packages/frontend-2/lib/projects/graphql/queries.ts
@@ -222,6 +222,18 @@ export const projectAutomationsTabQuery = graphql(`
   }
 `)
 
+export const projectAutomationPageQuery = graphql(`
+  query ProjectAutomationPage($projectId: String!, $automationId: String!) {
+    project(id: $projectId) {
+      id
+      automation(id: $automationId) {
+        id
+        ...ProjectPageAutomationPage_Automation
+      }
+    }
+  }
+`)
+
 export const projectWebhooksQuery = graphql(`
   query ProjectWebhooks($projectId: String!) {
     project(id: $projectId) {
diff --git a/packages/frontend-2/pages/projects/[id]/index/automations/[aid].vue b/packages/frontend-2/pages/projects/[id]/index/automations/[aid].vue
index 739c92074a..bcba6c1e80 100644
--- a/packages/frontend-2/pages/projects/[id]/index/automations/[aid].vue
+++ b/packages/frontend-2/pages/projects/[id]/index/automations/[aid].vue
@@ -1,6 +1,31 @@
 <template>
-  <div class="flex flex-col gap-8 items-start">
-    <ProjectPageAutomationHeader />
+  <div v-if="automation" class="flex flex-col gap-8 items-start">
+    <ProjectPageAutomationHeader :automation="automation" :project-id="projectId" />
   </div>
+  <CommonLoadingBar v-else-if="loading" loading />
+  <div v-else />
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useQuery } from '@vue/apollo-composable'
+import { graphql } from '~/lib/common/generated/gql'
+import { projectAutomationPageQuery } from '~/lib/projects/graphql/queries'
+
+// TODO: 404 middleware
+
+graphql(`
+  fragment ProjectPageAutomationPage_Automation on Automation {
+    id
+    ...ProjectPageAutomationHeader_Automation
+  }
+`)
+
+const route = useRoute()
+const projectId = computed(() => route.params.id as string)
+const automationId = computed(() => route.params.aid as string)
+
+const { result, loading } = useQuery(projectAutomationPageQuery, () => ({
+  projectId: projectId.value,
+  automationId: automationId.value
+}))
+const automation = computed(() => result.value?.project.automation || null)
+</script>
diff --git a/packages/server/assets/automate/typedefs/automate.graphql b/packages/server/assets/automate/typedefs/automate.graphql
index d28d199b7c..01452bc4e6 100644
--- a/packages/server/assets/automate/typedefs/automate.graphql
+++ b/packages/server/assets/automate/typedefs/automate.graphql
@@ -59,6 +59,20 @@ type AutomateFunctionCollection {
 
 extend type Project {
   automations(filter: String, cursor: String, limit: Int): AutomationCollection!
+  automation(id: String!): Automation
+}
+
+input ProjectAutomationUpdateInput {
+  id: ID!
+  name: String
+}
+
+type ProjectAutomationMutations {
+  update(input: ProjectAutomationUpdateInput!): Automation
+}
+
+extend type ProjectMutations {
+  automationMutations(projectId: ID!): ProjectAutomationMutations!
 }
 
 extend type Query {
diff --git a/packages/server/modules/core/graph/generated/graphql.ts b/packages/server/modules/core/graph/generated/graphql.ts
index a4ec5a6a24..8b6fe83729 100644
--- a/packages/server/modules/core/graph/generated/graphql.ts
+++ b/packages/server/modules/core/graph/generated/graphql.ts
@@ -1490,6 +1490,7 @@ export type PendingStreamCollaborator = {
 export type Project = {
   __typename?: 'Project';
   allowPublicComments: Scalars['Boolean'];
+  automation?: Maybe<Automation>;
   automations: AutomationCollection;
   /** All comment threads in this project */
   commentThreads: ProjectCommentCollection;
@@ -1529,6 +1530,11 @@ export type Project = {
 };
 
 
+export type ProjectAutomationArgs = {
+  id: Scalars['String'];
+};
+
+
 export type ProjectAutomationsArgs = {
   cursor?: InputMaybe<Scalars['String']>;
   filter?: InputMaybe<Scalars['String']>;
@@ -1593,6 +1599,21 @@ export type ProjectWebhooksArgs = {
   id?: InputMaybe<Scalars['String']>;
 };
 
+export type ProjectAutomationMutations = {
+  __typename?: 'ProjectAutomationMutations';
+  update?: Maybe<Automation>;
+};
+
+
+export type ProjectAutomationMutationsUpdateArgs = {
+  input: ProjectAutomationUpdateInput;
+};
+
+export type ProjectAutomationUpdateInput = {
+  id: Scalars['ID'];
+  name?: InputMaybe<Scalars['String']>;
+};
+
 export type ProjectAutomationsStatusUpdatedMessage = {
   __typename?: 'ProjectAutomationsStatusUpdatedMessage';
   model: Model;
@@ -1766,6 +1787,7 @@ export enum ProjectModelsUpdatedMessageType {
 
 export type ProjectMutations = {
   __typename?: 'ProjectMutations';
+  automationMutations: ProjectAutomationMutations;
   /** Create new project */
   create: Project;
   /**
@@ -1786,6 +1808,11 @@ export type ProjectMutations = {
 };
 
 
+export type ProjectMutationsAutomationMutationsArgs = {
+  projectId: Scalars['ID'];
+};
+
+
 export type ProjectMutationsCreateArgs = {
   input?: InputMaybe<ProjectCreateInput>;
 };
@@ -3189,6 +3216,8 @@ export type ResolversTypes = {
   PasswordStrengthCheckResults: ResolverTypeWrapper<PasswordStrengthCheckResults>;
   PendingStreamCollaborator: ResolverTypeWrapper<PendingStreamCollaboratorGraphQLReturn>;
   Project: ResolverTypeWrapper<ProjectGraphQLReturn>;
+  ProjectAutomationMutations: ResolverTypeWrapper<Omit<ProjectAutomationMutations, 'update'> & { update?: Maybe<ResolversTypes['Automation']> }>;
+  ProjectAutomationUpdateInput: ProjectAutomationUpdateInput;
   ProjectAutomationsStatusUpdatedMessage: ResolverTypeWrapper<Omit<ProjectAutomationsStatusUpdatedMessage, 'model' | 'project' | 'status' | 'version'> & { model: ResolversTypes['Model'], project: ResolversTypes['Project'], status: ResolversTypes['AutomationsStatus'], version: ResolversTypes['Version'] }>;
   ProjectCollaborator: ResolverTypeWrapper<Omit<ProjectCollaborator, 'user'> & { user: ResolversTypes['LimitedUser'] }>;
   ProjectCollection: ResolverTypeWrapper<Omit<ProjectCollection, 'items'> & { items: Array<ResolversTypes['Project']> }>;
@@ -3372,6 +3401,8 @@ export type ResolversParentTypes = {
   PasswordStrengthCheckResults: PasswordStrengthCheckResults;
   PendingStreamCollaborator: PendingStreamCollaboratorGraphQLReturn;
   Project: ProjectGraphQLReturn;
+  ProjectAutomationMutations: Omit<ProjectAutomationMutations, 'update'> & { update?: Maybe<ResolversParentTypes['Automation']> };
+  ProjectAutomationUpdateInput: ProjectAutomationUpdateInput;
   ProjectAutomationsStatusUpdatedMessage: Omit<ProjectAutomationsStatusUpdatedMessage, 'model' | 'project' | 'status' | 'version'> & { model: ResolversParentTypes['Model'], project: ResolversParentTypes['Project'], status: ResolversParentTypes['AutomationsStatus'], version: ResolversParentTypes['Version'] };
   ProjectCollaborator: Omit<ProjectCollaborator, 'user'> & { user: ResolversParentTypes['LimitedUser'] };
   ProjectCollection: Omit<ProjectCollection, 'items'> & { items: Array<ResolversParentTypes['Project']> };
@@ -4029,6 +4060,7 @@ export type PendingStreamCollaboratorResolvers<ContextType = GraphQLContext, Par
 
 export type ProjectResolvers<ContextType = GraphQLContext, ParentType extends ResolversParentTypes['Project'] = ResolversParentTypes['Project']> = {
   allowPublicComments?: Resolver<ResolversTypes['Boolean'], ParentType, ContextType>;
+  automation?: Resolver<Maybe<ResolversTypes['Automation']>, ParentType, ContextType, RequireFields<ProjectAutomationArgs, 'id'>>;
   automations?: Resolver<ResolversTypes['AutomationCollection'], ParentType, ContextType, Partial<ProjectAutomationsArgs>>;
   commentThreads?: Resolver<ResolversTypes['ProjectCommentCollection'], ParentType, ContextType, RequireFields<ProjectCommentThreadsArgs, 'limit'>>;
   createdAt?: Resolver<ResolversTypes['DateTime'], ParentType, ContextType>;
@@ -4053,6 +4085,11 @@ export type ProjectResolvers<ContextType = GraphQLContext, ParentType extends Re
   __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
 };
 
+export type ProjectAutomationMutationsResolvers<ContextType = GraphQLContext, ParentType extends ResolversParentTypes['ProjectAutomationMutations'] = ResolversParentTypes['ProjectAutomationMutations']> = {
+  update?: Resolver<Maybe<ResolversTypes['Automation']>, ParentType, ContextType, RequireFields<ProjectAutomationMutationsUpdateArgs, 'input'>>;
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
+};
+
 export type ProjectAutomationsStatusUpdatedMessageResolvers<ContextType = GraphQLContext, ParentType extends ResolversParentTypes['ProjectAutomationsStatusUpdatedMessage'] = ResolversParentTypes['ProjectAutomationsStatusUpdatedMessage']> = {
   model?: Resolver<ResolversTypes['Model'], ParentType, ContextType>;
   project?: Resolver<ResolversTypes['Project'], ParentType, ContextType>;
@@ -4113,6 +4150,7 @@ export type ProjectModelsUpdatedMessageResolvers<ContextType = GraphQLContext, P
 };
 
 export type ProjectMutationsResolvers<ContextType = GraphQLContext, ParentType extends ResolversParentTypes['ProjectMutations'] = ResolversParentTypes['ProjectMutations']> = {
+  automationMutations?: Resolver<ResolversTypes['ProjectAutomationMutations'], ParentType, ContextType, RequireFields<ProjectMutationsAutomationMutationsArgs, 'projectId'>>;
   create?: Resolver<ResolversTypes['Project'], ParentType, ContextType, Partial<ProjectMutationsCreateArgs>>;
   createForOnboarding?: Resolver<ResolversTypes['Project'], ParentType, ContextType>;
   delete?: Resolver<ResolversTypes['Boolean'], ParentType, ContextType, RequireFields<ProjectMutationsDeleteArgs, 'id'>>;
@@ -4579,6 +4617,7 @@ export type Resolvers<ContextType = GraphQLContext> = {
   PasswordStrengthCheckResults?: PasswordStrengthCheckResultsResolvers<ContextType>;
   PendingStreamCollaborator?: PendingStreamCollaboratorResolvers<ContextType>;
   Project?: ProjectResolvers<ContextType>;
+  ProjectAutomationMutations?: ProjectAutomationMutationsResolvers<ContextType>;
   ProjectAutomationsStatusUpdatedMessage?: ProjectAutomationsStatusUpdatedMessageResolvers<ContextType>;
   ProjectCollaborator?: ProjectCollaboratorResolvers<ContextType>;
   ProjectCollection?: ProjectCollectionResolvers<ContextType>;
diff --git a/packages/server/modules/cross-server-sync/graph/generated/graphql.ts b/packages/server/modules/cross-server-sync/graph/generated/graphql.ts
index ba52dc9a71..0f205e573c 100644
--- a/packages/server/modules/cross-server-sync/graph/generated/graphql.ts
+++ b/packages/server/modules/cross-server-sync/graph/generated/graphql.ts
@@ -1480,6 +1480,7 @@ export type PendingStreamCollaborator = {
 export type Project = {
   __typename?: 'Project';
   allowPublicComments: Scalars['Boolean'];
+  automation?: Maybe<Automation>;
   automations: AutomationCollection;
   /** All comment threads in this project */
   commentThreads: ProjectCommentCollection;
@@ -1519,6 +1520,11 @@ export type Project = {
 };
 
 
+export type ProjectAutomationArgs = {
+  id: Scalars['String'];
+};
+
+
 export type ProjectAutomationsArgs = {
   cursor?: InputMaybe<Scalars['String']>;
   filter?: InputMaybe<Scalars['String']>;
@@ -1583,6 +1589,21 @@ export type ProjectWebhooksArgs = {
   id?: InputMaybe<Scalars['String']>;
 };
 
+export type ProjectAutomationMutations = {
+  __typename?: 'ProjectAutomationMutations';
+  update?: Maybe<Automation>;
+};
+
+
+export type ProjectAutomationMutationsUpdateArgs = {
+  input: ProjectAutomationUpdateInput;
+};
+
+export type ProjectAutomationUpdateInput = {
+  id: Scalars['ID'];
+  name?: InputMaybe<Scalars['String']>;
+};
+
 export type ProjectAutomationsStatusUpdatedMessage = {
   __typename?: 'ProjectAutomationsStatusUpdatedMessage';
   model: Model;
@@ -1756,6 +1777,7 @@ export enum ProjectModelsUpdatedMessageType {
 
 export type ProjectMutations = {
   __typename?: 'ProjectMutations';
+  automationMutations: ProjectAutomationMutations;
   /** Create new project */
   create: Project;
   /**
@@ -1776,6 +1798,11 @@ export type ProjectMutations = {
 };
 
 
+export type ProjectMutationsAutomationMutationsArgs = {
+  projectId: Scalars['ID'];
+};
+
+
 export type ProjectMutationsCreateArgs = {
   input?: InputMaybe<ProjectCreateInput>;
 };
diff --git a/packages/server/modules/mocks.ts b/packages/server/modules/mocks.ts
index 1a78c5974e..f16f4610a9 100644
--- a/packages/server/modules/mocks.ts
+++ b/packages/server/modules/mocks.ts
@@ -64,6 +64,19 @@ export async function buildMocksConfig(): Promise<{
             items: times(count, () => store.get('AutomateRun'))
           } as any
         }
+      },
+      ProjectAutomationMutations: {
+        update: (_parent, args) => {
+          const {
+            input: { id, name }
+          } = args
+          const automation = store.get('Automation') as any
+          return {
+            ...automation,
+            id,
+            ...(name?.length ? { name } : {})
+          }
+        }
       }
     }),
     mocks: {
diff --git a/packages/server/test/graphql/generated/graphql.ts b/packages/server/test/graphql/generated/graphql.ts
index 17cbe02b8f..a193b86989 100644
--- a/packages/server/test/graphql/generated/graphql.ts
+++ b/packages/server/test/graphql/generated/graphql.ts
@@ -1481,6 +1481,7 @@ export type PendingStreamCollaborator = {
 export type Project = {
   __typename?: 'Project';
   allowPublicComments: Scalars['Boolean'];
+  automation?: Maybe<Automation>;
   automations: AutomationCollection;
   /** All comment threads in this project */
   commentThreads: ProjectCommentCollection;
@@ -1520,6 +1521,11 @@ export type Project = {
 };
 
 
+export type ProjectAutomationArgs = {
+  id: Scalars['String'];
+};
+
+
 export type ProjectAutomationsArgs = {
   cursor?: InputMaybe<Scalars['String']>;
   filter?: InputMaybe<Scalars['String']>;
@@ -1584,6 +1590,21 @@ export type ProjectWebhooksArgs = {
   id?: InputMaybe<Scalars['String']>;
 };
 
+export type ProjectAutomationMutations = {
+  __typename?: 'ProjectAutomationMutations';
+  update?: Maybe<Automation>;
+};
+
+
+export type ProjectAutomationMutationsUpdateArgs = {
+  input: ProjectAutomationUpdateInput;
+};
+
+export type ProjectAutomationUpdateInput = {
+  id: Scalars['ID'];
+  name?: InputMaybe<Scalars['String']>;
+};
+
 export type ProjectAutomationsStatusUpdatedMessage = {
   __typename?: 'ProjectAutomationsStatusUpdatedMessage';
   model: Model;
@@ -1757,6 +1778,7 @@ export enum ProjectModelsUpdatedMessageType {
 
 export type ProjectMutations = {
   __typename?: 'ProjectMutations';
+  automationMutations: ProjectAutomationMutations;
   /** Create new project */
   create: Project;
   /**
@@ -1777,6 +1799,11 @@ export type ProjectMutations = {
 };
 
 
+export type ProjectMutationsAutomationMutationsArgs = {
+  projectId: Scalars['ID'];
+};
+
+
 export type ProjectMutationsCreateArgs = {
   input?: InputMaybe<ProjectCreateInput>;
 };

From e1ed9626817d8414eeb41ce5881c31872fade733 Mon Sep 17 00:00:00 2001
From: Kristaps Fabians Geikins <fabis94@live.com>
Date: Tue, 26 Mar 2024 14:21:34 +0200
Subject: [PATCH 21/22] title done

---
 .../components/common/editable/Title.vue      | 43 +++++++++++++++----
 .../project/page/automation/Header.vue        | 11 ++++-
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/packages/frontend-2/components/common/editable/Title.vue b/packages/frontend-2/components/common/editable/Title.vue
index 71c300fc89..19126a5d79 100644
--- a/packages/frontend-2/components/common/editable/Title.vue
+++ b/packages/frontend-2/components/common/editable/Title.vue
@@ -24,18 +24,19 @@
         />
       </div>
     </label>
-    <PencilIcon
-      v-if="!disabled"
-      class="shrink-0 ml-2 mt-3 w-4 h-4 opacity-0 group-hover:opacity-100 transition text-foreground-2"
-    />
+    <PencilIcon v-if="!disabled" :class="pencilClasses" />
   </div>
 </template>
 <script setup lang="ts">
 import { PencilIcon } from '@heroicons/vue/20/solid'
 import { useDebouncedTextInput } from '@speckle/ui-components'
 
-defineProps<{
+const props = defineProps<{
   disabled?: boolean
+  customClasses?: {
+    input?: string
+    pencil?: string
+  }
 }>()
 
 const title = defineModel<string>({ required: true })
@@ -47,8 +48,32 @@ const { on, bind } = useDebouncedTextInput({
 })
 const visibleTitle = computed(() => bind.modelValue.value)
 
-const titleInputClasses = computed(() => [
-  'h3 tracking-tight border-0 border-b-2 transition focus:border-outline-3 max-w-full',
-  'p-0 pb-1 bg-transparent border-transparent focus:outline-none focus:ring-0'
-])
+const titleInputClasses = computed(() => {
+  const classParts = [
+    'border-0 border-b-2 transition focus:border-outline-3 max-w-full',
+    'p-0 pb-1 bg-transparent border-transparent focus:outline-none focus:ring-0'
+  ]
+
+  if (props.customClasses?.input) {
+    classParts.push(props.customClasses.input)
+  } else {
+    classParts.push('h3 tracking-tight')
+  }
+
+  return classParts.join(' ')
+})
+
+const pencilClasses = computed(() => {
+  const classParts = [
+    'shrink-0 opacity-0 group-hover:opacity-100 transition text-foreground-2'
+  ]
+
+  if (props.customClasses?.pencil) {
+    classParts.push(props.customClasses.pencil)
+  } else {
+    classParts.push('ml-2 mt-3 w-4 h-4')
+  }
+
+  return classParts.join(' ')
+})
 </script>
diff --git a/packages/frontend-2/components/project/page/automation/Header.vue b/packages/frontend-2/components/project/page/automation/Header.vue
index 3e359eb33f..c52027dfa6 100644
--- a/packages/frontend-2/components/project/page/automation/Header.vue
+++ b/packages/frontend-2/components/project/page/automation/Header.vue
@@ -3,10 +3,17 @@
     <CommonTextLink :icon-left="ArrowLeftIcon" size="xs" :to="automationsLink">
       Go Back to Automations
     </CommonTextLink>
-    <div class="flex gap-1 items-center">
+    <div class="flex gap-1 items-center relative">
       <h1 class="block h4 font-bold">Automations</h1>
       <ChevronRightIcon class="w-5 h-5" />
-      <CommonEditableTitle v-model="name" />
+      <CommonEditableTitle
+        v-model="name"
+        :custom-classes="{
+          input: 'h4 font-bold',
+          pencil: 'ml-2 mt-2 w-4 h-4'
+        }"
+        class="relative top-1.5"
+      />
     </div>
   </div>
 </template>

From ba959143fb3909eb6e054c46c22c8292f19a073f Mon Sep 17 00:00:00 2001
From: Kristaps Fabians Geikins <fabis94@live.com>
Date: Tue, 26 Mar 2024 15:47:11 +0200
Subject: [PATCH 22/22] WIP function card

---
 .../project/page/automation/Functions.vue     | 42 +++++++++++++++
 .../project/page/automation/Header.vue        | 33 +++++++++---
 .../lib/common/generated/gql/gql.ts           | 27 +++++++---
 .../lib/common/generated/gql/graphql.ts       | 45 +++++++++++++---
 .../lib/projects/graphql/queries.ts           |  1 +
 .../projects/[id]/index/automations/[aid].vue | 18 ++++++-
 .../assets/automate/typedefs/automate.graphql | 19 +++++++
 .../modules/core/graph/generated/graphql.ts   | 52 ++++++++++++++++++-
 .../graph/generated/graphql.ts                | 20 +++++++
 packages/server/modules/mocks.ts              |  8 ++-
 .../server/test/graphql/generated/graphql.ts  | 20 +++++++
 11 files changed, 260 insertions(+), 25 deletions(-)
 create mode 100644 packages/frontend-2/components/project/page/automation/Functions.vue

diff --git a/packages/frontend-2/components/project/page/automation/Functions.vue b/packages/frontend-2/components/project/page/automation/Functions.vue
new file mode 100644
index 0000000000..15639c4308
--- /dev/null
+++ b/packages/frontend-2/components/project/page/automation/Functions.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="flex flex-col">
+    <h2 class="h6 font-bold">Function</h2>
+    <div class="text-foreground-2">
+      Note: functions do not automatically update to their latest release. To do so,
+      please select it manually via the edit dialog.
+    </div>
+    <AutomationsFunctionsCardView class="mt-2">
+      <AutomationsFunctionsCard v-for="fn in functions" :key="fn.id" :fn="fn" />
+    </AutomationsFunctionsCardView>
+  </div>
+</template>
+<script setup lang="ts">
+import { graphql } from '~/lib/common/generated/gql'
+import type { ProjectPageAutomationFunctions_AutomationFragment } from '~/lib/common/generated/gql/graphql'
+
+graphql(`
+  fragment ProjectPageAutomationFunctions_Automation on Automation {
+    id
+    currentRevision {
+      id
+      functions {
+        release {
+          id
+          function {
+            id
+            ...AutomationsFunctionsCard_AutomateFunction
+          }
+        }
+      }
+    }
+  }
+`)
+
+const props = defineProps<{
+  automation: ProjectPageAutomationFunctions_AutomationFragment
+}>()
+
+const functions = computed(
+  () => props.automation.currentRevision?.functions.map((f) => f.release.function) || []
+)
+</script>
diff --git a/packages/frontend-2/components/project/page/automation/Header.vue b/packages/frontend-2/components/project/page/automation/Header.vue
index c52027dfa6..cdd1424c38 100644
--- a/packages/frontend-2/components/project/page/automation/Header.vue
+++ b/packages/frontend-2/components/project/page/automation/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col items-start">
+  <div class="flex flex-col items-start w-full">
     <CommonTextLink :icon-left="ArrowLeftIcon" size="xs" :to="automationsLink">
       Go Back to Automations
     </CommonTextLink>
@@ -15,13 +15,23 @@
         class="relative top-1.5"
       />
     </div>
+    <div class="mt-6 w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
+      <ProjectPageModelsCard
+        :project="project"
+        :model="automation.model"
+        :project-id="project.id"
+      />
+    </div>
   </div>
 </template>
 <script setup lang="ts">
 import { ArrowLeftIcon } from '@heroicons/vue/24/outline'
 import { ChevronRightIcon } from '@heroicons/vue/24/solid'
 import { graphql } from '~/lib/common/generated/gql'
-import type { ProjectPageAutomationHeader_AutomationFragment } from '~/lib/common/generated/gql/graphql'
+import type {
+  ProjectPageAutomationHeader_AutomationFragment,
+  ProjectPageAutomationHeader_ProjectFragment
+} from '~/lib/common/generated/gql/graphql'
 import { projectRoute } from '~/lib/common/helpers/route'
 import { useUpdateAutomation } from '~/lib/projects/composables/automationManagement'
 
@@ -29,24 +39,34 @@ graphql(`
   fragment ProjectPageAutomationHeader_Automation on Automation {
     id
     name
+    model {
+      ...ProjectPageLatestItemsModelItem
+    }
+  }
+`)
+
+graphql(`
+  fragment ProjectPageAutomationHeader_Project on Project {
+    id
+    ...ProjectPageModelsCardProject
   }
 `)
 
 const props = defineProps<{
-  projectId: string
+  project: ProjectPageAutomationHeader_ProjectFragment
   automation: ProjectPageAutomationHeader_AutomationFragment
 }>()
 
 const updateAutomation = useUpdateAutomation()
 
-const automationsLink = computed(() => projectRoute(props.projectId, 'automations'))
+const automationsLink = computed(() => projectRoute(props.project.id, 'automations'))
 const name = computed({
   get: () => props.automation.name,
   set: async (newVal) => {
     if (newVal === props.automation.name) return
 
     const args = {
-      projectId: props.projectId,
+      projectId: props.project.id,
       input: {
         id: props.automation.id,
         name: newVal
@@ -58,7 +78,8 @@ const name = computed({
           automationMutations: {
             update: {
               id: args.input.id,
-              name: args.input.name || props.automation.name
+              name: args.input.name || props.automation.name,
+              model: props.automation.model
             }
           }
         }
diff --git a/packages/frontend-2/lib/common/generated/gql/gql.ts b/packages/frontend-2/lib/common/generated/gql/gql.ts
index eab2abe984..c60c61797c 100644
--- a/packages/frontend-2/lib/common/generated/gql/gql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/gql.ts
@@ -33,7 +33,9 @@ const documents = {
     "\n  fragment ProjectsModelPageEmbed_Project on Project {\n    id\n    ...ProjectsPageTeamDialogManagePermissions_Project\n  }\n": types.ProjectsModelPageEmbed_ProjectFragmentDoc,
     "\n  fragment ProjectModelPageVersionsCardVersion on Version {\n    id\n    message\n    authorUser {\n      ...LimitedUserAvatar\n    }\n    createdAt\n    previewUrl\n    sourceApplication\n    commentThreadCount: commentThreads(limit: 0) {\n      totalCount\n    }\n    ...ProjectModelPageDialogDeleteVersion\n    ...ProjectModelPageDialogMoveToVersion\n    ...ModelCardAutomationStatus_Version\n  }\n": types.ProjectModelPageVersionsCardVersionFragmentDoc,
     "\n  fragment ProjectPageProjectHeader on Project {\n    id\n    role\n    name\n    description\n    visibility\n    allowPublicComments\n  }\n": types.ProjectPageProjectHeaderFragmentDoc,
-    "\n  fragment ProjectPageAutomationHeader_Automation on Automation {\n    id\n    name\n  }\n": types.ProjectPageAutomationHeader_AutomationFragmentDoc,
+    "\n  fragment ProjectPageAutomationFunctions_Automation on Automation {\n    id\n    currentRevision {\n      id\n      functions {\n        release {\n          id\n          function {\n            id\n            ...AutomationsFunctionsCard_AutomateFunction\n          }\n        }\n      }\n    }\n  }\n": types.ProjectPageAutomationFunctions_AutomationFragmentDoc,
+    "\n  fragment ProjectPageAutomationHeader_Automation on Automation {\n    id\n    name\n    model {\n      ...ProjectPageLatestItemsModelItem\n    }\n  }\n": types.ProjectPageAutomationHeader_AutomationFragmentDoc,
+    "\n  fragment ProjectPageAutomationHeader_Project on Project {\n    id\n    ...ProjectPageModelsCardProject\n  }\n": types.ProjectPageAutomationHeader_ProjectFragmentDoc,
     "\n  fragment ProjectPageAutomationsEmptyState_Query on Query {\n    automateFunctions(limit: 9) {\n      items {\n        ...AutomationsFunctionsCard_AutomateFunction\n      }\n    }\n  }\n": types.ProjectPageAutomationsEmptyState_QueryFragmentDoc,
     "\n  fragment ProjectPageAutomationsRow_Automation on Automation {\n    id\n    name\n    enabled\n    model {\n      id\n      name\n    }\n    runs(limit: 5) {\n      totalCount\n      items {\n        ...AutomationRunDetails\n      }\n    }\n  }\n": types.ProjectPageAutomationsRow_AutomationFragmentDoc,
     "\n  fragment ProjectDiscussionsPageHeader_Project on Project {\n    id\n    name\n  }\n": types.ProjectDiscussionsPageHeader_ProjectFragmentDoc,
@@ -135,7 +137,7 @@ const documents = {
     "\n  query ProjectModelsPage($projectId: String!) {\n    project(id: $projectId) {\n      id\n      ...ProjectModelsPageHeader_Project\n      ...ProjectModelsPageResults_Project\n    }\n  }\n": types.ProjectModelsPageDocument,
     "\n  query ProjectDiscussionsPage($projectId: String!) {\n    project(id: $projectId) {\n      id\n      ...ProjectDiscussionsPageHeader_Project\n      ...ProjectDiscussionsPageResults_Project\n    }\n  }\n": types.ProjectDiscussionsPageDocument,
     "\n  query ProjectAutomationsTab($projectId: String!, $search: String, $cursor: String) {\n    project(id: $projectId) {\n      id\n      automations(filter: $search, cursor: $cursor, limit: 5) {\n        totalCount\n        items {\n          ...ProjectPageAutomationsRow_Automation\n        }\n      }\n    }\n    ...ProjectPageAutomationsEmptyState_Query\n  }\n": types.ProjectAutomationsTabDocument,
-    "\n  query ProjectAutomationPage($projectId: String!, $automationId: String!) {\n    project(id: $projectId) {\n      id\n      automation(id: $automationId) {\n        id\n        ...ProjectPageAutomationPage_Automation\n      }\n    }\n  }\n": types.ProjectAutomationPageDocument,
+    "\n  query ProjectAutomationPage($projectId: String!, $automationId: String!) {\n    project(id: $projectId) {\n      id\n      ...ProjectPageAutomationPage_Project\n      automation(id: $automationId) {\n        id\n        ...ProjectPageAutomationPage_Automation\n      }\n    }\n  }\n": types.ProjectAutomationPageDocument,
     "\n  query ProjectWebhooks($projectId: String!) {\n    project(id: $projectId) {\n      id\n      name\n      webhooks {\n        items {\n          streamId\n          triggers\n          enabled\n          url\n          id\n          description\n          history(limit: 5) {\n            items {\n              status\n              statusInfo\n            }\n          }\n        }\n        totalCount\n      }\n    }\n  }\n": types.ProjectWebhooksDocument,
     "\n  query Blob($blobId: String!, $streamId: String!) {\n    stream(id: $streamId) {\n      blob(id: $blobId) {\n        id\n        fileName\n        fileType\n        fileSize\n        createdAt\n      }\n    }\n  }\n": types.BlobDocument,
     "\n  subscription OnProjectUpdated($id: String!) {\n    projectUpdated(id: $id) {\n      id\n      type\n      project {\n        ...ProjectPageProject\n        ...ProjectDashboardItemNoModels\n      }\n    }\n  }\n": types.OnProjectUpdatedDocument,
@@ -183,7 +185,8 @@ const documents = {
     "\n  query LegacyViewerCommitRedirectMetadata($streamId: String!, $commitId: String!) {\n    stream(id: $streamId) {\n      commit(id: $commitId) {\n        id\n        branch {\n          id\n        }\n      }\n    }\n  }\n": types.LegacyViewerCommitRedirectMetadataDocument,
     "\n  query ResolveCommentLink($commentId: String!, $projectId: String!) {\n    comment(id: $commentId, streamId: $projectId) {\n      ...LinkableComment\n    }\n  }\n": types.ResolveCommentLinkDocument,
     "\n  fragment ProjectPageProject on Project {\n    id\n    createdAt\n    ...ProjectPageProjectHeader\n    ...ProjectPageStatsBlockTeam\n    ...ProjectPageTeamDialog\n    ...ProjectPageStatsBlockModels\n    ...ProjectPageStatsBlockComments\n  }\n": types.ProjectPageProjectFragmentDoc,
-    "\n  fragment ProjectPageAutomationPage_Automation on Automation {\n    id\n    ...ProjectPageAutomationHeader_Automation\n  }\n": types.ProjectPageAutomationPage_AutomationFragmentDoc,
+    "\n  fragment ProjectPageAutomationPage_Automation on Automation {\n    id\n    ...ProjectPageAutomationHeader_Automation\n    ...ProjectPageAutomationFunctions_Automation\n  }\n": types.ProjectPageAutomationPage_AutomationFragmentDoc,
+    "\n  fragment ProjectPageAutomationPage_Project on Project {\n    id\n    ...ProjectPageAutomationHeader_Project\n  }\n": types.ProjectPageAutomationPage_ProjectFragmentDoc,
 };
 
 /**
@@ -283,7 +286,15 @@ export function graphql(source: "\n  fragment ProjectPageProjectHeader on Projec
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment ProjectPageAutomationHeader_Automation on Automation {\n    id\n    name\n  }\n"): (typeof documents)["\n  fragment ProjectPageAutomationHeader_Automation on Automation {\n    id\n    name\n  }\n"];
+export function graphql(source: "\n  fragment ProjectPageAutomationFunctions_Automation on Automation {\n    id\n    currentRevision {\n      id\n      functions {\n        release {\n          id\n          function {\n            id\n            ...AutomationsFunctionsCard_AutomateFunction\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment ProjectPageAutomationFunctions_Automation on Automation {\n    id\n    currentRevision {\n      id\n      functions {\n        release {\n          id\n          function {\n            id\n            ...AutomationsFunctionsCard_AutomateFunction\n          }\n        }\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  fragment ProjectPageAutomationHeader_Automation on Automation {\n    id\n    name\n    model {\n      ...ProjectPageLatestItemsModelItem\n    }\n  }\n"): (typeof documents)["\n  fragment ProjectPageAutomationHeader_Automation on Automation {\n    id\n    name\n    model {\n      ...ProjectPageLatestItemsModelItem\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  fragment ProjectPageAutomationHeader_Project on Project {\n    id\n    ...ProjectPageModelsCardProject\n  }\n"): (typeof documents)["\n  fragment ProjectPageAutomationHeader_Project on Project {\n    id\n    ...ProjectPageModelsCardProject\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -691,7 +702,7 @@ export function graphql(source: "\n  query ProjectAutomationsTab($projectId: Str
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query ProjectAutomationPage($projectId: String!, $automationId: String!) {\n    project(id: $projectId) {\n      id\n      automation(id: $automationId) {\n        id\n        ...ProjectPageAutomationPage_Automation\n      }\n    }\n  }\n"): (typeof documents)["\n  query ProjectAutomationPage($projectId: String!, $automationId: String!) {\n    project(id: $projectId) {\n      id\n      automation(id: $automationId) {\n        id\n        ...ProjectPageAutomationPage_Automation\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  query ProjectAutomationPage($projectId: String!, $automationId: String!) {\n    project(id: $projectId) {\n      id\n      ...ProjectPageAutomationPage_Project\n      automation(id: $automationId) {\n        id\n        ...ProjectPageAutomationPage_Automation\n      }\n    }\n  }\n"): (typeof documents)["\n  query ProjectAutomationPage($projectId: String!, $automationId: String!) {\n    project(id: $projectId) {\n      id\n      ...ProjectPageAutomationPage_Project\n      automation(id: $automationId) {\n        id\n        ...ProjectPageAutomationPage_Automation\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -883,7 +894,11 @@ export function graphql(source: "\n  fragment ProjectPageProject on Project {\n
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment ProjectPageAutomationPage_Automation on Automation {\n    id\n    ...ProjectPageAutomationHeader_Automation\n  }\n"): (typeof documents)["\n  fragment ProjectPageAutomationPage_Automation on Automation {\n    id\n    ...ProjectPageAutomationHeader_Automation\n  }\n"];
+export function graphql(source: "\n  fragment ProjectPageAutomationPage_Automation on Automation {\n    id\n    ...ProjectPageAutomationHeader_Automation\n    ...ProjectPageAutomationFunctions_Automation\n  }\n"): (typeof documents)["\n  fragment ProjectPageAutomationPage_Automation on Automation {\n    id\n    ...ProjectPageAutomationHeader_Automation\n    ...ProjectPageAutomationFunctions_Automation\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  fragment ProjectPageAutomationPage_Project on Project {\n    id\n    ...ProjectPageAutomationHeader_Project\n  }\n"): (typeof documents)["\n  fragment ProjectPageAutomationPage_Project on Project {\n    id\n    ...ProjectPageAutomationHeader_Project\n  }\n"];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};
diff --git a/packages/frontend-2/lib/common/generated/gql/graphql.ts b/packages/frontend-2/lib/common/generated/gql/graphql.ts
index bafdbfdfd6..7b5cfd3187 100644
--- a/packages/frontend-2/lib/common/generated/gql/graphql.ts
+++ b/packages/frontend-2/lib/common/generated/gql/graphql.ts
@@ -207,6 +207,12 @@ export type AutomateFunctionCollection = {
   totalCount: Scalars['Int'];
 };
 
+export type AutomateFunctionRelease = {
+  __typename?: 'AutomateFunctionRelease';
+  function: AutomateFunction;
+  id: Scalars['ID'];
+};
+
 export type AutomateRun = {
   __typename?: 'AutomateRun';
   createdAt: Scalars['DateTime'];
@@ -235,6 +241,7 @@ export enum AutomateRunStatus {
 export type Automation = {
   __typename?: 'Automation';
   createdAt: Scalars['DateTime'];
+  currentRevision?: Maybe<AutomationRevision>;
   enabled: Scalars['Boolean'];
   id: Scalars['ID'];
   /** TODO: Can there be more models in the future? Can there be 0? (automation on comment) */
@@ -313,6 +320,19 @@ export type AutomationMutationsFunctionRunStatusReportArgs = {
   input: AutomationRunStatusUpdateInput;
 };
 
+export type AutomationRevision = {
+  __typename?: 'AutomationRevision';
+  functions: Array<AutomationRevisionFunction>;
+  id: Scalars['ID'];
+};
+
+export type AutomationRevisionFunction = {
+  __typename?: 'AutomationRevisionFunction';
+  /** The secrets in parameters are redacted */
+  parameters?: Maybe<Scalars['JSONObject']>;
+  release: AutomateFunctionRelease;
+};
+
 export type AutomationRun = {
   __typename?: 'AutomationRun';
   automationId: Scalars['String'];
@@ -3094,7 +3114,11 @@ export type ProjectModelPageVersionsCardVersionFragment = { __typename?: 'Versio
 
 export type ProjectPageProjectHeaderFragment = { __typename?: 'Project', id: string, role?: string | null, name: string, description?: string | null, visibility: ProjectVisibility, allowPublicComments: boolean };
 
-export type ProjectPageAutomationHeader_AutomationFragment = { __typename?: 'Automation', id: string, name: string };
+export type ProjectPageAutomationFunctions_AutomationFragment = { __typename?: 'Automation', id: string, currentRevision?: { __typename?: 'AutomationRevision', id: string, functions: Array<{ __typename?: 'AutomationRevisionFunction', release: { __typename?: 'AutomateFunctionRelease', id: string, function: { __typename?: 'AutomateFunction', id: string, name: string, isFeatured: boolean, description: string, logo?: string | null, creator: { __typename?: 'LimitedUser', id: string, name: string } } } }> } | null };
+
+export type ProjectPageAutomationHeader_AutomationFragment = { __typename?: 'Automation', id: string, name: string, model: { __typename?: 'Model', id: string, name: string, displayName: string, previewUrl?: string | null, createdAt: string, updatedAt: string, description?: string | null, versionCount: { __typename?: 'VersionCollection', totalCount: number }, commentThreadCount: { __typename?: 'CommentCollection', totalCount: number }, pendingImportedVersions: Array<{ __typename?: 'FileUpload', id: string, projectId: string, modelName: string, convertedStatus: number, convertedMessage?: string | null, uploadDate: string, convertedLastUpdate: string, fileType: string, fileName: string }>, automationStatus?: { __typename?: 'AutomationsStatus', id: string, status: AutomationRunStatus, statusMessage?: string | null, automationRuns: Array<{ __typename?: 'AutomationRun', id: string, automationId: string, automationName: string, createdAt: string, status: AutomationRunStatus, functionRuns: Array<{ __typename?: 'AutomationFunctionRun', id: string, functionId: string, functionName: string, functionLogo?: string | null, elapsed: number, status: AutomationRunStatus, statusMessage?: string | null, contextView?: string | null, results?: {} | null, resultVersions: Array<{ __typename?: 'Version', id: string, model: { __typename?: 'Model', id: string, name: string } }> }> }> } | null } };
+
+export type ProjectPageAutomationHeader_ProjectFragment = { __typename?: 'Project', id: string, role?: string | null, visibility: ProjectVisibility, allowPublicComments: boolean };
 
 export type ProjectPageAutomationsEmptyState_QueryFragment = { __typename?: 'Query', automateFunctions: { __typename?: 'AutomateFunctionCollection', items: Array<{ __typename?: 'AutomateFunction', id: string, name: string, isFeatured: boolean, description: string, logo?: string | null, creator: { __typename?: 'LimitedUser', id: string, name: string } }> } };
 
@@ -3461,7 +3485,7 @@ export type UpdateAutomationMutationVariables = Exact<{
 }>;
 
 
-export type UpdateAutomationMutation = { __typename?: 'Mutation', projectMutations: { __typename?: 'ProjectMutations', automationMutations: { __typename?: 'ProjectAutomationMutations', update?: { __typename?: 'Automation', id: string, name: string } | null } } };
+export type UpdateAutomationMutation = { __typename?: 'Mutation', projectMutations: { __typename?: 'ProjectMutations', automationMutations: { __typename?: 'ProjectAutomationMutations', update?: { __typename?: 'Automation', id: string, name: string, model: { __typename?: 'Model', id: string, name: string, displayName: string, previewUrl?: string | null, createdAt: string, updatedAt: string, description?: string | null, versionCount: { __typename?: 'VersionCollection', totalCount: number }, commentThreadCount: { __typename?: 'CommentCollection', totalCount: number }, pendingImportedVersions: Array<{ __typename?: 'FileUpload', id: string, projectId: string, modelName: string, convertedStatus: number, convertedMessage?: string | null, uploadDate: string, convertedLastUpdate: string, fileType: string, fileName: string }>, automationStatus?: { __typename?: 'AutomationsStatus', id: string, status: AutomationRunStatus, statusMessage?: string | null, automationRuns: Array<{ __typename?: 'AutomationRun', id: string, automationId: string, automationName: string, createdAt: string, status: AutomationRunStatus, functionRuns: Array<{ __typename?: 'AutomationFunctionRun', id: string, functionId: string, functionName: string, functionLogo?: string | null, elapsed: number, status: AutomationRunStatus, statusMessage?: string | null, contextView?: string | null, results?: {} | null, resultVersions: Array<{ __typename?: 'Version', id: string, model: { __typename?: 'Model', id: string, name: string } }> }> }> } | null }, currentRevision?: { __typename?: 'AutomationRevision', id: string, functions: Array<{ __typename?: 'AutomationRevisionFunction', release: { __typename?: 'AutomateFunctionRelease', id: string, function: { __typename?: 'AutomateFunction', id: string, name: string, isFeatured: boolean, description: string, logo?: string | null, creator: { __typename?: 'LimitedUser', id: string, name: string } } } }> } | null } | null } } };
 
 export type ProjectAccessCheckQueryVariables = Exact<{
   id: Scalars['String'];
@@ -3600,7 +3624,7 @@ export type ProjectAutomationPageQueryVariables = Exact<{
 }>;
 
 
-export type ProjectAutomationPageQuery = { __typename?: 'Query', project: { __typename?: 'Project', id: string, automation?: { __typename?: 'Automation', id: string, name: string } | null } };
+export type ProjectAutomationPageQuery = { __typename?: 'Query', project: { __typename?: 'Project', id: string, role?: string | null, visibility: ProjectVisibility, allowPublicComments: boolean, automation?: { __typename?: 'Automation', id: string, name: string, model: { __typename?: 'Model', id: string, name: string, displayName: string, previewUrl?: string | null, createdAt: string, updatedAt: string, description?: string | null, versionCount: { __typename?: 'VersionCollection', totalCount: number }, commentThreadCount: { __typename?: 'CommentCollection', totalCount: number }, pendingImportedVersions: Array<{ __typename?: 'FileUpload', id: string, projectId: string, modelName: string, convertedStatus: number, convertedMessage?: string | null, uploadDate: string, convertedLastUpdate: string, fileType: string, fileName: string }>, automationStatus?: { __typename?: 'AutomationsStatus', id: string, status: AutomationRunStatus, statusMessage?: string | null, automationRuns: Array<{ __typename?: 'AutomationRun', id: string, automationId: string, automationName: string, createdAt: string, status: AutomationRunStatus, functionRuns: Array<{ __typename?: 'AutomationFunctionRun', id: string, functionId: string, functionName: string, functionLogo?: string | null, elapsed: number, status: AutomationRunStatus, statusMessage?: string | null, contextView?: string | null, results?: {} | null, resultVersions: Array<{ __typename?: 'Version', id: string, model: { __typename?: 'Model', id: string, name: string } }> }> }> } | null }, currentRevision?: { __typename?: 'AutomationRevision', id: string, functions: Array<{ __typename?: 'AutomationRevisionFunction', release: { __typename?: 'AutomateFunctionRelease', id: string, function: { __typename?: 'AutomateFunction', id: string, name: string, isFeatured: boolean, description: string, logo?: string | null, creator: { __typename?: 'LimitedUser', id: string, name: string } } } }> } | null } | null } };
 
 export type ProjectWebhooksQueryVariables = Exact<{
   projectId: Scalars['String'];
@@ -3912,7 +3936,9 @@ export type ResolveCommentLinkQuery = { __typename?: 'Query', comment?: { __type
 
 export type ProjectPageProjectFragment = { __typename?: 'Project', id: string, createdAt: string, role?: string | null, name: string, description?: string | null, visibility: ProjectVisibility, allowPublicComments: boolean, team: Array<{ __typename?: 'ProjectCollaborator', id: string, role: string, user: { __typename?: 'LimitedUser', role?: string | null, id: string, name: string, avatar?: string | null } }>, invitedTeam?: Array<{ __typename?: 'PendingStreamCollaborator', id: string, title: string, inviteId: string, role: string, user?: { __typename?: 'LimitedUser', role?: string | null, id: string, name: string, avatar?: string | null } | null }> | null, modelCount: { __typename?: 'ModelCollection', totalCount: number }, commentThreadCount: { __typename?: 'ProjectCommentCollection', totalCount: number } };
 
-export type ProjectPageAutomationPage_AutomationFragment = { __typename?: 'Automation', id: string, name: string };
+export type ProjectPageAutomationPage_AutomationFragment = { __typename?: 'Automation', id: string, name: string, model: { __typename?: 'Model', id: string, name: string, displayName: string, previewUrl?: string | null, createdAt: string, updatedAt: string, description?: string | null, versionCount: { __typename?: 'VersionCollection', totalCount: number }, commentThreadCount: { __typename?: 'CommentCollection', totalCount: number }, pendingImportedVersions: Array<{ __typename?: 'FileUpload', id: string, projectId: string, modelName: string, convertedStatus: number, convertedMessage?: string | null, uploadDate: string, convertedLastUpdate: string, fileType: string, fileName: string }>, automationStatus?: { __typename?: 'AutomationsStatus', id: string, status: AutomationRunStatus, statusMessage?: string | null, automationRuns: Array<{ __typename?: 'AutomationRun', id: string, automationId: string, automationName: string, createdAt: string, status: AutomationRunStatus, functionRuns: Array<{ __typename?: 'AutomationFunctionRun', id: string, functionId: string, functionName: string, functionLogo?: string | null, elapsed: number, status: AutomationRunStatus, statusMessage?: string | null, contextView?: string | null, results?: {} | null, resultVersions: Array<{ __typename?: 'Version', id: string, model: { __typename?: 'Model', id: string, name: string } }> }> }> } | null }, currentRevision?: { __typename?: 'AutomationRevision', id: string, functions: Array<{ __typename?: 'AutomationRevisionFunction', release: { __typename?: 'AutomateFunctionRelease', id: string, function: { __typename?: 'AutomateFunction', id: string, name: string, isFeatured: boolean, description: string, logo?: string | null, creator: { __typename?: 'LimitedUser', id: string, name: string } } } }> } | null };
+
+export type ProjectPageAutomationPage_ProjectFragment = { __typename?: 'Project', id: string, role?: string | null, visibility: ProjectVisibility, allowPublicComments: boolean };
 
 export const AuthRegisterPanelServerInfoFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AuthRegisterPanelServerInfo"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ServerInfo"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"inviteOnly"}}]}}]} as unknown as DocumentNode<AuthRegisterPanelServerInfoFragment, unknown>;
 export const ServerTermsOfServicePrivacyPolicyFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ServerTermsOfServicePrivacyPolicyFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"ServerInfo"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"termsOfService"}}]}}]} as unknown as DocumentNode<ServerTermsOfServicePrivacyPolicyFragmentFragment, unknown>;
@@ -3982,8 +4008,11 @@ export const ProjectPageStatsBlockTeamFragmentDoc = {"kind":"Document","definiti
 export const ProjectPageStatsBlockModelsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageStatsBlockModels"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"modelCount"},"name":{"kind":"Name","value":"models"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"0"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}}]} as unknown as DocumentNode<ProjectPageStatsBlockModelsFragment, unknown>;
 export const ProjectPageStatsBlockCommentsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageStatsBlockComments"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"commentThreadCount"},"name":{"kind":"Name","value":"commentThreads"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"0"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}}]} as unknown as DocumentNode<ProjectPageStatsBlockCommentsFragment, unknown>;
 export const ProjectPageProjectFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageProject"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageProjectHeader"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageStatsBlockTeam"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageTeamDialog"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageStatsBlockModels"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageStatsBlockComments"}}]}}]} as unknown as DocumentNode<ProjectPageProjectFragment, unknown>;
-export const ProjectPageAutomationHeader_AutomationFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageAutomationHeader_Automation"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Automation"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]} as unknown as DocumentNode<ProjectPageAutomationHeader_AutomationFragment, unknown>;
-export const ProjectPageAutomationPage_AutomationFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageAutomationPage_Automation"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Automation"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageAutomationHeader_Automation"}}]}}]} as unknown as DocumentNode<ProjectPageAutomationPage_AutomationFragment, unknown>;
+export const ProjectPageAutomationHeader_AutomationFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageAutomationHeader_Automation"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Automation"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"model"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageLatestItemsModelItem"}}]}}]}}]} as unknown as DocumentNode<ProjectPageAutomationHeader_AutomationFragment, unknown>;
+export const ProjectPageAutomationFunctions_AutomationFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageAutomationFunctions_Automation"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Automation"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"currentRevision"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"functions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"release"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"function"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"AutomationsFunctionsCard_AutomateFunction"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<ProjectPageAutomationFunctions_AutomationFragment, unknown>;
+export const ProjectPageAutomationPage_AutomationFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageAutomationPage_Automation"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Automation"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageAutomationHeader_Automation"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageAutomationFunctions_Automation"}}]}}]} as unknown as DocumentNode<ProjectPageAutomationPage_AutomationFragment, unknown>;
+export const ProjectPageAutomationHeader_ProjectFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageAutomationHeader_Project"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageModelsCardProject"}}]}}]} as unknown as DocumentNode<ProjectPageAutomationHeader_ProjectFragment, unknown>;
+export const ProjectPageAutomationPage_ProjectFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectPageAutomationPage_Project"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageAutomationHeader_Project"}}]}}]} as unknown as DocumentNode<ProjectPageAutomationPage_ProjectFragment, unknown>;
 export const RegisterPanelServerInviteDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"RegisterPanelServerInvite"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"token"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"serverInviteByToken"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"token"},"value":{"kind":"Variable","name":{"kind":"Name","value":"token"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}}]}}]}}]} as unknown as DocumentNode<RegisterPanelServerInviteQuery, RegisterPanelServerInviteQueryVariables>;
 export const EmailVerificationBannerStateDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"EmailVerificationBannerState"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"activeUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"email"}},{"kind":"Field","name":{"kind":"Name","value":"verified"}},{"kind":"Field","name":{"kind":"Name","value":"hasPendingVerification"}}]}}]}}]} as unknown as DocumentNode<EmailVerificationBannerStateQuery, EmailVerificationBannerStateQueryVariables>;
 export const RequestVerificationDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"RequestVerification"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"requestVerification"}}]}}]} as unknown as DocumentNode<RequestVerificationMutation, RequestVerificationMutationVariables>;
@@ -4028,7 +4057,7 @@ export const UpdateVersionDocument = {"kind":"Document","definitions":[{"kind":"
 export const DeleteWebhookDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"deleteWebhook"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"webhook"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"WebhookDeleteInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"webhookDelete"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"webhook"},"value":{"kind":"Variable","name":{"kind":"Name","value":"webhook"}}}]}]}}]} as unknown as DocumentNode<DeleteWebhookMutation, DeleteWebhookMutationVariables>;
 export const CreateWebhookDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"createWebhook"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"webhook"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"WebhookCreateInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"webhookCreate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"webhook"},"value":{"kind":"Variable","name":{"kind":"Name","value":"webhook"}}}]}]}}]} as unknown as DocumentNode<CreateWebhookMutation, CreateWebhookMutationVariables>;
 export const UpdateWebhookDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"updateWebhook"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"webhook"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"WebhookUpdateInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"webhookUpdate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"webhook"},"value":{"kind":"Variable","name":{"kind":"Name","value":"webhook"}}}]}]}}]} as unknown as DocumentNode<UpdateWebhookMutation, UpdateWebhookMutationVariables>;
-export const UpdateAutomationDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateAutomation"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ProjectAutomationUpdateInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projectMutations"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"automationMutations"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"projectId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"update"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageAutomationPage_Automation"}}]}}]}}]}}]}},...ProjectPageAutomationPage_AutomationFragmentDoc.definitions,...ProjectPageAutomationHeader_AutomationFragmentDoc.definitions]} as unknown as DocumentNode<UpdateAutomationMutation, UpdateAutomationMutationVariables>;
+export const UpdateAutomationDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateAutomation"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ProjectAutomationUpdateInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projectMutations"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"automationMutations"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"projectId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"update"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageAutomationPage_Automation"}}]}}]}}]}}]}},...ProjectPageAutomationPage_AutomationFragmentDoc.definitions,...ProjectPageAutomationHeader_AutomationFragmentDoc.definitions,...ProjectPageLatestItemsModelItemFragmentDoc.definitions,...PendingFileUploadFragmentDoc.definitions,...ProjectPageModelsCardRenameDialogFragmentDoc.definitions,...ProjectPageModelsCardDeleteDialogFragmentDoc.definitions,...ProjectPageModelsActionsFragmentDoc.definitions,...ModelCardAutomationStatus_ModelFragmentDoc.definitions,...ModelCardAutomationStatus_AutomationsStatusFragmentDoc.definitions,...ProjectPageAutomationFunctions_AutomationFragmentDoc.definitions,...AutomationsFunctionsCard_AutomateFunctionFragmentDoc.definitions]} as unknown as DocumentNode<UpdateAutomationMutation, UpdateAutomationMutationVariables>;
 export const ProjectAccessCheckDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectAccessCheck"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<ProjectAccessCheckQuery, ProjectAccessCheckQueryVariables>;
 export const ProjectsDashboardQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectsDashboardQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filter"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"UserProjectsFilter"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cursor"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"activeUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"projects"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filter"}}},{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"6"}},{"kind":"Argument","name":{"kind":"Name","value":"cursor"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cursor"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cursor"}},{"kind":"Field","name":{"kind":"Name","value":"totalCount"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDashboardItem"}}]}}]}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectsInviteBanners"}}]}}]}},...ProjectDashboardItemFragmentDoc.definitions,...ProjectDashboardItemNoModelsFragmentDoc.definitions,...ProjectPageModelsCardProjectFragmentDoc.definitions,...ProjectPageModelsActions_ProjectFragmentDoc.definitions,...ProjectsModelPageEmbed_ProjectFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions,...ProjectPageLatestItemsModelItemFragmentDoc.definitions,...PendingFileUploadFragmentDoc.definitions,...ProjectPageModelsCardRenameDialogFragmentDoc.definitions,...ProjectPageModelsCardDeleteDialogFragmentDoc.definitions,...ProjectPageModelsActionsFragmentDoc.definitions,...ModelCardAutomationStatus_ModelFragmentDoc.definitions,...ModelCardAutomationStatus_AutomationsStatusFragmentDoc.definitions,...ProjectsInviteBannersFragmentDoc.definitions,...ProjectsInviteBannerFragmentDoc.definitions,...LimitedUserAvatarFragmentDoc.definitions]} as unknown as DocumentNode<ProjectsDashboardQueryQuery, ProjectsDashboardQueryQueryVariables>;
 export const ProjectPageQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectPageQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"token"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageProject"}}]}},{"kind":"Field","name":{"kind":"Name","value":"projectInvite"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"projectId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}},{"kind":"Argument","name":{"kind":"Name","value":"token"},"value":{"kind":"Variable","name":{"kind":"Name","value":"token"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectsInviteBanner"}}]}}]}},...ProjectPageProjectFragmentDoc.definitions,...ProjectPageProjectHeaderFragmentDoc.definitions,...ProjectPageStatsBlockTeamFragmentDoc.definitions,...LimitedUserAvatarFragmentDoc.definitions,...ProjectPageTeamDialogFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions,...ProjectPageStatsBlockModelsFragmentDoc.definitions,...ProjectPageStatsBlockCommentsFragmentDoc.definitions,...ProjectsInviteBannerFragmentDoc.definitions]} as unknown as DocumentNode<ProjectPageQueryQuery, ProjectPageQueryQueryVariables>;
@@ -4045,7 +4074,7 @@ export const ProjectModelVersionsDocument = {"kind":"Document","definitions":[{"
 export const ProjectModelsPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectModelsPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectModelsPageHeader_Project"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectModelsPageResults_Project"}}]}}]}},...ProjectModelsPageHeader_ProjectFragmentDoc.definitions,...FormUsersSelectItemFragmentDoc.definitions,...ProjectModelsPageResults_ProjectFragmentDoc.definitions,...ProjectPageLatestItemsModelsFragmentDoc.definitions,...ProjectPageModelsStructureItem_ProjectFragmentDoc.definitions,...ProjectPageModelsActions_ProjectFragmentDoc.definitions,...ProjectsModelPageEmbed_ProjectFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions]} as unknown as DocumentNode<ProjectModelsPageQuery, ProjectModelsPageQueryVariables>;
 export const ProjectDiscussionsPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectDiscussionsPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDiscussionsPageHeader_Project"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDiscussionsPageResults_Project"}}]}}]}},...ProjectDiscussionsPageHeader_ProjectFragmentDoc.definitions,...ProjectDiscussionsPageResults_ProjectFragmentDoc.definitions]} as unknown as DocumentNode<ProjectDiscussionsPageQuery, ProjectDiscussionsPageQueryVariables>;
 export const ProjectAutomationsTabDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectAutomationsTab"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"search"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cursor"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"automations"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"search"}}},{"kind":"Argument","name":{"kind":"Name","value":"cursor"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cursor"}}},{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"5"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageAutomationsRow_Automation"}}]}}]}}]}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageAutomationsEmptyState_Query"}}]}},...ProjectPageAutomationsRow_AutomationFragmentDoc.definitions,...AutomationRunDetailsFragmentDoc.definitions,...ProjectPageAutomationsEmptyState_QueryFragmentDoc.definitions,...AutomationsFunctionsCard_AutomateFunctionFragmentDoc.definitions]} as unknown as DocumentNode<ProjectAutomationsTabQuery, ProjectAutomationsTabQueryVariables>;
-export const ProjectAutomationPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectAutomationPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"automationId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"automation"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"automationId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageAutomationPage_Automation"}}]}}]}}]}},...ProjectPageAutomationPage_AutomationFragmentDoc.definitions,...ProjectPageAutomationHeader_AutomationFragmentDoc.definitions]} as unknown as DocumentNode<ProjectAutomationPageQuery, ProjectAutomationPageQueryVariables>;
+export const ProjectAutomationPageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectAutomationPage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"automationId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageAutomationPage_Project"}},{"kind":"Field","name":{"kind":"Name","value":"automation"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"automationId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageAutomationPage_Automation"}}]}}]}}]}},...ProjectPageAutomationPage_ProjectFragmentDoc.definitions,...ProjectPageAutomationHeader_ProjectFragmentDoc.definitions,...ProjectPageModelsCardProjectFragmentDoc.definitions,...ProjectPageModelsActions_ProjectFragmentDoc.definitions,...ProjectsModelPageEmbed_ProjectFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions,...ProjectPageAutomationPage_AutomationFragmentDoc.definitions,...ProjectPageAutomationHeader_AutomationFragmentDoc.definitions,...ProjectPageLatestItemsModelItemFragmentDoc.definitions,...PendingFileUploadFragmentDoc.definitions,...ProjectPageModelsCardRenameDialogFragmentDoc.definitions,...ProjectPageModelsCardDeleteDialogFragmentDoc.definitions,...ProjectPageModelsActionsFragmentDoc.definitions,...ModelCardAutomationStatus_ModelFragmentDoc.definitions,...ModelCardAutomationStatus_AutomationsStatusFragmentDoc.definitions,...ProjectPageAutomationFunctions_AutomationFragmentDoc.definitions,...AutomationsFunctionsCard_AutomateFunctionFragmentDoc.definitions]} as unknown as DocumentNode<ProjectAutomationPageQuery, ProjectAutomationPageQueryVariables>;
 export const ProjectWebhooksDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectWebhooks"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"webhooks"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"streamId"}},{"kind":"Field","name":{"kind":"Name","value":"triggers"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}},{"kind":"Field","name":{"kind":"Name","value":"url"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"history"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"5"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"statusInfo"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}}]}}]} as unknown as DocumentNode<ProjectWebhooksQuery, ProjectWebhooksQueryVariables>;
 export const BlobDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Blob"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"blobId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"streamId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"stream"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"streamId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"blob"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"blobId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"fileName"}},{"kind":"Field","name":{"kind":"Name","value":"fileType"}},{"kind":"Field","name":{"kind":"Name","value":"fileSize"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}}]}}]}}]}}]} as unknown as DocumentNode<BlobQuery, BlobQueryVariables>;
 export const OnProjectUpdatedDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"OnProjectUpdated"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projectUpdated"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"project"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectPageProject"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectDashboardItemNoModels"}}]}}]}}]}},...ProjectPageProjectFragmentDoc.definitions,...ProjectPageProjectHeaderFragmentDoc.definitions,...ProjectPageStatsBlockTeamFragmentDoc.definitions,...LimitedUserAvatarFragmentDoc.definitions,...ProjectPageTeamDialogFragmentDoc.definitions,...ProjectsPageTeamDialogManagePermissions_ProjectFragmentDoc.definitions,...ProjectPageStatsBlockModelsFragmentDoc.definitions,...ProjectPageStatsBlockCommentsFragmentDoc.definitions,...ProjectDashboardItemNoModelsFragmentDoc.definitions,...ProjectPageModelsCardProjectFragmentDoc.definitions,...ProjectPageModelsActions_ProjectFragmentDoc.definitions,...ProjectsModelPageEmbed_ProjectFragmentDoc.definitions]} as unknown as DocumentNode<OnProjectUpdatedSubscription, OnProjectUpdatedSubscriptionVariables>;
diff --git a/packages/frontend-2/lib/projects/graphql/queries.ts b/packages/frontend-2/lib/projects/graphql/queries.ts
index 02efa0dd23..f409ee2565 100644
--- a/packages/frontend-2/lib/projects/graphql/queries.ts
+++ b/packages/frontend-2/lib/projects/graphql/queries.ts
@@ -226,6 +226,7 @@ export const projectAutomationPageQuery = graphql(`
   query ProjectAutomationPage($projectId: String!, $automationId: String!) {
     project(id: $projectId) {
       id
+      ...ProjectPageAutomationPage_Project
       automation(id: $automationId) {
         id
         ...ProjectPageAutomationPage_Automation
diff --git a/packages/frontend-2/pages/projects/[id]/index/automations/[aid].vue b/packages/frontend-2/pages/projects/[id]/index/automations/[aid].vue
index bcba6c1e80..b821e5a286 100644
--- a/packages/frontend-2/pages/projects/[id]/index/automations/[aid].vue
+++ b/packages/frontend-2/pages/projects/[id]/index/automations/[aid].vue
@@ -1,6 +1,11 @@
 <template>
-  <div v-if="automation" class="flex flex-col gap-8 items-start">
-    <ProjectPageAutomationHeader :automation="automation" :project-id="projectId" />
+  <div v-if="automation && project" class="flex flex-col gap-8 items-start">
+    <ProjectPageAutomationHeader
+      :automation="automation"
+      :project="project"
+      :project-id="projectId"
+    />
+    <ProjectPageAutomationFunctions :automation="automation" />
   </div>
   <CommonLoadingBar v-else-if="loading" loading />
   <div v-else />
@@ -16,6 +21,14 @@ graphql(`
   fragment ProjectPageAutomationPage_Automation on Automation {
     id
     ...ProjectPageAutomationHeader_Automation
+    ...ProjectPageAutomationFunctions_Automation
+  }
+`)
+
+graphql(`
+  fragment ProjectPageAutomationPage_Project on Project {
+    id
+    ...ProjectPageAutomationHeader_Project
   }
 `)
 
@@ -28,4 +41,5 @@ const { result, loading } = useQuery(projectAutomationPageQuery, () => ({
   automationId: automationId.value
 }))
 const automation = computed(() => result.value?.project.automation || null)
+const project = computed(() => result.value?.project)
 </script>
diff --git a/packages/server/assets/automate/typedefs/automate.graphql b/packages/server/assets/automate/typedefs/automate.graphql
index 01452bc4e6..c640848d5c 100644
--- a/packages/server/assets/automate/typedefs/automate.graphql
+++ b/packages/server/assets/automate/typedefs/automate.graphql
@@ -5,6 +5,19 @@ enum AutomateRunStatus {
   FAILED
 }
 
+type AutomationRevisionFunction {
+  """
+  The secrets in parameters are redacted
+  """
+  parameters: JSONObject
+  release: AutomateFunctionRelease!
+}
+
+type AutomationRevision {
+  id: ID!
+  functions: [AutomationRevisionFunction!]!
+}
+
 type Automation {
   id: ID!
   name: String!
@@ -14,6 +27,7 @@ type Automation {
   """
   model: Model!
   runs(cursor: String, limit: Int): AutomateRunCollection!
+  currentRevision: AutomationRevision
   createdAt: DateTime!
   updatedAt: DateTime!
 }
@@ -51,6 +65,11 @@ type AutomateFunction {
   logo: String
 }
 
+type AutomateFunctionRelease {
+  id: ID!
+  function: AutomateFunction!
+}
+
 type AutomateFunctionCollection {
   items: [AutomateFunction!]!
   totalCount: Int!
diff --git a/packages/server/modules/core/graph/generated/graphql.ts b/packages/server/modules/core/graph/generated/graphql.ts
index 8b6fe83729..a80b5d5dc2 100644
--- a/packages/server/modules/core/graph/generated/graphql.ts
+++ b/packages/server/modules/core/graph/generated/graphql.ts
@@ -215,6 +215,12 @@ export type AutomateFunctionCollection = {
   totalCount: Scalars['Int'];
 };
 
+export type AutomateFunctionRelease = {
+  __typename?: 'AutomateFunctionRelease';
+  function: AutomateFunction;
+  id: Scalars['ID'];
+};
+
 export type AutomateRun = {
   __typename?: 'AutomateRun';
   createdAt: Scalars['DateTime'];
@@ -243,6 +249,7 @@ export enum AutomateRunStatus {
 export type Automation = {
   __typename?: 'Automation';
   createdAt: Scalars['DateTime'];
+  currentRevision?: Maybe<AutomationRevision>;
   enabled: Scalars['Boolean'];
   id: Scalars['ID'];
   /** TODO: Can there be more models in the future? Can there be 0? (automation on comment) */
@@ -321,6 +328,19 @@ export type AutomationMutationsFunctionRunStatusReportArgs = {
   input: AutomationRunStatusUpdateInput;
 };
 
+export type AutomationRevision = {
+  __typename?: 'AutomationRevision';
+  functions: Array<AutomationRevisionFunction>;
+  id: Scalars['ID'];
+};
+
+export type AutomationRevisionFunction = {
+  __typename?: 'AutomationRevisionFunction';
+  /** The secrets in parameters are redacted */
+  parameters?: Maybe<Scalars['JSONObject']>;
+  release: AutomateFunctionRelease;
+};
+
 export type AutomationRun = {
   __typename?: 'AutomationRun';
   automationId: Scalars['String'];
@@ -3143,14 +3163,17 @@ export type ResolversTypes = {
   AuthStrategy: ResolverTypeWrapper<AuthStrategy>;
   AutomateFunction: ResolverTypeWrapper<Omit<AutomateFunction, 'creator'> & { creator: ResolversTypes['LimitedUser'] }>;
   AutomateFunctionCollection: ResolverTypeWrapper<Omit<AutomateFunctionCollection, 'items'> & { items: Array<ResolversTypes['AutomateFunction']> }>;
+  AutomateFunctionRelease: ResolverTypeWrapper<Omit<AutomateFunctionRelease, 'function'> & { function: ResolversTypes['AutomateFunction'] }>;
   AutomateRun: ResolverTypeWrapper<Omit<AutomateRun, 'version'> & { version: ResolversTypes['Version'] }>;
   AutomateRunCollection: ResolverTypeWrapper<Omit<AutomateRunCollection, 'items'> & { items: Array<ResolversTypes['AutomateRun']> }>;
   AutomateRunStatus: AutomateRunStatus;
-  Automation: ResolverTypeWrapper<Omit<Automation, 'model' | 'runs'> & { model: ResolversTypes['Model'], runs: ResolversTypes['AutomateRunCollection'] }>;
+  Automation: ResolverTypeWrapper<Omit<Automation, 'currentRevision' | 'model' | 'runs'> & { currentRevision?: Maybe<ResolversTypes['AutomationRevision']>, model: ResolversTypes['Model'], runs: ResolversTypes['AutomateRunCollection'] }>;
   AutomationCollection: ResolverTypeWrapper<Omit<AutomationCollection, 'items'> & { items: Array<ResolversTypes['Automation']> }>;
   AutomationCreateInput: AutomationCreateInput;
   AutomationFunctionRun: ResolverTypeWrapper<AutomationFunctionRunGraphQLReturn>;
   AutomationMutations: ResolverTypeWrapper<MutationsObjectGraphQLReturn>;
+  AutomationRevision: ResolverTypeWrapper<Omit<AutomationRevision, 'functions'> & { functions: Array<ResolversTypes['AutomationRevisionFunction']> }>;
+  AutomationRevisionFunction: ResolverTypeWrapper<Omit<AutomationRevisionFunction, 'release'> & { release: ResolversTypes['AutomateFunctionRelease'] }>;
   AutomationRun: ResolverTypeWrapper<Omit<AutomationRun, 'functionRuns'> & { functionRuns: Array<ResolversTypes['AutomationFunctionRun']> }>;
   AutomationRunStatus: AutomationRunStatus;
   AutomationRunStatusUpdateInput: AutomationRunStatusUpdateInput;
@@ -3331,13 +3354,16 @@ export type ResolversParentTypes = {
   AuthStrategy: AuthStrategy;
   AutomateFunction: Omit<AutomateFunction, 'creator'> & { creator: ResolversParentTypes['LimitedUser'] };
   AutomateFunctionCollection: Omit<AutomateFunctionCollection, 'items'> & { items: Array<ResolversParentTypes['AutomateFunction']> };
+  AutomateFunctionRelease: Omit<AutomateFunctionRelease, 'function'> & { function: ResolversParentTypes['AutomateFunction'] };
   AutomateRun: Omit<AutomateRun, 'version'> & { version: ResolversParentTypes['Version'] };
   AutomateRunCollection: Omit<AutomateRunCollection, 'items'> & { items: Array<ResolversParentTypes['AutomateRun']> };
-  Automation: Omit<Automation, 'model' | 'runs'> & { model: ResolversParentTypes['Model'], runs: ResolversParentTypes['AutomateRunCollection'] };
+  Automation: Omit<Automation, 'currentRevision' | 'model' | 'runs'> & { currentRevision?: Maybe<ResolversParentTypes['AutomationRevision']>, model: ResolversParentTypes['Model'], runs: ResolversParentTypes['AutomateRunCollection'] };
   AutomationCollection: Omit<AutomationCollection, 'items'> & { items: Array<ResolversParentTypes['Automation']> };
   AutomationCreateInput: AutomationCreateInput;
   AutomationFunctionRun: AutomationFunctionRunGraphQLReturn;
   AutomationMutations: MutationsObjectGraphQLReturn;
+  AutomationRevision: Omit<AutomationRevision, 'functions'> & { functions: Array<ResolversParentTypes['AutomationRevisionFunction']> };
+  AutomationRevisionFunction: Omit<AutomationRevisionFunction, 'release'> & { release: ResolversParentTypes['AutomateFunctionRelease'] };
   AutomationRun: Omit<AutomationRun, 'functionRuns'> & { functionRuns: Array<ResolversParentTypes['AutomationFunctionRun']> };
   AutomationRunStatusUpdateInput: AutomationRunStatusUpdateInput;
   AutomationsStatus: Omit<AutomationsStatus, 'automationRuns'> & { automationRuns: Array<ResolversParentTypes['AutomationRun']> };
@@ -3625,6 +3651,12 @@ export type AutomateFunctionCollectionResolvers<ContextType = GraphQLContext, Pa
   __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
 };
 
+export type AutomateFunctionReleaseResolvers<ContextType = GraphQLContext, ParentType extends ResolversParentTypes['AutomateFunctionRelease'] = ResolversParentTypes['AutomateFunctionRelease']> = {
+  function?: Resolver<ResolversTypes['AutomateFunction'], ParentType, ContextType>;
+  id?: Resolver<ResolversTypes['ID'], ParentType, ContextType>;
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
+};
+
 export type AutomateRunResolvers<ContextType = GraphQLContext, ParentType extends ResolversParentTypes['AutomateRun'] = ResolversParentTypes['AutomateRun']> = {
   createdAt?: Resolver<ResolversTypes['DateTime'], ParentType, ContextType>;
   id?: Resolver<ResolversTypes['ID'], ParentType, ContextType>;
@@ -3644,6 +3676,7 @@ export type AutomateRunCollectionResolvers<ContextType = GraphQLContext, ParentT
 
 export type AutomationResolvers<ContextType = GraphQLContext, ParentType extends ResolversParentTypes['Automation'] = ResolversParentTypes['Automation']> = {
   createdAt?: Resolver<ResolversTypes['DateTime'], ParentType, ContextType>;
+  currentRevision?: Resolver<Maybe<ResolversTypes['AutomationRevision']>, ParentType, ContextType>;
   enabled?: Resolver<ResolversTypes['Boolean'], ParentType, ContextType>;
   id?: Resolver<ResolversTypes['ID'], ParentType, ContextType>;
   model?: Resolver<ResolversTypes['Model'], ParentType, ContextType>;
@@ -3680,6 +3713,18 @@ export type AutomationMutationsResolvers<ContextType = GraphQLContext, ParentTyp
   __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
 };
 
+export type AutomationRevisionResolvers<ContextType = GraphQLContext, ParentType extends ResolversParentTypes['AutomationRevision'] = ResolversParentTypes['AutomationRevision']> = {
+  functions?: Resolver<Array<ResolversTypes['AutomationRevisionFunction']>, ParentType, ContextType>;
+  id?: Resolver<ResolversTypes['ID'], ParentType, ContextType>;
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
+};
+
+export type AutomationRevisionFunctionResolvers<ContextType = GraphQLContext, ParentType extends ResolversParentTypes['AutomationRevisionFunction'] = ResolversParentTypes['AutomationRevisionFunction']> = {
+  parameters?: Resolver<Maybe<ResolversTypes['JSONObject']>, ParentType, ContextType>;
+  release?: Resolver<ResolversTypes['AutomateFunctionRelease'], ParentType, ContextType>;
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
+};
+
 export type AutomationRunResolvers<ContextType = GraphQLContext, ParentType extends ResolversParentTypes['AutomationRun'] = ResolversParentTypes['AutomationRun']> = {
   automationId?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
   automationName?: Resolver<ResolversTypes['String'], ParentType, ContextType>;
@@ -4577,12 +4622,15 @@ export type Resolvers<ContextType = GraphQLContext> = {
   AuthStrategy?: AuthStrategyResolvers<ContextType>;
   AutomateFunction?: AutomateFunctionResolvers<ContextType>;
   AutomateFunctionCollection?: AutomateFunctionCollectionResolvers<ContextType>;
+  AutomateFunctionRelease?: AutomateFunctionReleaseResolvers<ContextType>;
   AutomateRun?: AutomateRunResolvers<ContextType>;
   AutomateRunCollection?: AutomateRunCollectionResolvers<ContextType>;
   Automation?: AutomationResolvers<ContextType>;
   AutomationCollection?: AutomationCollectionResolvers<ContextType>;
   AutomationFunctionRun?: AutomationFunctionRunResolvers<ContextType>;
   AutomationMutations?: AutomationMutationsResolvers<ContextType>;
+  AutomationRevision?: AutomationRevisionResolvers<ContextType>;
+  AutomationRevisionFunction?: AutomationRevisionFunctionResolvers<ContextType>;
   AutomationRun?: AutomationRunResolvers<ContextType>;
   AutomationsStatus?: AutomationsStatusResolvers<ContextType>;
   BigInt?: GraphQLScalarType;
diff --git a/packages/server/modules/cross-server-sync/graph/generated/graphql.ts b/packages/server/modules/cross-server-sync/graph/generated/graphql.ts
index 0f205e573c..27f8292072 100644
--- a/packages/server/modules/cross-server-sync/graph/generated/graphql.ts
+++ b/packages/server/modules/cross-server-sync/graph/generated/graphql.ts
@@ -205,6 +205,12 @@ export type AutomateFunctionCollection = {
   totalCount: Scalars['Int'];
 };
 
+export type AutomateFunctionRelease = {
+  __typename?: 'AutomateFunctionRelease';
+  function: AutomateFunction;
+  id: Scalars['ID'];
+};
+
 export type AutomateRun = {
   __typename?: 'AutomateRun';
   createdAt: Scalars['DateTime'];
@@ -233,6 +239,7 @@ export enum AutomateRunStatus {
 export type Automation = {
   __typename?: 'Automation';
   createdAt: Scalars['DateTime'];
+  currentRevision?: Maybe<AutomationRevision>;
   enabled: Scalars['Boolean'];
   id: Scalars['ID'];
   /** TODO: Can there be more models in the future? Can there be 0? (automation on comment) */
@@ -311,6 +318,19 @@ export type AutomationMutationsFunctionRunStatusReportArgs = {
   input: AutomationRunStatusUpdateInput;
 };
 
+export type AutomationRevision = {
+  __typename?: 'AutomationRevision';
+  functions: Array<AutomationRevisionFunction>;
+  id: Scalars['ID'];
+};
+
+export type AutomationRevisionFunction = {
+  __typename?: 'AutomationRevisionFunction';
+  /** The secrets in parameters are redacted */
+  parameters?: Maybe<Scalars['JSONObject']>;
+  release: AutomateFunctionRelease;
+};
+
 export type AutomationRun = {
   __typename?: 'AutomationRun';
   automationId: Scalars['String'];
diff --git a/packages/server/modules/mocks.ts b/packages/server/modules/mocks.ts
index f16f4610a9..09302e9dc2 100644
--- a/packages/server/modules/mocks.ts
+++ b/packages/server/modules/mocks.ts
@@ -5,6 +5,7 @@ import { Roles } from '@speckle/shared'
 import { times } from 'lodash'
 import { IMockStore, IMocks } from '@graphql-tools/mock'
 import dayjs from 'dayjs'
+import { Branches } from '@/modules/core/dbSchema'
 
 /**
  * Define mocking config in dev env
@@ -63,6 +64,9 @@ export async function buildMocksConfig(): Promise<{
             totalCount: count,
             items: times(count, () => store.get('AutomateRun'))
           } as any
+        },
+        model: async () => {
+          return Branches.knex().first()
         }
       },
       ProjectAutomationMutations: {
@@ -124,7 +128,9 @@ export async function buildMocksConfig(): Promise<{
       ID: () => faker.datatype.uuid(),
       DateTime: () => faker.date.recent().toISOString(),
       Model: () => ({
-        name: () => faker.commerce.productName()
+        id: () => faker.datatype.uuid(),
+        name: () => faker.commerce.productName(),
+        previewUrl: () => faker.image.imageUrl()
       }),
       Version: () => ({
         id: () => faker.random.alphaNumeric(10)
diff --git a/packages/server/test/graphql/generated/graphql.ts b/packages/server/test/graphql/generated/graphql.ts
index a193b86989..c41c882623 100644
--- a/packages/server/test/graphql/generated/graphql.ts
+++ b/packages/server/test/graphql/generated/graphql.ts
@@ -206,6 +206,12 @@ export type AutomateFunctionCollection = {
   totalCount: Scalars['Int'];
 };
 
+export type AutomateFunctionRelease = {
+  __typename?: 'AutomateFunctionRelease';
+  function: AutomateFunction;
+  id: Scalars['ID'];
+};
+
 export type AutomateRun = {
   __typename?: 'AutomateRun';
   createdAt: Scalars['DateTime'];
@@ -234,6 +240,7 @@ export enum AutomateRunStatus {
 export type Automation = {
   __typename?: 'Automation';
   createdAt: Scalars['DateTime'];
+  currentRevision?: Maybe<AutomationRevision>;
   enabled: Scalars['Boolean'];
   id: Scalars['ID'];
   /** TODO: Can there be more models in the future? Can there be 0? (automation on comment) */
@@ -312,6 +319,19 @@ export type AutomationMutationsFunctionRunStatusReportArgs = {
   input: AutomationRunStatusUpdateInput;
 };
 
+export type AutomationRevision = {
+  __typename?: 'AutomationRevision';
+  functions: Array<AutomationRevisionFunction>;
+  id: Scalars['ID'];
+};
+
+export type AutomationRevisionFunction = {
+  __typename?: 'AutomationRevisionFunction';
+  /** The secrets in parameters are redacted */
+  parameters?: Maybe<Scalars['JSONObject']>;
+  release: AutomateFunctionRelease;
+};
+
 export type AutomationRun = {
   __typename?: 'AutomationRun';
   automationId: Scalars['String'];