diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 953f50dc03..870ebe047e 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -9,6 +9,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AAlert: typeof import('ant-design-vue/es')['Alert']
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
+    ABadgeRibbon: typeof import('ant-design-vue/es')['BadgeRibbon']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
     ACarousel: typeof import('ant-design-vue/es')['Carousel']
@@ -57,6 +58,7 @@ declare module '@vue/runtime-core' {
     ATableColumn: typeof import('ant-design-vue/es')['TableColumn']
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
     ATabs: typeof import('ant-design-vue/es')['Tabs']
+    ATag: typeof import('ant-design-vue/es')['Tag']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
@@ -74,9 +76,11 @@ declare module '@vue/runtime-core' {
     MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
     MaterialSymbolsMenu: typeof import('~icons/material-symbols/menu')['default']
     MaterialSymbolsTranslate: typeof import('~icons/material-symbols/translate')['default']
+    MdiAccountCircle: typeof import('~icons/mdi/account-circle')['default']
     MdiAccountGroup: typeof import('~icons/mdi/account-group')['default']
     MdiApi: typeof import('~icons/mdi/api')['default']
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
+    MdiArrowExpandIcon: typeof import('~icons/mdi/arrow-expand-icon')['default']
     MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
     MdiCalculator: typeof import('~icons/mdi/calculator')['default']
@@ -86,6 +90,7 @@ declare module '@vue/runtime-core' {
     MdiCheck: typeof import('~icons/mdi/check')['default']
     MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
+    MdiCloseThick: typeof import('~icons/mdi/close-thick')['default']
     MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
     MdiContentSave: typeof import('~icons/mdi/content-save')['default']
     MdiDatabase: typeof import('~icons/mdi/database')['default']
@@ -105,6 +110,7 @@ declare module '@vue/runtime-core' {
     MdiHeart: typeof import('~icons/mdi/heart')['default']
     MdiHook: typeof import('~icons/mdi/hook')['default']
     MdiInformation: typeof import('~icons/mdi/information')['default']
+    MdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
     MdiLink: typeof import('~icons/mdi/link')['default']
     MdiLinkVariantRemove: typeof import('~icons/mdi/link-variant-remove')['default']
     MdiLogout: typeof import('~icons/mdi/logout')['default']
@@ -114,6 +120,7 @@ declare module '@vue/runtime-core' {
     MdiMoonFull: typeof import('~icons/mdi/moon-full')['default']
     MdiNotebookCheckOutline: typeof import('~icons/mdi/notebook-check-outline')['default']
     MdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
+    MdiOperator: typeof import('~icons/mdi/operator')['default']
     MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
@@ -122,6 +129,7 @@ declare module '@vue/runtime-core' {
     MdiSlack: typeof import('~icons/mdi/slack')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']
     MdiStore: typeof import('~icons/mdi/store')['default']
+    MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
     MdiTableBorder: typeof import('~icons/mdi/table-border')['default']
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index d33373e547..b8d7f78dc2 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -1,76 +1,196 @@
 <script lang="ts" setup>
+import type { Select as AntSelect } from 'ant-design-vue'
+import type { SelectOptionType } from 'nocodb-sdk'
 import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
+import { ActiveCellInj, ColumnInj } from '~/context'
+import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | string[] | undefined
 }
 
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
+const { isMysql } = useProject()
+
 const column = inject(ColumnInj)
+// const isForm = inject<boolean>('isForm', false)
+// const editEnabled = inject(EditModeInj, ref(false))
+const active = inject(ActiveCellInj, ref(false))
 
-const options = computed(() => column?.value?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
+const selectedIds = ref<string[]>([])
+const aselect = ref<typeof AntSelect>()
+const isOpen = ref(false)
 
-const localState = computed({
-  get() {
-    return modelValue?.match(/(?:[^',]|\\')+(?='?(?:,|$))/g)?.map((v: string) => v.replace(/\\'/g, "'"))
-  },
-  set(val?: string[]) {
-    emit('update:modelValue', val?.filter((v) => options.value.includes(v)).join(','))
+const options = computed(() => {
+  if (column?.value.colOptions) {
+    const opts = column.value.colOptions
+      ? column.value.colOptions.options.filter((el: SelectOptionType) => el.title !== '') || []
+      : []
+    for (const op of opts.filter((el: SelectOptionType) => el.order === null)) {
+      op.title = op.title.replace(/^'/, '').replace(/'$/, '')
+    }
+    return opts
+  }
+  return []
+})
+
+const vModel = computed({
+  get: () => selectedIds.value.map((el) => options.value.find((op: SelectOptionType) => op.id === el).title),
+  set: (val) => emit('update:modelValue', val.length === 0 ? null : val.join(',')),
+})
+
+const selectedTitles = computed(() =>
+  modelValue
+    ? typeof modelValue === 'string'
+      ? isMysql
+        ? modelValue.split(',').sort((a, b) => {
+            const opa = options.value.find((el: SelectOptionType) => el.title === a)
+            const opb = options.value.find((el: SelectOptionType) => el.title === b)
+            if (opa && opb) {
+              return opa.order - opb.order
+            }
+            return 0
+          })
+        : modelValue.split(',')
+      : modelValue
+    : [],
+)
+
+const handleKeys = (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Escape':
+      e.preventDefault()
+      isOpen.value = false
+      break
+    case 'Enter':
+      e.stopPropagation()
+      break
+  }
+}
+
+const handleClose = (e: MouseEvent) => {
+  if (aselect.value && !aselect.value.$el.contains(e.target)) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  selectedIds.value = selectedTitles.value.map((el) => {
+    return options.value.find((op: SelectOptionType) => op.title === el).id
+  })
+})
+
+useEventListener(document, 'click', handleClose)
+
+watch(
+  () => modelValue,
+  (_n, _o) => {
+    selectedIds.value = selectedTitles.value.map((el) => {
+      return options.value.find((op: SelectOptionType) => op.title === el).id
+    })
   },
+)
+
+watch(isOpen, (n, _o) => {
+  if (n === false) {
+    aselect.value.blur()
+  }
 })
 </script>
 
 <template>
-  <!--
-  <v-select
-    v-model="localState"
-    :items="options"
-    hide-details
-    :clearable="!column.rqd"
-    variation="outlined"
-    multiple
-  />
--->
-
-  <v-combobox
-    v-model="localState"
-    :items="options"
-    multiple
-    chips
-    flat
-    dense
-    solo
-    hide-details
-    deletable-chips
-    class="text-center mt-0"
+  <a-select
+    ref="aselect"
+    v-model:value="vModel"
+    mode="multiple"
+    class="w-full"
+    placeholder="Select an option"
+    :bordered="false"
+    show-arrow
+    :show-search="false"
+    :open="isOpen"
+    @keydown="handleKeys"
+    @click="isOpen = !isOpen"
   >
-    <!--    <template #selection="data"> -->
-    <!--      <v-chip -->
-    <!--        :key="data.item" -->
-    <!--        small -->
-    <!--        class="ma-1 " -->
-    <!--        :color="colors[setValues.indexOf(data.item) % colors.length]" -->
-    <!--        @click:close="data.parent.selectItem(data.item)" -->
-    <!--      > -->
-    <!--        {{ data.item }} -->
-    <!--      </v-chip> -->
-    <!--    </template> -->
-
-    <!--    <template #item="{item}"> -->
-    <!--      <v-chip small :color="colors[setValues.indexOf(item) % colors.length]"> -->
-    <!--        {{ item }} -->
-    <!--      </v-chip> -->
-    <!--    </template> -->
-    <!--    <template #append> -->
-    <!--      <v-icon small class="mt-2"> -->
-    <!--        mdi-menu-down -->
-    <!--      </v-icon> -->
-    <!--    </template> -->
-  </v-combobox>
+    <a-select-option v-for="op of options" :key="op.id" :value="op.title" @click.stop>
+      <a-tag class="rounded-tag" :color="op.color">
+        <span class="text-slate-500">{{ op.title }}</span>
+      </a-tag>
+    </a-select-option>
+    <template #tagRender="{ value: val, onClose }">
+      <a-tag
+        v-if="options.find((el: SelectOptionType) => el.title === val)"
+        class="rounded-tag"
+        :style="{ display: 'flex', alignItems: 'center' }"
+        :color="options.find((el: SelectOptionType) => el.title === val).color"
+        :closable="active && (vModel.length > 1 || !column?.rqd)"
+        :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
+        @close="onClose"
+      >
+        <span class="text-slate-500">{{ val }}</span>
+      </a-tag>
+    </template>
+  </a-select>
 </template>
 
-<style scoped></style>
+<style scoped>
+.ms-close-icon {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+  display: flex;
+  font-size: 12px;
+  font-style: normal;
+  height: 12px;
+  line-height: 1;
+  text-align: center;
+  text-transform: none;
+  transition: color 0.3s ease, opacity 0.15s ease;
+  width: 12px;
+  z-index: 1;
+  margin-right: -6px;
+  margin-left: 3px;
+}
+.ms-close-icon:before {
+  display: block;
+}
+.ms-close-icon:hover {
+  color: rgba(0, 0, 0, 0.45);
+}
+.rounded-tag {
+  padding: 0px 12px;
+  border-radius: 12px;
+}
+:deep(.ant-tag) {
+  @apply "rounded-tag";
+}
+:deep(.ant-tag-close-icon) {
+  @apply "text-slate-500";
+}
+</style>
+<!--
+/**
+ * @copyright Copyright (c) 2021, Xgene Cloud Ltd
+ *
+ * @author Naveen MR <oof1lab@gmail.com>
+ * @author Pranav C Balan <pranavxc@gmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+-->
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 75821474b8..598b1f584e 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -1,71 +1,100 @@
 <script lang="ts" setup>
+import type { Select as AntSelect } from 'ant-design-vue'
+import type { SelectOptionType } from 'nocodb-sdk'
 import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
+import { ActiveCellInj, ColumnInj } from '~/context'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | undefined
 }
 
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const column = inject(ColumnInj)!
+const column = inject(ColumnInj)
+// const isForm = inject<boolean>('isForm', false)
+// const editEnabled = inject(EditModeInj, ref(false))
+const active = inject(ActiveCellInj, ref(false))
+
+const aselect = ref<typeof AntSelect>()
+const isOpen = ref(false)
 
 const vModel = computed({
-  get: () => modelValue?.replace(/\\'/g, "'").replace(/^'|'$/g, ''),
-  set: (val) => emit('update:modelValue', val),
+  get: () => modelValue,
+  set: (val) => emit('update:modelValue', val || null),
 })
 
-const options = computed(() => column.value.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
-</script>
-
-<template>
-  <v-select v-model="vModel" :items="options" hide-details :clearable="!column.rqd" variation="outlined">
-    <!--    v-on="parentListeners"
-    <template #selection="{ item }">
-      <div
-        class="d-100"
-        :class="{
-          'text-center': !isForm,
-        }"
-      >
-        <v-chip small :color="enumColor.light[options.indexOf(item) % enumColor.light.length]" class="ma-1">
-          {{ item.text }}
-        </v-chip>
-      </div>
-    </template>
-    <template #item="{ item }">
-      <v-chip small :color="enumColor.light[options.indexOf(item) % enumColor.light.length]">
-        {{ item }}
-      </v-chip>
-    </template>
-    <template #append>
-      <v-icon small class="mt-1"> mdi-menu-down</v-icon>
-    </template> -->
-  </v-select>
-</template>
+const options = computed(() => {
+  if (column?.value.colOptions) {
+    const opts = column.value.colOptions
+      ? column.value.colOptions.options.filter((el: SelectOptionType) => el.title !== '') || []
+      : []
+    for (const op of opts.filter((el: SelectOptionType) => el.order === null)) {
+      op.title = op.title.replace(/^'/, '').replace(/'$/, '')
+    }
+    return opts
+  }
+  return []
+})
 
-<style scoped lang="scss">
-/*:deep {
-  .v-select {
-    min-width: 150px;
+const handleKeys = (e: KeyboardEvent) => {
+  switch (e.key) {
+    case 'Escape':
+      e.preventDefault()
+      isOpen.value = false
+      break
   }
+}
 
-  .v-input__slot {
-    padding-right: 0 !important;
-    padding-left: 35px !important;
+const handleClose = (e: MouseEvent) => {
+  if (aselect.value && !aselect.value.$el.contains(e.target)) {
+    isOpen.value = false
+    aselect.value.blur()
   }
+}
 
-  .v-input__icon.v-input__icon--clear {
-    width: 15px !important;
-    min-width: 13px !important;
+useEventListener(document, 'click', handleClose)
 
-    .v-icon {
-      font-size: 13px !important;
-    }
+watch(isOpen, (n, _o) => {
+  if (n === false) {
+    aselect.value.blur()
   }
-}*/
+})
+</script>
+
+<template>
+  <a-select
+    ref="aselect"
+    v-model:value="vModel"
+    class="w-full"
+    :allow-clear="!column.rqd && active"
+    placeholder="Select an option"
+    :bordered="false"
+    :open="isOpen"
+    @select="isOpen = false"
+    @keydown="handleKeys"
+    @click="isOpen = !isOpen"
+  >
+    <a-select-option v-for="op of options" :key="op.title" @click.stop>
+      <a-tag class="rounded-tag" :color="op.color">
+        <span class="text-slate-500">{{ op.title }}</span>
+      </a-tag>
+    </a-select-option>
+  </a-select>
+</template>
+
+<style scoped lang="scss">
+.rounded-tag {
+  padding: 0px 12px;
+  border-radius: 12px;
+}
+:deep(.ant-tag) {
+  @apply "rounded-tag";
+}
+:deep(.ant-select-clear) {
+  opacity: 1;
+}
 </style>
 <!--
 /**
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 3390e9dc57..1cd3324173 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { onKeyDown } from '@vueuse/core'
 import { useProvideAttachmentCell } from './utils'
-import Modal from './Modal.vue'
 import { useSortable } from './sort'
+import Modal from './Modal.vue'
 import Carousel from './Carousel.vue'
-import { onMounted, ref, useDropZone, watch } from '#imports'
+import { computed, ref, useDropZone, useSmartsheetStoreOrThrow, watch } from '#imports'
 import { isImage, openLink } from '~/utils'
 
 interface Props {
@@ -20,16 +20,18 @@ const { modelValue, rowIndex } = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const dropZoneRef = ref<HTMLTableDataCellElement>()
-
 const sortableRef = ref<HTMLDivElement>()
 
+const { cellRefs } = useSmartsheetStoreOrThrow()!
+
 const { column, modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage, isReadonly } =
   useProvideAttachmentCell(updateModelValue)
 
+const currentCellRef = computed(() => cellRefs.value.find((cell) => cell.dataset.key === `${rowIndex}${column.value.id}`))
+
 const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
 
-const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
+const { isOverDropZone } = useDropZone(currentCellRef, onDrop)
 
 /** on new value, reparse our stored attachments */
 watch(
@@ -52,24 +54,17 @@ onKeyDown('Escape', () => {
   modalVisible.value = false
   isOverDropZone.value = false
 })
-
-/** if possible, on mounted we try to fetch the relevant `td` cell to use as a dropzone */
-onMounted(() => {
-  if (typeof document !== 'undefined') {
-    dropZoneRef.value = document.querySelector(`td[data-key="${rowIndex}${column.value.id}"]`) as HTMLTableDataCellElement
-  }
-})
 </script>
 
 <template>
   <div class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1">
     <Carousel />
 
-    <template v-if="!isReadonly && !dragging && dropZoneRef">
+    <template v-if="!isReadonly && !dragging && !!currentCellRef">
       <general-overlay
         v-model="isOverDropZone"
         inline
-        :target="`td[data-key='${rowIndex}${column.id}']`"
+        :target="currentCellRef"
         class="text-white text-lg ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
       >
         <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
@@ -99,7 +94,7 @@ onMounted(() => {
       <div
         ref="sortableRef"
         :class="{ dragging }"
-        class="flex justify-center items-center flex-wrap gap-2 p-1 scrollbar-thin-dull max-h-[150px] overflow-scroll"
+        class="flex justify-center items-center flex-wrap gap-2 p-1 scrollbar-thin-dull max-h-[150px] overflow-auto"
       >
         <div
           v-for="(item, i) of visibleItems"
diff --git a/packages/nc-gui-v2/components/general/ColorPicker.vue b/packages/nc-gui-v2/components/general/ColorPicker.vue
new file mode 100644
index 0000000000..c319f83299
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/ColorPicker.vue
@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import { Chrome } from '@ckpack/vue-color'
+import { enumColor } from '@/utils'
+
+interface Props {
+  modelValue: string | any
+  colors?: string[]
+  rowSize?: number
+  advanced?: Boolean
+  pickButton?: Boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => enumColor.light[0],
+  colors: () => enumColor.light.concat(enumColor.dark),
+  rowSize: () => 10,
+  advanced: () => true,
+  pickButton: () => false,
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const vModel = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit('update:modelValue', val.hex ? val.hex : val || null)
+  },
+})
+
+const picked = ref(props.modelValue || enumColor.light[0])
+
+const selectColor = (color: any) => {
+  picked.value = color.hex ? color.hex : color
+  vModel.value = color.hex ? color.hex : color
+}
+
+const compare = (colorA: String, colorB: String) => {
+  if ((typeof colorA === 'string' || colorA instanceof String) && (typeof colorB === 'string' || colorB instanceof String)) {
+    return colorA.toLowerCase() === colorB.toLowerCase()
+  }
+  return false
+}
+
+watch(picked, (n, _o) => {
+  if (!props.pickButton) {
+    vModel.value = n.hex ? n.hex : n
+  }
+})
+</script>
+
+<template>
+  <div class="color-picker">
+    <div v-for="colId in Math.ceil(props.colors.length / props.rowSize)" :key="colId" class="color-picker-row">
+      <button
+        v-for="(color, i) in colors.slice((colId - 1) * rowSize, colId * rowSize)"
+        :key="`color-${colId}-${i}`"
+        class="color-selector"
+        :class="compare(picked, color) ? 'selected' : ''"
+        :style="{ 'background-color': `${color}` }"
+        @click="selectColor(color)"
+      >
+        {{ compare(picked, color) ? '&#10003;' : '' }}
+      </button>
+    </div>
+    <a-card v-if="props.advanced" class="w-full mt-2" :body-style="{ padding: '0px' }" :bordered="false">
+      <a-collapse accordion ghost expand-icon-position="right">
+        <a-collapse-panel key="1" header="Advanced" class="">
+          <a-button v-if="props.pickButton" class="!bg-primary text-white w-full" @click="selectColor(picked)">
+            Pick Color
+          </a-button>
+          <div class="flex justify-center py-4">
+            <Chrome v-model="picked" class="!w-full !shadow-none" />
+          </div>
+        </a-collapse-panel>
+      </a-collapse>
+    </a-card>
+  </div>
+</template>
+
+<style scoped>
+.color-picker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background: white;
+  padding: 10px;
+}
+.color-picker-row {
+  display: flex;
+  flex-direction: row;
+}
+.color-selector {
+  position: relative;
+  height: 32px;
+  width: 32px;
+  margin: 10px 5px;
+  border-radius: 5px;
+  -webkit-text-stroke-width: 1px;
+  -webkit-text-stroke-color: white;
+}
+.color-selector:hover {
+  filter: brightness(90%);
+  -webkit-filter: brightness(90%);
+}
+.color-selector.selected {
+  filter: brightness(90%);
+  -webkit-filter: brightness(90%);
+}
+</style>
diff --git a/packages/nc-gui-v2/components/general/MiniSidebar.vue b/packages/nc-gui-v2/components/general/MiniSidebar.vue
index 48cd9416c5..9034f44756 100644
--- a/packages/nc-gui-v2/components/general/MiniSidebar.vue
+++ b/packages/nc-gui-v2/components/general/MiniSidebar.vue
@@ -29,7 +29,7 @@ const logout = () => {
     theme="light"
   >
     <a-dropdown placement="bottom" :trigger="['click']">
-      <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105">
+      <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105 nc-noco-brand-icon">
         <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
       </div>
 
diff --git a/packages/nc-gui-v2/components/monaco/Editor.vue b/packages/nc-gui-v2/components/monaco/Editor.vue
index ac8c0c0641..3554066068 100644
--- a/packages/nc-gui-v2/components/monaco/Editor.vue
+++ b/packages/nc-gui-v2/components/monaco/Editor.vue
@@ -12,9 +12,10 @@ interface Props {
   lang?: string
   validate?: boolean
   disableDeepCompare?: boolean
+  readOnly?: boolean
 }
 
-const { hideMinimap, lang = 'json', validate = true, disableDeepCompare = false, modelValue } = defineProps<Props>()
+const { hideMinimap, lang = 'json', validate = true, disableDeepCompare = false, modelValue, readOnly } = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
@@ -92,6 +93,7 @@ onMounted(() => {
       },
       tabSize: 2,
       automaticLayout: true,
+      readOnly,
       minimap: {
         enabled: !hideMinimap,
       },
diff --git a/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
index c407b1cd25..3a14c76172 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { Sketch } from '@ckpack/vue-color'
 import { useColumnCreateStoreOrThrow } from '#imports'
-import { enumColor, getMdiIcon } from '@/utils'
+import { getMdiIcon } from '@/utils'
 
 const { formState } = useColumnCreateStoreOrThrow()
 
@@ -37,9 +36,12 @@ const iconList = [
   },
 ]
 
-const advanced = ref(true)
-
-const picked = ref(formState.value.meta.color || enumColor.light[0])
+const picked = computed({
+  get: () => formState.value.meta.color,
+  set: (val) => {
+    formState.value.meta.color = val
+  },
+})
 
 // set default value
 formState.value.meta = {
@@ -91,17 +93,12 @@ watch(
       </a-form-item>
     </a-col>
   </a-row>
-  <a-row>
-    <a-card class="w-full shadow-lg mt-2" body-style="padding: 0px">
-      <a-collapse v-model:activeKey="advanced" accordion ghost expand-icon-position="right">
-        <a-collapse-panel key="1" header="Advanced" class="">
-          <a-button class="!bg-primary text-white w-full" @click="formState.meta.color = picked.hex"> Pick Color </a-button>
-          <div class="px-7 py-3">
-            <Sketch v-model="picked" />
-          </div>
-        </a-collapse-panel>
-      </a-collapse>
-    </a-card>
+  <a-row class="w-full justify-center">
+    <GeneralColorPicker
+      v-model="picked"
+      :row-size="8"
+      :colors="['#fcb401', '#faa307', '#f48c06', '#e85d04', '#dc2f02', '#d00000', '#9d0208', '#777']"
+    />
   </a-row>
 </template>
 
diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index aabd4b5cad..b639033fe4 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -93,10 +93,15 @@ watch(
     }
   },
 )
+
+// for cases like formula
+if (!formState.value?.column_name) {
+  formState.value.column_name = formState.value?.title
+}
 </script>
 
 <template>
-  <div class="max-w-[550px] min-w-[450px] w-max max-h-[95vh] bg-white shadow p-4 overflow-auto" @click.stop>
+  <div class="min-w-[350px] w-max max-h-[95vh] bg-white shadow p-4 overflow-auto" @click.stop>
     <a-form v-model="formState" name="column-create-or-edit" layout="vertical">
       <a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.column_name">
         <a-input
@@ -140,6 +145,7 @@ watch(
       />
       <SmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
       <SmartsheetColumnPercentOptions v-if="formState.uidt === UITypes.Percent" />
+      <SmartsheetColumnSelectOptions v-if="formState.uidt === UITypes.SingleSelect || formState.uidt === UITypes.MultiSelect" />
 
       <div
         v-if="!isVirtualCol(formState.uidt)"
diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index b804ba5fef..6538e28b78 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -96,6 +96,7 @@ const suggestionsList = computed(() => {
         text: c.title,
         type: 'column',
         icon: getUIDTIcon(c.uidt),
+        uidt: c.uidt,
       })),
     ...availableBinOps.map((op: string) => ({
       text: op,
@@ -254,7 +255,7 @@ function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = n
 
     if (targetFormulaCol && column?.value.id) {
       formulaPaths.push({
-        [column.value.id]: [targetFormulaCol.id],
+        [column?.value?.id as string]: [targetFormulaCol.id],
       })
     }
     const vertices = formulaPaths.length
@@ -518,6 +519,7 @@ function appendText(item: Record<string, any>) {
     formState.value.formula_raw = insertAtCursor(formulaRef.value.$el, text, len)
   }
   autocomplete.value = false
+  wordToComplete.value = ''
   if (item.type === 'function' || item.type === 'op') {
     // if function / operator is chosen, display columns only
     suggestion.value = suggestionsList.value.filter((f) => f.type === 'column')
@@ -612,7 +614,7 @@ onMounted(() => {
 <template>
   <div class="formula-wrapper">
     <a-form-item v-bind="validateInfos.formula_raw" label="Formula">
-      <a-input
+      <a-textarea
         ref="formulaRef"
         v-model:value="formState.formula_raw"
         class="mb-2"
@@ -622,21 +624,13 @@ onMounted(() => {
         @change="handleInputDeb"
       />
     </a-form-item>
-    <div class="text-gray-600 mt-2 prose-sm">
+    <div class="text-gray-600 mt-2 mb-4 prose-sm">
       Hint: Use {} to reference columns, e.g: {column_name}. For more, please check out
       <a class="prose-sm" href="https://docs.nocodb.com/setup-and-usages/formulas#available-formula-features" target="_blank"
         >Formulas</a
       >.
     </div>
-    <a-drawer
-      v-model:visible="formulaSuggestionDrawer"
-      :closable="false"
-      :mask="false"
-      :mask-closable="false"
-      placement="right"
-      width="500px"
-      class="h-full overflow-auto"
-    >
+    <div class="h-[250px] overflow-auto scrollbar-thin-primary">
       <a-list ref="sugListRef" :data-source="suggestion" :locale="{ emptyText: 'No suggested formula was found' }">
         <template #renderItem="{ item, index }">
           <a-list-item
@@ -649,39 +643,37 @@ onMounted(() => {
             @click.prevent.stop="appendText(item)"
           >
             <a-list-item-meta>
-              <template v-if="item.type === 'function'" #description>
-                {{ item.description }} <br /><br />
-                Syntax: <br />
-                {{ item.syntax }} <br /><br />
-                Examples: <br />
-                <div v-for="(example, idx) of item.examples" :key="idx">
-                  <div>({{ idx + 1 }}): {{ example }}</div>
-                </div>
-              </template>
-
               <template #title>
                 <div class="flex">
-                  <div class="flex-1">
-                    {{ item.text }}
-                  </div>
-
-                  <div class="">
-                    {{ getFormulaTypeName(item.type) }}
-                  </div>
+                  <a-col :span="6">
+                    <span class="prose-sm text-gray-600">{{ item.text }}</span>
+                  </a-col>
+                  <a-col :span="18">
+                    <div v-if="item.type === 'function'" class="text-xs text-gray-500">
+                      {{ item.description }} <br /><br />
+                      Syntax: <br />
+                      {{ item.syntax }} <br /><br />
+                      Examples: <br />
+                      <div v-for="(example, idx) of item.examples" :key="idx">
+                        <div>({{ idx + 1 }}): {{ example }}</div>
+                      </div>
+                    </div>
+                    <div v-if="item.type === 'column'" class="float-right mr-5 -mt-2">
+                      <a-badge-ribbon :text="item.uidt" color="gray" />
+                    </div>
+                  </a-col>
                 </div>
               </template>
 
               <template #avatar>
-                <MdiFunction v-if="item.type === 'function'" class="text-lg" />
-
-                <MdiCalculator v-if="item.type === 'op'" class="text-lg" />
-
+                <mdi-function v-if="item.type === 'function'" class="text-lg" />
+                <mdi-calculator v-if="item.type === 'op'" class="text-lg" />
                 <component :is="item.icon" v-if="item.type === 'column'" class="text-lg" />
               </template>
             </a-list-item-meta>
           </a-list-item>
         </template>
       </a-list>
-    </a-drawer>
+    </div>
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
index 55e780efac..95d3c22668 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { Sketch } from '@ckpack/vue-color'
 import { useColumnCreateStoreOrThrow } from '#imports'
-import { enumColor, getMdiIcon } from '@/utils'
+import { getMdiIcon } from '@/utils'
 
 const { formState } = useColumnCreateStoreOrThrow()
 
@@ -29,9 +28,12 @@ const iconList = [
   },
 ]
 
-const advanced = ref(true)
-
-const picked = ref(formState.value.meta.color || enumColor.light[0])
+const picked = computed({
+  get: () => formState.value.meta.color,
+  set: (val) => {
+    formState.value.meta.color = val
+  },
+})
 
 // set default value
 formState.value.meta = {
@@ -94,17 +96,12 @@ watch(
       </a-form-item>
     </a-col>
   </a-row>
-  <a-row>
-    <a-card class="w-full shadow-lg mt-2" body-style="padding: 0px">
-      <a-collapse v-model:activeKey="advanced" accordion ghost expand-icon-position="right">
-        <a-collapse-panel key="1" header="Advanced" class="">
-          <a-button class="!bg-primary text-white w-full" @click="formState.meta.color = picked.hex"> Pick Color </a-button>
-          <div class="px-7 py-3">
-            <Sketch v-model="picked" />
-          </div>
-        </a-collapse-panel>
-      </a-collapse>
-    </a-card>
+  <a-row class="w-full justify-center">
+    <GeneralColorPicker
+      v-model="picked"
+      :row-size="8"
+      :colors="['#fcb401', '#faa307', '#f48c06', '#e85d04', '#dc2f02', '#d00000', '#9d0208', '#777']"
+    />
   </a-row>
 </template>
 
diff --git a/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue
new file mode 100644
index 0000000000..23ae9d21b4
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import Draggable from 'vuedraggable'
+import { UITypes } from 'nocodb-sdk'
+import { useColumnCreateStoreOrThrow } from '#imports'
+import { enumColor } from '@/utils'
+import MdiDragIcon from '~icons/mdi/drag-vertical'
+import MdiArrowDownDropCircle from '~icons/mdi/arrow-down-drop-circle'
+import MdiClose from '~icons/mdi/close'
+import MdiPlusIcon from '~icons/mdi/plus'
+
+const { formState, setAdditionalValidations } = useColumnCreateStoreOrThrow()
+
+let options = $ref<any[]>([])
+const colorMenus = $ref<any>({})
+const colors = $ref(enumColor.light)
+const inputs = ref()
+
+const validators = {
+  'colOptions.options': [
+    {
+      validator: (_: any, _opt: any) => {
+        return new Promise<void>((resolve, reject) => {
+          for (const opt of options) {
+            if (!opt.title.length) {
+              return reject(new Error("Select options can't be null"))
+            }
+            if (formState.value.uidt === UITypes.MultiSelect && opt.title.includes(',')) {
+              return reject(new Error("MultiSelect columns can't have commas(',')"))
+            }
+            if (options.filter((el) => el.title === opt.title).length !== 1) {
+              return reject(new Error("Select options can't have duplicates"))
+            }
+          }
+          resolve()
+        })
+      },
+    },
+  ],
+}
+
+setAdditionalValidations({
+  ...validators,
+})
+
+const getNextColor = () => {
+  let tempColor = colors[0]
+  if (options.length && options[options.length - 1].color) {
+    const lastColor = colors.indexOf(options[options.length - 1].color)
+    tempColor = colors[(lastColor + 1) % colors.length]
+  }
+  return tempColor
+}
+
+const addNewOption = () => {
+  const tempOption = {
+    title: '',
+    color: getNextColor(),
+  }
+  options.push(tempOption)
+}
+
+const removeOption = (index: number) => {
+  options.splice(index, 1)
+}
+
+onMounted(() => {
+  if (!formState.value.colOptions?.options) {
+    formState.value.colOptions = {
+      options: [],
+    }
+  }
+  options = formState.value.colOptions.options
+  // Support for older options
+  for (const op of options.filter((el) => el.order === null)) {
+    op.title = op.title.replace(/^'/, '').replace(/'$/, '')
+  }
+})
+
+// focus last created input
+watch(inputs, () => {
+  if (inputs.value?.$el) {
+    inputs.value.$el.focus()
+  }
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <Draggable :list="options" item-key="id" handle=".nc-child-draggable-icon">
+      <template #item="{ element, index }">
+        <div class="flex py-1 align-center">
+          <MdiDragIcon small class="nc-child-draggable-icon handle" />
+          <a-dropdown v-model:visible="colorMenus[index]" :trigger="['click']">
+            <template #overlay>
+              <GeneralColorPicker v-model="element.color" :pick-button="true" @update:model-value="colorMenus[index] = false" />
+            </template>
+            <MdiArrowDownDropCircle :style="{ 'font-size': '1.5em', 'color': element.color }" class="mr-2" />
+          </a-dropdown>
+          <a-input ref="inputs" v-model:value="element.title" class="caption" />
+          <MdiClose class="ml-2" :style="{ color: 'red' }" @click="removeOption(index)" />
+        </div>
+      </template>
+      <template #footer>
+        <a-button type="dashed" class="w-full caption mt-2" @click="addNewOption()">
+          <div class="flex align-center"><MdiPlusIcon /><span class="flex-auto">Add option</span></div>
+        </a-button>
+      </template>
+    </Draggable>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
index 29bc87909f..d227854a4f 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
@@ -2,7 +2,7 @@
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { inject, toRef } from 'vue'
-import { ColumnInj, MetaInj } from '~/context'
+import { ColumnInj, IsFormInj, MetaInj } from '~/context'
 import { useProvideColumnCreateStore } from '#imports'
 
 const props = defineProps<{ column: ColumnType & { meta: any }; required: boolean; hideMenu?: boolean }>()
@@ -10,6 +10,7 @@ const props = defineProps<{ column: ColumnType & { meta: any }; required: boolea
 const hideMenu = toRef(props, 'hideMenu')
 
 const meta = inject(MetaInj)
+const isForm = inject(IsFormInj, false)
 
 const column = toRef(props, 'column')
 
@@ -27,7 +28,7 @@ useProvideColumnCreateStore(meta as Ref<TableType>, column)
 
     <template v-if="!hideMenu">
       <div class="flex-1" />
-      <SmartsheetHeaderMenu />
+      <SmartsheetHeaderMenu v-if="!isForm" />
     </template>
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
index 3879cb06ab..f8f5634e7b 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { onClickOutside } from '@vueuse/core'
 import { Modal } from 'ant-design-vue'
 import { inject } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -56,12 +55,6 @@ function onVisibleChange() {
   // by clicking cancel button
   editColumnDropdown.value = true
 }
-
-const editOrAddCard = ref()
-
-onClickOutside(editOrAddCard, () => {
-  editColumnDropdown.value = false
-})
 </script>
 
 <template>
@@ -69,9 +62,9 @@ onClickOutside(editOrAddCard, () => {
     <span />
     <template #overlay>
       <SmartsheetColumnEditOrAdd
-        ref="editOrAddCard"
         :edit-column-dropdown="editColumnDropdown"
         @click.stop
+        @keydown.stop
         @cancel="editColumnDropdown = false"
       />
     </template>
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 24af159a90..c3c9b3e0f3 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
 import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType, TableType } from 'nocodb-sdk'
-import { toRef } from 'vue'
-import { $computed } from 'vue/macros'
 import type { Ref } from 'vue'
 import { useMetas } from '~/composables'
 import { ColumnInj, IsFormInj, MetaInj } from '~/context'
-import { provide, useProvideColumnCreateStore } from '#imports'
+import { provide, toRef, useMetas, useProvideColumnCreateStore } from '#imports'
 
 const props = defineProps<{ column: ColumnType & { meta: any }; hideMenu?: boolean; required: boolean }>()
 const column = toRef(props, 'column')
@@ -17,6 +15,7 @@ provide(ColumnInj, column)
 const { metas } = useMetas()
 
 const meta = inject(MetaInj)
+const isForm = inject(IsFormInj, false)
 
 const { isLookup, isBt, isRollup, isMm, isHm, isFormula } = useVirtualCell(column)
 
@@ -103,7 +102,7 @@ useProvideColumnCreateStore(meta as Ref<TableType>, column)
     <template v-if="!hideMenu">
       <v-spacer />
 
-      <SmartsheetHeaderMenu :virtual="true" />
+      <SmartsheetHeaderMenu v-if="!isForm" :virtual="true" />
     </template>
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index de3a6763a2..6e2451f4a7 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -3,7 +3,7 @@ import { UITypes } from 'nocodb-sdk'
 import type { ColumnType } from 'nocodb-sdk'
 import { provide, toRef } from 'vue'
 import { computed, useColumn, useDebounceFn, useVModel } from '#imports'
-import { ColumnInj, EditModeInj } from '~/context'
+import { ActiveCellInj, ColumnInj, EditModeInj } from '~/context'
 import { NavigateDir } from '~/lib'
 
 interface Props {
@@ -11,6 +11,7 @@ interface Props {
   modelValue: any
   editEnabled: boolean
   rowIndex: number
+  active?: boolean
 }
 
 const props = defineProps<Props>()
@@ -19,10 +20,14 @@ const emit = defineEmits(['update:modelValue', 'save', 'navigate', 'update:editE
 
 const column = toRef(props, 'column')
 
+const active = toRef(props, 'active', false)
+
 provide(ColumnInj, column)
 
 provide(EditModeInj, useVModel(props, 'editEnabled', emit))
 
+provide(ActiveCellInj, active)
+
 let changed = $ref(false)
 
 const syncValue = useDebounceFn(function () {
@@ -136,35 +141,3 @@ const syncAndNavigate = (dir: NavigateDir) => {
     <CellText v-else v-model="vModel" />
   </div>
 </template>
-
-<style scoped>
-textarea {
-  outline: none;
-}
-
-div {
-  width: 100%;
-  height: 100%;
-  color: var(--v-textColor-base);
-}
-
-.nc-hint {
-  font-size: 0.61rem;
-  color: grey;
-}
-
-.nc-cell {
-  @apply relative h-full;
-  width: inherit;
-  display: inherit;
-}
-
-.nc-locked-overlay {
-  position: absolute;
-  z-index: 2;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-}
-</style>
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 1f7e48bed6..178530aab6 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -1,16 +1,20 @@
 <script lang="ts" setup>
-import { onClickOutside, useEventListener } from '@vueuse/core'
 import type { ColumnType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
 import {
   inject,
+  onClickOutside,
   onMounted,
   provide,
+  reactive,
+  ref,
+  useEventListener,
   useGridViewColumnWidth,
   useProvideColumnCreateStore,
   useSmartsheetStoreOrThrow,
   useViewData,
+  watch,
 } from '#imports'
 import type { Row } from '~/composables'
 import {
@@ -25,23 +29,39 @@ import {
   ReloadViewDataHookInj,
 } from '~/context'
 import { NavigateDir } from '~/lib'
+import { enumColor } from '~/utils'
 
 const meta = inject(MetaInj)
+
 const view = inject(ActiveViewInj)
+
 // keep a root fields variable and will get modified from
 // fields menu and get used in grid and gallery
 const fields = inject(FieldsInj, ref([]))
+
 const isLocked = inject(IsLockedInj, false)
+
+const reloadViewDataHook = inject(ReloadViewDataHookInj)
+
 // todo: get from parent ( inject or use prop )
 const isPublicView = false
+
 const isView = false
 
 const selected = reactive<{ row: number | null; col: number | null }>({ row: null, col: null })
+
 let editEnabled = $ref(false)
-const { xWhere, isPkAvail } = useSmartsheetStoreOrThrow()
+
+const { xWhere, isPkAvail, cellRefs } = useSmartsheetStoreOrThrow()
+
 const addColumnDropdown = ref(false)
+
 const contextMenu = ref(false)
+
 const contextMenuTarget = ref(false)
+const expandedFormDlg = ref(false)
+const expandedFormRow = ref<Row>()
+const expandedFormRowState = ref<Record<string, any>>()
 
 const visibleColLength = $computed(() => fields.value?.length)
 
@@ -55,8 +75,11 @@ const {
   deleteRow,
   deleteSelectedRows,
   selectedAllRecords,
+  loadAggCommentsCount,
 } = useViewData(meta, view as any, xWhere)
+
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any)
+
 onMounted(loadGridViewColumns)
 
 provide(IsFormInj, false)
@@ -64,9 +87,9 @@ provide(IsGridInj, true)
 provide(PaginationDataInj, paginationData)
 provide(ChangePageInj, changePage)
 
-const reloadViewDataHook = inject(ReloadViewDataHookInj)
-reloadViewDataHook?.on(() => {
-  loadData()
+reloadViewDataHook?.on(async () => {
+  await loadData()
+  loadAggCommentsCount()
 })
 
 const selectCell = (row: number, col: number) => {
@@ -87,6 +110,7 @@ watch(
 const onresize = (colID: string, event: any) => {
   updateWidth(colID, event.detail)
 }
+
 const onXcResizing = (cn: string, event: any) => {
   resizingCol.value = cn
   resizingColWidth.value = event.detail
@@ -253,6 +277,12 @@ const onNavigate = (dir: NavigateDir) => {
       break
   }
 }
+
+const expandForm = (row: Row, state: Record<string, any>) => {
+  expandedFormRow.value = row
+  expandedFormRowState.value = state
+  expandedFormDlg.value = true
+}
 </script>
 
 <template>
@@ -263,7 +293,7 @@ const onNavigate = (dir: NavigateDir) => {
           <thead>
             <tr>
               <th>
-                <div class="flex align-center w-[80px]">
+                <div class="flex align-center w-[80px] px-1">
                   <div class="group-hover:hidden" :class="{ hidden: selectedAllRecords }">#</div>
                   <div
                     :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
@@ -297,67 +327,83 @@ const onNavigate = (dir: NavigateDir) => {
                   </div>
 
                   <template #overlay>
-                    <SmartsheetColumnEditOrAdd @click.stop @cancel="addColumnDropdown = false" />
+                    <SmartsheetColumnEditOrAdd @click.stop @keydown.stop @cancel="addColumnDropdown = false" />
                   </template>
                 </a-dropdown>
               </th>
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(row, rowIndex) of data" :key="rowIndex" class="nc-grid-row group">
-              <td key="row-index" class="caption nc-grid-cell group">
-                <div class="flex items-center w-[80px]">
-                  <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
-                  <div
-                    :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
-                    class="group-hover:flex w-full items-center justify-between p-1"
+            <SmartsheetRow v-for="(row, rowIndex) of data" :key="rowIndex" :row="row">
+              <template #default="{ state }">
+                <tr class="nc-grid-row group">
+                  <td key="row-index" class="caption nc-grid-cell">
+                    <div class="align-center flex w-[80px]">
+                      <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
+                      <div
+                        :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
+                        class="group-hover:flex w-full items-center justify-between p-1"
+                      >
+                        <a-checkbox v-model:checked="row.rowMeta.selected" />
+                        <span class="flex-1" />
+                        <span
+                          v-if="row.rowMeta?.commentCount"
+                          class="py-1 px-3 rounded-full text-xs"
+                          :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
+                          @click="expandForm(row, state)"
+                          >{{ row.rowMeta.commentCount }}</span
+                        >
+                        <div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
+                          <MdiArrowExpand
+                            class="select-none transform hover:(text-pink-500 scale-120)"
+                            @click="expandForm(row, state)"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td
+                    v-for="(columnObj, colIndex) of fields"
+                    :ref="cellRefs.set"
+                    :key="columnObj.id"
+                    class="cell relative cursor-pointer nc-grid-cell"
+                    :class="{
+                      active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
+                    }"
+                    :data-key="rowIndex + columnObj.id"
+                    :data-col="columnObj.id"
+                    :data-title="columnObj.title"
+                    @click="selectCell(rowIndex, colIndex)"
+                    @dblclick="makeEditable(row, columnObj)"
+                    @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
                   >
-                    <a-checkbox v-model:checked="row.rowMeta.selected" />
-                    <span class="flex-1" />
-                    <div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
-                      <MdiArrowExpand class="select-none transform hover:(text-pink-500 scale-120)" />
+                    <div class="w-full h-full">
+                      <SmartsheetVirtualCell
+                        v-if="isVirtualCol(columnObj)"
+                        v-model="row.row[columnObj.title]"
+                        :column="columnObj"
+                        :active="selected.col === colIndex && selected.row === rowIndex"
+                        :row="row"
+                        @navigate="onNavigate"
+                      />
+
+                      <SmartsheetCell
+                        v-else
+                        v-model="row.row[columnObj.title]"
+                        :column="columnObj"
+                        :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
+                        :row-index="rowIndex"
+                        :active="selected.col === colIndex && selected.row === rowIndex"
+                        @update:edit-enabled="editEnabled = false"
+                        @save="updateOrSaveRow(row, columnObj.title)"
+                        @navigate="onNavigate"
+                        @cancel="editEnabled = false"
+                      />
                     </div>
-                  </div>
-                </div>
-              </td>
-              <td
-                v-for="(columnObj, colIndex) of fields"
-                :key="rowIndex + columnObj.title"
-                class="cell relative cursor-pointer nc-grid-cell"
-                :class="{
-                  active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
-                }"
-                :data-key="rowIndex + columnObj.id"
-                :data-col="columnObj.id"
-                :data-title="columnObj.title"
-                @click="selectCell(rowIndex, colIndex)"
-                @dblclick="makeEditable(row, columnObj)"
-                @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
-              >
-                <div class="w-full h-full">
-                  <SmartsheetVirtualCell
-                    v-if="isVirtualCol(columnObj)"
-                    v-model="row.row[columnObj.title]"
-                    :column="columnObj"
-                    :active="selected.col === colIndex && selected.row === rowIndex"
-                    :row="row"
-                    @navigate="onNavigate"
-                  />
-
-                  <SmartsheetCell
-                    v-else
-                    v-model="row.row[columnObj.title]"
-                    :column="columnObj"
-                    :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
-                    :row-index="rowIndex"
-                    @update:edit-enabled="editEnabled = false"
-                    @save="updateOrSaveRow(row, columnObj.title)"
-                    @navigate="onNavigate"
-                    @cancel="editEnabled = false"
-                  />
-                </div>
-              </td>
-            </tr>
+                  </td>
+                </tr>
+              </template>
+            </SmartsheetRow>
 
             <tr v-if="!isLocked">
               <td
@@ -395,6 +441,14 @@ const onNavigate = (dir: NavigateDir) => {
     </div>
 
     <SmartsheetPagination />
+
+    <SmartsheetExpandedForm
+      v-if="expandedFormRow && expandedFormDlg"
+      v-model="expandedFormDlg"
+      :row="expandedFormRow"
+      :state="expandedFormRowState"
+      :meta="meta"
+    />
   </div>
 </template>
 
@@ -410,13 +464,11 @@ const onNavigate = (dir: NavigateDir) => {
     min-height: 41px !important;
     height: 41px !important;
     position: relative;
-    //padding: 0 5px;
+  }
 
-    & > div {
-      overflow: hidden;
-      @apply flex align-center h-auto;
-      padding: 0 5px;
-    }
+  td > div {
+    overflow: hidden;
+    @apply flex align-center h-auto px-1;
   }
 
   table,
diff --git a/packages/nc-gui-v2/components/smartsheet/Row.vue b/packages/nc-gui-v2/components/smartsheet/Row.vue
new file mode 100644
index 0000000000..efeea50ef1
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet/Row.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { Row } from '~/composables'
+import { useProvideSmartsheetRowStore, useSmartsheetStoreOrThrow } from '#imports'
+
+interface Props {
+  row: Row
+}
+
+const props = defineProps<Props>()
+const currentRow = toRef(props, 'row')
+
+const { meta } = useSmartsheetStoreOrThrow()
+const { isNew, state, syncLTARRefs } = useProvideSmartsheetRowStore(meta, currentRow)
+
+// on changing isNew(new record insert) status sync LTAR cell values
+watch(isNew, async (nextVal, prevVal) => {
+  if (prevVal && !nextVal) {
+    await syncLTARRefs(currentRow.value.row)
+    // update row values without invoking api
+    currentRow.value.row = { ...currentRow.value.row, ...state.value }
+    currentRow.value.oldRow = { ...currentRow.value.row, ...state.value }
+  }
+})
+</script>
+
+<template>
+  <slot :state="state" />
+</template>
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
new file mode 100644
index 0000000000..7aecd34155
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { nextTick, useExpandedFormStoreOrThrow } from '#imports'
+import { enumColor, timeAgo } from '~/utils'
+import MdiAccountIcon from '~icons/mdi/account-circle'
+
+const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment } =
+  useExpandedFormStoreOrThrow()
+
+const commentsWrapperEl = ref<HTMLDivElement>()
+
+await loadCommentsAndLogs()
+
+watch(
+  commentsAndLogs,
+  () => {
+    nextTick(() => {
+      if (commentsWrapperEl.value) commentsWrapperEl.value.scrollTop = commentsWrapperEl.value?.scrollHeight
+    })
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div class="h-full d-flex flex-column w-full">
+    <div ref="commentsWrapperEl" class="flex-grow-1 min-h-[100px] overflow-y-auto scrollbar-thin-primary p-2">
+      <v-skeleton-loader v-if="isCommentsLoading && !commentsAndLogs" type="list-item-avatar-two-line@8" />
+
+      <template v-else>
+        <div v-for="log of commentsAndLogs" :key="log.id" class="flex gap-1 text-xs">
+          <MdiAccountIcon class="row-span-2" :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '" />
+          <div class="flex-grow">
+            <p class="mb-1 caption edited-text text-[10px] text-gray">
+              {{ isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }}
+              {{ log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }}
+            </p>
+            <p
+              v-if="log.op_type === 'COMMENT'"
+              class="caption mb-0 nc-chip w-full min-h-20px"
+              :style="{ backgroundColor: enumColor.light[2] }"
+            >
+              {{ log.description }}
+            </p>
+
+            <p v-else v-dompurify-html="log.details" class="caption mb-0" style="word-break: break-all" />
+
+            <p class="time text-right text-[10px] mb-0">
+              {{ timeAgo(log.created_at) }}
+            </p>
+          </div>
+        </div>
+      </template>
+    </div>
+    <div class="border-1 my-2 w-full ml-6" />
+    <div class="p-0">
+      <div class="flex justify-center">
+        <a-checkbox v-model:checked="commentsOnly" @change="loadCommentsAndLogs"
+          ><span class="text-[11px] text-gray-500">Comments only</span>
+        </a-checkbox>
+      </div>
+      <div class="flex-shrink-1 mt-2 d-flex pl-4">
+        <a-input
+          v-model:value="comment"
+          class="!text-xs"
+          ghost
+          :class="{ focus: showborder }"
+          @focusin="showborder = true"
+          @focusout="showborder = false"
+          @keyup.enter.prevent="saveComment"
+        >
+          <template #addonBefore>
+            <div class="flex align-center">
+              <mdi-account-circle class="text-lg text-pink-300" small @click="saveComment" />
+            </div>
+          </template>
+          <template #suffix>
+            <mdi-keyboard-return v-if="comment" class="text-sm" small @click="saveComment" />
+          </template>
+        </a-input>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+:deep(.red.lighten-4) {
+  @apply bg-red-100;
+}
+
+:deep(.green.lighten-4) {
+  @apply bg-green-100;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
new file mode 100644
index 0000000000..8a9f6dc12c
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import {
+  computed,
+  useExpandedFormStoreOrThrow,
+  useSmartsheetRowStoreOrThrow,
+  useSmartsheetStoreOrThrow,
+  useUIPermission,
+} from '#imports'
+import MdiDoorOpen from '~icons/mdi/door-open'
+import MdiDoorClosed from '~icons/mdi/door-closed'
+
+const emit = defineEmits(['cancel'])
+const { meta } = useSmartsheetStoreOrThrow()
+const { commentsDrawer, primaryValue, save: _save } = useExpandedFormStoreOrThrow()
+const { isNew, syncLTARRefs } = useSmartsheetRowStoreOrThrow()
+const { isUIAllowed } = useUIPermission()
+
+const save = async () => {
+  if (isNew.value) {
+    const data = await _save()
+    await syncLTARRefs(data)
+  } else {
+    await _save()
+  }
+}
+
+const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : MdiDoorClosed))
+
+// todo: accept as a prop / inject
+const iconColor = '#1890ff'
+</script>
+
+<template>
+  <div class="flex p-2 align-center gap-2">
+    <h5 class="text-lg font-weight-medium flex align-center gap-1 mb-0">
+      <mdi-table-arrow-right :style="{ color: iconColor }" />
+
+      <template v-if="meta">
+        {{ meta.title }}
+      </template>
+      <template v-else>
+        {{ table }}
+      </template>
+      <template v-if="primaryValue">: {{ primaryValue }}</template>
+    </h5>
+    <div class="flex-grow" />
+    <mdi-reload class="cursor-pointer select-none" />
+    <component :is="drawerToggleIcon" class="cursor-pointer select-none" @click="commentsDrawer = !commentsDrawer" />
+    <a-button size="small" class="!text" @click="emit('cancel')">
+      <!-- Cancel -->
+      {{ $t('general.cancel') }}
+    </a-button>
+    <a-button size="small" :disabled="!isUIAllowed('tableRowUpdate')" type="primary" @click="save">
+      <!-- Save Row -->
+      {{ $t('activity.saveRow') }}
+    </a-button>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
new file mode 100644
index 0000000000..fdb11c7f0f
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import type { ColumnType, TableType } from 'nocodb-sdk'
+import { isVirtualCol } from 'nocodb-sdk'
+import Comments from './Comments.vue'
+import Header from './Header.vue'
+import {
+  computedInject,
+  provide,
+  toRef,
+  useNuxtApp,
+  useProvideExpandedFormStore,
+  useProvideSmartsheetStore,
+  useVModel,
+  watch,
+} from '#imports'
+import { NOCO } from '~/lib'
+import { extractPkFromRow } from '~/utils'
+import type { Row } from '~/composables'
+import { FieldsInj, IsFormInj, MetaInj } from '~/context'
+
+interface Props {
+  modelValue: string | null
+  row: Row
+  state?: Record<string, any> | null
+  meta: TableType
+  loadRow?: boolean
+  useMetaFields?: boolean
+}
+
+const props = defineProps<Props>()
+const emits = defineEmits(['update:modelValue'])
+const row = toRef(props, 'row')
+const state = toRef(props, 'state')
+const meta = toRef(props, 'meta')
+
+const _fields = computedInject(FieldsInj, (_fields) => {
+  if (props.useMetaFields) {
+    return meta.value.columns ?? []
+  }
+  return _fields?.value ?? []
+})
+
+provide(MetaInj, meta)
+
+const { commentsDrawer, changedColumns, state: rowState } = useProvideExpandedFormStore(meta, row)
+
+const { $api } = useNuxtApp()
+if (props.loadRow) {
+  const { project } = useProject()
+  row.value.row = await $api.dbTableRow.read(
+    NOCO,
+    project.value.id as string,
+    meta.value.title,
+    extractPkFromRow(row.value.row, meta.value.columns as ColumnType[]),
+  )
+  row.value.oldRow = { ...row.value.row }
+  row.value.rowMeta = {}
+}
+
+useProvideSmartsheetStore(ref({}) as any, meta)
+
+provide(IsFormInj, true)
+
+// accept as a prop
+// const row: Row = { row: {}, rowMeta: {}, oldRow: {} }
+
+watch(
+  state,
+  () => {
+    if (state.value) {
+      rowState.value = state.value
+    } else {
+      rowState.value = {}
+    }
+  },
+  { immediate: true },
+)
+
+const isExpanded = useVModel(props, 'modelValue', emits)
+</script>
+
+<template>
+  <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false">
+    <Header @cancel="isExpanded = false" />
+    <a-card class="!bg-gray-100">
+      <div class="flex h-full nc-form-wrapper items-stretch">
+        <div class="flex-grow overflow-auto scrollbar-thin-primary">
+          <div class="w-[500px] mx-auto">
+            <div v-for="col in fields" :key="col.title" class="mt-2">
+              <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
+              <SmartsheetHeaderCell v-else :column="col" />
+
+              <div class="!bg-white rounded px-1 min-h-[35px] flex align-center">
+                <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" />
+                <SmartsheetCell
+                  v-else
+                  v-model="row.row[col.title]"
+                  :column="col"
+                  :edit-enabled="true"
+                  @update:model-value="changedColumns.add(col.title)"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="nc-comments-drawer min-w-0 min-h-full max-h-full" :class="{ active: commentsDrawer }">
+          <div class="h-full">
+            <Comments v-if="commentsDrawer" />
+          </div>
+        </div>
+      </div>
+    </a-card>
+  </a-modal>
+</template>
+
+<style scoped lang="scss">
+:deep(input, select, textarea) {
+  @apply !bg-white;
+}
+
+:deep(.ant-modal-body) {
+  @apply !bg-gray-100;
+}
+
+.nc-comments-drawer {
+  @apply w-0 transition-width ease-in-out duration-200;
+  overflow: hidden;
+
+  &.active {
+    @apply w-[250px] border-left-1;
+  }
+}
+
+.nc-form-wrapper {
+  max-height: max(calc(90vh - 100px), 600px);
+  height: max-content !important;
+}
+</style>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
index 477ee96354..d7e1058a09 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
@@ -12,9 +12,11 @@ const emits = defineEmits<Emits>()
 const { $e } = useNuxtApp()
 
 const isView = ref(false)
+let showApiSnippet = $ref(false)
 
 function onApiSnippet() {
   // get API snippet
+  showApiSnippet = true
   $e('a:view:api-snippet')
 }
 
@@ -89,6 +91,7 @@ function onOpenModal(type: ViewTypes, title = '') {
       </a-tooltip>
     </a-menu-item>
 
+    <SmartsheetSidebarMenuApiSnippet v-model="showApiSnippet" />
     <div class="flex-auto justify-end flex flex-col gap-4 mt-4">
       <button
         class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded !bg-primary text-white transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease"
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
new file mode 100644
index 0000000000..4dfb0299a2
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import HTTPSnippet from 'httpsnippet'
+import { useClipboard } from '@vueuse/core'
+import { notification } from 'ant-design-vue'
+import { ActiveViewInj, MetaInj } from '~/context'
+
+const props = defineProps<Props>()
+
+const emits = defineEmits(['update:modelValue'])
+
+interface Props {
+  modelValue: boolean
+}
+
+const { project } = $(useProject())
+const { appInfo, token } = $(useGlobal())
+const meta = $(inject(MetaInj))
+const view = $(inject(ActiveViewInj))
+const { xWhere } = useSmartsheetStoreOrThrow()
+const { queryParams } = $(useViewData(meta, view as any, xWhere))
+const { copy } = useClipboard()
+
+let vModel = $(useVModel(props, 'modelValue', emits))
+
+const langs = [
+  {
+    name: 'shell',
+    clients: ['curl', 'wget'],
+  },
+  {
+    name: 'javascript',
+    clients: ['axios', 'fetch', 'jquery', 'xhr'],
+  },
+  {
+    name: 'node',
+    clients: ['axios', 'fetch', 'request', 'native', 'unirest'],
+  },
+  {
+    name: 'nocodb-sdk',
+    clients: ['javascript', 'node'],
+  },
+  {
+    name: 'php',
+  },
+  {
+    name: 'python',
+    clients: ['python3', 'requests'],
+  },
+  {
+    name: 'ruby',
+  },
+  {
+    name: 'java',
+  },
+  {
+    name: 'c',
+  },
+]
+
+const selectedClient = $ref<string | undefined>(langs[0].clients && langs[0].clients[0])
+
+const selectedLangName = $ref(langs[0].name)
+
+const apiUrl = $computed(
+  () =>
+    new URL(`/api/v1/db/data/noco/${project.id}/${meta.title}/views/${view.title}`, (appInfo && appInfo.ncSiteUrl) || '/').href,
+)
+
+const snippet = $computed(
+  () =>
+    new HTTPSnippet({
+      method: 'GET',
+      headers: [{ name: 'xc-auth', value: token as string, comment: 'JWT Auth token' }],
+      url: apiUrl,
+      queryString: Object.entries(queryParams || {}).map(([name, value]) => {
+        return {
+          name,
+          value: String(value),
+        }
+      }),
+    }),
+)
+
+const activeLang = $computed(() => langs.find((lang) => lang.name === selectedLangName))
+
+const code = $computed(() => {
+  if (activeLang?.name === 'nocodb-sdk') {
+    return `${selectedClient === 'node' ? 'const { Api } require("nocodb-sdk");' : 'import { Api } from "nocodb-sdk";'}
+const api = new Api({
+  baseURL: ${JSON.stringify(apiUrl)},
+  headers: {
+    "xc-auth": ${JSON.stringify(token as string)}
+  }
+})
+
+api.dbViewRow.list(
+  "noco",
+  ${JSON.stringify(project.title)},
+  ${JSON.stringify(meta.title)},
+  ${JSON.stringify(view.title)}, ${JSON.stringify(queryParams, null, 4)}).then(function (data) {
+  console.log(data);
+}).catch(function (error) {
+  console.error(error);
+});
+    `
+  }
+
+  return snippet.convert(activeLang?.name, selectedClient || (activeLang?.clients && activeLang?.clients[0]), {})
+})
+
+const onCopyToClipboard = () => {
+  copy(code)
+  notification.info({ message: 'Copied to clipboard' })
+}
+
+const afterVisibleChange = (visible: boolean) => {
+  vModel = visible
+}
+</script>
+
+<template>
+  <a-drawer
+    v-model:visible="vModel"
+    class="h-full relative"
+    style="color: red"
+    placement="right"
+    size="large"
+    :closable="false"
+    @after-visible-change="afterVisibleChange"
+  >
+    <div class="flex flex-col w-full h-full">
+      <a-typography-title :level="4">Code Snippet</a-typography-title>
+      <a-tabs v-model:activeKey="selectedLangName" class="!h-full">
+        <a-tab-pane v-for="item in langs" :key="item.name" class="!h-full">
+          <template #tab>
+            <div class="capitalize select-none">
+              {{ item.name }}
+            </div>
+          </template>
+          <monaco-editor
+            class="h-[60vh] border-1 border-gray-100 py-4 rounded-sm"
+            :model-value="code"
+            :read-only="true"
+            lang="typescript"
+            :validate="false"
+            :disable-deep-compare="true"
+          />
+          <div class="flex flex-row w-full justify-end space-x-3 mt-4 uppercase">
+            <a-button
+              v-t="[
+                'c:snippet:copy',
+                { client: activeLang?.clients && (selectedClient || activeLang?.clients[0]), lang: activeLang?.name },
+              ]"
+              type="primary"
+              @click="onCopyToClipboard"
+              >Copy to clipboard</a-button
+            >
+            <a-select v-if="activeLang" v-model:value="selectedClient" style="width: 6rem">
+              <a-select-option v-for="(client, i) in activeLang?.clients" :key="i" class="!w-full uppercase" :value="client">
+                {{ client }}
+              </a-select-option>
+            </a-select>
+          </div>
+
+          <div class="absolute bottom-4 flex flex-row justify-center w-[95%]">
+            <a
+              v-t="['e:hiring']"
+              class="px-4 py-2 ! rounded shadow"
+              href="https://angel.co/company/nocodb"
+              target="_blank"
+              @click.stop
+            >
+              🚀 We are Hiring! 🚀
+            </a>
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+  </a-drawer>
+</template>
+
+<style scoped></style>
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 330393b5aa..90eab444a0 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -3,7 +3,7 @@ import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListItems from './components/ListItems.vue'
-import { inject, ref, useProvideLTARStore } from '#imports'
+import { inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
 import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)
@@ -18,20 +18,39 @@ const active = false
 
 const listItemsDlg = ref(false)
 
+const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
+  isNew,
   reloadTrigger.trigger,
 )
 
 await loadRelatedTableMeta()
+
+const value = computed(() => {
+  if (cellValue?.value) {
+    return cellValue?.value
+  } else if (isNew.value) {
+    return state?.value?.[column?.value.title as string]
+  }
+  return null
+})
+
+const unlinkRef = async (rec: Record<string, any>) => {
+  if (isNew.value) {
+    removeLTARRef(rec, column?.value as ColumnType)
+  } else {
+    await unlink(rec)
+  }
+}
 </script>
 
 <template>
   <div class="flex w-full chips-wrapper align-center" :class="{ active }">
     <div class="chips d-flex align-center flex-grow">
-      <template v-if="cellValue">
-        <ItemChip :item="cellValue" :value="cellValue[relatedTablePrimaryValueProp]" @unlink="unlink(cellValue)" />
+      <template v-if="value">
+        <ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlinkRef(value)" />
       </template>
     </div>
     <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
@@ -40,8 +59,7 @@ await loadRelatedTableMeta()
         @click="listItemsDlg = true"
       />
     </div>
-
-    <ListItems v-model="listItemsDlg" />
+    <ListItems v-model="listItemsDlg" @attach-record="listItemsDlg = true" />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/Formula.vue b/packages/nc-gui-v2/components/virtual-cell/Formula.vue
index 5265409d61..2efc5928e4 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Formula.vue
@@ -20,7 +20,7 @@ const showEditFormulaWarningMessage = () => {
   }, 3000)
 }
 
-const result = computed(() => (isPg ? handleTZ(value) : value))
+const result = isPg ? handleTZ(value) : value
 
 const urls = computed(() => replaceUrlsWithLink(result.value))
 </script>
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 38598dcae0..ae69d0f2e9 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -4,8 +4,8 @@ import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
-import { computed, inject, ref, useProvideLTARStore } from '#imports'
-import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { computed, inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
+import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)!
 
@@ -15,20 +15,32 @@ const row = inject(RowInj)!
 
 const reloadTrigger = inject(ReloadViewDataHookInj)!
 
+const isForm = inject(IsFormInj)
+
 const listItemsDlg = ref(false)
 
 const childListDlg = ref(false)
 
+const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
+  isNew,
   reloadTrigger.trigger,
 )
-
 await loadRelatedTableMeta()
 
+const localCellValue = computed(() => {
+  if (cellValue?.value) {
+    return cellValue?.value
+  } else if (isNew.value) {
+    return state?.value?.[column?.value.title as string]
+  }
+  return []
+})
+
 const cells = computed(() =>
-  cellValue.value.reduce((acc: any[], curr: any) => {
+  localCellValue.value.reduce((acc: any[], curr: any) => {
     if (!relatedTablePrimaryValueProp.value) return acc
 
     const value = curr[relatedTablePrimaryValueProp.value]
@@ -38,26 +50,45 @@ const cells = computed(() =>
     return [...acc, { value, item: curr }]
   }, [] as any[]),
 )
+
+const unlinkRef = async (rec: Record<string, any>) => {
+  if (isNew.value) {
+    removeLTARRef(rec, column?.value as ColumnType)
+  } else {
+    await unlink(rec)
+  }
+}
 </script>
 
 <template>
   <div class="flex align-center items-center gap-1 w-full chips-wrapper">
-    <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
-      <template v-if="cellValue">
-        <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlink(cell.item)" />
-
-        <span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
-      </template>
-    </div>
-    <div class="flex-grow flex justify-end gap-1 min-h-[30px] align-center">
-      <MdiArrowExpand
-        class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
-        @click="childListDlg = true"
-      />
-      <MdiPlus class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
-    </div>
+    <template v-if="!isForm">
+      <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
+        <template v-if="cells">
+          <ItemChip v-for="(cell, i) of cells" :key="i" :item="ch" :value="cell.value" @unlink="unlinkRef(cell.item)" />
+          <span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true"
+            >more...
+          </span>
+        </template>
+      </div>
+      <div class="flex-grow flex justify-end gap-1 min-h-[30px] align-center">
+        <MdiArrowExpand
+          class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
+          @click="childListDlg = true"
+        />
+        <MdiPlus class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+      </div>
+    </template>
     <ListItems v-model="listItemsDlg" />
-    <ListChildItems v-model="childListDlg" @attach-record=";(childListDlg = false), (listItemsDlg = true)" />
+    <ListChildItems
+      v-model="childListDlg"
+      @attach-record="
+        () => {
+          childListDlg = false
+          listItemsDlg = true
+        }
+      "
+    />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index aa05726fc0..5275a8d3ba 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -4,8 +4,8 @@ import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
-import { computed, inject, ref, useProvideLTARStore } from '#imports'
-import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { computed, inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
+import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)!
 
@@ -15,20 +15,33 @@ const cellValue = inject(CellValueInj)!
 
 const reloadTrigger = inject(ReloadViewDataHookInj)!
 
+const isForm = inject(IsFormInj)
+
 const listItemsDlg = ref(false)
 
 const childListDlg = ref(false)
 
+const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
+  isNew,
   reloadTrigger.trigger,
 )
 
 await loadRelatedTableMeta()
 
+const localCellValue = computed(() => {
+  if (cellValue?.value) {
+    return cellValue?.value
+  } else if (isNew.value) {
+    return state?.value?.[column?.value.title as string]
+  }
+  return []
+})
+
 const cells = computed(() =>
-  cellValue.value.reduce((acc: any[], curr: any) => {
+  localCellValue.value.reduce((acc: any[], curr: any) => {
     if (!relatedTablePrimaryValueProp.value) return acc
 
     const value = curr[relatedTablePrimaryValueProp.value]
@@ -38,27 +51,45 @@ const cells = computed(() =>
     return [...acc, { value, item: curr }]
   }, [] as any[]),
 )
+
+const unlinkRef = async (rec: Record<string, any>) => {
+  if (isNew.value) {
+    removeLTARRef(rec, column?.value as ColumnType)
+  } else {
+    await unlink(rec)
+  }
+}
 </script>
 
 <template>
   <div class="flex align-center gap-1 w-full h-full chips-wrapper">
-    <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
-      <template v-if="cellValue">
-        <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlink(cell.item)" />
+    <template v-if="!isForm">
+      <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
+        <template v-if="cells">
+          <ItemChip v-for="(cell, i) of cells" :key="i" :item="ch" :value="cell.value" @unlink="unlinkRef(cell.item)" />
 
-        <span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
-      </template>
-    </div>
+          <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
+        </template>
+      </div>
 
-    <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
-      <MdiArrowExpand class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
+      <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
+        <MdiArrowExpand class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
 
-      <MdiPlus class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
-    </div>
+        <MdiPlus class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+      </div>
+    </template>
 
     <ListItems v-model="listItemsDlg" />
 
-    <ListChildItems v-model="childListDlg" @attach-record=";(childListDlg = false), (listItemsDlg = true)" />
+    <ListChildItems
+      v-model="childListDlg"
+      @attach-record="
+        () => {
+          childListDlg = false
+          listItemsDlg = true
+        }
+      "
+    />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
index 5364d09b76..e7f0a5a7f7 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -1,23 +1,44 @@
 <script setup lang="ts">
-import { ActiveCellInj, ReadonlyInj } from '~/context'
-import MdiCloseThickIcon from '~icons/mdi/close-thick'
+import { useLTARStoreOrThrow } from '#imports'
+import { ActiveCellInj, IsFormInj, ReadonlyInj } from '~/context'
 
 interface Props {
   value?: string | number | boolean
+  item?: any
 }
 
-const { value } = defineProps<Props>()
+const { value, item } = defineProps<Props>()
+
 const emit = defineEmits(['unlink'])
+
+const { relatedTableMeta } = useLTARStoreOrThrow()
+
 const readonly = inject(ReadonlyInj, false)
 const active = inject(ActiveCellInj, ref(false))
+const isForm = inject(IsFormInj)
+
+const expandedFormDlg = ref(false)
 </script>
 
 <template>
-  <div class="group py-1 px-2 flex align-center gap-1 bg-gray-200/50 hover:bg-gray-200 rounded-[20px]" :class="{ active }">
+  <div
+    class="group py-1 px-2 flex align-center gap-1 bg-gray-200/50 hover:bg-gray-200 rounded-[20px]"
+    :class="{ active }"
+    @click="expandedFormDlg = true"
+  >
     <span class="name">{{ value }}</span>
-    <div v-show="active" v-if="!readonly" class="flex align-center">
-      <MdiCloseThickIcon class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click="emit('unlink')" />
+    <div v-show="active || isForm" v-if="!readonly" class="flex align-center">
+      <MdiCloseThick class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click.stop="emit('unlink')" />
     </div>
+
+    <SmartsheetExpandedForm
+      v-if="expandedFormDlg"
+      v-model="expandedFormDlg"
+      :row="{ row: item }"
+      :meta="relatedTableMeta"
+      load-row
+      use-meta-fields
+    />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
index 7064741c0a..b23650caa3 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -1,11 +1,15 @@
 <script lang="ts" setup>
-import { useLTARStoreOrThrow, useVModel, watch } from '#imports'
+import { Modal } from 'ant-design-vue'
+import type { ColumnType } from 'nocodb-sdk'
+import { useLTARStoreOrThrow, useSmartsheetRowStoreOrThrow, useVModel, watch } from '#imports'
+import { ColumnInj, IsFormInj } from '~/context'
 
 const props = defineProps<{ modelValue?: boolean }>()
-
 const emit = defineEmits(['update:modelValue', 'attachRecord'])
 
 const vModel = useVModel(props, 'modelValue', emit)
+const isForm = inject(IsFormInj, false)
+const column = inject(ColumnInj)
 
 const {
   childrenList,
@@ -16,40 +20,66 @@ const {
   relatedTablePrimaryValueProp,
   unlink,
   getRelatedTableRowId,
+  relatedTableMeta,
 } = useLTARStoreOrThrow()
 
-watch(vModel, (nextVal) => {
-  if (nextVal) {
+const { isNew, state, removeLTARRef } = useSmartsheetRowStoreOrThrow()
+
+watch([vModel, isForm], (nextVal) => {
+  if (nextVal[0] || nextVal[1]) {
     loadChildrenList()
   }
 })
 
 const unlinkRow = async (row: Record<string, any>) => {
-  await unlink(row)
-
-  await loadChildrenList()
+  if (isNew.value) {
+    removeLTARRef(row, column?.value as ColumnType)
+  } else {
+    await unlink(row)
+    await loadChildrenList()
+  }
 }
+
+const container = computed(() =>
+  isForm
+    ? h('div', {
+        class: 'w-full p-2',
+      })
+    : Modal,
+)
+
+const expandedFormDlg = ref(false)
+const expandedFormRow = ref()
 </script>
 
 <template>
-  <a-modal v-model:visible="vModel" :footer="null" title="Child list">
+  <component :is="container" v-model:visible="vModel" :footer="null" title="Child list">
     <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col">
       <div class="flex mb-4 align-center gap-2">
         <div class="flex-1" />
 
-        <MdiReload class="cursor-pointer text-gray-500" @click="loadChildrenList" />
+        <MdiReload v-if="!isForm" class="cursor-pointer text-gray-500" @click="loadChildrenList" />
 
-        <a-button type="primary" size="small" @click="emit('attachRecord')">
+        <a-button type="primary" class="!text-xs" size="small" @click="emit('attachRecord')">
           <div class="flex align-center gap-1">
-            <!-- todo: row is not defined? @click="unlinkRow(row)" -->
-            <MdiLinkVariantRemove class="text-xs text-white" />
+            <MdiLinkVariantRemove class="text-xs text-white" @click="unlinkRow(row)" />
             Link to '{{ meta.title }}'
           </div>
         </a-button>
       </div>
-      <template v-if="childrenList?.pageInfo?.totalRows">
+      <template v-if="(isNew && state?.[column?.title]?.length) || childrenList?.pageInfo?.totalRows">
         <div class="flex-1 overflow-auto min-h-0">
-          <a-card v-for="(row, i) of childrenList?.list ?? []" :key="i" class="ma-2 hover:(!bg-gray-200/50 shadow-md)">
+          <a-card
+            v-for="(row, i) of childrenList?.list ?? state?.[column?.title] ?? []"
+            :key="i"
+            class="ma-2 hover:(!bg-gray-200/50 shadow-md)"
+            @click="
+              () => {
+                expandedFormRow = row
+                expandedFormDlg = true
+              }
+            "
+          >
             <div class="flex align-center">
               <div class="flex-grow overflow-hidden min-w-0">
                 {{ row[relatedTablePrimaryValueProp]
@@ -57,14 +87,20 @@ const unlinkRow = async (row: Record<string, any>) => {
               </div>
               <div class="flex-1"></div>
               <div class="flex gap-2">
-                <MdiLinkVariantRemove class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click="unlinkRow(row)" />
-                <MdiDeleteOutline class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click="deleteRelatedRow(row)" />
+                <MdiLinkVariantRemove
+                  class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
+                  @click.stop="unlinkRow(row)"
+                />
+                <MdiDeleteOutline
+                  class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
+                  @click.stop="deleteRelatedRow(row)"
+                />
               </div>
             </div>
           </a-card>
         </div>
         <a-pagination
-          v-if="childrenList?.pageInfo"
+          v-if="!isNew && childrenList?.pageInfo"
           v-model:current="childrenListPagination.page"
           v-model:page-size="childrenListPagination.size"
           class="mt-2 mx-auto"
@@ -75,7 +111,16 @@ const unlinkRow = async (row: Record<string, any>) => {
       </template>
       <a-empty v-else class="my-10" />
     </div>
-  </a-modal>
+
+    <SmartsheetExpandedForm
+      v-if="expandedFormDlg && expandedFormRow"
+      v-model="expandedFormDlg"
+      :row="{ row: expandedFormRow }"
+      :meta="relatedTableMeta"
+      load-row
+      use-meta-fields
+    />
+  </component>
 </template>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index 82ae0ae503..0bda4eb1d0 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -1,5 +1,8 @@
 <script lang="ts" setup>
-import { useLTARStoreOrThrow, useVModel, watch } from '#imports'
+import { RelationTypes, UITypes } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
+import { computed, useLTARStoreOrThrow, useSmartsheetRowStoreOrThrow, useVModel } from '#imports'
+import { ColumnInj } from '~/context'
 
 const props = defineProps<{ modelValue: boolean }>()
 
@@ -7,6 +10,8 @@ const emit = defineEmits(['update:modelValue', 'addNewRecord'])
 
 const vModel = useVModel(props, 'modelValue', emit)
 
+const column = inject(ColumnInj)
+
 const {
   childrenExcludedList,
   loadChildrenExcludedList,
@@ -14,18 +19,62 @@ const {
   relatedTablePrimaryValueProp,
   link,
   getRelatedTableRowId,
+  relatedTableMeta,
+  meta,
+  row,
 } = useLTARStoreOrThrow()
 
-watch(vModel, (nextVal) => {
-  if (nextVal) {
-    loadChildrenExcludedList()
-  }
-})
+const { addLTARRef, isNew } = useSmartsheetRowStoreOrThrow()
 
 const linkRow = async (row: Record<string, any>) => {
-  await link(row)
+  if (isNew.value) {
+    addLTARRef(row, column?.value as ColumnType)
+  } else {
+    await link(row)
+  }
   vModel.value = false
 }
+
+watch(vModel, () => {
+  if (vModel.value) {
+    loadChildrenExcludedList()
+  }
+})
+
+const expandedFormDlg = ref(false)
+
+/** populate initial state for a new row which is parent/child of current record */
+const newRowState = computed(() => {
+  const colOpt = (column?.value as ColumnType)?.colOptions as LinkToAnotherRecordType
+  const colInRelatedTable: ColumnType | undefined = relatedTableMeta?.value?.columns?.find((col) => {
+    if (col.uidt !== UITypes.LinkToAnotherRecord) return false
+    const colOpt1 = col?.colOptions as LinkToAnotherRecordType
+    if (colOpt1?.fk_related_model_id !== meta.value.id) return false
+
+    if (colOpt.type === RelationTypes.MANY_TO_MANY && colOpt1?.type === RelationTypes.MANY_TO_MANY) {
+      return (
+        colOpt.fk_parent_column_id === colOpt1.fk_child_column_id && colOpt.fk_child_column_id === colOpt1.fk_parent_column_id
+      )
+    } else {
+      return (
+        colOpt.fk_parent_column_id === colOpt1.fk_parent_column_id && colOpt.fk_child_column_id === colOpt1.fk_child_column_id
+      )
+    }
+  })
+  if (!colInRelatedTable) return {}
+  const relatedTableColOpt = colInRelatedTable?.colOptions as LinkToAnotherRecordType
+  if (!relatedTableColOpt) return {}
+
+  if (relatedTableColOpt.type === RelationTypes.BELONGS_TO) {
+    return {
+      [colInRelatedTable.title as string]: row?.value?.row,
+    }
+  } else {
+    return {
+      [colInRelatedTable.title as string]: row?.value && [row.value.row],
+    }
+  }
+})
 </script>
 
 <template>
@@ -40,19 +89,19 @@ const linkRow = async (row: Record<string, any>) => {
         ></a-input>
         <div class="flex-1" />
         <MdiReload class="cursor-pointer text-gray-500" @click="loadChildrenExcludedList" />
-        <a-button type="primary" size="small" @click="emit('addNewRecord')">Add new record</a-button>
+        <a-button type="primary" size="small" @click="expandedFormDlg = true">Add new record</a-button>
       </div>
       <template v-if="childrenExcludedList?.pageInfo?.totalRows">
         <div class="flex-1 overflow-auto min-h-0">
           <a-card
-            v-for="(row, i) in childrenExcludedList?.list ?? []"
+            v-for="(refRow, i) in childrenExcludedList?.list ?? []"
             :key="i"
             class="ma-2 cursor-pointer hover:(!bg-gray-200/50 shadow-md) group"
-            @click="linkRow(row)"
+            @click="linkRow(refRow)"
           >
-            {{ row[relatedTablePrimaryValueProp]
+            {{ refRow[relatedTablePrimaryValueProp]
             }}<span class="hidden group-hover:(inline) text-gray-400 text-[11px] ml-1"
-              >(Primary key : {{ getRelatedTableRowId(row) }})</span
+              >(Primary key : {{ getRelatedTableRowId(refRow) }})</span
             >
           </a-card>
         </div>
@@ -67,6 +116,15 @@ const linkRow = async (row: Record<string, any>) => {
         />
       </template>
       <a-empty v-else class="my-10" />
+
+      <SmartsheetExpandedForm
+        v-if="expandedFormDlg"
+        v-model="expandedFormDlg"
+        :meta="relatedTableMeta"
+        :row="{ row: {}, oldRow: {}, rowMeta: { new: true } }"
+        :state="newRowState"
+        use-meta-fields
+      />
     </div>
   </a-modal>
 </template>
diff --git a/packages/nc-gui-v2/composables/index.ts b/packages/nc-gui-v2/composables/index.ts
index 6ab481b787..b8a5c6339d 100644
--- a/packages/nc-gui-v2/composables/index.ts
+++ b/packages/nc-gui-v2/composables/index.ts
@@ -20,3 +20,4 @@ export * from './useVirtualCell'
 export * from './useColumnCreateStore'
 export * from './useSmartsheetStore'
 export * from './useLTARStore'
+export * from './useExpandedFormStore'
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
new file mode 100644
index 0000000000..6c78f9f150
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -0,0 +1,209 @@
+import { UITypes } from 'nocodb-sdk'
+import type { ColumnType, TableType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+import { message, notification } from 'ant-design-vue'
+import dayjs from 'dayjs'
+import { useApi, useInjectionState, useProject, useProvideSmartsheetRowStore } from '#imports'
+import { NOCO } from '~/lib'
+import { useNuxtApp } from '#app'
+import type { Row } from '~/composables/useViewData'
+import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
+
+const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>) => {
+  const { $e, $state, $api } = useNuxtApp()
+  const { api, isLoading: isCommentsLoading, error: commentsError } = useApi()
+  // { useGlobalInstance: true },
+  // state
+  const commentsOnly = ref(false)
+  const commentsAndLogs = ref([])
+  const comment = ref('')
+  const commentsDrawer = ref(false)
+  const changedColumns = ref(new Set<string>())
+  const { project } = useProject()
+  const rowStore = useProvideSmartsheetRowStore(meta, row)
+  // todo
+  // const activeView = inject(ActiveViewInj)
+
+  // const { updateOrSaveRow, insertRow } = useViewData(meta, activeView as any)
+
+  // getters
+  const primaryValue = computed(() => {
+    if (row?.value?.row) {
+      const col = meta?.value?.columns?.find((c) => c.pv)
+      if (!col) {
+        return
+      }
+      const value = row.value.row?.[col.title as string]
+      const uidt = col.uidt
+      if (uidt === UITypes.Date) {
+        return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format('YYYY-MM-DD')
+      } else if (uidt === UITypes.DateTime) {
+        return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format('YYYY-MM-DD HH:mm')
+      } else if (uidt === UITypes.Time) {
+        let dateTime = dayjs(value)
+        if (!dateTime.isValid()) {
+          dateTime = dayjs(value, 'HH:mm:ss')
+        }
+        if (!dateTime.isValid()) {
+          dateTime = dayjs(`1999-01-01 ${value}`)
+        }
+        if (!dateTime.isValid()) {
+          return value
+        }
+        return dateTime.format('HH:mm:ss')
+      }
+      return value
+    }
+  })
+
+  // actions
+  const loadCommentsAndLogs = async () => {
+    if (!row.value) return
+    const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
+    if (!rowId) return
+    commentsAndLogs.value =
+      (
+        await api.utils.commentList({
+          row_id: rowId,
+          fk_model_id: meta.value.id as string,
+          comments_only: commentsOnly.value,
+        })
+      )?.reverse?.() || []
+  }
+
+  const isYou = (email: string) => {
+    return $state.user?.value?.email === email
+  }
+
+  const saveComment = async () => {
+    try {
+      if (!row.value || !comment.value) return
+      const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
+      if (!rowId) return
+
+      await api.utils.commentRow({
+        fk_model_id: meta.value?.id as string,
+        row_id: rowId,
+        // todo: swagger type correction
+        description: comment.value,
+      } as any)
+
+      comment.value = ''
+      message.success('Comment added successfully')
+      await loadCommentsAndLogs()
+    } catch (e: any) {
+      message.error(e.message)
+    }
+
+    $e('a:row-expand:comment')
+  }
+
+  const save = async () => {
+    let data
+    try {
+      // todo:
+      // if (this.presetValues) {
+      //   // cater presetValues
+      //   for (const k in this.presetValues) {
+      //     this.$set(this.changedColumns, k, true);
+      //   }
+      // }
+
+      const updateOrInsertObj = [...changedColumns.value].reduce((obj, col) => {
+        obj[col] = row.value.row[col]
+        return obj
+      }, {} as Record<string, any>)
+
+      if (row.value.rowMeta.new) {
+        data = await $api.dbTableRow.create('noco', project.value.title as string, meta.value.title, updateOrInsertObj)
+
+        /* todo:
+           // save hasmany and manytomany relations from local state
+            if (this.$refs.virtual && Array.isArray(this.$refs.virtual)) {
+              for (const vcell of this.$refs.virtual) {
+                if (vcell.save) {
+                  await vcell.save(this.localState);
+                }
+              }
+            } */
+        row.value = {
+          row: data,
+          rowMeta: {},
+          oldRow: { ...data },
+        }
+
+        /// todo:
+        // await this.reload();
+      } else if (Object.keys(updateOrInsertObj).length) {
+        const id = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
+
+        if (!id) {
+          return message.info("Update not allowed for table which doesn't have primary Key")
+        }
+        await $api.dbTableRow.update(NOCO, project.value.title as string, meta.value.title, id, updateOrInsertObj)
+        for (const key of Object.keys(updateOrInsertObj)) {
+          // audit
+          $api.utils
+            .auditRowUpdate(id, {
+              fk_model_id: meta.value.id,
+              column_name: key,
+              row_id: id,
+              value: getPlainText(updateOrInsertObj[key]),
+              prev_value: getPlainText(row.value.oldRow[key]),
+            })
+            .then(() => {})
+        }
+      } else {
+        return message.info('No columns to update')
+      }
+
+      // this.$emit('update:oldRow', { ...this.localState });
+      // this.changedColumns = {};
+      // this.$emit('input', this.localState);
+      // this.$emit('update:isNew', false);
+
+      notification.success({
+        message: `${primaryValue.value || 'Row'} updated successfully.`,
+        // position: 'bottom-right',
+      })
+
+      changedColumns.value = new Set()
+    } catch (e: any) {
+      notification.error({ message: `Failed to update row`, description: await extractSdkResponseErrorMsg(e) })
+    }
+    $e('a:row-expand:add')
+    return data
+  }
+
+  return {
+    ...rowStore,
+    commentsOnly,
+    loadCommentsAndLogs,
+    commentsAndLogs,
+    isCommentsLoading,
+    commentsError,
+    saveComment,
+    comment,
+    isYou,
+    commentsDrawer,
+    row,
+    primaryValue,
+    save,
+    changedColumns,
+  }
+}, 'expanded-form-store')
+
+export { useProvideExpandedFormStore }
+
+export function useExpandedFormStoreOrThrow() {
+  const expandedFormStore = useExpandedFormStore()
+  if (expandedFormStore == null) throw new Error('Please call `useExpandedFormStore` on the appropriate parent component')
+  return expandedFormStore
+}
+
+// todo: move to utils
+function getPlainText(htmlString: string) {
+  const div = document.createElement('div')
+  div.textContent = htmlString || ''
+  return div.innerHTML
+}
diff --git a/packages/nc-gui-v2/composables/useGlobal/state.ts b/packages/nc-gui-v2/composables/useGlobal/state.ts
index 5de2635183..fdc8c4da9a 100644
--- a/packages/nc-gui-v2/composables/useGlobal/state.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/state.ts
@@ -1,7 +1,7 @@
 import { usePreferredLanguages, useStorage } from '@vueuse/core'
 import { useJwt } from '@vueuse/integrations/useJwt'
 import type { JwtPayload } from 'jwt-decode'
-import type { State, StoredState } from './types'
+import type { AppInfo, State, StoredState } from './types'
 import { computed, ref, toRefs, useCounter, useNuxtApp, useTimestamp } from '#imports'
 import type { User } from '~/lib'
 
@@ -71,6 +71,8 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     set: (val) => (storage.value.token = val),
   })
 
+  const appInfo = ref<AppInfo>({ ncSiteUrl: 'localhost:8080' })
+
   /** reactive token payload */
   const { payload } = useJwt<JwtPayload & User>(token)
 
@@ -88,5 +90,6 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     timestamp,
     runningRequests,
     error,
+    appInfo,
   }
 }
diff --git a/packages/nc-gui-v2/composables/useGlobal/types.ts b/packages/nc-gui-v2/composables/useGlobal/types.ts
index 8d0823a47c..7f9e54f94e 100644
--- a/packages/nc-gui-v2/composables/useGlobal/types.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/types.ts
@@ -11,6 +11,10 @@ export interface FeedbackForm {
   lastFormPollDate?: string
 }
 
+export interface AppInfo {
+  ncSiteUrl: string
+}
+
 export interface StoredState {
   token: string | null
   user: User | null
@@ -27,6 +31,7 @@ export type State = ToRefs<Omit<StoredState, 'token'>> & {
   timestamp: Ref<number>
   runningRequests: ReturnType<typeof useCounter>
   error: Ref<any>
+  appInfo: Ref<AppInfo>
 }
 
 export interface Getters {
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index 327c01d335..4a77b149de 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -1,5 +1,5 @@
 import type { ColumnType, LinkToAnotherRecordType, PaginatedType, TableType } from 'nocodb-sdk'
-import type { Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 import { Modal, notification } from 'ant-design-vue'
 import { useInjectionState, useMetas, useProject } from '#imports'
 import { NOCO } from '~/lib'
@@ -13,7 +13,7 @@ interface DataApiResponse {
 
 /** Store for managing Link to another cells */
 const [useProvideLTARStore, useLTARStore] = useInjectionState(
-  (column: Ref<Required<ColumnType>>, row?: Ref<Row>, reloadData = () => {}) => {
+  (column: Ref<Required<ColumnType>>, row?: Ref<Row>, isNewRow: ComputedRef<boolean> | Ref<boolean>, reloadData = () => {}) => {
     // state
     const { metas, getMeta } = useMetas()
     const { project } = useProject()
@@ -61,28 +61,49 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
     const relatedTablePrimaryValueProp = computed(() => {
       return (relatedTableMeta?.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
     })
+
+    const relatedTablePrimaryKeyProps = computed(() => {
+      return relatedTableMeta?.value?.columns?.filter((c) => c.pk)?.map((c) => c.title) ?? []
+    })
     const primaryValueProp = computed(() => {
       return (meta?.value?.columns?.find((c: Required<ColumnType>) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
     })
 
     const loadChildrenExcludedList = async () => {
       try {
-        childrenExcludedList.value = await $api.dbTableRow.nestedChildrenExcludedList(
-          NOCO,
-          project.value.id as string,
-          meta.value.id,
-          rowId.value,
-          colOptions.type as 'mm' | 'hm',
-          column?.value?.title,
-          // todo: swagger type correction
-          {
-            limit: childrenExcludedListPagination.size,
-            offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
-            where:
-              childrenExcludedListPagination.query &&
-              `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
-          } as any,
-        )
+        /** if new row load all records */
+        if (isNewRow?.value) {
+          childrenExcludedList.value = await $api.dbTableRow.list(
+            NOCO,
+            project.value.id as string,
+            relatedTableMeta?.value?.id as string,
+            {
+              limit: childrenExcludedListPagination.size,
+              offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
+              where:
+                childrenExcludedListPagination.query &&
+                `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
+              fields: [relatedTablePrimaryValueProp.value, ...relatedTablePrimaryKeyProps.value],
+            } as any,
+          )
+        } else {
+          childrenExcludedList.value = await $api.dbTableRow.nestedChildrenExcludedList(
+            NOCO,
+            project.value.id as string,
+            meta.value.id,
+            rowId.value,
+            colOptions.type as 'mm' | 'hm',
+            column?.value?.title,
+            // todo: swagger type correction
+            {
+              limit: childrenExcludedListPagination.size,
+              offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
+              where:
+                childrenExcludedListPagination.query &&
+                `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
+            } as any,
+          )
+        }
       } catch (e: any) {
         notification.error({
           message: 'Failed to load list',
@@ -93,6 +114,8 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
 
     const loadChildrenList = async () => {
       try {
+        if (colOptions.type === 'bt') return
+
         childrenList.value = await $api.dbTableRow.nestedList(
           NOCO,
           project.value.id as string,
@@ -198,6 +221,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           column?.value?.title,
           getRelatedTableRowId(row) as string,
         )
+        await loadChildrenList()
       } catch (e: any) {
         notification.error({
           message: 'Linking failed',
diff --git a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
new file mode 100644
index 0000000000..c07b52ae79
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
@@ -0,0 +1,105 @@
+import { notification } from 'ant-design-vue'
+import { UITypes } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, RelationTypes, TableType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+import { useNuxtApp } from '#app'
+import { useInjectionState, useMetas, useProject, useVirtualCell } from '#imports'
+import type { Row } from '~/composables/useViewData'
+import { NOCO } from '~/lib'
+import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
+
+const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>) => {
+  const { $api } = useNuxtApp()
+  const { project } = useProject()
+  const { metas } = useMetas()
+
+  // state
+  const state = ref<Record<string, Record<string, any> | Record<string, any>[] | null>>({})
+
+  // getters
+  const isNew = computed(() => row.value?.rowMeta?.new ?? false)
+
+  // actions
+  const addLTARRef = async (value: Record<string, any>, column: ColumnType) => {
+    const { isHm, isMm, isBt } = $(useVirtualCell(ref(column)))
+    if (isHm || isMm) {
+      state.value[column.title!] = state.value[column.title!] || []
+      state.value[column.title!]!.push(value)
+    } else if (isBt) {
+      state.value[column.title!] = value
+    }
+  }
+
+  // actions
+  const removeLTARRef = async (value: Record<string, any>, column: ColumnType) => {
+    const { isHm, isMm, isBt } = $(useVirtualCell(ref(column)))
+    if (isHm || isMm) {
+      state.value[column.title!]?.splice(state.value[column.title!]?.indexOf(value), 1)
+    } else if (isBt) {
+      state.value[column.title!] = null
+    }
+  }
+
+  const linkRecord = async (rowId: string, relatedRowId: string, column: ColumnType, type: RelationTypes) => {
+    try {
+      await $api.dbTableRow.nestedAdd(
+        NOCO,
+        project.value.title as string,
+        meta.value.title as string,
+        rowId,
+        type,
+        column.title as string,
+        relatedRowId,
+      )
+    } catch (e: any) {
+      notification.error({
+        message: 'Linking failed',
+        description: await extractSdkResponseErrorMsg(e),
+      })
+    }
+  }
+
+  /** sync LTAR relations kept in local state */
+  const syncLTARRefs = async (row: Record<string, any>) => {
+    const id = extractPkFromRow(row, meta.value.columns as ColumnType[])
+    for (const column of meta?.value?.columns ?? []) {
+      if (column.uidt !== UITypes.LinkToAnotherRecord) continue
+      const colOptions = column?.colOptions as LinkToAnotherRecordType
+
+      const { isHm, isMm, isBt } = $(useVirtualCell(ref(column)))
+      const relatedTableMeta = metas.value?.[colOptions?.fk_related_model_id as string]
+
+      if (isHm || isMm) {
+        const relatedRows = (state.value?.[column.title!] ?? []) as Record<string, any>[]
+        for (const relatedRow of relatedRows) {
+          await linkRecord(id, extractPkFromRow(relatedRow, relatedTableMeta.columns as ColumnType[]), column, colOptions.type)
+        }
+      } else if (isBt && state?.value?.[column.title!]) {
+        await linkRecord(
+          id,
+          extractPkFromRow(state.value?.[column.title!] as Record<string, any>, relatedTableMeta.columns as ColumnType[]),
+          column,
+          colOptions.type,
+        )
+      }
+    }
+  }
+
+  return {
+    row,
+    state,
+    isNew,
+    // todo: use better name
+    addLTARRef,
+    removeLTARRef,
+    syncLTARRefs,
+  }
+}, 'smartsheet-row-store')
+
+export { useProvideSmartsheetRowStore }
+
+export function useSmartsheetRowStoreOrThrow() {
+  const smartsheetRowStore = useSmartsheetRowStore()
+  if (smartsheetRowStore == null) throw new Error('Please call `useSmartsheetRowStore` on the appropriate parent component')
+  return smartsheetRowStore
+}
diff --git a/packages/nc-gui-v2/composables/useSmartsheetStore.ts b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
index 87f999c6f5..f75856e3c6 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
@@ -1,15 +1,14 @@
-import { computed } from '@vue/reactivity'
 import { ViewTypes } from 'nocodb-sdk'
 import type { TableType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { useNuxtApp } from '#app'
-import { useProject } from '#imports'
-import { useInjectionState } from '~/composables/useInjectionState'
+import { computed, reactive, useInjectionState, useNuxtApp, useProject, useTemplateRefsList } from '#imports'
 
 const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState((view: Ref<ViewType>, meta: Ref<TableType>) => {
   const { $api } = useNuxtApp()
   const { sqlUi } = useProject()
 
+  const cellRefs = useTemplateRefsList<HTMLTableDataCellElement>()
+
   // state
   // todo: move to grid view store
   const search = reactive({
@@ -37,8 +36,6 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState((view:
     return where
   })
 
-  // actions
-
   return {
     view,
     meta,
@@ -50,6 +47,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState((view:
     isForm,
     isGrid,
     isGallery,
+    cellRefs,
   }
 }, 'smartsheet-store')
 
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 080b42abd5..0054441b5b 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -1,10 +1,10 @@
-import type { Api, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
+import type { Api, PaginatedType, FormType, GalleryType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { notification } from 'ant-design-vue'
 import { useNuxtApp } from '#app'
 import { useProject } from '#imports'
 import { NOCO } from '~/lib'
-import { extractSdkResponseErrorMsg } from '~/utils'
+import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
 
 const formatData = (list: Record<string, any>[]) =>
   list.map((row) => ({
@@ -16,7 +16,10 @@ const formatData = (list: Record<string, any>[]) =>
 export interface Row {
   row: Record<string, any>
   oldRow: Record<string, any>
-  rowMeta?: any
+  rowMeta: {
+    new?: boolean
+    commentCount?: number
+  }
 }
 
 export function useViewData(
@@ -24,11 +27,16 @@ export function useViewData(
   viewMeta: Ref<ViewType & { id: string }> | ComputedRef<ViewType & { id: string }> | undefined,
   where?: ComputedRef<string | undefined>,
 ) {
+  if (!meta) {
+    throw new Error('Table meta is not available')
+  }
+
   const formattedData = ref<Row[]>([])
   const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
+  const aggCommentCount = ref<Record<string, number>>({})
+  const galleryData = ref<GalleryType | undefined>(undefined)
   const formColumnData = ref<FormType | undefined>(undefined)
   const formViewData = ref<FormType | undefined>(undefined)
-  const galleryData = ref<GalleryType | undefined>(undefined)
 
   const { project } = useProject()
   const { $api } = useNuxtApp()
@@ -52,6 +60,38 @@ export function useViewData(
     paginationData.value.totalRows = count
   }
 
+  const queryParams = computed(() => ({
+    offset: (paginationData.value?.page ?? 0) - 1,
+    limit: paginationData.value?.pageSize ?? 25,
+    where: where?.value ?? '',
+  }))
+
+  /** load row comments count */
+  const loadAggCommentsCount = async () => {
+    // todo: handle in public api
+    // if (this.isPublicView) {
+    //   return;
+    // }
+
+    const ids = formattedData.value
+      ?.filter(({ rowMeta: { new: isNew } }) => !isNew)
+      ?.map(({ row }) => {
+        return extractPkFromRow(row, meta?.value?.columns as ColumnType[])
+      })
+
+    if (!ids?.length) return
+
+    aggCommentCount.value = await $api.utils.commentCount({
+      ids,
+      fk_model_id: meta.value.id as string,
+    })
+
+    for (const row of formattedData.value) {
+      const id = extractPkFromRow(row.row, meta?.value?.columns as ColumnType[])
+      row.rowMeta.commentCount = aggCommentCount.value?.find((c) => c.row_id === id)?.count || 0
+    }
+  }
+
   const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
     if (!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) return
     const response = await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, {
@@ -60,6 +100,8 @@ export function useViewData(
     })
     formattedData.value = formatData(response.list)
     paginationData.value = response.pageInfo
+
+    loadAggCommentsCount()
   }
 
   const loadGalleryData = async () => {
@@ -295,6 +337,7 @@ export function useViewData(
   return {
     loadData,
     paginationData,
+    queryParams,
     formattedData,
     insertRow,
     updateRowProperty,
@@ -311,5 +354,7 @@ export function useViewData(
     formColumnData,
     formViewData,
     updateFormView,
+    aggCommentCount,
+    loadAggCommentsCount,
   }
 }
diff --git a/packages/nc-gui-v2/nuxt.config.ts b/packages/nc-gui-v2/nuxt.config.ts
index 192dc0d9f6..9a1f297e7b 100644
--- a/packages/nc-gui-v2/nuxt.config.ts
+++ b/packages/nc-gui-v2/nuxt.config.ts
@@ -80,6 +80,7 @@ export default defineNuxtConfig({
     ],
     define: {
       'process.env.DEBUG': 'false',
+      'global': {},
     },
     server: {
       watch: {
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index 5d95e21cac..edebf89eaa 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -20,6 +20,9 @@
         "socket.io-client": "^4.5.1",
         "sortablejs": "^1.15.0",
         "unique-names-generator": "^4.7.1",
+        "url": "^0.11.0",
+        "util": "^0.12.4",
+        "vue-dompurify-html": "^3.0.0",
         "vue-i18n": "^9.1.10",
         "vue-toastification": "^2.0.0-rc.5",
         "vuedraggable": "^4.1.0",
@@ -53,6 +56,7 @@
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-prettier": "^4.0.0",
         "happy-dom": "^6.0.3",
+        "httpsnippet": "^2.0.0",
         "less": "^4.1.3",
         "nuxt": "3.0.0-rc.4",
         "nuxt-windicss": "^2.5.0",
@@ -3793,6 +3797,17 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/axios": {
       "version": "0.27.2",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
@@ -4029,7 +4044,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -5200,7 +5214,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
       "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-      "dev": true,
       "dependencies": {
         "has-property-descriptors": "^1.0.0",
         "object-keys": "^1.1.1"
@@ -5377,6 +5390,11 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.10.tgz",
+      "integrity": "sha512-o7Fg/AgC7p/XpKjf/+RC3Ok6k4St5F7Q6q6+Nnm3p2zGWioAY6dh0CbbuwOhH2UcSzKsdniE/YnE2/92JcsA+g=="
+    },
     "node_modules/domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -5565,7 +5583,6 @@
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
       "integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "es-to-primitive": "^1.2.1",
@@ -5619,7 +5636,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
       "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-      "dev": true,
       "dependencies": {
         "is-callable": "^1.1.4",
         "is-date-object": "^1.0.1",
@@ -6881,6 +6897,21 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/event-stream": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz",
+      "integrity": "sha512-QHpkERcGsR0T7Qm3HNJSyXKEEj8AHNxkY3PK8TS2KJvQ7NiSHe3DDpwVKKtoYprL/AreyzFBeIkBIWChAqn60g==",
+      "dev": true,
+      "dependencies": {
+        "duplexer": "~0.1.1",
+        "from": "~0",
+        "map-stream": "~0.1.0",
+        "pause-stream": "0.0.11",
+        "split": "0.3",
+        "stream-combiner": "~0.0.4",
+        "through": "~2.3.1"
+      }
+    },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -6997,8 +7028,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
@@ -7242,6 +7272,14 @@
         }
       }
     },
+    "node_modules/for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dependencies": {
+        "is-callable": "^1.1.3"
+      }
+    },
     "node_modules/form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -7298,6 +7336,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/from": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
+      "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==",
+      "dev": true
+    },
     "node_modules/fs-constants": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
@@ -7333,6 +7377,28 @@
         "minipass": "^2.6.0"
       }
     },
+    "node_modules/fs-readfile-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fs-readfile-promise/-/fs-readfile-promise-2.0.1.tgz",
+      "integrity": "sha512-7+P9eOOMnkIOmtxrBWTzWOBQlE7Nz/cBx9EYTX5hm8DzmZ/Fj9YWeUY2O9G+Q8YblScd1hyEkcmNcZMDj5U8Ug==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.2"
+      }
+    },
+    "node_modules/fs-writefile-promise": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fs-writefile-promise/-/fs-writefile-promise-1.0.3.tgz",
+      "integrity": "sha512-yI+wDwj0FsgX7tyIQJR+EP60R64evMSixtGb9AzGWjJVKlF5tCet95KomfqGBg/aIAG1Dhd6wjCOQe5HbX/qLA==",
+      "dev": true,
+      "dependencies": {
+        "mkdirp-promise": "^1.0.0",
+        "pinkie-promise": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -7356,14 +7422,12 @@
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "devOptional": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "node_modules/function.prototype.name": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
       "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
@@ -7387,7 +7451,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
       "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -7443,7 +7506,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
       "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -7453,6 +7515,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-own-enumerable-property-symbols": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
+      "dev": true
+    },
     "node_modules/get-port": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/get-port/-/get-port-6.1.2.tgz",
@@ -7490,7 +7558,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
       "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.1.1"
@@ -7695,11 +7762,55 @@
         "node": ">=12"
       }
     },
+    "node_modules/har-schema": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/har-validator": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+      "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+      "deprecated": "this library is no longer supported",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^6.12.3",
+        "har-schema": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/har-validator/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/har-validator/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "devOptional": true,
       "dependencies": {
         "function-bind": "^1.1.1"
       },
@@ -7707,11 +7818,31 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-ansi/node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
       "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -7729,7 +7860,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
       "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.1"
       },
@@ -7741,7 +7871,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -7753,7 +7882,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
       "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
-      "dev": true,
       "dependencies": {
         "has-symbols": "^1.0.2"
       },
@@ -7996,6 +8124,128 @@
         "node": ">= 6"
       }
     },
+    "node_modules/httpsnippet": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/httpsnippet/-/httpsnippet-2.0.0.tgz",
+      "integrity": "sha512-Hb2ttfB5OhasYxwChZ8QKpYX3v4plNvwMaMulUIC7M3RHRDf1Op6EMp47LfaU2sgQgfvo5spWK4xRAirMEisrg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^1.1.1",
+        "commander": "^2.9.0",
+        "debug": "^2.2.0",
+        "event-stream": "3.3.4",
+        "form-data": "3.0.0",
+        "fs-readfile-promise": "^2.0.1",
+        "fs-writefile-promise": "^1.0.3",
+        "har-validator": "^5.0.0",
+        "stringify-object": "^3.3.0"
+      },
+      "bin": {
+        "httpsnippet": "bin/httpsnippet"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/chalk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
+    "node_modules/httpsnippet/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/form-data": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.0.tgz",
+      "integrity": "sha512-CKMFDglpbMi6PyN+brwB9Q/GOw0eAnsrEZDgcsH5Krhz5Od/haKHAX0NmQfha2zPPz0JpWzA7GJHGSnvCRLWsg==",
+      "dev": true,
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
+    "node_modules/httpsnippet/node_modules/strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/human-signals": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
@@ -8146,8 +8396,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/ini": {
       "version": "1.3.8",
@@ -8201,7 +8450,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
       "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.0",
         "has": "^1.0.3",
@@ -8282,6 +8530,21 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -8292,7 +8555,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
       "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
-      "dev": true,
       "dependencies": {
         "has-bigints": "^1.0.1"
       },
@@ -8316,7 +8578,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
       "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -8344,7 +8605,6 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
       "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -8368,7 +8628,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
       "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
-      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -8422,6 +8681,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-generator-function": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
+      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -8463,7 +8736,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
       "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -8484,7 +8756,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
       "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
-      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -8495,6 +8766,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-plain-object": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz",
@@ -8539,7 +8819,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
       "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -8551,11 +8830,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-shared-array-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
       "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2"
       },
@@ -8588,7 +8875,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
       "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -8603,7 +8889,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
       "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-      "dev": true,
       "dependencies": {
         "has-symbols": "^1.0.2"
       },
@@ -8614,6 +8899,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-typed-array": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.9.tgz",
+      "integrity": "sha512-kfrlnTTn8pZkfpJMUgYD7YZ3qzeJgWUn8XfVYBARc4wnmNOmLbmuuaAs3q5fvB0UJOn6yHAKaGTPM7d6ezoD/A==",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "es-abstract": "^1.20.0",
+        "for-each": "^0.3.3",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-unicode-supported": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
@@ -8630,7 +8933,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
       "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2"
       },
@@ -9385,6 +9687,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/map-stream": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
+      "integrity": "sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==",
+      "dev": true
+    },
     "node_modules/material-colors": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
@@ -9634,6 +9942,19 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/mkdirp-promise": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/mkdirp-promise/-/mkdirp-promise-1.1.0.tgz",
+      "integrity": "sha512-xzB0UZFcW1UGS2xkXeDh39jzTP282lb3Vwp4QzCQYmkTn4ysaV5dBdbkOXmhkcE1TQlZebQlgTceaWvDr3oFgw==",
+      "deprecated": "This package is broken and no longer maintained. 'mkdirp' itself supports promises now, please switch to that.",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "mkdirp": ">=0.5.0"
+      }
+    },
     "node_modules/mlly": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.5.tgz",
@@ -10237,7 +10558,6 @@
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
       "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -10246,7 +10566,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -10255,7 +10574,6 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.3.tgz",
       "integrity": "sha512-ZFJnX3zltyjcYJL0RoCJuzb+11zWGyaDbjgxZbdV7rFEcHQuYxrZqhow67aA7xpes6LhojyFDaBKAFfogQrikA==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -10726,6 +11044,15 @@
         "node": "*"
       }
     },
+    "node_modules/pause-stream": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
+      "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
+      "dev": true,
+      "dependencies": {
+        "through": "~2.3"
+      }
+    },
     "node_modules/perfect-debounce": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-0.1.3.tgz",
@@ -10758,6 +11085,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pinkie": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-1.0.0.tgz",
+      "integrity": "sha512-VFVaU1ysKakao68ktZm76PIdOhvEfoNNRaGkyLln9Os7r0/MCxqHjHyBM7dT3pgTiBybqiPtpqKfpENwdBp50Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pinkie-promise": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-1.0.0.tgz",
+      "integrity": "sha512-5mvtVNse2Ml9zpFKkWBpGsTPwm3DKhs+c95prO/F6E7d6DN0FPqxs6LONpLNpyD7Iheb7QN4BbUoKJgo+DnkQA==",
+      "dev": true,
+      "dependencies": {
+        "pinkie": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -11591,6 +11939,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/querystring": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
+      "integrity": "sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==",
+      "deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -11881,7 +12238,6 @@
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
       "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
@@ -12109,8 +12465,7 @@
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "node_modules/safe-regex": {
       "version": "2.1.1",
@@ -12419,7 +12774,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
@@ -12646,6 +13000,18 @@
       "integrity": "sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==",
       "dev": true
     },
+    "node_modules/split": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
+      "integrity": "sha512-wD2AeVmxXRBoX44wAycgjVpMhvbwdI2aZjCkvfNcH1YqHQvJVa1duWc73OyVGJUc05fhFaTZeQ/PYsrmyH0JVA==",
+      "dev": true,
+      "dependencies": {
+        "through": "2"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/split-on-first": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
@@ -12694,6 +13060,15 @@
       "integrity": "sha512-/c645XdExBypL01TpFKiG/3RAa/Qmu+zRi0MwAmrdEkwHNuN0ebo8ccAXBBDa5Z0QOJgBskUIbuCK91x0sCVEw==",
       "dev": true
     },
+    "node_modules/stream-combiner": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
+      "integrity": "sha512-rT00SPnTVyRsaSz5zgSPma/aHSOic5U1prhYdRy5HS2kTZviFpmDgzilbtsJsxiroqACmayynDN/9VzIbX5DOw==",
+      "dev": true,
+      "dependencies": {
+        "duplexer": "~0.1.1"
+      }
+    },
     "node_modules/strict-uri-encode": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
@@ -12769,7 +13144,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
       "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -12783,7 +13157,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
       "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -12793,6 +13166,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "dev": true,
+      "dependencies": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -13460,7 +13847,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
       "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-bigints": "^1.0.2",
@@ -13797,6 +14183,33 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
+      "integrity": "sha512-kbailJa29QrtXnxgq+DdCEGlbTeYM2eJUxsz6vjZavrCYPMIFHMKQmSKYAIuUK2i7hgPm28a8piX5NTUtM/LKQ==",
+      "dependencies": {
+        "punycode": "1.3.2",
+        "querystring": "0.2.0"
+      }
+    },
+    "node_modules/url/node_modules/punycode": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
+      "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw=="
+    },
+    "node_modules/util": {
+      "version": "0.12.4",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.4.tgz",
+      "integrity": "sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "is-arguments": "^1.0.4",
+        "is-generator-function": "^1.0.7",
+        "is-typed-array": "^1.1.3",
+        "safe-buffer": "^5.1.2",
+        "which-typed-array": "^1.1.2"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -14127,6 +14540,17 @@
         "bundle-runner": "^0.0.1"
       }
     },
+    "node_modules/vue-dompurify-html": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/vue-dompurify-html/-/vue-dompurify-html-3.0.0.tgz",
+      "integrity": "sha512-S6PMeJU7S3w0TnxMWWd4iydc7oPdOER1GmW9rsgiRwHvcw+nUi2v6BgERcFBULlM+x6PXsfu5P/Rm4reVvWH5A==",
+      "dependencies": {
+        "dompurify": "^2.3.4"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.0.3.tgz",
@@ -14474,7 +14898,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
       "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
-      "dev": true,
       "dependencies": {
         "is-bigint": "^1.0.1",
         "is-boolean-object": "^1.1.0",
@@ -14486,6 +14909,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/which-typed-array": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.8.tgz",
+      "integrity": "sha512-Jn4e5PItbcAHyLoRDwvPj1ypu27DJbtdYXUa5zsinrUx77Uvfb0cXwwnGMTn7cjUfhhqgVQnVJCwF+7cgU7tpw==",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "es-abstract": "^1.20.0",
+        "for-each": "^0.3.3",
+        "has-tostringtag": "^1.0.0",
+        "is-typed-array": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/wide-align": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
@@ -17670,6 +18112,11 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "available-typed-arrays": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
+      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw=="
+    },
     "axios": {
       "version": "0.27.2",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
@@ -17841,7 +18288,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -18742,7 +19188,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
       "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
-      "dev": true,
       "requires": {
         "has-property-descriptors": "^1.0.0",
         "object-keys": "^1.1.1"
@@ -18872,6 +19317,11 @@
         "domelementtype": "^2.2.0"
       }
     },
+    "dompurify": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.10.tgz",
+      "integrity": "sha512-o7Fg/AgC7p/XpKjf/+RC3Ok6k4St5F7Q6q6+Nnm3p2zGWioAY6dh0CbbuwOhH2UcSzKsdniE/YnE2/92JcsA+g=="
+    },
     "domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -19014,7 +19464,6 @@
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
       "integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "es-to-primitive": "^1.2.1",
@@ -19062,7 +19511,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
       "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
-      "dev": true,
       "requires": {
         "is-callable": "^1.1.4",
         "is-date-object": "^1.0.1",
@@ -19889,6 +20337,21 @@
       "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
       "dev": true
     },
+    "event-stream": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz",
+      "integrity": "sha512-QHpkERcGsR0T7Qm3HNJSyXKEEj8AHNxkY3PK8TS2KJvQ7NiSHe3DDpwVKKtoYprL/AreyzFBeIkBIWChAqn60g==",
+      "dev": true,
+      "requires": {
+        "duplexer": "~0.1.1",
+        "from": "~0",
+        "map-stream": "~0.1.0",
+        "pause-stream": "0.0.11",
+        "split": "0.3",
+        "stream-combiner": "~0.0.4",
+        "through": "~2.3.1"
+      }
+    },
     "eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -19984,8 +20447,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "fast-levenshtein": {
       "version": "2.0.6",
@@ -20164,6 +20626,14 @@
       "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
       "devOptional": true
     },
+    "for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "requires": {
+        "is-callable": "^1.1.3"
+      }
+    },
     "form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -20201,6 +20671,12 @@
       "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
       "dev": true
     },
+    "from": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
+      "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==",
+      "dev": true
+    },
     "fs-constants": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
@@ -20233,6 +20709,25 @@
         "minipass": "^2.6.0"
       }
     },
+    "fs-readfile-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fs-readfile-promise/-/fs-readfile-promise-2.0.1.tgz",
+      "integrity": "sha512-7+P9eOOMnkIOmtxrBWTzWOBQlE7Nz/cBx9EYTX5hm8DzmZ/Fj9YWeUY2O9G+Q8YblScd1hyEkcmNcZMDj5U8Ug==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2"
+      }
+    },
+    "fs-writefile-promise": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fs-writefile-promise/-/fs-writefile-promise-1.0.3.tgz",
+      "integrity": "sha512-yI+wDwj0FsgX7tyIQJR+EP60R64evMSixtGb9AzGWjJVKlF5tCet95KomfqGBg/aIAG1Dhd6wjCOQe5HbX/qLA==",
+      "dev": true,
+      "requires": {
+        "mkdirp-promise": "^1.0.0",
+        "pinkie-promise": "^1.0.0"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -20249,14 +20744,12 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "devOptional": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "function.prototype.name": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
       "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
@@ -20273,8 +20766,7 @@
     "functions-have-names": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-      "dev": true
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
     },
     "gauge": {
       "version": "3.0.2",
@@ -20315,13 +20807,18 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
       "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
         "has-symbols": "^1.0.3"
       }
     },
+    "get-own-enumerable-property-symbols": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
+      "dev": true
+    },
     "get-port": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/get-port/-/get-port-6.1.2.tgz",
@@ -20347,7 +20844,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
       "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.1.1"
@@ -20504,20 +21000,71 @@
         }
       }
     },
+    "har-schema": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
+      "dev": true
+    },
+    "har-validator": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+      "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.12.3",
+        "har-schema": "^2.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+          "dev": true
+        }
+      }
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "devOptional": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
     },
+    "has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+          "dev": true
+        }
+      }
+    },
     "has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
-      "dev": true
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ=="
     },
     "has-flag": {
       "version": "4.0.0",
@@ -20529,7 +21076,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
       "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
-      "dev": true,
       "requires": {
         "get-intrinsic": "^1.1.1"
       }
@@ -20537,14 +21083,12 @@
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
     },
     "has-tostringtag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
       "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
-      "dev": true,
       "requires": {
         "has-symbols": "^1.0.2"
       }
@@ -20729,6 +21273,103 @@
         "debug": "4"
       }
     },
+    "httpsnippet": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/httpsnippet/-/httpsnippet-2.0.0.tgz",
+      "integrity": "sha512-Hb2ttfB5OhasYxwChZ8QKpYX3v4plNvwMaMulUIC7M3RHRDf1Op6EMp47LfaU2sgQgfvo5spWK4xRAirMEisrg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^1.1.1",
+        "commander": "^2.9.0",
+        "debug": "^2.2.0",
+        "event-stream": "3.3.4",
+        "form-data": "3.0.0",
+        "fs-readfile-promise": "^2.0.1",
+        "fs-writefile-promise": "^1.0.3",
+        "har-validator": "^5.0.0",
+        "stringify-object": "^3.3.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "form-data": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.0.tgz",
+          "integrity": "sha512-CKMFDglpbMi6PyN+brwB9Q/GOw0eAnsrEZDgcsH5Krhz5Od/haKHAX0NmQfha2zPPz0JpWzA7GJHGSnvCRLWsg==",
+          "dev": true,
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
+          "dev": true
+        }
+      }
+    },
     "human-signals": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
@@ -20831,8 +21472,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "ini": {
       "version": "1.3.8",
@@ -20879,7 +21519,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
       "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
-      "dev": true,
       "requires": {
         "get-intrinsic": "^1.1.0",
         "has": "^1.0.3",
@@ -20939,6 +21578,15 @@
         "is-decimal": "^1.0.0"
       }
     },
+    "is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -20949,7 +21597,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
       "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
-      "dev": true,
       "requires": {
         "has-bigints": "^1.0.1"
       }
@@ -20967,7 +21614,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
       "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -20985,8 +21631,7 @@
     "is-callable": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
-      "dev": true
+      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w=="
     },
     "is-core-module": {
       "version": "2.9.0",
@@ -21001,7 +21646,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
       "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
-      "dev": true,
       "requires": {
         "has-tostringtag": "^1.0.0"
       }
@@ -21030,6 +21674,14 @@
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
       "dev": true
     },
+    "is-generator-function": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
+      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -21060,8 +21712,7 @@
     "is-negative-zero": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
-      "dev": true
+      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA=="
     },
     "is-number": {
       "version": "7.0.0",
@@ -21073,11 +21724,16 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
       "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
-      "dev": true,
       "requires": {
         "has-tostringtag": "^1.0.0"
       }
     },
+    "is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
+      "dev": true
+    },
     "is-plain-object": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz",
@@ -21116,17 +21772,21 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
       "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
       }
     },
+    "is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==",
+      "dev": true
+    },
     "is-shared-array-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
       "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.2"
       }
@@ -21150,7 +21810,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
       "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
-      "dev": true,
       "requires": {
         "has-tostringtag": "^1.0.0"
       }
@@ -21159,11 +21818,22 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
       "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
-      "dev": true,
       "requires": {
         "has-symbols": "^1.0.2"
       }
     },
+    "is-typed-array": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.9.tgz",
+      "integrity": "sha512-kfrlnTTn8pZkfpJMUgYD7YZ3qzeJgWUn8XfVYBARc4wnmNOmLbmuuaAs3q5fvB0UJOn6yHAKaGTPM7d6ezoD/A==",
+      "requires": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "es-abstract": "^1.20.0",
+        "for-each": "^0.3.3",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-unicode-supported": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
@@ -21174,7 +21844,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
       "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.2"
       }
@@ -21782,6 +22451,12 @@
         }
       }
     },
+    "map-stream": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
+      "integrity": "sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==",
+      "dev": true
+    },
     "material-colors": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
@@ -21978,6 +22653,13 @@
       "dev": true,
       "optional": true
     },
+    "mkdirp-promise": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/mkdirp-promise/-/mkdirp-promise-1.1.0.tgz",
+      "integrity": "sha512-xzB0UZFcW1UGS2xkXeDh39jzTP282lb3Vwp4QzCQYmkTn4ysaV5dBdbkOXmhkcE1TQlZebQlgTceaWvDr3oFgw==",
+      "dev": true,
+      "requires": {}
+    },
     "mlly": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.5.tgz",
@@ -22472,20 +23154,17 @@
     "object-inspect": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
-      "dev": true
+      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ=="
     },
     "object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
     },
     "object.assign": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.3.tgz",
       "integrity": "sha512-ZFJnX3zltyjcYJL0RoCJuzb+11zWGyaDbjgxZbdV7rFEcHQuYxrZqhow67aA7xpes6LhojyFDaBKAFfogQrikA==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -22837,6 +23516,15 @@
       "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
       "dev": true
     },
+    "pause-stream": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
+      "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
+      "dev": true,
+      "requires": {
+        "through": "~2.3"
+      }
+    },
     "perfect-debounce": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-0.1.3.tgz",
@@ -22860,6 +23548,21 @@
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
       "dev": true
     },
+    "pinkie": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-1.0.0.tgz",
+      "integrity": "sha512-VFVaU1ysKakao68ktZm76PIdOhvEfoNNRaGkyLln9Os7r0/MCxqHjHyBM7dT3pgTiBybqiPtpqKfpENwdBp50Q==",
+      "dev": true
+    },
+    "pinkie-promise": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-1.0.0.tgz",
+      "integrity": "sha512-5mvtVNse2Ml9zpFKkWBpGsTPwm3DKhs+c95prO/F6E7d6DN0FPqxs6LONpLNpyD7Iheb7QN4BbUoKJgo+DnkQA==",
+      "dev": true,
+      "requires": {
+        "pinkie": "^1.0.0"
+      }
+    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -23427,6 +24130,11 @@
         "strict-uri-encode": "^2.0.0"
       }
     },
+    "querystring": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
+      "integrity": "sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g=="
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -23649,7 +24357,6 @@
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
       "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
@@ -23804,8 +24511,7 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "safe-regex": {
       "version": "2.1.1",
@@ -24064,7 +24770,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
@@ -24234,6 +24939,15 @@
       "integrity": "sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==",
       "dev": true
     },
+    "split": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
+      "integrity": "sha512-wD2AeVmxXRBoX44wAycgjVpMhvbwdI2aZjCkvfNcH1YqHQvJVa1duWc73OyVGJUc05fhFaTZeQ/PYsrmyH0JVA==",
+      "dev": true,
+      "requires": {
+        "through": "2"
+      }
+    },
     "split-on-first": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
@@ -24272,6 +24986,15 @@
       "integrity": "sha512-/c645XdExBypL01TpFKiG/3RAa/Qmu+zRi0MwAmrdEkwHNuN0ebo8ccAXBBDa5Z0QOJgBskUIbuCK91x0sCVEw==",
       "dev": true
     },
+    "stream-combiner": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
+      "integrity": "sha512-rT00SPnTVyRsaSz5zgSPma/aHSOic5U1prhYdRy5HS2kTZviFpmDgzilbtsJsxiroqACmayynDN/9VzIbX5DOw==",
+      "dev": true,
+      "requires": {
+        "duplexer": "~0.1.1"
+      }
+    },
     "strict-uri-encode": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
@@ -24326,7 +25049,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
       "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -24337,13 +25059,23 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
       "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
         "es-abstract": "^1.19.5"
       }
     },
+    "stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "dev": true,
+      "requires": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      }
+    },
     "strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -24853,7 +25585,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
       "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
-      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "has-bigints": "^1.0.2",
@@ -25070,6 +25801,35 @@
         "punycode": "^2.1.0"
       }
     },
+    "url": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
+      "integrity": "sha512-kbailJa29QrtXnxgq+DdCEGlbTeYM2eJUxsz6vjZavrCYPMIFHMKQmSKYAIuUK2i7hgPm28a8piX5NTUtM/LKQ==",
+      "requires": {
+        "punycode": "1.3.2",
+        "querystring": "0.2.0"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
+          "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw=="
+        }
+      }
+    },
+    "util": {
+      "version": "0.12.4",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.12.4.tgz",
+      "integrity": "sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==",
+      "requires": {
+        "inherits": "^2.0.3",
+        "is-arguments": "^1.0.4",
+        "is-generator-function": "^1.0.7",
+        "is-typed-array": "^1.1.3",
+        "safe-buffer": "^5.1.2",
+        "which-typed-array": "^1.1.2"
+      }
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -25296,6 +26056,14 @@
         "bundle-runner": "^0.0.1"
       }
     },
+    "vue-dompurify-html": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/vue-dompurify-html/-/vue-dompurify-html-3.0.0.tgz",
+      "integrity": "sha512-S6PMeJU7S3w0TnxMWWd4iydc7oPdOER1GmW9rsgiRwHvcw+nUi2v6BgERcFBULlM+x6PXsfu5P/Rm4reVvWH5A==",
+      "requires": {
+        "dompurify": "^2.3.4"
+      }
+    },
     "vue-eslint-parser": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.0.3.tgz",
@@ -25542,7 +26310,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
       "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
-      "dev": true,
       "requires": {
         "is-bigint": "^1.0.1",
         "is-boolean-object": "^1.1.0",
@@ -25551,6 +26318,19 @@
         "is-symbol": "^1.0.3"
       }
     },
+    "which-typed-array": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.8.tgz",
+      "integrity": "sha512-Jn4e5PItbcAHyLoRDwvPj1ypu27DJbtdYXUa5zsinrUx77Uvfb0cXwwnGMTn7cjUfhhqgVQnVJCwF+7cgU7tpw==",
+      "requires": {
+        "available-typed-arrays": "^1.0.5",
+        "call-bind": "^1.0.2",
+        "es-abstract": "^1.20.0",
+        "for-each": "^0.3.3",
+        "has-tostringtag": "^1.0.0",
+        "is-typed-array": "^1.1.9"
+      }
+    },
     "wide-align": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index 43f7ec27a7..9bd7b93ff2 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -26,6 +26,9 @@
     "socket.io-client": "^4.5.1",
     "sortablejs": "^1.15.0",
     "unique-names-generator": "^4.7.1",
+    "vue-dompurify-html": "^3.0.0",
+    "url": "^0.11.0",
+    "util": "^0.12.4",
     "vue-i18n": "^9.1.10",
     "vue-toastification": "^2.0.0-rc.5",
     "vuedraggable": "^4.1.0",
@@ -59,6 +62,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "happy-dom": "^6.0.3",
+    "httpsnippet": "^2.0.0",
     "less": "^4.1.3",
     "nuxt": "3.0.0-rc.4",
     "nuxt-windicss": "^2.5.0",
diff --git a/packages/nc-gui-v2/plugins/domPurify.ts b/packages/nc-gui-v2/plugins/domPurify.ts
new file mode 100644
index 0000000000..4dade06bfa
--- /dev/null
+++ b/packages/nc-gui-v2/plugins/domPurify.ts
@@ -0,0 +1,6 @@
+import VueDOMPurifyHTML from 'vue-dompurify-html'
+import { defineNuxtPlugin } from 'nuxt/app'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueDOMPurifyHTML)
+})
diff --git a/packages/nc-gui-v2/plugins/state.ts b/packages/nc-gui-v2/plugins/state.ts
index 21220bf6da..ea16d99185 100644
--- a/packages/nc-gui-v2/plugins/state.ts
+++ b/packages/nc-gui-v2/plugins/state.ts
@@ -13,14 +13,21 @@ import { useDark, useGlobal, watch } from '#imports'
  * console.log($state.lang.value) // 'en'
  * ```
  */
-export default defineNuxtPlugin((nuxtApp) => {
+export default defineNuxtPlugin(async (nuxtApp) => {
   const state = useGlobal()
+  const { $api } = useNuxtApp()
 
   const darkMode = useDark()
 
   /** set i18n locale to stored language */
   nuxtApp.vueApp.i18n.locale.value = state.lang.value
 
+  try {
+    state.appInfo.value = await $api.utils.appInfo()
+  } catch (e) {
+    console.error(e)
+  }
+
   /** set current dark mode from storage */
   watch(
     state.darkMode,
diff --git a/packages/nc-gui-v2/tsconfig.json b/packages/nc-gui-v2/tsconfig.json
index 00a959cd82..7815bfba85 100644
--- a/packages/nc-gui-v2/tsconfig.json
+++ b/packages/nc-gui-v2/tsconfig.json
@@ -11,7 +11,6 @@
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
     "types": [
-      "@nuxt/types",
       "@intlify/vite-plugin-vue-i18n/client",
       "vue-i18n",
       "unplugin-icons/types/vue",
diff --git a/packages/nc-gui-v2/utils/dataUtils.ts b/packages/nc-gui-v2/utils/dataUtils.ts
new file mode 100644
index 0000000000..290d445aca
--- /dev/null
+++ b/packages/nc-gui-v2/utils/dataUtils.ts
@@ -0,0 +1,11 @@
+import type { ColumnType } from 'nocodb-sdk'
+
+export const extractPkFromRow = (row: Record<string, any>, columns: ColumnType[]) => {
+  return (
+    row &&
+    columns
+      ?.filter((c) => c.pk)
+      .map((c) => row?.[c.title as string])
+      .join('___')
+  )
+}
diff --git a/packages/nc-gui-v2/utils/index.ts b/packages/nc-gui-v2/utils/index.ts
index 67d87f9119..b133011efe 100644
--- a/packages/nc-gui-v2/utils/index.ts
+++ b/packages/nc-gui-v2/utils/index.ts
@@ -15,3 +15,4 @@ export * from './columnUtils'
 export * from './validation'
 export * from './viewUtils'
 export * from './currencyUtils'
+export * from './dataUtils'
diff --git a/packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue b/packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue
index c7ba552753..757b547d18 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue
@@ -678,6 +678,7 @@ h5 {
   padding: 8px;
   border-radius: 8px;
 }
+
 </style>
 <!--
 /**
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index ca388a0cd6..47056d4eff 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -242,7 +242,7 @@ export interface ColumnType {
     | FormulaType
     | RollupType
     | LookupType
-    | SelectOptionsType[]
+    | SelectOptionsType
     | object;
 }
 
@@ -303,9 +303,11 @@ export interface FormulaType {
 }
 
 export interface SelectOptionsType {
+  options: SelectOptionType;
+}
+
+export interface SelectOptionType {
   id?: string;
-  type?: string;
-  virtual?: boolean;
   fk_column_id?: string;
   title?: string;
   color?: string;
@@ -3110,7 +3112,7 @@ export class Api<
      * @response `200` `void` OK
      */
     commentRow: (
-      data: { row_id: string; fk_model_id: string; comment: string },
+      data: { row_id: string; fk_model_id: string; description?: string },
       params: RequestParams = {}
     ) =>
       this.request<void, any>({
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index a7d17bb176..2478076b04 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -4448,7 +4448,7 @@
                   "fk_model_id": {
                     "type": "string"
                   },
-                  "comment": {
+                  "description": {
                     "type": "string"
                   }
                 },
@@ -6605,10 +6605,7 @@
                 "$ref": "#/components/schemas/Lookup"
               },
               {
-                "type": "array",
-                "items": {
-                  "$ref": "#/components/schemas/SelectOptions"
-                }
+                "$ref": "#/components/schemas/SelectOptions"
               },
               {
                 "type": "object"
@@ -6821,16 +6818,34 @@
       "SelectOptions": {
         "title": "SelectOptions",
         "type": "object",
+        "properties": {
+          "options": {
+            "type": "array",
+            "required": true,
+            "$ref": "#/components/schemas/SelectOption"
+          }
+        },
+        "examples": [
+          {
+            "options": [
+              {
+                "id": "string",
+                "fk_column_id": "string",
+                "title": "string",
+                "color": "string",
+                "order": 1
+              }
+            ]
+          }
+        ]
+      },
+      "SelectOption": {
+        "title": "SelectOption",
+        "type": "object",
         "properties": {
           "id": {
             "type": "string"
           },
-          "type": {
-            "type": "string"
-          },
-          "virtual": {
-            "type": "boolean"
-          },
           "fk_column_id": {
             "type": "string"
           },
@@ -6847,12 +6862,10 @@
         "examples": [
           {
             "id": "string",
-            "type": "string",
-            "virtual": true,
             "fk_column_id": "string",
             "title": "string",
             "color": "string",
-            "order": 0
+            "order": 1
           }
         ]
       },