From 02eafb2ec2f2c4b3a4758f888790c2be92e036b0 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Jan 2026 11:47:13 +0000
Subject: [PATCH 01/18] chore: add claude md file

---
 CLAUDE.md | 132 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 132 insertions(+)
 create mode 100644 CLAUDE.md

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000000..4a40249591
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,132 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Documentation
+
+For comprehensive product documentation, features, and API references: https://nocodb.com/llms.txt
+
+## Project Overview
+
+NocoDB is an open-source Airtable alternative that turns any database into a smart spreadsheet. This is the enterprise edition (EE) monorepo.
+
+Key capabilities:
+- Transforms MySQL, PostgreSQL, SQL Server, SQLite & MariaDB into collaborative spreadsheets
+- Rich field types: text, numerical, date-time, relational (Links), formula-based
+- Multiple views: Grid, Form, Calendar, Kanban, Gallery, Map
+- Auto-generated REST APIs
+- Automation: workflows, webhooks, scripts
+- NocoAI for AI capabilities, NocoSync for external data integration
+- MCP (Model Context Protocol) server support
+
+## Monorepo Structure
+
+- **packages/nocodb** - Backend (NestJS + TypeScript)
+- **packages/nc-gui** - Frontend (Nuxt 3 + Vue 3)
+- **packages/nocodb-sdk** - JavaScript/TypeScript SDK
+- **packages/nocodb-sdk-v2** - V2 SDK
+- **packages/nc-sql-executor** - SQL execution service
+- **packages/noco-integrations** - Integration plugins (Slack, Discord, AWS, etc.)
+- **packages/nc-knex-dialects** - Custom Knex dialects (Snowflake, Databricks)
+- **tests/playwright** - E2E testing suite
+
+## Essential Commands
+
+```bash
+# Installation (pnpm is enforced - npm/yarn will fail)
+pnpm bootstrap          # Full EE bootstrap
+pnpm bootstrap:ce       # Community Edition bootstrap
+
+# Development
+pnpm start:backend      # Backend at http://localhost:8080
+pnpm start:frontend     # Frontend at http://localhost:3000
+pnpm start:sql-executor # SQL executor service
+
+# Database containers for testing
+pnpm start:pg           # Start PostgreSQL
+pnpm stop:pg
+pnpm start:mysql        # Start MySQL
+pnpm stop:mysql
+
+# E2E Testing
+pnpm start:playwright:pg        # Backend + Frontend for E2E (PostgreSQL)
+pnpm start:playwright:pg:ee     # Enterprise Edition E2E
+```
+
+### Backend (packages/nocodb)
+
+```bash
+pnpm start              # Dev mode with watch
+pnpm watch:run:ee       # EE dev build
+pnpm build:ee           # Production EE build
+pnpm lint               # ESLint
+pnpm test:unit          # Mocha unit tests
+pnpm test:unit:pg:ee    # Unit tests with PostgreSQL + EE
+```
+
+### Frontend (packages/nc-gui)
+
+```bash
+pnpm dev                # Nuxt dev server
+pnpm dev:ee             # EE frontend dev
+pnpm build:ee           # Production EE build
+pnpm lint               # ESLint
+pnpm test               # Vitest unit tests
+```
+
+## Architecture
+
+### Backend (NestJS)
+
+- **src/controllers/** - REST API controllers (~98 controllers)
+- **src/models/** - Data models (Base, Model, View, Column, User, Integration, etc.)
+- **src/services/** - Business logic
+- **src/db/** - Database layer with BaseModelSqlv2, CustomKnex, formula evaluation
+- **src/ee/, src/ee-on-prem/, src/ee-cloud/** - Enterprise Edition code
+- **src/run/** - Entry points
+
+### Frontend (Nuxt + Vue)
+
+- **pages/** - Route-based pages
+- **components/** - Vue components (~34 directories)
+- **composables/** - Vue composables (~95 files)
+- **store/** - Pinia stores
+- **lang/** - i18n (42+ languages)
+- **ee/** - Enterprise Edition features
+- Uses hash-based routing (SPA mode)
+
+### Database Model Hierarchy
+
+```
+Workspace → Base → Model (Table) → Column
+                              → View (Grid, Gallery, Form, Kanban, Calendar, Map)
+```
+
+## Key Environment Variables
+
+- `NC_DB` - Database connection string
+- `EE=true` - Enable Enterprise Edition
+- `NC_AUTH_JWT_SECRET` - JWT secret
+- `NC_DISABLE_TELE` - Disable telemetry
+
+## Build Memory Issues
+
+For large builds that run out of memory:
+```bash
+NODE_OPTIONS="--max-old-space-size=8192" pnpm build:ee
+```
+
+## Git Workflow
+
+- **develop** - Main development branch (target for PRs)
+- **master** - Stable release snapshots only
+- Branch naming: `feat/`, `fix/`, `enhancement/`
+- Commits follow [Conventional Commits](https://www.conventionalcommits.org/): `feat:`, `fix:`, `docs:`, `chore:`, etc.
+
+## Tech Stack
+
+- **Backend**: NestJS, Knex, Socket.io, Bull (job queue), Redis
+- **Frontend**: Nuxt 3, Vue 3, Pinia, WindiCSS, Ant Design Vue
+- **Databases**: SQLite (default), PostgreSQL, MySQL, Snowflake, Databricks
+- **Build**: Rspack (backend), Vite (frontend)
+- **Testing**: Mocha (backend unit), Vitest (frontend unit), Playwright (E2E)

From 86979b3188672abfd194fed92868e45d7dc2da91 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Jan 2026 11:47:14 +0000
Subject: [PATCH 02/18] fix: show only v3 bases for converting to managed app

---
 .../components/workspace/project/create/ManagedApp.vue      | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/workspace/project/create/ManagedApp.vue b/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
index a97e1dea62..2eefaf561d 100644
--- a/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
+++ b/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { FormBuilderValidatorType } from 'nocodb-sdk'
+import { BaseVersion, FormBuilderValidatorType } from 'nocodb-sdk'
 import { FORM_BUILDER_NON_CATEGORIZED, FormBuilderInputType } from '#imports'
 
 const props = defineProps<{
@@ -149,7 +149,9 @@ const { formState, isLoading, submit } = useProvideFormBuilderHelper({
         equal: 'existing',
       },
       defaultValue: undefined,
-      filterOption: (base) => base && !base?.managed_app_id,
+      filterOption: (base) => base && base.version === BaseVersion.V3 && !base.managed_app_id,
+      helpText: 'Only V3 bases can be published as managed apps',
+      showHintAsTooltip: true,
     },
     {
       type: FormBuilderInputType.Input,

From 10635b79310d3ef90ac1150fe9bb25afa8eceaca Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Jan 2026 11:47:14 +0000
Subject: [PATCH 03/18] fix: use dropdown for version controling

---
 .../components/dlg/ConvertToManagedApp.vue    |   2 +-
 .../topbar/ManagedAppStatus/MenuItem.vue      |  52 ++++
 .../topbar/ManagedAppStatus/index.vue         | 240 ++++++++++++++++++
 .../workspace/project/create/ManagedApp.vue   |   2 +-
 packages/nc-gui/store/base.ts                 |  18 ++
 5 files changed, 312 insertions(+), 2 deletions(-)
 create mode 100644 packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/MenuItem.vue
 create mode 100644 packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue

diff --git a/packages/nc-gui/components/dlg/ConvertToManagedApp.vue b/packages/nc-gui/components/dlg/ConvertToManagedApp.vue
index 7afbb5e6a6..383415e633 100644
--- a/packages/nc-gui/components/dlg/ConvertToManagedApp.vue
+++ b/packages/nc-gui/components/dlg/ConvertToManagedApp.vue
@@ -96,7 +96,7 @@ const { formState, isLoading, submit } = useProvideFormBuilderHelper({
       model: 'visibility',
       category: FORM_BUILDER_NON_CATEGORIZED,
       options: [
-        { label: 'Public', value: 'public', icon: 'eye' },
+        // { label: 'Public', value: 'public', icon: 'eye' },
         { label: 'Private', value: 'private', icon: 'lock' },
         { label: 'Unlisted', value: 'unlisted', icon: 'ncEyeOff' },
       ],
diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/MenuItem.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/MenuItem.vue
new file mode 100644
index 0000000000..f8f6e02b08
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/MenuItem.vue
@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+interface Props {
+  label: string
+  subtext?: string
+  icon?: IconMapKey
+  iconWrapperClass?: string
+  clickable?: boolean
+}
+
+withDefaults(defineProps<Props>(), {})
+</script>
+
+<template>
+  <div :tabindex="clickable ? 0 : undefined" class="nc-managed-app-status-menu-item" :class="{ 'nc-clickable': clickable }">
+    <div class="nc-icon-wrapper" :class="iconWrapperClass">
+      <slot name="icon">
+        <GeneralIcon v-if="icon" :icon="icon" class="h-4 w-4 flex-none" />
+      </slot>
+    </div>
+
+    <div class="nc-content-wrapper flex-1">
+      <div v-if="$slots.label || label" class="nc-content-label">
+        <slot name="label">{{ label }}</slot>
+      </div>
+      <div v-if="$slots.subtext || subtext" class="nc-content-subtext">
+        <slot name="subtext">{{ subtext }}</slot>
+      </div>
+    </div>
+    <slot name="extraRight"> </slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.nc-managed-app-status-menu-item {
+  @apply flex items-center gap-3 px-3 py-2.5 my-0.5 mx-2 rounded-lg transition-colors group;
+
+  &.nc-clickable {
+    @apply cursor-pointer select-none hover:bg-nc-bg-gray-extralight;
+  }
+}
+.nc-icon-wrapper {
+  @apply w-8 h-8 rounded-lg flex items-center justify-center children:flex-none;
+}
+
+.nc-content-label {
+  @apply text-caption font-600 text-nc-content-gray-subtle2;
+}
+
+.nc-content-subtext {
+  @apply text-captionSm text-nc-content-gray-muted;
+}
+</style>
diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
new file mode 100644
index 0000000000..b985df03fb
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
@@ -0,0 +1,240 @@
+<script setup lang="ts">
+const baseStore = useBase()
+
+const { loadManagedApp, loadCurrentVersion } = baseStore
+
+const { base, isManagedAppMaster, isManagedAppInstaller, managedApp, currentVersion, liveVersion } = storeToRefs(baseStore)
+
+const isModalVisible = ref(false)
+const initialTab = ref<'publish' | 'fork' | 'deployments' | undefined>(undefined)
+
+const isOpenDropdown = ref<boolean>(false)
+
+const isDraft = computed(() => currentVersion.value?.status === 'draft')
+
+const openModal = (tab?: 'publish' | 'fork' | 'deployments') => {
+  initialTab.value = tab
+  isModalVisible.value = true
+}
+
+const loadManagedAppAndCurrentVersion = async () => {
+  await loadManagedApp()
+  await loadCurrentVersion()
+}
+
+const handlePublished = async () => {
+  await loadManagedAppAndCurrentVersion()
+}
+
+const handleForked = async () => {
+  await loadManagedAppAndCurrentVersion()
+}
+
+watch(
+  () => (base.value as any)?.managed_app_id,
+  async (managedAppId) => {
+    if (!managedAppId) return
+
+    await loadManagedAppAndCurrentVersion()
+  },
+  { immediate: true },
+)
+
+watchEffect(() => {
+  console.log('managed App', managedApp.value)
+  console.log('currentVersion', currentVersion.value)
+  console.log('liveVersion', liveVersion.value)
+})
+</script>
+
+<template>
+  <NcDropdown
+    v-if="isManagedAppMaster || isManagedAppInstaller"
+    v-model:visible="isOpenDropdown"
+    placement="bottomRight"
+    overlay-class-name="!rounded-xl"
+  >
+    <div class="flex items-center gap-2" @click="openModal()">
+      <!-- Version Badge (clickable to open modal) -->
+      <div
+        class="flex items-center gap-1.5 px-2.5 py-1 bg-nc-bg-gray-light rounded-md border-1 border-nc-border-gray-medium cursor-pointer hover:(bg-nc-bg-gray-medium border-nc-border-gray-dark) transition-colors"
+      >
+        <GeneralIcon icon="ncInfoSolid" class="w-3.5 h-3.5 text-nc-content-gray nc-managed-app-status-info-icon" />
+        <span class="text-xs font-mono font-semibold text-nc-content-gray-emphasis"
+          >v{{ currentVersion?.version || '1.0.0' }}</span
+        >
+        <div
+          v-if="currentVersion?.status === 'draft'"
+          class="ml-1 px-1.5 py-0.5 text-xs rounded bg-nc-bg-orange-light text-nc-content-orange-dark font-medium"
+        >
+          {{ $t('labels.draft') }}
+        </div>
+        <div
+          v-else-if="currentVersion?.status === 'published'"
+          class="ml-1 px-1.5 py-0.5 text-xs rounded bg-nc-bg-green-dark text-nc-content-green-dark font-medium"
+        >
+          {{ $t('labels.published') }}
+        </div>
+      </div>
+    </div>
+    <template #overlay>
+      <div class="nc-managed-app-status-menu flex flex-col">
+        <div class="nc-managed-app-status-menu-header">
+          <span class="uppercase">{{ isManagedAppInstaller ? 'Installed Version' : 'Current State' }}</span>
+          <span v-if="currentVersion?.status === 'draft' && liveVersion">Live: v{{ liveVersion.version }} </span>
+        </div>
+
+        <!-- Publisher application  -->
+        <template v-if="isManagedAppMaster">
+          <!-- Live state  -->
+          <template v-if="liveVersion && !isDraft">
+            <SmartsheetTopbarManagedAppStatusMenuItem
+              :label="`v${liveVersion.version || '1.0.0'}`"
+              icon-wrapper-class="bg-green-50 dark:bg-nc-green-20"
+            >
+              <template #icon>
+                <GeneralIcon icon="circleCheck3" class="text-green-600" />
+              </template>
+              <template #subtext>
+                <span class="text-green-600"> Live & Serving Users </span>
+              </template>
+            </SmartsheetTopbarManagedAppStatusMenuItem>
+
+            <NcDivider />
+            <SmartsheetTopbarManagedAppStatusMenuItem
+              clickable
+              label="Fork to Draft"
+              :subtext="`Create v${liveVersion.version || '1.0.0'} to make changes`"
+              icon-wrapper-class="bg-nc-bg-gray-light dakr:bg-nc-bg-gray-light/75"
+            >
+              <template #icon>
+                <GeneralIcon icon="ncCopy" class="text-nc-content-gray-muted" />
+              </template>
+            </SmartsheetTopbarManagedAppStatusMenuItem>
+          </template>
+
+          <!-- Draft state  -->
+          <template v-if="isDraft">
+            <SmartsheetTopbarManagedAppStatusMenuItem
+              :label="`v${currentVersion.version || '1.0.0'}`"
+              icon-wrapper-class="bg-orange-50 dark:bg-nc-orange-20"
+            >
+              <template #icon>
+                <GeneralIcon icon="edit" class="text-orange-600" />
+              </template>
+              <template #subtext>
+                <span class="text-orange-600"> Editing Draft </span>
+              </template>
+            </SmartsheetTopbarManagedAppStatusMenuItem>
+            <NcDivider />
+
+            <SmartsheetTopbarManagedAppStatusMenuItem clickable icon-wrapper-class="bg-green-50 dark:bg-nc-green-20">
+              <template #icon>
+                <GeneralIcon icon="ncArrowUp" class="text-green-600" />
+              </template>
+              <template #label>
+                <span class="text-green-600"> Publish v{{ currentVersion.version || '1.0.0' }} </span>
+              </template>
+              <template #subtext>
+                {{ liveVersion ? `Replace v${liveVersion.version || '1.0.0'} and go live` : `Go live` }}
+              </template>
+            </SmartsheetTopbarManagedAppStatusMenuItem>
+          </template>
+
+          <!-- Initial draft state  -->
+          <SmartsheetTopbarManagedAppStatusMenuItem
+            v-if="liveVersion && isDraft"
+            clickable
+            label="Discard Draft"
+            :subtext="`Return to v${liveVersion.version || '1.0.0'}`"
+            icon-wrapper-class="bg-nc-bg-gray-light"
+          >
+            <template #icon>
+              <GeneralIcon icon="delete" class="text-nc-content-gray-muted" />
+            </template>
+          </SmartsheetTopbarManagedAppStatusMenuItem>
+          <NcDivider />
+
+          <!-- Version history  -->
+          <div class="flex items-center gap-2 px-5 py-2 text-captionSm text-nc-content-gray-muted cursor-pointer select-none">
+            <GeneralIcon icon="ncClock" />
+            View version history
+          </div>
+        </template>
+
+        <!-- Installer application  -->
+        <template v-if="isManagedAppInstaller">
+          <SmartsheetTopbarManagedAppStatusMenuItem
+            :label="`v${liveVersion?.version || '1.0.0'}`"
+            icon-wrapper-class="bg-green-50 dark:bg-nc-green-20"
+          >
+            <template #icon>
+              <GeneralIcon icon="circleCheck3" class="text-green-600" />
+            </template>
+
+            <template #subtext>
+              <span class="text-green-600">
+                <!-- Todo: @rameshmane7218 - Update text  -->
+                Installed Jan 10, 2025
+              </span>
+            </template>
+          </SmartsheetTopbarManagedAppStatusMenuItem>
+
+          <div class="bg-nc-brand-20 dark:bg-nc-brand-20/40 -mb-1.5">
+            <SmartsheetTopbarManagedAppStatusMenuItem
+              :label="`v${liveVersion?.version || '1.0.0'}`"
+              icon-wrapper-class="bg-brand-50 dark:bg-nc-brand-50"
+            >
+              <template #icon>
+                <GeneralIcon icon="ncDownload" class="text-brand-600" />
+              </template>
+
+              <template #subtext>
+                <span class="text-brand-600"> New version available </span>
+              </template>
+              <template #extraRight>
+                <NcButton size="small"> Update </NcButton>
+              </template>
+            </SmartsheetTopbarManagedAppStatusMenuItem>
+          </div>
+
+          <NcDivider />
+          <SmartsheetTopbarManagedAppStatusMenuItem
+            clickable
+            label="View Changelog"
+            subtext="See what's new in each version"
+            icon-wrapper-class="bg-nc-bg-gray-light"
+          >
+            <template #icon>
+              <GeneralIcon icon="file" class="text-nc-content-gray-muted" />
+            </template>
+          </SmartsheetTopbarManagedAppStatusMenuItem>
+        </template>
+      </div>
+    </template>
+  </NcDropdown>
+
+  <!-- Managed App Modal -->
+  <SmartsheetTopbarManagedAppModal
+    v-model:visible="isModalVisible"
+    :managed-app="managedApp"
+    :current-version="currentVersion"
+    :initial-tab="initialTab"
+    @published="handlePublished"
+    @forked="handleForked"
+  />
+</template>
+
+<style lang="scss" scoped>
+:deep(.nc-managed-app-status-info-icon path.nc-icon-inner) {
+  stroke: var(--nc-bg-gray-light) !important;
+}
+
+.nc-managed-app-status-menu {
+  @apply w-[318px] pb-2;
+}
+
+.nc-managed-app-status-menu-header {
+  @apply flex items-center justify-between gap-2 pt-3 px-5 mb-1 text-nc-content-gray-muted text-captionSm;
+}
+</style>
diff --git a/packages/nc-gui/components/workspace/project/create/ManagedApp.vue b/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
index 2eefaf561d..264cccacee 100644
--- a/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
+++ b/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
@@ -168,7 +168,7 @@ const { formState, isLoading, submit } = useProvideFormBuilderHelper({
       model: 'visibility',
       category: FORM_BUILDER_NON_CATEGORIZED,
       options: [
-        { label: 'Public', value: 'public', icon: 'eye' },
+        // { label: 'Public', value: 'public', icon: 'eye' },
         { label: 'Private', value: 'private', icon: 'lock' },
         { label: 'Unlisted', value: 'unlisted', icon: 'ncEyeOff' },
       ],
diff --git a/packages/nc-gui/store/base.ts b/packages/nc-gui/store/base.ts
index 8816bf6849..c08f1f68ca 100644
--- a/packages/nc-gui/store/base.ts
+++ b/packages/nc-gui/store/base.ts
@@ -18,8 +18,16 @@ export const useBase = defineStore('baseStore', () => {
 
   const basesStore = useBases()
 
+  const managedApp = ref<any>(null)
+
+  const currentVersion = ref<any>(null)
+
+  const liveVersion = ref<any>(null)
+
   const isManagedAppMaster = ref(false)
 
+  const isManagedAppInstaller = ref(false)
+
   const baseId = computed(() => {
     // In shared base mode, use activeProjectId from basesStore which has the correct base ID
     if (route.value.params.typeOrId === 'base') {
@@ -268,6 +276,10 @@ export const useBase = defineStore('baseStore', () => {
     return `${basUrl}${projectPage ? `?page=${projectPage}` : ''}`
   }
 
+  const loadManagedApp = async () => {}
+
+  const loadCurrentVersion = async () => {}
+
   watch(
     () => route.value.params.baseType,
     (n) => {
@@ -343,6 +355,12 @@ export const useBase = defineStore('baseStore', () => {
     isPrivateBase,
     showBaseAccessRequestOverlay,
     isManagedAppMaster,
+    isManagedAppInstaller,
+    managedApp,
+    loadManagedApp,
+    currentVersion,
+    liveVersion,
+    loadCurrentVersion,
   }
 })
 

From 834cd760dca17cc70892660389ecb70dab960d82 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Jan 2026 11:47:14 +0000
Subject: [PATCH 04/18] fix: some ui changes

---
 .../components/dlg/ConvertToManagedApp.vue    |  2 +-
 packages/nc-gui/components/nc/Modal.vue       |  2 +-
 .../smartsheet/topbar/ManagedAppModal.vue     | 87 +++++++------------
 .../topbar/ManagedAppStatus/MenuItem.vue      |  2 +-
 .../topbar/ManagedAppStatus/index.vue         | 69 ++++++++++-----
 .../ManagedAppVersionDeploymentsModal.vue     |  6 +-
 packages/nc-gui/store/base.ts                 |  6 ++
 packages/nc-gui/utils/baseUtils.ts            | 17 ++++
 packages/nocodb-sdk/src/lib/dateTimeHelper.ts | 11 ++-
 9 files changed, 112 insertions(+), 90 deletions(-)

diff --git a/packages/nc-gui/components/dlg/ConvertToManagedApp.vue b/packages/nc-gui/components/dlg/ConvertToManagedApp.vue
index 383415e633..d803ae517f 100644
--- a/packages/nc-gui/components/dlg/ConvertToManagedApp.vue
+++ b/packages/nc-gui/components/dlg/ConvertToManagedApp.vue
@@ -127,7 +127,7 @@ watch(visible, (isVisible) => {
     size="sm"
     height="auto"
     centered
-    wrap-class-name="nc-modal-convert-to-managed-app "
+    wrap-class-name="nc-modal-convert-to-managed-app"
     nc-modal-class-name="!p-0"
   >
     <div class="p-4 w-full flex items-center gap-3 border-b border-nc-border-gray-medium">
diff --git a/packages/nc-gui/components/nc/Modal.vue b/packages/nc-gui/components/nc/Modal.vue
index 7bcd3dc6b1..253bbd30aa 100644
--- a/packages/nc-gui/components/nc/Modal.vue
+++ b/packages/nc-gui/components/nc/Modal.vue
@@ -149,7 +149,7 @@ if (stopEventPropogation.value) {
     <div
       ref="ncModalRef"
       class="flex flex-col nc-modal p-6 h-full"
-      :class="[`${ncModalClassName}`]"
+      :class="[`nc-modal-size-${size} ${ncModalClassName}`]"
       :style="{
         maxHeight: height,
         ...(modalSizes[size] ? { height } : {}),
diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppModal.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppModal.vue
index a1b03d3f3e..4fe5e5f621 100644
--- a/packages/nc-gui/components/smartsheet/topbar/ManagedAppModal.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/ManagedAppModal.vue
@@ -152,24 +152,6 @@ const formatDate = (dateString: string) => {
   }).format(date)
 }
 
-const suggestNextVersion = () => {
-  if (!props.currentVersion?.version) {
-    forkForm.version = '1.0.0'
-    return
-  }
-
-  const currentVersion = props.currentVersion.version
-  const versionParts = currentVersion.split('.')
-  if (versionParts.length === 3) {
-    // Increment minor version for new draft
-    versionParts[1] = String(Number(versionParts[1]) + 1)
-    versionParts[2] = '0'
-    forkForm.version = versionParts.join('.')
-  } else {
-    forkForm.version = ''
-  }
-}
-
 const openVersionDeploymentsModal = (version: any) => {
   selectedVersion.value = version
   showVersionDeploymentsModal.value = true
@@ -193,20 +175,28 @@ watch(
 
       await loadVersions()
       await loadDeployments()
-      if (!isDraft.value && !props.initialTab) {
-        suggestNextVersion()
+      if (!isDraft.value) {
+        forkForm.version = suggestManagedAppNextVersion(props.currentVersion?.version)
       }
     }
   },
 )
+
+const modalSize = computed(() => {
+  if (props.initialTab === 'fork' || props.initialTab === 'publish') {
+    return 'sm'
+  }
+
+  return 'sm'
+})
 </script>
 
 <template>
   <NcModal
     :visible="visible"
-    size="lg"
+    :size="modalSize"
+    :height="modalSize === 'sm' ? 'auto' : undefined"
     nc-modal-class-name="nc-modal-managed-app-management"
-    centered
     @update:visible="emit('update:visible', $event)"
   >
     <div class="flex flex-col h-full">
@@ -256,7 +246,7 @@ watch(
       </div>
 
       <!-- Content -->
-      <div class="flex-1 overflow-y-auto">
+      <div class="flex-1 nc-scrollbar-thin">
         <!-- Publish Tab -->
         <div v-if="activeTab === 'publish'" class="p-6">
           <NcAlert
@@ -346,46 +336,26 @@ watch(
             <div class="nc-deployment-stats">
               <!-- Total Deployments -->
               <div class="nc-stat-card">
-                <div class="nc-stat-icon-wrapper bg-nc-bg-blue-light">
-                  <GeneralIcon icon="ncServer" class="w-5 h-5 text-nc-content-blue-dark" />
-                </div>
-                <div class="nc-stat-content">
-                  <div class="nc-stat-value">{{ deploymentStats.statistics?.totalDeployments || 0 }}</div>
-                  <div class="nc-stat-label">Total Installs</div>
-                </div>
+                <div class="nc-stat-value">{{ deploymentStats.statistics?.totalDeployments || 0 }}</div>
+                <div class="nc-stat-label">Total Installs</div>
               </div>
 
               <!-- Active -->
               <div class="nc-stat-card">
-                <div class="nc-stat-icon-wrapper bg-nc-bg-green-light">
-                  <GeneralIcon icon="check" class="w-5 h-5 text-nc-content-green-dark" />
-                </div>
-                <div class="nc-stat-content">
-                  <div class="nc-stat-value">{{ deploymentStats.statistics?.activeDeployments || 0 }}</div>
-                  <div class="nc-stat-label">Active</div>
-                </div>
+                <div class="nc-stat-value">{{ deploymentStats.statistics?.activeDeployments || 0 }}</div>
+                <div class="nc-stat-label">Active</div>
               </div>
 
               <!-- Failed -->
               <div class="nc-stat-card">
-                <div class="nc-stat-icon-wrapper bg-nc-bg-red-light">
-                  <GeneralIcon icon="alertTriangle" class="w-5 h-5 text-nc-content-red-dark" />
-                </div>
-                <div class="nc-stat-content">
-                  <div class="nc-stat-value">{{ deploymentStats.statistics?.failedDeployments || 0 }}</div>
-                  <div class="nc-stat-label">Failed</div>
-                </div>
+                <div class="nc-stat-value">{{ deploymentStats.statistics?.failedDeployments || 0 }}</div>
+                <div class="nc-stat-label">Failed</div>
               </div>
 
               <!-- Versions -->
               <div class="nc-stat-card">
-                <div class="nc-stat-icon-wrapper bg-nc-bg-purple-light">
-                  <GeneralIcon icon="ncGitBranch" class="w-5 h-5 text-nc-content-purple-dark" />
-                </div>
-                <div class="nc-stat-content">
-                  <div class="nc-stat-value">{{ deploymentStats.statistics?.totalVersions || 0 }}</div>
-                  <div class="nc-stat-label">Versions</div>
-                </div>
+                <div class="nc-stat-value">{{ deploymentStats.statistics?.totalVersions || 0 }}</div>
+                <div class="nc-stat-label">Versions</div>
               </div>
             </div>
 
@@ -545,7 +515,7 @@ watch(
 
 // Deployments Tab Styles
 .nc-deployments-content {
-  @apply p-6;
+  @apply px-6 pb-6;
 }
 
 .nc-deployments-loading {
@@ -553,11 +523,11 @@ watch(
 }
 
 .nc-deployment-stats {
-  @apply grid grid-cols-4 gap-4 mb-6;
+  @apply grid grid-cols-4 mb-6;
 }
 
 .nc-stat-card {
-  @apply bg-nc-bg-gray-extralight border-1 border-nc-border-gray-light rounded-xl p-4 transition-all duration-200 hover:(border-nc-border-gray-medium shadow-hover);
+  @apply flex flex-col gap-1 items-center justify-center border-r-1 border-nc-border-gray-light last:border-r-0 p-4;
 }
 
 .nc-stat-icon-wrapper {
@@ -569,11 +539,11 @@ watch(
 }
 
 .nc-stat-value {
-  @apply text-3xl font-bold text-nc-content-gray-emphasis leading-none;
+  @apply text-subHeading1 font-normal;
 }
 
 .nc-stat-label {
-  @apply text-xs font-medium text-nc-content-gray-subtle2 uppercase tracking-wide;
+  @apply text-captionSm text-nc-content-gray-muted uppercase;
 }
 
 .nc-version-list-wrapper {
@@ -713,5 +683,10 @@ watch(
 <style lang="scss">
 .nc-modal-managed-app-management {
   @apply !p-0;
+
+  &.nc-modal-size-sm {
+    max-height: min(90vh, 540px) !important;
+    height: min(90vh, 540px) !important;
+  }
 }
 </style>
diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/MenuItem.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/MenuItem.vue
index f8f6e02b08..ec297295bc 100644
--- a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/MenuItem.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/MenuItem.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 interface Props {
-  label: string
+  label?: string
   subtext?: string
   icon?: IconMapKey
   iconWrapperClass?: string
diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
index b985df03fb..1c0a382ecd 100644
--- a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
@@ -3,16 +3,19 @@ const baseStore = useBase()
 
 const { loadManagedApp, loadCurrentVersion } = baseStore
 
-const { base, isManagedAppMaster, isManagedAppInstaller, managedApp, currentVersion, liveVersion } = storeToRefs(baseStore)
+const { base, isManagedAppMaster, isManagedAppInstaller, managedApp, currentVersion, liveVersion, managedAppVersionsInfo } =
+  storeToRefs(baseStore)
 
 const isModalVisible = ref(false)
 const initialTab = ref<'publish' | 'fork' | 'deployments' | undefined>(undefined)
 
 const isOpenDropdown = ref<boolean>(false)
 
-const isDraft = computed(() => currentVersion.value?.status === 'draft')
+const isDraft = computed(() => managedAppVersionsInfo.value.current?.status === 'draft')
 
 const openModal = (tab?: 'publish' | 'fork' | 'deployments') => {
+  isOpenDropdown.value = false
+
   initialTab.value = tab
   isModalVisible.value = true
 }
@@ -54,23 +57,23 @@ watchEffect(() => {
     placement="bottomRight"
     overlay-class-name="!rounded-xl"
   >
-    <div class="flex items-center gap-2" @click="openModal()">
+    <div class="flex items-center gap-2">
       <!-- Version Badge (clickable to open modal) -->
       <div
         class="flex items-center gap-1.5 px-2.5 py-1 bg-nc-bg-gray-light rounded-md border-1 border-nc-border-gray-medium cursor-pointer hover:(bg-nc-bg-gray-medium border-nc-border-gray-dark) transition-colors"
       >
         <GeneralIcon icon="ncInfoSolid" class="w-3.5 h-3.5 text-nc-content-gray nc-managed-app-status-info-icon" />
         <span class="text-xs font-mono font-semibold text-nc-content-gray-emphasis"
-          >v{{ currentVersion?.version || '1.0.0' }}</span
+          >v{{ managedAppVersionsInfo.current?.version || '1.0.0' }}</span
         >
         <div
-          v-if="currentVersion?.status === 'draft'"
+          v-if="managedAppVersionsInfo.current?.status === 'draft'"
           class="ml-1 px-1.5 py-0.5 text-xs rounded bg-nc-bg-orange-light text-nc-content-orange-dark font-medium"
         >
           {{ $t('labels.draft') }}
         </div>
         <div
-          v-else-if="currentVersion?.status === 'published'"
+          v-else-if="managedAppVersionsInfo.current?.status === 'published'"
           class="ml-1 px-1.5 py-0.5 text-xs rounded bg-nc-bg-green-dark text-nc-content-green-dark font-medium"
         >
           {{ $t('labels.published') }}
@@ -81,15 +84,17 @@ watchEffect(() => {
       <div class="nc-managed-app-status-menu flex flex-col">
         <div class="nc-managed-app-status-menu-header">
           <span class="uppercase">{{ isManagedAppInstaller ? 'Installed Version' : 'Current State' }}</span>
-          <span v-if="currentVersion?.status === 'draft' && liveVersion">Live: v{{ liveVersion.version }} </span>
+          <span v-if="managedAppVersionsInfo.current?.status === 'draft' && managedAppVersionsInfo.published"
+            >Live: v{{ managedAppVersionsInfo.published.version }}
+          </span>
         </div>
 
         <!-- Publisher application  -->
         <template v-if="isManagedAppMaster">
           <!-- Live state  -->
-          <template v-if="liveVersion && !isDraft">
+          <template v-if="managedAppVersionsInfo.published && !isDraft">
             <SmartsheetTopbarManagedAppStatusMenuItem
-              :label="`v${liveVersion.version || '1.0.0'}`"
+              :label="`v${managedAppVersionsInfo.published.version || '1.0.0'}`"
               icon-wrapper-class="bg-green-50 dark:bg-nc-green-20"
             >
               <template #icon>
@@ -104,8 +109,11 @@ watchEffect(() => {
             <SmartsheetTopbarManagedAppStatusMenuItem
               clickable
               label="Fork to Draft"
-              :subtext="`Create v${liveVersion.version || '1.0.0'} to make changes`"
+              :subtext="`Create v${suggestManagedAppNextVersion(
+                managedAppVersionsInfo.published.version || '1.0.0',
+              )} to make changes`"
               icon-wrapper-class="bg-nc-bg-gray-light dakr:bg-nc-bg-gray-light/75"
+              @click="openModal('fork')"
             >
               <template #icon>
                 <GeneralIcon icon="ncCopy" class="text-nc-content-gray-muted" />
@@ -116,7 +124,7 @@ watchEffect(() => {
           <!-- Draft state  -->
           <template v-if="isDraft">
             <SmartsheetTopbarManagedAppStatusMenuItem
-              :label="`v${currentVersion.version || '1.0.0'}`"
+              :label="`v${managedAppVersionsInfo.current.version || '1.0.0'}`"
               icon-wrapper-class="bg-orange-50 dark:bg-nc-orange-20"
             >
               <template #icon>
@@ -128,25 +136,33 @@ watchEffect(() => {
             </SmartsheetTopbarManagedAppStatusMenuItem>
             <NcDivider />
 
-            <SmartsheetTopbarManagedAppStatusMenuItem clickable icon-wrapper-class="bg-green-50 dark:bg-nc-green-20">
+            <SmartsheetTopbarManagedAppStatusMenuItem
+              clickable
+              icon-wrapper-class="bg-green-50 dark:bg-nc-green-20"
+              @click="openModal('publish')"
+            >
               <template #icon>
                 <GeneralIcon icon="ncArrowUp" class="text-green-600" />
               </template>
               <template #label>
-                <span class="text-green-600"> Publish v{{ currentVersion.version || '1.0.0' }} </span>
+                <span class="text-green-600"> Publish v{{ managedAppVersionsInfo.current.version || '1.0.0' }} </span>
               </template>
               <template #subtext>
-                {{ liveVersion ? `Replace v${liveVersion.version || '1.0.0'} and go live` : `Go live` }}
+                {{
+                  managedAppVersionsInfo.published
+                    ? `Replace v${managedAppVersionsInfo.published.version || '1.0.0'} and go live`
+                    : `Go live`
+                }}
               </template>
             </SmartsheetTopbarManagedAppStatusMenuItem>
           </template>
 
           <!-- Initial draft state  -->
           <SmartsheetTopbarManagedAppStatusMenuItem
-            v-if="liveVersion && isDraft"
+            v-if="managedAppVersionsInfo.published && isDraft"
             clickable
             label="Discard Draft"
-            :subtext="`Return to v${liveVersion.version || '1.0.0'}`"
+            :subtext="`Return to v${managedAppVersionsInfo.published.version || '1.0.0'}`"
             icon-wrapper-class="bg-nc-bg-gray-light"
           >
             <template #icon>
@@ -156,7 +172,10 @@ watchEffect(() => {
           <NcDivider />
 
           <!-- Version history  -->
-          <div class="flex items-center gap-2 px-5 py-2 text-captionSm text-nc-content-gray-muted cursor-pointer select-none">
+          <div
+            class="flex items-center gap-2 px-5 py-2 text-captionSm text-nc-content-gray-muted cursor-pointer select-none"
+            @click="openModal('deployments')"
+          >
             <GeneralIcon icon="ncClock" />
             View version history
           </div>
@@ -165,24 +184,26 @@ watchEffect(() => {
         <!-- Installer application  -->
         <template v-if="isManagedAppInstaller">
           <SmartsheetTopbarManagedAppStatusMenuItem
-            :label="`v${liveVersion?.version || '1.0.0'}`"
+            :label="`v${managedAppVersionsInfo.current?.version || '1.0.0'}`"
             icon-wrapper-class="bg-green-50 dark:bg-nc-green-20"
           >
             <template #icon>
               <GeneralIcon icon="circleCheck3" class="text-green-600" />
             </template>
 
-            <template #subtext>
+            <template v-if="managedAppVersionsInfo.current?.published_at" #subtext>
               <span class="text-green-600">
-                <!-- Todo: @rameshmane7218 - Update text  -->
-                Installed Jan 10, 2025
+                Published {{ parseStringDateTime(managedAppVersionsInfo.current?.published_at, undefined, true, 'MMM DD, YYYY') }}
               </span>
             </template>
           </SmartsheetTopbarManagedAppStatusMenuItem>
 
-          <div class="bg-nc-brand-20 dark:bg-nc-brand-20/40 -mb-1.5">
+          <div
+            v-if="!base.auto_update && managedAppVersionsInfo.updateAvailable"
+            class="bg-nc-brand-20 dark:bg-nc-brand-20/40 -mb-1.5"
+          >
             <SmartsheetTopbarManagedAppStatusMenuItem
-              :label="`v${liveVersion?.version || '1.0.0'}`"
+              :label="`v${managedAppVersionsInfo.published?.version || '1.0.0'}`"
               icon-wrapper-class="bg-brand-50 dark:bg-nc-brand-50"
             >
               <template #icon>
@@ -218,7 +239,7 @@ watchEffect(() => {
   <SmartsheetTopbarManagedAppModal
     v-model:visible="isModalVisible"
     :managed-app="managedApp"
-    :current-version="currentVersion"
+    :current-version="managedAppVersionsInfo.current"
     :initial-tab="initialTab"
     @published="handlePublished"
     @forked="handleForked"
diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppVersionDeploymentsModal.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppVersionDeploymentsModal.vue
index 5c0ea46d02..6da59a3f61 100644
--- a/packages/nc-gui/components/smartsheet/topbar/ManagedAppVersionDeploymentsModal.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/ManagedAppVersionDeploymentsModal.vue
@@ -143,7 +143,7 @@ watch(
 </script>
 
 <template>
-  <GeneralModal :visible="visible" size="large" centered @update:visible="emit('update:visible', $event)">
+  <NcModal :visible="visible" size="lg" nc-modal-class-name="!p-0" @update:visible="emit('update:visible', $event)">
     <div class="nc-deployments-modal">
       <!-- Header -->
       <div class="nc-deployments-header">
@@ -246,7 +246,7 @@ watch(
                             </div>
                             <span class="nc-log-divider">•</span>
                             <div class="nc-log-time">
-                              <GeneralIcon icon="clock" class="w-3.5 h-3.5 opacity-60" />
+                              <GeneralIcon icon="ncClock" class="w-3.5 h-3.5 opacity-60" />
                               <span>{{ formatDate(log.createdAt) }}</span>
                             </div>
                           </div>
@@ -305,7 +305,7 @@ watch(
         </div>
       </div>
     </div>
-  </GeneralModal>
+  </NcModal>
 </template>
 
 <style lang="scss" scoped>
diff --git a/packages/nc-gui/store/base.ts b/packages/nc-gui/store/base.ts
index c08f1f68ca..7b3b154338 100644
--- a/packages/nc-gui/store/base.ts
+++ b/packages/nc-gui/store/base.ts
@@ -24,6 +24,10 @@ export const useBase = defineStore('baseStore', () => {
 
   const liveVersion = ref<any>(null)
 
+  const managedAppVersions = ref<any[]>([])
+
+  const managedAppVersionsInfo = computed(() => {})
+
   const isManagedAppMaster = ref(false)
 
   const isManagedAppInstaller = ref(false)
@@ -361,6 +365,8 @@ export const useBase = defineStore('baseStore', () => {
     currentVersion,
     liveVersion,
     loadCurrentVersion,
+    managedAppVersions,
+    managedAppVersionsInfo,
   }
 })
 
diff --git a/packages/nc-gui/utils/baseUtils.ts b/packages/nc-gui/utils/baseUtils.ts
index be9cb05fbe..e9963f882f 100644
--- a/packages/nc-gui/utils/baseUtils.ts
+++ b/packages/nc-gui/utils/baseUtils.ts
@@ -104,3 +104,20 @@ export const extractAiBaseCreateQueryParams = (query: any) => {
 
   return searchQuery
 }
+
+export const suggestManagedAppNextVersion = (currentVersion?: string) => {
+  if (!currentVersion) {
+    return '1.0.0'
+  }
+
+  const versionParts = currentVersion.split('.')
+
+  if (versionParts.length === 3) {
+    // Increment minor version for new draft
+    versionParts[1] = String(Number(versionParts[1]) + 1)
+    versionParts[2] = '0'
+    return versionParts.join('.')
+  } else {
+    return ''
+  }
+}
diff --git a/packages/nocodb-sdk/src/lib/dateTimeHelper.ts b/packages/nocodb-sdk/src/lib/dateTimeHelper.ts
index 0b958c12ed..1fa0723bfb 100644
--- a/packages/nocodb-sdk/src/lib/dateTimeHelper.ts
+++ b/packages/nocodb-sdk/src/lib/dateTimeHelper.ts
@@ -90,16 +90,19 @@ export function parseStringDate(v: string, dateFormat: string) {
 export function parseStringDateTime(
   v: string,
   dateTimeFormat: string = `${dateFormats[0]} ${timeFormats[0]}`,
-  toLocal: boolean = true
+  toLocal: boolean = true,
+  newDateTimeFormat?: string
 ) {
   const dayjsObj = toLocal ? dayjs(v).local() : dayjs(v);
 
   if (dayjsObj.isValid()) {
-    v = dayjsObj.format(dateTimeFormat);
+    v = dayjsObj.format(newDateTimeFormat || dateTimeFormat);
   } else {
     v = toLocal
-      ? dayjs(v, dateTimeFormat).local().format(dateTimeFormat)
-      : dayjs(v, dateTimeFormat).format(dateTimeFormat);
+      ? dayjs(v, dateTimeFormat)
+          .local()
+          .format(newDateTimeFormat || dateTimeFormat)
+      : dayjs(v, dateTimeFormat).format(newDateTimeFormat || dateTimeFormat);
   }
 
   return v;

From db117ea89d77ff2337496d0718055209fdfae60a Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Jan 2026 11:47:14 +0000
Subject: [PATCH 05/18] fix: add missing published_at information

---
 .../smartsheet/topbar/ManagedAppModal.vue     | 22 +++++--------------
 .../topbar/ManagedAppStatus/index.vue         |  8 +------
 packages/nocodb-sdk/src/lib/dateTimeHelper.ts | 11 ++++------
 3 files changed, 11 insertions(+), 30 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppModal.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppModal.vue
index 4fe5e5f621..d8a5d73d9b 100644
--- a/packages/nc-gui/components/smartsheet/topbar/ManagedAppModal.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/ManagedAppModal.vue
@@ -142,14 +142,8 @@ const createNewDraft = async () => {
 
 const formatDate = (dateString: string) => {
   if (!dateString) return 'N/A'
-  const date = new Date(dateString)
-  return new Intl.DateTimeFormat('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  }).format(date)
+
+  return parseStringDateTime(dateString, 'MMM DD, YYYY, HH:mm A')
 }
 
 const openVersionDeploymentsModal = (version: any) => {
@@ -342,13 +336,13 @@ const modalSize = computed(() => {
 
               <!-- Active -->
               <div class="nc-stat-card">
-                <div class="nc-stat-value">{{ deploymentStats.statistics?.activeDeployments || 0 }}</div>
+                <div class="nc-stat-value text-green-600">{{ deploymentStats.statistics?.activeDeployments || 0 }}</div>
                 <div class="nc-stat-label">Active</div>
               </div>
 
               <!-- Failed -->
               <div class="nc-stat-card">
-                <div class="nc-stat-value">{{ deploymentStats.statistics?.failedDeployments || 0 }}</div>
+                <div class="nc-stat-value text-red-600">{{ deploymentStats.statistics?.failedDeployments || 0 }}</div>
                 <div class="nc-stat-label">Failed</div>
               </div>
 
@@ -527,23 +521,19 @@ const modalSize = computed(() => {
 }
 
 .nc-stat-card {
-  @apply flex flex-col gap-1 items-center justify-center border-r-1 border-nc-border-gray-light last:border-r-0 p-4;
+  @apply flex flex-col gap-1 items-center justify-center border-r-1 border-nc-border-gray-medium last:border-r-0 p-4 text-nc-content-gray-subtle;
 }
 
 .nc-stat-icon-wrapper {
   @apply w-10 h-10 rounded-lg flex items-center justify-center mb-3;
 }
 
-.nc-stat-content {
-  @apply space-y-1;
-}
-
 .nc-stat-value {
   @apply text-subHeading1 font-normal;
 }
 
 .nc-stat-label {
-  @apply text-captionSm text-nc-content-gray-muted uppercase;
+  @apply text-tiny text-nc-content-gray-muted uppercase;
 }
 
 .nc-version-list-wrapper {
diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
index 1c0a382ecd..1941b6987a 100644
--- a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
@@ -42,12 +42,6 @@ watch(
   },
   { immediate: true },
 )
-
-watchEffect(() => {
-  console.log('managed App', managedApp.value)
-  console.log('currentVersion', currentVersion.value)
-  console.log('liveVersion', liveVersion.value)
-})
 </script>
 
 <template>
@@ -193,7 +187,7 @@ watchEffect(() => {
 
             <template v-if="managedAppVersionsInfo.current?.published_at" #subtext>
               <span class="text-green-600">
-                Published {{ parseStringDateTime(managedAppVersionsInfo.current?.published_at, undefined, true, 'MMM DD, YYYY') }}
+                Published {{ parseStringDateTime(managedAppVersionsInfo.current?.published_at, 'MMM DD, YYYY, HH:mm A') }}
               </span>
             </template>
           </SmartsheetTopbarManagedAppStatusMenuItem>
diff --git a/packages/nocodb-sdk/src/lib/dateTimeHelper.ts b/packages/nocodb-sdk/src/lib/dateTimeHelper.ts
index 1fa0723bfb..0b958c12ed 100644
--- a/packages/nocodb-sdk/src/lib/dateTimeHelper.ts
+++ b/packages/nocodb-sdk/src/lib/dateTimeHelper.ts
@@ -90,19 +90,16 @@ export function parseStringDate(v: string, dateFormat: string) {
 export function parseStringDateTime(
   v: string,
   dateTimeFormat: string = `${dateFormats[0]} ${timeFormats[0]}`,
-  toLocal: boolean = true,
-  newDateTimeFormat?: string
+  toLocal: boolean = true
 ) {
   const dayjsObj = toLocal ? dayjs(v).local() : dayjs(v);
 
   if (dayjsObj.isValid()) {
-    v = dayjsObj.format(newDateTimeFormat || dateTimeFormat);
+    v = dayjsObj.format(dateTimeFormat);
   } else {
     v = toLocal
-      ? dayjs(v, dateTimeFormat)
-          .local()
-          .format(newDateTimeFormat || dateTimeFormat)
-      : dayjs(v, dateTimeFormat).format(newDateTimeFormat || dateTimeFormat);
+      ? dayjs(v, dateTimeFormat).local().format(dateTimeFormat)
+      : dayjs(v, dateTimeFormat).format(dateTimeFormat);
   }
 
   return v;

From 059fb9a925448859d15080e28ce292a4a8e46d80 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Jan 2026 11:47:14 +0000
Subject: [PATCH 06/18] fix: clean up oss and convert to managed app code

---
 .../dashboard/TreeView/ProjectNode.vue        |   9 -
 .../components/dlg/ConvertToManagedApp.vue    | 185 ------------------
 .../components/dlg/ManagedApp/Header.vue      |  60 ++++++
 .../components/dlg/ManagedApp/Index.vue       |  59 ++++++
 .../workspace/project/create/ManagedApp.vue   | 146 +++++++-------
 5 files changed, 192 insertions(+), 267 deletions(-)
 delete mode 100644 packages/nc-gui/components/dlg/ConvertToManagedApp.vue
 create mode 100644 packages/nc-gui/components/dlg/ManagedApp/Header.vue
 create mode 100644 packages/nc-gui/components/dlg/ManagedApp/Index.vue

diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index b31124afc2..2013abb2a8 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -369,12 +369,6 @@ const duplicateProject = (base: BaseType) => {
   isDuplicateDlgOpen.value = true
 }
 
-const isConvertToManagedAppDlgOpen = ref(false)
-
-const convertToManagedApp = () => {
-  isConvertToManagedAppDlgOpen.value = true
-}
-
 const tableDelete = () => {
   isTableDeleteDialogVisible.value = true
   $e('c:table:delete')
@@ -619,7 +613,6 @@ defineExpose({
                       @click-menu="onClickMenu"
                       @rename="enableEditMode()"
                       @duplicate-project="duplicateProject($event)"
-                      @convert-to-managed-app="convertToManagedApp"
                       @copy-project-info="copyProjectInfo()"
                       @open-erd-view="openErdView($event)"
                       @open-base-settings="openBaseSettings($event)"
@@ -680,7 +673,6 @@ defineExpose({
         @click-menu="onClickMenu"
         @rename="enableEditMode(true)"
         @duplicate-project="duplicateProject($event)"
-        @convert-to-managed-app="convertToManagedApp"
         @copy-project-info="copyProjectInfo()"
         @open-erd-view="openErdView($event)"
         @open-base-settings="openBaseSettings($event)"
@@ -765,7 +757,6 @@ defineExpose({
   />
   <DlgBaseDelete v-model:visible="isBaseDeleteDialogVisible" :base-id="base?.id" />
   <DlgBaseDuplicate v-if="selectedProjectToDuplicate" v-model="isDuplicateDlgOpen" :base="selectedProjectToDuplicate" />
-  <DlgConvertToManagedApp v-if="base?.id" v-model:visible="isConvertToManagedAppDlgOpen" :base-id="base.id" />
   <GeneralModal v-model:visible="isErdModalOpen" size="large">
     <div class="h-[80vh]">
       <LazyDashboardSettingsErd :base-id="base?.id" :source-id="activeBaseId" />
diff --git a/packages/nc-gui/components/dlg/ConvertToManagedApp.vue b/packages/nc-gui/components/dlg/ConvertToManagedApp.vue
deleted file mode 100644
index d803ae517f..0000000000
--- a/packages/nc-gui/components/dlg/ConvertToManagedApp.vue
+++ /dev/null
@@ -1,185 +0,0 @@
-<script setup lang="ts">
-import { FormBuilderValidatorType } from 'nocodb-sdk'
-import { FORM_BUILDER_NON_CATEGORIZED, FormBuilderInputType } from '#imports'
-
-const props = defineProps<{
-  baseId: string
-}>()
-
-const visible = defineModel<boolean>('visible', { required: true })
-
-const { $api } = useNuxtApp()
-const { t } = useI18n()
-
-const initialManagedAppFormState = ref<Record<string, any>>({
-  title: '',
-  description: '',
-  category: '',
-  visibility: 'private',
-})
-
-const { base } = storeToRefs(useBase())
-
-const basesStore = useBases()
-
-const convertToManagedApp = async (formState: Record<string, any>) => {
-  try {
-    const response = await $api.internal.postOperation(
-      base.value!.fk_workspace_id as string,
-      props.baseId,
-      {
-        operation: 'managedAppCreate',
-      } as any,
-      {
-        title: formState.title,
-        description: formState.description,
-        category: formState.category,
-        visibility: formState.visibility,
-      },
-    )
-
-    message.success(t('msg.success.managedAppCreated'))
-    visible.value = false
-
-    // Update the base with the managed_app_id from response
-    if (response && response.managed_app_id) {
-      const currentBase = basesStore.bases.get(props.baseId)
-      if (currentBase) {
-        ;(currentBase as any).managed_app_id = response.managed_app_id
-      }
-    }
-
-    // Reload base to ensure all managed app data is loaded
-    await basesStore.loadProject(props.baseId, true)
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  }
-}
-
-const { formState, isLoading, submit } = useProvideFormBuilderHelper({
-  formSchema: [
-    {
-      type: FormBuilderInputType.Input,
-      label: t('labels.managedAppTitle'),
-      span: 24,
-      model: 'title',
-      placeholder: 'Enter a descriptive title',
-      category: FORM_BUILDER_NON_CATEGORIZED,
-      validators: [
-        {
-          type: FormBuilderValidatorType.Required,
-          message: t('labels.titleRequired'),
-        },
-      ],
-      required: true,
-    },
-    {
-      type: FormBuilderInputType.Textarea,
-      label: t('labels.managedAppDescription'),
-      span: 24,
-      model: 'description',
-      placeholder: "Describe your application's capabilities",
-      category: FORM_BUILDER_NON_CATEGORIZED,
-    },
-    {
-      type: FormBuilderInputType.Input,
-      label: t('labels.managedAppCategory'),
-      span: 12,
-      model: 'category',
-      placeholder: 'e.g., CRM, HR',
-      category: FORM_BUILDER_NON_CATEGORIZED,
-    },
-    {
-      type: FormBuilderInputType.Select,
-      label: t('labels.managedAppVisibility'),
-      span: 12,
-      model: 'visibility',
-      category: FORM_BUILDER_NON_CATEGORIZED,
-      options: [
-        // { label: 'Public', value: 'public', icon: 'eye' },
-        { label: 'Private', value: 'private', icon: 'lock' },
-        { label: 'Unlisted', value: 'unlisted', icon: 'ncEyeOff' },
-      ],
-      defaultValue: 'private',
-    },
-  ],
-  onSubmit: async () => {
-    return await convertToManagedApp(formState.value)
-  },
-  initialState: initialManagedAppFormState,
-})
-
-watch(visible, (isVisible) => {
-  if (isVisible && base.value) {
-    formState.value = {
-      title: base.value.title || '',
-      description: '',
-      category: '',
-      visibility: 'private',
-    }
-  }
-})
-</script>
-
-<template>
-  <NcModal
-    v-model:visible="visible"
-    size="sm"
-    height="auto"
-    centered
-    wrap-class-name="nc-modal-convert-to-managed-app"
-    nc-modal-class-name="!p-0"
-  >
-    <div class="p-4 w-full flex items-center gap-3 border-b border-nc-border-gray-medium">
-      <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-brand-500 to-brand-600 flex items-center justify-center">
-        <GeneralIcon icon="ncBox" class="w-5 h-5 text-white" />
-      </div>
-      <div class="flex-1">
-        <div class="font-semibold text-lg text-nc-content-gray-emphasis">Convert to Managed App</div>
-        <div class="text-xs text-nc-content-gray-subtle2">{{ $t('labels.publishToAppStore') }}</div>
-      </div>
-
-      <NcButton size="small" type="text" class="self-start" @click="visible = false">
-        <GeneralIcon icon="close" class="text-nc-content-gray-subtle2" />
-      </NcButton>
-    </div>
-
-    <div class="flex-1 p-6 nc-scrollbar-thin">
-      <NcFormBuilder>
-        <template #header>
-          <NcAlert
-            type="info"
-            align="top"
-            description="Convert this base into a living application that can be published to the App Store. You'll be able to manage versions and push updates to all installations."
-            class="!p-3 !items-start bg-nc-bg-blue-light border-1 !border-nc-blue-200 rounded-lg p-3 mb-4"
-          >
-            <template #icon>
-              <GeneralIcon icon="info" class="w-4 h-4 mt-0.5 text-nc-content-blue-dark flex-none" />
-            </template>
-          </NcAlert>
-        </template>
-      </NcFormBuilder>
-    </div>
-
-    <div class="flex justify-end gap-2 px-4 py-3 border-t border-nc-border-gray-medium">
-      <NcButton size="small" type="secondary" :disabled="isLoading" @click="visible = false">
-        {{ $t('general.cancel') }}
-      </NcButton>
-      <NcButton size="small" type="primary" :loading="isLoading" @click="submit">
-        <template #icon>
-          <GeneralIcon icon="ncBox" />
-        </template>
-        Convert to Managed App
-      </NcButton>
-    </div>
-  </NcModal>
-</template>
-
-<style lang="scss">
-.nc-modal-convert-to-managed-app {
-  .nc-modal {
-    max-height: min(90vh, 540px) !important;
-    height: min(90vh, 540px) !important;
-  }
-}
-</style>
diff --git a/packages/nc-gui/components/dlg/ManagedApp/Header.vue b/packages/nc-gui/components/dlg/ManagedApp/Header.vue
new file mode 100644
index 0000000000..a55de64a1b
--- /dev/null
+++ b/packages/nc-gui/components/dlg/ManagedApp/Header.vue
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+interface Props {
+  visible: boolean
+  iconClass?: string
+  title?: string
+  subTitle?: string
+  titleClass?: string
+  subTitleClass?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  iconClass: '',
+  titleClass: '',
+  subTitleClass: '',
+})
+
+const emits = defineEmits(['update:visible'])
+
+const { title, subTitle } = toRefs(props)
+
+const vVisible = useVModel(props, 'visible', emits)
+</script>
+
+<template>
+  <div class="p-4 w-full flex items-center gap-3 border-b border-nc-border-gray-medium">
+    <div class="nc-dlg-managed-app-icon" :class="iconClass">
+      <slot name="icon">
+        <GeneralIcon icon="ncBox" class="h-5 w-5" />
+      </slot>
+    </div>
+    <div class="flex-1">
+      <div class="font-semibold text-lg text-nc-content-gray-emphasis" :class="titleClass">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+      <div v-if="$slots.subTitle || subTitle" class="text-xs text-nc-content-gray-subtle2" :class="subTitleClass">
+        <slot name="subTitle">
+          {{ subTitle }}
+        </slot>
+      </div>
+    </div>
+
+    <slot name="rightExtra"> </slot>
+
+    <slot name="closeButton">
+      <NcButton size="small" type="text" class="self-start" @click="vVisible = false">
+        <GeneralIcon icon="close" class="text-nc-content-gray-subtle2" />
+      </NcButton>
+    </slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.nc-dlg-managed-app-icon {
+  @apply w-10 h-10 rounded-xl flex items-center justify-center text-white shadow-sm;
+  background: linear-gradient(135deg, var(--nc-content-brand) 0%, var(--nc-content-blue-medium) 100%);
+  box-shadow: 0 2px 4px rgba(51, 102, 255, 0.15);
+}
+</style>
diff --git a/packages/nc-gui/components/dlg/ManagedApp/Index.vue b/packages/nc-gui/components/dlg/ManagedApp/Index.vue
new file mode 100644
index 0000000000..b0b857f37f
--- /dev/null
+++ b/packages/nc-gui/components/dlg/ManagedApp/Index.vue
@@ -0,0 +1,59 @@
+<script lang="ts" setup>
+interface Props {
+  visible: boolean
+  modalSize: 'small' | 'medium' | 'large' | keyof typeof modalSizes
+  title?: string
+  subTitle?: string
+  variant?: 'convertToManagedApp'
+  contentClass?: string
+  maskClosable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modalSize: 'sm',
+  contentClass: '',
+  maskClosable: true,
+})
+
+const emits = defineEmits(['update:visible'])
+
+const vVisible = useVModel(props, 'visible', emits)
+
+const { modalSize } = toRefs(props)
+</script>
+
+<template>
+  <NcModal
+    v-model:visible="vVisible"
+    :size="modalSize"
+    :height="modalSize === 'sm' ? 'auto' : undefined"
+    :mask-closable="maskClosable"
+    nc-modal-class-name="nc-modal-dlg-managed-app"
+  >
+    <slot v-if="$slots.default"> </slot>
+    <template v-else>
+      <slot name="header">
+        <NcDlgManagedAppHeader :visible="vVisible" :modalSize="modalSize" :title="title" :subTitle="subTitle" />
+      </slot>
+
+      <div class="flex-1 nc-scrollbar-thin" :class="contentClass">
+        <slot name="content"> </slot>
+      </div>
+
+      <slot v-if="$slots.footer" name="footer"> </slot>
+    </template>
+  </NcModal>
+</template>
+
+<style lang="scss" scoped></style>
+
+<style lang="scss">
+.nc-modal-dlg-managed-app {
+  @apply !p-0;
+
+  &.nc-modal-size-sm {
+    max-height: min(90vh, 560px) !important;
+    height: min(90vh, 560px) !important;
+  }
+}
+</style>
diff --git a/packages/nc-gui/components/workspace/project/create/ManagedApp.vue b/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
index 264cccacee..fad9b47b3c 100644
--- a/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
+++ b/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
@@ -1,16 +1,22 @@
 <script setup lang="ts">
-import { BaseVersion, FormBuilderValidatorType } from 'nocodb-sdk'
+import { type FormDefinition, BaseVersion, FormBuilderValidatorType } from 'nocodb-sdk'
 import { FORM_BUILDER_NON_CATEGORIZED, FormBuilderInputType } from '#imports'
 
 const props = defineProps<{
   visible: boolean
   baseId?: string
+  title?: string
+  subTitle?: string
+  alertDescription?: string
+  submitButtonText?: string
 }>()
 
 const emit = defineEmits(['update:visible'])
 
 const visible = useVModel(props, 'visible', emit)
 
+const { title, subTitle, alertDescription, submitButtonText } = toRefs(props)
+
 const { $api } = useNuxtApp()
 
 const { t } = useI18n()
@@ -22,8 +28,8 @@ const initialSanboxFormState = ref<Record<string, any>>({
   description: '',
   category: '',
   visibility: 'private',
-  startFrom: 'new',
-  baseId: undefined,
+  startFrom: props.baseId ? 'existing' : 'new',
+  baseId: props.baseId,
 })
 
 const workspaceStore = useWorkspace()
@@ -32,6 +38,10 @@ const { activeWorkspaceId } = storeToRefs(workspaceStore)
 
 const basesStore = useBases()
 
+const baseStore = useBase()
+
+const { base } = storeToRefs(baseStore)
+
 const createManagedApp = async (formState: Record<string, any>) => {
   try {
     const response = await $api.internal.postOperation(
@@ -77,11 +87,14 @@ const createManagedApp = async (formState: Record<string, any>) => {
       await basesStore.loadProjects()
     }
 
-    if (response?.base_id || formState.baseId) {
+    if (!props.baseId && (response?.base_id || formState.baseId) && base.value?.id !== (response?.base_id || formState.baseId)) {
       navigateToProject({
         baseId: response?.base_id || formState.baseId,
         workspaceId: activeWorkspaceId.value as string,
       })
+    } else if (base.value?.id && base.value.id === formState.baseId) {
+      baseStore.loadManagedApp()
+      baseStore.loadCurrentVersion()
     }
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
@@ -117,42 +130,47 @@ const { formState, isLoading, submit } = useProvideFormBuilderHelper({
       placeholder: "Describe your application's capabilities",
       category: FORM_BUILDER_NON_CATEGORIZED,
     },
-    {
-      type: FormBuilderInputType.Select,
-      label: 'Start from',
-      span: 12,
-      model: 'startFrom',
-      category: FORM_BUILDER_NON_CATEGORIZED,
-      options: [
-        { label: 'New', value: 'new', icon: 'plus' },
-        { label: 'Existing Base', value: 'existing', icon: 'copy' },
-      ],
-      defaultValue: 'new',
-    },
-    {
-      type: FormBuilderInputType.Space,
-      span: 12,
-      category: FORM_BUILDER_NON_CATEGORIZED,
-      condition: {
-        model: 'startFrom',
-        equal: 'new',
-      },
-    },
-    {
-      type: FormBuilderInputType.SelectBase,
-      label: 'Select base',
-      span: 12,
-      model: 'baseId',
-      category: FORM_BUILDER_NON_CATEGORIZED,
-      condition: {
-        model: 'startFrom',
-        equal: 'existing',
-      },
-      defaultValue: undefined,
-      filterOption: (base) => base && base.version === BaseVersion.V3 && !base.managed_app_id,
-      helpText: 'Only V3 bases can be published as managed apps',
-      showHintAsTooltip: true,
-    },
+    ...(!props.baseId
+      ? ([
+          {
+            type: FormBuilderInputType.Select,
+            label: 'Start from',
+            span: 12,
+            model: 'startFrom',
+            category: FORM_BUILDER_NON_CATEGORIZED,
+            options: [
+              { label: 'New', value: 'new', icon: 'plus' },
+              { label: 'Existing Base', value: 'existing', icon: 'copy' },
+            ],
+            defaultValue: 'new',
+          },
+          {
+            type: FormBuilderInputType.Space,
+            span: 12,
+            category: FORM_BUILDER_NON_CATEGORIZED,
+            condition: {
+              model: 'startFrom',
+              equal: 'new',
+            },
+          },
+          {
+            type: FormBuilderInputType.SelectBase,
+            label: 'Select base',
+            span: 12,
+            model: 'baseId',
+            category: FORM_BUILDER_NON_CATEGORIZED,
+            condition: {
+              model: 'startFrom',
+              equal: 'existing',
+            },
+            defaultValue: undefined,
+            filterOption: (base) => base && base.version === BaseVersion.V3 && !base.managed_app_id,
+            helpText: 'Only V3 bases can be published as managed apps',
+            showHintAsTooltip: true,
+          },
+        ] as FormDefinition)
+      : []),
+
     {
       type: FormBuilderInputType.Input,
       label: t('labels.managedAppCategory'),
@@ -176,10 +194,14 @@ const { formState, isLoading, submit } = useProvideFormBuilderHelper({
     },
   ],
   onSubmit: async () => {
-    if (formState.value.startFrom === 'new' && formState.value.baseId) {
+    if (!props.baseId && formState.value.startFrom === 'new' && formState.value.baseId) {
       formState.value.baseId = ''
     }
 
+    if (props.baseId) {
+      formState.value.baseId = props.baseId
+    }
+
     formState.value.title = formState.value.title.trim()
 
     return await createManagedApp(formState.value)
@@ -190,19 +212,11 @@ const { formState, isLoading, submit } = useProvideFormBuilderHelper({
 
 <template>
   <div class="flex flex-col h-full">
-    <div class="p-4 w-full flex items-center gap-3 border-b border-nc-border-gray-medium">
-      <div class="nc-managed-app-icon">
-        <GeneralIcon icon="ncBox" class="h-5 w-5" />
-      </div>
-      <div class="flex-1">
-        <div class="font-semibold text-lg text-nc-content-gray-emphasis">Create Managed App</div>
-        <div class="text-xs text-nc-content-gray-subtle2">{{ $t('labels.publishToAppStore') }}</div>
-      </div>
-
-      <NcButton size="small" type="text" class="self-start" @click="visible = false">
-        <GeneralIcon icon="close" class="text-nc-content-gray-subtle2" />
-      </NcButton>
-    </div>
+    <DlgManagedAppHeader
+      v-model:visible="visible"
+      :title="title || 'Create Managed App'"
+      :subTitle="subTitle || $t('labels.publishToAppStore')"
+    />
 
     <div class="flex-1 p-6 nc-scrollbar-thin">
       <NcFormBuilder>
@@ -210,7 +224,10 @@ const { formState, isLoading, submit } = useProvideFormBuilderHelper({
           <NcAlert
             type="info"
             align="top"
-            description="Create managed application that can be published to the App Store. You'll be able to manage versions and push updates to all installations."
+            :description="
+              alertDescription ||
+              'Create managed application that can be published to the App Store. You\'ll be able to manage versions and push updates to all installations.'
+            "
             class="!p-3 !items-start bg-nc-bg-blue-light border-1 !border-nc-blue-200 rounded-lg p-3 mb-4"
           >
             <template #icon>
@@ -229,25 +246,8 @@ const { formState, isLoading, submit } = useProvideFormBuilderHelper({
         <template #icon>
           <GeneralIcon icon="ncBox" />
         </template>
-        Create managed app
+        {{ submitButtonText || 'Create managed app' }}
       </NcButton>
     </div>
   </div>
 </template>
-
-<style lang="scss">
-.nc-modal-convert-to-managed-app {
-  .nc-modal {
-    max-height: min(90vh, 540px) !important;
-    height: min(90vh, 540px) !important;
-  }
-}
-</style>
-
-<style lang="scss" scoped>
-.nc-managed-app-icon {
-  @apply w-10 h-10 rounded-xl flex items-center justify-center text-white shadow-sm;
-  background: linear-gradient(135deg, var(--nc-content-brand) 0%, var(--nc-content-blue-medium) 100%);
-  box-shadow: 0 2px 4px rgba(51, 102, 255, 0.15);
-}
-</style>

From 3972b5ba1338671c1a5957a258e07c1cb66feeae Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Jan 2026 11:47:15 +0000
Subject: [PATCH 07/18] fix: refactor managed app modal

---
 .../dlg/ManagedApp/DraftOrPublish.vue         | 226 ++++++++++++++++++
 .../components/dlg/ManagedApp/Index.vue       |   9 +-
 .../smartsheet/topbar/ManagedAppModal.vue     |  28 ---
 .../topbar/ManagedAppStatus/index.vue         |   4 +
 4 files changed, 236 insertions(+), 31 deletions(-)
 create mode 100644 packages/nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue

diff --git a/packages/nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue b/packages/nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue
new file mode 100644
index 0000000000..d1607e35da
--- /dev/null
+++ b/packages/nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue
@@ -0,0 +1,226 @@
+<script lang="ts" setup>
+interface Props {
+  visible: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {})
+
+const emits = defineEmits(['update:visible'])
+
+const vVisible = useVModel(props, 'visible', emits)
+
+const { $api } = useNuxtApp()
+const baseStore = useBase()
+
+const { loadManagedApp, loadCurrentVersion } = baseStore
+
+const { base, managedApp, managedAppVersionsInfo } = storeToRefs(baseStore)
+
+const isDraft = computed(() => managedAppVersionsInfo.value.current?.status === 'draft')
+
+const isLoading = ref(false)
+
+const title = computed(() => {
+  if (isDraft.value) {
+    return `Publish v${managedAppVersionsInfo.value.current?.version || '1.0.0'}?`
+  } else {
+    return `Fork to Draft`
+  }
+})
+
+const subTitle = computed(() => {
+  if (isDraft.value) {
+    return managedAppVersionsInfo.value.published
+      ? `Replace v${managedAppVersionsInfo.value.published.version || '1.0.0'} and go live`
+      : `Go live`
+  } else {
+    return `Create v${suggestManagedAppNextVersion(managedAppVersionsInfo.value.published?.version || '1.0.0')} to make changes`
+  }
+})
+
+// Publish form (for draft versions)
+const publishForm = reactive({
+  releaseNotes: '',
+})
+
+// Fork form (for creating new draft from published)
+const forkForm = reactive({
+  version: '',
+  releaseNotes: '',
+})
+
+const loadManagedAppAndCurrentVersion = async () => {
+  await loadManagedApp()
+  await loadCurrentVersion()
+}
+
+const publishCurrentDraft = async () => {
+  if (!base.value?.fk_workspace_id || !base.value?.id || !managedAppVersionsInfo.value.current?.id) return
+
+  isLoading.value = true
+  try {
+    await $api.internal.postOperation(
+      base.value.fk_workspace_id,
+      base.value.id,
+      {
+        operation: 'managedAppPublish',
+      },
+      {
+        managedAppVersionId: managedAppVersionsInfo.value.current.id,
+      },
+    )
+
+    // Reload base to get updated managed app version info
+    if (base.value?.id) {
+      await baseStore.loadProject()
+    }
+
+    await loadManagedAppAndCurrentVersion()
+
+    message.success(`Version ${managedAppVersionsInfo.value.current?.version || '1.0.0'} published successfully!`)
+
+    vVisible.value = false
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const createNewDraft = async () => {
+  if (!base.value?.fk_workspace_id || !base.value?.id || !managedApp.value?.id) return
+  if (!forkForm.version) {
+    message.error('Please provide a version')
+    return
+  }
+
+  isLoading.value = true
+  try {
+    await $api.internal.postOperation(
+      base.value.fk_workspace_id,
+      base.value.id,
+      {
+        operation: 'managedAppCreateDraft',
+      },
+      {
+        managedAppId: managedApp.value.id,
+        version: forkForm.version,
+      },
+    )
+
+    // Reload base to get updated managed app version info
+    if (base.value?.id) {
+      await baseStore.loadProject()
+    }
+
+    await loadManagedAppAndCurrentVersion()
+
+    message.success(`New draft version ${forkForm.version} created successfully!`)
+
+    vVisible.value = false
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    isLoading.value = false
+  }
+}
+
+watch(
+  isDraft,
+  (newValue) => {
+    if (newValue) {
+      forkForm.version = managedAppVersionsInfo.value.current?.version || '1.0.0'
+    } else {
+      forkForm.version = suggestManagedAppNextVersion(managedAppVersionsInfo.value.current?.version)
+    }
+  },
+  {
+    immediate: true,
+  },
+)
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <DlgManagedAppHeader v-model:visible="vVisible" :title="title" :subTitle="subTitle" />
+
+    <div class="flex-1 p-6 nc-scrollbar-thin">
+      <NcAlert
+        type="info"
+        align="top"
+        class="!p-3 !items-start bg-nc-bg-blue-light border-1 !border-nc-blue-200 rounded-lg p-3 mb-4"
+      >
+        <template #icon>
+          <GeneralIcon icon="info" class="w-4 h-4 mt-0.5 text-nc-content-blue-dark flex-none" />
+        </template>
+
+        <template v-if="isDraft" #description>
+          Publishing version <strong>{{ managedAppVersionsInfo.current?.version }}</strong> will make it available in the App
+          Store and automatically update all installations.
+        </template>
+        <template v-else #description>
+          Create a new draft version to work on updates. Current published version
+          <strong>{{ managedAppVersionsInfo.current?.version }}</strong> will remain unchanged.
+        </template>
+      </NcAlert>
+
+      <div class="space-y-4">
+        <div>
+          <label class="text-nc-content-gray text-sm font-medium mb-2 block">
+            <template v-if="isDraft"> Version </template>
+            <template v-else> New Version <span class="text-nc-content-red-dark">*</span> </template>
+          </label>
+          <a-input
+            v-model:value="forkForm.version"
+            placeholder="e.g., 2.0.0"
+            size="large"
+            :disabled="isDraft"
+            class="rounded-lg nc-input-sm nc-input-shadow"
+          >
+            <template #prefix>
+              <span class="text-nc-content-gray-subtle2">v</span>
+            </template>
+          </a-input>
+          <div v-if="!isDraft" class="text-xs text-nc-content-gray-subtle2 mt-1.5">
+            Use semantic versioning (e.g., 2.0.0, 2.1.0)
+          </div>
+        </div>
+        <div v-if="isDraft">
+          <label class="text-nc-content-gray text-sm font-medium mb-2 block">Release Notes (Optional)</label>
+          <a-textarea
+            v-model:value="publishForm.releaseNotes"
+            placeholder="Describe what's new in this version"
+            :rows="6"
+            size="large"
+            class="rounded-lg nc-input-sm"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="nc-dlg-managed-app-footer">
+      <div class="flex justify-end gap-2">
+        <NcButton type="secondary" size="small" @click="vVisible = false">{{ $t('general.cancel') }} </NcButton>
+
+        <NcButton v-if="isDraft" type="primary" size="small" :loading="isLoading" @click="publishCurrentDraft">
+          <template #icon>
+            <GeneralIcon icon="upload" />
+          </template>
+          Publish
+        </NcButton>
+
+        <NcButton v-else type="primary" size="small" :loading="isLoading" :disabled="!forkForm.version" @click="createNewDraft">
+          <template #icon>
+            <GeneralIcon icon="plus" />
+          </template>
+          Create Draft
+        </NcButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.nc-dlg-managed-app-footer {
+  @apply px-6 py-3 border-t-1 border-nc-border-gray-medium;
+}
+</style>
diff --git a/packages/nc-gui/components/dlg/ManagedApp/Index.vue b/packages/nc-gui/components/dlg/ManagedApp/Index.vue
index b0b857f37f..cbaa578717 100644
--- a/packages/nc-gui/components/dlg/ManagedApp/Index.vue
+++ b/packages/nc-gui/components/dlg/ManagedApp/Index.vue
@@ -4,7 +4,7 @@ interface Props {
   modalSize: 'small' | 'medium' | 'large' | keyof typeof modalSizes
   title?: string
   subTitle?: string
-  variant?: 'convertToManagedApp'
+  variant?: 'draftOrPublish'
   contentClass?: string
   maskClosable?: boolean
 }
@@ -19,7 +19,7 @@ const emits = defineEmits(['update:visible'])
 
 const vVisible = useVModel(props, 'visible', emits)
 
-const { modalSize } = toRefs(props)
+const { modalSize, variant } = toRefs(props)
 </script>
 
 <template>
@@ -30,7 +30,10 @@ const { modalSize } = toRefs(props)
     :mask-closable="maskClosable"
     nc-modal-class-name="nc-modal-dlg-managed-app"
   >
-    <slot v-if="$slots.default"> </slot>
+    <template v-if="variant === 'draftOrPublish'">
+      <DlgManagedAppDraftOrPublish v-model:visible="vVisible" />
+    </template>
+    <slot v-else-if="$slots.default"> </slot>
     <template v-else>
       <slot name="header">
         <NcDlgManagedAppHeader :visible="vVisible" :modalSize="modalSize" :title="title" :subTitle="subTitle" />
diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppModal.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppModal.vue
index d8a5d73d9b..86efb99fc2 100644
--- a/packages/nc-gui/components/smartsheet/topbar/ManagedAppModal.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/ManagedAppModal.vue
@@ -206,34 +206,6 @@ const modalSize = computed(() => {
           </div>
         </div>
 
-        <!-- Tabs (Segmented Control) -->
-        <div class="nc-managed-app-tabs">
-          <div class="flex items-center">
-            <div
-              v-if="isDraft"
-              class="nc-managed-app-tab"
-              :class="{ selected: activeTab === 'publish' }"
-              @click="activeTab = 'publish'"
-            >
-              <GeneralIcon icon="upload" class="h-4 w-4 flex-none opacity-75" />
-              <span>Publish</span>
-            </div>
-            <div
-              v-if="isPublished"
-              class="nc-managed-app-tab"
-              :class="{ selected: activeTab === 'fork' }"
-              @click="activeTab = 'fork'"
-            >
-              <GeneralIcon icon="ncGitBranch" class="h-4 w-4 flex-none opacity-75" />
-              <span>Fork</span>
-            </div>
-            <div class="nc-managed-app-tab" :class="{ selected: activeTab === 'deployments' }" @click="activeTab = 'deployments'">
-              <GeneralIcon icon="ncServer" class="h-4 w-4 flex-none opacity-75" />
-              <span>Deployments</span>
-            </div>
-          </div>
-        </div>
-
         <NcButton size="small" type="text" @click="emit('update:visible', false)">
           <GeneralIcon icon="close" class="text-nc-content-gray-muted h-4 w-4" />
         </NcButton>
diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
index 1941b6987a..087981d0b2 100644
--- a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
@@ -229,8 +229,12 @@ watch(
     </template>
   </NcDropdown>
 
+  <DlgManagedApp v-if="initialTab !== 'deployments'" v-model:visible="isModalVisible" modal-size="sm" variant="draftOrPublish">
+  </DlgManagedApp>
+
   <!-- Managed App Modal -->
   <SmartsheetTopbarManagedAppModal
+    v-if="initialTab === 'deployments'"
     v-model:visible="isModalVisible"
     :managed-app="managedApp"
     :current-version="managedAppVersionsInfo.current"

From 82afce752ad047d7d4ec1929e8f8e19169205dda Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Jan 2026 11:47:15 +0000
Subject: [PATCH 08/18] fix: update managed app status badge

---
 packages/nc-gui/assets/nc-icons/check-2.svg   |  4 +-
 .../topbar/ManagedAppStatus/index.vue         | 91 ++++++++++++++-----
 packages/nc-gui/lang/en.json                  |  2 +
 3 files changed, 73 insertions(+), 24 deletions(-)

diff --git a/packages/nc-gui/assets/nc-icons/check-2.svg b/packages/nc-gui/assets/nc-icons/check-2.svg
index 70a7d34c26..1f25818710 100644
--- a/packages/nc-gui/assets/nc-icons/check-2.svg
+++ b/packages/nc-gui/assets/nc-icons/check-2.svg
@@ -1,7 +1,7 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_715_5581)">
-<path d="M8.00065 14.6663C11.6825 14.6663 14.6673 11.6816 14.6673 7.99967C14.6673 4.31778 11.6825 1.33301 8.00065 1.33301C4.31875 1.33301 1.33398 4.31778 1.33398 7.99967C1.33398 11.6816 4.31875 14.6663 8.00065 14.6663Z" stroke="#17803D" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M11.5 5.5L6.6875 10.5L4.5 8.22727" stroke="#17803D" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.00065 14.6663C11.6825 14.6663 14.6673 11.6816 14.6673 7.99967C14.6673 4.31778 11.6825 1.33301 8.00065 1.33301C4.31875 1.33301 1.33398 4.31778 1.33398 7.99967C1.33398 11.6816 4.31875 14.6663 8.00065 14.6663Z" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.5 5.5L6.6875 10.5L4.5 8.22727" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 <defs>
 <clipPath id="clip0_715_5581">
diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
index 087981d0b2..a8a9012194 100644
--- a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+const { t } = useI18n()
+
 const baseStore = useBase()
 
 const { loadManagedApp, loadCurrentVersion } = baseStore
@@ -7,6 +9,7 @@ const { base, isManagedAppMaster, isManagedAppInstaller, managedApp, currentVers
   storeToRefs(baseStore)
 
 const isModalVisible = ref(false)
+
 const initialTab = ref<'publish' | 'fork' | 'deployments' | undefined>(undefined)
 
 const isOpenDropdown = ref<boolean>(false)
@@ -17,7 +20,10 @@ const openModal = (tab?: 'publish' | 'fork' | 'deployments') => {
   isOpenDropdown.value = false
 
   initialTab.value = tab
-  isModalVisible.value = true
+
+  nextTick(() => {
+    isModalVisible.value = true
+  })
 }
 
 const loadManagedAppAndCurrentVersion = async () => {
@@ -42,6 +48,54 @@ watch(
   },
   { immediate: true },
 )
+
+const colors = {
+  green: {
+    bg: 'bg-nc-green-50 dark:bg-nc-green-20',
+    border: 'border-green-200 dark:border-nc-green-100',
+    text: 'text-green-600 dark:text-nc-green-300',
+  },
+  orange: {
+    bg: 'bg-nc-orange-20 dark:bg-nc-orange-20',
+    border: 'border-nc-orange-200 dark:border-orange-600/40',
+    text: 'text-orange-600 text-orange-600',
+  },
+  brand: {
+    bg: 'bg-nc-brand-50 dark:bg-nc-brand-20/40',
+    border: 'border-nc-brand-200 dark:border-nc-content-brand/50',
+    text: 'text-nc-content-brand',
+  },
+}
+
+const badgeConfig = computed(() => {
+  const result = {
+    colors: colors.green,
+    icon: 'circleCheck3',
+    subText: '',
+  }
+
+  if (isManagedAppInstaller.value) {
+    if (managedAppVersionsInfo.value.updateAvailable) {
+      result.colors = colors.brand
+      result.icon = 'ncDownload'
+      result.subText = t('labels.updateAvailable')
+    } else {
+      result.colors = colors.green
+      result.icon = 'circleCheck3'
+      result.subText = t('labels.upToDate')
+    }
+  } else if (isDraft.value) {
+    result.colors = colors.orange
+    result.icon = 'pencil'
+    result.subText = t('labels.draft')
+  } else {
+    result.colors = colors.green
+    result.icon = 'circleCheck3'
+    result.subText = t('labels.published')
+  }
+
+  return result
+})
 </script>
 
 <template>
@@ -54,24 +108,21 @@ watch(
     <div class="flex items-center gap-2">
       <!-- Version Badge (clickable to open modal) -->
       <div
-        class="flex items-center gap-1.5 px-2.5 py-1 bg-nc-bg-gray-light rounded-md border-1 border-nc-border-gray-medium cursor-pointer hover:(bg-nc-bg-gray-medium border-nc-border-gray-dark) transition-colors"
+        class="flex items-center gap-2 px-2.5 py-1 h-8 rounded-lg border-1 cursor-pointer transition-colors select-none"
+        :class="[badgeConfig.colors.bg, badgeConfig.colors.border, badgeConfig.colors.text]"
       >
-        <GeneralIcon icon="ncInfoSolid" class="w-3.5 h-3.5 text-nc-content-gray nc-managed-app-status-info-icon" />
-        <span class="text-xs font-mono font-semibold text-nc-content-gray-emphasis"
-          >v{{ managedAppVersionsInfo.current?.version || '1.0.0' }}</span
-        >
-        <div
-          v-if="managedAppVersionsInfo.current?.status === 'draft'"
-          class="ml-1 px-1.5 py-0.5 text-xs rounded bg-nc-bg-orange-light text-nc-content-orange-dark font-medium"
-        >
-          {{ $t('labels.draft') }}
-        </div>
-        <div
-          v-else-if="managedAppVersionsInfo.current?.status === 'published'"
-          class="ml-1 px-1.5 py-0.5 text-xs rounded bg-nc-bg-green-dark text-nc-content-green-dark font-medium"
-        >
-          {{ $t('labels.published') }}
-        </div>
+        <GeneralIcon :icon="badgeConfig.icon as IconMapKey" class="w-3.5 h-3.5 text-current nc-managed-app-status-info-icon" />
+        <span class="text-xs font-mono font-medium"> v{{ managedAppVersionsInfo.current?.version || '1.0.0' }}</span>
+        <span class="py-0.5 text-xs font-medium whitespace-nowrap">
+          {{ badgeConfig.subText }}
+        </span>
+        <GeneralIcon
+          icon="chevronDown"
+          class="w-3.5 h-3.5 text-nc-content-gray-muted opacity-80 transform transition-all duration-200"
+          :class="{
+            'rotate-180': isOpenDropdown,
+          }"
+        />
       </div>
     </div>
     <template #overlay>
@@ -245,10 +296,6 @@ watch(
 </template>
 
 <style lang="scss" scoped>
-:deep(.nc-managed-app-status-info-icon path.nc-icon-inner) {
-  stroke: var(--nc-bg-gray-light) !important;
-}
-
 .nc-managed-app-status-menu {
   @apply w-[318px] pb-2;
 }
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index c5dffab4dc..74014d9cd8 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -1185,6 +1185,8 @@
     "updateDetails": "Update Details",
     "published": "Published",
     "draft": "Draft",
+    "upToDate": "Up to date",
+    "updateAvailable": "Update available",
     "managedAppTitle": "Title",
     "managedAppDescription": "Description",
     "managedAppCategory": "Category",

From 1b1311c3438547680e194beec0d9a8ef1b229d65 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Jan 2026 11:47:15 +0000
Subject: [PATCH 09/18] fix: version deployments modal refactor

---
 .../components/dlg/ManagedApp/Index.vue       |   9 +-
 .../dlg/ManagedApp/VersionDeployments.vue     | 492 +++++++++++++
 .../dlg/ManagedApp/VersionHistory.vue         | 344 +++++++++
 .../smartsheet/topbar/ManagedAppModal.vue     | 654 ------------------
 .../topbar/ManagedAppStatus/index.vue         |  36 +-
 .../ManagedAppVersionDeploymentsModal.vue     | 513 --------------
 6 files changed, 849 insertions(+), 1199 deletions(-)
 create mode 100644 packages/nc-gui/components/dlg/ManagedApp/VersionDeployments.vue
 create mode 100644 packages/nc-gui/components/dlg/ManagedApp/VersionHistory.vue
 delete mode 100644 packages/nc-gui/components/smartsheet/topbar/ManagedAppModal.vue
 delete mode 100644 packages/nc-gui/components/smartsheet/topbar/ManagedAppVersionDeploymentsModal.vue

diff --git a/packages/nc-gui/components/dlg/ManagedApp/Index.vue b/packages/nc-gui/components/dlg/ManagedApp/Index.vue
index cbaa578717..faf9542d3b 100644
--- a/packages/nc-gui/components/dlg/ManagedApp/Index.vue
+++ b/packages/nc-gui/components/dlg/ManagedApp/Index.vue
@@ -4,7 +4,7 @@ interface Props {
   modalSize: 'small' | 'medium' | 'large' | keyof typeof modalSizes
   title?: string
   subTitle?: string
-  variant?: 'draftOrPublish'
+  variant?: 'draftOrPublish' | 'versionHistory'
   contentClass?: string
   maskClosable?: boolean
 }
@@ -33,10 +33,13 @@ const { modalSize, variant } = toRefs(props)
     <template v-if="variant === 'draftOrPublish'">
       <DlgManagedAppDraftOrPublish v-model:visible="vVisible" />
     </template>
+    <template v-if="variant === 'versionHistory'">
+      <DlgManagedAppVersionHistory v-model:visible="vVisible" />
+    </template>
     <slot v-else-if="$slots.default"> </slot>
     <template v-else>
       <slot name="header">
-        <NcDlgManagedAppHeader :visible="vVisible" :modalSize="modalSize" :title="title" :subTitle="subTitle" />
+        <DlgManagedAppHeader v-model:visible="vVisible" :modalSize="modalSize" :title="title" :subTitle="subTitle" />
       </slot>
 
       <div class="flex-1 nc-scrollbar-thin" :class="contentClass">
@@ -48,8 +51,6 @@ const { modalSize, variant } = toRefs(props)
   </NcModal>
 </template>
 
-<style lang="scss" scoped></style>
-
 <style lang="scss">
 .nc-modal-dlg-managed-app {
   @apply !p-0;
diff --git a/packages/nc-gui/components/dlg/ManagedApp/VersionDeployments.vue b/packages/nc-gui/components/dlg/ManagedApp/VersionDeployments.vue
new file mode 100644
index 0000000000..4230911b83
--- /dev/null
+++ b/packages/nc-gui/components/dlg/ManagedApp/VersionDeployments.vue
@@ -0,0 +1,492 @@
+<script lang="ts" setup>
+import { DeploymentStatus } from 'nocodb-sdk'
+
+interface Props {
+  visible: boolean
+  version: any
+}
+
+const props = withDefaults(defineProps<Props>(), {})
+
+const emits = defineEmits(['update:visible'])
+
+const vVisible = useVModel(props, 'visible', emits)
+
+const { $api } = useNuxtApp()
+
+const baseStore = useBase()
+
+const { base, managedApp } = storeToRefs(baseStore)
+
+const isLoading = ref(false)
+const deployments = ref<any[]>([])
+const pageInfo = ref<any>({})
+const currentPage = ref(1)
+const pageSize = 10
+
+// Expanded deployment logs state
+const expandedBaseId = ref<string | null>(null)
+const deploymentLogs = ref<any[]>([])
+const logsPageInfo = ref<any>({})
+const logsCurrentPage = ref(1)
+const logsPageSize = 10
+const isLoadingLogs = ref(false)
+
+const loadDeployments = async (page = 1) => {
+  if (!managedApp.value?.id || !props.version?.versionId || !base.value?.fk_workspace_id) return
+
+  isLoading.value = true
+  try {
+    const offset = (page - 1) * pageSize
+    const response = await $api.internal.getOperation(base.value.fk_workspace_id, base.value.id!, {
+      operation: 'managedAppVersionDeployments',
+      managedAppId: managedApp.value.id,
+      versionId: props.version.versionId,
+      limit: pageSize,
+      offset,
+    } as any)
+
+    if (response) {
+      deployments.value = response.list || []
+      pageInfo.value = response.pageInfo || {}
+      currentPage.value = page
+    }
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const loadDeploymentLogs = async (baseId: string, page = 1) => {
+  if (!base.value?.fk_workspace_id) return
+
+  isLoadingLogs.value = true
+  try {
+    const offset = (page - 1) * logsPageSize
+    const response = await $api.internal.getOperation(base.value.fk_workspace_id, base.value.id!, {
+      operation: 'managedAppDeploymentLogs',
+      baseId,
+      limit: logsPageSize,
+      offset,
+    } as any)
+
+    if (response) {
+      deploymentLogs.value = response.logs || []
+      logsPageInfo.value = response.pageInfo || {}
+      logsCurrentPage.value = page
+    }
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    isLoadingLogs.value = false
+  }
+}
+
+const toggleExpand = async (deployment: any) => {
+  if (expandedBaseId.value === deployment.baseId) {
+    // Collapse
+    expandedBaseId.value = null
+    deploymentLogs.value = []
+    logsCurrentPage.value = 1
+  } else {
+    // Expand and load logs
+    expandedBaseId.value = deployment.baseId
+    await loadDeploymentLogs(deployment.baseId, 1)
+  }
+}
+
+const formatDate = (dateString: string) => {
+  if (!dateString) return 'N/A'
+
+  return parseStringDateTime(dateString, 'MMM DD, YYYY, hh:mm A')
+}
+
+const getDeploymentTypeLabel = (type: string) => {
+  const labels = {
+    install: 'Initial Install',
+    update: 'Update',
+  }
+  return labels[type as keyof typeof labels] || type
+}
+
+const getStatusColor = (status: string) => {
+  const colors = {
+    [DeploymentStatus.SUCCESS]: 'text-nc-content-green-dark bg-nc-bg-green-light',
+    [DeploymentStatus.FAILED]: 'text-nc-content-red-dark bg-nc-bg-red-light',
+    [DeploymentStatus.PENDING]: 'text-nc-content-orange-dark bg-nc-bg-orange-light',
+    [DeploymentStatus.IN_PROGRESS]: 'text-nc-content-blue-dark bg-nc-bg-blue-light',
+  }
+  return colors[status as keyof typeof colors] || 'text-nc-content-gray bg-nc-bg-gray-light'
+}
+
+const handlePageChange = (page: number) => {
+  loadDeployments(page)
+}
+
+const handleLogsPageChange = (page: number) => {
+  if (expandedBaseId.value) {
+    loadDeploymentLogs(expandedBaseId.value, page)
+  }
+}
+
+watch(
+  vVisible,
+  (val) => {
+    if (val) {
+      loadDeployments(1)
+      expandedBaseId.value = null
+      deploymentLogs.value = []
+    }
+  },
+  {
+    immediate: true,
+  },
+)
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <DlgManagedAppHeader v-model:visible="vVisible" title="Version Deployments">
+      <template #icon>
+        <GeneralIcon icon="ncServer" class="w-5 h-5 text-white" />
+      </template>
+      <template #subTitle>
+        Tracking installations for
+        <span class="font-mono font-semibold text-nc-content-brand">v{{ version?.version }}</span>
+      </template>
+    </DlgManagedAppHeader>
+
+    <!-- Content -->
+    <div class="nc-deployments-content">
+      <div v-if="isLoading" class="nc-deployments-loading">
+        <a-spin size="large" />
+        <div class="text-sm text-nc-content-gray-muted mt-3">Loading deployments...</div>
+      </div>
+
+      <template v-else-if="deployments.length > 0">
+        <div class="nc-deployments-list">
+          <div v-for="deployment in deployments" :key="deployment.baseId" class="nc-deployment-item">
+            <!-- Deployment Row -->
+            <div class="nc-deployment-row" @click="toggleExpand(deployment)">
+              <div class="nc-deployment-info">
+                <!-- Expand Icon -->
+                <div class="nc-expand-icon">
+                  <GeneralIcon
+                    :icon="expandedBaseId === deployment.baseId ? 'ncChevronDown' : 'ncChevronRight'"
+                    class="w-4 h-4"
+                  />
+                </div>
+
+                <!-- Deployment Details -->
+                <div class="nc-deployment-icon">
+                  <GeneralIcon icon="ncServer" class="w-4 h-4" />
+                </div>
+                <div class="nc-deployment-details">
+                  <div class="nc-deployment-title">{{ deployment.baseTitle }}</div>
+                  <div class="nc-deployment-date">
+                    <GeneralIcon icon="calendar" class="w-3.5 h-3.5 opacity-60" />
+                    <span>Installed {{ formatDate(deployment.installedAt) }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Status Badge -->
+              <div class="nc-deployment-status">
+                <div class="nc-status-badge" :class="getStatusColor(deployment.status)">
+                  <span>{{ deployment.status }}</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Expanded Logs Section -->
+            <div v-if="expandedBaseId === deployment.baseId" class="nc-deployment-logs-wrapper">
+              <div class="nc-deployment-logs">
+                <div class="nc-logs-header">
+                  <GeneralIcon icon="ncFileText" class="w-4 h-4 text-nc-content-gray-subtle2" />
+                  <span>Deployment History</span>
+                </div>
+
+                <div v-if="isLoadingLogs" class="nc-logs-loading">
+                  <a-spin size="small" />
+                  <span class="text-xs text-nc-content-gray-muted ml-2">Loading history...</span>
+                </div>
+
+                <template v-else-if="deploymentLogs.length > 0">
+                  <div class="nc-logs-list">
+                    <div v-for="log in deploymentLogs" :key="log.id" class="nc-log-item">
+                      <div class="nc-log-content">
+                        <div class="nc-log-header">
+                          <div class="nc-log-badges">
+                            <div class="nc-log-status" :class="getStatusColor(log.status)">
+                              {{ log.status }}
+                            </div>
+                            <div class="nc-log-type">
+                              <GeneralIcon
+                                :icon="log.deploymentType === 'install' ? 'download' : 'reload'"
+                                class="w-3 h-3 opacity-60"
+                              />
+                              <span>{{ getDeploymentTypeLabel(log.deploymentType) }}</span>
+                            </div>
+                          </div>
+                        </div>
+
+                        <div class="nc-log-meta">
+                          <div class="nc-log-version">
+                            <div v-if="log.fromVersion" class="flex items-center gap-1.5">
+                              <span class="font-mono text-nc-content-gray-subtle2">v{{ log.fromVersion.version }}</span>
+                              <GeneralIcon icon="arrowRight" class="w-3 h-3 text-nc-content-gray-subtle2" />
+                            </div>
+                            <span class="font-mono font-semibold text-nc-content-brand">v{{ log.toVersion?.version }}</span>
+                          </div>
+                          <span class="nc-log-divider">•</span>
+                          <div class="nc-log-time">
+                            <GeneralIcon icon="ncClock" class="w-3.5 h-3.5 opacity-60" />
+                            <span>{{ formatDate(log.createdAt) }}</span>
+                          </div>
+                        </div>
+
+                        <div v-if="log.errorMessage" class="nc-log-error">
+                          <GeneralIcon icon="alertTriangle" class="w-3.5 h-3.5 flex-shrink-0" />
+                          <span>{{ log.errorMessage }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <!-- Logs Pagination -->
+                  <div v-if="logsPageInfo.totalRows > logsPageSize" class="nc-logs-pagination">
+                    <a-pagination
+                      v-model:current="logsCurrentPage"
+                      :total="logsPageInfo.totalRows"
+                      :page-size="logsPageSize"
+                      :show-size-changer="false"
+                      size="small"
+                      @change="handleLogsPageChange"
+                    />
+                  </div>
+                </template>
+
+                <div v-else class="nc-logs-empty">
+                  <GeneralIcon icon="inbox" class="w-8 h-8 text-nc-content-gray-subtle2 mb-2" />
+                  <div class="text-sm text-nc-content-gray-subtle2">No deployment history available</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <!-- Empty State -->
+      <div v-else class="nc-deployments-empty">
+        <div class="nc-empty-icon">
+          <GeneralIcon icon="ncServer" class="w-10 h-10 text-nc-content-gray-muted" />
+        </div>
+        <div class="text-base font-semibold text-nc-content-gray mb-1">No installations found</div>
+        <div class="text-sm text-nc-content-gray-subtle max-w-md text-center">
+          Version <span class="font-mono font-semibold">v{{ version?.version }}</span> hasn't been installed by any users yet
+        </div>
+      </div>
+    </div>
+    <!-- Deployments Pagination -->
+    <div v-if="deployments.length > 0 && pageInfo.totalRows > pageSize" class="nc-deployments-pagination">
+      <a-pagination
+        v-model:current="currentPage"
+        :total="pageInfo.totalRows"
+        :page-size="pageSize"
+        :show-size-changer="false"
+        @change="handlePageChange"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.nc-deployments-content {
+  @apply flex-1 nc-scrollbar-thin p-6;
+}
+
+.nc-deployments-loading {
+  @apply h-full flex flex-col items-center justify-center py-16;
+}
+
+.nc-deployments-list {
+  @apply space-y-3;
+}
+
+.nc-deployment-item {
+  @apply bg-nc-bg-default border-1 border-nc-border-gray-medium rounded-xl overflow-hidden relative;
+  @apply transition-all duration-200 ease-in-out;
+
+  &::before {
+    @apply absolute left-0 top-0 bottom-0 w-1 bg-nc-content-brand opacity-0;
+    @apply transition-opacity duration-200 ease-in-out;
+    content: '';
+  }
+
+  &:hover {
+    @apply border-nc-border-brand transform translate-x-0.5;
+    box-shadow: 0 4px 12px rgba(51, 102, 255, 0.08);
+
+    &::before {
+      @apply opacity-100;
+    }
+
+    .nc-deployment-icon {
+      @apply transform scale-105;
+      box-shadow: 0 4px 8px rgba(51, 102, 255, 0.15);
+    }
+  }
+}
+
+.nc-deployment-row {
+  @apply flex items-center justify-between gap-4 p-4 cursor-pointer;
+}
+
+.nc-deployment-info {
+  @apply flex items-center gap-3 flex-1 min-w-0;
+}
+
+.nc-expand-icon {
+  @apply w-6 h-6 flex items-center justify-center text-nc-content-gray-subtle2 flex-shrink-0;
+  @apply transition-transform duration-200;
+}
+
+.nc-deployment-icon {
+  @apply w-9 h-9 rounded-lg bg-nc-bg-gray-light border-1 border-nc-border-gray-light;
+  @apply flex items-center justify-center text-nc-content-gray flex-shrink-0;
+  @apply transition-all duration-200 ease-in-out;
+}
+
+.nc-deployment-details {
+  @apply flex-1 min-w-0;
+}
+
+.nc-deployment-title {
+  @apply font-semibold text-sm text-nc-content-gray-emphasis truncate mb-1;
+}
+
+.nc-deployment-date {
+  @apply flex items-center gap-1.5 text-xs text-nc-content-gray-subtle2;
+}
+
+.nc-deployment-status {
+  @apply flex-shrink-0;
+}
+
+.nc-status-badge {
+  @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold;
+}
+
+.nc-deployment-logs-wrapper {
+  @apply border-t-1 border-nc-border-gray-medium bg-nc-bg-gray-extralight;
+}
+
+.nc-deployment-logs {
+  @apply p-4;
+}
+
+.nc-logs-header {
+  @apply flex items-center gap-2 text-xs font-semibold text-nc-content-gray-emphasis mb-3;
+  @apply uppercase tracking-wide;
+}
+
+.nc-logs-loading {
+  @apply flex items-center justify-center py-8;
+}
+
+.nc-logs-list {
+  @apply space-y-2;
+}
+
+.nc-log-item {
+  @apply bg-nc-bg-default border-1 border-nc-border-gray-light rounded-lg p-3;
+  @apply transition-all duration-150;
+
+  &:hover {
+    @apply border-nc-border-gray-medium shadow-sm;
+  }
+}
+
+.nc-log-content {
+  @apply space-y-2;
+}
+
+.nc-log-header {
+  @apply flex items-center justify-between gap-2;
+}
+
+.nc-log-badges {
+  @apply flex items-center gap-2 flex-wrap;
+}
+
+.nc-log-status {
+  @apply inline-flex px-2 py-0.5 rounded text-xs font-semibold;
+}
+
+.nc-log-type {
+  @apply inline-flex items-center gap-1 px-2 py-0.5 rounded;
+  @apply bg-nc-bg-gray-light text-nc-content-gray text-xs font-medium;
+}
+
+.nc-log-meta {
+  @apply flex items-center gap-2 text-xs text-nc-content-gray-subtle2 flex-wrap;
+}
+
+.nc-log-version {
+  @apply flex items-center gap-1.5;
+}
+
+.nc-log-divider {
+  @apply text-nc-content-gray-subtle2;
+}
+
+.nc-log-time {
+  @apply flex items-center gap-1;
+}
+
+.nc-log-error {
+  @apply flex items-start gap-2 p-2 rounded-lg;
+  @apply bg-nc-bg-red-light text-nc-content-red-dark text-xs;
+}
+
+.nc-logs-pagination {
+  @apply flex justify-center mt-4 pt-4 border-t-1 border-nc-border-gray-light;
+}
+
+.nc-logs-empty {
+  @apply flex flex-col items-center justify-center py-12 text-center;
+}
+
+.nc-deployments-pagination {
+  @apply flex justify-center mt-6;
+}
+
+.nc-deployments-empty {
+  @apply flex flex-col items-center justify-center py-16;
+}
+
+.nc-empty-icon {
+  @apply w-16 h-16 rounded-full bg-nc-bg-gray-light;
+  @apply flex items-center justify-center mb-4;
+}
+
+// Responsive
+@media (max-width: 640px) {
+  .nc-deployment-row {
+    @apply flex-col items-start;
+  }
+
+  .nc-deployment-info {
+    @apply w-full;
+  }
+
+  .nc-deployment-status {
+    @apply w-full;
+  }
+
+  .nc-log-meta {
+    @apply flex-col items-start gap-1;
+  }
+}
+</style>
diff --git a/packages/nc-gui/components/dlg/ManagedApp/VersionHistory.vue b/packages/nc-gui/components/dlg/ManagedApp/VersionHistory.vue
new file mode 100644
index 0000000000..b8a12eae12
--- /dev/null
+++ b/packages/nc-gui/components/dlg/ManagedApp/VersionHistory.vue
@@ -0,0 +1,344 @@
+<script lang="ts" setup>
+interface Props {
+  visible: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {})
+
+const emits = defineEmits(['update:visible'])
+
+const vVisible = useVModel(props, 'visible', emits)
+
+const { $api } = useNuxtApp()
+
+const baseStore = useBase()
+
+const { base, managedApp } = storeToRefs(baseStore)
+
+const isLoadingDeployments = ref(true)
+
+const deploymentStats = ref<any>(null)
+
+// Version deployments modal
+const showVersionDeploymentsModal = ref(false)
+const selectedVersion = ref<any>(null)
+
+// Load real deployment statistics
+const loadDeployments = async () => {
+  if (!managedApp.value?.id || !base.value?.fk_workspace_id) return
+
+  isLoadingDeployments.value = true
+  try {
+    const response = await $api.internal.getOperation(base.value.fk_workspace_id, base.value.id!, {
+      operation: 'managedAppDeployments',
+      managedAppId: managedApp.value.id,
+    } as any)
+    if (response) {
+      deploymentStats.value = response
+    }
+  } catch (e: any) {
+    console.error('Failed to load deployments:', e)
+  } finally {
+    isLoadingDeployments.value = false
+  }
+}
+
+const formatDate = (dateString: string) => {
+  if (!dateString) return 'N/A'
+
+  return parseStringDateTime(dateString, 'MMM DD, YYYY, hh:mm A')
+}
+
+const openVersionDeploymentsModal = (version: any) => {
+  selectedVersion.value = version
+  showVersionDeploymentsModal.value = true
+}
+
+watch(
+  vVisible,
+  (val) => {
+    if (val) {
+      loadDeployments()
+    }
+  },
+  {
+    immediate: true,
+  },
+)
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <DlgManagedAppHeader v-model:visible="vVisible" title="Version History" subTitle="Manage versions and track deployments" />
+
+    <div class="flex-1 nc-scrollbar-thin">
+      <div
+        class="nc-deployments-content"
+        :class="{
+          'h-full': isLoadingDeployments,
+        }"
+      >
+        <div v-if="isLoadingDeployments" class="nc-deployments-loading">
+          <a-spin size="large" />
+          <div class="text-sm text-nc-content-gray-muted mt-3">Loading deployment statistics...</div>
+        </div>
+
+        <template v-else-if="deploymentStats">
+          <!-- Stats Cards -->
+          <div class="nc-deployment-stats">
+            <!-- Total Deployments -->
+            <div class="nc-stat-card">
+              <div class="nc-stat-value">{{ deploymentStats.statistics?.totalDeployments || 0 }}</div>
+              <div class="nc-stat-label">Total Installs</div>
+            </div>
+
+            <!-- Active -->
+            <div class="nc-stat-card">
+              <div class="nc-stat-value text-green-600">{{ deploymentStats.statistics?.activeDeployments || 0 }}</div>
+              <div class="nc-stat-label">Active</div>
+            </div>
+
+            <!-- Failed -->
+            <div class="nc-stat-card">
+              <div class="nc-stat-value text-red-600">{{ deploymentStats.statistics?.failedDeployments || 0 }}</div>
+              <div class="nc-stat-label">Failed</div>
+            </div>
+
+            <!-- Versions -->
+            <div class="nc-stat-card">
+              <div class="nc-stat-value">{{ deploymentStats.statistics?.totalVersions || 0 }}</div>
+              <div class="nc-stat-label">Versions</div>
+            </div>
+          </div>
+
+          <!-- Version List -->
+          <div v-if="deploymentStats.versionStats && deploymentStats.versionStats.length > 0" class="nc-version-list-wrapper">
+            <div class="nc-version-list-header">
+              <div>
+                <h3 class="text-sm font-semibold text-nc-content-gray-emphasis">Version History</h3>
+                <p class="text-xs text-nc-content-gray-subtle2 mt-0.5 mb-0">
+                  {{ deploymentStats.versionStats.length }}
+                  {{ deploymentStats.versionStats.length === 1 ? 'version' : 'versions' }}
+                  published
+                </p>
+              </div>
+            </div>
+
+            <div class="nc-version-list">
+              <div
+                v-for="(versionStat, index) in deploymentStats.versionStats"
+                :key="versionStat.versionId"
+                class="nc-version-item"
+                :class="{ 'nc-version-item-clickable': versionStat.deploymentCount > 0 }"
+                @click="versionStat.deploymentCount > 0 && openVersionDeploymentsModal(versionStat)"
+              >
+                <div class="nc-version-info">
+                  <div class="nc-version-icon">
+                    <GeneralIcon icon="ncGitBranch" class="w-4 h-4" />
+                  </div>
+                  <div class="nc-version-details">
+                    <div class="nc-version-title">
+                      <span class="nc-version-number">v{{ versionStat.version }}</span>
+                      <div v-if="index === 0 && versionStat.status === 'published'" class="nc-version-badge">
+                        <GeneralIcon icon="check" class="w-3 h-3" />
+                        <span>Current</span>
+                      </div>
+                    </div>
+                    <div class="nc-version-date">Published {{ formatDate(versionStat.publishedAt) }}</div>
+                  </div>
+                </div>
+
+                <div class="nc-version-installs">
+                  <div class="nc-installs-count">
+                    <GeneralIcon icon="download" class="w-4 h-4 text-nc-content-gray-subtle2" />
+                    <span class="font-bold">{{ versionStat.deploymentCount }}</span>
+                    <span class="text-nc-content-gray-muted">{{
+                      versionStat.deploymentCount === 1 ? 'install' : 'installs'
+                    }}</span>
+                  </div>
+                  <GeneralIcon
+                    v-if="versionStat.deploymentCount > 0"
+                    icon="chevronRight"
+                    class="w-4 h-4 text-nc-content-gray-subtle2 nc-chevron-icon"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Empty State -->
+          <div v-else class="nc-deployments-empty">
+            <div class="nc-empty-icon">
+              <GeneralIcon icon="ncServer" class="w-10 h-10 text-nc-content-gray-muted" />
+            </div>
+            <div class="text-base font-semibold text-nc-content-gray mb-1">No installations yet</div>
+            <div class="text-sm text-nc-content-gray-subtle max-w-md text-center">
+              Once users install your application from the App Store, their deployments will appear here.
+            </div>
+          </div>
+        </template>
+
+        <div v-else class="nc-deployments-error">
+          <div class="nc-error-icon">
+            <GeneralIcon icon="alertTriangle" class="w-10 h-10 text-nc-content-red-dark" />
+          </div>
+          <div class="text-base font-semibold text-nc-content-gray mb-1">Failed to load statistics</div>
+          <div class="text-sm text-nc-content-gray-subtle mb-4">There was an error loading deployment data</div>
+          <NcButton size="small" type="secondary" @click="loadDeployments">
+            <template #icon>
+              <GeneralIcon icon="reload" />
+            </template>
+            Retry
+          </NcButton>
+        </div>
+      </div>
+    </div>
+
+    <DlgManagedApp v-model:visible="showVersionDeploymentsModal" modal-size="md">
+      <DlgManagedAppVersionDeployments v-model:visible="showVersionDeploymentsModal" :version="selectedVersion" />
+    </DlgManagedApp>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// Deployments Tab Styles
+.nc-deployments-content {
+  @apply px-6 pb-6;
+}
+
+.nc-deployments-loading {
+  @apply h-full flex flex-col items-center justify-center py-16;
+}
+
+.nc-deployment-stats {
+  @apply grid grid-cols-4 mb-4;
+}
+
+.nc-stat-card {
+  @apply flex flex-col gap-1 border-r-1 border-nc-border-gray-medium last:border-r-0 p-4 text-nc-content-gray-subtle text-center;
+}
+
+.nc-stat-icon-wrapper {
+  @apply w-10 h-10 rounded-lg flex items-center justify-center mb-3;
+}
+
+.nc-stat-value {
+  @apply text-subHeading1 font-normal;
+}
+
+.nc-stat-label {
+  @apply text-tiny text-nc-content-gray-muted uppercase;
+}
+
+.nc-version-list-wrapper {
+  @apply mt-4;
+}
+
+.nc-version-list-header {
+  @apply flex items-center justify-between mb-4;
+}
+
+.nc-version-list {
+  @apply space-y-2;
+}
+
+.nc-version-item {
+  @apply bg-nc-bg-default border-1 border-nc-border-gray-medium rounded-xl p-4 flex items-center justify-between gap-4 relative overflow-hidden;
+  @apply transition-all duration-200 ease-in-out;
+
+  &::before {
+    @apply absolute left-0 top-0 bottom-0 w-1 bg-nc-content-brand opacity-0;
+    @apply transition-opacity duration-200 ease-in-out;
+    content: '';
+  }
+
+  &.nc-version-item-clickable {
+    @apply cursor-pointer;
+
+    &:hover {
+      @apply border-nc-border-brand transform translate-x-0.5;
+      box-shadow: 0 4px 12px rgba(51, 102, 255, 0.08);
+
+      &::before {
+        @apply opacity-100;
+      }
+
+      .nc-version-icon {
+        @apply transform scale-105;
+        box-shadow: 0 4px 8px rgba(51, 102, 255, 0.15);
+      }
+
+      .nc-chevron-icon {
+        @apply opacity-100;
+      }
+    }
+  }
+
+  &:last-child {
+    @apply mb-0;
+  }
+}
+
+.nc-chevron-icon {
+  @apply opacity-0 transition-opacity duration-200 ease-in-out;
+}
+
+.nc-version-info {
+  @apply flex items-center gap-3 flex-1 min-w-0;
+}
+
+.nc-version-icon {
+  @apply w-9 h-9 rounded-lg bg-nc-bg-gray-light border-1 border-nc-border-gray-light;
+  @apply flex items-center justify-center text-nc-content-gray flex-shrink-0;
+  @apply transition-all duration-200 ease-in-out;
+}
+
+.nc-version-details {
+  @apply flex-1 min-w-0;
+}
+
+.nc-version-title {
+  @apply flex items-center gap-2 mb-1;
+}
+
+.nc-version-number {
+  @apply font-mono font-bold text-base text-nc-content-gray-emphasis;
+}
+
+.nc-version-badge {
+  @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full;
+  @apply bg-nc-bg-green-light text-nc-content-green-dark;
+  @apply text-xs font-semibold;
+}
+
+.nc-version-date {
+  @apply text-xs text-nc-content-gray-subtle2;
+}
+
+.nc-version-installs {
+  @apply flex items-center gap-3;
+}
+
+.nc-installs-count {
+  @apply flex items-center gap-2 text-sm;
+  @apply px-3 py-1.5 rounded-lg bg-nc-bg-gray-light;
+}
+
+.nc-deployments-empty {
+  @apply flex flex-col items-center justify-center py-16;
+}
+
+.nc-empty-icon {
+  @apply w-16 h-16 rounded-full bg-nc-bg-gray-light;
+  @apply flex items-center justify-center mb-4;
+}
+
+.nc-deployments-error {
+  @apply flex flex-col items-center justify-center py-16;
+}
+
+.nc-error-icon {
+  @apply w-16 h-16 rounded-full bg-nc-bg-red-light;
+  @apply flex items-center justify-center mb-4;
+}
+</style>
diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppModal.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppModal.vue
deleted file mode 100644
index 86efb99fc2..0000000000
--- a/packages/nc-gui/components/smartsheet/topbar/ManagedAppModal.vue
+++ /dev/null
@@ -1,654 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  visible: boolean
-  managedApp: any
-  currentVersion: any
-  initialTab?: 'publish' | 'fork' | 'deployments'
-}>()
-
-const emit = defineEmits(['update:visible', 'published', 'forked'])
-
-const { $api } = useNuxtApp()
-const baseStore = useBase()
-const { base } = storeToRefs(baseStore)
-
-const activeTab = ref('publish')
-const isLoading = ref(false)
-const isLoadingDeployments = ref(false)
-const versions = ref<any[]>([])
-const deploymentStats = ref<any>(null)
-
-// Version deployments modal
-const showVersionDeploymentsModal = ref(false)
-const selectedVersion = ref<any>(null)
-
-// Publish form (for draft versions)
-const publishForm = reactive({
-  releaseNotes: '',
-})
-
-// Fork form (for creating new draft from published)
-const forkForm = reactive({
-  version: '',
-  releaseNotes: '',
-})
-
-const isPublished = computed(() => props.currentVersion?.status === 'published')
-const isDraft = computed(() => props.currentVersion?.status === 'draft')
-
-// Load versions
-const loadVersions = async () => {
-  if (!props.managedApp?.id || !base.value?.fk_workspace_id) return
-
-  try {
-    const response = await $api.internal.getOperation(base.value.fk_workspace_id, base.value.id!, {
-      operation: 'managedAppVersionsList',
-      managedAppId: props.managedApp.id,
-    } as any)
-    if (response?.list) {
-      versions.value = response.list
-    }
-  } catch (e: any) {
-    console.error('Failed to load versions:', e)
-  }
-}
-
-// Load real deployment statistics
-const loadDeployments = async () => {
-  if (!props.managedApp?.id || !base.value?.fk_workspace_id) return
-
-  isLoadingDeployments.value = true
-  try {
-    const response = await $api.internal.getOperation(base.value.fk_workspace_id, base.value.id!, {
-      operation: 'managedAppDeployments',
-      managedAppId: props.managedApp.id,
-    } as any)
-    if (response) {
-      deploymentStats.value = response
-    }
-  } catch (e: any) {
-    console.error('Failed to load deployments:', e)
-  } finally {
-    isLoadingDeployments.value = false
-  }
-}
-
-const publishCurrentDraft = async () => {
-  if (!base.value?.fk_workspace_id || !base.value?.id || !props.currentVersion?.id) return
-
-  isLoading.value = true
-  try {
-    await $api.internal.postOperation(
-      base.value.fk_workspace_id,
-      base.value.id,
-      {
-        operation: 'managedAppPublish',
-      },
-      {
-        managedAppVersionId: props.currentVersion.id,
-      },
-    )
-
-    // Reload base to get updated managed app version info
-    if (base.value?.id) {
-      await baseStore.loadProject()
-    }
-
-    message.success(`Version ${props.currentVersion.version} published successfully!`)
-    emit('published')
-    emit('update:visible', false)
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  } finally {
-    isLoading.value = false
-  }
-}
-
-const createNewDraft = async () => {
-  if (!base.value?.fk_workspace_id || !base.value?.id || !props.managedApp?.id) return
-  if (!forkForm.version) {
-    message.error('Please provide a version')
-    return
-  }
-
-  isLoading.value = true
-  try {
-    await $api.internal.postOperation(
-      base.value.fk_workspace_id,
-      base.value.id,
-      {
-        operation: 'managedAppCreateDraft',
-      },
-      {
-        managedAppId: props.managedApp.id,
-        version: forkForm.version,
-      },
-    )
-
-    // Reload base to get updated managed app version info
-    if (base.value?.id) {
-      await baseStore.loadProject()
-    }
-
-    message.success(`New draft version ${forkForm.version} created successfully!`)
-    emit('forked')
-    emit('update:visible', false)
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  } finally {
-    isLoading.value = false
-  }
-}
-
-const formatDate = (dateString: string) => {
-  if (!dateString) return 'N/A'
-
-  return parseStringDateTime(dateString, 'MMM DD, YYYY, HH:mm A')
-}
-
-const openVersionDeploymentsModal = (version: any) => {
-  selectedVersion.value = version
-  showVersionDeploymentsModal.value = true
-}
-
-watch(
-  () => props.visible,
-  async (val) => {
-    if (val) {
-      // Use initialTab if provided, otherwise default based on version status
-      if (props.initialTab) {
-        activeTab.value = props.initialTab
-      } else if (isDraft.value) {
-        activeTab.value = 'publish'
-      } else if (isPublished.value) {
-        activeTab.value = 'fork'
-      } else {
-        // Fallback to deployments if version status is unclear
-        activeTab.value = 'deployments'
-      }
-
-      await loadVersions()
-      await loadDeployments()
-      if (!isDraft.value) {
-        forkForm.version = suggestManagedAppNextVersion(props.currentVersion?.version)
-      }
-    }
-  },
-)
-
-const modalSize = computed(() => {
-  if (props.initialTab === 'fork' || props.initialTab === 'publish') {
-    return 'sm'
-  }
-
-  return 'sm'
-})
-</script>
-
-<template>
-  <NcModal
-    :visible="visible"
-    :size="modalSize"
-    :height="modalSize === 'sm' ? 'auto' : undefined"
-    nc-modal-class-name="nc-modal-managed-app-management"
-    @update:visible="emit('update:visible', $event)"
-  >
-    <div class="flex flex-col h-full">
-      <!-- Header with Tabs -->
-      <div class="nc-managed-app-header">
-        <div class="flex items-center gap-3 flex-1">
-          <div class="nc-managed-app-icon">
-            <GeneralIcon icon="ncBox" class="h-5 w-5 text-white" />
-          </div>
-          <div class="flex-1">
-            <div class="text-lg font-semibold text-nc-content-gray-emphasis">Managed App Management</div>
-            <div class="text-xs text-nc-content-gray-subtle2">Manage versions and track deployments</div>
-          </div>
-        </div>
-
-        <NcButton size="small" type="text" @click="emit('update:visible', false)">
-          <GeneralIcon icon="close" class="text-nc-content-gray-muted h-4 w-4" />
-        </NcButton>
-      </div>
-
-      <!-- Content -->
-      <div class="flex-1 nc-scrollbar-thin">
-        <!-- Publish Tab -->
-        <div v-if="activeTab === 'publish'" class="p-6">
-          <NcAlert
-            type="info"
-            align="top"
-            class="!p-3 !items-start bg-nc-bg-blue-light border-1 !border-nc-blue-200 rounded-lg p-3 mb-4"
-          >
-            <template #icon>
-              <GeneralIcon icon="info" class="w-4 h-4 mt-0.5 text-nc-content-blue-dark flex-none" />
-            </template>
-
-            <template #description>
-              Publishing version <strong>{{ currentVersion?.version }}</strong> will make it available in the App Store and
-              automatically update all installations.
-            </template>
-          </NcAlert>
-
-          <div class="space-y-4">
-            <div>
-              <label class="text-nc-content-gray text-sm font-medium mb-2 block">Version</label>
-              <a-input :value="currentVersion?.version" disabled size="large" class="rounded-lg nc-input-sm">
-                <template #prefix>
-                  <span class="text-nc-content-gray-subtle2">v</span>
-                </template>
-              </a-input>
-            </div>
-
-            <div>
-              <label class="text-nc-content-gray text-sm font-medium mb-2 block">Release Notes (Optional)</label>
-              <a-textarea
-                v-model:value="publishForm.releaseNotes"
-                placeholder="Describe what's new in this version"
-                :rows="6"
-                size="large"
-                class="rounded-lg nc-input-sm"
-              />
-            </div>
-          </div>
-        </div>
-
-        <!-- Fork Tab -->
-        <div v-if="activeTab === 'fork'" class="p-6">
-          <NcAlert
-            type="info"
-            align="top"
-            class="!p-3 !items-start bg-nc-bg-blue-light border-1 !border-nc-blue-200 rounded-lg p-3 mb-4"
-          >
-            <template #icon>
-              <GeneralIcon icon="info" class="w-4 h-4 mt-0.5 text-nc-content-blue-dark flex-none" />
-            </template>
-
-            <template #description>
-              Create a new draft version to work on updates. Current published version
-              <strong>{{ currentVersion?.version }}</strong> will remain unchanged.
-            </template>
-          </NcAlert>
-
-          <div class="space-y-4">
-            <div>
-              <label class="text-nc-content-gray text-sm font-medium mb-2 block">
-                New Version <span class="text-nc-content-red-dark">*</span>
-              </label>
-              <a-input
-                v-model:value="forkForm.version"
-                placeholder="e.g., 2.0.0"
-                size="large"
-                class="rounded-lg nc-input-sm nc-input-shadow"
-              >
-                <template #prefix>
-                  <span class="text-nc-content-gray-subtle2">v</span>
-                </template>
-              </a-input>
-              <div class="text-xs text-nc-content-gray-subtle2 mt-1.5">Use semantic versioning (e.g., 2.0.0, 2.1.0)</div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Deployments Tab -->
-        <div v-if="activeTab === 'deployments'" class="nc-deployments-content">
-          <div v-if="isLoadingDeployments" class="nc-deployments-loading">
-            <a-spin size="large" />
-            <div class="text-sm text-nc-content-gray-muted mt-3">Loading deployment statistics...</div>
-          </div>
-
-          <template v-else-if="deploymentStats">
-            <!-- Stats Cards -->
-            <div class="nc-deployment-stats">
-              <!-- Total Deployments -->
-              <div class="nc-stat-card">
-                <div class="nc-stat-value">{{ deploymentStats.statistics?.totalDeployments || 0 }}</div>
-                <div class="nc-stat-label">Total Installs</div>
-              </div>
-
-              <!-- Active -->
-              <div class="nc-stat-card">
-                <div class="nc-stat-value text-green-600">{{ deploymentStats.statistics?.activeDeployments || 0 }}</div>
-                <div class="nc-stat-label">Active</div>
-              </div>
-
-              <!-- Failed -->
-              <div class="nc-stat-card">
-                <div class="nc-stat-value text-red-600">{{ deploymentStats.statistics?.failedDeployments || 0 }}</div>
-                <div class="nc-stat-label">Failed</div>
-              </div>
-
-              <!-- Versions -->
-              <div class="nc-stat-card">
-                <div class="nc-stat-value">{{ deploymentStats.statistics?.totalVersions || 0 }}</div>
-                <div class="nc-stat-label">Versions</div>
-              </div>
-            </div>
-
-            <!-- Version List -->
-            <div v-if="deploymentStats.versionStats && deploymentStats.versionStats.length > 0" class="nc-version-list-wrapper">
-              <div class="nc-version-list-header">
-                <div>
-                  <h3 class="text-sm font-semibold text-nc-content-gray-emphasis">Version History</h3>
-                  <p class="text-xs text-nc-content-gray-subtle2 mt-0.5">
-                    {{ deploymentStats.versionStats.length }}
-                    {{ deploymentStats.versionStats.length === 1 ? 'version' : 'versions' }}
-                    published
-                  </p>
-                </div>
-              </div>
-
-              <div class="nc-version-list">
-                <div
-                  v-for="(versionStat, index) in deploymentStats.versionStats"
-                  :key="versionStat.versionId"
-                  class="nc-version-item"
-                  :class="{ 'nc-version-item-clickable': versionStat.deploymentCount > 0 }"
-                  @click="versionStat.deploymentCount > 0 && openVersionDeploymentsModal(versionStat)"
-                >
-                  <div class="nc-version-info">
-                    <div class="nc-version-icon">
-                      <GeneralIcon icon="ncGitBranch" class="w-4 h-4" />
-                    </div>
-                    <div class="nc-version-details">
-                      <div class="nc-version-title">
-                        <span class="nc-version-number">v{{ versionStat.version }}</span>
-                        <div v-if="index === 0 && versionStat.status === 'published'" class="nc-version-badge">
-                          <GeneralIcon icon="check" class="w-3 h-3" />
-                          <span>Current</span>
-                        </div>
-                      </div>
-                      <div class="nc-version-date">Published {{ formatDate(versionStat.publishedAt) }}</div>
-                    </div>
-                  </div>
-
-                  <div class="nc-version-installs">
-                    <div class="nc-installs-count">
-                      <GeneralIcon icon="download" class="w-4 h-4 text-nc-content-gray-subtle2" />
-                      <span class="font-bold">{{ versionStat.deploymentCount }}</span>
-                      <span class="text-nc-content-gray-muted">{{
-                        versionStat.deploymentCount === 1 ? 'install' : 'installs'
-                      }}</span>
-                    </div>
-                    <GeneralIcon
-                      v-if="versionStat.deploymentCount > 0"
-                      icon="chevronRight"
-                      class="w-4 h-4 text-nc-content-gray-subtle2 nc-chevron-icon"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- Empty State -->
-            <div v-else class="nc-deployments-empty">
-              <div class="nc-empty-icon">
-                <GeneralIcon icon="ncServer" class="w-10 h-10 text-nc-content-gray-muted" />
-              </div>
-              <div class="text-base font-semibold text-nc-content-gray mb-1">No installations yet</div>
-              <div class="text-sm text-nc-content-gray-subtle max-w-md text-center">
-                Once users install your application from the App Store, their deployments will appear here.
-              </div>
-            </div>
-          </template>
-
-          <div v-else class="nc-deployments-error">
-            <div class="nc-error-icon">
-              <GeneralIcon icon="alertTriangle" class="w-10 h-10 text-nc-content-red-dark" />
-            </div>
-            <div class="text-base font-semibold text-nc-content-gray mb-1">Failed to load statistics</div>
-            <div class="text-sm text-nc-content-gray-subtle mb-4">There was an error loading deployment data</div>
-            <NcButton size="small" type="secondary" @click="loadDeployments">
-              <template #icon>
-                <GeneralIcon icon="reload" />
-              </template>
-              Retry
-            </NcButton>
-          </div>
-        </div>
-      </div>
-
-      <!-- Footer -->
-      <div v-if="activeTab === 'publish' || activeTab === 'fork'" class="nc-managed-app-footer">
-        <div class="flex justify-end gap-2">
-          <NcButton type="secondary" size="small" @click="emit('update:visible', false)"> Cancel </NcButton>
-
-          <NcButton v-if="activeTab === 'publish'" type="primary" size="small" :loading="isLoading" @click="publishCurrentDraft">
-            <template #icon>
-              <GeneralIcon icon="upload" />
-            </template>
-            Publish
-          </NcButton>
-
-          <NcButton
-            v-if="activeTab === 'fork'"
-            type="primary"
-            size="small"
-            :loading="isLoading"
-            :disabled="!forkForm.version"
-            @click="createNewDraft"
-          >
-            <template #icon>
-              <GeneralIcon icon="plus" />
-            </template>
-            Create Draft
-          </NcButton>
-        </div>
-      </div>
-    </div>
-
-    <!-- Version Deployments Modal -->
-    <SmartsheetTopbarManagedAppVersionDeploymentsModal
-      v-model:visible="showVersionDeploymentsModal"
-      :managed-app="managedApp"
-      :version="selectedVersion"
-    />
-  </NcModal>
-</template>
-
-<style lang="scss" scoped>
-.nc-managed-app-header {
-  @apply flex items-center gap-4 px-4 py-3 border-b-1 border-nc-border-gray-medium;
-}
-
-.nc-managed-app-icon {
-  @apply w-10 h-10 rounded-xl flex items-center justify-center;
-  background: linear-gradient(135deg, var(--nc-content-brand) 0%, var(--nc-content-blue-medium) 100%);
-  box-shadow: 0 2px 4px rgba(51, 102, 255, 0.15);
-}
-
-.nc-managed-app-tabs {
-  @apply flex bg-nc-bg-gray-medium rounded-lg p-1;
-}
-
-.nc-managed-app-tab {
-  @apply px-3 py-1.5 flex items-center gap-2 text-xs rounded-md select-none cursor-pointer;
-  @apply text-nc-content-gray-subtle2 transition-all duration-200;
-
-  &.selected {
-    @apply bg-nc-bg-default text-nc-content-gray-emphasis;
-    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.06), 0px 5px 3px -2px rgba(0, 0, 0, 0.02);
-  }
-
-  &:hover:not(.selected) {
-    @apply text-nc-content-gray;
-  }
-}
-
-.nc-managed-app-footer {
-  @apply px-6 py-3 border-t-1 border-nc-border-gray-medium;
-}
-
-// Deployments Tab Styles
-.nc-deployments-content {
-  @apply px-6 pb-6;
-}
-
-.nc-deployments-loading {
-  @apply flex flex-col items-center justify-center py-16;
-}
-
-.nc-deployment-stats {
-  @apply grid grid-cols-4 mb-6;
-}
-
-.nc-stat-card {
-  @apply flex flex-col gap-1 items-center justify-center border-r-1 border-nc-border-gray-medium last:border-r-0 p-4 text-nc-content-gray-subtle;
-}
-
-.nc-stat-icon-wrapper {
-  @apply w-10 h-10 rounded-lg flex items-center justify-center mb-3;
-}
-
-.nc-stat-value {
-  @apply text-subHeading1 font-normal;
-}
-
-.nc-stat-label {
-  @apply text-tiny text-nc-content-gray-muted uppercase;
-}
-
-.nc-version-list-wrapper {
-  @apply mt-6;
-}
-
-.nc-version-list-header {
-  @apply flex items-center justify-between mb-4;
-}
-
-.nc-version-list {
-  @apply space-y-2;
-}
-
-.nc-version-item {
-  @apply bg-nc-bg-default border-1 border-nc-border-gray-medium rounded-xl p-4 flex items-center justify-between gap-4 relative overflow-hidden;
-  @apply transition-all duration-200 ease-in-out;
-
-  &::before {
-    @apply absolute left-0 top-0 bottom-0 w-1 bg-nc-content-brand opacity-0;
-    @apply transition-opacity duration-200 ease-in-out;
-    content: '';
-  }
-
-  &.nc-version-item-clickable {
-    @apply cursor-pointer;
-
-    &:hover {
-      @apply border-nc-border-brand transform translate-x-0.5;
-      box-shadow: 0 4px 12px rgba(51, 102, 255, 0.08);
-
-      &::before {
-        @apply opacity-100;
-      }
-
-      .nc-version-icon {
-        @apply transform scale-105;
-        box-shadow: 0 4px 8px rgba(51, 102, 255, 0.15);
-      }
-
-      .nc-chevron-icon {
-        @apply opacity-100;
-      }
-    }
-  }
-
-  &:last-child {
-    @apply mb-0;
-  }
-}
-
-.nc-chevron-icon {
-  @apply opacity-0 transition-opacity duration-200 ease-in-out;
-}
-
-.nc-version-info {
-  @apply flex items-center gap-3 flex-1 min-w-0;
-}
-
-.nc-version-icon {
-  @apply w-9 h-9 rounded-lg bg-nc-bg-gray-light border-1 border-nc-border-gray-light;
-  @apply flex items-center justify-center text-nc-content-gray flex-shrink-0;
-  @apply transition-all duration-200 ease-in-out;
-}
-
-.nc-version-details {
-  @apply flex-1 min-w-0;
-}
-
-.nc-version-title {
-  @apply flex items-center gap-2 mb-1;
-}
-
-.nc-version-number {
-  @apply font-mono font-bold text-base text-nc-content-gray-emphasis;
-}
-
-.nc-version-badge {
-  @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full;
-  @apply bg-nc-bg-green-light text-nc-content-green-dark;
-  @apply text-xs font-semibold;
-}
-
-.nc-version-date {
-  @apply text-xs text-nc-content-gray-subtle2;
-}
-
-.nc-version-installs {
-  @apply flex items-center gap-3;
-}
-
-.nc-installs-count {
-  @apply flex items-center gap-2 text-sm;
-  @apply px-3 py-1.5 rounded-lg bg-nc-bg-gray-light;
-}
-
-.nc-deployments-empty {
-  @apply flex flex-col items-center justify-center py-16;
-}
-
-.nc-empty-icon {
-  @apply w-16 h-16 rounded-full bg-nc-bg-gray-light;
-  @apply flex items-center justify-center mb-4;
-}
-
-.nc-deployments-error {
-  @apply flex flex-col items-center justify-center py-16;
-}
-
-.nc-error-icon {
-  @apply w-16 h-16 rounded-full bg-nc-bg-red-light;
-  @apply flex items-center justify-center mb-4;
-}
-
-// Responsive
-@media (max-width: 1024px) {
-  .nc-deployment-stats {
-    @apply grid-cols-2 gap-3;
-  }
-}
-
-@media (max-width: 640px) {
-  .nc-deployment-stats {
-    @apply grid-cols-1;
-  }
-
-  .nc-version-item {
-    @apply flex-col items-start;
-  }
-
-  .nc-version-installs {
-    @apply w-full justify-between;
-  }
-}
-</style>
-
-<style lang="scss">
-.nc-modal-managed-app-management {
-  @apply !p-0;
-
-  &.nc-modal-size-sm {
-    max-height: min(90vh, 540px) !important;
-    height: min(90vh, 540px) !important;
-  }
-}
-</style>
diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
index a8a9012194..6c9d223036 100644
--- a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
@@ -10,16 +10,16 @@ const { base, isManagedAppMaster, isManagedAppInstaller, managedApp, currentVers
 
 const isModalVisible = ref(false)
 
-const initialTab = ref<'publish' | 'fork' | 'deployments' | undefined>(undefined)
+const modalVariant = ref<'draftOrPublish' | 'versionHistory' | undefined>(undefined)
 
 const isOpenDropdown = ref<boolean>(false)
 
 const isDraft = computed(() => managedAppVersionsInfo.value.current?.status === 'draft')
 
-const openModal = (tab?: 'publish' | 'fork' | 'deployments') => {
+const openModal = (variant?: 'draftOrPublish' | 'versionHistory') => {
   isOpenDropdown.value = false
 
-  initialTab.value = tab
+  modalVariant.value = variant
 
   nextTick(() => {
     isModalVisible.value = true
@@ -31,14 +31,6 @@ const loadManagedAppAndCurrentVersion = async () => {
   await loadCurrentVersion()
 }
 
-const handlePublished = async () => {
-  await loadManagedAppAndCurrentVersion()
-}
-
-const handleForked = async () => {
-  await loadManagedAppAndCurrentVersion()
-}
-
 watch(
   () => (base.value as any)?.managed_app_id,
   async (managedAppId) => {
@@ -158,7 +150,7 @@ const badgeConfig = computed(() => {
                 managedAppVersionsInfo.published.version || '1.0.0',
               )} to make changes`"
               icon-wrapper-class="bg-nc-bg-gray-light dakr:bg-nc-bg-gray-light/75"
-              @click="openModal('fork')"
+              @click="openModal('draftOrPublish')"
             >
               <template #icon>
                 <GeneralIcon icon="ncCopy" class="text-nc-content-gray-muted" />
@@ -184,7 +176,7 @@ const badgeConfig = computed(() => {
             <SmartsheetTopbarManagedAppStatusMenuItem
               clickable
               icon-wrapper-class="bg-green-50 dark:bg-nc-green-20"
-              @click="openModal('publish')"
+              @click="openModal('draftOrPublish')"
             >
               <template #icon>
                 <GeneralIcon icon="ncArrowUp" class="text-green-600" />
@@ -219,7 +211,7 @@ const badgeConfig = computed(() => {
           <!-- Version history  -->
           <div
             class="flex items-center gap-2 px-5 py-2 text-captionSm text-nc-content-gray-muted cursor-pointer select-none"
-            @click="openModal('deployments')"
+            @click="openModal('versionHistory')"
           >
             <GeneralIcon icon="ncClock" />
             View version history
@@ -238,7 +230,7 @@ const badgeConfig = computed(() => {
 
             <template v-if="managedAppVersionsInfo.current?.published_at" #subtext>
               <span class="text-green-600">
-                Published {{ parseStringDateTime(managedAppVersionsInfo.current?.published_at, 'MMM DD, YYYY, HH:mm A') }}
+                Published {{ parseStringDateTime(managedAppVersionsInfo.current?.published_at, 'MMM DD, YYYY, hh:mm A') }}
               </span>
             </template>
           </SmartsheetTopbarManagedAppStatusMenuItem>
@@ -280,19 +272,7 @@ const badgeConfig = computed(() => {
     </template>
   </NcDropdown>
 
-  <DlgManagedApp v-if="initialTab !== 'deployments'" v-model:visible="isModalVisible" modal-size="sm" variant="draftOrPublish">
-  </DlgManagedApp>
-
-  <!-- Managed App Modal -->
-  <SmartsheetTopbarManagedAppModal
-    v-if="initialTab === 'deployments'"
-    v-model:visible="isModalVisible"
-    :managed-app="managedApp"
-    :current-version="managedAppVersionsInfo.current"
-    :initial-tab="initialTab"
-    @published="handlePublished"
-    @forked="handleForked"
-  />
+  <DlgManagedApp v-model:visible="isModalVisible" modal-size="sm" :variant="modalVariant"> </DlgManagedApp>
 </template>
 
 <style lang="scss" scoped>
diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppVersionDeploymentsModal.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppVersionDeploymentsModal.vue
deleted file mode 100644
index 6da59a3f61..0000000000
--- a/packages/nc-gui/components/smartsheet/topbar/ManagedAppVersionDeploymentsModal.vue
+++ /dev/null
@@ -1,513 +0,0 @@
-<script setup lang="ts">
-import { DeploymentStatus } from 'nocodb-sdk'
-
-const props = defineProps<{
-  visible: boolean
-  managedApp: any
-  version: any
-}>()
-
-const emit = defineEmits(['update:visible'])
-
-const { $api } = useNuxtApp()
-const { base } = storeToRefs(useBase())
-
-const isLoading = ref(false)
-const deployments = ref<any[]>([])
-const pageInfo = ref<any>({})
-const currentPage = ref(1)
-const pageSize = 10
-
-// Expanded deployment logs state
-const expandedBaseId = ref<string | null>(null)
-const deploymentLogs = ref<any[]>([])
-const logsPageInfo = ref<any>({})
-const logsCurrentPage = ref(1)
-const logsPageSize = 10
-const isLoadingLogs = ref(false)
-
-const loadDeployments = async (page = 1) => {
-  if (!props.managedApp?.id || !props.version?.versionId || !base.value?.fk_workspace_id) return
-
-  isLoading.value = true
-  try {
-    const offset = (page - 1) * pageSize
-    const response = await $api.internal.getOperation(base.value.fk_workspace_id, base.value.id!, {
-      operation: 'managedAppVersionDeployments',
-      managedAppId: props.managedApp.id,
-      versionId: props.version.versionId,
-      limit: pageSize,
-      offset,
-    } as any)
-
-    if (response) {
-      deployments.value = response.list || []
-      pageInfo.value = response.pageInfo || {}
-      currentPage.value = page
-    }
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  } finally {
-    isLoading.value = false
-  }
-}
-
-const loadDeploymentLogs = async (baseId: string, page = 1) => {
-  if (!base.value?.fk_workspace_id) return
-
-  isLoadingLogs.value = true
-  try {
-    const offset = (page - 1) * logsPageSize
-    const response = await $api.internal.getOperation(base.value.fk_workspace_id, base.value.id!, {
-      operation: 'managedAppDeploymentLogs',
-      baseId,
-      limit: logsPageSize,
-      offset,
-    } as any)
-
-    if (response) {
-      deploymentLogs.value = response.logs || []
-      logsPageInfo.value = response.pageInfo || {}
-      logsCurrentPage.value = page
-    }
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  } finally {
-    isLoadingLogs.value = false
-  }
-}
-
-const toggleExpand = async (deployment: any) => {
-  if (expandedBaseId.value === deployment.baseId) {
-    // Collapse
-    expandedBaseId.value = null
-    deploymentLogs.value = []
-    logsCurrentPage.value = 1
-  } else {
-    // Expand and load logs
-    expandedBaseId.value = deployment.baseId
-    await loadDeploymentLogs(deployment.baseId, 1)
-  }
-}
-
-const formatDate = (dateString: string) => {
-  if (!dateString) return 'N/A'
-  const date = new Date(dateString)
-  return new Intl.DateTimeFormat('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  }).format(date)
-}
-
-const getDeploymentTypeLabel = (type: string) => {
-  const labels = {
-    install: 'Initial Install',
-    update: 'Update',
-  }
-  return labels[type as keyof typeof labels] || type
-}
-
-const getStatusColor = (status: string) => {
-  const colors = {
-    [DeploymentStatus.SUCCESS]: 'text-nc-content-green-dark bg-nc-bg-green-light',
-    [DeploymentStatus.FAILED]: 'text-nc-content-red-dark bg-nc-bg-red-light',
-    [DeploymentStatus.PENDING]: 'text-nc-content-orange-dark bg-nc-bg-orange-light',
-    [DeploymentStatus.IN_PROGRESS]: 'text-nc-content-blue-dark bg-nc-bg-blue-light',
-  }
-  return colors[status as keyof typeof colors] || 'text-nc-content-gray bg-nc-bg-gray-light'
-}
-
-const handlePageChange = (page: number) => {
-  loadDeployments(page)
-}
-
-const handleLogsPageChange = (page: number) => {
-  if (expandedBaseId.value) {
-    loadDeploymentLogs(expandedBaseId.value, page)
-  }
-}
-
-watch(
-  () => props.visible,
-  (val) => {
-    if (val) {
-      loadDeployments(1)
-      expandedBaseId.value = null
-      deploymentLogs.value = []
-    }
-  },
-)
-</script>
-
-<template>
-  <NcModal :visible="visible" size="lg" nc-modal-class-name="!p-0" @update:visible="emit('update:visible', $event)">
-    <div class="nc-deployments-modal">
-      <!-- Header -->
-      <div class="nc-deployments-header">
-        <div class="nc-deployments-header-icon">
-          <GeneralIcon icon="ncServer" class="w-5 h-5 text-white" />
-        </div>
-        <div class="flex-1 min-w-0">
-          <h2 class="text-base font-semibold text-nc-content-gray-emphasis m-0">Version Deployments</h2>
-          <p class="text-xs text-nc-content-gray-subtle2 m-0 mt-0.5">
-            Tracking installations for
-            <span class="font-mono font-semibold text-nc-content-brand">v{{ version?.version }}</span>
-          </p>
-        </div>
-        <NcButton type="text" size="small" class="!px-1" @click="emit('update:visible', false)">
-          <GeneralIcon icon="close" class="w-4 h-4" />
-        </NcButton>
-      </div>
-
-      <!-- Content -->
-      <div class="nc-deployments-content">
-        <div v-if="isLoading" class="nc-deployments-loading">
-          <a-spin size="large" />
-          <div class="text-sm text-nc-content-gray-muted mt-3">Loading deployments...</div>
-        </div>
-
-        <template v-else-if="deployments.length > 0">
-          <div class="nc-deployments-list">
-            <div v-for="deployment in deployments" :key="deployment.baseId" class="nc-deployment-item">
-              <!-- Deployment Row -->
-              <div class="nc-deployment-row" @click="toggleExpand(deployment)">
-                <div class="nc-deployment-info">
-                  <!-- Expand Icon -->
-                  <div class="nc-expand-icon">
-                    <GeneralIcon
-                      :icon="expandedBaseId === deployment.baseId ? 'ncChevronDown' : 'ncChevronRight'"
-                      class="w-4 h-4"
-                    />
-                  </div>
-
-                  <!-- Deployment Details -->
-                  <div class="nc-deployment-icon">
-                    <GeneralIcon icon="ncServer" class="w-4 h-4" />
-                  </div>
-                  <div class="nc-deployment-details">
-                    <div class="nc-deployment-title">{{ deployment.baseTitle }}</div>
-                    <div class="nc-deployment-date">
-                      <GeneralIcon icon="calendar" class="w-3.5 h-3.5 opacity-60" />
-                      <span>Installed {{ formatDate(deployment.installedAt) }}</span>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- Status Badge -->
-                <div class="nc-deployment-status">
-                  <div class="nc-status-badge" :class="getStatusColor(deployment.status)">
-                    <span>{{ deployment.status }}</span>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Expanded Logs Section -->
-              <div v-if="expandedBaseId === deployment.baseId" class="nc-deployment-logs-wrapper">
-                <div class="nc-deployment-logs">
-                  <div class="nc-logs-header">
-                    <GeneralIcon icon="ncFileText" class="w-4 h-4 text-nc-content-gray-subtle2" />
-                    <span>Deployment History</span>
-                  </div>
-
-                  <div v-if="isLoadingLogs" class="nc-logs-loading">
-                    <a-spin size="small" />
-                    <span class="text-xs text-nc-content-gray-muted ml-2">Loading history...</span>
-                  </div>
-
-                  <template v-else-if="deploymentLogs.length > 0">
-                    <div class="nc-logs-list">
-                      <div v-for="log in deploymentLogs" :key="log.id" class="nc-log-item">
-                        <div class="nc-log-content">
-                          <div class="nc-log-header">
-                            <div class="nc-log-badges">
-                              <div class="nc-log-status" :class="getStatusColor(log.status)">
-                                {{ log.status }}
-                              </div>
-                              <div class="nc-log-type">
-                                <GeneralIcon
-                                  :icon="log.deploymentType === 'install' ? 'download' : 'reload'"
-                                  class="w-3 h-3 opacity-60"
-                                />
-                                <span>{{ getDeploymentTypeLabel(log.deploymentType) }}</span>
-                              </div>
-                            </div>
-                          </div>
-
-                          <div class="nc-log-meta">
-                            <div class="nc-log-version">
-                              <div v-if="log.fromVersion" class="flex items-center gap-1.5">
-                                <span class="font-mono text-nc-content-gray-subtle2">v{{ log.fromVersion.version }}</span>
-                                <GeneralIcon icon="arrowRight" class="w-3 h-3 text-nc-content-gray-subtle2" />
-                              </div>
-                              <span class="font-mono font-semibold text-nc-content-brand">v{{ log.toVersion?.version }}</span>
-                            </div>
-                            <span class="nc-log-divider">•</span>
-                            <div class="nc-log-time">
-                              <GeneralIcon icon="ncClock" class="w-3.5 h-3.5 opacity-60" />
-                              <span>{{ formatDate(log.createdAt) }}</span>
-                            </div>
-                          </div>
-
-                          <div v-if="log.errorMessage" class="nc-log-error">
-                            <GeneralIcon icon="alertTriangle" class="w-3.5 h-3.5 flex-shrink-0" />
-                            <span>{{ log.errorMessage }}</span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <!-- Logs Pagination -->
-                    <div v-if="logsPageInfo.totalRows > logsPageSize" class="nc-logs-pagination">
-                      <a-pagination
-                        v-model:current="logsCurrentPage"
-                        :total="logsPageInfo.totalRows"
-                        :page-size="logsPageSize"
-                        :show-size-changer="false"
-                        size="small"
-                        @change="handleLogsPageChange"
-                      />
-                    </div>
-                  </template>
-
-                  <div v-else class="nc-logs-empty">
-                    <GeneralIcon icon="inbox" class="w-8 h-8 text-nc-content-gray-subtle2 mb-2" />
-                    <div class="text-sm text-nc-content-gray-subtle2">No deployment history available</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Deployments Pagination -->
-          <div v-if="pageInfo.totalRows > pageSize" class="nc-deployments-pagination">
-            <a-pagination
-              v-model:current="currentPage"
-              :total="pageInfo.totalRows"
-              :page-size="pageSize"
-              :show-size-changer="false"
-              @change="handlePageChange"
-            />
-          </div>
-        </template>
-
-        <!-- Empty State -->
-        <div v-else class="nc-deployments-empty">
-          <div class="nc-empty-icon">
-            <GeneralIcon icon="ncServer" class="w-10 h-10 text-nc-content-gray-muted" />
-          </div>
-          <div class="text-base font-semibold text-nc-content-gray mb-1">No installations found</div>
-          <div class="text-sm text-nc-content-gray-subtle max-w-md text-center">
-            Version <span class="font-mono font-semibold">v{{ version?.version }}</span> hasn't been installed by any users yet
-          </div>
-        </div>
-      </div>
-    </div>
-  </NcModal>
-</template>
-
-<style lang="scss" scoped>
-.nc-deployments-modal {
-  @apply flex flex-col h-full max-h-[80vh];
-}
-
-.nc-deployments-header {
-  @apply flex items-center gap-3 px-4 py-3 border-b-1 border-nc-border-gray-medium;
-}
-
-.nc-deployments-header-icon {
-  @apply w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0;
-  background: linear-gradient(135deg, var(--nc-content-brand) 0%, var(--nc-content-blue-medium) 100%);
-  box-shadow: 0 2px 4px rgba(51, 102, 255, 0.15);
-}
-
-.nc-deployments-content {
-  @apply flex-1 overflow-y-auto p-6;
-}
-
-.nc-deployments-loading {
-  @apply flex flex-col items-center justify-center py-16;
-}
-
-.nc-deployments-list {
-  @apply space-y-3;
-}
-
-.nc-deployment-item {
-  @apply bg-nc-bg-default border-1 border-nc-border-gray-medium rounded-xl overflow-hidden relative;
-  @apply transition-all duration-200 ease-in-out;
-
-  &::before {
-    @apply absolute left-0 top-0 bottom-0 w-1 bg-nc-content-brand opacity-0;
-    @apply transition-opacity duration-200 ease-in-out;
-    content: '';
-  }
-
-  &:hover {
-    @apply border-nc-border-brand transform translate-x-0.5;
-    box-shadow: 0 4px 12px rgba(51, 102, 255, 0.08);
-
-    &::before {
-      @apply opacity-100;
-    }
-
-    .nc-deployment-icon {
-      @apply transform scale-105;
-      box-shadow: 0 4px 8px rgba(51, 102, 255, 0.15);
-    }
-  }
-}
-
-.nc-deployment-row {
-  @apply flex items-center justify-between gap-4 p-4 cursor-pointer;
-}
-
-.nc-deployment-info {
-  @apply flex items-center gap-3 flex-1 min-w-0;
-}
-
-.nc-expand-icon {
-  @apply w-6 h-6 flex items-center justify-center text-nc-content-gray-subtle2 flex-shrink-0;
-  @apply transition-transform duration-200;
-}
-
-.nc-deployment-icon {
-  @apply w-9 h-9 rounded-lg bg-nc-bg-gray-light border-1 border-nc-border-gray-light;
-  @apply flex items-center justify-center text-nc-content-gray flex-shrink-0;
-  @apply transition-all duration-200 ease-in-out;
-}
-
-.nc-deployment-details {
-  @apply flex-1 min-w-0;
-}
-
-.nc-deployment-title {
-  @apply font-semibold text-sm text-nc-content-gray-emphasis truncate mb-1;
-}
-
-.nc-deployment-date {
-  @apply flex items-center gap-1.5 text-xs text-nc-content-gray-subtle2;
-}
-
-.nc-deployment-status {
-  @apply flex-shrink-0;
-}
-
-.nc-status-badge {
-  @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold;
-}
-
-.nc-deployment-logs-wrapper {
-  @apply border-t-1 border-nc-border-gray-medium bg-nc-bg-gray-extralight;
-}
-
-.nc-deployment-logs {
-  @apply p-4;
-}
-
-.nc-logs-header {
-  @apply flex items-center gap-2 text-xs font-semibold text-nc-content-gray-emphasis mb-3;
-  @apply uppercase tracking-wide;
-}
-
-.nc-logs-loading {
-  @apply flex items-center justify-center py-8;
-}
-
-.nc-logs-list {
-  @apply space-y-2;
-}
-
-.nc-log-item {
-  @apply bg-nc-bg-default border-1 border-nc-border-gray-light rounded-lg p-3;
-  @apply transition-all duration-150;
-
-  &:hover {
-    @apply border-nc-border-gray-medium shadow-sm;
-  }
-}
-
-.nc-log-content {
-  @apply space-y-2;
-}
-
-.nc-log-header {
-  @apply flex items-center justify-between gap-2;
-}
-
-.nc-log-badges {
-  @apply flex items-center gap-2 flex-wrap;
-}
-
-.nc-log-status {
-  @apply inline-flex px-2 py-0.5 rounded text-xs font-semibold;
-}
-
-.nc-log-type {
-  @apply inline-flex items-center gap-1 px-2 py-0.5 rounded;
-  @apply bg-nc-bg-gray-light text-nc-content-gray text-xs font-medium;
-}
-
-.nc-log-meta {
-  @apply flex items-center gap-2 text-xs text-nc-content-gray-subtle2 flex-wrap;
-}
-
-.nc-log-version {
-  @apply flex items-center gap-1.5;
-}
-
-.nc-log-divider {
-  @apply text-nc-content-gray-subtle2;
-}
-
-.nc-log-time {
-  @apply flex items-center gap-1;
-}
-
-.nc-log-error {
-  @apply flex items-start gap-2 p-2 rounded-lg;
-  @apply bg-nc-bg-red-light text-nc-content-red-dark text-xs;
-}
-
-.nc-logs-pagination {
-  @apply flex justify-center mt-4 pt-4 border-t-1 border-nc-border-gray-light;
-}
-
-.nc-logs-empty {
-  @apply flex flex-col items-center justify-center py-12 text-center;
-}
-
-.nc-deployments-pagination {
-  @apply flex justify-center mt-6;
-}
-
-.nc-deployments-empty {
-  @apply flex flex-col items-center justify-center py-16;
-}
-
-.nc-empty-icon {
-  @apply w-16 h-16 rounded-full bg-nc-bg-gray-light;
-  @apply flex items-center justify-center mb-4;
-}
-
-// Responsive
-@media (max-width: 640px) {
-  .nc-deployment-row {
-    @apply flex-col items-start;
-  }
-
-  .nc-deployment-info {
-    @apply w-full;
-  }
-
-  .nc-deployment-status {
-    @apply w-full;
-  }
-
-  .nc-log-meta {
-    @apply flex-col items-start gap-1;
-  }
-}
-</style>

From 6623131f3eb8372158d1bca13653e6efbe8102a2 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Jan 2026 11:47:15 +0000
Subject: [PATCH 10/18] fix: menu item spacing

---
 .../dlg/ManagedApp/DraftOrPublish.vue         |  2 +-
 .../components/dlg/ManagedApp/Index.vue       |  6 ++---
 .../topbar/ManagedAppStatus/MenuItem.vue      |  2 +-
 .../topbar/ManagedAppStatus/index.vue         | 25 +++++++++++--------
 4 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue b/packages/nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue
index d1607e35da..f2010830ac 100644
--- a/packages/nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue
+++ b/packages/nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue
@@ -186,7 +186,7 @@ watch(
           </div>
         </div>
         <div v-if="isDraft">
-          <label class="text-nc-content-gray text-sm font-medium mb-2 block">Release Notes (Optional)</label>
+          <label class="text-nc-content-gray text-sm font-medium mb-2 block">Changelog</label>
           <a-textarea
             v-model:value="publishForm.releaseNotes"
             placeholder="Describe what's new in this version"
diff --git a/packages/nc-gui/components/dlg/ManagedApp/Index.vue b/packages/nc-gui/components/dlg/ManagedApp/Index.vue
index faf9542d3b..2f8bcf4592 100644
--- a/packages/nc-gui/components/dlg/ManagedApp/Index.vue
+++ b/packages/nc-gui/components/dlg/ManagedApp/Index.vue
@@ -30,13 +30,13 @@ const { modalSize, variant } = toRefs(props)
     :mask-closable="maskClosable"
     nc-modal-class-name="nc-modal-dlg-managed-app"
   >
-    <template v-if="variant === 'draftOrPublish'">
+    <slot v-if="$slots.default"> </slot>
+    <template v-else-if="variant === 'draftOrPublish'">
       <DlgManagedAppDraftOrPublish v-model:visible="vVisible" />
     </template>
-    <template v-if="variant === 'versionHistory'">
+    <template v-else-if="variant === 'versionHistory'">
       <DlgManagedAppVersionHistory v-model:visible="vVisible" />
     </template>
-    <slot v-else-if="$slots.default"> </slot>
     <template v-else>
       <slot name="header">
         <DlgManagedAppHeader v-model:visible="vVisible" :modalSize="modalSize" :title="title" :subTitle="subTitle" />
diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/MenuItem.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/MenuItem.vue
index ec297295bc..e19b3a0d8c 100644
--- a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/MenuItem.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/MenuItem.vue
@@ -32,7 +32,7 @@ withDefaults(defineProps<Props>(), {})
 
 <style lang="scss" scoped>
 .nc-managed-app-status-menu-item {
-  @apply flex items-center gap-3 px-3 py-2.5 my-0.5 mx-2 rounded-lg transition-colors group;
+  @apply flex items-center gap-3 p-2  my-0.5 mx-2 rounded-lg transition-colors group;
 
   &.nc-clickable {
     @apply cursor-pointer select-none hover:bg-nc-bg-gray-extralight;
diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
index 6c9d223036..4ec817ed3e 100644
--- a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
@@ -142,7 +142,7 @@ const badgeConfig = computed(() => {
               </template>
             </SmartsheetTopbarManagedAppStatusMenuItem>
 
-            <NcDivider />
+            <NcDivider class="!my-1" />
             <SmartsheetTopbarManagedAppStatusMenuItem
               clickable
               label="Fork to Draft"
@@ -171,7 +171,7 @@ const badgeConfig = computed(() => {
                 <span class="text-orange-600"> Editing Draft </span>
               </template>
             </SmartsheetTopbarManagedAppStatusMenuItem>
-            <NcDivider />
+            <NcDivider class="!my-1" />
 
             <SmartsheetTopbarManagedAppStatusMenuItem
               clickable
@@ -206,16 +206,21 @@ const badgeConfig = computed(() => {
               <GeneralIcon icon="delete" class="text-nc-content-gray-muted" />
             </template>
           </SmartsheetTopbarManagedAppStatusMenuItem>
-          <NcDivider />
+          <NcDivider class="!my-1" />
 
           <!-- Version history  -->
-          <div
-            class="flex items-center gap-2 px-5 py-2 text-captionSm text-nc-content-gray-muted cursor-pointer select-none"
+
+          <SmartsheetTopbarManagedAppStatusMenuItem
+            clickable
+            label="View version history"
+            subtext="See what's new in each version"
+            icon-wrapper-class="bg-nc-bg-gray-light"
             @click="openModal('versionHistory')"
           >
-            <GeneralIcon icon="ncClock" />
-            View version history
-          </div>
+            <template #icon>
+              <GeneralIcon icon="ncClock" class="text-nc-content-gray-muted" />
+            </template>
+          </SmartsheetTopbarManagedAppStatusMenuItem>
         </template>
 
         <!-- Installer application  -->
@@ -256,7 +261,7 @@ const badgeConfig = computed(() => {
             </SmartsheetTopbarManagedAppStatusMenuItem>
           </div>
 
-          <NcDivider />
+          <NcDivider class="!my-1" />
           <SmartsheetTopbarManagedAppStatusMenuItem
             clickable
             label="View Changelog"
@@ -281,6 +286,6 @@ const badgeConfig = computed(() => {
 }
 
 .nc-managed-app-status-menu-header {
-  @apply flex items-center justify-between gap-2 pt-3 px-5 mb-1 text-nc-content-gray-muted text-captionSm;
+  @apply flex items-center justify-between gap-2 pt-3 px-4 mb-1 text-nc-content-gray-muted text-captionSm;
 }
 </style>

From 48ef35796a5cb97f140439abf6afc5a81928c466 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Jan 2026 11:47:15 +0000
Subject: [PATCH 11/18] fix: update status menu

---
 .../smartsheet/topbar/ManagedAppStatus/MenuItem.vue  |  4 ++--
 .../smartsheet/topbar/ManagedAppStatus/index.vue     | 12 +++---------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/MenuItem.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/MenuItem.vue
index e19b3a0d8c..eb9640dbdb 100644
--- a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/MenuItem.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/MenuItem.vue
@@ -32,7 +32,7 @@ withDefaults(defineProps<Props>(), {})
 
 <style lang="scss" scoped>
 .nc-managed-app-status-menu-item {
-  @apply flex items-center gap-3 p-2  my-0.5 mx-2 rounded-lg transition-colors group;
+  @apply flex items-center gap-3 p-2  my-0.5 mx-1 rounded-lg transition-colors;
 
   &.nc-clickable {
     @apply cursor-pointer select-none hover:bg-nc-bg-gray-extralight;
@@ -47,6 +47,6 @@ withDefaults(defineProps<Props>(), {})
 }
 
 .nc-content-subtext {
-  @apply text-captionSm text-nc-content-gray-muted;
+  @apply text-captionSm text-nc-content-gray-muted mt-0.25;
 }
 </style>
diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
index 4ec817ed3e..44955660f9 100644
--- a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
@@ -91,12 +91,7 @@ const badgeConfig = computed(() => {
 </script>
 
 <template>
-  <NcDropdown
-    v-if="isManagedAppMaster || isManagedAppInstaller"
-    v-model:visible="isOpenDropdown"
-    placement="bottomRight"
-    overlay-class-name="!rounded-xl"
-  >
+  <NcDropdown v-if="isManagedAppMaster || isManagedAppInstaller" v-model:visible="isOpenDropdown" placement="bottomRight">
     <div class="flex items-center gap-2">
       <!-- Version Badge (clickable to open modal) -->
       <div
@@ -209,11 +204,10 @@ const badgeConfig = computed(() => {
           <NcDivider class="!my-1" />
 
           <!-- Version history  -->
-
           <SmartsheetTopbarManagedAppStatusMenuItem
             clickable
             label="View version history"
-            subtext="See what's new in each version"
+            subtext="Manage versions & track deployments"
             icon-wrapper-class="bg-nc-bg-gray-light"
             @click="openModal('versionHistory')"
           >
@@ -286,6 +280,6 @@ const badgeConfig = computed(() => {
 }
 
 .nc-managed-app-status-menu-header {
-  @apply flex items-center justify-between gap-2 pt-3 px-4 mb-1 text-nc-content-gray-muted text-captionSm;
+  @apply flex items-center justify-between gap-2 pt-3 px-3 mb-1 text-nc-content-gray-muted text-captionSm;
 }
 </style>

From d8cb64b87b1ef25759c04e640c4bee3a69e72281 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Jan 2026 11:47:15 +0000
Subject: [PATCH 12/18] fix: update version history and deployment cards

---
 .../components/dlg/ManagedApp/Header.vue      |  2 +-
 .../dlg/ManagedApp/VersionDeployments.vue     | 19 ++++----
 .../dlg/ManagedApp/VersionHistory.vue         | 45 ++++++++++++-------
 .../topbar/ManagedAppStatus/index.vue         |  2 +-
 packages/nc-gui/lang/en.json                  |  1 +
 5 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/packages/nc-gui/components/dlg/ManagedApp/Header.vue b/packages/nc-gui/components/dlg/ManagedApp/Header.vue
index a55de64a1b..3c14a7cf11 100644
--- a/packages/nc-gui/components/dlg/ManagedApp/Header.vue
+++ b/packages/nc-gui/components/dlg/ManagedApp/Header.vue
@@ -29,7 +29,7 @@ const vVisible = useVModel(props, 'visible', emits)
       </slot>
     </div>
     <div class="flex-1">
-      <div class="font-semibold text-lg text-nc-content-gray-emphasis" :class="titleClass">
+      <div class="font-semibold text-lg text-nc-content-gray" :class="titleClass">
         <slot name="title">
           {{ title }}
         </slot>
diff --git a/packages/nc-gui/components/dlg/ManagedApp/VersionDeployments.vue b/packages/nc-gui/components/dlg/ManagedApp/VersionDeployments.vue
index 4230911b83..5fe131618d 100644
--- a/packages/nc-gui/components/dlg/ManagedApp/VersionDeployments.vue
+++ b/packages/nc-gui/components/dlg/ManagedApp/VersionDeployments.vue
@@ -112,11 +112,12 @@ const getDeploymentTypeLabel = (type: string) => {
 
 const getStatusColor = (status: string) => {
   const colors = {
-    [DeploymentStatus.SUCCESS]: 'text-nc-content-green-dark bg-nc-bg-green-light',
-    [DeploymentStatus.FAILED]: 'text-nc-content-red-dark bg-nc-bg-red-light',
-    [DeploymentStatus.PENDING]: 'text-nc-content-orange-dark bg-nc-bg-orange-light',
-    [DeploymentStatus.IN_PROGRESS]: 'text-nc-content-blue-dark bg-nc-bg-blue-light',
+    [DeploymentStatus.SUCCESS]: 'text-green-600 bg-nc-green-50 dark:bg-nc-green-20',
+    [DeploymentStatus.FAILED]: 'text-red-600 bg-nc-red-50 dark:bg-nc-red-20',
+    [DeploymentStatus.PENDING]: 'text-orange-600 bg-nc-orange-20 dark:bg-nc-orange-20',
+    [DeploymentStatus.IN_PROGRESS]: 'text-blue-600 bg-nc-blue-50 dark:bg-nc-blue-20',
   }
+
   return colors[status as keyof typeof colors] || 'text-nc-content-gray bg-nc-bg-gray-light'
 }
 
@@ -239,10 +240,10 @@ watch(
                             </div>
                             <span class="font-mono font-semibold text-nc-content-brand">v{{ log.toVersion?.version }}</span>
                           </div>
-                          <span class="nc-log-divider">•</span>
+                          <span class="nc-log-divider flex-1"></span>
                           <div class="nc-log-time">
                             <GeneralIcon icon="ncClock" class="w-3.5 h-3.5 opacity-60" />
-                            <span>{{ formatDate(log.createdAt) }}</span>
+                            <span>{{ timeAgo(log.createdAt) }}</span>
                           </div>
                         </div>
 
@@ -363,7 +364,7 @@ watch(
 }
 
 .nc-deployment-title {
-  @apply font-semibold text-sm text-nc-content-gray-emphasis truncate mb-1;
+  @apply font-semibold text-sm text-nc-content-gray truncate mb-1;
 }
 
 .nc-deployment-date {
@@ -387,7 +388,7 @@ watch(
 }
 
 .nc-logs-header {
-  @apply flex items-center gap-2 text-xs font-semibold text-nc-content-gray-emphasis mb-3;
+  @apply flex items-center gap-2 text-xs font-semibold text-nc-content-gray mb-3;
   @apply uppercase tracking-wide;
 }
 
@@ -426,7 +427,7 @@ watch(
 
 .nc-log-type {
   @apply inline-flex items-center gap-1 px-2 py-0.5 rounded;
-  @apply bg-nc-bg-gray-light text-nc-content-gray text-xs font-medium;
+  @apply bg-nc-bg-gray-light dark:bg-nc-bg-gray-extralight text-nc-content-gray-subtle2 text-xs font-medium;
 }
 
 .nc-log-meta {
diff --git a/packages/nc-gui/components/dlg/ManagedApp/VersionHistory.vue b/packages/nc-gui/components/dlg/ManagedApp/VersionHistory.vue
index b8a12eae12..070cd1a7d7 100644
--- a/packages/nc-gui/components/dlg/ManagedApp/VersionHistory.vue
+++ b/packages/nc-gui/components/dlg/ManagedApp/VersionHistory.vue
@@ -13,7 +13,7 @@ const { $api } = useNuxtApp()
 
 const baseStore = useBase()
 
-const { base, managedApp } = storeToRefs(baseStore)
+const { base, managedApp, managedAppVersionsInfo } = storeToRefs(baseStore)
 
 const isLoadingDeployments = ref(true)
 
@@ -115,7 +115,8 @@ watch(
           <div v-if="deploymentStats.versionStats && deploymentStats.versionStats.length > 0" class="nc-version-list-wrapper">
             <div class="nc-version-list-header">
               <div>
-                <h3 class="text-sm font-semibold text-nc-content-gray-emphasis">Version History</h3>
+                <h3 class="text-sm font-semibold text-nc-content-gray">Version History</h3>
+
                 <p class="text-xs text-nc-content-gray-subtle2 mt-0.5 mb-0">
                   {{ deploymentStats.versionStats.length }}
                   {{ deploymentStats.versionStats.length === 1 ? 'version' : 'versions' }}
@@ -139,12 +140,21 @@ watch(
                   <div class="nc-version-details">
                     <div class="nc-version-title">
                       <span class="nc-version-number">v{{ versionStat.version }}</span>
-                      <div v-if="index === 0 && versionStat.status === 'published'" class="nc-version-badge">
-                        <GeneralIcon icon="check" class="w-3 h-3" />
-                        <span>Current</span>
+                      <div v-if="managedAppVersionsInfo.published?.id === versionStat.versionId" class="nc-version-badge">
+                        {{ $t('labels.live') }}
+                      </div>
+                      <div
+                        v-else-if="managedAppVersionsInfo.current?.id === versionStat.versionId && versionStat.status === 'draft'"
+                        class="nc-version-badge nc-version-badge-draft"
+                      >
+                        {{ $t('labels.draft') }}
                       </div>
                     </div>
-                    <div class="nc-version-date">Published {{ formatDate(versionStat.publishedAt) }}</div>
+                    <div class="nc-version-date">
+                      <GeneralIcon icon="calendar" class="w-3.5 h-3.5 opacity-60" />
+
+                      <span>Published {{ formatDate(versionStat.publishedAt) }}</span>
+                    </div>
                   </div>
                 </div>
 
@@ -152,14 +162,11 @@ watch(
                   <div class="nc-installs-count">
                     <GeneralIcon icon="download" class="w-4 h-4 text-nc-content-gray-subtle2" />
                     <span class="font-bold">{{ versionStat.deploymentCount }}</span>
-                    <span class="text-nc-content-gray-muted">{{
-                      versionStat.deploymentCount === 1 ? 'install' : 'installs'
-                    }}</span>
                   </div>
                   <GeneralIcon
                     v-if="versionStat.deploymentCount > 0"
                     icon="chevronRight"
-                    class="w-4 h-4 text-nc-content-gray-subtle2 nc-chevron-icon"
+                    class="w-4 h-4 text-nc-content-gray-subtle2"
                   />
                 </div>
               </div>
@@ -194,7 +201,7 @@ watch(
       </div>
     </div>
 
-    <DlgManagedApp v-model:visible="showVersionDeploymentsModal" modal-size="md">
+    <DlgManagedApp v-model:visible="showVersionDeploymentsModal" modal-size="sm">
       <DlgManagedAppVersionDeployments v-model:visible="showVersionDeploymentsModal" :version="selectedVersion" />
     </DlgManagedApp>
   </div>
@@ -302,17 +309,23 @@ watch(
 }
 
 .nc-version-number {
-  @apply font-mono font-bold text-base text-nc-content-gray-emphasis;
+  @apply font-mono font-bold text-base text-nc-content-gray;
 }
 
 .nc-version-badge {
-  @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full;
-  @apply bg-nc-bg-green-light text-nc-content-green-dark;
-  @apply text-xs font-semibold;
+  @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold;
+
+  &.nc-version-badge-draft {
+    @apply bg-nc-orange-20 dark:bg-nc-orange-20 text-orange-600;
+  }
+
+  &:not(.nc-version-badge-draft) {
+    @apply bg-nc-green-50 dark:bg-nc-green-20 text-green-600;
+  }
 }
 
 .nc-version-date {
-  @apply text-xs text-nc-content-gray-subtle2;
+  @apply text-xs text-nc-content-gray-subtle2 flex items-center gap-1.5;
 }
 
 .nc-version-installs {
diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
index 44955660f9..14f5902950 100644
--- a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
@@ -50,7 +50,7 @@ const colors = {
   orange: {
     bg: 'bg-nc-orange-20 dark:bg-nc-orange-20',
     border: 'border-nc-orange-200 dark:border-orange-600/40',
-    text: 'text-orange-600 text-orange-600',
+    text: 'text-orange-600',
   },
   brand: {
     bg: 'bg-nc-brand-50 dark:bg-nc-brand-20/40',
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 74014d9cd8..30be3eb899 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -1185,6 +1185,7 @@
     "updateDetails": "Update Details",
     "published": "Published",
     "draft": "Draft",
+    "live": "Live",
     "upToDate": "Up to date",
     "updateAvailable": "Update available",
     "managedAppTitle": "Title",

From 0b2268be95f73e0ff33701435ea93c3789db94a7 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Jan 2026 11:47:15 +0000
Subject: [PATCH 13/18] feat: use rich text for release notes

---
 .../dlg/ManagedApp/DraftOrPublish.vue         | 39 +++++++++++++++----
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue b/packages/nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue
index f2010830ac..d69085f030 100644
--- a/packages/nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue
+++ b/packages/nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue
@@ -46,7 +46,6 @@ const publishForm = reactive({
 // Fork form (for creating new draft from published)
 const forkForm = reactive({
   version: '',
-  releaseNotes: '',
 })
 
 const loadManagedAppAndCurrentVersion = async () => {
@@ -67,6 +66,7 @@ const publishCurrentDraft = async () => {
       },
       {
         managedAppVersionId: managedAppVersionsInfo.value.current.id,
+        releaseNotes: publishForm.releaseNotes,
       },
     )
 
@@ -187,13 +187,15 @@ watch(
         </div>
         <div v-if="isDraft">
           <label class="text-nc-content-gray text-sm font-medium mb-2 block">Changelog</label>
-          <a-textarea
-            v-model:value="publishForm.releaseNotes"
-            placeholder="Describe what's new in this version"
-            :rows="6"
-            size="large"
-            class="rounded-lg nc-input-sm"
-          />
+          <div class="nc-changelog-editor-wrapper">
+            <LazyCellRichText
+              v-model:value="publishForm.releaseNotes"
+              class="nc-changelog-editor allow-vertical-resize"
+              placeholder="Describe what's new in this version"
+              show-menu
+              hide-mention
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -223,4 +225,25 @@ watch(
 .nc-dlg-managed-app-footer {
   @apply px-6 py-3 border-t-1 border-nc-border-gray-medium;
 }
+
+.nc-changelog-editor-wrapper {
+  @apply relative pt-11 border-1 border-nc-border-gray-medium rounded-lg focus-within:border-nc-border-brand focus-within:shadow-selected transition-all duration-200;
+}
+</style>
+
+<style lang="scss">
+.nc-changelog-editor-wrapper {
+  .nc-changelog-editor {
+    @apply border-t-1 border-nc-border-gray-medium;
+    .nc-textarea-rich-editor {
+      .ProseMirror {
+        @apply border-0 rounded-none min-h-42 max-h-150 p-3;
+      }
+
+      .ProseMirror-focused {
+        @apply border-0;
+      }
+    }
+  }
+}
 </style>

From d7f7ad0ec0a8beedca8a70a03f1c574b8b91d74a Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Jan 2026 11:47:16 +0000
Subject: [PATCH 14/18] chore(nc-gui): lint

---
 .../nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue     | 2 +-
 packages/nc-gui/components/dlg/ManagedApp/Index.vue         | 2 +-
 .../nc-gui/components/dlg/ManagedApp/VersionHistory.vue     | 4 ++--
 .../components/smartsheet/topbar/ManagedAppStatus/index.vue | 3 +--
 .../components/workspace/project/create/ManagedApp.vue      | 4 ++--
 packages/nc-gui/store/base.ts                               | 6 ------
 6 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue b/packages/nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue
index d69085f030..56bfb0cda1 100644
--- a/packages/nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue
+++ b/packages/nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue
@@ -142,7 +142,7 @@ watch(
 
 <template>
   <div class="flex flex-col h-full">
-    <DlgManagedAppHeader v-model:visible="vVisible" :title="title" :subTitle="subTitle" />
+    <DlgManagedAppHeader v-model:visible="vVisible" :title="title" :sub-title="subTitle" />
 
     <div class="flex-1 p-6 nc-scrollbar-thin">
       <NcAlert
diff --git a/packages/nc-gui/components/dlg/ManagedApp/Index.vue b/packages/nc-gui/components/dlg/ManagedApp/Index.vue
index 2f8bcf4592..544a103a99 100644
--- a/packages/nc-gui/components/dlg/ManagedApp/Index.vue
+++ b/packages/nc-gui/components/dlg/ManagedApp/Index.vue
@@ -39,7 +39,7 @@ const { modalSize, variant } = toRefs(props)
     </template>
     <template v-else>
       <slot name="header">
-        <DlgManagedAppHeader v-model:visible="vVisible" :modalSize="modalSize" :title="title" :subTitle="subTitle" />
+        <DlgManagedAppHeader v-model:visible="vVisible" :modal-size="modalSize" :title="title" :sub-title="subTitle" />
       </slot>
 
       <div class="flex-1 nc-scrollbar-thin" :class="contentClass">
diff --git a/packages/nc-gui/components/dlg/ManagedApp/VersionHistory.vue b/packages/nc-gui/components/dlg/ManagedApp/VersionHistory.vue
index 070cd1a7d7..660d9f4410 100644
--- a/packages/nc-gui/components/dlg/ManagedApp/VersionHistory.vue
+++ b/packages/nc-gui/components/dlg/ManagedApp/VersionHistory.vue
@@ -69,7 +69,7 @@ watch(
 
 <template>
   <div class="flex flex-col h-full">
-    <DlgManagedAppHeader v-model:visible="vVisible" title="Version History" subTitle="Manage versions and track deployments" />
+    <DlgManagedAppHeader v-model:visible="vVisible" title="Version History" sub-title="Manage versions and track deployments" />
 
     <div class="flex-1 nc-scrollbar-thin">
       <div
@@ -127,7 +127,7 @@ watch(
 
             <div class="nc-version-list">
               <div
-                v-for="(versionStat, index) in deploymentStats.versionStats"
+                v-for="versionStat in deploymentStats.versionStats"
                 :key="versionStat.versionId"
                 class="nc-version-item"
                 :class="{ 'nc-version-item-clickable': versionStat.deploymentCount > 0 }"
diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
index 14f5902950..b68d193672 100644
--- a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
@@ -5,8 +5,7 @@ const baseStore = useBase()
 
 const { loadManagedApp, loadCurrentVersion } = baseStore
 
-const { base, isManagedAppMaster, isManagedAppInstaller, managedApp, currentVersion, liveVersion, managedAppVersionsInfo } =
-  storeToRefs(baseStore)
+const { base, isManagedAppMaster, isManagedAppInstaller, managedAppVersionsInfo } = storeToRefs(baseStore)
 
 const isModalVisible = ref(false)
 
diff --git a/packages/nc-gui/components/workspace/project/create/ManagedApp.vue b/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
index fad9b47b3c..8bfcc57623 100644
--- a/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
+++ b/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type FormDefinition, BaseVersion, FormBuilderValidatorType } from 'nocodb-sdk'
+import { BaseVersion, FormBuilderValidatorType, type FormDefinition } from 'nocodb-sdk'
 import { FORM_BUILDER_NON_CATEGORIZED, FormBuilderInputType } from '#imports'
 
 const props = defineProps<{
@@ -215,7 +215,7 @@ const { formState, isLoading, submit } = useProvideFormBuilderHelper({
     <DlgManagedAppHeader
       v-model:visible="visible"
       :title="title || 'Create Managed App'"
-      :subTitle="subTitle || $t('labels.publishToAppStore')"
+      :sub-title="subTitle || $t('labels.publishToAppStore')"
     />
 
     <div class="flex-1 p-6 nc-scrollbar-thin">
diff --git a/packages/nc-gui/store/base.ts b/packages/nc-gui/store/base.ts
index 7b3b154338..e96916aae8 100644
--- a/packages/nc-gui/store/base.ts
+++ b/packages/nc-gui/store/base.ts
@@ -20,10 +20,6 @@ export const useBase = defineStore('baseStore', () => {
 
   const managedApp = ref<any>(null)
 
-  const currentVersion = ref<any>(null)
-
-  const liveVersion = ref<any>(null)
-
   const managedAppVersions = ref<any[]>([])
 
   const managedAppVersionsInfo = computed(() => {})
@@ -362,8 +358,6 @@ export const useBase = defineStore('baseStore', () => {
     isManagedAppInstaller,
     managedApp,
     loadManagedApp,
-    currentVersion,
-    liveVersion,
     loadCurrentVersion,
     managedAppVersions,
     managedAppVersionsInfo,

From 783c25d0937c871ef58041f36ef2a083b9b3b7ec Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 27 Jan 2026 11:47:16 +0000
Subject: [PATCH 15/18] fix: acl for version list

---
 packages/nc-gui/lib/types.ts                        |  2 ++
 .../src/controllers/internal/operationScopes.ts     |  4 ++--
 packages/nocodb/src/models/Base.ts                  | 13 +++++++------
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index 13686fd3da..28fa190500 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -229,6 +229,8 @@ type NcProject = BaseType & {
   managed_app_master?: boolean
   managed_app_id?: string
   managed_app_version_id?: string
+  managed_app_version?: string
+  managed_app_published_at?: string
   auto_update?: boolean
   managed_app_schema_locked?: boolean
 }
diff --git a/packages/nocodb/src/controllers/internal/operationScopes.ts b/packages/nocodb/src/controllers/internal/operationScopes.ts
index d845f5cfd6..b6e7603125 100644
--- a/packages/nocodb/src/controllers/internal/operationScopes.ts
+++ b/packages/nocodb/src/controllers/internal/operationScopes.ts
@@ -127,8 +127,9 @@ export const OPERATION_SCOPES = {
 
   // Managed App Operations
   managedAppStoreList: 'org',
-  managedAppList: 'workspace',
   managedAppGet: 'org',
+  managedAppVersionsList: 'org',
+  managedAppList: 'workspace',
   managedAppCreate: 'workspace',
   managedAppUpdate: 'base',
   managedAppDelete: 'base',
@@ -137,7 +138,6 @@ export const OPERATION_SCOPES = {
   managedAppUnpublish: 'base',
   managedAppInstall: 'workspace',
   managedAppGetUpdates: 'base',
-  managedAppVersionsList: 'base',
   managedAppInstallationsList: 'base',
   managedAppDeployments: 'base',
   managedAppVersionDeployments: 'base',
diff --git a/packages/nocodb/src/models/Base.ts b/packages/nocodb/src/models/Base.ts
index 8974a4d720..cc168f81e5 100644
--- a/packages/nocodb/src/models/Base.ts
+++ b/packages/nocodb/src/models/Base.ts
@@ -59,6 +59,9 @@ export default class Base implements BaseType {
   managed_app_id?: string; // Points to MANAGED_APPS (for both master and installed instances)
   managed_app_version_id?: string; // Current version ID from MANAGED_APP_VERSIONS
   auto_update?: boolean; // For installed instances: auto-update to new published versions
+  // managed app info (populated fields)
+  managed_app_version?: string; // Current version string
+  managed_app_published_at?: string; // When this version was published
   managed_app_schema_locked?: boolean; // Computed: whether schema modifications are allowed
 
   constructor(base: Partial<Base>) {
@@ -69,8 +72,8 @@ export default class Base implements BaseType {
     return base && new Base(base);
   }
 
-  public static async computeSchemaLocked(_base: Base): Promise<boolean> {
-    return false;
+  public static async populateManagedAppInfo(_base: Base): Promise<void> {
+    return;
   }
 
   public static async createProject(
@@ -289,9 +292,8 @@ export default class Base implements BaseType {
     }
     const base = this.castType(baseData);
 
-    // Compute managed_app_schema_locked
     if (base && base.managed_app_id) {
-      base.managed_app_schema_locked = await this.computeSchemaLocked(base);
+      await this.populateManagedAppInfo(base);
     }
 
     return base;
@@ -370,9 +372,8 @@ export default class Base implements BaseType {
     if (baseData) {
       const base = this.castType(baseData);
 
-      // Compute managed_app_schema_locked
       if (base.managed_app_id) {
-        base.managed_app_schema_locked = await this.computeSchemaLocked(base);
+        await this.populateManagedAppInfo(base);
       }
 
       await base.getSources(includeConfig, ncMeta);

From c7dbfc9dbb53eff8c76ca711508ebeef958d635e Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Jan 2026 11:47:16 +0000
Subject: [PATCH 16/18] chore: move files in ee

---
 .gitignore                                    |   3 +-
 CLAUDE.md                                     | 132 -----
 .../dlg/ManagedApp/DraftOrPublish.vue         | 249 ---------
 .../components/dlg/ManagedApp/Header.vue      |  60 ---
 .../components/dlg/ManagedApp/Index.vue       |  63 ---
 .../dlg/ManagedApp/VersionDeployments.vue     | 493 ------------------
 .../dlg/ManagedApp/VersionHistory.vue         | 357 -------------
 .../topbar/ManagedAppStatus/MenuItem.vue      |  52 --
 .../topbar/ManagedAppStatus/index.vue         | 283 +---------
 .../workspace/project/create/ManagedApp.vue   | 241 +--------
 10 files changed, 5 insertions(+), 1928 deletions(-)
 delete mode 100644 CLAUDE.md
 delete mode 100644 packages/nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue
 delete mode 100644 packages/nc-gui/components/dlg/ManagedApp/Header.vue
 delete mode 100644 packages/nc-gui/components/dlg/ManagedApp/Index.vue
 delete mode 100644 packages/nc-gui/components/dlg/ManagedApp/VersionDeployments.vue
 delete mode 100644 packages/nc-gui/components/dlg/ManagedApp/VersionHistory.vue
 delete mode 100644 packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/MenuItem.vue

diff --git a/.gitignore b/.gitignore
index 7adaaf1344..a544be5c5b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -104,4 +104,5 @@ result
 
 # Temp
 migrate-colors.js
-antd.variable.css
\ No newline at end of file
+antd.variable.css
+CLAUDE.md
\ No newline at end of file
diff --git a/CLAUDE.md b/CLAUDE.md
deleted file mode 100644
index 4a40249591..0000000000
--- a/CLAUDE.md
+++ /dev/null
@@ -1,132 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Documentation
-
-For comprehensive product documentation, features, and API references: https://nocodb.com/llms.txt
-
-## Project Overview
-
-NocoDB is an open-source Airtable alternative that turns any database into a smart spreadsheet. This is the enterprise edition (EE) monorepo.
-
-Key capabilities:
-- Transforms MySQL, PostgreSQL, SQL Server, SQLite & MariaDB into collaborative spreadsheets
-- Rich field types: text, numerical, date-time, relational (Links), formula-based
-- Multiple views: Grid, Form, Calendar, Kanban, Gallery, Map
-- Auto-generated REST APIs
-- Automation: workflows, webhooks, scripts
-- NocoAI for AI capabilities, NocoSync for external data integration
-- MCP (Model Context Protocol) server support
-
-## Monorepo Structure
-
-- **packages/nocodb** - Backend (NestJS + TypeScript)
-- **packages/nc-gui** - Frontend (Nuxt 3 + Vue 3)
-- **packages/nocodb-sdk** - JavaScript/TypeScript SDK
-- **packages/nocodb-sdk-v2** - V2 SDK
-- **packages/nc-sql-executor** - SQL execution service
-- **packages/noco-integrations** - Integration plugins (Slack, Discord, AWS, etc.)
-- **packages/nc-knex-dialects** - Custom Knex dialects (Snowflake, Databricks)
-- **tests/playwright** - E2E testing suite
-
-## Essential Commands
-
-```bash
-# Installation (pnpm is enforced - npm/yarn will fail)
-pnpm bootstrap          # Full EE bootstrap
-pnpm bootstrap:ce       # Community Edition bootstrap
-
-# Development
-pnpm start:backend      # Backend at http://localhost:8080
-pnpm start:frontend     # Frontend at http://localhost:3000
-pnpm start:sql-executor # SQL executor service
-
-# Database containers for testing
-pnpm start:pg           # Start PostgreSQL
-pnpm stop:pg
-pnpm start:mysql        # Start MySQL
-pnpm stop:mysql
-
-# E2E Testing
-pnpm start:playwright:pg        # Backend + Frontend for E2E (PostgreSQL)
-pnpm start:playwright:pg:ee     # Enterprise Edition E2E
-```
-
-### Backend (packages/nocodb)
-
-```bash
-pnpm start              # Dev mode with watch
-pnpm watch:run:ee       # EE dev build
-pnpm build:ee           # Production EE build
-pnpm lint               # ESLint
-pnpm test:unit          # Mocha unit tests
-pnpm test:unit:pg:ee    # Unit tests with PostgreSQL + EE
-```
-
-### Frontend (packages/nc-gui)
-
-```bash
-pnpm dev                # Nuxt dev server
-pnpm dev:ee             # EE frontend dev
-pnpm build:ee           # Production EE build
-pnpm lint               # ESLint
-pnpm test               # Vitest unit tests
-```
-
-## Architecture
-
-### Backend (NestJS)
-
-- **src/controllers/** - REST API controllers (~98 controllers)
-- **src/models/** - Data models (Base, Model, View, Column, User, Integration, etc.)
-- **src/services/** - Business logic
-- **src/db/** - Database layer with BaseModelSqlv2, CustomKnex, formula evaluation
-- **src/ee/, src/ee-on-prem/, src/ee-cloud/** - Enterprise Edition code
-- **src/run/** - Entry points
-
-### Frontend (Nuxt + Vue)
-
-- **pages/** - Route-based pages
-- **components/** - Vue components (~34 directories)
-- **composables/** - Vue composables (~95 files)
-- **store/** - Pinia stores
-- **lang/** - i18n (42+ languages)
-- **ee/** - Enterprise Edition features
-- Uses hash-based routing (SPA mode)
-
-### Database Model Hierarchy
-
-```
-Workspace → Base → Model (Table) → Column
-                              → View (Grid, Gallery, Form, Kanban, Calendar, Map)
-```
-
-## Key Environment Variables
-
-- `NC_DB` - Database connection string
-- `EE=true` - Enable Enterprise Edition
-- `NC_AUTH_JWT_SECRET` - JWT secret
-- `NC_DISABLE_TELE` - Disable telemetry
-
-## Build Memory Issues
-
-For large builds that run out of memory:
-```bash
-NODE_OPTIONS="--max-old-space-size=8192" pnpm build:ee
-```
-
-## Git Workflow
-
-- **develop** - Main development branch (target for PRs)
-- **master** - Stable release snapshots only
-- Branch naming: `feat/`, `fix/`, `enhancement/`
-- Commits follow [Conventional Commits](https://www.conventionalcommits.org/): `feat:`, `fix:`, `docs:`, `chore:`, etc.
-
-## Tech Stack
-
-- **Backend**: NestJS, Knex, Socket.io, Bull (job queue), Redis
-- **Frontend**: Nuxt 3, Vue 3, Pinia, WindiCSS, Ant Design Vue
-- **Databases**: SQLite (default), PostgreSQL, MySQL, Snowflake, Databricks
-- **Build**: Rspack (backend), Vite (frontend)
-- **Testing**: Mocha (backend unit), Vitest (frontend unit), Playwright (E2E)
diff --git a/packages/nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue b/packages/nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue
deleted file mode 100644
index 56bfb0cda1..0000000000
--- a/packages/nc-gui/components/dlg/ManagedApp/DraftOrPublish.vue
+++ /dev/null
@@ -1,249 +0,0 @@
-<script lang="ts" setup>
-interface Props {
-  visible: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {})
-
-const emits = defineEmits(['update:visible'])
-
-const vVisible = useVModel(props, 'visible', emits)
-
-const { $api } = useNuxtApp()
-const baseStore = useBase()
-
-const { loadManagedApp, loadCurrentVersion } = baseStore
-
-const { base, managedApp, managedAppVersionsInfo } = storeToRefs(baseStore)
-
-const isDraft = computed(() => managedAppVersionsInfo.value.current?.status === 'draft')
-
-const isLoading = ref(false)
-
-const title = computed(() => {
-  if (isDraft.value) {
-    return `Publish v${managedAppVersionsInfo.value.current?.version || '1.0.0'}?`
-  } else {
-    return `Fork to Draft`
-  }
-})
-
-const subTitle = computed(() => {
-  if (isDraft.value) {
-    return managedAppVersionsInfo.value.published
-      ? `Replace v${managedAppVersionsInfo.value.published.version || '1.0.0'} and go live`
-      : `Go live`
-  } else {
-    return `Create v${suggestManagedAppNextVersion(managedAppVersionsInfo.value.published?.version || '1.0.0')} to make changes`
-  }
-})
-
-// Publish form (for draft versions)
-const publishForm = reactive({
-  releaseNotes: '',
-})
-
-// Fork form (for creating new draft from published)
-const forkForm = reactive({
-  version: '',
-})
-
-const loadManagedAppAndCurrentVersion = async () => {
-  await loadManagedApp()
-  await loadCurrentVersion()
-}
-
-const publishCurrentDraft = async () => {
-  if (!base.value?.fk_workspace_id || !base.value?.id || !managedAppVersionsInfo.value.current?.id) return
-
-  isLoading.value = true
-  try {
-    await $api.internal.postOperation(
-      base.value.fk_workspace_id,
-      base.value.id,
-      {
-        operation: 'managedAppPublish',
-      },
-      {
-        managedAppVersionId: managedAppVersionsInfo.value.current.id,
-        releaseNotes: publishForm.releaseNotes,
-      },
-    )
-
-    // Reload base to get updated managed app version info
-    if (base.value?.id) {
-      await baseStore.loadProject()
-    }
-
-    await loadManagedAppAndCurrentVersion()
-
-    message.success(`Version ${managedAppVersionsInfo.value.current?.version || '1.0.0'} published successfully!`)
-
-    vVisible.value = false
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  } finally {
-    isLoading.value = false
-  }
-}
-
-const createNewDraft = async () => {
-  if (!base.value?.fk_workspace_id || !base.value?.id || !managedApp.value?.id) return
-  if (!forkForm.version) {
-    message.error('Please provide a version')
-    return
-  }
-
-  isLoading.value = true
-  try {
-    await $api.internal.postOperation(
-      base.value.fk_workspace_id,
-      base.value.id,
-      {
-        operation: 'managedAppCreateDraft',
-      },
-      {
-        managedAppId: managedApp.value.id,
-        version: forkForm.version,
-      },
-    )
-
-    // Reload base to get updated managed app version info
-    if (base.value?.id) {
-      await baseStore.loadProject()
-    }
-
-    await loadManagedAppAndCurrentVersion()
-
-    message.success(`New draft version ${forkForm.version} created successfully!`)
-
-    vVisible.value = false
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  } finally {
-    isLoading.value = false
-  }
-}
-
-watch(
-  isDraft,
-  (newValue) => {
-    if (newValue) {
-      forkForm.version = managedAppVersionsInfo.value.current?.version || '1.0.0'
-    } else {
-      forkForm.version = suggestManagedAppNextVersion(managedAppVersionsInfo.value.current?.version)
-    }
-  },
-  {
-    immediate: true,
-  },
-)
-</script>
-
-<template>
-  <div class="flex flex-col h-full">
-    <DlgManagedAppHeader v-model:visible="vVisible" :title="title" :sub-title="subTitle" />
-
-    <div class="flex-1 p-6 nc-scrollbar-thin">
-      <NcAlert
-        type="info"
-        align="top"
-        class="!p-3 !items-start bg-nc-bg-blue-light border-1 !border-nc-blue-200 rounded-lg p-3 mb-4"
-      >
-        <template #icon>
-          <GeneralIcon icon="info" class="w-4 h-4 mt-0.5 text-nc-content-blue-dark flex-none" />
-        </template>
-
-        <template v-if="isDraft" #description>
-          Publishing version <strong>{{ managedAppVersionsInfo.current?.version }}</strong> will make it available in the App
-          Store and automatically update all installations.
-        </template>
-        <template v-else #description>
-          Create a new draft version to work on updates. Current published version
-          <strong>{{ managedAppVersionsInfo.current?.version }}</strong> will remain unchanged.
-        </template>
-      </NcAlert>
-
-      <div class="space-y-4">
-        <div>
-          <label class="text-nc-content-gray text-sm font-medium mb-2 block">
-            <template v-if="isDraft"> Version </template>
-            <template v-else> New Version <span class="text-nc-content-red-dark">*</span> </template>
-          </label>
-          <a-input
-            v-model:value="forkForm.version"
-            placeholder="e.g., 2.0.0"
-            size="large"
-            :disabled="isDraft"
-            class="rounded-lg nc-input-sm nc-input-shadow"
-          >
-            <template #prefix>
-              <span class="text-nc-content-gray-subtle2">v</span>
-            </template>
-          </a-input>
-          <div v-if="!isDraft" class="text-xs text-nc-content-gray-subtle2 mt-1.5">
-            Use semantic versioning (e.g., 2.0.0, 2.1.0)
-          </div>
-        </div>
-        <div v-if="isDraft">
-          <label class="text-nc-content-gray text-sm font-medium mb-2 block">Changelog</label>
-          <div class="nc-changelog-editor-wrapper">
-            <LazyCellRichText
-              v-model:value="publishForm.releaseNotes"
-              class="nc-changelog-editor allow-vertical-resize"
-              placeholder="Describe what's new in this version"
-              show-menu
-              hide-mention
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="nc-dlg-managed-app-footer">
-      <div class="flex justify-end gap-2">
-        <NcButton type="secondary" size="small" @click="vVisible = false">{{ $t('general.cancel') }} </NcButton>
-
-        <NcButton v-if="isDraft" type="primary" size="small" :loading="isLoading" @click="publishCurrentDraft">
-          <template #icon>
-            <GeneralIcon icon="upload" />
-          </template>
-          Publish
-        </NcButton>
-
-        <NcButton v-else type="primary" size="small" :loading="isLoading" :disabled="!forkForm.version" @click="createNewDraft">
-          <template #icon>
-            <GeneralIcon icon="plus" />
-          </template>
-          Create Draft
-        </NcButton>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.nc-dlg-managed-app-footer {
-  @apply px-6 py-3 border-t-1 border-nc-border-gray-medium;
-}
-
-.nc-changelog-editor-wrapper {
-  @apply relative pt-11 border-1 border-nc-border-gray-medium rounded-lg focus-within:border-nc-border-brand focus-within:shadow-selected transition-all duration-200;
-}
-</style>
-
-<style lang="scss">
-.nc-changelog-editor-wrapper {
-  .nc-changelog-editor {
-    @apply border-t-1 border-nc-border-gray-medium;
-    .nc-textarea-rich-editor {
-      .ProseMirror {
-        @apply border-0 rounded-none min-h-42 max-h-150 p-3;
-      }
-
-      .ProseMirror-focused {
-        @apply border-0;
-      }
-    }
-  }
-}
-</style>
diff --git a/packages/nc-gui/components/dlg/ManagedApp/Header.vue b/packages/nc-gui/components/dlg/ManagedApp/Header.vue
deleted file mode 100644
index 3c14a7cf11..0000000000
--- a/packages/nc-gui/components/dlg/ManagedApp/Header.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts" setup>
-interface Props {
-  visible: boolean
-  iconClass?: string
-  title?: string
-  subTitle?: string
-  titleClass?: string
-  subTitleClass?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  iconClass: '',
-  titleClass: '',
-  subTitleClass: '',
-})
-
-const emits = defineEmits(['update:visible'])
-
-const { title, subTitle } = toRefs(props)
-
-const vVisible = useVModel(props, 'visible', emits)
-</script>
-
-<template>
-  <div class="p-4 w-full flex items-center gap-3 border-b border-nc-border-gray-medium">
-    <div class="nc-dlg-managed-app-icon" :class="iconClass">
-      <slot name="icon">
-        <GeneralIcon icon="ncBox" class="h-5 w-5" />
-      </slot>
-    </div>
-    <div class="flex-1">
-      <div class="font-semibold text-lg text-nc-content-gray" :class="titleClass">
-        <slot name="title">
-          {{ title }}
-        </slot>
-      </div>
-      <div v-if="$slots.subTitle || subTitle" class="text-xs text-nc-content-gray-subtle2" :class="subTitleClass">
-        <slot name="subTitle">
-          {{ subTitle }}
-        </slot>
-      </div>
-    </div>
-
-    <slot name="rightExtra"> </slot>
-
-    <slot name="closeButton">
-      <NcButton size="small" type="text" class="self-start" @click="vVisible = false">
-        <GeneralIcon icon="close" class="text-nc-content-gray-subtle2" />
-      </NcButton>
-    </slot>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.nc-dlg-managed-app-icon {
-  @apply w-10 h-10 rounded-xl flex items-center justify-center text-white shadow-sm;
-  background: linear-gradient(135deg, var(--nc-content-brand) 0%, var(--nc-content-blue-medium) 100%);
-  box-shadow: 0 2px 4px rgba(51, 102, 255, 0.15);
-}
-</style>
diff --git a/packages/nc-gui/components/dlg/ManagedApp/Index.vue b/packages/nc-gui/components/dlg/ManagedApp/Index.vue
deleted file mode 100644
index 544a103a99..0000000000
--- a/packages/nc-gui/components/dlg/ManagedApp/Index.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts" setup>
-interface Props {
-  visible: boolean
-  modalSize: 'small' | 'medium' | 'large' | keyof typeof modalSizes
-  title?: string
-  subTitle?: string
-  variant?: 'draftOrPublish' | 'versionHistory'
-  contentClass?: string
-  maskClosable?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modalSize: 'sm',
-  contentClass: '',
-  maskClosable: true,
-})
-
-const emits = defineEmits(['update:visible'])
-
-const vVisible = useVModel(props, 'visible', emits)
-
-const { modalSize, variant } = toRefs(props)
-</script>
-
-<template>
-  <NcModal
-    v-model:visible="vVisible"
-    :size="modalSize"
-    :height="modalSize === 'sm' ? 'auto' : undefined"
-    :mask-closable="maskClosable"
-    nc-modal-class-name="nc-modal-dlg-managed-app"
-  >
-    <slot v-if="$slots.default"> </slot>
-    <template v-else-if="variant === 'draftOrPublish'">
-      <DlgManagedAppDraftOrPublish v-model:visible="vVisible" />
-    </template>
-    <template v-else-if="variant === 'versionHistory'">
-      <DlgManagedAppVersionHistory v-model:visible="vVisible" />
-    </template>
-    <template v-else>
-      <slot name="header">
-        <DlgManagedAppHeader v-model:visible="vVisible" :modal-size="modalSize" :title="title" :sub-title="subTitle" />
-      </slot>
-
-      <div class="flex-1 nc-scrollbar-thin" :class="contentClass">
-        <slot name="content"> </slot>
-      </div>
-
-      <slot v-if="$slots.footer" name="footer"> </slot>
-    </template>
-  </NcModal>
-</template>
-
-<style lang="scss">
-.nc-modal-dlg-managed-app {
-  @apply !p-0;
-
-  &.nc-modal-size-sm {
-    max-height: min(90vh, 560px) !important;
-    height: min(90vh, 560px) !important;
-  }
-}
-</style>
diff --git a/packages/nc-gui/components/dlg/ManagedApp/VersionDeployments.vue b/packages/nc-gui/components/dlg/ManagedApp/VersionDeployments.vue
deleted file mode 100644
index 5fe131618d..0000000000
--- a/packages/nc-gui/components/dlg/ManagedApp/VersionDeployments.vue
+++ /dev/null
@@ -1,493 +0,0 @@
-<script lang="ts" setup>
-import { DeploymentStatus } from 'nocodb-sdk'
-
-interface Props {
-  visible: boolean
-  version: any
-}
-
-const props = withDefaults(defineProps<Props>(), {})
-
-const emits = defineEmits(['update:visible'])
-
-const vVisible = useVModel(props, 'visible', emits)
-
-const { $api } = useNuxtApp()
-
-const baseStore = useBase()
-
-const { base, managedApp } = storeToRefs(baseStore)
-
-const isLoading = ref(false)
-const deployments = ref<any[]>([])
-const pageInfo = ref<any>({})
-const currentPage = ref(1)
-const pageSize = 10
-
-// Expanded deployment logs state
-const expandedBaseId = ref<string | null>(null)
-const deploymentLogs = ref<any[]>([])
-const logsPageInfo = ref<any>({})
-const logsCurrentPage = ref(1)
-const logsPageSize = 10
-const isLoadingLogs = ref(false)
-
-const loadDeployments = async (page = 1) => {
-  if (!managedApp.value?.id || !props.version?.versionId || !base.value?.fk_workspace_id) return
-
-  isLoading.value = true
-  try {
-    const offset = (page - 1) * pageSize
-    const response = await $api.internal.getOperation(base.value.fk_workspace_id, base.value.id!, {
-      operation: 'managedAppVersionDeployments',
-      managedAppId: managedApp.value.id,
-      versionId: props.version.versionId,
-      limit: pageSize,
-      offset,
-    } as any)
-
-    if (response) {
-      deployments.value = response.list || []
-      pageInfo.value = response.pageInfo || {}
-      currentPage.value = page
-    }
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  } finally {
-    isLoading.value = false
-  }
-}
-
-const loadDeploymentLogs = async (baseId: string, page = 1) => {
-  if (!base.value?.fk_workspace_id) return
-
-  isLoadingLogs.value = true
-  try {
-    const offset = (page - 1) * logsPageSize
-    const response = await $api.internal.getOperation(base.value.fk_workspace_id, base.value.id!, {
-      operation: 'managedAppDeploymentLogs',
-      baseId,
-      limit: logsPageSize,
-      offset,
-    } as any)
-
-    if (response) {
-      deploymentLogs.value = response.logs || []
-      logsPageInfo.value = response.pageInfo || {}
-      logsCurrentPage.value = page
-    }
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  } finally {
-    isLoadingLogs.value = false
-  }
-}
-
-const toggleExpand = async (deployment: any) => {
-  if (expandedBaseId.value === deployment.baseId) {
-    // Collapse
-    expandedBaseId.value = null
-    deploymentLogs.value = []
-    logsCurrentPage.value = 1
-  } else {
-    // Expand and load logs
-    expandedBaseId.value = deployment.baseId
-    await loadDeploymentLogs(deployment.baseId, 1)
-  }
-}
-
-const formatDate = (dateString: string) => {
-  if (!dateString) return 'N/A'
-
-  return parseStringDateTime(dateString, 'MMM DD, YYYY, hh:mm A')
-}
-
-const getDeploymentTypeLabel = (type: string) => {
-  const labels = {
-    install: 'Initial Install',
-    update: 'Update',
-  }
-  return labels[type as keyof typeof labels] || type
-}
-
-const getStatusColor = (status: string) => {
-  const colors = {
-    [DeploymentStatus.SUCCESS]: 'text-green-600 bg-nc-green-50 dark:bg-nc-green-20',
-    [DeploymentStatus.FAILED]: 'text-red-600 bg-nc-red-50 dark:bg-nc-red-20',
-    [DeploymentStatus.PENDING]: 'text-orange-600 bg-nc-orange-20 dark:bg-nc-orange-20',
-    [DeploymentStatus.IN_PROGRESS]: 'text-blue-600 bg-nc-blue-50 dark:bg-nc-blue-20',
-  }
-
-  return colors[status as keyof typeof colors] || 'text-nc-content-gray bg-nc-bg-gray-light'
-}
-
-const handlePageChange = (page: number) => {
-  loadDeployments(page)
-}
-
-const handleLogsPageChange = (page: number) => {
-  if (expandedBaseId.value) {
-    loadDeploymentLogs(expandedBaseId.value, page)
-  }
-}
-
-watch(
-  vVisible,
-  (val) => {
-    if (val) {
-      loadDeployments(1)
-      expandedBaseId.value = null
-      deploymentLogs.value = []
-    }
-  },
-  {
-    immediate: true,
-  },
-)
-</script>
-
-<template>
-  <div class="flex flex-col h-full">
-    <DlgManagedAppHeader v-model:visible="vVisible" title="Version Deployments">
-      <template #icon>
-        <GeneralIcon icon="ncServer" class="w-5 h-5 text-white" />
-      </template>
-      <template #subTitle>
-        Tracking installations for
-        <span class="font-mono font-semibold text-nc-content-brand">v{{ version?.version }}</span>
-      </template>
-    </DlgManagedAppHeader>
-
-    <!-- Content -->
-    <div class="nc-deployments-content">
-      <div v-if="isLoading" class="nc-deployments-loading">
-        <a-spin size="large" />
-        <div class="text-sm text-nc-content-gray-muted mt-3">Loading deployments...</div>
-      </div>
-
-      <template v-else-if="deployments.length > 0">
-        <div class="nc-deployments-list">
-          <div v-for="deployment in deployments" :key="deployment.baseId" class="nc-deployment-item">
-            <!-- Deployment Row -->
-            <div class="nc-deployment-row" @click="toggleExpand(deployment)">
-              <div class="nc-deployment-info">
-                <!-- Expand Icon -->
-                <div class="nc-expand-icon">
-                  <GeneralIcon
-                    :icon="expandedBaseId === deployment.baseId ? 'ncChevronDown' : 'ncChevronRight'"
-                    class="w-4 h-4"
-                  />
-                </div>
-
-                <!-- Deployment Details -->
-                <div class="nc-deployment-icon">
-                  <GeneralIcon icon="ncServer" class="w-4 h-4" />
-                </div>
-                <div class="nc-deployment-details">
-                  <div class="nc-deployment-title">{{ deployment.baseTitle }}</div>
-                  <div class="nc-deployment-date">
-                    <GeneralIcon icon="calendar" class="w-3.5 h-3.5 opacity-60" />
-                    <span>Installed {{ formatDate(deployment.installedAt) }}</span>
-                  </div>
-                </div>
-              </div>
-
-              <!-- Status Badge -->
-              <div class="nc-deployment-status">
-                <div class="nc-status-badge" :class="getStatusColor(deployment.status)">
-                  <span>{{ deployment.status }}</span>
-                </div>
-              </div>
-            </div>
-
-            <!-- Expanded Logs Section -->
-            <div v-if="expandedBaseId === deployment.baseId" class="nc-deployment-logs-wrapper">
-              <div class="nc-deployment-logs">
-                <div class="nc-logs-header">
-                  <GeneralIcon icon="ncFileText" class="w-4 h-4 text-nc-content-gray-subtle2" />
-                  <span>Deployment History</span>
-                </div>
-
-                <div v-if="isLoadingLogs" class="nc-logs-loading">
-                  <a-spin size="small" />
-                  <span class="text-xs text-nc-content-gray-muted ml-2">Loading history...</span>
-                </div>
-
-                <template v-else-if="deploymentLogs.length > 0">
-                  <div class="nc-logs-list">
-                    <div v-for="log in deploymentLogs" :key="log.id" class="nc-log-item">
-                      <div class="nc-log-content">
-                        <div class="nc-log-header">
-                          <div class="nc-log-badges">
-                            <div class="nc-log-status" :class="getStatusColor(log.status)">
-                              {{ log.status }}
-                            </div>
-                            <div class="nc-log-type">
-                              <GeneralIcon
-                                :icon="log.deploymentType === 'install' ? 'download' : 'reload'"
-                                class="w-3 h-3 opacity-60"
-                              />
-                              <span>{{ getDeploymentTypeLabel(log.deploymentType) }}</span>
-                            </div>
-                          </div>
-                        </div>
-
-                        <div class="nc-log-meta">
-                          <div class="nc-log-version">
-                            <div v-if="log.fromVersion" class="flex items-center gap-1.5">
-                              <span class="font-mono text-nc-content-gray-subtle2">v{{ log.fromVersion.version }}</span>
-                              <GeneralIcon icon="arrowRight" class="w-3 h-3 text-nc-content-gray-subtle2" />
-                            </div>
-                            <span class="font-mono font-semibold text-nc-content-brand">v{{ log.toVersion?.version }}</span>
-                          </div>
-                          <span class="nc-log-divider flex-1"></span>
-                          <div class="nc-log-time">
-                            <GeneralIcon icon="ncClock" class="w-3.5 h-3.5 opacity-60" />
-                            <span>{{ timeAgo(log.createdAt) }}</span>
-                          </div>
-                        </div>
-
-                        <div v-if="log.errorMessage" class="nc-log-error">
-                          <GeneralIcon icon="alertTriangle" class="w-3.5 h-3.5 flex-shrink-0" />
-                          <span>{{ log.errorMessage }}</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-
-                  <!-- Logs Pagination -->
-                  <div v-if="logsPageInfo.totalRows > logsPageSize" class="nc-logs-pagination">
-                    <a-pagination
-                      v-model:current="logsCurrentPage"
-                      :total="logsPageInfo.totalRows"
-                      :page-size="logsPageSize"
-                      :show-size-changer="false"
-                      size="small"
-                      @change="handleLogsPageChange"
-                    />
-                  </div>
-                </template>
-
-                <div v-else class="nc-logs-empty">
-                  <GeneralIcon icon="inbox" class="w-8 h-8 text-nc-content-gray-subtle2 mb-2" />
-                  <div class="text-sm text-nc-content-gray-subtle2">No deployment history available</div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </template>
-
-      <!-- Empty State -->
-      <div v-else class="nc-deployments-empty">
-        <div class="nc-empty-icon">
-          <GeneralIcon icon="ncServer" class="w-10 h-10 text-nc-content-gray-muted" />
-        </div>
-        <div class="text-base font-semibold text-nc-content-gray mb-1">No installations found</div>
-        <div class="text-sm text-nc-content-gray-subtle max-w-md text-center">
-          Version <span class="font-mono font-semibold">v{{ version?.version }}</span> hasn't been installed by any users yet
-        </div>
-      </div>
-    </div>
-    <!-- Deployments Pagination -->
-    <div v-if="deployments.length > 0 && pageInfo.totalRows > pageSize" class="nc-deployments-pagination">
-      <a-pagination
-        v-model:current="currentPage"
-        :total="pageInfo.totalRows"
-        :page-size="pageSize"
-        :show-size-changer="false"
-        @change="handlePageChange"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.nc-deployments-content {
-  @apply flex-1 nc-scrollbar-thin p-6;
-}
-
-.nc-deployments-loading {
-  @apply h-full flex flex-col items-center justify-center py-16;
-}
-
-.nc-deployments-list {
-  @apply space-y-3;
-}
-
-.nc-deployment-item {
-  @apply bg-nc-bg-default border-1 border-nc-border-gray-medium rounded-xl overflow-hidden relative;
-  @apply transition-all duration-200 ease-in-out;
-
-  &::before {
-    @apply absolute left-0 top-0 bottom-0 w-1 bg-nc-content-brand opacity-0;
-    @apply transition-opacity duration-200 ease-in-out;
-    content: '';
-  }
-
-  &:hover {
-    @apply border-nc-border-brand transform translate-x-0.5;
-    box-shadow: 0 4px 12px rgba(51, 102, 255, 0.08);
-
-    &::before {
-      @apply opacity-100;
-    }
-
-    .nc-deployment-icon {
-      @apply transform scale-105;
-      box-shadow: 0 4px 8px rgba(51, 102, 255, 0.15);
-    }
-  }
-}
-
-.nc-deployment-row {
-  @apply flex items-center justify-between gap-4 p-4 cursor-pointer;
-}
-
-.nc-deployment-info {
-  @apply flex items-center gap-3 flex-1 min-w-0;
-}
-
-.nc-expand-icon {
-  @apply w-6 h-6 flex items-center justify-center text-nc-content-gray-subtle2 flex-shrink-0;
-  @apply transition-transform duration-200;
-}
-
-.nc-deployment-icon {
-  @apply w-9 h-9 rounded-lg bg-nc-bg-gray-light border-1 border-nc-border-gray-light;
-  @apply flex items-center justify-center text-nc-content-gray flex-shrink-0;
-  @apply transition-all duration-200 ease-in-out;
-}
-
-.nc-deployment-details {
-  @apply flex-1 min-w-0;
-}
-
-.nc-deployment-title {
-  @apply font-semibold text-sm text-nc-content-gray truncate mb-1;
-}
-
-.nc-deployment-date {
-  @apply flex items-center gap-1.5 text-xs text-nc-content-gray-subtle2;
-}
-
-.nc-deployment-status {
-  @apply flex-shrink-0;
-}
-
-.nc-status-badge {
-  @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold;
-}
-
-.nc-deployment-logs-wrapper {
-  @apply border-t-1 border-nc-border-gray-medium bg-nc-bg-gray-extralight;
-}
-
-.nc-deployment-logs {
-  @apply p-4;
-}
-
-.nc-logs-header {
-  @apply flex items-center gap-2 text-xs font-semibold text-nc-content-gray mb-3;
-  @apply uppercase tracking-wide;
-}
-
-.nc-logs-loading {
-  @apply flex items-center justify-center py-8;
-}
-
-.nc-logs-list {
-  @apply space-y-2;
-}
-
-.nc-log-item {
-  @apply bg-nc-bg-default border-1 border-nc-border-gray-light rounded-lg p-3;
-  @apply transition-all duration-150;
-
-  &:hover {
-    @apply border-nc-border-gray-medium shadow-sm;
-  }
-}
-
-.nc-log-content {
-  @apply space-y-2;
-}
-
-.nc-log-header {
-  @apply flex items-center justify-between gap-2;
-}
-
-.nc-log-badges {
-  @apply flex items-center gap-2 flex-wrap;
-}
-
-.nc-log-status {
-  @apply inline-flex px-2 py-0.5 rounded text-xs font-semibold;
-}
-
-.nc-log-type {
-  @apply inline-flex items-center gap-1 px-2 py-0.5 rounded;
-  @apply bg-nc-bg-gray-light dark:bg-nc-bg-gray-extralight text-nc-content-gray-subtle2 text-xs font-medium;
-}
-
-.nc-log-meta {
-  @apply flex items-center gap-2 text-xs text-nc-content-gray-subtle2 flex-wrap;
-}
-
-.nc-log-version {
-  @apply flex items-center gap-1.5;
-}
-
-.nc-log-divider {
-  @apply text-nc-content-gray-subtle2;
-}
-
-.nc-log-time {
-  @apply flex items-center gap-1;
-}
-
-.nc-log-error {
-  @apply flex items-start gap-2 p-2 rounded-lg;
-  @apply bg-nc-bg-red-light text-nc-content-red-dark text-xs;
-}
-
-.nc-logs-pagination {
-  @apply flex justify-center mt-4 pt-4 border-t-1 border-nc-border-gray-light;
-}
-
-.nc-logs-empty {
-  @apply flex flex-col items-center justify-center py-12 text-center;
-}
-
-.nc-deployments-pagination {
-  @apply flex justify-center mt-6;
-}
-
-.nc-deployments-empty {
-  @apply flex flex-col items-center justify-center py-16;
-}
-
-.nc-empty-icon {
-  @apply w-16 h-16 rounded-full bg-nc-bg-gray-light;
-  @apply flex items-center justify-center mb-4;
-}
-
-// Responsive
-@media (max-width: 640px) {
-  .nc-deployment-row {
-    @apply flex-col items-start;
-  }
-
-  .nc-deployment-info {
-    @apply w-full;
-  }
-
-  .nc-deployment-status {
-    @apply w-full;
-  }
-
-  .nc-log-meta {
-    @apply flex-col items-start gap-1;
-  }
-}
-</style>
diff --git a/packages/nc-gui/components/dlg/ManagedApp/VersionHistory.vue b/packages/nc-gui/components/dlg/ManagedApp/VersionHistory.vue
deleted file mode 100644
index 660d9f4410..0000000000
--- a/packages/nc-gui/components/dlg/ManagedApp/VersionHistory.vue
+++ /dev/null
@@ -1,357 +0,0 @@
-<script lang="ts" setup>
-interface Props {
-  visible: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {})
-
-const emits = defineEmits(['update:visible'])
-
-const vVisible = useVModel(props, 'visible', emits)
-
-const { $api } = useNuxtApp()
-
-const baseStore = useBase()
-
-const { base, managedApp, managedAppVersionsInfo } = storeToRefs(baseStore)
-
-const isLoadingDeployments = ref(true)
-
-const deploymentStats = ref<any>(null)
-
-// Version deployments modal
-const showVersionDeploymentsModal = ref(false)
-const selectedVersion = ref<any>(null)
-
-// Load real deployment statistics
-const loadDeployments = async () => {
-  if (!managedApp.value?.id || !base.value?.fk_workspace_id) return
-
-  isLoadingDeployments.value = true
-  try {
-    const response = await $api.internal.getOperation(base.value.fk_workspace_id, base.value.id!, {
-      operation: 'managedAppDeployments',
-      managedAppId: managedApp.value.id,
-    } as any)
-    if (response) {
-      deploymentStats.value = response
-    }
-  } catch (e: any) {
-    console.error('Failed to load deployments:', e)
-  } finally {
-    isLoadingDeployments.value = false
-  }
-}
-
-const formatDate = (dateString: string) => {
-  if (!dateString) return 'N/A'
-
-  return parseStringDateTime(dateString, 'MMM DD, YYYY, hh:mm A')
-}
-
-const openVersionDeploymentsModal = (version: any) => {
-  selectedVersion.value = version
-  showVersionDeploymentsModal.value = true
-}
-
-watch(
-  vVisible,
-  (val) => {
-    if (val) {
-      loadDeployments()
-    }
-  },
-  {
-    immediate: true,
-  },
-)
-</script>
-
-<template>
-  <div class="flex flex-col h-full">
-    <DlgManagedAppHeader v-model:visible="vVisible" title="Version History" sub-title="Manage versions and track deployments" />
-
-    <div class="flex-1 nc-scrollbar-thin">
-      <div
-        class="nc-deployments-content"
-        :class="{
-          'h-full': isLoadingDeployments,
-        }"
-      >
-        <div v-if="isLoadingDeployments" class="nc-deployments-loading">
-          <a-spin size="large" />
-          <div class="text-sm text-nc-content-gray-muted mt-3">Loading deployment statistics...</div>
-        </div>
-
-        <template v-else-if="deploymentStats">
-          <!-- Stats Cards -->
-          <div class="nc-deployment-stats">
-            <!-- Total Deployments -->
-            <div class="nc-stat-card">
-              <div class="nc-stat-value">{{ deploymentStats.statistics?.totalDeployments || 0 }}</div>
-              <div class="nc-stat-label">Total Installs</div>
-            </div>
-
-            <!-- Active -->
-            <div class="nc-stat-card">
-              <div class="nc-stat-value text-green-600">{{ deploymentStats.statistics?.activeDeployments || 0 }}</div>
-              <div class="nc-stat-label">Active</div>
-            </div>
-
-            <!-- Failed -->
-            <div class="nc-stat-card">
-              <div class="nc-stat-value text-red-600">{{ deploymentStats.statistics?.failedDeployments || 0 }}</div>
-              <div class="nc-stat-label">Failed</div>
-            </div>
-
-            <!-- Versions -->
-            <div class="nc-stat-card">
-              <div class="nc-stat-value">{{ deploymentStats.statistics?.totalVersions || 0 }}</div>
-              <div class="nc-stat-label">Versions</div>
-            </div>
-          </div>
-
-          <!-- Version List -->
-          <div v-if="deploymentStats.versionStats && deploymentStats.versionStats.length > 0" class="nc-version-list-wrapper">
-            <div class="nc-version-list-header">
-              <div>
-                <h3 class="text-sm font-semibold text-nc-content-gray">Version History</h3>
-
-                <p class="text-xs text-nc-content-gray-subtle2 mt-0.5 mb-0">
-                  {{ deploymentStats.versionStats.length }}
-                  {{ deploymentStats.versionStats.length === 1 ? 'version' : 'versions' }}
-                  published
-                </p>
-              </div>
-            </div>
-
-            <div class="nc-version-list">
-              <div
-                v-for="versionStat in deploymentStats.versionStats"
-                :key="versionStat.versionId"
-                class="nc-version-item"
-                :class="{ 'nc-version-item-clickable': versionStat.deploymentCount > 0 }"
-                @click="versionStat.deploymentCount > 0 && openVersionDeploymentsModal(versionStat)"
-              >
-                <div class="nc-version-info">
-                  <div class="nc-version-icon">
-                    <GeneralIcon icon="ncGitBranch" class="w-4 h-4" />
-                  </div>
-                  <div class="nc-version-details">
-                    <div class="nc-version-title">
-                      <span class="nc-version-number">v{{ versionStat.version }}</span>
-                      <div v-if="managedAppVersionsInfo.published?.id === versionStat.versionId" class="nc-version-badge">
-                        {{ $t('labels.live') }}
-                      </div>
-                      <div
-                        v-else-if="managedAppVersionsInfo.current?.id === versionStat.versionId && versionStat.status === 'draft'"
-                        class="nc-version-badge nc-version-badge-draft"
-                      >
-                        {{ $t('labels.draft') }}
-                      </div>
-                    </div>
-                    <div class="nc-version-date">
-                      <GeneralIcon icon="calendar" class="w-3.5 h-3.5 opacity-60" />
-
-                      <span>Published {{ formatDate(versionStat.publishedAt) }}</span>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="nc-version-installs">
-                  <div class="nc-installs-count">
-                    <GeneralIcon icon="download" class="w-4 h-4 text-nc-content-gray-subtle2" />
-                    <span class="font-bold">{{ versionStat.deploymentCount }}</span>
-                  </div>
-                  <GeneralIcon
-                    v-if="versionStat.deploymentCount > 0"
-                    icon="chevronRight"
-                    class="w-4 h-4 text-nc-content-gray-subtle2"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Empty State -->
-          <div v-else class="nc-deployments-empty">
-            <div class="nc-empty-icon">
-              <GeneralIcon icon="ncServer" class="w-10 h-10 text-nc-content-gray-muted" />
-            </div>
-            <div class="text-base font-semibold text-nc-content-gray mb-1">No installations yet</div>
-            <div class="text-sm text-nc-content-gray-subtle max-w-md text-center">
-              Once users install your application from the App Store, their deployments will appear here.
-            </div>
-          </div>
-        </template>
-
-        <div v-else class="nc-deployments-error">
-          <div class="nc-error-icon">
-            <GeneralIcon icon="alertTriangle" class="w-10 h-10 text-nc-content-red-dark" />
-          </div>
-          <div class="text-base font-semibold text-nc-content-gray mb-1">Failed to load statistics</div>
-          <div class="text-sm text-nc-content-gray-subtle mb-4">There was an error loading deployment data</div>
-          <NcButton size="small" type="secondary" @click="loadDeployments">
-            <template #icon>
-              <GeneralIcon icon="reload" />
-            </template>
-            Retry
-          </NcButton>
-        </div>
-      </div>
-    </div>
-
-    <DlgManagedApp v-model:visible="showVersionDeploymentsModal" modal-size="sm">
-      <DlgManagedAppVersionDeployments v-model:visible="showVersionDeploymentsModal" :version="selectedVersion" />
-    </DlgManagedApp>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-// Deployments Tab Styles
-.nc-deployments-content {
-  @apply px-6 pb-6;
-}
-
-.nc-deployments-loading {
-  @apply h-full flex flex-col items-center justify-center py-16;
-}
-
-.nc-deployment-stats {
-  @apply grid grid-cols-4 mb-4;
-}
-
-.nc-stat-card {
-  @apply flex flex-col gap-1 border-r-1 border-nc-border-gray-medium last:border-r-0 p-4 text-nc-content-gray-subtle text-center;
-}
-
-.nc-stat-icon-wrapper {
-  @apply w-10 h-10 rounded-lg flex items-center justify-center mb-3;
-}
-
-.nc-stat-value {
-  @apply text-subHeading1 font-normal;
-}
-
-.nc-stat-label {
-  @apply text-tiny text-nc-content-gray-muted uppercase;
-}
-
-.nc-version-list-wrapper {
-  @apply mt-4;
-}
-
-.nc-version-list-header {
-  @apply flex items-center justify-between mb-4;
-}
-
-.nc-version-list {
-  @apply space-y-2;
-}
-
-.nc-version-item {
-  @apply bg-nc-bg-default border-1 border-nc-border-gray-medium rounded-xl p-4 flex items-center justify-between gap-4 relative overflow-hidden;
-  @apply transition-all duration-200 ease-in-out;
-
-  &::before {
-    @apply absolute left-0 top-0 bottom-0 w-1 bg-nc-content-brand opacity-0;
-    @apply transition-opacity duration-200 ease-in-out;
-    content: '';
-  }
-
-  &.nc-version-item-clickable {
-    @apply cursor-pointer;
-
-    &:hover {
-      @apply border-nc-border-brand transform translate-x-0.5;
-      box-shadow: 0 4px 12px rgba(51, 102, 255, 0.08);
-
-      &::before {
-        @apply opacity-100;
-      }
-
-      .nc-version-icon {
-        @apply transform scale-105;
-        box-shadow: 0 4px 8px rgba(51, 102, 255, 0.15);
-      }
-
-      .nc-chevron-icon {
-        @apply opacity-100;
-      }
-    }
-  }
-
-  &:last-child {
-    @apply mb-0;
-  }
-}
-
-.nc-chevron-icon {
-  @apply opacity-0 transition-opacity duration-200 ease-in-out;
-}
-
-.nc-version-info {
-  @apply flex items-center gap-3 flex-1 min-w-0;
-}
-
-.nc-version-icon {
-  @apply w-9 h-9 rounded-lg bg-nc-bg-gray-light border-1 border-nc-border-gray-light;
-  @apply flex items-center justify-center text-nc-content-gray flex-shrink-0;
-  @apply transition-all duration-200 ease-in-out;
-}
-
-.nc-version-details {
-  @apply flex-1 min-w-0;
-}
-
-.nc-version-title {
-  @apply flex items-center gap-2 mb-1;
-}
-
-.nc-version-number {
-  @apply font-mono font-bold text-base text-nc-content-gray;
-}
-
-.nc-version-badge {
-  @apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold;
-
-  &.nc-version-badge-draft {
-    @apply bg-nc-orange-20 dark:bg-nc-orange-20 text-orange-600;
-  }
-
-  &:not(.nc-version-badge-draft) {
-    @apply bg-nc-green-50 dark:bg-nc-green-20 text-green-600;
-  }
-}
-
-.nc-version-date {
-  @apply text-xs text-nc-content-gray-subtle2 flex items-center gap-1.5;
-}
-
-.nc-version-installs {
-  @apply flex items-center gap-3;
-}
-
-.nc-installs-count {
-  @apply flex items-center gap-2 text-sm;
-  @apply px-3 py-1.5 rounded-lg bg-nc-bg-gray-light;
-}
-
-.nc-deployments-empty {
-  @apply flex flex-col items-center justify-center py-16;
-}
-
-.nc-empty-icon {
-  @apply w-16 h-16 rounded-full bg-nc-bg-gray-light;
-  @apply flex items-center justify-center mb-4;
-}
-
-.nc-deployments-error {
-  @apply flex flex-col items-center justify-center py-16;
-}
-
-.nc-error-icon {
-  @apply w-16 h-16 rounded-full bg-nc-bg-red-light;
-  @apply flex items-center justify-center mb-4;
-}
-</style>
diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/MenuItem.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/MenuItem.vue
deleted file mode 100644
index eb9640dbdb..0000000000
--- a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/MenuItem.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script lang="ts" setup>
-interface Props {
-  label?: string
-  subtext?: string
-  icon?: IconMapKey
-  iconWrapperClass?: string
-  clickable?: boolean
-}
-
-withDefaults(defineProps<Props>(), {})
-</script>
-
-<template>
-  <div :tabindex="clickable ? 0 : undefined" class="nc-managed-app-status-menu-item" :class="{ 'nc-clickable': clickable }">
-    <div class="nc-icon-wrapper" :class="iconWrapperClass">
-      <slot name="icon">
-        <GeneralIcon v-if="icon" :icon="icon" class="h-4 w-4 flex-none" />
-      </slot>
-    </div>
-
-    <div class="nc-content-wrapper flex-1">
-      <div v-if="$slots.label || label" class="nc-content-label">
-        <slot name="label">{{ label }}</slot>
-      </div>
-      <div v-if="$slots.subtext || subtext" class="nc-content-subtext">
-        <slot name="subtext">{{ subtext }}</slot>
-      </div>
-    </div>
-    <slot name="extraRight"> </slot>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.nc-managed-app-status-menu-item {
-  @apply flex items-center gap-3 p-2  my-0.5 mx-1 rounded-lg transition-colors;
-
-  &.nc-clickable {
-    @apply cursor-pointer select-none hover:bg-nc-bg-gray-extralight;
-  }
-}
-.nc-icon-wrapper {
-  @apply w-8 h-8 rounded-lg flex items-center justify-center children:flex-none;
-}
-
-.nc-content-label {
-  @apply text-caption font-600 text-nc-content-gray-subtle2;
-}
-
-.nc-content-subtext {
-  @apply text-captionSm text-nc-content-gray-muted mt-0.25;
-}
-</style>
diff --git a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
index b68d193672..7c3f5c658a 100644
--- a/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
+++ b/packages/nc-gui/components/smartsheet/topbar/ManagedAppStatus/index.vue
@@ -1,284 +1,3 @@
-<script setup lang="ts">
-const { t } = useI18n()
-
-const baseStore = useBase()
-
-const { loadManagedApp, loadCurrentVersion } = baseStore
-
-const { base, isManagedAppMaster, isManagedAppInstaller, managedAppVersionsInfo } = storeToRefs(baseStore)
-
-const isModalVisible = ref(false)
-
-const modalVariant = ref<'draftOrPublish' | 'versionHistory' | undefined>(undefined)
-
-const isOpenDropdown = ref<boolean>(false)
-
-const isDraft = computed(() => managedAppVersionsInfo.value.current?.status === 'draft')
-
-const openModal = (variant?: 'draftOrPublish' | 'versionHistory') => {
-  isOpenDropdown.value = false
-
-  modalVariant.value = variant
-
-  nextTick(() => {
-    isModalVisible.value = true
-  })
-}
-
-const loadManagedAppAndCurrentVersion = async () => {
-  await loadManagedApp()
-  await loadCurrentVersion()
-}
-
-watch(
-  () => (base.value as any)?.managed_app_id,
-  async (managedAppId) => {
-    if (!managedAppId) return
-
-    await loadManagedAppAndCurrentVersion()
-  },
-  { immediate: true },
-)
-
-const colors = {
-  green: {
-    bg: 'bg-nc-green-50 dark:bg-nc-green-20',
-    border: 'border-green-200 dark:border-nc-green-100',
-    text: 'text-green-600 dark:text-nc-green-300',
-  },
-  orange: {
-    bg: 'bg-nc-orange-20 dark:bg-nc-orange-20',
-    border: 'border-nc-orange-200 dark:border-orange-600/40',
-    text: 'text-orange-600',
-  },
-  brand: {
-    bg: 'bg-nc-brand-50 dark:bg-nc-brand-20/40',
-    border: 'border-nc-brand-200 dark:border-nc-content-brand/50',
-    text: 'text-nc-content-brand',
-  },
-}
-
-const badgeConfig = computed(() => {
-  const result = {
-    colors: colors.green,
-    icon: 'circleCheck3',
-    subText: '',
-  }
-
-  if (isManagedAppInstaller.value) {
-    if (managedAppVersionsInfo.value.updateAvailable) {
-      result.colors = colors.brand
-      result.icon = 'ncDownload'
-      result.subText = t('labels.updateAvailable')
-    } else {
-      result.colors = colors.green
-      result.icon = 'circleCheck3'
-      result.subText = t('labels.upToDate')
-    }
-  } else if (isDraft.value) {
-    result.colors = colors.orange
-    result.icon = 'pencil'
-    result.subText = t('labels.draft')
-  } else {
-    result.colors = colors.green
-    result.icon = 'circleCheck3'
-    result.subText = t('labels.published')
-  }
-
-  return result
-})
-</script>
-
 <template>
-  <NcDropdown v-if="isManagedAppMaster || isManagedAppInstaller" v-model:visible="isOpenDropdown" placement="bottomRight">
-    <div class="flex items-center gap-2">
-      <!-- Version Badge (clickable to open modal) -->
-      <div
-        class="flex items-center gap-2 px-2.5 py-1 h-8 rounded-lg border-1 cursor-pointer transition-colors select-none"
-        :class="[badgeConfig.colors.bg, badgeConfig.colors.border, badgeConfig.colors.text]"
-      >
-        <GeneralIcon :icon="badgeConfig.icon as IconMapKey" class="w-3.5 h-3.5 text-current nc-managed-app-status-info-icon" />
-        <span class="text-xs font-mono font-medium"> v{{ managedAppVersionsInfo.current?.version || '1.0.0' }}</span>
-        <span class="py-0.5 text-xs font-medium whitespace-nowrap">
-          {{ badgeConfig.subText }}
-        </span>
-        <GeneralIcon
-          icon="chevronDown"
-          class="w-3.5 h-3.5 text-nc-content-gray-muted opacity-80 transform transition-all duration-200"
-          :class="{
-            'rotate-180': isOpenDropdown,
-          }"
-        />
-      </div>
-    </div>
-    <template #overlay>
-      <div class="nc-managed-app-status-menu flex flex-col">
-        <div class="nc-managed-app-status-menu-header">
-          <span class="uppercase">{{ isManagedAppInstaller ? 'Installed Version' : 'Current State' }}</span>
-          <span v-if="managedAppVersionsInfo.current?.status === 'draft' && managedAppVersionsInfo.published"
-            >Live: v{{ managedAppVersionsInfo.published.version }}
-          </span>
-        </div>
-
-        <!-- Publisher application  -->
-        <template v-if="isManagedAppMaster">
-          <!-- Live state  -->
-          <template v-if="managedAppVersionsInfo.published && !isDraft">
-            <SmartsheetTopbarManagedAppStatusMenuItem
-              :label="`v${managedAppVersionsInfo.published.version || '1.0.0'}`"
-              icon-wrapper-class="bg-green-50 dark:bg-nc-green-20"
-            >
-              <template #icon>
-                <GeneralIcon icon="circleCheck3" class="text-green-600" />
-              </template>
-              <template #subtext>
-                <span class="text-green-600"> Live & Serving Users </span>
-              </template>
-            </SmartsheetTopbarManagedAppStatusMenuItem>
-
-            <NcDivider class="!my-1" />
-            <SmartsheetTopbarManagedAppStatusMenuItem
-              clickable
-              label="Fork to Draft"
-              :subtext="`Create v${suggestManagedAppNextVersion(
-                managedAppVersionsInfo.published.version || '1.0.0',
-              )} to make changes`"
-              icon-wrapper-class="bg-nc-bg-gray-light dakr:bg-nc-bg-gray-light/75"
-              @click="openModal('draftOrPublish')"
-            >
-              <template #icon>
-                <GeneralIcon icon="ncCopy" class="text-nc-content-gray-muted" />
-              </template>
-            </SmartsheetTopbarManagedAppStatusMenuItem>
-          </template>
-
-          <!-- Draft state  -->
-          <template v-if="isDraft">
-            <SmartsheetTopbarManagedAppStatusMenuItem
-              :label="`v${managedAppVersionsInfo.current.version || '1.0.0'}`"
-              icon-wrapper-class="bg-orange-50 dark:bg-nc-orange-20"
-            >
-              <template #icon>
-                <GeneralIcon icon="edit" class="text-orange-600" />
-              </template>
-              <template #subtext>
-                <span class="text-orange-600"> Editing Draft </span>
-              </template>
-            </SmartsheetTopbarManagedAppStatusMenuItem>
-            <NcDivider class="!my-1" />
-
-            <SmartsheetTopbarManagedAppStatusMenuItem
-              clickable
-              icon-wrapper-class="bg-green-50 dark:bg-nc-green-20"
-              @click="openModal('draftOrPublish')"
-            >
-              <template #icon>
-                <GeneralIcon icon="ncArrowUp" class="text-green-600" />
-              </template>
-              <template #label>
-                <span class="text-green-600"> Publish v{{ managedAppVersionsInfo.current.version || '1.0.0' }} </span>
-              </template>
-              <template #subtext>
-                {{
-                  managedAppVersionsInfo.published
-                    ? `Replace v${managedAppVersionsInfo.published.version || '1.0.0'} and go live`
-                    : `Go live`
-                }}
-              </template>
-            </SmartsheetTopbarManagedAppStatusMenuItem>
-          </template>
-
-          <!-- Initial draft state  -->
-          <SmartsheetTopbarManagedAppStatusMenuItem
-            v-if="managedAppVersionsInfo.published && isDraft"
-            clickable
-            label="Discard Draft"
-            :subtext="`Return to v${managedAppVersionsInfo.published.version || '1.0.0'}`"
-            icon-wrapper-class="bg-nc-bg-gray-light"
-          >
-            <template #icon>
-              <GeneralIcon icon="delete" class="text-nc-content-gray-muted" />
-            </template>
-          </SmartsheetTopbarManagedAppStatusMenuItem>
-          <NcDivider class="!my-1" />
-
-          <!-- Version history  -->
-          <SmartsheetTopbarManagedAppStatusMenuItem
-            clickable
-            label="View version history"
-            subtext="Manage versions & track deployments"
-            icon-wrapper-class="bg-nc-bg-gray-light"
-            @click="openModal('versionHistory')"
-          >
-            <template #icon>
-              <GeneralIcon icon="ncClock" class="text-nc-content-gray-muted" />
-            </template>
-          </SmartsheetTopbarManagedAppStatusMenuItem>
-        </template>
-
-        <!-- Installer application  -->
-        <template v-if="isManagedAppInstaller">
-          <SmartsheetTopbarManagedAppStatusMenuItem
-            :label="`v${managedAppVersionsInfo.current?.version || '1.0.0'}`"
-            icon-wrapper-class="bg-green-50 dark:bg-nc-green-20"
-          >
-            <template #icon>
-              <GeneralIcon icon="circleCheck3" class="text-green-600" />
-            </template>
-
-            <template v-if="managedAppVersionsInfo.current?.published_at" #subtext>
-              <span class="text-green-600">
-                Published {{ parseStringDateTime(managedAppVersionsInfo.current?.published_at, 'MMM DD, YYYY, hh:mm A') }}
-              </span>
-            </template>
-          </SmartsheetTopbarManagedAppStatusMenuItem>
-
-          <div
-            v-if="!base.auto_update && managedAppVersionsInfo.updateAvailable"
-            class="bg-nc-brand-20 dark:bg-nc-brand-20/40 -mb-1.5"
-          >
-            <SmartsheetTopbarManagedAppStatusMenuItem
-              :label="`v${managedAppVersionsInfo.published?.version || '1.0.0'}`"
-              icon-wrapper-class="bg-brand-50 dark:bg-nc-brand-50"
-            >
-              <template #icon>
-                <GeneralIcon icon="ncDownload" class="text-brand-600" />
-              </template>
-
-              <template #subtext>
-                <span class="text-brand-600"> New version available </span>
-              </template>
-              <template #extraRight>
-                <NcButton size="small"> Update </NcButton>
-              </template>
-            </SmartsheetTopbarManagedAppStatusMenuItem>
-          </div>
-
-          <NcDivider class="!my-1" />
-          <SmartsheetTopbarManagedAppStatusMenuItem
-            clickable
-            label="View Changelog"
-            subtext="See what's new in each version"
-            icon-wrapper-class="bg-nc-bg-gray-light"
-          >
-            <template #icon>
-              <GeneralIcon icon="file" class="text-nc-content-gray-muted" />
-            </template>
-          </SmartsheetTopbarManagedAppStatusMenuItem>
-        </template>
-      </div>
-    </template>
-  </NcDropdown>
-
-  <DlgManagedApp v-model:visible="isModalVisible" modal-size="sm" :variant="modalVariant"> </DlgManagedApp>
+  <NcSpanHidden />
 </template>
-
-<style lang="scss" scoped>
-.nc-managed-app-status-menu {
-  @apply w-[318px] pb-2;
-}
-
-.nc-managed-app-status-menu-header {
-  @apply flex items-center justify-between gap-2 pt-3 px-3 mb-1 text-nc-content-gray-muted text-captionSm;
-}
-</style>
diff --git a/packages/nc-gui/components/workspace/project/create/ManagedApp.vue b/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
index 8bfcc57623..98f11b061a 100644
--- a/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
+++ b/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { BaseVersion, FormBuilderValidatorType, type FormDefinition } from 'nocodb-sdk'
-import { FORM_BUILDER_NON_CATEGORIZED, FormBuilderInputType } from '#imports'
-
 const props = defineProps<{
   visible: boolean
   baseId?: string
@@ -11,243 +8,9 @@ const props = defineProps<{
   submitButtonText?: string
 }>()
 
-const emit = defineEmits(['update:visible'])
-
-const visible = useVModel(props, 'visible', emit)
-
-const { title, subTitle, alertDescription, submitButtonText } = toRefs(props)
-
-const { $api } = useNuxtApp()
-
-const { t } = useI18n()
-
-const { navigateToProject } = useGlobal()
-
-const initialSanboxFormState = ref<Record<string, any>>({
-  title: '',
-  description: '',
-  category: '',
-  visibility: 'private',
-  startFrom: props.baseId ? 'existing' : 'new',
-  baseId: props.baseId,
-})
-
-const workspaceStore = useWorkspace()
-
-const { activeWorkspaceId } = storeToRefs(workspaceStore)
-
-const basesStore = useBases()
-
-const baseStore = useBase()
-
-const { base } = storeToRefs(baseStore)
-
-const createManagedApp = async (formState: Record<string, any>) => {
-  try {
-    const response = await $api.internal.postOperation(
-      activeWorkspaceId.value as string,
-      formState.baseId || NO_SCOPE,
-      {
-        operation: 'managedAppCreate',
-      } as any,
-      {
-        title: formState.title,
-        description: formState.description,
-        category: formState.category,
-        visibility: formState.visibility,
-        ...(!formState.baseId
-          ? {
-              basePayload: {
-                title: formState.title,
-                default_role: '' as NcProject['default_role'],
-                meta: JSON.stringify({
-                  iconColor: baseIconColors[Math.floor(Math.random() * 1000) % baseIconColors.length],
-                }),
-              },
-            }
-          : {}),
-      },
-    )
-
-    message.success(t('msg.success.managedAppCreated'))
-    visible.value = false
-
-    // Update the base with the managed_app_id from response
-    if (response && response.managed_app_id && formState.baseId) {
-      const currentBase = basesStore.bases.get(formState.baseId as string)
-      if (currentBase) {
-        ;(currentBase as any).managed_app_id = response.managed_app_id
-      }
-    }
-
-    // Reload base to ensure all managed app data is loaded
-    if (formState.baseId) {
-      await basesStore.loadProject(formState.baseId, true)
-    } else {
-      await basesStore.loadProjects()
-    }
-
-    if (!props.baseId && (response?.base_id || formState.baseId) && base.value?.id !== (response?.base_id || formState.baseId)) {
-      navigateToProject({
-        baseId: response?.base_id || formState.baseId,
-        workspaceId: activeWorkspaceId.value as string,
-      })
-    } else if (base.value?.id && base.value.id === formState.baseId) {
-      baseStore.loadManagedApp()
-      baseStore.loadCurrentVersion()
-    }
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  }
-}
-
-const { formState, isLoading, submit } = useProvideFormBuilderHelper({
-  formSchema: [
-    {
-      type: FormBuilderInputType.Input,
-      label: t('labels.managedAppTitle'),
-      span: 24,
-      model: 'title',
-      placeholder: 'Enter a descriptive title',
-      category: FORM_BUILDER_NON_CATEGORIZED,
-      validators: [
-        {
-          type: FormBuilderValidatorType.Required,
-          message: t('labels.titleRequired'),
-        },
-        {
-          type: FormBuilderValidatorType.Custom,
-          validator: baseTitleValidator('App').validator,
-        },
-      ],
-      required: true,
-    },
-    {
-      type: FormBuilderInputType.Textarea,
-      label: t('labels.managedAppDescription'),
-      span: 24,
-      model: 'description',
-      placeholder: "Describe your application's capabilities",
-      category: FORM_BUILDER_NON_CATEGORIZED,
-    },
-    ...(!props.baseId
-      ? ([
-          {
-            type: FormBuilderInputType.Select,
-            label: 'Start from',
-            span: 12,
-            model: 'startFrom',
-            category: FORM_BUILDER_NON_CATEGORIZED,
-            options: [
-              { label: 'New', value: 'new', icon: 'plus' },
-              { label: 'Existing Base', value: 'existing', icon: 'copy' },
-            ],
-            defaultValue: 'new',
-          },
-          {
-            type: FormBuilderInputType.Space,
-            span: 12,
-            category: FORM_BUILDER_NON_CATEGORIZED,
-            condition: {
-              model: 'startFrom',
-              equal: 'new',
-            },
-          },
-          {
-            type: FormBuilderInputType.SelectBase,
-            label: 'Select base',
-            span: 12,
-            model: 'baseId',
-            category: FORM_BUILDER_NON_CATEGORIZED,
-            condition: {
-              model: 'startFrom',
-              equal: 'existing',
-            },
-            defaultValue: undefined,
-            filterOption: (base) => base && base.version === BaseVersion.V3 && !base.managed_app_id,
-            helpText: 'Only V3 bases can be published as managed apps',
-            showHintAsTooltip: true,
-          },
-        ] as FormDefinition)
-      : []),
-
-    {
-      type: FormBuilderInputType.Input,
-      label: t('labels.managedAppCategory'),
-      span: 12,
-      model: 'category',
-      placeholder: 'e.g., CRM, HR',
-      category: FORM_BUILDER_NON_CATEGORIZED,
-    },
-    {
-      type: FormBuilderInputType.Select,
-      label: t('labels.managedAppVisibility'),
-      span: 12,
-      model: 'visibility',
-      category: FORM_BUILDER_NON_CATEGORIZED,
-      options: [
-        // { label: 'Public', value: 'public', icon: 'eye' },
-        { label: 'Private', value: 'private', icon: 'lock' },
-        { label: 'Unlisted', value: 'unlisted', icon: 'ncEyeOff' },
-      ],
-      defaultValue: 'private',
-    },
-  ],
-  onSubmit: async () => {
-    if (!props.baseId && formState.value.startFrom === 'new' && formState.value.baseId) {
-      formState.value.baseId = ''
-    }
-
-    if (props.baseId) {
-      formState.value.baseId = props.baseId
-    }
-
-    formState.value.title = formState.value.title.trim()
-
-    return await createManagedApp(formState.value)
-  },
-  initialState: initialSanboxFormState,
-})
+defineEmits(['update:visible'])
 </script>
 
 <template>
-  <div class="flex flex-col h-full">
-    <DlgManagedAppHeader
-      v-model:visible="visible"
-      :title="title || 'Create Managed App'"
-      :sub-title="subTitle || $t('labels.publishToAppStore')"
-    />
-
-    <div class="flex-1 p-6 nc-scrollbar-thin">
-      <NcFormBuilder>
-        <template #header>
-          <NcAlert
-            type="info"
-            align="top"
-            :description="
-              alertDescription ||
-              'Create managed application that can be published to the App Store. You\'ll be able to manage versions and push updates to all installations.'
-            "
-            class="!p-3 !items-start bg-nc-bg-blue-light border-1 !border-nc-blue-200 rounded-lg p-3 mb-4"
-          >
-            <template #icon>
-              <GeneralIcon icon="info" class="w-4 h-4 mt-0.5 text-nc-content-blue-dark flex-none" />
-            </template>
-          </NcAlert>
-        </template>
-      </NcFormBuilder>
-    </div>
-
-    <div class="flex justify-end gap-2 px-6 py-3 border-t border-nc-border-gray-medium">
-      <NcButton size="small" type="secondary" :disabled="isLoading" @click="visible = false">
-        {{ $t('general.cancel') }}
-      </NcButton>
-      <NcButton size="small" type="primary" :loading="isLoading" @click="submit">
-        <template #icon>
-          <GeneralIcon icon="ncBox" />
-        </template>
-        {{ submitButtonText || 'Create managed app' }}
-      </NcButton>
-    </div>
-  </div>
+  <NcSpanHidden />
 </template>

From 7a885d5e1f768890bfe9defd13db24ee84206266 Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Jan 2026 11:47:17 +0000
Subject: [PATCH 17/18] feat: changelog ui changes

---
 packages/nc-gui/lang/en.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 30be3eb899..f9434b997f 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -302,6 +302,7 @@
     "refresh": "Refresh",
     "reset": "Reset",
     "install": "Install",
+    "installed": "Installed",
     "show": "Show",
     "access": "Access",
     "visibility": "Visibility",

From 96035554bd22d83d971b67722611ae5e9d71ac3e Mon Sep 17 00:00:00 2001
From: Ramesh Mane <101566080+rameshmane7218@users.noreply.github.com>
Date: Tue, 27 Jan 2026 11:47:17 +0000
Subject: [PATCH 18/18] chore(nc-gui): lint

---
 packages/nc-gui/components/dlg/AirtableImport.vue               | 2 +-
 packages/nc-gui/components/dlg/QuickImport.vue                  | 2 +-
 packages/nc-gui/components/dlg/Table/Create.vue                 | 2 +-
 .../nc-gui/components/workspace/project/create/ManagedApp.vue   | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/dlg/AirtableImport.vue b/packages/nc-gui/components/dlg/AirtableImport.vue
index 88621640ec..793245109c 100644
--- a/packages/nc-gui/components/dlg/AirtableImport.vue
+++ b/packages/nc-gui/components/dlg/AirtableImport.vue
@@ -409,8 +409,8 @@ const collapseKey = ref('')
         <div class="my-5">
           <NcListSourceSelector
             ref="sourceSelectorRef"
-            :base-id="baseId"
             v-model:source-id="sourceIdRef"
+            :base-id="baseId"
             :show-source-selector="showSourceSelector"
             force-layout="vertical"
           />
diff --git a/packages/nc-gui/components/dlg/QuickImport.vue b/packages/nc-gui/components/dlg/QuickImport.vue
index daac056455..9231402ee4 100644
--- a/packages/nc-gui/components/dlg/QuickImport.vue
+++ b/packages/nc-gui/components/dlg/QuickImport.vue
@@ -1036,8 +1036,8 @@ watch(
         <div class="mb-4">
           <NcListSourceSelector
             ref="sourceSelectorRef"
-            :base-id="baseId"
             v-model:source-id="sourceIdRef"
+            :base-id="baseId"
             :show-source-selector="showSourceSelector"
             force-layout="vertical"
           />
diff --git a/packages/nc-gui/components/dlg/Table/Create.vue b/packages/nc-gui/components/dlg/Table/Create.vue
index b9b613e590..6329652499 100644
--- a/packages/nc-gui/components/dlg/Table/Create.vue
+++ b/packages/nc-gui/components/dlg/Table/Create.vue
@@ -488,8 +488,8 @@ watch(_baseId, () => {
 
             <NcListSourceSelector
               ref="sourceSelectorRef"
-              :base-id="baseId"
               v-model:source-id="sourceIdRef"
+              :base-id="baseId"
               :show-source-selector="showSourceSelector"
             />
           </template>
diff --git a/packages/nc-gui/components/workspace/project/create/ManagedApp.vue b/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
index 98f11b061a..93a297098d 100644
--- a/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
+++ b/packages/nc-gui/components/workspace/project/create/ManagedApp.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = defineProps<{
+defineProps<{
   visible: boolean
   baseId?: string
   title?: string