diff --git a/packages/dui3/.env.example b/packages/dui3/.env.example
index 61997a0aec..c74f7c038d 100644
--- a/packages/dui3/.env.example
+++ b/packages/dui3/.env.example
@@ -3,3 +3,10 @@ PORT=8082
 
 NUXT_PUBLIC_MIXPANEL_TOKEN_ID=acd87c5a50b56df91a795e999812a3a4
 NUXT_PUBLIC_MIXPANEL_API_HOST=https://analytics.speckle.systems
+
+SPECKLE_ACCOUNT_ID=undefined
+SPECKLE_TOKEN=undefined
+SPECKLE_USER_ID=undefined
+SPECKLE_URL=undefined
+SPECKLE_SAMPLE_PROJECT_ID=undefined
+SPECKLE_SAMPLE_MODEL_ID=undefined
\ No newline at end of file
diff --git a/packages/dui3/app.vue b/packages/dui3/app.vue
index aaadc1d36f..d32fbd84e0 100644
--- a/packages/dui3/app.vue
+++ b/packages/dui3/app.vue
@@ -1,20 +1,21 @@
 <template>
-  <div id="speckle" class="bg-foundation-page text-foreground">
+  <div id="speckle" class="bg-foundation-page text-foreground overflow-auto">
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
+    <SingletonToastManager />
   </div>
 </template>
 <script setup lang="ts">
+import { useMixpanel } from '~/lib/core/composables/mixpanel'
+import { useConfigStore } from '~/store/config'
+import { useAccountStore } from '~/store/accounts'
 import { storeToRefs } from 'pinia'
-import { useAccountsSetup } from '~/lib/accounts/composables/setup'
-import { useDocumentInfoStore } from '~/store/uiConfig'
+import { useUpdateConnector } from '~/lib/core/composables/updateConnector'
 
-const uiConfigStore = useDocumentInfoStore()
+const uiConfigStore = useConfigStore()
 const { isDarkTheme } = storeToRefs(uiConfigStore)
 
-useAccountsSetup()
-
 useHead({
   // Title suffix
   titleTemplate: (titleChunk) =>
@@ -24,7 +25,33 @@ useHead({
     class: computed(() => (isDarkTheme.value ? `dark` : ``))
   },
   bodyAttrs: {
-    class: 'simple-scrollbar bg-foundation-page text-foreground'
-  }
+    class: 'simple-scrollbar bg-foundation-page text-foreground '
+  },
+  // For standalone vue devtools see: https://devtools.vuejs.org/guide/installation.html#standalone
+  script: import.meta.dev ? ['http://localhost:8098'] : []
+})
+
+onMounted(async () => {
+  const { trackEvent, addConnectorToProfile, identifyProfile } = useMixpanel()
+  const { checkUpdate } = useUpdateConnector()
+  // TODO: some host apps can open DUI3 automatically, with this case we shouldn't mark track event as `"type": "action"`,
+  // we need to get this info from source app. (TBD which apps: Rhino opens automatically, not sure acad, sketchup and revit needs trigger button to init)
+  trackEvent('DUI3 Action', { name: 'Launch' })
+
+  // Checks whether new version available for the connector or not and throws a toast notification if any.
+  await checkUpdate()
+
+  const { accounts } = useAccountStore()
+
+  const uniqueEmails = new Set<string>()
+  accounts.forEach((account) => {
+    const email = account?.accountInfo.userInfo.email
+    if (email && !uniqueEmails.has(email)) {
+      addConnectorToProfile(email)
+      identifyProfile(email)
+      uniqueEmails.add(email)
+    }
+  })
 })
 </script>
+store/config
diff --git a/packages/dui3/components/accounts/Item.vue b/packages/dui3/components/accounts/Item.vue
new file mode 100644
index 0000000000..1091a5cfe4
--- /dev/null
+++ b/packages/dui3/components/accounts/Item.vue
@@ -0,0 +1,54 @@
+<template>
+  <button
+    v-tippy="tip"
+    :class="`group block w-full p-2 text-left items-center space-x-2  select-none group transition hover:bg-primary-muted hover:cursor-pointer hover:text-primary ${
+      !account.isValid
+        ? 'text-danger bg-rose-500/10 cursor-not-allowed'
+        : 'cursor-pointer'
+    } ${
+      currentSelectedAccountId === account.accountInfo.id
+        ? 'bg-blue-500/5 text-primary'
+        : ''
+    }`"
+    :disabled="!account.isValid"
+    @click="$emit('select', account)"
+  >
+    <div class="flex items-center space-x-2">
+      <UserAvatar :user="userAvatar" :active="account.accountInfo.isDefault" />
+      <div class="min-w-0 grow">
+        <div class="truncate overflow-hidden min-w-0 flex items-center space-x-2">
+          <span>{{ account.accountInfo.serverInfo.name }}</span>
+          <span class="text-foreground-2 truncate min-w-0 caption">
+            {{ account.accountInfo.serverInfo.url.split('//')[1] }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </button>
+</template>
+<script setup lang="ts">
+import type { DUIAccount } from '~~/store/accounts'
+
+const props = defineProps<{
+  account: DUIAccount
+  currentSelectedAccountId?: string
+}>()
+
+defineEmits<{
+  (e: 'select', account: DUIAccount): void
+}>()
+
+const userAvatar = computed(() => {
+  return {
+    name: props.account.accountInfo.userInfo.name,
+    avatar: props.account.accountInfo.userInfo.avatar
+  }
+})
+
+const tip = computed(() => {
+  let value = ''
+  if (props.account.accountInfo.isDefault) value += 'This is your default account. '
+  if (!props.account.isValid) value += 'This account is not reachable.'
+  return value === '' ? null : value
+})
+</script>
diff --git a/packages/dui3/components/accounts/Menu.vue b/packages/dui3/components/accounts/Menu.vue
new file mode 100644
index 0000000000..7b58deedee
--- /dev/null
+++ b/packages/dui3/components/accounts/Menu.vue
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <button v-tippy="`Click to change the account.`" @click="showAccountsDialog = true">
+      <UserAvatar v-if="!showAccountsDialog" :user="user" hover-effect />
+      <UserAvatar v-else hover-effect>
+        <XMarkIcon class="w-6 h-6" />
+      </UserAvatar>
+    </button>
+    <LayoutDialog
+      v-model:open="showAccountsDialog"
+      title="Select account"
+      fullscreen="none"
+    >
+      <CommonLoadingBar :loading="isLoading" class="my-0" />
+      <AccountsItem
+        v-for="acc in accounts"
+        :key="acc.accountInfo.id"
+        :current-selected-account-id="currentSelectedAccountId"
+        :account="(acc as DUIAccount)"
+        class="rounded-lg mb-2"
+        @select="selectAccount(acc as DUIAccount)"
+      />
+      <FormButton text size="xs" @click="accountStore.refreshAccounts()">
+        Refresh accounts
+      </FormButton>
+    </LayoutDialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { XMarkIcon } from '@heroicons/vue/20/solid'
+import type { DUIAccount } from '~/store/accounts'
+import { useAccountStore } from '~/store/accounts'
+import { useMixpanel } from '~/lib/core/composables/mixpanel'
+
+const { trackEvent } = useMixpanel()
+const app = useNuxtApp()
+
+const props = defineProps<{
+  currentSelectedAccountId?: string
+}>()
+
+defineEmits<{
+  (e: 'select', account: DUIAccount): void
+}>()
+
+const showAccountsDialog = ref(false)
+
+app.$baseBinding.on('documentChanged', () => {
+  showAccountsDialog.value = false
+})
+
+watch(showAccountsDialog, (newVal) => {
+  if (newVal) {
+    void accountStore.refreshAccounts()
+    void trackEvent('DUI3 Action', { name: 'Account menu open' })
+  }
+})
+
+const accountStore = useAccountStore()
+const { accounts, defaultAccount, userSelectedAccount, isLoading } =
+  storeToRefs(accountStore)
+
+const selectAccount = (acc: DUIAccount) => {
+  userSelectedAccount.value = acc
+  accountStore.setUserSelectedAccount(acc) // saves the selected account id into DUI3Config.db for later use
+  showAccountsDialog.value = false
+  void trackEvent('DUI3 Action', { name: 'Account change' })
+}
+
+const user = computed(() => {
+  if (!defaultAccount.value) return undefined
+  let acc = defaultAccount.value
+  if (props.currentSelectedAccountId) {
+    acc = accounts.value.find(
+      (acc) => acc.accountInfo.id === props.currentSelectedAccountId
+    ) as DUIAccount
+  }
+  return {
+    name: acc.accountInfo.userInfo.name,
+    avatar: acc.accountInfo.userInfo.avatar
+  }
+})
+</script>
diff --git a/packages/dui3/components/automate/CreateDialog.vue b/packages/dui3/components/automate/CreateDialog.vue
new file mode 100644
index 0000000000..3f777e9d12
--- /dev/null
+++ b/packages/dui3/components/automate/CreateDialog.vue
@@ -0,0 +1,158 @@
+<!-- NOT WILL BE USED SINCE WE ENABLE AUTOMATION CREATION FROM DUI3 -->
+<template>
+  <div class="p-0">
+    <slot name="activator" :toggle="toggleDialog"></slot>
+    <LayoutDialog
+      v-model:open="showAutomateDialog"
+      :title="`Settings`"
+      fullscreen="none"
+    >
+      <div v-if="hasFunctions">
+        <FormSelectBase
+          key="name"
+          v-model="selectedFunction"
+          clearable
+          label="Automate functions"
+          placeholder="Nothing selected"
+          name="Functions"
+          show-label
+          :items="functions"
+          mount-menu-on-body
+        >
+          <template #something-selected="{ value }">
+            <span>{{ value.name }}</span>
+          </template>
+          <template #option="{ item }">
+            <div class="flex items-center">
+              <span class="truncate">{{ item.name }}</span>
+            </div>
+          </template>
+        </FormSelectBase>
+      </div>
+      <div v-if="selectedFunction && finalParams && step === 0">
+        <FormJsonForm
+          ref="jsonForm"
+          :data="data"
+          :schema="finalParams"
+          class="space-y-4"
+          :validate-on-mount="false"
+          @change="handler"
+        />
+      </div>
+      <div v-if="step === 1">
+        <FormTextInput
+          v-model="automationName"
+          name="automationName"
+          label="Automation name"
+          color="foundation"
+          show-label
+          help="Give your automation a name"
+          placeholder="Name"
+          show-required
+          validate-on-value-update
+        />
+      </div>
+      <FormButton
+        v-if="selectedFunction && step === 0"
+        size="sm"
+        class="mt-4"
+        @click="step++"
+      >
+        Next
+      </FormButton>
+      <FormButton
+        v-if="selectedFunction && step === 1"
+        size="sm"
+        class="mt-4"
+        @click="createAutomationHandler"
+      >
+        Create
+      </FormButton>
+    </LayoutDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import type { AutomateFunctionItemFragment } from '~/lib/common/generated/gql/graphql'
+import {
+  automateFunctionsQuery,
+  createAutomationMutation
+} from '~/lib/graphql/mutationsAndQueries'
+import { provideApolloClient, useMutation, useQuery } from '@vue/apollo-composable'
+import { useAccountStore } from '~/store/accounts'
+import type { ApolloError } from '@apollo/client/errors'
+import { formatVersionParams } from '~/lib/common/helpers/jsonSchema'
+import { useJsonFormsChangeHandler } from '~/lib/core/composables/jsonSchema'
+
+const props = defineProps<{
+  projectId: string
+  modelId: string
+}>()
+
+const step = ref<number>(0)
+
+const automationName = ref<string>('')
+
+const accountStore = useAccountStore()
+const { activeAccount } = storeToRefs(accountStore)
+const accountId = computed(() => activeAccount.value?.accountInfo.id) // NOTE: none of the tokens here has read, write access to automate, only frontend tokens have. Keep in mind after first pass!
+
+const selectedFunction = ref<AutomateFunctionItemFragment>()
+
+const showAutomateDialog = ref(false)
+
+const toggleDialog = () => {
+  showAutomateDialog.value = !showAutomateDialog.value
+}
+
+const { mutate } = provideApolloClient(activeAccount.value.client)(() =>
+  useMutation(createAutomationMutation)
+)
+
+const createAutomationHandler = async () => {
+  const _res = await mutate({
+    projectId: props.projectId,
+    input: { name: automationName.value, enabled: false }
+  })
+  showAutomateDialog.value = false
+}
+
+const { result: functionsResult, onError } = useQuery(
+  automateFunctionsQuery,
+  () => ({}),
+  () => ({ clientId: accountId.value, debounce: 500, fetchPolicy: 'network-only' })
+)
+
+onError((err: ApolloError) => {
+  console.warn(err.message)
+})
+
+const functions = computed(() => functionsResult.value?.automateFunctions.items)
+const hasFunctions = computed(() => functions.value?.length !== 0)
+
+const release = computed(() =>
+  selectedFunction.value?.releases.items.length
+    ? selectedFunction.value?.releases.items[0]
+    : undefined
+)
+
+const finalParams = computed(() => formatVersionParams(release.value?.inputSchema))
+
+const { handler } = useJsonFormsChangeHandler({
+  schema: finalParams
+})
+
+console.log(finalParams)
+
+type DataType = Record<string, unknown>
+const data = computed(() => {
+  const kvp = {} as DataType
+  if (finalParams.value) {
+    Object.entries(finalParams.value).forEach((k, _) => {
+      kvp[k as unknown as string] = undefined
+    })
+  }
+  return kvp
+})
+</script>
diff --git a/packages/dui3/components/automate/ResultDialog.vue b/packages/dui3/components/automate/ResultDialog.vue
new file mode 100644
index 0000000000..d4af6274eb
--- /dev/null
+++ b/packages/dui3/components/automate/ResultDialog.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="p-0">
+    <slot name="activator" :toggle="toggleDialog"></slot>
+    <LayoutDialog
+      v-model:open="showAutomateReportDialog"
+      :title="`Automation Report`"
+      fullscreen="none"
+    >
+      <div v-if="props.automationRuns" class="space-y-2">
+        <AutomateFunctionRunsRows
+          v-for="aRun in automationRuns"
+          :key="aRun.id"
+          :model-card="modelCard"
+          :automation-name="aRun.automation.name"
+          :runs="aRun.functionRuns"
+          :project-id="modelCard.projectId"
+          :model-id="modelId"
+        />
+      </div>
+    </LayoutDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IModelCard } from '~/lib/models/card'
+import type { AutomationRunItemFragment } from '~/lib/common/generated/gql/graphql'
+
+const props = defineProps<{
+  modelCard: IModelCard
+  modelId: string
+  automationRuns: AutomationRunItemFragment[] | undefined
+}>()
+
+const showAutomateReportDialog = ref(false)
+
+const toggleDialog = () => {
+  showAutomateReportDialog.value = !showAutomateReportDialog.value
+}
+</script>
diff --git a/packages/dui3/components/automate/function/Logo.vue b/packages/dui3/components/automate/function/Logo.vue
new file mode 100644
index 0000000000..627e551cd2
--- /dev/null
+++ b/packages/dui3/components/automate/function/Logo.vue
@@ -0,0 +1,60 @@
+<template>
+  <div :class="classes">
+    <img v-if="finalLogo" :src="finalLogo" alt="Function logo" class="h-10 w-10" />
+    <span v-else :class="fallbackIconClasses">λ</span>
+  </div>
+</template>
+<script setup lang="ts">
+import type { MaybeNullOrUndefined, Nullable } from '@speckle/shared'
+
+type Size = 'base' | 'xs'
+
+const props = withDefaults(
+  defineProps<{
+    logo?: MaybeNullOrUndefined<string>
+    size?: Size
+  }>(),
+  {
+    size: 'base'
+  }
+)
+
+const cleanFunctionLogo = (logo: MaybeNullOrUndefined<string>): Nullable<string> => {
+  if (!logo?.length) return null
+  if (logo.startsWith('data:')) return logo
+  if (logo.startsWith('http:')) return logo
+  if (logo.startsWith('https:')) return logo
+  return null
+}
+
+const finalLogo = computed(() => cleanFunctionLogo(props.logo))
+const classes = computed(() => {
+  const classParts = [
+    'bg-foundation-focus text-primary font-medium rounded-full shrink-0 flex justify-center text-center items-center overflow-hidden select-none'
+  ]
+
+  switch (props.size) {
+    case 'xs':
+      classParts.push('h-4 w-4')
+      break
+    case 'base':
+    default:
+      classParts.push('h-10 w-10')
+      break
+  }
+
+  return classParts.join(' ')
+})
+
+const fallbackIconClasses = computed(() => {
+  const classParts: string[] = []
+
+  switch (props.size) {
+    case 'xs':
+      classParts.push('text-xs')
+      break
+  }
+
+  return classParts.join(' ')
+})
+</script>
diff --git a/packages/dui3/components/automate/function/RunRow.vue b/packages/dui3/components/automate/function/RunRow.vue
new file mode 100644
index 0000000000..0228e0802a
--- /dev/null
+++ b/packages/dui3/components/automate/function/RunRow.vue
@@ -0,0 +1,134 @@
+<template>
+  <div
+    :class="`border border-blue-500/10 rounded-md space-y-2 overflow-hidden ${
+      expanded ? 'shadow' : ''
+    }`"
+  >
+    <button
+      class="flex space-x-1 items-center max-w-full w-full px-1 py-1 h-8 transition hover:bg-primary-muted"
+      @click="expanded = !expanded"
+    >
+      <div>
+        <Component
+          :is="statusMetaData.icon"
+          v-tippy="functionRun.status"
+          :class="['h-4 w-4 outline-none', statusMetaData.iconColor]"
+        />
+      </div>
+      <AutomateFunctionLogo :logo="functionRun.function?.logo" size="xs" />
+      <div class="font-medium text-xs truncate">
+        {{ automationName ? automationName + ' / ' : ''
+        }}{{ functionRun.function?.name || 'Unknown function' }}
+      </div>
+
+      <div class="h-full grow flex justify-end">
+        <button
+          class="hover:bg-primary-muted hover:text-primary flex h-full items-center justify-center rounded"
+        >
+          <ChevronDownIcon
+            :class="`h-3 w-3 transition ${!expanded ? '-rotate-90' : 'rotate-0'}`"
+          />
+        </button>
+      </div>
+    </button>
+    <div v-if="expanded" class="px-2 pb-2 space-y-4">
+      <!-- Status message -->
+      <div class="space-y-1">
+        <div class="text-xs font-medium text-foreground-2">Status</div>
+        <div
+          v-if="
+            [
+              AutomateRunStatus.Initializing,
+              AutomateRunStatus.Running,
+              AutomateRunStatus.Pending
+            ].includes(functionRun.status)
+          "
+          class="text-xs text-foreground-2 italic"
+        >
+          Function is {{ functionRun.status.toLowerCase() }}.
+        </div>
+        <div v-else class="text-xs text-foreground-2 italic">
+          {{ functionRun.statusMessage || 'No status message' }}
+        </div>
+      </div>
+
+      <!-- Attachments -->
+      <!-- <div
+        v-if="attachments.length !== 0"
+        class="border-t pt-2 border-foreground-2 space-y-1"
+      >
+        <div class="text-xs font-medium text-foreground-2">Attachments</div>
+        <div class="ml-[2px] justify-start">
+          <AutomateRunsAttachmentButton
+            v-for="id in attachments"
+            :key="id"
+            :blob-id="id"
+            :project-id="projectId"
+            size="xs"
+            link
+            class="mr-2"
+          />
+        </div>
+      </div> -->
+      <!-- Results -->
+      <div
+        v-if="!!results?.values.objectResults.length"
+        class="border-t pt-2 border-foreground-2"
+      >
+        <div class="text-xs font-medium text-foreground-2 mb-2">Results</div>
+        <div class="space-y-1">
+          <AutomateFunctionRunRowObjectResult
+            v-for="(result, index) in results.values.objectResults.slice(
+              0,
+              pageRunLimit
+            )"
+            :key="index"
+            :model-card="modelCard"
+            :function-id="functionRun.function?.id"
+            :result="result"
+          />
+          <FormButton
+            v-if="pageRunLimit < results.values.objectResults.length"
+            size="sm"
+            color="outline"
+            class="w-full"
+            @click="pageRunLimit += 10"
+          >
+            Load more ({{ results.values.objectResults.length - pageRunLimit }}
+            hidden results)
+          </FormButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ChevronDownIcon } from '@heroicons/vue/24/outline'
+import { AutomateRunStatus } from '~/lib/common/generated/gql/graphql'
+import type { AutomateFunctionRunItemFragment } from '~/lib/common/generated/gql/graphql'
+import {
+  useRunStatusMetadata,
+  useAutomationFunctionRunResults
+} from '~/lib/automate/runStatus'
+import type { IModelCard } from '~/lib/models/card'
+
+const props = defineProps<{
+  modelCard: IModelCard
+  functionRun: AutomateFunctionRunItemFragment
+  automationName: string
+}>()
+
+const results = useAutomationFunctionRunResults({
+  results: computed(() => props.functionRun.results)
+})
+const { metadata: statusMetaData } = useRunStatusMetadata({
+  status: computed(() => props.functionRun.status)
+})
+
+const pageRunLimit = ref(5)
+const expanded = ref(false)
+
+// const attachments = computed(() =>
+//   (results.value?.values.blobIds || []).filter((b) => !!b)
+// )
+</script>
diff --git a/packages/dui3/components/automate/function/RunRowObjectResult.vue b/packages/dui3/components/automate/function/RunRowObjectResult.vue
new file mode 100644
index 0000000000..25f9a40e44
--- /dev/null
+++ b/packages/dui3/components/automate/function/RunRowObjectResult.vue
@@ -0,0 +1,98 @@
+<template>
+  <div :class="`overflow-hidden`">
+    <button
+      :class="`block transition text-left hover:bg-primary-muted hover:shadow-md rounded-md p-1 cursor-pointer border-l-2 border-primary bg-primary-muted shadow-md`"
+      @click="handleClick()"
+    >
+      <div class="flex items-center space-x-1">
+        <div>
+          <Component :is="iconAndColor.icon" :class="`w-4 h-4 ${iconAndColor.color}`" />
+        </div>
+        <div :class="`text-xs ${iconAndColor.color}`">
+          {{ result.category }}: {{ result.objectIds.length }} affected elements
+        </div>
+      </div>
+      <div v-if="result.message" class="text-xs text-foreground-2 pl-5">
+        {{ result.message }}
+      </div>
+    </button>
+  </div>
+</template>
+<script setup lang="ts">
+import { useQuery } from '@vue/apollo-composable'
+import {
+  XMarkIcon,
+  InformationCircleIcon,
+  ExclamationTriangleIcon
+} from '@heroicons/vue/24/outline'
+import type { Automate } from '@speckle/shared'
+import { objectQuery } from '~/lib/graphql/mutationsAndQueries'
+import type { IModelCard } from '~/lib/models/card'
+import { useAccountStore } from '~/store/accounts'
+
+type ObjectResult = Automate.AutomateTypes.ResultsSchema['values']['objectResults'][0]
+
+const props = defineProps<{
+  modelCard: IModelCard
+  result: ObjectResult
+  functionId?: string
+}>()
+
+const accStore = useAccountStore()
+const app = useNuxtApp()
+const projectAccount = computed(() =>
+  accStore.accountWithFallback(props.modelCard.accountId, props.modelCard.serverUrl)
+)
+const clientId = projectAccount.value.accountInfo.id
+
+const applicationIds = ref<string[]>([])
+
+type Data = {
+  applicationId?: string
+}
+
+// Loop over each objectId to run the query and collect application IDs
+props.result.objectIds.forEach((objectId) => {
+  const { result: objectResult } = useQuery(
+    objectQuery,
+    () => ({
+      projectId: props.modelCard.projectId,
+      objectId
+    }),
+    () => ({ clientId })
+  )
+
+  watch(objectResult, (newValue) => {
+    const data = newValue?.project.object?.data as Data | undefined
+    const applicationId = data?.applicationId
+    if (applicationId && !applicationIds.value.includes(applicationId)) {
+      applicationIds.value.push(applicationId)
+    }
+  })
+})
+
+const handleClick = async () => {
+  await app.$baseBinding.highlightObjects(applicationIds.value)
+}
+
+const iconAndColor = computed(() => {
+  switch (props.result.level) {
+    case 'ERROR':
+      return {
+        icon: XMarkIcon,
+        color: 'text-danger font-medium'
+      }
+    case 'WARNING':
+      return {
+        icon: ExclamationTriangleIcon,
+        color: 'text-warning font-medium'
+      }
+    case 'INFO':
+    default:
+      return {
+        icon: InformationCircleIcon,
+        color: 'text-foreground font-medium'
+      }
+  }
+})
+</script>
diff --git a/packages/dui3/components/automate/function/RunsRows.vue b/packages/dui3/components/automate/function/RunsRows.vue
new file mode 100644
index 0000000000..90139de9f5
--- /dev/null
+++ b/packages/dui3/components/automate/function/RunsRows.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="space-y-2">
+    <AutomateFunctionRunRow
+      v-for="fRun in runs"
+      :key="fRun.id"
+      :model-card="modelCard"
+      :automation-name="automationName"
+      :function-run="fRun"
+      :project-id="projectId"
+      :model-id="modelId"
+      :version-id="versionId"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import type { IModelCard } from '~/lib/models/card'
+import type { AutomateFunctionRunItemFragment } from '~/lib/common/generated/gql/graphql'
+
+defineProps<{
+  runs: AutomateFunctionRunItemFragment[]
+  modelCard: IModelCard
+  automationName: string
+  projectId: string
+  modelId: string
+  versionId?: string
+}>()
+</script>
diff --git a/packages/dui3/components/automate/runs/trigger-status/Icon.vue b/packages/dui3/components/automate/runs/trigger-status/Icon.vue
new file mode 100644
index 0000000000..96880d87c3
--- /dev/null
+++ b/packages/dui3/components/automate/runs/trigger-status/Icon.vue
@@ -0,0 +1,73 @@
+<template>
+  <svg width="120" height="120" viewBox="0 0 120 120">
+    <circle cx="60" cy="60" r="40" fill="none" stroke="#e6e6e6" stroke-width="12" />
+    <circle
+      class="base stroke-red-400 origin-center"
+      :style="`${styles.failed}`"
+      cx="60"
+      cy="60"
+      r="40"
+      fill="none"
+      stroke-width="25"
+      pathLength="100"
+    />
+    <circle
+      class="base stroke-green-400 origin-center"
+      :style="`${styles.passed}`"
+      cx="60"
+      cy="60"
+      r="40"
+      fill="none"
+      stroke-width="25"
+      pathLength="100"
+    />
+    <circle
+      class="base stroke-amber-400 origin-center"
+      :style="`${styles.inProgress}`"
+      cx="60"
+      cy="60"
+      r="40"
+      fill="none"
+      stroke-width="25"
+      pathLength="100"
+    />
+  </svg>
+</template>
+<script setup lang="ts">
+import type { RunsStatusSummary } from '~/lib/automate/runStatus'
+
+const props = defineProps<{
+  summary: RunsStatusSummary
+}>()
+
+// segment: percentage + offset, where offset = prev percentage in radians
+
+const styles = computed(() => {
+  const failed = (props.summary.failed / props.summary.total) * 100
+  const offsetFailed = 0
+  const passed = (props.summary.passed / props.summary.total) * 100
+  const offsetPassed = 360 * (failed / 100)
+  const inProgress = (props.summary.inProgress / props.summary.total) * 100
+  const offsetInProgress = offsetPassed + 360 * (passed / 100)
+
+  const stylePack = {
+    failed: `stroke-dashoffset: ${
+      100 - failed
+    }; transform: rotate(${offsetFailed}deg);`,
+    passed: `stroke-dashoffset: ${
+      100 - passed
+    }; transform: rotate(${offsetPassed}deg);`,
+    inProgress: `stroke-dashoffset: ${
+      100 - inProgress
+    }; transform: rotate(${offsetInProgress}deg);`
+  }
+
+  return stylePack
+})
+</script>
+<style scoped>
+.base {
+  stroke-dasharray: 100;
+  transform-origin: center;
+}
+</style>
diff --git a/packages/dui3/components/common/ModelNotification.vue b/packages/dui3/components/common/ModelNotification.vue
new file mode 100644
index 0000000000..d389ed36bd
--- /dev/null
+++ b/packages/dui3/components/common/ModelNotification.vue
@@ -0,0 +1,82 @@
+<template>
+  <div
+    :class="`${containerClassColor} flex justify-between items-center py-1 px-2 space-x-2 max-[275px]:flex-col max-[275px]:space-y-2 min-w-0`"
+  >
+    <div class="grow min-w-0">
+      <div
+        :class="`${textClassColor} text-xs font-medium transition max-[275px]:text-center line-clamp-4 text-ellipsis break-words`"
+      >
+        {{ notification.text }}
+      </div>
+    </div>
+    <div class="flex items-center group space-x-1">
+      <FormButton
+        v-if="notification.dismissible"
+        size="xs"
+        text
+        :color="notification.level"
+        @click.stop="$emit('dismiss')"
+      >
+        <span :class="`${textClassColor}`">Dismiss</span>
+      </FormButton>
+      <ReportBase
+        v-if="notification.report"
+        :report="notification.report"
+        class="mt-[3px]"
+      />
+      <FormButton
+        v-if="notification.cta"
+        size="sm"
+        :color="notification.level === 'info' ? 'primary' : notification.level"
+        @click.stop="notification.cta?.action"
+      >
+        {{ notification.cta.name }}
+      </FormButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTimeoutFn } from '@vueuse/core'
+import type { ModelCardNotification } from '~/lib/models/card/notification'
+
+const props = defineProps<{
+  notification: ModelCardNotification
+}>()
+
+const emit = defineEmits(['dismiss'])
+
+if (props.notification.timeout) {
+  useTimeoutFn(() => emit('dismiss'), props.notification.timeout)
+}
+
+const containerClassColor = computed(() => {
+  switch (props.notification.level) {
+    case 'danger':
+      return 'bg-red-500/10'
+    case 'info':
+      return 'bg-blue-500/10'
+    case 'success':
+      return 'bg-green-500/10'
+    case 'warning':
+      return 'bg-orange-500/10'
+    default:
+      return 'bg-blue-500/10'
+  }
+})
+
+const textClassColor = computed(() => {
+  switch (props.notification.level) {
+    case 'danger':
+      return 'text-red-500'
+    case 'info':
+      return 'text-blue-500'
+    case 'success':
+      return 'text-green-500'
+    case 'warning':
+      return 'text-orange-500'
+    default:
+      return 'bg-blue-500/10'
+  }
+})
+</script>
diff --git a/packages/dui3/components/common/ProjectModelGroup.vue b/packages/dui3/components/common/ProjectModelGroup.vue
new file mode 100644
index 0000000000..9e76d90e88
--- /dev/null
+++ b/packages/dui3/components/common/ProjectModelGroup.vue
@@ -0,0 +1,301 @@
+<template>
+  <div v-if="projectDetails && !projectError" class="px-[2px] rounded-md">
+    <!-- <div
+      v-if="isProjectReadOnly"
+      class="px-2 py-1 mb-1 flex w-full items-center text-xs text-foreground-2 justify-between bg-white rounded-md transition group shadow"
+    >
+      <div v-if="writeAccessRequested">Write access request is pending...</div>
+      <div v-else class="flex w-full items-center justify-between">
+        You do not have write access to this project.
+        TODO: Enable later when FE2 is ready for accepting/denying requested accesses
+        <button
+          v-if="isProjectReadOnly"
+          v-tippy="'Request Write Access'"
+          class="hover:text-primary"
+        >
+          <LockClosedIcon
+            class="w-4"
+            @click.stop="
+              requestWriteAccess(),
+                trackEvent(
+                  'DUI3 Action',
+                  { name: 'Request Write Access' },
+                  projectAccount?.accountInfo.id
+                )
+            "
+          />
+        </button>
+      </div>
+    </div> -->
+    <button
+      :class="`flex w-full items-center text-foreground-2 justify-between hover:bg-blue-500/10 ${
+        showModels ? '' : 'bg-blue-500/10'
+      } rounded-md transition group`"
+      @click="showModels = !showModels"
+    >
+      <div class="flex items-center transition group-hover:text-primary h-8 min-w-0">
+        <ChevronDownIcon
+          :class="`w-4 ${showModels ? '' : '-rotate-90'} transition mt-1`"
+        />
+        <div class="text-sm text-left truncate select-none flex items-center">
+          <div>{{ projectDetails.name }}</div>
+          <div v-if="!showModels" class="text-xs opacity-50 ml-2 pt-[1px]">
+            {{ project.senders.length + project.receivers.length }}
+          </div>
+        </div>
+      </div>
+
+      <div class="opacity-0 group-hover:opacity-100 transition">
+        <button
+          v-tippy="'Open project in browser'"
+          class="hover:text-primary flex items-center space-x-2 p-2"
+        >
+          <div class="text-xs text-left truncate select-none">
+            {{ projectDetails.role ? projectDetails.role.split(':')[1] : '' }}
+          </div>
+          <ArrowTopRightOnSquareIcon
+            class="w-4"
+            @click.stop="
+              $openUrl(projectUrl),
+                trackEvent('DUI3 Action', { name: 'Project View' }, project.accountId)
+            "
+          />
+        </button>
+      </div>
+    </button>
+
+    <div v-show="showModels" class="space-y-2 mt-2 pb-1">
+      <CommonAlert
+        v-if="isWorkspaceReadOnly"
+        size="xs"
+        :color="'warning'"
+        :actions="[
+          {
+            title: 'Subscribe',
+            onClick: () => $openUrl(workspaceUrl)
+          }
+        ]"
+      >
+        <template #description>
+          The workspace is in a read-only locked state until there's an active
+          subscription. Subscribe to a plan to regain full access.
+        </template>
+      </CommonAlert>
+      <ModelSender
+        v-for="model in project.senders"
+        :key="model.modelCardId"
+        :model-card="model"
+        :project="project"
+        :readonly="isProjectReadOnly || isWorkspaceReadOnly"
+      />
+      <ModelReceiver
+        v-for="model in project.receivers"
+        :key="model.modelCardId"
+        :model-card="model"
+        :project="project"
+      />
+    </div>
+  </div>
+  <div
+    v-if="projectError"
+    class="px-2 py-4 bg-foundation dark:bg-neutral-700/10 rounded-md shadow"
+  >
+    <CommonAlert
+      color="danger"
+      with-dismiss
+      @dismiss="askDismissProjectQuestionDialog = true"
+    >
+      <template #title>
+        Whoops - project
+        <code>{{ project.projectId }}</code>
+        is inaccessible.
+      </template>
+      <template #description>
+        Apollo error:
+        <code>{{ projectError }}</code>
+
+        <div v-if="!hasAccountMatch" class="my-4">
+          This might have happened because you do not have a valid account that can
+          access it.
+        </div>
+      </template>
+    </CommonAlert>
+    <LayoutDialog v-model:open="askDismissProjectQuestionDialog" fullscreen="none">
+      <template #header>Remove Project</template>
+      <div class="text-xs mb-4">Do you want to remove the project from this file?</div>
+      <div class="flex justify-between center py-2 space-x-3">
+        <FormButton size="sm" full-width @click="removeProjectModels">Yes</FormButton>
+        <FormButton
+          size="sm"
+          color="secondary"
+          full-width
+          @click="
+            ;(askDismissProjectQuestionDialog = false), (projectError = undefined)
+          "
+        >
+          Hide error
+        </FormButton>
+      </div>
+    </LayoutDialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { useQuery, useSubscription } from '@vue/apollo-composable'
+import { ChevronDownIcon, ArrowTopRightOnSquareIcon } from '@heroicons/vue/20/solid'
+import type { ProjectModelGroup } from '~~/store/hostApp'
+import { useHostAppStore } from '~~/store/hostApp'
+import { useAccountStore } from '~~/store/accounts'
+import {
+  projectDetailsQuery,
+  versionCreatedSubscription,
+  userProjectsUpdatedSubscription,
+  projectUpdatedSubscription
+} from '~~/lib/graphql/mutationsAndQueries'
+import { useMixpanel } from '~/lib/core/composables/mixpanel'
+import type { ApolloError } from '@apollo/client/errors'
+
+const { trackEvent } = useMixpanel()
+const accountStore = useAccountStore()
+const hostAppStore = useHostAppStore()
+const { $openUrl } = useNuxtApp()
+
+const props = defineProps<{
+  project: ProjectModelGroup
+}>()
+
+const showModels = ref(true)
+const askDismissProjectQuestionDialog = ref(false)
+const writeAccessRequested = ref(false)
+
+const hasAccountMatch = computed(() =>
+  accountStore.isAccountExistsById(props.project.accountId)
+)
+
+const projectAccount = computed(() =>
+  accountStore.accountWithFallback(props.project.accountId, props.project.serverUrl)
+)
+
+const clientId = projectAccount.value.accountInfo.id
+
+const {
+  result: projectDetailsResult,
+  onError,
+  refetch: refetchProjectDetails
+} = useQuery(
+  projectDetailsQuery,
+  () => ({ projectId: props.project.projectId }),
+  () => ({ clientId })
+)
+
+const removeProjectModels = async () => {
+  await hostAppStore.removeProjectModels(props.project.projectId)
+  askDismissProjectQuestionDialog.value = false
+}
+
+const projectError = ref<string>()
+onError((err: ApolloError) => {
+  projectError.value = err.message
+})
+const projectDetails = computed(() => projectDetailsResult.value?.project)
+
+const isProjectReadOnly = computed(() => {
+  if (!projectDetails.value) return true
+
+  if (
+    projectDetails.value?.role === null ||
+    projectDetails.value?.role === 'stream:reviewer'
+  )
+    return true
+  return false
+})
+
+const isWorkspaceReadOnly = computed(() => {
+  if (!projectDetails.value?.workspace) return false // project is not even in a workspace
+  return projectDetails.value?.workspace?.readOnly
+})
+
+// Enable later when FE2 is ready for accepting/denying requested accesses
+// const hasServerMatch = computed(() =>
+//   accountStore.isAccountExistsByServer(props.project.serverUrl)
+// )
+
+// const requestWriteAccess = async () => {
+//   if (hasServerMatch.value) {
+//     const { mutate } = provideApolloClient((projectAccount.value as DUIAccount).client)(
+//       () => useMutation(requestProjectAccess)
+//     )
+//     const res = await mutate({
+//       input: projectDetails.value?.id as string
+//     })
+//     writeAccessRequested.value = true
+//     // TODO: It throws if it has already pending request, handle it!
+//     console.log(res)
+//   }
+// }
+
+const { onResult: userProjectsUpdated } = useSubscription(
+  userProjectsUpdatedSubscription,
+  () => ({}),
+  () => ({ clientId })
+)
+
+const { onResult: projectUpdated } = useSubscription(
+  projectUpdatedSubscription,
+  () => ({ projectId: props.project.projectId }),
+  () => ({ clientId })
+)
+
+// to catch changes on visibility of project
+projectUpdated((res) => {
+  // TODO: FIX needed: whenever project visibility changed from "discoverable" to "private", we can't get message if the `clientId` is not part of the team
+  // validated with Fabians this is a current behavior.
+  if (!res.data) return
+  projectError.value = undefined // clean error, refetch will set it if any
+  refetchProjectDetails()
+})
+
+// to catch changes on team of the project
+userProjectsUpdated((res) => {
+  if (!res.data) return
+  refetchProjectDetails()
+  writeAccessRequested.value = false
+})
+
+const projectUrl = computed(() => {
+  const acc = accountStore.accounts.find((acc) => acc.accountInfo.id === clientId)
+  return `${acc?.accountInfo.serverInfo.url as string}/projects/${
+    props.project.projectId
+  }`
+})
+
+const workspaceUrl = computed(() => {
+  const acc = accountStore.accounts.find((acc) => acc.accountInfo.id === clientId)
+  return `${acc?.accountInfo.serverInfo.url as string}/workspaces/${
+    projectDetails.value?.workspace?.slug
+  }`
+})
+
+// Subscribe to version created events at a project level, and filter to any receivers (if any)
+const { onResult } = useSubscription(
+  versionCreatedSubscription,
+  () => ({ projectId: props.project.projectId }),
+  () => ({ clientId })
+)
+
+onResult((res) => {
+  if (!res.data) return
+  if (res.data?.projectVersionsUpdated?.type !== 'CREATED') return
+
+  const relevantReceiver = props.project.receivers.find(
+    (r) => r.modelId === res.data?.projectVersionsUpdated.version?.model.id
+  )
+  if (!relevantReceiver) return
+
+  hostAppStore.patchModel(relevantReceiver.modelCardId, {
+    latestVersionId: res.data.projectVersionsUpdated.version?.id,
+    latestVersionCreatedAt: res.data.projectVersionsUpdated.version?.createdAt,
+    hasDismissedUpdateWarning: false,
+    displayReceiveComplete: false
+  })
+})
+</script>
diff --git a/packages/dui3/components/config/Dialog.vue b/packages/dui3/components/config/Dialog.vue
new file mode 100644
index 0000000000..a5921bdcf5
--- /dev/null
+++ b/packages/dui3/components/config/Dialog.vue
@@ -0,0 +1,33 @@
+<template>
+  <!-- ONLY FOR TEST FOR NOW-->
+  <form class="flex flex-col space-y-4 form-json-form">
+    <span>Settings</span>
+    <FormJsonForm :schema="jsonSchema" @change="onParamsFormChange"></FormJsonForm>
+  </form>
+</template>
+
+<script setup lang="ts">
+import type { JsonFormsChangeEvent } from '@jsonforms/vue'
+
+const jsonSchema = {
+  type: 'object',
+  properties: {
+    acceptTerms: {
+      type: 'boolean',
+      title: 'I accept the terms and conditions'
+    },
+    username: { type: 'string', title: 'Username', default: 'a' },
+    color: {
+      type: 'string',
+      title: 'Favorite Color',
+      enum: ['red', 'green', 'blue']
+    }
+  }
+}
+
+const paramsFormState = ref<JsonFormsChangeEvent>()
+const onParamsFormChange = (e: JsonFormsChangeEvent) => {
+  paramsFormState.value = e
+  console.log(JSON.stringify(e))
+}
+</script>
diff --git a/packages/dui3/components/error/Dialog.vue b/packages/dui3/components/error/Dialog.vue
new file mode 100644
index 0000000000..f8bf4aed77
--- /dev/null
+++ b/packages/dui3/components/error/Dialog.vue
@@ -0,0 +1,33 @@
+<template>
+  <LayoutDialog
+    v-model:open="store.showErrorDialog"
+    fullscreen="none"
+    @close="store.showErrorDialog = false"
+    @fully-closed="store.setHostAppError(null)"
+  >
+    <template #header>
+      <div class="h5 font-bold">Host App Error</div>
+    </template>
+    <div class="text-foreground-2 text-sm font-normal mx-2 -mt-2">
+      <div class="text-s font-bold mb-2">{{ store.hostAppError?.message }}</div>
+      <div class="text-xs whitespace-pre-line truncate">
+        {{ store.hostAppError?.error }}
+      </div>
+      <button class="text-s font-bold my-2" @click="toggleStackTrace">
+        {{ showStackTrace ? 'Hide' : 'Show' }} Stack Trace
+      </button>
+      <div v-if="showStackTrace" class="text-xs whitespace-pre-line truncate">
+        {{ store.hostAppError?.stackTrace }}
+      </div>
+    </div>
+  </LayoutDialog>
+</template>
+
+<script setup lang="ts">
+import { useHostAppStore } from '~/store/hostApp'
+const store = useHostAppStore()
+const showStackTrace = ref(false)
+const toggleStackTrace = () => {
+  showStackTrace.value = !showStackTrace.value
+}
+</script>
diff --git a/packages/dui3/components/filter/ListSelect.vue b/packages/dui3/components/filter/ListSelect.vue
new file mode 100644
index 0000000000..b76dbd7c83
--- /dev/null
+++ b/packages/dui3/components/filter/ListSelect.vue
@@ -0,0 +1,103 @@
+<template>
+  <div class="space-y-2">
+    <div>
+      <FormSelectBase
+        v-model="selectedFilterName"
+        name="sendFilter"
+        label="Selected filter"
+        class="w-full"
+        fixed-height
+        show-label
+        :items="filterNames"
+        :allow-unset="false"
+        mount-menu-on-body
+      >
+        <template #something-selected="{ value }">
+          <span class="text-primary text-base text-sm">{{ value }}</span>
+        </template>
+        <template #option="{ item }">
+          <span class="text-base text-sm">{{ item }}</span>
+        </template>
+      </FormSelectBase>
+    </div>
+    <div v-if="selectedFilter">
+      <div
+        v-if="
+          selectedFilter.id === 'everything' || selectedFilter.name === 'Everything' // TODO: damn. remove name check later, if we remove now it will break production... we should differentiate its id and display name
+        "
+      >
+        <div class="p-4 text-primary bg-blue-500/10 rounded-md text-xs">
+          All supported objects will be sent. Depending on the model, this might take a
+          while.
+        </div>
+      </div>
+      <div
+        v-else-if="
+          selectedFilter.id === 'selection' || selectedFilter.name === 'Selection' // TODO: damn. remove name check later, if we remove now it will break production... we should differentiate its id and display name
+        "
+      >
+        <FilterSelection
+          :filter="(selectedFilter as IDirectSelectionSendFilter)"
+          @update:filter="(filter : ISendFilter) => (selectedFilter = filter)"
+        />
+      </div>
+      <div v-else-if="selectedFilter.id === 'layers'">TODO</div>
+      <div v-else-if="selectedFilter.id === 'revitViews'">
+        <FilterRevitViews
+          :filter="(selectedFilter as RevitViewsSendFilter)"
+          @update:filter="(filter : ISendFilter) => (selectedFilter = filter)"
+        />
+      </div>
+      <div v-else-if="selectedFilter.id === 'revitCategories'">
+        <FilterRevitCategories
+          :filter="(selectedFilter as RevitCategoriesSendFilter)"
+          @update:filter="(filter : ISendFilter) => (selectedFilter = filter)"
+        />
+      </div>
+    </div>
+    <div v-if="!!filter" class="text-xs caption rounded p-2 bg-orange-500/10">
+      This action will replace the existing
+      <b>{{ selectedFilterName }}</b>
+      filter.
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type {
+  ISendFilter,
+  IDirectSelectionSendFilter,
+  RevitViewsSendFilter,
+  RevitCategoriesSendFilter
+} from 'lib/models/card/send'
+import { useHostAppStore } from '~~/store/hostApp'
+import { storeToRefs } from 'pinia'
+
+const store = useHostAppStore()
+const { sendFilters, selectionFilter } = storeToRefs(store)
+
+// NOTE: we're forcefully refreshing filters here because revit 2022 does not surface up views on change events, so we cannot trigger it from the host app
+// on a need by basis. This way, we're forcing all host apps to give us an updated list of send filters, as it's a cheap operation (and should stay so!).
+void store.refreshSendFilters()
+
+const props = defineProps<{
+  filter?: ISendFilter
+}>()
+
+const emit = defineEmits<{ (e: 'update:filter', value: ISendFilter): void }>()
+const selectedFilter = ref<ISendFilter>(props.filter || selectionFilter.value)
+
+const selectedFilterName = ref(
+  props.filter?.name || sendFilters.value?.find((f) => f.isDefault)?.name
+)
+const filterNames = computed(() => sendFilters.value?.map((f) => f.name))
+
+watch(selectedFilterName, (newValue) => {
+  selectedFilter.value = sendFilters.value?.find(
+    (f) => f.name === newValue
+  ) as ISendFilter
+})
+
+watch(selectedFilter, (newValue) => {
+  emit('update:filter', newValue)
+})
+</script>
diff --git a/packages/dui3/components/filter/Selection.vue b/packages/dui3/components/filter/Selection.vue
new file mode 100644
index 0000000000..3897e081b7
--- /dev/null
+++ b/packages/dui3/components/filter/Selection.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="space-y-2 p-2 text-primary bg-blue-500/10 rounded-md text-xs">
+    <div v-if="selectionStore.selectionInfo.selectedObjectIds?.length === 0">
+      No objects selected, go ahead and select some!
+    </div>
+    <div v-else>{{ selectionStore.selectionInfo.summary }}</div>
+  </div>
+</template>
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import type { IDirectSelectionSendFilter, ISendFilter } from 'lib/models/card/send'
+import { useHostAppStore } from '~~/store/hostApp'
+import { useSelectionStore } from '~~/store/selection'
+
+const emit = defineEmits<{
+  (e: 'update:filter', filter: ISendFilter): void
+}>()
+
+const store = useHostAppStore()
+const { selectionFilter } = storeToRefs(store)
+
+const selectionStore = useSelectionStore()
+const { selectionInfo } = storeToRefs(selectionStore)
+
+defineProps<{
+  filter: IDirectSelectionSendFilter
+}>()
+
+watch(
+  selectionInfo,
+  (newValue) => {
+    const filter = { ...selectionFilter.value } as IDirectSelectionSendFilter
+    filter.selectedObjectIds = newValue.selectedObjectIds
+    filter.summary = newValue.summary as string
+    emit('update:filter', filter)
+  },
+  { deep: true, immediate: true }
+)
+
+onMounted(() => {
+  selectionStore.refreshSelectionFromHostApp()
+})
+</script>
diff --git a/packages/dui3/components/filter/revit/Categories.vue b/packages/dui3/components/filter/revit/Categories.vue
new file mode 100644
index 0000000000..9a9deeaf0c
--- /dev/null
+++ b/packages/dui3/components/filter/revit/Categories.vue
@@ -0,0 +1,124 @@
+<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->
+<!-- eslint-disable vuejs-accessibility/click-events-have-key-events -->
+<template>
+  <div class="mt-4 space-y-2">
+    <div class="flex items-center space-x-2 justify-between">
+      <FormTextInput
+        v-model="searchValue"
+        placeholder="Search"
+        name="search"
+        autocomplete="off"
+        :show-clear="!!searchValue"
+        full-width
+        color="foundation"
+      />
+    </div>
+    <div class="flex space-y-1 flex-col">
+      <div
+        v-for="cat in selectedCategoriesObjects.sort((a, b) =>
+          a.name.localeCompare(b.name)
+        )"
+        :key="cat.id"
+      >
+        <!-- We were use to use FormButton for this but our lovely Revit 2022 (CEF 65) but it didn't work properly in terms of CSS. -->
+        <div
+          v-tippy="'Remove'"
+          :class="`block h-6 text-body-2xs px-2 py-1 rounded-md flex align-center justify-between w-full hover:cursor-pointer hover:shadow-md bg-primary text-foreground-on-primary border-outline-2 text-foreground font-medium p-1 border focus-visible:border-foundation`"
+          @click="selectOrUnselectCategory(cat.id)"
+        >
+          <span>{{ cat.name }}</span>
+          <XMarkIcon class="w-4" />
+        </div>
+      </div>
+    </div>
+    <div
+      class="flex space-y-1 flex-col simple-scrollbar overflow-y-auto min-h-0 max-h-48 overflow-x-hidden"
+    >
+      <!-- We were use to use FormButton for this but our lovely Revit 2022 (CEF 65) but it didn't work properly in terms of CSS. -->
+      <div
+        v-for="cat in searchResults.sort((a, b) => a.name.localeCompare(b.name))"
+        :key="cat.id"
+        v-tippy="'Add'"
+        :class="`block h-6 text-body-2xs ${
+          selectedCategories.includes(cat.id) ? 'bg-primary' : ''
+        } px-2 py-1 rounded-md align-center justify-between w-full hover:cursor-pointer hover:shadow-md bg-foundation border-outline-2 text-foreground font-medium p-1 hover:bg-primary-muted border disabled:hover:bg-foundation focus-visible:border-foundation`"
+        @click="selectOrUnselectCategory(cat.id)"
+      >
+        <span>{{ cat.name }}</span>
+        <!-- <PlusIcon class="w-4" /> -->
+      </div>
+      <div v-if="searchResults.length === 0" class="text-xs text-center">
+        Nothing found
+        <FormButton color="outline" size="sm" @click="searchValue = undefined">
+          Clear search
+        </FormButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { XMarkIcon } from '@heroicons/vue/20/solid'
+import type {
+  CategoriesData,
+  ISendFilter,
+  RevitCategoriesSendFilter
+} from '~/lib/models/card/send'
+
+const searchValue = ref<string>()
+
+const emit = defineEmits<{
+  (e: 'update:filter', filter: ISendFilter): void
+}>()
+
+const props = defineProps<{
+  filter: RevitCategoriesSendFilter
+}>()
+
+const availableCategories = ref<CategoriesData[]>(props.filter.availableCategories)
+
+const searchResults = computed(() => {
+  const searchVal = searchValue.value
+  if (!searchVal?.length)
+    return availableCategories.value.filter(
+      (cat) => !selectedCategories.value.includes(cat.id)
+    )
+
+  return availableCategories.value.filter(
+    (cat) =>
+      cat.name.toLowerCase().includes(searchVal.toLowerCase()) &&
+      !selectedCategories.value.includes(cat.id)
+  )
+})
+
+const selectedCategories = ref<string[]>(props.filter.selectedCategories || [])
+
+const selectOrUnselectCategory = (id: string) => {
+  const index = selectedCategories.value.indexOf(id)
+  if (index !== -1) {
+    selectedCategories.value.splice(index, 1)
+  } else {
+    selectedCategories.value.push(id)
+  }
+}
+
+const selectedCategoriesObjects = computed(() => {
+  return selectedCategories.value.map((id) =>
+    availableCategories.value.find((cat) => cat.id === id)
+  ) as CategoriesData[]
+})
+
+watch(
+  selectedCategoriesObjects,
+  (newValue) => {
+    const filter = { ...props.filter } as RevitCategoriesSendFilter
+    const names = newValue.map((v) => v.name)
+    filter.selectedCategories = availableCategories.value
+      .filter((c) => names.includes(c.name))
+      .map((c) => c.id)
+    filter.summary = names.join(', ')
+    emit('update:filter', filter)
+  },
+  { deep: true, immediate: true }
+)
+</script>
diff --git a/packages/dui3/components/filter/revit/Views.vue b/packages/dui3/components/filter/revit/Views.vue
new file mode 100644
index 0000000000..2daab3268c
--- /dev/null
+++ b/packages/dui3/components/filter/revit/Views.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="mt-4 space-y-2">
+    <FormSelectBase
+      key="name"
+      v-model="selectedView"
+      :search="true"
+      :search-placeholder="''"
+      :filter-predicate="searchFilterPredicate"
+      name="view"
+      label="View"
+      placeholder="Nothing selected"
+      class="w-full"
+      fixed-height
+      show-label
+      :items="store.availableViews"
+      :allow-unset="false"
+      mount-menu-on-body
+    >
+      <template #something-selected="{ value }">
+        <span class="text-primary text-base text-sm">{{ value }}</span>
+      </template>
+      <template #option="{ item }">
+        <span class="text-base text-sm">{{ item }}</span>
+      </template>
+    </FormSelectBase>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useHostAppStore } from '~/store/hostApp'
+import type { ISendFilter, RevitViewsSendFilter } from '~/lib/models/card/send'
+
+const store = useHostAppStore()
+
+const emit = defineEmits<{
+  (e: 'update:filter', filter: ISendFilter): void
+}>()
+
+const props = defineProps<{
+  filter: RevitViewsSendFilter
+}>()
+
+const selectedView = ref<string>(props.filter.selectedView)
+
+const searchFilterPredicate = (item: string, search: string) =>
+  item.toLocaleLowerCase().includes(search.toLocaleLowerCase())
+
+watch(
+  selectedView,
+  (newValue) => {
+    const filter = { ...props.filter } as RevitViewsSendFilter
+    filter.selectedView = newValue as string
+    filter.summary = newValue
+    emit('update:filter', filter)
+  },
+  { deep: true, immediate: true }
+)
+</script>
diff --git a/packages/dui3/components/form/json/BooleanControlRenderer.vue b/packages/dui3/components/form/json/BooleanControlRenderer.vue
new file mode 100644
index 0000000000..e2b575cd6c
--- /dev/null
+++ b/packages/dui3/components/form/json/BooleanControlRenderer.vue
@@ -0,0 +1,34 @@
+<template>
+  <FormCheckbox
+    :name="fieldName"
+    :disabled="!control.enabled"
+    :model-value="modelValue"
+    :rules="validator"
+    :label="control.label"
+    :value="true"
+    :description="control.description"
+    show-label
+    :validate-on-value-update="validateOnValueUpdate"
+    @update:model-value="handleChange"
+  />
+</template>
+<script setup lang="ts">
+import type { ControlElement } from '@jsonforms/core'
+import { rendererProps, useJsonFormsControl } from '@jsonforms/vue'
+import { useJsonRendererBaseSetup } from '~/lib/form/composables/jsonRenderers'
+
+const props = defineProps({
+  ...rendererProps<ControlElement>()
+})
+
+const { handleChange, control, validator, fieldName, validateOnValueUpdate } =
+  useJsonRendererBaseSetup(useJsonFormsControl(props), {
+    onChangeValueConverter: (val: true | undefined) => {
+      return !!val
+    }
+  })
+
+const modelValue = computed(() => {
+  return control.value.data ? true : undefined
+})
+</script>
diff --git a/packages/dui3/components/form/json/DateControlRenderer.vue b/packages/dui3/components/form/json/DateControlRenderer.vue
new file mode 100644
index 0000000000..ca6ae0b42c
--- /dev/null
+++ b/packages/dui3/components/form/json/DateControlRenderer.vue
@@ -0,0 +1,35 @@
+<template>
+  <FormTextInput
+    :name="fieldName"
+    :disabled="!control.enabled"
+    :model-value="control.data"
+    :rules="validator"
+    :label="control.label"
+    show-label
+    type="date"
+    size="lg"
+    max="9999-12-31"
+    :placeholder="appliedOptions['placeholder']"
+    :help="control.description"
+    :validate-on-value-update="validateOnValueUpdate"
+    @update:model-value="handleChange"
+  />
+</template>
+<script setup lang="ts">
+import type { ControlElement } from '@jsonforms/core'
+import { rendererProps, useJsonFormsControl } from '@jsonforms/vue'
+import { useJsonRendererBaseSetup } from '~/lib/form/composables/jsonRenderers'
+
+const props = defineProps({
+  ...rendererProps<ControlElement>()
+})
+
+const {
+  handleChange,
+  control,
+  validator,
+  appliedOptions,
+  fieldName,
+  validateOnValueUpdate
+} = useJsonRendererBaseSetup(useJsonFormsControl(props))
+</script>
diff --git a/packages/dui3/components/form/json/DateTimeControlRenderer.vue b/packages/dui3/components/form/json/DateTimeControlRenderer.vue
new file mode 100644
index 0000000000..b3bdeae186
--- /dev/null
+++ b/packages/dui3/components/form/json/DateTimeControlRenderer.vue
@@ -0,0 +1,49 @@
+<template>
+  <FormTextInput
+    :name="fieldName"
+    :disabled="!control.enabled"
+    :model-value="modelValue"
+    :rules="validator"
+    :label="control.label"
+    show-label
+    type="datetime-local"
+    size="lg"
+    max="9999-12-31T23:59"
+    :placeholder="appliedOptions['placeholder']"
+    :help="control.description"
+    :validate-on-value-update="validateOnValueUpdate"
+    @update:model-value="handleChange"
+  />
+</template>
+<script setup lang="ts">
+import type { ControlElement } from '@jsonforms/core'
+import { rendererProps, useJsonFormsControl } from '@jsonforms/vue'
+import { useJsonRendererBaseSetup } from '~/lib/form/composables/jsonRenderers'
+
+const zuluTimeSuffix = ':00.000Z'
+
+const props = defineProps({
+  ...rendererProps<ControlElement>()
+})
+
+const toISOString = (inputDateTime: string) => {
+  return inputDateTime ? inputDateTime + zuluTimeSuffix : undefined
+}
+
+const {
+  handleChange,
+  control,
+  validator,
+  appliedOptions,
+  fieldName,
+  validateOnValueUpdate
+} = useJsonRendererBaseSetup(useJsonFormsControl(props), {
+  onChangeValueConverter: (val) => toISOString(val as string)
+})
+
+const modelValue = computed(() =>
+  control.value.data
+    ? (control.value.data as string).replace(zuluTimeSuffix, '')
+    : undefined
+)
+</script>
diff --git a/packages/dui3/components/form/json/EnumControlRenderer.vue b/packages/dui3/components/form/json/EnumControlRenderer.vue
new file mode 100644
index 0000000000..69df001158
--- /dev/null
+++ b/packages/dui3/components/form/json/EnumControlRenderer.vue
@@ -0,0 +1,122 @@
+<template>
+  <FormSelectBase
+    :model-value="modelValue"
+    :name="fieldName"
+    :rules="validator"
+    :label="control.label"
+    :items="control.options"
+    :multiple="multiple"
+    :help="control.description"
+    :allow-unset="false"
+    show-label
+    by="value"
+    button-style="tinted"
+    :validate-on-value-update="validateOnValueUpdate"
+    mount-menu-on-body
+    @update:model-value="handleChange"
+  >
+    <template #nothing-selected>
+      {{
+        appliedOptions['placeholder']
+          ? appliedOptions['placeholder']
+          : multiple
+          ? 'Select values'
+          : 'Select a value'
+      }}
+    </template>
+    <template #something-selected="{ value }">
+      <template v-if="isMultiItemArrayValue(value)">
+        <div ref="elementToWatchForChanges" class="flex items-center space-x-0.5">
+          <div
+            ref="itemContainer"
+            class="flex flex-wrap overflow-hidden space-x-0.5 h-6"
+          >
+            <div v-for="(item, i) in value" :key="item.value" class="text-foreground">
+              {{ item.label + (i < value.length - 1 ? ', ' : '') }}
+            </div>
+          </div>
+          <div v-if="hiddenSelectedItemCount > 0" class="text-foreground-2 normal">
+            +{{ hiddenSelectedItemCount }}
+          </div>
+        </div>
+      </template>
+      <template v-else>
+        <div class="flex items-center">
+          <span class="truncate text-foreground">
+            {{ (isArrayValue(value) ? value[0] : value).label }}
+          </span>
+        </div>
+      </template>
+    </template>
+    <template #option="{ item }">
+      <div class="flex items-center">
+        <span class="truncate">{{ item.label }}</span>
+      </div>
+    </template>
+  </FormSelectBase>
+</template>
+<script setup lang="ts">
+import type { ControlElement } from '@jsonforms/core'
+import { rendererProps, useJsonFormsEnumControl } from '@jsonforms/vue'
+import type { Nullable } from '@speckle/shared'
+import { useFormSelectChildInternals } from '@speckle/ui-components'
+import { useJsonRendererBaseSetup } from '~/lib/form/composables/jsonRenderers'
+
+type OptionType = { value: string; label: string }
+type ValueType = OptionType | OptionType[] | undefined
+
+const emit = defineEmits<(e: 'update:modelValue', v: ValueType) => void>()
+
+const props = defineProps({
+  ...rendererProps<ControlElement>(),
+  // TODO: Doesn't appear that jsonforms properly supports multiple selection
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  controlOverrides: {
+    type: Object as PropType<Nullable<ReturnType<typeof useJsonFormsEnumControl>>>,
+    default: null
+  }
+})
+
+const elementToWatchForChanges = ref(null as Nullable<HTMLElement>)
+const itemContainer = ref(null as Nullable<HTMLElement>)
+
+const { hiddenSelectedItemCount, isArrayValue, isMultiItemArrayValue } =
+  useFormSelectChildInternals<OptionType>({
+    props: toRefs(props),
+    emit,
+    dynamicVisibility: { elementToWatchForChanges, itemContainer }
+  })
+
+const {
+  handleChange,
+  control,
+  validator,
+  appliedOptions,
+  fieldName,
+  validateOnValueUpdate
+} = useJsonRendererBaseSetup(props.controlOverrides || useJsonFormsEnumControl(props), {
+  onChangeValueConverter: (newVal: ValueType) => {
+    if (props.multiple && isArrayValue(newVal)) {
+      return newVal.map((v) => v.value)
+    } else if (newVal && !props.multiple && !isArrayValue(newVal)) {
+      return newVal.value
+    } else {
+      return undefined
+    }
+  }
+})
+
+const modelValue = computed(() => {
+  const val = control.value.data as string
+  const res = control.value.options.find((o) => o.value === val)
+
+  if (props.multiple) {
+    return res ? [res] : []
+  } else {
+    return res || undefined
+  }
+})
+</script>
diff --git a/packages/dui3/components/form/json/EnumOneOfControlRenderer.vue b/packages/dui3/components/form/json/EnumOneOfControlRenderer.vue
new file mode 100644
index 0000000000..01eb710c58
--- /dev/null
+++ b/packages/dui3/components/form/json/EnumOneOfControlRenderer.vue
@@ -0,0 +1,17 @@
+<template>
+  <FormJsonEnumControlRenderer
+    v-bind="$props"
+    :multiple="false"
+    :control-overrides="controlOverrides"
+  />
+</template>
+<script setup lang="ts">
+import type { ControlElement } from '@jsonforms/core'
+import { rendererProps, useJsonFormsOneOfEnumControl } from '@jsonforms/vue'
+
+const props = defineProps({
+  ...rendererProps<ControlElement>()
+})
+
+const controlOverrides = useJsonFormsOneOfEnumControl(props)
+</script>
diff --git a/packages/dui3/components/form/json/Form.vue b/packages/dui3/components/form/json/Form.vue
new file mode 100644
index 0000000000..789a573096
--- /dev/null
+++ b/packages/dui3/components/form/json/Form.vue
@@ -0,0 +1,79 @@
+<template>
+  <form class="flex flex-col space-y-4 form-json-form">
+    <JsonForms
+      ref="internalRef"
+      :renderers="renderers"
+      :schema="finalSchema"
+      :uischema="finalUiSchema"
+      :data="data"
+      @change="onChange"
+    />
+  </form>
+</template>
+<script setup lang="ts">
+import type { JsonSchema, UISchemaElement } from '@jsonforms/core'
+import type { JsonFormsChangeEvent } from '@jsonforms/vue'
+import { JsonForms } from '@jsonforms/vue'
+import type { Nullable, Optional } from '@speckle/shared'
+import { omit } from 'lodash-es'
+import { useForm } from 'vee-validate'
+import { renderers } from '~/lib/form/jsonRenderers'
+
+type DataType = Record<string, unknown>
+
+const emit = defineEmits<(e: 'change', val: JsonFormsChangeEvent) => void>()
+
+const props = defineProps<{
+  schema: JsonSchema
+  uiSchema?: UISchemaElement
+  data?: DataType
+}>()
+
+const { validate } = useForm()
+
+const internalRef = ref<Nullable<{ jsonforms: { core: JsonFormsChangeEvent } }>>(null)
+// const data = ref({})
+
+const finalSchema = computed(() => {
+  const base = props.schema
+  return omit(base, ['$schema', '$id'])
+})
+
+const autoGeneratedUiSchema = computed(() => {
+  const properties = Object.keys(props.schema.properties || {})
+  return {
+    type: 'VerticalLayout',
+    elements: properties.map((p) => ({
+      type: 'Control',
+      scope: `#/properties/${p}`
+    }))
+  }
+})
+const finalUiSchema = computed(() => props.uiSchema || autoGeneratedUiSchema.value)
+
+const onChange = async (e: JsonFormsChangeEvent) => {
+  // console.log(JSON.parse(JSON.stringify(e)))
+  // NOTE: setting data.value causes trigger again
+  // data.value = e.data as DataType
+  await validate({ mode: 'force' })
+  emit('change', e)
+}
+
+const getFormState = (): Optional<JsonFormsChangeEvent> =>
+  internalRef.value?.jsonforms.core
+    ? ({
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        data: internalRef.value.jsonforms.core.data,
+        errors: internalRef.value.jsonforms.core.errors
+      } as JsonFormsChangeEvent)
+    : undefined
+
+defineExpose({ getFormState })
+</script>
+<style lang="postcss">
+.form-json-form {
+  .vertical-layout {
+    @apply space-y-4;
+  }
+}
+</style>
diff --git a/packages/dui3/components/form/json/IntegerControlRenderer.vue b/packages/dui3/components/form/json/IntegerControlRenderer.vue
new file mode 100644
index 0000000000..b543ea9ef1
--- /dev/null
+++ b/packages/dui3/components/form/json/IntegerControlRenderer.vue
@@ -0,0 +1,37 @@
+<template>
+  <FormTextInput
+    :name="fieldName"
+    :disabled="!control.enabled"
+    :model-value="control.data + ''"
+    :rules="validator"
+    :label="control.label"
+    :placeholder="appliedOptions['placeholder']"
+    :help="control.description"
+    type="number"
+    step="1"
+    size="lg"
+    show-label
+    :validate-on-value-update="validateOnValueUpdate"
+    @update:model-value="handleChange"
+  />
+</template>
+<script setup lang="ts">
+import type { ControlElement } from '@jsonforms/core'
+import { rendererProps, useJsonFormsControl } from '@jsonforms/vue'
+import { useJsonRendererBaseSetup } from '~/lib/form/composables/jsonRenderers'
+
+const props = defineProps({
+  ...rendererProps<ControlElement>()
+})
+
+const {
+  handleChange,
+  control,
+  validator,
+  appliedOptions,
+  fieldName,
+  validateOnValueUpdate
+} = useJsonRendererBaseSetup(useJsonFormsControl(props), {
+  onChangeValueConverter: (val: string) => (val ? parseInt(val) : undefined)
+})
+</script>
diff --git a/packages/dui3/components/form/json/MultiStringControlRenderer.vue b/packages/dui3/components/form/json/MultiStringControlRenderer.vue
new file mode 100644
index 0000000000..1282e51d23
--- /dev/null
+++ b/packages/dui3/components/form/json/MultiStringControlRenderer.vue
@@ -0,0 +1,32 @@
+<template>
+  <FormTextArea
+    :name="fieldName"
+    :disabled="!control.enabled"
+    :model-value="control.data"
+    :rules="validator"
+    :placeholder="appliedOptions['placeholder']"
+    :help="control.description"
+    :label="control.label"
+    show-label
+    :validate-on-value-update="validateOnValueUpdate"
+    @update:model-value="handleChange"
+  />
+</template>
+<script setup lang="ts">
+import type { ControlElement } from '@jsonforms/core'
+import { rendererProps, useJsonFormsControl } from '@jsonforms/vue'
+import { useJsonRendererBaseSetup } from '~/lib/form/composables/jsonRenderers'
+
+const props = defineProps({
+  ...rendererProps<ControlElement>()
+})
+
+const {
+  handleChange,
+  control,
+  validator,
+  appliedOptions,
+  fieldName,
+  validateOnValueUpdate
+} = useJsonRendererBaseSetup(useJsonFormsControl(props))
+</script>
diff --git a/packages/dui3/components/form/json/NumberControlRenderer.vue b/packages/dui3/components/form/json/NumberControlRenderer.vue
new file mode 100644
index 0000000000..ad72ac66fb
--- /dev/null
+++ b/packages/dui3/components/form/json/NumberControlRenderer.vue
@@ -0,0 +1,36 @@
+<template>
+  <FormTextInput
+    :name="fieldName"
+    :disabled="!control.enabled"
+    :model-value="control.data + ''"
+    :rules="validator"
+    :label="control.label"
+    type="number"
+    size="lg"
+    show-label
+    :placeholder="appliedOptions['placeholder']"
+    :help="control.description"
+    :validate-on-value-update="validateOnValueUpdate"
+    @update:model-value="handleChange"
+  />
+</template>
+<script setup lang="ts">
+import type { ControlElement } from '@jsonforms/core'
+import { rendererProps, useJsonFormsControl } from '@jsonforms/vue'
+import { useJsonRendererBaseSetup } from '~/lib/form/composables/jsonRenderers'
+
+const props = defineProps({
+  ...rendererProps<ControlElement>()
+})
+
+const {
+  handleChange,
+  control,
+  validator,
+  appliedOptions,
+  fieldName,
+  validateOnValueUpdate
+} = useJsonRendererBaseSetup(useJsonFormsControl(props), {
+  onChangeValueConverter: (val: string) => (val ? Number(val) : undefined)
+})
+</script>
diff --git a/packages/dui3/components/form/json/StringControlRenderer.vue b/packages/dui3/components/form/json/StringControlRenderer.vue
new file mode 100644
index 0000000000..a9c1391926
--- /dev/null
+++ b/packages/dui3/components/form/json/StringControlRenderer.vue
@@ -0,0 +1,33 @@
+<template>
+  <FormTextInput
+    :name="fieldName"
+    :disabled="!control.enabled"
+    :model-value="control.data"
+    :rules="validator"
+    :label="control.label"
+    :placeholder="appliedOptions['placeholder']"
+    :help="control.description"
+    show-label
+    size="lg"
+    :validate-on-value-update="validateOnValueUpdate"
+    @update:model-value="handleChange"
+  />
+</template>
+<script setup lang="ts">
+import type { ControlElement } from '@jsonforms/core'
+import { rendererProps, useJsonFormsControl } from '@jsonforms/vue'
+import { useJsonRendererBaseSetup } from '~/lib/form/composables/jsonRenderers'
+
+const props = defineProps({
+  ...rendererProps<ControlElement>()
+})
+
+const {
+  handleChange,
+  control,
+  validator,
+  appliedOptions,
+  fieldName,
+  validateOnValueUpdate
+} = useJsonRendererBaseSetup(useJsonFormsControl(props))
+</script>
diff --git a/packages/dui3/components/form/json/TimeControlRenderer.vue b/packages/dui3/components/form/json/TimeControlRenderer.vue
new file mode 100644
index 0000000000..c5f4a5b1b8
--- /dev/null
+++ b/packages/dui3/components/form/json/TimeControlRenderer.vue
@@ -0,0 +1,35 @@
+<template>
+  <FormTextInput
+    :name="fieldName"
+    :disabled="!control.enabled"
+    :model-value="control.data"
+    :rules="validator"
+    :label="control.label"
+    show-label
+    type="time"
+    step="1"
+    size="lg"
+    :placeholder="appliedOptions['placeholder']"
+    :help="control.description"
+    :validate-on-value-update="validateOnValueUpdate"
+    @update:model-value="handleChange"
+  />
+</template>
+<script setup lang="ts">
+import type { ControlElement } from '@jsonforms/core'
+import { rendererProps, useJsonFormsControl } from '@jsonforms/vue'
+import { useJsonRendererBaseSetup } from '~/lib/form/composables/jsonRenderers'
+
+const props = defineProps({
+  ...rendererProps<ControlElement>()
+})
+
+const {
+  handleChange,
+  control,
+  validator,
+  appliedOptions,
+  fieldName,
+  validateOnValueUpdate
+} = useJsonRendererBaseSetup(useJsonFormsControl(props))
+</script>
diff --git a/packages/dui3/components/header/LogoBlock.vue b/packages/dui3/components/header/LogoBlock.vue
index 3ef4b35141..95e3a47ccc 100644
--- a/packages/dui3/components/header/LogoBlock.vue
+++ b/packages/dui3/components/header/LogoBlock.vue
@@ -6,10 +6,7 @@
       src="~~/assets/images/speckle_logo_big.png"
       alt="Speckle"
     />
-    <div
-      v-if="!minimal"
-      class="text-primary h6 mt-0 hidden font-bold leading-7 md:flex"
-    >
+    <div v-if="!minimal" class="text-primary h6 mt-0 font-bold leading-7 md:flex">
       Speckle
     </div>
   </NuxtLink>
diff --git a/packages/dui3/components/header/NavBar.vue b/packages/dui3/components/header/NavBar.vue
index ce7230d16c..3a01fc371f 100644
--- a/packages/dui3/components/header/NavBar.vue
+++ b/packages/dui3/components/header/NavBar.vue
@@ -1,20 +1,117 @@
 <template>
   <nav
-    class="fixed top-0 h-14 bg-foundation max-w-full w-full shadow hover:shadow-md transition z-20"
+    v-if="!hasNoModelCards"
+    class="fixed top-0 h-10 bg-foundation max-w-full w-full shadow hover:shadow-md transition z-20"
   >
-    <div class="px-2">
-      <div class="flex items-center h-14 transition-all justify-between">
+    <div class="px-2 select-none">
+      <div class="flex items-center h-10 transition-all justify-between">
         <div class="flex items-center">
-          <HeaderLogoBlock :active="false" class="mr-0" />
+          <HeaderLogoBlock :active="false" minimal class="mr-0" />
+          <!-- <div class="ml-2">Speckle</div> -->
+          <div
+            title="3.0 is coming!"
+            class="ml-1 text-tiny bg-primary rounded-full px-2 py-[2px] text-foreground-on-primary transition hover:scale-110"
+          >
+            beta
+          </div>
           <div class="flex flex-shrink-0 items-center -ml-2 md:ml-0">
             <PortalTarget name="navigation"></PortalTarget>
           </div>
         </div>
-        <div>
-          <HeaderUserMenu />
+
+        <div class="flex justify-between items-center">
+          <FormButton
+            v-if="!hostAppStore.isConnectorUpToDate"
+            v-tippy="hostAppStore.latestAvailableVersion?.Number.replace('+0', '')"
+            :icon-right="ArrowUpCircleIcon"
+            size="sm"
+            color="subtle"
+            class="flex min-w-0 transition text-primary py-1 mr-1"
+            @click.stop="hostAppStore.downloadLatestVersion()"
+          >
+            <span class="">Update</span>
+          </FormButton>
+
+          <div v-if="uiConfigStore.isDevMode">
+            <!-- ONLY FOR TESTS FOR NOW-->
+            <div v-if="testSettings && hasConfigBindings" class="flex justify-end">
+              <FormButton
+                v-tippy="'Settings'"
+                class="px-1"
+                text
+                hide-text
+                :icon-left="Cog6ToothIcon"
+                @click="openConfigDialog = true"
+              ></FormButton>
+              <LayoutDialog v-model:open="openConfigDialog" fullscreen="none">
+                <ConfigDialog @close="openConfigDialog = false" />
+              </LayoutDialog>
+            </div>
+            <div>
+              <HeaderUserMenu />
+            </div>
+          </div>
+          <div v-else>
+            <FormButton
+              v-tippy="isDarkTheme ? 'Switch to light theme' : 'Switch to dark theme'"
+              text
+              @click="uiConfigStore.toggleTheme()"
+            >
+              <Component :is="isDarkTheme ? SunIcon : MoonIcon" class="w-4" />
+            </FormButton>
+          </div>
         </div>
       </div>
     </div>
   </nav>
+  <div v-else class="fixed top-1 right-2 z-100 flex items-center space-x-2">
+    <FormButton
+      v-tippy="isDarkTheme ? 'Switch to light theme' : 'Switch to dark theme'"
+      text
+      @click="uiConfigStore.toggleTheme()"
+    >
+      <Component :is="isDarkTheme ? SunIcon : MoonIcon" class="w-4" />
+    </FormButton>
+    <div v-if="isDev">
+      <NuxtLink
+        v-tippy="'Test page'"
+        to="test"
+        class="text-xs text-foreground-2 hover:text-primary"
+        exact-active-class="hidden"
+      >
+        <WrenchScrewdriverIcon class="w-4" />
+      </NuxtLink>
+      <NuxtLink
+        v-tippy="'Home'"
+        to="/"
+        class="text-xs text-foreground-2 hover:text-primary"
+        exact-active-class="hidden"
+      >
+        <HomeIcon class="w-4" />
+      </NuxtLink>
+    </div>
+  </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { useConfigStore } from '~/store/config'
+import {
+  Cog6ToothIcon,
+  WrenchScrewdriverIcon,
+  HomeIcon,
+  MoonIcon,
+  SunIcon
+} from '@heroicons/vue/24/solid'
+import { ArrowUpCircleIcon } from '@heroicons/vue/24/outline'
+import { useHostAppStore } from '~/store/hostApp'
+const isDev = ref(import.meta.dev)
+const openConfigDialog = ref(false)
+// NOTE: make it true to test settings, it might be removed later. TBD
+const testSettings = ref(false)
+
+const uiConfigStore = useConfigStore()
+const { isDarkTheme, hasConfigBindings } = storeToRefs(uiConfigStore)
+
+const hostAppStore = useHostAppStore()
+const hasNoModelCards = computed(() => hostAppStore.projectModelGroups.length === 0)
+</script>
diff --git a/packages/dui3/components/header/UserAccount.vue b/packages/dui3/components/header/UserAccount.vue
deleted file mode 100644
index d66d50b051..0000000000
--- a/packages/dui3/components/header/UserAccount.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <button
-    v-tippy="tip"
-    :class="`block w-full  text-left items-center space-x-2 hover:bg-primary-muted transition p-2 select-none group hover:cursor-pointer hover:text-primary ${
-      !account.isValid ? 'text-danger bg-rose-500/10' : ''
-    } ${account.accountInfo.isDefault ? 'bg-blue-500/5' : ''}`"
-    @click="$openUrl(account.accountInfo.serverInfo.url)"
-  >
-    <div class="flex items-center space-x-2">
-      <UserAvatar :user="userAvatar" :active="account.accountInfo.isDefault" />
-      <div class="min-w-0 grow">
-        <div class="truncate overflow-hidden min-w-0">
-          {{ account.accountInfo.serverInfo.name }}
-          <span class="text-foreground-2 truncate min-w-0">
-            {{ account.accountInfo.serverInfo.url.split('//')[1] }}
-          </span>
-        </div>
-        <div class="truncate text-xs text-foreground-2">
-          {{ account.accountInfo.userInfo.email }}
-        </div>
-      </div>
-      <div class="transition opacity-0 group-hover:opacity-100">
-        <ArrowTopRightOnSquareIcon class="w-4 h-4" />
-      </div>
-    </div>
-  </button>
-</template>
-<script setup lang="ts">
-import type { DUIAccount } from 'lib/accounts/composables/setup'
-import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/20/solid'
-
-const props = defineProps<{
-  account: DUIAccount
-}>()
-
-const userAvatar = computed(() => {
-  return {
-    name: props.account.accountInfo.userInfo.name,
-    avatar: props.account.accountInfo.userInfo.avatar
-  }
-})
-
-const tip = computed(() => {
-  let value = ''
-  if (props.account.accountInfo.isDefault) value += 'This is your default account. '
-  if (!props.account.isValid) value += 'This account is not reachable.'
-  return value === '' ? null : value
-})
-
-const { $openUrl } = useNuxtApp()
-</script>
diff --git a/packages/dui3/components/header/UserMenu.vue b/packages/dui3/components/header/UserMenu.vue
index ac00e6d22f..0ffe920e64 100644
--- a/packages/dui3/components/header/UserMenu.vue
+++ b/packages/dui3/components/header/UserMenu.vue
@@ -1,13 +1,14 @@
 <template>
   <div>
-    <Menu as="div" class="ml-2 flex items-center">
+    <Menu as="div" class="ml-1 flex items-center z-100">
       <MenuButton v-slot="{ open }">
         <span class="sr-only">Open user menu</span>
-
-        <UserAvatar v-if="!open" size="lg" :user="user" hover-effect />
-        <UserAvatar v-else size="lg" hover-effect>
-          <XMarkIcon class="w-5 h-5" />
-        </UserAvatar>
+        <button
+          class="rounded-full transition hover:bg-primary hover:text-foreground-on-primary p-1"
+        >
+          <Bars3Icon v-if="!open" class="w-4" />
+          <XMarkIcon v-else class="w-4" />
+        </button>
       </MenuButton>
       <Transition
         enter-active-class="transition ease-out duration-200"
@@ -18,57 +19,38 @@
         leave-to-class="transform opacity-0 scale-95"
       >
         <MenuItems
-          class="absolute right-0 md:right-4 top-14 md:top-16 w-full md:w-64 origin-top-right bg-foundation sm:rounded-t-md rounded-b-md shadow-lg overflow-hidden"
+          class="absolute right-0 md:right-4 top-10 md:top-16 w-full md:w-64 origin-top-right bg-foundation sm:rounded-t-md rounded-b-2xl shadow-lg overflow-hidden"
         >
-          <MenuItem>
-            <div class="border border-t-1 border-primary-muted">
-              <div v-if="loading" class="p-2">Loading accounts...</div>
-              <div v-else class="p-2 flex items-center justify-between">
-                <div class="text-xs text-foreground-2">Your accounts</div>
-                <div>
-                  <FormButton
-                    text
-                    size="xs"
-                    @click.stop="accountStore.refreshAccounts()"
-                  >
-                    Refresh
-                  </FormButton>
-                </div>
-              </div>
-              <div class="space-y-0">
-                <HeaderUserAccount
-                  v-for="acc in accounts"
-                  :key="acc.accountInfo.id"
-                  :account="(acc as DUIAccount)"
-                />
-              </div>
-            </div>
-          </MenuItem>
           <MenuItem v-slot="{ close }" as="div">
-            <div class="px-2 py-3 flex space-x-2 border-t-1 justify-between">
-              <div class="">
-                <button
-                  class="text-xs text-foreground-2 hover:text-primary transition"
-                  @click="$showDevTools"
-                >
-                  Open Dev Tools
-                </button>
-                <NuxtLink
-                  class="text-xs text-foreground-2 hover:text-primary transition"
-                  to="/test"
-                  @click="close()"
-                >
-                  Test Page
-                </NuxtLink>
-              </div>
+            <div class="px-2 py-3 flex flex-col space-y-2 border-t-1 justify-between">
+              <!-- <div class="flex space-x-2"> -->
+              <FormButton
+                size="sm"
+                color="secondary"
+                class="text-xs text-foreground-2 hover:text-primary transition"
+                @click="$showDevTools"
+              >
+                Open Dev Tools
+              </FormButton>
+
+              <FormButton
+                size="sm"
+                color="secondary"
+                class="text-xs text-foreground-2 hover:text-primary transition"
+                to="/test"
+                @click="close()"
+              >
+                Test Page
+              </FormButton>
+              <!-- </div> -->
               <!-- 
                 NOTE: Here's an example of customising the frontend app based on what bindings we
                 have loaded. E.g., if config bindings are not present, we do not show any button
                 regarding switching themes. 
               -->
               <div v-if="hasConfigBindings">
-                <FormButton size="xs" text @click.stop="toggleTheme()">
-                  {{ isDarkTheme ? 'Switch To Light Theme' : 'Switch To Dark Theme' }}
+                <FormButton size="xs" text full-width @click="toggleTheme()">
+                  {{ isDarkTheme ? 'Switch to light theme' : 'Switch to dark theme' }}
                 </FormButton>
               </div>
             </div>
@@ -79,27 +61,14 @@
   </div>
 </template>
 <script setup lang="ts">
-import { XMarkIcon } from '@heroicons/vue/20/solid'
 import { storeToRefs } from 'pinia'
+import { XMarkIcon, Bars3Icon } from '@heroicons/vue/20/solid'
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
-import { useAccountStore } from '~/store/accounts'
-import type { DUIAccount } from '~/lib/accounts/composables/setup'
-import { useDocumentInfoStore } from '~/store/uiConfig'
+import { useConfigStore } from '~/store/config'
 
-const accountStore = useAccountStore()
-const { accounts, defaultAccount, loading } = storeToRefs(accountStore)
-
-const uiConfigStore = useDocumentInfoStore()
+const uiConfigStore = useConfigStore()
 const { isDarkTheme, hasConfigBindings } = storeToRefs(uiConfigStore)
 const { toggleTheme } = uiConfigStore
 
 const { $showDevTools } = useNuxtApp()
-
-const user = computed(() => {
-  if (!defaultAccount.value) return undefined
-  return {
-    name: defaultAccount.value?.accountInfo.userInfo.name,
-    avatar: defaultAccount.value?.accountInfo.userInfo.avatar
-  }
-})
 </script>
diff --git a/packages/dui3/components/model/ActionsDialog.vue b/packages/dui3/components/model/ActionsDialog.vue
new file mode 100644
index 0000000000..9bc08e2152
--- /dev/null
+++ b/packages/dui3/components/model/ActionsDialog.vue
@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <button
+      class="transition hover:text-primary"
+      @click.stop="openModelCardActionsDialog = true"
+    >
+      <Cog6ToothIcon class="w-4" />
+    </button>
+    <LayoutDialog
+      v-model:open="openModelCardActionsDialog"
+      :title="`${modelName} actions`"
+      fullscreen="none"
+    >
+      <div class="-mx-1">
+        <!-- TODO: for later, to be able to create automation from DUI3, our accounts need scopes to do it which we don't have yet. -->
+        <!-- <AutomateCreateDialog
+          :project-id="props.modelCard.projectId"
+          :model-id="props.modelCard.modelId"
+        >
+          <template #activator="{ toggle }">
+            <button class="action action-normal" @click="toggle()">
+              <div class="truncate max-[275px]:text-xs">Create Automation</div>
+              <div><BoltIcon class="w-5 h-5" /></div>
+            </button>
+          </template>
+        </AutomateCreateDialog> -->
+        <SendSettingsDialog
+          v-if="hasSettings"
+          :model-card-id="props.modelCard.modelCardId"
+          :settings="props.modelCard.settings"
+        >
+          <template #activator="{ toggle }">
+            <button class="action action-normal" @click="toggle()">
+              <div class="truncate max-[275px]:text-xs">Settings</div>
+              <div><Cog6ToothIcon class="w-5 h-5" /></div>
+            </button>
+          </template>
+        </SendSettingsDialog>
+        <ReportBase v-if="modelCard.report" :report="modelCard.report">
+          <template #activator="{ toggle }">
+            <button class="action action-normal" @click="toggle()">
+              <div class="truncate max-[275px]:text-xs">View Report</div>
+              <div><InformationCircleIcon class="w-5 h-5" /></div>
+            </button>
+          </template>
+        </ReportBase>
+        <button
+          v-for="item in items"
+          :key="item.name"
+          :class="`action ${item.danger ? 'action-danger' : 'action-normal'}`"
+          @click="item.action"
+        >
+          <div class="truncate max-[275px]:text-xs">{{ item.name }}</div>
+          <div>
+            <Component :is="item.icon" class="w-5 h-5" />
+          </div>
+        </button>
+      </div>
+    </LayoutDialog>
+  </div>
+</template>
+<script setup lang="ts">
+import {
+  InformationCircleIcon,
+  Cog6ToothIcon,
+  ArrowTopRightOnSquareIcon,
+  ClockIcon,
+  ArchiveBoxXMarkIcon
+} from '@heroicons/vue/24/outline'
+import type { IModelCard } from '~/lib/models/card'
+import { useMixpanel } from '~/lib/core/composables/mixpanel'
+
+const { trackEvent } = useMixpanel()
+
+const openModelCardActionsDialog = ref(false)
+const emit = defineEmits(['view', 'view-versions', 'copy-model-link', 'remove'])
+
+const props = defineProps<{
+  modelName: string
+  modelCard: IModelCard
+}>()
+
+const hasSettings = computed(() => {
+  return !!props.modelCard.settings
+})
+
+const app = useNuxtApp()
+app.$baseBinding.on('documentChanged', () => {
+  openModelCardActionsDialog.value = false
+})
+
+const items = [
+  {
+    name: 'View 3D model in browser',
+    icon: ArrowTopRightOnSquareIcon,
+    action: () => {
+      void trackEvent('DUI3 Action', {
+        name: 'Version View',
+        source: 'model actions dialog'
+      })
+      emit('view')
+      openModelCardActionsDialog.value = false
+    }
+  },
+  {
+    name: 'View model versions',
+    icon: ClockIcon,
+    action: () => {
+      void trackEvent('DUI3 Action', {
+        name: 'Model History View',
+        source: 'model actions dialog'
+      })
+      emit('view-versions')
+      openModelCardActionsDialog.value = false
+    }
+  },
+  {
+    name: 'Remove from file',
+    danger: true,
+    icon: ArchiveBoxXMarkIcon,
+    action: () => {
+      // NOTE: Mixpanel event tracking is in host app store
+      emit('remove')
+      openModelCardActionsDialog.value = false
+    }
+  }
+]
+</script>
+<style scoped lang="postcss">
+.action {
+  @apply flex items-center justify-between w-full rounded-lg text-left space-x-2 transition p-2 select-none hover:cursor-pointer min-w-0;
+}
+
+.action-normal {
+  @apply text-primary hover:bg-primary-muted;
+}
+
+.action-danger {
+  @apply text-danger hover:bg-rose-500/10;
+}
+</style>
diff --git a/packages/dui3/components/model/CardBase.vue b/packages/dui3/components/model/CardBase.vue
new file mode 100644
index 0000000000..482304e10b
--- /dev/null
+++ b/packages/dui3/components/model/CardBase.vue
@@ -0,0 +1,483 @@
+<template>
+  <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events vuejs-accessibility/no-static-element-interactions -->
+  <div
+    :class="`rounded-md hover:shadow-md shadow transition overflow-hidden ${cardBgColor} cursor-pointer dark:border-gray-800 border-gray-300 border group`"
+    @click="highlightModel"
+  >
+    <div v-if="modelData" class="relative px-2 py-1">
+      <div class="relative flex items-center space-x-2 min-w-0">
+        <div class="text-foreground-2 mt-[2px] flex items-center -space-x-2 relative">
+          <!-- CTA button -->
+          <button
+            v-if="!noWriteAccess"
+            v-tippy="buttonTooltip"
+            class="z-10 transition hover:scale-110 rounded-full hover:shadow-md bg-foundation text-primary"
+            @click.stop="$emit('manual-publish-or-load')"
+          >
+            <template v-if="!modelCard.progress">
+              <ArrowUpCircleIcon v-if="isSender" class="w-8" />
+              <ArrowDownCircleIcon v-else class="w-8" />
+            </template>
+            <template v-else>
+              <XCircleIcon class="w-8" />
+            </template>
+          </button>
+
+          <button
+            v-else
+            class="z-10 transition rounded-full hover:shadow-md bg-foundation"
+          >
+            <ArrowUpCircleIcon v-if="isSender" class="w-8 text-danger" />
+            <ArrowDownCircleIcon v-else class="w-8 text-danger" />
+          </button>
+
+          <UserAvatar
+            :user="modelData.author"
+            size="sm"
+            class="z-0 max-[275px]:hidden"
+          />
+        </div>
+
+        <div class="grow min-w-0 py-1">
+          <div class="caption text-foreground-2 truncate">
+            {{ folderPath }}
+          </div>
+          <div class="truncate font-bold text-foreground select-none -mt-[2px]">
+            {{ modelData.displayName }}
+          </div>
+        </div>
+
+        <AutomateResultDialog
+          v-if="isSender && summary"
+          :model-card="modelCard"
+          :automation-runs="automationRuns"
+          :project-id="modelCard.projectId"
+          :model-id="modelCard.modelId"
+        >
+          <template #activator="{ toggle }">
+            <button
+              v-tippy="summary.summary.value.longSummary"
+              class="action action-normal"
+              @click.stop="toggle()"
+            >
+              <AutomateRunsTriggerStatusIcon
+                :summary="summary.summary.value"
+                class="h-5 w-5 md:h-6 md:w-6"
+              />
+            </button>
+          </template>
+        </AutomateResultDialog>
+
+        <ModelActionsDialog
+          :model-card="modelCard"
+          :model-name="modelData.displayName"
+          @view="viewModel"
+          @view-versions="viewModelVersions"
+          @remove="removeModel"
+        />
+      </div>
+    </div>
+    <div v-else-if="loading" class="px-1 py-1">
+      Fetching model data...
+      <CommonLoadingBar loading />
+    </div>
+    <div v-else class="px-1 py-1">Error loading data.</div>
+
+    <!-- Slot to allow senders or receivers to hoist their own buttons/ui -->
+    <!-- class="px-2 h-0 group-hover:h-auto transition-all overflow-hidden" -->
+    <div v-if="!noWriteAccess" class="px-2">
+      <slot></slot>
+    </div>
+
+    <!-- Progress state -->
+    <div
+      v-if="modelCard.progress"
+      :class="`${
+        modelCard.progress ? 'h-10 opacity-100' : 'h-0 opacity-0 py-0'
+      } overflow-hidden bg-blue-500/10`"
+    >
+      <CommonLoadingProgressBar
+        :loading="!!modelCard.progress"
+        :progress="modelCard.progress ? modelCard.progress.progress : undefined"
+      />
+      <div class="text-xs font-bold px-2 h-full flex items-center text-primary">
+        {{ modelCard.progress?.status || '...' }}
+        {{
+          modelCard.progress?.progress
+            ? ((props.modelCard.progress?.progress as number) * 100).toFixed() + '%'
+            : ''
+        }}
+      </div>
+    </div>
+    <div v-if="!noWriteAccess">
+      <!-- Card States: Expiry, errors, new version created, etc. -->
+      <slot name="states"></slot>
+      <div class="relative">
+        <!-- Swanky web app integration: show users who is viewing the model -->
+        <Transition name="bounce">
+          <div
+            v-if="currentlyViewingUsers.length !== 0 && !latestCommentNotification"
+            class="text-xs text-foreground-2 py-1 px-2 bg-gray-500/5 flex space-x-1 items-center justify-between"
+          >
+            <div class="flex items-center space-x-1">
+              <UserAvatarGroup size="sm" :users="currentlyViewingUsers" />
+              <span>
+                {{ currentlyViewingUsers.length === 1 ? 'is' : 'are' }} now viewing this
+                model.
+              </span>
+            </div>
+            <div>
+              <button
+                v-tippy="'Start a review session!'"
+                class="hover:text-primary p-1"
+                @click="viewModel()"
+              >
+                <ArrowTopRightOnSquareIcon class="w-3" />
+              </button>
+            </div>
+          </div>
+        </Transition>
+        <!-- Swanky web app integration: show comment created notification -->
+        <Transition name="bounce">
+          <div v-if="latestCommentNotification">
+            <div class="h-[2px] bg-blue-500/20 disappearing-bar"></div>
+            <div
+              class="text-xs text-foreground-2 py-1 px-2 bg-gray-500/5 flex space-x-1 items-center justify-between"
+            >
+              <div class="flex items-center space-x-1">
+                <UserAvatar
+                  size="sm"
+                  :user="latestCommentNotification.comment?.author"
+                />
+                <span>
+                  {{ latestCommentNotification.comment?.author.name }} just left a
+                  comment.
+                </span>
+              </div>
+              <div>
+                <button
+                  v-tippy="'View thread'"
+                  class="hover:text-primary p-1"
+                  @click="viewComment()"
+                >
+                  <ArrowTopRightOnSquareIcon class="w-3" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </div>
+    <div v-else>
+      <CommonModelNotification
+        :notification="{
+          modelCardId: modelCard.modelCardId,
+          dismissible: false,
+          level: 'danger',
+          text: 'You do not have write access: you cannot update this model. Contact the project owner!'
+        }"
+      />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useQuery, useSubscription } from '@vue/apollo-composable'
+import {
+  automateRunsSubscription,
+  automateStatusQuery,
+  modelCommentCreatedSubscription,
+  modelDetailsQuery,
+  modelViewingSubscription
+} from '~/lib/graphql/mutationsAndQueries'
+import { CommonLoadingProgressBar } from '@speckle/ui-components'
+import { ArrowTopRightOnSquareIcon, XCircleIcon } from '@heroicons/vue/20/solid'
+import { ArrowUpCircleIcon, ArrowDownCircleIcon } from '@heroicons/vue/24/solid'
+import type { ProjectModelGroup } from '~~/store/hostApp'
+import { useHostAppStore } from '~~/store/hostApp'
+import type { IModelCard } from '~~/lib/models/card'
+import { useAccountStore } from '~/store/accounts'
+import type { IReceiverModelCard } from '~/lib/models/card/receiver'
+import { useMixpanel } from '~/lib/core/composables/mixpanel'
+import { useIntervalFn, useTimeoutFn } from '@vueuse/core'
+import type { ProjectCommentsUpdatedMessage } from '~/lib/common/generated/gql/graphql'
+import { useFunctionRunsStatusSummary } from '~/lib/automate/runStatus'
+
+const app = useNuxtApp()
+const store = useHostAppStore()
+const accStore = useAccountStore()
+const { trackEvent } = useMixpanel()
+
+const props = withDefaults(
+  defineProps<{
+    modelCard: IModelCard
+    project: ProjectModelGroup
+    readonly?: boolean
+  }>(),
+  {
+    readonly: false
+  }
+)
+
+const isSender = computed(() => {
+  return props.modelCard.typeDiscriminator.includes('SenderModelCard')
+})
+
+defineEmits<{
+  (e: 'manual-publish-or-load'): void
+}>()
+
+const buttonTooltip = computed(() => {
+  return props.modelCard.progress
+    ? 'Cancel'
+    : isSender.value
+    ? 'Publish model'
+    : 'Load selected version'
+})
+
+const projectAccount = computed(() =>
+  accStore.accountWithFallback(props.project.accountId, props.project.serverUrl)
+)
+
+const clientId = projectAccount.value.accountInfo.id
+
+const { result: modelResult, loading } = useQuery(
+  modelDetailsQuery,
+  () => ({
+    projectId: props.project.projectId,
+    modelId: props.modelCard.modelId
+  }),
+  () => ({ clientId })
+)
+
+const modelData = computed(() => modelResult.value?.project.model)
+const queryData = computed(() => modelResult.value?.project)
+
+const folderPath = computed(() => {
+  const splitName = modelData.value?.name.split('/')
+  if (!splitName || splitName.length === 1) return ' '
+  const withoutLast = splitName.slice(0, -1)
+  return withoutLast.join('/')
+})
+
+const { result: automateResult, refetch } = useQuery(
+  automateStatusQuery,
+  () => ({
+    projectId: props.project.projectId,
+    modelId: props.modelCard.modelId
+  }),
+  () => ({ clientId })
+)
+
+const automationRuns = computed(
+  () => automateResult.value?.project.model.automationsStatus?.automationRuns
+)
+
+const { onResult: onAutomateRunResult } = useSubscription(
+  automateRunsSubscription,
+  () => ({ projectId: props.project.projectId }),
+  () => ({ clientId })
+)
+
+onAutomateRunResult(() => {
+  refetch()
+})
+
+const summary = computed(() => {
+  if (!automationRuns.value) {
+    return undefined
+  }
+  return useFunctionRunsStatusSummary({
+    runs: automationRuns.value
+  })
+})
+
+provide<IModelCard>('cardBase', props.modelCard)
+
+const highlightModel = () => {
+  if (!modelData.value) return
+
+  // Some host apps aren't friendly enough to handle highlighting models when some other ops are running.
+  if (props.modelCard.progress) return
+
+  // Do not highlight if baked object ids not set yet. Otherwise we rely on connector to handle it, don't if possible to handle here!
+  if (!isSender.value && !(props.modelCard as IReceiverModelCard).bakedObjectIds) {
+    store.setModelError({
+      modelCardId: props.modelCard.modelCardId,
+      error: 'No objects found to highlight.'
+    })
+    return
+  }
+
+  app.$baseBinding.highlightModel(props.modelCard.modelCardId)
+  trackEvent('DUI3 Action', { name: 'Highlight Model' }, props.modelCard.accountId)
+}
+
+const viewModel = () => {
+  // previously with DUI2, it was Stream View but actually it is "Version View" now. Also having conflict with old/new terminology.
+  trackEvent('DUI3 Action', { name: 'Version View' }, props.modelCard.accountId)
+  app.$baseBinding.openUrl(
+    `${projectAccount.value.accountInfo.serverInfo.url}/projects/${props.modelCard?.projectId}/models/${props.modelCard.modelId}`
+  )
+}
+
+const viewModelVersions = () => {
+  app.$baseBinding.openUrl(
+    `${projectAccount.value.accountInfo.serverInfo.url}/projects/${props.modelCard?.projectId}/models/${props.modelCard.modelId}/versions`
+  )
+}
+
+const removeModel = () => {
+  store.removeModel(props.modelCard)
+}
+
+defineExpose({
+  viewModel,
+  modelData,
+  queryData
+})
+
+const cardBgColor = computed(() => {
+  // if (props.modelCard.error || noWriteAccess.value)
+  //   return 'bg-red-500/10 hover:bg-red-500/20'
+  // if (props.modelCard.expired) return 'bg-blue-500/10 hover:bg-blue-500/20'
+  // if (
+  //   (props.modelCard as ISenderModelCard).latestCreatedVersionId ||
+  //   (props.modelCard as IReceiverModelCard).displayReceiveComplete === true
+  // ) {
+  //   if (failRate.value > 80) {
+  //     return 'bg-orange-500/10'
+  //   }
+  //   return 'bg-blue-500/10 hover:bg-blue-500/20'
+  // }
+  // if (
+  //   (props.modelCard as IReceiverModelCard).selectedVersionId !==
+  //     (props.modelCard as IReceiverModelCard).latestVersionId &&
+  //   !(props.modelCard as IReceiverModelCard).hasDismissedUpdateWarning
+  // )
+  //   return 'bg-orange-500/10'
+  return 'bg-foundation dark:bg-neutral-800 hover:bg-blue-500/10 '
+})
+
+const noWriteAccess = computed(() => {
+  return props.readonly && isSender.value
+})
+
+const { onResult: onModelViewingResult } = useSubscription(
+  modelViewingSubscription,
+  () => ({
+    target: {
+      projectId: props.modelCard.projectId,
+      resourceIdString: props.modelCard.modelId
+    }
+  }),
+  () => ({ clientId })
+)
+
+const currentlyViewingUsersMap = ref<
+  Record<string, { name: string; id: string; avatar?: string | null; lastSeen: number }>
+>({})
+
+const currentlyViewingUsers = computed(() =>
+  Object.values(currentlyViewingUsersMap.value)
+)
+
+onModelViewingResult((res) => {
+  const user = res.data?.viewerUserActivityBroadcasted.user
+  if (res.data?.viewerUserActivityBroadcasted.status === 'VIEWING' && user) {
+    // add user to currently viewing people
+    currentlyViewingUsersMap.value[user.id] = { ...user, lastSeen: Date.now() }
+  } else if (
+    res.data?.viewerUserActivityBroadcasted.status === 'DISCONNECTED' &&
+    user
+  ) {
+    // remove user from currently viewing people
+    delete currentlyViewingUsersMap.value[user.id]
+  }
+})
+
+// NOTE: FE does not send a disconnect event on page unload, so we need to do our own cleanup
+useIntervalFn(() => {
+  const now = Date.now()
+  for (const key in currentlyViewingUsersMap.value) {
+    const { lastSeen } = currentlyViewingUsersMap.value[key]
+    if (now - lastSeen > 5_000) delete currentlyViewingUsersMap.value[key]
+  }
+}, 1000)
+
+const { onResult: onCommentResult } = useSubscription(
+  modelCommentCreatedSubscription,
+  () => ({
+    target: {
+      projectId: props.modelCard.projectId,
+      resourceIdString: props.modelCard.modelId
+    }
+  }),
+  () => ({ clientId })
+)
+
+const latestCommentNotification = ref<ProjectCommentsUpdatedMessage>()
+
+const { start: startCommentClearTimeout, stop: stopCommentClearTimeout } = useTimeoutFn(
+  () => {
+    latestCommentNotification.value = undefined
+    stopCommentClearTimeout()
+  },
+  10_000
+)
+
+onCommentResult((res) => {
+  latestCommentNotification.value = res.data?.projectCommentsUpdated
+  startCommentClearTimeout()
+})
+
+const viewComment = () => {
+  trackEvent('DUI3 Action', { name: 'Comment View' }, props.modelCard.accountId)
+  if (!latestCommentNotification.value?.comment) return
+
+  const commentId =
+    latestCommentNotification.value?.comment?.parent?.id ||
+    latestCommentNotification.value?.comment.id
+
+  app.$baseBinding.openUrl(
+    `${projectAccount.value.accountInfo.serverInfo.url}/projects/${props.modelCard?.projectId}/models/${props.modelCard.modelId}#threadId=${commentId}`
+  )
+}
+</script>
+<style scoped lang="css">
+@keyframes disappear-width {
+  0% {
+    width: 100%;
+  }
+
+  100% {
+    display: none;
+    width: 0%;
+  }
+}
+
+.disappearing-bar {
+  animation: disappear-width 10s;
+}
+
+.bounce-enter-active {
+  animation: bounce-in 0.2s;
+}
+
+.bounce-leave-active {
+  animation: bounce-in 0.2s reverse;
+}
+
+@keyframes bounce-in {
+  0% {
+    transform: scale(0);
+  }
+
+  50% {
+    transform: scale(1.05);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+</style>
diff --git a/packages/dui3/components/model/Receiver.vue b/packages/dui3/components/model/Receiver.vue
new file mode 100644
index 0000000000..b01b06bb45
--- /dev/null
+++ b/packages/dui3/components/model/Receiver.vue
@@ -0,0 +1,296 @@
+<template>
+  <ModelCardBase
+    :model-card="modelCard"
+    :project="project"
+    @manual-publish-or-load="handleMainButtonClick"
+  >
+    <div class="flex max-[275px]:flex-col items-center space-x-2 pb-2">
+      <div class="shrink-0">
+        <FormButton
+          v-tippy="
+            isExpired
+              ? 'A new version was pushed ' +
+                latestVersionCreatedAt +
+                '. Click to load a different version.'
+              : 'Load a different version'
+          "
+          :icon-left="ClockIcon"
+          text
+          size="xs"
+          :color="isExpired ? 'warning' : 'card'"
+          class="flex min-w-0 transition hover:text-primary py-1"
+          :disabled="!!modelCard.progress"
+          @click.stop="openVersionsDialog = true"
+        >
+          <span class="">{{ createdAgo }}</span>
+        </FormButton>
+      </div>
+      <div
+        class="min-w-0 truncate text-foreground-2 -mt-1"
+        :title="
+          versionDetailsResult?.project.model.version.message || 'No message provided'
+        "
+      >
+        <span class="truncate max-[275px]:truncate-no select-none text-xs">
+          {{
+            versionDetailsResult?.project.model.version.message || 'No message provided'
+          }}
+        </span>
+      </div>
+    </div>
+    <LayoutDialog
+      v-model:open="openVersionsDialog"
+      fullscreen="none"
+      title="Change loaded version"
+    >
+      <WizardVersionSelector
+        :account-id="modelCard.accountId"
+        :project-id="modelCard.projectId"
+        :model-id="modelCard.modelId"
+        :selected-version-id="modelCard.selectedVersionId"
+        @next="handleVersionSelection"
+      />
+    </LayoutDialog>
+    <template #states>
+      <CommonModelNotification
+        v-if="expiredNotification"
+        :notification="expiredNotification"
+        @dismiss="
+          store.patchModel(modelCard.modelCardId, {
+            hasDismissedUpdateWarning: true
+          })
+        "
+      />
+      <CommonModelNotification
+        v-if="errorNotification"
+        :notification="errorNotification"
+        @dismiss="store.patchModel(modelCard.modelCardId, { error: undefined })"
+      />
+      <CommonModelNotification
+        v-if="receiveResultNotification"
+        :notification="receiveResultNotification"
+        @dismiss="
+          store.patchModel(modelCard.modelCardId, {
+            displayReceiveComplete: false
+          })
+        "
+      />
+    </template>
+  </ModelCardBase>
+</template>
+<script setup lang="ts">
+import dayjs from 'dayjs'
+
+import { useQuery } from '@vue/apollo-composable'
+import { ClockIcon } from '@heroicons/vue/24/solid'
+import type { ModelCardNotification } from '~/lib/models/card/notification'
+import type { ProjectModelGroup } from '~/store/hostApp'
+import { useHostAppStore } from '~/store/hostApp'
+import type { IReceiverModelCard } from '~/lib/models/card/receiver'
+import { versionDetailsQuery } from '~/lib/graphql/mutationsAndQueries'
+import type { VersionListItemFragment } from '~/lib/common/generated/gql/graphql'
+import { useMixpanel } from '~/lib/core/composables/mixpanel'
+import { useInterval, watchOnce } from '@vueuse/core'
+import { useAccountStore } from '~~/store/accounts'
+
+const { trackEvent } = useMixpanel()
+const app = useNuxtApp()
+const accountStore = useAccountStore()
+
+const props = defineProps<{
+  modelCard: IReceiverModelCard
+  project: ProjectModelGroup
+}>()
+
+const store = useHostAppStore()
+
+const openVersionsDialog = ref(false)
+
+const projectAccount = computed(() =>
+  accountStore.accountWithFallback(props.project.accountId, props.project.serverUrl)
+)
+
+app.$baseBinding.on('documentChanged', () => {
+  openVersionsDialog.value = false
+})
+
+const isExpired = computed(() => {
+  return props.modelCard.latestVersionId !== props.modelCard.selectedVersionId
+})
+
+// Cancels any in progress receive AND load selected version
+const handleVersionSelection = async (
+  selectedVersion: VersionListItemFragment,
+  latestVersion: VersionListItemFragment
+) => {
+  openVersionsDialog.value = false
+  void trackEvent('DUI3 Action', {
+    name: 'Load Card Version Change',
+    isLatestVersion: selectedVersion === latestVersion
+  })
+  if (props.modelCard.progress) {
+    await store.receiveModelCancel(props.modelCard.modelCardId)
+  }
+  await store.patchModel(props.modelCard.modelCardId, {
+    selectedVersionId: selectedVersion.id,
+    selectedVersionSourceApp: selectedVersion.sourceApplication,
+    selectedVersionUserId: selectedVersion.authorUser?.id,
+    latestVersionId: latestVersion.id, // patch this dude as well, to make sure
+    latestVersionSourceApp: latestVersion.sourceApplication,
+    latestVersionUserId: latestVersion.authorUser?.id,
+    hasSelectedOldVersion: selectedVersion.id === latestVersion.id
+  })
+
+  await store.receiveModel(props.modelCard.modelCardId, 'VersionSelector')
+}
+
+// Cancels any in progress receive OR receives latest version
+const handleMainButtonClick = async () => {
+  if (props.modelCard.progress)
+    return await store.receiveModelCancel(props.modelCard.modelCardId)
+  await receiveCurrentVersion()
+}
+
+const receiveCurrentVersion = async () => {
+  await store.receiveModel(props.modelCard.modelCardId, 'ModelCardButton')
+}
+
+// Cancels any in progress receive AND receives latest version
+const receiveLatestVersion = async () => {
+  // Note: here we're updating the model card info, and afterwards we're hitting the receive action
+  await store.patchModel(props.modelCard.modelCardId, {
+    selectedVersionId: props.modelCard.latestVersionId,
+    selectedVersionSourceApp: props.modelCard.latestVersionSourceApp,
+    selectedVersionUserId: props.modelCard.latestVersionUserId
+  })
+  if (props.modelCard.progress)
+    await store.receiveModelCancel(props.modelCard.modelCardId)
+  await store.receiveModel(props.modelCard.modelCardId, 'UpdateNotification')
+}
+
+const expiredNotification = computed(() => {
+  if (!props.modelCard.latestVersionId || props.modelCard.hasDismissedUpdateWarning)
+    return
+  if (props.modelCard.latestVersionId === props.modelCard.selectedVersionId) return
+  const notification = {} as ModelCardNotification
+  notification.dismissible = true
+  notification.level = 'warning'
+  notification.text = 'Newer version available!'
+  notification.cta = {
+    name: 'Update',
+    action: receiveLatestVersion
+  }
+  return notification
+})
+
+const failRate = computed(() => {
+  if (!props.modelCard.report) return 0
+  return (
+    (props.modelCard.report.filter((r) => r.status === 4).length /
+      props.modelCard.report.length) *
+    100
+  )
+})
+
+const receiveResultNotificationText = computed(() => {
+  if (failRate.value > 80) {
+    return 'Model loaded. Some objects have failed to convert!'
+  }
+  return 'Model loaded!'
+})
+
+const receiveResultNotificationLevel = computed(() => {
+  if (failRate.value > 80) {
+    return 'warning'
+  }
+  return 'info'
+})
+
+const receiveResultNotification = computed(() => {
+  if (
+    !props.modelCard.bakedObjectIds ||
+    props.modelCard.displayReceiveComplete !== true
+  )
+    return
+
+  const notification = {} as ModelCardNotification
+  notification.dismissible = true
+  notification.level = receiveResultNotificationLevel.value
+  notification.text = receiveResultNotificationText.value
+  notification.report = props.modelCard.report
+  notification.cta = {
+    name: 'Highlight',
+    action: () => {
+      app.$baseBinding.highlightModel(props.modelCard.modelCardId)
+    }
+  }
+  return notification
+})
+
+const errorNotification = computed(() => {
+  if (!props.modelCard.error) return
+  const notification = {} as ModelCardNotification
+  notification.dismissible = true
+  notification.level = 'danger'
+  notification.text = props.modelCard.error.errorMessage
+  notification.report = props.modelCard.report
+  return notification
+})
+
+const { result: versionDetailsResult, refetch } = useQuery(
+  versionDetailsQuery,
+  () => ({
+    projectId: props.modelCard.projectId,
+    modelId: props.modelCard.modelId,
+    versionId: props.modelCard.selectedVersionId
+  }),
+  () => ({
+    clientId: projectAccount.value.accountInfo.id
+  })
+)
+
+const createdAgoUpdater = useInterval(10_000) // refresh the created ago, and latestversion etc. every 10s
+
+const createdAgo = computed(() => {
+  createdAgoUpdater.value
+  return dayjs(versionDetailsResult.value?.project.model.version.createdAt).from(
+    dayjs()
+  )
+})
+
+const latestVersionCreatedAt = computed(() => {
+  createdAgoUpdater.value
+  return dayjs(props.modelCard.latestVersionCreatedAt).from(dayjs())
+})
+
+onMounted(() => {
+  refetch()
+})
+
+// On initialisation, we check whether there was a never version created while we were offline. If so, flagging this dude as expired.
+watchOnce(versionDetailsResult, async (newVal) => {
+  if (!newVal) return
+  let patchObject = {}
+
+  if (
+    newVal?.project.model.versions.items &&
+    newVal?.project.model.versions.items.length !== 0 &&
+    newVal?.project.model.versions.items[0].id !== props.modelCard.selectedVersionId
+  ) {
+    patchObject = {
+      latestVersionId: newVal?.project.model.versions.items[0].id,
+      latestVersionCreatedAt: newVal?.project.model.versions.items[0].createdAt,
+      latestVersionSourceApp: newVal?.project.model.versions.items[0].sourceApplication,
+      latestVersionUserId: newVal?.project.model.versions.items[0].authorUser?.id,
+      hasDismissedUpdateWarning: props.modelCard.hasSelectedOldVersion ? true : false
+    }
+  }
+
+  // Always update the card's project name and model name, if needed. Note, this is not needed for senders (senders do not need to create layers).
+  await store.patchModel(props.modelCard.modelCardId, {
+    ...patchObject,
+    projectName: newVal?.project.name as string,
+    modelName: newVal?.project.model.name as string
+  })
+})
+</script>
diff --git a/packages/dui3/components/model/Sender.vue b/packages/dui3/components/model/Sender.vue
new file mode 100644
index 0000000000..29518a822f
--- /dev/null
+++ b/packages/dui3/components/model/Sender.vue
@@ -0,0 +1,235 @@
+<template>
+  <ModelCardBase
+    ref="cardBase"
+    :model-card="modelCard"
+    :project="project"
+    :readonly="readonly"
+    @manual-publish-or-load="sendOrCancel"
+  >
+    <!-- <div class="grid grid-cols-2 py-2 max-[275px]:grid-cols-1 gap-2"> -->
+    <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events vuejs-accessibility/no-static-element-interactions-->
+    <div
+      class="flex max-[275px]:flex-col items-center space-x-2 max-[275px]:space-x-0 pb-2 max-[275px]:space-y-2"
+      @mouseenter="hover = true"
+      @mouseleave="hover = false"
+    >
+      <div class="flex">
+        <FormButton
+          v-tippy="'Edit what gets published'"
+          :icon-left="Square3Stack3DIcon"
+          text
+          size="sm"
+          color="primary"
+          class="flex min-w-0 transition hover:text-primary py-1"
+          :disabled="!!modelCard.progress || noWriteAccess"
+          @click.stop="openFilterDialog = true"
+        >
+          <span class="">{{ modelCard.sendFilter?.name }}</span>
+        </FormButton>
+      </div>
+      <div
+        :title="modelCard.sendFilter?.summary"
+        class="flex items-center h-6 space-x-2 text-xs max-[275px]:justify-center rounded-md pl-2 min-w-0 max-w-full truncate user-select-none"
+      >
+        <FormButton
+          v-if="
+            hover &&
+            modelCard.sendFilter?.expired &&
+            modelCard.sendFilter.name === 'Selection'
+          "
+          text
+          color="primary"
+          size="sm"
+          class="truncate"
+          :disabled="!!modelCard.progress || noWriteAccess"
+          @click.stop="openFilterDialog = true"
+        >
+          Publish current selection
+        </FormButton>
+        <span v-else class="truncate text-foreground-2 select-none max-w-full">
+          {{ modelCard.sendFilter?.summary }}
+        </span>
+      </div>
+    </div>
+    <LayoutDialog
+      v-model:open="openFilterDialog"
+      :title="`Change filter`"
+      fullscreen="none"
+    >
+      <FilterListSelect :filter="modelCard.sendFilter" @update:filter="updateFilter" />
+      <!-- <SendSettings
+        v-if="hasSendSettings"
+        :settings="modelCard.settings"
+        @update:settings="updateSettings"
+      ></SendSettings> -->
+      <div class="mt-4 flex justify-end items-center space-x-2">
+        <!-- TODO: Ux wise, users might want to just save the selection and publish it later. -->
+        <FormButton size="sm" color="outline" @click.stop="saveFilter()">
+          Save
+        </FormButton>
+        <FormButton size="sm" @click.stop="saveFilterAndSend()">
+          Save & Publish
+        </FormButton>
+      </div>
+    </LayoutDialog>
+    <template #states>
+      <CommonModelNotification
+        v-if="expiredNotification"
+        :notification="expiredNotification"
+      />
+      <CommonModelNotification
+        v-if="errorNotification"
+        :notification="errorNotification"
+        :report="modelCard.report"
+        @dismiss="store.patchModel(modelCard.modelCardId, { error: undefined })"
+      />
+      <CommonModelNotification
+        v-if="latestVersionNotification"
+        :notification="latestVersionNotification"
+        :report="modelCard.report"
+        @dismiss="
+          store.patchModel(modelCard.modelCardId, {
+            latestCreatedVersionId: undefined
+          })
+        "
+      />
+    </template>
+  </ModelCardBase>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import ModelCardBase from '~/components/model/CardBase.vue'
+import { Square3Stack3DIcon } from '@heroicons/vue/20/solid'
+import type { ModelCardNotification } from '~/lib/models/card/notification'
+import type { ISendFilter, ISenderModelCard } from '~/lib/models/card/send'
+import type { ProjectModelGroup } from '~/store/hostApp'
+import { useHostAppStore } from '~/store/hostApp'
+import { useMixpanel } from '~/lib/core/composables/mixpanel'
+
+const { trackEvent } = useMixpanel()
+const app = useNuxtApp()
+
+const cardBase = ref<InstanceType<typeof ModelCardBase>>()
+const props = defineProps<{
+  modelCard: ISenderModelCard
+  project: ProjectModelGroup
+  readonly: boolean
+}>()
+
+const store = useHostAppStore()
+const openFilterDialog = ref(false)
+app.$baseBinding.on('documentChanged', () => {
+  openFilterDialog.value = false
+})
+
+const sendOrCancel = () => {
+  if (props.readonly) {
+    return
+  }
+  if (props.modelCard.progress) store.sendModelCancel(props.modelCard.modelCardId)
+  else store.sendModel(props.modelCard.modelCardId, 'ModelCardButton')
+}
+
+let newFilter: ISendFilter
+const updateFilter = (filter: ISendFilter) => {
+  newFilter = filter
+}
+
+const saveFilter = async () => {
+  void trackEvent('DUI3 Action', {
+    name: 'Publish Card Filter Change',
+    filter: newFilter.typeDiscriminator
+  })
+
+  // do not reset idmap while creating a new one because it is managed by host app
+  newFilter.idMap = props.modelCard.sendFilter?.idMap
+
+  await store.patchModel(props.modelCard.modelCardId, {
+    sendFilter: newFilter,
+    expired: true
+  })
+  openFilterDialog.value = false
+}
+
+const hover = ref(false)
+
+const saveFilterAndSend = async () => {
+  await saveFilter()
+  store.sendModel(props.modelCard.modelCardId, 'Filter')
+}
+
+const expiredNotification = computed(() => {
+  if (!props.modelCard.expired) return
+
+  const notification = {} as ModelCardNotification
+  notification.dismissible = false
+  notification.level = props.modelCard.progress ? 'warning' : 'info'
+  notification.text = props.modelCard.progress
+    ? 'Model was changed while publishing'
+    : 'Out of sync with application'
+
+  const ctaType = props.modelCard.progress ? 'Restart' : 'Update'
+  notification.cta = {
+    name: ctaType,
+    action: async () => {
+      if (props.modelCard.progress) {
+        await store.sendModelCancel(props.modelCard.modelCardId)
+      }
+      store.sendModel(props.modelCard.modelCardId, ctaType)
+    }
+  }
+  return notification
+})
+
+const errorNotification = computed(() => {
+  if (!props.modelCard.error) return
+  const notification = {} as ModelCardNotification
+  notification.dismissible = props.modelCard.error.dismissible
+  notification.level = 'danger'
+  notification.text = props.modelCard.error.errorMessage
+  notification.report = props.modelCard.report
+  return notification
+})
+
+const failRate = computed(() => {
+  if (!props.modelCard.report) return 0
+  return (
+    (props.modelCard.report.filter((r) => r.status === 4).length /
+      props.modelCard.report.length) *
+    100
+  )
+})
+
+const sendResultNotificationText = computed(() => {
+  if (failRate.value > 80) {
+    return 'Version created. Some objects have failed to convert!'
+  }
+  return 'Version created!'
+})
+
+const sendResultNotificationLevel = computed(() => {
+  if (failRate.value > 80) {
+    return 'warning'
+  }
+  return 'info'
+})
+
+const latestVersionNotification = computed(() => {
+  if (!props.modelCard.latestCreatedVersionId) return
+  const notification = {} as ModelCardNotification
+  notification.dismissible = true
+  notification.level = sendResultNotificationLevel.value
+  notification.text = sendResultNotificationText.value
+  notification.report = props.modelCard.report
+  notification.cta = {
+    name: 'View',
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
+    action: () => cardBase.value?.viewModel()
+  }
+  return notification
+})
+
+const noWriteAccess = computed(() => {
+  return props.readonly
+})
+</script>
diff --git a/packages/dui3/components/receive/Wizard.vue b/packages/dui3/components/receive/Wizard.vue
new file mode 100644
index 0000000000..6096cac785
--- /dev/null
+++ b/packages/dui3/components/receive/Wizard.vue
@@ -0,0 +1,206 @@
+<template>
+  <LayoutDialog
+    v-model:open="showReceiveDialog"
+    fullscreen="none"
+    @fully-closed="step = 1"
+  >
+    <template #header>
+      <div class="flex items-center space-x-2 mb-0">
+        <div
+          class="text-xs mt-[3px] font-normal bg-primary-muted text-foreground-2 rounded-full justify-center items-center flex px-2"
+        >
+          {{ step }}/3
+        </div>
+        <div v-if="step === 1" class="h5 font-bold">Select project</div>
+        <div v-if="step === 2" class="h5 font-bold">Select model</div>
+        <div v-if="step === 3" class="h5 font-bold">Select version</div>
+      </div>
+      <!-- Step progress indicator: shows selected project and model -->
+      <div
+        v-if="selectedProject"
+        class="mt-2 absolute rounded-b-md shadow bg-foundation-2 h-10 w-full -ml-6 text-foreground-2 text-sm font-normal px-4 flex items-center min-w-0"
+      >
+        <button
+          v-tippy="'Change project'"
+          :class="`hover:text-primary transition truncate text-ellipsis max-w-32 min-w-0 ${
+            step === 1 ? 'text-primary font-bold' : ''
+          }`"
+          @click="step = 1"
+        >
+          {{ selectedProject ? selectedProject.name : 'No project' }}
+        </button>
+        <ChevronRightIcon v-if="selectedModel" class="w-4 mt-[2px]" />
+        <button
+          v-if="selectedModel"
+          v-tippy="'Change model'"
+          :class="`hover:text-primary transition truncate text-ellipsis max-w-32 min-w-0 ${
+            step === 2 ? 'text-primary font-bold' : ''
+          }`"
+          @click="step = 2"
+        >
+          {{ selectedModel ? selectedModel.name : 'No model' }}
+        </button>
+      </div>
+    </template>
+    <div>
+      <div v-if="step === 1">
+        <WizardProjectSelector
+          :show-new-project="false"
+          @next="selectProject"
+          @search-text-update="updateSearchText"
+        />
+      </div>
+      <div v-if="step === 2 && selectedProject && selectedAccountId" class="mt-10">
+        <div>
+          <WizardModelSelector
+            :project="selectedProject"
+            :account-id="selectedAccountId"
+            :show-new-model="false"
+            @next="selectModel"
+          />
+        </div>
+      </div>
+      <div v-if="step === 3" class="mt-10">
+        <WizardVersionSelector
+          v-if="selectedProject && selectedModel"
+          :account-id="selectedAccountId"
+          :project-id="selectedProject.id"
+          :model-id="selectedModel.id"
+          :selected-version-id="urlParsedVersionId"
+          :from-wizard="true"
+          @next="selectVersionAndAddModel"
+        />
+      </div>
+    </div>
+    <div v-if="urlParseError" class="p-2 text-xs text-danger">{{ urlParseError }}</div>
+  </LayoutDialog>
+</template>
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import type {
+  ModelListModelItemFragment,
+  ProjectListProjectItemFragment,
+  VersionListItemFragment
+} from '~/lib/common/generated/gql/graphql'
+import { useHostAppStore } from '~/store/hostApp'
+import { useAccountStore } from '~/store/accounts'
+import { ChevronRightIcon } from '@heroicons/vue/24/solid'
+import { ReceiverModelCard } from '~/lib/models/card/receiver'
+import { useMixpanel } from '~/lib/core/composables/mixpanel'
+import { useAddByUrl } from '~/lib/core/composables/addByUrl'
+
+const { trackEvent } = useMixpanel()
+
+const showReceiveDialog = defineModel<boolean>({ default: false })
+
+const emit = defineEmits(['close'])
+
+const step = ref(1)
+
+// Clears data if going backwards in the wizard
+watch(step, (newVal, oldVal) => {
+  if (newVal > oldVal) return // exit fast on forward
+  if (newVal === 1) {
+    selectedProject.value = undefined
+    selectedModel.value = undefined
+  }
+  if (newVal === 2) selectedModel.value = undefined
+})
+
+const accountStore = useAccountStore()
+const { activeAccount } = storeToRefs(accountStore)
+
+const selectedAccountId = ref<string>(activeAccount.value?.accountInfo.id as string)
+const selectedProject = ref<ProjectListProjectItemFragment>()
+const selectedModel = ref<ModelListModelItemFragment>()
+
+const { tryParseUrl, urlParsedData, urlParseError } = useAddByUrl()
+const updateSearchText = (text: string | undefined) => {
+  urlParseError.value = undefined
+  if (!text) return
+  tryParseUrl(text, 'receiver')
+}
+
+const urlParsedVersionId = ref<string>()
+watch(urlParsedData, (newVal) => {
+  if (!newVal) return
+  selectProject(newVal.account?.accountInfo.id, newVal.project)
+  selectModel(newVal.model)
+  if (newVal.version) urlParsedVersionId.value = newVal.version.id
+})
+
+const selectProject = (accountId: string, project: ProjectListProjectItemFragment) => {
+  step.value++
+  selectedAccountId.value = accountId
+  selectedProject.value = project
+
+  void trackEvent('DUI3 Action', { name: 'Load Wizard', step: 'project selected' })
+}
+
+const selectModel = (model: ModelListModelItemFragment) => {
+  step.value++
+  selectedModel.value = model
+  void trackEvent('DUI3 Action', { name: 'Load Wizard', step: 'model selected' })
+}
+
+// accountId, serverUrl,  ModelListModelItemFragment, VersionListItemFragment
+const selectVersionAndAddModel = async (
+  version: VersionListItemFragment,
+  latestVersion: VersionListItemFragment
+) => {
+  void trackEvent('DUI3 Action', {
+    name: 'Load Wizard',
+    step: 'version selected',
+    hasSelectedLatestVersion: version.id === latestVersion.id
+  })
+
+  const existingModel = hostAppStore.models.find(
+    (m) =>
+      m.modelId === selectedModel.value?.id &&
+      m.typeDiscriminator === 'ReceiverModelCard'
+  ) as ReceiverModelCard
+
+  if (existingModel) {
+    emit('close')
+    // Patch the existing model card with new versions!
+    await hostAppStore.patchModel(existingModel.modelCardId, {
+      selectedVersionId: version.id,
+      selectedVersionSourceApp: version.sourceApplication,
+      selectedVersionUserId: version.authorUser?.id,
+      latestVersionId: latestVersion.id,
+      latestVersionSourceApp: latestVersion.sourceApplication,
+      latestVersionUserId: latestVersion.authorUser?.id
+    })
+    await hostAppStore.receiveModel(existingModel.modelCardId, 'Wizard')
+    return
+  }
+
+  const modelCard = new ReceiverModelCard()
+  modelCard.accountId = selectedAccountId.value
+  modelCard.serverUrl = activeAccount.value.accountInfo.serverInfo.url
+
+  modelCard.projectId = selectedProject.value?.id as string
+  modelCard.modelId = selectedModel.value?.id as string
+  modelCard.workspaceId = selectedProject.value?.workspaceId as string
+
+  modelCard.projectName = selectedProject.value?.name as string
+  modelCard.modelName = selectedModel.value?.name as string
+
+  modelCard.selectedVersionId = version.id
+  modelCard.selectedVersionSourceApp = version.sourceApplication as string
+  modelCard.selectedVersionUserId = version.authorUser?.id as string
+
+  modelCard.latestVersionId = latestVersion.id
+  modelCard.latestVersionSourceApp = latestVersion.sourceApplication as string
+  modelCard.latestVersionUserId = latestVersion.authorUser?.id as string
+
+  modelCard.hasDismissedUpdateWarning = true
+  modelCard.hasSelectedOldVersion = version.id !== latestVersion.id
+
+  emit('close')
+  await hostAppStore.addModel(modelCard)
+  await hostAppStore.receiveModel(modelCard.modelCardId, 'Wizard')
+}
+
+const hostAppStore = useHostAppStore()
+</script>
diff --git a/packages/dui3/components/report/Base.vue b/packages/dui3/components/report/Base.vue
new file mode 100644
index 0000000000..6ac65bf061
--- /dev/null
+++ b/packages/dui3/components/report/Base.vue
@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <slot name="activator" :toggle="toggleDialog">
+      <button
+        v-tippy="summary.hint"
+        class="rounded-full bg-foundation"
+        @click.stop="toggleDialog()"
+      >
+        <InformationCircleIcon
+          v-if="summary.failedCount === 0"
+          class="w-4 text-success"
+        />
+        <ExclamationCircleIcon v-else class="w-4 text-warning" />
+      </button>
+    </slot>
+    <LayoutDialog v-model:open="showReportDialog" :title="`Report`" fullscreen="none">
+      <template #header>
+        <div class="flex mt-2 space-x-2 p-1">
+          <button
+            class="flex items-center justify-center hover:ring-2 border border-foreground-3 rounded-md p-1 text-xs text-success"
+            :class="successToggle ? 'border-2 border-success' : ''"
+            @click="successToggle = !successToggle"
+          >
+            <CheckCircleIcon
+              class="w-4 mr-1 stroke-green-500 text-green-500"
+            ></CheckCircleIcon>
+            {{ numberOfSuccess }}
+          </button>
+          <button
+            class="flex items-center justify-center hover:ring-2 border border-foreground-3 rounded-md p-1 text-xs text-warning"
+            :class="warningToggle ? 'border-2 border-warning' : ''"
+            @click="warningToggle = !warningToggle"
+          >
+            <ExclamationTriangleIcon
+              class="w-4 mr-1 stroke-warning-500 text-warning-500"
+            ></ExclamationTriangleIcon>
+            {{ numberOfWarning }}
+          </button>
+          <button
+            class="flex items-center justify-center hover:ring-2 border border-foreground-3 rounded-md p-1 text-xs text-danger"
+            :class="failedToggle ? 'border-2 border-danger' : ''"
+            @click="failedToggle = !failedToggle"
+          >
+            <ExclamationCircleIcon
+              class="w-4 mr-1 stroke-red-500 text-red-500"
+            ></ExclamationCircleIcon>
+            {{ numberOfFailed }}
+          </button>
+        </div>
+      </template>
+      <div class="flex flex-col space-y-1">
+        <ReportItem
+          v-for="(item, index) in reportLimited"
+          :key="index"
+          :report-item="item"
+        />
+      </div>
+      <div v-if="report.length > reportSlice">
+        <FormButton size="xs" full-width color="secondary" @click="reportSlice += 20">
+          Show more
+        </FormButton>
+      </div>
+    </LayoutDialog>
+  </div>
+</template>
+<script setup lang="ts">
+import {
+  InformationCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  CheckCircleIcon
+} from '@heroicons/vue/20/solid'
+import type { ConversionResult } from '~~/lib/conversions/conversionResult'
+
+const props = defineProps<{
+  report: ConversionResult[]
+}>()
+
+const showReportDialog = ref(false)
+
+const successToggle = ref(false) // Status 1
+const warningToggle = ref(false) // Status 3
+const failedToggle = ref(true) // Status 4
+
+const toggleDialog = () => {
+  showReportDialog.value = !showReportDialog.value
+}
+
+const reportSlice = ref(10)
+// Limit so we don't display 100k items at once and burn
+const reportLimited = computed(() => reportSorted.value.slice(0, reportSlice.value))
+// Sort to errors first
+const reportSorted = computed(() =>
+  [...filteredReports.value].sort((a, b) => b.status - a.status)
+)
+// Filter according to toggles
+const filteredReports = computed(() => {
+  return props.report.filter((report) => {
+    if (successToggle.value && report.status === 1) {
+      return true
+    }
+    if (failedToggle.value && report.status === 4) {
+      return true
+    }
+    if (warningToggle.value && report.status === 3) {
+      return true
+    }
+    // TODO: do more later!
+    return false
+  })
+})
+
+const numberOfSuccess = computed(
+  () => props.report.filter((r) => r.status === 1).length
+)
+
+const numberOfWarning = computed(
+  () => props.report.filter((r) => r.status === 3).length
+)
+
+const numberOfFailed = computed(() => props.report.filter((r) => r.status === 4).length)
+
+const summary = computed(() => {
+  const failed = props.report.filter((item) => item.status === 4)
+  const ok = props.report.filter((item) => item.status === 1)
+  const hint =
+    failed.length !== 0
+      ? `${failed.length} object(s) failed to convert`
+      : 'All objects converted ok'
+  return {
+    failedCount: failed.length,
+    okCount: ok.length,
+    hint
+  }
+})
+</script>
diff --git a/packages/dui3/components/report/Item.vue b/packages/dui3/components/report/Item.vue
new file mode 100644
index 0000000000..76ec09d86b
--- /dev/null
+++ b/packages/dui3/components/report/Item.vue
@@ -0,0 +1,135 @@
+<template>
+  <button
+    class="block rounded-lg p-1 transition hover:bg-primary-muted"
+    @click="highlightObject"
+  >
+    <div class="text-foreground-2 flex items-center relative">
+      <div class="mr-1 hover:cursor-pointer">
+        <div v-if="reportItem.status === 1">
+          <CheckCircleIcon class="w-4 stroke-green-500 text-green-500" />
+        </div>
+        <div v-else-if="reportItem.status === 3">
+          <ExclamationTriangleIcon class="w-4 text-warning"></ExclamationTriangleIcon>
+        </div>
+        <div v-else>
+          <ExclamationCircleIcon class="w-4 text-danger"></ExclamationCircleIcon>
+        </div>
+      </div>
+      <div class="text-xs transition truncate">
+        <span v-if="reportItem.status === 1">
+          {{ reportItem.sourceType?.split('.').reverse()[0] }} >
+        </span>
+
+        <span>
+          {{
+            reportItem.resultType
+              ? reportItem.resultType?.split('.').reverse()[0]
+              : reportItem.error?.message
+          }}
+        </span>
+      </div>
+      <button
+        v-tippy="'Details'"
+        class="block rounded-lg transition hover:bg-primary-muted ml-auto"
+        @click.stop="toggleDetails"
+      >
+        <div v-if="!showDetails">
+          <ChevronDownIcon class="w-4" />
+        </div>
+        <div v-else>
+          <ChevronUpIcon class="w-4" />
+        </div>
+      </button>
+      <button
+        v-if="reportItem.status !== 1 && !isSender"
+        v-tippy="'See object on Web'"
+        class="block rounded-lg transition hover:bg-primary-muted ml-1"
+        @click.stop="openObjectOnWeb"
+      >
+        <ArrowTopRightOnSquareIcon class="w-4" />
+      </button>
+    </div>
+  </button>
+  <div
+    v-if="showDetails"
+    class="text-xs text-foreground-2 ml-3 rounded-lg p-1 hover:bg-primary-muted hover:cursor-pointer"
+  >
+    <button
+      v-tippy="'Copy to clipboard'"
+      class="text-left w-full whitespace-pre-wrap break-all overflow-hidden"
+      @click="copyToClipboard(details)"
+    >
+      {{ details }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  CheckCircleIcon,
+  ChevronUpIcon,
+  ChevronDownIcon,
+  ArrowTopRightOnSquareIcon
+} from '@heroicons/vue/24/solid'
+import type { ConversionResult } from '~/lib/conversions/conversionResult'
+import { useAccountStore } from '~/store/accounts'
+import type { IModelCard } from 'lib/models/card'
+import { useHostAppStore } from '~/store/hostApp'
+
+const app = useNuxtApp()
+const hostAppStore = useHostAppStore()
+const accStore = useAccountStore()
+
+const showDetails = ref<boolean>(false)
+
+const props = defineProps<{
+  reportItem: ConversionResult
+}>()
+
+const cardBase = inject('cardBase') as IModelCard
+
+const isSender = computed(() =>
+  hostAppStore.models
+    .find((m) => m.modelCardId === cardBase.modelCardId)
+    ?.typeDiscriminator.toLowerCase()
+    .includes('sender')
+)
+
+const acc = accStore.accounts.find((acc) => acc.accountInfo.id === cardBase.accountId)
+
+const details = computed(() =>
+  props.reportItem.error
+    ? props.reportItem.error.stackTrace
+    : `${props.reportItem.sourceType} > ${props.reportItem.resultType}`
+)
+
+const openObjectOnWeb = () => {
+  // This is a POC implementation. Later we will highlight object(s) within the model. Currently it is done by 'Isolate' filter on viewer but there is no direct URL to achieve this.
+  const url = `${acc?.accountInfo.serverInfo.url}/projects/${cardBase?.projectId}/models/${props.reportItem.sourceId}`
+  app.$openUrl(url)
+}
+
+const highlightObject = () => {
+  // sender reports highlight in source app
+  if (cardBase.typeDiscriminator.toLowerCase().includes('send')) {
+    app.$baseBinding.highlightObjects([props.reportItem.sourceId])
+    return
+  }
+
+  // receive reports that are ok highliht in source app
+  if (props.reportItem.status === 1 && props.reportItem.resultId) {
+    app.$baseBinding.highlightObjects([props.reportItem.resultId])
+    return
+  }
+}
+
+const copyToClipboard = (text: string) => {
+  navigator.clipboard.writeText(text)
+}
+
+const toggleDetails = () => {
+  showDetails.value = !showDetails.value
+}
+</script>
diff --git a/packages/dui3/components/send/FiltersAndSettings.vue b/packages/dui3/components/send/FiltersAndSettings.vue
new file mode 100644
index 0000000000..eaae283cff
--- /dev/null
+++ b/packages/dui3/components/send/FiltersAndSettings.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="space-y-2">
+    <FilterListSelect @update:filter="updateFilter" />
+    <SendSettings
+      v-if="hasSendSettings"
+      expandable
+      @update:settings="updateSettings"
+    ></SendSettings>
+  </div>
+</template>
+<script setup lang="ts">
+import type { ISendFilter } from '~/lib/models/card/send'
+import { useHostAppStore } from '~/store/hostApp'
+import type { CardSetting } from '~/lib/models/card/setting'
+
+const emit = defineEmits<{
+  (e: 'update:filter', filter: ISendFilter): void
+  (e: 'update:settings', settings: CardSetting[]): void
+}>()
+
+const updateFilter = (filter: ISendFilter) => {
+  // TODO: something like hostApp.validateSendFilter()
+  // which should return a bool and a reason if invalid
+  emit('update:filter', filter)
+}
+
+const updateSettings = (settings: CardSetting[]) => {
+  emit('update:settings', settings)
+}
+
+const store = useHostAppStore()
+const hasSendSettings = computed(
+  () => store.sendSettings && store.sendSettings?.length > 0
+)
+</script>
diff --git a/packages/dui3/components/send/Settings.vue b/packages/dui3/components/send/Settings.vue
new file mode 100644
index 0000000000..2b30f364c3
--- /dev/null
+++ b/packages/dui3/components/send/Settings.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="p-0">
+    <button
+      v-if="expandable"
+      class="flex w-full items-center text-foreground-2 justify-between hover:bg-blue-500/10 rounded-md transition group"
+      @click="showSettings = !showSettings"
+    >
+      <div class="flex items-center transition group-hover:text-primary h-8 min-w-0">
+        <ChevronDownIcon
+          :class="`w-4 ${showSettings ? '' : '-rotate-90'} transition mt-0`"
+        />
+        <div class="text-sm text-left truncate select-none">Settings</div>
+      </div>
+    </button>
+    <div v-show="showSettings" class="px-2">
+      <FormJsonForm
+        :schema="settingsJsonForms"
+        :data="data"
+        @change="onParamsFormChange"
+      ></FormJsonForm>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CardSetting, CardSettingValue } from '~/lib/models/card/setting'
+import { ChevronDownIcon } from '@heroicons/vue/20/solid'
+import type { JsonFormsChangeEvent } from '@jsonforms/vue'
+import { cloneDeep, omit } from 'lodash-es'
+import type { JsonSchema } from '@jsonforms/core'
+import { useHostAppStore } from '~/store/hostApp'
+
+const props = defineProps<{
+  settings?: CardSetting[]
+  expandable: boolean
+}>()
+
+const emit = defineEmits<{ (e: 'update:settings', value: CardSetting[]): void }>()
+
+const store = useHostAppStore()
+
+const defaultSendSettings = computed(() => store.sendSettings)
+const sendSettings = ref<CardSetting[] | undefined>(
+  cloneDeep(props.settings ?? defaultSendSettings.value) // need to prevent mutation!
+)
+
+const showSettings = ref(!props.expandable)
+
+const settingsJsonForms = computed(() => {
+  if (sendSettings.value === undefined) return {}
+  const obj: JsonSchema = { type: 'object', properties: {} }
+  sendSettings.value.forEach((setting: CardSetting) => {
+    const mappedSetting = omit({ ...setting, $id: setting.id }, ['id'])
+    if (obj && obj.properties) {
+      obj.properties[setting.id] = mappedSetting
+    }
+  })
+  return obj
+})
+
+type DataType = Record<string, unknown>
+const data = computed(() => {
+  const settingValues = {} as DataType
+  if (sendSettings.value) {
+    sendSettings.value.forEach((setting) => {
+      settingValues[setting.id as string] = setting.value
+    })
+  }
+  return settingValues
+})
+
+const onParamsFormChange = (e: JsonFormsChangeEvent) => {
+  if (sendSettings.value === undefined) return
+  sendSettings.value?.forEach((setting) => {
+    if (setting) {
+      if (setting.value !== (e.data as DataType)[setting.id]) {
+        setting.value = (e.data as DataType)[setting.id] as CardSettingValue
+      }
+    }
+  })
+  emit('update:settings', sendSettings.value)
+}
+</script>
diff --git a/packages/dui3/components/send/SettingsDialog.vue b/packages/dui3/components/send/SettingsDialog.vue
new file mode 100644
index 0000000000..ea5bb25343
--- /dev/null
+++ b/packages/dui3/components/send/SettingsDialog.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="p-0">
+    <slot name="activator" :toggle="toggleDialog"></slot>
+    <LayoutDialog
+      v-model:open="showSettingsDialog"
+      :title="`Settings`"
+      fullscreen="none"
+    >
+      <SendSettings
+        :expandable="false"
+        :settings="props.settings"
+        @update:settings="updateSettings"
+      ></SendSettings>
+      <div class="mt-4 flex justify-end items-center space-x-2">
+        <FormButton size="sm" color="outline" @click="showSettingsDialog = false">
+          Cancel
+        </FormButton>
+        <FormButton size="sm" @click="saveSettings()">Save</FormButton>
+      </div>
+    </LayoutDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useMixpanel } from '~/lib/core/composables/mixpanel'
+import { useHostAppStore } from '~/store/hostApp'
+import type { CardSetting } from '~/lib/models/card/setting'
+
+const { trackEvent } = useMixpanel()
+
+const props = defineProps<{
+  settings?: CardSetting[]
+  modelCardId: string
+}>()
+
+const store = useHostAppStore()
+
+const showSettingsDialog = ref(false)
+
+const toggleDialog = () => {
+  showSettingsDialog.value = !showSettingsDialog.value
+}
+
+let newSettings: CardSetting[]
+const updateSettings = (settings: CardSetting[]) => {
+  newSettings = settings
+}
+
+const saveSettings = async () => {
+  void trackEvent('DUI3 Action', {
+    name: 'Send Settings Updated'
+  })
+  await store.patchModel(props.modelCardId, {
+    settings: newSettings,
+    expired: true
+  })
+  showSettingsDialog.value = false
+}
+</script>
diff --git a/packages/dui3/components/send/Wizard.vue b/packages/dui3/components/send/Wizard.vue
new file mode 100644
index 0000000000..8f02a3c210
--- /dev/null
+++ b/packages/dui3/components/send/Wizard.vue
@@ -0,0 +1,186 @@
+<template>
+  <LayoutDialog
+    v-model:open="showSendDialog"
+    fullscreen="none"
+    @fully-closed="step = 1"
+  >
+    <template #header>
+      <div class="flex items-center space-x-2 mb-0">
+        <div
+          class="text-xs mt-[3px] font-normal bg-primary-muted text-foreground-2 rounded-full justify-center items-center flex px-2"
+        >
+          {{ step }}/3
+        </div>
+        <div v-if="step === 1" class="h5 font-bold">Select project</div>
+        <div v-if="step === 2" class="h5 font-bold">Select model</div>
+        <div v-if="step === 3" class="h5 font-bold">Select objects</div>
+      </div>
+      <!-- Step progress indicator: shows selected project and model -->
+      <div
+        v-if="selectedProject"
+        class="mt-2 absolute rounded-b-md shadow bg-foundation-2 h-10 w-full -ml-6 text-foreground-2 text-sm font-normal px-4 flex items-center min-w-0"
+      >
+        <button
+          v-tippy="'Change project'"
+          :class="`hover:text-primary transition truncate text-ellipsis max-w-32 min-w-0 ${
+            step === 1 ? 'text-primary font-bold' : ''
+          }`"
+          @click="step = 1"
+        >
+          {{ selectedProject ? selectedProject.name : 'No project' }}
+        </button>
+        <ChevronRightIcon v-if="selectedModel" class="w-4 mt-[2px]" />
+        <button
+          v-if="selectedModel"
+          v-tippy="'Change model'"
+          :class="`hover:text-primary transition truncate text-ellipsis max-w-32 min-w-0 ${
+            step === 2 ? 'text-primary font-bold' : ''
+          }`"
+          @click="step = 2"
+        >
+          {{ selectedModel ? selectedModel.name : 'No model' }}
+        </button>
+      </div>
+    </template>
+    <!-- Project selector wizard -->
+    <div v-if="step === 1">
+      <WizardProjectSelector
+        disable-no-write-access-projects
+        @next="selectProject"
+        @search-text-update="updateSearchText"
+      />
+    </div>
+    <!-- Model selector wizard -->
+    <div v-if="step === 2 && selectedProject && selectedAccountId" class="mt-10">
+      <WizardModelSelector
+        :project="selectedProject"
+        :account-id="selectedAccountId"
+        is-sender
+        @next="selectModel"
+      />
+    </div>
+    <!-- Version selector wizard -->
+    <div v-if="step === 3" class="mt-10">
+      <SendFiltersAndSettings
+        v-model="filter"
+        @update:filter="(f) => (filter = f)"
+        @update:settings="(s) => (settings = s)"
+      />
+      <div class="mt-2">
+        <FormButton full-width @click="addModel">Publish</FormButton>
+      </div>
+    </div>
+    <div v-if="urlParseError" class="p-2 text-xs text-danger">{{ urlParseError }}</div>
+  </LayoutDialog>
+</template>
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import type {
+  ModelListModelItemFragment,
+  ProjectListProjectItemFragment
+} from '~/lib/common/generated/gql/graphql'
+import type { ISendFilter } from '~/lib/models/card/send'
+import { SenderModelCard } from '~/lib/models/card/send'
+import { useHostAppStore } from '~/store/hostApp'
+import { useAccountStore } from '~/store/accounts'
+import { ChevronRightIcon } from '@heroicons/vue/24/solid'
+import { useMixpanel } from '~/lib/core/composables/mixpanel'
+import type { CardSetting } from '~/lib/models/card/setting'
+import { useAddByUrl } from '~/lib/core/composables/addByUrl'
+
+const { trackEvent } = useMixpanel()
+
+const showSendDialog = defineModel<boolean>({ default: false })
+
+const emit = defineEmits(['close'])
+
+const step = ref(1)
+const accountStore = useAccountStore()
+const { activeAccount } = storeToRefs(accountStore)
+
+const selectedAccountId = ref<string>(activeAccount.value?.accountInfo.id as string)
+const selectedProject = ref<ProjectListProjectItemFragment>()
+const selectedModel = ref<ModelListModelItemFragment>()
+const filter = ref<ISendFilter | undefined>(undefined)
+const settings = ref<CardSetting[] | undefined>(undefined)
+
+const { tryParseUrl, urlParsedData, urlParseError } = useAddByUrl()
+const updateSearchText = (text: string | undefined) => {
+  urlParseError.value = undefined
+  if (!text) return
+  tryParseUrl(text, 'sender')
+}
+
+watch(urlParsedData, (newVal) => {
+  if (!newVal) return
+  selectProject(newVal.account?.accountInfo.id, newVal.project)
+  selectModel(newVal.model)
+})
+
+const selectProject = (accountId: string, project: ProjectListProjectItemFragment) => {
+  step.value++
+  selectedAccountId.value = accountId
+  selectedProject.value = project
+  void trackEvent('DUI3 Action', { name: 'Publish Wizard', step: 'project selected' })
+}
+
+const selectModel = (model: ModelListModelItemFragment) => {
+  step.value++
+  selectedModel.value = model
+  void trackEvent('DUI3 Action', { name: 'Publish Wizard', step: 'model selected' })
+}
+
+// Clears data if going backwards in the wizard
+watch(step, (newVal, oldVal) => {
+  if (newVal > oldVal) {
+    return // exit fast on forward
+  }
+  if (newVal === 1) {
+    selectedProject.value = undefined
+    selectedModel.value = undefined
+  }
+  if (newVal === 2) selectedModel.value = undefined
+})
+
+const hostAppStore = useHostAppStore()
+
+// accountId, serverUrl, projectId, modelId, sendFilter, settings
+const addModel = async () => {
+  void trackEvent('DUI3 Action', {
+    name: 'Publish Wizard',
+    step: 'objects selected',
+    filter: filter.value?.typeDiscriminator
+  })
+
+  const existingModel = hostAppStore.models.find(
+    (m) =>
+      m.modelId === selectedModel.value?.id &&
+      m.typeDiscriminator.includes('SenderModelCard')
+  ) as SenderModelCard
+  if (existingModel) {
+    emit('close')
+    // Patch the existing model card with new send filter and non-expired state!
+    await hostAppStore.patchModel(existingModel.modelCardId, {
+      sendFilter: filter.value as ISendFilter,
+      expired: false
+    })
+    void hostAppStore.sendModel(existingModel.modelCardId, 'Wizard')
+    return
+  }
+
+  const model = new SenderModelCard()
+  model.accountId = selectedAccountId.value
+  model.serverUrl = activeAccount.value?.accountInfo.serverInfo.url as string
+  model.projectId = selectedProject.value?.id as string
+  model.modelId = selectedModel.value?.id as string
+  model.workspaceId = selectedProject.value?.workspaceId as string
+  model.sendFilter = filter.value as ISendFilter
+  model.sendFilter.idMap = {} // do not let it null from the beginning otherwise we will end up with null state on Revit...
+  model.settings = settings.value
+  model.expired = false
+
+  emit('close')
+  await hostAppStore.addModel(model)
+  void hostAppStore.sendModel(model.modelCardId, 'Wizard')
+}
+</script>
diff --git a/packages/dui3/components/singleton/ToastManager.vue b/packages/dui3/components/singleton/ToastManager.vue
new file mode 100644
index 0000000000..a01288ba92
--- /dev/null
+++ b/packages/dui3/components/singleton/ToastManager.vue
@@ -0,0 +1,9 @@
+<template>
+  <GlobalToastRenderer v-model:notification="hostAppStore.currentNotification" />
+</template>
+<script setup lang="ts">
+import { GlobalToastRenderer } from '@speckle/ui-components'
+import { useHostAppStore } from '~/store/hostApp'
+
+const hostAppStore = useHostAppStore()
+</script>
diff --git a/packages/dui3/components/user/Avatar.vue b/packages/dui3/components/user/Avatar.vue
index 9d623086e8..268e3f1ae8 100644
--- a/packages/dui3/components/user/Avatar.vue
+++ b/packages/dui3/components/user/Avatar.vue
@@ -29,10 +29,10 @@
 import { UserCircleIcon } from '@heroicons/vue/20/solid'
 type UserAvatar = {
   name: string
-  avatar?: string
+  avatar?: string | null | undefined
 }
 
-export type UserAvatarSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'editable'
+type UserAvatarSize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | 'editable'
 
 const props = withDefaults(
   defineProps<{
diff --git a/packages/dui3/components/wizard/ModelSelector.vue b/packages/dui3/components/wizard/ModelSelector.vue
new file mode 100644
index 0000000000..fdea668e70
--- /dev/null
+++ b/packages/dui3/components/wizard/ModelSelector.vue
@@ -0,0 +1,282 @@
+<template>
+  <div class="space-y-2">
+    <div class="space-y-2">
+      <div
+        class="flex items-center space-x-2 justify-between sticky top-4 bg-foundation z-10 py-2 border-b"
+      >
+        <FormTextInput
+          v-model="searchText"
+          :placeholder="
+            totalCount === 0 ? 'New model name' : 'Search models in ' + project.name
+          "
+          name="search"
+          autocomplete="off"
+          :show-clear="!!searchText"
+          full-width
+          size="lg"
+          color="foundation"
+        />
+        <FormButton
+          v-if="showNewModel"
+          v-tippy="'New model'"
+          @click="showNewModelDialog = true"
+        >
+          <PlusIcon class="w-4" />
+        </FormButton>
+      </div>
+      <div class="relative grid grid-cols-1 gap-2">
+        <CommonLoadingBar v-if="loading" loading />
+
+        <WizardListModelCard
+          v-for="model in models"
+          :key="model.id"
+          :model="model"
+          @click="handleModelSelect(model)"
+        />
+
+        <LayoutDialog
+          v-model:open="showSelectionHasProblemsDialog"
+          title="Warning"
+          fullscreen="none"
+        >
+          <div class="mx-1">
+            <p v-if="hasNonZeroVersionsProblem" class="mb-2 text-sm">
+              <ExclamationTriangleIcon class="w-4 in inline text-orange-500" />
+              The model you selected contains versions coming from
+              <b>other files/apps</b>
+              .
+            </p>
+            <p v-if="existingModelProblem" class="mb-2 text-sm">
+              <ExclamationTriangleIcon class="w-4 in inline text-orange-500" />
+              <b>{{ ` ${existingModelName}` }}</b>
+              is already being used to
+              <b>{{ isSender ? 'publish,' : 'load,' }}</b>
+              you could consider using the existing one.
+            </p>
+            <p class="mb-2 text-sm">Are you sure you want to proceed?</p>
+          </div>
+          <template #buttons>
+            <FormButton
+              full-width
+              size="sm"
+              text
+              @click="showSelectionHasProblemsDialog = false"
+            >
+              Cancel
+            </FormButton>
+            <FormButton full-width size="sm" @click="confirmModelSelection()">
+              Yes
+            </FormButton>
+          </template>
+        </LayoutDialog>
+
+        <FormButton
+          v-if="searchText && hasReachedEnd && showNewModel"
+          full-width
+          @click="createNewModel(searchText)"
+        >
+          Create&nbsp;
+          <div class="truncate">"{{ searchText }}"</div>
+        </FormButton>
+        <FormButton
+          v-else
+          color="outline"
+          full-width
+          :disabled="hasReachedEnd"
+          @click="loadMore"
+        >
+          {{ hasReachedEnd ? 'No more models found' : 'Load older models' }}
+        </FormButton>
+      </div>
+    </div>
+    <LayoutDialog
+      v-model:open="showNewModelDialog"
+      title="Create new model"
+      fullscreen="none"
+    >
+      <form @submit="onSubmit">
+        <FormTextInput
+          v-model="newModelName"
+          :rules="rules"
+          placeholder="West facade, Level 1 layout..."
+          name="name"
+          color="foundation"
+          :show-clear="!!newModelName"
+          full-width
+          autocomplete="off"
+          size="lg"
+        />
+        <div class="mt-4 flex justify-center items-center space-x-2">
+          <FormButton text @click="showNewModelDialog = false">Cancel</FormButton>
+          <FormButton submit>Create</FormButton>
+        </div>
+      </form>
+    </LayoutDialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { PlusIcon, ExclamationTriangleIcon } from '@heroicons/vue/20/solid'
+import { provideApolloClient, useMutation, useQuery } from '@vue/apollo-composable'
+import type {
+  ProjectListProjectItemFragment,
+  ModelListModelItemFragment
+} from '~/lib/common/generated/gql/graphql'
+import { useModelNameValidationRules } from '~/lib/validation'
+import {
+  createModelMutation,
+  projectModelsQuery
+} from '~/lib/graphql/mutationsAndQueries'
+import { useForm } from 'vee-validate'
+import type { DUIAccount } from '~/store/accounts'
+import { useAccountStore } from '~/store/accounts'
+import { useHostAppStore } from '~/store/hostApp'
+import { useMixpanel } from '~/lib/core/composables/mixpanel'
+
+const { trackEvent } = useMixpanel()
+const hostAppStore = useHostAppStore()
+
+const emit = defineEmits<{
+  (e: 'next', model: ModelListModelItemFragment): void
+}>()
+
+const props = withDefaults(
+  defineProps<{
+    project: ProjectListProjectItemFragment
+    accountId: string
+    showNewModel?: boolean
+    isSender?: boolean
+  }>(),
+  { showNewModel: true, isSender: false }
+)
+
+const accountStore = useAccountStore()
+
+const showNewModelDialog = ref(false)
+const showSelectionHasProblemsDialog = ref(false)
+
+const searchText = ref<string>()
+const newModelName = ref<string>()
+
+watch(searchText, () => (newModelName.value = searchText.value))
+
+let selectedModel: ModelListModelItemFragment | undefined = undefined
+const existingModelProblem = ref(false)
+const existingModelName = ref<string | undefined>(undefined)
+const hasNonZeroVersionsProblem = ref(false)
+const handleModelSelect = (model: ModelListModelItemFragment) => {
+  const existingModel = hostAppStore.models.find((m) => m.modelId === model.id)
+  existingModelProblem.value = !!existingModel
+  if (existingModelProblem.value) {
+    existingModelName.value = model.name
+  }
+  hasNonZeroVersionsProblem.value =
+    model.versions.totalCount !== 0 && props.showNewModel // NOTE: we're using the showNewModel prop as a giveaway of whether we're in the send wizard - we do not need this extra check in the receive wizard
+
+  if (!existingModelProblem.value && !hasNonZeroVersionsProblem.value) {
+    return emit('next', model)
+  }
+  selectedModel = model
+  showSelectionHasProblemsDialog.value = true
+}
+
+const confirmModelSelection = () => {
+  existingModelProblem.value = false
+  hasNonZeroVersionsProblem.value = false
+  emit('next', selectedModel as ModelListModelItemFragment)
+}
+
+const rules = useModelNameValidationRules()
+const { handleSubmit } = useForm<{ name: string }>()
+const onSubmit = handleSubmit(() => {
+  // TODO: Chat with Fabians
+  // This works, but if we use handleSubmit(args) > args.name -> it is undefined in Production on netlify, but works fine on local dev
+  void createNewModel(newModelName.value as string)
+})
+
+const createNewModel = async (name: string) => {
+  const account = accountStore.accounts.find(
+    (acc) => acc.accountInfo.id === props.accountId
+  ) as DUIAccount
+
+  void trackEvent('DUI3 Action', { name: 'Model Create' }, account.accountInfo.id)
+
+  const { mutate } = provideApolloClient(account.client)(() =>
+    useMutation(createModelMutation)
+  )
+  const res = await mutate({ input: { projectId: props.project.id, name } })
+  if (res?.data?.modelMutations.create) {
+    refetch() // Sorts the list with newly created model otherwise it will put the model at the bottom.
+    emit('next', res?.data?.modelMutations.create)
+  } else {
+    // TODO: Error out
+  }
+}
+
+const {
+  result: projectModelsResult,
+  loading,
+  fetchMore,
+  refetch
+} = useQuery(
+  projectModelsQuery,
+  () => ({
+    projectId: props.project.id,
+    limit: 10,
+    filter: {
+      search: (searchText.value || '').trim() || null
+    }
+  }),
+  () => ({ clientId: props.accountId, debounce: 500, fetchPolicy: 'cache-and-network' })
+)
+
+const models = computed(() => projectModelsResult.value?.project.models.items)
+const totalCount = computed(() => projectModelsResult.value?.project.models.totalCount)
+const hasReachedEnd = ref(false)
+
+watch(projectModelsResult, (newVal) => {
+  if (
+    newVal &&
+    newVal?.project.models.items.length >= newVal?.project.models.totalCount
+  ) {
+    hasReachedEnd.value = true
+  } else {
+    hasReachedEnd.value = false
+  }
+})
+
+const loadMore = () => {
+  fetchMore({
+    variables: { cursor: projectModelsResult.value?.project.models.cursor },
+    updateQuery: (previousResult, { fetchMoreResult }) => {
+      if (!fetchMoreResult || fetchMoreResult.project.models.items.length === 0) {
+        hasReachedEnd.value = true
+        return previousResult
+      }
+
+      if (
+        previousResult.project.models.items.length +
+          fetchMoreResult.project.models.items.length >=
+        fetchMoreResult.project.models.totalCount
+      ) {
+        hasReachedEnd.value = true
+      }
+
+      return {
+        project: {
+          id: previousResult.project.id,
+          __typename: previousResult.project.__typename,
+          models: {
+            __typename: previousResult.project.models.__typename,
+            totalCount: previousResult.project.models.totalCount,
+            cursor: fetchMoreResult.project.models.cursor,
+            items: [
+              ...previousResult.project.models.items,
+              ...fetchMoreResult.project.models.items
+            ]
+          }
+        }
+      }
+    }
+  })
+}
+</script>
diff --git a/packages/dui3/components/wizard/ProjectSelector.vue b/packages/dui3/components/wizard/ProjectSelector.vue
new file mode 100644
index 0000000000..93e4ecf974
--- /dev/null
+++ b/packages/dui3/components/wizard/ProjectSelector.vue
@@ -0,0 +1,296 @@
+<template>
+  <div class="space-y-2">
+    <div class="flex items-center space-x-2"></div>
+    <div class="space-y-2 relative">
+      <div class="sticky -top-4 bg-foundation z-10 py-2 border-b space-y-2">
+        <div class="flex items-center space-x-2 justify-between">
+          <FormTextInput
+            v-model="searchText"
+            placeholder="Search your projects"
+            name="search"
+            autocomplete="off"
+            :show-clear="!!searchText"
+            full-width
+            size="lg"
+            color="foundation"
+          />
+          <FormButton
+            v-if="showNewProject"
+            v-tippy="'New project'"
+            @click="showNewProjectDialog = true"
+          >
+            <PlusIcon class="w-4" />
+          </FormButton>
+          <div class="mt-1">
+            <AccountsMenu
+              :current-selected-account-id="accountId"
+              @select="(e) => selectAccount(e)"
+            />
+          </div>
+        </div>
+        <CommonLoadingBar v-if="loading" loading />
+      </div>
+      <div class="grid grid-cols-1 gap-2 relative z-0">
+        <WizardListProjectCard
+          v-for="project in projects"
+          :key="project.id"
+          :project="project"
+          :disable-no-write-access-projects="disableNoWriteAccessProjects"
+          @click="handleProjectCardClick(project)"
+        />
+        <FormButton
+          v-if="searchText && hasReachedEnd && showNewProject"
+          full-width
+          @click="createNewProject(searchText)"
+        >
+          Create&nbsp;
+          <div class="truncate">"{{ searchText }}"</div>
+        </FormButton>
+        <FormButton
+          v-else
+          full-width
+          :disabled="hasReachedEnd"
+          color="outline"
+          @click="loadMore"
+        >
+          {{ hasReachedEnd ? 'No more projects found' : 'Load older projects' }}
+        </FormButton>
+      </div>
+    </div>
+    <LayoutDialog
+      v-model:open="showNewProjectDialog"
+      title="Create new project"
+      fullscreen="none"
+    >
+      <form @submit="onSubmitCreateNewProject">
+        <FormTextInput
+          v-model="newProjectName"
+          class="mb-4"
+          placeholder="A Beautiful Home, A Small Bridge..."
+          autocomplete="off"
+          name="name"
+          label="Project name"
+          show-label
+          color="foundation"
+          :show-clear="!!newProjectName"
+          :rules="[
+            ValidationHelpers.isRequired,
+            ValidationHelpers.isStringOfLength({ minLength: 3 })
+          ]"
+          full-width
+        />
+        <WizardWorkspaceSelector
+          v-if="workspacesEnabled"
+          @update:selected-workspace-id="(newSelectedWorkspace : WorkspaceListWorkspaceItemFragment) => (selectedWorkspace = newSelectedWorkspace)"
+        ></WizardWorkspaceSelector>
+        <div class="mt-4 flex justify-center items-center space-x-2">
+          <FormButton text @click="showNewProjectDialog = false">Cancel</FormButton>
+          <FormButton submit>Create</FormButton>
+        </div>
+      </form>
+    </LayoutDialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { PlusIcon } from '@heroicons/vue/20/solid'
+import type { DUIAccount } from '~/store/accounts'
+import { useAccountStore } from '~/store/accounts'
+import {
+  createProjectInWorkspaceMutation,
+  createProjectMutation,
+  projectsListQuery,
+  serverInfoQuery
+} from '~/lib/graphql/mutationsAndQueries'
+import { useMutation, useQuery, provideApolloClient } from '@vue/apollo-composable'
+import type {
+  ProjectListProjectItemFragment,
+  WorkspaceListWorkspaceItemFragment
+} from 'lib/common/generated/gql/graphql'
+import { useForm } from 'vee-validate'
+import { ValidationHelpers } from '@speckle/ui-components'
+import { useMixpanel } from '~/lib/core/composables/mixpanel'
+
+const { trackEvent } = useMixpanel()
+
+const emit = defineEmits<{
+  (e: 'next', accountId: string, project: ProjectListProjectItemFragment): void
+  (e: 'search-text-update', text: string | undefined): void
+}>()
+
+const props = withDefaults(
+  defineProps<{
+    showNewProject?: boolean
+    /**
+     * For the send wizard - not allowing selecting projects we can't write to.
+     */
+    disableNoWriteAccessProjects?: boolean
+  }>(),
+  { showNewProject: true, disableNoWriteAccessProjects: false }
+)
+
+const selectedWorkspace = ref<WorkspaceListWorkspaceItemFragment>()
+
+const searchText = ref<string>()
+const newProjectName = ref<string>()
+
+const showNewProjectDialog = ref(false)
+const accountStore = useAccountStore()
+const { activeAccount } = storeToRefs(accountStore)
+
+const accountId = computed(() => activeAccount.value.accountInfo.id)
+const selectedAccountId = ref<string>()
+
+watch(searchText, () => {
+  newProjectName.value = searchText.value
+  emit('search-text-update', searchText.value)
+})
+
+// TODO: this function is never triggered!! remove or evaluate
+const selectAccount = (account: DUIAccount) => {
+  selectedAccountId.value = account.accountInfo.id
+  void trackEvent('DUI3 Action', { name: 'Account Select' }, account.accountInfo.id)
+}
+
+const { handleSubmit } = useForm<{ name: string }>()
+const onSubmitCreateNewProject = handleSubmit(() => {
+  // TODO: Chat with Fabians
+  // This works, but if we use handleSubmit(args) > args.name -> it is undefined in Production on netlify, but works fine on local dev
+  void createNewProject(newProjectName.value as string)
+})
+
+const handleProjectCardClick = (project: ProjectListProjectItemFragment) => {
+  // TODO: error
+  if (
+    props.disableNoWriteAccessProjects &&
+    (!project.role || project.role === 'stream:reviewer')
+  ) {
+    return
+  }
+  emit('next', accountId.value, project)
+}
+
+const account = computed(() => {
+  return accountStore.accounts.find(
+    (acc) => acc.accountInfo.id === accountId.value
+  ) as DUIAccount
+})
+
+const createNewProject = async (name: string) => {
+  if (selectedWorkspace.value) {
+    return createNewProjectInWorkspace(name)
+  }
+
+  void trackEvent(
+    'DUI3 Action',
+    { name: 'Project Create', workspace: false },
+    account.value.accountInfo.id
+  )
+  const { mutate } = provideApolloClient(account.value.client)(() =>
+    useMutation(createProjectMutation)
+  )
+  const res = await mutate({ input: { name } })
+  if (res?.data?.projectMutations.create) {
+    refetch() // Sorts the list with newly created project otherwise it will put the project at the bottom.
+    emit('next', accountId.value, res?.data?.projectMutations.create)
+  } else {
+    // TODO: Error out
+  }
+}
+
+const createNewProjectInWorkspace = async (name: string) => {
+  void trackEvent(
+    'DUI3 Action',
+    { name: 'Project Create', workspace: true },
+    account.value.accountInfo.id
+  )
+  const { mutate } = provideApolloClient(account.value.client)(() =>
+    useMutation(createProjectInWorkspaceMutation)
+  )
+  const res = await mutate({
+    input: { name, workspaceId: selectedWorkspace.value?.id as string }
+  })
+  if (res?.data?.workspaceMutations.projects.create) {
+    refetch() // Sorts the list with newly created project otherwise it will put the project at the bottom.
+    emit('next', accountId.value, res?.data?.workspaceMutations.projects.create)
+  } else {
+    // TODO: Error out
+  }
+}
+
+const { result: serverInfoResult } = useQuery(
+  serverInfoQuery,
+  () => ({}),
+  () => ({ clientId: accountId.value, debounce: 500, fetchPolicy: 'network-only' })
+)
+
+const workspacesEnabled = computed(
+  () => serverInfoResult.value?.serverInfo.workspaces.workspacesEnabled
+)
+
+const {
+  result: projectsResult,
+  loading,
+  fetchMore,
+  refetch
+} = useQuery(
+  projectsListQuery,
+  () => ({
+    limit: 5,
+    filter: {
+      search: (searchText.value || '').trim() || null
+    }
+  }),
+  () => ({ clientId: accountId.value, debounce: 500, fetchPolicy: 'network-only' })
+)
+
+const projects = computed(() => projectsResult.value?.activeUser?.projects.items)
+const hasReachedEnd = ref(false)
+
+watch(searchText, () => {
+  hasReachedEnd.value = false
+})
+
+watch(projectsResult, (newVal) => {
+  if (
+    newVal &&
+    newVal.activeUser &&
+    newVal?.activeUser?.projects.items.length >= newVal?.activeUser?.projects.totalCount
+  ) {
+    hasReachedEnd.value = true
+  } else {
+    hasReachedEnd.value = false
+  }
+})
+
+const loadMore = () => {
+  fetchMore({
+    variables: { cursor: projectsResult.value?.activeUser?.projects.cursor },
+    updateQuery: (previousResult, { fetchMoreResult }) => {
+      if (!fetchMoreResult || fetchMoreResult.activeUser?.projects.items.length === 0) {
+        hasReachedEnd.value = true
+        return previousResult
+      }
+
+      if (!previousResult.activeUser || !fetchMoreResult.activeUser)
+        return previousResult
+
+      return {
+        activeUser: {
+          id: previousResult.activeUser?.id,
+          __typename: previousResult.activeUser?.__typename,
+          projects: {
+            __typename: previousResult.activeUser?.projects.__typename,
+            cursor: fetchMoreResult?.activeUser?.projects.cursor,
+            totalCount: fetchMoreResult?.activeUser?.projects.totalCount,
+            items: [
+              ...previousResult.activeUser.projects.items,
+              ...fetchMoreResult.activeUser.projects.items
+            ]
+          }
+        }
+      }
+    }
+  })
+}
+</script>
diff --git a/packages/dui3/components/wizard/VersionSelector.vue b/packages/dui3/components/wizard/VersionSelector.vue
new file mode 100644
index 0000000000..c8b1c666d6
--- /dev/null
+++ b/packages/dui3/components/wizard/VersionSelector.vue
@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <div class="space-y-4">
+      <div
+        v-if="latestVersion"
+        class="grid grid-cols-2 gap-3 max-[475px]:grid-cols-1 mb-4"
+      >
+        <WizardListVersionCard
+          v-for="(version, index) in versions"
+          :key="version.id"
+          :version="version"
+          :index="index"
+          :latest-version-id="latestVersion.id"
+          :selected-version-id="selectedVersionId"
+          :project-id="projectId"
+          :referenced-object-id="version.referencedObject"
+          :from-wizard="fromWizard"
+          :account-id="accountId"
+          @click="$emit('next', version, latestVersion)"
+        />
+      </div>
+      <CommonLoadingBar v-if="loading" loading />
+      <FormButton color="invert" full-width :disabled="hasReachedEnd" @click="loadMore">
+        {{ hasReachedEnd ? 'No older versions' : 'Show older versions' }}
+      </FormButton>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useQuery } from '@vue/apollo-composable'
+import { modelVersionsQuery } from '~/lib/graphql/mutationsAndQueries'
+import type { VersionListItemFragment } from '~/lib/common/generated/gql/graphql'
+
+defineEmits<{
+  (
+    e: 'next',
+    version: VersionListItemFragment,
+    latestVersion: VersionListItemFragment
+  ): void
+}>()
+
+const props = defineProps<{
+  accountId: string
+  projectId: string
+  modelId: string
+  selectedVersionId?: string
+  fromWizard?: boolean
+}>()
+
+const {
+  result: modelVersionResults,
+  loading,
+  fetchMore,
+  refetch
+} = useQuery(
+  modelVersionsQuery,
+  () => {
+    const payload = {
+      projectId: props.projectId,
+      modelId: props.modelId,
+      limit: 5,
+      filter: props.selectedVersionId
+        ? { priorityIds: [props.selectedVersionId] }
+        : undefined
+    }
+
+    return payload
+  },
+  () => ({ clientId: props.accountId, fetchPolicy: 'cache-and-network' })
+)
+
+const versions = computed(() => modelVersionResults.value?.project.model.versions.items)
+
+const hasReachedEnd = ref(false)
+
+const latestVersion = computed(() => {
+  if (!versions.value) return
+  const sorted = [...versions.value].sort(
+    (a, b) => Date.parse(b.createdAt) - Date.parse(a.createdAt)
+  )
+  return sorted[0]
+})
+
+const loadMore = () => {
+  fetchMore({
+    variables: { cursor: modelVersionResults.value?.project.model.versions.cursor },
+    updateQuery: (previousResult, { fetchMoreResult }) => {
+      if (
+        !fetchMoreResult ||
+        fetchMoreResult.project.model.versions.items.length === 0
+      ) {
+        hasReachedEnd.value = true
+        return previousResult
+      }
+      return {
+        project: {
+          id: previousResult.project.id,
+          __typename: previousResult.project.__typename,
+          model: {
+            id: previousResult.project.model.id,
+            __typename: previousResult.project.model.__typename,
+            versions: {
+              __typename: previousResult.project.model.versions.__typename,
+              totalCount: previousResult.project.model.versions.totalCount,
+              cursor: fetchMoreResult?.project.model.versions.cursor,
+              items: [
+                ...previousResult.project.model.versions.items,
+                ...fetchMoreResult.project.model.versions.items
+              ]
+            }
+          }
+        }
+      }
+    }
+  })
+}
+
+onMounted(() => {
+  refetch()
+})
+</script>
diff --git a/packages/dui3/components/wizard/WorkspaceSelector.vue b/packages/dui3/components/wizard/WorkspaceSelector.vue
new file mode 100644
index 0000000000..4b3842082d
--- /dev/null
+++ b/packages/dui3/components/wizard/WorkspaceSelector.vue
@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <FormSelectBase
+      key="name"
+      v-model="selectedWorkspace"
+      clearable
+      label="Workspaces"
+      placeholder="Nothing selected"
+      name="Workspaces"
+      show-label
+      :items="workspaces"
+      :disabled-item-predicate="userCantCreateWorkspace"
+      mount-menu-on-body
+      @click="emit('update:selectedWorkspace', selectedWorkspace)"
+    >
+      <template #something-selected="{ value }">
+        <span>{{ value.name }}</span>
+      </template>
+      <template #option="{ item }">
+        <div
+          v-tippy="{
+            content: item.readOnly
+              ? 'This workspace is read-only.'
+              : item.role === 'workspace:guest'
+              ? 'You do not have write access on this workspace.'
+              : undefined,
+            disabled: !(item.readOnly || item.role === 'workspace:guest')
+          }"
+          class="flex items-center"
+        >
+          <span class="truncate">{{ item.name }}</span>
+        </div>
+      </template>
+    </FormSelectBase>
+    <div
+      v-if="selectedWorkspace"
+      class="text-xs caption rounded p-2 bg-blue-500/10 my-2"
+    >
+      Project will be created in the selected workspace.
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useQuery } from '@vue/apollo-composable'
+import { workspacesListQuery } from '~/lib/graphql/mutationsAndQueries'
+import type { WorkspaceListWorkspaceItemFragment } from 'lib/common/generated/gql/graphql'
+import { storeToRefs } from 'pinia'
+import { useAccountStore } from '~/store/accounts'
+
+const emit = defineEmits<{
+  (
+    e: 'update:selectedWorkspace',
+    value: WorkspaceListWorkspaceItemFragment | undefined
+  ): void
+}>()
+
+const accountStore = useAccountStore()
+const { activeAccount } = storeToRefs(accountStore)
+const accountId = computed(() => activeAccount.value.accountInfo.id)
+
+const searchText = ref<string>()
+
+const { result: workspacesResult } = useQuery(
+  workspacesListQuery,
+  () => ({
+    limit: 5,
+    filter: {
+      search: (searchText.value || '').trim() || null
+    }
+  }),
+  () => ({ clientId: accountId.value, debounce: 500, fetchPolicy: 'network-only' })
+)
+
+const workspaces = computed(() => workspacesResult.value?.activeUser?.workspaces.items)
+const selectedWorkspace = ref<WorkspaceListWorkspaceItemFragment>()
+
+// Utility function to check if the user cannot create a workspace
+const userCantCreateWorkspace = (item: WorkspaceListWorkspaceItemFragment) =>
+  (!!item?.role && item.role === 'workspace:guest') || !!item.readOnly
+</script>
diff --git a/packages/dui3/components/wizard/list/ModelCard.vue b/packages/dui3/components/wizard/list/ModelCard.vue
new file mode 100644
index 0000000000..ad284b2673
--- /dev/null
+++ b/packages/dui3/components/wizard/list/ModelCard.vue
@@ -0,0 +1,84 @@
+<template>
+  <button
+    class="group text-left relative bg-foundation-2 rounded p-2 hover:text-primary hover:bg-primary-muted transition cursor-pointer hover:shadow-md"
+  >
+    <div class="flex items-center space-x-4">
+      <div class="max-[275px]:hidden">
+        <div v-if="model.previewUrl" class="h-12 w-12">
+          <img
+            :src="model.previewUrl"
+            alt="preview image for model"
+            class="h-12 w-12 object-cover"
+          />
+        </div>
+        <div
+          v-else
+          class="h-12 w-12 bg-blue-500/10 rounded flex items-center justify-center"
+        >
+          <CubeTransparentIcon class="w-5 h-5 text-foreground-2" />
+        </div>
+      </div>
+      <div class="min-w-0 w-full">
+        <div class="caption text-foreground-2 truncate" :title="model.name">
+          {{ folderPath }}
+        </div>
+
+        <div class="flex items-center justify-around space-x-2">
+          <div class="font-bold grow truncate text-ellipsis">
+            {{ model.displayName }}
+          </div>
+        </div>
+
+        <div class="caption text-foreground-2 truncate flex space-x-2">
+          <div>updated {{ updatedAgo }}</div>
+        </div>
+      </div>
+      <div class="space-y-2">
+        <div class="bg-neutral-500/10 rounded-full px-1 text-xs truncate shrink">
+          {{ model.versions.totalCount }} versions
+        </div>
+        <div class="text-right">
+          <SourceAppBadge v-if="sourceApp" :source-app="sourceApp" />
+        </div>
+      </div>
+    </div>
+  </button>
+</template>
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import { CubeTransparentIcon } from '@heroicons/vue/20/solid'
+import type { SourceAppName } from '@speckle/shared'
+import { SourceApps } from '@speckle/shared'
+import type { ModelListModelItemFragment } from '~/lib/common/generated/gql/graphql'
+
+const props = defineProps<{
+  model: ModelListModelItemFragment
+}>()
+
+const folderPath = computed(() => {
+  const splitName = props.model.name.split('/')
+  if (splitName.length === 1) return ' '
+  const withoutLast = splitName.slice(0, -1)
+  return withoutLast.join('/')
+})
+
+const updatedAgo = computed(() => {
+  return dayjs(props.model.updatedAt).from(dayjs())
+})
+
+const sourceApp = computed(() => {
+  if (props.model.versions.items.length === 0) return
+  const version = props.model.versions.items[0]
+
+  return (
+    SourceApps.find((sapp) =>
+      version.sourceApplication?.toLowerCase()?.includes(sapp.searchKey.toLowerCase())
+    ) || {
+      searchKey: '',
+      name: version.sourceApplication as SourceAppName,
+      short: version.sourceApplication?.substring(0, 3) as string,
+      bgColor: '#000'
+    }
+  )
+})
+</script>
diff --git a/packages/dui3/components/wizard/list/ProjectCard.vue b/packages/dui3/components/wizard/list/ProjectCard.vue
new file mode 100644
index 0000000000..6807bafd0f
--- /dev/null
+++ b/packages/dui3/components/wizard/list/ProjectCard.vue
@@ -0,0 +1,40 @@
+<template>
+  <div
+    v-tippy="disabled ? 'You do not have write access to this project.' : ''"
+    :class="`group relative bg-foundation-2 rounded p-2  transition ${
+      disabled
+        ? 'cursor-not-allowed italic bg-neutral-500/5'
+        : 'cursor-pointer hover:text-primary hover:bg-primary-muted hover:shadow-md'
+    } `"
+  >
+    <div
+      :class="`font-bold text-ellipsis truncate ${disabled ? 'text-foreground-2' : ''}`"
+    >
+      {{ project.name }}
+    </div>
+    <div class="caption text-foreground-2">{{ project.role?.split(':')[1] }}</div>
+    <div class="caption text-foreground-2">updated {{ updatedAgo }}</div>
+  </div>
+</template>
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import type { ProjectListProjectItemFragment } from '~/lib/common/generated/gql/graphql'
+const props = withDefaults(
+  defineProps<{
+    project: ProjectListProjectItemFragment
+    disableNoWriteAccessProjects?: boolean
+  }>(),
+  { disableNoWriteAccessProjects: false }
+)
+
+const updatedAgo = computed(() => {
+  return dayjs(props.project.updatedAt).from(dayjs())
+})
+
+const disabled = computed(() => {
+  return (
+    props.disableNoWriteAccessProjects &&
+    (!props.project.role || props.project.role === 'stream:reviewer')
+  )
+})
+</script>
diff --git a/packages/dui3/components/wizard/list/VersionCard.vue b/packages/dui3/components/wizard/list/VersionCard.vue
new file mode 100644
index 0000000000..d4b9beb51e
--- /dev/null
+++ b/packages/dui3/components/wizard/list/VersionCard.vue
@@ -0,0 +1,125 @@
+<template>
+  <button
+    :class="`block text-left shadow rounded-md bg-foundation-2 hover:bg-primary-muted overflow-hidden transition ${
+      index === 0 || (latestVersionId === version.id && !fromWizard)
+        ? 'outline outline-2 outline-primary'
+        : ''
+    }`"
+    :disabled="selectedVersionId === version.id && !fromWizard"
+  >
+    <div class="mb-2">
+      <img :src="version.previewUrl" alt="version preview" />
+    </div>
+    <div class="mt-1 p-2 border-t dark:border-gray-700">
+      <div class="flex space-x-2 items-center min-w-0">
+        <UserAvatar :user="version.authorUser" size="sm" />
+        <SourceAppBadge
+          :source-app="
+                SourceApps.find((sapp) =>
+                  version.sourceApplication?.toLowerCase()?.includes(sapp.searchKey.toLowerCase())
+                ) || {
+                  searchKey: '',
+                  name: version.sourceApplication as SourceAppName,
+                  short: version.sourceApplication?.substring(0, 3) as string,
+                  bgColor: '#000'
+                }
+              "
+        />
+        <span class="text-xs truncate">Created {{ createdAgo }}</span>
+      </div>
+      <div class="text-xs text-foreground-2 mt-1 line-clamp-1 hover:line-clamp-5">
+        <span>
+          {{ version.message || 'No message' }}
+        </span>
+      </div>
+    </div>
+    <div
+      v-if="latestVersionId === version.id && selectedVersionId !== latestVersionId"
+      class="w-full py-1 flex items-center text-xs justify-center bg-primary text-foreground-on-primary font-semibold"
+    >
+      Load latest version
+    </div>
+    <div
+      v-if="selectedVersionId === version.id"
+      class="w-full py-1 flex items-center text-xs justify-center bg-primary-muted text-primary font-semibold"
+    >
+      <span v-if="!fromWizard">
+        Currently loaded version {{ latestVersionId === version.id ? '(latest)' : '' }}
+      </span>
+      <span v-else>Load this version</span>
+    </div>
+    <!-- Warning if obj is coming from the v2 side -->
+    <!-- <div v-if="!objectVersion" class="bottom-0 left-0">
+      <div
+        class="text-body-2xs px-2 bg-blue-500/5 py-2 text-foreground-2 flex items-center space-x-1 justify-center"
+      >
+        <div>Compatibility warning:</div>
+        <FormButton size="sm" text @click.stop="showCompatWarning = true">
+          read more
+        </FormButton>
+        <LayoutDialog
+          v-model:open="showCompatWarning"
+          title="Compatibility warning"
+          fullscreen="none"
+        >
+          This version might not receive as expected.
+          <br />
+          <br />
+          As we progress with the new Speckle, there are a few things that won’t work as
+          expected. We recommend you send this model again using next connectors if
+          available.
+          <br />
+          <br />
+          We will do our best to convert, but, for example, Instances (Blocks), Render
+          Materials, Parameters and others will not work from the previous version of
+          the connectors.
+          <div class="mt-4 flex justify-end items-center space-x-2">
+            <FormButton size="sm" @click="showCompatWarning = false">
+              Understood
+            </FormButton>
+          </div>
+        </LayoutDialog>
+      </div>
+    </div> -->
+  </button>
+</template>
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import type { SourceAppName } from '@speckle/shared'
+import { SourceApps } from '@speckle/shared'
+import type { VersionListItemFragment } from '~/lib/common/generated/gql/graphql'
+// import { objectQuery } from '~/lib/graphql/mutationsAndQueries'
+// import { useQuery } from '@vue/apollo-composable'
+
+const props = defineProps<{
+  version: VersionListItemFragment
+  index: number
+  latestVersionId: string
+  accountId: string
+  projectId: string
+  referencedObjectId: string
+  selectedVersionId?: string
+  fromWizard?: boolean
+}>()
+
+const createdAgo = computed(() => {
+  return dayjs(props.version.createdAt).from(dayjs())
+})
+
+// NOTE!!!: This logic somehow caused regression on versionList fetchMore, but we do not know exactly why yet.
+// const { result: objectQueryResult } = useQuery(
+//   objectQuery,
+//   () => ({ projectId: props.projectId, objectId: props.referencedObjectId }),
+//   () => ({ clientId: props.accountId })
+// )
+
+// type Data = {
+//   version?: number
+// }
+// const objectVersion = computed(() => {
+//   const data = objectQueryResult.value?.project?.object?.data as Data | undefined
+//   return data?.version
+// })
+
+// const showCompatWarning = ref(false)
+</script>
diff --git a/packages/dui3/layouts/default.vue b/packages/dui3/layouts/default.vue
index 47180542b8..000f9bbf2e 100644
--- a/packages/dui3/layouts/default.vue
+++ b/packages/dui3/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="min-h-full">
+  <div class="relative min-h-screen flex flex-col">
     <HeaderNavBar />
-    <main class="px-1 pb-4 mt-16">
+    <main class="flex-1 mt-10 px-1 max-[275px]:px-0">
       <slot />
     </main>
   </div>
diff --git a/packages/dui3/lib/accounts/composables/setup.ts b/packages/dui3/lib/accounts/composables/setup.ts
deleted file mode 100644
index b40ec36701..0000000000
--- a/packages/dui3/lib/accounts/composables/setup.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-import { ApolloClient, gql } from '@apollo/client/core'
-import { ApolloClients } from '@vue/apollo-composable'
-import type { ComputedRef, Ref } from 'vue'
-import type { Account } from '~/lib/bindings/definitions/IBasicConnectorBinding'
-import { resolveClientConfig } from '~/lib/core/configs/apollo'
-
-export type DUIAccount = {
-  /** account info coming from the host app */
-  accountInfo: Account
-  /** the graphql client; a bit superflous */
-  client?: ApolloClient<unknown>
-  /** whether an intial serverinfo query succeeded. */
-  isValid: boolean
-}
-
-export type DUIAccountsState = {
-  accounts: Ref<DUIAccount[]>
-  validAccounts: ComputedRef<DUIAccount[]>
-  refreshAccounts: () => Promise<void>
-  defaultAccount: ComputedRef<DUIAccount | undefined>
-  loading: Ref<boolean>
-}
-
-const AccountsInjectionKey = 'DUI_ACCOUNTS_STATE'
-
-/**
- * Use this composable to set up the account bindings and graphql clients at the top of the app.
- * TODO: Properly handle cases when user was not connected to the internet,
- * and then actually got connected.
- */
-export function useAccountsSetup(): DUIAccountsState {
-  const app = useNuxtApp()
-  const $baseBinding = app.$baseBinding
-
-  const accounts = ref<DUIAccount[]>([])
-
-  const apolloClients = {} as Record<string, ApolloClient<unknown>>
-
-  // Tries to connect to the accounts and sets their is valid prop to false if fails.
-  const testAccounts = async (accs: DUIAccount[]) => {
-    const accountTestQuery = gql`
-      query AcccountTestQuery {
-        serverInfo {
-          version
-          name
-          company
-        }
-      }
-    `
-    for (const acc of accs) {
-      if (!acc.client) continue
-      try {
-        await acc.client.query({ query: accountTestQuery })
-        acc.isValid = true
-      } catch (error) {
-        // TODO: properly dispose and kill this client. It's unclear how to do it.
-        acc.isValid = false
-        // NOTE: we do not want to delete the client, as we might want to "refresh" in
-        // case the user was not connected to the interweb.
-        // acc.client.disableNetworkFetches = true
-        // acc.client.stop()
-        // delete acc.client
-      }
-    }
-  }
-
-  const loading = ref(false)
-
-  // Matches local accounts coming from the host app to app state.
-  const refreshAccounts = async () => {
-    loading.value = true
-
-    const accs = await $baseBinding.getAccounts()
-    // We create a whole new list of accounts that will replace the old list. This way we ensure we drop
-    // out of scope old accounts that not exist anymore (TODO: test), and we don't need to do complex diffing.
-    const newAccs = [] as DUIAccount[]
-    for (const acc of accs) {
-      const existing = accounts.value.find((a) => a.accountInfo.id === acc.id)
-      if (existing) {
-        newAccs.push(existing as DUIAccount)
-        continue
-      }
-
-      const client = new ApolloClient(
-        resolveClientConfig({
-          httpEndpoint: new URL('/graphql', acc.serverInfo.url).href,
-          authToken: () => acc.token
-        })
-      )
-
-      apolloClients[acc.id] = client
-
-      newAccs.push({
-        accountInfo: acc,
-        client,
-        isValid: true
-      })
-    }
-    // We test accounts here so we try to prevent the app from querying/using invalid accounts.
-    await testAccounts(newAccs)
-    // Once we have tested the new accounts, finally set them.
-    accounts.value = newAccs
-    loading.value = false
-  }
-
-  void refreshAccounts() // Promise that we do not want to await (convention with void)
-
-  const defaultAccount = computed(() =>
-    accounts.value.find((acc) => acc.accountInfo.isDefault)
-  )
-
-  const validAccounts = computed(() => {
-    return accounts.value.filter((a) => a.isValid)
-  })
-
-  const accState = {
-    accounts,
-    defaultAccount,
-    validAccounts,
-    refreshAccounts,
-    loading
-  }
-
-  app.vueApp.provide(ApolloClients, apolloClients)
-  provide(AccountsInjectionKey, accState)
-
-  return accState // as DUIAccountsState
-}
-
-/**
- * Use this composable to access the users' local accounts and their corresponding graphql client.
- */
-export function useInjectedAccounts(): DUIAccountsState {
-  const state = inject(AccountsInjectionKey) as DUIAccountsState
-  return state
-}
diff --git a/packages/dui3/lib/automate/runStatus.ts b/packages/dui3/lib/automate/runStatus.ts
new file mode 100644
index 0000000000..2728361d06
--- /dev/null
+++ b/packages/dui3/lib/automate/runStatus.ts
@@ -0,0 +1,186 @@
+import type { AutomationRunItemFragment } from '~/lib/common/generated/gql/graphql'
+import type { PropAnyComponent } from '@speckle/ui-components'
+import { AutomateRunStatus } from '~/lib/common/generated/gql/graphql'
+import {
+  CheckCircleIcon,
+  EllipsisHorizontalCircleIcon,
+  EllipsisHorizontalIcon,
+  ExclamationCircleIcon,
+  ArrowPathIcon,
+  ClockIcon,
+  XCircleIcon
+} from '@heroicons/vue/24/outline'
+import { Automate, type MaybeNullOrUndefined } from '@speckle/shared'
+
+export type RunsStatusSummary = {
+  failed: number
+  passed: number
+  inProgress: number
+  total: number
+  title: string
+  titleColor: string
+  longSummary: string
+}
+
+export const useFunctionRunsStatusSummary = (params: {
+  runs: MaybeRef<AutomationRunItemFragment[]>
+}) => {
+  const { runs } = params
+
+  const summary = computed((): RunsStatusSummary => {
+    const allFunctionRuns = unref(runs)
+    const result: RunsStatusSummary = {
+      failed: 0,
+      passed: 0,
+      inProgress: 0,
+      total: allFunctionRuns.length,
+      title: 'All runs passed.',
+      titleColor: 'text-success',
+      longSummary: ''
+    }
+
+    for (const run of allFunctionRuns) {
+      switch (run.status) {
+        case AutomateRunStatus.Succeeded:
+          result.passed++
+          break
+        case AutomateRunStatus.Failed:
+        case AutomateRunStatus.Exception:
+        case AutomateRunStatus.Timeout:
+        case AutomateRunStatus.Canceled:
+          result.title = 'Some runs failed.'
+          result.titleColor = 'text-danger'
+          result.failed++
+          break
+        default:
+          if (result.failed === 0) {
+            result.title = 'Some runs are still in progress.'
+            result.titleColor = 'text-warning'
+          }
+          result.inProgress++
+          break
+      }
+    }
+
+    // format:
+    // 2 failed, 1 passed runs
+    // 1 passed, 2 in progress, 1 failed runs
+    // 1 passed run
+    const longSummarySegments = []
+    if (result.passed > 0) longSummarySegments.push(`${result.passed} passed`)
+    if (result.inProgress > 0)
+      longSummarySegments.push(`${result.inProgress} in progress`)
+    if (result.failed > 0) longSummarySegments.push(`${result.failed} failed`)
+
+    result.longSummary = (
+      longSummarySegments.join(', ') + ` run${result.total > 1 ? 's' : ''}.`
+    ).replace(/,(?=[^,]+$)/, ', and')
+
+    return result
+  })
+
+  return { summary }
+}
+
+export type AutomateRunStatusMetadata = {
+  icon: PropAnyComponent
+  xsIcon: PropAnyComponent
+  iconColor: string
+  badgeColor: string
+  disclosureColor: 'success' | 'warning' | 'danger' | 'default'
+}
+
+export const useRunStatusMetadata = (params: {
+  status: MaybeRef<AutomateRunStatus>
+}) => {
+  const { status } = params
+
+  const metadata = computed((): AutomateRunStatusMetadata => {
+    switch (unref(status)) {
+      case AutomateRunStatus.Canceled:
+        return {
+          icon: XCircleIcon,
+          xsIcon: XCircleIcon,
+          iconColor: 'text-warning',
+          badgeColor: 'bg-warning',
+          disclosureColor: 'warning'
+        }
+      case AutomateRunStatus.Exception:
+        return {
+          icon: ExclamationCircleIcon,
+          xsIcon: ExclamationCircleIcon,
+          iconColor: 'text-danger',
+          badgeColor: 'bg-danger',
+          disclosureColor: 'danger'
+        }
+      case AutomateRunStatus.Failed:
+        return {
+          icon: ExclamationCircleIcon,
+          xsIcon: ExclamationCircleIcon,
+          iconColor: 'text-danger',
+          badgeColor: 'bg-danger',
+          disclosureColor: 'danger'
+        }
+      case AutomateRunStatus.Initializing:
+        return {
+          icon: EllipsisHorizontalCircleIcon,
+          xsIcon: EllipsisHorizontalIcon,
+          iconColor: 'text-warning',
+          badgeColor: 'bg-warning',
+          disclosureColor: 'warning'
+        }
+      case AutomateRunStatus.Pending:
+        return {
+          icon: EllipsisHorizontalCircleIcon,
+          xsIcon: EllipsisHorizontalIcon,
+          iconColor: 'text-primary',
+          badgeColor: 'bg-primary',
+          disclosureColor: 'default'
+        }
+      case AutomateRunStatus.Running:
+        return {
+          icon: ArrowPathIcon,
+          xsIcon: ArrowPathIcon,
+          iconColor: 'text-primary animate-spin',
+          badgeColor: 'bg-primary',
+          disclosureColor: 'default'
+        }
+      case AutomateRunStatus.Succeeded:
+        return {
+          icon: CheckCircleIcon,
+          xsIcon: CheckCircleIcon,
+          iconColor: 'text-success',
+          badgeColor: 'bg-success',
+          disclosureColor: 'success'
+        }
+      case AutomateRunStatus.Timeout:
+        return {
+          icon: ClockIcon,
+          xsIcon: ClockIcon,
+          iconColor: 'text-danger',
+          badgeColor: 'bg-danger',
+          disclosureColor: 'danger'
+        }
+    }
+  })
+
+  return { metadata }
+}
+
+export const useAutomationFunctionRunResults = (params: {
+  results: MaybeRef<MaybeNullOrUndefined<Record<string, unknown>>>
+}) => {
+  const { results } = params
+
+  const ret = computed(
+    (): MaybeNullOrUndefined<Automate.AutomateTypes.ResultsSchema> => {
+      const res = unref(results)
+      if (!res) return res
+
+      if (!Automate.AutomateTypes.isResultsSchema(res)) return null
+      return Automate.AutomateTypes.formatResultsSchema(res)
+    }
+  )
+
+  return ret
+}
diff --git a/packages/dui3/lib/bindings/definitions/IAccountBinding.ts b/packages/dui3/lib/bindings/definitions/IAccountBinding.ts
new file mode 100644
index 0000000000..3b5ab73a0a
--- /dev/null
+++ b/packages/dui3/lib/bindings/definitions/IAccountBinding.ts
@@ -0,0 +1,29 @@
+import type { IBinding, IBindingSharedEvents } from 'lib/bindings/definitions/IBinding'
+
+export const IAccountBindingKey = 'accountsBinding'
+
+export interface IAccountBinding extends IBinding<IAccountBindingEvents> {
+  getAccounts: () => Promise<Account[]>
+}
+
+// An almost 1-1 mapping of what we need from the Core accounts class.
+export type Account = {
+  id: string
+  isDefault: boolean
+  token: string
+  serverInfo: {
+    name: string
+    url: string
+    frontend2: boolean
+  }
+  userInfo: {
+    id: string
+    avatar: string
+    email: string
+    name: string
+    commits: { totalCount: number }
+    streams: { totalCount: number }
+  }
+}
+
+export interface IAccountBindingEvents extends IBindingSharedEvents {}
diff --git a/packages/dui3/lib/bindings/definitions/IBasicConnectorBinding.ts b/packages/dui3/lib/bindings/definitions/IBasicConnectorBinding.ts
index 2965670953..7e3e24b7b3 100644
--- a/packages/dui3/lib/bindings/definitions/IBasicConnectorBinding.ts
+++ b/packages/dui3/lib/bindings/definitions/IBasicConnectorBinding.ts
@@ -1,78 +1,55 @@
-/* eslint-disable @typescript-eslint/require-await */
-
-import { BaseBridge } from '~~/lib/bridge/base'
-import type { IBinding } from '~~/lib/bindings/definitions/IBinding'
+import type {
+  IBinding,
+  IBindingSharedEvents
+} from '~~/lib/bindings/definitions/IBinding'
+import type { IModelCard, IModelCardSharedEvents } from '~~/lib/models/card'
 
 export const IBasicConnectorBindingKey = 'baseBinding'
 
 // Needs to be agreed between Frontend and Core
 export interface IBasicConnectorBinding
   extends IBinding<IBasicConnectorBindingHostEvents> {
-  getAccounts: () => Promise<Account[]>
+  // Various
   getSourceApplicationName: () => Promise<string>
   getSourceApplicationVersion: () => Promise<string>
+  getConnectorVersion: () => Promise<string>
   getDocumentInfo: () => Promise<DocumentInfo>
+
+  // Document state calls
+  getDocumentState: () => Promise<DocumentModelStore>
+  addModel: (model: IModelCard) => Promise<void>
+  updateModel: (model: IModelCard) => Promise<void>
+  highlightModel: (modelCardId: string) => Promise<void>
+  highlightObjects: (objectIds: string[]) => Promise<void>
+  removeModel: (model: IModelCard) => Promise<void>
 }
 
-export interface IBasicConnectorBindingHostEvents {
-  displayToastNotification: (args: ToastInfo) => void
+export interface IBasicConnectorBindingHostEvents
+  extends IBindingSharedEvents,
+    IModelCardSharedEvents {
   documentChanged: () => void
 }
 
-// An almost 1-1 mapping of what we need from the Core accounts class.
-export type Account = {
-  id: string
-  isDefault: boolean
-  token: string
-  serverInfo: {
-    name: string
-    url: string
-  }
-  userInfo: {
-    id: string
-    avatar: string
-    email: string
-    name: string
-    commits: { totalCount: number }
-    streams: { totalCount: number }
-  }
+export type DocumentModelStore = {
+  models: IModelCard[]
 }
 
 export type DocumentInfo = {
   location: string
   name: string
   id: string
+  message?: string
 }
 
-// NOTE: just a reminder for now
 export type ToastInfo = {
+  modelCardId: string
   text: string
-  details?: string
-  type: 'info' | 'error' | 'warning'
+  level: 'info' | 'danger' | 'warning' | 'success'
+  action?: ToastAction
+  timeout?: number
 }
 
-export class MockedBaseBinding extends BaseBridge {
-  public async getAccounts() {
-    return []
-  }
-
-  public async getSourceApplicationName() {
-    return 'Mocks'
-  }
-
-  public async getSourceApplicationVersion() {
-    return Math.random().toString()
-  }
-
-  public async getDocumentInfo() {
-    return {
-      name: 'Mocked File',
-      location: 'www',
-      id: Math.random().toString()
-    }
-  }
-
-  public async showDevTools() {
-    console.log('Mocked bindings cannot do this')
-  }
+export type ToastAction = {
+  url: string
+  name: string
 }
diff --git a/packages/dui3/lib/bindings/definitions/IBinding.ts b/packages/dui3/lib/bindings/definitions/IBinding.ts
index 1351b5e488..940feb8058 100644
--- a/packages/dui3/lib/bindings/definitions/IBinding.ts
+++ b/packages/dui3/lib/bindings/definitions/IBinding.ts
@@ -1,3 +1,5 @@
+import type { ToastNotification } from '@speckle/ui-components'
+
 /**
  * Basic interface scaffolding two standard method.
  */
@@ -16,3 +18,7 @@ export interface IBinding<T> {
    */
   openUrl: (url: string) => Promise<void>
 }
+
+export interface IBindingSharedEvents {
+  setGlobalNotification: (toastNotification: ToastNotification) => void
+}
diff --git a/packages/dui3/lib/bindings/definitions/IConfigBinding.ts b/packages/dui3/lib/bindings/definitions/IConfigBinding.ts
index e3874a88a0..50511b05bb 100644
--- a/packages/dui3/lib/bindings/definitions/IConfigBinding.ts
+++ b/packages/dui3/lib/bindings/definitions/IConfigBinding.ts
@@ -1,5 +1,8 @@
-import { BaseBridge } from '~~/lib/bridge/base'
-import type { IBinding } from '~~/lib/bindings/definitions/IBinding'
+import { BaseBridge } from '~/lib/bridge/base'
+import type {
+  IBinding,
+  IBindingSharedEvents
+} from '~/lib/bindings/definitions/IBinding'
 
 /**
  * The name under which this binding will be registered.
@@ -10,27 +13,22 @@ export const IConfigBindingKey = 'configBinding'
  * A test binding interface to ensure compatbility. Ideally all host environments would implement and register it.
  */
 export interface IConfigBinding extends IBinding<IConfigBindingEvents> {
-  getConfig: () => Promise<Config>
-  updateConfig: (config: Config) => Promise<void>
+  getIsDevMode: () => Promise<boolean>
+  getConfig: () => Promise<ConnectorConfig>
+  updateConfig: (config: ConnectorConfig) => void
+  setUserSelectedAccountId: (accountId: string) => void
+  getUserSelectedAccountId: () => Promise<AccountsConfig>
 }
 
-export interface IConfigBindingEvents {
-  void: () => void
-}
+export interface IConfigBindingEvents extends IBindingSharedEvents {}
 
-export type Config = {
+export type ConnectorConfig = {
   darkTheme: boolean
 }
 
-export class MockedConfigBinding extends BaseBridge {
-  getConfig() {
-    return {
-      darkTheme: false
-    }
-  }
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  updateConfig(config: Config) {
-    // do nothing
-  }
+export type AccountsConfig = {
+  userSelectedAccountId: string
 }
+
+// Useless, but will do for now :)
+export class MockedConfigBinding extends BaseBridge {}
diff --git a/packages/dui3/lib/bindings/definitions/IReceiveBinding.ts b/packages/dui3/lib/bindings/definitions/IReceiveBinding.ts
new file mode 100644
index 0000000000..cd57744ece
--- /dev/null
+++ b/packages/dui3/lib/bindings/definitions/IReceiveBinding.ts
@@ -0,0 +1,26 @@
+import type { ConversionResult } from 'lib/conversions/conversionResult'
+import type { IModelCardSharedEvents } from '~/lib/models/card'
+import type { CardSetting } from '~/lib/models/card/setting'
+import type {
+  IBinding,
+  IBindingSharedEvents
+} from '~~/lib/bindings/definitions/IBinding'
+
+export const IReceiveBindingKey = 'receiveBinding'
+
+export interface IReceiveBinding extends IBinding<IReceiveBindingEvents> {
+  receive: (modelCardId: string) => Promise<void>
+  getReceiveSettings: () => Promise<CardSetting[]>
+  cancelReceive: (modelId: string) => Promise<void>
+}
+
+export interface IReceiveBindingEvents
+  extends IBindingSharedEvents,
+    IModelCardSharedEvents {
+  // See note oon timeout in bridge v2; we might not need this
+  setModelReceiveResult: (args: {
+    modelCardId: string
+    bakedObjectIds: string[]
+    conversionResults: ConversionResult[]
+  }) => void
+}
diff --git a/packages/dui3/lib/bindings/definitions/ISelectionBinding.ts b/packages/dui3/lib/bindings/definitions/ISelectionBinding.ts
new file mode 100644
index 0000000000..6941828cda
--- /dev/null
+++ b/packages/dui3/lib/bindings/definitions/ISelectionBinding.ts
@@ -0,0 +1,19 @@
+import type {
+  IBinding,
+  IBindingSharedEvents
+} from '~~/lib/bindings/definitions/IBinding'
+
+export const ISelectionBindingKey = 'selectionBinding'
+
+export interface ISelectionBinding extends IBinding<ISelectionBindingHostEvents> {
+  getSelection: () => Promise<SelectionInfo>
+}
+
+export interface ISelectionBindingHostEvents extends IBindingSharedEvents {
+  setSelection: (args: SelectionInfo) => void
+}
+
+export type SelectionInfo = {
+  summary?: string
+  selectedObjectIds: string[]
+}
diff --git a/packages/dui3/lib/bindings/definitions/ISendBinding.ts b/packages/dui3/lib/bindings/definitions/ISendBinding.ts
new file mode 100644
index 0000000000..24af961adf
--- /dev/null
+++ b/packages/dui3/lib/bindings/definitions/ISendBinding.ts
@@ -0,0 +1,38 @@
+import type { ISendFilter } from '~~/lib/models/card/send'
+import type {
+  IBinding,
+  IBindingSharedEvents
+} from '~~/lib/bindings/definitions/IBinding'
+import type { CardSetting } from '~/lib/models/card/setting'
+import type { IModelCardSharedEvents } from '~/lib/models/card'
+import type { ConversionResult } from 'lib/conversions/conversionResult'
+
+export const ISendBindingKey = 'sendBinding'
+
+export interface ISendBinding extends IBinding<ISendBindingEvents> {
+  getSendFilters: () => Promise<ISendFilter[]>
+  getSendSettings: () => Promise<CardSetting[]>
+  send: (modelId: string) => Promise<void>
+  cancelSend: (modelId: string) => Promise<void>
+}
+
+export interface ISendBindingEvents
+  extends IBindingSharedEvents,
+    IModelCardSharedEvents {
+  refreshSendFilters: () => void
+  setModelsExpired: (modelCardIds: string[]) => void
+  setModelSendResult: (args: {
+    modelCardId: string
+    versionId: string
+    sendConversionResults: ConversionResult[]
+  }) => void
+  setIdMap: (args: {
+    modelCardId: string
+    idMap: Record<string, string>
+    newSelectedObjectIds: string[]
+  }) => void
+  /**
+   * Use whenever want to cancel model card progress, it is used on Archicad so far since send operation blocks the UI thread.
+   */
+  triggerCancel: (modelCardId: string) => void
+}
diff --git a/packages/dui3/lib/bindings/definitions/ITestBinding.ts b/packages/dui3/lib/bindings/definitions/ITestBinding.ts
index 838edef6a3..8ec24224e6 100644
--- a/packages/dui3/lib/bindings/definitions/ITestBinding.ts
+++ b/packages/dui3/lib/bindings/definitions/ITestBinding.ts
@@ -1,7 +1,10 @@
 /* eslint-disable @typescript-eslint/require-await */
 
 import { BaseBridge } from '~~/lib/bridge/base'
-import type { IBinding } from '~~/lib/bindings/definitions/IBinding'
+import type {
+  IBinding,
+  IBindingSharedEvents
+} from '~~/lib/bindings/definitions/IBinding'
 
 /**
  * The name under which this binding will be registered.
@@ -19,7 +22,7 @@ export interface ITestBinding extends IBinding<ITestBindingEvents> {
   triggerEvent: (eventName: string) => Promise<void>
 }
 
-export interface ITestBindingEvents {
+export interface ITestBindingEvents extends IBindingSharedEvents {
   emptyTestEvent: () => void
   testEvent: (args: TestEventArgs) => void
 }
diff --git a/packages/dui3/lib/bindings/definitions/ITopLevelExceptionHandlerBinding.ts b/packages/dui3/lib/bindings/definitions/ITopLevelExceptionHandlerBinding.ts
new file mode 100644
index 0000000000..cb9c9a13d8
--- /dev/null
+++ b/packages/dui3/lib/bindings/definitions/ITopLevelExceptionHandlerBinding.ts
@@ -0,0 +1,11 @@
+import type {
+  IBinding,
+  IBindingSharedEvents
+} from '~/lib/bindings/definitions/IBinding'
+
+export const ITopLevelExpectionHandlerBindingKey = 'topLevelExceptionHandlerBinding'
+
+export interface ITopLevelExpectionHandlerBinding
+  extends IBinding<ITopLevelExpectionHandlerBindingEvents> {}
+
+export interface ITopLevelExpectionHandlerBindingEvents extends IBindingSharedEvents {}
diff --git a/packages/dui3/lib/bindings/definitions/common.ts b/packages/dui3/lib/bindings/definitions/common.ts
new file mode 100644
index 0000000000..20e7859e51
--- /dev/null
+++ b/packages/dui3/lib/bindings/definitions/common.ts
@@ -0,0 +1,36 @@
+export interface IDiscriminatedObject {
+  typeDiscriminator: string
+}
+
+export class DiscriminatedObject implements IDiscriminatedObject {
+  typeDiscriminator: string
+  constructor(typeDiscriminator: string) {
+    this.typeDiscriminator = typeDiscriminator
+  }
+}
+
+export interface FormInputBase extends IDiscriminatedObject {
+  label?: string
+  showLabel?: boolean
+}
+
+export interface FormTextInput extends FormInputBase {
+  value?: string
+  placeholder?: string
+}
+
+export interface BooleanValueInput extends FormInputBase {
+  value: boolean
+}
+
+export interface ListValueInput extends FormInputBase {
+  options: ListValueItem[]
+  selectedOptions: ListValueInput[]
+  multiSelect: boolean
+}
+
+export interface ListValueItem extends IDiscriminatedObject {
+  id: string
+  name: string
+  color?: string
+}
diff --git a/packages/dui3/lib/bridge/base.ts b/packages/dui3/lib/bridge/base.ts
index a769589b61..87b757731d 100644
--- a/packages/dui3/lib/bridge/base.ts
+++ b/packages/dui3/lib/bridge/base.ts
@@ -1,3 +1,4 @@
+import { BaseBridgeErrorHandler } from '~/lib/bridge/errorHandler'
 import type { Emitter } from 'nanoevents'
 import { createNanoEvents } from 'nanoevents'
 
@@ -10,6 +11,7 @@ export class BaseBridge {
 
   constructor() {
     this.emitter = createNanoEvents()
+    new BaseBridgeErrorHandler(this.emitter) // Where we set error to hostApp store
   }
 
   // NOTE: these do not need to be typed extra in here, as they will be properly typed on the specific binding's interface.
diff --git a/packages/dui3/lib/bridge/definitions/index.ts b/packages/dui3/lib/bridge/definitions/index.ts
index b2a789991c..e5e06bffea 100644
--- a/packages/dui3/lib/bridge/definitions/index.ts
+++ b/packages/dui3/lib/bridge/definitions/index.ts
@@ -3,7 +3,8 @@
  */
 export type IRawBridge = {
   GetBindingsMethodNames: () => Promise<string[]>
-  RunMethod: (methodName: string, args: string) => Promise<string>
+  RunMethod: (methodName: string, requestId: string, args: string) => Promise<string>
   ShowDevTools: () => Promise<void>
   OpenUrl: (url: string) => Promise<void>
+  GetCallResult: (requestId: string) => Promise<string>
 }
diff --git a/packages/dui3/lib/bridge/errorHandler.ts b/packages/dui3/lib/bridge/errorHandler.ts
new file mode 100644
index 0000000000..4ba805f5ac
--- /dev/null
+++ b/packages/dui3/lib/bridge/errorHandler.ts
@@ -0,0 +1,34 @@
+import type { ToastNotification } from '@speckle/ui-components'
+import { ToastNotificationType } from '@speckle/ui-components'
+import type { Emitter } from 'nanoevents'
+import { useHostAppStore } from '~/store/hostApp'
+
+export type HostAppError = {
+  message: string
+  error: string
+  stackTrace: string
+}
+
+export class BaseBridgeErrorHandler {
+  constructor(emitter: Emitter) {
+    emitter.on('errorOnResponse', (data: string) => {
+      this.handleError(data)
+    })
+  }
+
+  private handleError(data: string) {
+    const store = useHostAppStore()
+    const parsedData = JSON.parse(data) as Record<string, unknown> as HostAppError
+    store.setHostAppError(parsedData)
+    const notification: ToastNotification = {
+      type: ToastNotificationType.Danger,
+      title: 'Host App Error',
+      description: parsedData.message,
+      cta: {
+        title: 'Show details',
+        onClick: () => (store.showErrorDialog = true)
+      }
+    }
+    store.setNotification(notification)
+  }
+}
diff --git a/packages/dui3/lib/bridge/generic-v2.ts b/packages/dui3/lib/bridge/generic-v2.ts
new file mode 100644
index 0000000000..a2aba18f0a
--- /dev/null
+++ b/packages/dui3/lib/bridge/generic-v2.ts
@@ -0,0 +1,146 @@
+import { ArchicadBridge } from '~/lib/bridge/server'
+import { BaseBridge } from '~/lib/bridge/base'
+import type { IRawBridge } from '~/lib/bridge/definitions'
+
+/**
+ * A generic bridge class for Webivew2 or CefSharp.
+ */
+export class GenericBridge extends BaseBridge {
+  private bridge: IRawBridge
+  private archicadBridge: ArchicadBridge | undefined
+  private requests = {} as Record<
+    string,
+    {
+      methodName: string
+      resolve: (value: unknown) => void
+      reject: (reason: string | Error) => void
+      rejectTimerId: number
+    }
+  >
+  // TOTHINK: as this is a fast timeout, it forces us for long await methods in .net to return results via events. Kind-of not cool, and i'd be in favour of bumping it to "endless", or remove it altogether
+  // An example is the send or receive operations: they can take fucking long :D
+  private TIMEOUT_MS = 1000 * 60 // 60 sec
+
+  constructor(object: IRawBridge, isArchicadBridge: boolean = false) {
+    super()
+    this.bridge = object
+    if (isArchicadBridge) {
+      this.archicadBridge = new ArchicadBridge(this.emitter)
+    }
+  }
+
+  public async create(): Promise<boolean> {
+    // NOTE: GetMethods is a call to the .NET side.
+    let availableMethodNames = [] as string[]
+
+    try {
+      availableMethodNames = await this.bridge.GetBindingsMethodNames()
+    } catch (e) {
+      console.warn(`Failed to get method names from binding.`)
+      return false
+    }
+
+    // NOTE: hoisting original calls as lowerCasedMethodNames, but using the UpperCasedName for the .NET call
+    // This allows us to follow js convetions and keep .NET ones too (eg. bindings.sayHi('') => public string SayHi(string name) {}
+    for (const methodName of availableMethodNames) {
+      const lowercasedMethodName = lowercaseMethodName(methodName)
+      const hoistTarget = this as unknown as Record<string, object>
+      hoistTarget[lowercasedMethodName] = (...args: unknown[]) =>
+        this.runMethod(methodName, args)
+    }
+
+    return true
+  }
+
+  private async emitResponseReady(eventName: string, requestId: string) {
+    this.registerPromise(eventName, requestId)
+    const data = await this.bridge.GetCallResult(requestId)
+    const request = this.requests[requestId]
+    try {
+      const parsedData = data ? (JSON.parse(data) as Record<string, unknown>) : null
+
+      if (parsedData === null) {
+        throw new Error(`Data is not parsed successfuly on ${eventName}`)
+      }
+
+      if (this.archicadBridge) {
+        this.archicadBridge.emit(eventName, parsedData, this.runMethod.bind(this))
+      } else {
+        this.emitter.emit(eventName, parsedData)
+      }
+
+      request.resolve(parsedData)
+    } catch (e) {
+      console.error(e)
+      request.reject(e as Error)
+    } finally {
+      window.clearTimeout(request.rejectTimerId)
+      delete this.requests[requestId]
+    }
+  }
+
+  async runMethod(methodName: string, args: unknown[]): Promise<unknown> {
+    const requestId = (Math.random() + 1).toString(36).substring(2) + '_' + methodName
+    const preserializedArgs = args.map((a) => JSON.stringify(a))
+
+    this.bridge.RunMethod(methodName, requestId, JSON.stringify(preserializedArgs))
+
+    return this.registerPromise(methodName, requestId)
+  }
+
+  private async registerPromise(methodName: string, requestId: string) {
+    return new Promise((resolve, reject) => {
+      this.requests[requestId] = {
+        methodName,
+        resolve,
+        reject,
+        rejectTimerId: window.setTimeout(() => {
+          reject(
+            `.NET response timed out for call to ${methodName} - did not receive anything back in good time (${this.TIMEOUT_MS}ms).`
+          )
+          delete this.requests[requestId]
+        }, this.TIMEOUT_MS)
+      }
+    })
+  }
+
+  private async responseReady(requestId: string) {
+    if (!this.requests[requestId])
+      throw new Error(
+        `.NET Bridge found no request to resolve with the id of ${requestId}. Something is weird!`
+      )
+
+    const request = this.requests[requestId]
+    const data = await this.bridge.GetCallResult(requestId)
+    try {
+      const parsedData = data ? (JSON.parse(data) as Record<string, unknown>) : null // TODO: check if data is undefined
+
+      // eslint-disable-next-line no-prototype-builtins
+      if (parsedData && parsedData.hasOwnProperty('error')) {
+        console.error(data)
+        this.emitter.emit('errorOnResponse', data)
+        throw new Error(
+          `Failed to run ${requestId}. The host app error is logged above.`
+        )
+      }
+      request.resolve(parsedData)
+    } catch (e) {
+      console.error(e)
+      request.reject(e as Error)
+    } finally {
+      window.clearTimeout(request.rejectTimerId)
+      delete this.requests[requestId]
+    }
+  }
+
+  public showDevTools() {
+    this.bridge.ShowDevTools()
+  }
+
+  public openUrl(url: string) {
+    this.bridge.OpenUrl(url)
+  }
+}
+
+const lowercaseMethodName = (name: string) =>
+  name.charAt(0).toLowerCase() + name.slice(1)
diff --git a/packages/dui3/lib/bridge/server.ts b/packages/dui3/lib/bridge/server.ts
new file mode 100644
index 0000000000..fb3f67baaf
--- /dev/null
+++ b/packages/dui3/lib/bridge/server.ts
@@ -0,0 +1,338 @@
+import type { ConversionResult } from '~/lib/conversions/conversionResult'
+import type { ProgressStage } from '@speckle/objectloader'
+import ObjectLoader from '@speckle/objectloader'
+import { send, type Base } from '@speckle/objectsender'
+import { provideApolloClient, useMutation } from '@vue/apollo-composable'
+import {
+  versionDetailsQuery,
+  markReceivedVersionMutation,
+  createVersionMutation
+} from '~/lib/graphql/mutationsAndQueries'
+import { storeToRefs } from 'pinia'
+import type { DUIAccount } from '~/store/accounts'
+import { useAccountStore } from '~/store/accounts'
+import { useHostAppStore } from '~/store/hostApp'
+import type { Emitter } from 'nanoevents'
+
+export type SendBatchViaBrowserArgs = {
+  modelCardId: string
+  projectId: string
+  token: string
+  serverUrl: string
+  batch: string
+  currentBatch: number
+  totalBatch: number
+  referencedObjectId: string
+}
+
+export type CreateVersionViaBrowserArgs = {
+  modelCardId: string
+  projectId: string
+  modelId: string
+  token: string
+  serverUrl: string
+  accountId: string
+  message: string
+  referencedObjectId: string
+  sourceApplication: string
+  sendConversionResults: ConversionResult[]
+}
+
+export type SendViaBrowserArgs = {
+  modelCardId: string
+  projectId: string
+  modelId: string
+  token: string
+  serverUrl: string
+  accountId: string
+  message: string
+  sendConversionResults: ConversionResult[]
+  sendObject: {
+    id: string // the root object id which should be used for creating the version
+    rootObject: object // NOTE to dim
+  }
+}
+
+export type ReceiveViaBrowserArgs = {
+  modelCardId: string
+  projectId: string
+  modelId: string
+  objectId: string
+  accountId: string
+  selectedVersionId: string
+}
+
+export type CreateVersionArgs = {
+  modelCardId: string
+  projectId: string
+  modelId: string
+  accountId: string
+  referencedObjectId: string
+  message?: string
+  sourceApplication?: string
+}
+
+// TODO: Once ruby codebase aligned with it, sketchup will consume this bridge too!
+export class ArchicadBridge {
+  public emitter: Emitter
+
+  constructor(emitter: Emitter) {
+    this.emitter = emitter
+  }
+
+  // NOTE: Overriden emit as we do not need to parse the data back - the Server bridge already parses it for us.
+  emit(
+    eventName: string,
+    payload: Record<string, unknown>,
+    runMethod: (methodName: string, args: unknown[]) => Promise<unknown>
+  ): void {
+    const eventPayload = payload as unknown as Record<string, unknown>
+
+    if (eventName === 'sendByBrowser')
+      this.sendByBrowser(eventPayload as SendViaBrowserArgs)
+    // we will switch to https://www.npmjs.com/package/@speckle/objectsender
+    else if (eventName === 'sendBatchViaBrowser')
+      this.sendBatchViaBrowser(eventPayload as SendBatchViaBrowserArgs, runMethod)
+    else if (eventName === 'createVersionViaBrowser')
+      this.createVersionViaBrowser(eventPayload as CreateVersionViaBrowserArgs)
+    else if (eventName === 'receiveByBrowser')
+      this.receiveByBrowser(eventPayload as ReceiveViaBrowserArgs, runMethod)
+    // Archicad is not likely to hit here yet!
+    else return this.emitter.emit(eventName, eventPayload)
+  }
+
+  private async receiveByBrowser(
+    eventPayload: ReceiveViaBrowserArgs,
+    runMethod: (methodName: string, args: unknown[]) => Promise<unknown>
+  ) {
+    const accountStore = useAccountStore()
+    const hostAppStore = useHostAppStore()
+    const { accounts } = storeToRefs(accountStore)
+    const account = accounts.value.find(
+      (acc) => acc.accountInfo.id === eventPayload.accountId
+    )
+    provideApolloClient((account as DUIAccount).client)
+
+    // useQuery cannot use in outside of VueComponent.
+    const result = await (account as DUIAccount).client.query({
+      query: versionDetailsQuery,
+      variables: {
+        projectId: eventPayload.projectId,
+        versionId: eventPayload.selectedVersionId,
+        modelId: eventPayload.modelId
+      }
+    })
+
+    const loader = new ObjectLoader({
+      serverUrl: account?.accountInfo.serverInfo.url as string,
+      token: account?.accountInfo.token as string,
+      streamId: eventPayload.projectId,
+      objectId: result.data.project.model.version.referencedObject
+    })
+
+    const updateProgress = (e: {
+      stage: ProgressStage
+      current: number
+      total: number
+    }) => {
+      const progress = e.current / e.total
+      hostAppStore.handleModelProgressEvents({
+        modelCardId: eventPayload.modelCardId,
+        progress: { status: 'Downloading', progress }
+      })
+    }
+
+    // eslint-disable-next-line @typescript-eslint/await-thenable
+    const rootObj = await loader.getAndConstructObject(updateProgress)
+    const args = [
+      eventPayload.modelCardId,
+      result.data.project.model.version.sourceApplication,
+      rootObj
+    ]
+
+    const markReceived = provideApolloClient((account as DUIAccount).client)(() =>
+      useMutation(markReceivedVersionMutation)
+    )
+
+    await markReceived.mutate({
+      input: {
+        versionId: eventPayload.selectedVersionId,
+        projectId: eventPayload.projectId,
+        sourceApplication: hostAppStore.hostAppName as string
+      }
+    })
+
+    hostAppStore.handleModelProgressEvents({
+      modelCardId: eventPayload.modelCardId,
+      progress: { status: 'Converting' }
+    })
+
+    // CONVERSION WILL START AFTER THAT
+    await runMethod('afterGetObjects', args as unknown as unknown[])
+  }
+
+  private queuedPromises = {} as Record<string, Promise<Response>[]>
+
+  /**
+   * Internal server method for sending batch data via REST api.
+   * Whenever batches are completed it triggers to host application to notify it is done.
+   * To be able to use this function properly, expected objects in batch must have hashed (speckle ids generated, detached, chucked bla bla) on connector.
+   * @param eventPayload
+   */
+  private async sendBatchViaBrowser(
+    eventPayload: SendBatchViaBrowserArgs,
+    runMethod: (methodName: string, args: unknown[]) => Promise<unknown>
+  ) {
+    const {
+      serverUrl,
+      token,
+      projectId,
+      modelCardId,
+      batch,
+      totalBatch,
+      currentBatch,
+      referencedObjectId
+    } = eventPayload
+    if (!this.queuedPromises[modelCardId]) {
+      this.queuedPromises[modelCardId] = []
+    }
+    const formData = new FormData()
+    formData.append(`batch-1`, new Blob([batch], { type: 'application/json' }))
+    this.queuedPromises[modelCardId].push(
+      fetch(`${serverUrl}/objects/${projectId}`, {
+        method: 'POST',
+        headers: { Authorization: 'Bearer ' + token },
+        body: formData
+      })
+    )
+
+    // 🚀 ready to send!!!!
+    if (currentBatch === totalBatch) {
+      const start = performance.now()
+      for (let i = 0; i < this.queuedPromises[modelCardId].length; i++) {
+        const isLast = i === this.queuedPromises[modelCardId].length - 1
+        // Emit progress update for each resolved promise
+        this.emitter.emit('setModelProgress', {
+          modelCardId,
+          progress: {
+            status: 'Uploading',
+            progress: isLast ? 0 : (i + 1) / this.queuedPromises[modelCardId].length
+          }
+        } as unknown as string)
+        await this.queuedPromises[modelCardId][i] // Wait for the current promise to resolve
+      }
+      this.queuedPromises[modelCardId] = []
+      console.log(`🚀 Upload is completed in ${(performance.now() - start) / 1000} s!`)
+      const args = [eventPayload.modelCardId, referencedObjectId]
+      await runMethod('afterSendObjects', args as unknown as unknown[])
+    }
+  }
+
+  /**
+   * Whenever we make sure we sent every object to the server, we can safely call this function from connector to trigger version create and populate conversion reports.
+   * @param eventPayload
+   */
+  private async createVersionViaBrowser(eventPayload: CreateVersionViaBrowserArgs) {
+    const {
+      projectId,
+      accountId,
+      modelId,
+      modelCardId,
+      referencedObjectId,
+      message,
+      sourceApplication,
+      sendConversionResults
+    } = eventPayload
+    const versionId = await this.createVersion({
+      modelCardId,
+      projectId,
+      modelId,
+      accountId,
+      referencedObjectId,
+      sourceApplication,
+      message
+    })
+    const hostAppStore = useHostAppStore()
+    hostAppStore.setModelSendResult({
+      modelCardId,
+      versionId: versionId as string,
+      sendConversionResults
+    })
+  }
+
+  /**
+   * Internal server bridge method for sending data via object sender.
+   * @param eventPayload
+   */
+  private async sendByBrowser(eventPayload: SendViaBrowserArgs) {
+    const {
+      serverUrl,
+      token,
+      projectId,
+      accountId,
+      modelId,
+      modelCardId,
+      sendObject,
+      sendConversionResults,
+      message
+    } = eventPayload
+    this.emitter.emit('setModelProgress', {
+      modelCardId,
+      progress: {
+        status: 'Uploading',
+        progress: 0
+      }
+    } as unknown as string)
+
+    const { hash: rootCommitObjectId } = await send(
+      sendObject.rootObject as unknown as Base,
+      {
+        serverUrl,
+        projectId,
+        token
+      }
+    )
+
+    const hostAppStore = useHostAppStore()
+
+    const args: CreateVersionArgs = {
+      modelCardId,
+      projectId,
+      modelId,
+      accountId,
+      referencedObjectId: rootCommitObjectId,
+      sourceApplication: hostAppStore.hostAppName?.toLowerCase(),
+      message: message || `send from ${hostAppStore.hostAppName?.toLowerCase()}`
+    }
+    const versionId = await this.createVersion(args)
+
+    // TODO: Alignment needed
+    hostAppStore.setModelSendResult({
+      modelCardId: args.modelCardId,
+      versionId: versionId as string,
+      sendConversionResults
+    })
+  }
+
+  private async createVersion(args: CreateVersionArgs) {
+    const accountStore = useAccountStore()
+    const { accounts } = storeToRefs(accountStore)
+    const account = accounts.value.find((acc) => acc.accountInfo.id === args.accountId)
+
+    const createVersion = provideApolloClient((account as DUIAccount).client)(() =>
+      useMutation(createVersionMutation)
+    )
+
+    const hostAppStore = useHostAppStore()
+
+    const result = await createVersion.mutate({
+      input: {
+        modelId: args.modelId,
+        objectId: args.referencedObjectId,
+        sourceApplication: hostAppStore.hostAppName,
+        projectId: args.projectId
+      }
+    })
+    return result?.data?.versionMutations?.create?.id
+  }
+}
diff --git a/packages/dui3/lib/bridge/sketchup.ts b/packages/dui3/lib/bridge/sketchup.ts
index a8f25d32eb..9fc24cfe57 100644
--- a/packages/dui3/lib/bridge/sketchup.ts
+++ b/packages/dui3/lib/bridge/sketchup.ts
@@ -1,9 +1,44 @@
 import { uniqueId } from 'lodash-es'
 import { BaseBridge } from './base'
+import type { ProgressStage } from '@speckle/objectloader'
+import ObjectLoader from '@speckle/objectloader'
+import { provideApolloClient, useMutation } from '@vue/apollo-composable'
+import {
+  createVersionMutation,
+  markReceivedVersionMutation,
+  versionDetailsQuery
+} from '~/lib/graphql/mutationsAndQueries'
+import type { DUIAccount } from '~/store/accounts'
+import { useAccountStore } from '~/store/accounts'
+import { useHostAppStore } from '~/store/hostApp'
+import type { ConversionResult } from '~/lib/conversions/conversionResult'
+import { storeToRefs } from 'pinia'
+import type {
+  SendBatchViaBrowserArgs,
+  CreateVersionViaBrowserArgs,
+  ReceiveViaBrowserArgs,
+  CreateVersionArgs
+} from '~/lib/bridge/server'
 
 declare let sketchup: {
   exec: (data: Record<string, unknown>) => void
-  getCommands: (viewId: string) => void
+  getBindingsMethodNames: (viewId: string) => void
+}
+
+type SendViaBrowserArgs = {
+  modelCardId: string
+  projectId: string
+  modelId: string
+  token: string
+  serverUrl: string
+  accountId: string
+  message: string
+  sendConversionResults: ConversionResult[]
+  sendObject: {
+    id: string // the root object id which should be used for creating the version
+    totalChildrenCount: number
+    batches: string[]
+  }
 }
 
 /**
@@ -24,7 +59,8 @@ export class SketchupBridge extends BaseBridge {
     }
   >
   private bindingName: string
-  private TIMEOUT_MS = 2000 // 2s
+  private TIMEOUT_MS = 1000 * 60 // 60 sec
+  private NON_TIMEOUT_METHODS = ['send', 'afterGetObjects']
   public isInitalized: Promise<boolean>
   private resolveIsInitializedPromise!: (v: boolean) => unknown
   private rejectIsInitializedPromise!: (message: string) => unknown
@@ -51,13 +87,239 @@ export class SketchupBridge extends BaseBridge {
 
   // NOTE: Overriden emit as we do not need to parse the data back - the Sketchup bridge already parses it for us.
   emit(eventName: string, payload: string): void {
-    this.emitter.emit(eventName, payload as unknown as Record<string, unknown>)
+    const eventPayload = payload as unknown as Record<string, unknown>
+
+    if (eventName === 'sendViaBrowser')
+      this.sendViaBrowser(eventPayload as SendViaBrowserArgs)
+    else if (eventName === 'sendBatchViaBrowser')
+      this.sendBatchViaBrowser(eventPayload as SendBatchViaBrowserArgs)
+    else if (eventName === 'createVersionViaBrowser')
+      this.createVersionViaBrowser(eventPayload as CreateVersionViaBrowserArgs)
+    else if (eventName === 'receiveViaBrowser')
+      this.receiveViaBrowser(eventPayload as ReceiveViaBrowserArgs)
+
+    return this.emitter.emit(eventName, eventPayload)
+  }
+
+  private async receiveViaBrowser(eventPayload: ReceiveViaBrowserArgs) {
+    const accountStore = useAccountStore()
+    const hostAppStore = useHostAppStore()
+    const { accounts } = storeToRefs(accountStore)
+    const account = accounts.value.find(
+      (acc) => acc.accountInfo.id === eventPayload.accountId
+    )
+    provideApolloClient((account as DUIAccount).client)
+
+    // useQuery cannot use in outside of VueComponent.
+    const result = await (account as DUIAccount).client.query({
+      query: versionDetailsQuery,
+      variables: {
+        projectId: eventPayload.projectId,
+        versionId: eventPayload.selectedVersionId,
+        modelId: eventPayload.modelId
+      }
+    })
+
+    const loader = new ObjectLoader({
+      serverUrl: account?.accountInfo.serverInfo.url as string,
+      token: account?.accountInfo.token as string,
+      streamId: eventPayload.projectId,
+      objectId: result.data.project.model.version.referencedObject
+    })
+
+    const updateProgress = (e: {
+      stage: ProgressStage
+      current: number
+      total: number
+    }) => {
+      const progress = e.current / e.total
+      hostAppStore.handleModelProgressEvents({
+        modelCardId: eventPayload.modelCardId,
+        progress: { status: 'Downloading', progress }
+      })
+    }
+
+    // eslint-disable-next-line @typescript-eslint/await-thenable
+    const rootObj = await loader.getAndConstructObject(updateProgress)
+    const args = [
+      eventPayload.modelCardId,
+      result.data.project.model.version.sourceApplication,
+      rootObj
+    ]
+
+    const markReceived = provideApolloClient((account as DUIAccount).client)(() =>
+      useMutation(markReceivedVersionMutation)
+    )
+
+    await markReceived.mutate({
+      input: {
+        versionId: eventPayload.selectedVersionId,
+        projectId: eventPayload.projectId,
+        sourceApplication: 'sketchup'
+      }
+    })
+
+    hostAppStore.handleModelProgressEvents({
+      modelCardId: eventPayload.modelCardId,
+      progress: {
+        status: 'Conversion has started, SketchUp may be unresponsive for a while.'
+      }
+    })
+
+    // CONVERSION WILL START AFTER THAT
+    await this.runMethod('afterGetObjects', args as unknown as unknown[])
+  }
+
+  /**
+   * Internal sketchup method for sending batch data via the browser.
+   * @param eventPayload
+   */
+  private async sendBatchViaBrowser(eventPayload: SendBatchViaBrowserArgs) {
+    const {
+      serverUrl,
+      token,
+      projectId,
+      modelCardId,
+      batch,
+      totalBatch,
+      currentBatch,
+      referencedObjectId
+    } = eventPayload
+    this.emit('setModelProgress', {
+      modelCardId,
+      progress: {
+        status: 'Uploading',
+        progress: currentBatch / totalBatch
+      }
+    } as unknown as string)
+    const formData = new FormData()
+    formData.append(`batch-1`, new Blob([batch], { type: 'application/json' }))
+    await fetch(`${serverUrl}/objects/${projectId}`, {
+      method: 'POST',
+      headers: { Authorization: 'Bearer ' + token },
+      body: formData
+    })
+
+    if (currentBatch === totalBatch) {
+      const args = [eventPayload.modelCardId, referencedObjectId]
+      await this.runMethod('afterSendObjects', args as unknown as unknown[])
+    }
+  }
+
+  private async createVersionViaBrowser(eventPayload: CreateVersionViaBrowserArgs) {
+    const {
+      projectId,
+      accountId,
+      modelId,
+      modelCardId,
+      referencedObjectId,
+      message,
+      sendConversionResults
+    } = eventPayload
+    const args: CreateVersionArgs = {
+      modelCardId,
+      projectId,
+      modelId,
+      accountId,
+      referencedObjectId,
+      sourceApplication: 'sketchup',
+      message: message || 'send from sketchup'
+    }
+    const versionId = await this.createVersion(args)
+    const hostAppStore = useHostAppStore()
+    // TODO: Alignment needed
+    hostAppStore.setModelSendResult({
+      modelCardId: args.modelCardId,
+      versionId: versionId as string,
+      sendConversionResults
+    })
+  }
+
+  /**
+   * Internal sketchup method for sending data via the browser.
+   * @param eventPayload
+   * @deprecated replaced with sendBatchViaBrowser. NOTE: remove completely!
+   */
+  private async sendViaBrowser(eventPayload: SendViaBrowserArgs) {
+    const {
+      serverUrl,
+      token,
+      projectId,
+      accountId,
+      modelId,
+      modelCardId,
+      sendObject,
+      sendConversionResults,
+      message
+    } = eventPayload
+    this.emit('setModelProgress', {
+      modelCardId,
+      progress: {
+        status: 'Uploading',
+        progress: 0
+      }
+    } as unknown as string)
+    // TODO: More of a question: why are we not sending multiple batches at once?
+    // What's in a batch? etc. To look at optmizing this and not blocking the
+    // main thread.
+    const promises = [] as Promise<Response>[]
+    sendObject.batches.forEach((batch) => {
+      const formData = new FormData()
+      formData.append(`batch-1`, new Blob([batch], { type: 'application/json' }))
+      promises.push(
+        fetch(`${serverUrl}/objects/${projectId}`, {
+          method: 'POST',
+          headers: { Authorization: 'Bearer ' + token },
+          body: formData
+        })
+      )
+    })
+    await Promise.all(promises)
+
+    const args: CreateVersionArgs = {
+      modelCardId,
+      projectId,
+      modelId,
+      accountId,
+      referencedObjectId: sendObject.id,
+      sourceApplication: 'sketchup',
+      message: message || 'send from sketchup'
+    }
+    const versionId = await this.createVersion(args)
+
+    const hostAppStore = useHostAppStore()
+    // TODO: Alignment needed
+    hostAppStore.setModelSendResult({
+      modelCardId: args.modelCardId,
+      versionId: versionId as string,
+      sendConversionResults
+    })
+  }
+
+  public async createVersion(args: CreateVersionArgs) {
+    const accountStore = useAccountStore()
+    const { accounts } = storeToRefs(accountStore)
+    const account = accounts.value.find((acc) => acc.accountInfo.id === args.accountId)
+
+    const createVersion = provideApolloClient((account as DUIAccount).client)(() =>
+      useMutation(createVersionMutation)
+    )
+
+    const result = await createVersion.mutate({
+      input: {
+        modelId: args.modelId,
+        objectId: args.referencedObjectId,
+        sourceApplication: 'sketchup',
+        projectId: args.projectId
+      }
+    })
+    return result?.data?.versionMutations?.create?.id
   }
 
   public async create(): Promise<boolean> {
     // Initialization continues in the receiveCommandsAndInitializeBridge function,
     // where we expect sketchup to return to us the command names for related bindings/views.
-    sketchup.getCommands(this.bindingName)
+    sketchup.getBindingsMethodNames(this.bindingName)
 
     //
     try {
@@ -116,12 +378,15 @@ export class SketchupBridge extends BaseBridge {
       this.requests[requestId] = {
         resolve,
         reject,
-        rejectTimerId: window.setTimeout(() => {
-          reject(
-            `Sketchup response timed out - did not receive anything back in good time (${this.TIMEOUT_MS}ms).`
-          )
-          delete this.requests[requestId]
-        }, this.TIMEOUT_MS)
+        rejectTimerId: window.setTimeout(
+          () => {
+            reject(
+              `Sketchup response timed out for ${methodName} - did not receive anything back in good time (${this.TIMEOUT_MS}ms).`
+            )
+            delete this.requests[requestId]
+          },
+          this.NON_TIMEOUT_METHODS.includes(methodName) ? 3600000 : this.TIMEOUT_MS
+        )
       }
     })
   }
@@ -136,6 +401,7 @@ export class SketchupBridge extends BaseBridge {
       // eslint-disable-next-line no-prototype-builtins
       if (data && data.hasOwnProperty('error')) {
         console.error(data)
+        this.emitter.emit('errorOnResponse', JSON.stringify(data))
         throw new Error(
           `Failed to run ${requestId}. The host app error is logged above.`
         )
@@ -158,4 +424,8 @@ export class SketchupBridge extends BaseBridge {
       'Sketchup cannot do this. The dev tools menu is accessible via a right click.'
     )
   }
+
+  public openUrl(url: string) {
+    window.open(url)
+  }
 }
diff --git a/packages/dui3/lib/common/generated/gql/gql.ts b/packages/dui3/lib/common/generated/gql/gql.ts
index 5b13f70364..050230f7b4 100644
--- a/packages/dui3/lib/common/generated/gql/gql.ts
+++ b/packages/dui3/lib/common/generated/gql/gql.ts
@@ -13,7 +13,39 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-    "\n      query AcccountTestQuery {\n        serverInfo {\n          version\n          name\n          company\n        }\n      }\n    ": types.AcccountTestQueryDocument,
+    "\n  mutation VersionMutations($input: CreateVersionInput!) {\n    versionMutations {\n      create(input: $input) {\n        id\n      }\n    }\n  }\n": types.VersionMutationsDocument,
+    "\n  mutation MarkReceivedVersion($input: MarkReceivedVersionInput!) {\n    versionMutations {\n      markReceived(input: $input)\n    }\n  }\n": types.MarkReceivedVersionDocument,
+    "\n  mutation CreateModel($input: CreateModelInput!) {\n    modelMutations {\n      create(input: $input) {\n        ...ModelListModelItem\n      }\n    }\n  }\n": types.CreateModelDocument,
+    "\n  mutation CreateProject($input: ProjectCreateInput) {\n    projectMutations {\n      create(input: $input) {\n        ...ProjectListProjectItem\n      }\n    }\n  }\n": types.CreateProjectDocument,
+    "\n  mutation CreateProjectInWorkspace($input: WorkspaceProjectCreateInput!) {\n    workspaceMutations {\n      projects {\n        create(input: $input) {\n          ...ProjectListProjectItem\n        }\n      }\n    }\n  }\n": types.CreateProjectInWorkspaceDocument,
+    "\n  mutation StreamAccessRequestCreate($input: String!) {\n    streamAccessRequestCreate(streamId: $input) {\n      id\n    }\n  }\n": types.StreamAccessRequestCreateDocument,
+    "\n  fragment WorkspaceListWorkspaceItem on Workspace {\n    id\n    name\n    description\n    createdAt\n    updatedAt\n    logo\n    role\n    readOnly\n  }\n": types.WorkspaceListWorkspaceItemFragmentDoc,
+    "\n  fragment AutomateFunctionItem on AutomateFunction {\n    name\n    isFeatured\n    id\n    creator {\n      name\n    }\n    releases {\n      items {\n        inputSchema\n      }\n    }\n  }\n": types.AutomateFunctionItemFragmentDoc,
+    "\n  mutation CreateAutomation($projectId: ID!, $input: ProjectAutomationCreateInput!) {\n    projectMutations {\n      automationMutations(projectId: $projectId) {\n        create(input: $input) {\n          id\n          name\n        }\n      }\n    }\n  }\n": types.CreateAutomationDocument,
+    "\n  fragment AutomateFunctionRunItem on AutomateFunctionRun {\n    id\n    status\n    statusMessage\n    results\n    contextView\n    function {\n      id\n      name\n      logo\n    }\n  }\n": types.AutomateFunctionRunItemFragmentDoc,
+    "\n  fragment AutomationRunItem on AutomateRun {\n    id\n    status\n    automation {\n      id\n      name\n    }\n    functionRuns {\n      ...AutomateFunctionRunItem\n    }\n  }\n": types.AutomationRunItemFragmentDoc,
+    "\n  query AutomationStatus($projectId: String!, $modelId: String!) {\n    project(id: $projectId) {\n      model(id: $modelId) {\n        automationsStatus {\n          id\n          status\n          automationRuns {\n            ...AutomationRunItem\n          }\n        }\n      }\n    }\n  }\n": types.AutomationStatusDocument,
+    "\n  query WorkspaceListQuery(\n    $limit: Int!\n    $filter: UserWorkspacesFilter\n    $cursor: String\n  ) {\n    activeUser {\n      id\n      workspaces(limit: $limit, filter: $filter, cursor: $cursor) {\n        totalCount\n        cursor\n        items {\n          ...WorkspaceListWorkspaceItem\n        }\n      }\n    }\n  }\n": types.WorkspaceListQueryDocument,
+    "\n  fragment ProjectListProjectItem on Project {\n    id\n    name\n    role\n    updatedAt\n    workspaceId\n    models {\n      totalCount\n    }\n  }\n": types.ProjectListProjectItemFragmentDoc,
+    "\n  query ProjectListQuery($limit: Int!, $filter: UserProjectsFilter, $cursor: String) {\n    activeUser {\n      id\n      projects(limit: $limit, filter: $filter, cursor: $cursor) {\n        totalCount\n        cursor\n        items {\n          ...ProjectListProjectItem\n        }\n      }\n    }\n  }\n": types.ProjectListQueryDocument,
+    "\n  fragment ModelListModelItem on Model {\n    displayName\n    name\n    id\n    previewUrl\n    updatedAt\n    versions(limit: 1) {\n      totalCount\n      items {\n        ...VersionListItem\n      }\n    }\n  }\n": types.ModelListModelItemFragmentDoc,
+    "\n  query ProjectModels(\n    $projectId: String!\n    $cursor: String\n    $limit: Int!\n    $filter: ProjectModelsFilter\n  ) {\n    project(id: $projectId) {\n      id\n      models(cursor: $cursor, limit: $limit, filter: $filter) {\n        totalCount\n        cursor\n        items {\n          ...ModelListModelItem\n        }\n      }\n    }\n  }\n": types.ProjectModelsDocument,
+    "\n  fragment VersionListItem on Version {\n    id\n    referencedObject\n    message\n    sourceApplication\n    authorUser {\n      avatar\n      id\n      name\n    }\n    createdAt\n    previewUrl\n  }\n": types.VersionListItemFragmentDoc,
+    "\n  query ModelVersions(\n    $modelId: String!\n    $projectId: String!\n    $limit: Int!\n    $cursor: String\n    $filter: ModelVersionsFilter\n  ) {\n    project(id: $projectId) {\n      id\n      model(id: $modelId) {\n        id\n        versions(limit: $limit, cursor: $cursor, filter: $filter) {\n          totalCount\n          cursor\n          items {\n            ...VersionListItem\n          }\n        }\n      }\n    }\n  }\n": types.ModelVersionsDocument,
+    "\n  query ObjectQuery($projectId: String!, $objectId: String!) {\n    project(id: $projectId) {\n      object(id: $objectId) {\n        id\n        data\n      }\n    }\n  }\n": types.ObjectQueryDocument,
+    "\n  query ProjectAddByUrlQueryWithVersion(\n    $projectId: String!\n    $modelId: String!\n    $versionId: String!\n  ) {\n    project(id: $projectId) {\n      ...ProjectListProjectItem\n      model(id: $modelId) {\n        ...ModelListModelItem\n        version(id: $versionId) {\n          ...VersionListItem\n        }\n      }\n    }\n  }\n": types.ProjectAddByUrlQueryWithVersionDocument,
+    "\n  query ProjectAddByUrlQueryWithoutVersion($projectId: String!, $modelId: String!) {\n    project(id: $projectId) {\n      ...ProjectListProjectItem\n      model(id: $modelId) {\n        ...ModelListModelItem\n      }\n    }\n  }\n": types.ProjectAddByUrlQueryWithoutVersionDocument,
+    "\n  query ProjectDetails($projectId: String!) {\n    project(id: $projectId) {\n      id\n      role\n      name\n      workspace {\n        slug\n        readOnly\n      }\n      team {\n        user {\n          avatar\n          id\n          name\n        }\n      }\n      visibility\n    }\n  }\n": types.ProjectDetailsDocument,
+    "\n  query AutomateFunctions {\n    automateFunctions {\n      items {\n        ...AutomateFunctionItem\n      }\n    }\n  }\n": types.AutomateFunctionsDocument,
+    "\n  query ModelDetails($modelId: String!, $projectId: String!) {\n    project(id: $projectId) {\n      id\n      name\n      model(id: $modelId) {\n        id\n        displayName\n        name\n        versions {\n          totalCount\n          items {\n            id\n          }\n        }\n        author {\n          id\n          name\n          avatar\n        }\n      }\n    }\n  }\n": types.ModelDetailsDocument,
+    "\n  query VersionDetails($projectId: String!, $versionId: String!, $modelId: String!) {\n    project(id: $projectId) {\n      id\n      name\n      model(id: $modelId) {\n        id\n        name\n        versions(limit: 1) {\n          items {\n            id\n            createdAt\n            sourceApplication\n            authorUser {\n              id\n            }\n          }\n        }\n        version(id: $versionId) {\n          id\n          referencedObject\n          message\n          sourceApplication\n          createdAt\n          previewUrl\n        }\n      }\n    }\n  }\n": types.VersionDetailsDocument,
+    "\n  query ServerInfo {\n    serverInfo {\n      workspaces {\n        workspacesEnabled\n      }\n    }\n  }\n": types.ServerInfoDocument,
+    "\n  subscription OnProjectVersionsUpdate($projectId: String!) {\n    projectVersionsUpdated(id: $projectId) {\n      id\n      type\n      version {\n        id\n        createdAt\n        message\n        sourceApplication\n        authorUser {\n          id\n          name\n          avatar\n        }\n        model {\n          id\n          name\n          displayName\n        }\n      }\n    }\n  }\n": types.OnProjectVersionsUpdateDocument,
+    "\n  subscription ProjectTriggeredAutomationsStatusUpdated($projectId: String!) {\n    projectTriggeredAutomationsStatusUpdated(projectId: $projectId) {\n      type\n      version {\n        id\n      }\n      model {\n        id\n      }\n      project {\n        id\n      }\n      run {\n        ...AutomationRunItem\n      }\n    }\n  }\n": types.ProjectTriggeredAutomationsStatusUpdatedDocument,
+    "\n  subscription OnUserProjectsUpdated {\n    userProjectsUpdated {\n      id\n      project {\n        id\n        visibility\n        team {\n          id\n          role\n        }\n      }\n    }\n  }\n": types.OnUserProjectsUpdatedDocument,
+    "\n  subscription ProjectUpdated($projectId: String!) {\n    projectUpdated(id: $projectId) {\n      id\n      project {\n        visibility\n      }\n    }\n  }\n": types.ProjectUpdatedDocument,
+    "\n  subscription Subscription($target: ViewerUpdateTrackingTarget!) {\n    viewerUserActivityBroadcasted(target: $target) {\n      userName\n      userId\n      sessionId\n      user {\n        name\n        id\n        avatar\n      }\n      status\n    }\n  }\n": types.SubscriptionDocument,
+    "\n  subscription ProjectCommentsUpdated($target: ViewerUpdateTrackingTarget!) {\n    projectCommentsUpdated(target: $target) {\n      comment {\n        author {\n          avatar\n          id\n          name\n        }\n        id\n        hasParent\n        parent {\n          id\n        }\n      }\n      type\n    }\n  }\n": types.ProjectCommentsUpdatedDocument,
 };
 
 /**
@@ -33,7 +65,135 @@ export function graphql(source: string): unknown;
 /**
  * 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 AcccountTestQuery {\n        serverInfo {\n          version\n          name\n          company\n        }\n      }\n    "): (typeof documents)["\n      query AcccountTestQuery {\n        serverInfo {\n          version\n          name\n          company\n        }\n      }\n    "];
+export function graphql(source: "\n  mutation VersionMutations($input: CreateVersionInput!) {\n    versionMutations {\n      create(input: $input) {\n        id\n      }\n    }\n  }\n"): (typeof documents)["\n  mutation VersionMutations($input: CreateVersionInput!) {\n    versionMutations {\n      create(input: $input) {\n        id\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  mutation MarkReceivedVersion($input: MarkReceivedVersionInput!) {\n    versionMutations {\n      markReceived(input: $input)\n    }\n  }\n"): (typeof documents)["\n  mutation MarkReceivedVersion($input: MarkReceivedVersionInput!) {\n    versionMutations {\n      markReceived(input: $input)\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  mutation CreateModel($input: CreateModelInput!) {\n    modelMutations {\n      create(input: $input) {\n        ...ModelListModelItem\n      }\n    }\n  }\n"): (typeof documents)["\n  mutation CreateModel($input: CreateModelInput!) {\n    modelMutations {\n      create(input: $input) {\n        ...ModelListModelItem\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  mutation CreateProject($input: ProjectCreateInput) {\n    projectMutations {\n      create(input: $input) {\n        ...ProjectListProjectItem\n      }\n    }\n  }\n"): (typeof documents)["\n  mutation CreateProject($input: ProjectCreateInput) {\n    projectMutations {\n      create(input: $input) {\n        ...ProjectListProjectItem\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  mutation CreateProjectInWorkspace($input: WorkspaceProjectCreateInput!) {\n    workspaceMutations {\n      projects {\n        create(input: $input) {\n          ...ProjectListProjectItem\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  mutation CreateProjectInWorkspace($input: WorkspaceProjectCreateInput!) {\n    workspaceMutations {\n      projects {\n        create(input: $input) {\n          ...ProjectListProjectItem\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  mutation StreamAccessRequestCreate($input: String!) {\n    streamAccessRequestCreate(streamId: $input) {\n      id\n    }\n  }\n"): (typeof documents)["\n  mutation StreamAccessRequestCreate($input: String!) {\n    streamAccessRequestCreate(streamId: $input) {\n      id\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 WorkspaceListWorkspaceItem on Workspace {\n    id\n    name\n    description\n    createdAt\n    updatedAt\n    logo\n    role\n    readOnly\n  }\n"): (typeof documents)["\n  fragment WorkspaceListWorkspaceItem on Workspace {\n    id\n    name\n    description\n    createdAt\n    updatedAt\n    logo\n    role\n    readOnly\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 AutomateFunctionItem on AutomateFunction {\n    name\n    isFeatured\n    id\n    creator {\n      name\n    }\n    releases {\n      items {\n        inputSchema\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment AutomateFunctionItem on AutomateFunction {\n    name\n    isFeatured\n    id\n    creator {\n      name\n    }\n    releases {\n      items {\n        inputSchema\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  mutation CreateAutomation($projectId: ID!, $input: ProjectAutomationCreateInput!) {\n    projectMutations {\n      automationMutations(projectId: $projectId) {\n        create(input: $input) {\n          id\n          name\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  mutation CreateAutomation($projectId: ID!, $input: ProjectAutomationCreateInput!) {\n    projectMutations {\n      automationMutations(projectId: $projectId) {\n        create(input: $input) {\n          id\n          name\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 AutomateFunctionRunItem on AutomateFunctionRun {\n    id\n    status\n    statusMessage\n    results\n    contextView\n    function {\n      id\n      name\n      logo\n    }\n  }\n"): (typeof documents)["\n  fragment AutomateFunctionRunItem on AutomateFunctionRun {\n    id\n    status\n    statusMessage\n    results\n    contextView\n    function {\n      id\n      name\n      logo\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 AutomationRunItem on AutomateRun {\n    id\n    status\n    automation {\n      id\n      name\n    }\n    functionRuns {\n      ...AutomateFunctionRunItem\n    }\n  }\n"): (typeof documents)["\n  fragment AutomationRunItem on AutomateRun {\n    id\n    status\n    automation {\n      id\n      name\n    }\n    functionRuns {\n      ...AutomateFunctionRunItem\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 AutomationStatus($projectId: String!, $modelId: String!) {\n    project(id: $projectId) {\n      model(id: $modelId) {\n        automationsStatus {\n          id\n          status\n          automationRuns {\n            ...AutomationRunItem\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query AutomationStatus($projectId: String!, $modelId: String!) {\n    project(id: $projectId) {\n      model(id: $modelId) {\n        automationsStatus {\n          id\n          status\n          automationRuns {\n            ...AutomationRunItem\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  query WorkspaceListQuery(\n    $limit: Int!\n    $filter: UserWorkspacesFilter\n    $cursor: String\n  ) {\n    activeUser {\n      id\n      workspaces(limit: $limit, filter: $filter, cursor: $cursor) {\n        totalCount\n        cursor\n        items {\n          ...WorkspaceListWorkspaceItem\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query WorkspaceListQuery(\n    $limit: Int!\n    $filter: UserWorkspacesFilter\n    $cursor: String\n  ) {\n    activeUser {\n      id\n      workspaces(limit: $limit, filter: $filter, cursor: $cursor) {\n        totalCount\n        cursor\n        items {\n          ...WorkspaceListWorkspaceItem\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 ProjectListProjectItem on Project {\n    id\n    name\n    role\n    updatedAt\n    workspaceId\n    models {\n      totalCount\n    }\n  }\n"): (typeof documents)["\n  fragment ProjectListProjectItem on Project {\n    id\n    name\n    role\n    updatedAt\n    workspaceId\n    models {\n      totalCount\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 ProjectListQuery($limit: Int!, $filter: UserProjectsFilter, $cursor: String) {\n    activeUser {\n      id\n      projects(limit: $limit, filter: $filter, cursor: $cursor) {\n        totalCount\n        cursor\n        items {\n          ...ProjectListProjectItem\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query ProjectListQuery($limit: Int!, $filter: UserProjectsFilter, $cursor: String) {\n    activeUser {\n      id\n      projects(limit: $limit, filter: $filter, cursor: $cursor) {\n        totalCount\n        cursor\n        items {\n          ...ProjectListProjectItem\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 ModelListModelItem on Model {\n    displayName\n    name\n    id\n    previewUrl\n    updatedAt\n    versions(limit: 1) {\n      totalCount\n      items {\n        ...VersionListItem\n      }\n    }\n  }\n"): (typeof documents)["\n  fragment ModelListModelItem on Model {\n    displayName\n    name\n    id\n    previewUrl\n    updatedAt\n    versions(limit: 1) {\n      totalCount\n      items {\n        ...VersionListItem\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 ProjectModels(\n    $projectId: String!\n    $cursor: String\n    $limit: Int!\n    $filter: ProjectModelsFilter\n  ) {\n    project(id: $projectId) {\n      id\n      models(cursor: $cursor, limit: $limit, filter: $filter) {\n        totalCount\n        cursor\n        items {\n          ...ModelListModelItem\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query ProjectModels(\n    $projectId: String!\n    $cursor: String\n    $limit: Int!\n    $filter: ProjectModelsFilter\n  ) {\n    project(id: $projectId) {\n      id\n      models(cursor: $cursor, limit: $limit, filter: $filter) {\n        totalCount\n        cursor\n        items {\n          ...ModelListModelItem\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 VersionListItem on Version {\n    id\n    referencedObject\n    message\n    sourceApplication\n    authorUser {\n      avatar\n      id\n      name\n    }\n    createdAt\n    previewUrl\n  }\n"): (typeof documents)["\n  fragment VersionListItem on Version {\n    id\n    referencedObject\n    message\n    sourceApplication\n    authorUser {\n      avatar\n      id\n      name\n    }\n    createdAt\n    previewUrl\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 ModelVersions(\n    $modelId: String!\n    $projectId: String!\n    $limit: Int!\n    $cursor: String\n    $filter: ModelVersionsFilter\n  ) {\n    project(id: $projectId) {\n      id\n      model(id: $modelId) {\n        id\n        versions(limit: $limit, cursor: $cursor, filter: $filter) {\n          totalCount\n          cursor\n          items {\n            ...VersionListItem\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query ModelVersions(\n    $modelId: String!\n    $projectId: String!\n    $limit: Int!\n    $cursor: String\n    $filter: ModelVersionsFilter\n  ) {\n    project(id: $projectId) {\n      id\n      model(id: $modelId) {\n        id\n        versions(limit: $limit, cursor: $cursor, filter: $filter) {\n          totalCount\n          cursor\n          items {\n            ...VersionListItem\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  query ObjectQuery($projectId: String!, $objectId: String!) {\n    project(id: $projectId) {\n      object(id: $objectId) {\n        id\n        data\n      }\n    }\n  }\n"): (typeof documents)["\n  query ObjectQuery($projectId: String!, $objectId: String!) {\n    project(id: $projectId) {\n      object(id: $objectId) {\n        id\n        data\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 ProjectAddByUrlQueryWithVersion(\n    $projectId: String!\n    $modelId: String!\n    $versionId: String!\n  ) {\n    project(id: $projectId) {\n      ...ProjectListProjectItem\n      model(id: $modelId) {\n        ...ModelListModelItem\n        version(id: $versionId) {\n          ...VersionListItem\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query ProjectAddByUrlQueryWithVersion(\n    $projectId: String!\n    $modelId: String!\n    $versionId: String!\n  ) {\n    project(id: $projectId) {\n      ...ProjectListProjectItem\n      model(id: $modelId) {\n        ...ModelListModelItem\n        version(id: $versionId) {\n          ...VersionListItem\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  query ProjectAddByUrlQueryWithoutVersion($projectId: String!, $modelId: String!) {\n    project(id: $projectId) {\n      ...ProjectListProjectItem\n      model(id: $modelId) {\n        ...ModelListModelItem\n      }\n    }\n  }\n"): (typeof documents)["\n  query ProjectAddByUrlQueryWithoutVersion($projectId: String!, $modelId: String!) {\n    project(id: $projectId) {\n      ...ProjectListProjectItem\n      model(id: $modelId) {\n        ...ModelListModelItem\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 ProjectDetails($projectId: String!) {\n    project(id: $projectId) {\n      id\n      role\n      name\n      workspace {\n        slug\n        readOnly\n      }\n      team {\n        user {\n          avatar\n          id\n          name\n        }\n      }\n      visibility\n    }\n  }\n"): (typeof documents)["\n  query ProjectDetails($projectId: String!) {\n    project(id: $projectId) {\n      id\n      role\n      name\n      workspace {\n        slug\n        readOnly\n      }\n      team {\n        user {\n          avatar\n          id\n          name\n        }\n      }\n      visibility\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 AutomateFunctions {\n    automateFunctions {\n      items {\n        ...AutomateFunctionItem\n      }\n    }\n  }\n"): (typeof documents)["\n  query AutomateFunctions {\n    automateFunctions {\n      items {\n        ...AutomateFunctionItem\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 ModelDetails($modelId: String!, $projectId: String!) {\n    project(id: $projectId) {\n      id\n      name\n      model(id: $modelId) {\n        id\n        displayName\n        name\n        versions {\n          totalCount\n          items {\n            id\n          }\n        }\n        author {\n          id\n          name\n          avatar\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query ModelDetails($modelId: String!, $projectId: String!) {\n    project(id: $projectId) {\n      id\n      name\n      model(id: $modelId) {\n        id\n        displayName\n        name\n        versions {\n          totalCount\n          items {\n            id\n          }\n        }\n        author {\n          id\n          name\n          avatar\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  query VersionDetails($projectId: String!, $versionId: String!, $modelId: String!) {\n    project(id: $projectId) {\n      id\n      name\n      model(id: $modelId) {\n        id\n        name\n        versions(limit: 1) {\n          items {\n            id\n            createdAt\n            sourceApplication\n            authorUser {\n              id\n            }\n          }\n        }\n        version(id: $versionId) {\n          id\n          referencedObject\n          message\n          sourceApplication\n          createdAt\n          previewUrl\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query VersionDetails($projectId: String!, $versionId: String!, $modelId: String!) {\n    project(id: $projectId) {\n      id\n      name\n      model(id: $modelId) {\n        id\n        name\n        versions(limit: 1) {\n          items {\n            id\n            createdAt\n            sourceApplication\n            authorUser {\n              id\n            }\n          }\n        }\n        version(id: $versionId) {\n          id\n          referencedObject\n          message\n          sourceApplication\n          createdAt\n          previewUrl\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  query ServerInfo {\n    serverInfo {\n      workspaces {\n        workspacesEnabled\n      }\n    }\n  }\n"): (typeof documents)["\n  query ServerInfo {\n    serverInfo {\n      workspaces {\n        workspacesEnabled\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  subscription OnProjectVersionsUpdate($projectId: String!) {\n    projectVersionsUpdated(id: $projectId) {\n      id\n      type\n      version {\n        id\n        createdAt\n        message\n        sourceApplication\n        authorUser {\n          id\n          name\n          avatar\n        }\n        model {\n          id\n          name\n          displayName\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  subscription OnProjectVersionsUpdate($projectId: String!) {\n    projectVersionsUpdated(id: $projectId) {\n      id\n      type\n      version {\n        id\n        createdAt\n        message\n        sourceApplication\n        authorUser {\n          id\n          name\n          avatar\n        }\n        model {\n          id\n          name\n          displayName\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  subscription ProjectTriggeredAutomationsStatusUpdated($projectId: String!) {\n    projectTriggeredAutomationsStatusUpdated(projectId: $projectId) {\n      type\n      version {\n        id\n      }\n      model {\n        id\n      }\n      project {\n        id\n      }\n      run {\n        ...AutomationRunItem\n      }\n    }\n  }\n"): (typeof documents)["\n  subscription ProjectTriggeredAutomationsStatusUpdated($projectId: String!) {\n    projectTriggeredAutomationsStatusUpdated(projectId: $projectId) {\n      type\n      version {\n        id\n      }\n      model {\n        id\n      }\n      project {\n        id\n      }\n      run {\n        ...AutomationRunItem\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  subscription OnUserProjectsUpdated {\n    userProjectsUpdated {\n      id\n      project {\n        id\n        visibility\n        team {\n          id\n          role\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  subscription OnUserProjectsUpdated {\n    userProjectsUpdated {\n      id\n      project {\n        id\n        visibility\n        team {\n          id\n          role\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  subscription ProjectUpdated($projectId: String!) {\n    projectUpdated(id: $projectId) {\n      id\n      project {\n        visibility\n      }\n    }\n  }\n"): (typeof documents)["\n  subscription ProjectUpdated($projectId: String!) {\n    projectUpdated(id: $projectId) {\n      id\n      project {\n        visibility\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  subscription Subscription($target: ViewerUpdateTrackingTarget!) {\n    viewerUserActivityBroadcasted(target: $target) {\n      userName\n      userId\n      sessionId\n      user {\n        name\n        id\n        avatar\n      }\n      status\n    }\n  }\n"): (typeof documents)["\n  subscription Subscription($target: ViewerUpdateTrackingTarget!) {\n    viewerUserActivityBroadcasted(target: $target) {\n      userName\n      userId\n      sessionId\n      user {\n        name\n        id\n        avatar\n      }\n      status\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  subscription ProjectCommentsUpdated($target: ViewerUpdateTrackingTarget!) {\n    projectCommentsUpdated(target: $target) {\n      comment {\n        author {\n          avatar\n          id\n          name\n        }\n        id\n        hasParent\n        parent {\n          id\n        }\n      }\n      type\n    }\n  }\n"): (typeof documents)["\n  subscription ProjectCommentsUpdated($target: ViewerUpdateTrackingTarget!) {\n    projectCommentsUpdated(target: $target) {\n      comment {\n        author {\n          avatar\n          id\n          name\n        }\n        id\n        hasParent\n        parent {\n          id\n        }\n      }\n      type\n    }\n  }\n"];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};
diff --git a/packages/dui3/lib/common/generated/gql/graphql.ts b/packages/dui3/lib/common/generated/gql/graphql.ts
index c05b3c77b4..c475a9a844 100644
--- a/packages/dui3/lib/common/generated/gql/graphql.ts
+++ b/packages/dui3/lib/common/generated/gql/graphql.ts
@@ -538,6 +538,12 @@ export type BranchUpdateInput = {
   streamId: Scalars['String']['input'];
 };
 
+export type BulkUsersRetrievalInput = {
+  cursor?: InputMaybe<Scalars['String']['input']>;
+  emails: Array<Scalars['String']['input']>;
+  limit?: InputMaybe<Scalars['Int']['input']>;
+};
+
 export type CancelCheckoutSessionInput = {
   sessionId: Scalars['ID']['input'];
   workspaceId: Scalars['ID']['input'];
@@ -2450,8 +2456,8 @@ export type ProjectVersionsUpdatedMessage = {
   __typename?: 'ProjectVersionsUpdatedMessage';
   /** Version ID */
   id: Scalars['String']['output'];
-  /** Only set if version was deleted, in other scenarios can be queried from 'version' */
-  modelId?: Maybe<Scalars['String']['output']>;
+  /** Version's model ID */
+  modelId: Scalars['String']['output'];
   type: ProjectVersionsUpdatedMessageType;
   /** Null if version was deleted */
   version?: Maybe<Version>;
@@ -2578,6 +2584,8 @@ export type Query = {
   userSearch: UserSearchResultCollection;
   /** Look up server users */
   users: UserSearchResultCollection;
+  /** Look up server users with a collection of emails */
+  usersByEmail: Array<Maybe<LimitedUser>>;
   /** Validates the slug, to make sure it contains only valid characters and its not taken. */
   validateWorkspaceSlug: Scalars['Boolean']['output'];
   workspace: Workspace;
@@ -2724,6 +2732,11 @@ export type QueryUsersArgs = {
 };
 
 
+export type QueryUsersByEmailArgs = {
+  input: BulkUsersRetrievalInput;
+};
+
+
 export type QueryValidateWorkspaceSlugArgs = {
   slug: Scalars['String']['input'];
 };
@@ -3849,6 +3862,7 @@ export type UserProjectsFilter = {
   onlyWithRoles?: InputMaybe<Array<Scalars['String']['input']>>;
   /** Filter out projects by name */
   search?: InputMaybe<Scalars['String']['input']>;
+  workspaceId?: InputMaybe<Scalars['ID']['input']>;
 };
 
 export type UserProjectsUpdatedMessage = {
@@ -4152,6 +4166,8 @@ export type Workspace = {
   name: Scalars['String']['output'];
   plan?: Maybe<WorkspacePlan>;
   projects: ProjectCollection;
+  /** A Workspace is marked as readOnly if its trial period is finished or a paid plan is subscribed but payment has failed */
+  readOnly: Scalars['Boolean']['output'];
   /** Active user's role for this workspace. `null` if request is not authenticated, or the workspace is not explicitly shared with you. */
   role?: Maybe<Scalars['String']['output']>;
   slug: Scalars['String']['output'];
@@ -4590,10 +4606,246 @@ export type WorkspaceUpdatedMessage = {
   workspace: Workspace;
 };
 
-export type AcccountTestQueryQueryVariables = Exact<{ [key: string]: never; }>;
+export type VersionMutationsMutationVariables = Exact<{
+  input: CreateVersionInput;
+}>;
+
+
+export type VersionMutationsMutation = { __typename?: 'Mutation', versionMutations: { __typename?: 'VersionMutations', create: { __typename?: 'Version', id: string } } };
+
+export type MarkReceivedVersionMutationVariables = Exact<{
+  input: MarkReceivedVersionInput;
+}>;
+
+
+export type MarkReceivedVersionMutation = { __typename?: 'Mutation', versionMutations: { __typename?: 'VersionMutations', markReceived: boolean } };
 
+export type CreateModelMutationVariables = Exact<{
+  input: CreateModelInput;
+}>;
+
+
+export type CreateModelMutation = { __typename?: 'Mutation', modelMutations: { __typename?: 'ModelMutations', create: { __typename?: 'Model', displayName: string, name: string, id: string, previewUrl?: string | null, updatedAt: string, versions: { __typename?: 'VersionCollection', totalCount: number, items: Array<{ __typename?: 'Version', id: string, referencedObject: string, message?: string | null, sourceApplication?: string | null, createdAt: string, previewUrl: string, authorUser?: { __typename?: 'LimitedUser', avatar?: string | null, id: string, name: string } | null }> } } } };
+
+export type CreateProjectMutationVariables = Exact<{
+  input?: InputMaybe<ProjectCreateInput>;
+}>;
+
+
+export type CreateProjectMutation = { __typename?: 'Mutation', projectMutations: { __typename?: 'ProjectMutations', create: { __typename?: 'Project', id: string, name: string, role?: string | null, updatedAt: string, workspaceId?: string | null, models: { __typename?: 'ModelCollection', totalCount: number } } } };
+
+export type CreateProjectInWorkspaceMutationVariables = Exact<{
+  input: WorkspaceProjectCreateInput;
+}>;
+
+
+export type CreateProjectInWorkspaceMutation = { __typename?: 'Mutation', workspaceMutations: { __typename?: 'WorkspaceMutations', projects: { __typename?: 'WorkspaceProjectMutations', create: { __typename?: 'Project', id: string, name: string, role?: string | null, updatedAt: string, workspaceId?: string | null, models: { __typename?: 'ModelCollection', totalCount: number } } } } };
+
+export type StreamAccessRequestCreateMutationVariables = Exact<{
+  input: Scalars['String']['input'];
+}>;
 
-export type AcccountTestQueryQuery = { __typename?: 'Query', serverInfo: { __typename?: 'ServerInfo', version?: string | null, name: string, company?: string | null } };
 
+export type StreamAccessRequestCreateMutation = { __typename?: 'Mutation', streamAccessRequestCreate: { __typename?: 'StreamAccessRequest', id: string } };
 
-export const AcccountTestQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"AcccountTestQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"serverInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"company"}}]}}]}}]} as unknown as DocumentNode<AcccountTestQueryQuery, AcccountTestQueryQueryVariables>;
\ No newline at end of file
+export type WorkspaceListWorkspaceItemFragment = { __typename?: 'Workspace', id: string, name: string, description?: string | null, createdAt: string, updatedAt: string, logo?: string | null, role?: string | null, readOnly: boolean };
+
+export type AutomateFunctionItemFragment = { __typename?: 'AutomateFunction', name: string, isFeatured: boolean, id: string, creator?: { __typename?: 'LimitedUser', name: string } | null, releases: { __typename?: 'AutomateFunctionReleaseCollection', items: Array<{ __typename?: 'AutomateFunctionRelease', inputSchema?: {} | null }> } };
+
+export type CreateAutomationMutationVariables = Exact<{
+  projectId: Scalars['ID']['input'];
+  input: ProjectAutomationCreateInput;
+}>;
+
+
+export type CreateAutomationMutation = { __typename?: 'Mutation', projectMutations: { __typename?: 'ProjectMutations', automationMutations: { __typename?: 'ProjectAutomationMutations', create: { __typename?: 'Automation', id: string, name: string } } } };
+
+export type AutomateFunctionRunItemFragment = { __typename?: 'AutomateFunctionRun', id: string, status: AutomateRunStatus, statusMessage?: string | null, results?: {} | null, contextView?: string | null, function?: { __typename?: 'AutomateFunction', id: string, name: string, logo?: string | null } | null };
+
+export type AutomationRunItemFragment = { __typename?: 'AutomateRun', id: string, status: AutomateRunStatus, automation: { __typename?: 'Automation', id: string, name: string }, functionRuns: Array<{ __typename?: 'AutomateFunctionRun', id: string, status: AutomateRunStatus, statusMessage?: string | null, results?: {} | null, contextView?: string | null, function?: { __typename?: 'AutomateFunction', id: string, name: string, logo?: string | null } | null }> };
+
+export type AutomationStatusQueryVariables = Exact<{
+  projectId: Scalars['String']['input'];
+  modelId: Scalars['String']['input'];
+}>;
+
+
+export type AutomationStatusQuery = { __typename?: 'Query', project: { __typename?: 'Project', model: { __typename?: 'Model', automationsStatus?: { __typename?: 'TriggeredAutomationsStatus', id: string, status: AutomateRunStatus, automationRuns: Array<{ __typename?: 'AutomateRun', id: string, status: AutomateRunStatus, automation: { __typename?: 'Automation', id: string, name: string }, functionRuns: Array<{ __typename?: 'AutomateFunctionRun', id: string, status: AutomateRunStatus, statusMessage?: string | null, results?: {} | null, contextView?: string | null, function?: { __typename?: 'AutomateFunction', id: string, name: string, logo?: string | null } | null }> }> } | null } } };
+
+export type WorkspaceListQueryQueryVariables = Exact<{
+  limit: Scalars['Int']['input'];
+  filter?: InputMaybe<UserWorkspacesFilter>;
+  cursor?: InputMaybe<Scalars['String']['input']>;
+}>;
+
+
+export type WorkspaceListQueryQuery = { __typename?: 'Query', activeUser?: { __typename?: 'User', id: string, workspaces: { __typename?: 'WorkspaceCollection', totalCount: number, cursor?: string | null, items: Array<{ __typename?: 'Workspace', id: string, name: string, description?: string | null, createdAt: string, updatedAt: string, logo?: string | null, role?: string | null, readOnly: boolean }> } } | null };
+
+export type ProjectListProjectItemFragment = { __typename?: 'Project', id: string, name: string, role?: string | null, updatedAt: string, workspaceId?: string | null, models: { __typename?: 'ModelCollection', totalCount: number } };
+
+export type ProjectListQueryQueryVariables = Exact<{
+  limit: Scalars['Int']['input'];
+  filter?: InputMaybe<UserProjectsFilter>;
+  cursor?: InputMaybe<Scalars['String']['input']>;
+}>;
+
+
+export type ProjectListQueryQuery = { __typename?: 'Query', activeUser?: { __typename?: 'User', id: string, projects: { __typename?: 'UserProjectCollection', totalCount: number, cursor?: string | null, items: Array<{ __typename?: 'Project', id: string, name: string, role?: string | null, updatedAt: string, workspaceId?: string | null, models: { __typename?: 'ModelCollection', totalCount: number } }> } } | null };
+
+export type ModelListModelItemFragment = { __typename?: 'Model', displayName: string, name: string, id: string, previewUrl?: string | null, updatedAt: string, versions: { __typename?: 'VersionCollection', totalCount: number, items: Array<{ __typename?: 'Version', id: string, referencedObject: string, message?: string | null, sourceApplication?: string | null, createdAt: string, previewUrl: string, authorUser?: { __typename?: 'LimitedUser', avatar?: string | null, id: string, name: string } | null }> } };
+
+export type ProjectModelsQueryVariables = Exact<{
+  projectId: Scalars['String']['input'];
+  cursor?: InputMaybe<Scalars['String']['input']>;
+  limit: Scalars['Int']['input'];
+  filter?: InputMaybe<ProjectModelsFilter>;
+}>;
+
+
+export type ProjectModelsQuery = { __typename?: 'Query', project: { __typename?: 'Project', id: string, models: { __typename?: 'ModelCollection', totalCount: number, cursor?: string | null, items: Array<{ __typename?: 'Model', displayName: string, name: string, id: string, previewUrl?: string | null, updatedAt: string, versions: { __typename?: 'VersionCollection', totalCount: number, items: Array<{ __typename?: 'Version', id: string, referencedObject: string, message?: string | null, sourceApplication?: string | null, createdAt: string, previewUrl: string, authorUser?: { __typename?: 'LimitedUser', avatar?: string | null, id: string, name: string } | null }> } }> } } };
+
+export type VersionListItemFragment = { __typename?: 'Version', id: string, referencedObject: string, message?: string | null, sourceApplication?: string | null, createdAt: string, previewUrl: string, authorUser?: { __typename?: 'LimitedUser', avatar?: string | null, id: string, name: string } | null };
+
+export type ModelVersionsQueryVariables = Exact<{
+  modelId: Scalars['String']['input'];
+  projectId: Scalars['String']['input'];
+  limit: Scalars['Int']['input'];
+  cursor?: InputMaybe<Scalars['String']['input']>;
+  filter?: InputMaybe<ModelVersionsFilter>;
+}>;
+
+
+export type ModelVersionsQuery = { __typename?: 'Query', project: { __typename?: 'Project', id: string, model: { __typename?: 'Model', id: string, versions: { __typename?: 'VersionCollection', totalCount: number, cursor?: string | null, items: Array<{ __typename?: 'Version', id: string, referencedObject: string, message?: string | null, sourceApplication?: string | null, createdAt: string, previewUrl: string, authorUser?: { __typename?: 'LimitedUser', avatar?: string | null, id: string, name: string } | null }> } } } };
+
+export type ObjectQueryQueryVariables = Exact<{
+  projectId: Scalars['String']['input'];
+  objectId: Scalars['String']['input'];
+}>;
+
+
+export type ObjectQueryQuery = { __typename?: 'Query', project: { __typename?: 'Project', object?: { __typename?: 'Object', id: string, data?: {} | null } | null } };
+
+export type ProjectAddByUrlQueryWithVersionQueryVariables = Exact<{
+  projectId: Scalars['String']['input'];
+  modelId: Scalars['String']['input'];
+  versionId: Scalars['String']['input'];
+}>;
+
+
+export type ProjectAddByUrlQueryWithVersionQuery = { __typename?: 'Query', project: { __typename?: 'Project', id: string, name: string, role?: string | null, updatedAt: string, workspaceId?: string | null, model: { __typename?: 'Model', displayName: string, name: string, id: string, previewUrl?: string | null, updatedAt: string, version: { __typename?: 'Version', id: string, referencedObject: string, message?: string | null, sourceApplication?: string | null, createdAt: string, previewUrl: string, authorUser?: { __typename?: 'LimitedUser', avatar?: string | null, id: string, name: string } | null }, versions: { __typename?: 'VersionCollection', totalCount: number, items: Array<{ __typename?: 'Version', id: string, referencedObject: string, message?: string | null, sourceApplication?: string | null, createdAt: string, previewUrl: string, authorUser?: { __typename?: 'LimitedUser', avatar?: string | null, id: string, name: string } | null }> } }, models: { __typename?: 'ModelCollection', totalCount: number } } };
+
+export type ProjectAddByUrlQueryWithoutVersionQueryVariables = Exact<{
+  projectId: Scalars['String']['input'];
+  modelId: Scalars['String']['input'];
+}>;
+
+
+export type ProjectAddByUrlQueryWithoutVersionQuery = { __typename?: 'Query', project: { __typename?: 'Project', id: string, name: string, role?: string | null, updatedAt: string, workspaceId?: string | null, model: { __typename?: 'Model', displayName: string, name: string, id: string, previewUrl?: string | null, updatedAt: string, versions: { __typename?: 'VersionCollection', totalCount: number, items: Array<{ __typename?: 'Version', id: string, referencedObject: string, message?: string | null, sourceApplication?: string | null, createdAt: string, previewUrl: string, authorUser?: { __typename?: 'LimitedUser', avatar?: string | null, id: string, name: string } | null }> } }, models: { __typename?: 'ModelCollection', totalCount: number } } };
+
+export type ProjectDetailsQueryVariables = Exact<{
+  projectId: Scalars['String']['input'];
+}>;
+
+
+export type ProjectDetailsQuery = { __typename?: 'Query', project: { __typename?: 'Project', id: string, role?: string | null, name: string, visibility: ProjectVisibility, workspace?: { __typename?: 'Workspace', slug: string, readOnly: boolean } | null, team: Array<{ __typename?: 'ProjectCollaborator', user: { __typename?: 'LimitedUser', avatar?: string | null, id: string, name: string } }> } };
+
+export type AutomateFunctionsQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type AutomateFunctionsQuery = { __typename?: 'Query', automateFunctions: { __typename?: 'AutomateFunctionCollection', items: Array<{ __typename?: 'AutomateFunction', name: string, isFeatured: boolean, id: string, creator?: { __typename?: 'LimitedUser', name: string } | null, releases: { __typename?: 'AutomateFunctionReleaseCollection', items: Array<{ __typename?: 'AutomateFunctionRelease', inputSchema?: {} | null }> } }> } };
+
+export type ModelDetailsQueryVariables = Exact<{
+  modelId: Scalars['String']['input'];
+  projectId: Scalars['String']['input'];
+}>;
+
+
+export type ModelDetailsQuery = { __typename?: 'Query', project: { __typename?: 'Project', id: string, name: string, model: { __typename?: 'Model', id: string, displayName: string, name: string, versions: { __typename?: 'VersionCollection', totalCount: number, items: Array<{ __typename?: 'Version', id: string }> }, author: { __typename?: 'LimitedUser', id: string, name: string, avatar?: string | null } } } };
+
+export type VersionDetailsQueryVariables = Exact<{
+  projectId: Scalars['String']['input'];
+  versionId: Scalars['String']['input'];
+  modelId: Scalars['String']['input'];
+}>;
+
+
+export type VersionDetailsQuery = { __typename?: 'Query', project: { __typename?: 'Project', id: string, name: string, model: { __typename?: 'Model', id: string, name: string, versions: { __typename?: 'VersionCollection', items: Array<{ __typename?: 'Version', id: string, createdAt: string, sourceApplication?: string | null, authorUser?: { __typename?: 'LimitedUser', id: string } | null }> }, version: { __typename?: 'Version', id: string, referencedObject: string, message?: string | null, sourceApplication?: string | null, createdAt: string, previewUrl: string } } } };
+
+export type ServerInfoQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type ServerInfoQuery = { __typename?: 'Query', serverInfo: { __typename?: 'ServerInfo', workspaces: { __typename?: 'ServerWorkspacesInfo', workspacesEnabled: boolean } } };
+
+export type OnProjectVersionsUpdateSubscriptionVariables = Exact<{
+  projectId: Scalars['String']['input'];
+}>;
+
+
+export type OnProjectVersionsUpdateSubscription = { __typename?: 'Subscription', projectVersionsUpdated: { __typename?: 'ProjectVersionsUpdatedMessage', id: string, type: ProjectVersionsUpdatedMessageType, version?: { __typename?: 'Version', id: string, createdAt: string, message?: string | null, sourceApplication?: string | null, authorUser?: { __typename?: 'LimitedUser', id: string, name: string, avatar?: string | null } | null, model: { __typename?: 'Model', id: string, name: string, displayName: string } } | null } };
+
+export type ProjectTriggeredAutomationsStatusUpdatedSubscriptionVariables = Exact<{
+  projectId: Scalars['String']['input'];
+}>;
+
+
+export type ProjectTriggeredAutomationsStatusUpdatedSubscription = { __typename?: 'Subscription', projectTriggeredAutomationsStatusUpdated: { __typename?: 'ProjectTriggeredAutomationsStatusUpdatedMessage', type: ProjectTriggeredAutomationsStatusUpdatedMessageType, version: { __typename?: 'Version', id: string }, model: { __typename?: 'Model', id: string }, project: { __typename?: 'Project', id: string }, run: { __typename?: 'AutomateRun', id: string, status: AutomateRunStatus, automation: { __typename?: 'Automation', id: string, name: string }, functionRuns: Array<{ __typename?: 'AutomateFunctionRun', id: string, status: AutomateRunStatus, statusMessage?: string | null, results?: {} | null, contextView?: string | null, function?: { __typename?: 'AutomateFunction', id: string, name: string, logo?: string | null } | null }> } } };
+
+export type OnUserProjectsUpdatedSubscriptionVariables = Exact<{ [key: string]: never; }>;
+
+
+export type OnUserProjectsUpdatedSubscription = { __typename?: 'Subscription', userProjectsUpdated: { __typename?: 'UserProjectsUpdatedMessage', id: string, project?: { __typename?: 'Project', id: string, visibility: ProjectVisibility, team: Array<{ __typename?: 'ProjectCollaborator', id: string, role: string }> } | null } };
+
+export type ProjectUpdatedSubscriptionVariables = Exact<{
+  projectId: Scalars['String']['input'];
+}>;
+
+
+export type ProjectUpdatedSubscription = { __typename?: 'Subscription', projectUpdated: { __typename?: 'ProjectUpdatedMessage', id: string, project?: { __typename?: 'Project', visibility: ProjectVisibility } | null } };
+
+export type SubscriptionSubscriptionVariables = Exact<{
+  target: ViewerUpdateTrackingTarget;
+}>;
+
+
+export type SubscriptionSubscription = { __typename?: 'Subscription', viewerUserActivityBroadcasted: { __typename?: 'ViewerUserActivityMessage', userName: string, userId?: string | null, sessionId: string, status: ViewerUserActivityStatus, user?: { __typename?: 'LimitedUser', name: string, id: string, avatar?: string | null } | null } };
+
+export type ProjectCommentsUpdatedSubscriptionVariables = Exact<{
+  target: ViewerUpdateTrackingTarget;
+}>;
+
+
+export type ProjectCommentsUpdatedSubscription = { __typename?: 'Subscription', projectCommentsUpdated: { __typename?: 'ProjectCommentsUpdatedMessage', type: ProjectCommentsUpdatedMessageType, comment?: { __typename?: 'Comment', id: string, hasParent: boolean, author: { __typename?: 'LimitedUser', avatar?: string | null, id: string, name: string }, parent?: { __typename?: 'Comment', id: string } | null } | null } };
+
+export const WorkspaceListWorkspaceItemFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"WorkspaceListWorkspaceItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"logo"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"readOnly"}}]}}]} as unknown as DocumentNode<WorkspaceListWorkspaceItemFragment, unknown>;
+export const AutomateFunctionItemFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AutomateFunctionItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AutomateFunction"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"isFeatured"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"creator"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"releases"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"inputSchema"}}]}}]}}]}}]} as unknown as DocumentNode<AutomateFunctionItemFragment, unknown>;
+export const AutomateFunctionRunItemFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AutomateFunctionRunItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AutomateFunctionRun"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"statusMessage"}},{"kind":"Field","name":{"kind":"Name","value":"results"}},{"kind":"Field","name":{"kind":"Name","value":"contextView"}},{"kind":"Field","name":{"kind":"Name","value":"function"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"logo"}}]}}]}}]} as unknown as DocumentNode<AutomateFunctionRunItemFragment, unknown>;
+export const AutomationRunItemFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AutomationRunItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AutomateRun"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","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":"functionRuns"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"AutomateFunctionRunItem"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AutomateFunctionRunItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AutomateFunctionRun"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"statusMessage"}},{"kind":"Field","name":{"kind":"Name","value":"results"}},{"kind":"Field","name":{"kind":"Name","value":"contextView"}},{"kind":"Field","name":{"kind":"Name","value":"function"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"logo"}}]}}]}}]} as unknown as DocumentNode<AutomationRunItemFragment, unknown>;
+export const ProjectListProjectItemFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectListProjectItem"},"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":"name"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"workspaceId"}},{"kind":"Field","name":{"kind":"Name","value":"models"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}}]} as unknown as DocumentNode<ProjectListProjectItemFragment, unknown>;
+export const VersionListItemFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"VersionListItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Version"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"referencedObject"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"sourceApplication"}},{"kind":"Field","name":{"kind":"Name","value":"authorUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"previewUrl"}}]}}]} as unknown as DocumentNode<VersionListItemFragment, unknown>;
+export const ModelListModelItemFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ModelListModelItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Model"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"previewUrl"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"versions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"1"}}],"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":"VersionListItem"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"VersionListItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Version"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"referencedObject"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"sourceApplication"}},{"kind":"Field","name":{"kind":"Name","value":"authorUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"previewUrl"}}]}}]} as unknown as DocumentNode<ModelListModelItemFragment, unknown>;
+export const VersionMutationsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"VersionMutations"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateVersionInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"versionMutations"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"create"},"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"}}]}}]}}]}}]} as unknown as DocumentNode<VersionMutationsMutation, VersionMutationsMutationVariables>;
+export const MarkReceivedVersionDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"MarkReceivedVersion"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"MarkReceivedVersionInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"versionMutations"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"markReceived"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}]}]}}]}}]} as unknown as DocumentNode<MarkReceivedVersionMutation, MarkReceivedVersionMutationVariables>;
+export const CreateModelDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateModel"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"CreateModelInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"modelMutations"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"create"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ModelListModelItem"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"VersionListItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Version"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"referencedObject"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"sourceApplication"}},{"kind":"Field","name":{"kind":"Name","value":"authorUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"previewUrl"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ModelListModelItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Model"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"previewUrl"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"versions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"1"}}],"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":"VersionListItem"}}]}}]}}]}}]} as unknown as DocumentNode<CreateModelMutation, CreateModelMutationVariables>;
+export const CreateProjectDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateProject"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ProjectCreateInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projectMutations"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"create"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectListProjectItem"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectListProjectItem"},"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":"name"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"workspaceId"}},{"kind":"Field","name":{"kind":"Name","value":"models"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}}]} as unknown as DocumentNode<CreateProjectMutation, CreateProjectMutationVariables>;
+export const CreateProjectInWorkspaceDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateProjectInWorkspace"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"WorkspaceProjectCreateInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"workspaceMutations"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projects"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"create"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectListProjectItem"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectListProjectItem"},"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":"name"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"workspaceId"}},{"kind":"Field","name":{"kind":"Name","value":"models"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}}]} as unknown as DocumentNode<CreateProjectInWorkspaceMutation, CreateProjectInWorkspaceMutationVariables>;
+export const StreamAccessRequestCreateDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"StreamAccessRequestCreate"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"streamAccessRequestCreate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"streamId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<StreamAccessRequestCreateMutation, StreamAccessRequestCreateMutationVariables>;
+export const CreateAutomationDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateAutomation"},"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":"ProjectAutomationCreateInput"}}}}],"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":"create"},"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":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]}}]}}]} as unknown as DocumentNode<CreateAutomationMutation, CreateAutomationMutationVariables>;
+export const AutomationStatusDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"AutomationStatus"},"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":"automationsStatus"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"automationRuns"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"AutomationRunItem"}}]}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AutomateFunctionRunItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AutomateFunctionRun"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"statusMessage"}},{"kind":"Field","name":{"kind":"Name","value":"results"}},{"kind":"Field","name":{"kind":"Name","value":"contextView"}},{"kind":"Field","name":{"kind":"Name","value":"function"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"logo"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AutomationRunItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AutomateRun"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","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":"functionRuns"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"AutomateFunctionRunItem"}}]}}]}}]} as unknown as DocumentNode<AutomationStatusQuery, AutomationStatusQueryVariables>;
+export const WorkspaceListQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"WorkspaceListQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"limit"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filter"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"UserWorkspacesFilter"}}},{"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":"workspaces"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"Variable","name":{"kind":"Name","value":"limit"}}},{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filter"}}},{"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":"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":"WorkspaceListWorkspaceItem"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"WorkspaceListWorkspaceItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Workspace"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"logo"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"readOnly"}}]}}]} as unknown as DocumentNode<WorkspaceListQueryQuery, WorkspaceListQueryQueryVariables>;
+export const ProjectListQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectListQuery"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"limit"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}},{"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":"limit"},"value":{"kind":"Variable","name":{"kind":"Name","value":"limit"}}},{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filter"}}},{"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":"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":"ProjectListProjectItem"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectListProjectItem"},"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":"name"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"workspaceId"}},{"kind":"Field","name":{"kind":"Name","value":"models"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}}]} as unknown as DocumentNode<ProjectListQueryQuery, ProjectListQueryQueryVariables>;
+export const ProjectModelsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectModels"},"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"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"limit"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filter"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ProjectModelsFilter"}}}],"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":"models"},"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":"Variable","name":{"kind":"Name","value":"limit"}}},{"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":"ModelListModelItem"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"VersionListItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Version"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"referencedObject"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"sourceApplication"}},{"kind":"Field","name":{"kind":"Name","value":"authorUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"previewUrl"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ModelListModelItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Model"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"previewUrl"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"versions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"1"}}],"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":"VersionListItem"}}]}}]}}]}}]} as unknown as DocumentNode<ProjectModelsQuery, ProjectModelsQueryVariables>;
+export const ModelVersionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModelVersions"},"variableDefinitions":[{"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":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"limit"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cursor"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filter"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ModelVersionsFilter"}}}],"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":"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"}},{"kind":"Field","name":{"kind":"Name","value":"versions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"Variable","name":{"kind":"Name","value":"limit"}}},{"kind":"Argument","name":{"kind":"Name","value":"cursor"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cursor"}}},{"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":"VersionListItem"}}]}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"VersionListItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Version"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"referencedObject"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"sourceApplication"}},{"kind":"Field","name":{"kind":"Name","value":"authorUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"previewUrl"}}]}}]} as unknown as DocumentNode<ModelVersionsQuery, ModelVersionsQueryVariables>;
+export const ObjectQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ObjectQuery"},"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":"objectId"}},"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":"object"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"objectId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"data"}}]}}]}}]}}]} as unknown as DocumentNode<ObjectQueryQuery, ObjectQueryQueryVariables>;
+export const ProjectAddByUrlQueryWithVersionDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectAddByUrlQueryWithVersion"},"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":"versionId"}},"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":"ProjectListProjectItem"}},{"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":"FragmentSpread","name":{"kind":"Name","value":"ModelListModelItem"}},{"kind":"Field","name":{"kind":"Name","value":"version"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"versionId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"VersionListItem"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"VersionListItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Version"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"referencedObject"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"sourceApplication"}},{"kind":"Field","name":{"kind":"Name","value":"authorUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"previewUrl"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectListProjectItem"},"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":"name"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"workspaceId"}},{"kind":"Field","name":{"kind":"Name","value":"models"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ModelListModelItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Model"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"previewUrl"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"versions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"1"}}],"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":"VersionListItem"}}]}}]}}]}}]} as unknown as DocumentNode<ProjectAddByUrlQueryWithVersionQuery, ProjectAddByUrlQueryWithVersionQueryVariables>;
+export const ProjectAddByUrlQueryWithoutVersionDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectAddByUrlQueryWithoutVersion"},"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":"FragmentSpread","name":{"kind":"Name","value":"ProjectListProjectItem"}},{"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":"FragmentSpread","name":{"kind":"Name","value":"ModelListModelItem"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"VersionListItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Version"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"referencedObject"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"sourceApplication"}},{"kind":"Field","name":{"kind":"Name","value":"authorUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"previewUrl"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectListProjectItem"},"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":"name"}},{"kind":"Field","name":{"kind":"Name","value":"role"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"workspaceId"}},{"kind":"Field","name":{"kind":"Name","value":"models"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ModelListModelItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Model"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"previewUrl"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"versions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"1"}}],"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":"VersionListItem"}}]}}]}}]}}]} as unknown as DocumentNode<ProjectAddByUrlQueryWithoutVersionQuery, ProjectAddByUrlQueryWithoutVersionQueryVariables>;
+export const ProjectDetailsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ProjectDetails"},"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":"role"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"workspace"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"slug"}},{"kind":"Field","name":{"kind":"Name","value":"readOnly"}}]}},{"kind":"Field","name":{"kind":"Name","value":"team"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"visibility"}}]}}]}}]} as unknown as DocumentNode<ProjectDetailsQuery, ProjectDetailsQueryVariables>;
+export const AutomateFunctionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"AutomateFunctions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"automateFunctions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"AutomateFunctionItem"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AutomateFunctionItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AutomateFunction"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"isFeatured"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"creator"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"releases"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"inputSchema"}}]}}]}}]}}]} as unknown as DocumentNode<AutomateFunctionsQuery, AutomateFunctionsQueryVariables>;
+export const ModelDetailsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ModelDetails"},"variableDefinitions":[{"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":"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":"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"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"versions"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"totalCount"}},{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"author"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}}]}}]}}]}}]} as unknown as DocumentNode<ModelDetailsQuery, ModelDetailsQueryVariables>;
+export const VersionDetailsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"VersionDetails"},"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":"versionId"}},"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":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"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"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"versions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"limit"},"value":{"kind":"IntValue","value":"1"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"sourceApplication"}},{"kind":"Field","name":{"kind":"Name","value":"authorUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"version"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"versionId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"referencedObject"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"sourceApplication"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"previewUrl"}}]}}]}}]}}]}}]} as unknown as DocumentNode<VersionDetailsQuery, VersionDetailsQueryVariables>;
+export const ServerInfoDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"ServerInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"serverInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"workspaces"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"workspacesEnabled"}}]}}]}}]}}]} as unknown as DocumentNode<ServerInfoQuery, ServerInfoQueryVariables>;
+export const OnProjectVersionsUpdateDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"OnProjectVersionsUpdate"},"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":"projectVersionsUpdated"},"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":"type"}},{"kind":"Field","name":{"kind":"Name","value":"version"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"message"}},{"kind":"Field","name":{"kind":"Name","value":"sourceApplication"}},{"kind":"Field","name":{"kind":"Name","value":"authorUser"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}},{"kind":"Field","name":{"kind":"Name","value":"model"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}}]}}]}}]}}]}}]} as unknown as DocumentNode<OnProjectVersionsUpdateSubscription, OnProjectVersionsUpdateSubscriptionVariables>;
+export const ProjectTriggeredAutomationsStatusUpdatedDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"ProjectTriggeredAutomationsStatusUpdated"},"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":"projectTriggeredAutomationsStatusUpdated"},"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":"type"}},{"kind":"Field","name":{"kind":"Name","value":"version"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"model"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"project"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"run"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"AutomationRunItem"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AutomateFunctionRunItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AutomateFunctionRun"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"statusMessage"}},{"kind":"Field","name":{"kind":"Name","value":"results"}},{"kind":"Field","name":{"kind":"Name","value":"contextView"}},{"kind":"Field","name":{"kind":"Name","value":"function"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"logo"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"AutomationRunItem"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"AutomateRun"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","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":"functionRuns"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"AutomateFunctionRunItem"}}]}}]}}]} as unknown as DocumentNode<ProjectTriggeredAutomationsStatusUpdatedSubscription, ProjectTriggeredAutomationsStatusUpdatedSubscriptionVariables>;
+export const OnUserProjectsUpdatedDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"OnUserProjectsUpdated"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"userProjectsUpdated"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"project"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"visibility"}},{"kind":"Field","name":{"kind":"Name","value":"team"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"role"}}]}}]}}]}}]}}]} as unknown as DocumentNode<OnUserProjectsUpdatedSubscription, OnUserProjectsUpdatedSubscriptionVariables>;
+export const ProjectUpdatedDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"ProjectUpdated"},"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":"projectUpdated"},"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":"project"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"visibility"}}]}}]}}]}}]} as unknown as DocumentNode<ProjectUpdatedSubscription, ProjectUpdatedSubscriptionVariables>;
+export const SubscriptionDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"Subscription"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"target"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ViewerUpdateTrackingTarget"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"viewerUserActivityBroadcasted"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"target"},"value":{"kind":"Variable","name":{"kind":"Name","value":"target"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"userName"}},{"kind":"Field","name":{"kind":"Name","value":"userId"}},{"kind":"Field","name":{"kind":"Name","value":"sessionId"}},{"kind":"Field","name":{"kind":"Name","value":"user"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"avatar"}}]}},{"kind":"Field","name":{"kind":"Name","value":"status"}}]}}]}}]} as unknown as DocumentNode<SubscriptionSubscription, SubscriptionSubscriptionVariables>;
+export const ProjectCommentsUpdatedDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"subscription","name":{"kind":"Name","value":"ProjectCommentsUpdated"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"target"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ViewerUpdateTrackingTarget"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projectCommentsUpdated"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"target"},"value":{"kind":"Variable","name":{"kind":"Name","value":"target"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"comment"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"author"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}}]}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"hasParent"}},{"kind":"Field","name":{"kind":"Name","value":"parent"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"type"}}]}}]}}]} as unknown as DocumentNode<ProjectCommentsUpdatedSubscription, ProjectCommentsUpdatedSubscriptionVariables>;
\ No newline at end of file
diff --git a/packages/dui3/lib/common/helpers/jsonSchema.ts b/packages/dui3/lib/common/helpers/jsonSchema.ts
new file mode 100644
index 0000000000..e476256d60
--- /dev/null
+++ b/packages/dui3/lib/common/helpers/jsonSchema.ts
@@ -0,0 +1,57 @@
+import type { JsonSchema } from '@jsonforms/core'
+import type { MaybeNullOrUndefined, Optional } from '@speckle/shared'
+import { cloneDeep, get, isObjectLike, omit } from 'lodash-es'
+
+export const formattedJsonFormSchema = (
+  schema: MaybeNullOrUndefined<Record<string, unknown>>
+): Optional<JsonSchema> => {
+  if (!isObjectLike(schema)) return undefined
+  if (!schema || !Object.values(schema).length) return undefined
+
+  const finalizeSchema = (schema: Record<string, unknown>) =>
+    omit(schema, ['$schema', '$id']) as JsonSchema
+
+  const isTypeObject = get(schema, 'type') === 'object'
+  if (isTypeObject) return finalizeSchema(schema)
+
+  if (!('properties' in schema) || !isObjectLike(schema['properties'])) {
+    return undefined
+  }
+
+  const finalSchema = finalizeSchema(schema)
+  if (!Object.values(finalSchema.properties || {}).length) return undefined
+
+  return finalSchema
+}
+
+export const formatJsonFormSchemaInputs = (
+  inputs: MaybeNullOrUndefined<Record<string, unknown>>,
+  schema: MaybeNullOrUndefined<JsonSchema>,
+  options?: Partial<{ cleanRedacted: boolean }>
+) => {
+  const { cleanRedacted } = options || {}
+
+  if (!inputs || !isObjectLike(inputs) || !Object.keys(inputs).length) {
+    return schema?.type === 'object' ? {} : undefined
+  }
+
+  const finalInputs = cloneDeep(inputs)
+  if (cleanRedacted && schema?.properties) {
+    Object.keys(inputs).forEach((key) => {
+      const def = schema.properties?.[key]
+      const isWriteOnly = !!get(def, 'writeOnly', false)
+
+      if (isWriteOnly) {
+        delete finalInputs[key]
+      }
+    })
+  }
+
+  return finalInputs
+}
+
+export function formatVersionParams(
+  params: MaybeNullOrUndefined<Record<string, unknown>>
+) {
+  return formattedJsonFormSchema(params) || null
+}
diff --git a/packages/dui3/lib/common/helpers/md5.ts b/packages/dui3/lib/common/helpers/md5.ts
new file mode 100644
index 0000000000..10727f9a61
--- /dev/null
+++ b/packages/dui3/lib/common/helpers/md5.ts
@@ -0,0 +1,4 @@
+import { md5 } from '@speckle/shared'
+
+export default md5
+export { md5 }
diff --git a/packages/dui3/lib/conversions/conversionResult.ts b/packages/dui3/lib/conversions/conversionResult.ts
new file mode 100644
index 0000000000..230832f7f2
--- /dev/null
+++ b/packages/dui3/lib/conversions/conversionResult.ts
@@ -0,0 +1,33 @@
+export interface ConversionResult {
+  /**
+   * 1 = success, 2 = info, 3 = warning, 4 = error
+   */
+  status: 1 | 2 | 3 | 4
+  /**
+   * For receive conversion reports, this is the id of the speckle object. For send, it's the host app object id.
+   */
+  sourceId: string
+  /**
+   *For receive conversion reports, this is the type of the speckle object. For send, it's the host app object type.
+   */
+  sourceType: string
+  /**
+   *For receive conversion reports, this is the id of the host app object. For send, it's the speckle object id.
+   */
+  resultId: string
+  /**
+   *For receive conversion reports, this is the type of the host app object. For send, it's the speckle object type.
+   */
+  resultType: string
+  /**
+   *The exception, if any.
+   */
+  error?: {
+    message: string
+    stackTrace: string
+  }
+  /**
+   * This currently inherits from base
+   */
+  speckle_type: string
+}
diff --git a/packages/dui3/lib/core/composables/addByUrl.ts b/packages/dui3/lib/core/composables/addByUrl.ts
new file mode 100644
index 0000000000..4ca9925122
--- /dev/null
+++ b/packages/dui3/lib/core/composables/addByUrl.ts
@@ -0,0 +1,135 @@
+import type { DUIAccount } from '~/store/accounts'
+import { useAccountStore } from '~/store/accounts'
+import type {
+  ModelListModelItemFragment,
+  ProjectListProjectItemFragment,
+  VersionListItemFragment
+} from '~/lib/common/generated/gql/graphql'
+import {
+  projectAddByUrlQueryWithoutVersion,
+  projectAddByUrlQueryWithVersion
+} from '~/lib/graphql/mutationsAndQueries'
+import { omit } from 'lodash-es'
+import { useDebounceFn } from '@vueuse/core'
+
+export function useAddByUrl() {
+  const accountStore = useAccountStore()
+
+  /**
+   * Will store any ok results from an url parsing attempt.
+   */
+  const urlParsedData = ref<{
+    project: ProjectListProjectItemFragment
+    model: ModelListModelItemFragment
+    version?: VersionListItemFragment
+    account: DUIAccount
+  }>()
+
+  /**
+   * Will only hold an error if the provided string is:
+   * - an invalid url
+   * - there is no account found for that server
+   * - there are no permissions to send to that stream
+   */
+  const urlParseError = ref<string | undefined>()
+
+  const tryParseUrlInternal = async (url: string, type: 'sender' | 'receiver') => {
+    urlParsedData.value = undefined
+    const parsedUrl = new URL(url)
+    const params = extractIds(parsedUrl.pathname)
+
+    if (!params) {
+      urlParseError.value = 'Invalid url.'
+      return
+    }
+
+    const acc = accountStore.accountByServerUrl(parsedUrl.origin)
+    if (!acc) {
+      urlParseError.value = 'No account found.'
+      return
+    }
+
+    const { projectId, modelId, versionId } = params
+    const apollo = (acc as DUIAccount).client
+
+    let project: ProjectListProjectItemFragment | undefined = undefined,
+      model: ModelListModelItemFragment | undefined = undefined,
+      version: VersionListItemFragment | undefined = undefined
+    try {
+      if (versionId) {
+        const res = await apollo.query({
+          query: projectAddByUrlQueryWithVersion,
+          variables: {
+            projectId,
+            modelId,
+            versionId
+          }
+        })
+
+        project = omit(res.data.project, [
+          'model',
+          ''
+        ]) as ProjectListProjectItemFragment
+        model = omit(res.data.project.model, ['version']) as ModelListModelItemFragment
+        version = res.data.project.model.version as VersionListItemFragment
+      } else {
+        const res = await apollo.query({
+          query: projectAddByUrlQueryWithoutVersion,
+          variables: {
+            projectId,
+            modelId
+          }
+        })
+
+        project = omit(res.data.project, [
+          'model',
+          ''
+        ]) as ProjectListProjectItemFragment
+        model = omit(res.data.project.model, ['version']) as ModelListModelItemFragment
+        //version = res.data.project.model.versions.items[0] as VersionListItemFragment
+      }
+    } catch (err) {
+      urlParseError.value = 'Failed to retrieve project info.'
+      return
+    }
+
+    if (project && model && acc) {
+      if (type === 'sender' && (project.role === 'stream:reviewer' || !project.role)) {
+        urlParseError.value =
+          'You do not have enough permissions to send data to this project.'
+        return
+      }
+
+      urlParsedData.value = {
+        project,
+        model,
+        version,
+        account: acc as DUIAccount
+      }
+    }
+  }
+
+  /**
+   * Debounced function, call as much as you want. Will store any valid results in urlParsedData.
+   */
+  const tryParseUrl = useDebounceFn(tryParseUrlInternal, 1000)
+
+  const extractIds = (pathname: string) => {
+    // Regex to match the pattern in the pathname
+    const regex = /\/projects\/([^/]+)\/models\/([^@]+)(?:@([^/]+))?/
+    const match = pathname.match(regex)
+    if (match) {
+      // Extract the projectId and modelId
+      const projectId = match[1]
+      const modelId = match[2]
+      // If versionId is not defined, default to 'latest'
+      const versionId = match[3] || undefined
+      return { projectId, modelId, versionId }
+    } else {
+      // Return null if the URL does not match the expected pattern
+      return undefined
+    }
+  }
+
+  return { tryParseUrl, urlParsedData, urlParseError }
+}
diff --git a/packages/dui3/lib/core/composables/jsonSchema.ts b/packages/dui3/lib/core/composables/jsonSchema.ts
new file mode 100644
index 0000000000..3dce019b40
--- /dev/null
+++ b/packages/dui3/lib/core/composables/jsonSchema.ts
@@ -0,0 +1,37 @@
+import type { JsonSchema } from '@jsonforms/core'
+import type { JsonFormsChangeEvent } from '@jsonforms/vue'
+import type { MaybeNullOrUndefined } from '@speckle/shared'
+import { formatJsonFormSchemaInputs } from '~/lib/common/helpers/jsonSchema'
+
+export const hasJsonFormErrors = (event?: JsonFormsChangeEvent) =>
+  (event?.errors?.length || 0) > 0
+
+export const useJsonFormsChangeHandler = (params: {
+  schema: MaybeRef<MaybeNullOrUndefined<JsonSchema>>
+}) => {
+  const { schema } = params
+  const event = ref<JsonFormsChangeEvent>()
+
+  const value = computed(() =>
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    formatJsonFormSchemaInputs(event.value?.data, unref(schema))
+  )
+  const hasErrors = computed(() =>
+    event.value ? hasJsonFormErrors(event.value) : false
+  )
+
+  const handler = (e: JsonFormsChangeEvent) => {
+    event.value = e
+  }
+
+  const reset = () => {
+    event.value = undefined
+  }
+
+  return {
+    value,
+    hasErrors,
+    handler,
+    reset
+  }
+}
diff --git a/packages/dui3/lib/core/composables/mixpanel.ts b/packages/dui3/lib/core/composables/mixpanel.ts
new file mode 100644
index 0000000000..685e7f8a0f
--- /dev/null
+++ b/packages/dui3/lib/core/composables/mixpanel.ts
@@ -0,0 +1,190 @@
+import md5 from '~/lib/common/helpers/md5'
+import { useHostAppStore } from '~/store/hostApp'
+import { useAccountStore } from '~/store/accounts'
+
+interface CustomProperties {
+  [key: string]: object | string | boolean | number | undefined | null
+}
+
+// Cached email and server
+const lastEmail: Ref<string | undefined> = ref(undefined)
+const lastServer: Ref<string | undefined> = ref(undefined)
+
+/**
+ * Get Mixpanel functions
+ * In DUI3, quite likely to change distinct id of the track operation since we can trigger repetitive calls that belongs to different account.
+ * Also we have some operations that explicitly not belong to any account, i.e. first "Send" or "Load" click,
+ * with this case we use default account on manager to get "email" and "server" and cache them for later anonymous track.
+ * In each call we update "lastEmail" and "lastServer" for the following potential anonymous tracks.
+ */
+export function useMixpanel() {
+  const hostApp = useHostAppStore()
+  const {
+    public: { mixpanelApiHost, mixpanelTokenId }
+  } = useRuntimeConfig()
+
+  /**
+   * Track event for mixpanel which do HTTP request to end point.
+   * @param eventName Event name.
+   * @param customProperties custom properties that will be attached to the properties of track event.
+   * @param accountId account id to track with id. It will populate hashed "distinct_id" from email and "server_id" from url.
+   * @param isAction whether event is action or not.
+   */
+  async function trackEvent(
+    eventName: string,
+    customProperties: CustomProperties = {},
+    accountId?: string,
+    isAction: boolean = true
+  ) {
+    const { activeAccount, accounts } = useAccountStore()
+
+    if (accountId) {
+      const account = accounts.find((a) => a.accountInfo.id === accountId)
+      lastEmail.value = account?.accountInfo.userInfo.email
+      lastServer.value = account?.accountInfo.serverInfo.url
+    } else {
+      // do not set if they cached already
+      if (lastEmail.value === undefined || lastServer.value === undefined) {
+        lastEmail.value = activeAccount.accountInfo.userInfo.email
+        lastServer.value = activeAccount.accountInfo.serverInfo.url
+      }
+    }
+
+    // TODO: enable it later somehow
+    // if (process.dev) {
+    //   // Only track in production
+    //   return
+    // }
+
+    try {
+      if (!lastEmail.value || !lastServer.value) {
+        throw new Error('Email or server not found to track event.')
+      }
+      const hashedEmail =
+        '@' + md5(lastEmail.value.toLowerCase() as string).toUpperCase()
+      const hashedServer = md5(
+        new URL(lastServer.value).hostname.toLowerCase() as string
+      ).toUpperCase()
+
+      // Get os info from userAgent text
+      // taken from original mixpanel implementation
+      // https://github.com/mixpanel/mixpanel-js/blob/master/examples/commonjs-browserify/bundle.js#L1576
+      const userAgent = navigator.userAgent
+      let os = 'unknown'
+      if (/Windows/i.test(userAgent)) {
+        os = 'Windows'
+      } else if (/Mac/i.test(userAgent)) {
+        os = 'Mac OS X'
+      }
+
+      // Merge base properties with custom ones
+      const properties = {
+        $os: os,
+        // eslint-disable-next-line camelcase
+        distinct_id: hashedEmail,
+        // eslint-disable-next-line camelcase
+        server_id: hashedServer,
+        token: mixpanelTokenId as string,
+        type: isAction ? 'action' : undefined,
+        hostApp: hostApp.hostAppName,
+        hostAppVersion: hostApp.hostAppVersion as string,
+        ui: 'dui3', // Not sure about this but we need to put something to distiguish some events, like "Send", "Receive", alternatively we can have "SendDUI3" not sure!
+        // eslint-disable-next-line camelcase
+        core_version: hostApp.connectorVersion,
+        ...customProperties
+      }
+
+      const eventData = {
+        event: eventName.toString(),
+        properties
+      }
+
+      if (import.meta.dev) {
+        console.info('Mixpanel event', eventData)
+      }
+
+      const response = await fetch(
+        `${mixpanelApiHost as string}/track?ip=1&_=${Date.now()}`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+          },
+          body: `data=${btoa(JSON.stringify(eventData))}`
+        }
+      )
+
+      if (!response.ok) {
+        throw new Error(`Analytics event failed: ${response.statusText}`)
+      }
+    } catch (error) {
+      // Handle error or logging
+      console.warn('Failed to track event in MixPanel:', error)
+    }
+  }
+
+  async function addConnectorToProfile(email: string) {
+    try {
+      const hashedEmail = '@' + md5(email.toLowerCase() as string).toUpperCase()
+
+      const eventData = {
+        // eslint-disable-next-line camelcase
+        $distinct_id: hashedEmail,
+        $token: mixpanelTokenId as string,
+        $union: {
+          Connectors: [hostApp.hostAppName]
+        }
+      }
+
+      const response = await fetch(
+        `${mixpanelApiHost as string}/engage#profile-union`,
+        {
+          method: 'POST',
+          headers: {
+            accept: 'text/plain',
+            'Content-Type': 'application/x-www-form-urlencoded'
+          },
+          body: `data=${btoa(JSON.stringify(eventData))}`
+        }
+      )
+      if (!response.ok) {
+        throw new Error(`Analytics event failed: ${response.statusText}`)
+      }
+    } catch (error) {
+      // Handle error or logging
+      console.warn('Failed to track event in MixPanel:', error)
+    }
+  }
+
+  async function identifyProfile(email: string) {
+    try {
+      const hashedEmail = '@' + md5(email.toLowerCase() as string).toUpperCase()
+
+      const eventData = {
+        // eslint-disable-next-line camelcase
+        $distinct_id: hashedEmail,
+        $token: mixpanelTokenId as string,
+        $set: {
+          Identified: true
+        }
+      }
+
+      const response = await fetch(`${mixpanelApiHost as string}/engage#profile-set`, {
+        method: 'POST',
+        headers: {
+          accept: 'text/plain',
+          'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        body: `data=${btoa(JSON.stringify(eventData))}`
+      })
+      if (!response.ok) {
+        throw new Error(`Analytics event failed: ${response.statusText}`)
+      }
+    } catch (error) {
+      // Handle error or logging
+      console.warn('Failed to track event in MixPanel:', error)
+    }
+  }
+
+  return { trackEvent, addConnectorToProfile, identifyProfile }
+}
diff --git a/packages/dui3/lib/core/composables/updateConnector.ts b/packages/dui3/lib/core/composables/updateConnector.ts
new file mode 100644
index 0000000000..162243831f
--- /dev/null
+++ b/packages/dui3/lib/core/composables/updateConnector.ts
@@ -0,0 +1,73 @@
+import type { ToastNotification } from '@speckle/ui-components'
+import { ToastNotificationType } from '@speckle/ui-components'
+import { useConfigStore } from '~/store/config'
+import { useHostAppStore } from '~/store/hostApp'
+
+type Versions = {
+  Versions: Version[]
+}
+
+export type Version = {
+  Number: string
+  Url: string
+  Os: number
+  Architecture: number
+  Date: string
+  Prerelease: boolean
+}
+
+export function useUpdateConnector() {
+  const hostApp = useHostAppStore()
+  const config = useConfigStore()
+  const { $openUrl } = useNuxtApp()
+
+  const versions = ref<Version[]>([])
+  const latestAvailableVersion = ref<Version | null>(null)
+
+  const isUpToDate = computed(
+    () => hostApp.connectorVersion === latestAvailableVersion.value?.Number
+  )
+
+  async function checkUpdate() {
+    await getVersions()
+    if (!isUpToDate.value && !config.isDevMode) {
+      const notification: ToastNotification = {
+        type: ToastNotificationType.Success,
+        title: `New connector update available`,
+        description: latestAvailableVersion.value?.Number.replace('+0', ''), // TODO: currently versions end with "+0" Alan will have a look
+        cta: {
+          title: `Update`,
+          onClick: () => downloadLatestVersion()
+        }
+      }
+      hostApp.setNotification(notification)
+    }
+  }
+
+  async function getVersions() {
+    const response = await fetch(
+      `https://releases.speckle.dev/manager2/feeds/${hostApp.hostAppName?.toLowerCase()}-v3.json`,
+      {
+        method: 'GET'
+      }
+    )
+
+    if (!response.ok) {
+      throw new Error('Failed to fetch versions')
+    }
+
+    const data = (await response.json()) as unknown as Versions
+    const sortedVersions = data.Versions.sort(function (a: Version, b: Version) {
+      return new Date(b.Date).getTime() - new Date(a.Date).getTime()
+    })
+    versions.value = sortedVersions
+    latestAvailableVersion.value = sortedVersions[0]
+    hostApp.setLatestAvailableVersion(sortedVersions[0])
+  }
+
+  function downloadLatestVersion() {
+    $openUrl(latestAvailableVersion.value?.Url as string)
+  }
+
+  return { checkUpdate }
+}
diff --git a/packages/dui3/lib/core/configs/apollo.ts b/packages/dui3/lib/core/configs/apollo.ts
deleted file mode 100644
index 164e82cf87..0000000000
--- a/packages/dui3/lib/core/configs/apollo.ts
+++ /dev/null
@@ -1,348 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import type { ApolloLink, ApolloClientOptions } from '@apollo/client/core'
-import { InMemoryCache, split, from } from '@apollo/client/core'
-import { setContext } from '@apollo/client/link/context'
-import { SubscriptionClient } from 'subscriptions-transport-ws'
-import { createUploadLink } from 'apollo-upload-client'
-import { WebSocketLink } from '@apollo/client/link/ws'
-import { getMainDefinition } from '@apollo/client/utilities'
-import type { OperationDefinitionNode } from 'graphql'
-import { Kind } from 'graphql'
-import type { Nullable } from '@speckle/shared'
-import {
-  buildAbstractCollectionMergeFunction,
-  buildArrayMergeFunction,
-  incomingOverwritesExistingMergeFunction
-} from '~~/lib/core/helpers/apolloSetup'
-import { onError } from '@apollo/client/link/error'
-import * as Observability from '@speckle/shared/dist/esm/observability/index.js'
-
-let subscriptionsStopped = false
-const errorRpm = Observability.simpleRpmCounter()
-const STOP_SUBSCRIPTIONS_AT_ERRORS_PER_MIN = 100
-
-const appVersion = (import.meta.env.SPECKLE_SERVER_VERSION as string) || 'unknown'
-const appName = 'dui-3'
-
-function createCache(): InMemoryCache {
-  return new InMemoryCache({
-    /**
-     * This is where you configure how various GQL fields should be read, written to or merged when new data comes in.
-     * If you define a merge function here, you don't need to duplicate the merge logic inside an `update()` callback
-     * of a fetchMore call, for example.
-     *
-     * Feel free to re-use utilities in the `apolloSetup` helper for defining merge functions or even use the ones that come from `@apollo/client/utilities`.
-     *
-     * Read more: https://www.apollographql.com/docs/react/caching/cache-field-behavior
-     */
-    typePolicies: {
-      Query: {
-        fields: {
-          otherUser: {
-            read(original, { args, toReference }) {
-              if (args?.id) {
-                return toReference({ __typename: 'LimitedUser', id: args.id })
-              }
-
-              return original
-            }
-          },
-          activeUser: {
-            merge(existing, incoming, { mergeObjects }) {
-              return mergeObjects(existing, incoming)
-            },
-            read(original, { args, toReference }) {
-              if (args?.id) {
-                return toReference({ __typename: 'User', id: args.id })
-              }
-
-              return original
-            }
-          },
-          user: {
-            read(original, { args, toReference }) {
-              if (args?.id) {
-                return toReference({ __typename: 'User', id: args.id })
-              }
-
-              return original
-            }
-          },
-          stream: {
-            read(original, { args, toReference }) {
-              if (args?.id) {
-                return toReference({ __typename: 'Stream', id: args.id })
-              }
-
-              return original
-            }
-          },
-          streams: {
-            keyArgs: ['query'],
-            merge: buildAbstractCollectionMergeFunction('UserStreamCollection', {
-              checkIdentity: true
-            })
-          },
-          project: {
-            read(original, { args, toReference }) {
-              if (args?.id) {
-                return toReference({ __typename: 'Project', id: args.id })
-              }
-
-              return original
-            }
-          },
-          projects: {
-            merge: buildArrayMergeFunction()
-          }
-        }
-      },
-      LimitedUser: {
-        fields: {
-          commits: {
-            keyArgs: false,
-            merge: buildAbstractCollectionMergeFunction('CommitCollection')
-          }
-        }
-      },
-      User: {
-        fields: {
-          timeline: {
-            keyArgs: ['after', 'before'],
-            merge: buildAbstractCollectionMergeFunction('ActivityCollection')
-          },
-          commits: {
-            keyArgs: false,
-            merge: buildAbstractCollectionMergeFunction('CommitCollection')
-          },
-          favoriteStreams: {
-            keyArgs: false,
-            merge: buildAbstractCollectionMergeFunction('StreamCollection')
-          },
-          projects: {
-            keyArgs: ['filter', 'limit'],
-            merge: buildAbstractCollectionMergeFunction('ProjectCollection')
-          }
-        }
-      },
-      Project: {
-        fields: {
-          models: {
-            keyArgs: ['filter', 'limit'],
-            merge: buildAbstractCollectionMergeFunction('ModelCollection')
-          },
-          versions: {
-            keyArgs: ['filter', 'limit'],
-            merge: buildAbstractCollectionMergeFunction('VersionCollection')
-          },
-          commentThreads: {
-            keyArgs: ['filter', 'limit'],
-            merge: buildAbstractCollectionMergeFunction('CommentCollection')
-          },
-          modelsTree: {
-            keyArgs: ['filter', 'limit'],
-            merge: buildAbstractCollectionMergeFunction('ModelsTreeItemCollection')
-          },
-          replyAuthors: {
-            keyArgs: false,
-            merge: buildAbstractCollectionMergeFunction('CommentReplyAuthorCollection')
-          },
-          viewerResources: {
-            merge: (_existing, incoming) => [...incoming]
-          },
-          model: {
-            read(original, { args, toReference }) {
-              if (args?.id) {
-                return toReference({ __typename: 'Model', id: args.id })
-              }
-
-              return original
-            }
-          },
-          team: {
-            merge: (_existing, incoming) => incoming
-          },
-          invitedTeam: {
-            merge: (_existing, incoming) => incoming
-          },
-          pendingImportedModels: {
-            merge: (_existing, incoming) => incoming
-          }
-        }
-      },
-      Model: {
-        fields: {
-          versions: {
-            keyArgs: ['filter', 'limit'],
-            merge: buildAbstractCollectionMergeFunction('VersionCollection')
-          },
-          pendingImportedVersions: {
-            merge: (_existing, incoming) => incoming
-          }
-        }
-      },
-      Comment: {
-        fields: {
-          replies: {
-            keyArgs: ['limit']
-          }
-        }
-      },
-      Stream: {
-        fields: {
-          activity: {
-            keyArgs: ['after', 'before', 'actionType'],
-            merge: buildAbstractCollectionMergeFunction('ActivityCollection')
-          },
-          commits: {
-            keyArgs: false,
-            merge: buildAbstractCollectionMergeFunction('CommitCollection', {
-              checkIdentity: true
-            })
-          },
-          pendingCollaborators: {
-            merge: incomingOverwritesExistingMergeFunction
-          },
-          pendingAccessRequests: {
-            merge: incomingOverwritesExistingMergeFunction
-          }
-        }
-      },
-      Branch: {
-        fields: {
-          commits: {
-            keyArgs: false,
-            merge: buildAbstractCollectionMergeFunction('CommitCollection', {
-              checkIdentity: true
-            })
-          }
-        }
-      },
-      BranchCollection: {
-        merge: true
-      },
-      ServerStats: {
-        merge: true
-      },
-      WebhookEventCollection: {
-        merge: true
-      },
-      ServerInfo: {
-        merge: true
-      },
-      CommentThreadActivityMessage: {
-        merge: true
-      }
-    }
-  })
-}
-
-function createWsClient(params: {
-  wsEndpoint: string
-  authToken: () => Nullable<string>
-}): SubscriptionClient {
-  const { wsEndpoint, authToken } = params
-
-  return new SubscriptionClient(wsEndpoint, {
-    reconnect: true,
-    reconnectionAttempts: 3,
-    connectionParams: () => {
-      const token = authToken()
-      const Authorization = token?.length ? `Bearer ${token}` : null
-      return Authorization ? { Authorization, headers: { Authorization } } : {}
-    }
-  })
-}
-
-function createLink(params: {
-  httpEndpoint: string
-  wsClient?: SubscriptionClient
-  authToken: () => Nullable<string>
-}): ApolloLink {
-  const { httpEndpoint, wsClient, authToken } = params
-  // Prepare links
-  const httpLink = createUploadLink({
-    uri: httpEndpoint
-  })
-
-  const authLink = setContext((_, { headers }) => {
-    const token = authToken()
-    const authHeader = token?.length ? { Authorization: `Bearer ${token}` } : {}
-    return {
-      headers: {
-        ...headers,
-        ...authHeader
-      }
-    }
-  })
-
-  let link = authLink.concat(httpLink as unknown as ApolloLink)
-
-  if (wsClient) {
-    const wsLink = new WebSocketLink(wsClient)
-    link = split(
-      ({ query }) => {
-        const definition = getMainDefinition(query) as OperationDefinitionNode
-        const { kind, operation } = definition
-
-        return kind === Kind.OPERATION_DEFINITION && operation === 'subscription'
-      },
-      wsLink,
-      link
-    )
-  }
-
-  const errorLink = onError((res) => {
-    console.error('Apollo Client error', res)
-
-    // Disable subscriptions if too many errors per minute
-    const rpm = errorRpm.hit()
-    if (
-      import.meta.client &&
-      wsClient &&
-      !subscriptionsStopped &&
-      rpm > STOP_SUBSCRIPTIONS_AT_ERRORS_PER_MIN
-    ) {
-      subscriptionsStopped = true
-      console.error(
-        `Too many errors (${rpm} errors per minute), stopping subscriptions!`
-      )
-      wsClient.use([
-        {
-          applyMiddleware: () => {
-            // never invokes next() - essentially stuck
-          }
-        }
-      ])
-    }
-  })
-
-  return from([errorLink, link])
-}
-
-type ResolveClientConfigParams = {
-  httpEndpoint: string
-  authToken: () => Nullable<string>
-}
-
-export const resolveClientConfig = (
-  params: ResolveClientConfigParams
-): Pick<ApolloClientOptions<unknown>, 'cache' | 'link' | 'name' | 'version'> => {
-  const { httpEndpoint, authToken } = params
-  const wsEndpoint = httpEndpoint.replace('http', 'ws')
-
-  const wsClient = import.meta.client
-    ? createWsClient({ wsEndpoint, authToken })
-    : undefined
-  const link = createLink({ httpEndpoint, wsClient, authToken })
-
-  return {
-    // If we don't markRaw the cache, sometimes we get cryptic internal Apollo Client errors that essentially
-    // result from parts of its internals being made reactive, even tho they shouldn't be
-    cache: markRaw(createCache()),
-    link,
-    name: appName,
-    version: appVersion
-  }
-}
diff --git a/packages/dui3/lib/core/helpers/apolloSetup.ts b/packages/dui3/lib/core/helpers/apolloSetup.ts
deleted file mode 100644
index f028563f20..0000000000
--- a/packages/dui3/lib/core/helpers/apolloSetup.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import type { Optional } from '@speckle/shared'
-import type { FieldMergeFunction } from '@apollo/client/core'
-
-interface AbstractCollection<T extends string> {
-  __typename: T
-  totalCount: number
-  cursor: string | null
-  items: Record<string, unknown>[]
-}
-
-interface MergeSettings {
-  /**
-   * Set to false if you want to merge incoming items without checking
-   * for duplicates. Usually you don't want to do this as you can introduce duplicates this way.
-   * Defaults to true
-   */
-  checkIdentity: boolean
-  /**
-   * Optionally change the prop that should be used to compare
-   * equality between items
-   * Defaults to '__ref', which is the prop added by Apollo that contains the globally unique ID of the object
-   */
-  identityProp: string
-}
-
-const prepareMergeSettings = (
-  settings: Optional<Partial<MergeSettings>>
-): MergeSettings => ({
-  checkIdentity: true,
-  identityProp: '__ref',
-  ...(settings || {})
-})
-
-/**
- * Build an Apollo merge function for a field that returns an array of identifiable objects
- */
-export function buildArrayMergeFunction(
-  settings?: Partial<MergeSettings>
-): FieldMergeFunction<Record<string, unknown>[], Record<string, unknown>[]> {
-  const { checkIdentity, identityProp } = prepareMergeSettings(settings)
-  return (existing, incoming) => {
-    let finalItems: Record<string, unknown>[]
-    if (checkIdentity) {
-      finalItems = [...(existing || [])]
-      for (const newItem of incoming || []) {
-        if (
-          finalItems.findIndex(
-            (item) => item[identityProp] === newItem[identityProp]
-          ) === -1
-        ) {
-          finalItems.push(newItem)
-        }
-      }
-    } else {
-      finalItems = [...(existing || []), ...(incoming || [])]
-    }
-
-    return finalItems
-  }
-}
-
-/**
- * Build an Apollo merge function for a field that returns a collection like AbstractCollection
- */
-export function buildAbstractCollectionMergeFunction<T extends string>(
-  typeName: T,
-  settings?: Partial<MergeSettings>
-): FieldMergeFunction<Optional<AbstractCollection<T>>, AbstractCollection<T>> {
-  const { checkIdentity, identityProp } = prepareMergeSettings(settings)
-  return (
-    existing: Optional<AbstractCollection<T>>,
-    incoming: AbstractCollection<T>
-  ) => {
-    const existingItems = existing?.items || []
-    const incomingItems = incoming?.items || []
-
-    let finalItems: Record<string, unknown>[]
-    if (checkIdentity) {
-      finalItems = [...existingItems]
-      for (const newItem of incomingItems) {
-        if (
-          finalItems.findIndex(
-            (item) => item[identityProp] === newItem[identityProp]
-          ) === -1
-        ) {
-          finalItems.push(newItem)
-        }
-      }
-    } else {
-      finalItems = [...existingItems, ...incomingItems]
-    }
-
-    return {
-      __typename: incoming?.__typename || existing?.__typename || typeName,
-      totalCount: incoming.totalCount || 0,
-      cursor: incoming.cursor || null,
-      items: finalItems
-    }
-  }
-}
-
-/**
- * Merge function that just takes incoming data and overrides all of old data with it
- * Useful for array fields w/o pagination, where a new array response is supposed to replace
- * the entire old one
- */
-export const incomingOverwritesExistingMergeFunction: FieldMergeFunction = (
-  _existing: unknown,
-  incoming: unknown
-) => incoming
diff --git a/packages/dui3/lib/form/composables/jsonRenderers.ts b/packages/dui3/lib/form/composables/jsonRenderers.ts
new file mode 100644
index 0000000000..09eb8bcdfb
--- /dev/null
+++ b/packages/dui3/lib/form/composables/jsonRenderers.ts
@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { useJsonFormsControl } from '@jsonforms/vue'
+import { cloneDeep, merge } from 'lodash-es'
+import type { RuleExpression } from 'vee-validate'
+
+export function useJsonRendererBaseSetup<
+  I extends ReturnType<typeof useJsonFormsControl>
+>(
+  input: I,
+  options?: {
+    onChangeValueConverter?: (val: any) => any
+  }
+) {
+  const control = input.control as I['control']
+  const fieldName = computed(() => `/${control.value.path}`)
+  const { onChangeValueConverter } = options || {}
+
+  const validator: RuleExpression<any> = () => {
+    if (control.value.errors) {
+      return `Value ${control.value.errors}`
+    }
+
+    return true
+  }
+
+  const appliedOptions = computed(
+    () =>
+      merge(
+        {},
+        cloneDeep(control.value.config),
+        cloneDeep(control.value.uischema.options)
+      ) as Record<string, any>
+  )
+
+  return {
+    control,
+    handleChange: (value: any) => {
+      input.handleChange(
+        control.value.path,
+        onChangeValueConverter ? onChangeValueConverter(value) : value
+      )
+    },
+    validator,
+    appliedOptions,
+    fieldName,
+    validateOnValueUpdate: false
+  }
+}
diff --git a/packages/dui3/lib/form/jsonRenderers.ts b/packages/dui3/lib/form/jsonRenderers.ts
new file mode 100644
index 0000000000..4783d608ff
--- /dev/null
+++ b/packages/dui3/lib/form/jsonRenderers.ts
@@ -0,0 +1,91 @@
+import type { JsonFormsRendererRegistryEntry } from '@jsonforms/core'
+import {
+  and,
+  isBooleanControl,
+  isDateControl,
+  isDateTimeControl,
+  isEnumControl,
+  isIntegerControl,
+  isMultiLineControl,
+  isNumberControl,
+  isOneOfEnumControl,
+  isStringControl,
+  isTimeControl,
+  rankWith
+} from '@jsonforms/core'
+import { vanillaRenderers } from '@jsonforms/vue-vanilla'
+import BooleanControlRenderer from '~/components/form/json/BooleanControlRenderer.vue'
+import DateControlRenderer from '~/components/form/json/DateControlRenderer.vue'
+import DateTimeControlRenderer from '~/components/form/json/DateTimeControlRenderer.vue'
+import EnumControlRenderer from '~/components/form/json/EnumControlRenderer.vue'
+import EnumOneOfControlRenderer from '~/components/form/json/EnumOneOfControlRenderer.vue'
+import IntegerControlRenderer from '~/components/form/json/IntegerControlRenderer.vue'
+import MultiStringControlRenderer from '~/components/form/json/MultiStringControlRenderer.vue'
+import NumberControlRenderer from '~/components/form/json/NumberControlRenderer.vue'
+import StringControlRenderer from '~/components/form/json/StringControlRenderer.vue'
+import TimeControlRenderer from '~/components/form/json/TimeControlRenderer.vue'
+
+export const stringControlRenderer: JsonFormsRendererRegistryEntry = {
+  renderer: StringControlRenderer as unknown,
+  tester: rankWith(3, isStringControl)
+}
+
+export const booleanControlRenderer: JsonFormsRendererRegistryEntry = {
+  renderer: BooleanControlRenderer as unknown,
+  tester: rankWith(3, isBooleanControl)
+}
+
+export const enumControlRenderer: JsonFormsRendererRegistryEntry = {
+  renderer: EnumControlRenderer as unknown,
+  tester: rankWith(4, isEnumControl)
+}
+
+export const enumOneOfControlRenderer: JsonFormsRendererRegistryEntry = {
+  renderer: EnumOneOfControlRenderer as unknown,
+  tester: rankWith(4, isOneOfEnumControl)
+}
+
+export const integerControlRenderer: JsonFormsRendererRegistryEntry = {
+  renderer: IntegerControlRenderer as unknown,
+  tester: rankWith(3, isIntegerControl)
+}
+
+export const multiStringControlRenderer: JsonFormsRendererRegistryEntry = {
+  renderer: MultiStringControlRenderer as unknown,
+  tester: rankWith(4, and(isStringControl, isMultiLineControl))
+}
+
+export const numberControlRenderer: JsonFormsRendererRegistryEntry = {
+  renderer: NumberControlRenderer as unknown,
+  tester: rankWith(3, isNumberControl)
+}
+
+export const dateControlRenderer: JsonFormsRendererRegistryEntry = {
+  renderer: DateControlRenderer as unknown,
+  tester: rankWith(4, isDateControl)
+}
+
+export const dateTimeControlRenderer: JsonFormsRendererRegistryEntry = {
+  renderer: DateTimeControlRenderer as unknown,
+  tester: rankWith(4, isDateTimeControl)
+}
+
+export const timeControlRenderer: JsonFormsRendererRegistryEntry = {
+  renderer: TimeControlRenderer as unknown,
+  tester: rankWith(4, isTimeControl)
+}
+
+export const renderers: JsonFormsRendererRegistryEntry[] = markRaw([
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  ...vanillaRenderers,
+  stringControlRenderer,
+  booleanControlRenderer,
+  enumControlRenderer,
+  enumOneOfControlRenderer,
+  integerControlRenderer,
+  multiStringControlRenderer,
+  numberControlRenderer,
+  dateControlRenderer,
+  dateTimeControlRenderer,
+  timeControlRenderer
+])
diff --git a/packages/dui3/lib/form/select/types.ts b/packages/dui3/lib/form/select/types.ts
new file mode 100644
index 0000000000..593868ca81
--- /dev/null
+++ b/packages/dui3/lib/form/select/types.ts
@@ -0,0 +1,9 @@
+export type ProjectsSelectItemType = { id?: string; name: string }
+export type ModelsSelectItemType = { id?: string; name: string }
+export type VersionsSelectItemType = {
+  id: string
+  message: string
+  createdAt: Date
+  referencedObject: string
+  sourceApplication: string
+}
diff --git a/packages/dui3/lib/graphql/mutationsAndQueries.ts b/packages/dui3/lib/graphql/mutationsAndQueries.ts
new file mode 100644
index 0000000000..9356ed62a6
--- /dev/null
+++ b/packages/dui3/lib/graphql/mutationsAndQueries.ts
@@ -0,0 +1,515 @@
+import { graphql } from '~~/lib/common/generated/gql'
+
+export const createVersionMutation = graphql(`
+  mutation VersionMutations($input: CreateVersionInput!) {
+    versionMutations {
+      create(input: $input) {
+        id
+      }
+    }
+  }
+`)
+
+export const markReceivedVersionMutation = graphql(`
+  mutation MarkReceivedVersion($input: MarkReceivedVersionInput!) {
+    versionMutations {
+      markReceived(input: $input)
+    }
+  }
+`)
+
+export const createModelMutation = graphql(`
+  mutation CreateModel($input: CreateModelInput!) {
+    modelMutations {
+      create(input: $input) {
+        ...ModelListModelItem
+      }
+    }
+  }
+`)
+
+export const createProjectMutation = graphql(`
+  mutation CreateProject($input: ProjectCreateInput) {
+    projectMutations {
+      create(input: $input) {
+        ...ProjectListProjectItem
+      }
+    }
+  }
+`)
+
+export const createProjectInWorkspaceMutation = graphql(`
+  mutation CreateProjectInWorkspace($input: WorkspaceProjectCreateInput!) {
+    workspaceMutations {
+      projects {
+        create(input: $input) {
+          ...ProjectListProjectItem
+        }
+      }
+    }
+  }
+`)
+
+export const requestProjectAccess = graphql(`
+  mutation StreamAccessRequestCreate($input: String!) {
+    streamAccessRequestCreate(streamId: $input) {
+      id
+    }
+  }
+`)
+
+export const workspaceListFragment = graphql(`
+  fragment WorkspaceListWorkspaceItem on Workspace {
+    id
+    name
+    description
+    createdAt
+    updatedAt
+    logo
+    role
+    readOnly
+  }
+`)
+
+export const automateFunctionsListFragment = graphql(`
+  fragment AutomateFunctionItem on AutomateFunction {
+    name
+    isFeatured
+    id
+    creator {
+      name
+    }
+    releases {
+      items {
+        inputSchema
+      }
+    }
+  }
+`)
+
+export const createAutomationMutation = graphql(`
+  mutation CreateAutomation($projectId: ID!, $input: ProjectAutomationCreateInput!) {
+    projectMutations {
+      automationMutations(projectId: $projectId) {
+        create(input: $input) {
+          id
+          name
+        }
+      }
+    }
+  }
+`)
+
+export const automateFunctionRunItemFragment = graphql(`
+  fragment AutomateFunctionRunItem on AutomateFunctionRun {
+    id
+    status
+    statusMessage
+    results
+    contextView
+    function {
+      id
+      name
+      logo
+    }
+  }
+`)
+
+export const automationRunItemFragment = graphql(`
+  fragment AutomationRunItem on AutomateRun {
+    id
+    status
+    automation {
+      id
+      name
+    }
+    functionRuns {
+      ...AutomateFunctionRunItem
+    }
+  }
+`)
+
+export const automateStatusQuery = graphql(`
+  query AutomationStatus($projectId: String!, $modelId: String!) {
+    project(id: $projectId) {
+      model(id: $modelId) {
+        automationsStatus {
+          id
+          status
+          automationRuns {
+            ...AutomationRunItem
+          }
+        }
+      }
+    }
+  }
+`)
+
+export const workspacesListQuery = graphql(`
+  query WorkspaceListQuery(
+    $limit: Int!
+    $filter: UserWorkspacesFilter
+    $cursor: String
+  ) {
+    activeUser {
+      id
+      workspaces(limit: $limit, filter: $filter, cursor: $cursor) {
+        totalCount
+        cursor
+        items {
+          ...WorkspaceListWorkspaceItem
+        }
+      }
+    }
+  }
+`)
+
+export const projectListFragment = graphql(`
+  fragment ProjectListProjectItem on Project {
+    id
+    name
+    role
+    updatedAt
+    workspaceId
+    models {
+      totalCount
+    }
+  }
+`)
+
+export const projectsListQuery = graphql(`
+  query ProjectListQuery($limit: Int!, $filter: UserProjectsFilter, $cursor: String) {
+    activeUser {
+      id
+      projects(limit: $limit, filter: $filter, cursor: $cursor) {
+        totalCount
+        cursor
+        items {
+          ...ProjectListProjectItem
+        }
+      }
+    }
+  }
+`)
+
+export const modelListFragment = graphql(`
+  fragment ModelListModelItem on Model {
+    displayName
+    name
+    id
+    previewUrl
+    updatedAt
+    versions(limit: 1) {
+      totalCount
+      items {
+        ...VersionListItem
+      }
+    }
+  }
+`)
+
+export const projectModelsQuery = graphql(`
+  query ProjectModels(
+    $projectId: String!
+    $cursor: String
+    $limit: Int!
+    $filter: ProjectModelsFilter
+  ) {
+    project(id: $projectId) {
+      id
+      models(cursor: $cursor, limit: $limit, filter: $filter) {
+        totalCount
+        cursor
+        items {
+          ...ModelListModelItem
+        }
+      }
+    }
+  }
+`)
+
+export const versionListFragment = graphql(`
+  fragment VersionListItem on Version {
+    id
+    referencedObject
+    message
+    sourceApplication
+    authorUser {
+      avatar
+      id
+      name
+    }
+    createdAt
+    previewUrl
+  }
+`)
+
+export const modelVersionsQuery = graphql(`
+  query ModelVersions(
+    $modelId: String!
+    $projectId: String!
+    $limit: Int!
+    $cursor: String
+    $filter: ModelVersionsFilter
+  ) {
+    project(id: $projectId) {
+      id
+      model(id: $modelId) {
+        id
+        versions(limit: $limit, cursor: $cursor, filter: $filter) {
+          totalCount
+          cursor
+          items {
+            ...VersionListItem
+          }
+        }
+      }
+    }
+  }
+`)
+
+export const objectQuery = graphql(`
+  query ObjectQuery($projectId: String!, $objectId: String!) {
+    project(id: $projectId) {
+      object(id: $objectId) {
+        id
+        data
+      }
+    }
+  }
+`)
+
+export const projectAddByUrlQueryWithVersion = graphql(`
+  query ProjectAddByUrlQueryWithVersion(
+    $projectId: String!
+    $modelId: String!
+    $versionId: String!
+  ) {
+    project(id: $projectId) {
+      ...ProjectListProjectItem
+      model(id: $modelId) {
+        ...ModelListModelItem
+        version(id: $versionId) {
+          ...VersionListItem
+        }
+      }
+    }
+  }
+`)
+
+export const projectAddByUrlQueryWithoutVersion = graphql(`
+  query ProjectAddByUrlQueryWithoutVersion($projectId: String!, $modelId: String!) {
+    project(id: $projectId) {
+      ...ProjectListProjectItem
+      model(id: $modelId) {
+        ...ModelListModelItem
+      }
+    }
+  }
+`)
+
+export const projectDetailsQuery = graphql(`
+  query ProjectDetails($projectId: String!) {
+    project(id: $projectId) {
+      id
+      role
+      name
+      workspace {
+        slug
+        readOnly
+      }
+      team {
+        user {
+          avatar
+          id
+          name
+        }
+      }
+      visibility
+    }
+  }
+`)
+
+export const automateFunctionsQuery = graphql(`
+  query AutomateFunctions {
+    automateFunctions {
+      items {
+        ...AutomateFunctionItem
+      }
+    }
+  }
+`)
+
+export const modelDetailsQuery = graphql(`
+  query ModelDetails($modelId: String!, $projectId: String!) {
+    project(id: $projectId) {
+      id
+      name
+      model(id: $modelId) {
+        id
+        displayName
+        name
+        versions {
+          totalCount
+          items {
+            id
+          }
+        }
+        author {
+          id
+          name
+          avatar
+        }
+      }
+    }
+  }
+`)
+
+export const versionDetailsQuery = graphql(`
+  query VersionDetails($projectId: String!, $versionId: String!, $modelId: String!) {
+    project(id: $projectId) {
+      id
+      name
+      model(id: $modelId) {
+        id
+        name
+        versions(limit: 1) {
+          items {
+            id
+            createdAt
+            sourceApplication
+            authorUser {
+              id
+            }
+          }
+        }
+        version(id: $versionId) {
+          id
+          referencedObject
+          message
+          sourceApplication
+          createdAt
+          previewUrl
+        }
+      }
+    }
+  }
+`)
+
+export const serverInfoQuery = graphql(`
+  query ServerInfo {
+    serverInfo {
+      workspaces {
+        workspacesEnabled
+      }
+    }
+  }
+`)
+
+export const versionCreatedSubscription = graphql(`
+  subscription OnProjectVersionsUpdate($projectId: String!) {
+    projectVersionsUpdated(id: $projectId) {
+      id
+      type
+      version {
+        id
+        createdAt
+        message
+        sourceApplication
+        authorUser {
+          id
+          name
+          avatar
+        }
+        model {
+          id
+          name
+          displayName
+        }
+      }
+    }
+  }
+`)
+
+export const automateRunsSubscription = graphql(`
+  subscription ProjectTriggeredAutomationsStatusUpdated($projectId: String!) {
+    projectTriggeredAutomationsStatusUpdated(projectId: $projectId) {
+      type
+      version {
+        id
+      }
+      model {
+        id
+      }
+      project {
+        id
+      }
+      run {
+        ...AutomationRunItem
+      }
+    }
+  }
+`)
+
+export const userProjectsUpdatedSubscription = graphql(`
+  subscription OnUserProjectsUpdated {
+    userProjectsUpdated {
+      id
+      project {
+        id
+        visibility
+        team {
+          id
+          role
+        }
+      }
+    }
+  }
+`)
+
+export const projectUpdatedSubscription = graphql(`
+  subscription ProjectUpdated($projectId: String!) {
+    projectUpdated(id: $projectId) {
+      id
+      project {
+        visibility
+      }
+    }
+  }
+`)
+
+export const modelViewingSubscription = graphql(`
+  subscription Subscription($target: ViewerUpdateTrackingTarget!) {
+    viewerUserActivityBroadcasted(target: $target) {
+      userName
+      userId
+      sessionId
+      user {
+        name
+        id
+        avatar
+      }
+      status
+    }
+  }
+`)
+
+export const modelCommentCreatedSubscription = graphql(`
+  subscription ProjectCommentsUpdated($target: ViewerUpdateTrackingTarget!) {
+    projectCommentsUpdated(target: $target) {
+      comment {
+        author {
+          avatar
+          id
+          name
+        }
+        id
+        hasParent
+        parent {
+          id
+        }
+      }
+      type
+    }
+  }
+`)
diff --git a/packages/dui3/lib/models/card.ts b/packages/dui3/lib/models/card.ts
new file mode 100644
index 0000000000..6ff4b0384e
--- /dev/null
+++ b/packages/dui3/lib/models/card.ts
@@ -0,0 +1,52 @@
+import crs from 'crypto-random-string'
+import type { AutomationRunItemFragment } from 'lib/common/generated/gql/graphql'
+import type { ConversionResult } from 'lib/conversions/conversionResult'
+import type { CardSetting } from 'lib/models/card/setting'
+import type { IDiscriminatedObject } from '~~/lib/bindings/definitions/common'
+import { DiscriminatedObject } from '~~/lib/bindings/definitions/common'
+
+export interface IModelCard extends IDiscriminatedObject {
+  modelCardId: string
+  modelId: string
+  projectId: string
+  workspaceId?: string
+  accountId: string
+  serverUrl: string
+  expired: boolean
+  progress?: ModelCardProgress
+  settings?: CardSetting[]
+  error?: { errorMessage: string; dismissible: boolean }
+  report?: ConversionResult[]
+  automationRuns?: AutomationRunItemFragment[]
+}
+
+export class ModelCard extends DiscriminatedObject implements IModelCard {
+  modelCardId: string
+  modelId!: string
+  projectId!: string
+  workspaceId?: string
+  accountId!: string
+  serverUrl!: string
+  expired: boolean
+  progress: ModelCardProgress | undefined
+  settings: CardSetting[] | undefined
+
+  constructor(typeDiscriminator: string) {
+    super(typeDiscriminator)
+    this.modelCardId = crs({ length: 20 })
+    this.expired = false
+  }
+}
+
+export interface IModelCardSharedEvents {
+  setModelError: (args: { modelCardId: string; error: string }) => void
+  setModelProgress: (args: {
+    modelCardId: string
+    progress?: ModelCardProgress
+  }) => void
+}
+
+export type ModelCardProgress = {
+  status: string
+  progress?: number
+}
diff --git a/packages/dui3/lib/models/card/notification.ts b/packages/dui3/lib/models/card/notification.ts
new file mode 100644
index 0000000000..2d716b480f
--- /dev/null
+++ b/packages/dui3/lib/models/card/notification.ts
@@ -0,0 +1,18 @@
+import type { ConversionResult } from 'lib/conversions/conversionResult'
+
+export type ModelCardNotification = {
+  modelCardId: string
+  text: string
+  level: 'info' | 'danger' | 'warning' | 'success'
+  cta?: {
+    name: string
+    action: () => void
+  }
+  /**
+   * If set, will display a view report button next to cta
+   */
+  report?: ConversionResult[]
+  // TODO figure out re report button
+  dismissible: boolean
+  timeout?: number
+}
diff --git a/packages/dui3/lib/models/card/receiver.ts b/packages/dui3/lib/models/card/receiver.ts
new file mode 100644
index 0000000000..2df09d616d
--- /dev/null
+++ b/packages/dui3/lib/models/card/receiver.ts
@@ -0,0 +1,37 @@
+import type { IModelCard } from '~~/lib/models/card'
+import { ModelCard } from '~~/lib/models/card'
+
+export interface IReceiverModelCard extends IModelCard {
+  projectName: string
+  modelName: string
+  selectedVersionId: string
+  selectedVersionSourceApp: string
+  selectedVersionUserId: string
+  latestVersionId?: string
+  latestVersionSourceApp?: string
+  latestVersionUserId?: string
+  latestVersionCreatedAt?: string
+  hasDismissedUpdateWarning: boolean
+  /** Keeps track whether the user intentionally selected an older version to receive when creating the model card. */
+  hasSelectedOldVersion: boolean
+  bakedObjectIds?: string[]
+  displayReceiveComplete: boolean
+}
+
+export class ReceiverModelCard extends ModelCard implements IReceiverModelCard {
+  projectName!: string
+  modelName!: string
+  selectedVersionId!: string
+  selectedVersionSourceApp!: string
+  selectedVersionUserId!: string
+  latestVersionId!: string
+  latestVersionSourceApp!: string
+  latestVersionUserId!: string
+  hasDismissedUpdateWarning!: boolean
+  hasSelectedOldVersion!: boolean
+  displayReceiveComplete!: boolean
+  constructor() {
+    super('ReceiverModelCard')
+    this.displayReceiveComplete = false
+  }
+}
diff --git a/packages/dui3/lib/models/card/send.ts b/packages/dui3/lib/models/card/send.ts
new file mode 100644
index 0000000000..5e518da06a
--- /dev/null
+++ b/packages/dui3/lib/models/card/send.ts
@@ -0,0 +1,51 @@
+import type { IDiscriminatedObject } from '~~/lib/bindings/definitions/common'
+import type { IModelCard } from '~~/lib/models/card'
+import { ModelCard } from '~~/lib/models/card'
+
+export interface ISenderModelCard extends IModelCard {
+  sendFilter?: ISendFilter
+  sending?: boolean
+  latestCreatedVersionId?: string
+}
+
+export interface SendFilterObjectIdentifier {
+  uniqueId: string
+  elementId: string
+  categoryId: string
+}
+
+export interface ISendFilter extends IDiscriminatedObject {
+  id: string
+  name: string
+  summary: string
+  isDefault: boolean
+  expired?: boolean
+  idMap?: Record<string, string>
+  selectedObjectIds: string[]
+}
+
+export interface IDirectSelectionSendFilter extends ISendFilter {}
+
+export interface RevitViewsSendFilter extends ISendFilter {
+  selectedView: string
+  availableViews: string[]
+}
+
+export interface CategoriesData {
+  name: string
+  id: string
+}
+
+export interface RevitCategoriesSendFilter extends ISendFilter {
+  selectedCategories: string[]
+  availableCategories: CategoriesData[]
+}
+
+export class SenderModelCard extends ModelCard implements ISenderModelCard {
+  sendFilter?: ISendFilter | undefined
+  sending?: boolean | undefined
+
+  constructor() {
+    super('SenderModelCard')
+  }
+}
diff --git a/packages/dui3/lib/models/card/setting.ts b/packages/dui3/lib/models/card/setting.ts
new file mode 100644
index 0000000000..d90853c648
--- /dev/null
+++ b/packages/dui3/lib/models/card/setting.ts
@@ -0,0 +1,11 @@
+import type { IDiscriminatedObject } from '~/lib/bindings/definitions/common'
+
+export interface CardSetting extends IDiscriminatedObject {
+  id: string
+  type: string
+  title: string
+  value: CardSettingValue
+  enum?: string[]
+}
+
+export type CardSettingValue = string | number | boolean
diff --git a/packages/dui3/lib/validation.ts b/packages/dui3/lib/validation.ts
new file mode 100644
index 0000000000..491b4d400d
--- /dev/null
+++ b/packages/dui3/lib/validation.ts
@@ -0,0 +1,44 @@
+import { ValidationHelpers } from '@speckle/ui-components'
+import type { GenericValidateFunction } from 'vee-validate'
+
+export const isEmail = ValidationHelpers.isEmail
+
+export const isOneOrMultipleEmails = ValidationHelpers.isOneOrMultipleEmails
+
+export const isRequired = ValidationHelpers.isRequired
+
+export const isSameAs = ValidationHelpers.isSameAs
+
+export const isStringOfLength = ValidationHelpers.isStringOfLength
+
+export const stringContains = ValidationHelpers.stringContains
+
+export const isUrl = ValidationHelpers.isUrl
+
+export const isItemSelected = ValidationHelpers.isItemSelected
+
+const isValidModelName: GenericValidateFunction<string> = (name) => {
+  name = name.trim()
+  if (
+    name.startsWith('/') ||
+    name.endsWith('/') ||
+    name.startsWith('#') ||
+    name.startsWith('$') ||
+    name.indexOf('//') !== -1 ||
+    name.indexOf(',') !== -1
+  )
+    return 'Value should not start with "#", "$", start or end with "/", have multiple slashes next to each other or contain commas'
+
+  if (['globals', 'main'].includes(name))
+    return `'main' and 'globals' are reserved names`
+
+  return true
+}
+
+export function useModelNameValidationRules() {
+  return computed(() => [
+    isRequired,
+    isStringOfLength({ maxLength: 512 }),
+    isValidModelName
+  ])
+}
diff --git a/packages/dui3/nuxt.config.ts b/packages/dui3/nuxt.config.ts
index b1e43cc784..6a45ba3591 100644
--- a/packages/dui3/nuxt.config.ts
+++ b/packages/dui3/nuxt.config.ts
@@ -14,12 +14,27 @@ export default defineNuxtConfig({
   ],
   alias: {
     // Rewriting all lodash calls to lodash-es for proper tree-shaking & chunk splitting
-    lodash: 'lodash-es'
+    // lodash: 'lodash-es'
   },
 
+  // pinia: {
+  //   autoImports: ['defineStore', 'storeToRefs']
+  // },
+  runtimeConfig: {
+    public: {
+      mixpanelApiHost: 'UNDEFINED',
+      mixpanelTokenId: 'UNDEFINED',
+      speckleAccountId: process.env.SPECKLE_ACCOUNT_ID,
+      speckleToken: process.env.SPECKLE_TOKEN,
+      speckleUserId: process.env.SPECKLE_USER_ID,
+      speckleUrl: process.env.SPECKLE_URL,
+      speckleSampleProjectId: process.env.SPECKLE_SAMPLE_PROJECT_ID,
+      speckleSampleModelId: process.env.SPECKLE_SAMPLE_MODEL_ID
+    }
+  },
   vite: {
     resolve: {
-      alias: [{ find: /^lodash$/, replacement: 'lodash-es' }]
+      alias: [{ find: /^lodash(?!(-es|\/fp|\.))/, replacement: 'lodash-es' }]
     },
 
     build: {
diff --git a/packages/dui3/package.json b/packages/dui3/package.json
index 40206e0c3c..72af80e574 100644
--- a/packages/dui3/package.json
+++ b/packages/dui3/package.json
@@ -26,13 +26,20 @@
     "@apollo/client": "^3.7.14",
     "@headlessui/vue": "^1.7.13",
     "@heroicons/vue": "^2.0.12",
+    "@jsonforms/core": "3.1.0",
+    "@jsonforms/vue": "3.1.0",
+    "@jsonforms/vue-vanilla": "3.1.0",
     "@pinia/nuxt": "^0.4.11",
+    "@speckle/objectsender": "workspace:^",
     "@speckle/shared": "workspace:^",
     "@speckle/ui-components": "workspace:^",
     "@speckle/ui-components-nuxt": "workspace:^",
     "@vue/apollo-composable": "^4.0.0-beta.5",
     "@vueuse/core": "^9.13.0",
     "apollo-upload-client": "^17.0.0",
+    "crypto-random-string": "^5.0.0",
+    "dayjs": "^1.11.10",
+    "dotenv": "^16.3.1",
     "graphql": "^16.6.0",
     "graphql-tag": "^2.12.6",
     "lodash-es": "^4.17.21",
@@ -40,6 +47,7 @@
     "pinia": "^2.1.4",
     "portal-vue": "^3.0.0",
     "subscriptions-transport-ws": "^0.11.0",
+    "vee-validate": "4.7.0",
     "vue-tippy": "^6.2.0"
   },
   "devDependencies": {
@@ -55,6 +63,7 @@
     "@typescript-eslint/eslint-plugin": "^7.12.0",
     "@typescript-eslint/parser": "^7.12.0",
     "@vitejs/plugin-legacy": "^4.0.3",
+    "@vue/devtools": "^6.5.0",
     "autoprefixer": "^10.4.14",
     "concurrently": "^7.5.0",
     "eslint": "^9.4.0",
diff --git a/packages/dui3/pages/index.vue b/packages/dui3/pages/index.vue
index c4096a8ba9..26c33e4e01 100644
--- a/packages/dui3/pages/index.vue
+++ b/packages/dui3/pages/index.vue
@@ -1,10 +1,194 @@
 <template>
-  <div class="flex items-center justify-center h-[calc(100vh-14rem)]">
-    <div
-      class="p-2 bg-primary text-foreground-on-primary shadow-md rounded-md font-bold"
-    >
-      TODO: Everything
+  <div v-if="store.hostAppName">
+    <!-- IMPORTANT CHECK!! otherwise host app communication corrputed for many different reasons -->
+    <div v-if="accounts.length !== 0">
+      <div
+        v-if="hasNoModelCards"
+        class="fixed top-0 h-screen w-screen flex items-center pointer-events-none"
+      >
+        <LayoutPanel
+          fancy-glow
+          class="mr-4 ml-2 scale-95 hover:scale-100 transition pointer-events-auto"
+        >
+          <h1
+            class="h4 font-bold w-full bg-gradient-to-r from-blue-500 via-blue-400 to-blue-600 inline-block py-1 text-transparent bg-clip-text"
+          >
+            Hello!
+          </h1>
+          <!-- Returning null from host app is blocked by CI for now, hence host app send here empty documentInfo, we check it's id whether null or not. -->
+          <div v-if="!!store.documentInfo?.id">
+            <div class="text-foreground-2">
+              There are no Speckle models being published or loaded in this file yet.
+            </div>
+            <div
+              class="flex space-x-2 max-[275px]:flex-col max-[275px]:space-y-2 max-[275px]:space-x-0 mt-4"
+            >
+              <div v-if="app.$sendBinding" class="grow">
+                <FormButton
+                  :icon-left="ArrowUpCircleIcon"
+                  full-width
+                  @click="handleSendClick"
+                >
+                  Publish
+                </FormButton>
+              </div>
+              <div v-if="app.$receiveBinding" class="grow">
+                <FormButton
+                  :icon-left="ArrowDownCircleIcon"
+                  full-width
+                  @click="handleReceiveClick"
+                >
+                  Load
+                </FormButton>
+              </div>
+            </div>
+          </div>
+          <div v-else>
+            <div v-if="store.documentInfo?.message" class="text-foreground-2">
+              {{ store.documentInfo?.message }}
+            </div>
+            <div v-else class="text-foreground-2">
+              Welcome to Speckle! Please open a file to use this plugin.
+            </div>
+          </div>
+        </LayoutPanel>
+      </div>
+      <div v-if="accounts.length !== 0" class="space-y-2 mt-2 max-w-2/3 mb-16">
+        <div v-for="project in store.projectModelGroups" :key="project.projectId">
+          <CommonProjectModelGroup :project="project" />
+        </div>
+      </div>
+      <div
+        v-if="!hasNoModelCards"
+        class="z-20 fixed bottom-0 left-0 w-full bg-blue-500/50 rounded-t-md p-2 z-100 flex space-x-2 max-[275px]:flex-col max-[275px]:space-y-2 max-[275px]:space-x-0"
+      >
+        <div v-if="app.$sendBinding" class="grow">
+          <FormButton
+            :icon-left="ArrowUpCircleIcon"
+            full-width
+            @click="handleSendClick"
+          >
+            Publish
+          </FormButton>
+        </div>
+        <div v-if="app.$receiveBinding" class="grow">
+          <FormButton
+            :icon-left="ArrowDownCircleIcon"
+            full-width
+            @click="handleReceiveClick"
+          >
+            Load
+          </FormButton>
+        </div>
+      </div>
+
+      <SendWizard v-model:open="showSendDialog" @close="showSendDialog = false" />
+      <ReceiveWizard
+        v-model:open="showReceiveDialog"
+        @close="showReceiveDialog = false"
+      />
+      <!-- Triggered by "Show Details" button on Toast Notification -->
+      <ErrorDialog
+        v-model:open="store.showErrorDialog"
+        chromium65-compatibility
+        @close="store.showErrorDialog = false"
+      />
+    </div>
+    <div v-else>
+      <div class="fixed top-0 h-screen w-screen flex items-center pointer-events-none">
+        <LayoutPanel
+          fancy-glow
+          class="mr-4 ml-2 scale-95 hover:scale-100 transition pointer-events-auto w-full"
+        >
+          <h1
+            class="h4 font-bold bg-gradient-to-r from-blue-500 via-blue-400 to-blue-600 inline-block py-1 text-transparent bg-clip-text"
+          >
+            Hello!
+          </h1>
+
+          <div class="text-foreground-2 mt-2 mb-4">
+            You don't have a Speckle account just yet. Please open Speckle Manager and
+            sign in!
+          </div>
+          <FormButton text link small @click="accountStore.refreshAccounts()">
+            Refresh accounts
+          </FormButton>
+          <CommonLoadingBar :loading="isLoading" />
+          <!-- 
+          TODO: Either
+          - make an open manager button, or
+          - enable auth flow from here
+         -->
+          <!-- <FormButton full-width >Open Manager</FormButton> -->
+          <!-- Test chane -->
+        </LayoutPanel>
+      </div>
+    </div>
+  </div>
+  <div v-else>
+    <div class="fixed top-0 h-screen w-screen flex items-center pointer-events-none">
+      <LayoutPanel
+        fancy-glow
+        class="mr-4 ml-2 scale-95 hover:scale-100 transition pointer-events-auto w-full"
+      >
+        <h1
+          class="h4 font-bold bg-gradient-to-r from-blue-500 via-blue-400 to-blue-600 inline-block py-1 text-transparent bg-clip-text"
+        >
+          Reload needed!
+        </h1>
+        <div class="text-foreground-2 mt-2 mb-4">
+          Host application lost its communication with user interface for some reason.
+        </div>
+        <FormButton :icon-left="ArrowPathIcon" full-width @click="reload()">
+          Reload
+        </FormButton>
+      </LayoutPanel>
     </div>
   </div>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import {
+  ArrowUpCircleIcon,
+  ArrowDownCircleIcon,
+  ArrowPathIcon
+} from '@heroicons/vue/24/solid'
+import { useAccountStore } from '~~/store/accounts'
+import { useHostAppStore } from '~~/store/hostApp'
+import { useMixpanel } from '~/lib/core/composables/mixpanel'
+const app = useNuxtApp()
+// IMPORTANT: the account store needs to be awaited here, and in any other top level page to prevent
+// race conditions on initialisation (model cards get loaded, but accounts are not there yet)
+// TODO: guard against this later, incase we will have more top level entry pages
+const accountStore = useAccountStore()
+await accountStore.refreshAccounts()
+
+const { accounts, isLoading } = storeToRefs(accountStore)
+
+const store = useHostAppStore()
+const { trackEvent } = useMixpanel()
+
+const showSendDialog = ref(false)
+const showReceiveDialog = ref(false)
+
+app.$baseBinding.on('documentChanged', () => {
+  showSendDialog.value = false
+  showReceiveDialog.value = false
+})
+
+const handleSendClick = () => {
+  showSendDialog.value = !showSendDialog.value
+  trackEvent('DUI3 Action', { name: 'Publish Wizard', step: 'start' })
+}
+
+const handleReceiveClick = () => {
+  showReceiveDialog.value = !showReceiveDialog.value
+  trackEvent('DUI3 Action', { name: 'Load Wizard', step: 'start' })
+}
+
+const hasNoModelCards = computed(() => store.projectModelGroups.length === 0)
+
+const reload = () => {
+  window.location.reload()
+}
+</script>
diff --git a/packages/dui3/pages/test.vue b/packages/dui3/pages/test.vue
index 9eb0837b8e..38ee3f714e 100644
--- a/packages/dui3/pages/test.vue
+++ b/packages/dui3/pages/test.vue
@@ -1,19 +1,84 @@
 <template>
   <div class="flex flex-col space-y-2">
-    <Portal to="navigation">
-      <FormButton to="/" size="sm" :icon-left="ArrowLeftIcon" class="ml-2">
-        Back home
-      </FormButton>
-    </Portal>
-    <div>
-      <p class="text-sm text-foreground-2 py-2 px-2">
+    <div class="px-2 mt-2">
+      <FormButton to="/" size="sm" :icon-left="ArrowLeftIcon">Home</FormButton>
+      <p class="h5">Document info</p>
+      <p class="text-sm text-foreground-2 py-2">
+        Current document info. This should change on document swaps, closure, opening,
+        etc.
+      </p>
+      <div class="text-xs mx-3 p-4 rounded shadow-inner overflow-auto simple-scrollbar">
+        <pre>{{ documentInfo }}</pre>
+      </div>
+    </div>
+    <div class="px-2">
+      <p class="h5">Send Filters</p>
+      <p class="text-sm text-foreground-2 space-x-2">Available send filters:</p>
+      <div class="space-y-2 my-2">
+        <div v-for="filter in sendFilters" :key="filter.name">
+          <div>
+            <span
+              class="rounded-full text-xs px-2 bg-primary text-foreground-on-primary mr-2"
+            >
+              {{ filter.name }}
+            </span>
+            <span class="text-xs text-foreground-2">{{ filter.summary }}</span>
+          </div>
+        </div>
+      </div>
+      <div
+        class="text-xs mx-3 p-4 rounded shadow-inner overflow-auto simple-scrollbar max-h-20"
+      >
+        <pre>{{ sendFilters }}</pre>
+      </div>
+    </div>
+    <div class="px-2">
+      <p class="h5 mb-4">Chromium 65 Scrollable Dialogs Test</p>
+      <FormButton @click="showBigDialog = !showBigDialog">Show Big Dialog</FormButton>
+      <LayoutDialog v-model:open="showBigDialog" title="hello" fullscreen="none">
+        <div class="bg-purple-500" style="height: 2000px">
+          This is a test for chromium 65. If this is not scrollable, something is wrong!
+        </div>
+      </LayoutDialog>
+    </div>
+    <div class="px-2">
+      <p class="h5">Selection info</p>
+      <p class="text-sm text-foreground-2 py-2">
+        Selection info. This should change in real time based on user selection, but
+        there's an imperative method too in case that's impossible.
+      </p>
+      <div
+        class="text-xs mx-3 p-4 rounded shadow-inner overflow-auto simple-scrollbar max-h-40"
+      >
+        <div v-if="!hasSelectionBinding" class="text-danger mb-2">
+          No selection binding registered.
+        </div>
+        <pre>{{ selectionInfo }}</pre>
+      </div>
+    </div>
+    <div class="px-2">
+      <p class="h5">Document State</p>
+      <p class="text-sm text-foreground-2 py-2">
+        What state is in this document (currently just model cards).
+      </p>
+      <div
+        class="text-xs mx-3 p-4 rounded shadow-inner overflow-auto simple-scrollbar max-h-40"
+      >
+        <div class="text-info mb-2">
+          There are currently {{ totalModelCount }} model card(s).
+        </div>
+        <pre>{{ projectModelGroups }}</pre>
+      </div>
+    </div>
+    <div class="px-2">
+      <p class="h5">Binding tests</p>
+      <p class="text-sm text-foreground-2 py-2">
         Do not expect these to save the day. They are just some
         <b class="text-foreground-primary">minor sanity checks</b>
         .
       </p>
     </div>
     <FormButton
-      size="xl"
       color="card"
       full-width
       class="sticky top-10 top-16"
@@ -42,10 +107,34 @@
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import { ArrowLeftIcon, CheckIcon, MinusIcon, XMarkIcon } from '@heroicons/vue/20/solid'
 import type { TestEventArgs } from '~/lib/bindings/definitions/ITestBinding'
+import { useHostAppStore } from '~/store/hostApp'
+import { useSelectionStore } from '~/store/selection'
+
+const showBigDialog = ref(false)
+
 const { $testBindings } = useNuxtApp()
 
+const store = useHostAppStore()
+
+const { documentInfo, sendFilters, projectModelGroups } = storeToRefs(store)
+
+const totalModelCount = computed(() => {
+  let count = 0
+  for (const pmg of projectModelGroups.value) {
+    count += pmg.senders.length
+    count += pmg.receivers.length
+  }
+  return count
+})
+
+const selectionStore = useSelectionStore()
+const { selectionInfo, hasBinding: hasSelectionBinding } = storeToRefs(selectionStore)
+
+await store.refreshSendFilters()
+
 const tests = ref([
   {
     name: 'Simple call with parameters',
@@ -136,25 +225,21 @@ const runTests = async () => {
 
 $testBindings.on('emptyTestEvent', () => {
   setTimeout(() => {
-    console.log('sketchup sent event back', 'emptyTestEvent')
-
     const myTest = tests.value.find((t) => t.name === 'Simple event capture')
-    console.log(myTest, 'myTest')
 
     if (!myTest) return
     myTest.status = 1
     myTest.result = 'got an event back, we are okay'
-  }, 300)
+  }, 1000)
 })
 
 $testBindings.on('testEvent', (args: TestEventArgs) => {
   setTimeout(() => {
-    console.log(args, 'testEvent')
     const myTest = tests.value.find((t) => t.name === 'Event capture with args')
-    console.log(myTest, 'myTest')
+
     if (!myTest) return
     myTest.status = 1
     myTest.result = args
-  }, 300)
+  }, 1000)
 })
 </script>
diff --git a/packages/dui3/plugins/00.bindings.ts b/packages/dui3/plugins/00.bindings.ts
index 59e3c788ad..b8b61b3b59 100644
--- a/packages/dui3/plugins/00.bindings.ts
+++ b/packages/dui3/plugins/00.bindings.ts
@@ -1,32 +1,35 @@
 import type { IRawBridge } from '~/lib/bridge/definitions'
-
-import { GenericBridge } from '~/lib/bridge/generic'
+import { GenericBridge } from '~/lib/bridge/generic-v2'
 import { SketchupBridge } from '~/lib/bridge/sketchup'
 
 import type { IBasicConnectorBinding } from '~/lib/bindings/definitions/IBasicConnectorBinding'
-import {
-  IBasicConnectorBindingKey,
-  MockedBaseBinding
-} from '~/lib/bindings/definitions/IBasicConnectorBinding'
+import type { IAccountBinding } from '~/lib/bindings/definitions/IAccountBinding'
+import { IAccountBindingKey } from '~/lib/bindings/definitions/IAccountBinding'
 
 import type { ITestBinding } from '~/lib/bindings/definitions/ITestBinding'
-import {
-  ITestBindingKey,
-  MockedTestBinding
-} from '~/lib/bindings/definitions/ITestBinding'
+import { ITestBindingKey } from '~/lib/bindings/definitions/ITestBinding'
 
 import type { IConfigBinding } from '~/lib/bindings/definitions/IConfigBinding'
-import {
-  IConfigBindingKey,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  MockedConfigBinding
-} from '~/lib/bindings/definitions/IConfigBinding'
+import { IConfigBindingKey } from '~/lib/bindings/definitions/IConfigBinding'
+
+import { IBasicConnectorBindingKey } from '~/lib/bindings/definitions/IBasicConnectorBinding'
+
+import type { ISendBinding } from '~/lib/bindings/definitions/ISendBinding'
+import { ISendBindingKey } from '~/lib/bindings/definitions/ISendBinding'
+import type { IReceiveBinding } from '~/lib/bindings/definitions/IReceiveBinding'
+import { IReceiveBindingKey } from '~/lib/bindings/definitions/IReceiveBinding'
+
+import type { ISelectionBinding } from '~/lib/bindings/definitions/ISelectionBinding'
+import { ISelectionBindingKey } from '~/lib/bindings/definitions/ISelectionBinding'
+import type { ITopLevelExpectionHandlerBinding } from '~/lib/bindings/definitions/ITopLevelExceptionHandlerBinding'
+import { ITopLevelExpectionHandlerBindingKey } from '~/lib/bindings/definitions/ITopLevelExceptionHandlerBinding'
 
 // Makes TS happy
 declare let globalThis: Record<string, unknown> & {
   CefSharp?: { BindObjectAsync: (name: string) => Promise<void> }
   chrome?: { webview: { hostObjects: Record<string, IRawBridge> } }
   sketchup?: Record<string, unknown>
+  DG?: { LoadObject: (name: string) => Promise<void> }
 }
 
 /**
@@ -35,35 +38,55 @@ declare let globalThis: Record<string, unknown> & {
  * strip or customize functionality from the ui itself.
  */
 export default defineNuxtPlugin(async () => {
-  // Registers some default test bindings.
-  const testBindings =
-    (await tryHoistBinding<ITestBinding>(ITestBindingKey)) || new MockedTestBinding()
-
-  // Tries to register some non-existant bindings.
+  // Registers a set of non existent bindings as a test.
   const nonExistantBindings = await tryHoistBinding('nonExistantBindings')
 
-  // Registers a set of default bindings.
-  const baseBinding =
-    (await tryHoistBinding<IBasicConnectorBinding>(IBasicConnectorBindingKey)) ||
-    new MockedBaseBinding()
+  // Registers some default test bindings.
+  const testBindings = await tryHoistBinding<ITestBinding>(ITestBindingKey)
 
-  // UI configuration bindings.
+  // Actual bindings follow below.
   const configBinding = await tryHoistBinding<IConfigBinding>(IConfigBindingKey)
 
+  const accountBinding = await tryHoistBinding<IAccountBinding>(IAccountBindingKey)
+
+  const baseBinding = await tryHoistBinding<IBasicConnectorBinding>(
+    IBasicConnectorBindingKey
+  )
+
+  const sendBinding = await tryHoistBinding<ISendBinding>(ISendBindingKey)
+
+  const receiveBinding = await tryHoistBinding<IReceiveBinding>(IReceiveBindingKey)
+
+  const selectionBinding = await tryHoistBinding<ISelectionBinding>(
+    ISelectionBindingKey
+  )
+
+  const topLevelExceptionHandlerBinding =
+    await tryHoistBinding<ITopLevelExpectionHandlerBinding>(
+      ITopLevelExpectionHandlerBindingKey
+    )
+
+  // Any binding implments these two methods below, we just choose one to
+  // expose globally to the app.
   const showDevTools = () => {
-    baseBinding.showDevTools()
+    configBinding.showDevTools()
   }
 
   const openUrl = (url: string) => {
-    baseBinding.openUrl(url)
+    configBinding.openUrl(url)
   }
 
   return {
     provide: {
-      testBindings,
       nonExistantBindings,
-      baseBinding,
+      testBindings,
       configBinding,
+      accountBinding,
+      baseBinding,
+      sendBinding,
+      receiveBinding,
+      selectionBinding,
+      topLevelExceptionHandlerBinding,
       showDevTools,
       openUrl
     }
@@ -80,11 +103,6 @@ const tryHoistBinding = async <T>(name: string) => {
   let bridge: GenericBridge | SketchupBridge | null = null
   let tempBridge: GenericBridge | SketchupBridge | null = null
 
-  if (globalThis.CefSharp) {
-    await globalThis.CefSharp.BindObjectAsync(name)
-    tempBridge = new GenericBridge(globalThis[name] as unknown as IRawBridge)
-  }
-
   if (globalThis.chrome && globalThis.chrome.webview && !tempBridge) {
     tempBridge = new GenericBridge(globalThis.chrome.webview.hostObjects[name])
   }
@@ -93,11 +111,37 @@ const tryHoistBinding = async <T>(name: string) => {
     tempBridge = new SketchupBridge(name)
   }
 
+  if (globalThis.CefSharp && globalThis.DG && !tempBridge) {
+    await globalThis.CefSharp.BindObjectAsync(name)
+    tempBridge = new GenericBridge(globalThis[name] as unknown as IRawBridge, true)
+  }
+
+  if (globalThis.CefSharp && !tempBridge) {
+    await globalThis.CefSharp.BindObjectAsync(name)
+    tempBridge = new GenericBridge(globalThis[name] as unknown as IRawBridge)
+  }
+
   const res = await tempBridge?.create()
   if (res) bridge = tempBridge
 
-  if (!bridge) console.warn(`Failed to bind ${name} binding.`)
+  if (!bridge) {
+    console.warn(`Failed to bind ${name} binding.`)
+    return bridge as unknown as T
+  }
 
   globalThis[name] = bridge
+  console.log(
+    `%c✔ ${name} connector binding added succesfully.`,
+    'color: green; font-weight: bold; font-size: small'
+  )
   return bridge as unknown as T
 }
+
+// const hoistMockBinding = (mockBinding: BaseBridge, name: string) => {
+//   globalThis[name] = mockBinding
+//   console.log(
+//     `%c✔ Mocked ${name} binding added succesfully.`,
+//     'color: green; font-weight: bold; font-size: small'
+//   )
+//   return mockBinding
+// }
diff --git a/packages/dui3/plugins/dayjs.ts b/packages/dui3/plugins/dayjs.ts
new file mode 100644
index 0000000000..f25575f898
--- /dev/null
+++ b/packages/dui3/plugins/dayjs.ts
@@ -0,0 +1,8 @@
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+
+export default defineNuxtPlugin(() => {
+  dayjs.extend(relativeTime)
+  dayjs.extend(localizedFormat)
+})
diff --git a/packages/dui3/plugins/dev.ts b/packages/dui3/plugins/dev.ts
new file mode 100644
index 0000000000..ab09bed3bc
--- /dev/null
+++ b/packages/dui3/plugins/dev.ts
@@ -0,0 +1,6 @@
+export default defineNuxtPlugin(async () => {
+  // if (!process.dev) return
+  // if (process.server) return
+  // const devtools = await import('@vue/devtools')
+  // devtools.connect()
+})
diff --git a/packages/dui3/store/accounts.ts b/packages/dui3/store/accounts.ts
index 16872ea9d3..a96c2170ca 100644
--- a/packages/dui3/store/accounts.ts
+++ b/packages/dui3/store/accounts.ts
@@ -1,10 +1,289 @@
 import { defineStore } from 'pinia'
-import { useInjectedAccounts } from '~/lib/accounts/composables/setup'
+import type { ApolloLink } from '@apollo/client/core'
+import {
+  ApolloClient,
+  InMemoryCache,
+  gql,
+  HttpLink,
+  split,
+  from
+} from '@apollo/client/core'
+import { ApolloClients, provideApolloClients } from '@vue/apollo-composable'
+import type { Account } from '~/lib/bindings/definitions/IAccountBinding'
+import { WebSocketLink } from '@apollo/client/link/ws'
+import { onError, type ErrorResponse } from '@apollo/client/link/error'
+import { getMainDefinition } from '@apollo/client/utilities'
+import { setContext } from '@apollo/client/link/context'
+import { useHostAppStore } from '~/store/hostApp'
+import type { ToastNotification } from '@speckle/ui-components'
+import { ToastNotificationType } from '@speckle/ui-components'
+
+export type DUIAccount = {
+  /** account info coming from the host app */
+  accountInfo: Account
+  /** the graphql client; a bit superflous */
+  client: ApolloClient<unknown>
+  /** whether an intial serverinfo query succeeded. */
+  isValid: boolean
+}
+
+const accountTestQuery = gql`
+  query AcccountTestQuery {
+    serverInfo {
+      version
+      name
+      company
+    }
+  }
+`
 
-// NOTE: this store simply wraps around the injected accounts composable (for now)
 export const useAccountStore = defineStore('accountStore', () => {
-  const { accounts, refreshAccounts, defaultAccount, validAccounts, loading } =
-    useInjectedAccounts()
+  const app = useNuxtApp()
+  const { $accountBinding, $configBinding } = app
+
+  const hostAppStore = useHostAppStore()
+
+  const apolloClients = {} as Record<string, ApolloClient<unknown>>
+  const accounts = ref<DUIAccount[]>([])
+  const isLoading = ref(false)
+
+  const defaultAccount = computed(
+    () => accounts.value.find((acc) => acc.accountInfo.isDefault) as DUIAccount
+  )
+
+  const userSelectedAccount = ref<DUIAccount>()
+
+  /**
+   * Returns either the default account or the last account the user has selected.
+   */
+  const activeAccount = computed(() => {
+    return userSelectedAccount.value || defaultAccount.value
+  })
+
+  const setUserSelectedAccount = (acc: DUIAccount) => {
+    userSelectedAccount.value = acc
+    try {
+      // NOTE: for the safe merge!
+      $configBinding.setUserSelectedAccountId(acc.accountInfo.id) // not need to await, fire and forget?
+    } catch (error) {
+      console.warn(error)
+    }
+  }
+
+  const testAccounts = async () => {
+    isLoading.value = true
+
+    for (const acc of accounts.value) {
+      if (!acc.client) continue
+      if (!acc.accountInfo.serverInfo.frontend2) continue
+      try {
+        await acc.client.query({ query: accountTestQuery })
+        acc.isValid = true
+      } catch (error) {
+        // TODO: properly dispose and kill this client. It's unclear how to do it.
+        acc.isValid = false
+        // NOTE: we do not want to delete the client, as we might want to "refresh" in
+        // case the user was not connected to the interweb.
+        // acc.client.disableNetworkFetches = true
+        // acc.client.stop()
+        // delete acc.client
+      }
+    }
+    isLoading.value = false
+  }
+
+  const refreshAccounts = async () => {
+    isLoading.value = true
+    const accs = await $accountBinding.getAccounts()
+    const newAccs: DUIAccount[] = []
+
+    for (const acc of accs) {
+      const existing = accounts.value.find((a) => a.accountInfo.id === acc.id)
+      if (existing) {
+        newAccs.push(existing as DUIAccount)
+        continue
+      }
+
+      // Handle apollo client errors as top level
+      const errorLink = onError((res: ErrorResponse) => {
+        if (res.graphQLErrors) {
+          if (
+            res.graphQLErrors?.some(
+              (err) => err.extensions.code === 'SSO_SESSION_MISSING_OR_EXPIRED_ERROR'
+            )
+          ) {
+            hostAppStore.setNotification({
+              type: ToastNotificationType.Warning,
+              title: 'SSO Required',
+              description:
+                'Your workspace requires SSO authentication. Please sign in and try again.'
+            })
+          }
+
+          const messages: string[] = []
+          res.graphQLErrors.forEach(({ message, path }) => {
+            messages.push(`${message},\n Path: ${path}`)
+          })
+
+          const notification: ToastNotification = {
+            type: ToastNotificationType.Danger,
+            title: 'Graphql Error',
+            description: messages.join('\n')
+          }
+          hostAppStore.setNotification(notification)
+        }
+
+        if (res.networkError) {
+          const notification: ToastNotification = {
+            type: ToastNotificationType.Danger,
+            title: 'Network Error',
+            description: res.networkError.message
+          }
+          hostAppStore.setNotification(notification)
+        }
+      })
+
+      const link = splitLink(
+        getLinks(new URL('/graphql', acc.serverInfo.url).href, 'Bearer ' + acc.token)
+      )
+      const client = new ApolloClient({
+        cache: new InMemoryCache(),
+        link: from([errorLink, link]),
+        headers: {
+          Authorization: 'Bearer ' + acc.token
+        }
+      })
+
+      // const workspacesEnabled = false
+      // try {
+      //   // get workspace enabled flag and store it in account
+      //   const res = await client.query({ query: serverInfoQuery })
+      //   workspacesEnabled = !!res.data.serverInfo.workspaces.workspacesEnabled
+      // } catch (err) {
+      //   // probably having some local account or client could not established well for some reason!
+      //   console.log(err)
+      // }
+
+      apolloClients[acc.id] = client
+      newAccs.push({
+        accountInfo: acc,
+        client,
+        isValid: true
+      })
+    }
+
+    accounts.value = newAccs
+    isLoading.value = false
+  }
+
+  const getLinks = (serverUrl: string, token: string) => {
+    const authHeaderValue = token
+    const httpLink = new HttpLink({
+      uri: serverUrl
+    })
+
+    const authLink = setContext((_, { headers }) => {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      return { headers: { ...headers, Authorization: authHeaderValue } }
+    })
+
+    const link = authLink.concat(httpLink as unknown as ApolloLink)
+
+    const wsLink = new WebSocketLink({
+      uri: serverUrl.replace('http', 'ws'),
+      options: {
+        reconnect: true,
+        connectionParams: {
+          Authorization: authHeaderValue
+        }
+      }
+    })
+    return { httpLink: link, wsLink }
+  }
+
+  const splitLink = ({
+    httpLink,
+    wsLink
+  }: {
+    httpLink: ApolloLink
+    wsLink: WebSocketLink
+  }) =>
+    split(
+      ({ query }) => {
+        const definition = getMainDefinition(query)
+        return (
+          definition.kind === 'OperationDefinition' &&
+          definition.operation === 'subscription'
+        )
+      },
+      wsLink,
+      httpLink
+    )
+
+  const isAccountExistsById = (accountId: string) => {
+    return !!accounts.value.find((acc) => acc.accountInfo.id === accountId)
+  }
+
+  const isAccountExistsByServer = (serverUrl: string) => {
+    return !!accounts.value.find((acc) => acc.accountInfo.serverInfo.url === serverUrl)
+  }
+
+  const accountWithFallback = (accountId: string, serverUrl: string) => {
+    const accountMatchWithId = accounts.value.find(
+      (acc) => acc.accountInfo.id === accountId
+    )
+    if (accountMatchWithId) return accountMatchWithId
+    // NOTE: we do assumption here by having first matched url.
+    const accountMatchWithServerUrl = accounts.value.find(
+      (acc) => acc.accountInfo.serverInfo.url === serverUrl
+    )
+    if (accountMatchWithServerUrl) return accountMatchWithServerUrl
+
+    return activeAccount.value
+  }
+
+  const accountByServerUrl = (serverUrl: string) => {
+    const accountMatchWithServerUrl = accounts.value.find(
+      (acc) => acc.accountInfo.serverInfo.url === serverUrl
+    )
+    if (accountMatchWithServerUrl) return accountMatchWithServerUrl
+  }
+
+  const provideClients = () => {
+    provideApolloClients(apolloClients)
+  }
+
+  watch(accounts, () => {
+    void testAccounts()
+  })
+
+  const init = async () => {
+    await refreshAccounts()
+    try {
+      const accountsConfig = await $configBinding.getUserSelectedAccountId()
+      userSelectedAccount.value = accounts.value.find(
+        (a) => a.accountInfo.id === accountsConfig.userSelectedAccountId
+      ) as DUIAccount
+    } catch (error) {
+      console.warn(error)
+    }
+  }
+
+  init()
 
-  return { accounts, refreshAccounts, defaultAccount, validAccounts, loading }
+  app.vueApp.provide(ApolloClients, apolloClients)
+  return {
+    isLoading,
+    accounts,
+    defaultAccount,
+    activeAccount,
+    userSelectedAccount,
+    setUserSelectedAccount,
+    accountByServerUrl,
+    isAccountExistsById,
+    isAccountExistsByServer,
+    refreshAccounts,
+    accountWithFallback,
+    provideClients
+  }
 })
diff --git a/packages/dui3/store/config.ts b/packages/dui3/store/config.ts
new file mode 100644
index 0000000000..d57af6e963
--- /dev/null
+++ b/packages/dui3/store/config.ts
@@ -0,0 +1,42 @@
+import type { ConnectorConfig } from 'lib/bindings/definitions/IConfigBinding'
+import { defineStore } from 'pinia'
+
+export const useConfigStore = defineStore('configStore', () => {
+  const { $configBinding } = useNuxtApp()
+
+  const hasConfigBindings = ref(!!$configBinding)
+
+  const config = ref<ConnectorConfig>({ darkTheme: true })
+
+  const isDarkTheme = computed(() => {
+    return config.value?.darkTheme
+  })
+  const isDevMode = ref(false)
+
+  const toggleTheme = () => {
+    config.value.darkTheme = !config.value.darkTheme
+    $configBinding.updateConfig(config.value)
+  }
+
+  const isInitialized = ref(false)
+
+  const init = async () => {
+    if (!$configBinding) return
+    config.value = await $configBinding.getConfig()
+  }
+  init()
+
+  const getIsDevMode = async () =>
+    (isDevMode.value = await $configBinding.getIsDevMode())
+
+  void getIsDevMode()
+
+  return {
+    isInitialized,
+    config,
+    hasConfigBindings,
+    isDarkTheme,
+    isDevMode,
+    toggleTheme
+  }
+})
diff --git a/packages/dui3/store/documentInfo.ts b/packages/dui3/store/documentInfo.ts
deleted file mode 100644
index 76f9485d9e..0000000000
--- a/packages/dui3/store/documentInfo.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { defineStore } from 'pinia'
-import type { DocumentInfo } from 'lib/bindings/definitions/IBasicConnectorBinding'
-
-export const useDocumentInfoStore = defineStore('documentInfoStore', () => {
-  const app = useNuxtApp()
-  const documentInfo = ref<DocumentInfo>()
-
-  app.$baseBinding.on('documentChanged', () => {
-    console.log('doc changed')
-    setTimeout(async () => {
-      const docInfo = await app.$baseBinding.getDocumentInfo()
-      documentInfo.value = docInfo
-    }, 500) // Rhino needs some time.
-  })
-
-  const initDocInfo = async () => {
-    documentInfo.value = await app.$baseBinding.getDocumentInfo()
-  }
-
-  void initDocInfo()
-
-  return { documentInfo }
-})
diff --git a/packages/dui3/store/hostApp.ts b/packages/dui3/store/hostApp.ts
new file mode 100644
index 0000000000..8e98295129
--- /dev/null
+++ b/packages/dui3/store/hostApp.ts
@@ -0,0 +1,616 @@
+import type {
+  DocumentInfo,
+  DocumentModelStore
+} from '~/lib/bindings/definitions/IBasicConnectorBinding'
+import type { IModelCard, ModelCardProgress } from 'lib/models/card'
+import { useMixpanel } from '~/lib/core/composables/mixpanel'
+import type { IReceiverModelCard } from '~/lib/models/card/receiver'
+import type {
+  IDirectSelectionSendFilter,
+  ISendFilter,
+  ISenderModelCard,
+  RevitViewsSendFilter
+} from 'lib/models/card/send'
+import type { ToastNotification } from '@speckle/ui-components'
+import type { Nullable } from '@speckle/shared'
+import type { HostAppError } from '~/lib/bridge/errorHandler'
+import type { ConversionResult } from 'lib/conversions/conversionResult'
+import { defineStore } from 'pinia'
+import type { CardSetting } from '~/lib/models/card/setting'
+import { useAccountStore } from '~/store/accounts'
+import type { Version } from '~/lib/core/composables/updateConnector'
+
+export type ProjectModelGroup = {
+  projectId: string
+  accountId: string
+  serverUrl: string
+  senders: ISenderModelCard[]
+  receivers: IReceiverModelCard[]
+}
+
+export const useHostAppStore = defineStore('hostAppStore', () => {
+  const app = useNuxtApp()
+  const { trackEvent } = useMixpanel()
+  const { $openUrl } = useNuxtApp()
+  const accountsStore = useAccountStore()
+
+  const latestAvailableVersion = ref<Version | null>(null)
+
+  const currentNotification = ref<Nullable<ToastNotification>>(null)
+  const showErrorDialog = ref<boolean>(false)
+  const hostAppError = ref<Nullable<HostAppError>>(null)
+
+  const hostAppName = ref<string>()
+  const hostAppVersion = ref<string>()
+  const connectorVersion = ref<string>()
+  const documentInfo = ref<DocumentInfo>()
+  const documentModelStore = ref<DocumentModelStore>({ models: [] })
+
+  const availableViews = ref<string[]>()
+
+  const dismissNotification = () => {
+    currentNotification.value = null
+  }
+
+  const setNotification = (notification: Nullable<ToastNotification>) => {
+    currentNotification.value = notification
+  }
+
+  const setLatestAvailableVersion = (version: Nullable<Version>) => {
+    latestAvailableVersion.value = version
+  }
+
+  function downloadLatestVersion() {
+    $openUrl(latestAvailableVersion.value?.Url as string)
+  }
+
+  const isConnectorUpToDate = computed(
+    () => connectorVersion.value === latestAvailableVersion.value?.Number
+  )
+
+  const setHostAppError = (error: Nullable<HostAppError>) => {
+    hostAppError.value = error
+  }
+
+  /**
+   * Model Card Operations
+   */
+
+  /**
+   * A list of all models currently in the file, grouped by the project they are part of.
+   */
+  const projectModelGroups = computed(() => {
+    const projectModelGroups: ProjectModelGroup[] = []
+    for (const model of documentModelStore.value.models) {
+      let project = projectModelGroups.find((p) => p.projectId === model.projectId)
+      if (!project) {
+        project = {
+          projectId: model.projectId,
+          accountId: model.accountId,
+          serverUrl: model.serverUrl,
+          senders: [],
+          receivers: []
+        }
+        projectModelGroups.push(project)
+      }
+      if (model.typeDiscriminator.toLowerCase().includes('sender'))
+        project.senders.push(model as ISenderModelCard)
+      if (model.typeDiscriminator.toLowerCase().includes('receiver'))
+        project.receivers.push(model as IReceiverModelCard)
+    }
+    return projectModelGroups
+  })
+
+  const models = computed(() => {
+    return documentModelStore.value.models
+  })
+
+  /**
+   * Adds a new model and persists it to the host app file.
+   * @param model
+   */
+  const addModel = async (model: IModelCard) => {
+    await app.$baseBinding.addModel(model)
+    documentModelStore.value.models.push(model)
+  }
+
+  /**
+   * Updates a model's provided properties and persists the changes in the host application.
+   * @param modelCardId The model card id (NOT the model id).
+   * @param properties Properties to update.
+   * @param updateInHostApp Whether to sync the state to the host app. Defaults to true.
+   */
+  const patchModel = async (
+    modelCardId: string,
+    properties: Record<string, unknown>,
+    updateInHostApp: boolean = true
+  ) => {
+    const modelIndex = documentModelStore.value.models.findIndex(
+      (m) => m.modelCardId === modelCardId
+    )
+
+    documentModelStore.value.models[modelIndex] = {
+      ...documentModelStore.value.models[modelIndex],
+      ...properties
+    }
+
+    if (!updateInHostApp) return
+    await app.$baseBinding.updateModel(documentModelStore.value.models[modelIndex])
+  }
+
+  /**
+   * Removes a model from the store and the host app file.
+   * @param model
+   */
+  const removeModel = async (model: IModelCard) => {
+    await app.$baseBinding.removeModel(model)
+    documentModelStore.value.models = documentModelStore.value.models.filter(
+      (item) => item.modelCardId !== model.modelCardId
+    )
+
+    void trackEvent(
+      'DUI3 Action',
+      { name: 'Remove Model Card', type: model.typeDiscriminator },
+      model.accountId
+    )
+  }
+
+  const removeProjectModels = async (projectId: string) => {
+    const modelsToRemove = documentModelStore.value.models.filter(
+      (item) => item.projectId === projectId
+    )
+
+    for (const modelToRemove of modelsToRemove) {
+      await removeModel(modelToRemove)
+    }
+  }
+
+  const sendSettings = ref<CardSetting[]>()
+
+  /**
+   * Send filters
+   */
+
+  /**
+   * The host app's available send filters.
+   */
+  const sendFilters = ref<ISendFilter[]>()
+
+  /**
+   * Selection filter shortcut - use it as a default if possible.
+   */
+  const selectionFilter = computed(
+    () => sendFilters.value?.find((f) => f.name === 'Selection') as ISendFilter
+  )
+
+  // Used on Archicad so far since send operation blocks the UI thread.
+  app.$sendBinding?.on('triggerCancel', (modelCardId: string) => {
+    const model = documentModelStore.value.models.find(
+      (m) => m.modelCardId === modelCardId
+    ) as ISenderModelCard
+    model.progress = undefined
+    model.error = undefined
+    void trackEvent('DUI3 Action', { name: 'Send Cancel' }, model.accountId)
+    model.latestCreatedVersionId = undefined
+  })
+
+  app.$sendBinding?.on(
+    'setIdMap',
+    async ({ modelCardId, idMap, newSelectedObjectIds }) => {
+      const modelCard = models.value.find(
+        (card) => card.modelCardId === modelCardId
+      ) as ISenderModelCard
+      if (!modelCard) return
+
+      const newFilter = {
+        ...modelCard.sendFilter,
+        selectedObjectIds: newSelectedObjectIds,
+        idMap
+      }
+
+      await patchModel(modelCardId, { sendFilter: newFilter })
+    }
+  )
+
+  app.$selectionBinding?.on('setSelection', (selInfo) => {
+    const modelCards = models.value.filter(
+      (m) =>
+        m.typeDiscriminator.toLowerCase().includes('sender') &&
+        (m as ISenderModelCard).sendFilter?.name === 'Selection'
+    ) as ISenderModelCard[]
+
+    for (const model of modelCards) {
+      const filter = model.sendFilter as IDirectSelectionSendFilter
+      if (selInfo.selectedObjectIds.length === 0) {
+        filter.expired = false
+        continue
+      }
+      const a1 = filter.selectedObjectIds.sort().join()
+      const a2 = selInfo.selectedObjectIds.sort().join()
+
+      filter.expired = a1 !== a2
+      // filter.expired =
+      //   filter.selectedObjectIds.filter((id) => !selInfo.selectedObjectIds.includes(id))
+      //     .length !== 0
+    }
+  })
+
+  /**
+   * Everything filter shortcut - do not use it as a default.
+   */
+  const everythingFilter = computed(
+    () => sendFilters.value?.find((f) => f.name === 'Everything') as ISendFilter
+  )
+
+  /**
+   * Subscribe to notifications about send filters.
+   */
+  app.$sendBinding?.on('refreshSendFilters', () => void refreshSendFilters())
+
+  /**
+   * Send functionality
+   */
+
+  /**
+   * Tells the host app to start sending a specific model card. This will reach inside the host application.
+   * @param modelId
+   */
+  const sendModel = (modelCardId: string, actionSource: string) => {
+    const model = documentModelStore.value.models.find(
+      (m) => m.modelCardId === modelCardId
+    ) as ISenderModelCard
+    if (model.expired) {
+      // user sends via "Update" button
+      void trackEvent(
+        'Send',
+        {
+          expired: true,
+          actionSource: actionSource.toLowerCase(),
+          // eslint-disable-next-line camelcase
+          workspace_id: model.workspaceId
+        },
+        model.accountId
+      )
+    } else {
+      void trackEvent(
+        'Send',
+        {
+          expired: false,
+          actionSource: actionSource.toLowerCase(),
+          // eslint-disable-next-line camelcase
+          workspace_id: model.workspaceId
+        },
+        model.accountId
+      )
+    }
+    model.latestCreatedVersionId = undefined
+    model.error = undefined
+    model.progress = { status: 'Starting to send...' }
+    model.expired = false
+    model.report = undefined
+    // You should stop asking why if you saw anything related autocad..
+    // It solves the press "escape" issue.
+    // Because probably we don't give enough time to acad complete it's previos task and it stucks.
+    const shittyHostApps = ['autocad']
+    if (shittyHostApps.includes(hostAppName.value as string)) {
+      setTimeout(() => {
+        void app.$sendBinding.send(modelCardId)
+      }, 500) // I prefer to sacrifice 500ms
+    } else {
+      void app.$sendBinding.send(modelCardId)
+    }
+  }
+
+  /**
+   * Cancels a model card's ongoing send operation. This will reach inside the host application.
+   * @param modelId
+   */
+  const sendModelCancel = async (modelCardId: string) => {
+    const model = documentModelStore.value.models.find(
+      (m) => m.modelCardId === modelCardId
+    ) as ISenderModelCard
+    await app.$sendBinding.cancelSend(modelCardId)
+    model.progress = undefined
+    model.error = undefined
+    void trackEvent('DUI3 Action', { name: 'Send Cancel' }, model.accountId)
+    model.latestCreatedVersionId = undefined
+  }
+
+  app.$sendBinding?.on('setModelsExpired', (modelCardIds) => {
+    documentModelStore.value.models
+      .filter((m) => modelCardIds.includes(m.modelCardId))
+      .forEach((model: ISenderModelCard) => {
+        model.latestCreatedVersionId = undefined
+        model.error = undefined
+        model.expired = true
+      })
+  })
+
+  const setModelSendResult = (args: {
+    modelCardId: string
+    versionId: string
+    sendConversionResults: ConversionResult[]
+  }) => {
+    const model = documentModelStore.value.models.find(
+      (m) => m.modelCardId === args.modelCardId
+    ) as ISenderModelCard
+    model.latestCreatedVersionId = args.versionId
+    model.report = args.sendConversionResults
+    model.progress = undefined
+  }
+
+  app.$sendBinding?.on('setModelSendResult', setModelSendResult)
+
+  /// RECEIVE STUFF
+  const receiveModel = async (modelCardId: string, actionSource: string) => {
+    const model = documentModelStore.value.models.find(
+      (m) => m.modelCardId === modelCardId
+    ) as IReceiverModelCard
+
+    const account = accountsStore.accounts.find(
+      (a) => a.accountInfo.id === model.accountId
+    )
+
+    void trackEvent(
+      'Receive',
+      {
+        expired: model.expired,
+        sourceHostApp: model.selectedVersionSourceApp,
+        isMultiplayer: model.selectedVersionUserId !== account?.accountInfo.userInfo.id,
+        actionSource: actionSource.toLowerCase(),
+        // eslint-disable-next-line camelcase
+        workspace_id: model.workspaceId
+      },
+      model.accountId
+    )
+
+    model.report = undefined
+    model.error = undefined
+    model.displayReceiveComplete = false
+    model.hasDismissedUpdateWarning = true
+    model.progress = { status: 'Starting to receive...' }
+    await app.$receiveBinding.receive(modelCardId)
+  }
+
+  const receiveModelCancel = async (modelCardId: string) => {
+    const model = documentModelStore.value.models.find(
+      (m) => m.modelCardId === modelCardId
+    ) as IReceiverModelCard
+    await app.$receiveBinding.cancelReceive(modelCardId)
+    void trackEvent('DUI3 Action', { name: 'Receive Cancel' }, model.accountId)
+    model.progress = undefined
+  }
+
+  const setModelReceiveResult = async (args: {
+    modelCardId: string
+    bakedObjectIds: string[]
+    conversionResults: ConversionResult[]
+  }) => {
+    const model = documentModelStore.value.models.find(
+      (m) => m.modelCardId === args.modelCardId
+    ) as IReceiverModelCard
+
+    model.progress = undefined
+    model.displayReceiveComplete = true
+    model.bakedObjectIds = args.bakedObjectIds
+    model.report = args.conversionResults
+
+    // NOTE: going through this method to ensure state sync between FE and BE. It's because of a very weird rhino bug on first receives, ask dim and he will cry
+    // TODO: check if it's still needed - we can store the bakedobject ids straigth into the receive ops in .net. Is the above reproducible?
+    await patchModel(model.modelCardId, {
+      bakedObjectIds: args.bakedObjectIds
+    })
+  }
+
+  app.$receiveBinding?.on('setModelReceiveResult', setModelReceiveResult)
+
+  // GENERIC STUFF
+  const handleModelProgressEvents = (args: {
+    modelCardId: string
+    progress?: ModelCardProgress
+  }) => {
+    const model = documentModelStore.value.models.find(
+      (m) => m.modelCardId === args.modelCardId
+    ) as IModelCard
+    model.progress = args.progress
+  }
+
+  const setModelError = (args: {
+    modelCardId: string
+    error: string | { errorMessage: string; dismissible?: boolean }
+  }) => {
+    const model = documentModelStore.value.models.find(
+      (m) => m.modelCardId === args.modelCardId
+    ) as IModelCard
+    model.progress = undefined
+    if (typeof args.error === 'string') {
+      model.error = { errorMessage: args.error as string, dismissible: true }
+    } else {
+      model.error = args.error as { errorMessage: string; dismissible: boolean }
+    }
+  }
+
+  // NOTE: all bindings that need to send these model events should register.
+  // EG, new binding "mapper binding" wants to send errors to the model card should
+  // be registed here. Why? Each binding gets its own "bridge" parent in .NET, which
+  // is hoisted as a separate global js object.
+  app.$sendBinding?.on('setModelProgress', handleModelProgressEvents)
+  app.$receiveBinding?.on('setModelProgress', handleModelProgressEvents)
+
+  app.$baseBinding?.on('setGlobalNotification', setNotification)
+  app.$sendBinding?.on('setGlobalNotification', setNotification)
+  app.$receiveBinding?.on('setGlobalNotification', setNotification)
+  app.$configBinding?.on('setGlobalNotification', setNotification)
+  app.$accountBinding?.on('setGlobalNotification', setNotification)
+  app.$selectionBinding?.on('setGlobalNotification', setNotification)
+  app.$testBindings?.on('setGlobalNotification', setNotification)
+
+  // Dummy binding to communicate with proper bridge for top level exceptions
+  app.$topLevelExceptionHandlerBinding?.on('setGlobalNotification', setNotification)
+
+  app.$sendBinding?.on('setModelError', setModelError)
+  app.$receiveBinding?.on('setModelError', setModelError)
+  app.$baseBinding.on('setModelError', setModelError)
+
+  /**
+   * Used internally in this store store only for initialisation.
+   */
+  const getHostAppName = async () =>
+    (hostAppName.value = await app.$baseBinding.getSourceApplicationName())
+
+  const getHostAppVersion = async () =>
+    (hostAppVersion.value = await app.$baseBinding.getSourceApplicationVersion())
+
+  const getConnectorVersion = async () =>
+    (connectorVersion.value = await app.$baseBinding.getConnectorVersion())
+
+  /**
+   * Used internally in this store store only for initialisation. Refreshed the document info from the host app. Should be called on document changed events.
+   */
+  const refreshDocumentInfo = async () =>
+    (documentInfo.value = await app.$baseBinding.getDocumentInfo())
+
+  /**
+   * Used internally in this store store only for initialisation. Refreshes available model cards from the host app. Should be called on document changed events.
+   */
+  const refreshDocumentModelStore = async () =>
+    (documentModelStore.value = await app.$baseBinding.getDocumentState())
+
+  /**
+   * Sources the available send filters from the app. This is useful in case of host app layer changes, etc.
+   */
+  const refreshSendFilters = async () => {
+    sendFilters.value = await app.$sendBinding?.getSendFilters()
+    const revitViews = sendFilters.value.find(
+      (f) => f.id === 'revitViews'
+    ) as RevitViewsSendFilter
+    if (revitViews) {
+      availableViews.value = revitViews.availableViews
+    }
+  }
+
+  const getSendSettings = async () => {
+    sendSettings.value = await app.$sendBinding.getSendSettings()
+  }
+
+  const tryToUpgradeModelCardSettings = (
+    settings: CardSetting[],
+    typeDiscriminator: string
+  ) => {
+    if (documentModelStore.value.models.length === 0) return
+    const modelCards = documentModelStore.value.models.filter((m) =>
+      m.typeDiscriminator.includes(typeDiscriminator)
+    )
+    if (modelCards.length === 0) return
+
+    const settingIds = settings?.map((s) => s.id) || []
+    modelCards.forEach(async (modelCard) => {
+      const idsToUpgrade = [] as string[]
+      const idsToDrop = [] as string[]
+
+      settingIds?.forEach((id) => {
+        const existingSetting = modelCard.settings?.find((s) => s.id === id)
+
+        if (!existingSetting) {
+          // If the setting does not exist, it's a new one to upgrade
+          idsToUpgrade.push(id)
+        } else if (existingSetting.type === 'string' && existingSetting.enum) {
+          // Check if existing setting's enum needs upgrading
+          const currentEnum = sendSettings.value?.find((s) => s.id === id)?.enum
+          if (currentEnum && existingSetting.enum.length !== currentEnum.length) {
+            idsToUpgrade.push(id)
+          }
+        }
+      })
+
+      // Identify settings to drop (if they no longer exist in sendSettingIds)
+      modelCard.settings?.forEach((setting) => {
+        if (!settingIds.includes(setting.id)) {
+          idsToDrop.push(setting.id)
+        }
+      })
+
+      if (idsToUpgrade.length !== 0 || idsToDrop.length !== 0) {
+        // Prepare new settings by filtering the old ones and adding upgraded ones
+        const newSettings = modelCard.settings?.filter(
+          (setting) => !idsToDrop.includes(setting.id)
+        )
+
+        idsToUpgrade.forEach((id) => {
+          const upgradedSetting = sendSettings.value?.find((s) => s.id === id)
+          if (upgradedSetting) {
+            newSettings?.push(upgradedSetting)
+          }
+        })
+
+        // Patch the model with the new settings
+        await patchModel(modelCard.modelCardId, {
+          settings: newSettings
+        })
+      }
+    })
+  }
+
+  app.$baseBinding.on(
+    'documentChanged',
+    () =>
+      setTimeout(async () => {
+        void trackEvent('DUI3 Action', { name: 'Document changed' })
+        void refreshDocumentInfo()
+        await refreshDocumentModelStore() // need to awaited since upgrading the card settings need documentModelStore in place
+        void refreshSendFilters()
+        void tryToUpgradeModelCardSettings(sendSettings.value || [], 'SenderModelCard')
+      }, 500) // timeout exists because of rhino
+  )
+
+  const initializeApp = async () => {
+    await getHostAppName()
+    await getHostAppVersion()
+    await getConnectorVersion()
+    await refreshDocumentInfo()
+    await refreshDocumentModelStore()
+    await refreshSendFilters()
+    await getSendSettings()
+    tryToUpgradeModelCardSettings(sendSettings.value || [], 'SenderModelCard')
+  }
+
+  initializeApp()
+
+  return {
+    hostAppName,
+    hostAppVersion,
+    connectorVersion,
+    isConnectorUpToDate,
+    latestAvailableVersion,
+    documentInfo,
+    projectModelGroups,
+    models,
+    sendFilters,
+    sendSettings,
+    selectionFilter,
+    everythingFilter,
+    currentNotification,
+    showErrorDialog,
+    hostAppError,
+    availableViews,
+    setNotification,
+    setModelError,
+    setLatestAvailableVersion,
+    downloadLatestVersion,
+    dismissNotification,
+    setHostAppError,
+    addModel,
+    patchModel,
+    removeModel,
+    removeProjectModels,
+    sendModel,
+    receiveModel,
+    sendModelCancel,
+    receiveModelCancel,
+    refreshSendFilters,
+    getSendSettings,
+    setModelSendResult,
+    setModelReceiveResult,
+    handleModelProgressEvents
+  }
+})
diff --git a/packages/dui3/store/selection.ts b/packages/dui3/store/selection.ts
new file mode 100644
index 0000000000..e4589ecdd7
--- /dev/null
+++ b/packages/dui3/store/selection.ts
@@ -0,0 +1,27 @@
+import { defineStore } from 'pinia'
+import type { SelectionInfo } from '~/lib/bindings/definitions/ISelectionBinding'
+
+export const useSelectionStore = defineStore('selectionStore', () => {
+  const { $selectionBinding } = useNuxtApp()
+  const hasBinding = ref(!!$selectionBinding)
+
+  const selectionInfo = ref<SelectionInfo>({
+    summary: 'Nothing selected',
+    selectedObjectIds: [] as string[]
+  })
+
+  $selectionBinding?.on('setSelection', (selInfo) => {
+    selectionInfo.value = selInfo
+  })
+
+  const refreshSelectionFromHostApp = async () => {
+    if (!hasBinding.value) {
+      console.warn('No selection bidings present. This will do nothing!')
+      return
+    }
+    const selInfo = await $selectionBinding.getSelection()
+    selectionInfo.value = selInfo
+  }
+
+  return { hasBinding, selectionInfo, refreshSelectionFromHostApp }
+})
diff --git a/packages/dui3/store/uiConfig.ts b/packages/dui3/store/uiConfig.ts
deleted file mode 100644
index 48fe4c25f2..0000000000
--- a/packages/dui3/store/uiConfig.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { defineStore } from 'pinia'
-import type { Config } from 'lib/bindings/definitions/IConfigBinding'
-
-export const useDocumentInfoStore = defineStore('documentInfoStore', () => {
-  const { $configBinding } = useNuxtApp()
-
-  const hasConfigBindings = ref(!!$configBinding)
-  const uiConfig = ref<Config>({ darkTheme: false })
-
-  watch(
-    uiConfig,
-    async (newValue) => {
-      if (!newValue || !$configBinding) return
-      await $configBinding.updateConfig(newValue)
-    },
-    { deep: true }
-  )
-
-  const isDarkTheme = computed(() => {
-    return uiConfig.value?.darkTheme
-  })
-
-  const toggleTheme = () => {
-    uiConfig.value.darkTheme = !uiConfig.value.darkTheme
-  }
-
-  const init = async () => {
-    if (!$configBinding) return
-    uiConfig.value = await $configBinding.getConfig()
-  }
-  void init()
-
-  return { hasConfigBindings, isDarkTheme, toggleTheme }
-})
diff --git a/packages/objectloader/src/index.js b/packages/objectloader/src/index.js
index 878ed40e9e..4bcc91b470 100644
--- a/packages/objectloader/src/index.js
+++ b/packages/objectloader/src/index.js
@@ -230,7 +230,7 @@ class ObjectLoader {
 
     for await (const obj of this.getObjectIterator()) {
       if (first) {
-        this.totalChildrenCount = obj.totalChildrenCount
+        this.totalChildrenCount = Object.keys(obj?.__closure || {}).length
         first = false
         this.isLoading = true
       }
diff --git a/packages/ui-components/src/components/common/loading/ProgressBar.stories.ts b/packages/ui-components/src/components/common/loading/ProgressBar.stories.ts
new file mode 100644
index 0000000000..058acbb8a0
--- /dev/null
+++ b/packages/ui-components/src/components/common/loading/ProgressBar.stories.ts
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import CommonProgressBar from '~~/src/components/common/loading/ProgressBar.vue'
+
+export default {
+  component: CommonProgressBar,
+  argTypes: {}
+} as Meta
+
+export const Default: StoryObj = {
+  render: (args) => ({
+    components: { CommonProgressBar },
+    setup: () => ({ args }),
+    template: '<CommonProgressBar v-bind="args" />'
+  }),
+  args: {
+    loading: true,
+    progress: 0.2
+  }
+}
diff --git a/packages/ui-components/src/components/common/loading/ProgressBar.vue b/packages/ui-components/src/components/common/loading/ProgressBar.vue
new file mode 100644
index 0000000000..7bdee083ed
--- /dev/null
+++ b/packages/ui-components/src/components/common/loading/ProgressBar.vue
@@ -0,0 +1,56 @@
+<template>
+  <div :class="[containerStyle, loading ? 'opacity-100' : 'opacity-0']">
+    <div
+      :class="[progress ? '' : 'swoosher top-0', barStyle]"
+      :style="widthStyle"
+    ></div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+const props = defineProps<{
+  /**
+   * Whether we're actively loading. If set, the progress bar will be indefinite unless a progress argument is passed in too (see below).
+   */
+  loading: boolean
+  /**
+   * A number between 0 and 1. If set, the progress bar will no longer be indefinite and have a fixed progress.
+   */
+  progress?: number
+}>()
+
+const widthStyle = computed(() => {
+  if (!props.progress) return ''
+  return `width: ${props.progress * 100}%;`
+})
+
+const containerStyle = computed(() => {
+  return 'relative w-full h-1 bg-blue-500/30 text-xs text-foreground-on-primary overflow-hidden rounded-xl'
+})
+
+const barStyle = computed(() => {
+  return 'h-full relative bg-blue-500/50 transition-[width]'
+})
+</script>
+<style scoped>
+.swoosher {
+  width: 100%;
+  height: 100%;
+  animation: swoosh 1s infinite linear;
+  transform-origin: 0% 30%;
+}
+
+@keyframes swoosh {
+  0% {
+    transform: translateX(0) scaleX(0);
+  }
+
+  40% {
+    transform: translateX(0) scaleX(0.4);
+  }
+
+  100% {
+    transform: translateX(100%) scaleX(0.5);
+  }
+}
+</style>
diff --git a/packages/ui-components/src/lib.ts b/packages/ui-components/src/lib.ts
index c4697c3072..c9190da4ba 100644
--- a/packages/ui-components/src/lib.ts
+++ b/packages/ui-components/src/lib.ts
@@ -35,6 +35,7 @@ import FormSelectBadges from '~~/src/components/form/select/Badges.vue'
 import FormSwitch from '~~/src/components/form/Switch.vue'
 import FormClipboardInput from '~~/src/components/form/ClipboardInput.vue'
 import CommonLoadingBar from '~~/src/components/common/loading/Bar.vue'
+import CommonLoadingProgressBar from '~~/src/components/common/loading/ProgressBar.vue'
 import SourceAppBadge from '~~/src/components/SourceAppBadge.vue'
 import { onKeyboardShortcut, useFormCheckboxModel } from '~~/src/composables/form/input'
 import {
@@ -136,6 +137,7 @@ export {
   FormSelectBadges,
   FormSelectSourceApps,
   CommonLoadingBar,
+  CommonLoadingProgressBar,
   SourceAppBadge,
   onKeyboardShortcut,
   ModifierKeys,
diff --git a/packages/viewer/package.json b/packages/viewer/package.json
index 8bbea4c11d..8f8a809aca 100644
--- a/packages/viewer/package.json
+++ b/packages/viewer/package.json
@@ -66,9 +66,9 @@
     "type-fest": "^4.15.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.2",
-    "@babel/eslint-parser": "^7.18.2",
-    "@babel/preset-env": "^7.20.2",
+    "@babel/core": "^7.24.7",
+    "@babel/eslint-parser": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-image": "^3.0.2",
     "@rollup/plugin-typescript": "^11.1.6",
diff --git a/yarn.lock b/yarn.lock
index 002fa82344..446339e813 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3215,29 +3215,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.18.2, @babel/core@npm:^7.24.4":
-  version: 7.24.7
-  resolution: "@babel/core@npm:7.24.7"
-  dependencies:
-    "@ampproject/remapping": "npm:^2.2.0"
-    "@babel/code-frame": "npm:^7.24.7"
-    "@babel/generator": "npm:^7.24.7"
-    "@babel/helper-compilation-targets": "npm:^7.24.7"
-    "@babel/helper-module-transforms": "npm:^7.24.7"
-    "@babel/helpers": "npm:^7.24.7"
-    "@babel/parser": "npm:^7.24.7"
-    "@babel/template": "npm:^7.24.7"
-    "@babel/traverse": "npm:^7.24.7"
-    "@babel/types": "npm:^7.24.7"
-    convert-source-map: "npm:^2.0.0"
-    debug: "npm:^4.1.0"
-    gensync: "npm:^1.0.0-beta.2"
-    json5: "npm:^2.2.3"
-    semver: "npm:^6.3.1"
-  checksum: 10/ef8cc1afa3ccecee6d1f5660c487ccc2a3f25106830ea9040e80ef4b2092e053607ee4ddd03493e4f7ef2f9967a956ca53b830d54c5bee738eeb58cce679dd4a
-  languageName: node
-  linkType: hard
-
 "@babel/core@npm:^7.20.7":
   version: 7.21.0
   resolution: "@babel/core@npm:7.21.0"
@@ -3399,6 +3376,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/core@npm:^7.24.4, @babel/core@npm:^7.24.7":
+  version: 7.24.7
+  resolution: "@babel/core@npm:7.24.7"
+  dependencies:
+    "@ampproject/remapping": "npm:^2.2.0"
+    "@babel/code-frame": "npm:^7.24.7"
+    "@babel/generator": "npm:^7.24.7"
+    "@babel/helper-compilation-targets": "npm:^7.24.7"
+    "@babel/helper-module-transforms": "npm:^7.24.7"
+    "@babel/helpers": "npm:^7.24.7"
+    "@babel/parser": "npm:^7.24.7"
+    "@babel/template": "npm:^7.24.7"
+    "@babel/traverse": "npm:^7.24.7"
+    "@babel/types": "npm:^7.24.7"
+    convert-source-map: "npm:^2.0.0"
+    debug: "npm:^4.1.0"
+    gensync: "npm:^1.0.0-beta.2"
+    json5: "npm:^2.2.3"
+    semver: "npm:^6.3.1"
+  checksum: 10/ef8cc1afa3ccecee6d1f5660c487ccc2a3f25106830ea9040e80ef4b2092e053607ee4ddd03493e4f7ef2f9967a956ca53b830d54c5bee738eeb58cce679dd4a
+  languageName: node
+  linkType: hard
+
 "@babel/core@npm:^7.26.0":
   version: 7.26.0
   resolution: "@babel/core@npm:7.26.0"
@@ -3422,7 +3422,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/eslint-parser@npm:^7.18.2":
+"@babel/eslint-parser@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/eslint-parser@npm:7.24.7"
   dependencies:
@@ -8786,7 +8786,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:^7.24.4":
+"@babel/preset-env@npm:^7.24.4, @babel/preset-env@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/preset-env@npm:7.24.7"
   dependencies:
@@ -9704,6 +9704,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@electron/get@npm:^1.14.1":
+  version: 1.14.1
+  resolution: "@electron/get@npm:1.14.1"
+  dependencies:
+    debug: "npm:^4.1.1"
+    env-paths: "npm:^2.2.0"
+    fs-extra: "npm:^8.1.0"
+    global-agent: "npm:^3.0.0"
+    global-tunnel-ng: "npm:^2.7.1"
+    got: "npm:^9.6.0"
+    progress: "npm:^2.0.3"
+    semver: "npm:^6.2.0"
+    sumchecker: "npm:^3.0.1"
+  dependenciesMeta:
+    global-agent:
+      optional: true
+    global-tunnel-ng:
+      optional: true
+  checksum: 10/604121272da532abd5f5b3c86a244b2090795c1029a6ee00408f737915c90e7de2faee00040be1a0ae4f2887582775e5d0ddf4a4c57da3f45809c03960755654
+  languageName: node
+  linkType: hard
+
 "@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1":
   version: 1.0.1
   resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1"
@@ -10977,9 +10999,9 @@ __metadata:
   linkType: hard
 
 "@fastify/busboy@npm:^2.0.0":
-  version: 2.1.1
-  resolution: "@fastify/busboy@npm:2.1.1"
-  checksum: 10/2bb8a7eca8289ed14c9eb15239bc1019797454624e769b39a0b90ed204d032403adc0f8ed0d2aef8a18c772205fa7808cf5a1b91f21c7bfc7b6032150b1062c5
+  version: 2.0.0
+  resolution: "@fastify/busboy@npm:2.0.0"
+  checksum: 10/6a2366d06b82aac1069b8323792f76f7a8fca02533cb3745fcd218d8f0f953dc4dbef057287237414658cd43f8dede0846ef33398999e3dbe54ddaeefec71c0a
   languageName: node
   linkType: hard
 
@@ -12591,6 +12613,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jsonforms/core@npm:3.1.0":
+  version: 3.1.0
+  resolution: "@jsonforms/core@npm:3.1.0"
+  dependencies:
+    "@types/json-schema": "npm:^7.0.3"
+    ajv: "npm:^8.6.1"
+    ajv-formats: "npm:^2.1.0"
+    lodash: "npm:^4.17.15"
+  checksum: 10/030e73565c73458a49e7dac17b86d878ead1064f1695d588c6df089c7600434687bc219dfefaae89e350b2e306cad2bff67839cfcf4cae4754ea9a5c86b3d2d5
+  languageName: node
+  linkType: hard
+
 "@jsonforms/core@npm:^3.3.0":
   version: 3.3.0
   resolution: "@jsonforms/core@npm:3.3.0"
@@ -12603,6 +12637,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jsonforms/vue-vanilla@npm:3.1.0":
+  version: 3.1.0
+  resolution: "@jsonforms/vue-vanilla@npm:3.1.0"
+  dependencies:
+    lodash: "npm:^4.17.15"
+  peerDependencies:
+    "@jsonforms/core": 3.1.0
+    "@jsonforms/vue": 3.1.0
+    vue: ^3.2.26
+  checksum: 10/45096ff5a3c4d2d3b0abbabfdd84ce6571c6fe5a35aaa2e70a349530f93be400ff16709464301cd34ececbdb3e70b63d9646614be54ba8e56d6ef1e172fdbf24
+  languageName: node
+  linkType: hard
+
 "@jsonforms/vue-vanilla@npm:^3.3.0":
   version: 3.3.0
   resolution: "@jsonforms/vue-vanilla@npm:3.3.0"
@@ -12616,6 +12663,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jsonforms/vue@npm:3.1.0":
+  version: 3.1.0
+  resolution: "@jsonforms/vue@npm:3.1.0"
+  dependencies:
+    lodash: "npm:^4.17.15"
+  peerDependencies:
+    "@jsonforms/core": 3.1.0
+    vue: ^3.2.26
+  checksum: 10/69151121faf366b7b91f03210a83e9bc319fcf8ab6b89974dce6a3bd20a990995dd76bbd6ed5c83802581fc88e315a267d6dbe4409c1f5e38ba35df10a90fb9f
+  languageName: node
+  linkType: hard
+
 "@jsonforms/vue@npm:^3.3.0":
   version: 3.3.0
   resolution: "@jsonforms/vue@npm:3.3.0"
@@ -15582,6 +15641,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sindresorhus/is@npm:^0.14.0":
+  version: 0.14.0
+  resolution: "@sindresorhus/is@npm:0.14.0"
+  checksum: 10/789cd128f0b43e158e657c4505539c8997905fcb5c06d750b7df778cab2b6887bc1eb8878026a20d84524528786ef69fc3d12a964ae56a478a87bcfc7f8272f3
+  languageName: node
+  linkType: hard
+
 "@sindresorhus/is@npm:^4.0.0":
   version: 4.6.0
   resolution: "@sindresorhus/is@npm:4.6.0"
@@ -16751,6 +16817,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@socket.io/component-emitter@npm:~3.1.0":
+  version: 3.1.0
+  resolution: "@socket.io/component-emitter@npm:3.1.0"
+  checksum: 10/db069d95425b419de1514dffe945cc439795f6a8ef5b9465715acf5b8b50798e2c91b8719cbf5434b3fe7de179d6cdcd503c277b7871cb3dd03febb69bdd50fa
+  languageName: node
+  linkType: hard
+
 "@speckle/dui3@workspace:packages/dui3":
   version: 0.0.0-use.local
   resolution: "@speckle/dui3@workspace:packages/dui3"
@@ -16760,10 +16833,14 @@ __metadata:
     "@graphql-codegen/client-preset": "npm:^4.3.0"
     "@headlessui/vue": "npm:^1.7.13"
     "@heroicons/vue": "npm:^2.0.12"
+    "@jsonforms/core": "npm:3.1.0"
+    "@jsonforms/vue": "npm:3.1.0"
+    "@jsonforms/vue-vanilla": "npm:3.1.0"
     "@nuxt/eslint": "npm:^0.3.13"
     "@nuxtjs/tailwindcss": "npm:^6.7.0"
     "@parcel/watcher": "npm:^2.4.1"
     "@pinia/nuxt": "npm:^0.4.11"
+    "@speckle/objectsender": "workspace:^"
     "@speckle/shared": "workspace:^"
     "@speckle/ui-components": "workspace:^"
     "@speckle/ui-components-nuxt": "workspace:^"
@@ -16775,10 +16852,14 @@ __metadata:
     "@typescript-eslint/parser": "npm:^7.12.0"
     "@vitejs/plugin-legacy": "npm:^4.0.3"
     "@vue/apollo-composable": "npm:^4.0.0-beta.5"
+    "@vue/devtools": "npm:^6.5.0"
     "@vueuse/core": "npm:^9.13.0"
     apollo-upload-client: "npm:^17.0.0"
     autoprefixer: "npm:^10.4.14"
     concurrently: "npm:^7.5.0"
+    crypto-random-string: "npm:^5.0.0"
+    dayjs: "npm:^1.11.10"
+    dotenv: "npm:^16.3.1"
     eslint: "npm:^9.4.0"
     eslint-config-prettier: "npm:^9.1.0"
     eslint-plugin-vuejs-accessibility: "npm:^2.3.0"
@@ -16802,6 +16883,7 @@ __metadata:
     tailwindcss: "npm:^3.3.2"
     type-fest: "npm:^3.5.1"
     typescript: "npm:^4.8.3"
+    vee-validate: "npm:4.7.0"
     vue-tippy: "npm:^6.2.0"
     vue-tsc: "npm:1.3.4"
   languageName: unknown
@@ -17126,7 +17208,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@speckle/objectsender@workspace:packages/objectsender":
+"@speckle/objectsender@workspace:^, @speckle/objectsender@workspace:packages/objectsender":
   version: 0.0.0-use.local
   resolution: "@speckle/objectsender@workspace:packages/objectsender"
   dependencies:
@@ -17579,9 +17661,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@speckle/viewer@workspace:packages/viewer"
   dependencies:
-    "@babel/core": "npm:^7.18.2"
-    "@babel/eslint-parser": "npm:^7.18.2"
-    "@babel/preset-env": "npm:^7.20.2"
+    "@babel/core": "npm:^7.24.7"
+    "@babel/eslint-parser": "npm:^7.24.7"
+    "@babel/preset-env": "npm:^7.24.7"
     "@rollup/plugin-babel": "npm:^5.3.1"
     "@rollup/plugin-image": "npm:^3.0.2"
     "@rollup/plugin-typescript": "npm:^11.1.6"
@@ -18961,6 +19043,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@szmarczak/http-timer@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "@szmarczak/http-timer@npm:1.1.2"
+  dependencies:
+    defer-to-connect: "npm:^1.0.1"
+  checksum: 10/9b63853bd53bff72c4990ebc9cd3f625bbab757247099af172564da6649a27a1d41b1a70cd849dd65b2a078300029c1c80bf3079e6a91e285da7b259eb147146
+  languageName: node
+  linkType: hard
+
 "@szmarczak/http-timer@npm:^4.0.5":
   version: 4.0.6
   resolution: "@szmarczak/http-timer@npm:4.0.6"
@@ -19823,6 +19914,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/cookie@npm:^0.4.1":
+  version: 0.4.1
+  resolution: "@types/cookie@npm:0.4.1"
+  checksum: 10/427c9220217d3d74f3e5d53d68cd39502f3bbebdb1af4ecf0d05076bcbe9ddab299ad6369fe0f517389296ba4ca49ddf9a8c22f68e5e9eb8ae6d0076cfab90b2
+  languageName: node
+  linkType: hard
+
 "@types/cookiejar@npm:*":
   version: 2.1.2
   resolution: "@types/cookiejar@npm:2.1.2"
@@ -19830,7 +19928,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/cors@npm:^2.8.17":
+"@types/cors@npm:^2.8.12, @types/cors@npm:^2.8.17":
   version: 2.8.17
   resolution: "@types/cors@npm:2.8.17"
   dependencies:
@@ -20260,7 +20358,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/keyv@npm:^3.1.4":
+"@types/keyv@npm:^3.1.1, @types/keyv@npm:^3.1.4":
   version: 3.1.4
   resolution: "@types/keyv@npm:3.1.4"
   dependencies:
@@ -20509,6 +20607,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:>=10.0.0":
+  version: 20.11.2
+  resolution: "@types/node@npm:20.11.2"
+  dependencies:
+    undici-types: "npm:~5.26.4"
+  checksum: 10/029d603b56f7277b109a14e29e97d8e7269960cedafd8761cd0e65a0bcd9e7a554c192708becf3248a22f42681f476320af6a06c64a692a52414d1c167d9f50a
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:>=13.7.0, @types/node@npm:>=20.12.12":
   version: 20.14.2
   resolution: "@types/node@npm:20.14.2"
@@ -20534,6 +20641,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/node@npm:^16.11.26":
+  version: 16.18.71
+  resolution: "@types/node@npm:16.18.71"
+  checksum: 10/ce8c3b96f6da5d14cce5371b1bc02928cf78b98bc4a47eb5d48eec3f5a8b2c25104b3b72e38bcf05d736cfb58ad205a24fdd07343747aa278ea30cfd79ad67af
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:^17.0.43":
   version: 17.0.43
   resolution: "@types/node@npm:17.0.43"
@@ -22989,6 +23103,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vue/devtools@npm:^6.5.0":
+  version: 6.6.1
+  resolution: "@vue/devtools@npm:6.6.1"
+  dependencies:
+    cross-spawn: "npm:^7.0.3"
+    electron: "npm:^21.0.1"
+    express: "npm:^4.17.1"
+    ip: "npm:^1.1.5"
+    socket.io: "npm:^4.4.0"
+    socket.io-client: "npm:^4.4.1"
+    utf-8-validate: "npm:^5.0.9"
+  bin:
+    vue-devtools: bin.js
+  checksum: 10/aa0def1edc12af25cf5b9c82b8ded186c10c84322dc176ebbe7be42fab327e3b093e9ab8fc7e004fba372cd890aac932fa84bd3d1780ebd1f1fd97cf97baf61b
+  languageName: node
+  linkType: hard
+
 "@vue/language-core@npm:1.8.22, @vue/language-core@npm:^1.8.20":
   version: 1.8.22
   resolution: "@vue/language-core@npm:1.8.22"
@@ -24504,11 +24635,11 @@ __metadata:
   linkType: hard
 
 "aria-hidden@npm:^1.1.1":
-  version: 1.2.4
-  resolution: "aria-hidden@npm:1.2.4"
+  version: 1.2.3
+  resolution: "aria-hidden@npm:1.2.3"
   dependencies:
     tslib: "npm:^2.0.0"
-  checksum: 10/df4bc15423aaaba3729a7d40abcbf6d3fffa5b8fd5eb33d3ac8b7da0110c47552fca60d97f2e1edfbb68a27cae1da499f1c3896966efb3e26aac4e3b57e3cc8b
+  checksum: 10/cd7f8474f1bef2dadce8fc74ef6d0fa8c9a477ee3c9e49fc3698e5e93a62014140c520266ee28969d63b5ab474144fe48b6182d010feb6a223f7a73928e6660a
   languageName: node
   linkType: hard
 
@@ -25347,6 +25478,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"base64id@npm:2.0.0, base64id@npm:~2.0.0":
+  version: 2.0.0
+  resolution: "base64id@npm:2.0.0"
+  checksum: 10/e3312328429e512b0713469c5312f80b447e71592cae0a5bddf3f1adc9c89d1b2ed94156ad7bb9f529398f310df7ff6f3dbe9550735c6a759f247c088ea67364
+  languageName: node
+  linkType: hard
+
 "base64url@npm:3.x.x, base64url@npm:^3.0.0, base64url@npm:^3.0.1":
   version: 3.0.1
   resolution: "base64url@npm:3.0.1"
@@ -25561,6 +25699,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"boolean@npm:^3.0.1":
+  version: 3.2.0
+  resolution: "boolean@npm:3.2.0"
+  checksum: 10/d28a49dcaeef7fe10cf9fdf488214d3859f07350be8f5caa0c73ec621baf20650e5da6523262e5ce9221909519d4261c16d8430a5bf307fee9ef0e170cdb29f3
+  languageName: node
+  linkType: hard
+
 "bowser@npm:^2.11.0":
   version: 2.11.0
   resolution: "bowser@npm:2.11.0"
@@ -26184,6 +26329,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cacheable-request@npm:^6.0.0":
+  version: 6.1.0
+  resolution: "cacheable-request@npm:6.1.0"
+  dependencies:
+    clone-response: "npm:^1.0.2"
+    get-stream: "npm:^5.1.0"
+    http-cache-semantics: "npm:^4.0.0"
+    keyv: "npm:^3.0.0"
+    lowercase-keys: "npm:^2.0.0"
+    normalize-url: "npm:^4.1.0"
+    responselike: "npm:^1.0.2"
+  checksum: 10/804f6c377ce6fef31c584babde31d55c69305569058ad95c24a41bb7b33d0ea188d388467a9da6cb340e95a3a1f8a94e1f3a709fef5eaf9c6b88e62448fa29be
+  languageName: node
+  linkType: hard
+
 "cacheable-request@npm:^7.0.2":
   version: 7.0.2
   resolution: "cacheable-request@npm:7.0.2"
@@ -26322,13 +26482,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001332, caniuse-lite@npm:^1.0.30001400, caniuse-lite@npm:^1.0.30001407, caniuse-lite@npm:^1.0.30001449, caniuse-lite@npm:^1.0.30001464, caniuse-lite@npm:^1.0.30001503, caniuse-lite@npm:^1.0.30001587":
+"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001332, caniuse-lite@npm:^1.0.30001400, caniuse-lite@npm:^1.0.30001407, caniuse-lite@npm:^1.0.30001449, caniuse-lite@npm:^1.0.30001464, caniuse-lite@npm:^1.0.30001503":
   version: 1.0.30001636
   resolution: "caniuse-lite@npm:1.0.30001636"
   checksum: 10/9e6c5ab4c20df31df36720dda77cf6a781549ac2ad844bc0a416b327a793da21486358a1f85fdd6c39e22d336f70aac3b0e232f5f228cdff0ceb6e3e1c5e98fd
   languageName: node
   linkType: hard
 
+"caniuse-lite@npm:^1.0.30001587":
+  version: 1.0.30001599
+  resolution: "caniuse-lite@npm:1.0.30001599"
+  checksum: 10/c9a5ad806fc0d446e4f995d551b840d8fdcbe97958b7f83ff7a255a8ef5e40ca12ca1a508c66b3ab147e19eef932d28772d205c046500dd0740ea9dfb602e2e1
+  languageName: node
+  linkType: hard
+
 "caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001688":
   version: 1.0.30001690
   resolution: "caniuse-lite@npm:1.0.30001690"
@@ -27491,7 +27658,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"config-chain@npm:^1.1.13":
+"config-chain@npm:^1.1.11, config-chain@npm:^1.1.13":
   version: 1.1.13
   resolution: "config-chain@npm:1.1.13"
   dependencies:
@@ -27678,6 +27845,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cookie@npm:~0.4.1":
+  version: 0.4.2
+  resolution: "cookie@npm:0.4.2"
+  checksum: 10/2e1de9fdedca54881eab3c0477aeb067f281f3155d9cfee9d28dfb252210d09e85e9d175c0a60689661feb9e35e588515352f2456bc1f8e8db4267e05fd70137
+  languageName: node
+  linkType: hard
+
 "cookiejar@npm:^2.1.0, cookiejar@npm:^2.1.1":
   version: 2.1.4
   resolution: "cookiejar@npm:2.1.4"
@@ -27781,7 +27955,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cors@npm:^2.8.5":
+"cors@npm:^2.8.5, cors@npm:~2.8.5":
   version: 2.8.5
   resolution: "cors@npm:2.8.5"
   dependencies:
@@ -28730,6 +28904,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dayjs@npm:^1.11.10":
+  version: 1.11.10
+  resolution: "dayjs@npm:1.11.10"
+  checksum: 10/27e8f5bc01c0a76f36c656e62ab7f08c2e7b040b09e613cd4844abf03fb258e0350f0a83b02c887b84d771c1f11e092deda0beef8c6df2a1afbc3f6c1fade279
+  languageName: node
+  linkType: hard
+
 "dayjs@npm:^1.11.5":
   version: 1.11.5
   resolution: "dayjs@npm:1.11.5"
@@ -28800,7 +28981,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:4.3.4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4":
+"debug@npm:4, debug@npm:4.3.4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:~4.3.1, debug@npm:~4.3.2, debug@npm:~4.3.4":
   version: 4.3.4
   resolution: "debug@npm:4.3.4"
   dependencies:
@@ -28890,6 +29071,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"decompress-response@npm:^3.3.0":
+  version: 3.3.0
+  resolution: "decompress-response@npm:3.3.0"
+  dependencies:
+    mimic-response: "npm:^1.0.0"
+  checksum: 10/952552ac3bd7de2fc18015086b09468645c9638d98a551305e485230ada278c039c91116e946d07894b39ee53c0f0d5b6473f25a224029344354513b412d7380
+  languageName: node
+  linkType: hard
+
 "decompress-response@npm:^6.0.0":
   version: 6.0.0
   resolution: "decompress-response@npm:6.0.0"
@@ -29061,6 +29251,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"defer-to-connect@npm:^1.0.1":
+  version: 1.1.3
+  resolution: "defer-to-connect@npm:1.1.3"
+  checksum: 10/9491b301dcfa04956f989481ba7a43c2231044206269eb4ab64a52d6639ee15b1252262a789eb4239fb46ab63e44d4e408641bae8e0793d640aee55398cb3930
+  languageName: node
+  linkType: hard
+
 "defer-to-connect@npm:^2.0.0":
   version: 2.0.1
   resolution: "defer-to-connect@npm:2.0.1"
@@ -29243,7 +29440,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"denque@npm:^2.1.0":
+"denque@npm:^2.0.1, denque@npm:^2.1.0":
   version: 2.1.0
   resolution: "denque@npm:2.1.0"
   checksum: 10/8ea05321576624b90acfc1ee9208b8d1d04b425cf7573b9b4fa40a2c3ed4d4b0af5190567858f532f677ed2003d4d2b73c8130b34e3c7b8d5e88cdcfbfaa1fe7
@@ -29819,6 +30016,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"duplexer3@npm:^0.1.4":
+  version: 0.1.5
+  resolution: "duplexer3@npm:0.1.5"
+  checksum: 10/e677cb4c48f031ca728601d6a20bf6aed4c629d69ef9643cb89c67583d673c4ec9317cc6427501f38bd8c368d3a18f173987cc02bd99d8cf8fe3d94259a22a20
+  languageName: node
+  linkType: hard
+
 "duplexer@npm:^0.1.2":
   version: 0.1.2
   resolution: "duplexer@npm:0.1.2"
@@ -29991,9 +30195,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"electron@npm:^21.0.1":
+  version: 21.4.4
+  resolution: "electron@npm:21.4.4"
+  dependencies:
+    "@electron/get": "npm:^1.14.1"
+    "@types/node": "npm:^16.11.26"
+    extract-zip: "npm:^2.0.1"
+  bin:
+    electron: cli.js
+  checksum: 10/d2a851c5953e26f61a1b3428116048a8d9fcf70af3e19c695d6990c708a80f0acba0411f2d55a66e20857b7515f3b7141a87f52752ce16404869819f4c22c98f
+  languageName: node
+  linkType: hard
+
 "elliptic@npm:^6.5.3, elliptic@npm:^6.5.4":
-  version: 6.5.7
-  resolution: "elliptic@npm:6.5.7"
+  version: 6.5.4
+  resolution: "elliptic@npm:6.5.4"
   dependencies:
     bn.js: "npm:^4.11.9"
     brorand: "npm:^1.1.0"
@@ -30002,7 +30219,7 @@ __metadata:
     inherits: "npm:^2.0.4"
     minimalistic-assert: "npm:^1.0.1"
     minimalistic-crypto-utils: "npm:^1.0.1"
-  checksum: 10/fbad1fad0a5cc07df83f80cc1f7a784247ef59075194d3e340eaeb2f4dd594825ee24c7e9b0cf279c9f1982efe610503bb3139737926428c4821d4fca1bcf348
+  checksum: 10/2cd7ff4b69720dbb2ca1ca650b2cf889d1df60c96d4a99d331931e4fe21e45a7f3b8074e86618ca7e56366c4b6258007f234f9d61d9b0c87bbbc8ea990b99e94
   languageName: node
   linkType: hard
 
@@ -30089,6 +30306,44 @@ __metadata:
   languageName: node
   linkType: hard
 
+"engine.io-client@npm:~6.5.2":
+  version: 6.5.3
+  resolution: "engine.io-client@npm:6.5.3"
+  dependencies:
+    "@socket.io/component-emitter": "npm:~3.1.0"
+    debug: "npm:~4.3.1"
+    engine.io-parser: "npm:~5.2.1"
+    ws: "npm:~8.11.0"
+    xmlhttprequest-ssl: "npm:~2.0.0"
+  checksum: 10/0d7c3e6de23f37706c163bc8a0e90e70e613c7768be0705bda3675124d5e24d849810fddda005f8dcc721da35aee713976a03a0465d71f0856adfc1af7a80e5d
+  languageName: node
+  linkType: hard
+
+"engine.io-parser@npm:~5.2.1":
+  version: 5.2.1
+  resolution: "engine.io-parser@npm:5.2.1"
+  checksum: 10/31f16fd1d64d6c3997f910606a0a8b143a86da98b06346ba7970e9bdf25cc8485caf69b4939dc5a829b312c7db5dbbdcc1fe3787b105bcc175e61b9d37a7e687
+  languageName: node
+  linkType: hard
+
+"engine.io@npm:~6.5.2":
+  version: 6.5.4
+  resolution: "engine.io@npm:6.5.4"
+  dependencies:
+    "@types/cookie": "npm:^0.4.1"
+    "@types/cors": "npm:^2.8.12"
+    "@types/node": "npm:>=10.0.0"
+    accepts: "npm:~1.3.4"
+    base64id: "npm:2.0.0"
+    cookie: "npm:~0.4.1"
+    cors: "npm:~2.8.5"
+    debug: "npm:~4.3.1"
+    engine.io-parser: "npm:~5.2.1"
+    ws: "npm:~8.11.0"
+  checksum: 10/f1a74fc9431593ca1e50d1faa5db1041feecf2a7da5c75cfca88c5a760d3c8a898141ff7e7a2a2a2859a784c25d9c87be422f094b553e0dcf98433f8e798d18f
+  languageName: node
+  linkType: hard
+
 "enhanced-resolve@npm:^4.1.1":
   version: 4.5.0
   resolution: "enhanced-resolve@npm:4.5.0"
@@ -30330,7 +30585,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es6-error@npm:^4.0.1":
+"es6-error@npm:^4.0.1, es6-error@npm:^4.1.1":
   version: 4.1.1
   resolution: "es6-error@npm:4.1.1"
   checksum: 10/48483c25701dc5a6376f39bbe2eaf5da0b505607ec5a98cd3ade472c1939242156660636e2e508b33211e48e88b132d245341595c067bd4a95ac79fa7134da06
@@ -30523,7 +30778,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0":
+"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0, esbuild@npm:^0.20.1":
   version: 0.20.2
   resolution: "esbuild@npm:0.20.2"
   dependencies:
@@ -31750,7 +32005,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"extract-zip@npm:2.0.1":
+"extract-zip@npm:2.0.1, extract-zip@npm:^2.0.1":
   version: 2.0.1
   resolution: "extract-zip@npm:2.0.1"
   dependencies:
@@ -32585,6 +32840,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fs-extra@npm:^8.1.0":
+  version: 8.1.0
+  resolution: "fs-extra@npm:8.1.0"
+  dependencies:
+    graceful-fs: "npm:^4.2.0"
+    jsonfile: "npm:^4.0.0"
+    universalify: "npm:^0.1.0"
+  checksum: 10/6fb12449f5349be724a138b4a7b45fe6a317d2972054517f5971959c26fbd17c0e145731a11c7324460262baa33e0a799b183ceace98f7a372c95fbb6f20f5de
+  languageName: node
+  linkType: hard
+
 "fs-extra@npm:~7.0.1":
   version: 7.0.1
   resolution: "fs-extra@npm:7.0.1"
@@ -32918,6 +33184,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-stream@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "get-stream@npm:4.1.0"
+  dependencies:
+    pump: "npm:^3.0.0"
+  checksum: 10/12673e8aebc79767d187b203e5bfabb8266304037815d3bcc63b6f8c67c6d4ad0d98d4d4528bcdc1cbea68f1dd91bcbd87827aa3cdcfa9c5fa4a4644716d72c2
+  languageName: node
+  linkType: hard
+
 "get-stream@npm:^5.1.0":
   version: 5.2.0
   resolution: "get-stream@npm:5.2.0"
@@ -33246,18 +33521,17 @@ __metadata:
   linkType: hard
 
 "glob@npm:^10.3.10":
-  version: 10.4.5
-  resolution: "glob@npm:10.4.5"
+  version: 10.3.10
+  resolution: "glob@npm:10.3.10"
   dependencies:
     foreground-child: "npm:^3.1.0"
-    jackspeak: "npm:^3.1.2"
-    minimatch: "npm:^9.0.4"
-    minipass: "npm:^7.1.2"
-    package-json-from-dist: "npm:^1.0.0"
-    path-scurry: "npm:^1.11.1"
+    jackspeak: "npm:^2.3.5"
+    minimatch: "npm:^9.0.1"
+    minipass: "npm:^5.0.0 || ^6.0.2 || ^7.0.0"
+    path-scurry: "npm:^1.10.1"
   bin:
     glob: dist/esm/bin.mjs
-  checksum: 10/698dfe11828b7efd0514cd11e573eaed26b2dff611f0400907281ce3eab0c1e56143ef9b35adc7c77ecc71fba74717b510c7c223d34ca8a98ec81777b293d4ac
+  checksum: 10/38bdb2c9ce75eb5ed168f309d4ed05b0798f640b637034800a6bf306f39d35409bf278b0eaaffaec07591085d3acb7184a201eae791468f0f617771c2486a6a8
   languageName: node
   linkType: hard
 
@@ -33301,6 +33575,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"global-agent@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "global-agent@npm:3.0.0"
+  dependencies:
+    boolean: "npm:^3.0.1"
+    es6-error: "npm:^4.1.1"
+    matcher: "npm:^3.0.0"
+    roarr: "npm:^2.15.3"
+    semver: "npm:^7.3.2"
+    serialize-error: "npm:^7.0.1"
+  checksum: 10/a26d96d1d79af57a8ef957f66cef6f3889a8fa55131f0bbd72b8e1bc340a9b7ed7b627b96eaf5eb14aee08a8b4ad44395090e2cf77146e993f1d2df7abaa0a0d
+  languageName: node
+  linkType: hard
+
 "global-directory@npm:^4.0.1":
   version: 4.0.1
   resolution: "global-directory@npm:4.0.1"
@@ -33385,6 +33673,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"global-tunnel-ng@npm:^2.7.1":
+  version: 2.7.1
+  resolution: "global-tunnel-ng@npm:2.7.1"
+  dependencies:
+    encodeurl: "npm:^1.0.2"
+    lodash: "npm:^4.17.10"
+    npm-conf: "npm:^1.1.3"
+    tunnel: "npm:^0.0.6"
+  checksum: 10/ea7ee0d627380c1fc91afec1e1ab42374b6165e43133a54dd7461a630881cad45678b312cb6edc8a7cfbb188390f433c9a5327175d1af49682dfa9f5c0976021
+  languageName: node
+  linkType: hard
+
 "globals@npm:^11.1.0":
   version: 11.12.0
   resolution: "globals@npm:11.12.0"
@@ -33415,6 +33715,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globalthis@npm:^1.0.1":
+  version: 1.0.3
+  resolution: "globalthis@npm:1.0.3"
+  dependencies:
+    define-properties: "npm:^1.1.3"
+  checksum: 10/45ae2f3b40a186600d0368f2a880ae257e8278b4c7704f0417d6024105ad7f7a393661c5c2fa1334669cd485ea44bc883a08fdd4516df2428aec40c99f52aa89
+  languageName: node
+  linkType: hard
+
 "globby@npm:^10.0.1":
   version: 10.0.2
   resolution: "globby@npm:10.0.2"
@@ -33623,6 +33932,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"got@npm:^9.6.0":
+  version: 9.6.0
+  resolution: "got@npm:9.6.0"
+  dependencies:
+    "@sindresorhus/is": "npm:^0.14.0"
+    "@szmarczak/http-timer": "npm:^1.1.2"
+    cacheable-request: "npm:^6.0.0"
+    decompress-response: "npm:^3.3.0"
+    duplexer3: "npm:^0.1.4"
+    get-stream: "npm:^4.1.0"
+    lowercase-keys: "npm:^1.0.1"
+    mimic-response: "npm:^1.0.1"
+    p-cancelable: "npm:^1.0.0"
+    to-readable-stream: "npm:^1.0.0"
+    url-parse-lax: "npm:^3.0.0"
+  checksum: 10/fae3273b44392b6b1d88071d04ea984784e63dbf8ba3f70b04cb7edda53c7668ee17288ac46af507a9f2aa60c183c5ea1732339141d253dda3eb19f92985c771
+  languageName: node
+  linkType: hard
+
 "graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.15, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.2, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
   version: 4.2.10
   resolution: "graceful-fs@npm:4.2.10"
@@ -35053,7 +35381,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ioredis@npm:>=5, ioredis@npm:^5.2.2, ioredis@npm:^5.3.0, ioredis@npm:^5.3.2":
+"ioredis@npm:>=5, ioredis@npm:^5.3.0":
   version: 5.4.1
   resolution: "ioredis@npm:5.4.1"
   dependencies:
@@ -35089,6 +35417,40 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ioredis@npm:^5.2.2":
+  version: 5.2.2
+  resolution: "ioredis@npm:5.2.2"
+  dependencies:
+    "@ioredis/commands": "npm:^1.1.1"
+    cluster-key-slot: "npm:^1.1.0"
+    debug: "npm:^4.3.4"
+    denque: "npm:^2.0.1"
+    lodash.defaults: "npm:^4.2.0"
+    lodash.isarguments: "npm:^3.1.0"
+    redis-errors: "npm:^1.2.0"
+    redis-parser: "npm:^3.0.0"
+    standard-as-callback: "npm:^2.1.0"
+  checksum: 10/1f020d44a7ac73b26badf73e479f39ec740bcdd2ac2ba11f3f0ddb248f43824bc96af3d400ae7c9ba54a92d62151a285e5234ba0cdee86da6270dbf75525b387
+  languageName: node
+  linkType: hard
+
+"ioredis@npm:^5.3.2":
+  version: 5.3.2
+  resolution: "ioredis@npm:5.3.2"
+  dependencies:
+    "@ioredis/commands": "npm:^1.1.1"
+    cluster-key-slot: "npm:^1.1.0"
+    debug: "npm:^4.3.4"
+    denque: "npm:^2.1.0"
+    lodash.defaults: "npm:^4.2.0"
+    lodash.isarguments: "npm:^3.1.0"
+    redis-errors: "npm:^1.2.0"
+    redis-parser: "npm:^3.0.0"
+    standard-as-callback: "npm:^2.1.0"
+  checksum: 10/0140f055ef81d28e16ca8400b99dabb9ce82009f54afd83cba952c7d0c5d736841e43247765b8ee1af1f02843531c5b8df240af18bd3d7e2ca3d60b36e76213f
+  languageName: node
+  linkType: hard
+
 "ioredis@npm:^5.4.1":
   version: 5.4.2
   resolution: "ioredis@npm:5.4.2"
@@ -35137,6 +35499,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ip@npm:^1.1.5":
+  version: 1.1.9
+  resolution: "ip@npm:1.1.9"
+  checksum: 10/29261559b806f64929ada21e6d7e3bf4e67f2b43a4cb67500fdb72cead2e655ce97451a2e325eca3f404081c634ff5c3a68472814744b7f2148ddffc0fdfe66c
+  languageName: node
+  linkType: hard
+
 "ipaddr.js@npm:1.9.1":
   version: 1.9.1
   resolution: "ipaddr.js@npm:1.9.1"
@@ -36146,6 +36515,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jackspeak@npm:^2.3.5":
+  version: 2.3.6
+  resolution: "jackspeak@npm:2.3.6"
+  dependencies:
+    "@isaacs/cliui": "npm:^8.0.2"
+    "@pkgjs/parseargs": "npm:^0.11.0"
+  dependenciesMeta:
+    "@pkgjs/parseargs":
+      optional: true
+  checksum: 10/6e6490d676af8c94a7b5b29b8fd5629f21346911ebe2e32931c2a54210134408171c24cee1a109df2ec19894ad04a429402a8438cbf5cc2794585d35428ace76
+  languageName: node
+  linkType: hard
+
 "jackspeak@npm:^3.1.2":
   version: 3.4.0
   resolution: "jackspeak@npm:3.4.0"
@@ -37169,6 +37551,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"json-buffer@npm:3.0.0":
+  version: 3.0.0
+  resolution: "json-buffer@npm:3.0.0"
+  checksum: 10/6e364585600598c42f1cc85d1305569aeb1a6a13e7c67960f17b403f087e2700104ec8e49fc681ab6d6278ee4d132ac033f2625c22a9777ed9b83b403b40f23e
+  languageName: node
+  linkType: hard
+
 "json-buffer@npm:3.0.1":
   version: 3.0.1
   resolution: "json-buffer@npm:3.0.1"
@@ -37234,7 +37623,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json-stringify-safe@npm:~5.0.1":
+"json-stringify-safe@npm:^5.0.1, json-stringify-safe@npm:~5.0.1":
   version: 5.0.1
   resolution: "json-stringify-safe@npm:5.0.1"
   checksum: 10/59169a081e4eeb6f9559ae1f938f656191c000e0512aa6df9f3c8b2437a4ab1823819c6b9fd1818a4e39593ccfd72e9a051fdd3e2d1e340ed913679e888ded8c
@@ -37407,6 +37796,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"keyv@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "keyv@npm:3.1.0"
+  dependencies:
+    json-buffer: "npm:3.0.0"
+  checksum: 10/6de272b3f78975a9a0b12259953c09d5bbe9de9acfd845471ebd758928b523f70563462f0c16a866fe9b447ff5bdebda72c62bc23734eb72cd1fb8f1d7076843
+  languageName: node
+  linkType: hard
+
 "keyv@npm:^4.0.0":
   version: 4.5.2
   resolution: "keyv@npm:4.5.2"
@@ -38518,6 +38916,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lowercase-keys@npm:^1.0.0, lowercase-keys@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "lowercase-keys@npm:1.0.1"
+  checksum: 10/12ba64572dc25ae9ee30d37a11f3a91aea046c1b6b905fdf8ac77e2f268f153ed36e60d39cb3bfa47a89f31d981dae9a8cc9915124a56fe51ff01ed6e8bb68fa
+  languageName: node
+  linkType: hard
+
 "lowercase-keys@npm:^2.0.0":
   version: 2.0.0
   resolution: "lowercase-keys@npm:2.0.0"
@@ -38534,7 +38939,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:^10.0.0":
+"lru-cache@npm:^10.0.0, lru-cache@npm:^9.1.1 || ^10.0.0":
   version: 10.0.0
   resolution: "lru-cache@npm:10.0.0"
   checksum: 10/590e00d6ccd76a1ada056585be3fd6dbddda395fc9359390cff38669c69c3fa1792dd6c4c46a9b1b411f032cd2e979d9e664f1628163292ecdfeada98c3da1f3
@@ -38906,6 +39311,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"matcher@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "matcher@npm:3.0.0"
+  dependencies:
+    escape-string-regexp: "npm:^4.0.0"
+  checksum: 10/8bee1a7ab7609c2c21d9c9254b6785fa708eadf289032b556d57a34e98fcd4c537659a004dafee6ce80ab157099e645c199dc52678dff1e7fb0a6684e0da4dbe
+  languageName: node
+  linkType: hard
+
 "mathml-tag-names@npm:^2.1.3":
   version: 2.1.3
   resolution: "mathml-tag-names@npm:2.1.3"
@@ -39176,7 +39590,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mimic-response@npm:^1.0.0":
+"mimic-response@npm:^1.0.0, mimic-response@npm:^1.0.1":
   version: 1.0.1
   resolution: "mimic-response@npm:1.0.1"
   checksum: 10/034c78753b0e622bc03c983663b1cdf66d03861050e0c8606563d149bc2b02d63f62ce4d32be4ab50d0553ae0ffe647fc34d1f5281184c6e1e8cf4d85e8d9823
@@ -41201,6 +41615,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-gyp-build@npm:^4.3.0":
+  version: 4.8.0
+  resolution: "node-gyp-build@npm:4.8.0"
+  bin:
+    node-gyp-build: bin.js
+    node-gyp-build-optional: optional.js
+    node-gyp-build-test: build-test.js
+  checksum: 10/80f410ab412df38e84171d3634a5716b6c6f14ecfa4eb971424d289381fb76f8bcbe1b666419ceb2c81060e558fd7c6d70cc0f60832bcca6a1559098925d9657
+  languageName: node
+  linkType: hard
+
 "node-gyp@npm:latest":
   version: 9.0.0
   resolution: "node-gyp@npm:9.0.0"
@@ -41449,6 +41874,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"normalize-url@npm:^4.1.0":
+  version: 4.5.1
+  resolution: "normalize-url@npm:4.5.1"
+  checksum: 10/20ced2845fcfaa46da74efc0aa39b7bed22f3db39e6e8b844261613082a36a2dcd468decad89fa9313b5464bebab4034f96bda7880e8fc468027fecf6a6fa254
+  languageName: node
+  linkType: hard
+
 "normalize-url@npm:^6.0.1":
   version: 6.1.0
   resolution: "normalize-url@npm:6.1.0"
@@ -41456,6 +41888,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"npm-conf@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "npm-conf@npm:1.1.3"
+  dependencies:
+    config-chain: "npm:^1.1.11"
+    pify: "npm:^3.0.0"
+  checksum: 10/84bb479dd1d51bf25dab86d574d14ba796b92bf52b6a3b75d23cca4d494e59f3b5c8a9d3f8b1daca8ad3a8a54d57efc9646852e8dfdbc00324d651cda4a85f62
+  languageName: node
+  linkType: hard
+
 "npm-run-path@npm:^4.0.1":
   version: 4.0.1
   resolution: "npm-run-path@npm:4.0.1"
@@ -42250,6 +42692,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"p-cancelable@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "p-cancelable@npm:1.1.0"
+  checksum: 10/2db3814fef6d9025787f30afaee4496a8857a28be3c5706432cbad76c688a6db1874308f48e364a42f5317f5e41e8e7b4f2ff5c8ff2256dbb6264bc361704ece
+  languageName: node
+  linkType: hard
+
 "p-cancelable@npm:^2.0.0":
   version: 2.1.1
   resolution: "p-cancelable@npm:2.1.1"
@@ -42425,13 +42874,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"package-json-from-dist@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "package-json-from-dist@npm:1.0.1"
-  checksum: 10/58ee9538f2f762988433da00e26acc788036914d57c71c246bf0be1b60cdbd77dd60b6a3e1a30465f0b248aeb80079e0b34cb6050b1dfa18c06953bb1cbc7602
-  languageName: node
-  linkType: hard
-
 "package-manager-detector@npm:^0.2.7":
   version: 0.2.8
   resolution: "package-manager-detector@npm:0.2.8"
@@ -42844,6 +43286,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-scurry@npm:^1.10.1":
+  version: 1.10.1
+  resolution: "path-scurry@npm:1.10.1"
+  dependencies:
+    lru-cache: "npm:^9.1.1 || ^10.0.0"
+    minipass: "npm:^5.0.0 || ^6.0.2 || ^7.0.0"
+  checksum: 10/eebfb8304fef1d4f7e1486df987e4fd77413de4fce16508dea69fcf8eb318c09a6b15a7a2f4c22877cec1cb7ecbd3071d18ca9de79eeece0df874a00f1f0bdc8
+  languageName: node
+  linkType: hard
+
 "path-scurry@npm:^1.11.1, path-scurry@npm:^1.9.2":
   version: 1.11.1
   resolution: "path-scurry@npm:1.11.1"
@@ -43155,6 +43607,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pify@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "pify@npm:3.0.0"
+  checksum: 10/668c1dc8d9fc1b34b9ce3b16ba59deb39d4dc743527bf2ed908d2b914cb8ba40aa5ba6960b27c417c241531c5aafd0598feeac2d50cb15278cf9863fa6b02a77
+  languageName: node
+  linkType: hard
+
 "pify@npm:^4.0.1":
   version: 4.0.1
   resolution: "pify@npm:4.0.1"
@@ -44604,6 +45063,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prepend-http@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "prepend-http@npm:2.0.0"
+  checksum: 10/7694a9525405447662c1ffd352fcb41b6410c705b739b6f4e3a3e21cf5fdede8377890088e8934436b8b17ba55365a615f153960f30877bf0d0392f9e93503ea
+  languageName: node
+  linkType: hard
+
 "prettier-fallback@npm:prettier@^3":
   version: 3.3.2
   resolution: "prettier@npm:3.3.2"
@@ -44756,7 +45222,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"progress@npm:2.0.3":
+"progress@npm:2.0.3, progress@npm:^2.0.3":
   version: 2.0.3
   resolution: "progress@npm:2.0.3"
   checksum: 10/e6f0bcb71f716eee9dfac0fe8a2606e3704d6a64dd93baaf49fbadbc8499989a610fe14cf1bc6f61b6d6653c49408d94f4a94e124538084efd8e4cf525e0293d
@@ -45361,19 +45827,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pug-code-gen@npm:^3.0.3":
-  version: 3.0.3
-  resolution: "pug-code-gen@npm:3.0.3"
+"pug-code-gen@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "pug-code-gen@npm:3.0.2"
   dependencies:
     constantinople: "npm:^4.0.1"
     doctypes: "npm:^1.1.0"
     js-stringify: "npm:^1.0.2"
     pug-attrs: "npm:^3.0.0"
-    pug-error: "npm:^2.1.0"
-    pug-runtime: "npm:^3.0.1"
+    pug-error: "npm:^2.0.0"
+    pug-runtime: "npm:^3.0.0"
     void-elements: "npm:^3.1.0"
     with: "npm:^7.0.0"
-  checksum: 10/1918b2a75794b730ee29fc2278658ff2ccb74445742c175c55b18e414cf038e5ac5802e71db070b08f92c5304a66e141dc2261e401be4d5884f1c0bcfb3194ee
+  checksum: 10/8245ba433a870fc66fec2cc2548cdd45ccd59b71844fa72cc63a7c310a4e35e071bd8a048a97e7d23282ae2a9d16a7d7cef0cfb2e9a37f5f460895b283160089
   languageName: node
   linkType: hard
 
@@ -45384,13 +45850,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pug-error@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "pug-error@npm:2.1.0"
-  checksum: 10/9aefacfa156f0eb439ddab86c7136f998a532481a80665c9fb6b998afeea5bc8c4f83eb6ad8a4c7804c44927737df913b768b713995e6892112bbc05762e5415
-  languageName: node
-  linkType: hard
-
 "pug-filters@npm:^4.0.0":
   version: 4.0.0
   resolution: "pug-filters@npm:4.0.0"
@@ -45469,10 +45928,10 @@ __metadata:
   linkType: hard
 
 "pug@npm:^3.0.2":
-  version: 3.0.3
-  resolution: "pug@npm:3.0.3"
+  version: 3.0.2
+  resolution: "pug@npm:3.0.2"
   dependencies:
-    pug-code-gen: "npm:^3.0.3"
+    pug-code-gen: "npm:^3.0.2"
     pug-filters: "npm:^4.0.0"
     pug-lexer: "npm:^5.0.1"
     pug-linker: "npm:^4.0.0"
@@ -45480,7 +45939,7 @@ __metadata:
     pug-parser: "npm:^6.0.0"
     pug-runtime: "npm:^3.0.1"
     pug-strip-comments: "npm:^2.0.0"
-  checksum: 10/a88364757512e3b9af024c008f23b910de049659655b5d9e6ca42f996d7849ce1aab059f61e2d44ccce0dde5ff291995682338c285e9f76f3e5bfa02de9c481b
+  checksum: 10/4bb4cab1abbdfc3cc3e7d9a7813e204ca3febf8819f81f8c4279941fb1567939015a720a1f6de8a51cf1fa6ad134d1e783c9b66f7ef8c29d3feaf8a2445f7237
   languageName: node
   linkType: hard
 
@@ -45850,8 +46309,8 @@ __metadata:
   linkType: hard
 
 "react-remove-scroll-bar@npm:^2.3.3":
-  version: 2.3.6
-  resolution: "react-remove-scroll-bar@npm:2.3.6"
+  version: 2.3.4
+  resolution: "react-remove-scroll-bar@npm:2.3.4"
   dependencies:
     react-style-singleton: "npm:^2.2.1"
     tslib: "npm:^2.0.0"
@@ -45861,7 +46320,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10/5ab8eda61d5b10825447d11e9c824486c929351a471457c22452caa19b6898e18c3af6a46c3fa68010c713baed1eb9956106d068b4a1058bdcf97a1a9bbed734
+  checksum: 10/ac028b3ed12e66972cab8656747736729b219dff5a600178d1650300a2a750ace37f7ec82146147d37b092b19874f45cf7a45edceff68ac1f59607a828ca089f
   languageName: node
   linkType: hard
 
@@ -46878,6 +47337,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"responselike@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "responselike@npm:1.0.2"
+  dependencies:
+    lowercase-keys: "npm:^1.0.0"
+  checksum: 10/2e9e70f1dcca3da621a80ce71f2f9a9cad12c047145c6ece20df22f0743f051cf7c73505e109814915f23f9e34fb0d358e22827723ee3d56b623533cab8eafcd
+  languageName: node
+  linkType: hard
+
 "responselike@npm:^2.0.0":
   version: 2.0.1
   resolution: "responselike@npm:2.0.1"
@@ -47037,6 +47505,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"roarr@npm:^2.15.3":
+  version: 2.15.4
+  resolution: "roarr@npm:2.15.4"
+  dependencies:
+    boolean: "npm:^3.0.1"
+    detect-node: "npm:^2.0.4"
+    globalthis: "npm:^1.0.1"
+    json-stringify-safe: "npm:^5.0.1"
+    semver-compare: "npm:^1.0.0"
+    sprintf-js: "npm:^1.1.2"
+  checksum: 10/baaa5ad91468bf1b7f0263c4132a40865c8638a3d0916b44dd0d42980a77fb53085a3792e3edf16fc4eea9e31c719793c88bd45b1623b760763c4dc59df97619
+  languageName: node
+  linkType: hard
+
 "rollup-plugin-delete@npm:^2.0.0":
   version: 2.0.0
   resolution: "rollup-plugin-delete@npm:2.0.0"
@@ -47678,6 +48160,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver-compare@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "semver-compare@npm:1.0.0"
+  checksum: 10/75f9c7a7786d1756f64b1429017746721e07bd7691bdad6368f7643885d3a98a27586777e9699456564f4844b407e9f186cc1d588a3f9c0be71310e517e942c3
+  languageName: node
+  linkType: hard
+
 "semver@npm:2 || 3 || 4 || 5, semver@npm:^5.6.0, semver@npm:^5.7.1":
   version: 5.7.2
   resolution: "semver@npm:5.7.2"
@@ -47709,7 +48198,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^6.0.0, semver@npm:^6.1.1, semver@npm:^6.1.2, semver@npm:^6.3.0, semver@npm:^6.3.1":
+"semver@npm:^6.0.0, semver@npm:^6.1.1, semver@npm:^6.1.2, semver@npm:^6.2.0, semver@npm:^6.3.0, semver@npm:^6.3.1":
   version: 6.3.1
   resolution: "semver@npm:6.3.1"
   bin:
@@ -47799,6 +48288,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"serialize-error@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "serialize-error@npm:7.0.1"
+  dependencies:
+    type-fest: "npm:^0.13.1"
+  checksum: 10/e0aba4dca2fc9fe74ae1baf38dbd99190e1945445a241ba646290f2176cdb2032281a76443b02ccf0caf30da5657d510746506368889a593b9835a497fc0732e
+  languageName: node
+  linkType: hard
+
 "serialize-javascript@npm:>=6.0.2, serialize-javascript@npm:^6.0.0, serialize-javascript@npm:^6.0.1":
   version: 6.0.2
   resolution: "serialize-javascript@npm:6.0.2"
@@ -48286,6 +48784,53 @@ __metadata:
   languageName: node
   linkType: hard
 
+"socket.io-adapter@npm:~2.5.2":
+  version: 2.5.4
+  resolution: "socket.io-adapter@npm:2.5.4"
+  dependencies:
+    debug: "npm:~4.3.4"
+    ws: "npm:~8.11.0"
+  checksum: 10/48f35ce91e7225565c17f55c2ed9ab4f39e06705e8278cd85e447cbb0e45fd4a16020cd5e1a170e75e06161bcd277b3a02a9305048f76704d10ee61eacba1154
+  languageName: node
+  linkType: hard
+
+"socket.io-client@npm:^4.4.1":
+  version: 4.7.5
+  resolution: "socket.io-client@npm:4.7.5"
+  dependencies:
+    "@socket.io/component-emitter": "npm:~3.1.0"
+    debug: "npm:~4.3.2"
+    engine.io-client: "npm:~6.5.2"
+    socket.io-parser: "npm:~4.2.4"
+  checksum: 10/a9e118081dc1669a63af3abd9defce94f85c8ed8d9146cd7a77665b5f1f78baf0b9f4155cf0fce7770856f97493416551abcba686f02778045f4768ceaafed5c
+  languageName: node
+  linkType: hard
+
+"socket.io-parser@npm:~4.2.4":
+  version: 4.2.4
+  resolution: "socket.io-parser@npm:4.2.4"
+  dependencies:
+    "@socket.io/component-emitter": "npm:~3.1.0"
+    debug: "npm:~4.3.1"
+  checksum: 10/4be500a9ff7e79c50ec25af11048a3ed34b4c003a9500d656786a1e5bceae68421a8394cf3eb0aa9041f85f36c1a9a737617f4aee91a42ab4ce16ffb2aa0c89c
+  languageName: node
+  linkType: hard
+
+"socket.io@npm:^4.4.0":
+  version: 4.7.5
+  resolution: "socket.io@npm:4.7.5"
+  dependencies:
+    accepts: "npm:~1.3.4"
+    base64id: "npm:~2.0.0"
+    cors: "npm:~2.8.5"
+    debug: "npm:~4.3.2"
+    engine.io: "npm:~6.5.2"
+    socket.io-adapter: "npm:~2.5.2"
+    socket.io-parser: "npm:~4.2.4"
+  checksum: 10/911528f5bfdf83dbe2b154866884b736a7498f112f294a6f8420418fa11baadf08578869dab3e220c943094ff0d17b7f4587de3b1ad39679d9c12ed4cb226900
+  languageName: node
+  linkType: hard
+
 "sockjs@npm:^0.3.24":
   version: 0.3.24
   resolution: "sockjs@npm:0.3.24"
@@ -48582,7 +49127,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sprintf-js@npm:^1.1.1, sprintf-js@npm:^1.1.3":
+"sprintf-js@npm:^1.1.1, sprintf-js@npm:^1.1.2, sprintf-js@npm:^1.1.3":
   version: 1.1.3
   resolution: "sprintf-js@npm:1.1.3"
   checksum: 10/e7587128c423f7e43cc625fe2f87e6affdf5ca51c1cc468e910d8aaca46bb44a7fbcfa552f787b1d3987f7043aeb4527d1b99559e6621e01b42b3f45e5a24cbb
@@ -49385,6 +49930,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sumchecker@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "sumchecker@npm:3.0.1"
+  dependencies:
+    debug: "npm:^4.1.0"
+  checksum: 10/5c69776ce2b53040c952cfbca0f7b487b1ee993c55b6d5523f674ec075f30e031fd84b6706dc8ccc4deb9761b58f9925be8806a316e5eedff2286bb48cb75044
+  languageName: node
+  linkType: hard
+
 "superagent@npm:3.8.1":
   version: 3.8.1
   resolution: "superagent@npm:3.8.1"
@@ -50306,6 +50860,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"to-readable-stream@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "to-readable-stream@npm:1.0.0"
+  checksum: 10/a99e23d49777d9d03686f03cc0bbbcb4648d991648990a98bc93b55cf91a2ae830c41b5efa36802f1c00a34bba93bd33b10346772fd3f49bcf1667a99c85f354
+  languageName: node
+  linkType: hard
+
 "to-regex-range@npm:^5.0.1":
   version: 5.0.1
   resolution: "to-regex-range@npm:5.0.1"
@@ -50778,6 +51339,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"type-fest@npm:^0.13.1":
+  version: 0.13.1
+  resolution: "type-fest@npm:0.13.1"
+  checksum: 10/11e9476dc85bf97a71f6844fb67ba8e64a4c7e445724c0f3bd37eb2ddf4bc97c1dc9337bd880b28bce158de1c0cb275c2d03259815a5bf64986727197126ab56
+  languageName: node
+  linkType: hard
+
 "type-fest@npm:^0.16.0":
   version: 0.16.0
   resolution: "type-fest@npm:0.16.0"
@@ -52124,6 +52692,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"url-parse-lax@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "url-parse-lax@npm:3.0.0"
+  dependencies:
+    prepend-http: "npm:^2.0.0"
+  checksum: 10/1040e357750451173132228036aff1fd04abbd43eac1fb3e4fca7495a078bcb8d33cb765fe71ad7e473d9c94d98fd67adca63bd2716c815a2da066198dd37217
+  languageName: node
+  linkType: hard
+
 "url-parse@npm:^1.5.3":
   version: 1.5.10
   resolution: "url-parse@npm:1.5.10"
@@ -52156,8 +52733,8 @@ __metadata:
   linkType: hard
 
 "use-callback-ref@npm:^1.3.0":
-  version: 1.3.2
-  resolution: "use-callback-ref@npm:1.3.2"
+  version: 1.3.0
+  resolution: "use-callback-ref@npm:1.3.0"
   dependencies:
     tslib: "npm:^2.0.0"
   peerDependencies:
@@ -52166,7 +52743,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 10/3be76eae71b52ab233b4fde974eddeff72e67e6723100a0c0297df4b0d60daabedfa706ffb314d0a52645f2c1235e50fdbd53d99f374eb5df68c74d412e98a9b
+  checksum: 10/f9f1b217db60419b033228ba17cee5c521123e7c7f35577258a1abdce6d9623e5880f0bed3a0504eff35fdf6c761a2b2e020337a34218fb86229b8641772654a
   languageName: node
   linkType: hard
 
@@ -52186,6 +52763,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"utf-8-validate@npm:^5.0.9":
+  version: 5.0.10
+  resolution: "utf-8-validate@npm:5.0.10"
+  dependencies:
+    node-gyp: "npm:latest"
+    node-gyp-build: "npm:^4.3.0"
+  checksum: 10/b89cbc13b4badad04828349ebb7aa2ab1edcb02b46ab12ce0ba5b2d6886d684ad4e93347819e3c8d36224c8742422d2dca69f5cc16c72ae4d7eeecc0c5cb544b
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"
@@ -52354,7 +52941,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vee-validate@npm:^4.7.0":
+"vee-validate@npm:4.7.0, vee-validate@npm:^4.7.0":
   version: 4.7.0
   resolution: "vee-validate@npm:4.7.0"
   dependencies:
@@ -52704,7 +53291,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite@npm:^5.0.0, vite@npm:^5.0.12, vite@npm:^5.2.0":
+"vite@npm:^5.0.0, vite@npm:^5.0.12":
   version: 5.3.1
   resolution: "vite@npm:5.3.1"
   dependencies:
@@ -52744,6 +53331,46 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite@npm:^5.2.0":
+  version: 5.2.13
+  resolution: "vite@npm:5.2.13"
+  dependencies:
+    esbuild: "npm:^0.20.1"
+    fsevents: "npm:~2.3.3"
+    postcss: "npm:^8.4.38"
+    rollup: "npm:^4.13.0"
+  peerDependencies:
+    "@types/node": ^18.0.0 || >=20.0.0
+    less: "*"
+    lightningcss: ^1.21.0
+    sass: "*"
+    stylus: "*"
+    sugarss: "*"
+    terser: ^5.4.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  peerDependenciesMeta:
+    "@types/node":
+      optional: true
+    less:
+      optional: true
+    lightningcss:
+      optional: true
+    sass:
+      optional: true
+    stylus:
+      optional: true
+    sugarss:
+      optional: true
+    terser:
+      optional: true
+  bin:
+    vite: bin/vite.js
+  checksum: 10/eee65eebff8c839935fdf1a6f2bbc90b923d53a447cc0949abea71577166e7ad7ceb41f3ea42c79a54997319eacfa45445509da371a8ba0699fce8f7de137882
+  languageName: node
+  linkType: hard
+
 "vite@npm:^5.3.4":
   version: 5.3.4
   resolution: "vite@npm:5.3.4"
@@ -54286,7 +54913,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.11.0, ws@npm:^8.12.0, ws@npm:^8.13.0, ws@npm:^8.15.0, ws@npm:^8.16.0, ws@npm:^8.17.0, ws@npm:^8.17.1, ws@npm:^8.2.3":
+"ws@npm:^8.11.0, ws@npm:^8.12.0, ws@npm:^8.15.0, ws@npm:^8.17.0, ws@npm:^8.17.1":
   version: 8.17.1
   resolution: "ws@npm:8.17.1"
   peerDependencies:
@@ -54301,6 +54928,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ws@npm:^8.13.0, ws@npm:^8.16.0":
+  version: 8.16.0
+  resolution: "ws@npm:8.16.0"
+  peerDependencies:
+    bufferutil: ^4.0.1
+    utf-8-validate: ">=5.0.2"
+  peerDependenciesMeta:
+    bufferutil:
+      optional: true
+    utf-8-validate:
+      optional: true
+  checksum: 10/7c511c59e979bd37b63c3aea4a8e4d4163204f00bd5633c053b05ed67835481995f61a523b0ad2b603566f9a89b34cb4965cb9fab9649fbfebd8f740cea57f17
+  languageName: node
+  linkType: hard
+
 "ws@npm:^8.18.0":
   version: 8.18.0
   resolution: "ws@npm:8.18.0"
@@ -54316,6 +54958,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ws@npm:^8.2.3":
+  version: 8.10.0
+  resolution: "ws@npm:8.10.0"
+  peerDependencies:
+    bufferutil: ^4.0.1
+    utf-8-validate: ^5.0.2
+  peerDependenciesMeta:
+    bufferutil:
+      optional: true
+    utf-8-validate:
+      optional: true
+  checksum: 10/5e5e95ff50df952d89e8cda7c2cecf86a6697b098e537e2b81030d18846b4ef3168607945b4fa7c66162971ebbd570505ba66fd0e29a4dfd949e237dba64140b
+  languageName: node
+  linkType: hard
+
+"ws@npm:~8.11.0":
+  version: 8.11.0
+  resolution: "ws@npm:8.11.0"
+  peerDependencies:
+    bufferutil: ^4.0.1
+    utf-8-validate: ^5.0.2
+  peerDependenciesMeta:
+    bufferutil:
+      optional: true
+    utf-8-validate:
+      optional: true
+  checksum: 10/f759ea19e42f6d94727b3d8590693f2d92521a78ec2de5c6064c3356f50d4815d427b7ddb10bf39596cc67d3b18232a1b2dfbc3b6361d4772bdfec69d4c130f4
+  languageName: node
+  linkType: hard
+
 "xml-escape@npm:^1.1.0":
   version: 1.1.0
   resolution: "xml-escape@npm:1.1.0"
@@ -54368,6 +55040,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"xmlhttprequest-ssl@npm:~2.0.0":
+  version: 2.0.0
+  resolution: "xmlhttprequest-ssl@npm:2.0.0"
+  checksum: 10/3c2edfce0c49c7a494ed16c87e6897c9e3eba29763a5505526de83ddefd195d224fa5cdf41092298c99cd6ee473c9f259a0679f6ff3b8a9535dcd09900db91f9
+  languageName: node
+  linkType: hard
+
 "xss@npm:^1.0.14":
   version: 1.0.15
   resolution: "xss@npm:1.0.15"