diff --git a/.github/actions/pr/action.yml b/.github/actions/pr/action.yml
index 95f6227006c..e857664d3ae 100644
--- a/.github/actions/pr/action.yml
+++ b/.github/actions/pr/action.yml
@@ -97,9 +97,10 @@ runs:
         shell: bash
         id: commit
         run: |
+          mv .git/config .git/config-old 
+          git remote add origin https://${{ inputs.bot_token }}@github.com/${{ github.repository }}.git
           git diff --staged --quiet || git commit -m "Update version to ${{ inputs.version }}"
           git checkout -b "${{ inputs.version }}"
-          git remote set-url origin https://${{ inputs.bot_username }}:${{ inputs.bot_token }}@github.com/$GITHUB_REPOSITORY.git
           git tag ${{ inputs.version }}
           git push origin "refs/heads/${{ inputs.version }}" "refs/tags/${{ inputs.version }}"
           baseBranch=""
@@ -119,7 +120,7 @@ runs:
           pr=$(gh pr create -B "$baseBranch" -H "${{ inputs.version }}" --title "Merge \"${{ inputs.version }}\" into \"$baseBranch\"" --body '$subject')
           echo "prURL=$pr" >> $GITHUB_OUTPUT
         env:
-          GITHUB_TOKEN: ${{ inputs.bot_token }}
+          GH_TOKEN: ${{ inputs.bot_token }}
 
       - name: "PR Notification"
         shell: bash
diff --git a/.github/workflows/release-vsix.yml b/.github/workflows/release-vsix.yml
index 0b740fc9ce4..3eb8c6b7534 100644
--- a/.github/workflows/release-vsix.yml
+++ b/.github/workflows/release-vsix.yml
@@ -200,6 +200,7 @@ jobs:
     if: ${{ always() && contains(needs.*.result, 'failure') && github.repository == 'wso2/vscode-extensions'}}
     runs-on: ubuntu-latest
     steps:
+      - uses: actions/checkout@v2
       - name: "Failure Notification"
         uses: ./.github/actions/failure-notification
         with:
diff --git a/.gitignore b/.gitignore
index 7b220b9158b..9a8738831b6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -76,4 +76,7 @@ playwright-report/
 
 extensions.json
 
-!sample-mi-project.zip
\ No newline at end of file
+!sample-mi-project.zip
+.claude/
+
+pnpm-lock.yaml
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index dd035447509..b6876098cb8 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -127,6 +127,9 @@ importers:
 
   ../../workspaces/ballerina/ballerina-extension:
     dependencies:
+      '@ai-sdk/amazon-bedrock':
+        specifier: ^2.2.12
+        version: 2.2.12(zod@3.25.76)
       '@ai-sdk/anthropic':
         specifier: ^1.2.12
         version: 1.2.12(zod@3.25.76)
@@ -679,7 +682,7 @@ importers:
     devDependencies:
       '@storybook/react':
         specifier: ^6.5.16
-        version: 6.5.16(@babel/core@7.28.0)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(require-from-string@2.0.2)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)
+        version: 6.5.16(@babel/core@7.27.7)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(require-from-string@2.0.2)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)
       '@types/lodash':
         specifier: ~4.17.16
         version: 4.17.17
@@ -728,12 +731,12 @@ importers:
       '@wso2/ballerina-core':
         specifier: workspace:*
         version: link:../ballerina-core
+      '@wso2/ballerina-data-mapper':
+        specifier: workspace:*
+        version: link:../data-mapper
       '@wso2/ballerina-graphql-design-diagram':
         specifier: workspace:*
         version: link:../graphql-design-diagram
-      '@wso2/ballerina-inline-data-mapper':
-        specifier: workspace:*
-        version: link:../inline-data-mapper
       '@wso2/ballerina-low-code-diagram':
         specifier: workspace:*
         version: link:../ballerina-low-code-diagram
@@ -752,9 +755,6 @@ importers:
       '@wso2/component-diagram':
         specifier: workspace:*
         version: link:../component-diagram
-      '@wso2/data-mapper-view':
-        specifier: workspace:*
-        version: link:../data-mapper-view
       '@wso2/overview-view':
         specifier: workspace:*
         version: link:../overview-view
@@ -951,7 +951,7 @@ importers:
     devDependencies:
       '@storybook/react':
         specifier: ^6.3.7
-        version: 6.5.16(@babel/core@7.28.0)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(require-from-string@2.0.2)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)
+        version: 6.5.16(@babel/core@7.27.7)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(require-from-string@2.0.2)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)
       '@types/dagre':
         specifier: ~0.7.52
         version: 0.7.53
@@ -1021,7 +1021,7 @@ importers:
     devDependencies:
       '@storybook/react':
         specifier: ^6.5.16
-        version: 6.5.16(@babel/core@7.28.0)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(require-from-string@2.0.2)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)
+        version: 6.5.16(@babel/core@7.27.7)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(require-from-string@2.0.2)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)
       '@types/dagre':
         specifier: ~0.7.52
         version: 0.7.53
@@ -1041,7 +1041,7 @@ importers:
         specifier: 5.8.3
         version: 5.8.3
 
-  ../../workspaces/ballerina/data-mapper-view:
+  ../../workspaces/ballerina/data-mapper:
     dependencies:
       '@emotion/css':
         specifier: ~11.13.5
@@ -1070,8 +1070,11 @@ importers:
       '@tanstack/react-query':
         specifier: 5.77.1
         version: 5.77.1(react@18.2.0)
+      '@types/mousetrap':
+        specifier: ~1.6.15
+        version: 1.6.15
       '@vscode/webview-ui-toolkit':
-        specifier: ^1.4.0
+        specifier: ^1.2.0
         version: 1.4.0(react@18.2.0)
       '@wso2/ballerina-core':
         specifier: workspace:*
@@ -1079,15 +1082,6 @@ importers:
       '@wso2/ballerina-rpc-client':
         specifier: workspace:*
         version: link:../ballerina-rpc-client
-      '@wso2/ballerina-statement-editor':
-        specifier: workspace:*
-        version: link:../statement-editor
-      '@wso2/record-creator':
-        specifier: workspace:*
-        version: link:../record-creator
-      '@wso2/syntax-tree':
-        specifier: workspace:*
-        version: link:../syntax-tree
       '@wso2/ui-toolkit':
         specifier: workspace:*
         version: link:../../common-libs/ui-toolkit
@@ -1095,210 +1089,75 @@ importers:
         specifier: ^2.19.0
         version: 2.19.0
       classnames:
-        specifier: ^2.5.1
+        specifier: ^2.2.6
         version: 2.5.1
       lodash:
-        specifier: ^4.17.21
+        specifier: ^4.17.11
         version: 4.17.21
       lodash.debounce:
         specifier: ^4.0.8
         version: 4.0.8
+      mousetrap:
+        specifier: ^1.6.5
+        version: 1.6.5
       react:
-        specifier: 18.2.0
+        specifier: ^18.2.0
         version: 18.2.0
       react-dom:
-        specifier: 18.2.0
+        specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
-      react-intl:
-        specifier: ^7.1.11
-        version: 7.1.11(react@18.2.0)(typescript@5.8.3)
-      react-lottie:
-        specifier: ^1.2.10
-        version: 1.2.10(react@18.2.0)
-      reflect-metadata:
-        specifier: ^0.1.14
-        version: 0.1.14
       resize-observer-polyfill:
         specifier: ^1.5.1
         version: 1.5.1
-      tsyringe:
-        specifier: ^4.10.0
-        version: 4.10.0
       vscode-languageserver-types:
         specifier: ^3.17.5
         version: 3.17.5
       zustand:
-        specifier: ^4.5.7
-        version: 4.5.7(@types/react@18.2.0)(react@18.2.0)
+        specifier: ^5.0.4
+        version: 5.0.6(@types/react@18.2.0)(react@18.2.0)(use-sync-external-store@1.5.0(react@18.2.0))
     devDependencies:
-      '@babel/core':
-        specifier: ^7.27.1
-        version: 7.27.7
-      '@babel/preset-env':
-        specifier: ^7.27.2
-        version: 7.27.2(@babel/core@7.27.7)
-      '@rollup/plugin-commonjs':
-        specifier: ^28.0.3
-        version: 28.0.6(rollup@4.46.1)
-      '@rollup/plugin-json':
-        specifier: ^6.1.0
-        version: 6.1.0(rollup@4.46.1)
-      '@rollup/plugin-node-resolve':
-        specifier: ^16.0.1
-        version: 16.0.1(rollup@4.46.1)
-      '@storybook/addon-actions':
-        specifier: ^8.6.14
-        version: 8.6.14(storybook@8.6.14(prettier@3.5.3))
-      '@storybook/addon-essentials':
-        specifier: ^8.6.14
-        version: 8.6.14(@types/react@18.2.0)(storybook@8.6.14(prettier@3.5.3))
-      '@storybook/addon-links':
-        specifier: ^8.6.14
-        version: 8.6.14(react@18.2.0)(storybook@8.6.14(prettier@3.5.3))
-      '@storybook/builder-webpack5':
-        specifier: ^8.6.14
-        version: 8.6.14(storybook@8.6.14(prettier@3.5.3))(typescript@5.8.3)(webpack-cli@6.0.1)
-      '@storybook/manager-webpack5':
-        specifier: ^6.5.16
-        version: 6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
-      '@storybook/react':
-        specifier: ^8.6.14
-        version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.5.3)))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(storybook@8.6.14(prettier@3.5.3))(typescript@5.8.3)
       '@types/blueimp-md5':
         specifier: ^2.18.2
         version: 2.18.2
-      '@types/classnames':
-        specifier: ^2.3.4
-        version: 2.3.4
-      '@types/handlebars':
-        specifier: ^4.1.0
-        version: 4.1.0
       '@types/lodash':
         specifier: 4.17.16
         version: 4.17.16
       '@types/lodash.debounce':
-        specifier: ^4.0.9
+        specifier: ^4.0.6
         version: 4.0.9
       '@types/react':
-        specifier: 18.2.0
+        specifier: ^18.2.0
         version: 18.2.0
       '@types/react-dom':
-        specifier: 18.2.0
-        version: 18.2.0
-      '@types/react-lottie':
-        specifier: ^1.2.10
-        version: 1.2.10
-      '@types/uuid':
-        specifier: ^10.0.0
-        version: 10.0.0
-      '@types/webpack':
-        specifier: ^5.28.5
-        version: 5.28.5(webpack-cli@6.0.1)
+        specifier: 17.0.26
+        version: 17.0.26(@types/react@18.2.0)
       '@typescript-eslint/eslint-plugin':
         specifier: ~8.32.1
         version: 8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
       '@typescript-eslint/parser':
         specifier: ~8.32.1
         version: 8.32.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
-      '@vitejs/plugin-react':
-        specifier: ^4.4.1
-        version: 4.7.0(vite@6.3.5(@types/node@22.15.35)(jiti@2.5.1)(sass@1.89.2)(terser@5.43.1)(yaml@2.8.0))
-      babel-loader:
-        specifier: ^10.0.0
-        version: 10.0.0(@babel/core@7.27.7)(webpack@5.101.0)
-      babel-plugin-transform-typescript-metadata:
-        specifier: ^0.3.2
-        version: 0.3.2
-      copy-webpack-plugin:
-        specifier: ^13.0.0
-        version: 13.0.0(webpack@5.101.0)
       copyfiles:
         specifier: ^2.4.1
         version: 2.4.1
       css-loader:
         specifier: ^7.1.2
         version: 7.1.2(webpack@5.101.0)
-      dagre:
-        specifier: ^0.8.5
-        version: 0.8.5
       eslint:
-        specifier: ^9.27.0
+        specifier: ^9.26.0
         version: 9.27.0(jiti@2.5.1)
       eslint-plugin-react-hooks:
         specifier: ^5.2.0
         version: 5.2.0(eslint@9.27.0(jiti@2.5.1))
       eslint-plugin-react-refresh:
-        specifier: ^0.4.20
+        specifier: ^0.4.4
         version: 0.4.20(eslint@9.27.0(jiti@2.5.1))
       file-loader:
         specifier: ^6.2.0
         version: 6.2.0(webpack@5.101.0)
-      fork-ts-checker-webpack-plugin:
-        specifier: ^9.1.0
-        version: 9.1.0(typescript@5.8.3)(webpack@5.101.0)
-      monaco-editor-webpack-plugin:
-        specifier: ^7.1.0
-        version: 7.1.0(monaco-editor@0.52.2)(webpack@5.101.0)
-      mousetrap:
-        specifier: ^1.6.5
-        version: 1.6.5
-      pathfinding:
-        specifier: ^0.4.18
-        version: 0.4.18
-      paths-js:
-        specifier: ^0.4.11
-        version: 0.4.11
-      react-scripts-ts:
-        specifier: ^3.1.0
-        version: 3.1.0(babel-core@7.0.0-bridge.0(@babel/core@7.27.7))(babel-runtime@6.26.0)(typescript@5.8.3)(webpack-cli@6.0.1)
-      react-test-renderer:
-        specifier: ^19.1.0
-        version: 19.1.1(react@18.2.0)
-      rimraf:
-        specifier: ^6.0.1
-        version: 6.0.1
-      rollup:
-        specifier: ^4.41.0
-        version: 4.46.1
-      rollup-plugin-import-css:
-        specifier: ^3.5.8
-        version: 3.5.8(rollup@4.46.1)
-      rollup-plugin-peer-deps-external:
-        specifier: ^2.2.4
-        version: 2.2.4(rollup@4.46.1)
-      rollup-plugin-postcss:
-        specifier: ^4.0.2
-        version: 4.0.2(postcss@8.5.6)
-      rollup-plugin-scss:
-        specifier: ^4.0.1
-        version: 4.0.1
-      rollup-plugin-svg:
-        specifier: ^2.0.0
-        version: 2.0.0
-      rollup-plugin-typescript2:
-        specifier: ^0.36.0
-        version: 0.36.0(rollup@4.46.1)(typescript@5.8.3)
-      sass:
-        specifier: ^1.89.0
-        version: 1.89.2
-      sass-loader:
-        specifier: ^16.0.5
-        version: 16.0.5(node-sass@9.0.0)(sass@1.89.2)(webpack@5.101.0)
-      storybook:
-        specifier: ^8.6.14
-        version: 8.6.14(prettier@3.5.3)
-      style-loader:
-        specifier: ^4.0.0
-        version: 4.0.0(webpack@5.101.0)
-      stylelint:
-        specifier: ^16.19.1
-        version: 16.22.0(typescript@5.8.3)
-      stylelint-config-standard:
-        specifier: ^38.0.0
-        version: 38.0.0(stylelint@16.22.0(typescript@5.8.3))
-      svg-url-loader:
-        specifier: ^8.0.0
-        version: 8.0.0(webpack@5.101.0)
+      react-hook-form:
+        specifier: ~7.56.3
+        version: 7.56.4(react@18.2.0)
       ts-loader:
         specifier: ^9.5.2
         version: 9.5.2(typescript@5.8.3)(webpack@5.101.0)
@@ -1315,23 +1174,8 @@ importers:
         specifier: ^2.2.2
         version: 2.2.2(tslint@6.1.3(typescript@5.8.3))(typescript@5.8.3)
       typescript:
-        specifier: 5.8.3
+        specifier: ^5.8.3
         version: 5.8.3
-      vite:
-        specifier: ^6.3.5
-        version: 6.3.5(@types/node@22.15.35)(jiti@2.5.1)(sass@1.89.2)(terser@5.43.1)(yaml@2.8.0)
-      vscode-uri:
-        specifier: ^3.1.0
-        version: 3.1.0
-      webpack:
-        specifier: ^5.94.0
-        version: 5.101.0(webpack-cli@6.0.1)
-      webpack-cli:
-        specifier: ^6.0.1
-        version: 6.0.1(webpack-dev-server@5.2.2)(webpack@5.101.0)
-      webpack-dev-server:
-        specifier: ^5.2.1
-        version: 5.2.2(webpack-cli@6.0.1)(webpack@5.101.0)
 
   ../../workspaces/ballerina/graphql:
     dependencies:
@@ -1488,142 +1332,6 @@ importers:
         specifier: 18.2.0
         version: 18.2.0
 
-  ../../workspaces/ballerina/inline-data-mapper:
-    dependencies:
-      '@emotion/css':
-        specifier: ~11.13.5
-        version: 11.13.5
-      '@emotion/react':
-        specifier: ^11.14.0
-        version: 11.14.0(@types/react@18.2.0)(react@18.2.0)
-      '@emotion/styled':
-        specifier: ^11.14.0
-        version: 11.14.1(@emotion/react@11.14.0(@types/react@18.2.0)(react@18.2.0))(@types/react@18.2.0)(react@18.2.0)
-      '@projectstorm/geometry':
-        specifier: ^6.7.4
-        version: 6.7.4
-      '@projectstorm/react-canvas-core':
-        specifier: ^6.7.4
-        version: 6.7.4(lodash@4.17.21)(react@18.2.0)
-      '@projectstorm/react-diagrams':
-        specifier: ^6.7.4
-        version: 6.7.4(@emotion/react@11.14.0(@types/react@18.2.0)(react@18.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@18.2.0)(react@18.2.0))(@types/react@18.2.0)(react@18.2.0))(dagre@0.8.5)(lodash@4.17.21)(pathfinding@0.4.18)(paths-js@0.4.11)(react@18.2.0)(resize-observer-polyfill@1.5.1)
-      '@projectstorm/react-diagrams-core':
-        specifier: ^6.7.4
-        version: 6.7.4(lodash@4.17.21)(react@18.2.0)(resize-observer-polyfill@1.5.1)
-      '@tanstack/query-core':
-        specifier: ^5.77.1
-        version: 5.83.0
-      '@tanstack/react-query':
-        specifier: 5.77.1
-        version: 5.77.1(react@18.2.0)
-      '@types/mousetrap':
-        specifier: ~1.6.15
-        version: 1.6.15
-      '@vscode/webview-ui-toolkit':
-        specifier: ^1.2.0
-        version: 1.4.0(react@18.2.0)
-      '@wso2/ballerina-core':
-        specifier: workspace:*
-        version: link:../ballerina-core
-      '@wso2/ballerina-rpc-client':
-        specifier: workspace:*
-        version: link:../ballerina-rpc-client
-      '@wso2/ui-toolkit':
-        specifier: workspace:*
-        version: link:../../common-libs/ui-toolkit
-      blueimp-md5:
-        specifier: ^2.19.0
-        version: 2.19.0
-      classnames:
-        specifier: ^2.2.6
-        version: 2.5.1
-      lodash:
-        specifier: ^4.17.11
-        version: 4.17.21
-      lodash.debounce:
-        specifier: ^4.0.8
-        version: 4.0.8
-      mousetrap:
-        specifier: ^1.6.5
-        version: 1.6.5
-      react:
-        specifier: ^18.2.0
-        version: 18.2.0
-      react-dom:
-        specifier: ^18.2.0
-        version: 18.2.0(react@18.2.0)
-      resize-observer-polyfill:
-        specifier: ^1.5.1
-        version: 1.5.1
-      vscode-languageserver-types:
-        specifier: ^3.17.5
-        version: 3.17.5
-      zustand:
-        specifier: ^5.0.4
-        version: 5.0.6(@types/react@18.2.0)(react@18.2.0)(use-sync-external-store@1.5.0(react@18.2.0))
-    devDependencies:
-      '@types/blueimp-md5':
-        specifier: ^2.18.2
-        version: 2.18.2
-      '@types/lodash':
-        specifier: 4.17.16
-        version: 4.17.16
-      '@types/lodash.debounce':
-        specifier: ^4.0.6
-        version: 4.0.9
-      '@types/react':
-        specifier: ^18.2.0
-        version: 18.2.0
-      '@types/react-dom':
-        specifier: 17.0.26
-        version: 17.0.26(@types/react@18.2.0)
-      '@typescript-eslint/eslint-plugin':
-        specifier: ~8.32.1
-        version: 8.32.1(@typescript-eslint/parser@8.32.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3))(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
-      '@typescript-eslint/parser':
-        specifier: ~8.32.1
-        version: 8.32.1(eslint@9.27.0(jiti@2.5.1))(typescript@5.8.3)
-      copyfiles:
-        specifier: ^2.4.1
-        version: 2.4.1
-      css-loader:
-        specifier: ^7.1.2
-        version: 7.1.2(webpack@5.101.0)
-      eslint:
-        specifier: ^9.26.0
-        version: 9.27.0(jiti@2.5.1)
-      eslint-plugin-react-hooks:
-        specifier: ^5.2.0
-        version: 5.2.0(eslint@9.27.0(jiti@2.5.1))
-      eslint-plugin-react-refresh:
-        specifier: ^0.4.4
-        version: 0.4.20(eslint@9.27.0(jiti@2.5.1))
-      file-loader:
-        specifier: ^6.2.0
-        version: 6.2.0(webpack@5.101.0)
-      react-hook-form:
-        specifier: ~7.56.3
-        version: 7.56.4(react@18.2.0)
-      ts-loader:
-        specifier: ^9.5.2
-        version: 9.5.2(typescript@5.8.3)(webpack@5.101.0)
-      tslib:
-        specifier: ^2.8.1
-        version: 2.8.1
-      tslint:
-        specifier: ^6.1.3
-        version: 6.1.3(typescript@5.8.3)
-      tslint-react:
-        specifier: ^5.0.0
-        version: 5.0.0(tslint@6.1.3(typescript@5.8.3))(typescript@5.8.3)
-      tslint-react-hooks:
-        specifier: ^2.2.2
-        version: 2.2.2(tslint@6.1.3(typescript@5.8.3))(typescript@5.8.3)
-      typescript:
-        specifier: ^5.8.3
-        version: 5.8.3
-
   ../../workspaces/ballerina/overview-view:
     dependencies:
       '@emotion/react':
@@ -1871,7 +1579,7 @@ importers:
         version: 9.26.0(jiti@2.5.1)
       react-scripts-ts:
         specifier: 3.1.0
-        version: 3.1.0(babel-core@7.0.0-bridge.0(@babel/core@7.28.0))(babel-runtime@6.26.0)(typescript@5.8.3)
+        version: 3.1.0(babel-core@7.0.0-bridge.0(@babel/core@7.27.7))(babel-runtime@6.26.0)(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1926,7 +1634,7 @@ importers:
     devDependencies:
       '@storybook/react':
         specifier: ^6.3.7
-        version: 6.5.16(@babel/core@7.28.0)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.26.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(require-from-string@2.0.2)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)
+        version: 6.5.16(@babel/core@7.27.7)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.26.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(require-from-string@2.0.2)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)
       '@types/dagre':
         specifier: ~0.7.52
         version: 0.7.53
@@ -2026,7 +1734,7 @@ importers:
     devDependencies:
       '@storybook/react':
         specifier: ^6.5.9
-        version: 6.5.16(@babel/core@7.28.0)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(require-from-string@2.0.2)(type-fest@4.41.0)(typescript@4.9.5)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)
+        version: 6.5.16(@babel/core@7.27.7)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(require-from-string@2.0.2)(type-fest@4.41.0)(typescript@4.9.5)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)
       '@types/classnames':
         specifier: ^2.2.9
         version: 2.3.4
@@ -2292,7 +2000,7 @@ importers:
         version: 9.26.0(jiti@2.5.1)
       react-scripts-ts:
         specifier: 3.1.0
-        version: 3.1.0(babel-core@7.0.0-bridge.0(@babel/core@7.28.0))(babel-runtime@6.26.0)(typescript@5.8.3)
+        version: 3.1.0(babel-core@7.0.0-bridge.0(@babel/core@7.27.7))(babel-runtime@6.26.0)(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -2781,7 +2489,7 @@ importers:
         version: 7.4.6(encoding@0.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.8.3)
       '@storybook/react-webpack5':
         specifier: ~7.4.0
-        version: 7.4.6(@babel/core@7.28.0)(@swc/helpers@0.5.17)(@types/react-dom@18.2.0)(@types/react@18.2.0)(@types/webpack@5.28.5)(encoding@0.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)
+        version: 7.4.6(@babel/core@7.27.7)(@swc/helpers@0.5.17)(@types/react-dom@18.2.0)(@types/react@18.2.0)(@types/webpack@5.28.5)(encoding@0.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)
       '@types/react':
         specifier: 18.2.0
         version: 18.2.0
@@ -2875,13 +2583,13 @@ importers:
         version: 8.6.14(@types/react@18.2.0)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.5.3))
       '@storybook/cli':
         specifier: ^9.0.12
-        version: 9.0.18(@babel/preset-env@7.27.2(@babel/core@7.28.0))(@testing-library/dom@10.4.1)(prettier@3.5.3)
+        version: 9.0.18(@babel/preset-env@7.27.2(@babel/core@7.27.7))(@testing-library/dom@10.4.1)(prettier@3.5.3)
       '@storybook/react':
         specifier: ^9.0.12
         version: 9.0.18(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)
       '@storybook/react-vite':
         specifier: ^9.0.12
-        version: 9.0.18(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(rollup@4.46.1)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.35)(jiti@2.5.1)(sass@1.89.2)(terser@5.43.1)(yaml@2.8.0))
+        version: 9.0.18(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(rollup@4.46.1)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)
       '@types/lodash':
         specifier: ~4.17.16
         version: 4.17.17
@@ -2978,7 +2686,7 @@ importers:
     devDependencies:
       '@storybook/react':
         specifier: ^6.3.7
-        version: 6.5.16(@babel/core@7.28.0)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(require-from-string@2.0.2)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)
+        version: 6.5.16(@babel/core@7.27.7)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(require-from-string@2.0.2)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)
       '@types/dagre':
         specifier: ~0.7.52
         version: 0.7.53
@@ -3690,7 +3398,7 @@ importers:
         version: 1.52.0
       '@pmmmwh/react-refresh-webpack-plugin':
         specifier: ~0.6.0
-        version: 0.6.1(@types/webpack@5.28.5(webpack-cli@5.1.4))(react-refresh@0.17.0)(type-fest@4.41.0)(webpack-dev-server@5.2.2)(webpack-hot-middleware@2.26.1)(webpack@5.101.0)
+        version: 0.6.1(@types/webpack@5.28.5(webpack-cli@5.1.4))(react-refresh@0.11.0)(type-fest@4.41.0)(webpack-dev-server@5.2.2)(webpack-hot-middleware@2.26.1)(webpack@5.101.0)
       '@tanstack/query-core':
         specifier: ^5.76.0
         version: 5.83.0
@@ -3811,10 +3519,10 @@ importers:
     devDependencies:
       '@babel/plugin-syntax-flow':
         specifier: ~7.27.1
-        version: 7.27.1(@babel/core@7.28.0)
+        version: 7.27.1(@babel/core@7.27.7)
       '@babel/preset-typescript':
         specifier: ~7.27.1
-        version: 7.27.1(@babel/core@7.28.0)
+        version: 7.27.1(@babel/core@7.27.7)
       '@headlessui/react':
         specifier: ~2.2.4
         version: 2.2.6(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -4236,6 +3944,12 @@ packages:
   '@adobe/css-tools@4.4.3':
     resolution: {integrity: sha512-VQKMkwriZbaOgVCby1UDY/LDk5fIjhQicCvVPFqfe+69fWaPWydbWJ3wRt59/YzIwda1I81loas3oCoHxnqvdA==}
 
+  '@ai-sdk/amazon-bedrock@2.2.12':
+    resolution: {integrity: sha512-m8gARnh45pr1s08Uu4J/Pm8913mwJPejPOm59b+kUqMsP9ilhUtH/bp8432Ra/v+vHuMoBrglG2ZvXtctAaH2g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^3.0.0
+
   '@ai-sdk/anthropic@1.2.12':
     resolution: {integrity: sha512-YSzjlko7JvuiyQFmI9RN1tNZdEiZxc+6xld/0tq/VkJaHpEzGAb1yiNxxvmYVcjvfu/PcvCxAAYXmTYQQ63IHQ==}
     engines: {node: '>=18'}
@@ -4507,10 +4221,6 @@ packages:
     resolution: {integrity: sha512-BU2f9tlKQ5CAthiMIgpzAh4eDTLWo1mqi9jqE2OxMG0E/OM199VJt2q8BztTxpnSW0i1ymdwLXRJnYzvDM5r2w==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/core@7.28.0':
-    resolution: {integrity: sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/generator@7.28.0':
     resolution: {integrity: sha512-lJjzvrbEeWrhB4P3QBsH7tey117PjLZnDbLiQEKjQ/fNJTjuq4HSqgFA+UNSwZT8D7dxxbnuSBMsa1lrWzKlQg==}
     engines: {node: '>=6.9.0'}
@@ -5087,18 +4797,6 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-react-jsx-self@7.27.1':
-    resolution: {integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
-  '@babel/plugin-transform-react-jsx-source@7.27.1':
-    resolution: {integrity: sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
   '@babel/plugin-transform-react-jsx@7.27.1':
     resolution: {integrity: sha512-2KH4LWGSrJIkVf5tSiBFYuXDAoWRq2MMwgivCf+93dd0GQi8RXLjKA/0EvRnVV5G0hrHczsquXuD01L8s6dmBw==}
     engines: {node: '>=6.9.0'}
@@ -7039,9 +6737,6 @@ packages:
       selenium-webdriver: '>=4.6.1'
       typescript: '>=4.6.2'
 
-  '@rolldown/pluginutils@1.0.0-beta.27':
-    resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
-
   '@rollup/plugin-babel@5.3.1':
     resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==}
     engines: {node: '>= 10.0.0'}
@@ -9677,12 +9372,6 @@ packages:
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
-  '@vitejs/plugin-react@4.7.0':
-    resolution: {integrity: sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
-
   '@vitest/expect@2.0.5':
     resolution: {integrity: sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==}
 
@@ -10487,6 +10176,9 @@ packages:
   aws4@1.13.2:
     resolution: {integrity: sha512-lHe62zvbTB5eEABUVi/AwVh0ZKY9rMMDhmm+eeyuuUQbQ3+J+fONVQOZyj+DdrvD4BY33uYniyRJ4UJIaSKAfw==}
 
+  aws4fetch@1.0.20:
+    resolution: {integrity: sha512-/djoAN709iY65ETD6LKCtyyEI04XIBP5xVvfmNxsEP0uJB5tyaGBztSryRr4HqMStr9R06PisQE7m9zDTXKu6g==}
+
   axe-core@4.10.3:
     resolution: {integrity: sha512-Xm7bpRXnDSX2YE2YFfBk2FnF0ep6tmG7xPh8iHee8MIcrgq762Nkce856dYtJYLkuIoYZvGfTs/PbZhideTcEg==}
     engines: {node: '>=4'}
@@ -10828,9 +10520,6 @@ packages:
   babel-plugin-transform-strict-mode@6.24.1:
     resolution: {integrity: sha512-j3KtSpjyLSJxNoCDrhwiJad8kw0gJ9REGj8/CqL0HeRyLnvUNYV9zcqluL6QJSXh3nfsLEmSLvwRfGzrgR96Pw==}
 
-  babel-plugin-transform-typescript-metadata@0.3.2:
-    resolution: {integrity: sha512-mWEvCQTgXQf48yDqgN7CH50waTyYBeP2Lpqx4nNWab9sxEpdXVeKgfj1qYI2/TgUPQtNFZ85i3PemRtnXVYYJg==}
-
   babel-preset-current-node-syntax@0.1.4:
     resolution: {integrity: sha512-5/INNCYhUGqw7VbVjT/hb3ucjgkVHKXY7lX3ZjlN4gm565VyFmJUrJ/h+h16ECVB38R/9SF6aACydpKMLZ/c9w==}
     peerDependencies:
@@ -16593,12 +16282,6 @@ packages:
   moment@2.30.1:
     resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==}
 
-  monaco-editor-webpack-plugin@7.1.0:
-    resolution: {integrity: sha512-ZjnGINHN963JQkFqjjcBtn1XBtUATDZBMgNQhDQwd78w2ukRhFXAPNgWuacaQiDZsUr4h1rWv5Mv6eriKuOSzA==}
-    peerDependencies:
-      monaco-editor: '>= 0.31.0'
-      webpack: ^4.5.0 || 5.x
-
   monaco-editor@0.44.0:
     resolution: {integrity: sha512-5SmjNStN6bSuSE5WPT2ZV+iYn1/yI9sd4Igtk23ChvqB7kDk9lZbB9F5frsuvpB+2njdIeGGFf2G4gbE6rCC9Q==}
 
@@ -18463,10 +18146,6 @@ packages:
     resolution: {integrity: sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==}
     engines: {node: '>=0.10.0'}
 
-  react-refresh@0.17.0:
-    resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
-    engines: {node: '>=0.10.0'}
-
   react-remove-scroll-bar@2.3.8:
     resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
     engines: {node: '>=10'}
@@ -18678,9 +18357,6 @@ packages:
   redux@5.0.1:
     resolution: {integrity: sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==}
 
-  reflect-metadata@0.1.14:
-    resolution: {integrity: sha512-ZhYeb6nRaXCfhnndflDK8qI6ZQ/YcWZCISRAWICW9XYqMUwjZM9Z0DveWX/ABN01oxSHwVxKQmxeYZSsm0jh5A==}
-
   reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
@@ -20595,10 +20271,6 @@ packages:
     peerDependencies:
       typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
 
-  tsyringe@4.10.0:
-    resolution: {integrity: sha512-axr3IdNuVIxnaK5XGEUFTu3YmAQ6lllgrvqfEoR16g/HGnYY/6We4oWENtAnzK6/LpJ2ur9PAb80RBt7/U4ugw==}
-    engines: {node: '>= 6.0.0'}
-
   ttf2eot@2.0.0:
     resolution: {integrity: sha512-U56aG2Ylw7psLOmakjemAzmpqVgeadwENg9oaDjaZG5NYX4WB6+7h74bNPcc+0BXsoU5A/XWiHabDXyzFOmsxQ==}
     hasBin: true
@@ -21182,46 +20854,6 @@ packages:
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
-  vite@6.3.5:
-    resolution: {integrity: sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==}
-    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
-      jiti: '>=1.21.0'
-      less: '*'
-      lightningcss: ^1.21.0
-      sass: '*'
-      sass-embedded: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.16.0
-      tsx: ^4.8.1
-      yaml: ^2.4.2
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      jiti:
-        optional: true
-      less:
-        optional: true
-      lightningcss:
-        optional: true
-      sass:
-        optional: true
-      sass-embedded:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-      tsx:
-        optional: true
-      yaml:
-        optional: true
-
   vsce@2.15.0:
     resolution: {integrity: sha512-P8E9LAZvBCQnoGoizw65JfGvyMqNGlHdlUXD1VAuxtvYAaHBKLBdKPnpy60XKVDAkQCfmMu53g+gq9FM+ydepw==}
     engines: {node: '>= 14'}
@@ -21932,21 +21564,6 @@ packages:
   zod@3.25.76:
     resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
 
-  zustand@4.5.7:
-    resolution: {integrity: sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==}
-    engines: {node: '>=12.7.0'}
-    peerDependencies:
-      '@types/react': '>=16.8'
-      immer: '>=9.0.6'
-      react: '>=16.8'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      immer:
-        optional: true
-      react:
-        optional: true
-
   zustand@5.0.6:
     resolution: {integrity: sha512-ihAqNeUVhe0MAD+X8M5UzqyZ9k3FFZLBTtqo6JLPwV53cbRB/mJwBI0PxcIgqhBBHlEs8G45OTDTMq3gNcLq3A==}
     engines: {node: '>=12.20.0'}
@@ -21975,6 +21592,15 @@ snapshots:
 
   '@adobe/css-tools@4.4.3': {}
 
+  '@ai-sdk/amazon-bedrock@2.2.12(zod@3.25.76)':
+    dependencies:
+      '@ai-sdk/provider': 1.1.3
+      '@ai-sdk/provider-utils': 2.2.8(zod@3.25.76)
+      '@smithy/eventstream-codec': 4.0.4
+      '@smithy/util-utf8': 4.0.0
+      aws4fetch: 1.0.20
+      zod: 3.25.76
+
   '@ai-sdk/anthropic@1.2.12(zod@3.25.76)':
     dependencies:
       '@ai-sdk/provider': 1.1.3
@@ -22646,26 +22272,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/core@7.28.0':
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.28.0
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-module-transforms': 7.27.3(@babel/core@7.28.0)
-      '@babel/helpers': 7.28.2
-      '@babel/parser': 7.28.0
-      '@babel/template': 7.27.2
-      '@babel/traverse': 7.28.0
-      '@babel/types': 7.28.2
-      convert-source-map: 2.0.0
-      debug: 4.4.1(supports-color@8.1.1)
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/generator@7.28.0':
     dependencies:
       '@babel/parser': 7.28.0
@@ -22699,19 +22305,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-create-class-features-plugin@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-member-expression-to-functions': 7.27.1
-      '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.0)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/traverse': 7.28.0
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-create-regexp-features-plugin@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -22719,14 +22312,6 @@ snapshots:
       regexpu-core: 6.2.0
       semver: 6.3.1
 
-  '@babel/helper-create-regexp-features-plugin@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      regexpu-core: 6.2.0
-      semver: 6.3.1
-    optional: true
-
   '@babel/helper-define-polyfill-provider@0.0.3(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -22766,18 +22351,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-define-polyfill-provider@0.6.5(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-plugin-utils': 7.27.1
-      debug: 4.4.1(supports-color@8.1.1)
-      lodash.debounce: 4.0.8
-      resolve: 1.22.10
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/helper-globals@7.28.0': {}
 
   '@babel/helper-member-expression-to-functions@7.27.1':
@@ -22812,15 +22385,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.27.3(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
-      '@babel/traverse': 7.28.0
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-optimise-call-expression@7.27.1':
     dependencies:
       '@babel/types': 7.28.2
@@ -22838,16 +22402,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-remap-async-to-generator@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-wrap-function': 7.27.1
-      '@babel/traverse': 7.28.0
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/helper-replace-supers@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -22857,15 +22411,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-replace-supers@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-member-expression-to-functions': 7.27.1
-      '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/traverse': 7.28.0
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
     dependencies:
       '@babel/traverse': 7.28.0
@@ -22904,37 +22449,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/traverse': 7.28.0
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -22944,16 +22468,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/plugin-transform-optional-chaining': 7.27.1(@babel/core@7.28.0)
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -22962,15 +22476,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/traverse': 7.28.0
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23036,11 +22541,6 @@ snapshots:
     dependencies:
       '@babel/core': 7.27.7
 
-  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-    optional: true
-
   '@babel/plugin-proposal-private-property-in-object@7.21.11(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23086,33 +22586,16 @@ snapshots:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-flow@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-
   '@babel/plugin-syntax-import-assertions@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-import-assertions@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-syntax-import-attributes@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-import-attributes@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23133,11 +22616,6 @@ snapshots:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-
   '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23188,35 +22666,17 @@ snapshots:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-
   '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-arrow-functions@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-arrow-functions@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-async-generator-functions@7.28.0(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23226,16 +22686,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-async-generator-functions@7.28.0(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.28.0)
-      '@babel/traverse': 7.28.0
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-transform-async-to-generator@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23245,38 +22695,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-async-to-generator@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.28.0)
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-transform-block-scoped-functions@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-block-scoped-functions@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-block-scoping@7.28.0(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-block-scoping@7.28.0(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-class-properties@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23285,15 +22713,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-class-properties@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-create-class-features-plugin': 7.27.1(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-transform-class-static-block@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23302,15 +22721,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-class-static-block@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-create-class-features-plugin': 7.27.1(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-transform-classes@7.28.0(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23323,32 +22733,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-classes@7.28.0(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-globals': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.0)
-      '@babel/traverse': 7.28.0
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-transform-computed-properties@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/template': 7.27.2
 
-  '@babel/plugin-transform-computed-properties@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/template': 7.27.2
-    optional: true
-
   '@babel/plugin-transform-destructuring@7.28.0(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23357,97 +22747,44 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-destructuring@7.28.0(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/traverse': 7.28.0
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-transform-dotall-regex@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-dotall-regex@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-duplicate-keys@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-duplicate-keys@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-dynamic-import@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-dynamic-import@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-exponentiation-operator@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-exponentiation-operator@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-export-namespace-from@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-export-namespace-from@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-flow-strip-types@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
       '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.27.7)
 
-  '@babel/plugin-transform-flow-strip-types@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.28.0)
-
   '@babel/plugin-transform-for-of@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23456,15 +22793,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-for-of@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-transform-function-name@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23474,60 +22802,26 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-function-name@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/traverse': 7.28.0
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-transform-json-strings@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-json-strings@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-literals@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-literals@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-logical-assignment-operators@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-logical-assignment-operators@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-member-expression-literals@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-member-expression-literals@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-modules-amd@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23536,15 +22830,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-amd@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-module-transforms': 7.27.3(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23553,14 +22838,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-module-transforms': 7.27.3(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-modules-systemjs@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23571,17 +22848,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-systemjs@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-module-transforms': 7.27.3(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
-      '@babel/traverse': 7.28.0
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-transform-modules-umd@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23590,61 +22856,27 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-umd@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-module-transforms': 7.27.3(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-transform-named-capturing-groups-regex@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-named-capturing-groups-regex@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-new-target@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-new-target@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-nullish-coalescing-operator@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-nullish-coalescing-operator@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-numeric-separator@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-numeric-separator@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-object-rest-spread@7.28.0(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23656,18 +22888,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-object-rest-spread@7.28.0(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/plugin-transform-destructuring': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.0)
-      '@babel/traverse': 7.28.0
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-transform-object-super@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23676,26 +22896,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-object-super@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-replace-supers': 7.27.1(@babel/core@7.28.0)
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-transform-optional-catch-binding@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-optional-catch-binding@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-optional-chaining@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23704,15 +22909,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-optional-chaining@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-transform-parameters@7.27.7(@babel/core@7.12.9)':
     dependencies:
       '@babel/core': 7.12.9
@@ -23723,12 +22919,6 @@ snapshots:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-parameters@7.27.7(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-private-methods@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23737,15 +22927,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-private-methods@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-create-class-features-plugin': 7.27.1(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-transform-private-property-in-object@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23755,37 +22936,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-private-property-in-object@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-create-class-features-plugin': 7.27.1(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-transform-property-literals@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-property-literals@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-react-display-name@7.28.0(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-react-display-name@7.28.0(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-
   '@babel/plugin-transform-react-jsx-development@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23793,23 +22953,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-react-jsx-development@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.28.0)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-
-  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-
   '@babel/plugin-transform-react-jsx@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23821,75 +22964,33 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-react-jsx@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.0)
-      '@babel/types': 7.28.2
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-react-pure-annotations@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-annotate-as-pure': 7.27.3
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-react-pure-annotations@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-plugin-utils': 7.27.1
-
   '@babel/plugin-transform-regenerator@7.28.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-regenerator@7.28.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-regexp-modifiers@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-regexp-modifiers@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-reserved-words@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-reserved-words@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-shorthand-properties@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-shorthand-properties@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-spread@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23898,48 +22999,21 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-spread@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/plugin-transform-sticky-regex@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-sticky-regex@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-template-literals@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-template-literals@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-typeof-symbol@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-typeof-symbol@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-typescript@7.28.0(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -23951,67 +23025,29 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-typescript@7.28.0(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-create-class-features-plugin': 7.27.1(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.0)
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-unicode-escapes@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-unicode-escapes@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-unicode-property-regex@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-unicode-property-regex@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-unicode-regex@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-unicode-regex@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/plugin-transform-unicode-sets-regex@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
       '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.27.7)
       '@babel/helper-plugin-utils': 7.27.1
 
-  '@babel/plugin-transform-unicode-sets-regex@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-create-regexp-features-plugin': 7.27.1(@babel/core@7.28.0)
-      '@babel/helper-plugin-utils': 7.27.1
-    optional: true
-
   '@babel/preset-env@7.27.2(@babel/core@7.27.7)':
     dependencies:
       '@babel/compat-data': 7.28.0
@@ -24087,82 +23123,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/preset-env@7.27.2(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/compat-data': 7.28.0
-      '@babel/core': 7.28.0
-      '@babel/helper-compilation-targets': 7.27.2
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-validator-option': 7.27.1
-      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.28.0)
-      '@babel/plugin-syntax-import-assertions': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-syntax-import-attributes': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.28.0)
-      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-async-generator-functions': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-async-to-generator': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-block-scoped-functions': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-block-scoping': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-class-static-block': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-classes': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-computed-properties': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-destructuring': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-dotall-regex': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-duplicate-keys': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-dynamic-import': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-exponentiation-operator': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-export-namespace-from': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-function-name': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-json-strings': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-literals': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-logical-assignment-operators': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-member-expression-literals': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-modules-amd': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-modules-systemjs': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-modules-umd': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-named-capturing-groups-regex': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-new-target': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-numeric-separator': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-object-rest-spread': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-object-super': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-optional-catch-binding': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-optional-chaining': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.28.0)
-      '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-private-property-in-object': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-property-literals': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-regenerator': 7.28.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-regexp-modifiers': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-reserved-words': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-spread': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-sticky-regex': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-typeof-symbol': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-unicode-escapes': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-unicode-property-regex': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-unicode-sets-regex': 7.27.1(@babel/core@7.28.0)
-      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.28.0)
-      babel-plugin-polyfill-corejs2: 0.4.14(@babel/core@7.28.0)
-      babel-plugin-polyfill-corejs3: 0.11.1(@babel/core@7.28.0)
-      babel-plugin-polyfill-regenerator: 0.6.5(@babel/core@7.28.0)
-      core-js-compat: 3.44.0
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   '@babel/preset-flow@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -24170,13 +23130,6 @@ snapshots:
       '@babel/helper-validator-option': 7.27.1
       '@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.27.7)
 
-  '@babel/preset-flow@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-validator-option': 7.27.1
-      '@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.28.0)
-
   '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -24184,14 +23137,6 @@ snapshots:
       '@babel/types': 7.28.2
       esutils: 2.0.3
 
-  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/types': 7.28.2
-      esutils: 2.0.3
-    optional: true
-
   '@babel/preset-react@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -24204,18 +23149,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/preset-react@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-validator-option': 7.27.1
-      '@babel/plugin-transform-react-display-name': 7.28.0(@babel/core@7.28.0)
-      '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-react-jsx-development': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-react-pure-annotations': 7.27.1(@babel/core@7.28.0)
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/preset-typescript@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -24227,17 +23160,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/preset-typescript@7.27.1(@babel/core@7.28.0)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-plugin-utils': 7.27.1
-      '@babel/helper-validator-option': 7.27.1
-      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-typescript': 7.28.0(@babel/core@7.28.0)
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/register@7.27.1(@babel/core@7.27.7)':
     dependencies:
       '@babel/core': 7.27.7
@@ -25313,12 +24235,11 @@ snapshots:
       '@types/yargs': 17.0.33
       chalk: 4.1.2
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.6.1(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.35)(jiti@2.5.1)(sass@1.89.2)(terser@5.43.1)(yaml@2.8.0))':
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.6.1(typescript@5.8.3)':
     dependencies:
       glob: 10.4.5
       magic-string: 0.30.17
       react-docgen-typescript: 2.4.0(typescript@5.8.3)
-      vite: 6.3.5(@types/node@22.15.35)(jiti@2.5.1)(sass@1.89.2)(terser@5.43.1)(yaml@2.8.0)
     optionalDependencies:
       typescript: 5.8.3
 
@@ -25776,13 +24697,13 @@ snapshots:
       webpack-dev-server: 5.2.2(webpack@5.101.0)
       webpack-hot-middleware: 2.26.1
 
-  '@pmmmwh/react-refresh-webpack-plugin@0.6.1(@types/webpack@5.28.5(webpack-cli@5.1.4))(react-refresh@0.17.0)(type-fest@4.41.0)(webpack-dev-server@5.2.2)(webpack-hot-middleware@2.26.1)(webpack@5.101.0)':
+  '@pmmmwh/react-refresh-webpack-plugin@0.6.1(@types/webpack@5.28.5(webpack-cli@5.1.4))(react-refresh@0.11.0)(type-fest@4.41.0)(webpack-dev-server@5.2.2)(webpack-hot-middleware@2.26.1)(webpack@5.101.0)':
     dependencies:
       anser: 2.3.2
       core-js-pure: 3.44.0
       error-stack-parser: 2.1.4
       html-entities: 2.6.0
-      react-refresh: 0.17.0
+      react-refresh: 0.11.0
       schema-utils: 4.3.2
       source-map: 0.7.6
       webpack: 5.101.0(webpack-cli@5.1.4)
@@ -26728,8 +25649,6 @@ snapshots:
       type-fest: 4.41.0
       typescript: 5.8.3
 
-  '@rolldown/pluginutils@1.0.0-beta.27': {}
-
   '@rollup/plugin-babel@5.3.1(@babel/core@7.27.7)(@types/babel__core@7.20.5)(rollup@1.32.1)':
     dependencies:
       '@babel/core': 7.27.7
@@ -28266,12 +27185,11 @@ snapshots:
       - encoding
       - supports-color
 
-  '@storybook/builder-vite@9.0.18(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.5.3))(vite@6.3.5(@types/node@22.15.35)(jiti@2.5.1)(sass@1.89.2)(terser@5.43.1)(yaml@2.8.0))':
+  '@storybook/builder-vite@9.0.18(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.5.3))':
     dependencies:
       '@storybook/csf-plugin': 9.0.18(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.5.3))
       storybook: 9.0.18(@testing-library/dom@10.4.1)(prettier@3.5.3)
       ts-dedent: 2.2.0
-      vite: 6.3.5(@types/node@22.15.35)(jiti@2.5.1)(sass@1.89.2)(terser@5.43.1)(yaml@2.8.0)
 
   '@storybook/builder-webpack4@6.5.16(eslint@9.26.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)':
     dependencies:
@@ -28788,42 +27706,6 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@storybook/builder-webpack5@8.6.14(storybook@8.6.14(prettier@3.5.3))(typescript@5.8.3)(webpack-cli@6.0.1)':
-    dependencies:
-      '@storybook/core-webpack': 8.6.14(storybook@8.6.14(prettier@3.5.3))
-      '@types/semver': 7.7.0
-      browser-assert: 1.2.1
-      case-sensitive-paths-webpack-plugin: 2.4.0
-      cjs-module-lexer: 1.4.3
-      constants-browserify: 1.0.0
-      css-loader: 6.11.0(webpack@5.101.0)
-      es-module-lexer: 1.7.0
-      fork-ts-checker-webpack-plugin: 8.0.0(typescript@5.8.3)(webpack@5.101.0)
-      html-webpack-plugin: 5.6.3(webpack@5.101.0)
-      magic-string: 0.30.17
-      path-browserify: 1.0.1
-      process: 0.11.10
-      semver: 7.7.2
-      storybook: 8.6.14(prettier@3.5.3)
-      style-loader: 3.3.4(webpack@5.101.0)
-      terser-webpack-plugin: 5.3.14(webpack@5.101.0)
-      ts-dedent: 2.2.0
-      url: 0.11.4
-      util: 0.12.5
-      util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@6.0.1)
-      webpack-dev-middleware: 6.1.3(webpack@5.101.0)
-      webpack-hot-middleware: 2.26.1
-      webpack-virtual-modules: 0.6.2
-    optionalDependencies:
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - '@rspack/core'
-      - '@swc/core'
-      - esbuild
-      - uglify-js
-      - webpack-cli
-
   '@storybook/builder-webpack5@8.6.14(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)(webpack-cli@5.1.4)':
     dependencies:
       '@storybook/core-webpack': 8.6.14(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.5.3))
@@ -28950,14 +27832,14 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@storybook/cli@9.0.18(@babel/preset-env@7.27.2(@babel/core@7.28.0))(@testing-library/dom@10.4.1)(prettier@3.5.3)':
+  '@storybook/cli@9.0.18(@babel/preset-env@7.27.2(@babel/core@7.27.7))(@testing-library/dom@10.4.1)(prettier@3.5.3)':
     dependencies:
-      '@storybook/codemod': 9.0.18(@babel/preset-env@7.27.2(@babel/core@7.28.0))(@testing-library/dom@10.4.1)
+      '@storybook/codemod': 9.0.18(@babel/preset-env@7.27.2(@babel/core@7.27.7))(@testing-library/dom@10.4.1)
       '@types/semver': 7.7.0
       commander: 12.1.0
       create-storybook: 9.0.18
       giget: 1.2.5
-      jscodeshift: 0.15.2(@babel/preset-env@7.27.2(@babel/core@7.28.0))
+      jscodeshift: 0.15.2(@babel/preset-env@7.27.2(@babel/core@7.27.7))
       storybook: 9.0.18(@testing-library/dom@10.4.1)(prettier@3.5.3)
       ts-dedent: 2.2.0
     transitivePeerDependencies:
@@ -29055,13 +27937,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@storybook/codemod@9.0.18(@babel/preset-env@7.27.2(@babel/core@7.28.0))(@testing-library/dom@10.4.1)':
+  '@storybook/codemod@9.0.18(@babel/preset-env@7.27.2(@babel/core@7.27.7))(@testing-library/dom@10.4.1)':
     dependencies:
       '@types/cross-spawn': 6.0.6
       cross-spawn: 7.0.6
       es-toolkit: 1.39.8
       globby: 14.1.0
-      jscodeshift: 0.15.2(@babel/preset-env@7.27.2(@babel/core@7.28.0))
+      jscodeshift: 0.15.2(@babel/preset-env@7.27.2(@babel/core@7.27.7))
       prettier: 3.5.3
       storybook: 9.0.18(@testing-library/dom@10.4.1)(prettier@3.5.3)
       tiny-invariant: 1.3.3
@@ -30672,10 +29554,10 @@ snapshots:
 
   '@storybook/postinstall@7.4.6': {}
 
-  '@storybook/preset-react-webpack@7.4.6(@babel/core@7.28.0)(@types/webpack@5.28.5)(encoding@0.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)':
+  '@storybook/preset-react-webpack@7.4.6(@babel/core@7.27.7)(@types/webpack@5.28.5)(encoding@0.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)':
     dependencies:
-      '@babel/preset-flow': 7.27.1(@babel/core@7.28.0)
-      '@babel/preset-react': 7.27.1(@babel/core@7.28.0)
+      '@babel/preset-flow': 7.27.1(@babel/core@7.27.7)
+      '@babel/preset-react': 7.27.1(@babel/core@7.27.7)
       '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@5.28.5)(react-refresh@0.11.0)(type-fest@4.41.0)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)(webpack@5.101.0)
       '@storybook/core-webpack': 7.4.6(encoding@0.1.13)
       '@storybook/docs-tools': 7.4.6(encoding@0.1.13)
@@ -30693,7 +29575,7 @@ snapshots:
       semver: 7.7.2
       webpack: 5.101.0(webpack-cli@5.1.4)
     optionalDependencies:
-      '@babel/core': 7.28.0
+      '@babel/core': 7.27.7
       typescript: 5.8.3
     transitivePeerDependencies:
       - '@swc/core'
@@ -30924,11 +29806,11 @@ snapshots:
       react-dom: 19.1.0(react@19.1.0)
       storybook: 9.0.18(@testing-library/dom@10.4.1)(prettier@3.5.3)
 
-  '@storybook/react-vite@9.0.18(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(rollup@4.46.1)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.35)(jiti@2.5.1)(sass@1.89.2)(terser@5.43.1)(yaml@2.8.0))':
+  '@storybook/react-vite@9.0.18(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(rollup@4.46.1)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.6.1(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.35)(jiti@2.5.1)(sass@1.89.2)(terser@5.43.1)(yaml@2.8.0))
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.6.1(typescript@5.8.3)
       '@rollup/pluginutils': 5.2.0(rollup@4.46.1)
-      '@storybook/builder-vite': 9.0.18(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.5.3))(vite@6.3.5(@types/node@22.15.35)(jiti@2.5.1)(sass@1.89.2)(terser@5.43.1)(yaml@2.8.0))
+      '@storybook/builder-vite': 9.0.18(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.5.3))
       '@storybook/react': 9.0.18(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.5.3))(typescript@5.8.3)
       find-up: 7.0.0
       magic-string: 0.30.17
@@ -30938,22 +29820,21 @@ snapshots:
       resolve: 1.22.10
       storybook: 9.0.18(@testing-library/dom@10.4.1)(prettier@3.5.3)
       tsconfig-paths: 4.2.0
-      vite: 6.3.5(@types/node@22.15.35)(jiti@2.5.1)(sass@1.89.2)(terser@5.43.1)(yaml@2.8.0)
     transitivePeerDependencies:
       - rollup
       - supports-color
       - typescript
 
-  '@storybook/react-webpack5@7.4.6(@babel/core@7.28.0)(@swc/helpers@0.5.17)(@types/react-dom@18.2.0)(@types/react@18.2.0)(@types/webpack@5.28.5)(encoding@0.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)':
+  '@storybook/react-webpack5@7.4.6(@babel/core@7.27.7)(@swc/helpers@0.5.17)(@types/react-dom@18.2.0)(@types/react@18.2.0)(@types/webpack@5.28.5)(encoding@0.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)':
     dependencies:
       '@storybook/builder-webpack5': 7.4.6(@swc/helpers@0.5.17)(@types/react-dom@18.2.0)(@types/react@18.2.0)(encoding@0.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.8.3)
-      '@storybook/preset-react-webpack': 7.4.6(@babel/core@7.28.0)(@types/webpack@5.28.5)(encoding@0.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)
+      '@storybook/preset-react-webpack': 7.4.6(@babel/core@7.27.7)(@types/webpack@5.28.5)(encoding@0.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)
       '@storybook/react': 7.4.6(encoding@0.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.8.3)
       '@types/node': 16.18.126
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
     optionalDependencies:
-      '@babel/core': 7.28.0
+      '@babel/core': 7.27.7
       typescript: 5.8.3
     transitivePeerDependencies:
       - '@rspack/core'
@@ -31050,11 +29931,199 @@ snapshots:
       require-from-string: 2.0.2
       ts-dedent: 2.2.0
       util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@4.10.0)
+      webpack: 5.101.0(webpack-cli@4.10.0)
+    optionalDependencies:
+      '@babel/core': 7.27.7
+      '@storybook/builder-webpack5': 6.5.16(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
+      '@storybook/manager-webpack5': 6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - '@storybook/mdx2-csf'
+      - '@swc/core'
+      - '@types/webpack'
+      - bufferutil
+      - encoding
+      - esbuild
+      - eslint
+      - sockjs-client
+      - supports-color
+      - type-fest
+      - uglify-js
+      - utf-8-validate
+      - vue-template-compiler
+      - webpack-cli
+      - webpack-dev-server
+      - webpack-hot-middleware
+      - webpack-plugin-serve
+
+  '@storybook/react@6.5.16(@babel/core@7.27.7)(@storybook/builder-webpack5@6.5.16(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1))(@storybook/manager-webpack5@6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1))(@types/webpack@5.28.5(webpack-cli@6.0.1))(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(require-from-string@2.0.2)(type-fest@4.41.0)(typescript@5.8.3)(webpack-cli@6.0.1)(webpack-dev-server@5.2.2)(webpack-hot-middleware@2.26.1)':
+    dependencies:
+      '@babel/preset-flow': 7.27.1(@babel/core@7.27.7)
+      '@babel/preset-react': 7.27.1(@babel/core@7.27.7)
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@5.28.5(webpack-cli@6.0.1))(react-refresh@0.11.0)(type-fest@4.41.0)(webpack-dev-server@5.2.2)(webpack-hot-middleware@2.26.1)(webpack@5.101.0)
+      '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/client-logger': 6.5.16
+      '@storybook/core': 6.5.16(@storybook/builder-webpack5@6.5.16(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1))(@storybook/manager-webpack5@6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1))(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)(webpack@5.101.0)
+      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/docs-tools': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/node-logger': 6.5.16
+      '@storybook/react-docgen-typescript-plugin': 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0(typescript@5.8.3)(webpack@5.101.0)
+      '@storybook/semver': 7.3.2
+      '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@types/estree': 0.0.51
+      '@types/node': 16.18.126
+      '@types/webpack-env': 1.18.8
+      acorn: 7.4.1
+      acorn-jsx: 5.3.2(acorn@7.4.1)
+      acorn-walk: 7.2.0
+      babel-plugin-add-react-displayname: 0.0.5
+      babel-plugin-react-docgen: 4.2.1
+      core-js: 3.44.0
+      escodegen: 2.1.0
+      fs-extra: 9.1.0
+      global: 4.4.0
+      html-tags: 3.3.1
+      lodash: 4.17.21
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-element-to-jsx-string: 14.3.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react-refresh: 0.11.0
+      read-pkg-up: 7.0.1
+      regenerator-runtime: 0.13.11
+      require-from-string: 2.0.2
+      ts-dedent: 2.2.0
+      util-deprecate: 1.0.2
+      webpack: 5.101.0(webpack-cli@6.0.1)
+    optionalDependencies:
+      '@babel/core': 7.27.7
+      '@storybook/builder-webpack5': 6.5.16(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
+      '@storybook/manager-webpack5': 6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - '@storybook/mdx2-csf'
+      - '@swc/core'
+      - '@types/webpack'
+      - bufferutil
+      - encoding
+      - esbuild
+      - eslint
+      - sockjs-client
+      - supports-color
+      - type-fest
+      - uglify-js
+      - utf-8-validate
+      - vue-template-compiler
+      - webpack-cli
+      - webpack-dev-server
+      - webpack-hot-middleware
+      - webpack-plugin-serve
+
+  '@storybook/react@6.5.16(@babel/core@7.27.7)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.26.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(require-from-string@2.0.2)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)':
+    dependencies:
+      '@babel/preset-flow': 7.27.1(@babel/core@7.27.7)
+      '@babel/preset-react': 7.27.1(@babel/core@7.27.7)
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@5.28.5)(react-refresh@0.11.0)(type-fest@4.41.0)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)(webpack@5.101.0)
+      '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/client-logger': 6.5.16
+      '@storybook/core': 6.5.16(encoding@0.1.13)(eslint@9.26.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.101.0)
+      '@storybook/core-common': 6.5.16(eslint@9.26.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/docs-tools': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/node-logger': 6.5.16
+      '@storybook/react-docgen-typescript-plugin': 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0(typescript@5.8.3)(webpack@5.101.0)
+      '@storybook/semver': 7.3.2
+      '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@types/estree': 0.0.51
+      '@types/node': 16.18.126
+      '@types/webpack-env': 1.18.8
+      acorn: 7.4.1
+      acorn-jsx: 5.3.2(acorn@7.4.1)
+      acorn-walk: 7.2.0
+      babel-plugin-add-react-displayname: 0.0.5
+      babel-plugin-react-docgen: 4.2.1
+      core-js: 3.44.0
+      escodegen: 2.1.0
+      fs-extra: 9.1.0
+      global: 4.4.0
+      html-tags: 3.3.1
+      lodash: 4.17.21
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-element-to-jsx-string: 14.3.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react-refresh: 0.11.0
+      read-pkg-up: 7.0.1
+      regenerator-runtime: 0.13.11
+      require-from-string: 2.0.2
+      ts-dedent: 2.2.0
+      util-deprecate: 1.0.2
+      webpack: 5.101.0(webpack-cli@5.1.4)
+    optionalDependencies:
+      '@babel/core': 7.27.7
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - '@storybook/mdx2-csf'
+      - '@swc/core'
+      - '@types/webpack'
+      - bufferutil
+      - encoding
+      - esbuild
+      - eslint
+      - sockjs-client
+      - supports-color
+      - type-fest
+      - uglify-js
+      - utf-8-validate
+      - vue-template-compiler
+      - webpack-cli
+      - webpack-dev-server
+      - webpack-hot-middleware
+      - webpack-plugin-serve
+
+  '@storybook/react@6.5.16(@babel/core@7.27.7)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(require-from-string@2.0.2)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)':
+    dependencies:
+      '@babel/preset-flow': 7.27.1(@babel/core@7.27.7)
+      '@babel/preset-react': 7.27.1(@babel/core@7.27.7)
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@5.28.5)(react-refresh@0.11.0)(type-fest@4.41.0)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)(webpack@5.101.0)
+      '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/client-logger': 6.5.16
+      '@storybook/core': 6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.101.0)
+      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
+      '@storybook/csf': 0.0.2--canary.4566f4d.1
+      '@storybook/docs-tools': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@storybook/node-logger': 6.5.16
+      '@storybook/react-docgen-typescript-plugin': 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0(typescript@5.8.3)(webpack@5.101.0)
+      '@storybook/semver': 7.3.2
+      '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      '@types/estree': 0.0.51
+      '@types/node': 16.18.126
+      '@types/webpack-env': 1.18.8
+      acorn: 7.4.1
+      acorn-jsx: 5.3.2(acorn@7.4.1)
+      acorn-walk: 7.2.0
+      babel-plugin-add-react-displayname: 0.0.5
+      babel-plugin-react-docgen: 4.2.1
+      core-js: 3.44.0
+      escodegen: 2.1.0
+      fs-extra: 9.1.0
+      global: 4.4.0
+      html-tags: 3.3.1
+      lodash: 4.17.21
+      prop-types: 15.8.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-element-to-jsx-string: 14.3.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
+      react-refresh: 0.11.0
+      read-pkg-up: 7.0.1
+      regenerator-runtime: 0.13.11
+      require-from-string: 2.0.2
+      ts-dedent: 2.2.0
+      util-deprecate: 1.0.2
+      webpack: 5.101.0(webpack-cli@5.1.4)
     optionalDependencies:
       '@babel/core': 7.27.7
-      '@storybook/builder-webpack5': 6.5.16(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
-      '@storybook/manager-webpack5': 6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@4.10.0)
       typescript: 5.8.3
     transitivePeerDependencies:
       - '@storybook/mdx2-csf'
@@ -31075,198 +30144,10 @@ snapshots:
       - webpack-hot-middleware
       - webpack-plugin-serve
 
-  '@storybook/react@6.5.16(@babel/core@7.27.7)(@storybook/builder-webpack5@6.5.16(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1))(@storybook/manager-webpack5@6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1))(@types/webpack@5.28.5(webpack-cli@6.0.1))(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(require-from-string@2.0.2)(type-fest@4.41.0)(typescript@5.8.3)(webpack-cli@6.0.1)(webpack-dev-server@5.2.2)(webpack-hot-middleware@2.26.1)':
+  '@storybook/react@6.5.16(@babel/core@7.27.7)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(require-from-string@2.0.2)(type-fest@4.41.0)(typescript@4.9.5)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)':
     dependencies:
       '@babel/preset-flow': 7.27.1(@babel/core@7.27.7)
       '@babel/preset-react': 7.27.1(@babel/core@7.27.7)
-      '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@5.28.5(webpack-cli@6.0.1))(react-refresh@0.11.0)(type-fest@4.41.0)(webpack-dev-server@5.2.2)(webpack-hot-middleware@2.26.1)(webpack@5.101.0)
-      '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/client-logger': 6.5.16
-      '@storybook/core': 6.5.16(@storybook/builder-webpack5@6.5.16(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1))(@storybook/manager-webpack5@6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1))(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)(webpack@5.101.0)
-      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
-      '@storybook/csf': 0.0.2--canary.4566f4d.1
-      '@storybook/docs-tools': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/node-logger': 6.5.16
-      '@storybook/react-docgen-typescript-plugin': 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0(typescript@5.8.3)(webpack@5.101.0)
-      '@storybook/semver': 7.3.2
-      '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@types/estree': 0.0.51
-      '@types/node': 16.18.126
-      '@types/webpack-env': 1.18.8
-      acorn: 7.4.1
-      acorn-jsx: 5.3.2(acorn@7.4.1)
-      acorn-walk: 7.2.0
-      babel-plugin-add-react-displayname: 0.0.5
-      babel-plugin-react-docgen: 4.2.1
-      core-js: 3.44.0
-      escodegen: 2.1.0
-      fs-extra: 9.1.0
-      global: 4.4.0
-      html-tags: 3.3.1
-      lodash: 4.17.21
-      prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-element-to-jsx-string: 14.3.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react-refresh: 0.11.0
-      read-pkg-up: 7.0.1
-      regenerator-runtime: 0.13.11
-      require-from-string: 2.0.2
-      ts-dedent: 2.2.0
-      util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@6.0.1)
-    optionalDependencies:
-      '@babel/core': 7.27.7
-      '@storybook/builder-webpack5': 6.5.16(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
-      '@storybook/manager-webpack5': 6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack-cli@6.0.1)
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - '@storybook/mdx2-csf'
-      - '@swc/core'
-      - '@types/webpack'
-      - bufferutil
-      - encoding
-      - esbuild
-      - eslint
-      - sockjs-client
-      - supports-color
-      - type-fest
-      - uglify-js
-      - utf-8-validate
-      - vue-template-compiler
-      - webpack-cli
-      - webpack-dev-server
-      - webpack-hot-middleware
-      - webpack-plugin-serve
-
-  '@storybook/react@6.5.16(@babel/core@7.28.0)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.26.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(require-from-string@2.0.2)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)':
-    dependencies:
-      '@babel/preset-flow': 7.27.1(@babel/core@7.28.0)
-      '@babel/preset-react': 7.27.1(@babel/core@7.28.0)
-      '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@5.28.5)(react-refresh@0.11.0)(type-fest@4.41.0)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)(webpack@5.101.0)
-      '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/client-logger': 6.5.16
-      '@storybook/core': 6.5.16(encoding@0.1.13)(eslint@9.26.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.101.0)
-      '@storybook/core-common': 6.5.16(eslint@9.26.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
-      '@storybook/csf': 0.0.2--canary.4566f4d.1
-      '@storybook/docs-tools': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/node-logger': 6.5.16
-      '@storybook/react-docgen-typescript-plugin': 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0(typescript@5.8.3)(webpack@5.101.0)
-      '@storybook/semver': 7.3.2
-      '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@types/estree': 0.0.51
-      '@types/node': 16.18.126
-      '@types/webpack-env': 1.18.8
-      acorn: 7.4.1
-      acorn-jsx: 5.3.2(acorn@7.4.1)
-      acorn-walk: 7.2.0
-      babel-plugin-add-react-displayname: 0.0.5
-      babel-plugin-react-docgen: 4.2.1
-      core-js: 3.44.0
-      escodegen: 2.1.0
-      fs-extra: 9.1.0
-      global: 4.4.0
-      html-tags: 3.3.1
-      lodash: 4.17.21
-      prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-element-to-jsx-string: 14.3.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react-refresh: 0.11.0
-      read-pkg-up: 7.0.1
-      regenerator-runtime: 0.13.11
-      require-from-string: 2.0.2
-      ts-dedent: 2.2.0
-      util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@5.1.4)
-    optionalDependencies:
-      '@babel/core': 7.28.0
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - '@storybook/mdx2-csf'
-      - '@swc/core'
-      - '@types/webpack'
-      - bufferutil
-      - encoding
-      - esbuild
-      - eslint
-      - sockjs-client
-      - supports-color
-      - type-fest
-      - uglify-js
-      - utf-8-validate
-      - vue-template-compiler
-      - webpack-cli
-      - webpack-dev-server
-      - webpack-hot-middleware
-      - webpack-plugin-serve
-
-  '@storybook/react@6.5.16(@babel/core@7.28.0)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(require-from-string@2.0.2)(type-fest@4.41.0)(typescript@5.8.3)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)':
-    dependencies:
-      '@babel/preset-flow': 7.27.1(@babel/core@7.28.0)
-      '@babel/preset-react': 7.27.1(@babel/core@7.28.0)
-      '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@5.28.5)(react-refresh@0.11.0)(type-fest@4.41.0)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)(webpack@5.101.0)
-      '@storybook/addons': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/client-logger': 6.5.16
-      '@storybook/core': 6.5.16(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)(webpack@5.101.0)
-      '@storybook/core-common': 6.5.16(eslint@9.27.0(jiti@2.5.1))(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.8.3)
-      '@storybook/csf': 0.0.2--canary.4566f4d.1
-      '@storybook/docs-tools': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@storybook/node-logger': 6.5.16
-      '@storybook/react-docgen-typescript-plugin': 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0(typescript@5.8.3)(webpack@5.101.0)
-      '@storybook/semver': 7.3.2
-      '@storybook/store': 6.5.16(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      '@types/estree': 0.0.51
-      '@types/node': 16.18.126
-      '@types/webpack-env': 1.18.8
-      acorn: 7.4.1
-      acorn-jsx: 5.3.2(acorn@7.4.1)
-      acorn-walk: 7.2.0
-      babel-plugin-add-react-displayname: 0.0.5
-      babel-plugin-react-docgen: 4.2.1
-      core-js: 3.44.0
-      escodegen: 2.1.0
-      fs-extra: 9.1.0
-      global: 4.4.0
-      html-tags: 3.3.1
-      lodash: 4.17.21
-      prop-types: 15.8.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-element-to-jsx-string: 14.3.4(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
-      react-refresh: 0.11.0
-      read-pkg-up: 7.0.1
-      regenerator-runtime: 0.13.11
-      require-from-string: 2.0.2
-      ts-dedent: 2.2.0
-      util-deprecate: 1.0.2
-      webpack: 5.101.0(webpack-cli@5.1.4)
-    optionalDependencies:
-      '@babel/core': 7.28.0
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - '@storybook/mdx2-csf'
-      - '@swc/core'
-      - '@types/webpack'
-      - bufferutil
-      - encoding
-      - esbuild
-      - eslint
-      - sockjs-client
-      - supports-color
-      - type-fest
-      - uglify-js
-      - utf-8-validate
-      - vue-template-compiler
-      - webpack-cli
-      - webpack-dev-server
-      - webpack-hot-middleware
-      - webpack-plugin-serve
-
-  '@storybook/react@6.5.16(@babel/core@7.28.0)(@types/webpack@5.28.5)(encoding@0.1.13)(eslint@9.27.0(jiti@2.5.1))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(require-from-string@2.0.2)(type-fest@4.41.0)(typescript@4.9.5)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)':
-    dependencies:
-      '@babel/preset-flow': 7.27.1(@babel/core@7.28.0)
-      '@babel/preset-react': 7.27.1(@babel/core@7.28.0)
       '@pmmmwh/react-refresh-webpack-plugin': 0.5.17(@types/webpack@5.28.5)(react-refresh@0.11.0)(type-fest@4.41.0)(webpack-dev-server@5.2.2(webpack@5.101.0))(webpack-hot-middleware@2.26.1)(webpack@5.101.0)
       '@storybook/addons': 6.5.16(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@storybook/client-logger': 6.5.16
@@ -31304,7 +30185,7 @@ snapshots:
       util-deprecate: 1.0.2
       webpack: 5.101.0(webpack-cli@5.1.4)
     optionalDependencies:
-      '@babel/core': 7.28.0
+      '@babel/core': 7.27.7
       typescript: 4.9.5
     transitivePeerDependencies:
       - '@storybook/mdx2-csf'
@@ -33560,18 +32441,6 @@ snapshots:
 
   '@ungap/structured-clone@1.3.0': {}
 
-  '@vitejs/plugin-react@4.7.0(vite@6.3.5(@types/node@22.15.35)(jiti@2.5.1)(sass@1.89.2)(terser@5.43.1)(yaml@2.8.0))':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.0)
-      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.28.0)
-      '@rolldown/pluginutils': 1.0.0-beta.27
-      '@types/babel__core': 7.20.5
-      react-refresh: 0.17.0
-      vite: 6.3.5(@types/node@22.15.35)(jiti@2.5.1)(sass@1.89.2)(terser@5.43.1)(yaml@2.8.0)
-    transitivePeerDependencies:
-      - supports-color
-
   '@vitest/expect@2.0.5':
     dependencies:
       '@vitest/spy': 2.0.5
@@ -33884,7 +32753,7 @@ snapshots:
   '@webpack-cli/configtest@3.0.1(webpack-cli@6.0.1)(webpack@5.101.0)':
     dependencies:
       webpack: 5.101.0(webpack-cli@6.0.1)
-      webpack-cli: 6.0.1(webpack@5.101.0)
+      webpack-cli: 6.0.1(webpack-dev-server@5.2.2)(webpack@5.101.0)
 
   '@webpack-cli/info@1.5.0(webpack-cli@4.10.0)':
     dependencies:
@@ -33899,7 +32768,7 @@ snapshots:
   '@webpack-cli/info@3.0.1(webpack-cli@6.0.1)(webpack@5.101.0)':
     dependencies:
       webpack: 5.101.0(webpack-cli@6.0.1)
-      webpack-cli: 6.0.1(webpack@5.101.0)
+      webpack-cli: 6.0.1(webpack-dev-server@5.2.2)(webpack@5.101.0)
 
   '@webpack-cli/serve@1.7.0(webpack-cli@4.10.0)':
     dependencies:
@@ -34500,6 +33369,8 @@ snapshots:
 
   aws4@1.13.2: {}
 
+  aws4fetch@1.0.20: {}
+
   axe-core@4.10.3: {}
 
   axios@1.9.0:
@@ -34554,10 +33425,6 @@ snapshots:
     dependencies:
       '@babel/core': 7.27.7
 
-  babel-core@7.0.0-bridge.0(@babel/core@7.28.0):
-    dependencies:
-      '@babel/core': 7.28.0
-
   babel-eslint@10.1.0(eslint@6.8.0):
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -34711,14 +33578,6 @@ snapshots:
       mkdirp: 0.5.6
       webpack: 5.101.0(webpack-cli@6.0.1)
 
-  babel-loader@7.1.2(babel-core@7.0.0-bridge.0(@babel/core@7.28.0))(webpack@5.101.0):
-    dependencies:
-      babel-core: 7.0.0-bridge.0(@babel/core@7.28.0)
-      find-cache-dir: 1.0.0
-      loader-utils: 1.4.2
-      mkdirp: 0.5.6
-      webpack: 5.101.0(webpack-cli@5.1.4)
-
   babel-loader@8.4.1(@babel/core@7.27.7)(webpack@5.101.0):
     dependencies:
       '@babel/core': 7.27.7
@@ -34826,16 +33685,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-corejs2@0.4.14(@babel/core@7.28.0):
-    dependencies:
-      '@babel/compat-data': 7.28.0
-      '@babel/core': 7.28.0
-      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.0)
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   babel-plugin-polyfill-corejs3@0.1.7(@babel/core@7.27.7):
     dependencies:
       '@babel/core': 7.27.7
@@ -34852,15 +33701,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-corejs3@0.11.1(@babel/core@7.28.0):
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.0)
-      core-js-compat: 3.44.0
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   babel-plugin-polyfill-regenerator@0.0.4(@babel/core@7.27.7):
     dependencies:
       '@babel/core': 7.27.7
@@ -34875,14 +33715,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-regenerator@0.6.5(@babel/core@7.28.0):
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/helper-define-polyfill-provider': 0.6.5(@babel/core@7.28.0)
-    transitivePeerDependencies:
-      - supports-color
-    optional: true
-
   babel-plugin-react-docgen@4.2.1:
     dependencies:
       ast-types: 0.14.2
@@ -35099,10 +33931,6 @@ snapshots:
       babel-runtime: 6.26.0
       babel-types: 6.26.0
 
-  babel-plugin-transform-typescript-metadata@0.3.2:
-    dependencies:
-      '@babel/helper-plugin-utils': 7.27.1
-
   babel-preset-current-node-syntax@0.1.4(@babel/core@7.27.7):
     dependencies:
       '@babel/core': 7.27.7
@@ -36484,7 +35312,7 @@ snapshots:
       postcss-value-parser: 4.2.0
       semver: 7.7.2
     optionalDependencies:
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.101.0(webpack-cli@5.1.4)
 
   css-loader@7.1.2(webpack@5.101.0):
     dependencies:
@@ -38611,7 +37439,7 @@ snapshots:
       semver: 7.7.2
       tapable: 2.2.2
       typescript: 5.8.3
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.101.0(webpack-cli@5.1.4)
 
   fork-ts-checker-webpack-plugin@9.1.0(typescript@5.8.3)(webpack@5.101.0):
     dependencies:
@@ -40849,10 +39677,7 @@ snapshots:
       pretty-format: 25.5.0
       throat: 5.0.0
     transitivePeerDependencies:
-      - bufferutil
-      - canvas
       - supports-color
-      - utf-8-validate
 
   jest-leak-detector@25.5.0:
     dependencies:
@@ -41455,33 +40280,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  jscodeshift@0.15.2(@babel/preset-env@7.27.2(@babel/core@7.28.0)):
-    dependencies:
-      '@babel/core': 7.27.7
-      '@babel/parser': 7.28.0
-      '@babel/plugin-transform-class-properties': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-transform-optional-chaining': 7.27.1(@babel/core@7.27.7)
-      '@babel/plugin-transform-private-methods': 7.27.1(@babel/core@7.27.7)
-      '@babel/preset-flow': 7.27.1(@babel/core@7.27.7)
-      '@babel/preset-typescript': 7.27.1(@babel/core@7.27.7)
-      '@babel/register': 7.27.1(@babel/core@7.27.7)
-      babel-core: 7.0.0-bridge.0(@babel/core@7.27.7)
-      chalk: 4.1.2
-      flow-parser: 0.277.1
-      graceful-fs: 4.2.11
-      micromatch: 4.0.8
-      neo-async: 2.6.2
-      node-dir: 0.1.17
-      recast: 0.23.11
-      temp: 0.8.4
-      write-file-atomic: 2.4.3
-    optionalDependencies:
-      '@babel/preset-env': 7.27.2(@babel/core@7.28.0)
-    transitivePeerDependencies:
-      - supports-color
-
   jsdoc-type-pratt-parser@4.1.0: {}
 
   jsdom@11.12.0:
@@ -43088,12 +41886,6 @@ snapshots:
 
   moment@2.30.1: {}
 
-  monaco-editor-webpack-plugin@7.1.0(monaco-editor@0.52.2)(webpack@5.101.0):
-    dependencies:
-      loader-utils: 2.0.4
-      monaco-editor: 0.52.2
-      webpack: 5.101.0(webpack-cli@6.0.1)
-
   monaco-editor@0.44.0: {}
 
   monaco-editor@0.46.0: {}
@@ -45236,8 +44028,6 @@ snapshots:
 
   react-refresh@0.11.0: {}
 
-  react-refresh@0.17.0: {}
-
   react-remove-scroll-bar@2.3.8(@types/react@18.2.0)(react@18.2.0):
     dependencies:
       react: 18.2.0
@@ -45276,7 +44066,7 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.2.0
 
-  react-scripts-ts@3.1.0(babel-core@7.0.0-bridge.0(@babel/core@7.27.7))(babel-runtime@6.26.0)(typescript@5.8.3)(webpack-cli@6.0.1):
+  react-scripts-ts@3.1.0(babel-core@7.0.0-bridge.0(@babel/core@7.27.7))(babel-runtime@6.26.0)(typescript@5.8.3):
     dependencies:
       autoprefixer: 7.1.6
       babel-jest: 20.0.3
@@ -45312,8 +44102,8 @@ snapshots:
       typescript: 5.8.3
       uglifyjs-webpack-plugin: 1.2.5(webpack@5.101.0)
       url-loader: 0.6.2(file-loader@1.1.5(webpack@5.101.0))
-      webpack: 5.101.0(webpack-cli@6.0.1)
-      webpack-dev-server: 5.2.2(webpack-cli@6.0.1)(webpack@5.101.0)
+      webpack: 5.101.0(webpack-cli@5.1.4)
+      webpack-dev-server: 5.2.2(webpack@5.101.0)
       webpack-manifest-plugin: 1.3.2(webpack@5.101.0)
       whatwg-fetch: 2.0.3
     optionalDependencies:
@@ -45330,11 +44120,11 @@ snapshots:
       - utf-8-validate
       - webpack-cli
 
-  react-scripts-ts@3.1.0(babel-core@7.0.0-bridge.0(@babel/core@7.28.0))(babel-runtime@6.26.0)(typescript@5.8.3):
+  react-scripts-ts@3.1.0(babel-core@7.0.0-bridge.0(@babel/core@7.27.7))(babel-runtime@6.26.0)(typescript@5.8.3)(webpack-cli@6.0.1):
     dependencies:
       autoprefixer: 7.1.6
       babel-jest: 20.0.3
-      babel-loader: 7.1.2(babel-core@7.0.0-bridge.0(@babel/core@7.28.0))(webpack@5.101.0)
+      babel-loader: 7.1.2(babel-core@7.0.0-bridge.0(@babel/core@7.27.7))(webpack@5.101.0)
       babel-preset-react-app: 3.1.2(babel-runtime@6.26.0)
       case-sensitive-paths-webpack-plugin: 2.1.1
       chalk: 1.1.3
@@ -45366,8 +44156,8 @@ snapshots:
       typescript: 5.8.3
       uglifyjs-webpack-plugin: 1.2.5(webpack@5.101.0)
       url-loader: 0.6.2(file-loader@1.1.5(webpack@5.101.0))
-      webpack: 5.101.0(webpack-cli@5.1.4)
-      webpack-dev-server: 5.2.2(webpack@5.101.0)
+      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack-dev-server: 5.2.2(webpack-cli@6.0.1)(webpack@5.101.0)
       webpack-manifest-plugin: 1.3.2(webpack@5.101.0)
       whatwg-fetch: 2.0.3
     optionalDependencies:
@@ -45624,8 +44414,6 @@ snapshots:
 
   redux@5.0.1: {}
 
-  reflect-metadata@0.1.14: {}
-
   reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.8
@@ -47083,7 +45871,7 @@ snapshots:
 
   style-loader@3.3.4(webpack@5.101.0):
     dependencies:
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.101.0(webpack-cli@5.1.4)
 
   style-loader@4.0.0(webpack@5.101.0):
     dependencies:
@@ -48179,10 +46967,6 @@ snapshots:
       tslib: 1.14.1
       typescript: 5.8.3
 
-  tsyringe@4.10.0:
-    dependencies:
-      tslib: 1.14.1
-
   ttf2eot@2.0.0:
     dependencies:
       argparse: 1.0.10
@@ -48810,22 +47594,6 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.3
 
-  vite@6.3.5(@types/node@22.15.35)(jiti@2.5.1)(sass@1.89.2)(terser@5.43.1)(yaml@2.8.0):
-    dependencies:
-      esbuild: 0.25.8
-      fdir: 6.4.6(picomatch@4.0.3)
-      picomatch: 4.0.3
-      postcss: 8.5.6
-      rollup: 4.46.1
-      tinyglobby: 0.2.14
-    optionalDependencies:
-      '@types/node': 22.15.35
-      fsevents: 2.3.3
-      jiti: 2.5.1
-      sass: 1.89.2
-      terser: 5.43.1
-      yaml: 2.8.0
-
   vsce@2.15.0:
     dependencies:
       azure-devops-node-api: 11.2.0
@@ -49183,7 +47951,7 @@ snapshots:
       range-parser: 1.2.1
       schema-utils: 4.3.2
     optionalDependencies:
-      webpack: 5.101.0(webpack-cli@6.0.1)
+      webpack: 5.101.0(webpack-cli@5.1.4)
 
   webpack-dev-middleware@7.4.2(webpack@5.101.0):
     dependencies:
@@ -49541,7 +48309,7 @@ snapshots:
       watchpack: 2.4.4
       webpack-sources: 3.3.3
     optionalDependencies:
-      webpack-cli: 6.0.1(webpack@5.101.0)
+      webpack-cli: 6.0.1(webpack-dev-server@5.2.2)(webpack@5.101.0)
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
@@ -49980,13 +48748,6 @@ snapshots:
 
   zod@3.25.76: {}
 
-  zustand@4.5.7(@types/react@18.2.0)(react@18.2.0):
-    dependencies:
-      use-sync-external-store: 1.5.0(react@18.2.0)
-    optionalDependencies:
-      '@types/react': 18.2.0
-      react: 18.2.0
-
   zustand@5.0.6(@types/react@18.2.0)(react@18.2.0)(use-sync-external-store@1.5.0(react@18.2.0)):
     optionalDependencies:
       '@types/react': 18.2.0
diff --git a/rush.json b/rush.json
index 659531a05d5..e66b7a74a49 100644
--- a/rush.json
+++ b/rush.json
@@ -491,8 +491,8 @@
       "versionPolicyName": "ballerina-extension"
     },
     {
-      "packageName": "@wso2/data-mapper-view",
-      "projectFolder": "workspaces/ballerina/data-mapper-view",
+      "packageName": "@wso2/ballerina-data-mapper",
+      "projectFolder": "workspaces/ballerina/data-mapper",
       "versionPolicyName": "ballerina-extension"
     },
     {
@@ -590,12 +590,7 @@
       "packageName": "@wso2/type-editor",
       "projectFolder": "workspaces/ballerina/type-editor",
       "versionPolicyName": "ballerina-extension"
-    },
-    {
-      "packageName": "@wso2/ballerina-inline-data-mapper",
-      "projectFolder": "workspaces/ballerina/inline-data-mapper",
-      "versionPolicyName": "ballerina-extension"
-    },
+    }
     // {
     //   "packageName": "@wso2/api-designer-core",
     //   "projectFolder": "workspaces/api-designer/api-designer-core"
diff --git a/workspaces/ballerina/ballerina-core/src/index.ts b/workspaces/ballerina/ballerina-core/src/index.ts
index 62823e8ee77..2709acffb34 100644
--- a/workspaces/ballerina/ballerina-core/src/index.ts
+++ b/workspaces/ballerina/ballerina-core/src/index.ts
@@ -35,7 +35,7 @@ export * from "./interfaces/store";
 export * from "./interfaces/performance";
 export * from "./interfaces/extended-lang-client";
 export * from "./interfaces/service";
-export * from "./interfaces/inline-data-mapper";
+export * from "./interfaces/data-mapper";
 
 // ------ LS Utils -------->
 export * from "./ls-utils/WSConnection";
@@ -71,6 +71,9 @@ export * from "./rpc-types/lang-client/interfaces";
 export * from "./rpc-types/library-browser";
 export * from "./rpc-types/library-browser/rpc-type";
 export * from "./rpc-types/library-browser/interfaces";
+export * from "./rpc-types/migrate-integration";
+export * from "./rpc-types/migrate-integration/rpc-type";
+export * from "./rpc-types/migrate-integration/interfaces";
 export * from "./rpc-types/common";
 export * from "./rpc-types/common/rpc-type";
 export * from "./rpc-types/common/interfaces";
@@ -79,9 +82,8 @@ export * from "./rpc-types/persist-diagram/rpc-type";
 export * from "./rpc-types/ai-panel";
 export * from "./rpc-types/ai-panel/rpc-type";
 export * from "./rpc-types/ai-panel/interfaces";
-export * from "./rpc-types/inline-data-mapper";
-export * from "./rpc-types/inline-data-mapper/rpc-type";
-export * from "./rpc-types/inline-data-mapper/interfaces";
+export * from "./rpc-types/data-mapper";
+export * from "./rpc-types/data-mapper/rpc-type";
 export * from "./rpc-types/test-manager";
 export * from "./rpc-types/test-manager/rpc-type";
 export * from "./rpc-types/icp-service";
diff --git a/workspaces/ballerina/ballerina-core/src/interfaces/ai-panel.ts b/workspaces/ballerina/ballerina-core/src/interfaces/ai-panel.ts
index a94028af5bc..54415539d0a 100644
--- a/workspaces/ballerina/ballerina-core/src/interfaces/ai-panel.ts
+++ b/workspaces/ballerina/ballerina-core/src/interfaces/ai-panel.ts
@@ -25,6 +25,7 @@ export enum Command {
     Ask = '/ask',
     NaturalProgramming = '/natural-programming (experimental)',
     OpenAPI = '/openapi',
+    Doc = '/doc'
 }
 
 export enum TemplateId {
@@ -52,4 +53,7 @@ export enum TemplateId {
     GenerateCodeFromRequirements = 'generate-code-from-requirements',
     GenerateTestFromRequirements = 'generate-test-from-requirements',
     GenerateCodeFromFollowingRequirements = 'generate-code-from-following-requirements',
+
+    // Command.Doc
+    GenerateUserDoc = 'generate-user-doc'
 }
diff --git a/workspaces/ballerina/ballerina-core/src/interfaces/bi.ts b/workspaces/ballerina/ballerina-core/src/interfaces/bi.ts
index 9c1c2db2be4..7f4a0d5b61d 100644
--- a/workspaces/ballerina/ballerina-core/src/interfaces/bi.ts
+++ b/workspaces/ballerina/ballerina-core/src/interfaces/bi.ts
@@ -87,6 +87,7 @@ export type NodeMetadata = {
     agent?: AgentData;
     paramsToHide?: string[]; // List of properties keys to to hide from forms
     module?: string;
+    type?: string;
 };
 
 export type ParentMetadata = {
@@ -307,6 +308,7 @@ export type NodePropertyKey =
     | "collection"
     | "comment"
     | "condition"
+    | "matchTarget"
     | "configValue"
     | "connection"
     | "defaultable"
@@ -393,6 +395,10 @@ export type NodeKind =
     | "VECTOR_KNOWLEDGE_BASES"
     | "EMBEDDING_PROVIDER"
     | "EMBEDDING_PROVIDERS"
+    | "DATA_LOADER"
+    | "DATA_LOADERS"
+    | "CHUNKER"
+    | "CHUNKERS"
     | "NEW_CONNECTION"
     | "NEW_DATA"
     | "NP_FUNCTION"
@@ -414,7 +420,8 @@ export type NodeKind =
     | "VARIABLE"
     | "WAIT"
     | "WHILE"
-    | "WORKER";
+    | "WORKER"
+    | "VARIABLE";
 
 export type OverviewFlow = {
     entryPoints: EntryPoint[];
diff --git a/workspaces/ballerina/ballerina-core/src/interfaces/common.ts b/workspaces/ballerina/ballerina-core/src/interfaces/common.ts
index fda696e7ab3..c698130f541 100644
--- a/workspaces/ballerina/ballerina-core/src/interfaces/common.ts
+++ b/workspaces/ballerina/ballerina-core/src/interfaces/common.ts
@@ -30,7 +30,6 @@ export declare enum BallerinaComponentTypes {
 }
 
 export enum SubPanelView {
-    INLINE_DATA_MAPPER = "inlineDataMapper",
     HELPER_PANEL = "helperPanel",
     ADD_NEW_FORM = "addNewForm",
     UNDEFINED = undefined,
@@ -75,7 +74,6 @@ export interface SubPanel {
 }
 
 export interface SubPanelViewProps {
-    inlineDataMapper?: InlineDataMapperProps;
     sidePanelData?: SidePanelData;
 }
 
@@ -93,11 +91,3 @@ export interface ConfigurePanelData {
     documentation?: string;
     value?: string;
 }
-
-interface InlineDataMapperProps {
-    filePath: string;
-    flowNode: FlowNode;
-    propertyKey: string;
-    editorKey: string;
-    position: LinePosition;
-}
diff --git a/workspaces/ballerina/ballerina-core/src/interfaces/constants.ts b/workspaces/ballerina/ballerina-core/src/interfaces/constants.ts
index c75642b9b13..b35efce4625 100644
--- a/workspaces/ballerina/ballerina-core/src/interfaces/constants.ts
+++ b/workspaces/ballerina/ballerina-core/src/interfaces/constants.ts
@@ -35,6 +35,7 @@ export const BI_COMMANDS = {
     FOCUS_PROJECT_EXPLORER: 'BI.project-explorer.focus',
     PROJECT_EXPLORER: 'BI.project-explorer',
     ADD_CONNECTIONS: 'BI.project-explorer.add-connection',
+    ADD_CUSTOM_CONNECTOR: 'BI.project-explorer.add-custom-connector',
     DELETE_COMPONENT: 'BI.project-explorer.delete',
     ADD_ENTRY_POINT: 'BI.project-explorer.add-entry-point',
     ADD_TYPE: 'BI.project-explorer.add-type',
@@ -51,4 +52,5 @@ export const BI_COMMANDS = {
     BI_ADD_TEST_FUNCTION: 'BI.test.add.function',
     BI_EDIT_TEST_FUNCTION_DEF: 'BI.test.edit.function.def',
     ADD_NATURAL_FUNCTION: 'BI.project-explorer.add-natural-function',
+    TOGGLE_TRACE_LOGS: 'BI.toggle.trace.logs',
 };
diff --git a/workspaces/ballerina/ballerina-core/src/interfaces/inline-data-mapper.ts b/workspaces/ballerina/ballerina-core/src/interfaces/data-mapper.ts
similarity index 83%
rename from workspaces/ballerina/ballerina-core/src/interfaces/inline-data-mapper.ts
rename to workspaces/ballerina/ballerina-core/src/interfaces/data-mapper.ts
index bd5c2e849fd..c6f50761ac7 100644
--- a/workspaces/ballerina/ballerina-core/src/interfaces/inline-data-mapper.ts
+++ b/workspaces/ballerina/ballerina-core/src/interfaces/data-mapper.ts
@@ -28,6 +28,7 @@ export enum TypeKind {
     Decimal = "decimal",
     Boolean = "boolean",
     Enum = "enum",
+    Union = "union",
     Unknown = "$CompilationError$",
     Anydata = "anydata",
     Byte = "byte",
@@ -56,7 +57,7 @@ export enum ResultClauseType {
     COLLECT = "collect"
 }
 
-export interface IDMDiagnostic {
+export interface DMDiagnostic {
     kind: string;
     message: string;
     range: {
@@ -83,14 +84,18 @@ export interface IOType {
     category?: InputCategory;
     kind?: TypeKind;
     typeName?: string;
-    variableName?: string;
+    name?: string;
+    displayName?: string;
     fields?: IOType[];
     member?: IOType;
-    members?: EnumMember[];
+    members?: IOType[];
     defaultValue?: unknown;
     optional?: boolean;
     focusedMemberId?: string;
     isFocused?: boolean;
+    isRecursive?: boolean;
+    isDeepNested?: boolean;
+    ref?: string;
     moduleInfo? : ModuleInfo;
 }
 
@@ -99,7 +104,7 @@ export interface Mapping {
     inputs?: string[];
     expression: string;
     elements?: MappingElement[];
-    diagnostics?: IDMDiagnostic[];
+    diagnostics?: DMDiagnostic[];
     isComplex?: boolean;
     isQueryExpression?: boolean;
     isFunctionCall?: boolean;
@@ -112,7 +117,7 @@ export interface ExpandedDMModel {
     subMappings?: IOType[];
     mappings: Mapping[];
     source: string;
-    view: string;
+    rootViewId: string;
     query?: Query;
     mapping_fields?: Record<string, any>;
 }
@@ -121,10 +126,11 @@ export interface DMModel {
     inputs: IORoot[];
     output: IORoot;
     subMappings?: IORoot[];
-    types: Record<string, RecordType | EnumType>;
+    refs: Record<string, RecordType | EnumType>;
     mappings: Mapping[];
     view: string;
     query?: Query;
+    focusInputs?: Record<string, IOTypeField>;
     mapping_fields?: Record<string, any>;
 }
 
@@ -135,12 +141,13 @@ export interface ModelState {
 }
 
 export interface IORoot extends IOTypeField {
-    id: string;
     category?: InputCategory;
 }
 
 export interface RecordType {
     fields: IOTypeField[];
+    typeName: string;
+    kind: TypeKind;
 }
 
 export interface EnumType {
@@ -150,11 +157,14 @@ export interface EnumType {
 export interface IOTypeField {
     typeName?: string;
     kind: TypeKind;
-    fieldName?: string;
+    name: string;
+    displayName?: string;
     member?: IOTypeField;
+    members?: IOTypeField[];
     defaultValue?: unknown;
     optional?: boolean;
     ref?: string;
+    focusExpression?: string;
 }
 
 export interface EnumMember {
@@ -170,7 +180,7 @@ export interface MappingElement {
 export interface Query {
     output: string,
     inputs: string[];
-    diagnostics?: IDMDiagnostic[];
+    diagnostics?: DMDiagnostic[];
     fromClause: FromClause;
     intermediateClauses?: IntermediateClause[];
     resultClause: ResultClause;
@@ -203,12 +213,12 @@ export interface ResultClause {
     query?: Query;
 }
 
-export interface CustomFnMetadata {
-    returnType: string,
-    parameters: CustomFnParams[]
+export interface FnMetadata {
+    returnType: FnReturnType,
+    parameters: FnParams[]
 }
 
-export interface CustomFnParams{
+export interface FnParams{
     name: string,
     type: string,
     isOptional: boolean,
@@ -216,18 +226,23 @@ export interface CustomFnParams{
     kind: TypeKind
 }
 
-export interface IDMFormProps {
+export interface FnReturnType {
+    type: string;
+    kind: TypeKind;
+}
+
+export interface DMFormProps {
     targetLineRange: LineRange;
-    fields: IDMFormField[];
+    fields: DMFormField[];
     submitText?: string;
     cancelText?: string;
     nestedForm?: boolean;
-    onSubmit: (data: IDMFormFieldValues, formImports?: IDMFormFieldValues, importsCodedata?: CodeData) => void;
+    onSubmit: (data: DMFormFieldValues, formImports?: DMFormFieldValues, importsCodedata?: CodeData) => void;
     onCancel?: () => void;
     isSaving?: boolean;
 }
 
-export interface IDMFormField {
+export interface DMFormField {
     key: string;
     label: string;
     type: null | string;
@@ -240,11 +255,11 @@ export interface IDMFormField {
     items?: string[];
 }
 
-export interface IDMFormFieldValues {
+export interface DMFormFieldValues {
     [key: string]: any;
 }
 
-export interface IDMViewState {
+export interface DMViewState {
     viewId: string;
     codedata?: CodeData;
     isSubMapping?: boolean;
diff --git a/workspaces/ballerina/ballerina-core/src/interfaces/extended-lang-client.ts b/workspaces/ballerina/ballerina-core/src/interfaces/extended-lang-client.ts
index 2c822f7056a..a4dc5841246 100644
--- a/workspaces/ballerina/ballerina-core/src/interfaces/extended-lang-client.ts
+++ b/workspaces/ballerina/ballerina-core/src/interfaces/extended-lang-client.ts
@@ -28,9 +28,9 @@ import { ConnectorRequest, ConnectorResponse } from "../rpc-types/connector-wiza
 import { SqFlow } from "../rpc-types/sequence-diagram/interfaces";
 import { FieldType, FunctionModel, ListenerModel, ServiceClassModel, ServiceModel } from "./service";
 import { CDModel } from "./component-diagram";
-import { DMModel, ExpandedDMModel, IntermediateClause, Mapping, VisualizableField, CustomFnMetadata, ResultClauseType } from "./inline-data-mapper";
+import { DMModel, ExpandedDMModel, IntermediateClause, Mapping, VisualizableField, FnMetadata, ResultClauseType, IOType } from "./data-mapper";
 import { DataMapperMetadata, SCOPE } from "../state-machine-types";
-import { Attachment } from "../rpc-types/ai-panel/interfaces";
+import { Attachment, DataMappingRecord, ImportInfo } from "../rpc-types/ai-panel/interfaces";
 import { ToolParameters } from "../rpc-types/ai-agent/interfaces";
 
 export interface DidOpenParams {
@@ -293,26 +293,27 @@ export interface InitialIDMSourceResponse {
     codedata?: CodeData;
 }
 
-export interface InlineDataMapperModelRequest {
+export interface DataMapperModelRequest {
     filePath: string;
     codedata: CodeData;
     position: LinePosition;
     targetField?: string;
 }
 
-export interface InlineDataMapperBase {
+export interface DataMapperBase {
     filePath: string;
     codedata: CodeData;
     varName?: string;
     targetField?: string;
+    position?: LinePosition;
 }
 
-export interface InlineDataMapperSourceRequest extends InlineDataMapperBase {
+export interface DataMapperSourceRequest extends DataMapperBase {
     mapping: Mapping;
     withinSubMapping?: boolean;
 }
 
-export interface InlineAllDataMapperSourceRequest extends InlineDataMapperBase {
+export interface AllDataMapperSourceRequest extends DataMapperBase {
     mappings: Mapping[];
 }
 
@@ -322,7 +323,8 @@ export interface ExtendedDataMapperMetadata extends DataMapperMetadata {
 
 export interface MetadataWithAttachments {
     metadata: ExtendedDataMapperMetadata;
-    attachment?: Attachment[];
+    attachments?: Attachment[];
+    useTemporaryFile?: boolean;
 }
 
 export interface VisualizableFieldsRequest {
@@ -330,11 +332,11 @@ export interface VisualizableFieldsRequest {
     codedata: CodeData;
 }
 
-export interface InlineDataMapperModelResponse {
+export interface DataMapperModelResponse {
     mappingsModel: ExpandedDMModel | DMModel;
 }
 
-export interface InlineDataMapperSourceResponse {
+export interface DataMapperSourceResponse {
     textEdits?: {
         [key: string]: TextEdit[];
     };
@@ -342,6 +344,51 @@ export interface InlineDataMapperSourceResponse {
     userAborted?: boolean;
 }
 
+export interface CreateTempFileRequest {
+    inputs: DataMappingRecord[];
+    output: DataMappingRecord;
+    functionName: string;
+    inputNames: string[];
+    imports: ImportInfo[];
+}
+
+export interface DatamapperModelContext {
+    documentUri?: string;
+    identifier?: string;
+    dataMapperMetadata?: any;
+}
+
+export interface ExpandModelOptions {
+    processInputs?: boolean;
+    processOutput?: boolean;
+    processSubMappings?: boolean;
+    previousModel?: ExpandedDMModel;
+}
+
+export interface DMModelRequest {
+    model: DMModel;
+    rootViewId: string;
+    options?: ExpandModelOptions;
+}
+
+export interface ExpandedDMModelResponse {
+    expandedModel: ExpandedDMModel;
+    success: boolean;
+    error?: string;
+}
+export interface ProcessTypeReferenceRequest {
+    ref: string;
+    fieldId: string;
+    model: DMModel;
+    visitedRefs?: Set<string>;
+}
+
+export interface ProcessTypeReferenceResponse {
+    result: Partial<IOType>;
+    success: boolean;
+    error?: string;
+}
+
 export interface VisualizableFieldsResponse {
     visualizableProperties: VisualizableField;
 }
@@ -391,16 +438,16 @@ export interface DeleteMappingRequest {
     targetField: string;
 }
 
-export interface MapWithCustomFnRequest {
+export interface MapWithFnRequest {
     filePath: string;
     codedata: CodeData;
     mapping: Mapping;
-    functionMetadata: CustomFnMetadata;
+    functionMetadata: FnMetadata;
     varName?: string;
     targetField: string;
 }
 
-export interface GetInlineDataMapperCodedataRequest {
+export interface GetDataMapperCodedataRequest {
     filePath: string;
     codedata: CodeData;
     name: string;
@@ -412,7 +459,7 @@ export interface GetSubMappingCodedataRequest {
     view: string;
 }
 
-export interface GetInlineDataMapperCodedataResponse {
+export interface GetDataMapperCodedataResponse {
     codedata: CodeData;
 }
 
@@ -837,16 +884,32 @@ export type SearchQueryParams = {
     q?: string;
     limit?: number;
     offset?: number;
+    orgName?: string;
     includeAvailableFunctions?: string;
     includeCurrentOrganizationInSearch?: boolean;
-}
-
-export type SearchKind = 'FUNCTION' | 'CONNECTOR' | 'TYPE' | "NP_FUNCTION" | "MODEL_PROVIDER" | "VECTOR_STORE" | "EMBEDDING_PROVIDER" | "VECTOR_KNOWLEDGE_BASE";
+    filterByCurrentOrg?: boolean;
+}
+
+export type SearchKind =
+    | "FUNCTION"
+    | "CONNECTOR"
+    | "TYPE"
+    | "NP_FUNCTION"
+    | "MODEL_PROVIDER"
+    | "VECTOR_STORE"
+    | "EMBEDDING_PROVIDER"
+    | "VECTOR_KNOWLEDGE_BASE"
+    | "DATA_LOADER"
+    | "CHUNKER"
+    | "AGENT"
+    | "MEMORY_MANAGER"
+    | "AGENT_TOOL"
+    | "CLASS_INIT";
 
 export type BISearchRequest = {
-    position: LineRange;
+    position?: LineRange;
     filePath: string;
-    queryMap: SearchQueryParams;
+    queryMap?: SearchQueryParams;
     searchKind: SearchKind;
 }
 
@@ -938,6 +1001,7 @@ export type DeleteConfigVariableResponseV2 = {
 
 export interface GetConfigVariableNodeTemplateRequest {
     isNew: boolean;
+    isEnvVariable?: boolean;
 }
 
 export interface OpenConfigTomlRequest {
@@ -1133,6 +1197,22 @@ export interface RenameIdentifierRequest {
     newName: string;
 }
 
+export interface ImportIntegrationRequest {
+    packageName: string;
+    orgName: string;
+    sourcePath: string;
+    parameters?: Record<string, any>;
+}
+
+export interface ImportIntegrationResponse {
+    error: string;
+    textEdits: {
+        [key: string]: string;
+    };
+    report: string;
+    jsonReport: string;
+}
+
 // <-------- Trigger Related ------->
 export interface TriggerModelsRequest {
     organization?: string;
@@ -1323,6 +1403,7 @@ export interface Member {
     defaultValue?: string;
     optional?: boolean;
     imports?: Imports;
+    readonly?: boolean;
 }
 
 export interface GetGraphqlTypeRequest {
@@ -1363,6 +1444,30 @@ export interface UpdateTypesResponse {
     stacktrace?: string;
 }
 
+export interface DeleteTypeRequest {
+    filePath: string;
+    lineRange: LineRange;
+}
+
+export interface DeleteTypeResponse {
+    textEdits: {
+        [filePath: string]: TextEdit[];
+    };
+    errorMsg?: string;
+    stacktrace?: string;
+}
+
+export interface VerifyTypeDeleteRequest {
+    filePath: string;
+    startPosition: LinePosition;
+}
+
+export interface VerifyTypeDeleteResponse {
+    canDelete: boolean;
+    errorMsg?: string;
+    stacktrace?: string;
+}
+
 export interface GetTypesResponse {
     types: Type[];
 }
diff --git a/workspaces/ballerina/ballerina-core/src/interfaces/service.ts b/workspaces/ballerina/ballerina-core/src/interfaces/service.ts
index 151d31767c0..68ab6d3d887 100644
--- a/workspaces/ballerina/ballerina-core/src/interfaces/service.ts
+++ b/workspaces/ballerina/ballerina-core/src/interfaces/service.ts
@@ -83,6 +83,7 @@ export interface FunctionModel {
     // accessor will be used by resource functions
     accessor?: PropertyModel;
 
+    properties?: ConfigProperties;
     name: PropertyModel;
     parameters: ParameterModel[];
     schema?: ConfigProperties;
@@ -144,6 +145,7 @@ export interface PropertyModel {
     httpParamType?: "QUERY" | "Header" | "PAYLOAD";
     diagnostics?: DiagnosticMessage[];
     imports?: Imports;
+    hidden?: boolean;
 }
 
 export interface ParameterModel extends PropertyModel {
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/ai-panel/index.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/ai-panel/index.ts
index a722377e4ae..f0e1ad75686 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/ai-panel/index.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/ai-panel/index.ts
@@ -1,4 +1,3 @@
-
 /**
  * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
  *
@@ -16,9 +15,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { InlineAllDataMapperSourceRequest, MetadataWithAttachments } from "../../interfaces/extended-lang-client";
+import { AllDataMapperSourceRequest, CreateTempFileRequest, DatamapperModelContext, DataMapperModelResponse, ExtendedDataMapperMetadata, MetadataWithAttachments } from "../../interfaces/extended-lang-client";
 import { LoginMethod } from "../../state-machine-types";
-import { AddToProjectRequest, GetFromFileRequest, DeleteFromProjectRequest, GenerateMappingsRequest, GenerateMappingsResponse, NotifyAIMappingsRequest, ProjectSource, ProjectDiagnostics, GenerateMappingsFromRecordRequest, GenerateMappingFromRecordResponse, PostProcessRequest, PostProcessResponse, GenerateTypesFromRecordRequest, GenerateTypesFromRecordResponse, FetchDataRequest, FetchDataResponse, TestGenerationRequest, TestGenerationResponse, TestGenerationMentions, AIChatSummary, DeveloperDocument, RequirementSpecification, LLMDiagnostics, GetModuleDirParams, AIPanelPrompt, AIMachineSnapshot, SubmitFeedbackRequest, RelevantLibrariesAndFunctionsRequest, GenerateOpenAPIRequest, GenerateCodeRequest, TestPlanGenerationRequest, TestGeneratorIntermediaryState, RepairParams, RelevantLibrariesAndFunctionsResponse, CodeSegment } from "./interfaces";
+import { AddToProjectRequest, GetFromFileRequest, DeleteFromProjectRequest, GenerateMappingsResponse, NotifyAIMappingsRequest, ProjectSource, ProjectDiagnostics, PostProcessRequest, PostProcessResponse, GenerateTypesFromRecordRequest, GenerateTypesFromRecordResponse, FetchDataRequest, FetchDataResponse, TestGenerationRequest, TestGenerationResponse, TestGenerationMentions, AIChatSummary, DeveloperDocument, RequirementSpecification, LLMDiagnostics, GetModuleDirParams, AIPanelPrompt, AIMachineSnapshot, SubmitFeedbackRequest, RelevantLibrariesAndFunctionsRequest, GenerateOpenAPIRequest, GenerateCodeRequest, TestPlanGenerationRequest, TestGeneratorIntermediaryState, RepairParams, RelevantLibrariesAndFunctionsResponse, CodeSegment, DocGenerationRequest, AddFilesToProjectRequest } from "./interfaces";
 
 export interface AIPanelAPI {
     // ==================================
@@ -32,18 +31,21 @@ export interface AIPanelAPI {
     getDefaultPrompt: () => Promise<AIPanelPrompt>;
     getAIMachineSnapshot: () => Promise<AIMachineSnapshot>;
     fetchData: (params: FetchDataRequest) => Promise<FetchDataResponse>;
-    addToProject: (params: AddToProjectRequest) => void;
+    addToProject: (params: AddToProjectRequest) => Promise<boolean>;
     getFromFile: (params: GetFromFileRequest) => Promise<string>;
     getFileExists: (params: GetFromFileRequest) => Promise<boolean>;
     deleteFromProject: (params: DeleteFromProjectRequest) => void;
-    generateMappings: (params: GenerateMappingsRequest) => Promise<GenerateMappingsResponse>;
     notifyAIMappings: (params: NotifyAIMappingsRequest) => Promise<boolean>;
     stopAIMappings: () => Promise<GenerateMappingsResponse>;
     getShadowDiagnostics: (params: ProjectSource) => Promise<ProjectDiagnostics>;
     checkSyntaxError: (params: ProjectSource) => Promise<boolean>;
     clearInitialPrompt: () => void;
-    openInlineMappingChatWindow: () => void;
-    getMappingsFromModel: (params: MetadataWithAttachments) => Promise<InlineAllDataMapperSourceRequest>;
+    openAIMappingChatWindow: (params: DataMapperModelResponse) => void;
+    generateDataMapperModel: (params: DatamapperModelContext) => Promise<DataMapperModelResponse>;
+    getTypesFromRecord: (params: GenerateTypesFromRecordRequest) => Promise<GenerateTypesFromRecordResponse>;
+    createTempFileAndGenerateMetadata: (params: CreateTempFileRequest) => Promise<ExtendedDataMapperMetadata>;
+    generateMappings: (params: MetadataWithAttachments) => Promise<AllDataMapperSourceRequest>;
+    addCodeSegmentToWorkspace: (params: CodeSegment) => Promise<boolean>;
     addInlineCodeSegmentToWorkspace: (params: CodeSegment) => void;
     // Test-generator related functions
     getGeneratedTests: (params: TestGenerationRequest) => Promise<TestGenerationResponse>;
@@ -53,8 +55,6 @@ export interface AIPanelAPI {
     getServiceNames: () => Promise<TestGenerationMentions>;
     getResourceMethodAndPaths: () => Promise<TestGenerationMentions>;
     abortTestGeneration: () => void;
-    getMappingsFromRecord: (params: GenerateMappingsFromRecordRequest) => Promise<GenerateMappingFromRecordResponse>;
-    getTypesFromRecord: (params: GenerateTypesFromRecordRequest) => Promise<GenerateTypesFromRecordResponse>;
     applyDoOnFailBlocks: () => void;
     postProcess: (params: PostProcessRequest) => Promise<PostProcessResponse>;
     getActiveFile:() => Promise<string>;
@@ -84,4 +84,9 @@ export interface AIPanelAPI {
     generateFunctionTests: (params: TestGeneratorIntermediaryState) => void;
     generateHealthcareCode: (params: GenerateCodeRequest) => void;
     abortAIGeneration: () => void;
+    // ==================================
+    // Doc Generation Related Functions
+    // ==================================
+    getGeneratedDocumentation: (params: DocGenerationRequest) => Promise<void>;
+    addFilesToProject: (params: AddFilesToProjectRequest) => Promise<boolean>;
 }
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/ai-panel/interfaces.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/ai-panel/interfaces.ts
index ac5b80a4290..03b5ebfea36 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/ai-panel/interfaces.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/ai-panel/interfaces.ts
@@ -20,7 +20,7 @@
 import { NodePosition } from "@wso2/syntax-tree";
 import { AIMachineContext, AIMachineStateValue } from "../../state-machine-types";
 import { Command, TemplateId } from "../../interfaces/ai-panel";
-import { FormField } from "../../interfaces/config-spec";
+import { DataMapperSourceResponse, ExtendedDataMapperMetadata } from "../../interfaces/extended-lang-client";
 
 // ==================================
 // General Interfaces
@@ -88,6 +88,15 @@ export interface AddToProjectRequest {
     isTestCode: boolean;
 }
 
+export interface AddFilesToProjectRequest {
+    fileChanges: FileChanges[];
+}
+
+export interface FileChanges {
+    filePath: string;
+    content: string;
+}
+
 export interface GetFromFileRequest {
     filePath: string;
 }
@@ -118,6 +127,34 @@ export interface NotifyAIMappingsRequest {
 export interface CodeSegment {
     segmentText: string;
     filePath: string;
+    metadata?: ExtendedDataMapperMetadata;
+    textEdit?: DataMapperSourceResponse;
+}
+
+export interface DataMappingRecord {
+    type: string;
+    isArray: boolean;
+    filePath: string;
+}
+
+export interface GenerateTypesFromRecordRequest {
+    attachment?: Attachment[]
+}
+
+export interface GenerateTypesFromRecordResponse {
+    typesCode: string;
+}
+
+export interface MappingParameters {
+    inputRecord: string[];
+    outputRecord: string,
+    functionName?: string;
+}
+
+export interface ImportInfo {
+    moduleName: string;
+    alias?: string;
+    recordName?: string;
 }
 
 // Test-generator related interfaces
@@ -155,43 +192,6 @@ export interface TestGeneratorIntermediaryState {
     testPlan: string;
 }
 
-
-export interface DataMappingRecord {
-    type: string;
-    isArray: boolean;
-    filePath: string;
-}
-
-export interface GenerateMappingsFromRecordRequest {
-    backendUri: string;
-    token: string;
-    inputRecordTypes: DataMappingRecord[];
-    outputRecordType: DataMappingRecord;
-    functionName: string;
-    imports: { moduleName: string; alias?: string }[];
-    inputNames?: string[];
-    attachment?: Attachment[]
-}
-
-export interface GenerateTypesFromRecordRequest {
-    backendUri: string;
-    token: string;
-    attachment?: Attachment[]
-}
-
-export interface GenerateMappingFromRecordResponse {
-    mappingCode: string;
-}
-export interface GenerateTypesFromRecordResponse {
-    typesCode: string;
-}
-export interface MappingParameters {
-    inputRecord: string[];
-    outputRecord: string,
-    functionName?: string;
-}
-
-
 export interface PostProcessRequest {
     assistant_response: string;
 }
@@ -342,5 +342,17 @@ export interface CopilotFilterLibrariesResponse {
     libraries: any[];
 }
 
+// ==================================
+// Doc Generation Related Interfaces
+// ==================================
+export enum DocGenerationType {
+    User = "user",
+}
+
+export interface DocGenerationRequest {
+    type: DocGenerationType;
+    serviceName: string;
+}
+
 export const GENERATE_TEST_AGAINST_THE_REQUIREMENT = "Generate tests against the requirements";
 export const GENERATE_CODE_AGAINST_THE_REQUIREMENT = "Generate code based on the requirements";
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/ai-panel/rpc-type.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/ai-panel/rpc-type.ts
index 1ba3d835f43..6b6140ce5fe 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/ai-panel/rpc-type.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/ai-panel/rpc-type.ts
@@ -17,9 +17,9 @@
  * 
  * THIS FILE INCLUDES AUTO GENERATED CODE
  */
-import { InlineAllDataMapperSourceRequest, MetadataWithAttachments } from "../../interfaces/extended-lang-client";
+import { AllDataMapperSourceRequest, CreateTempFileRequest, DatamapperModelContext, DataMapperModelResponse, ExtendedDataMapperMetadata, MetadataWithAttachments } from "../../interfaces/extended-lang-client";
 import { LoginMethod } from "../../state-machine-types";
-import { AddToProjectRequest, GetFromFileRequest, DeleteFromProjectRequest, GenerateMappingsRequest, GenerateMappingsResponse, NotifyAIMappingsRequest, ProjectSource, ProjectDiagnostics, GenerateMappingsFromRecordRequest, GenerateMappingFromRecordResponse, PostProcessRequest, PostProcessResponse, GenerateTypesFromRecordRequest, GenerateTypesFromRecordResponse, FetchDataRequest, FetchDataResponse, TestGenerationRequest, TestGenerationResponse, TestGenerationMentions, AIChatSummary, DeveloperDocument, RequirementSpecification, LLMDiagnostics, GetModuleDirParams, AIPanelPrompt, AIMachineSnapshot, SubmitFeedbackRequest, RelevantLibrariesAndFunctionsRequest, GenerateOpenAPIRequest, GenerateCodeRequest, TestPlanGenerationRequest, TestGeneratorIntermediaryState, RepairParams, RelevantLibrariesAndFunctionsResponse, CodeSegment } from "./interfaces";
+import { AddToProjectRequest, GetFromFileRequest, DeleteFromProjectRequest, GenerateMappingsResponse, NotifyAIMappingsRequest, ProjectSource, ProjectDiagnostics, PostProcessRequest, PostProcessResponse, GenerateTypesFromRecordRequest, GenerateTypesFromRecordResponse, FetchDataRequest, FetchDataResponse, TestGenerationRequest, TestGenerationResponse, TestGenerationMentions, AIChatSummary, DeveloperDocument, RequirementSpecification, LLMDiagnostics, GetModuleDirParams, AIPanelPrompt, AIMachineSnapshot, SubmitFeedbackRequest, RelevantLibrariesAndFunctionsRequest, GenerateOpenAPIRequest, GenerateCodeRequest, TestPlanGenerationRequest, TestGeneratorIntermediaryState, RepairParams, RelevantLibrariesAndFunctionsResponse, CodeSegment, DocGenerationRequest, AddFilesToProjectRequest } from "./interfaces";
 import { RequestType, NotificationType } from "vscode-messenger-common";
 
 const _preFix = "ai-panel";
@@ -31,18 +31,21 @@ export const getRefreshedAccessToken: RequestType<void, string> = { method: `${_
 export const getDefaultPrompt: RequestType<void, AIPanelPrompt> = { method: `${_preFix}/getDefaultPrompt` };
 export const getAIMachineSnapshot: RequestType<void, AIMachineSnapshot> = { method: `${_preFix}/getAIMachineSnapshot` };
 export const fetchData: RequestType<FetchDataRequest, FetchDataResponse> = { method: `${_preFix}/fetchData` };
-export const addToProject: NotificationType<AddToProjectRequest> = { method: `${_preFix}/addToProject` };
+export const addToProject: RequestType<AddToProjectRequest, boolean> = { method: `${_preFix}/addToProject` };
 export const getFromFile: RequestType<GetFromFileRequest, string> = { method: `${_preFix}/getFromFile` };
 export const getFileExists: RequestType<GetFromFileRequest, boolean> = { method: `${_preFix}/getFileExists` };
 export const deleteFromProject: NotificationType<DeleteFromProjectRequest> = { method: `${_preFix}/deleteFromProject` };
-export const generateMappings: RequestType<GenerateMappingsRequest, GenerateMappingsResponse> = { method: `${_preFix}/generateMappings` };
 export const notifyAIMappings: RequestType<NotifyAIMappingsRequest, boolean> = { method: `${_preFix}/notifyAIMappings` };
 export const stopAIMappings: RequestType<void, GenerateMappingsResponse> = { method: `${_preFix}/stopAIMappings` };
 export const getShadowDiagnostics: RequestType<ProjectSource, ProjectDiagnostics> = { method: `${_preFix}/getShadowDiagnostics` };
 export const checkSyntaxError: RequestType<ProjectSource, boolean> = { method: `${_preFix}/checkSyntaxError` };
 export const clearInitialPrompt: NotificationType<void> = { method: `${_preFix}/clearInitialPrompt` };
-export const openInlineMappingChatWindow: NotificationType<void> = { method: `${_preFix}/openInlineMappingChatWindow` };
-export const getMappingsFromModel: RequestType<MetadataWithAttachments, InlineAllDataMapperSourceRequest> = { method: `${_preFix}/getMappingsFromModel` };
+export const openAIMappingChatWindow: NotificationType<DataMapperModelResponse> = { method: `${_preFix}/openAIMappingChatWindow` };
+export const generateDataMapperModel: RequestType<DatamapperModelContext, DataMapperModelResponse> = { method: `${_preFix}/generateDataMapperModel` };
+export const getTypesFromRecord: RequestType<GenerateTypesFromRecordRequest, GenerateTypesFromRecordResponse> = { method: `${_preFix}/getTypesFromRecord` };
+export const createTempFileAndGenerateMetadata: RequestType<CreateTempFileRequest, ExtendedDataMapperMetadata> = { method: `${_preFix}/createTempFileAndGenerateMetadata` };
+export const generateMappings: RequestType<MetadataWithAttachments, AllDataMapperSourceRequest> = { method: `${_preFix}/generateMappings` };
+export const addCodeSegmentToWorkspace: RequestType<CodeSegment, boolean> = { method: `${_preFix}/addCodeSegmentToWorkspace` };
 export const addInlineCodeSegmentToWorkspace: NotificationType<CodeSegment> = { method: `${_preFix}/addInlineCodeSegmentToWorkspace` };
 export const getGeneratedTests: RequestType<TestGenerationRequest, TestGenerationResponse> = { method: `${_preFix}/getGeneratedTests` };
 export const getTestDiagnostics: RequestType<TestGenerationResponse, ProjectDiagnostics> = { method: `${_preFix}/getTestDiagnostics` };
@@ -51,8 +54,6 @@ export const getResourceSourceForMethodAndPath: RequestType<string, string> = {
 export const getServiceNames: RequestType<void, TestGenerationMentions> = { method: `${_preFix}/getServiceNames` };
 export const getResourceMethodAndPaths: RequestType<void, TestGenerationMentions> = { method: `${_preFix}/getResourceMethodAndPaths` };
 export const abortTestGeneration: NotificationType<void> = { method: `${_preFix}/abortTestGeneration` };
-export const getMappingsFromRecord: RequestType<GenerateMappingsFromRecordRequest, GenerateMappingFromRecordResponse> = { method: `${_preFix}/getMappingsFromRecord` };
-export const getTypesFromRecord: RequestType<GenerateTypesFromRecordRequest, GenerateTypesFromRecordResponse> = { method: `${_preFix}/getTypesFromRecord` };
 export const applyDoOnFailBlocks: NotificationType<void> = { method: `${_preFix}/applyDoOnFailBlocks` };
 export const postProcess: RequestType<PostProcessRequest, PostProcessResponse> = { method: `${_preFix}/postProcess` };
 export const getActiveFile: RequestType<void, string> = { method: `${_preFix}/getActiveFile` };
@@ -82,3 +83,5 @@ export const generateTestPlan: NotificationType<TestPlanGenerationRequest> = { m
 export const generateFunctionTests: NotificationType<TestGeneratorIntermediaryState> = { method: `${_preFix}/generateFunctionTests` };
 export const generateHealthcareCode: NotificationType<GenerateCodeRequest> = { method: `${_preFix}/generateHealthcareCode` };
 export const abortAIGeneration: NotificationType<void> = { method: `${_preFix}/abortAIGeneration` };
+export const getGeneratedDocumentation: NotificationType<DocGenerationRequest> = { method: `${_preFix}/getGeneratedDocumentation` };
+export const addFilesToProject: RequestType<AddFilesToProjectRequest, boolean> = { method: `${_preFix}/addFilesToProject` };
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/bi-diagram/index.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/bi-diagram/index.ts
index 8018c78d59a..ea03067547e 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/bi-diagram/index.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/bi-diagram/index.ts
@@ -88,7 +88,12 @@ import {
     DeleteConfigVariableResponseV2,
     DeleteConfigVariableRequestV2,
     JsonToTypeRequest,
-    JsonToTypeResponse
+    JsonToTypeResponse,
+    ConfigVariableRequest,
+    DeleteTypeRequest,
+    DeleteTypeResponse,
+    VerifyTypeDeleteRequest,
+    VerifyTypeDeleteResponse
 } from "../../interfaces/extended-lang-client";
 import {
     ProjectRequest,
@@ -123,6 +128,8 @@ export interface BIDiagramAPI {
     getAvailableVectorStores: (params: BIAvailableNodesRequest) => Promise<BIAvailableNodesResponse>;
     getAvailableEmbeddingProviders: (params: BIAvailableNodesRequest) => Promise<BIAvailableNodesResponse>;
     getAvailableVectorKnowledgeBases: (params: BIAvailableNodesRequest) => Promise<BIAvailableNodesResponse>;
+    getAvailableDataLoaders: (params: BIAvailableNodesRequest) => Promise<BIAvailableNodesResponse>;
+    getAvailableChunkers: (params: BIAvailableNodesRequest) => Promise<BIAvailableNodesResponse>;
     getEnclosedFunction: (params: BIGetEnclosedFunctionRequest) => Promise<BIGetEnclosedFunctionResponse>;
     getNodeTemplate: (params: BINodeTemplateRequest) => Promise<BINodeTemplateResponse>;
     getAiSuggestions: (params: BIAiSuggestionsRequest) => Promise<BIAiSuggestionsResponse>;
@@ -136,7 +143,7 @@ export interface BIDiagramAPI {
     getExpressionCompletions: (params: ExpressionCompletionsRequest) => Promise<ExpressionCompletionsResponse>;
     getConfigVariables: () => Promise<ConfigVariableResponse>;
     updateConfigVariables: (params: UpdateConfigVariableRequest) => Promise<UpdateConfigVariableResponse>;
-    getConfigVariablesV2: () => Promise<ConfigVariableResponse>;
+    getConfigVariablesV2: (params: ConfigVariableRequest) => Promise<ConfigVariableResponse>;
     updateConfigVariablesV2: (params: UpdateConfigVariableRequestV2) => Promise<UpdateConfigVariableResponseV2>;
     deleteConfigVariableV2: (params: DeleteConfigVariableRequestV2) => Promise<DeleteConfigVariableResponseV2>;
     getConfigVariableNodeTemplate: (params: GetConfigVariableNodeTemplateRequest) => Promise<BINodeTemplateResponse>;
@@ -162,6 +169,8 @@ export interface BIDiagramAPI {
     getType: (params: GetTypeRequest) => Promise<GetTypeResponse>;
     updateType: (params: UpdateTypeRequest) => Promise<UpdateTypeResponse>;
     updateTypes: (params: UpdateTypesRequest) => Promise<UpdateTypesResponse>;
+    deleteType: (params: DeleteTypeRequest) => Promise<DeleteTypeResponse>;
+    verifyTypeDelete: (params: VerifyTypeDeleteRequest) => Promise<VerifyTypeDeleteResponse>;
     getTypeFromJson: (params: JsonToTypeRequest) => Promise<JsonToTypeResponse>;
     getServiceClassModel: (params: ModelFromCodeRequest) => Promise<ServiceClassModelResponse>;
     updateClassField: (params: ClassFieldModifierRequest) => Promise<SourceEditResponse>;
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/bi-diagram/interfaces.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/bi-diagram/interfaces.ts
index 203e8524bf2..1e756452a72 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/bi-diagram/interfaces.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/bi-diagram/interfaces.ts
@@ -23,8 +23,11 @@ import { RemoteFunction, ServiceType } from "../../interfaces/ballerina";
 
 export interface ProjectRequest {
     projectName: string;
+    packageName: string;
     projectPath: string;
-    isService: boolean;
+    createDirectory: boolean;
+    orgName?: string;
+    version?: string;
 }
 
 export interface WorkspacesResponse {
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/bi-diagram/rpc-type.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/bi-diagram/rpc-type.ts
index 91ee5a70a44..deced924ad1 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/bi-diagram/rpc-type.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/bi-diagram/rpc-type.ts
@@ -89,7 +89,12 @@ import {
     DeleteConfigVariableRequestV2,
     DeleteConfigVariableResponseV2,
     JsonToTypeRequest,
-    JsonToTypeResponse
+    JsonToTypeResponse,
+    ConfigVariableRequest,
+    DeleteTypeRequest,
+    DeleteTypeResponse,
+    VerifyTypeDeleteRequest,
+    VerifyTypeDeleteResponse
 } from "../../interfaces/extended-lang-client";
 import {
     ProjectRequest,
@@ -125,6 +130,8 @@ export const getAvailableModelProviders: RequestType<BIAvailableNodesRequest, BI
 export const getAvailableVectorStores: RequestType<BIAvailableNodesRequest, BIAvailableNodesResponse> = { method: `${_preFix}/getAvailableVectorStores` };
 export const getAvailableEmbeddingProviders: RequestType<BIAvailableNodesRequest, BIAvailableNodesResponse> = { method: `${_preFix}/getAvailableEmbeddingProviders` };
 export const getAvailableVectorKnowledgeBases: RequestType<BIAvailableNodesRequest, BIAvailableNodesResponse> = { method: `${_preFix}/getAvailableVectorKnowledgeBases` };
+export const getAvailableDataLoaders: RequestType<BIAvailableNodesRequest, BIAvailableNodesResponse> = { method: `${_preFix}/getAvailableDataLoaders` };
+export const getAvailableChunkers: RequestType<BIAvailableNodesRequest, BIAvailableNodesResponse> = { method: `${_preFix}/getAvailableChunkers` };
 export const getEnclosedFunction: RequestType<BIGetEnclosedFunctionRequest, BIGetEnclosedFunctionResponse> = { method: `${_preFix}/getEnclosedFunction` };
 export const getNodeTemplate: RequestType<BINodeTemplateRequest, BINodeTemplateResponse> = { method: `${_preFix}/getNodeTemplate` };
 export const getAiSuggestions: RequestType<BIAiSuggestionsRequest, BIAiSuggestionsResponse> = { method: `${_preFix}/getAiSuggestions` };
@@ -138,7 +145,7 @@ export const getVisibleVariableTypes: RequestType<BIGetVisibleVariableTypesReque
 export const getExpressionCompletions: RequestType<ExpressionCompletionsRequest, ExpressionCompletionsResponse> = { method: `${_preFix}/getExpressionCompletions` };
 export const getConfigVariables: RequestType<void, ConfigVariableResponse> = { method: `${_preFix}/getConfigVariables` };
 export const updateConfigVariables: RequestType<UpdateConfigVariableRequest, UpdateConfigVariableResponse> = { method: `${_preFix}/updateConfigVariables` };
-export const getConfigVariablesV2: RequestType<void, ConfigVariableResponse> = { method: `${_preFix}/getConfigVariablesV2` };
+export const getConfigVariablesV2: RequestType<ConfigVariableRequest, ConfigVariableResponse> = { method: `${_preFix}/getConfigVariablesV2` };
 export const updateConfigVariablesV2: RequestType<UpdateConfigVariableRequestV2, UpdateConfigVariableResponseV2> = { method: `${_preFix}/updateConfigVariablesV2` };
 export const deleteConfigVariableV2: RequestType<DeleteConfigVariableRequestV2, DeleteConfigVariableResponseV2> = { method: `${_preFix}/deleteConfigVariableV2` };
 export const getConfigVariableNodeTemplate: RequestType<GetConfigVariableNodeTemplateRequest, BINodeTemplateResponse> = { method: `${_preFix}/getConfigVariableNodeTemplate` };
@@ -164,6 +171,8 @@ export const getTypes: RequestType<GetTypesRequest, GetTypesResponse> = { method
 export const getType: RequestType<GetTypeRequest, GetTypeResponse> = { method: `${_preFix}/getType` };
 export const updateType: RequestType<UpdateTypeRequest, UpdateTypeResponse> = { method: `${_preFix}/updateType` };
 export const updateTypes: RequestType<UpdateTypesRequest, UpdateTypesResponse> = { method: `${_preFix}/updateTypes` };
+export const deleteType: RequestType<DeleteTypeRequest, DeleteTypeResponse> = { method: `${_preFix}/deleteType` };
+export const verifyTypeDelete: RequestType<VerifyTypeDeleteRequest, VerifyTypeDeleteResponse> = { method: `${_preFix}/verifyTypeDelete` };
 export const getTypeFromJson: RequestType<JsonToTypeRequest, JsonToTypeResponse> = { method: `${_preFix}/getTypeFromJson` };
 export const getServiceClassModel: RequestType<ModelFromCodeRequest, ServiceClassModelResponse> = { method: `${_preFix}/getServiceClassModel` };
 export const updateClassField: RequestType<ClassFieldModifierRequest, SourceEditResponse> = { method: `${_preFix}/updateClassField` };
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/common/index.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/common/index.ts
index ba9b90912db..964b6cea6d6 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/common/index.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/common/index.ts
@@ -43,8 +43,11 @@ export interface CommonRPCAPI {
     runBackgroundTerminalCommand: (params: RunExternalCommandRequest) => Promise<RunExternalCommandResponse>;
     openExternalUrl: (params: OpenExternalUrlRequest) => void;
     selectFileOrDirPath: (params: FileOrDirRequest) => Promise<FileOrDirResponse>;
+    selectFileOrFolderPath: () => Promise<FileOrDirResponse>;
     experimentalEnabled: () => Promise<boolean>;
     isNPSupported: () => Promise<boolean>;
     getWorkspaceRoot: () => Promise<WorkspaceRootResponse>;
     showErrorMessage: (params: ShowErrorMessageRequest) => void;
+    getCurrentProjectTomlValues: () => Promise<Record<string, any>>;
+
 }
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/common/interfaces.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/common/interfaces.ts
index 06ff50fbf14..6ccd232ffcc 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/common/interfaces.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/common/interfaces.ts
@@ -90,3 +90,14 @@ export interface FileOrDirRequest {
 export interface ShowErrorMessageRequest {
     message: string;
 }
+
+export interface TomlPackage {
+    org: string;
+    name: string;
+    version: string;
+    title: string;
+}
+
+export interface TomlValues {
+    package: TomlPackage;
+}
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/common/rpc-type.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/common/rpc-type.ts
index 8c5c2d67ed2..c1816ec958b 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/common/rpc-type.ts
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/common/rpc-type.ts
@@ -45,7 +45,9 @@ export const executeCommand: RequestType<CommandsRequest, CommandsResponse> = {
 export const runBackgroundTerminalCommand: RequestType<RunExternalCommandRequest, RunExternalCommandResponse> = { method: `${_preFix}/runBackgroundTerminalCommand` };
 export const openExternalUrl: NotificationType<OpenExternalUrlRequest> = { method: `${_preFix}/openExternalUrl` };
 export const selectFileOrDirPath: RequestType<FileOrDirRequest, FileOrDirResponse> = { method: `${_preFix}/selectFileOrDirPath` };
+export const selectFileOrFolderPath: RequestType<void, FileOrDirResponse> = { method: `${_preFix}/selectFileOrFolderPath` };
 export const experimentalEnabled: RequestType<void, boolean> = { method: `${_preFix}/experimentalEnabled` };
 export const isNPSupported: RequestType<void, boolean> = { method: `${_preFix}/isNPSupported` };
 export const getWorkspaceRoot: RequestType<void, WorkspaceRootResponse> = { method: `${_preFix}/getWorkspaceRoot` };
 export const showErrorMessage: NotificationType<ShowErrorMessageRequest> = { method: `${_preFix}/showErrorMessage` };
+export const getCurrentProjectTomlValues: RequestType<void, void> = { method: `${_preFix}/getCurrentProjectTomlValues` };
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/data-mapper/index.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/data-mapper/index.ts
new file mode 100644
index 00000000000..978ec1bc4b2
--- /dev/null
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/data-mapper/index.ts
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import {
+    AddArrayElementRequest,
+    ConvertToQueryRequest,
+    AddClausesRequest,
+    DataMapperModelRequest,
+    DataMapperModelResponse,
+    DataMapperSourceRequest,
+    DataMapperSourceResponse,
+    VisualizableFieldsRequest,
+    VisualizableFieldsResponse,
+    PropertyRequest,
+    PropertyResponse,
+    InitialIDMSourceResponse,
+    InitialIDMSourceRequest,
+    GetDataMapperCodedataRequest,
+    GetDataMapperCodedataResponse,
+    GetSubMappingCodedataRequest,
+    AllDataMapperSourceRequest,
+    AddSubMappingRequest,
+    DeleteMappingRequest,
+    MapWithFnRequest,
+    DMModelRequest,
+    ProcessTypeReferenceResponse,
+    ProcessTypeReferenceRequest,
+    ExpandedDMModelResponse
+} from "../../interfaces/extended-lang-client";
+
+export interface DataMapperAPI {
+    getInitialIDMSource: (params: InitialIDMSourceRequest) => Promise<InitialIDMSourceResponse>;
+    getDataMapperModel: (params: DataMapperModelRequest) => Promise<DataMapperModelResponse>;
+    getDataMapperSource: (params: DataMapperSourceRequest) => Promise<DataMapperSourceResponse>;
+    getVisualizableFields: (params: VisualizableFieldsRequest) => Promise<VisualizableFieldsResponse>;
+    addNewArrayElement: (params: AddArrayElementRequest) => Promise<DataMapperSourceResponse>;
+    convertToQuery: (params: ConvertToQueryRequest) => Promise<DataMapperSourceResponse>;
+    addClauses: (params: AddClausesRequest) => Promise<DataMapperSourceResponse>;
+    addSubMapping: (params: AddSubMappingRequest) => Promise<DataMapperSourceResponse>;
+    deleteMapping: (params: DeleteMappingRequest) => Promise<DataMapperSourceResponse>;
+    mapWithCustomFn: (params: MapWithFnRequest) => Promise<DataMapperSourceResponse>;
+    mapWithTransformFn: (params: MapWithFnRequest) => Promise<DataMapperSourceResponse>;
+    getDataMapperCodedata: (params: GetDataMapperCodedataRequest) => Promise<GetDataMapperCodedataResponse>;
+    getSubMappingCodedata: (params: GetSubMappingCodedataRequest) => Promise<GetDataMapperCodedataResponse>;
+    getAllDataMapperSource: (params: AllDataMapperSourceRequest) => Promise<DataMapperSourceResponse>;
+    getProperty: (params: PropertyRequest) => Promise<PropertyResponse>;
+    getExpandedDMFromDMModel: (params: DMModelRequest) => Promise<ExpandedDMModelResponse>;
+    getProcessTypeReference: (params: ProcessTypeReferenceRequest) => Promise<ProcessTypeReferenceResponse>;
+}
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/data-mapper/rpc-type.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/data-mapper/rpc-type.ts
new file mode 100644
index 00000000000..c02ee3b4e1d
--- /dev/null
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/data-mapper/rpc-type.ts
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ * 
+ * THIS FILE INCLUDES AUTO GENERATED CODE
+ */
+import {
+    AddArrayElementRequest,
+    ConvertToQueryRequest,
+    AddClausesRequest,
+    DataMapperModelRequest,
+    DataMapperModelResponse,
+    DataMapperSourceRequest,
+    DataMapperSourceResponse,
+    VisualizableFieldsRequest,
+    VisualizableFieldsResponse,
+    PropertyRequest,
+    PropertyResponse,
+    InitialIDMSourceResponse,
+    InitialIDMSourceRequest,
+    GetDataMapperCodedataRequest,
+    GetDataMapperCodedataResponse,
+    GetSubMappingCodedataRequest,
+    AllDataMapperSourceRequest,
+    AddSubMappingRequest,
+    DeleteMappingRequest,
+    MapWithFnRequest,
+    DMModelRequest,
+    ProcessTypeReferenceResponse,
+    ProcessTypeReferenceRequest,
+    ExpandedDMModelResponse
+} from "../../interfaces/extended-lang-client";
+import { RequestType } from "vscode-messenger-common";
+
+const _preFix = "data-mapper";
+export const getInitialIDMSource: RequestType<InitialIDMSourceRequest, InitialIDMSourceResponse> = { method: `${_preFix}/getInitialIDMSource` };
+export const getDataMapperModel: RequestType<DataMapperModelRequest, DataMapperModelResponse> = { method: `${_preFix}/getDataMapperModel` };
+export const getDataMapperSource: RequestType<DataMapperSourceRequest, DataMapperSourceResponse> = { method: `${_preFix}/getDataMapperSource` };
+export const getVisualizableFields: RequestType<VisualizableFieldsRequest, VisualizableFieldsResponse> = { method: `${_preFix}/getVisualizableFields` };
+export const addNewArrayElement: RequestType<AddArrayElementRequest, DataMapperSourceResponse> = { method: `${_preFix}/addNewArrayElement` };
+export const convertToQuery: RequestType<ConvertToQueryRequest, DataMapperSourceResponse> = { method: `${_preFix}/convertToQuery` };
+export const addClauses: RequestType<AddClausesRequest, DataMapperSourceResponse> = { method: `${_preFix}/addClauses` };
+export const addSubMapping: RequestType<AddSubMappingRequest, DataMapperSourceResponse> = { method: `${_preFix}/addSubMapping` };
+export const deleteMapping: RequestType<DeleteMappingRequest, DataMapperSourceResponse> = { method: `${_preFix}/deleteMapping` };
+export const mapWithCustomFn: RequestType<MapWithFnRequest, DataMapperSourceResponse> = { method: `${_preFix}/mapWithCustomFn` };
+export const mapWithTransformFn: RequestType<MapWithFnRequest, DataMapperSourceResponse> = { method: `${_preFix}/mapWithTransformFn` };
+export const getDataMapperCodedata: RequestType<GetDataMapperCodedataRequest, GetDataMapperCodedataResponse> = { method: `${_preFix}/getDataMapperCodedata` };
+export const getSubMappingCodedata: RequestType<GetSubMappingCodedataRequest, GetDataMapperCodedataResponse> = { method: `${_preFix}/getSubMappingCodedata` };
+export const getAllDataMapperSource: RequestType<AllDataMapperSourceRequest, DataMapperSourceResponse> = { method: `${_preFix}/getAllDataMapperSource` };
+export const getProperty: RequestType<PropertyRequest, PropertyResponse> = { method: `${_preFix}/getProperty` };
+export const getExpandedDMFromDMModel: RequestType<DMModelRequest, ExpandedDMModelResponse> = { method: `${_preFix}/getExpandedDMFromDMModel` };
+export const getProcessTypeReference: RequestType<ProcessTypeReferenceRequest, ProcessTypeReferenceResponse> = { method: `${_preFix}/getProcessTypeReference` };
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/inline-data-mapper/index.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/inline-data-mapper/index.ts
deleted file mode 100644
index a4062524c5e..00000000000
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/inline-data-mapper/index.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import {
-    AddArrayElementRequest,
-    ConvertToQueryRequest,
-    AddClausesRequest,
-    InlineDataMapperModelRequest,
-    InlineDataMapperModelResponse,
-    InlineDataMapperSourceRequest,
-    InlineDataMapperSourceResponse,
-    VisualizableFieldsRequest,
-    VisualizableFieldsResponse,
-    PropertyRequest,
-    PropertyResponse,
-    InitialIDMSourceResponse,
-    InitialIDMSourceRequest,
-    GetInlineDataMapperCodedataRequest,
-    GetInlineDataMapperCodedataResponse,
-    GetSubMappingCodedataRequest,
-    InlineAllDataMapperSourceRequest,
-    AddSubMappingRequest,
-    DeleteMappingRequest,
-    MapWithCustomFnRequest
-} from "../../interfaces/extended-lang-client";
-
-export interface InlineDataMapperAPI {
-    getInitialIDMSource: (params: InitialIDMSourceRequest) => Promise<InitialIDMSourceResponse>;
-    getDataMapperModel: (params: InlineDataMapperModelRequest) => Promise<InlineDataMapperModelResponse>;
-    getDataMapperSource: (params: InlineDataMapperSourceRequest) => Promise<InlineDataMapperSourceResponse>;
-    getVisualizableFields: (params: VisualizableFieldsRequest) => Promise<VisualizableFieldsResponse>;
-    addNewArrayElement: (params: AddArrayElementRequest) => Promise<InlineDataMapperSourceResponse>;
-    convertToQuery: (params: ConvertToQueryRequest) => Promise<InlineDataMapperSourceResponse>;
-    addClauses: (params: AddClausesRequest) => Promise<InlineDataMapperSourceResponse>;
-    addSubMapping: (params: AddSubMappingRequest) => Promise<InlineDataMapperSourceResponse>;
-    deleteMapping: (params: DeleteMappingRequest) => Promise<InlineDataMapperSourceResponse>;
-    mapWithCustomFn: (params: MapWithCustomFnRequest) => Promise<InlineDataMapperSourceResponse>;
-    getDataMapperCodedata: (params: GetInlineDataMapperCodedataRequest) => Promise<GetInlineDataMapperCodedataResponse>;
-    getSubMappingCodedata: (params: GetSubMappingCodedataRequest) => Promise<GetInlineDataMapperCodedataResponse>;
-    getAllDataMapperSource: (params:InlineAllDataMapperSourceRequest) => Promise<InlineDataMapperSourceResponse>;
-    getProperty: (params: PropertyRequest) => Promise<PropertyResponse>;
-}
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/inline-data-mapper/rpc-type.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/inline-data-mapper/rpc-type.ts
deleted file mode 100644
index 6faf8d7e445..00000000000
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/inline-data-mapper/rpc-type.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- * 
- * THIS FILE INCLUDES AUTO GENERATED CODE
- */
-import {
-    AddArrayElementRequest,
-    ConvertToQueryRequest,
-    AddClausesRequest,
-    InlineDataMapperModelRequest,
-    InlineDataMapperModelResponse,
-    InlineDataMapperSourceRequest,
-    InlineDataMapperSourceResponse,
-    VisualizableFieldsRequest,
-    VisualizableFieldsResponse,
-    PropertyRequest,
-    PropertyResponse,
-    InitialIDMSourceResponse,
-    InitialIDMSourceRequest,
-    GetInlineDataMapperCodedataRequest,
-    GetInlineDataMapperCodedataResponse,
-    GetSubMappingCodedataRequest,
-    InlineAllDataMapperSourceRequest,
-    AddSubMappingRequest,
-    DeleteMappingRequest,
-    MapWithCustomFnRequest
-} from "../../interfaces/extended-lang-client";
-import { RequestType } from "vscode-messenger-common";
-
-const _preFix = "inline-data-mapper";
-export const getInitialIDMSource: RequestType<InitialIDMSourceRequest, InitialIDMSourceResponse> = { method: `${_preFix}/getInitialIDMSource` };
-export const getDataMapperModel: RequestType<InlineDataMapperModelRequest, InlineDataMapperModelResponse> = { method: `${_preFix}/getDataMapperModel` };
-export const getDataMapperSource: RequestType<InlineDataMapperSourceRequest, InlineDataMapperSourceResponse> = { method: `${_preFix}/getDataMapperSource` };
-export const getVisualizableFields: RequestType<VisualizableFieldsRequest, VisualizableFieldsResponse> = { method: `${_preFix}/getVisualizableFields` };
-export const addNewArrayElement: RequestType<AddArrayElementRequest, InlineDataMapperSourceResponse> = { method: `${_preFix}/addNewArrayElement` };
-export const convertToQuery: RequestType<ConvertToQueryRequest, InlineDataMapperSourceResponse> = { method: `${_preFix}/convertToQuery` };
-export const addClauses: RequestType<AddClausesRequest, InlineDataMapperSourceResponse> = { method: `${_preFix}/addClauses` };
-export const addSubMapping: RequestType<AddSubMappingRequest, InlineDataMapperSourceResponse> = { method: `${_preFix}/addSubMapping` };
-export const deleteMapping: RequestType<DeleteMappingRequest, InlineDataMapperSourceResponse> = { method: `${_preFix}/deleteMapping` };
-export const mapWithCustomFn: RequestType<MapWithCustomFnRequest, InlineDataMapperSourceResponse> = { method: `${_preFix}/mapWithCustomFn` };
-export const getDataMapperCodedata: RequestType<GetInlineDataMapperCodedataRequest, GetInlineDataMapperCodedataResponse> = { method: `${_preFix}/getDataMapperCodedata` };
-export const getSubMappingCodedata: RequestType<GetSubMappingCodedataRequest, GetInlineDataMapperCodedataResponse> = { method: `${_preFix}/getSubMappingCodedata` };
-export const getAllDataMapperSource: RequestType<InlineAllDataMapperSourceRequest, InlineDataMapperSourceResponse> = { method: `${_preFix}/getAllDataMapperSource` };
-export const getProperty: RequestType<PropertyRequest, PropertyResponse> = { method: `${_preFix}/getProperty` };
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/migrate-integration/index.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/migrate-integration/index.ts
new file mode 100644
index 00000000000..520a5cc3301
--- /dev/null
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/migrate-integration/index.ts
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ImportIntegrationResponse } from "../../interfaces/extended-lang-client";
+import { GetMigrationToolsResponse, ImportIntegrationRPCRequest, MigrateRequest, MigrationToolPullRequest, OpenMigrationReportRequest, SaveMigrationReportRequest } from "./interfaces";
+
+export interface MigrateIntegrationAPI {
+    getMigrationTools: () => Promise<GetMigrationToolsResponse>;
+    pullMigrationTool: (params: MigrationToolPullRequest) => void;
+    importIntegration: (params: ImportIntegrationRPCRequest) => Promise<ImportIntegrationResponse>;
+    openMigrationReport: (params: OpenMigrationReportRequest) => void;
+    saveMigrationReport: (params: SaveMigrationReportRequest) => void;
+    migrateProject: (params: MigrateRequest) => void;
+}
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/migrate-integration/interfaces.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/migrate-integration/interfaces.ts
new file mode 100644
index 00000000000..01af97bd31b
--- /dev/null
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/migrate-integration/interfaces.ts
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ProjectRequest } from "../bi-diagram/interfaces";
+
+export interface MigrationTool {
+    id: number;
+    title: string;
+    needToPull: boolean;
+    commandName: string;
+    description: string;
+    requiredVersion: string;
+    parameters: Array<{
+        key: string;
+        label: string;
+        description: string;
+        valueType: "boolean" | "string" | "number" | "enum";
+        defaultValue?: boolean | string | number;
+        options?: string[];
+    }>;
+}
+
+export interface GetMigrationToolsResponse {
+    tools: MigrationTool[];
+}
+
+export interface MigrationToolPullRequest {
+    toolName: string;
+    version: string;
+}
+
+export interface ImportIntegrationRPCRequest {
+    commandName: string;
+    packageName: string;
+    sourcePath: string;
+    parameters?: Record<string, any>;
+}
+
+export interface OpenMigrationReportRequest {
+    reportContent: string;
+    fileName: string;
+}
+
+export interface SaveMigrationReportRequest {
+    reportContent: string;
+    defaultFileName: string;
+}
+
+export interface MigrateRequest {
+    project: ProjectRequest;
+    textEdits: {
+        [key: string]: string;
+    };
+}
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/migrate-integration/rpc-type.ts b/workspaces/ballerina/ballerina-core/src/rpc-types/migrate-integration/rpc-type.ts
new file mode 100644
index 00000000000..a328ab47652
--- /dev/null
+++ b/workspaces/ballerina/ballerina-core/src/rpc-types/migrate-integration/rpc-type.ts
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ * 
+ * THIS FILE INCLUDES AUTO GENERATED CODE
+ */
+import { ImportIntegrationResponse } from "../../interfaces/extended-lang-client";
+import { GetMigrationToolsResponse, ImportIntegrationRPCRequest, MigrateRequest, MigrationToolPullRequest, OpenMigrationReportRequest, SaveMigrationReportRequest } from "./interfaces";
+import { RequestType, NotificationType } from "vscode-messenger-common";
+
+const _preFix = "migrate-integration";
+export const getMigrationTools: RequestType<void, GetMigrationToolsResponse> = { method: `${_preFix}/getMigrationTools` };
+export const pullMigrationTool: NotificationType<MigrationToolPullRequest> = { method: `${_preFix}/pullMigrationTool` };
+export const importIntegration: RequestType<ImportIntegrationRPCRequest, ImportIntegrationResponse> = { method: `${_preFix}/importIntegration` };
+export const openMigrationReport: NotificationType<OpenMigrationReportRequest> = { method: `${_preFix}/openMigrationReport` };
+export const saveMigrationReport: NotificationType<SaveMigrationReportRequest> = { method: `${_preFix}/saveMigrationReport` };
+export const migrateProject: NotificationType<MigrateRequest> = { method: `${_preFix}/migrateProject` };
diff --git a/workspaces/ballerina/ballerina-core/src/state-machine-types.ts b/workspaces/ballerina/ballerina-core/src/state-machine-types.ts
index 4a329063405..3311a7a5baa 100644
--- a/workspaces/ballerina/ballerina-core/src/state-machine-types.ts
+++ b/workspaces/ballerina/ballerina-core/src/state-machine-types.ts
@@ -30,7 +30,7 @@ export type MachineStateValue =
     | 'lsReady'
     | 'viewActive'
     | 'disabled'
-    | { viewActive: 'viewInit' } | { viewActive: 'webViewLoaded' } | { viewActive: 'viewReady' } | { viewActive: 'viewEditing' };
+    | { viewActive: 'viewInit' } | { viewActive: 'webViewLoaded' } | { viewActive: 'viewReady' } | { viewActive: 'viewEditing' } | { viewActive: 'resolveMissingDependencies' };
 
 export type PopupMachineStateValue = 'initialize' | 'ready' | {
     open: 'active';
@@ -75,8 +75,10 @@ export enum MACHINE_VIEW {
     BIDiagram = "BI Diagram",
     BIWelcome = "BI Welcome",
     BIProjectForm = "BI Project SKIP",
+    BIImportIntegration = "BI Import Integration SKIP",
     BIComponentView = "BI Component View",
     AddConnectionWizard = "Add Connection Wizard",
+    AddCustomConnector = "Add Custom Connector",
     ViewConfigVariables = "View Config Variables",
     EditConfigVariables = "Edit Config Variables",
     AddConfigVariables = "Add Config Variables",
@@ -92,7 +94,8 @@ export enum MACHINE_VIEW {
     BIServiceClassConfigView = "Service Class Config View",
     BIDataMapperForm = "Add Data Mapper SKIP",
     AIAgentDesigner = "AI Agent Designer",
-    AIChatAgentWizard = "AI Chat Agent Wizard"
+    AIChatAgentWizard = "AI Chat Agent Wizard",
+    ResolveMissingDependencies = "Resolve Missing Dependencies"
 }
 
 export interface MachineEvent {
@@ -219,6 +222,8 @@ export interface ChatError {
 export const stateChanged: NotificationType<MachineStateValue> = { method: 'stateChanged' };
 export const onDownloadProgress: NotificationType<DownloadProgress> = { method: 'onDownloadProgress' };
 export const onChatNotify: NotificationType<ChatNotify> = { method: 'onChatNotify' };
+export const onMigrationToolLogs: NotificationType<string> = { method: 'onMigrationToolLogs' };
+export const onMigrationToolStateChanged: NotificationType<string> = { method: 'onMigrationToolStateChanged' };
 export const projectContentUpdated: NotificationType<boolean> = { method: 'projectContentUpdated' };
 export const getVisualizerLocation: RequestType<void, VisualizerLocation> = { method: 'getVisualizerLocation' };
 export const webviewReady: NotificationType<void> = { method: `webviewReady` };
@@ -238,7 +243,7 @@ export const breakpointChanged: NotificationType<boolean> = { method: 'breakpoin
 export type AIMachineStateValue =
     | 'Initialize'          // (checking auth, first load)
     | 'Unauthenticated'     // (show login window)
-    | { Authenticating: 'determineFlow' | 'ssoFlow' | 'apiKeyFlow' | 'validatingApiKey' } // hierarchical substates
+    | { Authenticating: 'determineFlow' | 'ssoFlow' | 'apiKeyFlow' | 'validatingApiKey' | 'awsBedrockFlow' | 'validatingAwsCredentials' } // hierarchical substates
     | 'Authenticated'       // (ready, main view)
     | 'Disabled';           // (optional: if AI Chat is globally unavailable)
 
@@ -247,6 +252,8 @@ export enum AIMachineEventType {
     LOGIN = 'LOGIN',
     AUTH_WITH_API_KEY = 'AUTH_WITH_API_KEY',
     SUBMIT_API_KEY = 'SUBMIT_API_KEY',
+    AUTH_WITH_AWS_BEDROCK = 'AUTH_WITH_AWS_BEDROCK',
+    SUBMIT_AWS_CREDENTIALS = 'SUBMIT_AWS_CREDENTIALS',
     LOGOUT = 'LOGOUT',
     SILENT_LOGOUT = "SILENT_LOGOUT",
     COMPLETE_AUTH = 'COMPLETE_AUTH',
@@ -260,6 +267,13 @@ export type AIMachineEventMap = {
     [AIMachineEventType.LOGIN]: undefined;
     [AIMachineEventType.AUTH_WITH_API_KEY]: undefined;
     [AIMachineEventType.SUBMIT_API_KEY]: { apiKey: string };
+    [AIMachineEventType.AUTH_WITH_AWS_BEDROCK]: undefined;
+    [AIMachineEventType.SUBMIT_AWS_CREDENTIALS]: { 
+        accessKeyId: string; 
+        secretAccessKey: string; 
+        region: string; 
+        sessionToken?: string; 
+    };
     [AIMachineEventType.LOGOUT]: undefined;
     [AIMachineEventType.SILENT_LOGOUT]: undefined;
     [AIMachineEventType.COMPLETE_AUTH]: undefined;
@@ -276,7 +290,8 @@ export type AIMachineSendableEvent =
 
 export enum LoginMethod {
     BI_INTEL = 'biIntel',
-    ANTHROPIC_KEY = 'anthropic_key'
+    ANTHROPIC_KEY = 'anthropic_key',
+    AWS_BEDROCK = 'aws_bedrock'
 }
 
 interface BIIntelSecrets {
@@ -288,6 +303,13 @@ interface AnthropicKeySecrets {
     apiKey: string;
 }
 
+interface AwsBedrockSecrets {
+    accessKeyId: string;
+    secretAccessKey: string;
+    region: string;
+    sessionToken?: string;
+}
+
 export type AuthCredentials =
     | {
         loginMethod: LoginMethod.BI_INTEL;
@@ -296,6 +318,10 @@ export type AuthCredentials =
     | {
         loginMethod: LoginMethod.ANTHROPIC_KEY;
         secrets: AnthropicKeySecrets;
+    }
+    | {
+        loginMethod: LoginMethod.AWS_BEDROCK;
+        secrets: AwsBedrockSecrets;
     };
 
 export interface AIUserToken {
diff --git a/workspaces/ballerina/ballerina-extension/package.json b/workspaces/ballerina/ballerina-extension/package.json
index 81ffc3eb098..304a328967c 100644
--- a/workspaces/ballerina/ballerina-extension/package.json
+++ b/workspaces/ballerina/ballerina-extension/package.json
@@ -2,7 +2,7 @@
     "name": "ballerina",
     "displayName": "Ballerina",
     "description": "Ballerina Language support, debugging, graphical visualization, AI-based data-mapping and many more.",
-    "version": "5.3.1",
+    "version": "5.3.3",
     "publisher": "wso2",
     "icon": "resources/images/ballerina.png",
     "homepage": "https://wso2.com/ballerina/vscode/docs",
@@ -220,6 +220,26 @@
                     "tags": [
                         "experimental"
                     ]
+                },
+                "ballerina.showAdvancedAiNodes": {
+                    "type": "boolean",
+                    "default": false,
+                    "description": "Show advanced AI nodes (Chunker, Vector Store, Embedding Provider, Recursive Document Chunker) in the Flow Diagram View's node palette."
+                },
+                "ballerina-vscode.trace.server": {
+                    "type": "string",
+                    "default": "off",
+                    "description": "Traces the communication between VS Code and the Ballerina language server.",
+                    "enum": [
+                        "off",
+                        "messages",
+                        "verbose"
+                    ],
+                    "enumDescriptions": [
+                        "No traces",
+                        "Trace request/response messages only",
+                        "Trace request/response messages with parameters and content"
+                    ]
                 }
             }
         },
@@ -612,6 +632,13 @@
                 "group": "navigation",
                 "category": "BI"
             },
+            {
+                "command": "BI.project-explorer.add-custom-connector",
+                "title": "Add Custom Connector",
+                "icon": "$(add)",
+                "group": "navigation",
+                "category": "BI"
+            },
             {
                 "command": "BI.project-explorer.delete",
                 "title": "Delete",
@@ -694,6 +721,11 @@
                 "icon": "$(add)",
                 "group": "navigation",
                 "category": "BI"
+            },
+            {
+                "command": "BI.toggle.trace.logs",
+                "title": "Toggle Trace Logs",
+                "category": "BI"
             }
         ],
         "views": {
@@ -1110,21 +1142,24 @@
         "copyJSLibs": "copyfiles -f ../ballerina-visualizer/build/*.js resources/jslibs"
     },
     "dependencies": {
-        "@types/lodash": "^4.14.200",
+        "@ai-sdk/amazon-bedrock": "^2.2.12",
         "@ai-sdk/anthropic": "^1.2.12",
-        "ai": "^4.3.16",
+        "@types/lodash": "^4.14.200",
         "@vscode/test-electron": "^2.5.2",
         "@vscode/vsce": "^2.22.0",
         "@wso2/ballerina-core": "workspace:*",
         "@wso2/ballerina-visualizer": "workspace:*",
-        "@wso2/wso2-platform-core": "workspace:*",
         "@wso2/font-wso2-vscode": "workspace:*",
         "@wso2/syntax-tree": "workspace:*",
+        "@wso2/wso2-platform-core": "workspace:*",
+        "ai": "^4.3.16",
         "cors-anywhere": "^0.4.4",
         "del-cli": "^5.1.0",
+        "dotenv": "~16.5.0",
         "file-uri-to-path": "^2.0.0",
         "glob": "^7.2.3",
         "handlebars": "~4.7.8",
+        "jwt-decode": "^4.0.0",
         "lodash": "^4.17.21",
         "monaco-languageclient": "0.13.1-next.9",
         "node-fetch": "^3.3.2",
@@ -1132,6 +1167,7 @@
         "portfinder": "^1.0.32",
         "source-map-support": "^0.5.21",
         "toml": "^3.0.0",
+        "uuid": "^11.1.0",
         "vscode-debugadapter": "^1.51.0",
         "vscode-debugprotocol": "^1.51.0",
         "vscode-extension-telemetry": "^0.1.7",
@@ -1144,9 +1180,6 @@
         "vscode-uri": "^3.0.8",
         "xml-js": "^1.6.11",
         "xstate": "^4.38.3",
-        "uuid": "^11.1.0",
-        "jwt-decode": "^4.0.0",
-        "dotenv": "~16.5.0",
         "zod": "^3.25.74"
     },
     "devDependencies": {
@@ -1157,6 +1190,7 @@
         "@types/tcp-port-used": "^1.0.3",
         "@types/vscode": "^1.83.1",
         "@types/vscode-notebook-renderer": "~1.72.2",
+        "adm-zip": "^0.5.16",
         "axios": "^1.6.0",
         "chai": "^4.3.10",
         "copyfiles": "^2.4.1",
@@ -1183,8 +1217,7 @@
         "webpack": "^5.89.0",
         "webpack-cli": "^6.0.1",
         "webpack-merge-and-include-globally": "^2.3.4",
-        "yarn": "^1.22.19",
-        "adm-zip": "^0.5.16"
+        "yarn": "^1.22.19"
     },
     "extensionPack": [
         "be5invis.toml"
diff --git a/workspaces/ballerina/ballerina-extension/src/RPCLayer.ts b/workspaces/ballerina/ballerina-extension/src/RPCLayer.ts
index 573e1298dc2..690545292ac 100644
--- a/workspaces/ballerina/ballerina-extension/src/RPCLayer.ts
+++ b/workspaces/ballerina/ballerina-extension/src/RPCLayer.ts
@@ -38,12 +38,13 @@ import { StateMachinePopup } from './stateMachinePopup';
 import { registerAiAgentRpcHandlers } from './rpc-managers/ai-agent/rpc-handler';
 import { registerConnectorWizardRpcHandlers } from './rpc-managers/connector-wizard/rpc-handler';
 import { registerSequenceDiagramRpcHandlers } from './rpc-managers/sequence-diagram/rpc-handler';
-import { registerInlineDataMapperRpcHandlers } from './rpc-managers/inline-data-mapper/rpc-handler';
+import { registerDataMapperRpcHandlers } from './rpc-managers/data-mapper/rpc-handler';
 import { registerTestManagerRpcHandlers } from './rpc-managers/test-manager/rpc-handler';
 import { registerIcpServiceRpcHandlers } from './rpc-managers/icp-service/rpc-handler';
 import { extension } from './BalExtensionContext';
 import { registerAgentChatRpcHandlers } from './rpc-managers/agent-chat/rpc-handler';
 import { ArtifactsUpdated, ArtifactNotificationHandler } from './utils/project-artifacts-handler';
+import { registerMigrateIntegrationRpcHandlers } from './rpc-managers/migrate-integration/rpc-handler';
 
 export class RPCLayer {
     static _messenger: Messenger = new Messenger();
@@ -96,12 +97,15 @@ export class RPCLayer {
         registerAiPanelRpcHandlers(RPCLayer._messenger);
         RPCLayer._messenger.onRequest(sendAIStateEvent, (event: AIMachineEventType | AIMachineSendableEvent) => AIStateMachine.sendEvent(event));
 
-        // ----- Inline Data Mapper Webview RPC Methods
-        registerInlineDataMapperRpcHandlers(RPCLayer._messenger);
+        // ----- Data Mapper Webview RPC Methods
+        registerDataMapperRpcHandlers(RPCLayer._messenger);
 
         // ----- Popup Views RPC Methods
         RPCLayer._messenger.onRequest(getPopupVisualizerState, () => getPopupContext());
 
+        // ----- Register Integration Migration RPC Methods
+        registerMigrateIntegrationRpcHandlers(RPCLayer._messenger);
+
         // ----- Artifact Updated Common Notification
         RPCLayer._messenger.onRequest(onArtifactUpdatedRequest, (artifactData: ArtifactData) => {
             // Get the notification handler instance
diff --git a/workspaces/ballerina/ballerina-extension/src/core/extended-language-client.ts b/workspaces/ballerina/ballerina-extension/src/core/extended-language-client.ts
index d484b167161..d6661add2e3 100644
--- a/workspaces/ballerina/ballerina-extension/src/core/extended-language-client.ts
+++ b/workspaces/ballerina/ballerina-extension/src/core/extended-language-client.ts
@@ -160,10 +160,10 @@ import {
     AddFunctionRequest,
     AddImportItemResponse,
     UpdateImportsRequest,
-    InlineDataMapperModelRequest,
-    InlineDataMapperSourceRequest,
-    InlineDataMapperSourceResponse,
-    InlineDataMapperModelResponse,
+    DataMapperModelRequest,
+    DataMapperSourceRequest,
+    DataMapperSourceResponse,
+    DataMapperModelResponse,
     VisualizableFieldsRequest,
     VisualizableFieldsResponse,
     AddArrayElementRequest,
@@ -241,20 +241,31 @@ import {
     GetConfigVariableNodeTemplateRequest,
     FunctionFromSourceRequest,
     FunctionFromSourceResponse,
-    GetInlineDataMapperCodedataRequest,
-    GetInlineDataMapperCodedataResponse,
+    GetDataMapperCodedataRequest,
+    GetDataMapperCodedataResponse,
     GetSubMappingCodedataRequest,
     AddSubMappingRequest,
     DeleteMappingRequest,
-    MapWithCustomFnRequest,
+    MapWithFnRequest,
     AIToolResponse,
-    AIToolRequest
+    AIToolRequest,
+    VerifyTypeDeleteRequest,
+    VerifyTypeDeleteResponse,
+    DeleteTypeRequest,
+    DeleteTypeResponse,
+    ImportIntegrationRequest,
+    ImportIntegrationResponse,
+    onMigrationToolStateChanged,
+    onMigrationToolLogs,
+    GetMigrationToolsResponse
 } from "@wso2/ballerina-core";
 import { BallerinaExtension } from "./index";
 import { debug, handlePullModuleProgress } from "../utils";
 import { CMP_LS_CLIENT_COMPLETIONS, CMP_LS_CLIENT_DIAGNOSTICS, getMessageObject, sendTelemetryEvent, TM_EVENT_LANG_CLIENT } from "../features/telemetry";
 import { DefinitionParams, InitializeParams, InitializeResult, Location, LocationLink, TextDocumentPositionParams } from 'vscode-languageserver-protocol';
 import { updateProjectArtifacts } from "../utils/project-artifacts";
+import { RPCLayer } from "../../src/RPCLayer";
+import { VisualizerWebview } from "../../src/views/visualizer/webview";
 
 export const CONNECTOR_LIST_CACHE = "CONNECTOR_LIST_CACHE";
 export const HTTP_CONNECTOR_LIST_CACHE = "HTTP_CONNECTOR_LIST_CACHE";
@@ -289,6 +300,7 @@ enum EXTENDED_APIS {
     EXAMPLE_LIST = 'ballerinaExample/list',
     PERF_ANALYZER_RESOURCES_ENDPOINTS = 'performanceAnalyzer/getResourcesWithEndpoints',
     RESOLVE_MISSING_DEPENDENCIES = 'ballerinaDocument/resolveMissingDependencies',
+    RESOLVE_MODULE_DEPENDENCIES = 'ballerinaDocument/resolveModuleDependencies',
     BALLERINA_TO_OPENAPI = 'openAPILSExtension/generateOpenAPI',
     NOTEBOOK_RESULT = "balShell/getResult",
     NOTEBOOK_FILE_SOURCE = "balShell/getShellFileSource",
@@ -312,11 +324,15 @@ enum EXTENDED_APIS {
     BI_SOURCE_CODE = 'flowDesignService/getSourceCode',
     BI_DELETE_NODE = 'flowDesignService/deleteFlowNode',
     BI_DELETE_BY_COMPONENT_INFO = 'flowDesignService/deleteComponent',
+    BI_VERIFY_TYPE_DELETE = 'typesManager/verifyTypeDelete',
+    BI_DELETE_TYPE = 'typesManager/deleteType',
     BI_AVAILABLE_NODES = 'flowDesignService/getAvailableNodes',
     BI_AVAILABLE_MODEL_PROVIDERS = 'flowDesignService/getAvailableModelProviders',
     BI_AVAILABLE_VECTOR_STORES = 'flowDesignService/getAvailableVectorStores',
     BI_AVAILABLE_EMBEDDING_PROVIDERS = 'flowDesignService/getAvailableEmbeddingProviders',
     BI_AVAILABLE_VECTOR_KNOWLEDGE_BASES = 'flowDesignService/getAvailableVectorKnowledgeBases',
+    BI_AVAILABLE_DATA_LOADERS = 'flowDesignService/getAvailableDataLoaders',
+    BI_AVAILABLE_CHUNKS = 'flowDesignService/getAvailableChunkers',
     BI_NODE_TEMPLATE = 'flowDesignService/getNodeTemplate',
     BI_GEN_OPEN_API = 'flowDesignService/generateServiceFromOpenApiContract',
     BI_MODULE_NODES = 'flowDesignService/getModuleNodes',
@@ -333,6 +349,7 @@ enum EXTENDED_APIS {
     DATA_MAPPER_ADD_SUB_MAPPING = 'dataMapper/addSubMapping',
     DATA_MAPPER_DELETE_MAPPING = 'dataMapper/deleteMapping',
     DATA_MAPPER_MAP_WITH_CUSTOM_FN = 'dataMapper/customFunction',
+    DATA_MAPPER_MAP_WITH_TRANSFORM_FN = 'dataMapper/transformationFunction',
     DATA_MAPPER_CODEDATA = 'dataMapper/nodePosition',
     DATA_MAPPER_SUB_MAPPING_CODEDATA = 'dataMapper/subMapping',
     DATA_MAPPER_PROPERTY = 'dataMapper/fieldPosition',
@@ -416,7 +433,12 @@ enum EXTENDED_APIS {
     GET_ARTIFACTS = 'designModelService/artifacts',
     PUBLISH_ARTIFACTS = 'designModelService/publishArtifacts',
     COPILOT_ALL_LIBRARIES = 'copilotLibraryManager/getLibrariesList',
-    COPILOT_FILTER_LIBRARIES = 'copilotLibraryManager/getFilteredLibraries'
+    COPILOT_FILTER_LIBRARIES = 'copilotLibraryManager/getFilteredLibraries',
+    GET_MIGRATION_TOOLS = 'projectService/getMigrationTools',
+    TIBCO_TO_BI = 'projectService/importTibco',
+    MULE_TO_BI = 'projectService/importMule',
+    MIGRATION_TOOL_STATE = 'projectService/stateCallback',
+    MIGRATION_TOOL_LOG = 'projectService/logCallback',
 }
 
 enum EXTENDED_APIS_ORG {
@@ -515,6 +537,32 @@ export class ExtendedLangClient extends LanguageClient implements ExtendedLangCl
         });
     }
 
+    registerMigrationToolCallbacks(): void {
+        this.onNotification(EXTENDED_APIS.MIGRATION_TOOL_STATE, (res: ArtifactsNotification) => {
+            try {
+                RPCLayer._messenger.sendNotification(
+                    onMigrationToolStateChanged,
+                    { type: "webview", webviewType: VisualizerWebview.viewType },
+                    res
+                );
+            } catch (error) {
+                console.error("Error in MIGRATION_TOOL_STATE handler:", error);
+            }
+        });
+
+        this.onNotification(EXTENDED_APIS.MIGRATION_TOOL_LOG, (res: ArtifactsNotification) => {
+            try {
+                RPCLayer._messenger.sendNotification(
+                    onMigrationToolLogs,
+                    { type: "webview", webviewType: VisualizerWebview.viewType },
+                    res
+                );
+            } catch (error) {
+                console.error("Error in MIGRATION_TOOL_LOG handler:", error);
+            }
+        });
+    }
+
     async getProjectArtifacts(params: ProjectArtifactsRequest): Promise<ProjectArtifacts> {
         return this.sendRequest<ProjectArtifacts>(EXTENDED_APIS.GET_ARTIFACTS, params);
     }
@@ -695,48 +743,52 @@ export class ExtendedLangClient extends LanguageClient implements ExtendedLangCl
         return this.sendRequest<VisibleVariableTypes>(EXTENDED_APIS.VISIBLE_VARIABLE_TYPES, params);
     }
 
-    async getInlineDataMapperMappings(params: InlineDataMapperModelRequest): Promise<InlineDataMapperModelResponse | NOT_SUPPORTED_TYPE> {
-        return this.sendRequest<InlineDataMapperModelResponse>(EXTENDED_APIS.DATA_MAPPER_MAPPINGS, params);
+    async getDataMapperMappings(params: DataMapperModelRequest): Promise<DataMapperModelResponse | NOT_SUPPORTED_TYPE> {
+        return this.sendRequest<DataMapperModelResponse>(EXTENDED_APIS.DATA_MAPPER_MAPPINGS, params);
     }
 
-    async getInlineDataMapperSource(params: InlineDataMapperSourceRequest): Promise<InlineDataMapperSourceResponse> {
-        return this.sendRequest<InlineDataMapperSourceResponse>(EXTENDED_APIS.DATA_MAPPER_GET_SOURCE, params);
+    async getDataMapperSource(params: DataMapperSourceRequest): Promise<DataMapperSourceResponse> {
+        return this.sendRequest<DataMapperSourceResponse>(EXTENDED_APIS.DATA_MAPPER_GET_SOURCE, params);
     }
 
     async getVisualizableFields(params: VisualizableFieldsRequest): Promise<VisualizableFieldsResponse | NOT_SUPPORTED_TYPE> {
         return this.sendRequest<VisualizableFieldsResponse>(EXTENDED_APIS.DATA_MAPPER_VISUALIZABLE, params);
     }
 
-    async addArrayElement(params: AddArrayElementRequest): Promise<InlineDataMapperSourceResponse> {
-        return this.sendRequest<InlineDataMapperSourceResponse>(EXTENDED_APIS.DATA_MAPPER_ADD_ELEMENT, params);
+    async addArrayElement(params: AddArrayElementRequest): Promise<DataMapperSourceResponse> {
+        return this.sendRequest<DataMapperSourceResponse>(EXTENDED_APIS.DATA_MAPPER_ADD_ELEMENT, params);
     }
 
-    async convertToQuery(params: ConvertToQueryRequest): Promise<InlineDataMapperSourceResponse> {
-        return this.sendRequest<InlineDataMapperSourceResponse>(EXTENDED_APIS.DATA_MAPPER_CONVERT_TO_QUERY, params);
+    async convertToQuery(params: ConvertToQueryRequest): Promise<DataMapperSourceResponse> {
+        return this.sendRequest<DataMapperSourceResponse>(EXTENDED_APIS.DATA_MAPPER_CONVERT_TO_QUERY, params);
     }
 
-    async addClauses(params: AddClausesRequest): Promise<InlineDataMapperSourceResponse> {
-        return this.sendRequest<InlineDataMapperSourceResponse>(EXTENDED_APIS.DATA_MAPPER_ADD_CLAUSES, params);
+    async addClauses(params: AddClausesRequest): Promise<DataMapperSourceResponse> {
+        return this.sendRequest<DataMapperSourceResponse>(EXTENDED_APIS.DATA_MAPPER_ADD_CLAUSES, params);
     }
 
-    async addSubMapping(params: AddSubMappingRequest): Promise<InlineDataMapperSourceResponse> {
-        return this.sendRequest<InlineDataMapperSourceResponse>(EXTENDED_APIS.DATA_MAPPER_ADD_SUB_MAPPING, params);
+    async addSubMapping(params: AddSubMappingRequest): Promise<DataMapperSourceResponse> {
+        return this.sendRequest<DataMapperSourceResponse>(EXTENDED_APIS.DATA_MAPPER_ADD_SUB_MAPPING, params);
     }
 
-    async deleteMapping(params: DeleteMappingRequest): Promise<InlineDataMapperSourceResponse> {
-        return this.sendRequest<InlineDataMapperSourceResponse>(EXTENDED_APIS.DATA_MAPPER_DELETE_MAPPING, params);
+    async deleteMapping(params: DeleteMappingRequest): Promise<DataMapperSourceResponse> {
+        return this.sendRequest<DataMapperSourceResponse>(EXTENDED_APIS.DATA_MAPPER_DELETE_MAPPING, params);
     }
 
-    async mapWithCustomFn(params: MapWithCustomFnRequest): Promise<InlineDataMapperSourceResponse> {
-        return this.sendRequest<InlineDataMapperSourceResponse>(EXTENDED_APIS.DATA_MAPPER_MAP_WITH_CUSTOM_FN, params);
+    async mapWithCustomFn(params: MapWithFnRequest): Promise<DataMapperSourceResponse> {
+        return this.sendRequest<DataMapperSourceResponse>(EXTENDED_APIS.DATA_MAPPER_MAP_WITH_CUSTOM_FN, params);
     }
 
-    async getDataMapperCodedata(params: GetInlineDataMapperCodedataRequest): Promise<GetInlineDataMapperCodedataResponse> {
-        return this.sendRequest<GetInlineDataMapperCodedataResponse>(EXTENDED_APIS.DATA_MAPPER_CODEDATA, params);
+    async mapWithTransformFn(params: MapWithFnRequest): Promise<DataMapperSourceResponse> {
+        return this.sendRequest<DataMapperSourceResponse>(EXTENDED_APIS.DATA_MAPPER_MAP_WITH_TRANSFORM_FN, params);
     }
 
-    async getSubMappingCodedata(params: GetSubMappingCodedataRequest): Promise<GetInlineDataMapperCodedataResponse> {
-        return this.sendRequest<GetInlineDataMapperCodedataResponse>(EXTENDED_APIS.DATA_MAPPER_SUB_MAPPING_CODEDATA, params);
+    async getDataMapperCodedata(params: GetDataMapperCodedataRequest): Promise<GetDataMapperCodedataResponse> {
+        return this.sendRequest<GetDataMapperCodedataResponse>(EXTENDED_APIS.DATA_MAPPER_CODEDATA, params);
+    }
+
+    async getSubMappingCodedata(params: GetSubMappingCodedataRequest): Promise<GetDataMapperCodedataResponse> {
+        return this.sendRequest<GetDataMapperCodedataResponse>(EXTENDED_APIS.DATA_MAPPER_SUB_MAPPING_CODEDATA, params);
     }
 
     async getProperty(params: PropertyRequest): Promise<PropertyResponse | NOT_SUPPORTED_TYPE> {
@@ -915,7 +967,12 @@ export class ExtendedLangClient extends LanguageClient implements ExtendedLangCl
 
     async resolveMissingDependencies(req: SyntaxTreeParams): Promise<SyntaxTree | NOT_SUPPORTED_TYPE> {
         handlePullModuleProgress();
-        return this.sendRequest(EXTENDED_APIS.RESOLVE_MISSING_DEPENDENCIES, req);
+        const response = await this.sendRequest(EXTENDED_APIS.RESOLVE_MISSING_DEPENDENCIES, req);
+        return response;
+    }
+
+    async resolveModuleDependencies(req: SyntaxTreeParams): Promise<SyntaxTree | NOT_SUPPORTED_TYPE> {
+        return this.sendRequest(EXTENDED_APIS.RESOLVE_MODULE_DEPENDENCIES, req);
     }
 
     async convertToOpenAPI(params: OpenAPIConverterParams): Promise<OpenAPISpec | NOT_SUPPORTED_TYPE> {
@@ -954,6 +1011,14 @@ export class ExtendedLangClient extends LanguageClient implements ExtendedLangCl
         return this.sendRequest<BIAvailableNodesResponse>(EXTENDED_APIS.BI_AVAILABLE_VECTOR_KNOWLEDGE_BASES, params);
     }
 
+    async getAvailableDataLoaders(params: BIAvailableNodesRequest): Promise<BIAvailableNodesResponse> {
+        return this.sendRequest<BIAvailableNodesResponse>(EXTENDED_APIS.BI_AVAILABLE_DATA_LOADERS, params);
+    }
+
+    async getAvailableChunkers(params: BIAvailableNodesRequest): Promise<BIAvailableNodesResponse> {
+        return this.sendRequest<BIAvailableNodesResponse>(EXTENDED_APIS.BI_AVAILABLE_CHUNKS, params);
+    }
+
     async getEnclosedFunctionDef(params: BIGetEnclosedFunctionRequest): Promise<BIGetEnclosedFunctionResponse> {
         return this.sendRequest<BIGetEnclosedFunctionResponse>(EXTENDED_APIS.BI_GET_ENCLOSED_FUNCTION, params);
     }
@@ -1010,6 +1075,14 @@ export class ExtendedLangClient extends LanguageClient implements ExtendedLangCl
         return this.sendRequest<BISourceCodeResponse>(EXTENDED_APIS.BI_DELETE_BY_COMPONENT_INFO, params);
     }
 
+    async verifyTypeDelete(params: VerifyTypeDeleteRequest): Promise<VerifyTypeDeleteResponse> {
+        return this.sendRequest<VerifyTypeDeleteResponse>(EXTENDED_APIS.BI_VERIFY_TYPE_DELETE, params);
+    }
+
+    async deleteType(params: DeleteTypeRequest): Promise<DeleteTypeResponse> {
+        return this.sendRequest<DeleteTypeResponse>(EXTENDED_APIS.BI_DELETE_TYPE, params);
+    }
+
     async getSequenceDiagramModel(params: SequenceModelRequest): Promise<SequenceModelResponse> {
         // const isSupported = await this.isExtendedServiceSupported(EXTENDED_APIS.SEQUENCE_DIAGRAM_MODEL);
         return this.sendRequest(EXTENDED_APIS.SEQUENCE_DIAGRAM_MODEL, params);
@@ -1247,6 +1320,19 @@ export class ExtendedLangClient extends LanguageClient implements ExtendedLangCl
         return this.sendRequest<CopilotFilterLibrariesResponse>(EXTENDED_APIS.COPILOT_FILTER_LIBRARIES, params);
     }
 
+    async getMigrationTools(): Promise<GetMigrationToolsResponse> {
+        return this.sendRequest<GetMigrationToolsResponse>(EXTENDED_APIS.GET_MIGRATION_TOOLS);
+    }
+
+    async importTibcoToBI(params: ImportIntegrationRequest): Promise<ImportIntegrationResponse> {
+        debug(`Importing Tibco to Ballerina: ${JSON.stringify(params)}`);
+        return this.sendRequest<ImportIntegrationResponse>(EXTENDED_APIS.TIBCO_TO_BI, params);
+    }
+
+    async importMuleToBI(params: ImportIntegrationRequest): Promise<ImportIntegrationResponse> {
+        debug(`Importing Mule to Ballerina: ${JSON.stringify(params)}`);
+        return this.sendRequest<ImportIntegrationResponse>(EXTENDED_APIS.MULE_TO_BI, params);
+    }
 
     // <------------ BI APIS END --------------->
 
diff --git a/workspaces/ballerina/ballerina-extension/src/core/extension.ts b/workspaces/ballerina/ballerina-extension/src/core/extension.ts
index b4d625a1223..96b4e1b3bf3 100644
--- a/workspaces/ballerina/ballerina-extension/src/core/extension.ts
+++ b/workspaces/ballerina/ballerina-extension/src/core/extension.ts
@@ -33,7 +33,7 @@ import { exec, spawnSync } from 'child_process';
 import { LanguageClientOptions, State as LS_STATE, RevealOutputChannelOn, ServerOptions } from "vscode-languageclient/node";
 import { getServerOptions } from '../utils/server/server';
 import { ExtendedLangClient } from './extended-language-client';
-import { debug, log, getOutputChannel, outputChannel, isWindows, isSupportedVersion, VERSION, isSupportedSLVersion } from '../utils';
+import { debug, log, getOutputChannel, outputChannel, isWindows, isWSL, isSupportedVersion, VERSION, isSupportedSLVersion } from '../utils';
 import { AssertionError } from "assert";
 import {
     BALLERINA_HOME, ENABLE_ALL_CODELENS, ENABLE_TELEMETRY, ENABLE_SEMANTIC_HIGHLIGHTING, OVERRIDE_BALLERINA_HOME,
@@ -48,7 +48,8 @@ import {
     SHOW_LIBRARY_CONFIG_VARIABLES,
     LANG_SERVER_PATH,
     USE_BALLERINA_CLI_LANG_SERVER,
-    INCLUDE_CURRENT_ORGANIZATION_IN_SEARCH
+    INCLUDE_CURRENT_ORGANIZATION_IN_SEARCH,
+    SHOW_ADVANCED_AI_NODES
 }
     from "./preferences";
 import TelemetryReporter from "vscode-extension-telemetry";
@@ -155,7 +156,6 @@ export class BallerinaExtension {
     private isOpenedOnce: boolean;
     private ballerinaUserHome: string;
     private ballerinaUserHomeName: string;
-    private ballerinaIntegratorVersion: string;
     private ballerinaIntegratorReleaseUrl: string;
     private ballerinaHomeCustomDirName: string;
     private ballerinaInstallationDir: string;
@@ -163,66 +163,162 @@ export class BallerinaExtension {
     private ballerinaUpdateToolUserAgent: string;
 
     constructor() {
-        this.ballerinaHome = '';
-        this.ballerinaCmd = '';
-        this.ballerinaVersion = '';
-        this.biSupported = false;
-        this.isNPSupported = false;
-        this.isPersist = false;
-        this.ballerinaUserHomeName = '.ballerina';
-        this.ballerinaUserHome = path.join(this.getUserHomeDirectory(), this.ballerinaUserHomeName);
-        this.ballerinaIntegratorReleaseUrl = "https://api.github.com/repos/ballerina-platform/ballerina-distribution/releases";
-        this.ballerinaHomeCustomDirName = "ballerina-home";
-        this.ballerinaInstallationDir = path.join(this.getBallerinaUserHome(), this.ballerinaHomeCustomDirName);
-
-        this.updateToolServerUrl = "https://api.central.ballerina.io/2.0/update-tool";
-        if (this.overrideBallerinaHome()) {
-            this.updateToolServerUrl = "https://api.staging-central.ballerina.io/2.0/update-tool";
-        }
-        this.ballerinaUpdateToolUserAgent = this.getUpdateToolUserAgent();
-        this.showStatusBarItem();
-        // Load the extension
-        this.extension = extensions.getExtension(EXTENSION_ID)!;
-        this.clientOptions = {
-            documentSelector: [{ scheme: 'file', language: LANGUAGE.BALLERINA }, {
-                scheme: 'file', language:
-                    LANGUAGE.TOML
-            }],
-            synchronize: { configurationSection: LANGUAGE.BALLERINA },
-            outputChannel: getOutputChannel(),
-            revealOutputChannelOn: RevealOutputChannelOn.Never,
-            initializationOptions: {
-                "enableSemanticHighlighting": <string>workspace.getConfiguration().get(ENABLE_SEMANTIC_HIGHLIGHTING),
-                "enableBackgroundDriftCheck": <string>workspace.getConfiguration().get(ENABLE_BACKGROUND_DRIFT_CHECK),
-                "enableInlayHints": <string>workspace.getConfiguration().get(ENABLE_INLAY_HINTS),
-                "supportBalaScheme": "true",
-                "supportQuickPick": "true",
-                "supportPositionalRenamePopup": "true"
+        debug("[EXTENSION] Starting constructor initialization...");
+
+        try {
+            // Initialize basic properties
+            this.ballerinaHome = '';
+            this.ballerinaCmd = '';
+            this.ballerinaVersion = '';
+            this.biSupported = false;
+            this.isNPSupported = false;
+            this.isPersist = false;
+            this.ballerinaUserHomeName = '.ballerina';
+
+            debug("[EXTENSION] Basic properties initialized");
+
+            // Set up directory paths
+            try {
+                const userHomeDir = this.getUserHomeDirectory();
+                debug(`[EXTENSION] User home directory: ${userHomeDir}`);
+                this.ballerinaUserHome = path.join(userHomeDir, this.ballerinaUserHomeName);
+                debug(`[EXTENSION] Ballerina user home: ${this.ballerinaUserHome}`);
+            } catch (error) {
+                debug(`[EXTENSION] Error setting up user home directory: ${error}`);
+                throw error;
             }
-        };
 
-        this.telemetryReporter = createTelemetryReporter(this);
-        this.documentContext = new DocumentContext();
-        this.codeServerContext = {
-            codeServerEnv: this.isCodeServerEnv(),
-            manageChoreoRedirectUri: process.env.VSCODE_CHOREO_DEPLOY_URI,
-            infoMessageStatus: {
-                sourceControlMessage: true,
-                messageFirstEdit: true
+            this.ballerinaIntegratorReleaseUrl = "https://api.github.com/repos/ballerina-platform/ballerina-distribution/releases";
+            this.ballerinaHomeCustomDirName = "ballerina-home";
+
+            try {
+                this.ballerinaInstallationDir = path.join(this.getBallerinaUserHome(), this.ballerinaHomeCustomDirName);
+                debug(`[EXTENSION] Ballerina installation directory: ${this.ballerinaInstallationDir}`);
+            } catch (error) {
+                debug(`[EXTENSION] Error setting installation directory: ${error}`);
+                throw error;
             }
-        };
-        if (this.isCodeServerEnv()) {
-            commands.executeCommand('workbench.action.closeAllEditors');
-            this.showCookieConsentMessage();
-            this.getCodeServerContext().telemetryTracker = new TelemetryTracker();
-        }
-        this.webviewContext = { isOpen: false };
-        this.perfForecastContext = {
-            infoMessageStatus: {
-                signinChoreo: true
+
+            // Set up server URLs
+            this.updateToolServerUrl = "https://api.central.ballerina.io/2.0/update-tool";
+            try {
+                if (this.overrideBallerinaHome()) {
+                    this.updateToolServerUrl = "https://api.staging-central.ballerina.io/2.0/update-tool";
+                    debug("[EXTENSION] Using staging update tool server URL");
+                }
+                debug(`[EXTENSION] Update tool server URL: ${this.updateToolServerUrl}`);
+            } catch (error) {
+                debug(`[EXTENSION] Error setting update tool server URL: ${error}`);
             }
-        };
-        this.ballerinaConfigPath = '';
+
+            try {
+                this.ballerinaUpdateToolUserAgent = this.getUpdateToolUserAgent();
+                debug(`[EXTENSION] Update tool user agent: ${this.ballerinaUpdateToolUserAgent}`);
+            } catch (error) {
+                debug(`[EXTENSION] Error getting update tool user agent: ${error}`);
+                this.ballerinaUpdateToolUserAgent = null;
+            }
+
+            try {
+                this.showStatusBarItem();
+                debug("[EXTENSION] Status bar item initialized");
+            } catch (error) {
+                debug(`[EXTENSION] Error initializing status bar: ${error}`);
+            }
+
+            // Load the extension
+            try {
+                this.extension = extensions.getExtension(EXTENSION_ID)!;
+                if (this.extension) {
+                    debug(`[EXTENSION] Extension loaded successfully: ${EXTENSION_ID}`);
+                } else {
+                    throw new Error(`Extension ${EXTENSION_ID} not found`);
+                }
+            } catch (error) {
+                debug(`[EXTENSION] Error loading extension: ${error}`);
+                throw error;
+            }
+
+            // Set up client options
+            try {
+                this.clientOptions = {
+                    documentSelector: [{ scheme: 'file', language: LANGUAGE.BALLERINA }, {
+                        scheme: 'file', language:
+                            LANGUAGE.TOML
+                    }],
+                    synchronize: { configurationSection: LANGUAGE.BALLERINA },
+                    outputChannel: getOutputChannel(),
+                    revealOutputChannelOn: RevealOutputChannelOn.Never,
+                    initializationOptions: {
+                        "enableSemanticHighlighting": <string>workspace.getConfiguration().get(ENABLE_SEMANTIC_HIGHLIGHTING),
+                        "enableBackgroundDriftCheck": <string>workspace.getConfiguration().get(ENABLE_BACKGROUND_DRIFT_CHECK),
+                        "enableInlayHints": <string>workspace.getConfiguration().get(ENABLE_INLAY_HINTS),
+                        "supportBalaScheme": "true",
+                        "supportQuickPick": "true",
+                        "supportPositionalRenamePopup": "true"
+                    }
+                };
+                debug("[EXTENSION] Client options configured");
+            } catch (error) {
+                debug(`[EXTENSION] Error setting up client options: ${error}`);
+                throw error;
+            }
+
+            try {
+                this.telemetryReporter = createTelemetryReporter(this);
+                debug("[EXTENSION] Telemetry reporter created");
+            } catch (error) {
+                debug(`[EXTENSION] Error creating telemetry reporter: ${error}`);
+                // Don't throw here, telemetry is not critical
+            }
+
+            try {
+                this.documentContext = new DocumentContext();
+                debug("[EXTENSION] Document context initialized");
+            } catch (error) {
+                debug(`[EXTENSION] Error initializing document context: ${error}`);
+                throw error;
+            }
+
+            try {
+                this.codeServerContext = {
+                    codeServerEnv: this.isCodeServerEnv(),
+                    manageChoreoRedirectUri: process.env.VSCODE_CHOREO_DEPLOY_URI,
+                    infoMessageStatus: {
+                        sourceControlMessage: true,
+                        messageFirstEdit: true
+                    }
+                };
+                debug(`[EXTENSION] Code server context initialized. Code server env: ${this.codeServerContext.codeServerEnv}`);
+            } catch (error) {
+                debug(`[EXTENSION] Error initializing code server context: ${error}`);
+                throw error;
+            }
+
+            if (this.isCodeServerEnv()) {
+                try {
+                    commands.executeCommand('workbench.action.closeAllEditors');
+                    this.showCookieConsentMessage();
+                    this.getCodeServerContext().telemetryTracker = new TelemetryTracker();
+                    debug("[EXTENSION] Code server environment setup completed");
+                } catch (error) {
+                    debug(`[EXTENSION] Error setting up code server environment: ${error}`);
+                }
+            }
+
+            this.webviewContext = { isOpen: false };
+            this.perfForecastContext = {
+                infoMessageStatus: {
+                    signinChoreo: true
+                }
+            };
+            this.ballerinaConfigPath = '';
+
+            debug("[EXTENSION] Constructor completed successfully");
+        } catch (error) {
+            debug(`[EXTENSION] Fatal error in constructor: ${error}`);
+            throw error;
+        }
     }
 
     setContext(context: ExtensionContext) {
@@ -230,137 +326,285 @@ export class BallerinaExtension {
     }
 
     init(_onBeforeInit: Function): Promise<void> {
-        if (extensions.getExtension(PREV_EXTENSION_ID)) {
-            this.showUninstallOldVersion();
-        }
-        // Register show logs command.
-        const showLogs = commands.registerCommand('ballerina.showLogs', () => {
-            outputChannel.show();
-        });
-        this.context!.subscriptions.push(showLogs);
+        debug("[INIT] Starting extension initialization...");
+        debug(`[INIT] Platform: ${process.platform}, Architecture: ${process.arch}`);
+        debug(`[INIT] Node version: ${process.version}`);
+        debug(`[INIT] VS Code version: ${env.appName} ${env.appHost}`);
+        debug(`[INIT] Extension version: ${this.getVersion()}`);
+
+        // Log environment information for WSL debugging
+        debug(`[INIT] Environment variables:`);
+        debug(`[INIT] WSL_DISTRO_NAME: ${process.env.WSL_DISTRO_NAME || 'Not set'}`);
+        debug(`[INIT] WSLENV: ${process.env.WSLENV || 'Not set'}`);
+        debug(`[INIT] PATH: ${process.env.PATH || 'Not set'}`);
+        debug(`[INIT] HOME: ${process.env.HOME || 'Not set'}`);
+        debug(`[INIT] USERPROFILE: ${process.env.USERPROFILE || 'Not set'}`);
 
-        commands.registerCommand(showMessageInstallBallerinaCommand, () => {
-            this.showMessageInstallBallerina();
-        });
+        try {
+            // Check for old extension version
+            if (extensions.getExtension(PREV_EXTENSION_ID)) {
+                debug("[INIT] Found old extension version, showing uninstall message");
+                this.showUninstallOldVersion();
+            } else {
+                debug("[INIT] No old extension version found");
+            }
 
-        commands.registerCommand('ballerina.setup-ballerina', () => { // Install ballerina from central for new users. This should set the ballerina to system path
-            this.installBallerina();
-        });
+            // Register show logs command
+            try {
+                const showLogs = commands.registerCommand('ballerina.showLogs', () => {
+                    outputChannel.show();
+                });
+                this.context!.subscriptions.push(showLogs);
+                debug("[INIT] Show logs command registered successfully");
+            } catch (error) {
+                debug(`[INIT] Error registering show logs command: ${error}`);
+                throw error;
+            }
 
-        commands.registerCommand('ballerina.update-ballerina', () => { // Update release pack from ballerina update tool with terminal
-            this.updateBallerina();
-        });
+            // Register other commands
+            try {
+                commands.registerCommand(showMessageInstallBallerinaCommand, () => {
+                    this.showMessageInstallBallerina();
+                });
+                debug("[INIT] Install Ballerina message command registered");
 
-        commands.registerCommand('ballerina.update-ballerina-visually', () => { // Update release pack from ballerina update tool with webview
-            this.updateBallerinaVisually();
-        });
+                commands.registerCommand('ballerina.setup-ballerina', () => {
+                    this.installBallerina();
+                });
+                debug("[INIT] Setup Ballerina command registered");
 
-        try {
-            // Register pre init handlers.
-            this.registerPreInitHandlers();
-
-            // Check if ballerina home is set.
-            if (this.overrideBallerinaHome()) {
-                if (!this.getConfiguredBallerinaHome()) {
-                    const message = "Trying to get ballerina version without setting ballerina home.";
-                    sendTelemetryEvent(this, TM_EVENT_ERROR_INVALID_BAL_HOME_CONFIGURED, CMP_EXTENSION_CORE, getMessageObject(message));
-                    throw new AssertionError({
-                        message: message
-                    });
-                }
+                commands.registerCommand('ballerina.update-ballerina', () => {
+                    this.updateBallerina();
+                });
+                debug("[INIT] Update Ballerina command registered");
+
+                commands.registerCommand('ballerina.update-ballerina-visually', () => {
+                    this.updateBallerinaVisually();
+                });
+                debug("[INIT] Update Ballerina visually command registered");
+            } catch (error) {
+                debug(`[INIT] Error registering commands: ${error}`);
+                throw error;
+            }
+
+            // Register pre init handlers
+            try {
+                debug("[INIT] Registering pre-initialization handlers...");
+                this.registerPreInitHandlers();
+                debug("[INIT] Pre-initialization handlers registered successfully");
+            } catch (error) {
+                debug(`[INIT] Error registering pre-init handlers: ${error}`);
+                throw error;
+            }
+
+            // Check and configure Ballerina home
+            try {
+                if (this.overrideBallerinaHome()) {
+                    debug("[INIT] Override Ballerina home is enabled");
+                    const configuredHome = this.getConfiguredBallerinaHome();
+                    if (!configuredHome) {
+                        const message = "Trying to get ballerina version without setting ballerina home.";
+                        debug(`[INIT] Error: ${message}`);
+                        sendTelemetryEvent(this, TM_EVENT_ERROR_INVALID_BAL_HOME_CONFIGURED, CMP_EXTENSION_CORE, getMessageObject(message));
+                        throw new AssertionError({
+                            message: message
+                        });
+                    }
 
-                debug("Ballerina home is configured in settings.");
-                this.ballerinaHome = this.getConfiguredBallerinaHome();
+                    debug(`[INIT] Configured Ballerina home: ${configuredHome}`);
+                    this.ballerinaHome = configuredHome;
+                } else {
+                    debug("[INIT] Override Ballerina home is disabled, will auto-detect");
+                }
+            } catch (error) {
+                debug(`[INIT] Error configuring Ballerina home: ${error}`);
+                throw error;
             }
 
-            // Validate the ballerina version.
+            debug(`[INIT] Current Ballerina home: ${this.ballerinaHome}`);
+            debug(`[INIT] Override Ballerina home setting: ${this.overrideBallerinaHome()}`);
+            debug("[INIT] Starting Ballerina version validation...");
+
+            // Validate the ballerina version
             return this.getBallerinaVersion(this.ballerinaHome, this.overrideBallerinaHome()).then(async runtimeVersion => {
                 debug("=".repeat(60));
-                this.ballerinaVersion = runtimeVersion;
-                log(`Plugin version: ${this.getVersion()}`);
-                log(`Ballerina version: ${this.ballerinaVersion}`);
-
-                this.biSupported = isSupportedSLVersion(this, 2201123); // Minimum supported version for BI
-                this.isNPSupported = isSupportedSLVersion(this, 2201130) && this.enabledExperimentalFeatures(); // Minimum supported requirements for NP
-                const { home } = this.autoDetectBallerinaHome();
-                this.ballerinaHome = home;
-                debug(`Ballerina Home: ${this.ballerinaHome}`);
-                debug(`Plugin Dev Mode: ${this.overrideBallerinaHome()}`);
-                debug(`Debug Mode: ${this.enableLSDebug()}`);
-                debug(`Feature flags - Experimental: ${this.enabledExperimentalFeatures()}, BI: ${this.biSupported}, NP: ${this.isNPSupported}`);
-
-                if (!this.ballerinaVersion.match(SWAN_LAKE_REGEX) || (this.ballerinaVersion.match(SWAN_LAKE_REGEX) &&
-                    !isSupportedVersion(this, VERSION.BETA, 3))) {
-                    this.showMessageOldBallerina();
-                    const message = `Ballerina version ${this.ballerinaVersion} is not supported. 
-                        The extension supports Ballerina Swan Lake Beta 3+ versions.`;
-                    sendTelemetryEvent(this, TM_EVENT_ERROR_OLD_BAL_HOME_DETECTED, CMP_EXTENSION_CORE, getMessageObject(message));
-                    return;
+                debug("[INIT] Ballerina version retrieved successfully");
+
+                try {
+                    this.ballerinaVersion = runtimeVersion;
+                    log(`Plugin version: ${this.getVersion()}`);
+                    log(`Ballerina version: ${this.ballerinaVersion}`);
+                    debug(`[INIT] Version information logged`);
+                } catch (error) {
+                    debug(`[INIT] Error logging version information: ${error}`);
+                    throw error;
                 }
 
-                // if Home is found load Language Server.
-                let serverOptions: ServerOptions;
-                serverOptions = getServerOptions(this);
-                this.langClient = new ExtendedLangClient('ballerina-vscode', 'Ballerina LS Client', serverOptions,
-                    this.clientOptions, this, false);
-
-                _onBeforeInit(this.langClient);
-
-                await this.langClient.start();
-                debug(`Language Server Started`);
-
-                // Following was put in to handle server startup failures.
-                if (this.langClient.state === LS_STATE.Stopped) {
-                    const message = "Couldn't establish language server connection.";
-                    sendTelemetryEvent(this, TM_EVENT_EXTENSION_INI_FAILED, CMP_EXTENSION_CORE, getMessageObject(message));
-                    log(message);
-                    this.showPluginActivationError();
-                } else if (this.langClient.state === LS_STATE.Running) {
-                    await this.langClient?.registerExtendedAPICapabilities();
-                    this.updateStatusBar(this.ballerinaVersion);
-                    sendTelemetryEvent(this, TM_EVENT_EXTENSION_INIT, CMP_EXTENSION_CORE);
+                try {
+                    this.biSupported = isSupportedSLVersion(this, 2201123); // Minimum supported version for BI
+                    this.isNPSupported = isSupportedSLVersion(this, 2201130) && this.enabledExperimentalFeatures(); // Minimum supported requirements for NP
+                    debug(`[INIT] Feature support calculated - BI: ${this.biSupported}, NP: ${this.isNPSupported}`);
+                } catch (error) {
+                    debug(`[INIT] Error calculating feature support: ${error}`);
+                    // Don't throw here, we can continue without these features
+                }
+
+                try {
+                    const { home, isOldBallerinaDist, isBallerinaNotFound } = this.autoDetectBallerinaHome();
+                    this.ballerinaHome = home;
+                    debug(`[INIT] Auto-detected Ballerina Home: ${this.ballerinaHome}`);
+                    debug(`[INIT] Is old Ballerina distribution: ${isOldBallerinaDist}`);
+                    debug(`[INIT] Is Ballerina not found: ${isBallerinaNotFound}`);
+                } catch (error) {
+                    debug(`[INIT] Error auto-detecting Ballerina home: ${error}`);
+                    throw error;
+                }
+
+                debug(`[INIT] Final Ballerina Home: ${this.ballerinaHome}`);
+                debug(`[INIT] Plugin Dev Mode: ${this.overrideBallerinaHome()}`);
+                debug(`[INIT] Debug Mode: ${this.enableLSDebug()}`);
+                debug(`[INIT] Feature flags - Experimental: ${this.enabledExperimentalFeatures()}, BI: ${this.biSupported}, NP: ${this.isNPSupported}`);
+
+                // Check version compatibility
+                try {
+                    if (!this.ballerinaVersion.match(SWAN_LAKE_REGEX) || (this.ballerinaVersion.match(SWAN_LAKE_REGEX) &&
+                        !isSupportedVersion(this, VERSION.BETA, 3))) {
+                        debug(`[INIT] Unsupported Ballerina version detected: ${this.ballerinaVersion}`);
+                        this.showMessageOldBallerina();
+                        const message = `Ballerina version ${this.ballerinaVersion} is not supported. 
+                            The extension supports Ballerina Swan Lake Beta 3+ versions.`;
+                        sendTelemetryEvent(this, TM_EVENT_ERROR_OLD_BAL_HOME_DETECTED, CMP_EXTENSION_CORE, getMessageObject(message));
+                        debug("[INIT] Returning early due to unsupported version");
+                        return;
+                    }
+                    debug("[INIT] Ballerina version is compatible");
+                } catch (error) {
+                    debug(`[INIT] Error checking version compatibility: ${error}`);
+                    throw error;
+                }
+
+                // Set up and start Language Server
+                try {
+                    debug("[INIT] Setting up Language Server...");
+                    let serverOptions: ServerOptions;
+                    serverOptions = getServerOptions(this);
+                    debug("[INIT] Server options retrieved");
+
+                    this.langClient = new ExtendedLangClient('ballerina-vscode', 'Ballerina LS Client', serverOptions,
+                        this.clientOptions, this, false);
+                    debug("[INIT] Extended Language Client created");
+
+                    _onBeforeInit(this.langClient);
+                    debug("[INIT] Before init callback executed");
+
+                    await this.langClient.start();
+                    debug(`[INIT] Language Server started with state: ${this.langClient.state}`);
+                } catch (error) {
+                    debug(`[INIT] Error setting up/starting Language Server: ${error}`);
+                    throw error;
+                }
+
+                // Handle server startup results
+                try {
+                    if (this.langClient.state === LS_STATE.Stopped) {
+                        const message = "Couldn't establish language server connection.";
+                        debug(`[INIT] Language server failed to start: ${message}`);
+                        sendTelemetryEvent(this, TM_EVENT_EXTENSION_INI_FAILED, CMP_EXTENSION_CORE, getMessageObject(message));
+                        log(message);
+                        this.showPluginActivationError();
+                    } else if (this.langClient.state === LS_STATE.Running) {
+                        debug("[INIT] Language server is running, registering extended API capabilities");
+                        await this.langClient?.registerExtendedAPICapabilities();
+                        this.updateStatusBar(this.ballerinaVersion);
+                        sendTelemetryEvent(this, TM_EVENT_EXTENSION_INIT, CMP_EXTENSION_CORE);
+                        debug("[INIT] Extension initialization completed successfully");
+                    }
+                } catch (error) {
+                    debug(`[INIT] Error handling server startup results: ${error}`);
+                    throw error;
+                }
+
+                // Register stop command
+                try {
+                    commands.registerCommand('ballerina.stopLangServer', () => {
+                        debug("[INIT] Stop Language Server command executed");
+                        this.langClient.stop();
+                    });
+                    debug("[INIT] Stop Language Server command registered");
+                } catch (error) {
+                    debug(`[INIT] Error registering stop command: ${error}`);
+                    // Don't throw here, this is not critical
                 }
 
-                commands.registerCommand('ballerina.stopLangServer', () => {
-                    this.langClient.stop();
-                });
                 debug("=".repeat(60));
+                debug("[INIT] Extension initialization completed successfully");
             }, (reason) => {
+                debug(`[INIT] Error getting ballerina version: ${reason.message || reason}`);
                 sendTelemetryException(this, reason, CMP_EXTENSION_CORE);
                 this.showMessageInstallBallerina();
                 throw new Error(reason);
             }).catch(e => {
+                debug(`[INIT] Caught error during initialization: ${e.message || e}`);
                 const msg = `Error when checking ballerina version. ${e.message}`;
                 sendTelemetryException(this, e, CMP_EXTENSION_CORE, getMessageObject(msg));
-                this.telemetryReporter.dispose();
+                this.telemetryReporter?.dispose();
                 throw new Error(msg);
             });
         } catch (ex) {
-            let msg = "Error happened.";
+            debug(`[INIT] Fatal error initializing Ballerina Extension: ${ex}`);
+            let msg = "Fatal error during extension initialization.";
             if (ex instanceof Error) {
                 msg = "Error while activating plugin. " + (ex.message ? ex.message : ex);
+                debug(`[INIT] Error details: ${msg}`);
                 // If any failure occurs while initializing show an error message
                 this.showPluginActivationError();
                 sendTelemetryException(this, ex, CMP_EXTENSION_CORE, getMessageObject(msg));
-                this.telemetryReporter.dispose();
+                this.telemetryReporter?.dispose();
             }
+            debug(`[INIT] Rejecting promise with: ${msg}`);
             return Promise.reject(msg);
         }
     }
 
     private getUpdateToolUserAgent(): string {
+        debug("[USER_AGENT] Detecting platform for user agent...");
+
         const platform = os.platform();
+        const arch = os.arch();
+
+        debug(`[USER_AGENT] Platform: ${platform}, Architecture: ${arch}`);
+
+        // Log additional environment info for WSL debugging
+        if (process.env.WSL_DISTRO_NAME) {
+            debug(`[USER_AGENT] WSL environment detected: ${process.env.WSL_DISTRO_NAME}`);
+        }
+
+        let userAgent: string | null = null;
+
         if (platform === 'win32') {
-            return "ballerina/2201.11.0 (win-64) Updater/1.4.5";
+            userAgent = "ballerina/2201.11.0 (win-64) Updater/1.4.5";
+            debug("[USER_AGENT] Selected Windows user agent");
         } else if (platform === 'linux') {
-            return "ballerina/2201.11.0 (linux-64) Updater/1.4.5";
+            userAgent = "ballerina/2201.11.0 (linux-64) Updater/1.4.5";
+            debug("[USER_AGENT] Selected Linux user agent");
+
+            if (process.env.WSL_DISTRO_NAME) {
+                debug("[USER_AGENT] Note: Running in WSL environment");
+            }
         } else if (platform === 'darwin') {
-            if (os.arch() === 'arm64') {
-                return "ballerina/2201.11.0 (macos-arm-64) Updater/1.4.5";
+            if (arch === 'arm64') {
+                userAgent = "ballerina/2201.11.0 (macos-arm-64) Updater/1.4.5";
+                debug("[USER_AGENT] Selected macOS ARM64 user agent");
+            } else {
+                userAgent = "ballerina/2201.11.0 (macos-64) Updater/1.4.5";
+                debug("[USER_AGENT] Selected macOS x64 user agent");
             }
-            return "ballerina/2201.11.0 (macos-64) Updater/1.4.5";
+        } else {
+            debug(`[USER_AGENT] Unknown platform: ${platform}, returning null`);
         }
-        return null;
+
+        debug(`[USER_AGENT] Final user agent: ${userAgent}`);
+        return userAgent;
     }
 
     async getLatestBallerinaVersion(): Promise<string> {
@@ -542,7 +786,7 @@ export class BallerinaExtension {
 
         // Show a message to the user that they'll need to respond to the UAC prompt
         window.showInformationMessage('Please confirm the User Account Control (UAC) prompt to run this command with administrator privileges');
-        await new Promise((resolve, reject) => {
+        await new Promise(() => {
             try {
                 // Execute the PowerShell command
                 const childProcess = exec(psCommand, { maxBuffer: 1024 * 1024 });
@@ -555,7 +799,7 @@ export class BallerinaExtension {
                         throw new Error(errorMessage);
                     }
                 });
-                childProcess.on('close', async (code, signal) => {
+                childProcess.on('close', async (code) => {
                     // Note: with Windows UAC, the actual admin process is detached, so this code
                     // only confirms the elevation request was successful, not the command itself
                     if (code === 0) {
@@ -602,152 +846,6 @@ export class BallerinaExtension {
         });
     }
 
-    // TODO: This can be removed.
-    // Alternative method that uses a temporary script to execute sudo commands
-    private async executeSudoCommandWithScript(command: string): Promise<void> {
-
-        // macOS/Linux: Get password for sudo
-        const password = await window.showInputBox({
-            prompt: 'Enter your sudo password',
-            password: true,
-            ignoreFocusOut: true
-        });
-
-        if (password === undefined) {
-            window.showErrorMessage('Password required for sudo command');
-            return;
-        }
-
-        let progressStep = 0;
-
-        // Send initial progress notification
-        let res: DownloadProgress = {
-            message: `Starting execution of sudo command...`,
-            percentage: 0,
-            success: false,
-            step: progressStep
-        };
-        RPCLayer._messenger.sendNotification(onDownloadProgress, { type: 'webview', webviewType: VisualizerWebview.viewType }, res);
-
-        return new Promise((resolve, reject) => {
-            try {
-                // Create a temporary file for the command
-                const tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'vscode-ballerina-'));
-                const scriptPath = path.join(tempDir, 'sudo-script.sh');
-
-                // Extract the actual command (remove 'sudo' prefix)
-                const actualCommand = command.replace(/^sudo\s+/, '');
-
-                // Create a script file that will be executed with sudo
-                fs.writeFileSync(scriptPath, `#!/bin/bash\n${actualCommand}\n`, { mode: 0o755 });
-
-                // Execute the script with sudo and pipe the password
-                console.log(`Executing sudo command using script: ${scriptPath}`);
-
-                // Use echo to pass the password to sudo
-                const sudoCmd = `echo ${password} | sudo -S ${scriptPath}`;
-                const childProcess = exec(sudoCmd);
-
-                childProcess.stdout.on('data', (data) => {
-                    const output = data.toString();
-                    console.log('Command output:', output);
-
-                    progressStep++;
-                    const percentage = Math.min(progressStep * 10, 90);
-
-                    res = {
-                        message: `Executing: ${output.trim()}`,
-                        percentage: percentage,
-                        success: false,
-                        step: progressStep
-                    };
-                    RPCLayer._messenger.sendNotification(onDownloadProgress, { type: 'webview', webviewType: VisualizerWebview.viewType }, res);
-                });
-
-                childProcess.stderr.on('data', (data) => {
-                    const errorOutput = data.toString();
-                    console.error('Command error:', errorOutput);
-
-                    // Handle common sudo errors
-                    if (errorOutput.includes('is not in the sudoers file') || errorOutput.includes('not allowed to execute')) {
-                        res = {
-                            message: `Sudo permission error: You don't have sudo privileges for this command`,
-                            percentage: 0,
-                            success: false,
-                            step: -1
-                        };
-                        RPCLayer._messenger.sendNotification(onDownloadProgress, { type: 'webview', webviewType: VisualizerWebview.viewType }, res);
-                        window.showErrorMessage(`Sudo permission error: You don't have privileges for this command`);
-                        reject(new Error('Sudo permission error: insufficient privileges'));
-                        return;
-                    }
-
-                    if (errorOutput.includes('incorrect password') || errorOutput.includes('Sorry, try again')) {
-                        res = {
-                            message: `Sudo authentication failed: Incorrect password`,
-                            percentage: 0,
-                            success: false,
-                            step: -1
-                        };
-                        RPCLayer._messenger.sendNotification(onDownloadProgress, { type: 'webview', webviewType: VisualizerWebview.viewType }, res);
-                        window.showErrorMessage(`Sudo authentication failed: Incorrect password`);
-                        reject(new Error('Sudo authentication failed: Incorrect password'));
-                        return;
-                    }
-
-                    res = {
-                        message: `Error: ${errorOutput.trim()}`,
-                        percentage: 0,
-                        success: false,
-                        step: -1
-                    };
-                    RPCLayer._messenger.sendNotification(onDownloadProgress, { type: 'webview', webviewType: VisualizerWebview.viewType }, res);
-                });
-
-                childProcess.on('close', (code) => {
-                    console.log(`Command exited with code ${code}`);
-
-                    // Clean up the temporary files
-                    try {
-                        fs.unlinkSync(scriptPath);
-                        fs.rmdirSync(tempDir);
-                    } catch (err) {
-                        console.error('Error cleaning up temporary files:', err);
-                    }
-
-                    res = {
-                        message: code === 0 ? 'Command completed successfully' : `Command failed with code ${code}`,
-                        percentage: 100,
-                        success: code === 0,
-                        step: code === 0 ? progressStep + 1 : -1
-                    };
-                    RPCLayer._messenger.sendNotification(onDownloadProgress, { type: 'webview', webviewType: VisualizerWebview.viewType }, res);
-
-                    if (code === 0) {
-                        window.showInformationMessage('Command executed successfully');
-                        commands.executeCommand('workbench.action.reloadWindow');
-                        resolve();
-                    } else {
-                        window.showErrorMessage(`Command failed with exit code ${code}`);
-                        reject(new Error(`Command failed with exit code ${code}`));
-                    }
-                });
-            } catch (error) {
-                console.error('Error executing sudo command with script:', error);
-                const errorMessage = error instanceof Error ? error.message : String(error);
-                window.showErrorMessage(`Error executing sudo command: ${errorMessage}`);
-
-                res = {
-                    message: `Error executing sudo command: ${errorMessage}`,
-                    percentage: 0,
-                    success: false,
-                    step: -1
-                };
-                RPCLayer._messenger.sendNotification(onDownloadProgress, { type: 'webview', webviewType: VisualizerWebview.viewType }, res);
-                reject(error);
-            }
-        });
-    }
 
     // Install ballerina from the central
     private async installBallerina(restartWindow?: boolean) {
@@ -1305,7 +1403,31 @@ export class BallerinaExtension {
     }
 
     private getUserHomeDirectory(): string {
-        return os.homedir();
+        debug("[HOME_DIR] Getting user home directory...");
+
+        const homeDir = os.homedir();
+        debug(`[HOME_DIR] OS homedir(): ${homeDir}`);
+
+        // Log environment variables for debugging WSL issues
+        debug(`[HOME_DIR] Environment variables:`);
+        debug(`[HOME_DIR] - HOME: ${process.env.HOME || 'Not set'}`);
+        debug(`[HOME_DIR] - USERPROFILE: ${process.env.USERPROFILE || 'Not set'}`);
+        debug(`[HOME_DIR] - WSL_DISTRO_NAME: ${process.env.WSL_DISTRO_NAME || 'Not set'}`);
+
+        // Validate the home directory exists
+        try {
+            const fs = require('fs');
+            const homeStats = fs.statSync(homeDir);
+            if (homeStats.isDirectory()) {
+                debug(`[HOME_DIR] Home directory is valid and accessible: ${homeDir}`);
+            } else {
+                debug(`[HOME_DIR] Warning: Home path exists but is not a directory: ${homeDir}`);
+            }
+        } catch (error) {
+            debug(`[HOME_DIR] Warning: Cannot access home directory ${homeDir}: ${error}`);
+        }
+
+        return homeDir;
     }
 
     getBallerinaUserHome(): string {
@@ -1313,22 +1435,46 @@ export class BallerinaExtension {
     }
 
     showStatusBarItem() {
-        this.sdkVersion = window.createStatusBarItem(StatusBarAlignment.Right, 100);
-        this.updateStatusBar("Detecting");
-        this.sdkVersion.command = "ballerina.showLogs";
-        this.sdkVersion.show();
-
-        window.onDidChangeActiveTextEditor((editor) => {
-            this.sdkVersion.text = this.sdkVersion.text.replace(SDK_PREFIX, '');
-            if (!editor) {
-                this.updateStatusBar(this.sdkVersion.text);
-                this.sdkVersion.show();
-            } else if (editor.document.uri.scheme === 'file' && editor.document.languageId === 'ballerina') {
-                this.sdkVersion.show();
-            } else {
-                this.sdkVersion.hide();
-            }
-        });
+        debug("[STATUS_BAR] Creating status bar item...");
+
+        try {
+            this.sdkVersion = window.createStatusBarItem(StatusBarAlignment.Right, 100);
+            debug("[STATUS_BAR] Status bar item created successfully");
+
+            this.updateStatusBar("Detecting");
+            debug("[STATUS_BAR] Status bar text set to 'Detecting'");
+
+            this.sdkVersion.command = "ballerina.showLogs";
+            debug("[STATUS_BAR] Status bar command set to 'ballerina.showLogs'");
+
+            this.sdkVersion.show();
+            debug("[STATUS_BAR] Status bar item shown successfully");
+
+            window.onDidChangeActiveTextEditor((editor) => {
+                debug("[STATUS_BAR] Active text editor changed");
+                try {
+                    this.sdkVersion.text = this.sdkVersion.text.replace(SDK_PREFIX, '');
+                    if (!editor) {
+                        debug("[STATUS_BAR] No active editor");
+                        this.updateStatusBar(this.sdkVersion.text);
+                        this.sdkVersion.show();
+                    } else if (editor.document.uri.scheme === 'file' && editor.document.languageId === 'ballerina') {
+                        debug("[STATUS_BAR] Ballerina file is active");
+                        this.sdkVersion.show();
+                    } else {
+                        debug(`[STATUS_BAR] Non-Ballerina file is active: ${editor.document.languageId}`);
+                        this.sdkVersion.hide();
+                    }
+                } catch (error) {
+                    debug(`[STATUS_BAR] Error updating status bar on editor change: ${error}`);
+                }
+            });
+
+            debug("[STATUS_BAR] Status bar initialization completed successfully");
+        } catch (error) {
+            debug(`[STATUS_BAR] Error initializing status bar: ${error}`);
+            throw error;
+        }
     }
 
     updateStatusBar(text: string) {
@@ -1393,61 +1539,188 @@ export class BallerinaExtension {
     }
 
     async getBallerinaVersion(ballerinaHome: string, overrideBallerinaHome: boolean): Promise<string> {
-        // Initialize with fresh environment
-        await this.syncEnvironment();
+        debug("[VERSION] Starting Ballerina version detection...");
+        debug(`[VERSION] Input parameters - ballerinaHome: '${ballerinaHome}', overrideBallerinaHome: ${overrideBallerinaHome}`);
+
+        try {
+            // Initialize with fresh environment
+            debug("[VERSION] Syncing environment variables...");
+            await this.syncEnvironment();
+            debug("[VERSION] Environment sync completed");
+        } catch (error) {
+            debug(`[VERSION] Warning: Failed to sync environment: ${error}`);
+            // Continue anyway, don't fail the whole process
+        }
+
+        // Log current environment for debugging
+        debug(`[VERSION] Current working directory: ${process.cwd()}`);
+        debug(`[VERSION] Current PATH: ${process.env.PATH?.substring(0, 200)}...`);
+        debug(`[VERSION] Shell: ${process.env.SHELL || 'Not set'}`);
 
         // if ballerina home is overridden, use ballerina cmd inside distribution
         // otherwise use wrapper command
         if (ballerinaHome) {
-            debug(`Ballerina Home: ${ballerinaHome}`);
+            debug(`[VERSION] Ballerina Home provided: ${ballerinaHome}`);
+
+            // Check if the directory exists
+            try {
+                const fs = require('fs');
+                const homeStats = fs.statSync(ballerinaHome);
+                if (!homeStats.isDirectory()) {
+                    throw new Error(`Ballerina home path is not a directory: ${ballerinaHome}`);
+                }
+                debug(`[VERSION] Ballerina home directory exists and is accessible`);
+            } catch (error) {
+                debug(`[VERSION] Error accessing Ballerina home directory: ${error}`);
+                throw new Error(`Cannot access Ballerina home directory: ${ballerinaHome}. ${error instanceof Error ? error.message : String(error)}`);
+            }
+        } else {
+            debug("[VERSION] No Ballerina home provided, will use system PATH");
         }
+
         let distPath = "";
         if (overrideBallerinaHome) {
-            distPath = join(ballerinaHome, "bin") + sep;
+            try {
+                distPath = join(ballerinaHome, "bin") + sep;
+                debug(`[VERSION] Using distribution path: ${distPath}`);
+
+                // Check if bin directory exists
+                const fs = require('fs');
+                const binPath = join(ballerinaHome, "bin");
+                if (!fs.existsSync(binPath)) {
+                    throw new Error(`Ballerina bin directory not found: ${binPath}`);
+                }
+                debug(`[VERSION] Bin directory exists: ${binPath}`);
+            } catch (error) {
+                debug(`[VERSION] Error setting up distribution path: ${error}`);
+                throw error;
+            }
         }
+
         let exeExtension = "";
         if (isWindows()) {
             exeExtension = ".bat";
+            debug("[VERSION] Windows platform detected, using .bat extension");
+        } else {
+            debug("[VERSION] Non-Windows platform detected, no extension needed");
         }
 
+        const ballerinaCommand = distPath + 'bal' + exeExtension + ' version';
+        debug(`[VERSION] Executing command: '${ballerinaCommand}'`);
+
         let ballerinaExecutor = '';
         return new Promise((resolve, reject) => {
-            exec(distPath + 'bal' + exeExtension + ' version', (err, stdout, stderr) => {
+            const { exec } = require('child_process');
+            const execOptions = {
+                timeout: 30000, // 30 second timeout
+                maxBuffer: 1024 * 1024, // 1MB buffer
+                env: { ...process.env }, // Use current environment
+                cwd: process.cwd() // Use current working directory
+            };
+
+            debug(`[VERSION] Exec options: timeout=${execOptions.timeout}ms, maxBuffer=${execOptions.maxBuffer}, cwd=${execOptions.cwd}`);
+
+            const startTime = Date.now();
+            exec(ballerinaCommand, execOptions, (err, stdout, stderr) => {
+                const executionTime = Date.now() - startTime;
+                debug(`[VERSION] Command execution completed in ${executionTime}ms`);
+
                 if (stdout) {
-                    debug(`bal command stdout: ${stdout}`);
+                    debug(`[VERSION] stdout (${stdout.length} chars): ${stdout.substring(0, 500)}${stdout.length > 500 ? '...' : ''}`);
                 }
                 if (stderr) {
-                    debug(`bal command _stderr: ${stderr}`);
+                    debug(`[VERSION] stderr (${stderr.length} chars): ${stderr.substring(0, 500)}${stderr.length > 500 ? '...' : ''}`);
                 }
                 if (err) {
-                    debug(`bal command err: ${err}`);
-                    reject(err);
+                    debug(`[VERSION] Command error: ${err}`);
+                    debug(`[VERSION] Error code: ${err.code}`);
+                    debug(`[VERSION] Error signal: ${err.signal}`);
+                    debug(`[VERSION] Error killed: ${err.killed}`);
+
+                    // Provide more specific error messages for WSL environment
+                    let errorMessage = `Failed to execute 'bal version' command: ${err.message}`;
+
+                    if (process.env.WSL_DISTRO_NAME) {
+                        errorMessage += `\n[WSL Environment Detected: ${process.env.WSL_DISTRO_NAME}]`;
+                        errorMessage += `\nCommon WSL issues: Path case sensitivity, Windows/Linux path mixing, file permissions`;
+                    }
+
+                    if (err.code === 'ENOENT') {
+                        errorMessage += `\nCommand not found. Check if Ballerina is installed and in PATH.`;
+                        errorMessage += `\nSearched for: ${ballerinaCommand}`;
+                    } else if (err.code === 'EACCES') {
+                        errorMessage += `\nPermission denied. Check file permissions for: ${ballerinaCommand}`;
+                    }
+
+                    reject(new Error(errorMessage));
                     return;
                 }
 
-                if (stdout.length === 0 || stdout.startsWith(ERROR) || stdout.includes(NO_SUCH_FILE) ||
-                    stdout.includes(COMMAND_NOT_FOUND)) {
-                    reject(stdout);
+                // Check for common error patterns in stdout
+                if (stdout.length === 0) {
+                    debug("[VERSION] Empty stdout received");
+                    reject(new Error("Empty response from 'bal version' command"));
+                    return;
+                }
+
+                if (stdout.startsWith(ERROR)) {
+                    debug(`[VERSION] Error response detected: ${stdout}`);
+                    reject(new Error(`Ballerina command returned error: ${stdout}`));
+                    return;
+                }
+
+                if (stdout.includes(NO_SUCH_FILE)) {
+                    debug(`[VERSION] 'No such file' error detected`);
+                    reject(new Error(`Ballerina executable not found. Output: ${stdout}`));
+                    return;
+                }
+
+                if (stdout.includes(COMMAND_NOT_FOUND)) {
+                    debug(`[VERSION] 'Command not found' error detected`);
+                    reject(new Error(`Ballerina command not found in PATH. Output: ${stdout}`));
                     return;
                 }
 
                 ballerinaExecutor = 'bal';
-                debug(`'bal' executor is picked up by the plugin.`);
+                debug(`[VERSION] 'bal' executor is picked up by the plugin.`);
 
-                this.ballerinaCmd = (distPath + ballerinaExecutor + exeExtension).trim();
                 try {
-                    debug(`Ballerina version output: ${stdout}`);
-                    const implVersionLine = stdout.split('\n')[0];
+                    this.ballerinaCmd = (distPath + ballerinaExecutor + exeExtension).trim();
+                    debug(`[VERSION] Ballerina command set to: '${this.ballerinaCmd}'`);
+
+                    debug(`[VERSION] Parsing version from output: ${stdout}`);
+                    const lines = stdout.split('\n');
+                    debug(`[VERSION] Output has ${lines.length} lines`);
+
+                    if (lines.length === 0) {
+                        throw new Error("No lines in version output");
+                    }
+
+                    const implVersionLine = lines[0];
+                    debug(`[VERSION] First line: '${implVersionLine}'`);
+
+                    if (!implVersionLine || implVersionLine.trim().length === 0) {
+                        throw new Error("First line of version output is empty");
+                    }
+
                     const replacePrefix = implVersionLine.startsWith("jBallerina")
                         ? /jBallerina /
                         : /Ballerina /;
+
+                    debug(`[VERSION] Using prefix pattern: ${replacePrefix}`);
                     const parsedVersion = implVersionLine.replace(replacePrefix, '').replace(/[\n\t\r]/g, '');
-                    return resolve(parsedVersion);
-                } catch (error) {
-                    if (error instanceof Error) {
-                        sendTelemetryException(this, error, CMP_EXTENSION_CORE);
+                    debug(`[VERSION] Parsed version: '${parsedVersion}'`);
+
+                    if (!parsedVersion || parsedVersion.trim().length === 0) {
+                        throw new Error(`Unable to parse version from: '${implVersionLine}'`);
                     }
-                    return reject(error);
+
+                    debug(`[VERSION] Successfully resolved Ballerina version: '${parsedVersion}'`);
+                    return resolve(parsedVersion);
+                } catch (parseError) {
+                    debug(`[VERSION] Error parsing version output: ${parseError}`);
+                    reject(new Error(`Failed to parse Ballerina version from output: ${stdout}. Error: ${parseError instanceof Error ? parseError.message : String(parseError)}`));
+                    return;
                 }
             });
         });
@@ -1594,54 +1867,166 @@ export class BallerinaExtension {
     }
 
     autoDetectBallerinaHome(): { home: string, isOldBallerinaDist: boolean, isBallerinaNotFound: boolean } {
+        debug("[AUTO_DETECT] Starting Ballerina home auto-detection...");
+
         let balHomeOutput = "",
             isBallerinaNotFound = false,
             isOldBallerinaDist = false;
+
         try {
             const args = ['home'];
+            debug(`[AUTO_DETECT] Executing command with args: ${JSON.stringify(args)}`);
+            debug(`[AUTO_DETECT] Using ballerinaCmd: '${this.ballerinaCmd}'`);
+
             let response;
+            const execOptions = {
+                shell: false,
+                encoding: 'utf8' as const,
+                timeout: 15000, // 15 second timeout
+                maxBuffer: 1024 * 1024, // 1MB buffer
+                env: { ...process.env }
+            };
+
             if (isWindows()) {
+                debug("[AUTO_DETECT] Windows platform detected, using cmd.exe to run .bat files");
                 // On Windows, use cmd.exe to run .bat files
-                response = spawnSync('cmd.exe', ['/c', this.ballerinaCmd, ...args], { shell: true });
+                execOptions.shell = true;
+                response = spawnSync('cmd.exe', ['/c', this.ballerinaCmd, ...args], execOptions);
+                debug(`[AUTO_DETECT] Windows command executed: cmd.exe /c ${this.ballerinaCmd} ${args.join(' ')}`);
             } else {
+                debug("[AUTO_DETECT] Non-Windows platform, using spawnSync directly");
                 // On other platforms, use spawnSync directly
-                response = spawnSync(this.ballerinaCmd, args, { shell: false });
+                response = spawnSync(this.ballerinaCmd, args, execOptions);
+                debug(`[AUTO_DETECT] Unix command executed: ${this.ballerinaCmd} ${args.join(' ')}`);
             }
-            if (response.stdout.length > 0) {
+
+            debug(`[AUTO_DETECT] Command execution completed`);
+            debug(`[AUTO_DETECT] Exit code: ${response.status}`);
+            debug(`[AUTO_DETECT] Error code: ${response.error?.code}`);
+            debug(`[AUTO_DETECT] Signal: ${response.signal}`);
+            debug(`[AUTO_DETECT] PID: ${response.pid}`);
+
+            if (response.stdout && response.stdout.length > 0) {
                 balHomeOutput = response.stdout.toString().trim();
-            } else if (response.stderr.length > 0) {
+                debug(`[AUTO_DETECT] stdout (${balHomeOutput.length} chars): '${balHomeOutput}'`);
+
+                // Validate the output path
+                if (balHomeOutput) {
+                    try {
+                        const fs = require('fs');
+                        const homeStats = fs.statSync(balHomeOutput);
+                        if (homeStats.isDirectory()) {
+                            debug(`[AUTO_DETECT] Detected home directory is valid: ${balHomeOutput}`);
+                        } else {
+                            debug(`[AUTO_DETECT] Warning: Detected path is not a directory: ${balHomeOutput}`);
+                        }
+                    } catch (pathError) {
+                        debug(`[AUTO_DETECT] Warning: Cannot access detected path ${balHomeOutput}: ${pathError}`);
+                    }
+                }
+            } else {
+                debug("[AUTO_DETECT] No stdout received");
+            }
+
+            if (response.stderr && response.stderr.length > 0) {
                 let message = response.stderr.toString();
-                // ballerina is installed, but ballerina home command is not found
-                isOldBallerinaDist = message.includes("bal: unknown command 'home'");
-                // ballerina is not installed
-                isBallerinaNotFound = message.includes('command not found')
-                    || message.includes('unknown command')
-                    || message.includes('is not recognized as an internal or external command');
-                log(`Error executing 'bal home'.\n<---- cmd output ---->\n${message}<---- cmd output ---->\n`);
+                debug(`[AUTO_DETECT] stderr (${message.length} chars): '${message}'`);
+
+                // Check for specific error patterns
+                const unknownCommandPattern = "bal: unknown command 'home'";
+                const commandNotFoundPatterns = [
+                    'command not found',
+                    'unknown command',
+                    'is not recognized as an internal or external command'
+                ];
+
+                if (message.includes(unknownCommandPattern)) {
+                    debug("[AUTO_DETECT] Detected old Ballerina distribution (unknown home command)");
+                    isOldBallerinaDist = true;
+                } else if (commandNotFoundPatterns.some(pattern => message.includes(pattern))) {
+                    debug("[AUTO_DETECT] Detected Ballerina not found");
+                    isBallerinaNotFound = true;
+                }
+
+                // Special handling for WSL environments
+                if (process.env.WSL_DISTRO_NAME) {
+                    debug(`[AUTO_DETECT] WSL environment detected: ${process.env.WSL_DISTRO_NAME}`);
+                    if (message.includes('Permission denied') || message.includes('EACCES')) {
+                        debug("[AUTO_DETECT] WSL permission issue detected");
+                        message += `\n[WSL] Try running with proper permissions or check file system mount options`;
+                    }
+                }
+
+                log(`[AUTO_DETECT] Error executing 'bal home'.\n<---- cmd output ---->\n${message}<---- cmd output ---->\n`);
+            } else {
+                debug("[AUTO_DETECT] No stderr received");
+            }
+
+            // Handle command execution errors
+            if (response.error) {
+                debug(`[AUTO_DETECT] Spawn error occurred: ${response.error}`);
+                if (response.error.code === 'ENOENT') {
+                    debug("[AUTO_DETECT] Command not found (ENOENT)");
+                    isBallerinaNotFound = true;
+                } else if (response.error.code === 'EACCES') {
+                    debug("[AUTO_DETECT] Permission denied (EACCES)");
+                    isBallerinaNotFound = true;
+                } else if (response.error.code === 'ETIMEDOUT') {
+                    debug("[AUTO_DETECT] Command timed out");
+                    // Don't mark as not found, might be a temporary issue
+                }
             }
 
-            // specially handle unknown ballerina command scenario for windows
-            if (balHomeOutput === "" && isWindows()) {
+            // Special handling for Windows when no output is received
+            if (balHomeOutput === "" && isWindows() && !response.error) {
+                debug("[AUTO_DETECT] Windows special case: no output received, assuming old Ballerina distribution");
                 isOldBallerinaDist = true;
             }
+
         } catch (er) {
+            debug(`[AUTO_DETECT] Exception caught during execution: ${er}`);
             if (er instanceof Error) {
-                const { message } = er;
-                // ballerina is installed, but ballerina home command is not found
-                isOldBallerinaDist = message.includes("bal: unknown command 'home'");
-                // ballerina is not installed
-                isBallerinaNotFound = message.includes('command not found')
-                    || message.includes('unknown command')
-                    || message.includes('is not recognized as an internal or external command');
-                log(`Error executing 'bal home'.\n<---- cmd output ---->\n${message}<---- cmd output ---->\n`);
+                const { message, code, errno } = er as any;
+                debug(`[AUTO_DETECT] Exception details - message: ${message}, code: ${code}, errno: ${errno}`);
+
+                // Check for specific error patterns in exception
+                const unknownCommandPattern = "bal: unknown command 'home'";
+                const commandNotFoundPatterns = [
+                    'command not found',
+                    'unknown command',
+                    'is not recognized as an internal or external command'
+                ];
+
+                if (message.includes(unknownCommandPattern)) {
+                    debug("[AUTO_DETECT] Exception indicates old Ballerina distribution");
+                    isOldBallerinaDist = true;
+                } else if (commandNotFoundPatterns.some(pattern => message.includes(pattern))) {
+                    debug("[AUTO_DETECT] Exception indicates Ballerina not found");
+                    isBallerinaNotFound = true;
+                } else if (code === 'ENOENT') {
+                    debug("[AUTO_DETECT] Exception ENOENT - command not found");
+                    isBallerinaNotFound = true;
+                } else if (code === 'EACCES') {
+                    debug("[AUTO_DETECT] Exception EACCES - permission denied");
+                    isBallerinaNotFound = true;
+                }
+
+                log(`[AUTO_DETECT] Error executing 'bal home'.\n<---- cmd output ---->\n${message}<---- cmd output ---->\n`);
             }
         }
 
-        return {
+        const result = {
             home: isBallerinaNotFound || isOldBallerinaDist ? '' : balHomeOutput,
             isBallerinaNotFound,
             isOldBallerinaDist
         };
+
+        debug(`[AUTO_DETECT] Auto-detection completed:`);
+        debug(`[AUTO_DETECT] - home: '${result.home}'`);
+        debug(`[AUTO_DETECT] - isBallerinaNotFound: ${result.isBallerinaNotFound}`);
+        debug(`[AUTO_DETECT] - isOldBallerinaDist: ${result.isOldBallerinaDist}`);
+
+        return result;
     }
 
     public overrideBallerinaHome(): boolean {
@@ -1728,6 +2113,10 @@ export class BallerinaExtension {
         return <boolean>workspace.getConfiguration().get(INCLUDE_CURRENT_ORGANIZATION_IN_SEARCH);
     }
 
+    public getShowAdvancedAiNodes(): boolean {
+        return <boolean>workspace.getConfiguration().get(SHOW_ADVANCED_AI_NODES);
+    }
+
     public getDocumentContext(): DocumentContext {
         return this.documentContext;
     }
@@ -1802,12 +2191,21 @@ export class BallerinaExtension {
      * This is especially important after Ballerina installation when PATH has been updated
      */
     private async syncEnvironment(): Promise<void> {
+        debug("[SYNC_ENV] Starting environment synchronization...");
         try {
             const freshEnv = await getShellEnvironment();
-            debug('Syncing process environment with shell environment');
+            debug('[SYNC_ENV] Syncing process environment with shell environment');
             updateProcessEnv(freshEnv);
+            debug('[SYNC_ENV] Environment synchronization completed successfully');
         } catch (error) {
-            debug(`Failed to sync environment: ${error}`);
+            debug(`[SYNC_ENV] Failed to sync environment: ${error}`);
+            // Log more details about the error
+            if (error instanceof Error) {
+                debug(`[SYNC_ENV] Error name: ${error.name}`);
+                debug(`[SYNC_ENV] Error message: ${error.message}`);
+                debug(`[SYNC_ENV] Error stack: ${error.stack}`);
+            }
+            // Don't throw the error, as this is not critical for basic functionality
         }
     }
 }
@@ -1907,68 +2305,181 @@ export class TelemetryTracker {
 }
 
 function updateProcessEnv(newEnv: NodeJS.ProcessEnv): void {
+    debug("[UPDATE_ENV] Starting process environment update...");
+    debug(`[UPDATE_ENV] Received ${Object.keys(newEnv).length} environment variables`);
+
+    const originalPath = isWindows() ? process.env.Path : process.env.PATH;
+    debug(`[UPDATE_ENV] Original PATH length: ${originalPath?.length || 0} chars`);
+
     // Update PATH/Path specially to preserve existing values that might not be in shell env
     if (isWindows() && newEnv.Path) {
+        debug(`[UPDATE_ENV] Updating Windows Path (${newEnv.Path.length} chars)`);
         process.env.Path = newEnv.Path;
     } else if (newEnv.PATH) {
+        debug(`[UPDATE_ENV] Updating Unix PATH (${newEnv.PATH.length} chars)`);
         process.env.PATH = newEnv.PATH;
+    } else {
+        debug("[UPDATE_ENV] No PATH variable found in new environment");
     }
 
     // Update other environment variables
+    let updatedCount = 0;
+    let skippedCount = 0;
+
     for (const key in newEnv) {
         // Skip PATH as we've already handled it, and skip some internal variables
         if (key !== 'PATH' && key !== 'Path' && !key.startsWith('npm_') && !key.startsWith('_')) {
-            process.env[key] = newEnv[key];
+            const oldValue = process.env[key];
+            const newValue = newEnv[key];
+
+            if (oldValue !== newValue) {
+                process.env[key] = newValue;
+                updatedCount++;
+
+                // Log important variable changes
+                if (['HOME', 'USERPROFILE', 'WSL_DISTRO_NAME', 'JAVA_HOME'].includes(key)) {
+                    debug(`[UPDATE_ENV] Updated ${key}: ${oldValue || '(unset)'} -> ${newValue || '(unset)'}`);
+                }
+            }
+        } else {
+            skippedCount++;
         }
     }
+
+    const finalPath = isWindows() ? process.env.Path : process.env.PATH;
+    debug(`[UPDATE_ENV] Final PATH length: ${finalPath?.length || 0} chars`);
+    debug(`[UPDATE_ENV] Updated ${updatedCount} variables, skipped ${skippedCount} variables`);
+    debug("[UPDATE_ENV] Process environment update completed");
 }
 
 function getShellEnvironment(): Promise<NodeJS.ProcessEnv> {
     return new Promise((resolve, reject) => {
+        debug('[SHELL_ENV] Starting shell environment retrieval...');
+
         let command = '';
+        const isWindowsPlatform = isWindows();
 
-        if (isWindows()) {
+        if (isWindowsPlatform) {
+            debug('[SHELL_ENV] Windows platform detected');
             // Windows: use PowerShell to get environment
             command = 'powershell.exe -Command "[Environment]::GetEnvironmentVariables(\'Process\') | ConvertTo-Json"';
+            debug(`[SHELL_ENV] Windows command: ${command}`);
+        } else if (isWSL()) {
+            debug("[SHELL_ENV] Windows WSL platform, using non-interactive shell");
+            // WSL: Use non-interactive shell to avoid job control issues
+            const shell = process.env.SHELL || '/bin/bash';
+            if (shell.includes('zsh')) {
+                // For zsh in WSL, source profile and get environment without interactive mode
+                command = 'zsh -c "test -f ~/.zshrc && source ~/.zshrc > /dev/null 2>&1; env"';
+                debug(`[SHELL_ENV] Windows zsh in WSL: ${command}`);
+            } else {
+                // For bash in WSL, source profile and get environment without interactive mode
+                command = 'bash -c "test -f ~/.bashrc && source ~/.bashrc > /dev/null 2>&1; env"';
+                debug(`[SHELL_ENV] Windows bash in WSL: ${command}`);
+            }
         } else {
+            debug('[SHELL_ENV] Unix-like platform detected');
             // Unix-like systems: source profile files and print environment
             const shell = process.env.SHELL || '/bin/bash';
+            debug(`[SHELL_ENV] Detected shell: ${shell}`);
+
             if (shell.includes('zsh')) {
                 command = 'zsh -i -c "source ~/.zshrc > /dev/null 2>&1; env"';
+                debug('[SHELL_ENV] Using zsh command');
             } else {
                 command = 'bash -i -c "source ~/.bashrc > /dev/null 2>&1; env"';
+                debug('[SHELL_ENV] Using bash command');
             }
+            debug(`[SHELL_ENV] Unix command: ${command}`);
         }
 
-        exec(command, (error, stdout, stderr) => {
+        const execOptions = {
+            timeout: 10000, // 10 second timeout
+            maxBuffer: 2 * 1024 * 1024, // 2MB buffer for environment
+            env: { ...process.env }
+        };
+
+        debug(`[SHELL_ENV] Exec options: timeout=${execOptions.timeout}ms, maxBuffer=${execOptions.maxBuffer}`);
+
+        const startTime = Date.now();
+        exec(command, execOptions, (error, stdout, stderr) => {
+            const executionTime = Date.now() - startTime;
+            debug(`[SHELL_ENV] Command execution completed in ${executionTime}ms`);
+
             if (error) {
-                debug(`Error getting shell environment: ${error.message}`);
+                debug(`[SHELL_ENV] Error getting shell environment: ${error.message}`);
+                debug(`[SHELL_ENV] Error code: ${(error as any).code}`);
+                debug(`[SHELL_ENV] Error signal: ${(error as any).signal}`);
+
+                // Provide WSL-specific debugging information
+                if (process.env.WSL_DISTRO_NAME) {
+                    debug(`[SHELL_ENV] WSL environment detected: ${process.env.WSL_DISTRO_NAME}`);
+                    debug(`[SHELL_ENV] WSL may have issues with shell initialization`);
+                }
+
                 return reject(error);
             }
 
+            if (stderr && stderr.trim().length > 0) {
+                debug(`[SHELL_ENV] Warning - stderr output (${stderr.length} chars): ${stderr.substring(0, 200)}${stderr.length > 200 ? '...' : ''}`);
+            }
+
             const env = { ...process.env }; // Start with current env
+            debug(`[SHELL_ENV] Starting with ${Object.keys(env).length} existing environment variables`);
 
             try {
-                if (isWindows()) {
+                if (isWindowsPlatform) {
+                    debug('[SHELL_ENV] Parsing Windows PowerShell JSON output...');
                     // Parse PowerShell JSON output
                     const envVars = JSON.parse(stdout);
+                    const parsedVarCount = Object.keys(envVars).length;
+                    debug(`[SHELL_ENV] Parsed ${parsedVarCount} environment variables from PowerShell`);
+
                     Object.keys(envVars).forEach(key => {
-                        env[key] = envVars[key].toString();
+                        const value = envVars[key].toString();
+                        env[key] = value;
+
+                        // Log important environment variables
+                        if (['PATH', 'Path', 'HOME', 'USERPROFILE', 'WSL_DISTRO_NAME'].includes(key)) {
+                            debug(`[SHELL_ENV] Important var ${key}: ${value.length > 100 ? value.substring(0, 100) + '...' : value}`);
+                        }
                     });
                 } else {
+                    debug('[SHELL_ENV] Parsing Unix env output...');
                     // Parse Unix env output (KEY=value format)
-                    stdout.split('\n').forEach(line => {
+                    const lines = stdout.split('\n');
+                    let parsedCount = 0;
+
+                    lines.forEach(line => {
                         const match = line.match(/^([^=]+)=(.*)$/);
                         if (match) {
-                            env[match[1]] = match[2];
+                            const [, key, value] = match;
+                            env[key] = value;
+                            parsedCount++;
+
+                            // Log important environment variables
+                            if (['PATH', 'HOME', 'SHELL', 'WSL_DISTRO_NAME'].includes(key)) {
+                                debug(`[SHELL_ENV] Important var ${key}: ${value.length > 100 ? value.substring(0, 100) + '...' : value}`);
+                            }
                         }
                     });
+
+                    debug(`[SHELL_ENV] Parsed ${parsedCount} environment variables from shell`);
                 }
 
-                debug('Successfully retrieved fresh environment variables');
+                debug(`[SHELL_ENV] Final environment contains ${Object.keys(env).length} variables`);
+                debug('[SHELL_ENV] Successfully retrieved fresh environment variables');
                 resolve(env);
             } catch (parseError) {
-                debug(`Error parsing environment output: ${parseError}`);
+                debug(`[SHELL_ENV] Error parsing environment output: ${parseError}`);
+                debug(`[SHELL_ENV] Raw output length: ${stdout.length} chars`);
+                debug(`[SHELL_ENV] Output sample: ${stdout.substring(0, 500)}${stdout.length > 500 ? '...' : ''}`);
+
+                if (parseError instanceof Error) {
+                    debug(`[SHELL_ENV] Parse error name: ${parseError.name}`);
+                    debug(`[SHELL_ENV] Parse error message: ${parseError.message}`);
+                }
+
                 reject(parseError);
             }
         });
diff --git a/workspaces/ballerina/ballerina-extension/src/core/preferences.ts b/workspaces/ballerina/ballerina-extension/src/core/preferences.ts
index b8e62863575..b04986c3658 100644
--- a/workspaces/ballerina/ballerina-extension/src/core/preferences.ts
+++ b/workspaces/ballerina/ballerina-extension/src/core/preferences.ts
@@ -24,6 +24,8 @@ export const ENABLE_SEMANTIC_HIGHLIGHTING = "ballerina.enableSemanticHighlightin
 export const ENABLE_BACKGROUND_DRIFT_CHECK = "ballerina.enableBackgroundDriftCheck";
 export const ENABLE_PERFORMANCE_FORECAST = "ballerina.enablePerformanceForecast";
 export const ENABLE_DEBUG_LOG = "ballerina.debugLog";
+export const ENABLE_TRACE_LOG = "ballerina.traceLog";
+export const TRACE_SERVER = "ballerina-vscode.trace.server";
 export const ENABLE_LIVE_RELOAD = "ballerina.enableLiveReload";
 export const ENABLE_BALLERINA_LS_DEBUG = "ballerina.enableLanguageServerDebug";
 export const ENABLE_EXPERIMENTAL_FEATURES = "ballerina.experimental";
@@ -39,3 +41,4 @@ export const SHOW_LIBRARY_CONFIG_VARIABLES = "ballerina.showLibraryConfigVariabl
 export const LANG_SERVER_PATH = "ballerina.langServerPath"; // this setting is not visible to the extension user
 export const USE_BALLERINA_CLI_LANG_SERVER = "ballerina.useDistributionLanguageServer";
 export const INCLUDE_CURRENT_ORGANIZATION_IN_SEARCH = "ballerina.includeCurrentOrganizationInSearch";
+export const SHOW_ADVANCED_AI_NODES = "ballerina.showAdvancedAiNodes";
diff --git a/workspaces/ballerina/ballerina-extension/src/extension.ts b/workspaces/ballerina/ballerina-extension/src/extension.ts
index 51411b44a53..f172e4cc194 100644
--- a/workspaces/ballerina/ballerina-extension/src/extension.ts
+++ b/workspaces/ballerina/ballerina-extension/src/extension.ts
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import { ExtensionContext, commands, window, Location, Uri, TextEditor, extensions } from 'vscode';
+import { ExtensionContext, commands, window, Location, Uri, TextEditor, extensions, workspace } from 'vscode';
 import { BallerinaExtension } from './core';
 import { activate as activateBBE } from './views/bbe';
 import {
@@ -119,13 +119,24 @@ export async function activateBallerina(): Promise<BallerinaExtension> {
     const ballerinaExtInstance = new BallerinaExtension();
     extension.ballerinaExtInstance = ballerinaExtInstance;
     debug('Active the Ballerina VS Code extension.');
-    sendTelemetryEvent(ballerinaExtInstance, TM_EVENT_EXTENSION_ACTIVATE, CMP_EXTENSION_CORE);
+    try {
+        debug('Sending telemetry event.');
+        sendTelemetryEvent(ballerinaExtInstance, TM_EVENT_EXTENSION_ACTIVATE, CMP_EXTENSION_CORE);
+    } catch (error) {
+        debug('Error sending telemetry event.');
+    }
+    debug('Setting context.');
     ballerinaExtInstance.setContext(extension.context);
+    await updateCodeServerConfig();
     // Enable URI handlers
+    debug('Activating URI handlers.');
     activateUriHandlers(ballerinaExtInstance);
     // Activate Subscription Commands
+    debug('Activating subscription commands.');
     activateSubscriptions();
+    debug('Starting ballerina extension initialization.');
     await ballerinaExtInstance.init(onBeforeInit).then(() => {
+        debug('Ballerina extension activated successfully.');
         // <------------ CORE FUNCTIONS ----------->
         // Activate Library Browser
         activateLibraryBrowser(ballerinaExtInstance);
@@ -187,6 +198,7 @@ export async function activateBallerina(): Promise<BallerinaExtension> {
         });
         isPluginStartup = false;
     }).catch((e) => {
+        debug('Failed to activate Ballerina extension.');
         log("Failed to activate Ballerina extension. " + (e.message ? e.message : e));
         const cmds: any[] = ballerinaExtInstance.extension.packageJSON.contributes.commands;
 
@@ -239,6 +251,15 @@ export async function activateBallerina(): Promise<BallerinaExtension> {
     return ballerinaExtInstance;
 }
 
+async function updateCodeServerConfig() {
+    if (!('CLOUD_STS_TOKEN' in process.env)) {
+        return;
+    }
+    log("Code server environment detected")
+    const config = workspace.getConfiguration('ballerina');
+    await config.update('enableRunFast', true);
+}
+
 export function deactivate(): Thenable<void> | undefined {
     debug('Deactive the Ballerina VS Code extension.');
     if (!langClient) {
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/completions.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/completions.ts
index d143bc84852..79595fa7fb0 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/completions.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/completions.ts
@@ -23,7 +23,7 @@ import {
     sendTelemetryException
 } from "./../telemetry";
 import { PALETTE_COMMANDS } from "./../project/cmds/cmd-runner";
-import { loginGithubCopilot } from '../../utils/ai/auth';
+import { clearAuthCredentials, loginGithubCopilot } from '../../utils/ai/auth';
 import { RPCLayer } from "../../RPCLayer";
 // import { VisualizerWebview } from "../../views/visualizer/webview";
 import { AiPanelWebview } from "../../views/ai-panel/webview";
@@ -47,8 +47,6 @@ export function activateCopilotLoginCommand() {
 
 export function resetBIAuth() {
     commands.registerCommand(PALETTE_COMMANDS.RESET_BI, async () => {
-        await extension.ballerinaExtInstance.context.secrets.delete('GITHUB_TOKEN');
-        await extension.ballerinaExtInstance.context.secrets.delete('GITHUB_COPILOT_TOKEN');
-        await extension.ballerinaExtInstance.context.secrets.delete('LOGIN_ALERT_SHOWN');
+        await clearAuthCredentials();
     });
 }
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/dataMapping.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/dataMapping.ts
index df465995ab5..86c291ac26d 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/dataMapping.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/dataMapping.ts
@@ -16,34 +16,17 @@
  * under the License.
  */
 
-import { Attachment, createFunctionSignature, DataMappingRecord, ErrorCode, GenerateMappingFromRecordResponse, GenerateMappingsFromRecordRequest, GenerateTypesFromRecordRequest, GenerateTypesFromRecordResponse, getSource, PartialST, ProjectSource, SyntaxTree } from "@wso2/ballerina-core";
-import { FunctionDefinition, ModulePart, RequiredParam, STKindChecker } from "@wso2/syntax-tree";
-import { camelCase, memoize } from "lodash";
+import { createFunctionSignature, DataMappingRecord, GenerateTypesFromRecordRequest, GenerateTypesFromRecordResponse, getSource, ImportInfo } from "@wso2/ballerina-core";
+import { camelCase } from "lodash";
 import path from "path";
 import * as fs from 'fs';
 import * as os from 'os';
-import { Uri, workspace } from "vscode";
-import { langClient } from "./activator";
-import { getFunction, processMappings, typesFileParameterDefinitions } from "../../rpc-managers/ai-panel/utils";
-import { MODIFIYING_ERROR } from "../../views/ai-panel/errorCodes";
-import { writeBallerinaFileDidOpen } from "../../utils/modification";
-
-
-export async function generateDataMapping(
-  projectRoot: string,
-  request: GenerateMappingsFromRecordRequest
-): Promise<GenerateMappingFromRecordResponse> {
-    const source = createDataMappingFunctionSource(request.inputRecordTypes, request.outputRecordType, request.functionName, 
-      request.inputNames);
-    const file = request.attachment && request.attachment.length > 0
-      ? request.attachment[0]
-      : undefined;
-    const updatedSource = await getUpdatedFunctionSource(projectRoot, source, request.imports, file);
-    return Promise.resolve({mappingCode: updatedSource});
-}
+import { typesFileParameterDefinitions } from "../../rpc-managers/ai-panel/utils";
+import { writeBallerinaFileDidOpenTemp } from "../../utils/modification";
+import { PrimitiveType } from "../../../src/rpc-managers/ai-panel/constants";
 
+// Generate Ballerina types from a record request
 export async function generateTypeCreation(
-  projectRoot: string,
   request: GenerateTypesFromRecordRequest
 ): Promise<GenerateTypesFromRecordResponse> {
     const file = request.attachment && request.attachment.length > 0
@@ -58,110 +41,128 @@ export async function generateTypeCreation(
     return Promise.resolve({ typesCode: updatedSource });
 }
 
-async function getUpdatedFunctionSource(
-    projectRoot: string,
-    funcSource: string,
-    imports: { moduleName: string; alias?: string }[],
-    file?: Attachment
+// Create a temporary Ballerina file with a generated data mapping function
+export async function createTempDataMappingFile(
+  projectRoot: string,
+  inputs: DataMappingRecord[],
+  output: DataMappingRecord,
+  functionName: string,
+  inputNames: string[],
+  imports: ImportInfo[]
+): Promise<string> {
+  const funcSource = createDataMappingFunctionSource(inputs, output, functionName, inputNames);
+  const tempFilePath = await createTempBallerinaFile(projectRoot, funcSource, imports);
+  return tempFilePath;
+}
+
+// Create a temporary Ballerina file with optional imports
+async function createTempBallerinaFile(
+  projectRoot: string,
+  funcSource: string,
+  imports?: ImportInfo[]
 ): Promise<string> {
+  let fullSource = funcSource;
+
+  if (imports && imports.length > 0) {
     const importsString = imports
       .map(({ moduleName, alias }) =>
         alias ? `import ${moduleName} as ${alias};` : `import ${moduleName};`
       )
       .join("\n");
-    const fullSource = `${importsString}\n\n${funcSource}`;
-    
-    const tempDir = fs.mkdtempSync(
-        path.join(os.tmpdir(), "ballerina-data-mapping-temp-")
-    );
-    fs.cpSync(projectRoot, tempDir, { recursive: true });
-    const tempTestFilePath = path.join(tempDir, "temp.bal");
-    writeBallerinaFileDidOpen(tempTestFilePath, fullSource);
-
-    const fileUri = Uri.file(tempTestFilePath).toString();
-    const st = (await langClient.getSyntaxTree({
-      documentIdentifier: {
-        uri: fileUri,
-      },
-    })) as SyntaxTree;
-  
-    let funcDefinitionNode: FunctionDefinition = null;
-    const modulePart = st.syntaxTree as ModulePart;
-  
-    modulePart.members.forEach((member) => {
-      if (STKindChecker.isFunctionDefinition(member)) {
-        funcDefinitionNode = member;
-      }
-    });
-  
-    if (!funcDefinitionNode) {
-      throw new Error("Function definition not found in syntax tree");
-    }
-  
-    const processedST = await processMappings(
-      funcDefinitionNode,
-      fileUri,
-      file
-    );
-  
-    const { parseSuccess, source, syntaxTree } = processedST as SyntaxTree;
-    if (!parseSuccess) {
-      throw new Error("No valid fields were identified for mapping between the given input and output records.");
-    }
-  
-    const fn = await getFunction(
-      syntaxTree as ModulePart,
-      funcDefinitionNode.functionName.value
-    );
-  
-    return fn.source;
-}
-
-function createDataMappingFunctionSource(inputParams: DataMappingRecord[], outputParam: DataMappingRecord, functionName: string, inputNames:string[]): string {
-  const finalFunctionName = functionName || "transform";
-
-  function processType(type: string): string {
-    let typeName = type.includes('/') ? type.split('/').pop()! : type;
-    if (typeName.includes(':')) {
-      const [modulePart, typePart] = typeName.split(':');
-      typeName = `${modulePart.split('.').pop()}:${typePart}`;
-    }
-    return typeName;
+    fullSource = `${importsString}\n\n${funcSource}`;
   }
 
-  function getDefaultParamName(type: string, isArray: boolean): string {
-    const processedType = processType(type);
-
-    // Handle primitive types with special naming
-    if (processedType === 'string') { return isArray ? 'strArr' : 'str'; }
-    if (processedType === 'int') { return isArray ? 'numArr' : 'num'; }
-    if (processedType === 'float') { return isArray ? 'fltArr' : 'flt'; }
-    if (processedType === 'decimal') { return isArray ? 'decArr' : 'dec'; }
-    if (processedType === 'boolean') { return isArray ? 'flagArr' : 'flag'; }
-
-    // Default to camelCase for non-primitive types
-    return camelCase(processedType);
-  }
+  const tempDir = fs.mkdtempSync(
+    path.join(os.tmpdir(), "ballerina-data-mapping-temp-")
+  );
+  fs.cpSync(projectRoot, tempDir, { recursive: true });
+  const tempTestFilePath = path.join(tempDir, "temp.bal");
+  writeBallerinaFileDidOpenTemp(tempTestFilePath, fullSource);
 
-  const parametersStr = inputParams
-    .map((item, index) => {
-      const paramName = inputNames[index] || getDefaultParamName(item.type, item.isArray);
-      return `${processType(item.type)}${item.isArray ? '[]' : ''} ${paramName}`;
-    })
-    .join(", ");
+  return tempTestFilePath;
+}
 
-  const returnTypeStr = `returns ${processType(outputParam.type)}${outputParam.isArray ? '[]' : ''}`;
+// Generate the Ballerina source for a data mapping function
+export function createDataMappingFunctionSource(
+  inputParams: DataMappingRecord[],
+  outputParam: DataMappingRecord,
+  functionName: string,
+  inputNames: string[]
+): string {
+  const parametersStr = buildParametersString(inputParams, inputNames);
+  const returnTypeStr = buildReturnTypeString(outputParam);
 
   const modification = createFunctionSignature(
     "",
-    finalFunctionName,
+    functionName,
     parametersStr,
     returnTypeStr,
     { startLine: 0, startColumn: 0 },
     false,
     true,
-    '{}'
+    "{}"
   );
-  const source = getSource(modification);
-  return source;
+
+  return getSource(modification);
+}
+
+// Generate parameters string for function signature
+function buildParametersString(
+  inputParams: DataMappingRecord[],
+  inputNames: string[]
+): string {
+  return inputParams
+    .map((item, index) => {
+      const paramName =
+        inputNames[index] || getDefaultParamName(item.type, item.isArray);
+      return formatParameter(item, paramName);
+    })
+    .join(", ");
+}
+
+// Generate a default parameter name for primitives and custom types
+function getDefaultParamName(type: string, isArray: boolean): string {
+  const processedType = processType(type);
+
+  switch (processedType) {
+    case PrimitiveType.STRING:
+      return isArray ? "strArr" : "str";
+    case PrimitiveType.INT:
+      return isArray ? "numArr" : "num";
+    case PrimitiveType.FLOAT:
+      return isArray ? "fltArr" : "flt";
+    case PrimitiveType.DECIMAL:
+      return isArray ? "decArr" : "dec";
+    case PrimitiveType.BOOLEAN:
+      return isArray ? "flagArr" : "flag";
+    default:
+      return camelCase(processedType);
+  }
+}
+
+// Extract the actual type name from a fully qualified type
+function processType(type: string): string {
+  let typeName = type.includes("/") ? type.split("/").pop()! : type;
+
+  if (typeName.includes(":")) {
+    const [modulePart, typePart] = typeName.split(":");
+    typeName = `${modulePart.split(".").pop()}:${typePart}`;
+  }
+
+  return typeName;
+}
+
+// Format a single function parameter
+function formatParameter(
+  item: DataMappingRecord,
+  paramName: string
+): string {
+  return `${processType(item.type)}${item.isArray ? "[]" : ""} ${paramName}`;
+}
+
+// Generate return type string
+function buildReturnTypeString(outputParam: DataMappingRecord): string {
+  return `returns ${processType(outputParam.type)}${
+    outputParam.isArray ? "[]" : ""
+  }`;
 }
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/code/code.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/code/code.ts
index 73d399641a0..ce678145d92 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/service/code/code.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/code/code.ts
@@ -15,7 +15,7 @@
 // under the License.
 
 import { CoreMessage, generateText, streamText } from "ai";
-import { getAnthropicClient, ANTHROPIC_SONNET_4 } from "../connection";
+import { getAnthropicClient, ANTHROPIC_SONNET_4, getProviderCacheControl } from "../connection";
 import { GenerationType, getRelevantLibrariesAndFunctions } from "../libs/libs";
 import { getRewrittenPrompt, populateHistory, transformProjectSource, getErrorMessage, extractResourceDocumentContent } from "../utils";
 import { getMaximizedSelectedLibs, selectRequiredFunctions, toMaximizedLibrariesFromLibJson } from "./../libs/funcs";
@@ -53,6 +53,7 @@ export async function generateCodeCore(params: GenerateCodeRequest, eventHandler
     ).libraries;
 
     const historyMessages = populateHistory(params.chatHistory);
+    const cacheOptions = await getProviderCacheControl();
     const allMessages: CoreMessage[] = [
         {
             role: "system",
@@ -61,17 +62,13 @@ export async function generateCodeCore(params: GenerateCodeRequest, eventHandler
         {
             role: "system",
             content: getSystemPromptSuffix(LANGLIBS),
-            providerOptions: {
-                anthropic: { cacheControl: { type: "ephemeral" } },
-            },
+            providerOptions: cacheOptions,
         },
         ...historyMessages,
         {
             role: "user",
             content: getUserPrompt(prompt, sourceFiles, params.fileAttachmentContents, packageName, params.operationType),
-            providerOptions: {
-                anthropic: { cacheControl: { type: "ephemeral" } },
-            },
+            providerOptions: cacheOptions,
         },
     ];
 
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/connection.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/connection.ts
index 01553b83af6..ea1f71410a9 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/service/connection.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/connection.ts
@@ -15,19 +15,42 @@
 // under the License.
 
 import { createAnthropic } from "@ai-sdk/anthropic";
-import { getAccessToken, getLoginMethod, getRefreshedAccessToken } from "../../../utils/ai/auth";
+import { createAmazonBedrock } from "@ai-sdk/amazon-bedrock";
+import { getAccessToken, getLoginMethod, getRefreshedAccessToken, getAwsBedrockCredentials } from "../../../utils/ai/auth";
 import { AIStateMachine } from "../../../views/ai-panel/aiMachine";
 import { BACKEND_URL } from "../utils";
 import { AIMachineEventType, LoginMethod } from "@wso2/ballerina-core";
 
 export const ANTHROPIC_HAIKU = "claude-3-5-haiku-20241022";
 export const ANTHROPIC_SONNET_4 = "claude-sonnet-4-20250514";
-export const ANTHROPIC_SONNET_3_5 = "claude-3-5-sonnet-20241022";
 
 type AnthropicModel =
     | typeof ANTHROPIC_HAIKU
-    | typeof ANTHROPIC_SONNET_4
-    | typeof ANTHROPIC_SONNET_3_5;
+    | typeof ANTHROPIC_SONNET_4;
+
+/**
+ * Maps AWS regions to their corresponding Bedrock inference profile prefixes
+ * @param region - AWS region string (e.g., 'us-east-1', 'eu-west-1', 'ap-southeast-1')
+ * @returns The appropriate regional prefix for Bedrock model IDs
+ */
+export function getBedrockRegionalPrefix(region: string): string {
+    const regionPrefix = region.split('-')[0].toLowerCase();
+    
+    switch (regionPrefix) {
+        case 'us':
+            return region.startsWith('us-gov-') ? 'us-gov' : 'us';
+        case 'eu':
+            return 'eu';
+        case 'ap':
+            return 'apac';
+        case 'ca':
+        case 'sa':
+            return 'us'; // Canada and South America regions use US prefix
+        default:
+            console.warn(`Unknown region prefix: ${regionPrefix}, defaulting to 'us'`);
+            return 'us';
+    }
+}
 
 let cachedAnthropic: ReturnType<typeof createAnthropic> | null = null;
 let cachedAuthMethod: LoginMethod | null = null;
@@ -82,7 +105,7 @@ export async function fetchWithAuth(input: string | URL | Request, options: Requ
  * Returns a singleton Anthropic client instance.
  * Re-initializes the client if the login method has changed.
  */
-export const getAnthropicClient = async (model: AnthropicModel) => {
+export const getAnthropicClient = async (model: AnthropicModel): Promise<any> => {
     const loginMethod = await getLoginMethod();
 
     // Recreate client if login method has changed or no cached instance
@@ -99,6 +122,35 @@ export const getAnthropicClient = async (model: AnthropicModel) => {
                 baseURL: "https://api.anthropic.com/v1",
                 apiKey: apiKey,
             });
+        } else if (loginMethod === LoginMethod.AWS_BEDROCK) {
+            const awsCredentials = await getAwsBedrockCredentials();
+            if (!awsCredentials) {
+                throw new Error('AWS Bedrock credentials not found');
+            }
+            
+            const bedrock = createAmazonBedrock({
+                region: awsCredentials.region,
+                accessKeyId: awsCredentials.accessKeyId,
+                secretAccessKey: awsCredentials.secretAccessKey,
+                sessionToken: awsCredentials.sessionToken,
+            });
+            
+            // Map Anthropic model names to AWS Bedrock model IDs (base models without region prefix)
+            const baseModelMap: Record<AnthropicModel, string> = {
+                [ANTHROPIC_HAIKU]: "anthropic.claude-3-5-haiku-20241022-v1:0",
+                [ANTHROPIC_SONNET_4]: "anthropic.claude-sonnet-4-20250514-v1:0",
+            };
+            
+            const baseModelId = baseModelMap[model];
+            if (!baseModelId) {
+                throw new Error(`Unsupported model for AWS Bedrock: ${model}`);
+            }
+            
+            // Get regional prefix based on AWS region
+            const regionalPrefix = getBedrockRegionalPrefix(awsCredentials.region);
+            const bedrockModelId = `${regionalPrefix}.${baseModelId}`;
+            
+            return bedrock(bedrockModelId);
         } else {
             throw new Error(`Unsupported login method: ${loginMethod}`);
         }
@@ -106,5 +158,23 @@ export const getAnthropicClient = async (model: AnthropicModel) => {
         cachedAuthMethod = loginMethod;
     }
 
-    return cachedAnthropic(model);
+    // For AWS Bedrock, we return directly above, so this is for other methods
+    return cachedAnthropic!(model);
+};
+
+/**
+ * Returns provider-aware cache control options for prompt caching
+ * @returns Cache control options based on the current login method
+ */
+export const getProviderCacheControl = async () => {
+    const loginMethod = await getLoginMethod();
+    
+    switch (loginMethod) {
+        case LoginMethod.AWS_BEDROCK:
+            return { bedrock: { cachePoint: { type: 'default' } } };
+        case LoginMethod.ANTHROPIC_KEY:
+        case LoginMethod.BI_INTEL:
+        default:
+            return { anthropic: { cacheControl: { type: "ephemeral" } } };
+    }
 };
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/datamapper.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/datamapper.ts
index 5d4e01fb7fc..3c55fe1c317 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/datamapper.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/datamapper.ts
@@ -14,30 +14,30 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { generateText, CoreMessage, generateObject } from "ai";
-import { getDataMappingPrompt } from "./prompt";
+import { CoreMessage, generateObject } from "ai";
 import { getAnthropicClient, ANTHROPIC_SONNET_4 } from "../connection";
 import {
-    Payload,
     DatamapperResponse,
     AIDataMappings,
     MappingJson,
     MappingRecord,
-    Inputs,
     MappingOperation,
     FieldMetadata,
-    MetadataField,
-    MetadataType,
-    Metadata,
     ParameterMetadata,
     MappingFields,
+    Mapping,
     Operation,
-    Structure,
-    ChatResponse,
+    DataMappingRequest,
+    DataMappingResponse,
+    IOTypeVisitor,
+    VisitorContext,
+    Payload
 } from "./types";
-import {  MappingSchema } from "./schema";
+import { MappingSchema } from "./schema";
 import { AIPanelAbortController } from "../../../../../src/rpc-managers/ai-panel/utils";
-import { ADDITION, DIRECT, DIVISION, LENGTH, MODULAR, MULTIPLICATION, NAME, PARAMETER_1, PARAMETER_2, SPLIT, SUBTRACTION } from "./constant";
+import { ADDITION, DIRECT, DIVISION, LENGTH, MODULAR, MULTIPLICATION, NAME, PARAMETER_1, SPLIT, SUBTRACTION } from "./constant";
+import { ExpandedDMModel, DataMapperModelResponse, IOType } from "@wso2/ballerina-core";
+import { getDataMappingPrompt } from "./prompt";
 
 // Operations table - In a real implementation, this would be loaded from JSON files
 const operationsTable: Map<string, Operation> = new Map([
@@ -156,427 +156,532 @@ const operationsTable: Map<string, Operation> = new Map([
 ]);
 
 // =============================================================================
-// MAIN ORCHESTRATOR FUNCTION
+// UTILITY FUNCTIONS FOR SCHEMA PROCESSING
 // =============================================================================
 
 /**
- * Main function for AI-powered data mapping generation
- * Coordinates the entire data mapping workflow with retry logic and error handling
+ * Finds a schema type by path in the input schemas array
  */
-async function mapData(payload: Payload): Promise<DatamapperResponse> {
-    const maxRetries = 6;
-    let retries = 0;
 
-    while (retries < maxRetries) {
-        if (retries > 1) {
-            console.debug("Retrying to generate mappings for the payload.");
+class IOTypeVisitorImpl implements IOTypeVisitor {
+    visitIOType(ioType: IOType, context: VisitorContext): IOType | null {
+        if (ioType.id === context.targetPath) {
+            context.found = ioType;
+            return ioType;
         }
 
-        try {
-            // Extract existing mapping field hints
-            const mappingFields: { [key: string]: MappingFields } = payload.mapping_fields || {};
+        // Visit fields
+        if (ioType.fields && Array.isArray(ioType.fields)) {
+            for (const field of ioType.fields) {
+                const result = this.visitIOType(field, context);
+                if (result) { return result; }
+            }
+        }
 
-            // STEP 1: Generate AI-powered mappings using Claude
-            const generatedMappings = await getAutoMappings(payload.inputs, payload.output, mappingFields);
+        // Visit members (for enums, unions)
+        if (ioType.members && Array.isArray(ioType.members)) {
+            for (const member of ioType.members) {
+                const result = this.visitIOType(member, context);
+                if (result) { return result; }
+            }
+        }
 
-            // STEP 2: Prepare metadata for validation
-            const input: Inputs = {
-                input: payload.inputMetadata,
-                output: payload.outputMetadata,
-            };
+        // Visit member
+        if (ioType.member) {
+            const result = this.visitIOType(ioType.member, context);
+            if (result) { return result; }
+        }
 
-            // STEP 3: Validate and process AI-generated mappings
-            const evaluateMappingsResult = await evaluateMappings([], generatedMappings, operationsTable, input);
+        return null;
+    }
+}
 
-            if (evaluateMappingsResult) {
-                // STEP 4: Extract and structure the validated mappings
-                const mappings = extractMappings(evaluateMappingsResult);
-                return mappings;
-            } else {
-                throw new Error("Failed to generate mappings for the payload.");
-            }
-        } catch (error) {
-            console.error(`Error occurred while generating mappings: ${error}`);
-            retries += 1;
-            continue;
-        }
+function findSchemaTypeByPath(inputs: IOType[], path: string): IOType | null {
+    const context: VisitorContext = {
+        targetPath: path,
+        found: null
+    };
+
+    const visitor = new IOTypeVisitorImpl();
+
+    for (const inputSchema of inputs) {
+        const result = visitor.visitIOType(inputSchema, context);
+        if (result) { return result; }
     }
 
-    throw new Error("Failed to generate mappings for the payload after all retries.");
+    return null;
 }
 
-// =============================================================================
-// MAPPING EXTRACTION FUNCTION
-// =============================================================================
-
 /**
- * Recursive mapping extraction and structuring function
- * Processes AI-generated and validated mappings into clean, hierarchical structure
+ * Removes array indices from path to normalize field paths
  */
-function extractMappings(evaluateMappingsResult: MappingJson): DatamapperResponse {
-    const mappings: { [key: string]: MappingJson } = {};
+function removeArrayIndicesFromPath(path: string): string {
+    const pathParts = path.split('.');
+    const cleanParts: string[] = [];
 
-    // Guard clause: Ensure we have map-type data (not single mapping record)
-    if (isMappingRecord(evaluateMappingsResult)) {
-        throw new Error("EvaluateMappingsResult is a MappingRecord, expected map structure.");
-    }
-
-    // Process nested mapping structure
-    if (typeof evaluateMappingsResult === "object" && evaluateMappingsResult !== null) {
-        for (const [key, value] of Object.entries(evaluateMappingsResult)) {
-            if (isMappingRecord(value)) {
-                // Direct mapping record - add to results
-                mappings[key] = value;
-            } else if (typeof value === "object" && value !== null) {
-                // Nested mapping structure - recursively process
-                const nestedMappingsResult = extractMappings(value as MappingJson);
-                mappings[key] = nestedMappingsResult.mappings;
-            }
+    for (const part of pathParts) {
+        // Skip numeric indices
+        if (!isNaN(parseInt(part))) {
+            continue;
         }
+        cleanParts.push(part);
     }
-
-    return { mappings };
+    
+    return cleanParts.join('.');
 }
 
-// =============================================================================
-// AI-POWERED DATA MAPPING GENERATION
-// =============================================================================
-
 /**
- * Generates intelligent data transformation mappings by analyzing input and output schemas
+ * Removes output record prefix from field name
  */
-async function getAutoMappings(
-    inputJsonRecord: { [key: string]: any },
-    outputJsonRecord: { [key: string]: any },
-    mappingFields: { [key: string]: MappingFields }
-): Promise<AIDataMappings> {
-    // STEP 1: Construct AI prompt with schema information
-    const prompt = getDataMappingPrompt(
-        JSON.stringify(inputJsonRecord),
-        JSON.stringify(outputJsonRecord),
-        JSON.stringify(mappingFields)
-    );
-
-    // STEP 3: Call Claude API using AI SDK
-    const messages: CoreMessage[] = [
-        { role: "user", content: prompt }
-    ];
-
-    try {
-        const { object } = await generateObject({
-            model: await getAnthropicClient(ANTHROPIC_SONNET_4),
-            maxTokens: 4096,
-            temperature: 0,
-            messages: messages,
-            schema: MappingSchema,
-            abortSignal: AIPanelAbortController.getInstance().signal,
-        });
-
-        const generatedMappings = object.generatedMappings as AIDataMappings;
-        return generatedMappings;
-    } catch (error) {
-        console.error("Failed to parse response:", error);
-        throw new Error(`Failed to parse mapping response: ${error}`);
+function removeOutputRecordPrefix(fieldName: string, output: IOType): string {
+    const outputRecordName = output.name;
+    if (outputRecordName) {
+        const prefix = outputRecordName + ".";
+        if (fieldName.startsWith(prefix)) {
+            return fieldName.substring(prefix.length);
+        }
     }
+    return fieldName;
 }
 
 // =============================================================================
-// MAPPING VALIDATION AND PROCESSING ENGINE
+// MAPPING EVALUATION FUNCTIONS
 // =============================================================================
 
 /**
- * Recursively validates and processes AI-generated mappings against supported operations
+ * Main function to evaluate mappings with enhanced schema support
  */
 async function evaluateMappings(
-    path: string[],
-    input: AIDataMappings,
-    operations: Map<string, Operation>,
-    initialRecords: Inputs
+    path: string[], 
+    llmGeneratedMappings: AIDataMappings, 
+    initialRecords: DataMappingRequest
 ): Promise<MappingJson | null> {
-    const returnRec: { [key: string]: MappingJson } = {};
+    if (isMapping(llmGeneratedMappings)) {
+        return await processMappingOperation(path, llmGeneratedMappings, initialRecords);
+    } else {
+        return await processNestedMappings(path, llmGeneratedMappings as { [key: string]: AIDataMappings }, initialRecords);
+    }
+}
 
-    if (isMapping(input)) {
-        // STEP 1: Extract operation record from AI-generated mapping
-        const operationRecord = input.OPERATION;
+/**
+ * Processes individual mapping operations with schema validation
+ */
+async function processMappingOperation(
+    path: string[], 
+    llmGeneratedMappings: Mapping, 
+    initialRecords: DataMappingRequest
+): Promise<MappingJson | null> {
+    try {
+        const operationRecord = llmGeneratedMappings.OPERATION;
         const parametersTypes: { [key: string]: ParameterMetadata } = {};
         let validParameters = false;
 
-        // STEP 2: Process and validate each parameter in the operation
         for (const subKey of Object.keys(operationRecord)) {
-            if (subKey !== NAME) {
-                const subPathString = operationRecord[subKey as keyof MappingOperation] as string;
-                if (!subPathString) {
-                    continue;
-                }
-
-                // Extract operation details and input path
-                const operationName = operationRecord.NAME;
-                const paths = subPathString.split(".");
-                if (paths.length <= 1) {
-                    continue;
-                }
-
-                // STEP 3: Validate input record instance exists
-                const recordInstance = paths.shift()!;
-                if (!initialRecords.input[recordInstance]) {
-                    continue;
-                }
-
-                // STEP 4: Extract and validate field type metadata
-                const inputFields = initialRecords.input[recordInstance];
-                const inputType = getTypeMetadataOfField(inputFields, [...paths].reverse(), subKey, operationName);
-                if (!inputType) {
-                    continue;
-                }
-
-                // STEP 5: Store validated parameter metadata
-                parametersTypes[subKey] = {
-                    type: inputType.type,
-                    input: subPathString,
-                    optional: inputType.optional,
-                    nullable: inputType.nullable,
-                };
-                validParameters = true;
+            if (subKey === NAME) {
+                continue;
+            }
+            
+            const subPathString = operationRecord[subKey as keyof MappingOperation] as string;
+            if (!subPathString) {
+                continue;
+            }
+            
+            const operationName = operationRecord.NAME;
+            const inputType = findSchemaTypeByPath(initialRecords.input, subPathString);
+            if (!inputType) {
+                continue;
             }
+
+            const fieldMetadata = getFieldMetadataFromSchemaType(inputType, subKey, operationName);
+            if (!fieldMetadata) {
+                continue;
+            }
+
+            parametersTypes[subKey] = {
+                type: fieldMetadata.type,
+                input: subPathString,
+                optional: fieldMetadata.optional,
+                nullable: fieldMetadata.nullable
+            };
+            validParameters = true;
         }
 
-        // STEP 6: Validate operation if parameters are valid
         if (validParameters) {
-            const outputFields = initialRecords.output;
-            const outputType = getTypeMetadataOfField(outputFields, [...path].reverse());
+            const outputType = getOutputFieldMetadata(initialRecords.output, path);
             if (!outputType) {
                 return null;
             }
-
-            // STEP 7: Perform comprehensive operation validation
+            
             const mapping = validateMappingOperation(
-                operationRecord,
-                operations,
-                parametersTypes,
-                outputType,
-                path[path.length - 1],
+                operationRecord, 
+                parametersTypes, 
+                outputType, 
+                path[path.length - 1], 
                 initialRecords.input
             );
             return mapping;
         }
         return null;
-    } else if (typeof input === "object" && input !== null) {
-        // STEP 8: Recursively process nested mapping structures
-        for (const [key, value] of Object.entries(input)) {
-            if (value === null || value === undefined) {
-                continue;
-            }
+    } catch (error) {
+        console.error('Error processing mapping operation:', error);
+        return null;
+    }
+}
 
-            // Process nested mapping with extended path
-            const newPath = [...path, key];
-            const temporaryRecord = await evaluateMappings(
-                newPath,
-                value as AIDataMappings,
-                operations,
-                initialRecords
-            );
+/**
+ * Processes nested mapping structures
+ */
+async function processNestedMappings(
+    path: string[], 
+    llmGeneratedMappings: { [key: string]: AIDataMappings }, 
+    initialRecords: DataMappingRequest
+): Promise<MappingJson | null> {
+    const returnRec: { [key: string]: MappingJson } = {};
 
-            if (temporaryRecord) {
-                if (
-                    isMappingRecord(temporaryRecord) ||
-                    (typeof temporaryRecord === "object" && Object.keys(temporaryRecord).length > 0)
-                ) {
-                    returnRec[key] = temporaryRecord;
-                }
+    for (const [key, value] of Object.entries(llmGeneratedMappings)) {
+        if (value === null || value === undefined) {
+            continue;
+        }
+        
+        const newPath = [...path];
+        let cleanKey = removeOutputRecordPrefix(key, initialRecords.output);
+        newPath.push(key);
+
+        const temporaryRecord = await evaluateMappings(newPath, value, initialRecords);
+        if (temporaryRecord) {
+            if (isMappingRecord(temporaryRecord) || 
+                (typeof temporaryRecord === 'object' && Object.keys(temporaryRecord).length > 0)) {
+                returnRec[removeArrayIndicesFromPath(cleanKey)] = temporaryRecord;
             }
         }
-        return returnRec;
-    } else {
-        throw new Error("Invalid input type");
     }
+
+    return convertFlatToNestedMap(returnRec);
 }
 
 // =============================================================================
-// OPERATION-SPECIFIC VALIDATION ENGINE
+// MAPPING OPERATION VALIDATION
 // =============================================================================
 
 /**
- * Validates individual mapping operations against their specific requirements
+ * Validates mapping operations with enhanced error handling
  */
 function validateMappingOperation(
     mapping: MappingOperation,
-    operations: Map<string, Operation>,
     inputType: { [key: string]: ParameterMetadata },
     outputType: FieldMetadata,
     name: string,
-    inputs: { [key: string]: Metadata }
+    inputs: IOType[]
 ): MappingJson | null {
     const operation = mapping.NAME;
-
     // STEP 1: Verify operation exists in operations database
-    const op = operations.get(operation);
+    const op = operationsTable.get(operation);
+    
     if (!op) {
         return null;
     }
 
-    // STEP 2: Validate DIRECT mapping operation
-    if (op.name === DIRECT) {
-        const paramOne = inputType[PARAMETER_1];
-        if (!paramOne) {
-            return null;
-        }
-
-        const paths = paramOne.input.split(".");
-        if (paths.length === 0) {
-            throw new Error("Invalid path in input type for DIRECT operation");
-        }
-
-        const recordInstance = paths[0];
-        if (!inputs[recordInstance]) {
-            throw new Error("Record instance not found in inputs for DIRECT operation");
+    switch (op.name) {
+        // STEP 2: Validate DIRECT mapping operation
+        case DIRECT: {
+            const param = inputType[PARAMETER_1];
+            if (!param) {
+                return null;
+            }
+            
+            if (!findSchemaTypeByPath(inputs, param.input)) {
+                throw new Error(`Input path not found for DIRECT operation: ${param.input}`);
+            }
+            
+            return {
+                operation: DIRECT,
+                targetType: outputType.type,
+                parameters: [removeArrayIndicesFromPath(param.input)]
+            };
         }
-
-        return {
-            operation: DIRECT,
-            targetType: outputType.type,
-            parameters: [paramOne.input],
-        };
-
         // STEP 3: Validate LENGTH operation
-    } else if (op.name === LENGTH) {
-        const paramOne = inputType[PARAMETER_1];
-        if (!paramOne) {
-            throw new Error("Parameter 1 not found in input type for LENGTH operation");
-        }
-
-        const pathString = paramOne.input;
-        if (outputType.type === "int" || outputType.type === "int|()") {
-            const paths = pathString.split(".");
-            if (paths.length === 0) {
-                throw new Error("Invalid path in input type for LENGTH operation");
+        case LENGTH: {
+            const param = inputType[PARAMETER_1];
+            if (!param) {
+                throw new Error("Parameter 1 not found in input type for LENGTH operation");
             }
-
-            const recordInstance = paths[0];
-            if (!inputs[recordInstance]) {
-                throw new Error("Record instance not found in inputs for LENGTH operation");
+            
+            if (!(outputType.type === "int" || outputType.type === "int|()")) {
+                throw new Error("Invalid output type for LENGTH operation");
             }
-
+            
+            if (!findSchemaTypeByPath(inputs, param.input)) {
+                throw new Error(`Input path not found for LENGTH operation: ${param.input}`);
+            }
+            
             return {
                 operation: LENGTH,
                 targetType: outputType.type,
-                parameters: [pathString],
+                parameters: [removeArrayIndicesFromPath(param.input)]
             };
-        } else {
-            throw new Error("Invalid input or output type for LENGTH operation");
         }
-
         // STEP 4: Validate SPLIT operation
-    } else if (op.name === SPLIT) {
-        let paramOne: ParameterMetadata, paramTwo: string | MappingJson;
-        if (inputType[PARAMETER_1] && mapping.PARAMETER_2) {
-            paramOne = inputType[PARAMETER_1];
-            paramTwo = mapping.PARAMETER_2;
-        } else if (inputType[PARAMETER_2] && mapping.PARAMETER_1) {
-            paramOne = inputType[PARAMETER_2];
-            paramTwo = mapping.PARAMETER_1;
-        } else {
-            throw new Error("Required parameters not found in input type for SPLIT operation");
+        case SPLIT: {
+            const paramOne = inputType[PARAMETER_1];
+            const paramTwo = mapping.PARAMETER_2;
+            
+            if (!paramOne || !paramTwo) {
+                throw new Error("Required parameters not found in input type for SPLIT operation");
+            }
+            
+            if (paramOne.type !== "regex" ||
+                !(
+                    outputType.type === "string[]" ||
+                    outputType.type === "string[]|()" ||
+                    outputType.type === "(string|())[]" ||
+                    outputType.type === "(string|())[]|()"
+                )
+            ) {
+                throw new Error("Invalid input or output type for SPLIT operation");
+            }
+            
+            if (!findSchemaTypeByPath(inputs, paramOne.input)) {
+                throw new Error(`Input path not found for SPLIT operation: ${paramOne.input}`);
+            }
+            
+            return {
+                operation: SPLIT,
+                targetType: outputType.type,
+                parameters: [paramOne.input, paramTwo]
+            };
         }
+        
+        default:
+            return null;
+    }
+}
 
-        if (
-            paramOne.type !== "regex" ||
-            !(
-                outputType.type === "string[]" ||
-                outputType.type === "string[]|()" ||
-                outputType.type === "(string|())[]" ||
-                outputType.type === "(string|())[]|()"
-            )
-        ) {
-            throw new Error("Invalid input or output type for SPLIT operation");
-        }
+// =============================================================================
+// FIELD METADATA EXTRACTION FUNCTIONS
+// =============================================================================
 
-        const paths = paramOne.input.split(".");
-        if (paths.length === 0) {
-            throw new Error("Invalid path in input type for SPLIT operation");
+/**
+ * Extracts field metadata from schema type with enhanced type checking
+ */
+function getFieldMetadataFromSchemaType(
+    inputType: IOType, 
+    paramName?: string, 
+    operationName?: string
+): FieldMetadata | null {
+    if (paramName && operationName) {
+        if (operationName === SPLIT && paramName === PARAMETER_1) {
+            return { type: "regex", optional: inputType.optional, nullable: false };
         }
+    }
 
-        const recordInstance = paths[0];
-        if (!inputs[recordInstance]) {
-            throw new Error("Record instance not found in inputs for SPLIT operation");
-        }
+    const kind = inputType.kind;
+    const typeName = inputType.typeName;
 
-        return {
-            operation: "SPLIT",
-            targetType: outputType.type,
-            parameters: [paramOne.input, paramTwo],
-        };
+    if (!kind || !typeName) {
+        throw new Error("Missing kind or typeName in SchemaType");
     }
 
-    return null;
+    const typeString = typeName;
+    const isOptional = inputType.optional;
+    let isNullable = false;
+
+    // Check if type is nullable (contains ? or ())
+    if (typeName.includes("?") || typeName.includes("()")) {
+        isNullable = true;
+    }
+
+    return { 
+        type: typeString, 
+        optional: isOptional, 
+        nullable: isNullable 
+    };
 }
 
-// =============================================================================
-// TYPE METADATA EXTRACTION ENGINE
-// =============================================================================
+/**
+ * Gets output field metadata from schema type
+ */
+function getOutputFieldMetadata(output: IOType, path: string[]): FieldMetadata | null {
+    let current = output;
+
+    for (const pathSegment of path) {
+        const found = findFieldInSchemaType(current, pathSegment);
+        if (!found) {
+            return null;
+        }
+        current = found;
+    }
+
+    return getFieldMetadataFromSchemaType(current);
+}
 
 /**
- * Extracts type information from schema metadata for validation purposes
+ * Finds a field within a schema type structure
  */
-function getTypeMetadataOfField(
-    input: MetadataType,
-    pathParameters: string[],
-    paramName?: string,
-    operationName?: string
-): FieldMetadata | null {
-    // STEP 1: Handle special parameter types (e.g., regex for SPLIT operation)
-    if (paramName && operationName) {
-        if (operationName === SPLIT && paramName === PARAMETER_2) {
-            return { type: "regex", optional: false, nullable: false };
+function findFieldInSchemaType(schemaType: IOType, fieldId: string): IOType | null {
+    const fields = schemaType.fields || schemaType.members;
+    if (fields && Array.isArray(fields)) {
+        for (const field of fields) {
+            if (field.id === fieldId || field.name === fieldId) {
+                return field;
+            }
+            
+            const found = findFieldInSchemaType(field, fieldId);
+            if (found) {
+                return found;
+            }
         }
     }
 
-    // STEP 2: Process nested field path navigation
-    if (pathParameters.length > 0) {
-        let modifiedInputs: { [key: string]: MetadataField } | undefined;
-
-        // Extract field map from different metadata types
-        if ("fields" in input && input.fields && typeof input.fields === "object" && !("typeName" in input.fields)) {
-            modifiedInputs = input.fields as { [key: string]: MetadataField };
-        } else if (
-            "members" in input &&
-            input.members &&
-            typeof input.members === "object" &&
-            !("typeName" in input.members)
-        ) {
-            modifiedInputs = input.members as { [key: string]: MetadataField };
-        } else if (typeof input === "object" && !("typeName" in input)) {
-            modifiedInputs = input as { [key: string]: MetadataField };
+    const member = schemaType.member;
+    if (member) {
+        if (member.id === fieldId || member.name === fieldId) {
+            return member;
         }
+        return findFieldInSchemaType(member, fieldId);
+    }
+
+    return null;
+}
 
-        if (!modifiedInputs) {
-            throw new Error("No fields found in MetadataField");
+/**
+ * Converts flat mapping structure to nested format
+ */
+function convertFlatToNestedMap(flatMap: { [key: string]: MappingJson }): { [key: string]: MappingJson } {
+    const nested: { [key: string]: MappingJson } = {};
+
+    for (const [flatKey, value] of Object.entries(flatMap)) {
+        const parts = flatKey.split('.');
+        let current = nested;
+
+        for (let i = 0; i < parts.length - 1; i++) {
+            const part = parts[i];
+            if (!(part in current)) {
+                current[part] = {};
+            } else if (typeof current[part] !== 'object' || current[part] === null) {
+                current[part] = {};
+            }
+            current = current[part] as { [key: string]: MappingJson };
         }
 
-        // STEP 3: Navigate to next level in field hierarchy
-        const index = pathParameters.pop()!;
-        const temporaryRecord = modifiedInputs[index];
-        if (temporaryRecord) {
-            return getTypeMetadataOfField(temporaryRecord, pathParameters, paramName, operationName);
-        } else {
-            return null;
+        const lastPart = parts[parts.length - 1];
+        current[lastPart] = value;
+    }
+    
+    return nested;
+}
+
+// =============================================================================
+// ENHANCED MAIN ORCHESTRATOR FUNCTION
+// =============================================================================
+
+/**
+ * Enhanced main function for AI-powered data mapping generation with schema support
+ */
+async function mapData(payload: DataMapperModelResponse): Promise<DatamapperResponse> {
+    const maxRetries = 3;
+    let retries = 0;
+    let lastError: Error;
+
+    while (retries < maxRetries) {
+        if (retries > 0) {
+            console.debug("Retrying to generate mappings for the payload.");
         }
-    } else {
-        // STEP 4: Extract final field type metadata
+
         try {
-            if ("typeName" in input && "optional" in input && "nullable" in input) {
-                const metadataField = input as MetadataField;
-                return {
-                    type: metadataField.typeName,
-                    optional: metadataField.optional,
-                    nullable: metadataField.nullable,
-                };
+            // Extract existing mapping field hints
+            const mappingFields: { [key: string]: MappingFields } = payload.mappingsModel.mapping_fields || {};
+
+            // STEP 1: Generate AI-powered mappings using Claude
+            const generatedMappings = await getMappings((payload.mappingsModel as ExpandedDMModel)?.inputs, (payload.mappingsModel as ExpandedDMModel)?.output, payload.mappingsModel.mappings, mappingFields);
+
+            if (Object.keys(generatedMappings).length === 0) {
+                const error = new Error("No valid fields were identified for mapping between the given input and output records.");
+                lastError = error;
+                retries += 1;
+                continue;
+            }
+
+            // STEP 2: Prepare inputs for validation
+            const inputs: DataMappingRequest = {
+                input: (payload.mappingsModel as ExpandedDMModel)?.inputs,
+                output: (payload.mappingsModel as ExpandedDMModel)?.output
+            };
+
+            // STEP 3: Validate and process AI-generated mappings with schema
+            const evaluateMappingsResult = await evaluateMappings([], generatedMappings, inputs);
+
+            if (evaluateMappingsResult) {
+                // STEP 4: Extract and structure the validated mappings
+                const mappings = extractMappings(evaluateMappingsResult);
+                return mappings;
             } else {
-                throw new Error("Invalid metadata structure");
+                throw new Error("Failed to generate mappings for the payload.");
             }
         } catch (error) {
-            throw new Error(`Error occurred while getting the type metadata of the field: ${error}`);
+            console.error(`Error occurred while generating mappings: ${error}`);
+            lastError = error as Error;
+            retries += 1;
+            continue;
+        }
+    }
+    throw lastError;
+}
+
+// Import all existing functions from the original implementation
+async function getMappings(
+    inputJsonRecord: IOType[],
+    outputJsonRecord: IOType,
+    userMappings: DataMappingResponse[],
+    mappingTips: { [key: string]: MappingFields }
+): Promise<AIDataMappings> {
+    const prompt = getDataMappingPrompt(
+        JSON.stringify(inputJsonRecord),
+        JSON.stringify(outputJsonRecord),
+        JSON.stringify(userMappings),
+        JSON.stringify(mappingTips)
+    );
+
+    const messages: CoreMessage[] = [
+        { role: "user", content: prompt }
+    ];
+
+    try {
+        const { object } = await generateObject({
+            model: await getAnthropicClient(ANTHROPIC_SONNET_4),
+            maxTokens: 4096,
+            temperature: 0,
+            messages: messages,
+            schema: MappingSchema,
+            abortSignal: AIPanelAbortController.getInstance().signal,
+        });
+
+        const generatedMappings = object.generatedMappings as AIDataMappings;
+        return generatedMappings;
+    } catch (error) {
+        console.error("Failed to parse response:", error);
+        throw new Error(`Failed to parse mapping response: ${error}`);
+    }
+}
+
+function extractMappings(evaluateMappingsResult: MappingJson): DatamapperResponse {
+    const mappings: { [key: string]: MappingJson } = {};
+
+    if (isMappingRecord(evaluateMappingsResult)) {
+        throw new Error("EvaluateMappingsResult is a MappingRecord, expected map structure.");
+    }
+
+    if (typeof evaluateMappingsResult === "object" && evaluateMappingsResult !== null) {
+        for (const [key, value] of Object.entries(evaluateMappingsResult)) {
+            if (isMappingRecord(value)) {
+                mappings[key] = value;
+            } else if (typeof value === "object" && value !== null) {
+                const nestedMappingsResult = extractMappings(value as MappingJson);
+                mappings[key] = nestedMappingsResult.mappings;
+            }
         }
     }
+
+    return { mappings };
 }
 
 // =============================================================================
@@ -601,11 +706,7 @@ function isMapping(value: any): value is { OPERATION: MappingOperation } {
 // MAIN EXPORT FUNCTION
 // =============================================================================
 
-/**
- * Main export function for generating auto mappings
- * This function matches the original signature and provides a simple interface
- */
-export async function generateAutoMappings(payload?: Payload): Promise<DatamapperResponse> {
+export async function generateAutoMappings(payload?: DataMapperModelResponse): Promise<DatamapperResponse> {
     if (!payload) {
         throw new Error("Payload is required for generating auto mappings");
     }
@@ -613,7 +714,7 @@ export async function generateAutoMappings(payload?: Payload): Promise<Datamappe
         return await mapData(payload);
     } catch (error) {
         console.error(`Error generating auto mappings: ${error}`);
-        throw new Error(`Failed to generate auto mappings: ${error}`);
+        throw error;
     }
 }
 
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/inline_datamapper.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/inline_datamapper.ts
deleted file mode 100644
index cd60958d769..00000000000
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/inline_datamapper.ts
+++ /dev/null
@@ -1,564 +0,0 @@
-// Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com/) All Rights Reserved.
-
-// WSO2 LLC. licenses this file to you under the Apache License,
-// Version 2.0 (the "License"); you may not use this file except
-// in compliance with the License.
-// You may obtain a copy of the License at
-
-// http://www.apache.org/licenses/LICENSE-2.0
-
-// Unless required by applicable law or agreed to in writing,
-// software distributed under the License is distributed on an
-// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-// KIND, either express or implied. See the License for the
-// specific language governing permissions and limitations
-// under the License.
-
-import { CoreMessage, generateObject } from "ai";
-import { getAnthropicClient, ANTHROPIC_SONNET_4 } from "../connection";
-import {
-    DatamapperResponse,
-    AIDataMappings,
-    MappingJson,
-    MappingRecord,
-    MappingOperation,
-    FieldMetadata,
-    ParameterMetadata,
-    MappingFields,
-    Mapping,
-    InlineInputs,
-    InlineDataMapping
-} from "./types";
-import { MappingSchema } from "./schema";
-import { AIPanelAbortController } from "../../../../../src/rpc-managers/ai-panel/utils";
-import { ADDITION, DIRECT, DIVISION, LENGTH, MODULAR, MULTIPLICATION, NAME, PARAMETER_1, PARAMETER_2, SPLIT, SUBTRACTION } from "./constant";
-import { operationsTable } from "./datamapper";
-import { getInlineDataMappingPrompt } from "./inline_prompt";
-import { ExpandedDMModel, InlineDataMapperModelResponse, IOType } from "@wso2/ballerina-core";
-
-// =============================================================================
-// UTILITY FUNCTIONS FOR SCHEMA PROCESSING
-// =============================================================================
-
-/**
- * Finds a schema type by path in the input schemas array
- */
-function findSchemaTypeByPath(inputs: IOType[], path: string): IOType | null {
-    for (const inputSchema of inputs) {
-        if (inputSchema.id === path) {
-            return inputSchema;
-        }
-        
-        // Recursively search in fields
-        const fields = inputSchema.fields;
-        if (fields && Array.isArray(fields)) {
-            const found = findSchemaTypeByPath(fields, path);
-            if (found) {
-                return found;
-            }
-        }
-        
-        // Recursively search in member
-        const member = inputSchema.member;
-        if (member) {
-            const found = findSchemaTypeByPath([member], path);
-            if (found) {
-                return found;
-            }
-        }
-    }
-    return null;
-}
-
-/**
- * Removes array indices from path to normalize field paths
- */
-function removeArrayIndicesFromPath(path: string): string {
-    const pathParts = path.split('.');
-    const cleanParts: string[] = [];
-
-    for (const part of pathParts) {
-        // Skip numeric indices
-        if (!isNaN(parseInt(part))) {
-            continue;
-        }
-        cleanParts.push(part);
-    }
-    
-    return cleanParts.join('.');
-}
-
-/**
- * Removes output record prefix from field name
- */
-function removeOutputRecordPrefix(fieldName: string, output: IOType): string {
-    const outputRecordName = output.variableName;
-    if (outputRecordName) {
-        const prefix = outputRecordName + ".";
-        if (fieldName.startsWith(prefix)) {
-            return fieldName.substring(prefix.length);
-        }
-    }
-    return fieldName;
-}
-
-// =============================================================================
-// INLINE MAPPING EVALUATION FUNCTIONS
-// =============================================================================
-
-/**
- * Main function to evaluate inline mappings with enhanced schema support
- */
-async function evaluateInlineMappings(
-    path: string[], 
-    llmGeneratedMappings: AIDataMappings, 
-    initialRecords: InlineInputs
-): Promise<MappingJson | null> {
-    if (isMapping(llmGeneratedMappings)) {
-        return await processMappingOperation(path, llmGeneratedMappings, initialRecords);
-    } else {
-        return await processNestedMappings(path, llmGeneratedMappings as { [key: string]: AIDataMappings }, initialRecords);
-    }
-}
-
-/**
- * Processes individual mapping operations with inline schema validation
- */
-async function processMappingOperation(
-    path: string[], 
-    llmGeneratedMappings: Mapping, 
-    initialRecords: InlineInputs
-): Promise<MappingJson | null> {
-    try {
-        const operationRecord = llmGeneratedMappings.OPERATION;
-        const parametersTypes: { [key: string]: ParameterMetadata } = {};
-        let validParameters = false;
-
-        for (const subKey of Object.keys(operationRecord)) {
-            if (subKey === NAME) {
-                continue;
-            }
-            
-            const subPathString = operationRecord[subKey as keyof MappingOperation] as string;
-            if (!subPathString) {
-                continue;
-            }
-            
-            const operationName = operationRecord.NAME;
-            const inputType = findSchemaTypeByPath(initialRecords.input, subPathString);
-            if (!inputType) {
-                continue;
-            }
-
-            const fieldMetadata = getFieldMetadataFromSchemaType(inputType, subKey, operationName);
-            if (!fieldMetadata) {
-                continue;
-            }
-
-            parametersTypes[subKey] = {
-                type: fieldMetadata.type,
-                input: subPathString,
-                optional: fieldMetadata.optional,
-                nullable: fieldMetadata.nullable
-            };
-            validParameters = true;
-        }
-
-        if (validParameters) {
-            const outputType = getOutputFieldMetadata(initialRecords.output, path);
-            if (!outputType) {
-                return null;
-            }
-            
-            const mapping = validateInlineMappingOperation(
-                operationRecord, 
-                parametersTypes, 
-                outputType, 
-                path[path.length - 1], 
-                initialRecords.input
-            );
-            return mapping;
-        }
-        return null;
-    } catch (error) {
-        console.error('Error processing mapping operation:', error);
-        return null;
-    }
-}
-
-/**
- * Processes nested mapping structures
- */
-async function processNestedMappings(
-    path: string[], 
-    llmGeneratedMappings: { [key: string]: AIDataMappings }, 
-    initialRecords: InlineInputs
-): Promise<MappingJson | null> {
-    const returnRec: { [key: string]: MappingJson } = {};
-
-    for (const [key, value] of Object.entries(llmGeneratedMappings)) {
-        if (value === null || value === undefined) {
-            continue;
-        }
-        
-        const newPath = [...path];
-        const cleanKey = removeOutputRecordPrefix(key, initialRecords.output);
-        newPath.push(key);
-
-        const temporaryRecord = await evaluateInlineMappings(newPath, value, initialRecords);
-        if (temporaryRecord) {
-            if (isMappingRecord(temporaryRecord) || 
-                (typeof temporaryRecord === 'object' && Object.keys(temporaryRecord).length > 0)) {
-                returnRec[cleanKey] = temporaryRecord;
-            }
-        }
-    }
-
-    return convertFlatToNestedMap(returnRec);
-}
-
-// =============================================================================
-// INLINE MAPPING OPERATION VALIDATION
-// =============================================================================
-
-/**
- * Validates inline mapping operations with enhanced error handling
- */
-function validateInlineMappingOperation(
-    mapping: MappingOperation,
-    inputType: { [key: string]: ParameterMetadata },
-    outputType: FieldMetadata,
-    name: string,
-    inputs: IOType[]
-): MappingJson | null {
-    const operation = mapping.NAME;
-    const op = operationsTable.get(operation);
-    
-    if (!op) {
-        return null;
-    }
-
-    switch (op.name) {
-        case DIRECT: {
-            const param = inputType[PARAMETER_1];
-            if (!param) {
-                return null;
-            }
-            
-            if (!findSchemaTypeByPath(inputs, param.input)) {
-                throw new Error(`Input path not found for DIRECT operation: ${param.input}`);
-            }
-            
-            return {
-                operation: DIRECT,
-                targetType: outputType.type,
-                parameters: [removeArrayIndicesFromPath(param.input)]
-            };
-        }
-        
-        case LENGTH: {
-            const param = inputType[PARAMETER_1];
-            if (!param) {
-                throw new Error("Parameter 1 not found in input type for LENGTH operation");
-            }
-            
-            if (!(outputType.type === "int" || outputType.type === "int|()")) {
-                throw new Error("Invalid output type for LENGTH operation");
-            }
-            
-            if (!findSchemaTypeByPath(inputs, param.input)) {
-                throw new Error(`Input path not found for LENGTH operation: ${param.input}`);
-            }
-            
-            return {
-                operation: LENGTH,
-                targetType: outputType.type,
-                parameters: [removeArrayIndicesFromPath(param.input)]
-            };
-        }
-        
-        case SPLIT: {
-            const paramOne = inputType[PARAMETER_1];
-            const paramTwo = mapping.PARAMETER_2;
-            
-            if (!paramOne || !paramTwo) {
-                throw new Error("Required parameters not found in input type for SPLIT operation");
-            }
-            
-            if (paramOne.type !== "regex" || 
-                !(outputType.type === "string[]" || outputType.type === "string[]|()" ||
-                  outputType.type === "(string|())[]" || outputType.type === "(string|())[]|()")) {
-                throw new Error("Invalid input or output type for SPLIT operation");
-            }
-            
-            if (!findSchemaTypeByPath(inputs, paramOne.input)) {
-                throw new Error(`Input path not found for SPLIT operation: ${paramOne.input}`);
-            }
-            
-            return {
-                operation: SPLIT,
-                targetType: outputType.type,
-                parameters: [removeArrayIndicesFromPath(paramOne.input), paramTwo]
-            };
-        }
-        
-        default:
-            return null;
-    }
-}
-
-// =============================================================================
-// FIELD METADATA EXTRACTION FUNCTIONS
-// =============================================================================
-
-/**
- * Extracts field metadata from schema type with enhanced type checking
- */
-function getFieldMetadataFromSchemaType(
-    inputType: IOType, 
-    paramName?: string, 
-    operationName?: string
-): FieldMetadata | null {
-    if (paramName && operationName) {
-        if (operationName === SPLIT && paramName === PARAMETER_2) {
-            return { type: "regex", optional: false, nullable: false };
-        }
-    }
-
-    const kind = inputType.kind;
-    const typeName = inputType.typeName;
-
-    if (!kind || !typeName) {
-        throw new Error("Missing kind or typeName in SchemaType");
-    }
-
-    const typeString = typeName;
-    const isOptional = false; // TODO: Handle optional types
-    let isNullable = false; // TODO: Handle nullable types
-
-    // Check if type is nullable (contains ? or ())
-    if (typeName.includes("?") || typeName.includes("()")) {
-        isNullable = true;
-    }
-
-    return { 
-        type: typeString, 
-        optional: isOptional, 
-        nullable: isNullable 
-    };
-}
-
-/**
- * Gets output field metadata from schema type
- */
-function getOutputFieldMetadata(output: IOType, path: string[]): FieldMetadata | null {
-    let current = output;
-
-    for (const pathSegment of path) {
-        const found = findFieldInSchemaType(current, pathSegment);
-        if (!found) {
-            return null;
-        }
-        current = found;
-    }
-
-    return getFieldMetadataFromSchemaType(current);
-}
-
-/**
- * Finds a field within a schema type structure
- */
-function findFieldInSchemaType(schemaType: IOType, fieldId: string): IOType | null {
-    const fields = schemaType.fields;
-    if (fields && Array.isArray(fields)) {
-        for (const field of fields) {
-            if (field.id === fieldId || field.variableName === fieldId) {
-                return field;
-            }
-            
-            const found = findFieldInSchemaType(field, fieldId);
-            if (found) {
-                return found;
-            }
-        }
-    }
-
-    const member = schemaType.member;
-    if (member) {
-        if (member.id === fieldId || member.variableName === fieldId) {
-            return member;
-        }
-        return findFieldInSchemaType(member, fieldId);
-    }
-
-    return null;
-}
-
-/**
- * Converts flat mapping structure to nested format
- */
-function convertFlatToNestedMap(flatMap: { [key: string]: MappingJson }): { [key: string]: MappingJson } {
-    const nested: { [key: string]: MappingJson } = {};
-
-    for (const [flatKey, value] of Object.entries(flatMap)) {
-        const parts = flatKey.split('.');
-        let current = nested;
-
-        for (let i = 0; i < parts.length - 1; i++) {
-            const part = parts[i];
-            if (!(part in current)) {
-                current[part] = {};
-            } else if (typeof current[part] !== 'object' || current[part] === null) {
-                current[part] = {};
-            }
-            current = current[part] as { [key: string]: MappingJson };
-        }
-
-        const lastPart = parts[parts.length - 1];
-        current[lastPart] = value;
-    }
-    
-    return nested;
-}
-
-// =============================================================================
-// ENHANCED MAIN ORCHESTRATOR FUNCTION
-// =============================================================================
-
-/**
- * Enhanced main function for AI-powered data mapping generation with inline schema support
- */
-async function mapInlineData(payload: InlineDataMapperModelResponse): Promise<DatamapperResponse> {
-    const maxRetries = 3;
-    let retries = 0;
-    let lastError: Error;
-
-    while (retries < maxRetries) {
-        if (retries > 0) {
-            console.debug("Retrying to generate mappings for the payload.");
-        }
-
-        try {
-            // Extract existing mapping field hints
-            const mappingFields: { [key: string]: MappingFields } = payload.mappingsModel.mapping_fields || {};
-
-            // STEP 1: Generate AI-powered mappings using Claude
-            const generatedMappings = await getInlineMappings((payload.mappingsModel as ExpandedDMModel)?.inputs, (payload.mappingsModel as ExpandedDMModel)?.output, payload.mappingsModel.mappings, mappingFields);
-
-            if (Object.keys(generatedMappings).length === 0) {
-                const error = new Error("No valid fields were identified for mapping between the given input and output records.");
-                lastError = error;
-                retries += 1;
-                continue;
-            }
-
-            // STEP 2: Prepare inline inputs for validation
-            const inlineInputs: InlineInputs = {
-                input: (payload.mappingsModel as ExpandedDMModel)?.inputs,
-                output: (payload.mappingsModel as ExpandedDMModel)?.output
-            };
-
-            // STEP 3: Validate and process AI-generated mappings with inline schema
-            const evaluateMappingsResult = await evaluateInlineMappings([], generatedMappings, inlineInputs);
-
-            if (evaluateMappingsResult) {
-                // STEP 4: Extract and structure the validated mappings
-                const mappings = extractMappings(evaluateMappingsResult);
-                return mappings;
-            } else {
-                throw new Error("Failed to generate mappings for the payload.");
-            }
-        } catch (error) {
-            console.error(`Error occurred while generating mappings: ${error}`);
-            lastError = error as Error;
-            retries += 1;
-            continue;
-        }
-    }
-    throw lastError;
-}
-
-// Import all existing functions from the original implementation
-async function getInlineMappings(
-    inputJsonRecord: IOType[],
-    outputJsonRecord: IOType,
-    userMappings: InlineDataMapping[],
-    mappingTips: { [key: string]: MappingFields }
-): Promise<AIDataMappings> {
-    const prompt = getInlineDataMappingPrompt(
-        JSON.stringify(inputJsonRecord),
-        JSON.stringify(outputJsonRecord),
-        JSON.stringify(userMappings),
-        JSON.stringify(mappingTips)
-    );
-
-    const messages: CoreMessage[] = [
-        { role: "user", content: prompt }
-    ];
-
-    try {
-        const { object } = await generateObject({
-            model: await getAnthropicClient(ANTHROPIC_SONNET_4),
-            maxTokens: 4096,
-            temperature: 0,
-            messages: messages,
-            schema: MappingSchema,
-            abortSignal: AIPanelAbortController.getInstance().signal,
-        });
-
-        const generatedMappings = object.generatedMappings as AIDataMappings;
-        return generatedMappings;
-    } catch (error) {
-        console.error("Failed to parse response:", error);
-        throw new Error(`Failed to parse mapping response: ${error}`);
-    }
-}
-
-function extractMappings(evaluateMappingsResult: MappingJson): DatamapperResponse {
-    const mappings: { [key: string]: MappingJson } = {};
-
-    if (isMappingRecord(evaluateMappingsResult)) {
-        throw new Error("EvaluateMappingsResult is a MappingRecord, expected map structure.");
-    }
-
-    if (typeof evaluateMappingsResult === "object" && evaluateMappingsResult !== null) {
-        for (const [key, value] of Object.entries(evaluateMappingsResult)) {
-            if (isMappingRecord(value)) {
-                mappings[key] = value;
-            } else if (typeof value === "object" && value !== null) {
-                const nestedMappingsResult = extractMappings(value as MappingJson);
-                mappings[key] = nestedMappingsResult.mappings;
-            }
-        }
-    }
-
-    return { mappings };
-}
-
-// =============================================================================
-// UTILITY FUNCTIONS
-// =============================================================================
-
-function isMappingRecord(value: any): value is MappingRecord {
-    return value && typeof value === "object" && "operation" in value && "targetType" in value && "parameters" in value;
-}
-
-function isMapping(value: any): value is { OPERATION: MappingOperation } {
-    return value && typeof value === "object" && "OPERATION" in value;
-}
-
-// =============================================================================
-// MAIN EXPORT FUNCTION
-// =============================================================================
-
-export async function generateInlineAutoMappings(payload?: InlineDataMapperModelResponse): Promise<DatamapperResponse> {
-    if (!payload) {
-        throw new Error("Payload is required for generating auto mappings");
-    }
-    try {
-        return await mapInlineData(payload);
-    } catch (error) {
-        console.error(`Error generating auto mappings: ${error}`);
-        throw error;
-    }
-}
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/inline_prompt.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/inline_prompt.ts
deleted file mode 100644
index 0918903a181..00000000000
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/inline_prompt.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-// Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com/) All Rights Reserved.
-
-// WSO2 LLC. licenses this file to you under the Apache License,
-// Version 2.0 (the "License"); you may not use this file except
-// in compliance with the License.
-// You may obtain a copy of the License at
-
-// http://www.apache.org/licenses/LICENSE-2.0
-
-// Unless required by applicable law or agreed to in writing,
-// software distributed under the License is distributed on an
-// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-// KIND, either express or implied. See the License for the
-// specific language governing permissions and limitations
-// under the License.
-
-/**
- * Generates the inline data mapping prompt for AI
- */
-export function getInlineDataMappingPrompt(inputJson: string, outputJson: string, userMappings: string, mappingTips: string): string {
-    return `You are an assistant that can help to map attributes between multiple JSON objects (data-mapping).
-
-## Instructions
-
-Before starting the mapping process, consider the mappings provided by the user mappings and mapping tips below. Use the user's and mapping tips as a guide/tip to do the mapping process, ensuring that they are relevant to input and output JSON. Only use the tips in user's mappings and mapping tips that have input and output records and their fields and subfields are in input and output JSON. Otherwise omit the irrelevant mapping guides.
-
-## Input JSON
-
-${inputJson}
-
-## Output JSON
-
-${outputJson}
-
-## User's Mappings
-
-${userMappings}
-
-## Mapping Tips
-
-${mappingTips}
-
-## Mapping Rules
-
-Follow these rules during data mapping:
-
-1. One or more input JSON can be given
-2. Only a single output JSON can be given
-3. Mapping the fields requires performing operations on the data. Most common operation is to do a one-to-one mapping with no transformations
-4. One or more fields in the input JSON may be required to construct the output field value in-case we have complex operations that require multiple input fields
-5. Some input fields may not participate in any mappings if they are irrelevant to the output field
-6. Some output fields may not participate in any mappings if they are irrelevant to the input field
-7. Field access uses dot notation for JSON format. To access subfield "abc" from object "xyz", use "xyz.abc". For accessing fields with IDs like "input.contactInfo.email", use the exact ID path as provided in the schema.
-8. Strictly follow data types accepted and returned by the operations when mapping input fields
-9. When mapping, you must use operators which return the expected data type
-10. When Mapping, consider the information mentioned in the comments
-11. DO NOT use the value in the field "optional" when mapping the fields
-12. DO NOT map anything if you aren't sure
-13. If both input and output are records type, DO mapping for all its fields and subfields but DO NOT map in the root level
-14. Consider constants, configurables, variables, enum values, and module variables when mapping fields
-15. Constants, variables, module variables and configurables can be mapped directly using their defined values
-16. Enum values should be mapped using their exact enum identifiers
-17. Consider both user's mappings and mapping tips when determining field relationships and transformations
-18. Mapping tips provide additional mapping context from previous operations or related mappings that can be used as reference
-
-## Available Operations
-
-### 0) Direct Mapping
-- ${"DIRECT(x)"} - used to substitute with x without any transformations
-- **For input fields, variables, and module variables: use field path (e.g., "input.fieldName")**
-- **For constants and configurables: use their defined values**
-- **For enums: use their exact enum identifiers**
-
-### 1) Arithmetic Expressions
-- ${"ADDITION(x, y, z, ...)"} - add variables x, y and z and so on
-- ${"SUBTRACTION(x, y)"} - subtract y from x
-- ${"MULTIPLICATION(x, y, z, ...)"} - multiply x, y and z and so on
-- ${"DIVISION(x, y)"} - divide x by y
-- ${"MODULAR(x, y)"} - get the modular division between x and y i.e. x%y
-
-### 2) Equality Expressions
-- ${"EQUAL(x, y)"} - return true if x and y are equal
-- ${"NOTEQUAL(x, y)"} - return true if x and y are not equal
-
-### 3) Relational Expressions
-- ${"LESS_THAN(x, y)"} - return true if x is less than y
-- ${"LESS_THAN_OR_EQUAL(x, y)"} - return true if x is less than or equals to y
-
-### 4) Logical Expressions
-- ${"AND(x, y)"} - return x AND y value
-- ${"OR(x, y)"} - return x OR y value
-
-### 5) Member Access Expressions
-- ${"x[y]"} - access y th element of x array object in the json
-
-### 6) Regex Operations
-- ${"SPLIT(regex, text)"} - Split the string text based on the regex and returns an array of strings (string[])
-  - Example: ${"SPLIT(\",\", \"word1, word2, word3\")"} will return a string array ["word1", "word2", "word3"]
-  - Example: ${"SPLIT(\" \", \"word1 word2 word3\")"} will return a string array ["word1", "word2", "word3"]
-- ${"REPLACE_ALL(regex, text, replacement)"} - Replace all the instances of regex in the text using string replacement
-  - Example: ${"REPLACE_ALL(\" \", \"word1 word2 word3\", \"\")"} will return a string "word1word2word3"
-
-For above two operations, regex value must be one or combination of the following: [" ", "_", "-", "\\n", ",", "\\."], here "\\" is used to escape special characters.
-
-### 7) Numerical Operations
-- ${"AVERAGE(x, TYPE)"} - get the average over x. x is a single array of variables of TYPE (ex - [12, 13, 14]) when TYPE is INTEGER. TYPE can be either INT, DECIMAL, or FLOAT
-- ${"MAXIMUM(x, TYPE)"} - get the maximum over x. x is an array of variables of TYPE(ex - [12, 13, 14]) when TYPE is INTEGER. TYPE can be either INT, DECIMAL, or FLOAT
-- ${"MINIMUM(x, TYPE)"} - get the minimum over x. x is a single array of variables of TYPE (ex - [12, 13, 14]) when TYPE is INTEGER. TYPE can be either INT, DECIMAL, or FLOAT
-- ${"SUMMATION(x, TYPE)"} - get the summation over x. x is a single array of variables of TYPE(ex - [12, 13, 14]) when TYPE is INTEGER. TYPE can be either INT, DECIMAL, or FLOAT
-- ${"ABSOLUTE(x, TYPE)"} - get the absolute value of the given variable of TYPE, x. TYPE can be either INT, DECIMAL, or FLOAT
-
-### 8) Array Operations
-- ${"LENGTH(x)"} - Get the length of an array named x
-
-## Response Format
-
-Always use the following json format to respond without any markdown formatting:
-
-{
-  "<VARIABLE_NAME>": {
-    "OPERATION": {
-      "NAME": "<OPERATION_NAME>",
-      "PARAMETER_1": "<PARAMETER_1>",
-      "PARAMETER_2": "<PARAMETER_2>"
-      // ...additional parameters as needed
-    }
-  }
-  // ...additional fields as needed
-}
-
-## IMPORTANT NOTES:
-
-- **DO NOT RETURN ANYTHING OTHER THAN THE MAPPING JSON!**
-- **DO NOT ENCLOSE THE RESULT JSON WITH ANYTHING.**
-- **DO NOT USE MARKDOWN CODE BLOCKS OR BACKTICKS.**
-- **RETURN ONLY RAW JSON WITHOUT ANY FORMATTING OR WRAPPER.**
-- **FOR DIRECT MAPPINGS:**
-  - **Input fields, variables, constants, configurables and module variables: use field ID/path from the input schema**
-  - **Enum values: use their exact enum identifiers**
-  - **DEFAULT VALUES AND NULL LIKE VALUES MUST NOT BE MAPPED DIRECT.**
-- **Use the exact field IDs as provided in the input/output schema (e.g., "input.contactInfo.email", "output.salaryInfo.baseSalary")**
-- **Consider mapping tips as additional reference for understanding field relationships and mapping patterns**
-`;
-}
-
-
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/prompt.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/prompt.ts
index 2a123808886..1b9b2cb8a0e 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/prompt.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/prompt.ts
@@ -17,332 +17,438 @@
 /**
  * Generates the main data mapping prompt for AI
  */
-export function getDataMappingPrompt(inputJson: string, outputJson: string, mappingFields: string): string {
-    return `You are an assistant that can help to map attributes between multiple json (a.k.a data-mapping).
-Before starting the mapping process, consider the mappings provided by the user below. 
-Use the user's mappings as a guide/tip to do the mapping process, ensuring that they are relevant to input and output json. 
-Only use the tips in user's mappings that is input and output records and their fields and subfields are in input and output json. Otherwise omit the irrelevant user's mapping guides.
-Also, use the below rules to do the data mapping.
-
-Following rules should be followed during data mapping.   
-1) One or more input json can be given 
-2) Only a single output json can be given  
-3) Mapping the fields requires performing operations on the data. Most common operation is to do a one-to-one mapping with no transformations.   
-4) One or more fields in the input json may be required to construct the output field value in-case we have complex operations that require multiple input fields.   
-5) Some input fields may not participate in any mappings if they are irrelevant to the output field.   
-6) Some output fields may not participate in any mappings if they are irrelevant to the input field.   
-7) Accessing the subfield "abc" from object "xyz" can be denoted as "xyz.abc". If the field contains a single quote at the beginning of the field name, include that field with the single quote in front of it in the path.  
-8) Strictly follow data types accepted and returned by the operations when mapping input fields.   
-9) When mapping, you must use operators which return the expected data type.
-10) When Mapping, consider the information mentioned in the comments.
-11) DO NOT use the value in the field "optional" when mapping the fields.
-12) DO NOT map anything if you aren't sure.     
-13) If both input and output are records type, DO mapping for all its fields and subfields but DO NOT map in the root level.
-
-Following operations/transformations can be used during a mapping between input and output fields. Use ONLY the operations listed below.   
-0) Direct Mapping 
-   DIRECT(x) used to substitute with x without any transformations
-1) Arithmetic Expressions  
-    1.1) ADDITION(x, y, z, ...) : add variables x, y and z and so on 
-    1.2) SUBTRACTION(x, y) : subtract y from x   
-    1.3) MULTIPLICATION(x, y, z, ...) : multiply x, y and z and so on  
-    1.4) DIVISION(x, y) : divide x by y   
-    1.5) MODULAR(x,  y) : get the modular division between x and y i.e. x%y  
-2) Equality Expressions  
-    2.1) EQUAL(x, y) : return true if x and y are equal   
-    2.2) NOTEQUAL(x, y) : return true if x and y are not equal  
-3) Relational Expressions  
-    3.1) LESS_THAN(x, y) : return true if x is less than y     
-    3.2) LESS_THAN_OR_EQUAL(x, y) : return true if x is less than or equals to y      
-4) Logical Expressions  
-    4.1) AND(x, y) : return x AND y value  
-    4.2) OR(x, y) : return x OR y value  
-5) Member Access Expressions  
-    5.1) x[y] : access y th element of x array object in the json
-6) Regex Operations
-    6.1) SPLIT(text, regex) : Split the string text based on the regex and returns an array of strings (string[]).
-            Example: 
-          SPLIT("word1, word2, word3", ",") will return a string array ["word1", "word2", "word3"].
-          SPLIT("word1 word2 word3", " ") will return a string array ["word1", "word2", "word3"].
-    6.2) REPLACE_ALL(text, regex, replacement) : Replace all the instances of regex in the text using string replacement. 
-            Example -  REPLACE_ALL("word1 word2 word3", " ", "") will return a string "word1word2word3"
-    For above two operations, regex value must be one or combination of the following : [" ", "_", "-", "\n", ",", "\." ], here "\" is used to escape special characters.
-
-7) Numerical Operations  
-    7.1) AVERAGE(x, TYPE) : get the average over x. x is a single array of variables of TYPE (ex - [12, 13, 14]) when TYPE is INTEGER .TYPE can be either INT, DECIMAL, or FLOAT.
-    7.2) MAXIMUM(x, TYPE) : get the maximum over x. x is an array of variables of TYPE(ex - [12, 13, 14]) when TYPE is INTEGER .TYPE can be either INT, DECIMAL, or FLOAT.
-    7.3) MINIMUM(x, TYPE) : get the minimum over x. x is a single array of variables of TYPE (ex - [12, 13, 14]) when TYPE is INTEGER .TYPE can be either INT, DECIMAL, or FLOAT.
-    7.4) SUMMATION(x, TYPE) : get the summation over x. x is a single array of variables of TYPE(ex - [12, 13, 14]) when TYPE is INTEGER .TYPE can be either INT, DECIMAL, or FLOAT.
-    7.5) ABSOLUTE(x, TYPE) : get the absolute value of the given variable of TYPE, x .TYPE can be either INT, DECIMAL, or FLOAT.
-
-8) Array Operations
-    8.1) LENGTH(x) : Get the length of an array named x
-
-Always use the following json format to respond.  
-\`\`\`
+export function getDataMappingPrompt(inputJson: string, outputJson: string, userMappings: string, mappingTips: string): string {
+  return `You are an assistant that can help to map attributes between multiple JSON objects (data-mapping).
+
+## Instructions
+
+Before starting the mapping process, consider the mappings provided by the user mappings and mapping tips below. Use the user's and mapping tips as a guide/tip to do the mapping process, ensuring that they are relevant to input and output JSON. Only use the tips in user's mappings and mapping tips that have input and output records and their fields and subfields are in input and output JSON. Otherwise omit the irrelevant mapping guides.
+
+## Input JSON
+
+${inputJson}
+
+## Output JSON
+
+${outputJson}
+
+## User's Mappings
+
+${userMappings}
+
+## Mapping Tips
+
+${mappingTips}
+
+## Mapping Rules
+
+Follow these rules during data mapping:
+
+1. One or more input JSON can be given
+2. Only a single output JSON can be given
+3. Mapping the fields requires performing operations on the data. Most common operation is to do a one-to-one mapping with no transformations
+4. One or more fields in the input JSON may be required to construct the output field value in-case we have complex operations that require multiple input fields
+5. Some input fields may not participate in any mappings if they are irrelevant to the output field
+6. Some output fields may not participate in any mappings if they are irrelevant to the input field
+7. Field access uses dot notation for JSON format. To access subfield "abc" from object "xyz", use "xyz.abc". For accessing fields with IDs like "input.contactInfo.email", use the exact ID path as provided in the schema.
+8. Strictly follow data types accepted and returned by the operations when mapping input fields
+9. When mapping, you must use operators which return the expected data type
+10. When Mapping, consider the information mentioned in the comments
+11. DO NOT use the value in the field "optional" when mapping the fields
+12. DO NOT map anything if you aren't sure
+13. When both input and output are records, recursively traverse ALL nested fields until you reach primitive types (int, string, boolean, float, decimal, etc.) and map ONLY those primitive fields. NEVER map at the record level.
+14. Consider constants, configurables, variables, enum values, and module variables when mapping fields
+15. Constants, variables, module variables and configurables can be mapped directly using their defined values
+16. Enum values should be mapped using their exact enum identifiers
+17. Consider both user's mappings and mapping tips when determining field relationships and transformations
+18. Mapping tips provide additional mapping context from previous operations or related mappings that can be used as reference
+
+## Available Operations
+
+### 0) Direct Mapping
+- ${"DIRECT(x)"} - used to substitute with x without any transformations
+- **For input fields, variables, and module variables: use field path (e.g., "input.fieldName")**
+- **For constants and configurables: use their defined values**
+- **For enums: use their exact enum identifiers**
+
+### 1) Arithmetic Expressions
+- ${"ADDITION(x, y, z, ...)"} - add variables x, y and z and so on
+- ${"SUBTRACTION(x, y)"} - subtract y from x
+- ${"MULTIPLICATION(x, y, z, ...)"} - multiply x, y and z and so on
+- ${"DIVISION(x, y)"} - divide x by y
+- ${"MODULAR(x, y)"} - get the modular division between x and y i.e. x%y
+
+### 2) Equality Expressions
+- ${"EQUAL(x, y)"} - return true if x and y are equal
+- ${"NOTEQUAL(x, y)"} - return true if x and y are not equal
+
+### 3) Relational Expressions
+- ${"LESS_THAN(x, y)"} - return true if x is less than y
+- ${"LESS_THAN_OR_EQUAL(x, y)"} - return true if x is less than or equals to y
+
+### 4) Logical Expressions
+- ${"AND(x, y)"} - return x AND y value
+- ${"OR(x, y)"} - return x OR y value
+
+### 5) Member Access Expressions
+- ${"x[y]"} - access y th element of x array object in the json
+
+### 6) Regex Operations
+- ${"SPLIT(text, regex)"} - Split the string text based on the regex and returns an array of strings (string[])
+  - Example: ${"SPLIT(\"word1, word2, word3\", \",\")"} will return a string array ["word1", "word2", "word3"]
+  - Example: ${"SPLIT(\"word1, word2, word3\", \" \")"} will return a string array ["word1", "word2", "word3"]
+- ${"REPLACE_ALL(text, regex, replacement)"} - Replace all the instances of regex in the text using string replacement
+  - Example: ${"REPLACE_ALL(\"word1 word2 word3\", \" \", \"\")"} will return a string "word1word2word3"
+
+### 7) Numerical Operations
+- ${"AVERAGE(x, TYPE)"} - get the average over x. x is a single array of variables of TYPE (ex - [12, 13, 14]) when TYPE is INTEGER. TYPE can be either INT, DECIMAL, or FLOAT
+- ${"MAXIMUM(x, TYPE)"} - get the maximum over x. x is an array of variables of TYPE(ex - [12, 13, 14]) when TYPE is INTEGER. TYPE can be either INT, DECIMAL, or FLOAT
+- ${"MINIMUM(x, TYPE)"} - get the minimum over x. x is a single array of variables of TYPE (ex - [12, 13, 14]) when TYPE is INTEGER. TYPE can be either INT, DECIMAL, or FLOAT
+- ${"SUMMATION(x, TYPE)"} - get the summation over x. x is a single array of variables of TYPE(ex - [12, 13, 14]) when TYPE is INTEGER. TYPE can be either INT, DECIMAL, or FLOAT
+- ${"ABSOLUTE(x, TYPE)"} - get the absolute value of the given variable of TYPE, x. TYPE can be either INT, DECIMAL, or FLOAT
+
+### 8) Array Operations
+- ${"LENGTH(x)"} - Get the length of an array named x
+
+## Response Format
+
+Always use the following json format to respond without any markdown formatting:
+
 {
-    "<FIELD_NAME>": {
-      "OPERATION": {
-        "NAME": "<OPERATION_NAME>",
-        "PARAMETER_1" : <PARAMETER_1>,
-        "PARAMETER_2" : <PARAMETER_2>,
-        ...
-        ...
-        ...
-      }
-    },
-    ...
+  "<VARIABLE_NAME>": {
+    "OPERATION": {
+      "NAME": "<OPERATION_NAME>",
+      "PARAMETER_1": "<PARAMETER_1>",
+      "PARAMETER_2": "<PARAMETER_2>"
+      // ...additional parameters as needed
+    }
+  }
+  // ...additional fields as needed
 }
-\`\`\`
+
 Following is an example of the input, output and the mapping:
 
 Example Input json : 
 
-\`\`\`
-{
-    "studentDetails": {
-      "id":{
-        "type":"string",
-        "optional" : false, 
-        "nullable" : false,
-        "comment":"student id"
+[
+  {
+    "fields":[
+      {
+        "id":"studentDetails.id",
+        "name":"id",
+        "typeName":"string",
+        "kind":"string",
+        "optional":false
       },
-      "tags":{
-        "type":"string",
-        "optional" : false, 
-        "nullable" : false,
-        "comment":"student tags"
+      {
+        "id":"studentDetails.tags",
+        "name":"tags",
+        "typeName":"string",
+        "kind":"string",
+        "optional":false
       },
-      "bio":{
-        "firstName": {
-          "type":"string",
-          "optional" : false, 
-          "nullable" : false, 
-          "comment":"first name of the student"
-        },
-        "lastName":{
-          "type":"string",
-          "optional" : false, 
-          "nullable" : false, 
-          "comment":"Last name of the student"
-        },
-        "age":{
-          "type":"int",
-          "optional" : false, 
-          "nullable" : false, 
-          "comment":"age in years"
-        }
+      {
+        "fields":[
+          {
+            "id":"studentDetails.bio.firstName",
+            "name":"firstName",
+            "typeName":"string",
+            "kind":"string",
+            "optional":false
+          },
+          {
+            "id":"studentDetails.bio.lastName",
+            "name":"lastName",
+            "typeName":"string",
+            "kind":"string",
+            "optional":false
+          },
+          {
+            "id":"studentDetails.bio.age",
+            "name":"age",
+            "typeName":"int",
+            "kind":"int",
+            "optional":false
+          }
+        ],
+        "id":"studentDetails.bio",
+        "name":"bio",
+        "typeName":"Bio",
+        "kind":"record",
+        "optional":false
       },
-      "address":{
-        "address1": {
-          "type":"string",
-          "optional" : false, 
-          "nullable" : false, 
-          "comment":"address line 1"
-        },
-        "address2":{
-          "type":"string",
-          "optional" : false, 
-          "nullable" : false, 
-          "comment":"address line 2"
-        },
-        "city":{
-          "type":"string",
-          "optional" : false, 
-          "nullable" : false, 
-          "comment":"city of the address"
-        },
-        "country":{
-          "type":"string",
-          "optional" : false, 
-          "nullable" : false, 
-          "comment":"country of residence"
-        },
-        "zip":{
-          "type":"string",
-          "optional" : false, 
-          "nullable" : false, 
-          "comment":"zip code"
-        }
+      {
+        "fields":[
+          {
+            "id":"studentDetails.address.address1",
+            "name":"address1",
+            "typeName":"string",
+            "kind":"string",
+            "optional":false
+          },
+          {
+            "id":"studentDetails.address.address2",
+            "name":"address2",
+            "typeName":"string",
+            "kind":"string",
+            "optional":false
+          },
+          {
+            "id":"studentDetails.address.city",
+            "name":"city",
+            "typeName":"string",
+            "kind":"string",
+            "optional":false
+          },
+          {
+            "id":"studentDetails.address.country",
+            "name":"country",
+            "typeName":"string",
+            "kind":"string",
+            "optional":false
+          },
+          {
+            "id":"studentDetails.address.zipcode",
+            "name":"zipcode",
+            "typeName":"string",
+            "kind":"string",
+            "optional":false
+          }
+        ],
+        "id":"studentDetails.address",
+        "name":"address",
+        "typeName":"Address",
+        "kind":"record",
+        "optional":false
       },
-      "academicDetails": {
-        "major":{
-          "type":"string",
-          "optional" : false, 
-          "nullable" : false, 
-          "comment":"major of the degree"
-        },
-        "subjects":{
-          "type":"string[]",
-          "optional" : false, 
-          "nullable" : false, 
-          "comment":"enrolled subjects"
-        }
-      }
-    },
-    "studentProgress": {
-      "studentId":{
-        "type":"string",
-        "optional" : false, 
-        "nullable" : false, 
-        "comment":"student id"
+      {
+        "fields":[
+          {
+            "id":"studentDetails.academicDetails.major",
+            "name":"major",
+            "typeName":"string",
+            "kind":"string",
+            "optional":false
+          },
+          {
+            "member":{
+              "id":"studentDetails.academicDetails.subjects.0",
+              "name":"<subjectsItem>",
+              "typeName":"string",
+              "kind":"string",
+              "optional":false
+            },
+            "id":"studentDetails.academicDetails.subjects",
+            "name":"subjects",
+            "typeName":"string[]",
+            "kind":"array",
+            "optional":false
+          }
+        ],
+        "id":"studentDetails.academicDetails",
+        "name":"academicDetails",
+        "typeName":"AcademicDetails",
+        "kind":"record",
+        "optional":false
       },
-      "currentLevel":{
-        "type": "string",
-        "optional" : false, 
-        "nullable" : false, 
-        "comment": "current grade of the student"
+      {
+        "fields":[
+          {
+            "id":"studentDetails.studentProgress.studentId",
+            "name":"studentId",
+            "typeName":"string",
+            "kind":"string",
+            "optional":false
+          },
+          {
+            "id":"studentDetails.studentProgress.currentLevel",
+            "name":"currentLevel",
+            "typeName":"float",
+            "kind":"float",
+            "optional":false
+          }
+        ],
+        "id":"studentDetails.studentProgress",
+        "name":"studentProgress",
+        "typeName":"StudentProgress",
+        "kind":"record",
+        "optional":false
       }
-    }
-}  
-
-\`\`\`
+    ],
+    "id":"studentDetails",
+    "name":"studentDetails",
+    "typeName":"StudentDetails",
+    "kind":"record",
+    "category":"parameter",
+    "optional":false
+  }
+]
 
 Example Output json : 
 
-\`\`\`
 {
-    "studentId":{
-      "type":"int",
-      "optional" : true, 
-      "nullable" : true,
-      "comment":"reservation id"
-    },
-    "studentTags":{
-        "type":"string[]",
-        "optional" : false, 
-        "nullable" : false,
-        "comment":"student tags"
+  "fields":[
+    {
+      "id":"student.studentId",
+      "name":"studentId",
+      "typeName":"int",
+      "kind":"int",
+      "optional":false
     },
-    "bio":{
-      "fullName": {
-        "type":"string",
-        "optional" : false, 
-        "nullable" : false, 
-        "comment":"full name of the student"
+    {
+      "member":{
+        "id":"student.studentTags",
+        "name":"<studentTagsItem>",
+        "typeName":"string",
+        "kind":"string",
+        "optional":false
       },
-      "age":{
-        "type":"int",
-        "optional" : false, 
-        "nullable" : false, 
-        "comment":"age in years"
-      }
+      "id":"student.studentTags",
+      "name":"studentTags",
+      "typeName":"string[]",
+      "kind":"array",
+      "optional":false
     },
-    "address":{
-      "type":"string",
-      "optional" : false, 
-      "nullable" : false, 
-      "comment":"address of the student"
+    {
+      "fields":[
+        {
+          "id":"student.studentBio.fullName",
+          "name":"fullName",
+          "typeName":"string",
+          "kind":"string",
+          "optional":false
+        },
+        {
+          "id":"student.studentBio.age",
+          "name":"age",
+          "typeName":"int",
+          "kind":"int",
+          "optional":false
+        }
+      ],
+      "id":"student.studentBio",
+      "name":"studentBio",
+      "typeName":"StudentBio",
+      "kind":"record",
+      "optional":false
     },
-    "AcademicMajor":{
-      "type":"string",
-      "optional" : true, 
-      "comment":"major of the degree"
+    {
+      "id":"student.studentAddress",
+      "name":"studentAddress",
+      "typeName":"string",
+      "kind":"string",
+      "optional":false
     },
-    "subjects":{
-      "type":"string[]",
-      "optional" : false, 
-      "nullable" : false, 
-      "comment":"enrolled subjects"
+    {
+      "id":"student.academicMajor",
+      "name":"academicMajor",
+      "typeName":"string",
+      "kind":"string",
+      "optional":false
     },
-    "currentLevel": {
-      "type": "string",
-      "optional" : true, 
-      "nullable" : true,
-      "comment": "current grade of the student"
+    {
+      "member":{
+        "id":"student.subjects",
+        "name":"<subjectsItem>",
+        "typeName":"string",
+        "kind":"string",
+        "optional":false
+      },
+      "id":"student.subjects",
+      "name":"subjects",
+      "typeName":"string[]",
+      "kind":"array",
+      "optional":false
+    },
+    {
+      "id":"student.currentLevel",
+      "name":"currentLevel",
+      "typeName":"string",
+      "kind":"string",
+      "optional":false
     }
+  ],
+  "id":"student",
+  "name":"student",
+  "typeName":"Student",
+  "kind":"record",
+  "optional":false
 }
 
-\`\`\`
-
 Example Mapping:
-\`\`\`
+
 {
-    "studentId": {
-      "OPERATION": {
-        "NAME": "DIRECT",
-        "PARAMETER_1": "studentDetails.id",
-        "PARAMETER_2": "INT"
-      }
-    },
-    "studentTags": {
-      "OPERATION": {
-        "NAME": "SPLIT",
-        "PARAMETER_1": "studentDetails.tags",
-        "PARAMETER_2": ","
-      }
-    },
-    "bio": {
-      "fullName": {
-        "OPERATION": {
-          "NAME": "ADDITION",
-          "PARAMETER_1": "studentDetails.bio.firstName",
-          "PARAMETER_2": " ",
-          "PARAMETER_3": "studentDetails.bio.lastName"
-        }
-      },
-      "age": {
-        "OPERATION": {
-          "NAME": "DIRECT",
-          "PARAMETER_1": "studentDetails.bio.age"
-        }
-      }
-    },
-    "address": {
-      "OPERATION": {
-        "NAME": "ADDITION",
-        "PARAMETER_1": "studentDetails.address.address1",
-        "PARAMETER_2": ", ",
-        "PARAMETER_3": "studentDetails.address.address2",
-        "PARAMETER_4": ", ",
-        "PARAMETER_5": "studentDetails.address.country",
-        "PARAMETER_6": ", ",
-        "PARAMETER_7": "studentDetails.address.zip"
-      }
-    },
-    "academicMajor": {
-      "OPERATION": {
-        "NAME": "DIRECT",
-        "PARAMETER_1": "studentDetails.academicDetails.major"
-      }
-    },
-    "subjects": {
-      "OPERATION": {
-        "NAME": "DIRECT",
-        "PARAMETER_1": "studentDetails.academicDetails.subjects"
-      }
-    },
-    "currentLevel": {
-      "OPERATION": {
-        "NAME": "DIRECT",
-        "PARAMETER_1": "studentDetails.studentProgress.currentLevel"
-      }
+  "student.studentId":{
+    "OPERATION":{
+      "NAME":"DIRECT",
+      "PARAMETER_1":"studentDetails.id"
+    }
+  },
+  "student.studentTags":{
+    "OPERATION":{
+      "NAME":"DIRECT",
+      "PARAMETER_1":"studentDetails.tags"
+    }
+  },
+  "student.studentBio.fullName":{
+    "OPERATION":{
+      "NAME":"ADDITION",
+      "PARAMETER_1":"studentDetails.bio.firstName",
+      "PARAMETER_2":" ",
+      "PARAMETER_3":"studentDetails.bio.lastName"
+    }
+  },
+  "student.studentBio.age":{
+    "OPERATION":{
+      "NAME":"DIRECT",
+      "PARAMETER_1":"studentDetails.bio.age"
+    }
+  },
+  "student.studentAddress":{
+    "OPERATION":{
+      "NAME":"ADDITION",
+      "PARAMETER_1":"studentDetails.address.address1",
+      "PARAMETER_2":", ",
+      "PARAMETER_3":"studentDetails.address.address2",
+      "PARAMETER_4":", ",
+      "PARAMETER_5":"studentDetails.address.city",
+      "PARAMETER_6":", ",
+      "PARAMETER_7":"studentDetails.address.country",
+      "PARAMETER_8":" ",
+      "PARAMETER_9":"studentDetails.address.zipcode"
     }
+  },
+  "student.academicMajor":{
+    "OPERATION":{
+      "NAME":"DIRECT",
+      "PARAMETER_1":"studentDetails.academicDetails.major"
+    }
+  },
+  "student.subjects":{
+    "OPERATION":{
+      "NAME":"DIRECT",
+      "PARAMETER_1":"studentDetails.academicDetails.subjects"
+    }
+  },
+  "student.currentLevel":{
+    "OPERATION":{
+      "NAME":"DIRECT",
+      "PARAMETER_1":"studentDetails.studentProgress.currentLevel"
+    }
+  }
 }
 
-\`\`\`
-Now using the above rules find the mappings for the following input and output records. 
-
-IMPORTANT : 
-DO NOT RETURN ANYTHING OTHER THAN THE MAPPING JSON! 
-DO NOT ENCLOSE THE RESULT JSON WITH ANYTHING.
-FOR DIRECT MAPPINGS THE PARAMETER MUST BE A FIELD PATH IN THE INPUT. DEFAULT VALUES AND NULL LIKE VALUES MUST NOT BE MAPPED DIRECT.
-
-User's mappings
-\`\`\`
-${mappingFields}
-\`\`\`
+## IMPORTANT NOTES:
 
-
-Input json
-\`\`\`
-${inputJson}
-\`\`\`
-
-
-Output json
-\`\`\`
-${outputJson}
-\`\`\`
+- **DO NOT RETURN ANYTHING OTHER THAN THE MAPPING JSON!**
+- **DO NOT ENCLOSE THE RESULT JSON WITH ANYTHING.**
+- **DO NOT USE MARKDOWN CODE BLOCKS OR BACKTICKS.**
+- **RETURN ONLY RAW JSON WITHOUT ANY FORMATTING OR WRAPPER.**
+- **FOR DIRECT MAPPINGS:**
+  - **Input fields, variables, constants, configurables and module variables: use field ID/path from the input schema**
+  - **Enum values: use their exact enum identifiers**
+  - **DEFAULT VALUES AND NULL LIKE VALUES MUST NOT BE MAPPED DIRECT.**
+- **Use the exact field IDs as provided in the input/output schema (e.g., "input.contactInfo.email", "output.salaryInfo.baseSalary")**
+- **Consider mapping tips as additional reference for understanding field relationships and mapping patterns**
 `;
 }
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/types.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/types.ts
index 28c761ba9f5..b52871f49d3 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/types.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/datamapper/types.ts
@@ -89,6 +89,17 @@ export interface MetadataField {
     members?: { [key: string]: MetadataField };
 }
 
+export interface DataMappingResponse {
+    output: string;
+    inputs?: string[];
+    expression: string;
+}
+
+export interface DataMappingRequest {
+    input: IOType[];
+    output: IOType;
+}
+
 // =============================================================================
 // MAPPING HINT TYPES
 // =============================================================================
@@ -102,11 +113,6 @@ export type MappingFields = MappingField | { [key: string]: MappingFields };
 
 export type MetadataType = Metadata | MetadataField | { [key: string]: MetadataField };
 
-export interface Inputs {
-    input: { [key: string]: Metadata };
-    output: { [key: string]: MetadataField };
-}
-
 // =============================================================================
 // OPERATION METADATA STRUCTURES
 // =============================================================================
@@ -163,16 +169,14 @@ export interface ChatResponse {
 }
 
 // =============================================================================
-// INLINE DATAMAPPING TYPES
+// VISITOR PATTERN TYPES
 // =============================================================================
 
-export interface InlineDataMapping {
-    output: string;
-    inputs?: string[];
-    expression: string;
+export interface VisitorContext {
+    targetPath: string;
+    found: IOType | null;
 }
 
-export interface InlineInputs {
-    input: IOType[];
-    output: IOType;
+export interface IOTypeVisitor {
+    visitIOType(ioType: IOType, context: VisitorContext): IOType | null;
 }
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/documentation/doc_generator.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/documentation/doc_generator.ts
new file mode 100644
index 00000000000..3cd3b3dd1a3
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/documentation/doc_generator.ts
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { DocGenerationRequest } from '@wso2/ballerina-core';
+import { getServiceDeclaration } from '../../testGenerator';
+import { getBallerinaProjectRoot } from '../../../../rpc-managers/ai-panel/rpc-manager';
+import { generateDocumentation, DocumentationGenerationRequest } from './documentation';
+import { getProjectSource, getOpenAPISpecification } from '../../utils';
+
+// Main documentation generator function that handles all the logic
+export async function generateDocumentationForService(params: DocGenerationRequest): Promise<void> {
+    try {
+        // Get the project root
+        const projectRoot = await getBallerinaProjectRoot();
+
+        // Get the project source files
+        const projectSource = await getProjectSource(projectRoot);
+        if (!projectSource) {
+            throw new Error("The current project is not recognized as a valid Ballerina project. Please ensure you have opened a Ballerina project.");
+        }
+
+        // Find the service declaration and get OpenAPI spec
+        const { serviceDocFilePath } = await getServiceDeclaration(projectRoot, params.serviceName);
+        const openApiSpec = await getOpenAPISpecification(serviceDocFilePath);
+
+        // Create the documentation generation request
+        const docRequest: DocumentationGenerationRequest = {
+            serviceName: params.serviceName,
+            projectSource: projectSource,
+            openApiSpec: openApiSpec
+        };
+
+        // Generate the documentation with streaming
+        await generateDocumentation(docRequest);
+    } catch (error) {
+        console.error("Error during documentation generation:", error);
+        throw error;
+    }
+}
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/documentation/documentation.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/documentation/documentation.ts
new file mode 100644
index 00000000000..10cf18d8676
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/documentation/documentation.ts
@@ -0,0 +1,92 @@
+// Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com/) All Rights Reserved.
+
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied. See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { Command, ProjectSource } from "@wso2/ballerina-core";
+import { streamText, CoreMessage } from "ai";
+import { getAnthropicClient, ANTHROPIC_SONNET_4 } from "../connection";
+import {
+    getDocumentationGenerationSystemPrompt,
+    createDocumentationGenMessages
+} from "./prompts";
+import { CopilotEventHandler, createWebviewEventHandler } from "../event";
+import { getErrorMessage } from "../utils";
+import { AIPanelAbortController } from "../../../../../src/rpc-managers/ai-panel/utils";
+
+export type DocumentationGenerationRequest = {
+    serviceName: string;
+    projectSource: ProjectSource;
+    openApiSpec?: string;
+};
+
+// Core documentation generation function that emits events
+export async function generateDocumentationCore(
+    params: DocumentationGenerationRequest,
+    eventHandler: CopilotEventHandler
+): Promise<void> {
+    const systemPrompt = getDocumentationGenerationSystemPrompt();
+    const userMessages: CoreMessage[] = createDocumentationGenMessages(params);
+
+    const allMessages: CoreMessage[] = [
+        {
+            role: "system",
+            content: systemPrompt,
+        },
+        ...userMessages
+    ];
+
+    const { fullStream } = streamText({
+        model: await getAnthropicClient(ANTHROPIC_SONNET_4),
+        maxTokens: 16384,
+        temperature: 0,
+        messages: allMessages,
+        abortSignal: AIPanelAbortController.getInstance().signal,
+    });
+
+    eventHandler({ type: "start" });
+    let assistantResponse: string = "";
+
+    for await (const part of fullStream) {
+        switch (part.type) {
+            case "text-delta": {
+                const textPart = part.textDelta;
+                assistantResponse += textPart;
+                eventHandler({ type: "content_block", content: textPart });
+                break;
+            }
+            case "error": {
+                const error = part.error;
+                console.error("Error during documentation generation:", error);
+                eventHandler({ type: "error", content: getErrorMessage(error) });
+                break;
+            }
+            case "finish": {
+                eventHandler({ type: "stop", command: Command.Doc });
+                break;
+            }
+        }
+    }
+}
+
+// Main public function that uses the default event handler
+export async function generateDocumentation(params: DocumentationGenerationRequest): Promise<void> {
+    const eventHandler = createWebviewEventHandler(Command.Doc);
+    try {
+        await generateDocumentationCore(params, eventHandler);
+    } catch (error) {
+        console.error("Error during documentation generation:", error);
+        eventHandler({ type: "error", content: getErrorMessage(error) });
+    }
+}
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/documentation/prompts.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/documentation/prompts.ts
new file mode 100644
index 00000000000..abc222a0fe8
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/documentation/prompts.ts
@@ -0,0 +1,241 @@
+// Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com/) All Rights Reserved.
+
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied. See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { DocumentationGenerationRequest } from "./documentation";
+import { CoreMessage } from "ai";
+import { flattenProjectToText, getExternalTypesAsJsonSchema } from "./utils";
+
+// ==============================================
+//            SYSTEM PROMPTS
+// ==============================================
+
+export function getDocumentationGenerationSystemPrompt(): string {
+  return `You are an expert technical writer and API documentation specialist with deep expertise in Ballerina services and REST API documentation. Your task is to analyze Ballerina source code and OpenAPI specifications to generate comprehensive, developer-focused documentation for APIs.
+
+Your documentation should be:
+1. **Developer-Centric**: Written for API consumers and integrators
+2. **Comprehensive**: Cover all endpoints, request/response formats, and error scenarios
+3. **Practical**: Include short, real examples - not comprehensive but concise and realistic
+4. **Professional**: Follow industry standards for API documentation
+5. **Clear and Concise**: Easy to understand and navigate
+
+Focus on creating documentation that helps developers quickly understand:
+- What the API does and its purpose
+- How to authenticate and get started
+- Available endpoints and their functionality
+- Request/response formats with short, realistic examples
+- Error handling and status codes
+- Integration patterns and best practices`;
+}
+
+// ==============================================
+//            DOCUMENTATION GENERATION PROMPTS
+// ==============================================
+
+export function getDocumentationGenUser1Prompt(serviceCode: string, typeSchemas: string, serviceName: string): string {
+  return `Generate professional developer documentation for a Ballerina REST API service. I will provide you with:
+1. The complete Ballerina service implementation
+2. OpenAPI type schemas for external dependencies
+3. The target service name for documentation
+
+Please analyze the code and create clean, professional API documentation following industry standards.
+
+**Service Name**: ${serviceName}
+
+**Ballerina Source Code**:
+[BEGIN_SOURCE]
+${serviceCode}
+[END_SOURCE]
+
+**Type Schemas for External Libraries**:
+[BEGIN_SCHEMAS]
+${typeSchemas}
+[END_SCHEMAS]
+
+Generate documentation following this professional structure:
+
+---
+
+# [SERVICE_NAME] Service API – Developer Documentation
+
+The [SERVICE_NAME] Service API enables developers to [describe core functionality]. The API is designed to be simple, secure, and scalable.
+
+[Determine the actual service name from the code context - look at service class names, comments, resource paths, data models, and business logic to infer what this service does (e.g., "Pizza Shop", "User Management", "Inventory", etc.) rather than using the base path directly]
+
+[Only include Base URLs if they can be determined from the service configuration or listener setup in the code]
+* **Format:** JSON over HTTP/HTTPS
+* **Authentication:** [Only include if authentication is implemented in the code]
+
+---
+
+## Getting Started
+
+### Authentication
+
+[Only include this section if authentication mechanisms are actually implemented in the Ballerina service code]
+
+---
+
+## Core Concepts
+
+* **[Concept 1]** – [Brief description of key domain objects/concepts]
+* **[Concept 2]** – [Brief description of key domain objects/concepts]
+* **[Concept 3]** – [Brief description of key domain objects/concepts]
+
+---
+
+## API Reference
+
+### [Resource Group Name]
+
+**[Endpoint Description]**
+\`[HTTP_METHOD] [/endpoint/path]\`
+
+[Brief description of what this endpoint does]
+
+**Example:**
+
+\`\`\`bash
+curl [BASE_URL_FROM_CODE]/[endpoint] \\
+  -H "Content-Type: application/json"
+\`\`\`
+
+**Response:**
+
+\`\`\`json
+{
+  "example": "response data"
+}
+\`\`\`
+
+**Parameters:**
+- **Path Parameters:**
+  - \`param_name\` (type) – Description
+- **Query Parameters:**
+  - \`param_name\` (type) – Description
+- **Request Body:**
+
+\`\`\`json
+{
+  "field": "value"
+}
+\`\`\`
+
+[Repeat for each endpoint grouped logically]
+
+---
+
+## Error Handling
+
+All error responses follow a standard structure:
+
+\`\`\`json
+{
+  "error": "error_code",
+  "message": "Human readable error message."
+}
+\`\`\`
+
+**Error Codes:**
+
+* \`400 Bad Request\` – Invalid request format.
+* \`401 Unauthorized\` – Missing or invalid credentials.
+* \`404 Not Found\` – Resource not found.
+* \`429 Too Many Requests\` – Rate limit exceeded.
+* \`500 Internal Server Error\` – Unexpected server error.
+
+---
+
+## Data Models
+
+### [ModelName]
+
+\`\`\`json
+{
+  "field1": "string",
+  "field2": 123,
+  "field3": true,
+  "field4": {
+    "nested_field": "value"
+  }
+}
+\`\`\`
+
+**Field Descriptions:**
+- \`field1\` (string) – Description of the field
+- \`field2\` (number) – Description of the field
+- \`field3\` (boolean) – Description of the field
+
+[Document all key data structures]
+
+---
+
+## Best Practices
+
+* Use the **development environment** for testing before switching to production.
+* Implement **retries with exponential backoff** for transient errors.
+* Use **pagination** when retrieving large datasets.
+* Store API keys securely; never commit them to version control.
+* Handle errors gracefully and provide meaningful feedback to users.
+
+---
+
+Important Guidelines:
+1. **Determine Service Name Intelligently**: Analyze the code to infer what the service does rather than using base paths like "/". Look for:
+   - Service class names and comments
+   - Resource endpoint patterns (e.g., /pizzas, /orders → "Pizza Shop")
+   - Data model names (e.g., Pizza, Customer, Order → "Pizza Shop")
+   - Business logic and functionality
+   - Variable names and types
+   - Generate meaningful names like "Pizza Shop", "User Management", "Inventory Management" instead of "/" or generic terms
+2. Remove any informal language, emojis, or casual greetings
+3. Extract actual endpoint paths, methods, and parameters from the Ballerina code
+4. Generate realistic example data based on the types defined in the code - keep examples SHORT and REAL, not comprehensive
+5. Include all resource functions as separate endpoint documentation
+6. Use proper HTTP status codes based on the service implementation
+7. Make examples practical, concise, and realistic - avoid overly complex or lengthy examples
+8. Focus on what developers need to know to integrate successfully
+9. Group related endpoints logically under sections
+10. Use clean, professional language suitable for technical documentation
+11. Follow the structure shown above strictly for consistency
+12. DO NOT include hardcoded URLs - only include Base URLs if they can be determined from service listeners/configuration in the actual code
+13. DO NOT include Authentication section unless authentication is actually implemented in the service
+14. Generate ONLY the documentation content - no completion messages or additional text`;
+}
+
+// ==============================================
+//            MESSAGE CREATION FUNCTIONS
+// ==============================================
+
+export function createDocumentationGenMessages(request: DocumentationGenerationRequest): CoreMessage[] {
+  const docGenUser1 = createDocumentationGenUser1Message(request);
+  return [docGenUser1];
+}
+
+export function createDocumentationGenUser1Message(request: DocumentationGenerationRequest): CoreMessage {
+  const flattenedProject = flattenProjectToText(request.projectSource);
+  const typeSchemas = request.openApiSpec ? getExternalTypesAsJsonSchema(request.openApiSpec) : "{}";
+
+  const prompt = getDocumentationGenUser1Prompt(flattenedProject, typeSchemas, request.serviceName);
+
+  return {
+    role: "user",
+    content: prompt,
+    providerOptions: {
+      anthropic: { cacheControl: { type: "ephemeral" } },
+    },
+  };
+}
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/documentation/utils.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/documentation/utils.ts
new file mode 100644
index 00000000000..58a757cb95a
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/documentation/utils.ts
@@ -0,0 +1,99 @@
+// Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com/) All Rights Reserved.
+
+// WSO2 LLC. licenses this file to you under the Apache License,
+// Version 2.0 (the "License"); you may not use this file except
+// in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied. See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import { ProjectSource } from "@wso2/ballerina-core";
+
+// ==============================================
+//            UTILITY FUNCTIONS
+// ==============================================
+
+export function extractDocumentationFromResponse(response: string): string {
+    // For now, return the full response as documentation
+    // In the future, we might want to extract specific sections or format it
+    return response.trim();
+}
+
+export function flattenProjectToText(projectSource: ProjectSource): string {
+    let flattenedProject = "";
+
+    const modules = projectSource.projectModules;
+    if (modules) {
+        for (const module of modules) {
+            let moduleSource = "";
+            for (const sourceFile of module.sourceFiles) {
+                moduleSource += `\`\`\`ballerina
+# modules/${module.moduleName}/${sourceFile.filePath}
+
+${sourceFile.content}
+\`\`\`
+
+`;
+            }
+            flattenedProject += moduleSource;
+        }
+    }
+
+    for (const sourceFile of projectSource.sourceFiles) {
+        flattenedProject += `\`\`\`ballerina
+# ${sourceFile.filePath}
+
+${sourceFile.content}
+\`\`\`
+
+`;
+    }
+
+    return flattenedProject;
+}
+
+export function getExternalTypesAsJsonSchema(openApiSpec: string): string {
+    try {
+        const externalTypes: Record<string, any> = {};
+
+        const openApiSpecObj = JSON.parse(openApiSpec);
+        const components = openApiSpecObj.components;
+
+        if (components && components.schemas) {
+            for (const componentName in components.schemas) {
+                const componentSchema = components.schemas[componentName];
+                if (componentSchema && componentSchema['x-ballerina-type'] !== undefined) {
+                    externalTypes[componentName] = componentSchema;
+                }
+            }
+        }
+
+        return JSON.stringify(externalTypes, null, 2);
+    } catch (error) {
+        // Return empty object if parsing fails
+        return "{}";
+    }
+}
+
+export function getTypesAsJsonSchema(openApiSpec: string): string {
+    try {
+        const openApiSpecObj = JSON.parse(openApiSpec);
+        const components = openApiSpecObj.components;
+
+        if (components) {
+            return JSON.stringify(components, null, 2);
+        }
+
+        return "{}";
+    } catch (error) {
+        // Return empty object if parsing fails
+        return "{}";
+    }
+}
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/healthcare/healthcare.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/healthcare/healthcare.ts
index df736b7f877..8667d964865 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/service/healthcare/healthcare.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/healthcare/healthcare.ts
@@ -15,7 +15,7 @@
 // under the License.
 
 import { CoreMessage, generateObject, streamText } from "ai";
-import { getAnthropicClient, ANTHROPIC_HAIKU, ANTHROPIC_SONNET_4 } from "../connection";
+import { getAnthropicClient, ANTHROPIC_HAIKU, ANTHROPIC_SONNET_4, getProviderCacheControl } from "../connection";
 import { GenerationType, getRelevantLibrariesAndFunctions } from "../libs/libs";
 import { getRewrittenPrompt, populateHistory, transformProjectSource, getErrorMessage } from "../utils";
 import { libraryContains } from "../libs/funcs";
@@ -57,6 +57,7 @@ export async function generateHealthcareCodeCore(
     ).libraries;
 
     const historyMessages = populateHistory(params.chatHistory);
+    const cacheOptions = await getProviderCacheControl();
 
     const allMessages: CoreMessage[] = [
         {
@@ -66,17 +67,13 @@ export async function generateHealthcareCodeCore(
         {
             role: "system",
             content: getSystemPromptSuffix(LANGLIBS),
-            providerOptions: {
-                anthropic: { cacheControl: { type: "ephemeral" } },
-            },
+            providerOptions: cacheOptions,
         },
         ...historyMessages,
         {
             role: "user",
             content: getUserPrompt(prompt, sourceFiles, params.fileAttachmentContents, packageName, params.operationType),
-            providerOptions: {
-                anthropic: { cacheControl: { type: "ephemeral" } },
-            },
+            providerOptions: cacheOptions,
         },
     ];
 
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/libs/libs.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/libs/libs.ts
index a0dc70913f6..248e09adf1c 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/service/libs/libs.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/libs/libs.ts
@@ -23,7 +23,7 @@ import {
 } from "@wso2/ballerina-core";
 import { Library } from "./libs_types";
 import { selectRequiredFunctions } from "./funcs";
-import { getAnthropicClient, ANTHROPIC_HAIKU } from "../connection";
+import { getAnthropicClient, ANTHROPIC_HAIKU, getProviderCacheControl } from "../connection";
 import { langClient } from "../../activator";
 import { getGenerationMode } from "../utils";
 import { AIPanelAbortController } from "../../../../../src/rpc-managers/ai-panel/utils";
@@ -63,13 +63,12 @@ export async function getSelectedLibraries(prompt: string, generationType: Gener
     if (allLibraries.length === 0) {
         return [];
     }
+    const cacheOptions = await getProviderCacheControl();
     const messages: CoreMessage[] = [
         {
             role: "system",
             content: getSystemPrompt(allLibraries),
-            providerOptions: {
-                anthropic: { cacheControl: { type: "ephemeral" } },
-            },
+            providerOptions: cacheOptions,
         },
         {
             role: "user",
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/openapi/openapi.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/openapi/openapi.ts
index 6f6cf2cb37c..a85e64399dd 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/service/openapi/openapi.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/openapi/openapi.ts
@@ -16,7 +16,7 @@
 
 import { GenerateOpenAPIRequest, Command } from "@wso2/ballerina-core";
 import { streamText } from "ai";
-import { getAnthropicClient, ANTHROPIC_HAIKU } from "../connection";
+import { getAnthropicClient, ANTHROPIC_HAIKU, getProviderCacheControl } from "../connection";
 import { getErrorMessage, populateHistory } from "../utils";
 import { CopilotEventHandler, createWebviewEventHandler } from "../event";
 import { AIPanelAbortController } from "../../../../../src/rpc-managers/ai-panel/utils";
@@ -28,6 +28,7 @@ export async function generateOpenAPISpecCore(
 ): Promise<void> {
     // Populate chat history and add user message
     const historyMessages = populateHistory(params.chatHistory);
+    const cacheOptions = await getProviderCacheControl();
     const { fullStream } = streamText({
         model: await getAnthropicClient(ANTHROPIC_HAIKU),
         maxTokens: 8192,
@@ -36,9 +37,7 @@ export async function generateOpenAPISpecCore(
             {
                 role: "system",
                 content: getSystemPrompt(),
-                providerOptions: {
-                    anthropic: { cacheControl: { type: "ephemeral" } },
-                },
+                providerOptions: cacheOptions,
             },
             ...historyMessages,
             {
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/service/test/test.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/service/test/test.ts
index 16eb1389328..7df7675b270 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/service/test/test.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/service/test/test.ts
@@ -16,7 +16,7 @@
 
 import { Command } from "@wso2/ballerina-core";
 import { generateText, CoreMessage } from "ai";
-import { getAnthropicClient } from "../connection";
+import { getAnthropicClient, getProviderCacheControl } from "../connection";
 import { 
     getServiceTestGenerationSystemPrompt, 
     getServiceTestDiagnosticsSystemPrompt, 
@@ -103,6 +103,19 @@ async function getStreamedTestResponse(request: TestGenerationRequest1): Promise
         throw new Error(`Unsupported target type specified: ${request.targetType}. Please use 'service' or 'function'.`);
     }
 
+    // Apply provider-aware cache control to messages that have cacheControl
+    const cacheOptions = await getProviderCacheControl();
+    messages = messages.map(message => {
+        if (message.providerOptions && 
+            (message.providerOptions as any).anthropic?.cacheControl) {
+            return {
+                ...message,
+                providerOptions: cacheOptions
+            };
+        }
+        return message;
+    });
+
     const { text } = await generateText({
         model: await getAnthropicClient("claude-sonnet-4-20250514"),
         maxTokens: 16384,
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/testGenerator.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/testGenerator.ts
index a74a3da6287..059ee5c5a12 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/testGenerator.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/testGenerator.ts
@@ -25,7 +25,7 @@ import { langClient } from './activator';
 import * as fs from 'fs';
 import * as path from 'path';
 import * as os from 'os';
-import { writeBallerinaFileDidOpen } from '../../utils/modification';
+import { writeBallerinaFileDidOpenTemp } from '../../utils/modification';
 import { closeAllBallerinaFiles } from './utils';
 import { generateTestFromLLM, TestGenerationRequest1 } from './service/test/test';
 
@@ -230,7 +230,7 @@ export async function getDiagnostics(
         fs.mkdirSync(tempTestFolderPath, { recursive: true });
     }
     const tempTestFilePath = path.join(tempTestFolderPath, 'test.bal');
-    writeBallerinaFileDidOpen(tempTestFilePath, generatedTestSource.testSource);
+    writeBallerinaFileDidOpenTemp(tempTestFilePath, generatedTestSource.testSource);
 
     const diagnosticsResult = await langClient.getDiagnostics({ documentIdentifier: { uri: Uri.file(tempTestFilePath).toString() } });
     await closeAllBallerinaFiles(tempDir);
diff --git a/workspaces/ballerina/ballerina-extension/src/features/ai/utils.ts b/workspaces/ballerina/ballerina-extension/src/features/ai/utils.ts
index b608b4ed2ff..60ba64e058c 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/ai/utils.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/ai/utils.ts
@@ -30,13 +30,13 @@ import { BallerinaProject } from '@wso2/ballerina-core';
 import { BallerinaExtension } from 'src/core';
 
 const config = workspace.getConfiguration('ballerina');
-export const BACKEND_URL : string = config.get('rootUrl') || process.env.BALLERINA_ROOT_URL;
-export const AUTH_ORG : string = config.get('authOrg') || process.env.BALLERINA_AUTH_ORG;
-export const AUTH_CLIENT_ID : string = config.get('authClientID') || process.env.BALLERINA_AUTH_CLIENT_ID;
-export const AUTH_REDIRECT_URL : string = config.get('authRedirectURL') || process.env.BALLERINA_AUTH_REDIRECT_URL;
+export const BACKEND_URL: string = config.get('rootUrl') || process.env.BALLERINA_ROOT_URL;
+export const AUTH_ORG: string = config.get('authOrg') || process.env.BALLERINA_AUTH_ORG;
+export const AUTH_CLIENT_ID: string = config.get('authClientID') || process.env.BALLERINA_AUTH_CLIENT_ID;
+export const AUTH_REDIRECT_URL: string = config.get('authRedirectURL') || process.env.BALLERINA_AUTH_REDIRECT_URL;
 
 // This refers to old backend before FE Migration. We need to eventually remove this.
-export const OLD_BACKEND_URL : string = BACKEND_URL + "/v2.0";
+export const OLD_BACKEND_URL: string = BACKEND_URL + "/v2.0";
 
 export async function closeAllBallerinaFiles(dirPath: string): Promise<void> {
     // Check if the directory exists
@@ -273,3 +273,135 @@ export async function isBallerinaProjectAsync(rootPath: string): Promise<boolean
 async function showNoBallerinaSourceWarningMessage() {
     return await vscode.window.showWarningMessage(ERROR_NO_BALLERINA_SOURCES);
 }
+
+// =========== PROJECT ANALYSIS UTILITIES ===========
+
+import { ProjectSource, ProjectModule, OpenAPISpec } from '@wso2/ballerina-core';
+import { langClient } from './activator';
+
+/**
+ * Finds the root directory of a Ballerina project by searching for Ballerina.toml
+ */
+export async function findBallerinaProjectRoot(dirPath: string): Promise<string | null> {
+    if (dirPath === null) {
+        return null;
+    }
+
+    const workspaceFolders = workspace.workspaceFolders;
+    if (!workspaceFolders) {
+        return null;
+    }
+
+    // Check if the directory is within any of the workspace folders
+    const workspaceFolder = workspaceFolders.find(folder => dirPath.startsWith(folder.uri.fsPath));
+    if (!workspaceFolder) {
+        return null;
+    }
+
+    let currentDir = dirPath;
+
+    while (currentDir.startsWith(workspaceFolder.uri.fsPath)) {
+        const ballerinaTomlPath = path.join(currentDir, 'Ballerina.toml');
+        if (fs.existsSync(ballerinaTomlPath)) {
+            return currentDir;
+        }
+        currentDir = path.dirname(currentDir);
+    }
+
+    return null;
+}
+
+/**
+ * Gets the project source including all .bal files and modules
+ */
+export async function getProjectSource(dirPath: string): Promise<ProjectSource | null> {
+    const projectRoot = await findBallerinaProjectRoot(dirPath);
+
+    if (!projectRoot) {
+        return null;
+    }
+
+    const projectSource: ProjectSource = {
+        sourceFiles: [],
+        projectTests: [],
+        projectModules: [],
+        projectName: ""
+    };
+
+    // Read root-level .bal files
+    const rootFiles = fs.readdirSync(projectRoot);
+    for (const file of rootFiles) {
+        if (file.endsWith('.bal')) {
+            const filePath = path.join(projectRoot, file);
+            const content = await fs.promises.readFile(filePath, 'utf-8');
+            projectSource.sourceFiles.push({ filePath, content });
+        }
+    }
+
+    // Read modules
+    const modulesDir = path.join(projectRoot, 'modules');
+    if (fs.existsSync(modulesDir)) {
+        const modules = fs.readdirSync(modulesDir, { withFileTypes: true });
+        for (const moduleDir of modules) {
+            if (moduleDir.isDirectory()) {
+                const projectModule: ProjectModule = {
+                    moduleName: moduleDir.name,
+                    sourceFiles: [],
+                    isGenerated: false,
+                };
+
+                const moduleFiles = fs.readdirSync(path.join(modulesDir, moduleDir.name));
+                for (const file of moduleFiles) {
+                    if (file.endsWith('.bal')) {
+                        const filePath = path.join(modulesDir, moduleDir.name, file);
+                        const content = await fs.promises.readFile(filePath, 'utf-8');
+                        projectModule.sourceFiles.push({ filePath, content });
+                    }
+                }
+
+                projectSource.projectModules.push(projectModule);
+            }
+        }
+    }
+
+    return projectSource;
+}
+
+/**
+ * Gets the project source including test files
+ */
+export async function getProjectSourceWithTests(dirPath: string): Promise<ProjectSource | null> {
+    const projectRoot = await findBallerinaProjectRoot(dirPath);
+
+    if (!projectRoot) {
+        return null;
+    }
+
+    const projectSourceWithTests: ProjectSource = await getProjectSource(dirPath);
+
+    // Read tests
+    const testsDir = path.join(projectRoot, 'tests');
+    if (fs.existsSync(testsDir)) {
+        const testFiles = fs.readdirSync(testsDir);
+        for (const file of testFiles) {
+            if (file.endsWith('.bal') || file.endsWith('Config.toml')) {
+                const filePath = path.join(testsDir, file);
+                const content = await fs.promises.readFile(filePath, 'utf-8');
+                projectSourceWithTests.projectTests.push({ filePath, content });
+            }
+        }
+    }
+
+    return projectSourceWithTests;
+}
+
+/**
+ * Gets the OpenAPI specification for a given Ballerina service file
+ */
+export async function getOpenAPISpecification(documentFilePath: string): Promise<string> {
+    const response = await langClient.convertToOpenAPI({ documentFilePath, enableBalExtension: true }) as OpenAPISpec;
+    if (response.error) {
+        throw new Error(response.error);
+    }
+    return JSON.stringify(response.content[0].spec);
+}
diff --git a/workspaces/ballerina/ballerina-extension/src/features/bi/activator.ts b/workspaces/ballerina/ballerina-extension/src/features/bi/activator.ts
index 156b22c07b6..5585a32e6d3 100644
--- a/workspaces/ballerina/ballerina-extension/src/features/bi/activator.ts
+++ b/workspaces/ballerina/ballerina-extension/src/features/bi/activator.ts
@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { commands, Uri } from "vscode";
+import { commands, Uri, workspace, window, ConfigurationTarget } from "vscode";
 import {
     BI_COMMANDS,
     BIDeleteByComponentInfoRequest,
@@ -28,6 +28,7 @@ import {
 } from "@wso2/ballerina-core";
 import { BallerinaExtension } from "../../core";
 import { openView } from "../../stateMachine";
+import { ENABLE_DEBUG_LOG, ENABLE_TRACE_LOG, TRACE_SERVER } from "../../core/preferences";
 import { prepareAndGenerateConfig } from "../config-generator/configGenerator";
 import { StateMachine } from "../../stateMachine";
 import { BiDiagramRpcManager } from "../../rpc-managers/bi-diagram/rpc-manager";
@@ -37,6 +38,8 @@ import { isPositionEqual, isPositionWithinDeletedComponent } from "../../utils/h
 import { startDebugging } from "../editor-support/activator";
 
 const FOCUS_DEBUG_CONSOLE_COMMAND = 'workbench.debug.action.focusRepl';
+const TRACE_SERVER_OFF = "off";
+const TRACE_SERVER_VERBOSE = "verbose";
 
 export function activate(context: BallerinaExtension) {
     commands.registerCommand(BI_COMMANDS.BI_RUN_PROJECT, () => {
@@ -52,6 +55,10 @@ export function activate(context: BallerinaExtension) {
         openView(EVENT_TYPE.OPEN_VIEW, { view: MACHINE_VIEW.AddConnectionWizard });
     });
 
+    commands.registerCommand(BI_COMMANDS.ADD_CUSTOM_CONNECTOR, () => {
+        openView(EVENT_TYPE.OPEN_VIEW, { view: MACHINE_VIEW.AddCustomConnector });
+    });
+
     commands.registerCommand(BI_COMMANDS.ADD_ENTRY_POINT, () => {
         openView(EVENT_TYPE.OPEN_VIEW, { view: MACHINE_VIEW.BIComponentView });
     });
@@ -74,7 +81,7 @@ export function activate(context: BallerinaExtension) {
 
     commands.registerCommand(BI_COMMANDS.VIEW_CONFIGURATION, () => {
         openView(EVENT_TYPE.OPEN_VIEW, { view: MACHINE_VIEW.ViewConfigVariables });
-    }); 
+    });
 
     commands.registerCommand(BI_COMMANDS.SHOW_OVERVIEW, () => {
         openView(EVENT_TYPE.OPEN_VIEW, { view: MACHINE_VIEW.Overview });
@@ -95,9 +102,11 @@ export function activate(context: BallerinaExtension) {
     commands.registerCommand(BI_COMMANDS.SWITCH_PROJECT, async () => {
         // Hack to switch the project. This will reload the window and prompt the user to select the project.
         // This is a temporary solution until we provide the support for multi root workspaces.
-        commands.executeCommand('workbench.action.reloadWindow');
+        StateMachine.sendEvent("SWITCH_PROJECT" as any);
     });
 
+    commands.registerCommand(BI_COMMANDS.TOGGLE_TRACE_LOGS, toggleTraceLogs);
+
     commands.registerCommand(BI_COMMANDS.DELETE_COMPONENT, async (item: any) => {
         console.log(">>> delete component", item);
 
@@ -111,7 +120,7 @@ export function activate(context: BallerinaExtension) {
     });
 
     //HACK: Open all Ballerina files in the project
-    openAllBallerinaFiles(context);
+    // openAllBallerinaFiles(context);
 }
 
 function openAllBallerinaFiles(context: BallerinaExtension) {
@@ -295,3 +304,25 @@ function hasNoComponentsOpenInDiagram() {
 function isFilePathsEqual(filePath1: string, filePath2: string) {
     return path.normalize(filePath1) === path.normalize(filePath2);
 }
+
+function toggleTraceLogs() {
+    const config = workspace.getConfiguration();
+
+    const currentTraceServer = config.get<string>(TRACE_SERVER);
+    const currentDebugLog = config.get<boolean>(ENABLE_DEBUG_LOG);
+    const currentTraceLog = config.get<boolean>(ENABLE_TRACE_LOG);
+
+    const isTraceEnabled = currentTraceServer === TRACE_SERVER_VERBOSE && currentDebugLog && currentTraceLog;
+
+    if (isTraceEnabled) {
+        config.update(TRACE_SERVER, TRACE_SERVER_OFF, ConfigurationTarget.Global);
+        config.update(ENABLE_DEBUG_LOG, false, ConfigurationTarget.Global);
+        config.update(ENABLE_TRACE_LOG, false, ConfigurationTarget.Global);
+        window.showInformationMessage('BI extension trace logs disabled');
+    } else {
+        config.update(TRACE_SERVER, TRACE_SERVER_VERBOSE, ConfigurationTarget.Global);
+        config.update(ENABLE_DEBUG_LOG, true, ConfigurationTarget.Global);
+        config.update(ENABLE_TRACE_LOG, true, ConfigurationTarget.Global);
+        window.showInformationMessage('BI extension trace logs enabled');
+    }
+}
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/inline-utils.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/inline-utils.ts
deleted file mode 100644
index f9e9e88d7d1..00000000000
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/inline-utils.ts
+++ /dev/null
@@ -1,416 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
- *
- * This software is the property of WSO2 LLC. and its suppliers, if any.
- * Dissemination of any information or reproduction of any material contained
- * herein in any form is strictly forbidden, unless permitted by WSO2 expressly.
- * You may not alter or remove any copyright or other notice from copies of this content.
- */
-
-import { Attachment, ExpandedDMModel, FormField, InlineDataMapperModelResponse, InputCategory, IOType, Mapping, MappingElement, TypeKind } from "@wso2/ballerina-core";
-import { generateBallerinaCode, mappingFileInlineDataMapperModel, navigateTypeInfo } from "./utils";
-import { DatamapperResponse } from "../../../src/features/ai/service/datamapper/types";
-import { generateInlineAutoMappings } from "../../../src/features/ai/service/datamapper/inline_datamapper";
-import { FieldMetadata, ParameterDefinitions, ParameterField, ParameterMetadata } from "./types";
-
-function transformIOType(input: IOType): FormField {
-    const name = input.variableName || extractNameFromId(input.id);
-
-    let typeName: string;
-    if (input.kind && input.typeName && input.kind !== input.typeName && input.category) {
-        typeName = input.kind;
-    } else if (!input.typeName) {
-        typeName = input.kind || "unknown";
-    } else {
-        typeName = input.typeName;
-    }
-
-    const baseField = {
-        id: input.id,
-        name,
-        typeName,
-        optional: input.optional || false
-    };
-
-    // Handle arrays
-    if (input.kind === "array" && input.member) {
-        const memberTransformed = transformIOType(input.member) as FormField;
-        const { name, ...memberWithoutName } = memberTransformed;
-
-        return {
-            ...baseField,
-            typeName: "array",
-            memberType: memberWithoutName as FormField
-        } as FormField;
-    }
-
-    // Handle records
-    if (input.kind === "record" && input.fields) {
-        const recordField: FormField = {
-            ...baseField,
-            typeName: "record",
-            fields: input.fields.map(transformIOType) as FormField[]
-        };
-
-        if (
-            input.typeName &&
-            input.kind !== input.typeName &&
-            !input.category
-        ) {
-            recordField.typeInfo = {
-                orgName: "",
-                moduleName: "",
-                name: input.typeName
-            };
-        }
-
-        return recordField;
-    }
-
-    // Handle primitive types
-    const primitiveField: FormField = { ...baseField };
-
-    // Add typeInfo if conditions are met
-    if (
-        input.typeName &&
-        input.kind !== input.typeName &&
-        !input.category
-    ) {
-        primitiveField.typeInfo = {
-            orgName: "",
-            moduleName: "",
-            name: input.typeName
-        };
-    }
-
-    return primitiveField;
-}
-
-function extractNameFromId(id: string): string {
-    const parts = id.split('.').filter(part => !/^\d+$/.test(part));
-    return parts[parts.length - 1];
-}
-
-function transformInputs(inputs: IOType[]): {
-    constants: Record<string, FieldMetadata>;
-    configurables: Record<string, FieldMetadata>;
-    variables: Record<string, FieldMetadata>;
-    parameters: ParameterField[];
-    parameterFields: { [parameterName: string]: FormField[] };
-} {
-    const constants: Record<string, FieldMetadata> = {};
-    const configurables: Record<string, FieldMetadata> = {};
-    const variables: Record<string, FieldMetadata> = {};
-    const parameters: ParameterField[] = [];
-    const parameterFields: { [parameterName: string]: FormField[] } = {};
-
-    inputs.forEach((input) => {
-        // Helper function to create ParameterField
-        const createParameterField = (input: IOType): ParameterField => {
-            const name = input.id;
-            let typeName: string;
-
-            if (input.kind !== input.typeName) {
-                typeName = input.typeName;
-            } else if (!input.typeName) {
-                typeName = input.kind || "unknown";
-            } else {
-                typeName = input.typeName;
-            }
-
-            // Determine if it's an array type
-            const isArrayType = input.kind === TypeKind.Array;
-
-            // Determine the type string
-            let type: string;
-            if (isArrayType) {
-                // If it's an array, get the member type and append []
-                if (input.member) {
-                    const memberTypeName = input.member.typeName || input.member.kind || "unknown";
-                    type = `${memberTypeName}[]`;
-                } else {
-                    type = `${typeName}[]`;
-                }
-            } else {
-                type = input.kind;
-            }
-
-            return {
-                isArrayType,
-                parameterName: name,
-                parameterType: typeName,
-                type
-            };
-        };
-
-        const createFieldConfig = (input: IOType): FieldMetadata => {
-            if (!input.typeName) {
-                throw new Error("TypeName is missing");
-            }
-            return {
-                typeName: input.kind || "unknown",
-                type: input.kind || "unknown",
-                typeInstance: input.id,
-                nullable: false, // default to false TODO: Update if needed
-                optional: false // default to false TODO: Update if needed
-            };
-        };
-
-        // Handle different categories
-        if (input.category === InputCategory.Constant) {
-            constants[input.id] = createFieldConfig(input);
-            return;
-        }
-
-        if (input.category === InputCategory.Configurable) {
-            configurables[input.id] = createFieldConfig(input);
-            return;
-        }
-
-        if (input.category === InputCategory.Variable) {
-            variables[input.id] = createFieldConfig(input);
-            return;
-        }
-
-        if (input.category === InputCategory.Parameter) {
-            const parameterField = createParameterField(input);
-            parameters.push(parameterField);
-
-            const parameterName = input.id;
-            if (input.fields) {
-                parameterFields[parameterName] = input.fields.map(transformIOType);
-            } else {
-                parameterFields[parameterName] = [transformIOType(input)];
-            }
-        }
-    });
-
-    return { constants, configurables, variables, parameters, parameterFields };
-}
-
-function transformOutput(output: IOType): FormField[] {
-    if (output.fields) {
-        return output.fields.map(transformIOType);
-    }
-    return [transformIOType(output)];
-}
-
-// Utility function to check if a value is null or undefined
-function isNullOrUndefined(value: any): boolean {
-    return value === null || value === undefined;
-}
-
-// Clean IOType by removing null/undefined fields and filtering arrays
-function cleanIOType(ioType: IOType | null | undefined): IOType | null {
-    if (isNullOrUndefined(ioType)) {
-        return null;
-    }
-
-    const cleaned = ioType;
-
-    // Clean fields array - remove null/undefined elements and recursively clean
-    if (ioType.fields && Array.isArray(ioType.fields)) {
-        const cleanedFields = ioType.fields
-            .filter(field => !isNullOrUndefined(field))
-            .map(field => cleanIOType(field))
-            .filter(field => field !== null) as IOType[];
-
-        if (cleanedFields.length > 0) {
-            cleaned.fields = cleanedFields;
-        }
-    }
-
-    // Clean member recursively
-    if (ioType.member && !isNullOrUndefined(ioType.member)) {
-        const cleanedMember = cleanIOType(ioType.member);
-        if (cleanedMember !== null) {
-            cleaned.member = cleanedMember;
-        }
-    }
-
-    // Clean members array - remove null/undefined elements
-    if (ioType.members && Array.isArray(ioType.members)) {
-        const cleanedMembers = ioType.members.filter(member =>
-            !isNullOrUndefined(member) &&
-            !isNullOrUndefined(member.id) &&
-            !isNullOrUndefined(member.typeName)
-        );
-
-        if (cleanedMembers.length > 0) {
-            cleaned.members = cleanedMembers;
-        }
-    }
-
-    return cleaned;
-}
-
-// Clean ExpandedDMModel by removing null fields and cleaning nested structures
-function cleanExpandedDMModel(model: ExpandedDMModel): ExpandedDMModel {
-    const cleaned = model as ExpandedDMModel;
-
-    // Clean inputs array - remove null/undefined elements
-    if (model.inputs && Array.isArray(model.inputs)) {
-        const cleanedInputs = model.inputs
-            .filter(input => !isNullOrUndefined(input))
-            .map(input => cleanIOType(input))
-            .filter(input => input !== null) as IOType[];
-
-        cleaned.inputs = cleanedInputs;
-    }
-
-    // Clean output
-    if (model.output && !isNullOrUndefined(model.output)) {
-        const cleanedOutput = cleanIOType(model.output);
-        if (cleanedOutput !== null) {
-            cleaned.output = cleanedOutput;
-        }
-    }
-
-    // Clean subMappings array if it exists
-    if (model.subMappings && Array.isArray(model.subMappings)) {
-        const cleanedSubMappings = model.subMappings
-            .filter(subMapping => !isNullOrUndefined(subMapping))
-            .map(subMapping => cleanIOType(subMapping))
-            .filter(subMapping => subMapping !== null) as IOType[];
-
-        if (cleanedSubMappings.length > 0) {
-            cleaned.subMappings = cleanedSubMappings;
-        }
-    }
-
-    // Clean mappings array - remove null/undefined elements
-    if (model.mappings && Array.isArray(model.mappings)) {
-        const cleanedMappings = model.mappings.filter(mapping =>
-            !isNullOrUndefined(mapping) &&
-            !isNullOrUndefined(mapping.output) &&
-            !isNullOrUndefined(mapping.expression)
-        );
-
-        // Also clean inputs array within each mapping
-        cleanedMappings.forEach(mapping => {
-            if (mapping.inputs && Array.isArray(mapping.inputs)) {
-                mapping.inputs = mapping.inputs.filter(input => !isNullOrUndefined(input));
-            }
-        });
-
-        cleaned.mappings = cleanedMappings;
-    }
-
-    // Include query if it exists and is not null
-    if (model.query && !isNullOrUndefined(model.query)) {
-        cleaned.query = model.query;
-    }
-
-    return cleaned;
-}
-
-// Main function to clean the entire InlineDataMapperModelResponse
-function cleanInlineDataMapperModelResponse(
-    response: ExpandedDMModel
-): InlineDataMapperModelResponse {
-    if (!response) {
-        throw new Error("Invalid response: missing mappingsModel");
-    }
-
-    const cleanedResponse: InlineDataMapperModelResponse = {
-        mappingsModel: cleanExpandedDMModel(response as ExpandedDMModel)
-    };
-
-    return cleanedResponse;
-}
-
-function transformCodeObjectToMappings(codeObject: any, request: InlineDataMapperModelResponse): Mapping[] {
-    const mappings: Mapping[] = [];
-
-    // Get the output variable name from the request
-    const { output: mappingOutput } = request.mappingsModel as ExpandedDMModel;
-    const outputVariableName = mappingOutput.variableName || extractNameFromId(mappingOutput.id);
-
-    // Iterate through each property in codeObject
-    Object.keys(codeObject).forEach(key => {
-        const mapping: Mapping = {
-            output: `${outputVariableName}.${key}`,
-            expression: codeObject[key]
-        };
-        mappings.push(mapping);
-    });
-
-    return mappings;
-}
-
-export async function getInlineParamDefinitions(
-    inlineDataMapperResponse: InlineDataMapperModelResponse
-): Promise<ParameterDefinitions> {
-    const inputs: { [key: string]: any } = {};
-    const inputMetadata: { [key: string]: any } = {};
-    
-    const { inputs: mappingInputs, output: mappingOutput } = inlineDataMapperResponse.mappingsModel as ExpandedDMModel;
-    const transformedInputs = transformInputs(mappingInputs);
-    const transformedOutputs = transformOutput(mappingOutput);
-
-    for (const parameter of transformedInputs.parameters) {
-        const inputDefinition = navigateTypeInfo(transformedInputs.parameterFields[parameter.parameterName], false);
-        
-        inputs[parameter.parameterName] = inputDefinition.recordFields;
-        inputMetadata[parameter.parameterName] = {
-            "isArrayType": parameter.isArrayType,
-            "parameterName": parameter.parameterName,
-            "parameterType": parameter.parameterType,
-            "type": parameter.type,
-            "fields": inputDefinition.recordFieldsMetadata
-        };
-    }
-
-    const outputDefinition = navigateTypeInfo(transformedOutputs, false);
-    const output = { ...outputDefinition.recordFields };
-    const outputMetadata = { ...outputDefinition.recordFieldsMetadata };
-
-    return {
-        parameterMetadata: {
-            inputs,
-            output,
-            inputMetadata,
-            outputMetadata,
-            constants: transformedInputs.constants,
-            configurables: transformedInputs.configurables,
-            variables: transformedInputs.variables
-        },
-        errorStatus: false
-    };
-}
-
-async function sendInlineDatamapperRequest(inlineDataMapperResponse: InlineDataMapperModelResponse): Promise<DatamapperResponse> {
-    const response: DatamapperResponse = await generateInlineAutoMappings(inlineDataMapperResponse);
-    return response;
-}
-
-async function getInlineDatamapperCode(inlineDataMapperResponse: InlineDataMapperModelResponse, parameterDefinitions: ParameterMetadata): Promise<Record<string, string>> {
-    let nestedKeyArray: string[] = [];
-    try {
-        let response: DatamapperResponse = await sendInlineDatamapperRequest(inlineDataMapperResponse);
-        let intermediateMapping = response.mappings;
-        let finalCode = await generateBallerinaCode(intermediateMapping, parameterDefinitions, "", nestedKeyArray);
-        return finalCode;
-    } catch (error) {
-        console.error(error);
-        throw error; 
-    }
-}
-
-export async function processInlineMappings(
-    request: ExpandedDMModel,
-    file?: Attachment
-): Promise<MappingElement> {
-    let inlineDataMapperResponse = cleanInlineDataMapperModelResponse(request);
-    const result = await getInlineParamDefinitions(inlineDataMapperResponse);
-    const parameterDefinitions = (result as ParameterDefinitions).parameterMetadata;
-    
-    if (file) {
-        const mappedResult = await mappingFileInlineDataMapperModel(file, inlineDataMapperResponse);
-        inlineDataMapperResponse = mappedResult as InlineDataMapperModelResponse;
-    }
-
-    const codeObject = await getInlineDatamapperCode(inlineDataMapperResponse, parameterDefinitions);
-    const mappings: Mapping[] = transformCodeObjectToMappings(codeObject, inlineDataMapperResponse);
-    return { mappings };
-}
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/repair-utils.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/repair-utils.ts
index 9a1a9c38570..4dd24747114 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/repair-utils.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/repair-utils.ts
@@ -21,7 +21,7 @@ import { ExtendedLangClient } from "../../core";
 import { Uri, workspace } from "vscode";
 import { TextDocumentEdit } from "vscode-languageserver-types";
 import { fileURLToPath } from "url";
-import { modifyFileContent } from "../../utils/modification";
+import { writeBallerinaFileDidOpenTemp } from "../../utils/modification";
 
 export async function attemptRepairProject(langClient: ExtendedLangClient, tempDir: string): Promise<Diagnostics[]> {
     // check project diagnostics
@@ -166,7 +166,7 @@ export async function addMissingImports(diagnosticsResult: Diagnostics[], langCl
         // Update file content
         const { source } = syntaxTree as SyntaxTree;
         const absolutePath = fileURLToPath(fielUri);
-        await modifyFileContent({ filePath: absolutePath, content: source, updateViewFlag: false });
+        writeBallerinaFileDidOpenTemp(absolutePath, source);
         if (astModifications.length > 0) {
             projectModified = true;
         }
@@ -214,7 +214,7 @@ export async function removeUnusedImports(diagnosticsResult: Diagnostics[], lang
             // Update file content
             const { source } = syntaxTree as SyntaxTree;
             const absolutePath = fileURLToPath(fielUri);
-            await modifyFileContent({ filePath: absolutePath, content: source, updateViewFlag: false });
+            writeBallerinaFileDidOpenTemp(absolutePath, source);
             projectModified = true;
     }
     return projectModified;
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/rpc-handler.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/rpc-handler.ts
index 132045a020a..8404ed51eb1 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/rpc-handler.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/rpc-handler.ts
@@ -21,6 +21,9 @@ import {
     abortAIGeneration,
     abortTestGeneration,
     addChatSummary,
+    addCodeSegmentToWorkspace,
+    addFilesToProject,
+    AddFilesToProjectRequest,
     addInlineCodeSegmentToWorkspace,
     addToProject,
     AddToProjectRequest,
@@ -29,19 +32,23 @@ import {
     checkSyntaxError,
     clearInitialPrompt,
     CodeSegment,
+    createTempFileAndGenerateMetadata,
+    CreateTempFileRequest,
     createTestDirecoryIfNotExists,
+    DatamapperModelContext,
+    DataMapperModelResponse,
     deleteFromProject,
     DeleteFromProjectRequest,
     DeveloperDocument,
+    DocGenerationRequest,
     fetchData,
     FetchDataRequest,
     generateCode,
     GenerateCodeRequest,
+    generateDataMapperModel,
     generateFunctionTests,
     generateHealthcareCode,
     generateMappings,
-    GenerateMappingsFromRecordRequest,
-    GenerateMappingsRequest,
     generateOpenAPI,
     GenerateOpenAPIRequest,
     generateTestPlan,
@@ -57,10 +64,9 @@ import {
     getFromDocumentation,
     getFromFile,
     GetFromFileRequest,
+    getGeneratedDocumentation,
     getGeneratedTests,
     getLoginMethod,
-    getMappingsFromModel,
-    getMappingsFromRecord,
     getModuleDirectory,
     GetModuleDirParams,
     getProjectUuid,
@@ -81,7 +87,7 @@ import {
     MetadataWithAttachments,
     notifyAIMappings,
     NotifyAIMappingsRequest,
-    openInlineMappingChatWindow,
+    openAIMappingChatWindow,
     postProcess,
     PostProcessRequest,
     ProjectSource,
@@ -116,18 +122,21 @@ export function registerAiPanelRpcHandlers(messenger: Messenger) {
     messenger.onRequest(getDefaultPrompt, () => rpcManger.getDefaultPrompt());
     messenger.onRequest(getAIMachineSnapshot, () => rpcManger.getAIMachineSnapshot());
     messenger.onRequest(fetchData, (args: FetchDataRequest) => rpcManger.fetchData(args));
-    messenger.onNotification(addToProject, (args: AddToProjectRequest) => rpcManger.addToProject(args));
+    messenger.onRequest(addToProject, (args: AddToProjectRequest) => rpcManger.addToProject(args));
     messenger.onRequest(getFromFile, (args: GetFromFileRequest) => rpcManger.getFromFile(args));
     messenger.onRequest(getFileExists, (args: GetFromFileRequest) => rpcManger.getFileExists(args));
     messenger.onNotification(deleteFromProject, (args: DeleteFromProjectRequest) => rpcManger.deleteFromProject(args));
-    messenger.onRequest(generateMappings, (args: GenerateMappingsRequest) => rpcManger.generateMappings(args));
     messenger.onRequest(notifyAIMappings, (args: NotifyAIMappingsRequest) => rpcManger.notifyAIMappings(args));
     messenger.onRequest(stopAIMappings, () => rpcManger.stopAIMappings());
     messenger.onRequest(getShadowDiagnostics, (args: ProjectSource) => rpcManger.getShadowDiagnostics(args));
     messenger.onRequest(checkSyntaxError, (args: ProjectSource) => rpcManger.checkSyntaxError(args));
     messenger.onNotification(clearInitialPrompt, () => rpcManger.clearInitialPrompt());
-    messenger.onNotification(openInlineMappingChatWindow, () => rpcManger.openInlineMappingChatWindow());
-    messenger.onRequest(getMappingsFromModel, (args: MetadataWithAttachments) => rpcManger.getMappingsFromModel(args));
+    messenger.onNotification(openAIMappingChatWindow, (args: DataMapperModelResponse) => rpcManger.openAIMappingChatWindow(args));
+    messenger.onRequest(generateDataMapperModel, (args: DatamapperModelContext) => rpcManger.generateDataMapperModel(args));
+    messenger.onRequest(getTypesFromRecord, (args: GenerateTypesFromRecordRequest) => rpcManger.getTypesFromRecord(args));
+    messenger.onRequest(createTempFileAndGenerateMetadata, (args: CreateTempFileRequest) => rpcManger.createTempFileAndGenerateMetadata(args));
+    messenger.onRequest(generateMappings, (args: MetadataWithAttachments) => rpcManger.generateMappings(args));
+    messenger.onRequest(addCodeSegmentToWorkspace, (args: CodeSegment) => rpcManger.addCodeSegmentToWorkspace(args));
     messenger.onNotification(addInlineCodeSegmentToWorkspace, (args: CodeSegment) => rpcManger.addInlineCodeSegmentToWorkspace(args));
     messenger.onRequest(getGeneratedTests, (args: TestGenerationRequest) => rpcManger.getGeneratedTests(args));
     messenger.onRequest(getTestDiagnostics, (args: TestGenerationResponse) => rpcManger.getTestDiagnostics(args));
@@ -136,8 +145,6 @@ export function registerAiPanelRpcHandlers(messenger: Messenger) {
     messenger.onRequest(getServiceNames, () => rpcManger.getServiceNames());
     messenger.onRequest(getResourceMethodAndPaths, () => rpcManger.getResourceMethodAndPaths());
     messenger.onNotification(abortTestGeneration, () => rpcManger.abortTestGeneration());
-    messenger.onRequest(getMappingsFromRecord, (args: GenerateMappingsFromRecordRequest) => rpcManger.getMappingsFromRecord(args));
-    messenger.onRequest(getTypesFromRecord, (args: GenerateTypesFromRecordRequest) => rpcManger.getTypesFromRecord(args));
     messenger.onNotification(applyDoOnFailBlocks, () => rpcManger.applyDoOnFailBlocks());
     messenger.onRequest(postProcess, (args: PostProcessRequest) => rpcManger.postProcess(args));
     messenger.onRequest(getActiveFile, () => rpcManger.getActiveFile());
@@ -167,4 +174,6 @@ export function registerAiPanelRpcHandlers(messenger: Messenger) {
     messenger.onNotification(generateFunctionTests, (args: TestGeneratorIntermediaryState) => rpcManger.generateFunctionTests(args));
     messenger.onNotification(generateHealthcareCode, (args: GenerateCodeRequest) => rpcManger.generateHealthcareCode(args));
     messenger.onNotification(abortAIGeneration, () => rpcManger.abortAIGeneration());
+    messenger.onNotification(getGeneratedDocumentation, (args: DocGenerationRequest) => rpcManger.getGeneratedDocumentation(args));
+    messenger.onRequest(addFilesToProject, (args: AddFilesToProjectRequest) => rpcManger.addFilesToProject(args));
 }
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/rpc-manager.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/rpc-manager.ts
index 22e657304e9..ace851f24d5 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/rpc-manager.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/rpc-manager.ts
@@ -22,31 +22,35 @@ import {
     AIMachineSnapshot,
     AIPanelAPI,
     AIPanelPrompt,
+    AddFilesToProjectRequest,
     AddToProjectRequest,
+    AllDataMapperSourceRequest,
     BIModuleNodesRequest,
     BISourceCodeResponse,
     CodeSegment,
     Command,
+    CreateTempFileRequest,
+    DMModel,
+    DataMapperModelResponse,
+    DatamapperModelContext,
     DeleteFromProjectRequest,
     DeveloperDocument,
     DiagnosticEntry,
     Diagnostics,
+    DocGenerationRequest,
     ExpandedDMModel,
+    ExtendedDataMapperMetadata,
     FetchDataRequest,
     FetchDataResponse,
     GenerateCodeRequest,
-    GenerateMappingFromRecordResponse,
-    GenerateMappingsFromRecordRequest,
-    GenerateMappingsRequest,
     GenerateMappingsResponse,
     GenerateOpenAPIRequest,
     GenerateTypesFromRecordRequest,
     GenerateTypesFromRecordResponse,
     GetFromFileRequest,
     GetModuleDirParams,
-    InlineAllDataMapperSourceRequest,
-    InlineDataMapperModelResponse,
     LLMDiagnostics,
+    LinePosition,
     LoginMethod,
     MappingElement,
     MetadataWithAttachments,
@@ -72,7 +76,6 @@ import {
     TestPlanGenerationRequest,
     TextEdit
 } from "@wso2/ballerina-core";
-import { STKindChecker, STNode } from "@wso2/syntax-tree";
 import * as crypto from 'crypto';
 import * as fs from 'fs';
 import * as os from 'os';
@@ -80,15 +83,17 @@ import path from "path";
 import { parse } from 'toml';
 import { Uri, commands, window, workspace } from 'vscode';
 
+import { FunctionDefinition, ModulePart, STKindChecker, STNode } from "@wso2/syntax-tree";
 import { isNumber } from "lodash";
 import { URI } from "vscode-uri";
+import { NOT_SUPPORTED } from "../../../src/core/extended-language-client";
 import { fetchWithAuth } from "../../../src/features/ai/service/connection";
 import { generateOpenAPISpec } from "../../../src/features/ai/service/openapi/openapi";
 import { AIStateMachine } from "../../../src/views/ai-panel/aiMachine";
 import { extension } from "../../BalExtensionContext";
-import { NOT_SUPPORTED } from "../../core";
-import { generateDataMapping, generateTypeCreation } from "../../features/ai/dataMapping";
+import { createTempDataMappingFile, generateTypeCreation } from "../../features/ai/dataMapping";
 import { generateCode, triggerGeneratedCodeRepair } from "../../features/ai/service/code/code";
+import { generateDocumentationForService } from "../../features/ai/service/documentation/doc_generator";
 import { generateHealthcareCode } from "../../features/ai/service/healthcare/healthcare";
 import { selectRequiredFunctions } from "../../features/ai/service/libs/funcs";
 import { GenerationType, getSelectedLibraries } from "../../features/ai/service/libs/libs";
@@ -100,10 +105,9 @@ import { OLD_BACKEND_URL, closeAllBallerinaFiles } from "../../features/ai/utils
 import { getLLMDiagnosticArrayAsString, handleChatSummaryFailure } from "../../features/natural-programming/utils";
 import { StateMachine, updateView } from "../../stateMachine";
 import { getAccessToken, getLoginMethod, getRefreshedAccessToken, loginGithubCopilot } from "../../utils/ai/auth";
-import { modifyFileContent, writeBallerinaFileDidOpen } from "../../utils/modification";
+import { modifyFileContent, writeBallerinaFileDidOpen, writeBallerinaFileDidOpenTemp } from "../../utils/modification";
 import { updateSourceCode } from "../../utils/source-utils";
-import { PARSING_ERROR, UNKNOWN_ERROR } from "../../views/ai-panel/errorCodes";
-import { refreshDataMapper, updateAndRefreshDataMapper } from "../inline-data-mapper/utils";
+import { expandDMModel, refreshDataMapper, updateAndRefreshDataMapper } from "../data-mapper/utils";
 import {
     DEVELOPMENT_DOCUMENT,
     NATURAL_PROGRAMMING_DIR_NAME, REQUIREMENT_DOC_PREFIX,
@@ -111,9 +115,8 @@ import {
     REQUIREMENT_TEXT_DOCUMENT,
     REQ_KEY, TEST_DIR_NAME
 } from "./constants";
-import { processInlineMappings } from "./inline-utils";
 import { attemptRepairProject, checkProjectDiagnostics } from "./repair-utils";
-import { AIPanelAbortController, cleanDiagnosticMessages, handleStop, isErrorCode, requirementsSpecification, searchDocumentation } from "./utils";
+import { AIPanelAbortController, addToIntegration, cleanDiagnosticMessages, handleStop, isErrorCode, processMappings, requirementsSpecification, searchDocumentation } from "./utils";
 import { fetchData } from "./utils/fetch-data-utils";
 
 export class AiPanelRpcManager implements AIPanelAPI {
@@ -198,7 +201,7 @@ export class AiPanelRpcManager implements AIPanelAPI {
         };
     }
 
-    async addToProject(req: AddToProjectRequest): Promise<void> {
+    async addToProject(req: AddToProjectRequest): Promise<boolean> {
 
         const workspaceFolders = workspace.workspaceFolders;
         if (!workspaceFolders) {
@@ -224,6 +227,7 @@ export class AiPanelRpcManager implements AIPanelAPI {
         updateView();
         const datamapperMetadata = StateMachine.context().dataMapperMetadata;
         await refreshDataMapper(balFilePath, datamapperMetadata.codeData, datamapperMetadata.name);
+        return true;
     }
 
     async getFromFile(req: GetFromFileRequest): Promise<string> {
@@ -291,57 +295,6 @@ export class AiPanelRpcManager implements AIPanelAPI {
         return false;
     }
 
-    async generateMappings(params: GenerateMappingsRequest): Promise<GenerateMappingsResponse> {
-        let { filePath, position } = params;
-
-        const fileUri = Uri.file(filePath).toString();
-
-        const fnSTByRange = await StateMachine.langClient().getSTByRange(
-            {
-                lineRange: {
-                    start: {
-                        line: position.startLine,
-                        character: position.startColumn
-                    },
-                    end: {
-                        line: position.endLine,
-                        character: position.endColumn
-                    }
-                },
-                documentIdentifier: {
-                    uri: fileUri
-                }
-            }
-        );
-
-        if (fnSTByRange === NOT_SUPPORTED) {
-            return { error: UNKNOWN_ERROR };
-        }
-
-        const {
-            parseSuccess: fnSTByRangeParseSuccess,
-            syntaxTree: fnSTByRangeSyntaxTree,
-            source: oldSource
-        } = fnSTByRange as SyntaxTree;
-        const fnSt = fnSTByRangeSyntaxTree as STNode;
-
-        if (!fnSTByRangeParseSuccess || !STKindChecker.isFunctionDefinition(fnSt)) {
-            return { error: PARSING_ERROR };
-        }
-
-        const functionName = fnSt.functionName?.value || "";
-
-        commands.executeCommand("ballerina.close.ai.panel");
-        commands.executeCommand("ballerina.open.ai.panel", {
-            type: 'command-template',
-            command: Command.DataMap,
-            templateId: TemplateId.MappingsForFunction,
-            params: {
-                functionName: functionName
-            }
-        });
-    }
-
     async notifyAIMappings(params: NotifyAIMappingsRequest): Promise<boolean> {
         const { newFnPosition, prevFnSource, filePath } = params;
         const fileUri = Uri.file(filePath).toString();
@@ -362,7 +315,7 @@ export class AiPanelRpcManager implements AIPanelAPI {
             });
 
             const { source } = res as SyntaxTree;
-            modifyFileContent({ filePath, content: source });
+            await modifyFileContent({ filePath, content: source });
             updateView();
         }
 
@@ -503,14 +456,8 @@ export class AiPanelRpcManager implements AIPanelAPI {
         AIPanelAbortController.getInstance().abort();
     }
 
-    async getMappingsFromRecord(params: GenerateMappingsFromRecordRequest): Promise<GenerateMappingFromRecordResponse> {
-        const projectRoot = await getBallerinaProjectRoot();
-        return await generateDataMapping(projectRoot, params);
-    }
-
     async getTypesFromRecord(params: GenerateTypesFromRecordRequest): Promise<GenerateTypesFromRecordResponse> {
-        const projectRoot = await getBallerinaProjectRoot();
-        return await generateTypeCreation(projectRoot, params);
+        return await generateTypeCreation(params);
     }
 
     async postProcess(req: PostProcessRequest): Promise<PostProcessResponse> {
@@ -727,7 +674,7 @@ export class AiPanelRpcManager implements AIPanelAPI {
     async getContentFromFile(content: GetFromFileRequest): Promise<string> {
         return new Promise(async (resolve) => {
             const projectFsPath = URI.parse(content.filePath).fsPath;
-            const fileContent = fs.promises.readFile(projectFsPath, 'utf-8');
+            const fileContent = await fs.promises.readFile(projectFsPath, 'utf-8');
             resolve(fileContent);
         });
     }
@@ -798,59 +745,242 @@ export class AiPanelRpcManager implements AIPanelAPI {
     async abortAIGeneration(): Promise<void> {
         AIPanelAbortController.getInstance().abort();
     }
-    
-    async openInlineMappingChatWindow(): Promise<void> {
+
+    async createTempFileAndGenerateMetadata(params: CreateTempFileRequest): Promise<ExtendedDataMapperMetadata> {
+        const projectRoot = await getBallerinaProjectRoot();
+        const filePath = await createTempDataMappingFile(
+            projectRoot,
+            params.inputs,
+            params.output,
+            params.functionName,
+            params.inputNames,
+            params.imports
+        );
+
+        // Get the complete syntax tree
+        const fileUri = Uri.file(filePath).toString();
+        const st = (await StateMachine.langClient().getSyntaxTree({
+            documentIdentifier: {
+                uri: fileUri,
+            },
+        })) as SyntaxTree;
+
+        let funcDefinitionNode: FunctionDefinition = null;
+        const modulePart = st.syntaxTree as ModulePart;
+
+        // Find the function definition by name
+        modulePart.members.forEach((member) => {
+            if (STKindChecker.isFunctionDefinition(member)) {
+                const funcDef = member as FunctionDefinition;
+                if (funcDef.functionName?.value === params.functionName) {
+                    funcDefinitionNode = funcDef;
+                }
+            }
+        });
+
+        if (!funcDefinitionNode) {
+            throw new Error(`Function ${params.functionName} not found in the generated file`);
+        }
+
+        // Create dataMapperMetadata with the found positions
+        const dataMapperMetadata = {
+            name: params.functionName,
+            codeData: {
+                lineRange: {
+                    fileName: filePath,
+                    startLine: {
+                        line: funcDefinitionNode.position.startLine,
+                        offset: funcDefinitionNode.position.startColumn,
+                    },
+                    endLine: {
+                        line: funcDefinitionNode.position.endLine,
+                        offset: funcDefinitionNode.position.endColumn,
+                    },
+                },
+            },
+        };
+
+        const dataMapperModel = await this.generateDataMapperModel({
+            documentUri: filePath,
+            identifier: params.functionName,
+            dataMapperMetadata: dataMapperMetadata
+        });
+
+        return {
+            mappingsModel: dataMapperModel.mappingsModel as ExpandedDMModel,
+            name: params.functionName,
+            codeData: dataMapperMetadata.codeData
+        };
+    }
+
+    async generateDataMapperModel(params: DatamapperModelContext): Promise<DataMapperModelResponse> {
         try {
-            let filePath = StateMachine.context().documentUri;
-            const datamapperMetadata = StateMachine.context().dataMapperMetadata;
-            const dataMapperModel = await StateMachine
+            let filePath: string;
+            let identifier: string;
+            let dataMapperMetadata: any;
+
+            if (params && params.documentUri && params.identifier) {
+                filePath = params.documentUri;
+                identifier = params.identifier;
+                dataMapperMetadata = params.dataMapperMetadata;
+            } else {
+                const context = StateMachine.context();
+                filePath = context.documentUri;
+                identifier = context.identifier || context.dataMapperMetadata.name;
+                dataMapperMetadata = context.dataMapperMetadata;
+            }
+
+            let position: LinePosition = {
+                line: dataMapperMetadata.codeData.lineRange.startLine.line,
+                offset: dataMapperMetadata.codeData.lineRange.startLine.offset
+            };
+
+            if (dataMapperMetadata.codeData.node !== "VARIABLE") {
+                const fileUri = Uri.file(filePath).toString();
+                const fnSTByRange = await StateMachine.langClient().getSTByRange({
+                    lineRange: {
+                        start: {
+                            line: dataMapperMetadata.codeData.lineRange.startLine.line,
+                            character: dataMapperMetadata.codeData.lineRange.startLine.offset
+                        },
+                        end: {
+                            line: dataMapperMetadata.codeData.lineRange.endLine.line,
+                            character: dataMapperMetadata.codeData.lineRange.endLine.offset
+                        }
+                    },
+                    documentIdentifier: { uri: fileUri }
+                });
+
+                if (fnSTByRange === NOT_SUPPORTED) {
+                    throw new Error("Syntax tree retrieval not supported");
+                }
+
+                const fnSt = (fnSTByRange as SyntaxTree).syntaxTree as STNode;
+
+                if (STKindChecker.isFunctionDefinition(fnSt) &&
+                    STKindChecker.isExpressionFunctionBody(fnSt.functionBody)) {
+                    position = {
+                        line: fnSt.functionBody.expression.position.startLine,
+                        offset: fnSt.functionBody.expression.position.startColumn
+                    };
+                }
+            }
+
+            let dataMapperModel = await StateMachine
                 .langClient()
-                .getInlineDataMapperMappings({
+                .getDataMapperMappings({
                     filePath,
-                    codedata: datamapperMetadata.codeData,
-                    position: {
-                        line: datamapperMetadata.codeData.lineRange.startLine.line,
-                        offset: datamapperMetadata.codeData.lineRange.startLine.offset
+                    codedata: dataMapperMetadata.codeData,
+                    targetField: identifier,
+                    position: position
+                }) as DataMapperModelResponse;
+
+            return {
+                mappingsModel: expandDMModel(
+                    dataMapperModel.mappingsModel as DMModel,
+                    identifier
+                )
+            };
+        } catch (error) {
+            console.error("Failed to generate data mapper model:", error);
+            throw error;
+        }
+    }
+
+    async addCodeSegmentToWorkspace(params: CodeSegment): Promise<boolean> {
+        try {
+            let filePath = params.filePath && params.filePath.trim() !== ''
+                ? params.filePath
+                : StateMachine.context().documentUri;
+            const datamapperMetadata = params.metadata
+                ? params.metadata
+                : StateMachine.context().dataMapperMetadata;
+
+            let allTextEdits: { [key: string]: TextEdit[] };
+
+            if (params.textEdit && params.textEdit.textEdits) {
+                allTextEdits = params.textEdit.textEdits;
+            } else {
+                const textEdit: TextEdit = {
+                    newText: params.segmentText,
+                    range: {
+                        start: {
+                            line: datamapperMetadata.codeData.lineRange.startLine.line,
+                            character: datamapperMetadata.codeData.lineRange.startLine.offset
+                        },
+                        end: {
+                            line: datamapperMetadata.codeData.lineRange.endLine.line,
+                            character: datamapperMetadata.codeData.lineRange.endLine.offset
+                        }
                     }
-                }) as InlineDataMapperModelResponse;
+                };
+                allTextEdits = {
+                    [filePath]: [textEdit]
+                };
+            }
+            await updateSourceCode({ textEdits: allTextEdits });
+            return true;
+        } catch (error) {
+            console.error(">>> Failed to add code segment to the workspace", error);
+            throw error;
+        }
+    }
+
+    async openAIMappingChatWindow(params: DataMapperModelResponse): Promise<void> {
+        try {
+            const context = StateMachine.context();
+            const { identifier, dataMapperMetadata } = context;
+
             commands.executeCommand("ballerina.close.ai.panel");
             commands.executeCommand("ballerina.open.ai.panel", {
                 type: 'command-template',
                 command: Command.DataMap,
-                templateId: TemplateId.InlineMappings,
+                templateId: identifier ? TemplateId.MappingsForFunction : TemplateId.InlineMappings,
+                ...(identifier && { params: { functionName: identifier } }),
                 metadata: {
-                    ...datamapperMetadata,
-                    mappingsModel: dataMapperModel.mappingsModel as ExpandedDMModel
+                    ...dataMapperMetadata,
+                    mappingsModel: params.mappingsModel as ExpandedDMModel
                 }
             });
         } catch (error) {
-            console.error("Failed to open AI chat window for inline mapping:", error);
+            console.error("Failed to open AI chat window for mapping:", error);
             throw error;
         }
     }
 
-    async getMappingsFromModel(params: MetadataWithAttachments): Promise<InlineAllDataMapperSourceRequest> {
-        let filePath = StateMachine.context().documentUri;
-        const file = params.attachment && params.attachment.length > 0
-            ? params.attachment[0]
-            : undefined;
-        const mappingElement = await processInlineMappings(params.metadata.mappingsModel as ExpandedDMModel, file);
-        const allMappingsRequest = {
-            filePath,
-            codedata: params.metadata.codeData,
-            varName: params.metadata.name,
-            position: {
-                line: params.metadata.codeData.lineRange.startLine.line,
-                offset: params.metadata.codeData.lineRange.startLine.offset
-            },
-            mappings: (mappingElement as MappingElement).mappings
-        };
-        return allMappingsRequest;
+    async generateMappings(params: MetadataWithAttachments): Promise<AllDataMapperSourceRequest> {
+        try {
+            const filePath = params.useTemporaryFile
+                ? params.metadata.codeData.lineRange.fileName
+                : StateMachine.context().documentUri;
+
+            const file = params.attachments && params.attachments.length > 0
+                ? params.attachments[0]
+                : undefined;
+
+            const mappingElement = await processMappings(params.metadata.mappingsModel as ExpandedDMModel, file);
+
+            const allMappingsRequest: AllDataMapperSourceRequest = {
+                filePath,
+                codedata: params.metadata.codeData,
+                varName: params.metadata.name,
+                position: {
+                    line: params.metadata.codeData.lineRange.startLine.line,
+                    offset: params.metadata.codeData.lineRange.startLine.offset
+                },
+                mappings: (mappingElement as MappingElement).mappings
+            };
+
+            return allMappingsRequest;
+        } catch (error) {
+            console.error("Failed to generate mappings:", error);
+            throw error;
+        }
     }
 
     async addInlineCodeSegmentToWorkspace(params: CodeSegment): Promise<void> {
         try {
-            let filePath = StateMachine.context().documentUri;
+            let filePath =  StateMachine.context().documentUri;
             const datamapperMetadata = StateMachine.context().dataMapperMetadata;
             const textEdit: TextEdit = {
                 newText: params.segmentText,
@@ -868,12 +998,45 @@ export class AiPanelRpcManager implements AIPanelAPI {
             const allTextEdits: { [key: string]: TextEdit[] } = {
                 [filePath]: [textEdit]
             };
-            await updateAndRefreshDataMapper(allTextEdits, filePath, datamapperMetadata.codeData, datamapperMetadata.name);
+
+            await updateAndRefreshDataMapper(
+                allTextEdits,
+                filePath,
+                datamapperMetadata.codeData,
+                datamapperMetadata.name,
+                datamapperMetadata.name
+            );
         } catch (error) {
             console.error(">>> Failed to add inline code segment to the workspace", error);
             throw error;
         }
     }
+
+    async getGeneratedDocumentation(params: DocGenerationRequest): Promise<void> {
+        await generateDocumentationForService(params);
+    }
+
+    async addFilesToProject(params: AddFilesToProjectRequest): Promise<boolean> {
+        try {
+            const workspaceFolders = workspace.workspaceFolders;
+            if (!workspaceFolders) {
+                throw new Error("No workspaces found.");
+            }
+
+            const workspaceFolderPath = workspaceFolders[0].uri.fsPath;
+
+            const ballerinaProjectFile = path.join(workspaceFolderPath, "Ballerina.toml");
+            if (!fs.existsSync(ballerinaProjectFile)) {
+                throw new Error("Not a Ballerina project.");
+            }
+            await addToIntegration(workspaceFolderPath, params.fileChanges);
+            updateView();
+            return true;
+        } catch (error) {
+            console.error(">>> Failed to add files to the project", error);
+            return false; //silently fail for timeout issues.
+        }
+    }
 }
 
 function getModifiedAssistantResponse(originalAssistantResponse: string, tempDir: string, project: ProjectSource): string {
@@ -932,7 +1095,7 @@ async function setupProjectEnvironment(project: ProjectSource): Promise<{ langCl
         // Update lastUpdatedBalFile if it's a .bal file
         if (sourceFile.filePath.endsWith('.bal')) {
             const tempFilePath = path.join(tempDir, sourceFile.filePath);
-            writeBallerinaFileDidOpen(tempFilePath, sourceFile.content);
+            writeBallerinaFileDidOpenTemp(tempFilePath, sourceFile.content);
         }
     }
 
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/utils.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/utils.ts
index 0b9e82a1d19..c9f2e12f0f7 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/utils.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/ai-panel/utils.ts
@@ -16,32 +16,28 @@
  * under the License.
  */
 
-import { ArrayTypeDesc, FunctionDefinition, ModulePart, QualifiedNameReference, RequiredParam, STKindChecker } from "@wso2/syntax-tree";
-import { FormField, STModification, SyntaxTree, Attachment, AttachmentStatus, keywords, DiagnosticEntry, InlineDataMapperModelResponse } from "@wso2/ballerina-core";
-import { window } from 'vscode';
-
-import { StateMachine } from "../../stateMachine";
-import {
-    INVALID_PARAMETER_TYPE,
-    INVALID_PARAMETER_TYPE_MULTIPLE_ARRAY,
-    INVALID_RECORD_UNION_TYPE
-} from "../../views/ai-panel/errorCodes";
+import { FunctionDefinition, ModulePart, STKindChecker } from "@wso2/syntax-tree";
+import { FormField, Attachment, AttachmentStatus, keywords, DiagnosticEntry, DataMapperModelResponse, ExpandedDMModel, MappingElement, Mapping, IOType, InputCategory, TypeKind, FileChanges } from "@wso2/ballerina-core";
+import { Position, Range, Uri, window, workspace, WorkspaceEdit } from 'vscode';
+
 import path from "path";
 import * as fs from 'fs';
 import { BACKEND_URL } from "../../features/ai/utils";
 import { AIChatError } from "./utils/errors";
-import { generateAutoMappings } from "../../../src/features/ai/service/datamapper/datamapper";
-import { DatamapperResponse, Payload } from "../../../src/features/ai/service/datamapper/types";
+import { DatamapperResponse } from "../../../src/features/ai/service/datamapper/types";
 import { DataMapperRequest, DataMapperResponse, FileData, processDataMapperInput } from "../../../src/features/ai/service/datamapper/context_api";
 import { getAskResponse } from "../../../src/features/ai/service/ask/ask";
 import { ArrayEnumUnionType, ArrayRecordType, MetadataType, NUMERIC_AND_BOOLEAN_TYPES, Operation, PrimitiveType, RecordType, UnionEnumIntersectionType } from "./constants";
-import { FieldMetadata, InputMetadata, IntermediateMapping, MappingData, MappingFileRecord, NestedFieldDescriptor, OutputMetadata, ParameterDefinitions, ParameterField, ParameterMetadata, ProcessCombinedKeyResult, ProcessParentKeyResult, RecordDefinitonObject } from "./types";
+import { FieldMetadata, IntermediateMapping, MappingData, MappingFileRecord, ParameterDefinitions, ParameterField, ParameterMetadata, ProcessCombinedKeyResult, ProcessParentKeyResult, RecordDefinitonObject } from "./types";
+import { generateAutoMappings } from "../../../src/features/ai/service/datamapper/datamapper";
+import { ArtifactNotificationHandler, ArtifactsUpdated } from "../../utils/project-artifacts-handler";
+import { writeFileSync } from "fs";
 
-const BACKEND_BASE_URL = BACKEND_URL.replace(/\/v2\.0$/, "");
+// const BACKEND_BASE_URL = BACKEND_URL.replace(/\/v2\.0$/, "");
 //TODO: Temp workaround as custom domain seem to block file uploads
 const CONTEXT_UPLOAD_URL_V1 = "https://e95488c8-8511-4882-967f-ec3ae2a0f86f-prod.e1-us-east-azure.choreoapis.dev/ballerina-copilot/context-upload-api/v1.0";
 // const CONTEXT_UPLOAD_URL_V1 = BACKEND_BASE_URL + "/context-api/v1.0";
-const ASK_API_URL_V1 = BACKEND_BASE_URL + "/ask-api/v1.0";
+// const ASK_API_URL_V1 = BACKEND_BASE_URL + "/ask-api/v1.0";
 
 export const REQUEST_TIMEOUT = 2000000;
 
@@ -97,282 +93,9 @@ const isArrayEnumUnion = (type: string): boolean => {
     return Object.values(ArrayEnumUnionType).includes(type as ArrayEnumUnionType);
 };
 
-export async function getParamDefinitions(
-    fnSt: FunctionDefinition,
-    fileUri: string
-): Promise<ParameterDefinitions> {
-    try {
-        const inputs: NestedFieldDescriptor = {};
-        const inputMetadata: InputMetadata = {};
-        let output: NestedFieldDescriptor = {};
-        let outputMetadata: OutputMetadata = {};
-        let hasArrayParams = false;
-        let arrayParams = 0;
-        let isErrorExists = false;
-
-        for (const parameter of fnSt.functionSignature.parameters) {
-            if (!STKindChecker.isRequiredParam(parameter)) {
-                continue;
-            }
-
-            const param = parameter as RequiredParam;
-            let paramName = param.paramName.value;
-            let paramType = "";
-
-            if (STKindChecker.isArrayTypeDesc(param.typeName) && STKindChecker.isArrayTypeDesc(fnSt.functionSignature.returnTypeDesc.type)) {
-                paramName = `${paramName}Item`; 
-                arrayParams++;
-            }
-
-            if (param.typeData.typeSymbol.typeKind === "array") {
-                paramType = param.typeName.source;
-            } else if (param.typeData.typeSymbol.typeKind === "typeReference") {
-                paramType = param.typeData.typeSymbol.name;
-            } else {
-                paramType = param.typeName.source;
-            }
-
-            const position = STKindChecker.isQualifiedNameReference(param.typeName)
-                ? {
-                    line: (param.typeName as QualifiedNameReference).identifier.position.startLine,
-                    offset: (param.typeName as QualifiedNameReference).identifier.position.startColumn
-                }
-                : STKindChecker.isArrayTypeDesc(param.typeName) && STKindChecker.isQualifiedNameReference(
-                    (param.typeName as ArrayTypeDesc).memberTypeDesc)
-                    ? {
-                        line: ((param.typeName as ArrayTypeDesc).memberTypeDesc as QualifiedNameReference).identifier.position.startLine,
-                        offset: ((param.typeName as ArrayTypeDesc).memberTypeDesc as QualifiedNameReference).identifier.position.startColumn
-                    }
-                    : {
-                        line: parameter.position.startLine,
-                        offset: parameter.position.startColumn
-                    };
-            
-            const inputTypeDefinition = await StateMachine.langClient().getTypeFromSymbol({
-                documentIdentifier: {
-                    uri: fileUri
-                },
-                positions: [position]
-            });
-
-            if ('types' in inputTypeDefinition && inputTypeDefinition.types.length > 1) {
-                throw new Error(INVALID_PARAMETER_TYPE.message);
-            }
-
-            if ('types' in inputTypeDefinition && !inputTypeDefinition.types[0].hasOwnProperty('type')) {
-                if (STKindChecker.isQualifiedNameReference(parameter.typeName)) {
-                    throw new Error(`"${parameter.typeName["identifier"].value}" does not exist in the package "${parameter.typeName["modulePrefix"].value}". Please verify the record name or ensure that the correct package is imported.`);
-                }
-                throw new Error(INVALID_PARAMETER_TYPE.message);
-            }
-
-            const inputType = inputTypeDefinition["types"]?.[0].type;
-            if (inputType?.typeName === "union" && inputType.members?.some((m: { fields: string | any[]; }) => m.fields?.length > 0)) {
-                throw new Error(INVALID_RECORD_UNION_TYPE.message);
-            }
-
-            let inputDefinition: RecordDefinitonObject;
-            if (inputType?.fields) {
-                inputDefinition = navigateTypeInfo(inputType.fields, false);
-            } else {
-                inputDefinition = {
-                    "recordFields": { [paramName]: { "type": inputType.typeName, "comment": "" } },
-                    "recordFieldsMetadata": {
-                        [paramName]: {
-                            "typeName": inputType.typeName,
-                            "type": inputType.typeName,
-                            "typeInstance": paramName,
-                            "nullable": false,
-                            "optional": false
-                        }
-                    }
-                };
-            }
-
-            inputs[paramName] = inputDefinition.recordFields;
-            inputMetadata[paramName] = {
-                isArrayType: STKindChecker.isArrayTypeDesc(parameter.typeName),
-                parameterName: paramName,
-                parameterType: paramType,
-                type: STKindChecker.isArrayTypeDesc(parameter.typeName) ? "record[]" : "record",
-                fields: inputDefinition.recordFieldsMetadata,
-            };
-            if (STKindChecker.isArrayTypeDesc(parameter.typeName)) {
-                hasArrayParams = true;
-            }
-        }
-
-        if (STKindChecker.isUnionTypeDesc(fnSt.functionSignature.returnTypeDesc.type)) {
-            let unionType = fnSt.functionSignature.returnTypeDesc.type;
-            let leftType = unionType.leftTypeDesc;
-            let rightType = unionType.rightTypeDesc;
-
-            if (STKindChecker.isArrayTypeDesc(leftType) && STKindChecker.isErrorTypeDesc(rightType)) {
-                if (!STKindChecker.isSimpleNameReference(leftType.memberTypeDesc)) {
-                    throw new Error(INVALID_PARAMETER_TYPE.message);
-                }
-                isErrorExists = true;
-            } else if (STKindChecker.isArrayTypeDesc(rightType) && STKindChecker.isErrorTypeDesc(leftType)) {
-                if (!STKindChecker.isSimpleNameReference(rightType.memberTypeDesc)) {
-                    throw new Error(INVALID_PARAMETER_TYPE.message);
-                }
-                isErrorExists = true;
-            } else if (
-                (STKindChecker.isSimpleNameReference(leftType) || STKindChecker.isQualifiedNameReference(leftType)) &&
-                STKindChecker.isErrorTypeDesc(rightType)) {
-                isErrorExists = true;
-            } else if (
-                (STKindChecker.isSimpleNameReference(rightType) || STKindChecker.isQualifiedNameReference(rightType)) &&
-                STKindChecker.isErrorTypeDesc(leftType)) {
-                isErrorExists = true;
-            } else {
-                throw new Error(INVALID_PARAMETER_TYPE.message);
-            }
-        } else if (STKindChecker.isArrayTypeDesc(fnSt.functionSignature.returnTypeDesc.type)) {
-            if (arrayParams > 1) {
-                throw new Error(INVALID_PARAMETER_TYPE_MULTIPLE_ARRAY.message);
-            }
-            if (!hasArrayParams) {
-                throw new Error(INVALID_PARAMETER_TYPE_MULTIPLE_ARRAY.message);
-            }
-            if (!(STKindChecker.isSimpleNameReference(fnSt.functionSignature.returnTypeDesc.type.memberTypeDesc) ||
-                STKindChecker.isQualifiedNameReference(fnSt.functionSignature.returnTypeDesc.type.memberTypeDesc))) {
-                throw new Error(INVALID_PARAMETER_TYPE.message);
-            }
-        } else {
-            if (!STKindChecker.isSimpleNameReference(fnSt.functionSignature.returnTypeDesc.type) &&
-                !STKindChecker.isQualifiedNameReference(fnSt.functionSignature.returnTypeDesc.type)) {
-                throw new Error(INVALID_PARAMETER_TYPE.message);
-            }
-        }
-
-        let returnType = fnSt.functionSignature.returnTypeDesc.type;
-
-        const returnTypePosition = STKindChecker.isUnionTypeDesc(returnType)
-            ? {
-                line: STKindChecker.isErrorTypeDesc(returnType.leftTypeDesc)
-                    ? returnType.rightTypeDesc.position.startLine
-                    : returnType.leftTypeDesc.position.startLine,
-                offset: STKindChecker.isErrorTypeDesc(returnType.leftTypeDesc)
-                    ? returnType.rightTypeDesc.position.startColumn
-                    : returnType.leftTypeDesc.position.startColumn
-            }
-            : STKindChecker.isArrayTypeDesc(returnType) && STKindChecker.isQualifiedNameReference(returnType.memberTypeDesc)
-                ? {
-                    line: returnType.memberTypeDesc.identifier.position.startLine,
-                    offset: returnType.memberTypeDesc.identifier.position.startColumn
-                }
-                : STKindChecker.isQualifiedNameReference(returnType)
-                    ? {
-                        line: returnType.identifier.position.startLine,
-                        offset: returnType.identifier.position.startColumn
-                    }
-                    : {
-                        line: returnType.position.startLine,
-                        offset: returnType.position.startColumn
-                    };
-
-        const outputTypeDefinition = await StateMachine.langClient().getTypeFromSymbol({
-            documentIdentifier: {
-                uri: fileUri
-            },
-            positions: [returnTypePosition]
-        });
-
-        if ('types' in outputTypeDefinition && !outputTypeDefinition.types[0].hasOwnProperty('type')) {
-            if (STKindChecker.isQualifiedNameReference(returnType)) {
-                throw new Error(`"${returnType["identifier"].value}" does not exist in the package "${returnType["modulePrefix"].value}". Please verify the record name or ensure that the correct package is imported.`);
-            }
-            throw new Error(INVALID_PARAMETER_TYPE.message);
-        }
-
-        const outputType = outputTypeDefinition["types"]?.[0].type;
-        if (outputType?.typeName === "union" && outputType.members?.some((m) => m.fields)) {
-            throw new Error(INVALID_RECORD_UNION_TYPE.message);
-        }
-
-        const outputDefinition = navigateTypeInfo('types' in outputTypeDefinition && outputTypeDefinition.types[0].type.fields, false);
-        output = { ...outputDefinition.recordFields };
-        outputMetadata = { ...outputDefinition.recordFieldsMetadata };
-
-        const response = {
-            inputs,
-            output,
-            inputMetadata,
-            outputMetadata
-        };
-
-        return {
-            parameterMetadata: response,
-            errorStatus: isErrorExists
-        };
-    } catch (error) {
-        throw error;
-    }
-}
-
-export async function processMappings(
-    fnSt: FunctionDefinition,
-    fileUri: string,
-    file?: Attachment
-): Promise<SyntaxTree> {
-    let result = await getParamDefinitions(fnSt, fileUri);
-    let parameterDefinitions = result.parameterMetadata;
-    const isErrorExists = result.errorStatus;
-
-    if (file) {
-        let mappedResult = await mappingFileParameterDefinitions(file, parameterDefinitions);
-        parameterDefinitions = mappedResult as ParameterMetadata;
-    }
-
-    const codeObject = await getDatamapperCode(parameterDefinitions);
-    const { recordString, isCheckError } = await constructRecord(codeObject);
-    let codeString: string;
-    const parameter = fnSt.functionSignature.parameters[0] as RequiredParam;
-    const paramName = parameter.paramName.value;
-    const formattedRecordString = recordString.startsWith(":") ? recordString.substring(1) : recordString;
-
-    let returnType = fnSt.functionSignature.returnTypeDesc.type;
-
-    if (STKindChecker.isUnionTypeDesc(returnType)) {
-        const { leftTypeDesc: leftType, rightTypeDesc: rightType } = returnType;
-
-        if (STKindChecker.isArrayTypeDesc(leftType) || STKindChecker.isArrayTypeDesc(rightType)) {
-            codeString = isCheckError && !isErrorExists
-                ? `|error => from var ${paramName}Item in ${paramName}\n select ${formattedRecordString};`
-                : `=> from var ${paramName}Item in ${paramName}\n select ${formattedRecordString};`;
-        } else {
-            codeString = isCheckError && !isErrorExists ? `|error => ${recordString};` : `=> ${recordString};`;
-        }
-    } else if (STKindChecker.isArrayTypeDesc(returnType)) {
-        codeString = isCheckError
-            ? `|error => from var ${paramName}Item in ${paramName}\n select ${formattedRecordString};`
-            : `=> from var ${paramName}Item in ${paramName}\n select ${formattedRecordString};`;
-    } else {
-        codeString = isCheckError ? `|error => ${recordString};` : `=> ${recordString};`;
-    }
-
-    const modifications: STModification[] = [];
-    modifications.push({
-        type: "INSERT",
-        config: { STATEMENT: codeString },
-        endColumn: fnSt.functionBody.position.endColumn,
-        endLine: fnSt.functionBody.position.endLine,
-        startColumn: fnSt.functionBody.position.startColumn,
-        startLine: fnSt.functionBody.position.startLine,
-    });
-
-    const stModifyResponse = await StateMachine.langClient().stModify({
-        astModifications: modifications,
-        documentIdentifier: {
-            uri: fileUri
-        }
-    });
-
-    return stModifyResponse as SyntaxTree;
-}
-
-function isMappingData(obj: MappingData | IntermediateMapping): obj is MappingData {
+function isMappingData(
+    obj: MappingData | IntermediateMapping
+): obj is MappingData {
     return (
         typeof obj === "object" &&
         obj !== null &&
@@ -439,13 +162,19 @@ async function processMappingData(
 ): Promise<Record<string, string>> {
     const parameters = mappingData.parameters;
     const paths = parameters[0].split(".");
+    let path: string = "";
 
-    const path = await getMappingString(
-        mappingData,
-        parameterDefinitions,
-        nestedKey,
-        nestedKeyArray
-    );
+    try {
+        path = await getMappingString(
+            mappingData,
+            parameterDefinitions,
+            nestedKey,
+            nestedKeyArray
+        );
+    } catch (error) {
+        console.log(`Error in processMapping:`, error);
+        throw new Error(`Failed to process mappings`);
+    }
 
     if (typeof path !== "string" || path === "") {
         return {};
@@ -512,7 +241,7 @@ async function getMappingString(mapping: MappingData, parameterDefinitions: Para
     if (paths.length > 2) {
         modifiedInput = await getNestedType(paths.slice(1), parameterDefinitions.inputMetadata[recordObjectName]);
     } else if (paths.length === 2) {
-        modifiedInput = parameterDefinitions.inputMetadata[recordObjectName]["fields"][paths[1]];
+        modifiedInput = parameterDefinitions.inputMetadata[recordObjectName]?.["fields"]?.[paths[1]] || parameterDefinitions.inputMetadata[recordObjectName + 'Item']?.["fields"]?.[paths[1]];
     } else {
         modifiedInput = parameterDefinitions.configurables[recordObjectName] ||
                 parameterDefinitions.constants[recordObjectName] ||
@@ -1035,7 +764,7 @@ class TypeInfoVisitorImpl implements TypeInfoVisitor {
         if (member.hasOwnProperty("typeName")) {
             memberName = member.typeName;
 
-            if (member.hasOwnProperty("name")) {
+            if (member.hasOwnProperty("name") && !member.hasOwnProperty("id")) {
                 this.addNamedSimpleMember(member, memberName, context);
             } else {
                 this.addUnnamedSimpleMember(memberName, member, context);
@@ -1302,10 +1031,10 @@ export function getBalRecFieldName(fieldName: string) {
     return keywords.includes(fieldName) ? `'${fieldName}` : fieldName;
 }
 
-export async function getDatamapperCode(parameterDefinitions: ParameterMetadata): Promise<Record<string, string>> {
+async function getDatamapperCode(dataMapperResponse: DataMapperModelResponse, parameterDefinitions: ParameterMetadata): Promise<Record<string, string>> {
     let nestedKeyArray: string[] = [];
     try {
-        let response: DatamapperResponse = await sendDatamapperRequest(parameterDefinitions);
+        let response: DatamapperResponse = await sendDatamapperRequest(dataMapperResponse);
         let intermediateMapping = response.mappings;
         let finalCode = await generateBallerinaCode(intermediateMapping, parameterDefinitions, "", nestedKeyArray);
         return finalCode;
@@ -1357,8 +1086,8 @@ export function notifyNoGeneratedMappings() {
     window.showInformationMessage(msg);
 }
 
-async function sendDatamapperRequest(parameterDefinitions: ParameterMetadata): Promise<DatamapperResponse> {
-    const response: DatamapperResponse = await generateAutoMappings(parameterDefinitions as Payload);
+async function sendDatamapperRequest(dataMapperResponse: DataMapperModelResponse): Promise<DatamapperResponse> {
+    const response: DatamapperResponse = await generateAutoMappings(dataMapperResponse);
     return response;
 }
 
@@ -1416,8 +1145,8 @@ export async function mappingFileParameterDefinitions(file: Attachment, paramete
     };
 }
 
-export async function mappingFileInlineDataMapperModel(file: Attachment, inlineDataMapperResponse: InlineDataMapperModelResponse): Promise<InlineDataMapperModelResponse> {
-    if (!file) { return inlineDataMapperResponse; }
+export async function mappingFileDataMapperModel(file: Attachment, dataMapperResponse: DataMapperModelResponse): Promise<DataMapperModelResponse> {
+    if (!file) { return dataMapperResponse; }
     const fileData = await attatchmentToFileData(file);
     const params: DataMapperRequest = {
         file: fileData,
@@ -1427,9 +1156,9 @@ export async function mappingFileInlineDataMapperModel(file: Attachment, inlineD
     let mappingFile: MappingFileRecord = JSON.parse(resp.fileContent) as MappingFileRecord;
 
     return {
-        ...inlineDataMapperResponse,
+        ...dataMapperResponse,
         mappingsModel: {
-            ...inlineDataMapperResponse.mappingsModel,
+            ...dataMapperResponse.mappingsModel,
             mapping_fields: mappingFile.mapping_fields
         }
     };
@@ -1476,7 +1205,7 @@ async function accessMetadata(
             }
             if (isArrayRecord(inputObject.typeName) || isArrayEnumUnion(inputObject.type)) {
                 isUsingArray = inputObject.nullableArray;
-            } 
+            }
             if (isUsingArray && isRecordType(inputObject.typeName)) {
                 newPath[index] = `${paths[index]}?`;
             }
@@ -1491,14 +1220,20 @@ async function accessMetadata(
                     }
                     if (inputObject.typeName.includes("[]") && operation === Operation.LENGTH) {
                         let lastInputObject = await getMetadata(parameterDefinitions, paths, paths[paths.length - 1], MetadataType.INPUT_METADATA);
-                        let inputDataType = lastInputObject.typeName.replace(/\|\(\)$/, "");
+                        let inputDataType = lastInputObject.typeName
+                            // remove |() from union types
+                            .replace(/\|\(\)/g, "")
+                            // remove wrapping parentheses before []
+                            .replace(/^\((.*)\)\[\]$/, "$1[]")
+                            // remove single wrapping parentheses (non-array cases)
+                            .replace(/^\((.*)\)$/, "$1");
                         defaultValue = await getDefaultValue(inputDataType);
                         newPath[paths.length - 1] = `${paths[paths.length - 1]}?:${defaultValue}`;
                     }
                     if (inputObject.nullable && inputObject.optional) {
                         newPath[index - 1] = `${paths[index - 1]}?`;
                     }
-                    // Handle enum, union, and intersection types    
+                // Handle enum, union, and intersection types    
                 } else if (isUnionEnumIntersectionType(inputObject.type)) {
                     if (inputObject.nullable && inputObject.optional) {
                         newPath[index - 1] = `${paths[index - 1]}?`;
@@ -1861,6 +1596,510 @@ async function processCombinedKey(
     return { isinputRecordArrayNullable, isinputRecordArrayOptional, isinputArrayNullable, isinputArrayOptional, isinputNullableArray };
 }
 
+export async function processMappings(
+    request: ExpandedDMModel,
+    file?: Attachment
+): Promise<MappingElement> {
+    let dataMapperResponse = cleanDataMapperModelResponse(request);
+    const result = await getParamDefinitions(dataMapperResponse);
+    const parameterDefinitions = (result as ParameterDefinitions).parameterMetadata;
+
+    if (file) {
+        const mappedResult = await mappingFileDataMapperModel(file, dataMapperResponse);
+        dataMapperResponse = mappedResult as DataMapperModelResponse;
+    }
+
+    const codeObject = await getDatamapperCode(dataMapperResponse, parameterDefinitions);
+    const mappings: Mapping[] = transformCodeObjectToMappings(codeObject, dataMapperResponse);
+    return { mappings };
+}
+
+// Main function to clean the entire DataMapperModelResponse
+function cleanDataMapperModelResponse(
+    response: ExpandedDMModel
+): DataMapperModelResponse {
+    if (!response) {
+        throw new Error("Invalid response: missing mappingsModel");
+    }
+
+    // Check if both input and output are arrays
+    const hasInputArrays = response.inputs && response.inputs.some(input => input.kind === "array");
+    const isOutputArray = response.output && response.output.kind === "array";
+
+    let processedResponse = response;
+
+    // Transform the structure if both input and output are arrays
+    if (hasInputArrays && isOutputArray) {
+        processedResponse = transformArrayStructure(response);
+    }
+
+    const cleanedResponse: DataMapperModelResponse = {
+        mappingsModel: cleanExpandedDMModel(processedResponse as ExpandedDMModel)
+    };
+
+    return cleanedResponse;
+}
+
+function transformArrayStructure(response: ExpandedDMModel): ExpandedDMModel {
+    const transformed = { ...response };
+
+    if (transformed.inputs && transformed.inputs.length > 0) {
+        transformed.inputs = transformed.inputs.map(input => {
+            // Only transform inputs that are arrays
+            if (input.kind === "array" && input.member) {
+                const originalName = input.name;
+
+                // Deep clone and transform IDs using JSON stringify/parse
+                const transformedInput = JSON.parse(
+                    JSON.stringify({
+                        ...input,
+                        id: `${input.id}Item`
+                    }).replace(
+                        new RegExp(`"id":"${originalName}\\.`, 'g'),
+                        `"id":"${originalName}Item.`
+                    )
+                );
+
+                return transformedInput;
+            }
+            // Return non-array inputs unchanged
+            return input;
+        });
+    }
+    return transformed;
+}
+
+// Clean ExpandedDMModel by removing null fields and cleaning nested structures
+function cleanExpandedDMModel(model: ExpandedDMModel): ExpandedDMModel {
+    const cleaned = model as ExpandedDMModel;
+
+    // Clean inputs array - remove null/undefined elements
+    if (model.inputs && Array.isArray(model.inputs)) {
+        const cleanedInputs = model.inputs
+            .filter(input => !isNullOrUndefined(input))
+            .map(input => cleanIOType(input))
+            .filter(input => input !== null) as IOType[];
+
+        cleaned.inputs = cleanedInputs;
+    }
+
+    // Clean output
+    if (model.output && !isNullOrUndefined(model.output)) {
+        const cleanedOutput = cleanIOType(model.output);
+        if (cleanedOutput !== null) {
+            cleaned.output = cleanedOutput;
+        }
+    }
+
+    // Clean subMappings array if it exists
+    if (model.subMappings && Array.isArray(model.subMappings)) {
+        const cleanedSubMappings = model.subMappings
+            .filter(subMapping => !isNullOrUndefined(subMapping))
+            .map(subMapping => cleanIOType(subMapping))
+            .filter(subMapping => subMapping !== null) as IOType[];
+
+        if (cleanedSubMappings.length > 0) {
+            cleaned.subMappings = cleanedSubMappings;
+        }
+    }
+
+    // Clean mappings array - remove null/undefined elements
+    if (model.mappings && Array.isArray(model.mappings)) {
+        const cleanedMappings = model.mappings.filter(mapping =>
+            !isNullOrUndefined(mapping) &&
+            !isNullOrUndefined(mapping.output) &&
+            !isNullOrUndefined(mapping.expression)
+        );
+
+        // Also clean inputs array within each mapping
+        cleanedMappings.forEach(mapping => {
+            if (mapping.inputs && Array.isArray(mapping.inputs)) {
+                mapping.inputs = mapping.inputs.filter(input => !isNullOrUndefined(input));
+            }
+        });
+
+        cleaned.mappings = cleanedMappings;
+    }
+
+    // Include query if it exists and is not null
+    if (model.query && !isNullOrUndefined(model.query)) {
+        cleaned.query = model.query;
+    }
+
+    return cleaned;
+}
+
+// Utility function to check if a value is null or undefined
+function isNullOrUndefined(value: any): boolean {
+    return value === null || value === undefined;
+}
+
+// Clean IOType by removing null/undefined fields and filtering arrays
+function cleanIOType(ioType: IOType | null | undefined): IOType | null {
+    if (isNullOrUndefined(ioType)) {
+        return null;
+    }
+
+    // Remove array records without fields
+    if (ioType.kind === "array" && ioType.typeName === "record" &&
+        (!ioType.fields || ioType.fields.length === 0)) {
+        return null;
+    }
+
+    // Remove records without fields
+    if (ioType.kind === "record" && (!ioType.fields || ioType.fields.length === 0)) {
+        return null;
+    }
+
+    const cleaned = ioType;
+
+    // Clean fields array - remove null/undefined elements and recursively clean
+    if (ioType.fields && Array.isArray(ioType.fields)) {
+        const cleanedFields = ioType.fields
+            .filter(field => !isNullOrUndefined(field))
+            .map(field => cleanIOType(field))
+            .filter(field => field !== null) as IOType[];
+
+        if (cleanedFields.length > 0) {
+            cleaned.fields = cleanedFields;
+        }
+    }
+
+    // Clean member recursively
+    if (ioType.member && !isNullOrUndefined(ioType.member)) {
+        const cleanedMember = cleanIOType(ioType.member);
+        if (cleanedMember !== null) {
+            cleaned.member = cleanedMember;
+        }
+    }
+
+    // Clean members array - remove null/undefined elements
+    if (ioType.members && Array.isArray(ioType.members)) {
+        const cleanedMembers = ioType.members.filter(member =>
+            !isNullOrUndefined(member) &&
+            !isNullOrUndefined(member.id) &&
+            !isNullOrUndefined(member.typeName)
+        );
+
+        if (cleanedMembers.length > 0) {
+            cleaned.members = cleanedMembers;
+        }
+    }
+
+    return cleaned;
+}
+
+export async function getParamDefinitions(
+    dataMapperResponse: DataMapperModelResponse
+): Promise<ParameterDefinitions> {
+    const inputs: { [key: string]: any } = {};
+    const inputMetadata: { [key: string]: any } = {};
+
+    const { inputs: mappingInputs, output: mappingOutput } = dataMapperResponse.mappingsModel as ExpandedDMModel;
+    const transformedInputs = transformInputs(mappingInputs);
+    const transformedOutputs = transformOutput(mappingOutput);
+
+    for (const parameter of transformedInputs.parameters) {
+        const inputDefinition = navigateTypeInfo(transformedInputs.parameterFields[parameter.parameterName], false);
+
+        inputs[parameter.parameterName] = inputDefinition.recordFields;
+        inputMetadata[parameter.parameterName] = {
+            "isArrayType": parameter.isArrayType,
+            "parameterName": parameter.parameterName,
+            "parameterType": parameter.parameterType,
+            "type": parameter.type,
+            "fields": inputDefinition.recordFieldsMetadata
+        };
+    }
+
+    const outputDefinition = navigateTypeInfo(transformedOutputs, false);
+    const output = { ...outputDefinition.recordFields };
+    const outputMetadata = { ...outputDefinition.recordFieldsMetadata };
+
+    return {
+        parameterMetadata: {
+            inputs,
+            output,
+            inputMetadata,
+            outputMetadata,
+            constants: transformedInputs.constants,
+            configurables: transformedInputs.configurables,
+            variables: transformedInputs.variables
+        },
+        errorStatus: false
+    };
+}
+
+function transformInputs(inputs: IOType[]): {
+    constants: Record<string, FieldMetadata>;
+    configurables: Record<string, FieldMetadata>;
+    variables: Record<string, FieldMetadata>;
+    parameters: ParameterField[];
+    parameterFields: { [parameterName: string]: FormField[] };
+} {
+    const constants: Record<string, FieldMetadata> = {};
+    const configurables: Record<string, FieldMetadata> = {};
+    const variables: Record<string, FieldMetadata> = {};
+    const parameters: ParameterField[] = [];
+    const parameterFields: { [parameterName: string]: FormField[] } = {};
+
+    inputs.forEach((input) => {
+        // Helper function to create ParameterField
+        const createParameterField = (input: IOType): ParameterField => {
+            let typeName: string;
+
+            if (input.kind !== input.typeName) {
+                typeName = input.typeName;
+            } else if (!input.typeName) {
+                typeName = input.kind || "unknown";
+            } else {
+                typeName = input.typeName;
+            }
+
+            // Determine if it's an array type
+            const isArrayType = input.kind === TypeKind.Array;
+            const name = input.id;
+
+            // Determine the type string
+            let type: string;
+            if (isArrayType) {
+                // If it's an array, get the member type and append []
+                if (input.member) {
+                    const memberTypeName = input.member.kind || "unknown";
+                    type = `${memberTypeName}[]`;
+                } else {
+                    type = `${typeName}[]`;
+                }
+            } else {
+                type = input.kind;
+            }
+
+            return {
+                isArrayType,
+                parameterName: name,
+                parameterType: typeName,
+                type
+            };
+        };
+
+        const createFieldConfig = (input: IOType): FieldMetadata => {
+            if (!input.typeName) {
+                throw new Error("TypeName is missing");
+            }
+            return {
+                typeName: input.kind || "unknown",
+                type: input.kind || "unknown",
+                typeInstance: input.id,
+                nullable: false,
+                optional: input.optional
+            };
+        };
+
+        // Handle different categories
+        if (input.category === InputCategory.Constant) {
+            constants[input.id] = createFieldConfig(input);
+            return;
+        }
+
+        if (input.category === InputCategory.Configurable) {
+            configurables[input.id] = createFieldConfig(input);
+            return;
+        }
+
+        if (input.category === InputCategory.Variable) {
+            variables[input.id] = createFieldConfig(input);
+            return;
+        }
+
+        if (input.category === InputCategory.Parameter) {
+            const parameterField = createParameterField(input);
+            parameters.push(parameterField);
+
+            const parameterName = input.id;
+
+            if (input.kind === "array" && input.member) {
+                if (input.member.fields) {
+                    parameterFields[parameterName] = input.member.fields.map(transformIOType);
+                } else {
+                    parameterFields[parameterName] = [transformIOType(input.member)];
+                }
+            } else {
+                // Handle non-array parameters
+                if (input.fields) {
+                    parameterFields[parameterName] = input.fields.map(transformIOType);
+                } else {
+                    parameterFields[parameterName] = [transformIOType(input)];
+                }
+            }
+        }
+    });
+
+    return { constants, configurables, variables, parameters, parameterFields };
+}
+
+function transformIOType(input: IOType): FormField {
+    const name = input.name || extractNameFromId(input.id);
+
+    let typeName: string;
+    if (input.kind && input.typeName && input.kind !== input.typeName && input.category) {
+        typeName = input.kind;
+    } else if (!input.typeName) {
+        typeName = input.kind || "unknown";
+    } else {
+        typeName = input.typeName;
+    }
+
+    const baseField = {
+        id: input.id,
+        name,
+        typeName,
+        optional: input.optional || false
+    };
+
+    // Handle arrays
+    if (input.kind === "array" && input.member) {
+        const memberTransformed = transformIOType(input.member) as FormField;
+        const { name, ...memberWithoutName } = memberTransformed;
+
+        return {
+            ...baseField,
+            typeName: "array",
+            memberType: memberWithoutName as FormField
+        } as FormField;
+    }
+
+    // Handle unions
+    if (input.kind === "union" && input.members) {
+        return {
+            ...baseField,
+            typeName: "union",
+            members: input.members.map(transformIOType) as FormField[]
+        } as FormField;
+    }
+
+    // Handle records
+    if (input.kind === "record" && input.fields) {
+        const recordField: FormField = {
+            ...baseField,
+            typeName: "record",
+            fields: input.fields.map(transformIOType) as FormField[]
+        };
+
+        if (
+            input.typeName &&
+            input.kind !== input.typeName &&
+            !input.category
+        ) {
+            recordField.typeInfo = {
+                orgName: "",
+                moduleName: "",
+                name: input.typeName
+            };
+        }
+
+        return recordField;
+    }
+
+    // Handle primitive types
+    const primitiveField: FormField = { ...baseField };
+
+    // Add typeInfo if conditions are met
+    if (
+        input.typeName &&
+        input.kind !== input.typeName &&
+        !input.category
+    ) {
+        primitiveField.typeInfo = {
+            orgName: "",
+            moduleName: "",
+            name: input.typeName
+        };
+    }
+
+    return primitiveField;
+}
+
+function extractNameFromId(id: string): string {
+    const parts = id.split('.').filter(part => !/^\d+$/.test(part));
+    return parts[parts.length - 1];
+}
+
+function transformOutput(output: IOType): FormField[] {
+    if (output.fields) {
+        return output.fields.map(transformIOType);
+    } else if (output.member) {
+        return output.member.fields.map(transformIOType);
+    } else {
+        return [transformIOType(output)];
+    }
+}
+
+function transformCodeObjectToMappings(codeObject: Record<string, string>, request: DataMapperModelResponse): Mapping[] {
+    const mappings: Mapping[] = [];
+
+    // Get the output variable name from the request
+    const { output: mappingOutput, inputs } = request.mappingsModel as ExpandedDMModel;
+    const outputVariableName = mappingOutput.name || extractNameFromId(mappingOutput.id);
+
+    // Check if any input is an array
+    const arrayInputs = inputs.filter(input => input.kind === "array");
+    const hasInputArrays = arrayInputs.length > 0;
+    const isOutputArray = mappingOutput.kind === "array";
+
+    if (hasInputArrays && isOutputArray) {
+        // If multiple array inputs, we might need to handle joins or multiple from clauses
+        if (arrayInputs.length === 1) {
+            // Single array input - simple select
+            const arrayInput = arrayInputs[0];
+            const inputName = arrayInput.name;
+            const itemVariableName = `${inputName}Item`;
+
+            // Build the select object from codeObject
+            const selectFields = Object.keys(codeObject).map(key => {
+                return `${[key]}: ${codeObject[key]}`;
+            }).join(',\n                        ');
+
+            const mapping: Mapping = {
+                output: outputVariableName,
+                expression: `from var ${itemVariableName} in ${inputName}
+                            select {
+                                ${selectFields}
+                            }`
+            };
+            mappings.push(mapping);
+        } else {
+            const primaryArrayInput = arrayInputs[0];
+            const primaryInputName = primaryArrayInput.name;
+            const primaryItemVariableName = `${primaryInputName}Item`;
+
+            // Build the select object from codeObject
+            const selectFields = Object.keys(codeObject).map(key => {
+                return `${[key]}: ${codeObject[key]}`;
+            }).join(',\n                        ');
+
+            const mapping: Mapping = {
+                output: outputVariableName,
+                expression: `from var ${primaryItemVariableName} in ${primaryInputName}
+                            select {
+                                ${selectFields}
+                            }`
+            };
+            mappings.push(mapping);
+        }
+    } else {
+        // Handle non-array mappings (original logic)
+        Object.keys(codeObject).forEach(key => {
+            const mapping: Mapping = {
+                output: `${outputVariableName}.${key}`,
+                expression: codeObject[key]
+            };
+            mappings.push(mapping);
+        });
+    }
+
+    return mappings;
+}
+
 export async function requirementsSpecification(filepath: string): Promise<string> {
     if (!filepath) {
         throw new Error("File is undefined");
@@ -1889,3 +2128,66 @@ export function cleanDiagnosticMessages(entries: DiagnosticEntry[]): DiagnosticE
         message: entry.message,
     }));
 }
+
+
+export async function addToIntegration(workspaceFolderPath: string, fileChanges: FileChanges[]) {
+    const formattedWorkspaceEdit = new WorkspaceEdit();
+    const nonBalFiles: FileChanges[] = [];
+
+    for (const fileChange of fileChanges) {
+        let balFilePath = path.join(workspaceFolderPath, fileChange.filePath);
+        const fileUri = Uri.file(balFilePath);
+        if (!fileChange.filePath.endsWith('.bal')) {
+            nonBalFiles.push(fileChange);
+            continue;
+        }
+
+        formattedWorkspaceEdit.createFile(fileUri, { ignoreIfExists: true });
+
+        formattedWorkspaceEdit.replace(
+            fileUri,
+            new Range(
+                new Position(0, 0),
+                new Position(Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER)
+            ),
+            fileChange.content
+        );
+    }
+
+    // Apply all formatted changes at once
+    await workspace.applyEdit(formattedWorkspaceEdit);
+
+    // Write non ballerina files separately as ls doesn't need to be notified of those changes
+    for (const fileChange of nonBalFiles) {
+        let absoluteFilePath = path.join(workspaceFolderPath, fileChange.filePath);
+        const directory = path.dirname(absoluteFilePath);
+        if (!fs.existsSync(directory)) {
+            fs.mkdirSync(directory, { recursive: true });
+        }
+        fs.writeFileSync(absoluteFilePath, fileChange.content, 'utf8');
+    }
+    return new Promise((resolve, reject) => {
+        // Get the artifact notification handler instance
+        const notificationHandler = ArtifactNotificationHandler.getInstance();
+        // Subscribe to artifact updated notifications
+        let unsubscribe = notificationHandler.subscribe(ArtifactsUpdated.method, undefined, async (payload) => {
+            clearTimeout(timeoutId);
+            resolve(payload.data);
+            unsubscribe();
+        });
+
+        // Set a timeout to reject if no notification is received within 10 seconds
+        const timeoutId = setTimeout(() => {
+            console.log("No artifact update notification received within 10 seconds");
+            reject(new Error("Operation timed out. Please try again."));
+            unsubscribe();
+        }, 10000);
+
+        // Clear the timeout when notification is received
+        const originalUnsubscribe = unsubscribe;
+        unsubscribe = () => {
+            clearTimeout(timeoutId);
+            originalUnsubscribe();
+        };
+    });
+}
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/bi-diagram/rpc-handler.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/bi-diagram/rpc-handler.ts
index aac325f1039..0bee6a351da 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/bi-diagram/rpc-handler.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/bi-diagram/rpc-handler.ts
@@ -18,9 +18,12 @@
  * THIS FILE INCLUDES AUTO GENERATED CODE
  */
 import {
-    AIChatRequest,
+    addBreakpointToSource,
+    addClassField,
     AddFieldRequest,
+    addFunction,
     AddFunctionRequest,
+    AIChatRequest,
     BIAiSuggestionsRequest,
     BIAvailableNodesRequest,
     BIDeleteByComponentInfoRequest,
@@ -33,41 +36,7 @@ import {
     BuildMode,
     ClassFieldModifierRequest,
     ComponentRequest,
-    DeploymentRequest,
-    EndOfFileRequest,
-    ExpressionCompletionsRequest,
-    ExpressionDiagnosticsRequest,
-    FormDidCloseParams,
-    FormDidOpenParams,
-    FunctionNodeRequest,
-    GetConfigVariableNodeTemplateRequest,
-    GetRecordConfigRequest,
-    GetRecordModelFromSourceRequest,
-    GetTypeRequest,
-    GetTypesRequest,
-    getTypeFromJson,
-    JsonToTypeRequest,
-    ModelFromCodeRequest,
-    OpenAPIClientDeleteRequest,
-    OpenAPIClientGenerationRequest,
-    OpenAPIGeneratedModulesRequest,
-    OpenConfigTomlRequest,
-    ProjectRequest,
-    ReadmeContentRequest,
-    RecordSourceGenRequest,
-    RenameIdentifierRequest,
-    ServiceClassSourceRequest,
-    SignatureHelpRequest,
-    UpdateConfigVariableRequest,
-    UpdateConfigVariableRequestV2,
-    UpdateImportsRequest,
-    UpdateRecordConfigRequest,
-    UpdateTypeRequest,
-    UpdateTypesRequest,
-    VisibleTypesRequest,
-    addBreakpointToSource,
-    addClassField,
-    addFunction,
+    MigrateRequest,
     buildProject,
     createComponent,
     createGraphqlClassType,
@@ -76,12 +45,17 @@ import {
     deleteConfigVariableV2,
     deleteFlowNode,
     deleteOpenApiGeneratedModules,
+    deleteType,
+    DeleteTypeRequest,
+    DeploymentRequest,
     deployProject,
     formDidClose,
     formDidOpen,
     generateOpenApiClient,
     getAiSuggestions,
     getAllImports,
+    getAvailableChunkers,
+    getAvailableDataLoaders,
     getAvailableEmbeddingProviders,
     getAvailableModelProviders,
     getAvailableNodes,
@@ -134,7 +108,41 @@ import {
     updateServiceClass,
     updateType,
     updateTypes,
-    DeleteConfigVariableRequestV2
+    DeleteConfigVariableRequestV2,
+    ConfigVariableRequest,
+    ProjectRequest,
+    EndOfFileRequest,
+    ExpressionCompletionsRequest,
+    ExpressionDiagnosticsRequest,
+    FormDidCloseParams,
+    FormDidOpenParams,
+    FunctionNodeRequest,
+    GetConfigVariableNodeTemplateRequest,
+    GetRecordConfigRequest,
+    GetRecordModelFromSourceRequest,
+    getTypeFromJson,
+    GetTypeRequest,
+    GetTypesRequest,
+    JsonToTypeRequest,
+    ModelFromCodeRequest,
+    OpenAPIClientDeleteRequest,
+    OpenAPIClientGenerationRequest,
+    OpenAPIGeneratedModulesRequest,
+    OpenConfigTomlRequest,
+    ReadmeContentRequest,
+    RecordSourceGenRequest,
+    RenameIdentifierRequest,
+    ServiceClassSourceRequest,
+    SignatureHelpRequest,
+    UpdateConfigVariableRequest,
+    UpdateConfigVariableRequestV2,
+    UpdateImportsRequest,
+    UpdateRecordConfigRequest,
+    UpdateTypeRequest,
+    UpdateTypesRequest,
+    verifyTypeDelete,
+    VerifyTypeDeleteRequest,
+    VisibleTypesRequest
 } from "@wso2/ballerina-core";
 import { Messenger } from "vscode-messenger";
 import { BiDiagramRpcManager } from "./rpc-manager";
@@ -150,6 +158,8 @@ export function registerBiDiagramRpcHandlers(messenger: Messenger) {
     messenger.onRequest(getAvailableVectorStores, (args: BIAvailableNodesRequest) => rpcManger.getAvailableVectorStores(args));
     messenger.onRequest(getAvailableEmbeddingProviders, (args: BIAvailableNodesRequest) => rpcManger.getAvailableEmbeddingProviders(args));
     messenger.onRequest(getAvailableVectorKnowledgeBases, (args: BIAvailableNodesRequest) => rpcManger.getAvailableVectorKnowledgeBases(args));
+    messenger.onRequest(getAvailableDataLoaders, (args: BIAvailableNodesRequest) => rpcManger.getAvailableDataLoaders(args));
+    messenger.onRequest(getAvailableChunkers, (args: BIAvailableNodesRequest) => rpcManger.getAvailableChunkers(args));
     messenger.onRequest(getEnclosedFunction, (args: BIGetEnclosedFunctionRequest) => rpcManger.getEnclosedFunction(args));
     messenger.onRequest(getNodeTemplate, (args: BINodeTemplateRequest) => rpcManger.getNodeTemplate(args));
     messenger.onRequest(getAiSuggestions, (args: BIAiSuggestionsRequest) => rpcManger.getAiSuggestions(args));
@@ -163,7 +173,7 @@ export function registerBiDiagramRpcHandlers(messenger: Messenger) {
     messenger.onRequest(getExpressionCompletions, (args: ExpressionCompletionsRequest) => rpcManger.getExpressionCompletions(args));
     messenger.onRequest(getConfigVariables, () => rpcManger.getConfigVariables());
     messenger.onRequest(updateConfigVariables, (args: UpdateConfigVariableRequest) => rpcManger.updateConfigVariables(args));
-    messenger.onRequest(getConfigVariablesV2, () => rpcManger.getConfigVariablesV2());
+    messenger.onRequest(getConfigVariablesV2, (args: ConfigVariableRequest) => rpcManger.getConfigVariablesV2(args));
     messenger.onRequest(updateConfigVariablesV2, (args: UpdateConfigVariableRequestV2) => rpcManger.updateConfigVariablesV2(args));
     messenger.onRequest(deleteConfigVariableV2, (args: DeleteConfigVariableRequestV2) => rpcManger.deleteConfigVariableV2(args));
     messenger.onRequest(getConfigVariableNodeTemplate, (args: GetConfigVariableNodeTemplateRequest) => rpcManger.getConfigVariableNodeTemplate(args));
@@ -190,6 +200,8 @@ export function registerBiDiagramRpcHandlers(messenger: Messenger) {
     messenger.onRequest(getType, (args: GetTypeRequest) => rpcManger.getType(args));
     messenger.onRequest(updateType, (args: UpdateTypeRequest) => rpcManger.updateType(args));
     messenger.onRequest(updateTypes, (args: UpdateTypesRequest) => rpcManger.updateTypes(args));
+    messenger.onRequest(deleteType, (args: DeleteTypeRequest) => rpcManger.deleteType(args));
+    messenger.onRequest(verifyTypeDelete, (args: VerifyTypeDeleteRequest) => rpcManger.verifyTypeDelete(args));
     messenger.onRequest(getTypeFromJson, (args: JsonToTypeRequest) => rpcManger.getTypeFromJson(args));
     messenger.onRequest(getServiceClassModel, (args: ModelFromCodeRequest) => rpcManger.getServiceClassModel(args));
     messenger.onRequest(updateClassField, (args: ClassFieldModifierRequest) => rpcManger.updateClassField(args));
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/bi-diagram/rpc-manager.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/bi-diagram/rpc-manager.ts
index 6976c2f1760..99100204a61 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/bi-diagram/rpc-manager.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/bi-diagram/rpc-manager.ts
@@ -58,18 +58,21 @@ import {
     CreateComponentResponse,
     CurrentBreakpointsResponse,
     DIRECTORY_MAP,
+    DeleteConfigVariableRequestV2,
+    DeleteConfigVariableResponseV2,
+    DeleteTypeRequest,
+    DeleteTypeResponse,
     DeploymentRequest,
     DeploymentResponse,
     DevantMetadata,
+    Diagnostics,
     EndOfFileRequest,
     ExpressionCompletionsRequest,
     ExpressionCompletionsResponse,
     ExpressionDiagnosticsRequest,
     ExpressionDiagnosticsResponse,
-    FlowNode,
     FormDidCloseParams,
     FormDidOpenParams,
-    FunctionNode,
     FunctionNodeRequest,
     FunctionNodeResponse,
     GeneratedClientSaveResponse,
@@ -87,6 +90,7 @@ import {
     JsonToTypeRequest,
     JsonToTypeResponse,
     LinePosition,
+    LoginMethod,
     ModelFromCodeRequest,
     NodeKind,
     OpenAPIClientDeleteRequest,
@@ -130,12 +134,14 @@ import {
     UpdatedArtifactsResponse,
     VisibleTypesRequest,
     VisibleTypesResponse,
+    VerifyTypeDeleteRequest,
+    VerifyTypeDeleteResponse,
     WorkspaceFolder,
     WorkspacesResponse,
-    DeleteConfigVariableRequestV2,
-    DeleteConfigVariableResponseV2,
-    LoginMethod,
-    Diagnostics,
+    ConfigVariableRequest,
+    AvailableNode,
+    Item,
+    Category,
 } from "@wso2/ballerina-core";
 import * as fs from "fs";
 import * as path from 'path';
@@ -159,11 +165,11 @@ import { OLD_BACKEND_URL } from "../../features/ai/utils";
 import { cleanAndValidateProject, getCurrentBIProject } from "../../features/config-generator/configGenerator";
 import { BreakpointManager } from "../../features/debugger/breakpoint-manager";
 import { StateMachine, updateView } from "../../stateMachine";
+import { getAccessToken, getLoginMethod } from "../../utils/ai/auth";
 import { getCompleteSuggestions } from '../../utils/ai/completions';
 import { README_FILE, createBIAutomation, createBIFunction, createBIProjectPure } from "../../utils/bi";
 import { writeBallerinaFileDidOpen } from "../../utils/modification";
 import { updateSourceCode } from "../../utils/source-utils";
-import { getAccessToken, getLoginMethod } from "../../utils/ai/auth";
 import { checkProjectDiagnostics, removeUnusedImports } from "../ai-panel/repair-utils";
 export class BiDiagramRpcManager implements BIDiagramAPI {
     OpenConfigTomlRequest: (params: OpenConfigTomlRequest) => Promise<void>;
@@ -303,6 +309,96 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
         }
     }
 
+    private filterAdvancedAiNodes(response: BIAvailableNodesResponse): BIAvailableNodesResponse {
+        const showAdvancedAiNodes = extension.ballerinaExtInstance.getShowAdvancedAiNodes();
+        if (showAdvancedAiNodes || !response) {
+            return response;
+        }
+
+        // List of node types/labels to hide when advanced AI nodes are disabled
+        const hiddenNodeTypes = [
+            'CHUNKERS',
+            'VECTOR_STORES', 
+            'EMBEDDING_PROVIDERS'
+        ];
+
+        const hiddenNodeLabels = [
+            'Recursive Document Chunker',
+            'Chunker',
+            'Vector Store',
+            'Embedding Provider'
+        ];
+
+        const filterItems = (items: Item[]): Item[] => {
+            if (!items) { return items; }
+            
+            return items.filter(item => {
+                if ((item as AvailableNode).codedata?.node && hiddenNodeTypes.includes((item as AvailableNode).codedata.node)) {
+                    return false;
+                }
+                
+                if (item.metadata?.label && hiddenNodeLabels.includes(item.metadata.label)) {
+                    return false;
+                }
+
+                if ((item as Category).items) {
+                    (item as Category).items = filterItems((item as Category).items);
+                }
+                
+                return true;
+            });
+        };
+
+        if (response.categories) {
+            response.categories = response.categories.map(category => {
+                if (category.items) {
+                    category.items = filterItems(category.items);
+                }
+                return category;
+            });
+        }
+
+        return response;
+    }
+
+    private updateNodeDescriptions(availableNodes: BIAvailableNodesResponse): BIAvailableNodesResponse {
+        if (!availableNodes) {
+            return availableNodes;
+        }
+        // Adding descriptions for AI nodes
+        const updateItems = (items: Item[], isInAICategory: boolean): Item[] => {
+            if (!items) { return items; }
+            
+            return items.map(item => {
+                if ((item as AvailableNode).enabled === false && isInAICategory) {
+                    item.metadata = {
+                        ...item.metadata,
+                        description: "Please update AI package version to latest version to use this feature"
+                    };
+                }
+                
+                // Recursively handle nested items
+                if ((item as Category).items) {
+                    (item as Category).items = updateItems((item as Category).items, isInAICategory);
+                }
+                
+                return item;
+            });
+        };
+
+        if (availableNodes.categories) {
+            availableNodes.categories = availableNodes.categories.map(category => {
+                const isAICategory = category.metadata?.label === "AI";
+                if (category.items) {
+                    category.items = updateItems(category.items, isAICategory);
+                }
+                return category;
+            });
+        }
+
+        return availableNodes;
+    }
+
     async getAvailableNodes(params: BIAvailableNodesRequest): Promise<BIAvailableNodesResponse> {
         console.log(">>> requesting bi available nodes from ls", params);
         return new Promise((resolve) => {
@@ -310,7 +406,9 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
                 .getAvailableNodes(params)
                 .then((model) => {
                     console.log(">>> bi available nodes from ls", model);
-                    resolve(model);
+                    const filteredModel = this.filterAdvancedAiNodes(model);
+                    const updatedModel = this.updateNodeDescriptions(filteredModel);
+                    resolve(updatedModel);
                 })
                 .catch((error) => {
                     console.log(">>> error fetching available nodes from ls", error);
@@ -394,6 +492,43 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
         });
     }
 
+
+    async getAvailableDataLoaders(params: BIAvailableNodesRequest): Promise<BIAvailableNodesResponse> {
+        console.log(">>> requesting bi available data loaders from ls", params);
+        return new Promise((resolve) => {
+            StateMachine.langClient()
+                .getAvailableDataLoaders(params)
+                .then((model) => {
+                    console.log(">>> bi available data loaders from ls", model);
+                    resolve(model);
+                })
+                .catch((error) => {
+                    console.log(">>> error fetching available data loaders from ls", error);
+                    return new Promise((resolve) => {
+                        resolve(undefined);
+                    });
+                });
+        });
+    }
+
+    async getAvailableChunkers(params: BIAvailableNodesRequest): Promise<BIAvailableNodesResponse> {
+        console.log(">>> requesting bi available chunkers from ls", params);
+        return new Promise((resolve) => {
+            StateMachine.langClient()
+                .getAvailableChunkers(params)
+                .then((model) => {
+                    console.log(">>> bi available chunkers from ls", model);
+                    resolve(model);
+                })
+                .catch((error) => {
+                    console.log(">>> error fetching available chunkers from ls", error);
+                    return new Promise((resolve) => {
+                        resolve(undefined);
+                    });
+                });
+        });
+    }
+
     async getNodeTemplate(params: BINodeTemplateRequest): Promise<BINodeTemplateResponse> {
         console.log(">>> requesting bi node template from ls", params);
         params.forceAssign = true; // TODO: remove this
@@ -422,7 +557,7 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
     }
 
     async createProject(params: ProjectRequest): Promise<void> {
-        createBIProjectPure(params.projectName, params.projectPath);
+        createBIProjectPure(params);
     }
 
     async getWorkspaces(): Promise<WorkspacesResponse> {
@@ -690,17 +825,23 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
         });
     }
 
-    async getConfigVariablesV2(): Promise<ConfigVariableResponse> {
-        return new Promise(async (resolve) => {
-            const projectPath = path.join(StateMachine.context().projectUri);
-            const showLibraryConfigVariables = extension.ballerinaExtInstance.showLibraryConfigVariables();
-            const variables = await StateMachine.langClient().getConfigVariablesV2({
-                projectPath: projectPath,
-                includeLibraries: showLibraryConfigVariables !== false
-            }) as ConfigVariableResponse;
-            resolve(variables);
-        });
-    }
+async getConfigVariablesV2(params: ConfigVariableRequest): Promise<ConfigVariableResponse> {
+    return new Promise(async (resolve) => {
+        const projectPath = path.join(StateMachine.context().projectUri);
+        const showLibraryConfigVariables = extension.ballerinaExtInstance.showLibraryConfigVariables();
+        
+        // if params includeLibraries is not set, then use settings 
+        const includeLibraries = params?.includeLibraries !== undefined 
+            ? params.includeLibraries 
+            : showLibraryConfigVariables !== false;
+
+        const variables = await StateMachine.langClient().getConfigVariablesV2({
+            projectPath: projectPath,
+            includeLibraries
+        }) as ConfigVariableResponse;
+        resolve(variables);
+    });
+}
 
     async updateConfigVariablesV2(params: UpdateConfigVariableRequestV2): Promise<UpdateConfigVariableResponseV2> {
         return new Promise(async (resolve) => {
@@ -1817,6 +1958,43 @@ export class BiDiagramRpcManager implements BIDiagramAPI {
                 });
         });
     }
+
+    async deleteType(params: DeleteTypeRequest): Promise<DeleteTypeResponse> {
+        return new Promise((resolve, reject) => {
+            const projectUri = StateMachine.context().projectUri;
+            const filePath = path.join(projectUri, params.filePath);
+            StateMachine.langClient().deleteType({ filePath: filePath, lineRange: params.lineRange })
+                .then(async (deleteTypeResponse: DeleteTypeResponse) => {
+                    if (deleteTypeResponse.textEdits) {
+                        await updateSourceCode({ textEdits: deleteTypeResponse.textEdits });
+                        resolve(deleteTypeResponse);
+                    } else {
+                        reject(deleteTypeResponse.errorMsg);
+                    }
+                }).catch((error) => {
+                    reject(error);
+                });
+        });
+    }
+
+    async verifyTypeDelete(params: VerifyTypeDeleteRequest): Promise<VerifyTypeDeleteResponse> {
+        const projectUri = StateMachine.context().projectUri;
+        const filePath = path.join(projectUri, params.filePath);
+
+        const request: VerifyTypeDeleteRequest = {
+            filePath: filePath,
+            startPosition: params.startPosition,
+        };
+        return new Promise((resolve, reject) => {
+            StateMachine.langClient().verifyTypeDelete(request)
+                .then((response) => {                    
+                    resolve(response);
+                })
+                .catch((error) => {
+                    reject(error);
+                });
+        });
+    }
 }
 
 export function getRepoRoot(projectRoot: string): string | undefined {
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/common/rpc-handler.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/common/rpc-handler.ts
index 66434b3c407..82ab5d908c4 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/common/rpc-handler.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/common/rpc-handler.ts
@@ -29,6 +29,7 @@ import {
     executeCommand,
     experimentalEnabled,
     getBallerinaDiagnostics,
+    getCurrentProjectTomlValues,
     getTypeCompletions,
     getWorkspaceFiles,
     getWorkspaceRoot,
@@ -37,6 +38,7 @@ import {
     openExternalUrl,
     runBackgroundTerminalCommand,
     selectFileOrDirPath,
+    selectFileOrFolderPath,
     showErrorMessage
 } from "@wso2/ballerina-core";
 import { Messenger } from "vscode-messenger";
@@ -52,8 +54,10 @@ export function registerCommonRpcHandlers(messenger: Messenger) {
     messenger.onRequest(runBackgroundTerminalCommand, (args: RunExternalCommandRequest) => rpcManger.runBackgroundTerminalCommand(args));
     messenger.onNotification(openExternalUrl, (args: OpenExternalUrlRequest) => rpcManger.openExternalUrl(args));
     messenger.onRequest(selectFileOrDirPath, (args: FileOrDirRequest) => rpcManger.selectFileOrDirPath(args));
+    messenger.onRequest(selectFileOrFolderPath, () => rpcManger.selectFileOrFolderPath());
     messenger.onRequest(experimentalEnabled, () => rpcManger.experimentalEnabled());
     messenger.onRequest(isNPSupported, () => rpcManger.isNPSupported());
     messenger.onRequest(getWorkspaceRoot, () => rpcManger.getWorkspaceRoot());
     messenger.onNotification(showErrorMessage, (args: ShowErrorMessageRequest) => rpcManger.showErrorMessage(args));
+    messenger.onRequest(getCurrentProjectTomlValues, () => rpcManger.getCurrentProjectTomlValues());
 }
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/common/rpc-manager.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/common/rpc-manager.ts
index 9d0f7f4da52..5207d4d34a5 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/common/rpc-manager.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/common/rpc-manager.ts
@@ -35,6 +35,7 @@ import {
     RunExternalCommandResponse,
     ShowErrorMessageRequest,
     SyntaxTree,
+    TomlValues,
     TypeResponse,
     WorkspaceFileRequest,
     WorkspaceRootResponse,
@@ -46,8 +47,10 @@ import { URI } from "vscode-uri";
 import { extension } from "../../BalExtensionContext";
 import { StateMachine } from "../../stateMachine";
 import { goToSource } from "../../utils";
-import { askFilePath, askProjectPath, BALLERINA_INTEGRATOR_ISSUES_URL, getUpdatedSource } from "./utils";
-import path from 'path';
+import { askFileOrFolderPath, askFilePath, askProjectPath, BALLERINA_INTEGRATOR_ISSUES_URL, getUpdatedSource } from "./utils";
+import { parse } from 'toml';
+import * as fs from 'fs';
+import path from "path";
 
 export class CommonRpcManager implements CommonRPCAPI {
     async getTypeCompletions(): Promise<TypeResponse> {
@@ -186,6 +189,19 @@ export class CommonRpcManager implements CommonRPCAPI {
         });
     }
 
+    async selectFileOrFolderPath(): Promise<FileOrDirResponse> {
+        return new Promise(async (resolve) => {
+            const selectedFileOrFolder = await askFileOrFolderPath();
+            if (!selectedFileOrFolder || selectedFileOrFolder.length === 0) {
+                window.showErrorMessage('A file or folder must be selected');
+                resolve({ path: "" });
+            } else {
+                const fileOrFolderPath = selectedFileOrFolder[0].fsPath;
+                resolve({ path: fileOrFolderPath });
+            }
+        });
+    }
+
     async experimentalEnabled(): Promise<boolean> {
         return extension.ballerinaExtInstance.enabledExperimentalFeatures();
     }
@@ -229,4 +245,33 @@ export class CommonRpcManager implements CommonRPCAPI {
     async isNPSupported(): Promise<boolean> {
         return extension.ballerinaExtInstance.isNPSupported;
     }
+
+    async getBallerinaProjectRoot(): Promise<string | null> {
+        const workspaceFolders = workspace.workspaceFolders;
+        if (!workspaceFolders) {
+            throw new Error("No workspaces found.");
+        }
+        const workspaceFolderPath = workspaceFolders[0].uri.fsPath;
+        // Check if workspaceFolderPath is a Ballerina project
+        // Assuming a Ballerina project must contain a 'Ballerina.toml' file
+        const ballerinaProjectFile = path.join(workspaceFolderPath, 'Ballerina.toml');
+        if (fs.existsSync(ballerinaProjectFile)) {
+            return workspaceFolderPath;
+        }
+        return null;
+    }
+
+    async getCurrentProjectTomlValues(): Promise<TomlValues> {
+        const projectRoot = await this.getBallerinaProjectRoot();
+        const ballerinaTomlPath = path.join(projectRoot, 'Ballerina.toml');
+        if (fs.existsSync(ballerinaTomlPath)) {
+            const tomlContent = await fs.promises.readFile(ballerinaTomlPath, 'utf-8');
+            try {
+                return parse(tomlContent);
+            } catch (error) {
+                console.error("Failed to load Ballerina.toml content", error);
+                return;
+            }
+        }
+    }
 }
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/common/utils.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/common/utils.ts
index ba7ebd76b3b..73d9100ae37 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/common/utils.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/common/utils.ts
@@ -85,6 +85,16 @@ export async function askFilePath() {
     });
 }
 
+export async function askFileOrFolderPath() {
+    return await window.showOpenDialog({
+        canSelectFiles: true,
+        canSelectFolders: true,
+        canSelectMany: false,
+        defaultUri: Uri.file(os.homedir()),
+        title: "Select a file or folder"
+    });
+}
+
 export async function applyBallerinaTomlEdit(tomlPath: Uri, textEdit: TextEdit) {
     const workspaceEdit = new WorkspaceEdit();
 
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/inline-data-mapper/VariableFindingVisitor.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/VariableFindingVisitor.ts
similarity index 100%
rename from workspaces/ballerina/ballerina-extension/src/rpc-managers/inline-data-mapper/VariableFindingVisitor.ts
rename to workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/VariableFindingVisitor.ts
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/inline-data-mapper/rpc-handler.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-handler.ts
similarity index 61%
rename from workspaces/ballerina/ballerina-extension/src/rpc-managers/inline-data-mapper/rpc-handler.ts
rename to workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-handler.ts
index 1a7c02d385d..537d334da66 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/inline-data-mapper/rpc-handler.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-handler.ts
@@ -22,48 +22,56 @@ import {
     addClauses,
     AddClausesRequest,
     addNewArrayElement,
+    addSubMapping,
+    AddSubMappingRequest,
+    AllDataMapperSourceRequest,
     convertToQuery,
     ConvertToQueryRequest,
+    DataMapperModelRequest,
+    DataMapperSourceRequest,
+    deleteMapping,
+    DeleteMappingRequest,
+    DMModelRequest,
     getAllDataMapperSource,
     getDataMapperCodedata,
-    getProperty,
-    PropertyRequest,
+    GetDataMapperCodedataRequest,
     getDataMapperModel,
     getDataMapperSource,
+    getExpandedDMFromDMModel,
     getInitialIDMSource,
-    GetInlineDataMapperCodedataRequest,
+    getProcessTypeReference,
+    getProperty,
     getSubMappingCodedata,
     GetSubMappingCodedataRequest,
     getVisualizableFields,
-    addSubMapping,
-    AddSubMappingRequest,
     InitialIDMSourceRequest,
-    InlineAllDataMapperSourceRequest,
-    InlineDataMapperModelRequest,
-    InlineDataMapperSourceRequest,
-    VisualizableFieldsRequest,
-    deleteMapping,
-    DeleteMappingRequest,
     mapWithCustomFn,
-    MapWithCustomFnRequest
+    MapWithFnRequest,
+    mapWithTransformFn,
+    ProcessTypeReferenceRequest,
+    PropertyRequest,
+    VisualizableFieldsRequest
 } from "@wso2/ballerina-core";
 import { Messenger } from "vscode-messenger";
-import { InlineDataMapperRpcManager } from "./rpc-manager";
+import { DataMapperRpcManager } from "./rpc-manager";
 
-export function registerInlineDataMapperRpcHandlers(messenger: Messenger) {
-    const rpcManger = new InlineDataMapperRpcManager();
+export function registerDataMapperRpcHandlers(messenger: Messenger) {
+    const rpcManger = new DataMapperRpcManager();
     messenger.onRequest(getInitialIDMSource, (args: InitialIDMSourceRequest) => rpcManger.getInitialIDMSource(args));
-    messenger.onRequest(getDataMapperModel, (args: InlineDataMapperModelRequest) => rpcManger.getDataMapperModel(args));
-    messenger.onRequest(getDataMapperSource, (args: InlineDataMapperSourceRequest) => rpcManger.getDataMapperSource(args));
+    messenger.onRequest(getDataMapperModel, (args: DataMapperModelRequest) => rpcManger.getDataMapperModel(args));
+    messenger.onRequest(getDataMapperSource, (args: DataMapperSourceRequest) => rpcManger.getDataMapperSource(args));
     messenger.onRequest(getVisualizableFields, (args: VisualizableFieldsRequest) => rpcManger.getVisualizableFields(args));
     messenger.onRequest(addNewArrayElement, (args: AddArrayElementRequest) => rpcManger.addNewArrayElement(args));
     messenger.onRequest(convertToQuery, (args: ConvertToQueryRequest) => rpcManger.convertToQuery(args));
     messenger.onRequest(addClauses, (args: AddClausesRequest) => rpcManger.addClauses(args));
     messenger.onRequest(addSubMapping, (args: AddSubMappingRequest) => rpcManger.addSubMapping(args));
     messenger.onRequest(deleteMapping, (args: DeleteMappingRequest) => rpcManger.deleteMapping(args));
-    messenger.onRequest(mapWithCustomFn, (args: MapWithCustomFnRequest) => rpcManger.mapWithCustomFn(args));
-    messenger.onRequest(getDataMapperCodedata, (args: GetInlineDataMapperCodedataRequest) => rpcManger.getDataMapperCodedata(args));
+    messenger.onRequest(mapWithCustomFn, (args: MapWithFnRequest) => rpcManger.mapWithCustomFn(args));
+    messenger.onRequest(mapWithTransformFn, (args: MapWithFnRequest) => rpcManger.mapWithTransformFn(args));
+    messenger.onRequest(getDataMapperCodedata, (args: GetDataMapperCodedataRequest) => rpcManger.getDataMapperCodedata(args));
     messenger.onRequest(getSubMappingCodedata, (args: GetSubMappingCodedataRequest) => rpcManger.getSubMappingCodedata(args));
-    messenger.onRequest(getAllDataMapperSource, (args: InlineAllDataMapperSourceRequest) => rpcManger.getAllDataMapperSource(args));
+    messenger.onRequest(getAllDataMapperSource, (args: AllDataMapperSourceRequest) => rpcManger.getAllDataMapperSource(args));
     messenger.onRequest(getProperty, (args: PropertyRequest) => rpcManger.getProperty(args));
+    messenger.onRequest(getExpandedDMFromDMModel, (args: DMModelRequest) => rpcManger.getExpandedDMFromDMModel(args));
+    messenger.onRequest(getProcessTypeReference, (args: ProcessTypeReferenceRequest) => rpcManger.getProcessTypeReference(args));
 }
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/inline-data-mapper/rpc-manager.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-manager.ts
similarity index 60%
rename from workspaces/ballerina/ballerina-extension/src/rpc-managers/inline-data-mapper/rpc-manager.ts
rename to workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-manager.ts
index 3c0087940cd..48c7116ad36 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/inline-data-mapper/rpc-manager.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/rpc-manager.ts
@@ -21,48 +21,53 @@ import {
     AddArrayElementRequest,
     AddClausesRequest,
     AddSubMappingRequest,
+    AllDataMapperSourceRequest,
     ConvertToQueryRequest,
+    DataMapperAPI,
+    DataMapperModelRequest,
+    DataMapperModelResponse,
+    DataMapperSourceRequest,
+    DataMapperSourceResponse,
     DeleteMappingRequest,
-    EVENT_TYPE,
-    GetInlineDataMapperCodedataRequest,
-    GetInlineDataMapperCodedataResponse,
+    DMModelRequest,
+    ExpandedDMModel,
+    ExpandedDMModelResponse,
+    GetDataMapperCodedataRequest,
+    GetDataMapperCodedataResponse,
     GetSubMappingCodedataRequest,
     InitialIDMSourceRequest,
     InitialIDMSourceResponse,
-    InlineAllDataMapperSourceRequest,
-    InlineDataMapperAPI,
-    InlineDataMapperModelRequest,
-    InlineDataMapperModelResponse,
-    InlineDataMapperSourceRequest,
-    InlineDataMapperSourceResponse,
-    MACHINE_VIEW,
-    MapWithCustomFnRequest,
+    MapWithFnRequest,
+    ProcessTypeReferenceRequest,
+    ProcessTypeReferenceResponse,
     PropertyRequest,
     PropertyResponse,
     VisualizableFieldsRequest,
     VisualizableFieldsResponse
 } from "@wso2/ballerina-core";
 
-import { openView, StateMachine } from "../../stateMachine";
+import { StateMachine } from "../../stateMachine";
 
 import {
     buildSourceRequests,
     consolidateTextEdits,
+    expandDMModel,
     processSourceRequests,
+    processTypeReference,
     setHasStopped,
     updateAndRefreshDataMapper,
     updateSource
 } from "./utils";
 
-export class InlineDataMapperRpcManager implements InlineDataMapperAPI {
+export class DataMapperRpcManager implements DataMapperAPI {
     async getInitialIDMSource(params: InitialIDMSourceRequest): Promise<InitialIDMSourceResponse> {
-        console.log(">>> requesting inline data mapper initial source from ls", params);
+        console.log(">>> requesting data mapper initial source from ls", params);
         return new Promise((resolve) => {
             StateMachine
                 .langClient()
                 .getSourceCode(params)
                 .then(model => {
-                    console.log(">>> inline data mapper initial source from ls", model);
+                    console.log(">>> Data mapper initial source from ls", model);
                     const varName = params.flowNode.properties?.variable?.value as string ?? null;
                     updateSource(model.textEdits, params.filePath, params.flowNode.codedata, varName)
                         .then(codeData => {
@@ -70,7 +75,7 @@ export class InlineDataMapperRpcManager implements InlineDataMapperAPI {
                         });
                 })
                 .catch((error) => {
-                    console.log(">>> error fetching inline data mapper initial source from ls", error);
+                    console.log(">>> error fetching data mapper initial source from ls", error);
                     return new Promise((resolve) => {
                         resolve({ artifacts: [], error: error });
                     });
@@ -78,23 +83,22 @@ export class InlineDataMapperRpcManager implements InlineDataMapperAPI {
         });
     }
 
-    async getDataMapperModel(params: InlineDataMapperModelRequest): Promise<InlineDataMapperModelResponse> {
+    async getDataMapperModel(params: DataMapperModelRequest): Promise<DataMapperModelResponse> {
         return new Promise(async (resolve) => {
             const dataMapperModel = await StateMachine
                 .langClient()
-                .getInlineDataMapperMappings(params);
-
-            resolve(dataMapperModel as InlineDataMapperModelResponse);
+                .getDataMapperMappings(params);
+            resolve(dataMapperModel as DataMapperModelResponse);
         });
     }
 
-    async getDataMapperSource(params: InlineDataMapperSourceRequest): Promise<InlineDataMapperSourceResponse> {
+    async getDataMapperSource(params: DataMapperSourceRequest): Promise<DataMapperSourceResponse> {
         return new Promise(async (resolve) => {
             StateMachine
                 .langClient()
-                .getInlineDataMapperSource(params)
+                .getDataMapperSource(params)
                 .then((resp) => {
-                    console.log(">>> inline data mapper initial source from ls", resp);
+                    console.log(">>> Data mapper initial source from ls", resp);
                     updateAndRefreshDataMapper(
                         resp.textEdits,
                         params.filePath,
@@ -120,7 +124,7 @@ export class InlineDataMapperRpcManager implements InlineDataMapperAPI {
         });
     }
 
-    async addNewArrayElement(params: AddArrayElementRequest): Promise<InlineDataMapperSourceResponse> {
+    async addNewArrayElement(params: AddArrayElementRequest): Promise<DataMapperSourceResponse> {
         return new Promise(async (resolve) => {
             await StateMachine
                 .langClient()
@@ -131,7 +135,7 @@ export class InlineDataMapperRpcManager implements InlineDataMapperAPI {
                     propertyKey: params.propertyKey
                 })
                 .then((resp) => {
-                    console.log(">>> inline data mapper add array element response", resp);
+                    console.log(">>> Data mapper add array element response", resp);
                     updateAndRefreshDataMapper(resp.textEdits, params.filePath, params.codedata, params.varName)
                     .then(() => {
                         resolve({ textEdits: resp.textEdits });
@@ -140,13 +144,13 @@ export class InlineDataMapperRpcManager implements InlineDataMapperAPI {
         });
     }
 
-    async convertToQuery(params: ConvertToQueryRequest): Promise<InlineDataMapperSourceResponse> {
+    async convertToQuery(params: ConvertToQueryRequest): Promise<DataMapperSourceResponse> {
         return new Promise(async (resolve) => {
             await StateMachine
                 .langClient()
                 .convertToQuery(params)
                 .then((resp) => {
-                    console.log(">>> inline data mapper convert to query response", resp);
+                    console.log(">>> Data mapper convert to query response", resp);
                     updateAndRefreshDataMapper(resp.textEdits, params.filePath, params.codedata, params.varName)
                     .then(() => {
                         resolve({ textEdits: resp.textEdits });
@@ -155,13 +159,13 @@ export class InlineDataMapperRpcManager implements InlineDataMapperAPI {
         });
     }
 
-    async addClauses(params: AddClausesRequest): Promise<InlineDataMapperSourceResponse> {
+    async addClauses(params: AddClausesRequest): Promise<DataMapperSourceResponse> {
         return new Promise(async (resolve) => {
             await StateMachine
                 .langClient()
                 .addClauses(params)
                 .then((resp) => {
-                    console.log(">>> inline data mapper add clauses response", resp);
+                    console.log(">>> Data mapper add clauses response", resp);
                     updateAndRefreshDataMapper(resp.textEdits, params.filePath, params.codedata, params.varName)
                     .then(() => {
                         resolve({ textEdits: resp.textEdits });
@@ -170,13 +174,13 @@ export class InlineDataMapperRpcManager implements InlineDataMapperAPI {
         });
     }
 
-    async addSubMapping(params: AddSubMappingRequest): Promise<InlineDataMapperSourceResponse> {
+    async addSubMapping(params: AddSubMappingRequest): Promise<DataMapperSourceResponse> {
         return new Promise(async (resolve) => {
             await StateMachine
                 .langClient()
                 .addSubMapping(params)
                 .then((resp) => {
-                    console.log(">>> inline data mapper add sub mapping response", resp);
+                    console.log(">>> Data mapper add sub mapping response", resp);
                     updateAndRefreshDataMapper(resp.textEdits, params.filePath, params.codedata, params.varName)
                     .then(() => {
                         resolve({ textEdits: resp.textEdits });
@@ -185,27 +189,27 @@ export class InlineDataMapperRpcManager implements InlineDataMapperAPI {
         });
     }
 
-    async getDataMapperCodedata(params: GetInlineDataMapperCodedataRequest): Promise<GetInlineDataMapperCodedataResponse> {
+    async getDataMapperCodedata(params: GetDataMapperCodedataRequest): Promise<GetDataMapperCodedataResponse> {
         return new Promise(async (resolve) => {
             const dataMapperCodedata = await StateMachine
                 .langClient()
-                .getDataMapperCodedata(params) as GetInlineDataMapperCodedataResponse;
+                .getDataMapperCodedata(params) as GetDataMapperCodedataResponse;
 
             resolve(dataMapperCodedata);
         });
     }
 
-    async getSubMappingCodedata(params: GetSubMappingCodedataRequest): Promise<GetInlineDataMapperCodedataResponse> {
+    async getSubMappingCodedata(params: GetSubMappingCodedataRequest): Promise<GetDataMapperCodedataResponse> {
         return new Promise(async (resolve) => {
             const dataMapperCodedata = await StateMachine
                 .langClient()
-                .getSubMappingCodedata(params) as GetInlineDataMapperCodedataResponse;
+                .getSubMappingCodedata(params) as GetDataMapperCodedataResponse;
 
             resolve(dataMapperCodedata);
         });
     }
 
-    async getAllDataMapperSource(params: InlineAllDataMapperSourceRequest): Promise<InlineDataMapperSourceResponse> {
+    async getAllDataMapperSource(params: AllDataMapperSourceRequest): Promise<DataMapperSourceResponse> {
         return new Promise(async (resolve) => {
             setHasStopped(false);
 
@@ -226,13 +230,13 @@ export class InlineDataMapperRpcManager implements InlineDataMapperAPI {
         });
     }
 
-    async deleteMapping(params: DeleteMappingRequest): Promise<InlineDataMapperSourceResponse> {
+    async deleteMapping(params: DeleteMappingRequest): Promise<DataMapperSourceResponse> {
         return new Promise(async (resolve) => {
             await StateMachine
                 .langClient()
                 .deleteMapping(params)
                 .then((resp) => {
-                    console.log(">>> inline data mapper delete mapping response", resp);
+                    console.log(">>> Data mapper delete mapping response", resp);
                     updateAndRefreshDataMapper(resp.textEdits, params.filePath, params.codedata, params.varName)
                     .then(() => {
                         resolve({ textEdits: resp.textEdits });
@@ -241,13 +245,80 @@ export class InlineDataMapperRpcManager implements InlineDataMapperAPI {
         });
     }
 
-    async mapWithCustomFn(params: MapWithCustomFnRequest): Promise<InlineDataMapperSourceResponse> {
+    async mapWithCustomFn(params: MapWithFnRequest): Promise<DataMapperSourceResponse> {
         return new Promise(async (resolve) => {
             await StateMachine
                 .langClient()
                 .mapWithCustomFn(params)
                 .then((resp) => {
-                    console.log(">>> inline data mapper map with custom fn response", resp);
+                    console.log(">>> Data mapper map with custom fn response", resp);
+                    updateAndRefreshDataMapper(resp.textEdits, params.filePath, params.codedata, params.varName)
+                    .then(() => {
+                        resolve({ textEdits: resp.textEdits });
+                    });
+                });
+        });
+    }
+
+     async getExpandedDMFromDMModel(params: DMModelRequest): Promise<ExpandedDMModelResponse> {
+        try {
+            const { model, rootViewId, options = {} } = params;
+
+            // Validate input parameters
+            if (!model) {
+                throw new Error("DMModel is required for transformation");
+            }
+
+            if (!rootViewId) {
+                throw new Error("rootViewId is required for transformation");
+            }
+
+            // Transform the model using the existing expansion logic
+            const expandedModel = expandDMModel(model, rootViewId);
+
+            return {
+                expandedModel,
+                success: true
+            };
+        } catch (error) {
+            return {
+                expandedModel: {} as ExpandedDMModel,
+                success: false,
+                error: error instanceof Error ? error.message : "Unknown error occurred during transformation"
+            };
+        }
+    }
+
+    async getProcessTypeReference(params: ProcessTypeReferenceRequest): Promise<ProcessTypeReferenceResponse> {
+        try {
+            const { ref, fieldId, model, visitedRefs = new Set<string>() } = params;
+
+            if (!ref || !fieldId || !model) {
+                throw new Error("ref, fieldId, and model are required parameters");
+            }
+
+            const result = processTypeReference(ref, fieldId, model, visitedRefs);
+
+            return {
+                result,
+                success: true
+            };
+        } catch (error) {
+            return {
+                result: {},
+                success: false,
+                error: error instanceof Error ? error.message : "Unknown error occurred during type reference processing"
+            };
+        }
+    }
+
+    async mapWithTransformFn(params: MapWithFnRequest): Promise<DataMapperSourceResponse> {
+        return new Promise(async (resolve) => {
+            await StateMachine
+                .langClient()
+                .mapWithTransformFn(params)
+                .then((resp) => {
+                    console.log(">>> Data mapper map with transform fn response", resp);
                     updateAndRefreshDataMapper(resp.textEdits, params.filePath, params.codedata, params.varName)
                     .then(() => {
                         resolve({ textEdits: resp.textEdits });
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/inline-data-mapper/utils.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/utils.ts
similarity index 57%
rename from workspaces/ballerina/ballerina-extension/src/rpc-managers/inline-data-mapper/utils.ts
rename to workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/utils.ts
index 5ea6638b966..1ff56d44fee 100644
--- a/workspaces/ballerina/ballerina-extension/src/rpc-managers/inline-data-mapper/utils.ts
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/data-mapper/utils.ts
@@ -19,18 +19,28 @@ import {
     CodeData,
     ELineRange,
     Flow,
-    InlineAllDataMapperSourceRequest,
-    InlineDataMapperSourceRequest,
-    InlineDataMapperSourceResponse,
+    AllDataMapperSourceRequest,
+    DataMapperSourceRequest,
+    DataMapperSourceResponse,
     NodePosition,
     ProjectStructureArtifactResponse,
     TextEdit,
-    traverseFlow
+    traverseFlow,
+    RecordType,
+    DMModel,
+    IOType,
+    TypeKind,
+    IOTypeField,
+    IORoot,
+    ExpandModelOptions,
+    ExpandedDMModel
 } from "@wso2/ballerina-core";
 import { updateSourceCode, UpdateSourceCodeRequest } from "../../utils";
-import { StateMachine, updateInlineDataMapperView } from "../../stateMachine";
+import { StateMachine, updateDataMapperView } from "../../stateMachine";
 import { VariableFindingVisitor } from "./VariableFindingVisitor";
 
+const MAX_NESTED_DEPTH = 4;
+
 /**
  * Shared state for data mapper operations
  */
@@ -102,11 +112,11 @@ export async function updateSourceCodeIteratively(updateSourceCodeRequest: Updat
         return await updateSourceCode(updateSourceCodeRequest);
     }
 
-    // need to prioritize if file path ends with functions.bal
+    // need to prioritize if file path ends with functions.bal or data_mappings.bal
     filePaths.sort((a, b) => {
-        // Prioritize files ending with functions.bal
-        const aEndsWithFunctions = a.endsWith('functions.bal') ? 1 : 0;
-        const bEndsWithFunctions = b.endsWith('functions.bal') ? 1 : 0;
+        // Prioritize files ending with functions.bal or data_mappings.bal
+        const aEndsWithFunctions = (a.endsWith("functions.bal") || a.endsWith("data_mappings.bal")) ? 1 : 0;
+        const bEndsWithFunctions = (b.endsWith("functions.bal") || b.endsWith("data_mappings.bal")) ? 1 : 0;
         return bEndsWithFunctions - aEndsWithFunctions; // Sort descending
     });
 
@@ -147,6 +157,23 @@ export async function updateSource(
             throw new Error(`No artifact found for file: ${filePath} within the specified line range`);
         }
 
+        // If the artifact is a data mapper(reusable), return the code data for the data mapper
+        if (relevantArtifact.type === "DATA_MAPPER") {
+            return {
+                lineRange: {
+                    fileName: relevantArtifact.path,
+                    startLine: {
+                        line: relevantArtifact.position?.startLine,
+                        offset: relevantArtifact.position?.startColumn
+                    },
+                    endLine: {
+                        line: relevantArtifact.position?.endLine,
+                        offset: relevantArtifact.position?.endColumn
+                    }
+                }
+            };
+        }
+
         // Get the flow model for the updated artifact
         const flowModel = await getFlowModelForArtifact(relevantArtifact, filePath);
         if (!flowModel) {
@@ -234,7 +261,7 @@ async function getFlowModelForArtifact(artifact: ProjectStructureArtifactRespons
                 }
             });
 
-        console.log("Flow model retrieved for inline data mapper:", flowModelResponse);
+        console.log("Flow model retrieved for data mapper:", flowModelResponse);
 
         return flowModelResponse.flowModel || null;
     } catch (error) {
@@ -272,14 +299,14 @@ function applySourceCodeHack(codeData: CodeData): void {
 /**
  * Updates the data mapper view with the provided code data after applying necessary transformations.
  */
-function updateDataMapperView(codeData: CodeData | null, varName: string): void {
+function updateView(codeData: CodeData | null, varName: string): void {
     if (!codeData) {
         console.warn(`No code data available for variable: ${varName}`);
         return;
     }
 
     applySourceCodeHack(codeData);
-    updateInlineDataMapperView(codeData, varName);
+    updateDataMapperView(codeData, varName);
 }
 
 /**
@@ -297,7 +324,7 @@ export async function updateAndRefreshDataMapper(
         const newCodeData = withinSubMapping
             ? await updateSubMappingSource(textEdits, filePath, codedata, targetField)
             : await updateSource(textEdits, filePath, codedata, varName);
-        updateDataMapperView(newCodeData, varName);
+        updateView(newCodeData, varName);
     } catch (error) {
         console.error(`Failed to update and refresh data mapper for variable "${varName}":`, error);
         throw new Error(`Data mapper update failed`);
@@ -314,7 +341,7 @@ export async function refreshDataMapper(
 ): Promise<void> {
     try {
         const newCodeData = await fetchDataMapperCodeData(filePath, codedata, varName);
-        updateDataMapperView(newCodeData, varName);
+        updateView(newCodeData, varName);
     } catch (error) {
         console.error(`Failed to refresh data mapper for variable "${varName}":`, error);
         throw new Error(`Data mapper refresh failed.`);
@@ -324,7 +351,7 @@ export async function refreshDataMapper(
 /**
  * Builds individual source requests from the provided parameters by mapping over each mapping.
  */
-export function buildSourceRequests(params: InlineAllDataMapperSourceRequest): InlineDataMapperSourceRequest[] {
+export function buildSourceRequests(params: AllDataMapperSourceRequest): DataMapperSourceRequest[] {
     return params.mappings.map(mapping => ({
         filePath: params.filePath,
         codedata: params.codedata,
@@ -337,14 +364,14 @@ export function buildSourceRequests(params: InlineAllDataMapperSourceRequest): I
 /**
  * Handles operation cancellation and error logging for each request.
  */
-export async function processSourceRequests(requests: InlineDataMapperSourceRequest[]): Promise<PromiseSettledResult<InlineDataMapperSourceResponse>[]> {
+export async function processSourceRequests(requests: DataMapperSourceRequest[]): Promise<PromiseSettledResult<DataMapperSourceResponse>[]> {
     return Promise.allSettled(
         requests.map(async (request) => {
             if (getHasStopped()) {
                 throw new Error("Operation was stopped");
             }
             try {
-                return await StateMachine.langClient().getInlineDataMapperSource(request);
+                return await StateMachine.langClient().getDataMapperSource(request);
             } catch (error) {
                 console.error("Error in getDataMapperSource:", error);
                 throw error;
@@ -357,7 +384,7 @@ export async function processSourceRequests(requests: InlineDataMapperSourceRequ
  * Consolidates text edits from multiple source responses into a single optimized collection.
  */
 export function consolidateTextEdits(
-    responses: PromiseSettledResult<InlineDataMapperSourceResponse>[],
+    responses: PromiseSettledResult<DataMapperSourceResponse>[],
     totalMappings: number
 ): { [key: string]: TextEdit[] } {
     const allTextEdits: { [key: string]: TextEdit[] } = {};
@@ -443,7 +470,7 @@ function isWithinArtifact(
     artifactPath: string,
     filePath: string,
     artifactPosition: NodePosition,
-    varDeclRange: ELineRange
+    originalRange: ELineRange
 ) {
     if (artifactPath !== filePath) {
         return false;
@@ -451,7 +478,289 @@ function isWithinArtifact(
 
     const artifactStartLine = artifactPosition.startLine;
     const artifactEndLine = artifactPosition.endLine;
-    const varDeclStartLine = varDeclRange.startLine.line;
+    const originalStartLine = originalRange.startLine.line;
+
+    return artifactStartLine <= originalStartLine && artifactEndLine >= originalStartLine;
+}
+
+/**
+ * Expands a DMModel into an ExpandedDMModel
+ */
+export function expandDMModel(
+    model: DMModel,
+    rootViewId: string,
+    options: ExpandModelOptions = {}
+): ExpandedDMModel {
+    const {
+        processInputs = true,
+        processOutput = true,
+        processSubMappings = true,
+        previousModel
+    } = options;
+
+    return {
+        inputs: processInputs
+            ? processInputRoots(model)
+            : previousModel?.inputs || [],
+        output: processOutput
+            ? processIORoot(model.output, model)
+            : previousModel?.output!,
+        subMappings: processSubMappings
+            ? model.subMappings?.map(subMapping => processIORoot(subMapping, model))
+            : previousModel?.subMappings || [],
+        mappings: model.mappings,
+        query: model.query,
+        source: "",
+        rootViewId
+    };
+}
+
+/**
+ * Preprocesses inputs of the DMModel (separates focus inputs from regular inputs)
+ * Processes each regular input into an IOType
+ */
+function processInputRoots(model: DMModel): IOType[] {
+    const inputs: IORoot[] = [];
+    const focusInputs: Record<string, IOTypeField> = {};
+    for (const input of model.inputs) {
+        if (input.focusExpression) {
+            focusInputs[input.focusExpression] = input as IOTypeField;
+        } else {
+            inputs.push(input);
+        }
+    }
+    const preProcessedModel: DMModel = {
+        ...model,
+        inputs,
+        focusInputs
+    };
+
+    return inputs.map(input => processIORoot(input, preProcessedModel));
+}
+
+/**
+ * Processes an IORoot (input or output) into an IOType
+ */
+function processIORoot(root: IORoot, model: DMModel): IOType {
+    const ioType = createBaseIOType(root);
+
+    if (root.kind === TypeKind.Array && root.member) {
+        return {
+            ...ioType,
+            member: processArray(root, root.name, root.member, model, new Set<string>())
+        };
+    }
+
+    if (root.ref) {
+        return {
+            ...ioType,
+            ...processTypeReference(root.ref, root.name, model, new Set<string>())
+        };
+    }
+
+    return ioType;
+}
+
+/**
+ * Creates a base IOType from an IORoot
+ */
+function createBaseIOType(root: IORoot): IOType {
+    return {
+        id: root.name,
+        name: root.name,
+        displayName: root.displayName,
+        typeName: root.typeName,
+        kind: root.kind,
+        ...(root.category && { category: root.category }),
+        ...(root.optional !== undefined && { optional: root.optional })
+    };
+}
+
+/**
+ * Processes array type fields and their members
+ */
+function processArray(
+    field: IOTypeField,
+    parentId: string,
+    member: IOTypeField,
+    model: DMModel,
+    visitedRefs: Set<string>
+): IOType {
+    let fieldId = generateFieldId(parentId, member.name);
+
+    let isFocused = false;
+    if (model.focusInputs) {
+        const focusMember = model.focusInputs[parentId];
+        if (focusMember) {
+            member = focusMember;
+            parentId = member.name;
+            fieldId = member.name;
+            isFocused = true;
+        }
+    }
 
-    return artifactStartLine <= varDeclStartLine && artifactEndLine >= varDeclStartLine;
+    const ioType: IOType = {
+        id: fieldId,
+        name: member.name,
+        displayName: member.displayName,
+        typeName: member.typeName!,
+        kind: member.kind,
+        ...(isFocused && { isFocused }),
+        ...(member.optional !== undefined && { optional: member.optional })
+    };
+
+    if (member.kind === TypeKind.Array && member.member) {
+        return {
+            ...ioType,
+            member: processArray(field, parentId, member.member, model, visitedRefs)
+        };
+    }
+
+    if (member.kind === TypeKind.Union && member.members) {
+        return {
+            ...ioType,
+            members: processUnion(member.members, fieldId, model, visitedRefs)
+        };
+    }
+
+    if (member.ref) {
+        return {
+            ...ioType,
+            ...processTypeReference(member.ref, parentId, model, visitedRefs)
+        };
+    }
+
+    return ioType;
+}
+
+/**
+ * Generates a unique field ID by combining parent ID and field name
+ */
+function generateFieldId(parentId: string, fieldName: string): string {
+    return `${parentId}.${fieldName}`;
+}
+
+/**
+ * Processes union type members and returns an array of IOType objects
+ */
+function processUnion(
+    unionMembers: IOTypeField[],
+    parentFieldId: string,
+    model: DMModel,
+    visitedRefs: Set<string>
+): IOType[] {
+    return unionMembers.map(unionMember => {
+        const unionMemberType: IOType = {
+            id: generateFieldId(parentFieldId, unionMember.name || 'member'),
+            name: unionMember.name,
+            displayName: unionMember.displayName,
+            typeName: unionMember.typeName,
+            kind: unionMember.kind,
+            ...(unionMember.optional !== undefined && { optional: unionMember.optional })
+        };
+
+        // Process union member recursively if it has a reference
+        if (unionMember.ref) {
+            return {
+                ...unionMemberType,
+                ...processTypeReference(unionMember.ref, parentFieldId, model, visitedRefs)
+            };
+        }
+
+        // Process union member if it's an array
+        if (unionMember.kind === TypeKind.Array && unionMember.member) {
+            return {
+                ...unionMemberType,
+                member: processArray(unionMember, parentFieldId, unionMember.member, model, visitedRefs)
+            };
+        }
+
+        return unionMemberType;
+    });
+}
+
+/**
+ * Processes a type reference and returns the appropriate IOType structure
+ */
+export function processTypeReference(
+    ref: string,
+    fieldId: string,
+    model: DMModel,
+    visitedRefs: Set<string>
+): Partial<IOType> {
+    const refType = model.refs[ref];
+    if ('fields' in refType) {
+        if (visitedRefs.has(ref)) {
+            return {
+                ref: ref,
+                fields: [],
+                isRecursive: true,
+                isDeepNested: true,
+            };
+        }
+        visitedRefs.add(ref);
+        if (visitedRefs.size > MAX_NESTED_DEPTH) {
+            return {
+                ref: ref,
+                fields: [],
+                isDeepNested: true
+            };
+        }
+        return {
+            fields: processTypeFields(refType, fieldId, model, visitedRefs)
+        };
+    }
+    if ('members' in refType) {
+        return {
+            members: refType.members || []
+        };
+    }
+    return {};
+}
+
+/**
+ * Processes fields of a record type
+ */
+function processTypeFields(
+    type: RecordType,
+    parentId: string,
+    model: DMModel,
+    visitedRefs: Set<string>
+): IOType[] {
+    if (!type.fields) { return []; }
+
+    return type.fields.map(field => {
+        const fieldId = generateFieldId(parentId, field.name!);
+        const ioType: IOType = {
+            id: fieldId,
+            name: field.name,
+            displayName: field.displayName,
+            typeName: field.typeName,
+            kind: field.kind,
+            ...(field.optional !== undefined && { optional: field.optional })
+        };
+
+        if (field.kind === TypeKind.Record && field.ref) {
+            return {
+                ...ioType,
+                ...processTypeReference(field.ref, fieldId, model, new Set(visitedRefs))
+            };
+        }
+
+        if (field.kind === TypeKind.Array && field.member) {
+            return {
+                ...ioType,
+                member: processArray(field, fieldId, field.member, model, new Set(visitedRefs))
+            };
+        }
+
+        if (field.kind === TypeKind.Union && field.members) {
+            return {
+                ...ioType,
+                members: processUnion(field.members, fieldId, model, new Set(visitedRefs))
+            };
+        }
+
+        return ioType;
+    });
 }
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/migrate-integration/rpc-handler.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/migrate-integration/rpc-handler.ts
new file mode 100644
index 00000000000..157bd86354d
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/migrate-integration/rpc-handler.ts
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ * 
+ * THIS FILE INCLUDES AUTO GENERATED CODE
+ */
+import {
+    getMigrationTools,
+    importIntegration,
+    ImportIntegrationRPCRequest,
+    migrateProject,
+    MigrateRequest,
+    MigrationToolPullRequest,
+    openMigrationReport,
+    OpenMigrationReportRequest,
+    pullMigrationTool,
+    saveMigrationReport,
+    SaveMigrationReportRequest
+} from "@wso2/ballerina-core";
+import { Messenger } from "vscode-messenger";
+import { MigrateIntegrationRpcManager } from "./rpc-manager";
+
+export function registerMigrateIntegrationRpcHandlers(messenger: Messenger) {
+    const rpcManger = new MigrateIntegrationRpcManager();
+    messenger.onRequest(getMigrationTools, () => rpcManger.getMigrationTools());
+    messenger.onNotification(pullMigrationTool, (args: MigrationToolPullRequest) => rpcManger.pullMigrationTool(args));
+    messenger.onRequest(importIntegration, (args: ImportIntegrationRPCRequest) => rpcManger.importIntegration(args));
+    messenger.onNotification(openMigrationReport, (args: OpenMigrationReportRequest) => rpcManger.openMigrationReport(args));
+    messenger.onNotification(saveMigrationReport, (args: SaveMigrationReportRequest) => rpcManger.saveMigrationReport(args));
+    messenger.onNotification(migrateProject, (args: MigrateRequest) => rpcManger.migrateProject(args));
+}
diff --git a/workspaces/ballerina/ballerina-extension/src/rpc-managers/migrate-integration/rpc-manager.ts b/workspaces/ballerina/ballerina-extension/src/rpc-managers/migrate-integration/rpc-manager.ts
new file mode 100644
index 00000000000..65d64dc91f5
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/rpc-managers/migrate-integration/rpc-manager.ts
@@ -0,0 +1,95 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ *
+ * THIS FILE INCLUDES AUTO GENERATED CODE
+ */
+import {
+    GetMigrationToolsResponse,
+    ImportIntegrationRequest,
+    ImportIntegrationResponse,
+    ImportIntegrationRPCRequest,
+    MigrateIntegrationAPI,
+    MigrateRequest,
+    OpenMigrationReportRequest,
+    SaveMigrationReportRequest
+} from "@wso2/ballerina-core";
+import { StateMachine } from "../../stateMachine";
+import { createBIProjectFromMigration, getUsername, sanitizeName } from "../../utils/bi";
+import { pullMigrationTool } from "../../utils/migrate-integration";
+import { MigrationReportWebview } from "../../views/migration-report/webview";
+
+export class MigrateIntegrationRpcManager implements MigrateIntegrationAPI {
+    async pullMigrationTool(args: { toolName: string; version: string }): Promise<void> {
+        try {
+            await pullMigrationTool(args.toolName, args.version);
+        } catch (error) {
+            console.error(`Failed to pull migration tool '${args.toolName}' version '${args.version}':`, error);
+            throw error;
+        }
+    }
+
+    async importIntegration(params: ImportIntegrationRPCRequest): Promise<ImportIntegrationResponse> {
+        const orgName = getUsername();
+        const langParams: ImportIntegrationRequest = {
+            orgName: orgName,
+            packageName: sanitizeName(params.packageName),
+            sourcePath: params.sourcePath,
+            parameters: params.parameters,
+        };
+        StateMachine.langClient().registerMigrationToolCallbacks();
+        switch (params.commandName) {
+            case "migrate-tibco":
+                return StateMachine.langClient().importTibcoToBI(langParams);
+            case "migrate-mule":
+                return StateMachine.langClient().importMuleToBI(langParams);
+            default:
+                console.error(`Unsupported integration type: ${params.commandName}`);
+                throw new Error(`Unsupported integration type: ${params.commandName}`);
+        }
+    }
+
+    async getMigrationTools(): Promise<GetMigrationToolsResponse> {
+        return StateMachine.langClient().getMigrationTools();
+    }
+
+    async openMigrationReport(params: OpenMigrationReportRequest): Promise<void> {
+        MigrationReportWebview.createOrShow(params.fileName, params.reportContent);
+    }
+
+    async saveMigrationReport(params: SaveMigrationReportRequest): Promise<void> {
+        const vscode = await import('vscode');
+
+        // Show save dialog
+        const saveUri = await vscode.window.showSaveDialog({
+            defaultUri: vscode.Uri.file(params.defaultFileName),
+            filters: {
+                'HTML files': ['html'],
+                'All files': ['*']
+            }
+        });
+
+        if (saveUri) {
+            // Write the report content to the selected file
+            await vscode.workspace.fs.writeFile(saveUri, Buffer.from(params.reportContent, 'utf8'));
+            vscode.window.showInformationMessage(`Migration report saved to ${saveUri.fsPath}`);
+        }
+    }
+
+    async migrateProject(params: MigrateRequest): Promise<void> {
+        createBIProjectFromMigration(params);
+    }
+}
diff --git a/workspaces/ballerina/ballerina-extension/src/stateMachine.ts b/workspaces/ballerina/ballerina-extension/src/stateMachine.ts
index 37fe9b3494d..e9fe3a0a824 100644
--- a/workspaces/ballerina/ballerina-extension/src/stateMachine.ts
+++ b/workspaces/ballerina/ballerina-extension/src/stateMachine.ts
@@ -2,10 +2,10 @@
 import { ExtendedLangClient } from './core';
 import { createMachine, assign, interpret } from 'xstate';
 import { activateBallerina } from './extension';
-import { EVENT_TYPE, SyntaxTree, History, HistoryEntry, MachineStateValue, STByRangeRequest, SyntaxTreeResponse, UndoRedoManager, VisualizerLocation, webviewReady, MACHINE_VIEW, DIRECTORY_MAP, SCOPE, ProjectStructureResponse, ArtifactData, ProjectStructureArtifactResponse, CodeData } from "@wso2/ballerina-core";
+import { EVENT_TYPE, SyntaxTree, History, HistoryEntry, MachineStateValue, STByRangeRequest, SyntaxTreeResponse, UndoRedoManager, VisualizerLocation, webviewReady, MACHINE_VIEW, DIRECTORY_MAP, SCOPE, ProjectStructureResponse, ArtifactData, ProjectStructureArtifactResponse, CodeData, getVisualizerLocation, ProjectDiagnosticsResponse } from "@wso2/ballerina-core";
 import { fetchAndCacheLibraryData } from './features/library-browser';
 import { VisualizerWebview } from './views/visualizer/webview';
-import { commands, extensions, Uri, window, workspace, WorkspaceFolder } from 'vscode';
+import { commands, extensions, ShellExecution, Task, TaskDefinition, tasks, Uri, window, workspace, WorkspaceFolder } from 'vscode';
 import { notifyCurrentWebview, RPCLayer } from './RPCLayer';
 import { generateUid, getComponentIdentifier, getNodeByIndex, getNodeByName, getNodeByUid, getView } from './utils/state-machine-utils';
 import * as path from 'path';
@@ -21,6 +21,7 @@ interface MachineContext extends VisualizerLocation {
     langClient: ExtendedLangClient | null;
     isBISupported: boolean;
     errorCode: string | null;
+    dependenciesResolved?: boolean;
 }
 
 export let history: History;
@@ -36,7 +37,8 @@ const stateMachine = createMachine<MachineContext>(
             langClient: null,
             errorCode: null,
             isBISupported: false,
-            view: MACHINE_VIEW.Overview
+            view: MACHINE_VIEW.Overview,
+            dependenciesResolved: false
         },
         on: {
             RESET_TO_EXTENSION_READY: {
@@ -48,7 +50,10 @@ const stateMachine = createMachine<MachineContext>(
                         projectStructure: (context, event) => event.payload,
                     }),
                     () => {
-                        commands.executeCommand("BI.project-explorer.refresh");
+                        // Use queueMicrotask to ensure context is updated before command execution
+                        queueMicrotask(() => {
+                            commands.executeCommand("BI.project-explorer.refresh");
+                        });
                     }
                 ]
             },
@@ -58,11 +63,38 @@ const stateMachine = createMachine<MachineContext>(
                         documentUri: (context, event) => event.viewLocation.documentUri ? event.viewLocation.documentUri : context.documentUri,
                         position: (context, event) => event.viewLocation.position ? event.viewLocation.position : context.position,
                         identifier: (context, event) => event.viewLocation.identifier ? event.viewLocation.identifier : context.identifier,
+                        addType: (context, event) => event.viewLocation?.addType !== undefined ? event.viewLocation.addType : context?.addType,
                     })
                 ]
+            },
+            SWITCH_PROJECT: {
+                target: "switch_project"
             }
         },
         states: {
+            switch_project: {
+                invoke: {
+                    src: checkForProjects,
+                    onDone: [
+                        {
+                            target: "viewActive.viewReady",
+                            actions: [
+                                assign({
+                                    isBI: (context, event) => event.data.isBI,
+                                    projectUri: (context, event) => event.data.projectPath,
+                                    scope: (context, event) => event.data.scope,
+                                    org: (context, event) => event.data.orgName,
+                                    package: (context, event) => event.data.packageName,
+                                }),
+                                async (context, event) => {
+                                    await buildProjectArtifactsStructure(event.data.projectPath, StateMachine.langClient(), true);
+                                    notifyCurrentWebview();
+                                }
+                            ]
+                        }
+                    ],
+                }
+            },
             initialize: {
                 invoke: {
                     src: checkForProjects,
@@ -171,9 +203,26 @@ const stateMachine = createMachine<MachineContext>(
                     viewInit: {
                         invoke: {
                             src: 'openWebView',
+                            onDone: [
+                                {
+                                    target: "resolveMissingDependencies",
+                                    cond: (context) => !context.dependenciesResolved
+                                },
+                                {
+                                    target: "webViewLoading"
+                                }
+                            ]
+                        }
+                    },
+                    resolveMissingDependencies: {
+                        invoke: {
+                            src: 'resolveMissingDependencies',
                             onDone: {
-                                target: "webViewLoading"
-                            },
+                                target: "webViewLoading",
+                                actions: assign({
+                                    dependenciesResolved: true
+                                })
+                            }
                         }
                     },
                     webViewLoading: {
@@ -313,6 +362,85 @@ const stateMachine = createMachine<MachineContext>(
                 }
             });
         },
+        resolveMissingDependencies: (context, event) => {
+            return new Promise(async (resolve, reject) => {
+                if (context?.projectUri) {
+                    const diagnostics: ProjectDiagnosticsResponse = await StateMachine.langClient().getProjectDiagnostics({
+                        projectRootIdentifier: {
+                            uri: Uri.file(context.projectUri).toString(),
+                        }
+                    });
+
+                    // Check if there are any "cannot resolve module" diagnostics
+                    const hasMissingModuleDiagnostics = diagnostics.errorDiagnosticMap &&
+                        Object.values(diagnostics.errorDiagnosticMap).some(fileDiagnostics => 
+                            fileDiagnostics.some(diagnostic => 
+                                diagnostic.message.includes('cannot resolve module')
+                            )
+                        );
+
+                    // Only proceed with build if there are missing module diagnostics
+                    if (!hasMissingModuleDiagnostics) {
+                        resolve(true);
+                        return;
+                    }
+
+                    const taskDefinition: TaskDefinition = {
+                        type: 'shell',
+                        task: 'run'
+                    };
+
+                    let buildCommand = 'bal build';
+
+                    const config = workspace.getConfiguration('ballerina');
+                    const ballerinaHome = config.get<string>('home');
+                    if (ballerinaHome) {
+                        buildCommand = path.join(ballerinaHome, 'bin', buildCommand);
+                    }
+
+                    const execution = new ShellExecution(buildCommand);
+
+                    if (!workspace.workspaceFolders || workspace.workspaceFolders.length === 0) {
+                        resolve(true);
+                        return;
+                    }
+
+
+                    const task = new Task(
+                        taskDefinition,
+                        workspace.workspaceFolders![0],
+                        'Ballerina Build',
+                        'ballerina',
+                        execution
+                    );
+
+                    try {
+                        const taskExecution = await tasks.executeTask(task);
+
+                        // Wait for task completion
+                        await new Promise<void>((taskResolve) => {
+                            // Listen for task completion
+                            const disposable = tasks.onDidEndTask((taskEndEvent) => {
+                                if (taskEndEvent.execution === taskExecution) {
+                                    console.log('Build task completed');
+
+                                    // Close the terminal pane on completion
+                                    commands.executeCommand('workbench.action.closePanel');
+
+                                    disposable.dispose();
+                                    taskResolve();
+                                }
+                            });
+                        });
+
+                    } catch (error) {
+                        window.showErrorMessage(`Failed to build Ballerina package: ${error}`);
+                    }
+                }
+
+                resolve(true);
+            });
+        },
         findView(context, event): Promise<void> {
             return new Promise(async (resolve, reject) => {
                 if (!context.view && context.langClient) {
@@ -498,7 +626,7 @@ export function openView(type: EVENT_TYPE, viewLocation: VisualizerLocation, res
     stateService.send({ type: type, viewLocation: viewLocation });
 }
 
-export function updateView(refreshTreeView?: boolean) {
+export function updateView(refreshTreeView?: boolean, projectUri?: string) {
     let lastView = getLastHistory();
     // Step over to the next location if the last view is skippable
     if (!refreshTreeView && lastView?.location.view.includes("SKIP")) {
@@ -538,12 +666,12 @@ export function updateView(refreshTreeView?: boolean) {
 
     stateService.send({ type: "VIEW_UPDATE", viewLocation: lastView ? newLocation : { view: "Overview" } });
     if (refreshTreeView) {
-        buildProjectArtifactsStructure(StateMachine.context().projectUri, StateMachine.langClient(), true);
+        buildProjectArtifactsStructure(projectUri || StateMachine.context().projectUri, StateMachine.langClient(), true);
     }
     notifyCurrentWebview();
 }
 
-export function updateInlineDataMapperView(codedata?: CodeData, variableName?: string) {
+export function updateDataMapperView(codedata?: CodeData, variableName?: string) {
     let lastView: HistoryEntry = getLastHistory();
     lastView.location.dataMapperMetadata = {
         codeData: codedata,
diff --git a/workspaces/ballerina/ballerina-extension/src/utils/ai/auth.ts b/workspaces/ballerina/ballerina-extension/src/utils/ai/auth.ts
index 7dcc552440f..3b258df7b44 100644
--- a/workspaces/ballerina/ballerina-extension/src/utils/ai/auth.ts
+++ b/workspaces/ballerina/ballerina-extension/src/utils/ai/auth.ts
@@ -191,6 +191,10 @@ export const getAccessToken = async (): Promise<string | undefined> => {
                         resolve(credentials.secrets.apiKey);
                         return;
 
+                    case LoginMethod.AWS_BEDROCK:
+                        resolve(credentials.secrets.accessKeyId);
+                        return;
+
                     default:
                         const { loginMethod }: AuthCredentials = credentials;
                         reject(new Error(`Unsupported login method: ${loginMethod}`));
@@ -205,6 +209,19 @@ export const getAccessToken = async (): Promise<string | undefined> => {
     });
 };
 
+export const getAwsBedrockCredentials = async (): Promise<{
+    accessKeyId: string;
+    secretAccessKey: string;
+    region: string;
+    sessionToken?: string;
+} | undefined> => {
+    const credentials = await getAuthCredentials();
+    if (!credentials || credentials.loginMethod !== LoginMethod.AWS_BEDROCK) {
+        return undefined;
+    }
+    return credentials.secrets;
+};
+
 export const getRefreshedAccessToken = async (): Promise<string> => {
     return new Promise(async (resolve, reject) => {
         const CommonReqHeaders = {
diff --git a/workspaces/ballerina/ballerina-extension/src/utils/bi.ts b/workspaces/ballerina/ballerina-extension/src/utils/bi.ts
index fbe6f502c97..5a4610ab88f 100644
--- a/workspaces/ballerina/ballerina-extension/src/utils/bi.ts
+++ b/workspaces/ballerina/ballerina-extension/src/utils/bi.ts
@@ -15,20 +15,77 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
 import { exec } from "child_process";
 import { window, commands, workspace, Uri } from "vscode";
 import * as fs from 'fs';
 import path from "path";
-import { BallerinaProjectComponents, ComponentRequest, CreateComponentResponse, createFunctionSignature, EVENT_TYPE, NodePosition, STModification, SyntaxTreeResponse } from "@wso2/ballerina-core";
+import { BallerinaProjectComponents, ComponentRequest, CreateComponentResponse, createFunctionSignature, EVENT_TYPE, MigrateRequest, NodePosition, ProjectRequest, STModification, SyntaxTreeResponse } from "@wso2/ballerina-core";
 import { StateMachine, history, openView } from "../stateMachine";
 import { applyModifications, modifyFileContent, writeBallerinaFileDidOpen } from "./modification";
 import { ModulePart, STKindChecker } from "@wso2/syntax-tree";
 import { URI } from "vscode-uri";
+import { debug } from "./logger";
 
 export const README_FILE = "readme.md";
 export const FUNCTIONS_FILE = "functions.bal";
 export const DATA_MAPPING_FILE = "data_mappings.bal";
 
+const settingsJsonContent = `
+{
+    "ballerina.isBI": true
+}
+`;
+
+const launchJsonContent = `
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Ballerina Debug",
+            "type": "ballerina",
+            "request": "launch",
+            "programArgs": [],
+            "commandOptions": [],
+            "env": {}
+        },
+        {
+            "name": "Ballerina Test",
+            "type": "ballerina",
+            "request": "launch",
+            "debugTests": true,
+            "programArgs": [],
+            "commandOptions": [],
+            "env": {}
+        },
+        {
+            "name": "Ballerina Remote",
+            "type": "ballerina",
+            "request": "attach",
+            "debuggeeHost": "127.0.0.1",
+            "debuggeePort": "5005"
+        }
+    ]
+}
+`;
+
+const gitignoreContent = `
+# Ballerina generates this directory during the compilation of a package.
+# It contains compiler-generated artifacts and the final executable if this is an application package.
+target/
+
+# Ballerina maintains the compiler-generated source code here.
+# Remove this if you want to commit generated sources.
+generated/
+
+# Contains configuration values used during development time.
+# See https://ballerina.io/learn/provide-values-to-configurable-variables/ for more details.
+Config.toml
+`;
+
 export function openBIProject() {
     window.showOpenDialog({ canSelectFolders: true, canSelectFiles: false, openLabel: 'Open Integration' })
         .then(uri => {
@@ -77,97 +134,67 @@ export function createBIProject(name: string, isService: boolean) {
         });
 }
 
-export function createBIProjectPure(name: string, projectPath: string) {
-    const projectLocation = projectPath;
+export function getUsername(): string {
+    // Get current username from the system across different OS platforms
+    let username: string;
+    if (process.platform === 'win32') {
+        // Windows
+        username = process.env.USERNAME || 'myOrg';
+    } else {
+        // macOS and Linux
+        username = process.env.USER || 'myOrg';
+    }
+    return username;
+}
 
-    name = sanitizeName(name);
-    const projectRoot = path.join(projectLocation, name);
-    // Create project root directory
-    if (!fs.existsSync(projectRoot)) {
-        fs.mkdirSync(projectRoot);
+function setupProjectInfo(projectRequest: ProjectRequest) {
+    const sanitizedPackageName = sanitizeName(projectRequest.packageName);
+    
+    const projectRoot = projectRequest.createDirectory 
+        ? path.join(projectRequest.projectPath, sanitizedPackageName)
+        : projectRequest.projectPath;
+    
+    // Create project root directory if needed
+    if (projectRequest.createDirectory && !fs.existsSync(projectRoot)) {
+        fs.mkdirSync(projectRoot, { recursive: true });
     }
 
-    // Get current username from the system across different OS platforms
-    let username;
-    try {
-        if (process.platform === 'win32') {
-            // Windows
-            username = process.env.USERNAME || 'myOrg';
-        } else {
-            // macOS and Linux
-            username = process.env.USER || 'myOrg';
-        }
-    } catch (error) {
-        console.error('Error getting username:', error);
+    let finalOrgName = projectRequest.orgName;
+    if (!finalOrgName) {
+        finalOrgName = getUsername();
     }
 
+    const finalVersion = projectRequest.version || "0.1.0";
+
+    return {
+        sanitizedPackageName,
+        projectRoot,
+        finalOrgName,
+        finalVersion,
+        packageName: projectRequest.packageName,
+        integrationName: projectRequest.projectName
+    };
+}
+
+export function createBIProjectPure(projectRequest: ProjectRequest) {
+    const projectInfo = setupProjectInfo(projectRequest);
+    const { projectRoot, finalOrgName, finalVersion, packageName: finalPackageName, integrationName } = projectInfo;
+
     const EMPTY = "\n";
 
     const ballerinaTomlContent = `
 [package]
-org = "${username}"
-name = "${name}"
-version = "0.1.0"
+org = "${finalOrgName}"
+name = "${finalPackageName}"
+version = "${finalVersion}"
+title = "${integrationName}"
 
 [build-options]
 sticky = true
 
 `;
 
-    const settingsJsonContent = `
-{
-    "ballerina.isBI": true
-}
-`;
 
-    const launchJsonContent = `
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "name": "Ballerina Debug",
-            "type": "ballerina",
-            "request": "launch",
-            "programArgs": [],
-            "commandOptions": [],
-            "env": {}
-        },
-        {
-            "name": "Ballerina Test",
-            "type": "ballerina",
-            "request": "launch",
-            "debugTests": true,
-            "programArgs": [],
-            "commandOptions": [],
-            "env": {}
-        },
-        {
-            "name": "Ballerina Remote",
-            "type": "ballerina",
-            "request": "attach",
-            "debuggeeHost": "127.0.0.1",
-            "debuggeePort": "5005"
-        }
-    ]
-}
-`;
-
-    const gitignoreContent = `
-# Ballerina generates this directory during the compilation of a package.
-# It contains compiler-generated artifacts and the final executable if this is an application package.
-target/
-
-# Ballerina maintains the compiler-generated source code here.
-# Remove this if you want to commit generated sources.
-generated/
-
-# Contains configuration values used during development time.
-# See https://ballerina.io/learn/provide-values-to-configurable-variables/ for more details.
-Config.toml
-`;
 
     // Create Ballerina.toml file
     const ballerinaTomlPath = path.join(projectRoot, 'Ballerina.toml');
@@ -223,6 +250,47 @@ Config.toml
     commands.executeCommand('vscode.openFolder', Uri.file(path.resolve(projectRoot)));
 }
 
+export async function createBIProjectFromMigration(params: MigrateRequest) {
+    const projectInfo = setupProjectInfo(params.project);
+    const { projectRoot, sanitizedPackageName } = projectInfo;
+
+    const EMPTY = "\n";
+    // Write files based on keys in params.textEdits
+    for (const [fileName, fileContent] of Object.entries(params.textEdits)) {
+        let content = fileContent;
+        const filePath = path.join(projectRoot, fileName);
+
+        if (fileName === "Ballerina.toml") {
+            content = content.replace(/name = ".*?"/, `name = "${sanitizedPackageName}"`);
+            content = content.replace(/org = ".*?"/, `org = "${projectInfo.finalOrgName}"`);
+            content = content.replace(/version = ".*?"/, `version = "${projectInfo.finalVersion}"\ntitle = "${projectInfo.integrationName}"`);
+        }
+        
+        writeBallerinaFileDidOpen(filePath, content || EMPTY);
+    }
+
+    // Create a .vscode folder
+    const vscodeDir = path.join(projectRoot, '.vscode');
+    if (!fs.existsSync(vscodeDir)) {
+        fs.mkdirSync(vscodeDir);
+    }
+
+    // Create launch.json file
+    const launchPath = path.join(vscodeDir, 'launch.json');
+    fs.writeFileSync(launchPath, launchJsonContent.trim());
+
+    // Create settings.json file
+    const settingsPath = path.join(vscodeDir, 'settings.json');
+    fs.writeFileSync(settingsPath, settingsJsonContent);
+
+    // Create .gitignore file
+    const gitignorePath = path.join(projectRoot, '.gitignore');
+    fs.writeFileSync(gitignorePath, gitignoreContent.trim());
+
+    debug(`BI project created successfully at ${projectRoot}`);
+    commands.executeCommand('vscode.openFolder', Uri.file(path.resolve(projectRoot)));
+}
+
 export async function createBIAutomation(params: ComponentRequest): Promise<CreateComponentResponse> {
     return new Promise(async (resolve) => {
         const functionFile = await handleAutomationCreation(params);
@@ -350,7 +418,7 @@ export async function handleFunctionCreation(targetFile: string, params: Compone
 // <---------- Function Source Generation END-------->
 // Test_Integration test_integration   Test Integration testIntegration -> testintegration
 export function sanitizeName(name: string): string {
-    return name.replace(/[^a-z0-9]/gi, '_').toLowerCase(); // Replace invalid characters with underscores
+    return name.replace(/[^a-z0-9]_./gi, '_').toLowerCase(); // Replace invalid characters with underscores
 }
 
 // ------------------- HACKS TO MANIPULATE PROJECT FILES ---------------->
diff --git a/workspaces/ballerina/ballerina-extension/src/utils/config.ts b/workspaces/ballerina/ballerina-extension/src/utils/config.ts
index 47ca4ad8bc9..53073684086 100644
--- a/workspaces/ballerina/ballerina-extension/src/utils/config.ts
+++ b/workspaces/ballerina/ballerina-extension/src/utils/config.ts
@@ -62,6 +62,16 @@ export function isWindows(): boolean {
     return process.platform === "win32";
 }
 
+export function isWSL(): boolean {
+    // Check for WSL environment indicators
+    return process.platform === "linux" && (
+        process.env.WSL_DISTRO_NAME !== undefined ||
+        process.env.WSLENV !== undefined ||
+        (process.env.PATH && process.env.PATH.includes('/mnt/c/')) ||
+        (process.env.TERM_PROGRAM && process.env.TERM_PROGRAM.includes('vscode'))
+    );
+}
+
 export function isSupportedVersion(ballerinaExtInstance: BallerinaExtension, supportedRelease: VERSION,
     supportedVersion: number): boolean {
     const ballerinaVersion: string = ballerinaExtInstance.ballerinaVersion.toLocaleLowerCase();
@@ -123,26 +133,26 @@ export function checkIsBallerina(uri: Uri): boolean {
 
 export function getOrgPackageName(projectPath: string): { orgName: string, packageName: string } {
     const ballerinaTomlPath = path.join(projectPath, 'Ballerina.toml');
-    
+
     // Regular expressions for Ballerina.toml parsing
     const ORG_REGEX = /\[package\][\s\S]*?org\s*=\s*["']([^"']*)["']/;
     const NAME_REGEX = /\[package\][\s\S]*?name\s*=\s*["']([^"']*)["']/;
 
     if (!fs.existsSync(ballerinaTomlPath)) {
-        return {orgName: '', packageName: ''};
+        return { orgName: '', packageName: '' };
     }
-    
+
     try {
         const tomlContent = fs.readFileSync(ballerinaTomlPath, 'utf8');
-        
+
         // Extract org name and package name
         const orgName = tomlContent.match(ORG_REGEX)?.[1] || '';
         const packageName = tomlContent.match(NAME_REGEX)?.[1] || '';
-        
-        return {orgName, packageName};
+
+        return { orgName, packageName };
     } catch (error) {
         console.error(`Error reading Ballerina.toml: ${error}`);
-        return {orgName: '', packageName: ''};
+        return { orgName: '', packageName: '' };
     }
 }
 
diff --git a/workspaces/ballerina/ballerina-extension/src/utils/migrate-integration.ts b/workspaces/ballerina/ballerina-extension/src/utils/migrate-integration.ts
new file mode 100644
index 00000000000..5851b19636c
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/utils/migrate-integration.ts
@@ -0,0 +1,265 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { DownloadProgress, onDownloadProgress } from "@wso2/ballerina-core";
+import { exec } from "child_process";
+import { extension } from "../BalExtensionContext";
+import { RPCLayer } from "../RPCLayer";
+import { VisualizerWebview } from "../views/visualizer/webview";
+import { debug } from "./logger";
+
+const PROGRESS_COMPLETE = 100;
+
+/**
+ * Executes the `bal tool pull` command and sends progress notifications to the webview client via RPC.
+ * Includes 5-minute timeout.
+ *
+ * @param migrationToolName The alias for the Ballerina tool to pull (e.g., "migrate-tibco", "migrate-mule").
+ * @param version The version of the tool to pull (e.g., "1.1.1").
+ * @returns A promise that resolves when the operation is complete or rejects on failure.
+ */
+export async function pullMigrationTool(migrationToolName: string, version: string): Promise<void> {
+    // 1. Initial validation and command mapping
+    if (!migrationToolName) {
+        const errorMessage = "Migration tool name is required";
+        return Promise.reject(new Error(errorMessage));
+    }
+
+    if (!version) {
+        const errorMessage = "Migration tool version is required";
+        return Promise.reject(new Error(errorMessage));
+    }
+
+    const toolCommandSet = new Set(["migrate-tibco", "migrate-mule"]);
+
+    if (!toolCommandSet.has(migrationToolName)) {
+        const errorMessage = `Unsupported migration tool: ${migrationToolName}`;
+        return Promise.reject(new Error(errorMessage));
+    }
+
+    const ballerinaCmd = extension.ballerinaExtInstance.getBallerinaCmd();
+    const command = `${ballerinaCmd} tool pull ${migrationToolName}:${version}`;
+    debug(`Executing migration tool pull command: ${command}`);
+
+    // 2. This function now returns a promise that wraps the exec lifecycle
+    return new Promise<void>((resolve, reject) => {
+        // Helper to send notifications to the webview
+        const sendProgress = (progress: DownloadProgress) => {
+            RPCLayer._messenger.sendNotification(
+                onDownloadProgress,
+                { type: "webview", webviewType: VisualizerWebview.viewType },
+                progress
+            );
+        };
+
+        // Send initial progress update
+        sendProgress({
+            message: "Initializing tool download...",
+            percentage: 0,
+            success: false,
+            step: 1,
+        });
+
+        const childProcess = exec(command, {
+            maxBuffer: 1024 * 1024,
+            timeout: 300000 // 5 minutes timeout
+        });
+
+        let accumulatedStdout = "";
+        let progressReported = 0;
+
+        // 3. Process the command's standard output with carriage return handling
+        childProcess.stdout?.on("data", (data: Buffer) => {
+            const output = data.toString();
+            accumulatedStdout += output;
+            debug(`Tool pull stdout chunk: ${output.replace(/\r/g, '\\r').replace(/\n/g, '\\n')}`);
+
+            // Handle carriage return progress updates - split by \r and take the last meaningful line
+            const lines = output.split('\r');
+            const lastLine = lines[lines.length - 1] || lines[lines.length - 2] || '';
+
+            // Case A: Tool is already installed (high-priority check)
+            if (accumulatedStdout.includes("is already available locally")) {
+                if (progressReported < PROGRESS_COMPLETE) {
+                    progressReported = PROGRESS_COMPLETE;
+                    sendProgress({
+                        message: "Tool is already installed.",
+                        percentage: PROGRESS_COMPLETE,
+                        success: true,
+                        step: 3,
+                    });
+                }
+            }
+            // Case B: Download is complete (check for success message)
+            else if (accumulatedStdout.includes("pulled from central successfully")) {
+                if (progressReported < PROGRESS_COMPLETE) {
+                    progressReported = PROGRESS_COMPLETE;
+                    sendProgress({
+                        message: "Download complete. Finalizing...",
+                        percentage: PROGRESS_COMPLETE,
+                        success: false, // Not fully successful until the process closes with code 0
+                        step: 2,
+                    });
+                }
+            }
+            // Case C: Parse the percentage from the progress bar output
+            else {
+                // Look for percentage in the current line (handles carriage return updates)
+                const percentageMatch = lastLine.match(/\s+(\d{1,3})\s*%/);
+
+                if (percentageMatch) {
+                    const currentPercentage = parseInt(percentageMatch[1], 10);
+
+                    // Update progress if it's a valid number and moving forward
+                    if (!isNaN(currentPercentage) && currentPercentage > progressReported && currentPercentage <= PROGRESS_COMPLETE) {
+                        progressReported = currentPercentage;
+
+                        // Extract download info from progress line if available
+                        const sizeMatch = lastLine.match(/(\d+)\/(\d+)\s+KB/);
+                        let message = `Downloading... ${currentPercentage}%`;
+
+                        if (sizeMatch) {
+                            const downloaded = parseInt(sizeMatch[1], 10);
+                            const total = parseInt(sizeMatch[2], 10);
+                            message = `Downloading... ${currentPercentage}% (${Math.round(downloaded / 1024)}/${Math.round(total / 1024)} MB)`;
+                        }
+
+                        sendProgress({
+                            message,
+                            percentage: currentPercentage,
+                            success: false,
+                            step: 2,
+                        });
+                    }
+                }
+                // Also check for any percentage in the accumulated output as fallback
+                else {
+                    const allPercentageMatches = output.match(/(\d{1,3})\s*%/g);
+                    if (allPercentageMatches) {
+                        const lastMatch = allPercentageMatches[allPercentageMatches.length - 1];
+                        const currentPercentage = parseInt(lastMatch, 10);
+
+                        if (!isNaN(currentPercentage) && currentPercentage > progressReported && currentPercentage <= PROGRESS_COMPLETE) {
+                            progressReported = currentPercentage;
+                            sendProgress({
+                                message: `Downloading... ${currentPercentage}%`,
+                                percentage: currentPercentage,
+                                success: false,
+                                step: 2,
+                            });
+                        }
+                    }
+                }
+            }
+        });
+
+        // 4. Handle standard error output with improved filtering
+        childProcess.stderr?.on("data", (data: Buffer) => {
+            const errorOutput = data.toString().trim();
+            debug(`Tool pull stderr: ${errorOutput}`);
+
+            // Filter out non-critical messages that shouldn't cause failure
+            const nonCriticalPatterns = [
+                /is already active/i,
+                /warning:/i,
+                /deprecated/i
+            ];
+
+            const isNonCritical = nonCriticalPatterns.some(pattern => pattern.test(errorOutput));
+
+            if (isNonCritical) {
+                debug(`Ignoring non-critical stderr: ${errorOutput}`);
+                return;
+            }
+
+            // Only treat as error if it's a real error message
+            if (errorOutput.length > 0) {
+                sendProgress({
+                    message: `Error: ${errorOutput}`,
+                    success: false,
+                    step: -1,
+                });
+                reject(new Error(errorOutput));
+            }
+        });
+
+        // 5. Handle the definitive end of the process
+        childProcess.on("close", (code) => {
+            debug(`Tool pull command exited with code ${code}`);
+
+            // Success conditions: code 0, or code 1 with "already available" message
+            const isAlreadyInstalled = accumulatedStdout.includes("is already available locally");
+            const isSuccessfulDownload = accumulatedStdout.includes("pulled from central successfully") ||
+                accumulatedStdout.includes("successfully set as the active version");
+
+            if (code === 0 || (code === 1 && isAlreadyInstalled)) {
+                let finalMessage: string;
+
+                if (isAlreadyInstalled) {
+                    finalMessage = `Tool '${migrationToolName}' is already installed.`;
+                } else if (isSuccessfulDownload) {
+                    finalMessage = `Successfully pulled '${migrationToolName}'.`;
+                } else {
+                    finalMessage = `Tool pull completed with code ${code}. Please check the logs for more details.`;
+                }
+
+                sendProgress({
+                    message: finalMessage,
+                    percentage: PROGRESS_COMPLETE,
+                    success: true,
+                    step: 3,
+                });
+                resolve();
+            } else {
+                const errorMessage = `Tool pull failed with exit code ${code}. Check logs for details.`;
+                sendProgress({
+                    message: errorMessage,
+                    success: false,
+                    step: -1,
+                });
+                reject(new Error(errorMessage));
+            }
+        });
+
+        // Handle process execution errors (e.g., command not found)
+        childProcess.on("error", (error) => {
+            debug(`Tool pull process error: ${error.message}`);
+
+            const errorMessage = `Failed to execute command: ${error.message}`;
+            sendProgress({
+                message: errorMessage,
+                success: false,
+                step: -1,
+            });
+            reject(new Error(errorMessage));
+        });
+
+        // Handle timeout from exec options
+        childProcess.on("timeout", () => {
+            debug("Tool pull process timed out after 5 minutes");
+
+            const errorMessage = "Download timed out after 5 minutes";
+            sendProgress({
+                message: errorMessage,
+                success: false,
+                step: -1,
+            });
+            reject(new Error("Migration tool pull timed out after 5 minutes"));
+        });
+    });
+}
diff --git a/workspaces/ballerina/ballerina-extension/src/utils/modification.ts b/workspaces/ballerina/ballerina-extension/src/utils/modification.ts
index 8b44c9a135e..83c14f3eca2 100644
--- a/workspaces/ballerina/ballerina-extension/src/utils/modification.ts
+++ b/workspaces/ballerina/ballerina-extension/src/utils/modification.ts
@@ -54,7 +54,7 @@ export async function modifyFileContent(params: UpdateFileContentRequest): Promi
         }
         return doc.save();
     } else {
-        writeBallerinaFileDidOpen(normalizedFilePath, content);
+        await writeBallerinaFileDidOpen(normalizedFilePath, content);
         StateMachine.langClient().updateStatusBar();
         if (updateViewFlag) {
             updateView();
@@ -64,6 +64,26 @@ export async function modifyFileContent(params: UpdateFileContentRequest): Promi
     return false;
 }
 
+export function writeBallerinaFileDidOpenTemp(filePath: string, content: string) {
+    writeFileSync(filePath, content.trim());
+    StateMachine.langClient().didChange({
+        textDocument: { uri: filePath, version: 1 },
+        contentChanges: [
+            {
+                text: content,
+            },
+        ],
+    });
+    StateMachine.langClient().didOpen({
+        textDocument: {
+            uri: Uri.file(filePath).toString(),
+            languageId: 'ballerina',
+            version: 1,
+            text: content.trim()
+        }
+    });
+}
+
 export async function writeBallerinaFileDidOpen(filePath: string, content: string) {
     writeFileSync(filePath, content.trim());
     StateMachine.langClient().didChange({
diff --git a/workspaces/ballerina/ballerina-extension/src/utils/project-artifacts.ts b/workspaces/ballerina/ballerina-extension/src/utils/project-artifacts.ts
index 7b3d06b5752..2986b4af249 100644
--- a/workspaces/ballerina/ballerina-extension/src/utils/project-artifacts.ts
+++ b/workspaces/ballerina/ballerina-extension/src/utils/project-artifacts.ts
@@ -15,18 +15,18 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-
+import * as vscode from "vscode";
 import { URI, Utils } from "vscode-uri";
-import { ARTIFACT_TYPE, Artifacts, ArtifactsNotification, BaseArtifact, DIRECTORY_MAP, EVENT_TYPE, MACHINE_VIEW, NodePosition, ProjectStructureArtifactResponse, ProjectStructureResponse, VisualizerLocation } from "@wso2/ballerina-core";
+import { ARTIFACT_TYPE, Artifacts, ArtifactsNotification, BaseArtifact, DIRECTORY_MAP, NodePosition, ProjectStructureArtifactResponse, ProjectStructureResponse } from "@wso2/ballerina-core";
 import { StateMachine } from "../stateMachine";
 import * as fs from 'fs';
 import * as path from 'path';
 import { ExtendedLangClient } from "../core/extended-language-client";
 import { ServiceDesignerRpcManager } from "../rpc-managers/service-designer/rpc-manager";
 import { AiAgentRpcManager } from "../rpc-managers/ai-agent/rpc-manager";
-import { injectAgentCode, injectImportIfMissing } from "./source-utils";
-import { tmpdir } from "os";
+import { injectAgentCode } from "./source-utils";
 import { ArtifactsUpdated, ArtifactNotificationHandler } from "./project-artifacts-handler";
+import { CommonRpcManager } from "../rpc-managers/common/rpc-manager";
 
 export async function buildProjectArtifactsStructure(projectDir: string, langClient: ExtendedLangClient, isUpdate: boolean = false): Promise<ProjectStructureResponse> {
     const result: ProjectStructureResponse = {
@@ -51,6 +51,17 @@ export async function buildProjectArtifactsStructure(projectDir: string, langCli
         traverseComponents(designArtifacts.artifacts, result);
         await populateLocalConnectors(projectDir, result);
     }
+    // Attempt to get the project name from the workspace folder as a fallback if not found in Ballerina.toml
+    const workspace = vscode.workspace.workspaceFolders?.find(folder => folder.uri.fsPath === projectDir);
+    let projectName = workspace?.name;
+    // Get the project name from the ballerina.toml file
+    const commonRpcManager = new CommonRpcManager();
+    const tomlValues = await commonRpcManager.getCurrentProjectTomlValues();
+    if (tomlValues && tomlValues.package.title) {
+        projectName = tomlValues.package.title;
+    }
+    result.projectName = projectName;
+
     if (isUpdate) {
         StateMachine.updateProjectStructure({ ...result });
     }
@@ -71,6 +82,13 @@ export async function updateProjectArtifacts(publishedArtifacts: ArtifactsNotifi
             timestamp: Date.now()
         });
         StateMachine.updateProjectStructure({ ...currentProjectStructure }); // Update the project structure and refresh the tree
+    } else {
+        const notificationHandler = ArtifactNotificationHandler.getInstance();
+        // Publish a notification to the artifact handler
+        notificationHandler.publish(ArtifactsUpdated.method, {
+            data: [],
+            timestamp: Date.now()
+        });
     }
 }
 
diff --git a/workspaces/ballerina/ballerina-extension/src/utils/server/server.ts b/workspaces/ballerina/ballerina-extension/src/utils/server/server.ts
index 7a83aa4a6ef..3f68ce24cf4 100644
--- a/workspaces/ballerina/ballerina-extension/src/utils/server/server.ts
+++ b/workspaces/ballerina/ballerina-extension/src/utils/server/server.ts
@@ -55,19 +55,19 @@ function findJarsExcludingPatterns(directory: string, excludePatterns: string[])
         }
         const files = fs.readdirSync(directory);
         const matchingJars: string[] = [];
-        
+
         const compiledPatterns = excludePatterns.map(pattern => new RegExp(pattern.replace(/\*/g, '.*')));
-        
+
         files.forEach(file => {
             if (file.endsWith('.jar')) {
                 const shouldExclude = compiledPatterns.some(regex => regex.test(file));
-                
+
                 if (!shouldExclude) {
                     matchingJars.push(path.join(directory, file));
                 }
             }
         });
-        
+
         return matchingJars;
     } catch (error) {
         console.error(`Error reading directory ${directory}:`, error);
@@ -77,13 +77,13 @@ function findJarsExcludingPatterns(directory: string, excludePatterns: string[])
 
 function parseJdkVersion(versionString: string): { parsedVersion: number[], buildNumber: number } {
     const [mainVersion, buildPart] = versionString.split('+');
-    
+
     const parsedVersion = mainVersion
         .split('.')
         .map(num => parseInt(num, 10) || 0);
-    
+
     const buildNumber = parseInt(buildPart || '0', 10);
-    
+
     return { parsedVersion, buildNumber };
 }
 
@@ -93,10 +93,10 @@ function extractJdkInfo(fileName: string, directory: string): JdkInfo | null {
     if (!match) {
         return null;
     }
-    
+
     const versionString = match[1];
     const { parsedVersion, buildNumber } = parseJdkVersion(versionString);
-    
+
     return {
         name: fileName,
         version: versionString,
@@ -112,19 +112,19 @@ export function findHighestVersionJdk(directory: string): string | null {
             debug(`Dependencies directory not found: ${directory}`);
             return null;
         }
-        
+
         const files = fs.readdirSync(directory);
         debug(`Found files in dependencies directory: ${files.join(', ')}`);
-        
+
         const jdkInfos = files
             .map(file => extractJdkInfo(file, directory))
             .filter((jdk): jdk is JdkInfo => jdk !== null);
-        
+
         if (jdkInfos.length === 0) {
             debug(`No JDK directories found matching pattern in: ${directory}`);
             return null;
         }
-        
+
         const sortedJdks = orderBy(jdkInfos, [
             // sort by major version (descending)
             (jdk: JdkInfo) => jdk.parsedVersion[0] || 0,
@@ -135,12 +135,12 @@ export function findHighestVersionJdk(directory: string): string | null {
             // sort by build number (descending)
             (jdk: JdkInfo) => jdk.buildNumber
         ], ['desc', 'desc', 'desc', 'desc']);
-        
+
         const highestVersionJdk = sortedJdks[0];
-        
+
         debug(`Selected JDK: ${highestVersionJdk.name} at ${highestVersionJdk.fullPath}`);
         return highestVersionJdk.fullPath;
-        
+
     } catch (error) {
         console.error(`Error reading directory ${directory}:`, error);
         return null;
@@ -148,9 +148,10 @@ export function findHighestVersionJdk(directory: string): string | null {
 }
 
 export function getServerOptions(extension: BallerinaExtension): ServerOptions {
+    debug('Getting server options.');
     // Check if user wants to use Ballerina CLI language server or if version requires it
     const BI_SUPPORTED_MINIMUM_VERSION = 2201123; // 2201.12.3
-    if (extension?.useDistributionLanguageServer() ||!isSupportedSLVersion(extension, BI_SUPPORTED_MINIMUM_VERSION) ) {
+    if (extension?.useDistributionLanguageServer() || !isSupportedSLVersion(extension, BI_SUPPORTED_MINIMUM_VERSION)) {
         return getServerOptionsUsingCLI(extension);
     } else {
         return getServerOptionsUsingJava(extension);
@@ -161,13 +162,13 @@ function getServerOptionsUsingCLI(extension: BallerinaExtension): ServerOptions
     const ballerinaCmd = extension.getBallerinaCmd();
     debug(`Using bal command to start language server.`);
     debug(`Using Ballerina CLI command '${ballerinaCmd}'`);
-    
+
     let cmd = isWindows() ? 'cmd.exe' : ballerinaCmd;
     let args = ["start-language-server"];
     if (isWindows()) {
         args = ['/c', ballerinaCmd, 'start-language-server'];
     }
-    
+
     let opt: ExecutableOptions = {};
     opt.env = Object.assign({}, process.env);
 
@@ -178,7 +179,7 @@ function getServerOptionsUsingCLI(extension: BallerinaExtension): ServerOptions
             opt.env.BALLERINA_CLASSPATH_EXT = process.env.LS_EXTENSIONS_PATH;
         }
     }
-    
+
     if (process.env.LSDEBUG === "true" || extension?.enableLSDebug()) {
         debug('Language Server is starting in debug mode.');
         let debugPort = 5005;
@@ -215,7 +216,7 @@ function getServerOptionsUsingJava(extension: BallerinaExtension): ServerOptions
             opt.env.BALLERINA_CLASSPATH_EXT = process.env.LS_EXTENSIONS_PATH;
         }
     }
-    
+
     let debugOpts = '';
     if (process.env.LSDEBUG === "true" || extension?.enableLSDebug()) {
         let debugPort = 5005;
@@ -225,10 +226,10 @@ function getServerOptionsUsingJava(extension: BallerinaExtension): ServerOptions
 
     const ballerinaHome = isWindows() ? fs.realpathSync.native(extension?.getBallerinaHome()) : extension?.getBallerinaHome();
     // Get the base ballerina home by removing the distribution part
-    const baseHome = ballerinaHome.includes('distributions') 
+    const baseHome = ballerinaHome.includes('distributions')
         ? ballerinaHome.substring(0, ballerinaHome.indexOf('distributions'))
         : ballerinaHome;
-    
+
     // jar patterns to exclude
     const excludeJarPatterns = [
         'architecture-model*',
@@ -250,20 +251,21 @@ function getServerOptionsUsingJava(extension: BallerinaExtension): ServerOptions
         join(ballerinaHome, 'lib', 'tools', 'lang-server', 'lib'),
         join(ballerinaHome, 'lib', 'tools', 'debug-adapter', 'lib')
     ];
-    
-    const ballerinaJarPaths = directoriesToSearch.flatMap(directory => 
+
+    const ballerinaJarPaths = directoriesToSearch.flatMap(directory =>
         findJarsExcludingPatterns(directory, excludeJarPatterns)
     );
-    
+
     ballerinaJarPaths.forEach(jarPath => {
         if (!fs.existsSync(jarPath)) {
+            debug(`Ballerina jar not found in ${jarPath}`);
             log(`Ballerina jar not found in ${jarPath}`);
         }
     });
 
     let ballerinaLanguageServerJar: string | null = null;
     const configuredLangServerPath = extension?.getConfiguredLangServerPath();
-    
+
     if (configuredLangServerPath && configuredLangServerPath.trim() !== "") {
         debug(`Using custom language server path: ${configuredLangServerPath}`);
         // User provided custom language server path
@@ -276,9 +278,9 @@ function getServerOptionsUsingJava(extension: BallerinaExtension): ServerOptions
     } else {
         debug(`Using bundled language server from ls directory.`);
         // Use bundled language server from ls directory
-        const lsDir = extension?.context.asAbsolutePath("ls");    
+        const lsDir = extension?.context.asAbsolutePath("ls");
         ballerinaLanguageServerJar = findFileByPattern(lsDir, /^ballerina-language-server.*\.jar$/);
-        
+
         if (!ballerinaLanguageServerJar || !fs.existsSync(ballerinaLanguageServerJar)) {
             debug(`No ballerina language server jar found in: ${lsDir}`);
             throw new Error(`Language server JAR not found in ${lsDir}`);
@@ -286,6 +288,7 @@ function getServerOptionsUsingJava(extension: BallerinaExtension): ServerOptions
     }
 
     const jarName = path.basename(configuredLangServerPath || ballerinaLanguageServerJar);
+    debug(`Language Server JAR: ${jarName}`);
     const versionMatch = jarName.match(/ballerina-language-server-(.+)\.jar$/);
     if (versionMatch) {
         log(`Language Server Version: ${versionMatch[1]}`);
@@ -294,17 +297,18 @@ function getServerOptionsUsingJava(extension: BallerinaExtension): ServerOptions
     }
 
     const customPaths = [...ballerinaJarPaths, ballerinaLanguageServerJar];
+    // debug(`Custom paths: ${customPaths}`);
     if (process.env.LS_CUSTOM_CLASSPATH) {
         debug(`LS_CUSTOM_CLASSPATH: ${process.env.LS_CUSTOM_CLASSPATH}`);
         customPaths.push(process.env.LS_CUSTOM_CLASSPATH);
     }
-    
+
     const classpath = customPaths.join(delimiter);
-    
+
     // Find any JDK in the dependencies directory
     const dependenciesDir = join(baseHome, 'dependencies');
     const jdkDir = findHighestVersionJdk(dependenciesDir);
-    
+    debug(`JDK Directory: ${jdkDir}`);
     if (!jdkDir) {
         debug(`No JDK found in dependencies directory: ${dependenciesDir}`);
         throw new Error(`JDK not found in ${dependenciesDir}`);
@@ -314,27 +318,28 @@ function getServerOptionsUsingJava(extension: BallerinaExtension): ServerOptions
     if (jdkVersionMatch) {
         log(`JDK Version: ${jdkVersionMatch[1]}`);
     }
-    
+    debug(`JDK Version: ${jdkVersionMatch[1]}`);
     const javaExecutable = isWindows() ? 'java.exe' : 'java';
     const cmd = join(jdkDir, 'bin', javaExecutable);
     const args = ['-cp', classpath, `-Dballerina.home=${ballerinaHome}`, 'org.ballerinalang.langserver.launchers.stdio.Main'];
 
+    debug(`Java Executable: ${cmd}`);
     // Include debug options in the Java arguments if in debug mode
     if (debugOpts) {
         args.unshift(debugOpts);
     }
-  
+    debug(`Debug Options: ${debugOpts}`);
     // Add custom JVM arguments from environment variable ( Example: LS_CUSTOM_ARGS="-arg1 -arg2=value")
     if (process.env.LS_CUSTOM_ARGS) {
         debug(`LS_CUSTOM_ARGS: ${process.env.LS_CUSTOM_ARGS}`);
         args.unshift(...process.env.LS_CUSTOM_ARGS.split(' '));
     }
-    
+
     const serverOptions = {
         command: cmd,
         args,
         options: opt
     };
-    
+
     return serverOptions;
 }
diff --git a/workspaces/ballerina/ballerina-extension/src/utils/state-machine-utils.ts b/workspaces/ballerina/ballerina-extension/src/utils/state-machine-utils.ts
index 45aa5bf4909..ff4c2f843d4 100644
--- a/workspaces/ballerina/ballerina-extension/src/utils/state-machine-utils.ts
+++ b/workspaces/ballerina/ballerina-extension/src/utils/state-machine-utils.ts
@@ -403,7 +403,23 @@ function findViewByArtifact(dir: ProjectStructureArtifactResponse, position: Nod
                         identifier: dir.name,
                         documentUri: normalizedDocumentUri,
                         position: position,
-                        artifactType: DIRECTORY_MAP.DATA_MAPPER
+                        artifactType: DIRECTORY_MAP.DATA_MAPPER,
+                        dataMapperMetadata: {
+                            name: dir.name,
+                            codeData: {
+                                lineRange: {
+                                    fileName: normalizedDocumentUri,
+                                    startLine: {
+                                        line: dir.position.startLine,
+                                        offset: dir.position.startColumn
+                                    },
+                                    endLine: {
+                                        line: dir.position.endLine,
+                                        offset: dir.position.endColumn
+                                    }
+                                }
+                            }
+                        },
                     },
                     dataMapperDepth: 0
                 };
diff --git a/workspaces/ballerina/ballerina-extension/src/views/ai-panel/aiMachine.ts b/workspaces/ballerina/ballerina-extension/src/views/ai-panel/aiMachine.ts
index cd22228ef0c..f2c0a93b88e 100644
--- a/workspaces/ballerina/ballerina-extension/src/views/ai-panel/aiMachine.ts
+++ b/workspaces/ballerina/ballerina-extension/src/views/ai-panel/aiMachine.ts
@@ -21,8 +21,8 @@ import { createMachine, assign, interpret } from 'xstate';
 import { AIMachineStateValue, AIPanelPrompt, AIMachineEventType, AIMachineContext, AIUserToken, AIMachineSendableEvent, LoginMethod } from '@wso2/ballerina-core';
 import { AiPanelWebview } from './webview';
 import { extension } from '../../BalExtensionContext';
-import { getAccessToken } from '../../utils/ai/auth';
-import { checkToken, initiateInbuiltAuth, logout, validateApiKey } from './utils';
+import { getAccessToken, getLoginMethod } from '../../utils/ai/auth';
+import { checkToken, initiateInbuiltAuth, logout, validateApiKey, validateAwsCredentials } from './utils';
 
 export const USER_CHECK_BACKEND_URL = '/user/usage';
 
@@ -122,6 +122,12 @@ const aiMachine = createMachine<AIMachineContext, AIMachineSendableEvent>({
                     actions: assign({
                         loginMethod: (_ctx) => LoginMethod.ANTHROPIC_KEY
                     })
+                },
+                [AIMachineEventType.AUTH_WITH_AWS_BEDROCK]: {
+                    target: 'Authenticating',
+                    actions: assign({
+                        loginMethod: (_ctx) => LoginMethod.AWS_BEDROCK
+                    })
                 }
             }
         },
@@ -138,6 +144,10 @@ const aiMachine = createMachine<AIMachineContext, AIMachineSendableEvent>({
                             cond: (context) => context.loginMethod === LoginMethod.ANTHROPIC_KEY,
                             target: 'apiKeyFlow'
                         },
+                        {
+                            cond: (context) => context.loginMethod === LoginMethod.AWS_BEDROCK,
+                            target: 'awsBedrockFlow'
+                        },
                         {
                             target: 'ssoFlow' // default
                         }
@@ -205,6 +215,41 @@ const aiMachine = createMachine<AIMachineContext, AIMachineSendableEvent>({
                             })
                         }
                     }
+                },
+                awsBedrockFlow: {
+                    on: {
+                        [AIMachineEventType.SUBMIT_AWS_CREDENTIALS]: {
+                            target: 'validatingAwsCredentials',
+                            actions: assign({
+                                errorMessage: (_ctx) => undefined
+                            })
+                        },
+                        [AIMachineEventType.CANCEL_LOGIN]: {
+                            target: '#ballerina-ai.Unauthenticated',
+                            actions: assign({
+                                loginMethod: (_ctx) => undefined,
+                                errorMessage: (_ctx) => undefined,
+                            })
+                        }
+                    }
+                },
+                validatingAwsCredentials: {
+                    invoke: {
+                        id: 'validateAwsCredentials',
+                        src: 'validateAwsCredentials',
+                        onDone: {
+                            target: '#ballerina-ai.Authenticated',
+                            actions: assign({
+                                errorMessage: (_ctx) => undefined,
+                            })
+                        },
+                        onError: {
+                            target: 'awsBedrockFlow',
+                            actions: assign({
+                                errorMessage: (_ctx, event) => event.data?.message || 'AWS credentials validation failed'
+                            })
+                        }
+                    }
                 }
             }
         },
@@ -290,12 +335,26 @@ const validateApiKeyService = async (_context: AIMachineContext, event: any) =>
     return await validateApiKey(apiKey, LoginMethod.ANTHROPIC_KEY);
 };
 
+const validateAwsCredentialsService = async (_context: AIMachineContext, event: any) => {
+    const { accessKeyId, secretAccessKey, region, sessionToken } = event.payload || {};
+    if (!accessKeyId || !secretAccessKey || !region) {
+        throw new Error('AWS access key ID, secret access key, and region are required');
+    }
+    return await validateAwsCredentials({
+        accessKeyId,
+        secretAccessKey,
+        region,
+        sessionToken
+    });
+};
+
 const getTokenAfterAuth = async () => {
     const result = await getAccessToken();
-    if (!result) {
+    const loginMethod = await getLoginMethod();
+    if (!result || !loginMethod) {
         throw new Error('No authentication credentials found');
     }
-    return { token: result, loginMethod: LoginMethod.BI_INTEL };
+    return { token: result, loginMethod: loginMethod };
 };
 
 const aiStateService = interpret(aiMachine.withConfig({
@@ -303,6 +362,7 @@ const aiStateService = interpret(aiMachine.withConfig({
         checkToken: checkToken,
         openLogin: openLogin,
         validateApiKey: validateApiKeyService,
+        validateAwsCredentials: validateAwsCredentialsService,
         getTokenAfterAuth: getTokenAfterAuth,
     },
     actions: {
diff --git a/workspaces/ballerina/ballerina-extension/src/views/ai-panel/utils.ts b/workspaces/ballerina/ballerina-extension/src/views/ai-panel/utils.ts
index a0920213486..ce70bf23016 100644
--- a/workspaces/ballerina/ballerina-extension/src/views/ai-panel/utils.ts
+++ b/workspaces/ballerina/ballerina-extension/src/views/ai-panel/utils.ts
@@ -19,10 +19,12 @@
 import * as vscode from 'vscode';
 import { AIUserToken, LoginMethod, AuthCredentials } from '@wso2/ballerina-core';
 import { createAnthropic } from '@ai-sdk/anthropic';
+import { createAmazonBedrock } from '@ai-sdk/amazon-bedrock';
 import { generateText } from 'ai';
 import { getAuthUrl, getLogoutUrl } from './auth';
 import { extension } from '../../BalExtensionContext';
 import { getAccessToken, clearAuthCredentials, storeAuthCredentials, getLoginMethod } from '../../utils/ai/auth';
+import { getBedrockRegionalPrefix } from '../../features/ai/service/connection';
 
 const LEGACY_ACCESS_TOKEN_SECRET_KEY = 'BallerinaAIUser';
 const LEGACY_REFRESH_TOKEN_SECRET_KEY = 'BallerinaAIRefreshToken';
@@ -129,3 +131,75 @@ export const validateApiKey = async (apiKey: string, loginMethod: LoginMethod):
         throw new Error('Validation failed. Please try again.');
     }
 };
+
+export const validateAwsCredentials = async (credentials: {
+    accessKeyId: string;
+    secretAccessKey: string;
+    region: string;
+    sessionToken?: string;
+}): Promise<AIUserToken> => {
+    const { accessKeyId, secretAccessKey, region, sessionToken } = credentials;
+
+    if (!accessKeyId || !secretAccessKey || !region) {
+        throw new Error('AWS access key ID, secret access key, and region are required.');
+    }
+
+    if (!accessKeyId.startsWith('AKIA') && !accessKeyId.startsWith('ASIA')) {
+        throw new Error('Please enter a valid AWS access key ID.');
+    }
+
+    if (secretAccessKey.length < 20) {
+        throw new Error('Please enter a valid AWS secret access key.');
+    }
+
+    // List of valid AWS regions
+    const validRegions = [
+        'us-east-1', 'us-west-2', 'us-west-1', 'eu-west-1', 'eu-central-1', 
+        'ap-southeast-1', 'ap-southeast-2', 'ap-northeast-1', 'ap-northeast-2',
+        'ap-south-1', 'ca-central-1', 'sa-east-1', 'eu-west-2', 'eu-west-3',
+        'eu-north-1', 'ap-east-1', 'me-south-1', 'af-south-1', 'ap-southeast-3'
+    ];
+
+    if (!validRegions.includes(region)) {
+        throw new Error(`Invalid AWS region. Please select a valid region like us-east-1, us-west-2, etc.`);
+    }
+
+    try {
+        const bedrock = createAmazonBedrock({
+            region: region,
+            accessKeyId: accessKeyId,
+            secretAccessKey: secretAccessKey,
+            sessionToken: sessionToken,
+        });
+        
+        // Get regional prefix based on AWS region and construct model ID
+        const regionalPrefix = getBedrockRegionalPrefix(region);
+        const modelId = `${regionalPrefix}.anthropic.claude-3-5-haiku-20241022-v1:0`;
+        const bedrockClient = bedrock(modelId);
+
+        // Make a minimal test call to validate credentials  
+        await generateText({
+            model: bedrockClient,
+            maxTokens: 1,
+            messages: [{ role: 'user', content: 'Hi' }]
+        });
+
+        // Store credentials
+        const authCredentials: AuthCredentials = {
+            loginMethod: LoginMethod.AWS_BEDROCK,
+            secrets: {
+                accessKeyId,
+                secretAccessKey,
+                region,
+                sessionToken
+            }
+        };
+        await storeAuthCredentials(authCredentials);
+
+        return { token: accessKeyId };
+
+    } catch (error) {
+        console.error('AWS Bedrock validation failed:', error);
+        throw new Error('Validation failed. Please check the log for more details.');
+    }
+};
diff --git a/workspaces/ballerina/ballerina-extension/src/views/migration-report/webview.ts b/workspaces/ballerina/ballerina-extension/src/views/migration-report/webview.ts
new file mode 100644
index 00000000000..0e4c1dd6ec1
--- /dev/null
+++ b/workspaces/ballerina/ballerina-extension/src/views/migration-report/webview.ts
@@ -0,0 +1,99 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Disposable, Uri, ViewColumn, WebviewPanel, window } from "vscode";
+import { extension } from "../../BalExtensionContext";
+import path from "path";
+
+export class MigrationReportWebview {
+    public static currentPanel: MigrationReportWebview | undefined;
+    private _panel: WebviewPanel;
+    private _disposables: Disposable[] = [];
+
+    private constructor(panel: WebviewPanel, reportContent: string) {
+        this._panel = panel;
+        this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
+
+        const htmlWithStyleRemoval = reportContent.replace(
+            "</head>",
+            `<script>
+                document.addEventListener('DOMContentLoaded', function() {
+                    const defaultStyles = document.getElementById('_defaultStyles');
+                    if (defaultStyles) {
+                        defaultStyles.remove();
+                    }
+                });
+            </script></head>`
+        );
+
+        this._panel.webview.html = htmlWithStyleRemoval;
+    }
+
+    public static createOrShow(fileName: string, reportContent: string): void {
+        if (MigrationReportWebview.currentPanel) {
+            MigrationReportWebview.currentPanel._panel.reveal(ViewColumn.Active);
+            MigrationReportWebview.currentPanel.updateContent(reportContent);
+            return;
+        }
+
+        const panel = window.createWebviewPanel(
+            "migrationReport",
+            `Migration Report`,
+            ViewColumn.Active,
+            {
+                enableScripts: true,
+                retainContextWhenHidden: true,
+            }
+        );
+
+        panel.iconPath = {
+            light: Uri.file(path.join(extension.context.extensionPath, "resources", "icons", "light-icon.svg")),
+            dark: Uri.file(path.join(extension.context.extensionPath, "resources", "icons", "dark-icon.svg")),
+        };
+
+        MigrationReportWebview.currentPanel = new MigrationReportWebview(panel, reportContent);
+    }
+
+    private updateContent(reportContent: string): void {
+        const htmlWithStyleRemoval = reportContent.replace(
+            "</head>",
+            `<script>
+                document.addEventListener('DOMContentLoaded', function() {
+                    const defaultStyles = document.getElementById('_defaultStyles');
+                    if (defaultStyles) {
+                        defaultStyles.remove();
+                    }
+                });
+            </script></head>`
+        );
+
+        this._panel.webview.html = htmlWithStyleRemoval;
+    }
+
+    public dispose(): void {
+        MigrationReportWebview.currentPanel = undefined;
+        this._panel.dispose();
+
+        while (this._disposables.length) {
+            const disposable = this._disposables.pop();
+            if (disposable) {
+                disposable.dispose();
+            }
+        }
+    }
+}
diff --git a/workspaces/ballerina/ballerina-extension/src/views/visualizer/webview.ts b/workspaces/ballerina/ballerina-extension/src/views/visualizer/webview.ts
index 197aae51331..ffa3423d621 100644
--- a/workspaces/ballerina/ballerina-extension/src/views/visualizer/webview.ts
+++ b/workspaces/ballerina/ballerina-extension/src/views/visualizer/webview.ts
@@ -26,7 +26,7 @@ import { extension } from "../../BalExtensionContext";
 import { StateMachine, updateView } from "../../stateMachine";
 import { LANGUAGE } from "../../core";
 import { CodeData, MACHINE_VIEW } from "@wso2/ballerina-core";
-import { refreshDataMapper } from "../../rpc-managers/inline-data-mapper/utils";
+import { refreshDataMapper } from "../../rpc-managers/data-mapper/utils";
 import { AiPanelWebview } from "../ai-panel/webview";
 
 export class VisualizerWebview {
@@ -74,7 +74,10 @@ export class VisualizerWebview {
                     editor.document.fileName === document.document.fileName
                 );
             const dataMapperModified = balFileModified &&
-                StateMachine.context().view === MACHINE_VIEW.InlineDataMapper &&
+                (
+                    StateMachine.context().view === MACHINE_VIEW.InlineDataMapper ||
+                    StateMachine.context().view === MACHINE_VIEW.DataMapper
+                ) &&
                 document.document.fileName === StateMachine.context().documentUri;
 
             if (dataMapperModified) {
@@ -165,13 +168,13 @@ export class VisualizerWebview {
                 padding-top: 30vh;
             }
             .loader {
-                width: 32px;
+                width: 36px;
                 aspect-ratio: 1;
                 border-radius: 50%;
-                border: 4px solid var(--vscode-button-background);
+                border: 6px solid var(--vscode-button-background);
                 animation:
-                    l20-1 0.8s infinite linear alternate,
-                    l20-2 1.6s infinite linear;
+                    l20-1 0.5s infinite linear alternate,
+                    l20-2 1s infinite linear;
             }
             @keyframes l20-1{
                 0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
diff --git a/workspaces/ballerina/ballerina-extension/webpack.config.js b/workspaces/ballerina/ballerina-extension/webpack.config.js
index 1591d571bd3..cbf4aad0946 100644
--- a/workspaces/ballerina/ballerina-extension/webpack.config.js
+++ b/workspaces/ballerina/ballerina-extension/webpack.config.js
@@ -31,7 +31,7 @@ module.exports = {
     libraryTarget: 'commonjs2',
     devtoolModuleFilenameTemplate: '../[resource-path]'
   },
-  devtool: 'source-map',
+  devtool: !process.env.CI ? "source-map" : undefined,
   externals: {
     keytar: "commonjs keytar",
     vscode: 'commonjs vscode',
diff --git a/workspaces/ballerina/ballerina-rpc-client/src/BallerinaRpcClient.ts b/workspaces/ballerina/ballerina-rpc-client/src/BallerinaRpcClient.ts
index 96ac9561a9a..0ad25d5aaa1 100644
--- a/workspaces/ballerina/ballerina-rpc-client/src/BallerinaRpcClient.ts
+++ b/workspaces/ballerina/ballerina-rpc-client/src/BallerinaRpcClient.ts
@@ -38,6 +38,8 @@ import {
     PopupVisualizerLocation,
     getPopupVisualizerState,
     onDownloadProgress,
+    onMigrationToolLogs,
+    onMigrationToolStateChanged,
     DownloadProgress,
     breakpointChanged,
     AIMachineEventType,
@@ -54,11 +56,11 @@ import {
 import { LangClientRpcClient } from "./rpc-clients/lang-client/rpc-client";
 import { LibraryBrowserRpcClient } from "./rpc-clients/library-browser/rpc-client";
 import { HOST_EXTENSION } from "vscode-messenger-common";
-import { CommonRpcClient, GraphqlDesignerRpcClient, PersistDiagramRpcClient, RecordCreatorRpcClient, ServiceDesignerRpcClient, AiPanelRpcClient } from "./rpc-clients";
+import { CommonRpcClient, GraphqlDesignerRpcClient, PersistDiagramRpcClient, RecordCreatorRpcClient, ServiceDesignerRpcClient, AiPanelRpcClient, MigrateIntegrationRpcClient } from "./rpc-clients";
 import { BiDiagramRpcClient } from "./rpc-clients/bi-diagram/rpc-client";
 import { ConnectorWizardRpcClient } from "./rpc-clients/connector-wizard/rpc-client";
 import { SequenceDiagramRpcClient } from "./rpc-clients/sequence-diagram/rpc-client";
-import { InlineDataMapperRpcClient } from "./rpc-clients/inline-data-mapper/rpc-client";
+import { DataMapperRpcClient } from "./rpc-clients/data-mapper/rpc-client";
 import { TestManagerServiceRpcClient } from "./rpc-clients";
 import { AiAgentRpcClient } from "./rpc-clients/ai-agent/rpc-client";
 import { ICPServiceRpcClient } from "./rpc-clients/icp-service/rpc-client";
@@ -79,7 +81,8 @@ export class BallerinaRpcClient {
     private _SequenceDiagram: SequenceDiagramRpcClient;
     private _aiPanel: AiPanelRpcClient;
     private _connectorWizard: ConnectorWizardRpcClient;
-    private _inlineDataMapper: InlineDataMapperRpcClient;
+    private _dataMapper: DataMapperRpcClient;
+    private _migrateIntegration: MigrateIntegrationRpcClient;
     private _testManager: TestManagerServiceRpcClient;
     private _aiAgent: AiAgentRpcClient;
     private _icpManager: ICPServiceRpcClient;
@@ -100,7 +103,8 @@ export class BallerinaRpcClient {
         this._SequenceDiagram = new SequenceDiagramRpcClient(this.messenger);
         this._aiPanel = new AiPanelRpcClient(this.messenger);
         this._connectorWizard = new ConnectorWizardRpcClient(this.messenger);
-        this._inlineDataMapper = new InlineDataMapperRpcClient(this.messenger);
+        this._dataMapper = new DataMapperRpcClient(this.messenger);
+        this._migrateIntegration = new MigrateIntegrationRpcClient(this.messenger);
         this._testManager = new TestManagerServiceRpcClient(this.messenger);
         this._aiAgent = new AiAgentRpcClient(this.messenger);
         this._icpManager = new ICPServiceRpcClient(this.messenger);
@@ -167,8 +171,12 @@ export class BallerinaRpcClient {
         return this._aiPanel;
     }
 
-    getInlineDataMapperRpcClient(): InlineDataMapperRpcClient {
-        return this._inlineDataMapper;
+    getDataMapperRpcClient(): DataMapperRpcClient {
+        return this._dataMapper;
+    }
+
+    getMigrateIntegrationRpcClient(): MigrateIntegrationRpcClient {
+        return this._migrateIntegration;
     }
 
     getVisualizerLocation(): Promise<VisualizerLocation> {
@@ -221,6 +229,14 @@ export class BallerinaRpcClient {
         this.messenger.onNotification(onChatNotify, callback);
     }
 
+    onMigrationToolLogs(callback: (message: string) => void) {
+        this.messenger.onNotification(onMigrationToolLogs, callback);
+    }
+
+    onMigrationToolStateChanged(callback: (state: string) => void) {
+        this.messenger.onNotification(onMigrationToolStateChanged, callback);
+    }
+
     getPopupVisualizerState(): Promise<PopupVisualizerLocation> {
         return this.messenger.sendRequest(getPopupVisualizerState, HOST_EXTENSION);
     }
diff --git a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/ai-panel/rpc-client.ts b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/ai-panel/rpc-client.ts
index 9a5f0cbe1df..b70e51a425a 100644
--- a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/ai-panel/rpc-client.ts
+++ b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/ai-panel/rpc-client.ts
@@ -22,23 +22,26 @@ import {
     AIMachineSnapshot,
     AIPanelAPI,
     AIPanelPrompt,
+    AddFilesToProjectRequest,
     AddToProjectRequest,
+    AllDataMapperSourceRequest,
     CodeSegment,
+    CreateTempFileRequest,
+    DataMapperModelResponse,
+    DatamapperModelContext,
     DeleteFromProjectRequest,
     DeveloperDocument,
+    DocGenerationRequest,
+    ExtendedDataMapperMetadata,
     FetchDataRequest,
     FetchDataResponse,
     GenerateCodeRequest,
-    GenerateMappingFromRecordResponse,
-    GenerateMappingsFromRecordRequest,
-    GenerateMappingsRequest,
     GenerateMappingsResponse,
     GenerateOpenAPIRequest,
     GenerateTypesFromRecordRequest,
     GenerateTypesFromRecordResponse,
     GetFromFileRequest,
     GetModuleDirParams,
-    InlineAllDataMapperSourceRequest,
     LLMDiagnostics,
     LoginMethod,
     MetadataWithAttachments,
@@ -60,15 +63,19 @@ import {
     abortAIGeneration,
     abortTestGeneration,
     addChatSummary,
+    addCodeSegmentToWorkspace,
+    addFilesToProject,
     addInlineCodeSegmentToWorkspace,
     addToProject,
     applyDoOnFailBlocks,
     checkSyntaxError,
     clearInitialPrompt,
+    createTempFileAndGenerateMetadata,
     createTestDirecoryIfNotExists,
     deleteFromProject,
     fetchData,
     generateCode,
+    generateDataMapperModel,
     generateFunctionTests,
     generateHealthcareCode,
     generateMappings,
@@ -84,10 +91,9 @@ import {
     getFileExists,
     getFromDocumentation,
     getFromFile,
+    getGeneratedDocumentation,
     getGeneratedTests,
     getLoginMethod,
-    getMappingsFromModel,
-    getMappingsFromRecord,
     getModuleDirectory,
     getProjectUuid,
     getRefreshedAccessToken,
@@ -105,7 +111,7 @@ import {
     isRequirementsSpecificationFileExist,
     markAlertShown,
     notifyAIMappings,
-    openInlineMappingChatWindow,
+    openAIMappingChatWindow,
     postProcess,
     promptGithubAuthorize,
     promptWSO2AILogout,
@@ -159,8 +165,8 @@ export class AiPanelRpcClient implements AIPanelAPI {
         return this._messenger.sendRequest(fetchData, HOST_EXTENSION, params);
     }
 
-    addToProject(params: AddToProjectRequest): void {
-        return this._messenger.sendNotification(addToProject, HOST_EXTENSION, params);
+    addToProject(params: AddToProjectRequest): Promise<boolean> {
+        return this._messenger.sendRequest(addToProject, HOST_EXTENSION, params);
     }
 
     getFromFile(params: GetFromFileRequest): Promise<string> {
@@ -175,10 +181,6 @@ export class AiPanelRpcClient implements AIPanelAPI {
         return this._messenger.sendNotification(deleteFromProject, HOST_EXTENSION, params);
     }
 
-    generateMappings(params: GenerateMappingsRequest): Promise<GenerateMappingsResponse> {
-        return this._messenger.sendRequest(generateMappings, HOST_EXTENSION, params);
-    }
-
     notifyAIMappings(params: NotifyAIMappingsRequest): Promise<boolean> {
         return this._messenger.sendRequest(notifyAIMappings, HOST_EXTENSION, params);
     }
@@ -199,12 +201,28 @@ export class AiPanelRpcClient implements AIPanelAPI {
         return this._messenger.sendNotification(clearInitialPrompt, HOST_EXTENSION);
     }
 
-    openInlineMappingChatWindow(): void {
-        return this._messenger.sendNotification(openInlineMappingChatWindow, HOST_EXTENSION);
+    openAIMappingChatWindow(params: DataMapperModelResponse): void {
+        return this._messenger.sendNotification(openAIMappingChatWindow, HOST_EXTENSION, params);
+    }
+
+    generateDataMapperModel(params: DatamapperModelContext): Promise<DataMapperModelResponse> {
+        return this._messenger.sendRequest(generateDataMapperModel, HOST_EXTENSION, params);
+    }
+
+    getTypesFromRecord(params: GenerateTypesFromRecordRequest): Promise<GenerateTypesFromRecordResponse> {
+        return this._messenger.sendRequest(getTypesFromRecord, HOST_EXTENSION, params);
+    }
+
+    createTempFileAndGenerateMetadata(params: CreateTempFileRequest): Promise<ExtendedDataMapperMetadata> {
+        return this._messenger.sendRequest(createTempFileAndGenerateMetadata, HOST_EXTENSION, params);
+    }
+
+    generateMappings(params: MetadataWithAttachments): Promise<AllDataMapperSourceRequest> {
+        return this._messenger.sendRequest(generateMappings, HOST_EXTENSION, params);
     }
 
-    getMappingsFromModel(params: MetadataWithAttachments): Promise<InlineAllDataMapperSourceRequest> {
-        return this._messenger.sendRequest(getMappingsFromModel, HOST_EXTENSION, params);
+    addCodeSegmentToWorkspace(params: CodeSegment): Promise<boolean> {
+        return this._messenger.sendRequest(addCodeSegmentToWorkspace, HOST_EXTENSION, params);
     }
 
     addInlineCodeSegmentToWorkspace(params: CodeSegment): void {
@@ -239,14 +257,6 @@ export class AiPanelRpcClient implements AIPanelAPI {
         return this._messenger.sendNotification(abortTestGeneration, HOST_EXTENSION);
     }
 
-    getMappingsFromRecord(params: GenerateMappingsFromRecordRequest): Promise<GenerateMappingFromRecordResponse> {
-        return this._messenger.sendRequest(getMappingsFromRecord, HOST_EXTENSION, params);
-    }
-
-    getTypesFromRecord(params: GenerateTypesFromRecordRequest): Promise<GenerateTypesFromRecordResponse> {
-        return this._messenger.sendRequest(getTypesFromRecord, HOST_EXTENSION, params);
-    }
-
     applyDoOnFailBlocks(): void {
         return this._messenger.sendNotification(applyDoOnFailBlocks, HOST_EXTENSION);
     }
@@ -362,4 +372,12 @@ export class AiPanelRpcClient implements AIPanelAPI {
     abortAIGeneration(): void {
         return this._messenger.sendNotification(abortAIGeneration, HOST_EXTENSION);
     }
+
+    getGeneratedDocumentation(params: DocGenerationRequest): Promise<void> {
+        return this._messenger.sendRequest(getGeneratedDocumentation, HOST_EXTENSION, params);
+    }
+
+    addFilesToProject(params: AddFilesToProjectRequest): Promise<boolean> {
+        return this._messenger.sendRequest(addFilesToProject, HOST_EXTENSION, params);
+    }
 }
diff --git a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/bi-diagram/rpc-client.ts b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/bi-diagram/rpc-client.ts
index 7ca25fb3e75..b34d257d169 100644
--- a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/bi-diagram/rpc-client.ts
+++ b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/bi-diagram/rpc-client.ts
@@ -48,6 +48,8 @@ import {
     ConfigVariableResponse,
     CreateComponentResponse,
     CurrentBreakpointsResponse,
+    DeleteTypeRequest,
+    DeleteTypeResponse,
     DeploymentRequest,
     DeploymentResponse,
     DevantMetadata,
@@ -121,12 +123,15 @@ import {
     deleteConfigVariableV2,
     deleteFlowNode,
     deleteOpenApiGeneratedModules,
+    deleteType,
     deployProject,
     formDidClose,
     formDidOpen,
     generateOpenApiClient,
     getAiSuggestions,
     getAllImports,
+    getAvailableChunkers,
+    getAvailableDataLoaders,
     getAvailableEmbeddingProviders,
     getAvailableModelProviders,
     getAvailableNodes,
@@ -182,6 +187,10 @@ import {
     updateTypes,
     DeleteConfigVariableRequestV2,
     DeleteConfigVariableResponseV2,
+    VerifyTypeDeleteRequest,
+    VerifyTypeDeleteResponse,
+    verifyTypeDelete,
+    ConfigVariableRequest,
 } from "@wso2/ballerina-core";
 import { HOST_EXTENSION } from "vscode-messenger-common";
 import { Messenger } from "vscode-messenger-webview";
@@ -229,6 +238,14 @@ export class BiDiagramRpcClient implements BIDiagramAPI {
         return this._messenger.sendRequest(getAvailableVectorKnowledgeBases, HOST_EXTENSION, params);
     }
 
+    getAvailableDataLoaders(params: BIAvailableNodesRequest): Promise<BIAvailableNodesResponse> {
+        return this._messenger.sendRequest(getAvailableDataLoaders, HOST_EXTENSION, params);
+    }
+
+    getAvailableChunkers(params: BIAvailableNodesRequest): Promise<BIAvailableNodesResponse> {
+        return this._messenger.sendRequest(getAvailableChunkers, HOST_EXTENSION, params);
+    }
+
     getEnclosedFunction(params: BIGetEnclosedFunctionRequest): Promise<BIGetEnclosedFunctionResponse> {
         return this._messenger.sendRequest(getEnclosedFunction, HOST_EXTENSION, params);
     }
@@ -281,8 +298,8 @@ export class BiDiagramRpcClient implements BIDiagramAPI {
         return this._messenger.sendRequest(updateConfigVariables, HOST_EXTENSION, params);
     }
 
-    getConfigVariablesV2(): Promise<ConfigVariableResponse> {
-        return this._messenger.sendRequest(getConfigVariablesV2, HOST_EXTENSION);
+    getConfigVariablesV2(params: ConfigVariableRequest): Promise<ConfigVariableResponse> {
+        return this._messenger.sendRequest(getConfigVariablesV2, HOST_EXTENSION, params);
     }
 
     updateConfigVariablesV2(params: UpdateConfigVariableRequestV2): Promise<UpdateConfigVariableResponseV2> {
@@ -389,6 +406,10 @@ export class BiDiagramRpcClient implements BIDiagramAPI {
         return this._messenger.sendRequest(updateTypes, HOST_EXTENSION, params);
     }
 
+    deleteType(params: DeleteTypeRequest): Promise<DeleteTypeResponse> {
+        return this._messenger.sendRequest(deleteType, HOST_EXTENSION, params);
+    }
+
     getTypeFromJson(params: JsonToTypeRequest): Promise<JsonToTypeResponse> {
         return this._messenger.sendRequest(getTypeFromJson, HOST_EXTENSION, params);
     }
@@ -472,4 +493,8 @@ export class BiDiagramRpcClient implements BIDiagramAPI {
     deleteOpenApiGeneratedModules(params: OpenAPIClientDeleteRequest): Promise<OpenAPIClientDeleteResponse> {
         return this._messenger.sendRequest(deleteOpenApiGeneratedModules, HOST_EXTENSION, params);
     }
+
+    verifyTypeDelete(params: VerifyTypeDeleteRequest): Promise<VerifyTypeDeleteResponse> {
+        return this._messenger.sendRequest(verifyTypeDelete, HOST_EXTENSION, params);
+    }
 }
diff --git a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/common/rpc-client.ts b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/common/rpc-client.ts
index bdd57977e85..cbbcbeafe3a 100644
--- a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/common/rpc-client.ts
+++ b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/common/rpc-client.ts
@@ -45,6 +45,9 @@ import {
     openExternalUrl,
     runBackgroundTerminalCommand,
     selectFileOrDirPath,
+    getCurrentProjectTomlValues,
+    TomlValues,
+    selectFileOrFolderPath,
     showErrorMessage
 } from "@wso2/ballerina-core";
 import { HOST_EXTENSION } from "vscode-messenger-common";
@@ -89,6 +92,10 @@ export class CommonRpcClient implements CommonRPCAPI {
         return this._messenger.sendRequest(selectFileOrDirPath, HOST_EXTENSION, params);
     }
 
+    selectFileOrFolderPath(): Promise<FileOrDirResponse> {
+        return this._messenger.sendRequest(selectFileOrFolderPath, HOST_EXTENSION);
+    }
+
     experimentalEnabled(): Promise<boolean> {
         return this._messenger.sendRequest(experimentalEnabled, HOST_EXTENSION);
     }
@@ -104,4 +111,8 @@ export class CommonRpcClient implements CommonRPCAPI {
     showErrorMessage(params: ShowErrorMessageRequest): void {
         return this._messenger.sendNotification(showErrorMessage, HOST_EXTENSION, params);
     }
+    
+    getCurrentProjectTomlValues(): Promise<TomlValues> {
+        return this._messenger.sendRequest(getCurrentProjectTomlValues, HOST_EXTENSION);
+    }
 }
diff --git a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/inline-data-mapper/rpc-client.ts b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/data-mapper/rpc-client.ts
similarity index 62%
rename from workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/inline-data-mapper/rpc-client.ts
rename to workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/data-mapper/rpc-client.ts
index 59db65cb634..49b2804fd10 100644
--- a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/inline-data-mapper/rpc-client.ts
+++ b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/data-mapper/rpc-client.ts
@@ -21,20 +21,24 @@ import {
     AddArrayElementRequest,
     AddClausesRequest,
     AddSubMappingRequest,
+    AllDataMapperSourceRequest,
     ConvertToQueryRequest,
+    DMModelRequest,
+    DataMapperAPI,
+    DataMapperModelRequest,
+    DataMapperModelResponse,
+    DataMapperSourceRequest,
+    DataMapperSourceResponse,
     DeleteMappingRequest,
-    GetInlineDataMapperCodedataRequest,
-    GetInlineDataMapperCodedataResponse,
+    ExpandedDMModelResponse,
+    GetDataMapperCodedataRequest,
+    GetDataMapperCodedataResponse,
     GetSubMappingCodedataRequest,
     InitialIDMSourceRequest,
     InitialIDMSourceResponse,
-    InlineAllDataMapperSourceRequest,
-    InlineDataMapperAPI,
-    InlineDataMapperModelRequest,
-    InlineDataMapperModelResponse,
-    InlineDataMapperSourceRequest,
-    InlineDataMapperSourceResponse,
-    MapWithCustomFnRequest,
+    MapWithFnRequest,
+    ProcessTypeReferenceRequest,
+    ProcessTypeReferenceResponse,
     PropertyRequest,
     PropertyResponse,
     VisualizableFieldsRequest,
@@ -48,16 +52,19 @@ import {
     getDataMapperCodedata,
     getDataMapperModel,
     getDataMapperSource,
+    getExpandedDMFromDMModel,
     getInitialIDMSource,
+    getProcessTypeReference,
     getProperty,
     getSubMappingCodedata,
     getVisualizableFields,
-    mapWithCustomFn
+    mapWithCustomFn,
+    mapWithTransformFn
 } from "@wso2/ballerina-core";
 import { HOST_EXTENSION } from "vscode-messenger-common";
 import { Messenger } from "vscode-messenger-webview";
 
-export class InlineDataMapperRpcClient implements InlineDataMapperAPI {
+export class DataMapperRpcClient implements DataMapperAPI {
     private _messenger: Messenger;
 
     constructor(messenger: Messenger) {
@@ -68,11 +75,11 @@ export class InlineDataMapperRpcClient implements InlineDataMapperAPI {
         return this._messenger.sendRequest(getInitialIDMSource, HOST_EXTENSION, params);
     }
 
-    getDataMapperModel(params: InlineDataMapperModelRequest): Promise<InlineDataMapperModelResponse> {
+    getDataMapperModel(params: DataMapperModelRequest): Promise<DataMapperModelResponse> {
         return this._messenger.sendRequest(getDataMapperModel, HOST_EXTENSION, params);
     }
 
-    getDataMapperSource(params: InlineDataMapperSourceRequest): Promise<InlineDataMapperSourceResponse> {
+    getDataMapperSource(params: DataMapperSourceRequest): Promise<DataMapperSourceResponse> {
         return this._messenger.sendRequest(getDataMapperSource, HOST_EXTENSION, params);
     }
 
@@ -80,43 +87,55 @@ export class InlineDataMapperRpcClient implements InlineDataMapperAPI {
         return this._messenger.sendRequest(getVisualizableFields, HOST_EXTENSION, params);
     }
 
-    addNewArrayElement(params: AddArrayElementRequest): Promise<InlineDataMapperSourceResponse> {
+    addNewArrayElement(params: AddArrayElementRequest): Promise<DataMapperSourceResponse> {
         return this._messenger.sendRequest(addNewArrayElement, HOST_EXTENSION, params);
     }
 
-    convertToQuery(params: ConvertToQueryRequest): Promise<InlineDataMapperSourceResponse> {
+    convertToQuery(params: ConvertToQueryRequest): Promise<DataMapperSourceResponse> {
         return this._messenger.sendRequest(convertToQuery, HOST_EXTENSION, params);
     }
 
-    addClauses(params: AddClausesRequest): Promise<InlineDataMapperSourceResponse> {
+    addClauses(params: AddClausesRequest): Promise<DataMapperSourceResponse> {
         return this._messenger.sendRequest(addClauses, HOST_EXTENSION, params);
     }
 
-    addSubMapping(params: AddSubMappingRequest): Promise<InlineDataMapperSourceResponse> {
+    addSubMapping(params: AddSubMappingRequest): Promise<DataMapperSourceResponse> {
         return this._messenger.sendRequest(addSubMapping, HOST_EXTENSION, params);
     }
 
-    deleteMapping(params: DeleteMappingRequest): Promise<InlineDataMapperSourceResponse> {
+    deleteMapping(params: DeleteMappingRequest): Promise<DataMapperSourceResponse> {
         return this._messenger.sendRequest(deleteMapping, HOST_EXTENSION, params);
     }
 
-    mapWithCustomFn(params: MapWithCustomFnRequest): Promise<InlineDataMapperSourceResponse> {
+    mapWithCustomFn(params: MapWithFnRequest): Promise<DataMapperSourceResponse> {
         return this._messenger.sendRequest(mapWithCustomFn, HOST_EXTENSION, params);
     }
 
-    getDataMapperCodedata(params: GetInlineDataMapperCodedataRequest): Promise<GetInlineDataMapperCodedataResponse> {
+    mapWithTransformFn(params: MapWithFnRequest): Promise<DataMapperSourceResponse> {
+        return this._messenger.sendRequest(mapWithTransformFn, HOST_EXTENSION, params);
+    }
+
+    getDataMapperCodedata(params: GetDataMapperCodedataRequest): Promise<GetDataMapperCodedataResponse> {
         return this._messenger.sendRequest(getDataMapperCodedata, HOST_EXTENSION, params);
     }
 
-    getSubMappingCodedata(params: GetSubMappingCodedataRequest): Promise<GetInlineDataMapperCodedataResponse> {
+    getSubMappingCodedata(params: GetSubMappingCodedataRequest): Promise<GetDataMapperCodedataResponse> {
         return this._messenger.sendRequest(getSubMappingCodedata, HOST_EXTENSION, params);
     }
 
-    getAllDataMapperSource(params: InlineAllDataMapperSourceRequest): Promise<InlineDataMapperSourceResponse> {
+    getAllDataMapperSource(params: AllDataMapperSourceRequest): Promise<DataMapperSourceResponse> {
         return this._messenger.sendRequest(getAllDataMapperSource, HOST_EXTENSION, params);
     }
 
     getProperty(params: PropertyRequest): Promise<PropertyResponse> {
         return this._messenger.sendRequest(getProperty, HOST_EXTENSION, params);
     }
+
+    getExpandedDMFromDMModel(params: DMModelRequest): Promise<ExpandedDMModelResponse> {
+        return this._messenger.sendRequest(getExpandedDMFromDMModel, HOST_EXTENSION, params);
+    }
+
+    getProcessTypeReference(params: ProcessTypeReferenceRequest): Promise<ProcessTypeReferenceResponse> {
+        return this._messenger.sendRequest(getProcessTypeReference, HOST_EXTENSION, params);
+    }
 }
diff --git a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/index.ts b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/index.ts
index 3acbdc42388..81ed5771f57 100644
--- a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/index.ts
+++ b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/index.ts
@@ -26,3 +26,4 @@ export * from "./record-creator/rpc-client";
 export * from "./ai-panel/rpc-client";
 export * from "./connector-wizard/rpc-client";
 export * from "./test-manager/rpc-client";
+export * from "./migrate-integration/rpc-client";
diff --git a/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/migrate-integration/rpc-client.ts b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/migrate-integration/rpc-client.ts
new file mode 100644
index 00000000000..8c91f99e201
--- /dev/null
+++ b/workspaces/ballerina/ballerina-rpc-client/src/rpc-clients/migrate-integration/rpc-client.ts
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ * 
+ * THIS FILE INCLUDES AUTO GENERATED CODE
+ */
+import {
+    GetMigrationToolsResponse,
+    ImportIntegrationRPCRequest,
+    ImportIntegrationResponse,
+    MigrateIntegrationAPI,
+    MigrateRequest,
+    MigrationToolPullRequest,
+    OpenMigrationReportRequest,
+    SaveMigrationReportRequest,
+    getMigrationTools,
+    importIntegration,
+    migrateProject,
+    openMigrationReport,
+    pullMigrationTool,
+    saveMigrationReport
+} from "@wso2/ballerina-core";
+import { HOST_EXTENSION } from "vscode-messenger-common";
+import { Messenger } from "vscode-messenger-webview";
+
+export class MigrateIntegrationRpcClient implements MigrateIntegrationAPI {
+    private _messenger: Messenger;
+
+    constructor(messenger: Messenger) {
+        this._messenger = messenger;
+    }
+
+    getMigrationTools(): Promise<GetMigrationToolsResponse> {
+        return this._messenger.sendRequest(getMigrationTools, HOST_EXTENSION);
+    }
+
+    pullMigrationTool(params: MigrationToolPullRequest): void {
+        return this._messenger.sendNotification(pullMigrationTool, HOST_EXTENSION, params);
+    }
+
+    importIntegration(params: ImportIntegrationRPCRequest): Promise<ImportIntegrationResponse> {
+        return this._messenger.sendRequest(importIntegration, HOST_EXTENSION, params);
+    }
+
+    openMigrationReport(params: OpenMigrationReportRequest): void {
+        return this._messenger.sendNotification(openMigrationReport, HOST_EXTENSION, params);
+    }
+
+    saveMigrationReport(params: SaveMigrationReportRequest): void {
+        return this._messenger.sendNotification(saveMigrationReport, HOST_EXTENSION, params);
+    }
+
+    migrateProject(params: MigrateRequest): void {
+        return this._messenger.sendNotification(migrateProject, HOST_EXTENSION, params);
+    }
+}
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/CardList/index.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/CardList/index.tsx
index 03e976836d8..64b594411c5 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/CardList/index.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/CardList/index.tsx
@@ -324,25 +324,27 @@ function CardList(props: CardListProps) {
           });
 
     const hasContent = filteredCategories.some((category) => category?.items && category.items.length > 0);
-
+    const shouldShowHeaderActions = (onBack && title) || onClose;
     return (
         <S.Container>
             <S.HeaderContainer>
-                <S.Row>
-                    {onBack && title && (
-                        <S.LeftAlignRow>
-                            <S.BackButton appearance="icon" onClick={onBack}>
-                                <BackIcon />
-                            </S.BackButton>
-                            {title}
-                        </S.LeftAlignRow>
-                    )}
-                    {onClose && (
-                        <S.CloseButton appearance="icon" onClick={onClose}>
-                            <CloseIcon />
-                        </S.CloseButton>
-                    )}
-                </S.Row>
+                {shouldShowHeaderActions && (
+                    <S.Row>
+                        {onBack && title && (
+                            <S.LeftAlignRow>
+                                <S.BackButton appearance="icon" onClick={onBack}>
+                                    <BackIcon />
+                                </S.BackButton>
+                                {title}
+                            </S.LeftAlignRow>
+                        )}
+                        {onClose && (
+                            <S.CloseButton appearance="icon" onClick={onClose}>
+                                <CloseIcon />
+                            </S.CloseButton>
+                        )}
+                    </S.Row>
+                )}
                 <S.Row>
                     <S.StyledSearchInput
                         value={searchText}
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/Form/index.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/Form/index.tsx
index 4c3f6b6cf82..237aff78c76 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/Form/index.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/Form/index.tsx
@@ -27,6 +27,7 @@ import {
     SidePanelBody,
     CheckBox,
     Typography,
+    CompletionItem
 } from "@wso2/ui-toolkit";
 import styled from "@emotion/styled";
 
@@ -44,6 +45,7 @@ import {
     FlowNode,
     ExpressionProperty,
     RecordTypeField,
+    Type,
     VisualizableField,
 } from "@wso2/ballerina-core";
 import { FormContext, Provider } from "../../context";
@@ -340,6 +342,7 @@ export interface FormProps {
     concertMessage?: string;
     formImports?: FormImports;
     preserveOrder?: boolean;
+    handleSelectedTypeChange?: (type: CompletionItem) => void;
     scopeFieldAddon?: React.ReactNode;
     newServerUrl?: string;
     onChange?: (fieldKey: string, value: any, allValues: FormValues) => void;
@@ -384,6 +387,7 @@ export const Form = forwardRef((props: FormProps, ref) => {
         concertMessage,
         formImports,
         preserveOrder = false,
+        handleSelectedTypeChange,
         scopeFieldAddon,
         newServerUrl,
         mcpTools,
@@ -431,12 +435,16 @@ export const Form = forwardRef((props: FormProps, ref) => {
             formFields.forEach((field) => {
                 if (isDropdownField(field)) {
                     defaultValues[field.key] = getValueForDropdown(field) ?? "";
+                } else if (field.type === "FLAG") {
+                    defaultValues[field.key] = field.value === "true" || (typeof field.value === "boolean" && field.value);
                 } else if (typeof field.value === "string") {
                     defaultValues[field.key] = formatJSONLikeString(field.value) ?? "";
                 } else {
                     defaultValues[field.key] = field.value ?? "";
                 }
-
+                if (field.key === "variable") {
+                    defaultValues[field.key] = formValues[field.key] ?? "";
+                }
                 if (field.key === "parameters" && field.value.length === 0) {
                     defaultValues[field.key] = formValues[field.key] ?? [];
                 }
@@ -448,7 +456,7 @@ export const Form = forwardRef((props: FormProps, ref) => {
 
                     if (existingType !== newType) {
                         setValue(field.key, newType);
-                        mergeFormDataWithFlowNode && getVisualiableFields();
+                        getVisualiableFields();
                     }
                 }
 
@@ -480,33 +488,6 @@ export const Form = forwardRef((props: FormProps, ref) => {
         }
     }, [formFields, reset]);
 
-    useEffect(() => {
-        if (updatedExpressionField) {
-            if (subPanelView === SubPanelView.INLINE_DATA_MAPPER) {
-                const { key, value } = updatedExpressionField;
-                // Update the form field value
-                setValue(key, value);
-                resetUpdatedExpressionField && resetUpdatedExpressionField();
-                // Update the inline data mapper view
-                handleOpenSubPanel({
-                    view: SubPanelView.INLINE_DATA_MAPPER,
-                    props: {
-                        inlineDataMapper: {
-                            filePath: fileName,
-                            flowNode: undefined,
-                            position: {
-                                line: updatedExpressionField.cursorPosition.line,
-                                offset: updatedExpressionField.cursorPosition.offset,
-                            },
-                            propertyKey: updatedExpressionField.key,
-                            editorKey: updatedExpressionField.key,
-                        },
-                    },
-                });
-            }
-        }
-    }, [updatedExpressionField]);
-
     const handleOnSave = (data: FormValues) => {
         console.log(">>> saved form fields", { data });
         onSubmit && onSubmit(data, dirtyFields);
@@ -544,32 +525,17 @@ export const Form = forwardRef((props: FormProps, ref) => {
         setDiagnosticsInfo([...otherDiagnostics, diagnostics]);
     };
 
-    const handleOpenSubPanel = (subPanel: SubPanel) => {
-        let updatedSubPanel = subPanel;
-        if (subPanel.view === SubPanelView.INLINE_DATA_MAPPER) {
-            const flowNode = mergeFormDataWithFlowNode(getValues(), targetLineRange);
-            const inlineDMProps = {
-                ...subPanel.props.inlineDataMapper,
-                flowNode: flowNode,
-            };
-            updatedSubPanel = {
-                ...subPanel,
-                props: {
-                    ...subPanel.props,
-                    inlineDataMapper: inlineDMProps,
-                },
-            };
-        }
-        openSubPanel(updatedSubPanel);
-    };
-
-    const handleOnTypeChange = () => {
+    const handleOnTypeChange = (value?: string) => {
         getVisualiableFields();
     };
 
+    const handleNewTypeSelected = (type: CompletionItem) => {
+        handleSelectedTypeChange && handleSelectedTypeChange(type);
+    }
+
     const getVisualiableFields = () => {
         const typeName = watch("type");
-        handleVisualizableFields && handleVisualizableFields(fileName, typeName);
+        typeName && handleVisualizableFields && handleVisualizableFields(fileName, typeName);
     };
 
     const handleGetExpressionDiagnostics = async (
@@ -791,7 +757,6 @@ export const Form = forwardRef((props: FormProps, ref) => {
                                             openRecordEditor &&
                                             ((open: boolean) => handleOpenRecordEditor(open, updatedField))
                                         }
-                                        openSubPanel={handleOpenSubPanel}
                                         subPanelView={subPanelView}
                                         handleOnFieldFocus={handleOnFieldFocus}
                                         autoFocus={firstEditableFieldIndex === formFields.indexOf(updatedField)}
@@ -799,6 +764,7 @@ export const Form = forwardRef((props: FormProps, ref) => {
                                         onIdentifierEditingStateChange={handleIdentifierEditingStateChange}
                                         handleOnTypeChange={handleOnTypeChange}
                                         setSubComponentEnabled={setIsSubComponentEnabled}
+                                        handleNewTypeSelected={handleNewTypeSelected}
                                         newServerUrl={newServerUrl}
                                         mcpTools={mcpTools}
                                         onToolsChange={onToolsChange}
@@ -864,7 +830,6 @@ export const Form = forwardRef((props: FormProps, ref) => {
                                                 openRecordEditor &&
                                                 ((open: boolean) => handleOpenRecordEditor(open, updatedField))
                                             }
-                                            openSubPanel={handleOpenSubPanel}
                                             subPanelView={subPanelView}
                                             handleOnFieldFocus={handleOnFieldFocus}
                                             recordTypeFields={recordTypeFields}
@@ -894,11 +859,12 @@ export const Form = forwardRef((props: FormProps, ref) => {
                                 openRecordEditor={
                                     openRecordEditor && ((open: boolean) => handleOpenRecordEditor(open, typeField))
                                 }
-                                openSubPanel={handleOpenSubPanel}
                                 handleOnFieldFocus={handleOnFieldFocus}
                                 handleOnTypeChange={handleOnTypeChange}
                                 recordTypeFields={recordTypeFields}
                                 onIdentifierEditingStateChange={handleIdentifierEditingStateChange}
+                                handleNewTypeSelected={handleNewTypeSelected}
+
                             />
                         )}
                         {targetTypeField && (
@@ -908,6 +874,7 @@ export const Form = forwardRef((props: FormProps, ref) => {
                                     handleOnFieldFocus={handleOnFieldFocus}
                                     recordTypeFields={recordTypeFields}
                                     onIdentifierEditingStateChange={handleIdentifierEditingStateChange}
+                                    handleNewTypeSelected={handleNewTypeSelected}
                                     handleOnTypeChange={handleOnTypeChange}
                                 />
                                 {typeField && (
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/Form/types.ts b/workspaces/ballerina/ballerina-side-panel/src/components/Form/types.ts
index 4f8244af31c..e2222fe028f 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/Form/types.ts
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/Form/types.ts
@@ -55,6 +55,8 @@ export type FormField = {
     metadata?: Metadata;
     codedata?: { [key: string]: any };
     imports?: { [key: string]: string };
+    actionLabel?: string | JSX.Element;
+    actionCallback?: () => void;
     onValueChange?: (value: string) => void;
 };
 
@@ -147,6 +149,7 @@ type FormTypeConditionalProps = {
         changeTypeHelperState: (isOpen: boolean) => void,
         helperPaneHeight: HelperPaneHeight,
         onTypeCreate: () => void,
+        exprRef?: RefObject<FormExpressionEditorRef>,
     ) => JSX.Element;
     helperPaneOrigin?: HelperPaneOrigin;
     helperPaneHeight: HelperPaneHeight;
@@ -170,7 +173,8 @@ type FormHelperPaneConditionalProps = {
         changeHelperPaneState: (isOpen: boolean) => void,
         helperPaneHeight: HelperPaneHeight,
         recordTypeField?: RecordTypeField,
-        isAssignIdentifier?: boolean
+        isAssignIdentifier?: boolean,
+        valueTypeConstraint?: string | string[]
     ) => JSX.Element;
     helperPaneOrigin?: HelperPaneOrigin;
     helperPaneHeight: HelperPaneHeight;
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/categoryConfig.ts b/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/categoryConfig.ts
new file mode 100644
index 00000000000..eeca926019b
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/categoryConfig.ts
@@ -0,0 +1,174 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+export type CategoryActionType = 'connection' | 'function' | 'add';
+
+export interface CategoryAction {
+    type: CategoryActionType;
+    tooltip: string;
+    emptyStateLabel: string;
+    handlerKey: 'onAddConnection' | 'onAddFunction' | 'onAdd';
+    condition?: (title: string) => boolean; // For special conditions like data mapper
+}
+
+export interface CategoryConfig {
+    title: string;
+    actions: CategoryAction[];
+    showWhenEmpty: boolean;
+    useConnectionContainer: boolean; // Whether to use getConnectionContainer for rendering
+}
+
+// Configuration for all categories with their specific behaviors
+export const CATEGORY_CONFIGS: Record<string, CategoryConfig> = {
+    "Connections": {
+        title: "Connections",
+        actions: [{
+            type: 'connection',
+            tooltip: "Add Connection",
+            emptyStateLabel: "Add Connection",
+            handlerKey: 'onAddConnection'
+        }],
+        showWhenEmpty: true,
+        useConnectionContainer: true
+    },
+    "Current Integration": {
+        title: "Current Integration",
+        actions: [
+            {
+                type: 'function',
+                tooltip: "Create Data Mapper",
+                emptyStateLabel: "Create Data Mapper",
+                handlerKey: 'onAddFunction',
+                condition: (title) => title === "Data Mappers"
+            },
+            {
+                type: 'function',
+                tooltip: "Create Natural Function", 
+                emptyStateLabel: "Create Natural Function",
+                handlerKey: 'onAddFunction',
+                condition: (title) => title === "Natural Functions"
+            },
+            {
+                type: 'function',
+                tooltip: "Create Function",
+                emptyStateLabel: "Create Function",
+                handlerKey: 'onAddFunction',
+                condition: (title) => title !== "Data Mappers" && title !== "Natural Functions"
+            }
+        ],
+        showWhenEmpty: true,
+        useConnectionContainer: false
+    },
+    "Agents": {
+        title: "Agents", 
+        actions: [],
+        showWhenEmpty: true,
+        useConnectionContainer: false
+    },
+    "Model Providers": {
+        title: "Model Providers",
+        actions: [{
+            type: 'add',
+            tooltip: "Add Model Provider", // Will use addButtonLabel from props
+            emptyStateLabel: "", // Will use addButtonLabel from props
+            handlerKey: 'onAdd'
+        }],
+        showWhenEmpty: true,
+        useConnectionContainer: true
+    },
+    "Vector Stores": {
+        title: "Vector Stores",
+        actions: [{
+            type: 'add',
+            tooltip: "",
+            emptyStateLabel: "",
+            handlerKey: 'onAdd'
+        }],
+        showWhenEmpty: true,
+        useConnectionContainer: true
+    },
+    "Embedding Providers": {
+        title: "Embedding Providers",
+        actions: [{
+            type: 'add',
+            tooltip: "",
+            emptyStateLabel: "",
+            handlerKey: 'onAdd'
+        }],
+        showWhenEmpty: true,
+        useConnectionContainer: true
+    },
+    "Data Loaders": {
+        title: "Data Loaders",
+        actions: [{
+            type: 'add',
+            tooltip: "",
+            emptyStateLabel: "",
+            handlerKey: 'onAdd'
+        }],
+        showWhenEmpty: true,
+        useConnectionContainer: true
+    },
+    "Chunkers": {
+        title: "Chunkers",
+        actions: [{
+            type: 'add',
+            tooltip: "",
+            emptyStateLabel: "",
+            handlerKey: 'onAdd'
+        }],
+        showWhenEmpty: true,
+        useConnectionContainer: true
+    },
+    "Vector Knowledge Bases": {
+        title: "Vector Knowledge Bases",
+        actions: [{
+            type: 'add',
+            tooltip: "",
+            emptyStateLabel: "",
+            handlerKey: 'onAdd'
+        }],
+        showWhenEmpty: true,
+        useConnectionContainer: true
+    }
+};
+
+// Helper functions for category configuration
+export const getCategoryConfig = (title: string): CategoryConfig | undefined => {
+    return CATEGORY_CONFIGS[title];
+};
+
+export const shouldShowEmptyCategory = (title: string): boolean => {
+    const config = getCategoryConfig(title);
+    return config?.showWhenEmpty ?? false;
+};
+
+export const shouldUseConnectionContainer = (title: string): boolean => {
+    const config = getCategoryConfig(title);
+    return config?.useConnectionContainer ?? false;
+};
+
+export const getCategoryActions = (title: string, contextTitle?: string): CategoryAction[] => {
+    const config = getCategoryConfig(title);
+    if (!config) return [];
+    
+    return config.actions.filter(action => {
+        if (!action.condition) return true;
+        return action.condition(contextTitle || title);
+    });
+};
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx
index 4cfe3773c16..40fd2115da7 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/index.tsx
@@ -32,8 +32,11 @@ import styled from "@emotion/styled";
 import { BackIcon, CloseIcon, LogIcon } from "../../resources";
 import { Category, Item, Node } from "./types";
 import { cloneDeep, debounce } from "lodash";
+import { GroupListSkeleton } from "../Skeletons";
 import GroupList from "../GroupList";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
+import { getExpandedCategories, setExpandedCategories, getDefaultExpandedState } from "../../utils/localStorage";
+import { getCategoryConfig, shouldShowEmptyCategory, shouldUseConnectionContainer, getCategoryActions, CategoryAction } from "./categoryConfig";
 
 namespace S {
     export const Container = styled.div<{}>`
@@ -63,10 +66,10 @@ namespace S {
         justify-content: flex-start;
         align-items: flex-start;
         width: 100%;
-        margin-top: 8px;
-        margin-bottom: ${({ showBorder }) => (showBorder ? "20px" : "12px")};
-        padding-bottom: 8px;
-        border-bottom: ${({ showBorder }) => (showBorder ? `1px solid ${ThemeColors.OUTLINE_VARIANT}` : "none")};
+        margin-top: 0;
+        margin-bottom: 0;
+        padding-bottom: 0;
+        border-bottom: none;
     `;
 
     export const Row = styled.div<{}>`
@@ -86,16 +89,17 @@ namespace S {
 
     export const Grid = styled.div<{ columns: number }>`
         display: grid;
-        grid-template-columns: repeat(${({ columns }) => columns}, 1fr);
+        grid-template-columns: repeat(${({ columns }) => columns}, minmax(0, 1fr));
         gap: 8px;
         width: 100%;
         margin-top: 8px;
+        margin-bottom: 12px;
     `;
 
     export const Title = styled.div<{}>`
         font-size: 14px;
         font-family: GilmerBold;
-        text-wrap: nowrap;
+        white-space: nowrap;
         &:first {
             margin-top: 0;
         }
@@ -122,6 +126,8 @@ namespace S {
         height: 36px;
         cursor: ${({ enabled }) => (enabled ? "pointer" : "not-allowed")};
         font-size: 14px;
+        min-width: 160px;
+        max-width: 100%;
         ${({ enabled }) => !enabled && "opacity: 0.5;"}
         &:hover {
             ${({ enabled }) =>
@@ -135,7 +141,8 @@ namespace S {
 
     export const ComponentTitle = styled.div`
         white-space: nowrap;
-        width: 124px;
+        flex: 1;
+        min-width: 0;
         overflow: hidden;
         text-overflow: ellipsis;
         display: block;
@@ -143,10 +150,11 @@ namespace S {
     `;
 
     export const IconContainer = styled.div`
-        padding: 0 8px;
+        padding: 0 4px;
         display: flex;
         align-items: center;
         justify-content: center;
+        flex-shrink: 0;
         & svg {
             height: 16px;
             width: 16px;
@@ -173,6 +181,7 @@ namespace S {
 
     export const HighlightedButton = styled.div`
         margin-top: 10px;
+        margin-bottom: 12px;
         width: 100%;
         display: flex;
         flex-direction: row;
@@ -190,13 +199,6 @@ namespace S {
         }
     `;
 
-    export const AddConnectionButton = styled(Button)`
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        width: 100%;
-    `;
-
     export const AiContainer = styled.div`
         display: flex;
         flex-direction: column;
@@ -241,6 +243,53 @@ namespace S {
         color: ${ThemeColors.ON_SURFACE_VARIANT};
         transition: all 0.2s ease;
     `;
+
+    export const CategoryHeader = styled.div<{ fullWidth?: boolean }>`
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: -webkit-fill-available;
+        padding: 12px;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        border-radius: 5px;
+        margin: ${({ fullWidth }) => fullWidth ? '0 -12px' : '0'};
+        
+        &:hover {
+            background-color: ${ThemeColors.PRIMARY_CONTAINER};
+        }
+    `;
+
+    export const CategoryCard = styled.div<{ hasBackground?: boolean }>`
+        background-color: ${({ hasBackground }) => hasBackground ? `rgba(255, 255, 255, 0.02)` : 'transparent'};
+        border-radius: 5px;
+        padding: ${({ hasBackground }) => hasBackground ? '0 12px' : '0'};
+        margin-bottom: 16px;
+        border: ${({ hasBackground }) => hasBackground ? `1px solid ${ThemeColors.OUTLINE_VARIANT}` : 'none'};
+        transition: all 0.2s ease;
+        
+        &:hover {
+            ${({ hasBackground }) => hasBackground && `
+                background-color: rgba(255, 255, 255, 0.04);
+            `}
+        }
+    `;
+
+    export const ChevronIcon = styled.div<{ isExpanded: boolean }>`
+        transition: transform 0.2s ease;
+        transform: ${({ isExpanded }) => isExpanded ? 'rotate(-90deg)' : 'rotate(90deg)'};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    `;
+
+    export const CategorySeparator = styled.div`
+        width: 100%;
+        height: 1px;
+        background-color: ${ThemeColors.OUTLINE_VARIANT};
+        margin: 16px 0;
+    `;
 }
 
 interface NodeListProps {
@@ -278,6 +327,7 @@ export function NodeList(props: NodeListProps) {
     const [showGeneratePanel, setShowGeneratePanel] = useState(false);
     const [isSearching, setIsSearching] = useState(false);
     const [expandedMoreSections, setExpandedMoreSections] = useState<Record<string, boolean>>({});
+    const [expandedCategories, setExpandedCategoriesState] = useState<Record<string, boolean>>({});
     const { rpcClient } = useRpcContext();
     const [isNPSupported, setIsNPSupported] = useState(false);
 
@@ -290,6 +340,19 @@ export function NodeList(props: NodeListProps) {
             });
     }, []);
 
+    // Initialize expanded categories state from localStorage
+    useEffect(() => {
+        if (categories && categories.length > 0) {
+            const categoryTitles = categories.map(cat => cat.title);
+            const storedState = getExpandedCategories();
+            const defaultState = getDefaultExpandedState(categoryTitles);
+            
+            // Merge stored state with defaults, prioritizing stored state
+            const mergedState = { ...defaultState, ...storedState };
+            setExpandedCategoriesState(mergedState);
+        }
+    }, [categories]);
+
     useEffect(() => {
         if (onSearchTextChange) {
             setIsSearching(true);
@@ -319,8 +382,19 @@ export function NodeList(props: NodeListProps) {
         }));
     };
 
+    const toggleCategory = (categoryTitle: string) => {
+        const newExpandedState = {
+            ...expandedCategories,
+            [categoryTitle]: !expandedCategories[categoryTitle],
+        };
+        setExpandedCategoriesState(newExpandedState);
+        setExpandedCategories(newExpandedState);
+    };
+
     const handleAddNode = (node: Node, category?: string) => {
-        onSelect(node.id, { node: node.metadata, category });
+        if (node.enabled) {
+            onSelect(node.id, { node: node.metadata, category });
+        }
     };
 
     const handleAddConnection = () => {
@@ -355,25 +429,34 @@ export function NodeList(props: NodeListProps) {
                         }
 
                         return (
-                            <S.Component
-                                key={node.id + index}
-                                enabled={node.enabled}
-                                onClick={() => handleAddNode(node)}
-                                title={node.label}
+                            <Tooltip 
+                                content={node.description} 
+                                sx={{ 
+                                    maxWidth: "280px",
+                                    whiteSpace: "normal",
+                                    wordWrap: "break-word",
+                                    overflowWrap: "break-word"
+                                }}
                             >
-                                <S.IconContainer>{node.icon || <LogIcon />}</S.IconContainer>
-                                <S.ComponentTitle
-                                    ref={(el) => {
-                                        if (el && el.scrollWidth > el.clientWidth) {
-                                            el.style.fontSize = "13px";
-                                            el.style.wordBreak = "break-word";
-                                            el.style.whiteSpace = "nowrap";
-                                        }
-                                    }}
+                                <S.Component
+                                    key={node.id + index}
+                                    enabled={node.enabled}
+                                    onClick={() => handleAddNode(node)}
                                 >
-                                    {node.label}
-                                </S.ComponentTitle>
-                            </S.Component>
+                                    <S.IconContainer>{node.icon || <LogIcon />}</S.IconContainer>
+                                    <S.ComponentTitle
+                                        ref={(el) => {
+                                            if (el && el.scrollWidth > el.clientWidth) {
+                                                el.style.fontSize = "13px";
+                                                el.style.wordBreak = "break-word";
+                                                el.style.whiteSpace = "nowrap";
+                                            }
+                                        }}
+                                    >
+                                        {node.label}
+                                    </S.ComponentTitle>
+                                </S.Component>
+                            </Tooltip>
                         );
                     })}
                 </S.Grid>
@@ -424,14 +507,18 @@ export function NodeList(props: NodeListProps) {
 
     const getConnectionContainer = (categories: Category[]) => (
         <S.Grid columns={1}>
-            {categories.map((category, index) => (
-                <GroupList
-                    key={category.title + index + "tooltip"}
-                    category={category}
-                    expand={searchText?.length > 0}
-                    onSelect={handleAddNode}
-                />
-            ))}
+            {categories.map((category, index) =>
+                category.isLoading ? (
+                    <GroupListSkeleton key={"skeleton" + index} />
+                ) : (
+                    <GroupList
+                        key={category.title + index + "tooltip"}
+                        category={category}
+                        expand={searchText?.length > 0}
+                        onSelect={handleAddNode}
+                    />
+                ))
+            }
         </S.Grid>
     );
 
@@ -440,31 +527,44 @@ export function NodeList(props: NodeListProps) {
             .flatMap((group) => group?.items || [])
             .filter((item) => item != null)
             .find((item) => "id" in item && item.id === "FUNCTION");
+        
+        // Configuration for special categories
+        const categoryConfig = {
+            "Connections": { hasBackground: false },
+            "Statement": { hasBackground: true, showSeparatorBefore: true }, // Show separator before Statement
+            "AI": { hasBackground: true, targetPosition: 3 }, // 4th position (0-indexed)
+            "Control": { hasBackground: true },
+            "Error Handling": { hasBackground: true },
+            "Concurrency": { hasBackground: true },
+            "Logging": { hasBackground: true },
+            "Model Providers": { hasBackground: false },
+            "Embedding Providers": { hasBackground: false },
+            "Vector Knowledge Bases": { hasBackground: false },
+            "Vector Stores": { hasBackground: false },
+            "Data Loaders": { hasBackground: false },
+            "Chunkers": { hasBackground: false },
+        };
+        
+        // Reorder categories to move AI as 4th category
+        const reorderedGroups = [...groups];
+        const aiCategoryIndex = reorderedGroups.findIndex(group => group.title === "AI");
+        if (aiCategoryIndex !== -1 && aiCategoryIndex < 3) {
+            const aiCategory = reorderedGroups.splice(aiCategoryIndex, 1)[0];
+            reorderedGroups.splice(3, 0, aiCategory);
+        }
+        
         const content = (
             <>
-                {groups.map((group, index) => {
-                    const isConnectionCategory = group.title === "Connections";
-                    const isProjectFunctionsCategory = group.title === "Current Integration";
-                    const isDataMapperCategory = isProjectFunctionsCategory && title === "Data Mappers";
-                    const isAgentCategory = group.title === "Agents";
-                    const isNpFunctionCategory = isProjectFunctionsCategory && title === "Natural Functions";
-                    const isModelProviderCategory = group.title === "Model Providers";
-                    const isVectorStoreCategory = group.title === "Vector Stores";
-                    const isEmbeddingProviderCategory = group.title === "Embedding Providers";
-                    const isVectorKnowledgeBaseCategory = group.title === "Vector Knowledge Bases";
+                {reorderedGroups.map((group, index) => {
+                    const categoryActions = getCategoryActions(group.title, title);
+                    const config = categoryConfig[group.title] || { hasBackground: true };
+                    const shouldShowSeparator = config.showSeparatorBefore;
+                    const isLoggingCategory = group.title === "Logging";
+                    
                     // Hide categories that don't have items, except for special categories that can add items
                     if (!group || !group.items || group.items.length === 0) {
                         // Only show empty categories if they have add functionality
-                        if (
-                            !isConnectionCategory &&
-                            !isProjectFunctionsCategory &&
-                            !isAgentCategory &&
-                            !isNpFunctionCategory &&
-                            !isModelProviderCategory &&
-                            !isVectorStoreCategory &&
-                            !isEmbeddingProviderCategory &&
-                            !isVectorKnowledgeBaseCategory
-                        ) {
+                        if (!shouldShowEmptyCategory(group.title)) {
                             return null;
                         }
                     }
@@ -472,150 +572,140 @@ export function NodeList(props: NodeListProps) {
                         return null;
                     }
                     // skip current integration category if onAddFunction is not provided and items are empty
-                    if (!onAddFunction && isProjectFunctionsCategory && (!group.items || group.items.length === 0)) {
+                    if (!onAddFunction && group.title === "Current Integration" && (!group.items || group.items.length === 0)) {
                         return null;
                     }
 
+                    const isCategoryExpanded = shouldExpandAll || expandedCategories[group.title] !== false;
+
                     return (
-                        <S.CategoryRow key={group.title + index} showBorder={!isSubCategory}>
-                            <S.Row>
-                                {isSubCategory && (
-                                    <Tooltip content={group.description}>
-                                        <S.SubTitle>{group.title}</S.SubTitle>
-                                    </Tooltip>
-                                )}
-                                {!isSubCategory && (
-                                    <>
-                                        <S.Title>{group.title}</S.Title>
+                        <React.Fragment key={group.title + index}>
+                            {shouldShowSeparator && <S.CategorySeparator />}
+                            <S.CategoryCard hasBackground={config.hasBackground && !isSubCategory}>
+                                <S.CategoryRow showBorder={false}>
+                                    {!isSubCategory ? (
+                                        <S.CategoryHeader fullWidth={config.hasBackground && !isSubCategory} onClick={() => toggleCategory(group.title)}>
+                                            <S.Row style={{ margin: 0, cursor: 'pointer' }}>
+                                                <S.Title>{group.title}</S.Title>
+                                                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                                                    {categoryActions.map((action, actionIndex) => {
+                                                        const handlers = {
+                                                            onAddConnection: handleAddConnection,
+                                                            onAddFunction: handleAddFunction,
+                                                            onAdd: handleAdd
+                                                        };
+                                                        
+                                                        const handler = handlers[action.handlerKey];
+                                                        const propsHandler = props[action.handlerKey];
+                                                        
+                                                        // Only render if the handler exists in props
+                                                        if (!propsHandler || !handler) return null;
+                                                        
+                                                        const tooltipText = action.tooltip || addButtonLabel || "";
+                                                        
+                                                        return (
+                                                            <Tooltip key={`${group.title}-${actionIndex}`} content={tooltipText}>
+                                                                <Button
+                                                                    appearance="icon"
+                                                                    onClick={(e) => {
+                                                                        e.stopPropagation();
+                                                                        handler();
+                                                                    }}
+                                                                >
+                                                                    <Codicon name="add" />
+                                                                </Button>
+                                                            </Tooltip>
+                                                        );
+                                                    })}
+                                                    <Tooltip content={isCategoryExpanded ? "Collapse" : "Expand"}>
+                                                        <S.ChevronIcon isExpanded={isCategoryExpanded}>
+                                                            <Codicon name="chevron-right" />
+                                                        </S.ChevronIcon>
+                                                    </Tooltip>
+                                                </div>
+                                            </S.Row>
+                                        </S.CategoryHeader>
+                                    ) : (
+                                        <S.Row>
+                                            <Tooltip content={group.description}>
+                                                <S.SubTitle>{group.title}</S.SubTitle>
+                                            </Tooltip>
+                                        </S.Row>
+                                    )}
+                                    {isCategoryExpanded && (
                                         <>
-                                            {onAddConnection && isConnectionCategory && (
-                                                <Button
-                                                    appearance="icon"
-                                                    tooltip="Add Connection"
-                                                    onClick={handleAddConnection}
-                                                >
-                                                    <Codicon name="add" />
-                                                </Button>
-                                            )}
-                                            {onAddFunction && isDataMapperCategory && (
-                                                <Button
-                                                    appearance="icon"
-                                                    tooltip="Create Data Mapper"
-                                                    onClick={handleAddFunction}
-                                                >
-                                                    <Codicon name="add" />
-                                                </Button>
-                                            )}
-                                            {onAddFunction &&
-                                                isProjectFunctionsCategory &&
-                                                !isDataMapperCategory &&
-                                                !isNpFunctionCategory && (
-                                                    <Button
-                                                        appearance="icon"
-                                                        tooltip="Create Function"
-                                                        onClick={handleAddFunction}
-                                                    >
-                                                        <Codicon name="add" />
-                                                    </Button>
-                                                )}
-                                            {onAddFunction && isNpFunctionCategory && (
-                                                <Button
-                                                    appearance="icon"
-                                                    tooltip="Create Natural Function"
-                                                    onClick={handleAddFunction}
-                                                >
-                                                    <Codicon name="add" />
-                                                </Button>
-                                            )}
-                                            {onAdd && addButtonLabel && (
-                                                <Button
-                                                    appearance="icon"
-                                                    tooltip={addButtonLabel}
-                                                    onClick={handleAdd}
-                                                >
-                                                    <Codicon name="add" />
-                                                </Button>
+                                            {(!group.items || group.items.length === 0) &&
+                                                !searchText &&
+                                                !isSearching &&
+                                                categoryActions.map((action, actionIndex) => {
+                                                    const handlers = {
+                                                        onAddConnection: handleAddConnection,
+                                                        onAddFunction: handleAddFunction,
+                                                        onAdd: handleAdd
+                                                    };
+                                                    
+                                                    const handler = handlers[action.handlerKey];
+                                                    const propsHandler = props[action.handlerKey];
+                                                    
+                                                    // Only render if the handler exists in props
+                                                    if (!propsHandler || !handler) return null;
+                                                    
+                                                    const buttonLabel = action.emptyStateLabel || addButtonLabel || "Add";
+                                                    
+                                                    return (
+                                                        <S.HighlightedButton 
+                                                            key={`empty-${group.title}-${actionIndex}`}
+                                                            onClick={handler}
+                                                        >
+                                                            <Codicon name="add" iconSx={{ fontSize: 12 }} />
+                                                            {buttonLabel}
+                                                        </S.HighlightedButton>
+                                                    );
+                                                })}
+                                            {group.items &&
+                                            group.items.length > 0 &&
+                                            // 1. If parent group uses connection container and ALL items don't have id, use getConnectionContainer
+                                            shouldUseConnectionContainer(group.title) &&
+                                            group.items.filter((item) => item != null).every((item) => !("id" in item))
+                                                ? getConnectionContainer(group.items as Category[])
+                                                : // 2. If ALL items don't have id (all are categories), use getCategoryContainer
+                                                group.items.filter((item) => item != null).every((item) => !("id" in item))
+                                                ? getCategoryContainer(
+                                                      group.items as Category[],
+                                                      true,
+                                                      !isSubCategory ? group.title : parentCategoryTitle
+                                                  )
+                                                : // 3. Otherwise (has items with id or mixed), use getNodesContainer
+                                                  getNodesContainer(
+                                                      group.items as (Node | Category)[],
+                                                      !isSubCategory ? group.title : parentCategoryTitle
+                                                  )}
+                                            {/* Add Show More Functions under Logging category */}
+                                            {isLoggingCategory && callFunctionNode && isCategoryExpanded && (
+                                                <S.AdvancedSubcategoryContainer key={"showMoreFunctions"} style={{ marginBottom: "12px" }}>
+                                                    <S.AdvancedSubcategoryHeader onClick={() => handleAddNode(callFunctionNode as Node)}>
+                                                        <S.AdvancedSubTitle>Show More Functions</S.AdvancedSubTitle>
+                                                        <Button
+                                                            appearance="icon"
+                                                            sx={{
+                                                                transition: "all 0.2s ease",
+                                                                "&:hover": {
+                                                                    backgroundColor: "transparent !important",
+                                                                },
+                                                            }}
+                                                        >
+                                                            <Codicon name="chevron-right" />
+                                                        </Button>
+                                                    </S.AdvancedSubcategoryHeader>
+                                                </S.AdvancedSubcategoryContainer>
                                             )}
                                         </>
-                                    </>
-                                )}
-                            </S.Row>
-                            {onAddConnection && isConnectionCategory && (!group.items || group.items.length === 0) && (
-                                <S.HighlightedButton onClick={handleAddConnection}>
-                                    <Codicon
-                                        name="add"
-                                        iconSx={{ fontSize: 12 }}
-                                        sx={{ display: "flex", alignItems: "center" }}
-                                    />
-                                    Add Connection
-                                </S.HighlightedButton>
-                            )}
-                            {onAddFunction &&
-                                isProjectFunctionsCategory &&
-                                (!group.items || group.items.length === 0) &&
-                                !searchText &&
-                                !isSearching && (
-                                    <S.HighlightedButton onClick={handleAddFunction}>
-                                        <Codicon name="add" iconSx={{ fontSize: 12 }} />
-                                        {`Create ${
-                                            isDataMapperCategory
-                                                ? "Data Mapper"
-                                                : isNpFunctionCategory
-                                                ? "Natural Function"
-                                                : "Function"
-                                        }`}
-                                    </S.HighlightedButton>
-                                )}
-                            {onAdd &&
-                                addButtonLabel &&
-                                (isModelProviderCategory || isVectorStoreCategory || isEmbeddingProviderCategory || isVectorKnowledgeBaseCategory) &&
-                                (!group.items || group.items.length === 0) &&
-                                !searchText &&
-                                !isSearching && (
-                                    <S.HighlightedButton onClick={handleAdd}>
-                                        <Codicon name="add" iconSx={{ fontSize: 12 }} />
-                                        {addButtonLabel}
-                                    </S.HighlightedButton>
-                                )}
-                            {group.items &&
-                            group.items.length > 0 &&
-                            // 1. If parent group is "Connections", "Model Providers", "Vector Stores", "Embedding Providers", or "Vector Knowledge Bases" and ALL items don't have id, use getConnectionContainer
-                            (group.title === "Connections" || group.title === "Model Providers" || group.title === "Vector Stores" || group.title === "Embedding Providers" || group.title === "Vector Knowledge Bases") &&
-                            group.items.filter((item) => item != null).every((item) => !("id" in item))
-                                ? getConnectionContainer(group.items as Category[])
-                                : // 2. If ALL items don't have id (all are categories), use getCategoryContainer
-                                group.items.filter((item) => item != null).every((item) => !("id" in item))
-                                ? getCategoryContainer(
-                                      group.items as Category[],
-                                      true,
-                                      !isSubCategory ? group.title : parentCategoryTitle
-                                  )
-                                : // 3. Otherwise (has items with id or mixed), use getNodesContainer
-                                  getNodesContainer(
-                                      group.items as (Node | Category)[],
-                                      !isSubCategory ? group.title : parentCategoryTitle
-                                  )}
-                        </S.CategoryRow>
+                                    )}
+                                </S.CategoryRow>
+                            </S.CategoryCard>
+                        </React.Fragment>
                     );
                 })}
-                {callFunctionNode && (
-                    <S.AdvancedSubcategoryContainer key={"showMoreFunctions"}>
-                        <S.AdvancedSubcategoryHeader onClick={() => handleAddNode(callFunctionNode as Node)}>
-                            <S.AdvancedSubTitle>Show More Functions</S.AdvancedSubTitle>
-                            <Button
-                                appearance="icon"
-                                sx={{
-                                    transition: "all 0.2s ease",
-                                    "&:hover": {
-                                        backgroundColor: "transparent !important",
-                                    },
-                                }}
-                            >
-                                <Codicon name="chevron-right" />
-                            </Button>
-                        </S.AdvancedSubcategoryHeader>
-                    </S.AdvancedSubcategoryContainer>
-                )}
             </>
         );
 
@@ -671,6 +761,9 @@ export function NodeList(props: NodeListProps) {
         return category;
     });
 
+    // When searching, expand all categories
+    const shouldExpandAll = searchText && searchText.length > 0;
+
     return (
         <S.Container>
             <S.HeaderContainer>
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/types.ts b/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/types.ts
index e34c3314b90..2decc078280 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/types.ts
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/NodeList/types.ts
@@ -23,6 +23,7 @@ export type Category = {
     description: string;
     icon?: JSX.Element;
     items: Item[];
+    isLoading?: boolean;
 };
 
 export type Node = {
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/ParamManager/ParamEditor.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/ParamManager/ParamEditor.tsx
index 1956efa083f..bb2bc268d26 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/ParamManager/ParamEditor.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/ParamManager/ParamEditor.tsx
@@ -79,7 +79,8 @@ export function ParamEditor(props: ParamProps) {
         onChange: (newType: string, newCursorPosition: number) => void,
         changeTypeHelperState: (isOpen: boolean) => void,
         helperPaneHeight: HelperPaneHeight,
-        closeCompletions: () => void
+        closeCompletions: () => void,
+        exprRef: RefObject<FormExpressionEditorRef>
     ) => {
         return expressionEditor?.getTypeHelper(
             propertyKey,
@@ -91,7 +92,8 @@ export function ParamEditor(props: ParamProps) {
             onChange,
             changeTypeHelperState,
             helperPaneHeight,
-            closeCompletions
+            closeCompletions,
+            exprRef
         );
     };
 
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/ParamManager/ParamManager.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/ParamManager/ParamManager.tsx
index 551901dbae5..357f80bd888 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/ParamManager/ParamManager.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/ParamManager/ParamManager.tsx
@@ -25,7 +25,7 @@ import { Codicon, ErrorBanner, LinkButton, RequiredFormInput, ThemeColors } from
 import { FormField, FormValues } from '../Form/types';
 import { Controller } from 'react-hook-form';
 import { useFormContext } from '../../context';
-import { NodeKind } from '@wso2/ballerina-core';
+import { Imports, NodeKind } from '@wso2/ballerina-core';
 import { useRpcContext } from '@wso2/ballerina-rpc-client';
 import { EditorFactory } from '../editors/EditorFactory';
 import { getFieldKeyForAdvanceProp } from '../editors/utils';
@@ -38,6 +38,8 @@ export interface Parameter {
     icon: string;
     identifierEditable: boolean;
     identifierRange: any;
+    hidden?: boolean;
+    imports?: Imports;
 }
 
 
@@ -324,7 +326,7 @@ export function ParamManager(props: ParamManagerProps) {
                             openRecordEditor={openRecordEditor}
                         />
                     )
-                } else if ((editingSegmentId !== index)) {
+                } else if ((editingSegmentId !== index && !(param.hidden ?? false))) {
                     render.push(
                         <ParamItem
                             key={param.id}
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/Skeletons/GroupListSkeleton.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/Skeletons/GroupListSkeleton.tsx
new file mode 100644
index 00000000000..b9443bbb83f
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/Skeletons/GroupListSkeleton.tsx
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from "react";
+import styled from "@emotion/styled";
+import { ThemeColors } from "@wso2/ui-toolkit";
+import { SkeletonBase } from "./styles";
+
+// Component skeleton
+const ComponentSkeleton = styled.div`
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+    padding: 7px 5px;
+    border: 1px solid ${ThemeColors.OUTLINE_VARIANT};
+    border-radius: 5px;
+    height: 44px;
+    min-height: 44px;
+    align-items: center;
+`;
+
+// Component icon skeleton
+const ComponentIconSkeleton = styled(SkeletonBase)`
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    margin: 0 8px;
+`;
+
+// Component action skeleton
+const ComponentActionSkeleton = styled(SkeletonBase)`
+    width: 14px;
+    height: 14px;
+    border-radius: 4px;
+    margin-right: 8px;
+`;
+
+// Component content skeleton
+const ComponentContentSkeleton = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    width: 280px;
+`;
+
+// Component title skeleton
+const ComponentTitleSkeleton = styled(SkeletonBase)`
+    width: 180px;
+    height: 14px;
+    border-radius: 2px;
+`;
+
+export const GroupListSkeleton = () => {
+    return (
+        <ComponentSkeleton>
+            <ComponentIconSkeleton />
+            <ComponentContentSkeleton>
+                <ComponentTitleSkeleton />
+            </ComponentContentSkeleton>
+            <ComponentActionSkeleton />
+        </ComponentSkeleton>
+    );
+};
+
+export default GroupListSkeleton;
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/ValueConfigButton/index.ts b/workspaces/ballerina/ballerina-side-panel/src/components/Skeletons/index.tsx
similarity index 92%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/ValueConfigButton/index.ts
rename to workspaces/ballerina/ballerina-side-panel/src/components/Skeletons/index.tsx
index ada066a87ca..e04fca2ef9d 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/ValueConfigButton/index.ts
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/Skeletons/index.tsx
@@ -15,4 +15,5 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-export * from "./ValueConfigMenu";
+
+export { GroupListSkeleton } from "./GroupListSkeleton";
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/Skeletons/styles.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/Skeletons/styles.tsx
new file mode 100644
index 00000000000..6e753802bb9
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/Skeletons/styles.tsx
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+
+// Skeleton pulse animation
+export const skeletonPulse = keyframes`
+    0% {
+        opacity: 0.3;
+    }
+    50% {
+        opacity: 0.9;
+    }
+    100% {
+        opacity: 0.3;
+    }
+`;
+
+// Base skeleton element
+export const SkeletonBase = styled.div<{
+    width?: string | number;
+    height?: string | number;
+    borderRadius?: string | number;
+    margin?: string;
+    position?: string;
+    top?: string | number;
+    left?: string | number;
+}>`
+    background-color: var(--vscode-editor-inactiveSelectionBackground);
+    border-radius: ${({ borderRadius = "4px" }) =>
+        typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius};
+    animation: ${skeletonPulse} 1.5s ease-in-out infinite;
+    width: ${({ width = "100%" }) =>
+        typeof width === "number" ? `${width}px` : width};
+    height: ${({ height = "16px" }) =>
+        typeof height === "number" ? `${height}px` : height};
+    margin: ${({ margin = "0" }) => margin};
+    position: ${({ position = "static" }) => position};
+    top: ${({ top }: { top?: string | number }) =>
+        typeof top === "number" ? `${top}px` : top};
+    left: ${({ left }: { left?: string | number }) =>
+        typeof left === "number" ? `${left}px` : left};
+`;
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/ActionExpressionEditor.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ActionExpressionEditor.tsx
new file mode 100644
index 00000000000..e7916549762
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ActionExpressionEditor.tsx
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from "react";
+import { useFormContext } from "../../context";
+import { ContextAwareExpressionEditorProps, ExpressionEditor } from "./ExpressionEditor";
+import { LinkButton } from "@wso2/ui-toolkit/lib/components/LinkButton/LinkButton";
+import styled from "@emotion/styled";
+
+const Row = styled.div`
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+`;
+
+const actionButtonStyles = {
+    padding: "4px 6px",
+    margin: 0,
+    marginTop: "6px",
+    fontSize: "13px",
+};
+
+export const ActionExpressionEditor = (props: ContextAwareExpressionEditorProps) => {
+    const { form, expressionEditor, targetLineRange, fileName } = useFormContext();
+
+    return (
+        <>
+            <Row>
+                <ExpressionEditor
+                    fileName={fileName}
+                    {...targetLineRange}
+                    {...props}
+                    {...form}
+                    {...expressionEditor}
+                />
+                <LinkButton onClick={props.field.actionCallback} sx={actionButtonStyles}>{props.field.actionLabel}</LinkButton>
+            </Row>
+        </>
+    );
+};
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/CheckBoxEditor.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/CheckBoxEditor.tsx
index a89ca94b648..6e8667ab960 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/CheckBoxEditor.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/CheckBoxEditor.tsx
@@ -41,7 +41,6 @@ const LabelGroup = styled.div`
 const BoxGroup = styled.div`
     display: flex;
     flex-direction: row;
-    gap: 12px;
     width: 100%;
     align-items: flex-start;
 `;
@@ -56,10 +55,21 @@ export function CheckBoxEditor(props: TextEditorProps) {
     const { form } = useFormContext();
     const { register, control } = form;
 
+    const getBooleanValue = (value: any) => {
+        if (field.type === "FLAG") {
+            return value === "true" || value === true;
+        }
+        return value;
+    };
+
     return (
         <CheckBoxGroup containerSx={{ width: "100%" }}>
             <BoxGroup>
-                <FormCheckBox name={field.key} {...register(field.key)} control={control as any} />
+                <FormCheckBox 
+                    name={field.key} 
+                    {...register(field.key, { value: getBooleanValue(field.value) })} 
+                    control={control as any} 
+                />
                 <LabelGroup>
                     <Label>{field.label}</Label>
                     <Description>{field.documentation}</Description>
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/EditorFactory.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/EditorFactory.tsx
index f41cd238eb8..c5f30bb04d0 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/EditorFactory.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/EditorFactory.tsx
@@ -41,7 +41,9 @@ import { ContextAwareRawExpressionEditor } from "./RawExpressionEditor";
 import { IdentifierField } from "./IdentifierField";
 import { PathEditor } from "./PathEditor";
 import { HeaderSetEditor } from "./HeaderSetEditor";
+import { CompletionItem } from "@wso2/ui-toolkit";
 import { CustomDropdownEditor } from "./CustomDropdownEditor";
+import { ActionExpressionEditor } from "./ActionExpressionEditor";
 
 interface FormFieldEditorProps {
     field: FormField;
@@ -55,6 +57,8 @@ interface FormFieldEditorProps {
     recordTypeFields?: RecordTypeField[];
     onIdentifierEditingStateChange?: (isEditing: boolean) => void;
     setSubComponentEnabled?: (isAdding: boolean) => void;
+    handleNewTypeSelected?: (type: CompletionItem) => void;
+
     scopeFieldAddon?: React.ReactNode;
     newServerUrl?: string;
     mcpTools?: { name: string; description?: string }[];
@@ -74,6 +78,7 @@ export const EditorFactory = (props: FormFieldEditorProps) => {
         recordTypeFields,
         onIdentifierEditingStateChange,
         setSubComponentEnabled,
+        handleNewTypeSelected,
         scopeFieldAddon,
         newServerUrl
     } = props;
@@ -130,6 +135,8 @@ export const EditorFactory = (props: FormFieldEditorProps) => {
                 handleOnFieldFocus={handleOnFieldFocus}
                 autoFocus={autoFocus}
                 handleOnTypeChange={handleOnTypeChange}
+                handleNewTypeSelected={handleNewTypeSelected}
+
             />
         );
     } else if (!field.items && (field.type === "EXPRESSION" || field.type === "LV_EXPRESSION" || field.type == "ACTION_OR_EXPRESSION") && field.editable) {
@@ -171,6 +178,17 @@ export const EditorFactory = (props: FormFieldEditorProps) => {
         return <IdentifierField field={field} handleOnFieldFocus={handleOnFieldFocus} autoFocus={autoFocus} />;
     } else if (field.type === "SERVICE_PATH" || field.type === "ACTION_PATH") {
         return <PathEditor field={field} handleOnFieldFocus={handleOnFieldFocus} autoFocus={autoFocus} />;
+    } else if (!field.items && field.type === "ACTION_EXPRESSION") {
+        return (
+            <ActionExpressionEditor
+                field={field}
+                openSubPanel={openSubPanel}
+                subPanelView={subPanelView}
+                handleOnFieldFocus={handleOnFieldFocus}
+                autoFocus={autoFocus}
+                recordTypeField={recordTypeFields?.find(recordField => recordField.key === field.key)}
+            />
+        );
     } else {
         // Default to text editor
         // Readonly fields are also treated as text editor
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpressionEditor.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpressionEditor.tsx
index d2759099846..59baf4ee640 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpressionEditor.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/ExpressionEditor.tsx
@@ -16,7 +16,6 @@
  * under the License.
  */
 
-import { debounce } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import { Control, Controller, FieldValues, UseFormWatch } from 'react-hook-form';
 import styled from '@emotion/styled';
@@ -39,14 +38,15 @@ import {
     LineRange,
     RecordTypeField,
     SubPanel,
-    SubPanelView,
-    SubPanelViewProps
+    SubPanelView
 } from '@wso2/ballerina-core';
 import ReactMarkdown from 'react-markdown';
+import { FieldProvider } from "./FieldContext";
 
 export type ContextAwareExpressionEditorProps = {
     id?: string;
     fieldKey?: string;
+    valueTypeConstraint?: string;
     placeholder?: string;
     required?: boolean;
     showHeader?: boolean;
@@ -56,6 +56,8 @@ export type ContextAwareExpressionEditorProps = {
     handleOnFieldFocus?: (key: string) => void;
     autoFocus?: boolean;
     recordTypeField?: RecordTypeField;
+    helperPaneZIndex?: number;
+
 };
 
 type ExpressionEditorProps = ContextAwareExpressionEditorProps &
@@ -72,7 +74,7 @@ export namespace S {
         display: 'flex',
         flexDirection: 'column',
         gap: '4px',
-        fontFamily: 'var(--font-family)'
+        fontFamily: 'var(--font-family)',
     });
 
     export const Ribbon = styled.div({
@@ -289,6 +291,7 @@ export const ContextAwareExpressionEditor = (props: ContextAwareExpressionEditor
         <ExpressionEditor
             fileName={fileName}
             targetLineRange={targetLineRange}
+            helperPaneZIndex={props.helperPaneZIndex}
             {...props}
             {...form}
             {...expressionEditor}
@@ -319,14 +322,12 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
         onSave,
         onCancel,
         onRemove,
-        openSubPanel,
         handleOnFieldFocus,
-        subPanelView,
         targetLineRange,
         fileName,
-        helperPaneOrigin,
         helperPaneHeight,
         recordTypeField,
+        helperPaneZIndex,
         growRange = { start: 1, offset: 9 },
         rawExpression, // original expression
         sanitizedExpression // sanitized expression that will be rendered in the editor
@@ -381,34 +382,6 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
         await onCompletionItemSelect?.(value, key, item.additionalTextEdits);
     };
 
-    const handleOpenSubPanel = (view: SubPanelView, subPanelInfo: SubPanelViewProps) => {
-        openSubPanel({
-            view: view,
-            props: view === SubPanelView.UNDEFINED ? undefined : subPanelInfo
-        });
-    };
-
-    const handleInlineDataMapperOpen = (isUpdate: boolean) => {
-        if (subPanelView === SubPanelView.INLINE_DATA_MAPPER && !isUpdate) {
-            openSubPanel({ view: SubPanelView.UNDEFINED });
-        } else {
-            handleOpenSubPanel(SubPanelView.INLINE_DATA_MAPPER, {
-                inlineDataMapper: {
-                    filePath: effectiveFileName,
-                    flowNode: undefined, // This will be updated in the Form component
-                    position: {
-                        line: effectiveTargetLineRange.startLine.line,
-                        offset: effectiveTargetLineRange.startLine.offset
-                    },
-                    propertyKey: key,
-                    editorKey: key
-                }
-            });
-            handleOnFieldFocus?.(key);
-        }
-    };
-
-
     const handleChangeHelperPaneState = (isOpen: boolean) => {
         setIsHelperPaneOpen(isOpen);
     };
@@ -436,22 +409,15 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
             handleChangeHelperPaneState,
             helperPaneHeight,
             recordTypeField,
-            field.type === "LV_EXPRESSION"
+            field.type === "LV_EXPRESSION",
+            field.valueTypeConstraint,
         );
     };
 
-    const updateSubPanelData = (value: string) => {
-        if (subPanelView === SubPanelView.INLINE_DATA_MAPPER) {
-            handleInlineDataMapperOpen(true);
-        }
-    };
-
     const handleExtractArgsFromFunction = async (value: string, cursorPosition: number) => {
         return await extractArgsFromFunction(value, getPropertyFromFormField(field), cursorPosition);
     };
 
-    const debouncedUpdateSubPanelData = debounce(updateSubPanelData, 300);
-
     const defaultValueText = field.defaultValue ?
         <S.DefaultValue>Defaults to {field.defaultValue}</S.DefaultValue> : null;
 
@@ -461,103 +427,111 @@ export const ExpressionEditor = (props: ExpressionEditorProps) => {
             : `${field.documentation}.`
         : '';
 
+
     return (
-        <S.Container id={id}>
-            {showHeader && (
-                <S.Header>
-                    <S.HeaderContainer>
-                        <S.LabelContainer>
-                            <S.Label>{field.label}</S.Label>
-                            {(required ?? !field.optional) && <RequiredFormInput />}
-                        </S.LabelContainer>
-                        {field.valueTypeConstraint && (
-                            <S.Type isVisible={focused} title={field.valueTypeConstraint as string}>
-                                {sanitizeType(field.valueTypeConstraint as string)}
-                            </S.Type>
-                        )}
-                    </S.HeaderContainer>
+        <FieldProvider 
+        initialField={props.field} 
+        triggerCharacters={props.triggerCharacters}
+        >
+            <S.Container id={id}>
+                {showHeader && (
+                    <S.Header>
+                        <S.HeaderContainer>
+                            <S.LabelContainer>
+                                <S.Label>{field.label}</S.Label>
+                                {(required ?? !field.optional) && <RequiredFormInput />}
+                            </S.LabelContainer>
+                            {field.valueTypeConstraint && (
+                                <S.Type isVisible={focused} title={field.valueTypeConstraint as string}>
+                                    {sanitizeType(field.valueTypeConstraint as string)}
+                                </S.Type>
+                            )}
+                        </S.HeaderContainer>
                         <S.EditorMdContainer>
                             {documentation && <ReactMarkdown>{documentation}</ReactMarkdown>}
                             {defaultValueText}
                         </S.EditorMdContainer>
                     </S.Header>
-            )}
-            <Controller
-                control={control}
-                name={key}
-                rules={{ required: required ?? (!field.optional && !field.placeholder) }}
-                render={({ field: { name, value, onChange }, fieldState: { error } }) => (
-                    <div>
-                        <FormExpressionEditor
-                            key={key}
-                            ref={exprRef}
-                            anchorRef={anchorRef}
-                            name={name}
-                            completions={completions}
-                            value={sanitizedExpression ? sanitizedExpression(value) : value}
-                            autoFocus={autoFocus}
-                            startAdornment={<EditorRibbon onClick={toggleHelperPaneState} />}
-                            ariaLabel={field.label}
-                            onChange={async (updatedValue: string, updatedCursorPosition: number) => {
-                                if (updatedValue === value) {
-                                    return;
-                                }
+                )}
+                <Controller
+                    control={control}
+                    name={key}
+                    rules={{ required: required ?? (!field.optional && !field.placeholder) }}
+                    render={({ field: { name, value, onChange }, fieldState: { error } }) => (
+                        <div>
+                            <FormExpressionEditor
+                                key={key}
+                                ref={exprRef}
+                                anchorRef={anchorRef}
+                                name={name}
+                                completions={completions}
+                                value={sanitizedExpression ? sanitizedExpression(value) : value}
+                                autoFocus={autoFocus}
+                                startAdornment={<EditorRibbon onClick={toggleHelperPaneState} />}
+                                ariaLabel={field.label}
+                                onChange={async (updatedValue: string, updatedCursorPosition: number) => {
+                                    if (updatedValue === value) {
+                                        return;
+                                    }
 
                                 const rawValue = rawExpression ? rawExpression(updatedValue) : updatedValue;
                                 onChange(rawValue);
-                                debouncedUpdateSubPanelData(rawValue);
-
-                                if (getExpressionEditorDiagnostics) {
-                                    getExpressionEditorDiagnostics(
-                                        (required ?? !field.optional) || rawValue !== '',
-                                        rawValue,
-                                        key,
-                                        getPropertyFromFormField(field)
-                                    );
-                                }
-
-                                // Check if the current character is a trigger character
-                                const triggerCharacter =
-                                    updatedCursorPosition > 0
-                                        ? triggerCharacters.find((char) => rawValue[updatedCursorPosition - 1] === char)
-                                        : undefined;
-                                if (triggerCharacter) {
-                                    await retrieveCompletions(
-                                        rawValue,
-                                        getPropertyFromFormField(field),
-                                        updatedCursorPosition,
-                                        triggerCharacter
-                                    );
-                                } else {
-                                    await retrieveCompletions(
-                                        rawValue,
-                                        getPropertyFromFormField(field),
-                                        updatedCursorPosition
-                                    );
-                                }
-                            }}
-                            extractArgsFromFunction={handleExtractArgsFromFunction}
-                            onCompletionSelect={handleCompletionSelect}
-                            onFocus={handleFocus}
-                            onBlur={handleBlur}
-                            onSave={onSave}
-                            onCancel={onCancel}
-                            onRemove={onRemove}
-                            enableExIcon={false}
-                            isHelperPaneOpen={isHelperPaneOpen}
-                            changeHelperPaneState={handleChangeHelperPaneState}
-                            helperPaneOrigin={helperPaneOrigin}
-                            getHelperPane={handleGetHelperPane}
-                            helperPaneHeight={helperPaneHeight}
-                            helperPaneWidth={recordTypeField ? 400 : undefined}
-                            growRange={growRange}
-                            sx={{ paddingInline: '0' }}
-                            placeholder={placeholder}
-                        />
-                        {error && <ErrorBanner errorMsg={error.message.toString()} />}
-                    </div>
-                )}
-            />
-        </S.Container>
+
+                                    if (getExpressionEditorDiagnostics) {
+                                        getExpressionEditorDiagnostics(
+                                            (required ?? !field.optional) || rawValue !== '',
+                                            rawValue,
+                                            key,
+                                            getPropertyFromFormField(field)
+                                        );
+                                    }
+
+                                    // Check if the current character is a trigger character
+                                    const triggerCharacter =
+                                        updatedCursorPosition > 0
+                                            ? triggerCharacters.find((char) => rawValue[updatedCursorPosition - 1] === char)
+                                            : undefined;
+                                    if (triggerCharacter) {
+                                        await retrieveCompletions(
+                                            rawValue,
+                                            getPropertyFromFormField(field),
+                                            updatedCursorPosition,
+                                            triggerCharacter
+                                        );
+                                    } else {
+                                        await retrieveCompletions(
+                                            rawValue,
+                                            getPropertyFromFormField(field),
+                                            updatedCursorPosition
+                                        );
+                                    }
+                                }}
+                                extractArgsFromFunction={handleExtractArgsFromFunction}
+                                onCompletionSelect={handleCompletionSelect}
+                                onFocus={async () => {
+                                    handleFocus();
+                                }}
+                                onBlur={handleBlur}
+                                onSave={onSave}
+                                onCancel={onCancel}
+                                onRemove={onRemove}
+                                enableExIcon={false}
+                                isHelperPaneOpen={isHelperPaneOpen}
+                                changeHelperPaneState={handleChangeHelperPaneState}
+                                helperPaneOrigin="vertical"
+                                getHelperPane={handleGetHelperPane}
+                                helperPaneHeight={helperPaneHeight}
+                                helperPaneWidth={recordTypeField ? 400 : undefined}
+                                growRange={growRange}
+                                sx={{ paddingInline: '0' }}
+                                placeholder={placeholder}
+                                helperPaneZIndex={helperPaneZIndex}
+                            />
+                            {error && <ErrorBanner errorMsg={error.message.toString()} />}
+                        </div>
+                    )}
+                />
+            </S.Container>
+        </FieldProvider>
     );
 };
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/FieldContext.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/FieldContext.tsx
new file mode 100644
index 00000000000..076f2455972
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/FieldContext.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { createContext, useContext, useState, ReactNode } from "react";
+import { FormField } from "../Form/types";
+
+type FieldContextType = {
+    field: FormField | null;
+    setField: (field: FormField) => void;
+    triggerCharacters: readonly string[];
+};
+
+const FieldContext = createContext<FieldContextType | undefined>(undefined);
+
+export const useFieldContext = () => {
+    const context = useContext(FieldContext);
+    if (!context) {
+        throw new Error("useFieldContext must be used within a FieldProvider");
+    }
+    return context;
+};
+
+export const FieldProvider = ({ children, initialField, triggerCharacters }: { children: ReactNode; initialField?: FormField, triggerCharacters: readonly string[] }) => {
+    const [field, setField] = useState<FormField | null>(initialField ?? null);
+
+    return (
+        <FieldContext.Provider value={{ field, setField, triggerCharacters }}>
+            {children}
+        </FieldContext.Provider>
+    );
+};
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/TypeEditor.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/editors/TypeEditor.tsx
index 2a8091460e4..8b858232e6f 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/TypeEditor.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/TypeEditor.tsx
@@ -27,7 +27,8 @@ import {
     RequiredFormInput,
     ThemeColors,
     Tooltip,
-    Typography
+    Typography,
+    CompletionItem,
 } from "@wso2/ui-toolkit";
 import { FormField } from "../Form/types";
 import { useFormContext } from "../../context";
@@ -42,7 +43,8 @@ interface TypeEditorProps {
     field: FormField;
     openRecordEditor: (open: boolean) => void;
     handleOnFieldFocus?: (key: string) => void;
-    handleOnTypeChange?: () => void;
+    handleOnTypeChange?: (value?: string) => void;
+    handleNewTypeSelected?: (type: CompletionItem) => void;
     autoFocus?: boolean;
 }
 
@@ -66,10 +68,10 @@ const EditorRibbon = ({ onClick }: { onClick: () => void }) => {
     return (
         <Tooltip content="Add Type" containerSx={{ cursor: 'default' }}>
             <Ribbon onClick={onClick}>
-                <Icon name="bi-type" sx={{ 
-                    color: ThemeColors.ON_PRIMARY, 
-                    fontSize: '12px', 
-                    width: '12px', 
+                <Icon name="bi-type" sx={{
+                    color: ThemeColors.ON_PRIMARY,
+                    fontSize: '12px',
+                    width: '12px',
                     height: '12px'
                 }} />
             </Ribbon>
@@ -89,7 +91,7 @@ const getDefaultCompletion = (newType: string) => {
 }
 
 export function TypeEditor(props: TypeEditorProps) {
-    const { field, openRecordEditor, handleOnFieldFocus, handleOnTypeChange, autoFocus } = props;
+    const { field, openRecordEditor, handleOnFieldFocus, handleOnTypeChange, autoFocus, handleNewTypeSelected } = props;
     const { form, expressionEditor } = useFormContext();
     const { control } = form;
     const {
@@ -103,7 +105,7 @@ export function TypeEditor(props: TypeEditorProps) {
         onBlur,
         onCompletionItemSelect,
         onSave,
-        onCancel,
+        onCancel
     } = expressionEditor;
 
     const exprRef = useRef<FormExpressionEditorRef>(null);
@@ -154,7 +156,7 @@ export function TypeEditor(props: TypeEditorProps) {
     }
 
     const handleTypeEdit = (value: string) => {
-        handleOnTypeChange && handleOnTypeChange();
+        handleOnTypeChange && handleOnTypeChange(value);
     };
 
     const debouncedTypeEdit = debounce(handleTypeEdit, 300);
@@ -186,7 +188,8 @@ export function TypeEditor(props: TypeEditorProps) {
             onChange,
             handleChangeTypeHelperState,
             helperPaneHeight,
-            handleCancel
+            handleCancel,
+            exprRef
         );
     }
 
@@ -228,7 +231,7 @@ export function TypeEditor(props: TypeEditorProps) {
                         {field.documentation && <ReactMarkdown>{field.documentation}</ReactMarkdown>}
                     </S.EditorMdContainer>
                 </S.Header>
-                {field.valueTypeConstraint && 
+                {field.valueTypeConstraint &&
                     <S.Type isVisible={focused} title={field.valueTypeConstraint as string}>{sanitizeType(field.valueTypeConstraint as string)}</S.Type>}
             </S.HeaderContainer>
             <Controller
@@ -265,6 +268,7 @@ export function TypeEditor(props: TypeEditorProps) {
 
                                 // Set show default completion
                                 const typeExists = referenceTypes.find((type) => type.label === updatedValue);
+                                handleNewTypeSelected && handleNewTypeSelected(typeExists)
                                 const validTypeForCreation = updatedValue.match(/^[a-zA-Z_'][a-zA-Z0-9_]*$/);
                                 if (updatedValue && !typeExists && validTypeForCreation) {
                                     setShowDefaultCompletion(true);
@@ -295,6 +299,7 @@ export function TypeEditor(props: TypeEditorProps) {
                             placeholder={field.placeholder}
                             autoFocus={autoFocus}
                             sx={{ paddingInline: '0' }}
+                            helperPaneZIndex={40001}
                         />
                         {error?.message && <ErrorBanner errorMsg={error.message.toString()} />}
                     </div>
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/editors/index.ts b/workspaces/ballerina/ballerina-side-panel/src/components/editors/index.ts
index 2000e614562..06bdf31ca27 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/editors/index.ts
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/editors/index.ts
@@ -25,3 +25,5 @@ export * from "./ArrayEditor";
 export * from "./MapEditor";
 export * from "./FileSelect";
 export * from "./FormMapEditor";
+export * from "./FieldContext";
+export { getPropertyFromFormField } from "./utils";
\ No newline at end of file
diff --git a/workspaces/ballerina/ballerina-side-panel/src/utils/localStorage.ts b/workspaces/ballerina/ballerina-side-panel/src/utils/localStorage.ts
new file mode 100644
index 00000000000..1eb35ff3f9f
--- /dev/null
+++ b/workspaces/ballerina/ballerina-side-panel/src/utils/localStorage.ts
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const EXPANDED_CATEGORIES_KEY = "bi-extension-side-panel";
+
+export interface ExpandedCategoriesState {
+    [categoryTitle: string]: boolean;
+}
+
+export const getExpandedCategories = (): ExpandedCategoriesState => {
+    try {
+        const stored = localStorage.getItem(EXPANDED_CATEGORIES_KEY);
+        return stored ? JSON.parse(stored) : {};
+    } catch (error) {
+        console.warn("Failed to load expanded categories from localStorage:", error);
+        return {};
+    }
+};
+
+export const setExpandedCategories = (expandedState: ExpandedCategoriesState): void => {
+    try {
+        localStorage.setItem(EXPANDED_CATEGORIES_KEY, JSON.stringify(expandedState));
+    } catch (error) {
+        console.warn("Failed to save expanded categories to localStorage:", error);
+    }
+};
+
+export const getDefaultExpandedState = (categories: string[]): ExpandedCategoriesState => {
+    const defaultExpanded: ExpandedCategoriesState = {};
+
+    // Set default expanded categories
+    const defaultExpandedCategories = [
+        "Statement",
+        "Control",
+        "Connections",
+        "Standard Library",
+        "Current Integration",
+        "Model Providers",
+        "Vector Stores",
+        "Embedding Providers",
+        "Vector Knowledge Bases",
+        "Data Loaders",
+        "Chunkers",
+    ];
+
+    categories.forEach((category) => {
+        defaultExpanded[category] = defaultExpandedCategories.includes(category);
+    });
+
+    return defaultExpanded;
+};
diff --git a/workspaces/ballerina/ballerina-visualizer/package.json b/workspaces/ballerina/ballerina-visualizer/package.json
index c94e793d7d9..6faadfdf324 100644
--- a/workspaces/ballerina/ballerina-visualizer/package.json
+++ b/workspaces/ballerina/ballerina-visualizer/package.json
@@ -29,7 +29,7 @@
     "@wso2/ballerina-low-code-diagram": "workspace:*",
     "@wso2/ballerina-rpc-client": "workspace:*",
     "@wso2/ballerina-side-panel": "workspace:*",
-    "@wso2/data-mapper-view": "workspace:*",
+    "@wso2/ballerina-data-mapper": "workspace:*",
     "@wso2/bi-diagram": "workspace:*",
     "@wso2/sequence-diagram": "workspace:*",
     "@wso2/component-diagram": "workspace:*",
@@ -39,7 +39,6 @@
     "@wso2/record-creator": "workspace:*",
     "@wso2/syntax-tree": "workspace:*",
     "@wso2/ui-toolkit": "workspace:*",
-    "@wso2/ballerina-inline-data-mapper": "workspace:*",
     "@wso2/type-editor": "workspace:*",
     "@wso2/wso2-platform-core": "workspace:*",
     "react": "18.2.0",
diff --git a/workspaces/ballerina/ballerina-visualizer/src/Context.tsx b/workspaces/ballerina/ballerina-visualizer/src/Context.tsx
index 7557476e0c9..2bc0f1e6d44 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/Context.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/Context.tsx
@@ -76,6 +76,8 @@ interface VisualizerContext {
     setComponentInfo?: (componentInfo: ComponentInfo) => void;
     cacheTriggers: TriggerModelsResponse,
     setCacheTriggers: (componentInfo: TriggerModelsResponse) => void;
+    showOverlay: boolean;
+    setShowOverlay: (value: boolean) => void;
 }
 
 export const VisualizerContext = createContext({
@@ -89,6 +91,7 @@ export const VisualizerContext = createContext({
     setComponentInfo: (componentInfo: ComponentInfo) => { },
     cacheTriggers: undefined,
     setCacheTriggers: (triggers: TriggerModelsResponse) => { },
+    setShowOverlay: (value: boolean) => { },
 
 } as VisualizerContext);
 
@@ -101,6 +104,7 @@ export function VisualizerContextProvider({ children }: { children: ReactNode })
     const [componentInfo, setComponentInfo] = useState<ComponentInfo>();
     const [activeFileInfo, setActiveFileInfo] = useState<ActiveFileInfo>();
     const [cacheTriggers, setCacheTriggers] = useState<TriggerModelsResponse>({ local: [] });
+    const [showOverlay, setShowOverlay] = useState(false);
 
 
     const contextValue: VisualizerContext = {
@@ -119,7 +123,9 @@ export function VisualizerContextProvider({ children }: { children: ReactNode })
         componentInfo: componentInfo,
         setComponentInfo: setComponentInfo,
         cacheTriggers: cacheTriggers,
-        setCacheTriggers: setCacheTriggers
+        setCacheTriggers: setCacheTriggers,
+        showOverlay: showOverlay,
+        setShowOverlay: setShowOverlay
     };
 
     return <VisualizerContext.Provider value={contextValue}>{children}</VisualizerContext.Provider>;
diff --git a/workspaces/ballerina/ballerina-visualizer/src/Hooks.tsx b/workspaces/ballerina/ballerina-visualizer/src/Hooks.tsx
index 7d94e3e111a..49933195e92 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/Hooks.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/Hooks.tsx
@@ -17,32 +17,33 @@
  */
 import { useQuery } from '@tanstack/react-query';
 import { useRpcContext } from '@wso2/ballerina-rpc-client';
-import { IDMViewState } from '@wso2/ballerina-core';
+import { DMViewState, LinePosition } from '@wso2/ballerina-core';
 
-export const useInlineDataMapperModel = (
+export const useDataMapperModel = (
     filePath: string,
-    viewState: IDMViewState
+    viewState: DMViewState,
+    position?: LinePosition
 ) => {
     const { rpcClient } = useRpcContext();
     const viewId = viewState?.viewId;
     const codedata = viewState?.codedata;
 
-    const getIDMModel = async () => {
+    const getDMModel = async () => {
         try {
             const modelParams = {
                 filePath,
                 codedata,
                 targetField: viewId,
-                position: {
+                position: position ?? {
                     line: codedata.lineRange.startLine.line,
                     offset: codedata.lineRange.startLine.offset
                 }
             };
             const res = await rpcClient
-                .getInlineDataMapperRpcClient()
+                .getDataMapperRpcClient()
                 .getDataMapperModel(modelParams);
 
-            console.log('>>> [Inline Data Mapper] Model:', res);
+            console.log('>>> [Data Mapper] Model:', res);
             return res.mappingsModel;
         } catch (error) {
             console.error(error);
@@ -56,8 +57,8 @@ export const useInlineDataMapperModel = (
         isError,
         refetch
     } = useQuery({
-        queryKey: ['getIDMModel', { filePath, codedata, viewId }],
-        queryFn: () => getIDMModel(),
+        queryKey: ['getDMModel', { codedata, viewId }],
+        queryFn: () => getDMModel(),
         networkMode: 'always'
     });
 
diff --git a/workspaces/ballerina/ballerina-visualizer/src/MainPanel.tsx b/workspaces/ballerina/ballerina-visualizer/src/MainPanel.tsx
index d3480079063..1d5b8974709 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/MainPanel.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/MainPanel.tsx
@@ -24,13 +24,17 @@ import {
     MACHINE_VIEW,
     PopupMachineStateValue,
     EVENT_TYPE,
+    ParentPopupData,
+    ProjectStructureArtifactResponse,
+    DIRECTORY_MAP,
+    CodeData,
+    LinePosition,
 } from "@wso2/ballerina-core";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
 import { Global, css } from "@emotion/react";
 import { debounce } from "lodash";
 import styled from "@emotion/styled";
 import { LoadingRing } from "./components/Loader";
-import { DataMapper } from "./views/DataMapper";
 import { ERDiagram } from "./views/ERDiagram";
 import { GraphQLDiagram } from "./views/GraphQLDiagram";
 import { ServiceDesigner } from "./views/BI/ServiceDesigner";
@@ -44,9 +48,9 @@ import {
     TestFunctionForm
 } from "./views/BI";
 import { handleRedo, handleUndo } from "./utils/utils";
-import { FunctionDefinition } from "@wso2/syntax-tree";
+import { STKindChecker } from "@wso2/syntax-tree";
 import { URI, Utils } from "vscode-uri";
-import { Typography } from "@wso2/ui-toolkit";
+import { ThemeColors, Typography } from "@wso2/ui-toolkit";
 import { PanelType, useVisualizerContext } from "./Context";
 import { ConstructPanel } from "./views/ConstructPanel";
 import { EditPanel } from "./views/EditPanel";
@@ -70,7 +74,8 @@ import { AIAgentDesigner } from "./views/BI/AIChatAgent";
 import { AIChatAgentWizard } from "./views/BI/AIChatAgent/AIChatAgentWizard";
 import { BallerinaUpdateView } from "./views/BI/BallerinaUpdateView";
 import { VSCodeProgressRing } from "@vscode/webview-ui-toolkit/react";
-import { InlineDataMapper } from "./views/InlineDataMapper";
+import { DataMapper } from "./views/DataMapper";
+import { ImportIntegration } from "./views/BI/ImportIntegration";
 
 const globalStyles = css`
     *,
@@ -147,6 +152,18 @@ const LoadingContent = styled.div`
     animation: fadeIn 1s ease-in-out;
 `;
 
+const Overlay = styled.div`
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: ${ThemeColors.SURFACE_CONTAINER};
+    opacity: 0.4;
+    z-index: 2001;
+    pointer-events: auto;
+`;
+
 const LoadingTitle = styled.h1`
     color: var(--vscode-foreground);
     font-size: 1.5em;
@@ -171,7 +188,7 @@ const LoadingText = styled.div`
 
 const MainPanel = () => {
     const { rpcClient } = useRpcContext();
-    const { sidePanel, setSidePanel, popupMessage, setPopupMessage, activePanel } = useVisualizerContext();
+    const { sidePanel, setSidePanel, popupMessage, setPopupMessage, activePanel, showOverlay, setShowOverlay } = useVisualizerContext();
     const [viewComponent, setViewComponent] = useState<React.ReactNode>();
     const [navActive, setNavActive] = useState<boolean>(true);
     const [showHome, setShowHome] = useState<boolean>(true);
@@ -322,25 +339,55 @@ const MainPanel = () => {
                         setViewComponent(<ERDiagram />);
                         break;
                     case MACHINE_VIEW.TypeDiagram:
-                        setViewComponent(<TypeDiagram selectedTypeId={value?.identifier} projectUri={value?.projectUri} addType={value?.addType} />);
+                        if (value?.identifier) {
+                            setViewComponent(
+                                <TypeDiagram
+                                    selectedTypeId={value?.identifier}
+                                    projectUri={value?.projectUri}
+                                    addType={value?.addType}
+                                />
+                            );
+                        } else {
+                            // To support rerendering when user click on view all btn from left side panel
+                            setViewComponent(
+                                <TypeDiagram key={`type-${Date.now()}`}
+                                    selectedTypeId={value?.identifier}
+                                    projectUri={value?.projectUri}
+                                    addType={value?.addType}
+                                />
+                            );
+                        }
                         break;
                     case MACHINE_VIEW.DataMapper:
+                        let position: LinePosition = {
+                            line: value?.position?.startLine,
+                            offset: value?.position?.startColumn
+                        };
+                        if (STKindChecker.isFunctionDefinition(value?.syntaxTree) &&
+                            STKindChecker.isExpressionFunctionBody(value?.syntaxTree.functionBody)
+                        ) {
+                            position = {
+                                line: value?.syntaxTree.functionBody.expression.position.startLine,
+                                offset: value?.syntaxTree.functionBody.expression.position.startColumn
+                            };
+                        }
                         setViewComponent(
                             <DataMapper
-                                projectPath={value.projectUri}
                                 filePath={value.documentUri}
-                                model={value?.syntaxTree as FunctionDefinition}
-                                functionName={value?.identifier}
-                                applyModifications={applyModifications}
+                                codedata={value?.dataMapperMetadata?.codeData}
+                                name={value?.dataMapperMetadata?.name}
+                                projectUri={value.projectUri}
+                                position={position}
+                                reusable
                             />
                         );
                         break;
                     case MACHINE_VIEW.InlineDataMapper:
                         setViewComponent(
-                            <InlineDataMapper
+                            <DataMapper
                                 filePath={value.documentUri}
                                 codedata={value?.dataMapperMetadata?.codeData}
-                                varName={value?.dataMapperMetadata?.name}
+                                name={value?.dataMapperMetadata?.name}
                             />
                         );
                         break;
@@ -366,7 +413,10 @@ const MainPanel = () => {
                         );
                         break;
                     case MACHINE_VIEW.GraphQLDiagram:
-                        setViewComponent(<GraphQLDiagram serviceIdentifier={value?.identifier} filePath={value?.documentUri} position={value?.position} projectUri={value?.projectUri} />);
+                        const getProjectStructure = await rpcClient.getBIDiagramRpcClient().getProjectStructure();
+                        const entryPoint = getProjectStructure.directoryMap[DIRECTORY_MAP.SERVICE].find((service: ProjectStructureArtifactResponse) => service.name === value?.identifier);
+                        await rpcClient.getVisualizerRpcClient().openView({ type: EVENT_TYPE.UPDATE_PROJECT_LOCATION, location: { documentUri: entryPoint?.path, position: entryPoint?.position } });
+                        setViewComponent(<GraphQLDiagram serviceIdentifier={value?.identifier} filePath={value?.documentUri} position={entryPoint?.position} projectUri={value?.projectUri} />);
                         break;
                     case MACHINE_VIEW.BallerinaUpdateView:
                         setNavActive(false);
@@ -384,6 +434,11 @@ const MainPanel = () => {
                         setShowHome(false);
                         setViewComponent(<ProjectForm />);
                         break;
+                    case MACHINE_VIEW.BIImportIntegration:
+                        setShowHome(false);
+                        setViewComponent(<ImportIntegration />);
+                        break;
+
                     case MACHINE_VIEW.BIComponentView:
                         setViewComponent(<ComponentListView scope={value.scope} />);
                         break;
@@ -431,6 +486,14 @@ const MainPanel = () => {
                             />
                         );
                         break;
+                    case MACHINE_VIEW.AddCustomConnector:
+                        setViewComponent(
+                            <AddConnectionWizard
+                                fileName={value.documentUri || value.projectUri}
+                                openCustomConnectorView={true}
+                            />
+                        );
+                        break;
                     case MACHINE_VIEW.BIMainFunctionForm:
                         setViewComponent(<FunctionForm projectPath={value.projectUri} filePath={defaultFunctionsFile} functionName={value?.identifier} isAutomation={true} />);
                         break;
@@ -490,10 +553,10 @@ const MainPanel = () => {
         setPopupMessage(false);
     };
 
-    const handleOnClose = () => {
+    const handleOnClose = (parent?: ParentPopupData) => {
         rpcClient
             .getVisualizerRpcClient()
-            .openView({ type: EVENT_TYPE.CLOSE_VIEW, location: { view: null }, isPopup: true });
+            .openView({ type: EVENT_TYPE.CLOSE_VIEW, location: { view: null, recentIdentifier: parent?.recentIdentifier, artifactType: parent?.artifactType }, isPopup: true });
     };
 
     return (
@@ -501,6 +564,7 @@ const MainPanel = () => {
             <Global styles={globalStyles} />
             <VisualizerContainer>
                 {/* {navActive && <NavigationBar showHome={showHome} />} */}
+                {showOverlay && <Overlay onClick={() => setShowOverlay(false)} />}
                 {viewComponent && <ComponentViewWrapper>{viewComponent}</ComponentViewWrapper>}
                 {!viewComponent && (
                     <ComponentViewWrapper>
diff --git a/workspaces/ballerina/ballerina-visualizer/src/PopupPanel.tsx b/workspaces/ballerina/ballerina-visualizer/src/PopupPanel.tsx
index 3437e26fb70..152e0d86ef9 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/PopupPanel.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/PopupPanel.tsx
@@ -19,7 +19,7 @@
 import styled from "@emotion/styled";
 import React, { useEffect, useState } from "react";
 import { URI, Utils } from "vscode-uri";
-import { MACHINE_VIEW, PopupMachineStateValue, PopupVisualizerLocation } from "@wso2/ballerina-core";
+import { MACHINE_VIEW, ParentPopupData, PopupMachineStateValue, PopupVisualizerLocation } from "@wso2/ballerina-core";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
 import AddConnectionWizard from "./views/BI/Connection/AddConnectionWizard";
 import { ThemeColors, Overlay } from "@wso2/ui-toolkit";
@@ -45,7 +45,7 @@ const TopBar = styled.div`
 
 interface PopupPanelProps {
     formState: PopupMachineStateValue;
-    onClose: () => void;
+    onClose: (parent?: ParentPopupData) => void;
 }
 
 const PopupPanel = (props: PopupPanelProps) => {
@@ -74,6 +74,7 @@ const PopupPanel = (props: PopupPanelProps) => {
                                 fileName={location.documentUri || location.projectUri}
                                 target={machineState.metadata?.target || undefined}
                                 onClose={onClose}
+                                isPopupScreen={true}
                             />
                         );
                     });
diff --git a/workspaces/ballerina/ballerina-visualizer/src/Visualizer.tsx b/workspaces/ballerina/ballerina-visualizer/src/Visualizer.tsx
index 22df08b7a63..bac5d61914b 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/Visualizer.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/Visualizer.tsx
@@ -136,6 +136,8 @@ const VisualizerComponent = React.memo(({ state }: { state: MachineStateValue })
     switch (true) {
         case typeof state === 'object' && 'viewActive' in state && state.viewActive === "viewReady":
             return <MainPanel />;
+        case typeof state === 'object' && 'viewActive' in state && state.viewActive === "resolveMissingDependencies":
+            return <PullingDependenciesView />; 
         default:
             return <LanguageServerLoadingView />;
     }
@@ -166,3 +168,30 @@ const LanguageServerLoadingView = () => {
         </div>
     );
 };
+
+const PullingDependenciesView = () => {
+    return (
+        <div style={{
+            backgroundColor: 'var(--vscode-editor-background)',
+            height: '100vh',
+            width: '100%',
+            display: 'flex',
+            fontFamily: 'var(--vscode-font-family)'
+        }}>
+            <Global styles={globalStyles} />
+            <LoadingContent>
+                <ProgressRing />
+                <LoadingTitle>
+                    Pulling Dependencies
+                </LoadingTitle>
+                <LoadingSubtitle>
+                    Fetching required modules for your project.<br />
+                    Please wait, this might take some time.
+                </LoadingSubtitle>
+                <LoadingText>
+                    <span className="loading-dots">Pulling</span>
+                </LoadingText>
+            </LoadingContent>
+        </div>
+    );
+};
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/ButtonCard/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/components/ButtonCard/index.tsx
index 84d9b0fe191..4531d5af02f 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/components/ButtonCard/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/ButtonCard/index.tsx
@@ -21,7 +21,7 @@ import { ThemeColors, Tooltip } from "@wso2/ui-toolkit";
 import styled from "@emotion/styled";
 import { BetaSVG } from "../../views/Connectors/Marketplace/BetaSVG";
 
-const Card = styled.div<{ active?: boolean; appearance?: ButtonCardAppearance, disabled?: boolean }>`
+const Card = styled.div<{ active?: boolean; appearance?: ButtonCardAppearance, disabled?: boolean, sx?: any }>`
     gap: 16px;
     max-width: 42rem;
     padding: 12px;
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/ConnectionConfig.tsx b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/ConnectionConfig.tsx
new file mode 100644
index 00000000000..d64a26afaed
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/ConnectionConfig.tsx
@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { FlowNode } from "@wso2/ballerina-core";
+import { FormField, FormValues } from "@wso2/ballerina-side-panel";
+import { useRpcContext } from "@wso2/ballerina-rpc-client";
+import { FormGeneratorNew } from "../../views/BI/Forms/FormGeneratorNew";
+import { RelativeLoader } from "../RelativeLoader";
+import { ConnectionConfigProps } from "./types";
+import { getConnectionKindConfig } from "./config";
+import { createConnectionSelectField, fetchConnectionForNode, updateNodeWithConnectionVariable } from "./utils";
+import { LoaderContainer } from "./styles";
+
+export function ConnectionConfig(props: ConnectionConfigProps): JSX.Element {
+    const { connectionKind, selectedNode, onSave, onNavigateToSelectionList } = props;
+    const config = useMemo(() => getConnectionKindConfig(connectionKind), [connectionKind]);
+    const { rpcClient } = useRpcContext();
+
+    const [selectedConnection, setSelectedConnection] = useState<FlowNode>();
+    const [selectedConnectionFields, setSelectedConnectionFields] = useState<FormField[]>([]);
+    const [loading, setLoading] = useState<boolean>(false);
+    const [savingForm, setSavingForm] = useState<boolean>(false);
+
+    const projectPath = useRef<string>("");
+
+    useEffect(() => {
+        initPanel();
+    }, []);
+
+    useEffect(() => {
+        if (selectedConnection) {
+            renderFormField();
+        }
+    }, [selectedConnection]);
+
+    const initPanel = async () => {
+        setLoading(true);
+        projectPath.current = await rpcClient.getVisualizerLocation().then((location) => location.projectUri);
+        await fetchSelectedConnection();
+        setLoading(false);
+    };
+
+    const fetchSelectedConnection = async () => {
+        const connection = await fetchConnectionForNode(rpcClient, connectionKind, selectedNode);
+        setSelectedConnection(connection);
+    };
+
+    const renderFormField = () => {
+        const connectionSelectField = createConnectionSelectField(selectedConnection, config, onCreateNewConnection);
+        setSelectedConnectionFields([connectionSelectField]);
+    };
+
+    const handleOnSave = useCallback(async (data: FormValues) => {
+        setSavingForm(true);
+        updateNodeWithConnectionVariable(connectionKind, selectedNode, data["connection"]);
+        onSave?.(selectedNode);
+    }, [onSave, rpcClient]);
+
+    const onCreateNewConnection = useCallback(() => {
+        onNavigateToSelectionList?.();
+    }, [onNavigateToSelectionList]);
+
+    return (
+        <>
+            {loading && (
+                <LoaderContainer>
+                    <RelativeLoader />
+                </LoaderContainer>
+            )}
+            {!loading && selectedConnectionFields?.length > 0 && (
+                <>
+                    <FormGeneratorNew
+                        key={selectedConnection?.id}
+                        fileName={projectPath.current}
+                        fields={selectedConnectionFields}
+                        onSubmit={handleOnSave}
+                        disableSaveButton={savingForm}
+                        isSaving={savingForm}
+                        helperPaneSide="left"
+                    />
+                </>
+            )
+            }
+        </>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/ConnectionCreator.tsx b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/ConnectionCreator.tsx
new file mode 100644
index 00000000000..44ad8e265f0
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/ConnectionCreator.tsx
@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { FormField, FormValues, FormImports } from "@wso2/ballerina-side-panel";
+import { useRpcContext } from "@wso2/ballerina-rpc-client";
+import { convertConfig } from "../../utils/bi";
+import { FormGeneratorNew } from "../../views/BI/Forms/FormGeneratorNew";
+import { RelativeLoader } from "../RelativeLoader";
+import { InfoBox } from "../InfoBox";
+import { ConnectionCreatorProps } from "./types";
+import { getConnectionSpecialConfig } from "./config";
+import { updateFormFieldsWithData, updateNodeTemplateProperties, updateNodeWithConnectionVariable, updateNodeLineRange } from "./utils";
+import { LoaderContainer } from "./styles";
+import { cloneDeep } from "lodash";
+
+export function ConnectionCreator(props: ConnectionCreatorProps): JSX.Element {
+    const { connectionKind, selectedNode, nodeFormTemplate, onSave } = props;
+
+    const connectionSymbol = useMemo(() => nodeFormTemplate?.codedata?.symbol || '', [nodeFormTemplate?.codedata?.symbol]);
+    const specialConfig = useMemo(() => getConnectionSpecialConfig(connectionSymbol) || {}, [connectionSymbol]);
+    const shouldShowInfo = useMemo(() => specialConfig.shouldShowInfo?.(connectionSymbol) ?? false, [specialConfig, connectionSymbol]);
+
+    const { rpcClient } = useRpcContext();
+    const [connectionFields, setConnectionFields] = useState<FormField[]>([]);
+    const [loading, setLoading] = useState<boolean>(false);
+    const [savingForm, setSavingForm] = useState<boolean>(false);
+
+    const projectPath = useRef<string>("");
+
+    useEffect(() => {
+        initPanel();
+    }, [nodeFormTemplate]);
+
+    const initPanel = async () => {
+        setLoading(true);
+        projectPath.current = await rpcClient.getVisualizerLocation().then((location) => location.projectUri);
+        if (nodeFormTemplate && nodeFormTemplate.properties) {
+            const fields = convertConfig(nodeFormTemplate.properties);
+            setConnectionFields(fields);
+        }
+        setLoading(false);
+    };
+
+    const handleOnSave = useCallback(async (data: FormValues, formImports?: FormImports) => {
+        setSavingForm(true);
+        const nodeTemplate = cloneDeep(nodeFormTemplate);
+        updateFormFieldsWithData(connectionFields, data, formImports);
+        updateNodeTemplateProperties(nodeTemplate, connectionFields);
+        try {
+            const response = await rpcClient
+                .getBIDiagramRpcClient()
+                .getSourceCode({ filePath: projectPath.current, flowNode: nodeTemplate });
+            // Update the selected node with the new connection variable
+            updateNodeWithConnectionVariable(connectionKind, selectedNode, nodeTemplate?.properties?.variable?.value as string);
+            // Update the line range for the selected node if it was updated
+            updateNodeLineRange(selectedNode, response.artifacts);
+            onSave?.(selectedNode);
+        } catch (error) {
+            console.error(`>>> Error creating ${connectionKind}`, error);
+        }
+    }, [onSave, rpcClient, connectionKind, connectionFields]);
+
+    return (
+        <>
+            {loading && (
+                <LoaderContainer>
+                    <RelativeLoader />
+                </LoaderContainer>
+            )}
+            {!loading && connectionFields?.length > 0 && (
+                <>
+                    <FormGeneratorNew
+                        fileName={projectPath.current}
+                        fields={connectionFields}
+                        onSubmit={handleOnSave}
+                        submitText={savingForm ? "Saving..." : "Save"}
+                        compact={true}
+                        disableSaveButton={savingForm}
+                        helperPaneSide="left"
+                        isSaving={savingForm}
+                        injectedComponents={shouldShowInfo && specialConfig.infoMessage ? [
+                            {
+                                component: <InfoBox
+                                    text={specialConfig.infoMessage.text}
+                                    description={specialConfig.infoMessage.description}
+                                    codeCommand={specialConfig.infoMessage.codeCommand}
+                                />,
+                                index: 0
+                            }
+                        ] : []}
+                    />
+                </>
+            )}
+        </>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/ConnectionSelectionList.tsx b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/ConnectionSelectionList.tsx
new file mode 100644
index 00000000000..55191516b65
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/ConnectionSelectionList.tsx
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { Category, CardList } from "@wso2/ballerina-side-panel";
+import { useRpcContext } from "@wso2/ballerina-rpc-client";
+import { RelativeLoader } from "../RelativeLoader";
+import { ConnectionSearchConfig, ConnectionSelectionListProps } from "./types";
+import { LoaderContainer } from "./styles";
+import { convertConnectionCategories, getSearchConfig } from "./utils";
+import { getAiModuleOrg } from "../../views/BI/AIChatAgent/utils";
+
+export function ConnectionSelectionList(props: ConnectionSelectionListProps): JSX.Element {
+    const { connectionKind, selectedNode, onSelect } = props;
+
+    const { rpcClient } = useRpcContext();
+    const [connectionCategories, setConnectionCategories] = useState<Category[]>([]);
+    const [loading, setLoading] = useState<boolean>(false);
+
+    const projectPath = useRef<string>("");
+    const aiModuleOrg = useRef<string>("");
+    const searchConfig = useRef<ConnectionSearchConfig>();
+
+    useEffect(() => {
+        initPanel();
+    }, []);
+
+    const initPanel = async () => {
+        setLoading(true);
+        projectPath.current = await rpcClient.getVisualizerLocation().then((location) => location.projectUri);
+        aiModuleOrg.current = await getAiModuleOrg(rpcClient, selectedNode?.codedata?.node);
+        searchConfig.current = getSearchConfig(connectionKind, aiModuleOrg.current);
+        await fetchConnections();
+        setLoading(false);
+    };
+
+    const fetchConnections = async () => {
+        const connectionSearchResponse = await rpcClient.getBIDiagramRpcClient().search({
+            filePath: projectPath.current,
+            queryMap: {
+                q: searchConfig.current.query
+            },
+            searchKind: searchConfig.current.searchKind
+        });
+
+        setConnectionCategories(convertConnectionCategories(connectionKind, connectionSearchResponse.categories));
+    };
+
+    return (
+        <>
+            {loading && (
+                <LoaderContainer>
+                    <RelativeLoader />
+                </LoaderContainer>
+            )}
+            {!loading && connectionCategories.length > 0 && (
+                <CardList
+                    categories={connectionCategories}
+                    onSelect={onSelect}
+                />
+            )}
+        </>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/config.ts b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/config.ts
new file mode 100644
index 00000000000..10b585220f3
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/config.ts
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ConnectionKind, ConnectionKindConfig, ConnectionSpecialConfig, ConnectionSearchConfig } from "./types";
+import { GET_DEFAULT_MODEL_PROVIDER, BALLERINAX } from "../../constants";
+import {
+    convertChunkerCategoriesToSidePanelCategories,
+    convertEmbeddingProviderCategoriesToSidePanelCategories,
+    convertModelProviderCategoriesToSidePanelCategories,
+    convertVectorStoreCategoriesToSidePanelCategories
+} from "../../utils/bi";
+
+export const CONNECTION_TYPE_CONFIGS: Record<ConnectionKind, ConnectionKindConfig> = {
+    MODEL_PROVIDER: {
+        displayName: "Model Provider",
+        valueTypeConstraint: "ai:ModelProvider",
+        nodePropertyKey: ["model", "modelProvider"],
+        categoryConverter: convertModelProviderCategoriesToSidePanelCategories,
+        searchConfig: (aiModuleOrg?: string): ConnectionSearchConfig => ({
+            query: "",
+            searchKind: aiModuleOrg && aiModuleOrg === BALLERINAX ? "CLASS_INIT" : "MODEL_PROVIDER"
+        })
+    },
+    VECTOR_STORE: {
+        displayName: "Vector Store",
+        valueTypeConstraint: "ai:VectorStore",
+        nodePropertyKey: "vectorStore",
+        categoryConverter: convertVectorStoreCategoriesToSidePanelCategories,
+    },
+    EMBEDDING_PROVIDER: {
+        displayName: "Embedding Provider",
+        valueTypeConstraint: "ai:EmbeddingProvider",
+        nodePropertyKey: "embeddingModel",
+        categoryConverter: convertEmbeddingProviderCategoriesToSidePanelCategories,
+    },
+    CHUNKER: {
+        displayName: "Chunker",
+        valueTypeConstraint: "ai:Chunker",
+        nodePropertyKey: "chunker",
+        categoryConverter: convertChunkerCategoriesToSidePanelCategories,
+    }
+};
+
+export const CONNECTION_SPECIAL_CONFIGS: Record<string, ConnectionSpecialConfig> = {
+    [GET_DEFAULT_MODEL_PROVIDER]: {
+        infoMessage: {
+            text: "Using the default WSO2 Model Provider will automatically add the necessary configuration values to Config.toml.",
+            description: "This can also be done using the VSCode command palette command:",
+            codeCommand: "> Ballerina: Configure default WSO2 model provider"
+        },
+        shouldShowInfo: (symbol: string) => symbol === GET_DEFAULT_MODEL_PROVIDER
+    }
+};
+
+export const getConnectionKindConfig = (connectionType: ConnectionKind): ConnectionKindConfig => {
+    return CONNECTION_TYPE_CONFIGS[connectionType];
+};
+
+export const getConnectionSpecialConfig = (symbol: string): ConnectionSpecialConfig | undefined => {
+    return CONNECTION_SPECIAL_CONFIGS[symbol];
+};
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/Search/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/index.ts
similarity index 55%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/Search/index.tsx
rename to workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/index.ts
index 937b371087e..d4918d19deb 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/Search/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/index.ts
@@ -15,12 +15,24 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+export { ConnectionConfig } from "./ConnectionConfig";
+export { ConnectionSelectionList } from "./ConnectionSelectionList";
+export { ConnectionCreator } from "./ConnectionCreator";
+
+export type {
+    ConnectionKind,
+    ConnectionKindConfig,
+    ConnectionInfo,
+    ConnectionSpecialConfig,
+    ConnectionConfigProps,
+    ConnectionSelectionListProps,
+    ConnectionCreatorProps,
+} from "./types";
+
 export {
-    InputSearchHighlight,
-    OutputSearchHighlight
-} from './SearchHighlight';
-export {
-    InputSearchNoResultFound,
-    OutputSearchNoResultFound,
-    SearchNoResultFoundKind
-} from './SearchNoResultFound';
+    CONNECTION_TYPE_CONFIGS,
+    CONNECTION_SPECIAL_CONFIGS,
+    getConnectionKindConfig,
+    getConnectionSpecialConfig
+} from "./config";
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/styles.ts b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/styles.ts
new file mode 100644
index 00000000000..b338102cb24
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/styles.ts
@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+
+export const LoaderContainer = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+`;
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/types.ts b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/types.ts
new file mode 100644
index 00000000000..29b773a5835
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/types.ts
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { FlowNode, SearchKind } from "@wso2/ballerina-core";
+
+export type ConnectionKind = 'MODEL_PROVIDER' | 'VECTOR_STORE' | 'EMBEDDING_PROVIDER' | 'CHUNKER';
+
+export interface ConnectionKindConfig {
+    displayName: string;
+    valueTypeConstraint: string;
+    nodePropertyKey: string | string[];
+    categoryConverter: (categories: any[]) => any[];
+    searchConfig?: (aiModuleOrg?: string) => ConnectionSearchConfig;
+}
+
+export interface ConnectionInfo {
+    text: string;
+    description?: string;
+    codeCommand?: string;
+}
+
+export interface ConnectionSpecialConfig {
+    infoMessage?: ConnectionInfo;
+    shouldShowInfo?: (symbol: string) => boolean;
+}
+
+export interface ConnectionConfigProps {
+    connectionKind: ConnectionKind;
+    selectedNode?: FlowNode;
+    onSave?: (selectedCallNode: FlowNode) => void;
+    onNavigateToSelectionList?: () => void;
+}
+
+export interface ConnectionSearchConfig {
+    query: string;
+    searchKind: SearchKind;
+}
+
+export interface ConnectionSelectionListProps {
+    connectionKind: ConnectionKind;
+    selectedNode?: FlowNode;
+    onSelect?: (id: string, metadata?: any) => void;
+}
+
+export interface ConnectionCreatorProps {
+    connectionKind: ConnectionKind;
+    selectedNode?: FlowNode;
+    nodeFormTemplate?: FlowNode;
+    onSave?: (connectionNode: FlowNode) => void;
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/utils.tsx b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/utils.tsx
new file mode 100644
index 00000000000..2be904383e0
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/ConnectionSelector/utils.tsx
@@ -0,0 +1,156 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { FlowNode, Category, Property, ProjectStructureArtifactResponse } from "@wso2/ballerina-core";
+import { FormField, Category as PanelCategory, FormValues, FormImports } from "@wso2/ballerina-side-panel";
+import { ConnectionKindConfig, ConnectionKind, ConnectionSearchConfig } from "./types";
+import { getImportsForProperty } from "../../utils/bi";
+import { getConnectionKindConfig } from "./config";
+import { Codicon } from "@wso2/ui-toolkit";
+import { BallerinaRpcClient } from "@wso2/ballerina-rpc-client";
+
+export const createConnectionSelectField = (
+    selectedConnection: FlowNode,
+    config: ConnectionKindConfig,
+    handleActionBtnClick: () => void
+): FormField => {
+    const selectLabel = `Select ${config.displayName}`;
+    const description = `Choose an existing ${config.displayName} or create a new one.`;
+    const createLabel = `Create New ${config.displayName}`;
+    return {
+        "key": "connection",
+        "label": selectLabel,
+        "type": "ACTION_EXPRESSION",
+        "optional": false,
+        "advanced": false,
+        "placeholder": "\"\"",
+        "editable": true,
+        "enabled": true,
+        "hidden": false,
+        "documentation": description,
+        "advanceProps": [],
+        "valueType": "EXPRESSION",
+        "diagnostics": [],
+        "valueTypeConstraint": config.valueTypeConstraint,
+        "metadata": {
+            "label": selectLabel,
+            "description": description
+        },
+        "codedata": {
+            "kind": "REQUIRED",
+            "originalName": "connection"
+        },
+        "actionCallback": handleActionBtnClick,
+        "actionLabel": <><Codicon name="add" />{createLabel}</>,
+        "value": (selectedConnection.properties.variable?.value as string) || ""
+    };
+};
+
+export const updateFormFieldsWithData = (
+    connectionFields: FormField[],
+    data: FormValues,
+    formImports?: FormImports
+): void => {
+    connectionFields.forEach((field) => {
+        if (field.type === "DROPDOWN_CHOICE") {
+            field.dynamicFormFields[data[field.key]].forEach((dynamicField) => {
+                if (data[dynamicField.key]) {
+                    dynamicField.value = data[dynamicField.key];
+                }
+            });
+            field.value = data[field.key];
+        } else if (data[field.key]) {
+            field.value = data[field.key];
+        }
+        if (formImports) {
+            field.imports = getImportsForProperty(field.key, formImports);
+        }
+    });
+};
+
+export const updateNodeTemplateProperties = (
+    nodeTemplate: FlowNode,
+    connectionFields: FormField[]
+): void => {
+    connectionFields.forEach((field) => {
+        if (field.editable) {
+            nodeTemplate.properties[field.key as keyof typeof nodeTemplate.properties].value = field.value;
+        }
+    });
+};
+
+export const convertConnectionCategories = (connectionKind: ConnectionKind, categories: Category[]): PanelCategory[] => {
+    const config = getConnectionKindConfig(connectionKind);
+    return config.categoryConverter(categories);
+};
+
+const getValidPropertyKey = (node: FlowNode, nodePropertyKeys: string | string[]): string | undefined => {
+    const keys = Array.isArray(nodePropertyKeys) ? nodePropertyKeys : [nodePropertyKeys];
+    return keys.find(key => node.properties[key as keyof typeof node.properties]?.value);
+};
+
+export const fetchConnectionForNode = async (
+    rpcClient: BallerinaRpcClient,
+    connectionKind: ConnectionKind,
+    targetNode: FlowNode,
+): Promise<FlowNode> => {
+    const moduleNodes = await rpcClient.getBIDiagramRpcClient().getModuleNodes();
+    const connections = moduleNodes.flowModel.connections;
+    const config = getConnectionKindConfig(connectionKind);
+    const propertyKey = getValidPropertyKey(targetNode, config.nodePropertyKey);
+    const targetPropertyValue = propertyKey ? targetNode.properties?.[propertyKey as keyof typeof targetNode.properties]?.value : undefined;
+
+    const connection = connections.find((node: FlowNode) =>
+        node.properties.variable?.value === targetPropertyValue
+    );
+
+    if (!connection)
+        throw new Error(`Could not find a connection for the target node.`);
+
+    return connection;
+};
+
+export const updateNodeWithConnectionVariable = (connectionKind: ConnectionKind, selectedNode: FlowNode, connectionVariable: string): void => {
+    const config = getConnectionKindConfig(connectionKind);
+    const propertyKey = getValidPropertyKey(selectedNode, config.nodePropertyKey) || (Array.isArray(config.nodePropertyKey) ? config.nodePropertyKey[0] : config.nodePropertyKey);
+    const property = selectedNode.properties[propertyKey as keyof typeof selectedNode.properties];
+
+    if (property && typeof property === 'object') {
+        (property as Property).value = connectionVariable;
+    }
+};
+
+export const getSearchConfig = (connectionKind: ConnectionKind, aiModuleOrg?: string): ConnectionSearchConfig => {
+    const config = getConnectionKindConfig(connectionKind);
+    if (config.searchConfig)
+        return config.searchConfig(aiModuleOrg);
+    return { query: "", searchKind: connectionKind };
+};
+
+export const updateNodeLineRange = (selectedNode: FlowNode, artifacts: ProjectStructureArtifactResponse[]): void => {
+    const selectedNodeArtifact = artifacts.find((artifact) => {
+        return artifact.name === selectedNode.properties.variable.value;
+    });
+    if (selectedNodeArtifact && selectedNodeArtifact.position && !selectedNode?.codedata?.isNew) {
+        selectedNode.codedata.lineRange = {
+            fileName: selectedNodeArtifact?.path,
+            startLine: { line: selectedNodeArtifact.position.startLine, offset: selectedNodeArtifact.position.startColumn },
+            endLine: { line: selectedNodeArtifact.position.endLine, offset: selectedNodeArtifact.position.endColumn }
+        };
+    }
+};
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/FormHeader/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/components/FormHeader/index.tsx
index b311fe6d39b..c1cbbd15572 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/components/FormHeader/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/FormHeader/index.tsx
@@ -38,14 +38,14 @@ const Description = styled(Typography)`
 `;
 
 interface FormHeaderProps {
-    title: string;
+    title?: string;
     subtitle?: string;
 }
 
 export function FormHeader({ title, subtitle }: FormHeaderProps) {
     return (
         <HeaderContainer>
-            <Title variant="h3">{title}</Title>
+            {title && <Title variant="h3">{title}</Title>}
             {subtitle && (
                 <Description variant="body2">
                     {subtitle}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/InfoBox/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/components/InfoBox/index.tsx
new file mode 100644
index 00000000000..be992280a35
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/InfoBox/index.tsx
@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import styled from "@emotion/styled";
+
+interface InfoBoxProps {
+    text: string;
+    description?: string;
+    codeCommand?: string;
+}
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+`;
+
+const InfoBoxContainer = styled.div`
+    font-size: 13px;
+    color: var(--vscode-foreground);
+    padding: 12px;
+    background-color: var(--vscode-editor-inactiveSelectionBackground);
+    border-radius: 4px;
+
+    strong {
+        font-weight: 600;
+    }
+
+    .description {
+        font-size: 12px;
+        color: var(--vscode-descriptionForeground);
+        line-height: 1.4;
+    }
+
+    .command-wrapper {
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+        margin-bottom: 8px;
+    }
+`;
+
+const CodeBlock = styled.code`
+    font-size: 11px;
+    color: var(--vscode-foreground);
+    font-family: var(--vscode-editor-font-family);
+    background-color: var(--vscode-textCodeBlock-background);
+    padding: 2px 4px;
+    border-radius: 3px;
+    border: 1px solid var(--vscode-widget-border);
+    margin-top: 6px;
+    display: inline-block;
+`;
+
+export function InfoBox({ text, description, codeCommand }: InfoBoxProps): JSX.Element {
+    return (
+        <Container>
+            <InfoBoxContainer>
+                <div className="command-wrapper">
+                    <span>{text}</span>
+                </div>
+                {description && codeCommand && (
+                    <div className="description">
+                        {description} <br />
+                        <CodeBlock>
+                            {codeCommand}
+                        </CodeBlock>
+                    </div>
+                )}
+            </InfoBoxContainer>
+        </Container>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/components/Modal/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/components/Modal/index.tsx
new file mode 100644
index 00000000000..cf83e532507
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/components/Modal/index.tsx
@@ -0,0 +1,153 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { cloneElement, isValidElement, ReactNode, ReactElement, useEffect } from "react";
+import { createPortal } from "react-dom";
+import styled from "@emotion/styled";
+import { Codicon, Divider, ThemeColors, Typography } from "@wso2/ui-toolkit";
+import { useVisualizerContext } from "../../Context";
+
+export type DynamicModalProps = {
+    children: ReactNode;
+    onClose?: () => void;
+    title: string;
+    anchorRef: React.RefObject<HTMLDivElement>;
+    width?: number;
+    height?: number;
+    openState: boolean;
+    setOpenState: (state: boolean) => void;
+};
+
+const ModalContainer = styled.div`
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 30000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+`;
+
+const ModalBox = styled.div<{ width?: number; height?: number }>`
+  width: ${({ width }: { width?: number }) => (width ? `${width}px` : 'auto')};
+  height: ${({ height }: { height?: number }) => (height ? `${height}px` : 'auto')};
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+  padding: 16px;
+  border-radius: 3px;
+  background-color: ${ThemeColors.SURFACE_DIM};
+  box-shadow: 0 3px 8px rgb(0 0 0 / 0.2);
+    z-index: 30001;
+`;
+
+const InvisibleButton = styled.button`
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    text-align: inherit;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    outline: none;
+    box-shadow: none;
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+`;
+
+
+const ModalHeaderSection = styled.header`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-inline: 16px;
+`;
+
+type TriggerProps = React.ButtonHTMLAttributes<HTMLButtonElement> & { children: ReactNode };
+const Trigger: React.FC<TriggerProps> = (props) => <InvisibleButton {...props}>{props.children}</InvisibleButton>;
+
+const DynamicModal: React.FC<DynamicModalProps> & { Trigger: typeof Trigger } = ({
+    children,
+    onClose,
+    title,
+    anchorRef,
+    width,
+    height,
+    openState,
+    setOpenState,
+}) => {
+    const { setShowOverlay } = useVisualizerContext();
+    let trigger: ReactElement | null = null;
+    const content: ReactNode[] = [];
+
+    React.Children.forEach(children, child => {
+        if (isValidElement(child) && child.type === DynamicModal.Trigger) {
+            trigger = cloneElement(child as React.ReactElement, {
+                onClick: () => setOpenState(true)
+            });
+        } else {
+            content.push(child);
+        }
+    });
+
+    const handleClose = () => {
+        setOpenState(false);
+        setShowOverlay(false);
+        onClose && onClose();
+    };
+
+    if (openState) {
+        setShowOverlay(true);
+    }
+
+    useEffect(() => {
+        return () => {
+            setShowOverlay(false);
+        };
+    }, []);
+
+    return (
+        <>
+            {trigger}
+            {openState && createPortal(
+                <ModalContainer ref={anchorRef} className="unq-modal-overlay">
+                    <ModalBox width={width} height={height}>
+                        <ModalHeaderSection>
+                            <Typography variant="h2" sx={{ margin: 0 }}>
+                                {title}
+                            </Typography>
+                            <Codicon name="close" onClick={handleClose} />
+                        </ModalHeaderSection>
+                        <Divider />
+                        <div>{content}</div>
+                    </ModalBox>
+                </ModalContainer>,
+                document.body
+            )}
+        </>
+    );
+};
+
+DynamicModal.Trigger = Trigger;
+
+export default DynamicModal;
diff --git a/workspaces/ballerina/ballerina-visualizer/src/utils/bi.tsx b/workspaces/ballerina/ballerina-visualizer/src/utils/bi.tsx
index 5f2ba54a7c7..d841bf95879 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/utils/bi.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/utils/bi.tsx
@@ -75,6 +75,7 @@ import { DocSection } from "../components/ExpressionEditor";
 // @ts-ignore
 import ballerina from "../languages/ballerina.js";
 import { FUNCTION_REGEX } from "../resources/constants";
+import { ConnectionKind, getConnectionKindConfig } from "../components/ConnectionSelector";
 hljs.registerLanguage("ballerina", ballerina);
 
 export const BALLERINA_INTEGRATOR_ISSUES_URL = "https://github.com/wso2/product-ballerina-integrator/issues";
@@ -160,10 +161,12 @@ export function convertModelProviderCategoriesToSidePanelCategories(categories:
         category.items?.forEach((item) => {
             if ((item as PanelNode).metadata?.codedata) {
                 const codedata = (item as PanelNode).metadata.codedata;
-                item.icon = <AIModelIcon type={codedata?.module} codedata={codedata} />;
+                const iconType = codedata?.module == "ai" ? codedata.object : codedata?.module;
+                item.icon = <AIModelIcon type={iconType} codedata={codedata} />;
             } else if (((item as PanelCategory).items.at(0) as PanelNode)?.metadata?.codedata) {
                 const codedata = ((item as PanelCategory).items.at(0) as PanelNode)?.metadata.codedata;
-                item.icon = <AIModelIcon type={codedata?.module} codedata={codedata} />;
+                const iconType = codedata?.module == "ai" ? codedata.object : codedata?.module;
+                item.icon = <AIModelIcon type={iconType} codedata={codedata} />;
             }
         });
     });
@@ -171,27 +174,48 @@ export function convertModelProviderCategoriesToSidePanelCategories(categories:
 }
 
 export function convertVectorStoreCategoriesToSidePanelCategories(categories: Category[]): PanelCategory[] {
+    return convertCategoriesToSidePanelCategoriesWithIcon(categories, (codedata) => (
+        <NodeIcon type={codedata?.node} size={24} />
+    ));
+}
+
+export function convertEmbeddingProviderCategoriesToSidePanelCategories(categories: Category[]): PanelCategory[] {
+    return convertModelProviderCategoriesToSidePanelCategories(categories);
+}
+
+export function convertVectorKnowledgeBaseCategoriesToSidePanelCategories(categories: Category[]): PanelCategory[] {
+    return convertModelProviderCategoriesToSidePanelCategories(categories);
+}
+
+export function convertCategoriesToSidePanelCategoriesWithIcon(
+    categories: Category[],
+    iconFactory: (codedata: any) => React.ReactElement
+): PanelCategory[] {
     const panelCategories = categories.map((category) => convertDiagramCategoryToSidePanelCategory(category));
     panelCategories.forEach((category) => {
         category.items?.forEach((item) => {
             if ((item as PanelNode).metadata?.codedata) {
                 const codedata = (item as PanelNode).metadata.codedata;
-                item.icon = <NodeIcon type={codedata?.node} size={24} />;
+                item.icon = iconFactory(codedata);
             } else if (((item as PanelCategory).items.at(0) as PanelNode)?.metadata?.codedata) {
                 const codedata = ((item as PanelCategory).items.at(0) as PanelNode)?.metadata.codedata;
-                item.icon = <NodeIcon type={codedata?.node} size={24} />;
+                item.icon = iconFactory(codedata);
             }
         });
     });
     return panelCategories;
 }
 
-export function convertEmbeddingProviderCategoriesToSidePanelCategories(categories: Category[]): PanelCategory[] {
-    return convertModelProviderCategoriesToSidePanelCategories(categories);
+export function convertDataLoaderCategoriesToSidePanelCategories(categories: Category[]): PanelCategory[] {
+    return convertCategoriesToSidePanelCategoriesWithIcon(categories, (codedata) => (
+        <NodeIcon type={codedata?.node} size={24} />
+    ));
 }
 
-export function convertVectorKnowledgeBaseCategoriesToSidePanelCategories(categories: Category[]): PanelCategory[] {
-    return convertModelProviderCategoriesToSidePanelCategories(categories);
+export function convertChunkerCategoriesToSidePanelCategories(categories: Category[]): PanelCategory[] {
+    return convertCategoriesToSidePanelCategoriesWithIcon(categories, (codedata) => (
+        <NodeIcon type={codedata?.node} size={24} />
+    ));
 }
 
 export function convertNodePropertiesToFormFields(
@@ -333,14 +357,28 @@ export function updateNodeProperties(
     return updatedNodeProperties;
 }
 
-export function getContainerTitle(view: SidePanelView, activeNode: FlowNode, clientName?: string): string {
+function getConnectionDisplayName(connectionKind?: ConnectionKind): string {
+    if (!connectionKind) return 'Connection';
+    try {
+        const config = getConnectionKindConfig(connectionKind);
+        return config.displayName;
+    } catch {
+        return 'Connection';
+    }
+}
+
+export function getContainerTitle(view: SidePanelView, activeNode: FlowNode, clientName?: string, connectionKind?: ConnectionKind): string {
     switch (view) {
         case SidePanelView.NODE_LIST:
             return ""; // Show switch instead of title
         case SidePanelView.NEW_AGENT:
             return "AI Agent";
-        case SidePanelView.AGENT_MODEL:
-            return "Configure LLM Model";
+        case SidePanelView.CONNECTION_CONFIG:
+            return `Configure ${getConnectionDisplayName(connectionKind)}`;
+        case SidePanelView.CONNECTION_SELECT:
+            return `Select ${getConnectionDisplayName(connectionKind)}`;
+        case SidePanelView.CONNECTION_CREATE:
+            return `Create ${getConnectionDisplayName(connectionKind)}`;
         case SidePanelView.AGENT_MEMORY_MANAGER:
             return "Configure Memory";
         case SidePanelView.AGENT_TOOL:
@@ -369,13 +407,11 @@ export function getContainerTitle(view: SidePanelView, activeNode: FlowNode, cli
             ) {
                 return `${clientName || activeNode.properties.connection.value} → ${activeNode.metadata.label}`;
             } else if (activeNode.codedata?.node === "DATA_MAPPER_CALL") {
-                return `${activeNode.codedata?.module ? activeNode.codedata?.module + " :" : ""} ${
-                    activeNode.codedata.symbol
-                }`;
+                return `${activeNode.codedata?.module ? activeNode.codedata?.module + " :" : ""} ${activeNode.codedata.symbol
+                    }`;
             }
-            return `${activeNode.codedata?.module ? activeNode.codedata?.module + " :" : ""} ${
-                activeNode.metadata.label
-            }`;
+            return `${activeNode.codedata?.module ? activeNode.codedata?.module + " :" : ""} ${activeNode.metadata.label
+                }`;
         default:
             return "";
     }
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/AIPanel.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/AIPanel.tsx
index 5bf1f5a2383..dda9ebfc2ed 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/AIPanel.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/AIPanel.tsx
@@ -78,11 +78,11 @@ const AIPanel = (props: { state: AIMachineStateValue }) => {
 
                     if (subState === "determineFlow") {
                         component = <LoadingRing />;
-                    } else if (["ssoFlow", "apiKeyFlow", "validatingApiKey"].includes(subState)) {
+                    } else if (["ssoFlow", "apiKeyFlow", "validatingApiKey", "awsBedrockFlow", "validatingAwsCredentials"].includes(subState)) {
                         component = (
                             <WaitingForLogin
                                 loginMethod={snapshot.context.loginMethod}
-                                isValidating={subState === "validatingApiKey"}
+                                isValidating={subState === "validatingApiKey" || subState === "validatingAwsCredentials"}
                                 errorMessage={snapshot.context.errorMessage}
                             />
                         );
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/LoginPanel/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/LoginPanel/index.tsx
index 93c958d653e..a17d9a1523c 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/LoginPanel/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/LoginPanel/index.tsx
@@ -139,6 +139,10 @@ const LoginPanel: React.FC = () => {
         rpcClient.sendAIStateEvent(AIMachineEventType.AUTH_WITH_API_KEY);
     };
 
+    const handleAwsBedrockClick = () => {
+        rpcClient.sendAIStateEvent(AIMachineEventType.AUTH_WITH_AWS_BEDROCK);
+    };
+
     return (
         <PanelWrapper>
             <TopSpacer />
@@ -166,7 +170,8 @@ const LoginPanel: React.FC = () => {
                 <LegalNotice />
                 <StyledButton onClick={handleCopilotLogin}>Login to BI Copilot</StyledButton>
                 <Divider>or</Divider>
-                <TextButton onClick={handleAnthropicKeyClick}>Enter your Anthropic API Key</TextButton>
+                <TextButton onClick={handleAnthropicKeyClick}>Enter your Anthropic API key</TextButton>
+                <TextButton onClick={handleAwsBedrockClick}>Enter your AWS Bedrock credentials</TextButton>
             </FooterContent>
         </PanelWrapper>
     );
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/WaitingForLoginSection/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/WaitingForLoginSection/index.tsx
index c0facb8b48d..2c031f41252 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/WaitingForLoginSection/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/WaitingForLoginSection/index.tsx
@@ -180,6 +180,15 @@ const WaitingForLogin = ({ loginMethod, isValidating = false, errorMessage }: Wa
     const { rpcClient } = useRpcContext();
     const [apiKey, setApiKey] = useState("");
     const [showApiKey, setShowApiKey] = useState(false);
+    const [awsCredentials, setAwsCredentials] = useState({
+        accessKeyId: "",
+        secretAccessKey: "",
+        region: "",
+        sessionToken: ""
+    });
+    const [showAccessKey, setShowAccessKey] = useState(false);
+    const [showSecretKey, setShowSecretKey] = useState(false);
+    const [showSessionToken, setShowSessionToken] = useState(false);
 
     const cancelLogin = () => {
         rpcClient.sendAIStateEvent(AIMachineEventType.CANCEL_LOGIN);
@@ -195,14 +204,47 @@ const WaitingForLogin = ({ loginMethod, isValidating = false, errorMessage }: Wa
         }
     };
 
+    const connectWithAwsCredentials = () => {
+        if (awsCredentials.accessKeyId.trim() && awsCredentials.secretAccessKey.trim() && awsCredentials.region.trim()) {
+            rpcClient.sendAIStateEvent({
+                type: AIMachineEventType.SUBMIT_AWS_CREDENTIALS,
+                payload: {
+                    accessKeyId: awsCredentials.accessKeyId.trim(),
+                    secretAccessKey: awsCredentials.secretAccessKey.trim(),
+                    region: awsCredentials.region.trim(),
+                    sessionToken: awsCredentials.sessionToken.trim() || undefined
+                },
+            });
+        }
+    };
+
     const handleApiKeyChange = (e: any) => {
         setApiKey(e.target.value);
     };
 
+    const handleAwsCredentialChange = (field: keyof typeof awsCredentials) => (e: any) => {
+        setAwsCredentials(prev => ({
+            ...prev,
+            [field]: e.target.value
+        }));
+    };
+
     const toggleApiKeyVisibility = () => {
         setShowApiKey(!showApiKey);
     };
 
+    const toggleAccessKeyVisibility = () => {
+        setShowAccessKey(!showAccessKey);
+    };
+
+    const toggleSecretKeyVisibility = () => {
+        setShowSecretKey(!showSecretKey);
+    };
+
+    const toggleSessionTokenVisibility = () => {
+        setShowSessionToken(!showSessionToken);
+    };
+
     if (loginMethod === LoginMethod.ANTHROPIC_KEY) {
         return (
             <Container>
@@ -261,6 +303,120 @@ const WaitingForLogin = ({ loginMethod, isValidating = false, errorMessage }: Wa
         );
     }
 
+    if (loginMethod === LoginMethod.AWS_BEDROCK) {
+        const isFormValid = awsCredentials.accessKeyId.trim() && 
+                           awsCredentials.secretAccessKey.trim() && 
+                           awsCredentials.region.trim();
+
+        return (
+            <Container>
+                <AlertContainer variant="primary">
+                    <Title>Connect with AWS Bedrock</Title>
+                    <SubTitle>
+                        Enter your AWS credentials to connect to BI Copilot via AWS Bedrock. Your credentials will be securely stored
+                        and used for authentication.
+                    </SubTitle>
+
+                    <InputContainer>
+                        <InputRow>
+                            <StyledTextField
+                                type={showAccessKey ? "text" : "password"}
+                                placeholder="AWS Access Key ID"
+                                value={awsCredentials.accessKeyId}
+                                onInput={handleAwsCredentialChange('accessKeyId')}
+                                {...(isValidating ? { disabled: true } : {})}
+                            />
+                            <EyeButton
+                                type="button"
+                                onClick={toggleAccessKeyVisibility}
+                                title={showAccessKey ? "Hide access key" : "Show access key"}
+                                {...(isValidating ? { disabled: true } : {})}
+                            >
+                                <Codicon name={showAccessKey ? "eye-closed" : "eye"} />
+                            </EyeButton>
+                        </InputRow>
+                    </InputContainer>
+
+                    <InputContainer>
+                        <InputRow>
+                            <StyledTextField
+                                type={showSecretKey ? "text" : "password"}
+                                placeholder="AWS Secret Access Key"
+                                value={awsCredentials.secretAccessKey}
+                                onInput={handleAwsCredentialChange('secretAccessKey')}
+                                {...(isValidating ? { disabled: true } : {})}
+                            />
+                            <EyeButton
+                                type="button"
+                                onClick={toggleSecretKeyVisibility}
+                                title={showSecretKey ? "Hide secret key" : "Show secret key"}
+                                {...(isValidating ? { disabled: true } : {})}
+                            >
+                                <Codicon name={showSecretKey ? "eye-closed" : "eye"} />
+                            </EyeButton>
+                        </InputRow>
+                    </InputContainer>
+
+                    <InputContainer>
+                        <InputRow>
+                            <StyledTextField
+                                type="text"
+                                placeholder="AWS Region (e.g., us-east-1)"
+                                value={awsCredentials.region}
+                                onInput={handleAwsCredentialChange('region')}
+                                {...(isValidating ? { disabled: true } : {})}
+                            />
+                        </InputRow>
+                    </InputContainer>
+
+                    <InputContainer>
+                        <InputRow>
+                            <StyledTextField
+                                type={showSessionToken ? "text" : "password"}
+                                placeholder="Session Token (optional)"
+                                value={awsCredentials.sessionToken}
+                                onInput={handleAwsCredentialChange('sessionToken')}
+                                {...(isValidating ? { disabled: true } : {})}
+                            />
+                            <EyeButton
+                                type="button"
+                                onClick={toggleSessionTokenVisibility}
+                                title={showSessionToken ? "Hide session token" : "Show session token"}
+                                {...(isValidating ? { disabled: true } : {})}
+                            >
+                                <Codicon name={showSessionToken ? "eye-closed" : "eye"} />
+                            </EyeButton>
+                        </InputRow>
+                    </InputContainer>
+
+                    {errorMessage && (
+                        <ErrorMessage>
+                            <Codicon name="error" />
+                            <span>{errorMessage}</span>
+                        </ErrorMessage>
+                    )}
+
+                    <ButtonContainer>
+                        <VSCodeButton
+                            appearance="primary"
+                            onClick={connectWithAwsCredentials}
+                            {...(isValidating || !isFormValid ? { disabled: true } : {})}
+                        >
+                            {isValidating ? "Validating..." : "Connect with AWS Bedrock"}
+                        </VSCodeButton>
+                        <VSCodeButton
+                            appearance="secondary"
+                            onClick={cancelLogin}
+                            {...(isValidating ? { disabled: true } : {})}
+                        >
+                            Cancel
+                        </VSCodeButton>
+                    </ButtonContainer>
+                </AlertContainer>
+            </Container>
+        );
+    }
+
     // Default: BI_INTEL login method
 
     return (
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/commandTemplates/data/commandTemplates.const.ts b/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/commandTemplates/data/commandTemplates.const.ts
index 8443e62e0b7..f6ba0905cbe 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/commandTemplates/data/commandTemplates.const.ts
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/commandTemplates/data/commandTemplates.const.ts
@@ -139,6 +139,19 @@ export const commandTemplates = {
             placeholders: [],
         },
     ],
+    [Command.Doc]: [
+        {
+            id: TemplateId.GenerateUserDoc,
+            text: 'generate user documentation for <servicename> service',
+            placeholders: [
+                {
+                    id: 'servicename',
+                    text: '<servicename>',
+                    multiline: false,
+                }
+            ],
+        }
+    ]
 } as const;
 
 export type CommandTemplates = typeof commandTemplates;
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/commandTemplates/data/placeholderTags.const.ts b/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/commandTemplates/data/placeholderTags.const.ts
index 33db2eae01e..8b7dad97cfa 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/commandTemplates/data/placeholderTags.const.ts
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/commandTemplates/data/placeholderTags.const.ts
@@ -54,7 +54,7 @@ export const placeholderTags: PlaceholderTagMap = {
             functionName: [],
         },
         'mappings-for-function': {
-            functionName: []
+            functionName: [],
         },
         'inline-mappings': {}
     },
@@ -72,4 +72,9 @@ export const placeholderTags: PlaceholderTagMap = {
     [Command.OpenAPI]: {
         'wildcard': {},
     },
+    [Command.Doc]: {
+        'generate-user-doc': {
+            servicename: [],
+        }
+    }
 };
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/components/AIChat/Footer/useFooterLogic.ts b/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/components/AIChat/Footer/useFooterLogic.ts
index b32d1e2a99f..8c9487bf746 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/components/AIChat/Footer/useFooterLogic.ts
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/components/AIChat/Footer/useFooterLogic.ts
@@ -95,6 +95,19 @@ export const useFooterLogic = ({
                 kind: "placeholder-specific",
             }))
         );
+
+        // === Command.Doc ===
+        injectTags(
+            Command.Doc,
+            "generate-user-doc",
+            "servicename",
+            serviceNames.map((serviceName) => ({
+                display: `@${serviceName}`,
+                value: serviceName,
+                injected: true,
+                kind: "placeholder-specific",
+            }))
+        );
     };
 
     return {
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/components/AIChat/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/components/AIChat/index.tsx
index 149762ccb22..a3448ee92d8 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/components/AIChat/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/components/AIChat/index.tsx
@@ -23,7 +23,6 @@ import {
     SourceFile,
     MappingParameters,
     DataMappingRecord,
-    PostProcessResponse,
     TestGenerationTarget,
     LLMDiagnostics,
     ImportStatement,
@@ -41,6 +40,13 @@ import {
     OperationType,
     GENERATE_TEST_AGAINST_THE_REQUIREMENT,
     GENERATE_CODE_AGAINST_THE_REQUIREMENT,
+    ComponentInfo,
+    ImportInfo,
+    MetadataWithAttachments,
+    ExtendedDataMapperMetadata,
+    DocGenerationRequest,
+    DocGenerationType,
+    FileChanges,
 } from "@wso2/ballerina-core";
 
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
@@ -50,29 +56,21 @@ import { AIChatInputRef } from "../AIChatInput";
 import ProgressTextSegment from "../ProgressTextSegment";
 import RoleContainer from "../RoleContainter";
 import { Attachment, AttachmentStatus } from "@wso2/ballerina-core";
-import { findRegexMatches, formatWithProperIndentation } from "../../../../utils/utils";
+import { formatWithProperIndentation } from "../../../../utils/utils";
 
 import { AIChatView, Header, HeaderButtons, ChatMessage, Badge } from "../../styles";
 import ReferenceDropdown from "../ReferenceDropdown";
 import AccordionItem from "../TestScenarioSegment";
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
-import {
-    CopilotContentBlockContent,
-    CopilotErrorContent,
-    CopilotEvent,
-    hasCodeBlocks,
-    parseCopilotSSEEvent,
-} from "../../utils/sseUtils";
 import MarkdownRenderer from "../MarkdownRenderer";
 import { CodeSection } from "../CodeSection";
 import ErrorBox from "../ErrorBox";
-import { Input, parseBadgeString, parseInput, stringifyInputArrayWithBadges } from "../AIChatInput/utils/inputUtils";
+import { Input, parseInput, stringifyInputArrayWithBadges } from "../AIChatInput/utils/inputUtils";
 import { commandTemplates, NATURAL_PROGRAMMING_TEMPLATES } from "../../commandTemplates/data/commandTemplates.const";
 import { placeholderTags } from "../../commandTemplates/data/placeholderTags.const";
 import {
     getTemplateById,
     getTemplateTextById,
-    injectTags,
     removeTemplate,
     upsertTemplate,
 } from "../../commandTemplates/utils/utils";
@@ -90,17 +88,6 @@ import { getOnboardingOpens, incrementOnboardingOpens } from "./utils/utils";
 import FeedbackBar from "./../FeedbackBar";
 import { useFeedback } from "./utils/useFeedback";
 
-interface CodeBlock {
-    filePath: string;
-    content: string;
-}
-
-interface ApiResponse {
-    event: string;
-    error: string | null;
-    questions: string[];
-}
-
 interface ChatIndexes {
     integratedChatIndex: number;
     previouslyIntegratedChatIndex: number;
@@ -155,6 +142,7 @@ const AIChat: React.FC = () => {
     const [testGenIntermediaryState, setTestGenIntermediaryState] = useState<TestGeneratorIntermediaryState | null>(
         null
     );
+    const [isAddingToWorkspace, setIsAddingToWorkspace] = useState(false);
 
     const [showSettings, setShowSettings] = useState(false);
 
@@ -203,9 +191,9 @@ const AIChat: React.FC = () => {
     /* REFACTORED CODE END [2] */
 
     let codeSegmentRendered = false;
-    let tempStorage: { [filePath: string]: string } = {};
-    const initialFiles = new Set<string>();
-    const emptyFiles = new Set<string>();
+    const [tempStorage, setTempStorage] = useState<{ [filePath: string]: string }>({});
+    const [initialFiles, setInitialFiles] = useState<Set<string>>(new Set<string>());
+    const [emptyFiles, setEmptyFiles] = useState<Set<string>>(new Set<string>());
 
     async function fetchBackendUrl() {
         try {
@@ -431,7 +419,7 @@ const AIChat: React.FC = () => {
         }
     }, [messages]);
 
-    async function handleSendQuery(content: { input: Input[]; attachments: Attachment[] }) {
+    async function handleSendQuery(content: { input: Input[]; attachments: Attachment[], metadata?: Record<string, any> }) {
         // Clear previous generation refs
         currentDiagnosticsRef.current = [];
         functionsRef.current = [];
@@ -624,6 +612,7 @@ const AIChat: React.FC = () => {
                                     outputRecord: parsedInput.placeholderValues.outputRecord,
                                     functionName: parsedInput.placeholderValues.functionName,
                                 },
+                                metadata as ExtendedDataMapperMetadata,
                                 attachments
                             );
                             break;
@@ -635,11 +624,16 @@ const AIChat: React.FC = () => {
                                     outputRecord: "",
                                     functionName: parsedInput.placeholderValues.functionName,
                                 },
+                                metadata as ExtendedDataMapperMetadata,
                                 attachments
                             );
                             break;
                         case "inline-mappings":
-                            await processInlineMappingParameters(inputText, metadata, attachments);
+                            await processInlineMappingParameters(
+                                inputText,
+                                metadata as ExtendedDataMapperMetadata,
+                                attachments
+                            );
                             break;
                     }
                     break;
@@ -680,6 +674,16 @@ const AIChat: React.FC = () => {
                     }
                     break;
                 }
+                case Command.Doc: {
+                    switch (parsedInput.templateId) {
+                        case "generate-user-doc":
+                            await processUserDocGeneration(
+                                parsedInput.placeholderValues.servicename
+                            );
+                            break;
+                    }
+                    break;
+                }
             }
         }
     }
@@ -799,19 +803,23 @@ const AIChat: React.FC = () => {
         command: string
     ) => {
         console.log("Add to integration called. Command: ", command);
+        setIsAddingToWorkspace(true);
+        
+        try {
+            const fileChanges: FileChanges[] = [];
         for (let { segmentText, filePath } of codeSegments) {
             let originalContent = "";
             if (!tempStorage[filePath]) {
                 try {
                     originalContent = await rpcClient.getAiPanelRpcClient().getFromFile({ filePath: filePath });
-                    tempStorage[filePath] = originalContent;
+                    setTempStorage(prev => ({ ...prev, [filePath]: originalContent }));
                     if (originalContent === "") {
-                        emptyFiles.add(filePath);
+                        setEmptyFiles(prev => new Set([...prev, filePath]));
                     } else {
-                        initialFiles.add(filePath);
+                        setInitialFiles(prev => new Set([...prev, filePath]));
                     }
                 } catch (error) {
-                    tempStorage[filePath] = "";
+                    setTempStorage(prev => ({ ...prev, [filePath]: "" }));
                 }
             }
 
@@ -906,7 +914,12 @@ const AIChat: React.FC = () => {
 
                 segmentText = updatedContent.trim();
             } else if (command === "ai_map_inline") {
-                rpcClient.getAiPanelRpcClient().addInlineCodeSegmentToWorkspace({ segmentText, filePath });
+                rpcClient.getAiPanelRpcClient().addInlineCodeSegmentToWorkspace(
+                    {
+                        segmentText,
+                        filePath
+                    }
+                );
                 continue;
             } else if (command === "test") {
                 segmentText = `${originalContent}\n\n${segmentText}`;
@@ -919,14 +932,17 @@ const AIChat: React.FC = () => {
                 isTestCode = true;
             }
 
-            await rpcClient
-                .getAiPanelRpcClient()
-                .addToProject({ filePath: filePath, content: segmentText, isTestCode: isTestCode });
+            fileChanges.push({ filePath, content: segmentText });
+        }
+
+        if (fileChanges.length > 0) {
+            await rpcClient.getAiPanelRpcClient().addFilesToProject({ fileChanges });
         }
 
         const developerMdContent = await rpcClient.getAiPanelRpcClient().readDeveloperMdFile(chatLocation);
         const updatedChatHistory = generateChatHistoryForSummarize(chatArray);
         setIsCodeAdded(true);
+        setIsAddingToWorkspace(false);
 
         if (await rpcClient.getAiPanelRpcClient().isNaturalProgrammingDirectoryExists(chatLocation)) {
             fetchWithAuth({
@@ -957,6 +973,11 @@ const AIChat: React.FC = () => {
                     rpcClient.getAiPanelRpcClient().handleChatSummaryError(UPDATE_CHAT_SUMMARY_FAILED);
                 });
         }
+        } catch (error) {
+            console.error("Error in handleAddAllCodeSegmentsToWorkspace:", error);
+            setIsAddingToWorkspace(false);
+            throw error;
+        }
     };
 
     async function streamToString(stream: ReadableStream<Uint8Array>): Promise<string> {
@@ -981,7 +1002,10 @@ const AIChat: React.FC = () => {
         command: string
     ) => {
         console.log("Revert gration called. Command: ", command);
-
+        setIsAddingToWorkspace(true);
+        
+        try {
+            const fileChanges: FileChanges[] = [];
         for (const { filePath } of codeSegments) {
             let originalContent = tempStorage[filePath];
             if (originalContent === "" && !initialFiles.has(filePath) && !emptyFiles.has(filePath)) {
@@ -997,11 +1021,12 @@ const AIChat: React.FC = () => {
                     isTestCode = true;
                 }
                 const revertContent = emptyFiles.has(filePath) ? "" : originalContent;
-                await rpcClient
-                    .getAiPanelRpcClient()
-                    .addToProject({ filePath: filePath, content: revertContent, isTestCode: isTestCode });
+                fileChanges.push({ filePath, content: revertContent });
             }
         }
+        if (fileChanges.length > 0) {
+            await rpcClient.getAiPanelRpcClient().addFilesToProject({ fileChanges });
+        }
         rpcClient.getAiPanelRpcClient().updateDevelopmentDocument({
             content: previousDevelopmentDocumentContent,
             filepath: chatLocation,
@@ -1011,8 +1036,16 @@ const AIChat: React.FC = () => {
             `chatArray-AIGenerationChat-${projectUuid}-developer-index`,
             JSON.stringify({ integratedChatIndex, previouslyIntegratedChatIndex })
         );
-        tempStorage = {};
+        setTempStorage({});
+        setInitialFiles(new Set<string>());
+        setEmptyFiles(new Set<string>());
         setIsCodeAdded(false);
+        setIsAddingToWorkspace(false);
+        } catch (error) {
+            console.error("Error in handleRevertChanges:", error);
+            setIsAddingToWorkspace(false);
+            throw error;
+        }
     };
 
     async function processTestGeneration(
@@ -1046,12 +1079,33 @@ const AIChat: React.FC = () => {
         }
     }
 
+    async function processUserDocGeneration(serviceName: string) {
+        try {
+            const requestBody: DocGenerationRequest = {
+                type: DocGenerationType.User,
+                serviceName: serviceName
+            };
+
+            await rpcClient.getAiPanelRpcClient().getGeneratedDocumentation(requestBody);
+        } catch (error: any) {
+            setIsLoading(false);
+            const errorName = error instanceof Error ? error.name : "Unknown error";
+            const errorMessage = "message" in error ? error.message : "Unknown error";
+
+            if (errorName === "AbortError") {
+                throw new Error("Failed: The user cancelled the request.");
+            } else {
+                throw new Error(errorMessage);
+            }
+        }
+    }
+
     // Process records from another package
     function processRecordReference(
         recordName: string,
         recordMap: Map<string, any>,
-        allImports: Array<{ moduleName: string; alias?: string }>,
-        importsMap: Map<string, { moduleName: string; alias?: string; recordName: string }>
+        allImports: Array<ImportInfo>,
+        importsMap: Map<string, ImportInfo>
     ): DataMappingRecord | Error {
         const isArray = recordName.endsWith("[]");
         const cleanedRecordName = recordName.replace(/\[\]$/, "");
@@ -1170,7 +1224,7 @@ const AIChat: React.FC = () => {
     function processOutput(
         outputParam: string,
         recordMap: Map<any, any>,
-        allImports: { moduleName: string; alias?: string }[],
+        allImports: ImportInfo[],
         importsMap: Map<any, any>
     ) {
         const parts = outputParam.split("|");
@@ -1191,6 +1245,7 @@ const AIChat: React.FC = () => {
     async function processMappingParameters(
         message: string,
         parameters: MappingParameters,
+        metadata?: ExtendedDataMapperMetadata,
         attachments?: Attachment[]
     ) {
         let assistant_response = "";
@@ -1203,6 +1258,7 @@ const AIChat: React.FC = () => {
         let outputParam;
         let inputNames: string[] = [];
         let result;
+        let finalContent: string = "";
         setIsLoading(true);
 
         const functionName = parameters.functionName;
@@ -1220,7 +1276,7 @@ const AIChat: React.FC = () => {
             }
         });
 
-        const existingFunctions: { name: string; filePath: string; startLine: number; endLine: number }[] = [];
+        const existingFunctions: ComponentInfo[] = [];
 
         for (const pkg of projectComponents.components.packages || []) {
             for (const mod of pkg.modules || []) {
@@ -1243,7 +1299,9 @@ const AIChat: React.FC = () => {
                         name: func.name,
                         filePath: filepath + func.filePath,
                         startLine: func.startLine,
+                        startColumn: func.startColumn,
                         endLine: func.endLine,
+                        endColumn: func.endColumn
                     });
                 });
             }
@@ -1280,32 +1338,54 @@ const AIChat: React.FC = () => {
         output = processOutput(outputParam, recordMap, allImports, importsMap);
 
         const requestPayload: any = {
-            backendUri: "",
-            token: "",
             inputRecordTypes: inputs,
             outputRecordType: output,
             functionName,
             imports: Array.from(importsMap.values()),
             inputNames: inputNames,
+            model: metadata
         };
         if (attachments && attachments.length > 0) {
             requestPayload.attachment = attachments;
         }
-        const response = await rpcClient.getAiPanelRpcClient().getMappingsFromRecord(requestPayload);
-        setIsLoading(false);
 
-        assistant_response = `Mappings consist of the following:\n`;
-        if (inputParams.length === 1) {
-            assistant_response += `- **Input Record**: ${inputParams[0]}\n`;
-        } else {
-            assistant_response += `- **Input Records**: ${inputParams.join(", ")}\n`;
-        }
-        assistant_response += `- **Output Record**: ${outputParam}\n`;
-        assistant_response += `- **Function Name**: ${functionName}\n`;
+        let allMappingsRequest;
+        const tempFileMetadata = await rpcClient.getAiPanelRpcClient().createTempFileAndGenerateMetadata(
+            {
+                inputs,
+                output,
+                functionName,
+                inputNames,
+                imports: Array.from(importsMap.values())
+            }
+        );
+        allMappingsRequest = await rpcClient.getAiPanelRpcClient().generateMappings(
+            {
+                metadata: tempFileMetadata,
+                attachments,
+                useTemporaryFile: true
+            }
+        );
 
-        if (result.functionNameMatch) {
-            assistant_response += `\n**Note**: When you click **Add to Integration**, it will override your existing mappings.\n`;
-        }
+        const response = await rpcClient.getDataMapperRpcClient().getAllDataMapperSource(allMappingsRequest);
+        finalContent = response.textEdits[allMappingsRequest.filePath]?.[0]?.newText;
+
+        await rpcClient.getAiPanelRpcClient().addCodeSegmentToWorkspace(
+            {
+                segmentText: finalContent,
+                filePath: tempFileMetadata.codeData.lineRange.fileName,
+                metadata: tempFileMetadata,
+                textEdit: response
+            }
+        );
+        await new Promise(resolve => setTimeout(resolve, 100));
+        finalContent = await rpcClient.getAiPanelRpcClient().getContentFromFile(
+            {
+                filePath: tempFileMetadata.codeData.lineRange.fileName
+            }
+        );
+
+        setIsLoading(false);
 
         let filePath;
         if (result.functionNameMatch) {
@@ -1315,7 +1395,6 @@ const AIChat: React.FC = () => {
         } else {
             filePath = "data_mappings.bal";
         }
-        let finalContent = response.mappingCode;
         const needsImports = Array.from(importsMap.values()).length > 0;
 
         if (needsImports) {
@@ -1332,7 +1411,20 @@ const AIChat: React.FC = () => {
                 })
                 .join("\n");
 
-            finalContent = `${newImports}\n${response.mappingCode}`;
+            finalContent = `${newImports}\n${finalContent}`;
+        }
+
+        assistant_response = `Mappings consist of the following:\n`;
+        if (inputParams.length === 1) {
+            assistant_response += `- **Input Record**: ${inputParams[0]}\n`;
+        } else {
+            assistant_response += `- **Input Records**: ${inputParams.join(", ")}\n`;
+        }
+        assistant_response += `- **Output Record**: ${outputParam}\n`;
+        assistant_response += `- **Function Name**: ${functionName}\n`;
+
+        if (result.functionNameMatch) {
+            assistant_response += `\n**Note**: When you click **Add to Integration**, it will override your existing mappings.\n`;
         }
         assistant_response += `<code filename="${filePath}" type="ai_map">\n\`\`\`ballerina\n${finalContent}\n\`\`\`\n</code>`;
 
@@ -1347,7 +1439,7 @@ const AIChat: React.FC = () => {
 
     async function processInlineMappingParameters(
         message: string,
-        metadata?: Record<string, any>,
+        metadata?: ExtendedDataMapperMetadata,
         attachments?: Attachment[]
     ) {
         let assistant_response = "";
@@ -1364,15 +1456,16 @@ const AIChat: React.FC = () => {
         setIsLoading(true);
 
         try {
-            const requestPayload: any = {
+            const requestPayload: MetadataWithAttachments = {
                 metadata,
+                useTemporaryFile: false
             };
             if (attachments && attachments.length > 0) {
-                requestPayload.attachment = attachments;
+                requestPayload.attachments = attachments;
             }
-            const allMappingsRequest = await rpcClient.getAiPanelRpcClient().getMappingsFromModel(requestPayload);
+            const allMappingsRequest = await rpcClient.getAiPanelRpcClient().generateMappings(requestPayload);
             const sourceResponse = await rpcClient
-                .getInlineDataMapperRpcClient()
+                .getDataMapperRpcClient()
                 .getAllDataMapperSource(allMappingsRequest);
 
             setIsLoading(false);
@@ -1816,6 +1909,7 @@ const AIChat: React.FC = () => {
                                                             isPromptExecutedInCurrentWindow
                                                         }
                                                         isErrorChunkReceived={isErrorChunkReceivedRef.current}
+                                                        isAddingToWorkspace={isAddingToWorkspace}
                                                     />
                                                 );
                                             }
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/components/AIChatInput/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/components/AIChatInput/index.tsx
index b47549b65d6..3df2392f818 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/components/AIChatInput/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/components/AIChatInput/index.tsx
@@ -19,7 +19,7 @@
 import { useState, useRef, KeyboardEvent, useEffect, useLayoutEffect, useImperativeHandle, forwardRef } from "react";
 import styled from "@emotion/styled";
 import { Codicon } from "@wso2/ui-toolkit";
-import { AIPanelPrompt, Attachment, AttachmentStatus, Command, ExpandedDMModel, TemplateId } from "@wso2/ballerina-core";
+import { AIPanelPrompt, Attachment, AttachmentStatus, Command, ExtendedDataMapperMetadata, TemplateId } from "@wso2/ballerina-core";
 import AttachmentBox, { AttachmentsContainer } from "../AttachmentBox";
 import { StyledInputComponent, StyledInputRef } from "./StyledInput";
 import { AttachmentOptions, useAttachments } from "./hooks/useAttachments";
@@ -473,9 +473,9 @@ const AIChatInput = forwardRef<AIChatInputRef, AIChatInputProps>(
 
             // Extract and store metadata safely
             if (content?.type === 'command-template') {
-                setCurrentMetadata(content.metadata);
+                setCurrentMetadata(content.metadata as ExtendedDataMapperMetadata);
             } else {
-                setCurrentMetadata({});
+                setCurrentMetadata(null);
             }
         };
 
@@ -485,7 +485,7 @@ const AIChatInput = forwardRef<AIChatInputRef, AIChatInputProps>(
         const cleanChatInput = () => {
             setInputValue({ text: "" });
             removeAllAttachments();
-            setCurrentMetadata({});
+            setCurrentMetadata(null);
         };
 
         /**
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/components/CodeSection.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/components/CodeSection.tsx
index 649fbb03a20..234478751a7 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/components/CodeSection.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/AIPanel/components/CodeSection.tsx
@@ -46,6 +46,7 @@ interface CodeSectionProps {
     onRetryRepair: () => void;
     isPromptExecutedInCurrentWindow: boolean;
     isErrorChunkReceived: boolean;
+    isAddingToWorkspace: boolean;
 }
 
 const EntryContainer = styled.div<{ hasErrors: boolean; isOpen: boolean; isHovered: boolean }>(
@@ -81,7 +82,8 @@ export const CodeSection: React.FC<CodeSectionProps> = ({
     diagnostics = [],
     onRetryRepair = () => {},
     isPromptExecutedInCurrentWindow,
-    isErrorChunkReceived
+    isErrorChunkReceived,
+    isAddingToWorkspace
 }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [isCodeAdded, setIsCodeAdded] = useState(false);
@@ -155,7 +157,7 @@ export const CodeSection: React.FC<CodeSectionProps> = ({
                                             ? "Code was generated for different session, please regenerate again"
                                             : ""
                                 }
-                                disabled={!buttonsActive || isSyntaxError || !isPromptExecutedInCurrentWindow || isErrorChunkReceived}
+                                disabled={!buttonsActive || isSyntaxError || !isPromptExecutedInCurrentWindow || isErrorChunkReceived || isAddingToWorkspace}
                             >
                                 <Codicon name="add" />
                                 &nbsp;&nbsp;Add to Integration
@@ -172,7 +174,7 @@ export const CodeSection: React.FC<CodeSectionProps> = ({
                                         ? "Code was generated for different session, please regenerate again"
                                         : ""
                                 }
-                                disabled={!buttonsActive || !isPromptExecutedInCurrentWindow}
+                                disabled={!buttonsActive || !isPromptExecutedInCurrentWindow || isAddingToWorkspace}
                             >
                                 <Codicon name="history" />
                                 &nbsp;&nbsp;Revert to Checkpoint
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/AIChatAgentWizard.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/AIChatAgentWizard.tsx
index 4952ce5a22e..a4f3a1b9a45 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/AIChatAgentWizard.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/AIChatAgentWizard.tsx
@@ -16,23 +16,19 @@
  * under the License.
  */
 
-import { useEffect, useRef, useState } from 'react';
-import { EVENT_TYPE, FlowNode, LinePosition, ListenerModel } from '@wso2/ballerina-core';
+import { useRef, useState } from 'react';
+import { AvailableNode, EVENT_TYPE, FlowNode, LinePosition, ListenerModel } from '@wso2/ballerina-core';
 import { View, ViewContent, TextField, Button, Typography } from '@wso2/ui-toolkit';
 import styled from '@emotion/styled';
 import { useRpcContext } from '@wso2/ballerina-rpc-client';
 import { URI, Utils } from "vscode-uri";
-import { LoadingContainer } from '../../styles';
 import { TitleBar } from '../../../components/TitleBar';
 import { TopNavigationBar } from '../../../components/TopNavigationBar';
 import { RelativeLoader } from '../../../components/RelativeLoader';
 import { FormHeader } from '../../../components/FormHeader';
 import { getAiModuleOrg, getNodeTemplate } from './utils';
-import { cloneDeep } from 'lodash';
 import { AI, BALLERINA, GET_DEFAULT_MODEL_PROVIDER } from '../../../constants';
 
-const FORM_WIDTH = 600;
-
 const FormContainer = styled.div`
     display: flex;
     flex-direction: column;
@@ -81,11 +77,8 @@ export function AIChatAgentWizard(props: AIChatAgentWizardProps) {
         { label: "Completing", description: "Finalizing the agent setup" }
     ];
 
-    const agentFilePath = useRef<string>("");
+    const projectPath = useRef<string>("");
     const aiModuleOrg = useRef<string>("");
-    const agentCallEndOfFile = useRef<LinePosition | null>(null);
-    const agentEndOfFile = useRef<LinePosition | null>(null);
-    const mainFilePath = useRef<string>("");
 
     const validateName = (name: string): boolean => {
         if (!name) {
@@ -113,70 +106,55 @@ export function AIChatAgentWizard(props: AIChatAgentWizardProps) {
             // Initialize wizard data when user clicks create
             setCurrentStep(0);
 
-            // get agent file path
-            const filePath = await rpcClient.getVisualizerLocation();
-            agentFilePath.current = Utils.joinPath(URI.file(filePath.projectUri), "agents.bal").fsPath;
-
             // get agent org
             aiModuleOrg.current = await getAiModuleOrg(rpcClient);
 
-            // fetch agent node - get the agent node
-            const allAgents = await rpcClient.getAIAgentRpcClient().getAllAgents({
-                filePath: agentFilePath.current,
-                orgName: aiModuleOrg.current
+            // get project path
+            const filePath = await rpcClient.getVisualizerLocation();
+            projectPath.current = filePath.projectUri;
+
+            // Search for agent node in the current file
+            const agentSearchResponse = await rpcClient.getBIDiagramRpcClient().search({
+                filePath: projectPath.current,
+                queryMap: { orgName: aiModuleOrg.current },
+                searchKind: "AGENT"
             });
-            console.log(">>> allAgents", allAgents);
 
-            if (!allAgents.agents.length) {
-                console.log(">>> no agents found");
-                throw new Error("No agents found");
+            // Validate search response structure
+            if (!agentSearchResponse?.categories?.[0]?.items?.[0]) {
+                throw new Error('No agent node found in search response');
             }
 
-            const agentCodeData = allAgents.agents.at(0);
-            // get agent node template
-            const agentNodeTemplate = await getNodeTemplate(rpcClient, agentCodeData, agentFilePath.current);
-            const agentNode = cloneDeep(agentNodeTemplate);
-
-            // get all llm models
-            const allModels = await rpcClient
-                .getAIAgentRpcClient()
-                .getAllModels({
-                    agent: agentCodeData.object,
-                    filePath: agentFilePath.current,
-                    orgName: aiModuleOrg.current
-                });
-            console.log(">>> allModels", allModels);
+            const agentNode = agentSearchResponse.categories[0].items[0] as AvailableNode;
+            console.log(">>> agentNode", agentNode);
 
-            // get openai model
-            const defaultModel = allModels.models.find((model) =>
-                model.object === "OpenAiProvider" || (model.org === BALLERINA && model.module === AI)
+            // Generate template from agent node
+            const agentNodeTemplate = await getNodeTemplate(rpcClient, agentNode.codedata, projectPath.current);
+
+            // Search for model providers
+            const modelProviderSearchResponse = await rpcClient.getBIDiagramRpcClient().search({
+                filePath: projectPath.current,
+                queryMap: { q: aiModuleOrg.current === BALLERINA ? "ai" : "OpenAiProvider" },
+                searchKind: aiModuleOrg.current === BALLERINA ? "MODEL_PROVIDER" : "CLASS_INIT"
+            });
+
+            const modelNodes = modelProviderSearchResponse.categories[0].items as AvailableNode[];
+            console.log(">>> modelNodes", modelNodes);
+
+            // get default model
+            const defaultModelNode = modelNodes.find((model) =>
+                model.codedata.object === "OpenAiProvider" || (model.codedata.org === BALLERINA && model.codedata.module === AI)
             );
-            if (!defaultModel) {
+            if (!defaultModelNode) {
                 console.log(">>> no default model found");
                 throw new Error("No default model found");
             }
 
             // get model node template
-            const modelNodeTemplate = await getNodeTemplate(rpcClient, defaultModel, agentFilePath.current);
-            const defaultModelNode = cloneDeep(modelNodeTemplate);
-
-            // get end of files
-            // main.bal last line
-            mainFilePath.current = Utils.joinPath(URI.file(filePath.projectUri), "main.bal").fsPath;
-            const endOfFile = await rpcClient.getBIDiagramRpcClient().getEndOfFile({ filePath: mainFilePath.current });
-            console.log(">>> endOfFile", endOfFile);
-            agentCallEndOfFile.current = endOfFile;
-
-            // agent.bal file last line
-            const endOfAgentFile = await rpcClient
-                .getBIDiagramRpcClient()
-                .getEndOfFile({ filePath: agentFilePath.current });
-            console.log(">>> endOfAgentFile", endOfAgentFile);
-            agentEndOfFile.current = endOfAgentFile;
-
-            const listenerName = agentName + "Listener";
+            const modelNodeTemplate = await getNodeTemplate(rpcClient, defaultModelNode.codedata, projectPath.current);
 
             // Get listener model
+            const listenerName = agentName + "Listener";
             const listenerModelResponse = await rpcClient.getServiceDesignerRpcClient().getListenerModel({
                 moduleName: type,
                 orgName: aiModuleOrg.current
@@ -220,39 +198,30 @@ export function AIChatAgentWizard(props: AIChatAgentWizardProps) {
 
             // save model node
             const modelVarName = `_${agentName}Model`;
-            defaultModelNode.properties.variable.value = modelVarName;
+            modelNodeTemplate.properties.variable.value = modelVarName;
             const modelResponse = await rpcClient
                 .getBIDiagramRpcClient()
-                .getSourceCode({ filePath: agentFilePath.current, flowNode: defaultModelNode });
+                .getSourceCode({ filePath: projectPath.current, flowNode: modelNodeTemplate });
             console.log(">>> modelResponse getSourceCode", { modelResponse });
 
-            // wait 2 seconds (wait until LS is updated)
-            console.log(">>> wait 2 seconds");
-            await new Promise((resolve) => setTimeout(resolve, 2000));
-
             // save the agent node
-            const updatedAgentNode = cloneDeep(agentNode);
             const systemPromptValue = `{role: "", instructions: string \`\`}`;
             const agentVarName = `_${agentName}Agent`;
-            updatedAgentNode.properties.systemPrompt.value = systemPromptValue;
-            updatedAgentNode.properties.model.value = modelVarName;
-            updatedAgentNode.properties.tools.value = [];
-            updatedAgentNode.properties.variable.value = agentVarName;
+            agentNodeTemplate.properties.systemPrompt.value = systemPromptValue;
+            agentNodeTemplate.properties.model.value = modelVarName;
+            agentNodeTemplate.properties.tools.value = [];
+            agentNodeTemplate.properties.variable.value = agentVarName;
 
             const agentResponse = await rpcClient
                 .getBIDiagramRpcClient()
-                .getSourceCode({ filePath: agentFilePath.current, flowNode: updatedAgentNode });
+                .getSourceCode({ filePath: projectPath.current, flowNode: agentNodeTemplate });
             console.log(">>> agentResponse getSourceCode", { agentResponse });
 
-             // If the selected model is the default WSO2 model provider, configure it
+            // If the selected model is the default WSO2 model provider, configure it
             if (defaultModelNode?.codedata?.symbol === GET_DEFAULT_MODEL_PROVIDER) {
                 await rpcClient.getAIAgentRpcClient().configureDefaultModelProvider();
             }
 
-            // wait 2 seconds (wait until LS is updated)
-            console.log(">>> wait 2 seconds");
-            await new Promise((resolve) => setTimeout(resolve, 2000));
-
             if (newArtifact) {
                 setCurrentStep(5);
                 rpcClient.getVisualizerRpcClient().openView({
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/AddMcpServer.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/AddMcpServer.tsx
index e25700dc2a2..c7f4c9254e5 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/AddMcpServer.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/AddMcpServer.tsx
@@ -9,7 +9,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import styled from "@emotion/styled";
-import { FlowNode } from "@wso2/ballerina-core";
+import { AvailableNode, FlowNode } from "@wso2/ballerina-core";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
 import { Button, ThemeColors } from "@wso2/ui-toolkit";
 import { RelativeLoader } from "../../../components/RelativeLoader";
@@ -139,6 +139,7 @@ export function AddMcpServer(props: AddToolProps): JSX.Element {
     const [loading, setLoading] = useState<boolean>(false);
     const [savingForm, setSavingForm] = useState<boolean>(false);
 
+    const projectPath = useRef<string>("");
     const agentFilePath = useRef<string>("");
     const hasUpdatedToolsField = useRef(false);
     const formRef = useRef<any>(null);
@@ -284,6 +285,9 @@ export function AddMcpServer(props: AddToolProps): JSX.Element {
     const initPanel = async () => {
         hasUpdatedToolsField.current = false; // Reset on panel init
         setLoading(true);
+        // get project path
+        const filePath = await rpcClient.getVisualizerLocation();
+        projectPath.current = filePath.projectUri;
         // get agent file path
         agentFilePath.current = await getAgentFilePath(rpcClient);
         // fetch tools and agent node
@@ -305,9 +309,16 @@ export function AddMcpServer(props: AddToolProps): JSX.Element {
     };
     
     const fetchExistingTools = async () => {
-        const existingTools = await rpcClient.getAIAgentRpcClient().getTools({ filePath: agentFilePath.current });
-        console.log(">>> existing tools", existingTools);
-        setExistingTools(existingTools.tools);
+        const agentToolsSearchResponse = await rpcClient.getBIDiagramRpcClient().search({
+            filePath: projectPath.current,
+            position: { startLine: { line: 0, offset: 0 }, endLine: { line: 0, offset: 0 } },
+            searchKind: "AGENT_TOOL"
+        });
+        const existingToolsList = agentToolsSearchResponse.categories?.[0]?.items
+            ? (agentToolsSearchResponse.categories[0].items as AvailableNode[]).map((item) => item.codedata.symbol)
+            : [];
+        console.log(">>> existing tools", existingToolsList);
+        setExistingTools(existingToolsList);
     };
 
     const fetchMcpTools = async (url: string) => {
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/MemoryManagerConfig.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/MemoryManagerConfig.tsx
index 572b191b786..eb5866a8192 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/MemoryManagerConfig.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/MemoryManagerConfig.tsx
@@ -101,16 +101,21 @@ export function MemoryManagerConfig(props: MemoryManagerConfigProps): JSX.Elemen
             return;
         }
         try {
-            const memoryManagers = await rpcClient
-                .getAIAgentRpcClient()
-                .getAllMemoryManagers({ filePath: agentFilePath.current, orgName: aiModuleOrg.current });
-            console.log(">>> all memory managers", memoryManagers);
-            if (memoryManagers.memoryManagers) {
-                setMemoryManagersCodeData(memoryManagers.memoryManagers);
-                return memoryManagers.memoryManagers;
-            } else {
-                console.error("Memory managers not found", memoryManagers);
+            const memoryManagerSearchResponse = await rpcClient.getBIDiagramRpcClient().search({
+                filePath: agentFilePath.current,
+                queryMap: { orgName: aiModuleOrg.current },
+                searchKind: "MEMORY_MANAGER"
+            });
+
+            if (!memoryManagerSearchResponse?.categories?.[0]?.items) {
+                console.error("No memory managers found in search response");
+                return [];
             }
+
+            const memoryManagers = memoryManagerSearchResponse.categories[0].items.map((item: any) => item.codedata);
+            console.log(">>> all memory managers", memoryManagers);
+            setMemoryManagersCodeData(memoryManagers);
+            return memoryManagers;
         } catch (error) {
             console.error("Error fetching memory managers", error);
         }
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/ModelConfig.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/ModelConfig.tsx
deleted file mode 100644
index 63a2a3ece76..00000000000
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/ModelConfig.tsx
+++ /dev/null
@@ -1,364 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React, { useEffect, useRef, useState } from "react";
-import styled from "@emotion/styled";
-import { CodeData, FlowNode, NodeMetadata, NodeProperties, UpdatedArtifactsResponse } from "@wso2/ballerina-core";
-import { FormField, FormValues } from "@wso2/ballerina-side-panel";
-import { useRpcContext } from "@wso2/ballerina-rpc-client";
-import { convertConfig } from "../../../utils/bi";
-import ConfigForm from "./ConfigForm";
-import { Dropdown } from "@wso2/ui-toolkit";
-import { cloneDeep } from "lodash";
-import { RelativeLoader } from "../../../components/RelativeLoader";
-import { getAgentFilePath, getAiModuleOrg, getNodeTemplate, getNPFilePath } from "./utils";
-import { BALLERINA, BALLERINAX, GET_DEFAULT_MODEL_PROVIDER, WSO2_MODEL_PROVIDER, PROVIDER_NAME_MAP } from "../../../constants";
-
-const Container = styled.div`
-    padding: 16px;
-    height: 100%;
-`;
-
-const LoaderContainer = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-`;
-
-const Row = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 16px;
-`;
-
-const InfoBox = styled.div`
-    font-size: 13px;
-    color: var(--vscode-foreground);
-    padding: 12px;
-    margin-bottom: 16px;
-    background-color: var(--vscode-editor-inactiveSelectionBackground);
-    border-radius: 4px;
-
-    strong {
-        font-weight: 600;
-    }
-
-    .description {
-        font-size: 12px;
-        color: var(--vscode-descriptionForeground);
-        line-height: 1.4;
-    }
-
-    .command-wrapper {
-        display: flex;
-        align-items: flex-start;
-        gap: 8px;
-        margin-bottom: 8px;
-    }
-`;
-
-const CodeBlock = styled.code`
-    font-size: 11px;
-    color: var(--vscode-foreground);
-    font-family: var(--vscode-editor-font-family);
-    background-color: var(--vscode-textCodeBlock-background);
-    padding: 2px 4px;
-    border-radius: 3px;
-    border: 1px solid var(--vscode-widget-border);
-    margin-top: 6px;
-    display: inline-block;
-`;
-
-interface ModelConfigProps {
-    agentCallNode: FlowNode;
-    onSave?: (response?: UpdatedArtifactsResponse) => void;
-}
-
-export function ModelConfig(props: ModelConfigProps): JSX.Element {
-    const { agentCallNode, onSave } = props;
-
-    const { rpcClient } = useRpcContext();
-    // use selected model
-    const [modelsCodeData, setModelsCodeData] = useState<CodeData[]>([]);
-    const [selectedModelCodeData, setSelectedModelCodeData] = useState<CodeData>();
-    // already assigned model
-    const [selectedModel, setSelectedModel] = useState<FlowNode>();
-    const [selectedModelFields, setSelectedModelFields] = useState<FormField[]>([]);
-
-    const [loading, setLoading] = useState<boolean>(false);
-    const [savingForm, setSavingForm] = useState<boolean>(false);
-
-    const agentFilePath = useRef<string>("");
-    const aiModuleOrg = useRef<string>("");
-    const moduleConnectionNodes = useRef<FlowNode[]>([]);
-    const selectedModelFlowNode = useRef<FlowNode>();
-
-    useEffect(() => {
-        initPanel();
-    }, []);
-
-    useEffect(() => {
-        if (modelsCodeData.length > 0 && selectedModel && !selectedModelCodeData) {
-            // Find the initial modelCodeData that matches selectedModel
-            let initialModelCodeData: CodeData | undefined;
-            if (aiModuleOrg.current === BALLERINA) {
-                initialModelCodeData = modelsCodeData.find((model) => model.module === selectedModel.codedata.module);
-            } else if (aiModuleOrg.current === BALLERINAX) {
-                initialModelCodeData = modelsCodeData.find((model) => model.object === selectedModel.codedata.object);
-            } else {
-                initialModelCodeData = modelsCodeData.find((model) => model.module === selectedModel.codedata.module);
-            }
-            if (initialModelCodeData) {
-                setSelectedModelCodeData(initialModelCodeData);
-                fetchModelNodeTemplate(initialModelCodeData);
-            } else {
-                fetchModelNodeTemplate(selectedModel.codedata);
-            }
-        }
-    }, [modelsCodeData, selectedModel]);
-
-    const initPanel = async () => {
-        setLoading(true);
-        if (agentCallNode?.codedata?.node === "NP_FUNCTION") {
-            agentFilePath.current = await getNPFilePath(rpcClient);
-        } else {
-            agentFilePath.current = await getAgentFilePath(rpcClient);
-        }
-
-        if (agentCallNode?.codedata?.node === "NP_FUNCTION") {
-            aiModuleOrg.current = "ballerina"
-        } else {
-            aiModuleOrg.current = await getAiModuleOrg(rpcClient);
-        }
-
-        // fetch all models
-        await fetchModels();
-        // fetch selected agent model
-        await fetchSelectedAgentModel();
-        setLoading(false);
-    };
-
-    // Helper to get provider name from modelCodeData
-    const getProviderName = (model: CodeData, useMappedName: boolean = false) => {
-        if (!model) return "";
-        if (aiModuleOrg.current === BALLERINA) {
-            if (useMappedName) {
-                return PROVIDER_NAME_MAP[model.module] || model.module;
-            }
-            return model.module;
-        } else if (aiModuleOrg.current === BALLERINAX) {
-            return model.object;
-        }
-        // fallback
-        return model.module || model.object;
-    };
-
-    const fetchModels = async () => {
-        console.log(">>> agent call node", agentCallNode);
-        let agentName;
-        if (agentCallNode?.codedata?.node === "NP_FUNCTION") {
-            agentName = agentCallNode.properties?.modelProvider?.value;
-        } else {
-            agentName = agentCallNode?.properties.connection.value;
-        }
-        if (!agentName) {
-            console.error("Agent name not found", agentCallNode);
-            return;
-        }
-        const models = await rpcClient
-            .getAIAgentRpcClient()
-            .getAllModels({ agent: agentName, filePath: agentFilePath.current, orgName: aiModuleOrg.current });
-        console.log(">>> all models", models);
-        setModelsCodeData(models.models);
-    };
-
-    const fetchSelectedAgentModel = async () => {
-        // get module nodes
-        const moduleNodes = await rpcClient.getBIDiagramRpcClient().getModuleNodes();
-        console.log(">>> module nodes", moduleNodes);
-        if (moduleNodes.flowModel.connections.length > 0) {
-            moduleConnectionNodes.current = moduleNodes.flowModel.connections;
-        }
-        // get agent name
-        let agentName;
-        if (agentCallNode?.codedata?.node === "NP_FUNCTION") {
-            agentName = agentCallNode.properties?.modelProvider?.value;
-        } else {
-            agentName = agentCallNode.properties.connection.value;
-        }
-        // get agent node
-        const agentNode = moduleConnectionNodes.current.find((node) => node.properties.variable.value === agentName);
-        console.log(">>> agent node", agentNode);
-        if (!agentNode) {
-            console.error("Agent node not found", agentCallNode);
-            return;
-        }
-        // get model name
-        const modelName = agentNode?.properties?.model?.value || agentNode?.properties?.variable?.value;
-        console.log(">>> model name", modelName);
-        // get model node
-        const modelNode = moduleConnectionNodes.current.find((node) => node.properties.variable.value === modelName);
-        setSelectedModel(modelNode);
-        console.log(">>> selected model node", modelNode);
-    };
-
-    // fetch selected model code data - node template
-    const fetchModelNodeTemplate = async (modelCodeData: CodeData) => {
-        setLoading(true);
-        let nodeProperties: NodeProperties = {};
-        // Determine provider match for both aiModuleOrg cases
-        let isProviderMatch = false;
-        if (aiModuleOrg.current === BALLERINA) {
-            isProviderMatch = selectedModel?.codedata.module === modelCodeData.module;
-        } else if (aiModuleOrg.current === BALLERINAX) {
-            isProviderMatch = selectedModel?.codedata.object === modelCodeData.object;
-        } else {
-            isProviderMatch = selectedModel?.codedata.module === modelCodeData.module;
-        }
-        if (isProviderMatch) {
-            // use selected model properties
-            selectedModelFlowNode.current = cloneDeep(selectedModel);
-            nodeProperties = selectedModel?.properties;
-        } else {
-            const modelNodeTemplate = await getNodeTemplate(rpcClient, modelCodeData, agentFilePath.current);
-            console.log(">>> selected model node template", { modelNodeTemplate, modelCodeData });
-            selectedModelFlowNode.current = cloneDeep(modelNodeTemplate);
-            nodeProperties = modelNodeTemplate.properties;
-        }
-        console.log(">>> node properties", nodeProperties);
-        // use same variable name for model fields
-        if (selectedModel?.properties.variable) {
-            nodeProperties.variable.value = selectedModel?.properties.variable.value;
-            nodeProperties.variable.hidden = true;
-        } else {
-            console.error("Already assigned model node variable not found", selectedModel);
-        }
-
-        const modelFields = convertConfig(nodeProperties);
-        setSelectedModelFields(modelFields);
-        setLoading(false);
-    };
-
-    const handleOnSave = async (data: FormField[], rawData: FormValues) => {
-        console.log(">>> save value", { data, rawData });
-        setSavingForm(true);
-        const nodeTemplate = selectedModelFlowNode.current;
-        data.forEach((field) => {
-            if (field.editable) {
-                nodeTemplate.properties[field.key as keyof typeof nodeTemplate.properties].value = field.value;
-            }
-        });
-        // update codedata range with already assigned model range (override)
-        nodeTemplate.codedata.lineRange = selectedModel?.codedata.lineRange;
-        // update isNew to false
-        nodeTemplate.codedata.isNew = false;
-        // update model name
-        nodeTemplate.properties.variable.value = selectedModel?.properties.variable.value;
-        console.log(">>> request getSourceCode with template ", { nodeTemplate });
-        // update source
-        const response = await rpcClient
-            .getBIDiagramRpcClient()
-            .getSourceCode({ filePath: agentFilePath.current, flowNode: nodeTemplate });
-        console.log(">>> response getSourceCode with template ", { response });
-
-        // If the selected model is the default WSO2 model provider, configure it
-        if (selectedModelCodeData?.symbol === GET_DEFAULT_MODEL_PROVIDER) {
-            await rpcClient.getAIAgentRpcClient().configureDefaultModelProvider();
-        }
-
-        onSave?.(response);
-        setSavingForm(false);
-    };
-
-    return (
-        <Container>
-            {modelsCodeData.length > 0 && (
-                <>
-                    <Row>
-                        <Dropdown
-                            isRequired
-                            errorMsg=""
-                            id="agent-model-dropdown"
-                            items={[
-                                { value: "Select a provider...", content: "Select a provider..." },
-                                ...[...modelsCodeData]
-                                    .sort((a, b) => (b.symbol === GET_DEFAULT_MODEL_PROVIDER ? 1 : 0) - (a.symbol === GET_DEFAULT_MODEL_PROVIDER ? 1 : 0))
-                                    .map((model) => ({
-                                        value: getProviderName(model),
-                                        content: model.symbol === GET_DEFAULT_MODEL_PROVIDER ? WSO2_MODEL_PROVIDER : getProviderName(model, true)
-                                    })),
-                            ]}
-                            label="Select Model Provider"
-                            description={"Available Providers"}
-                            onValueChange={(value) => {
-                                if (value === "Select a provider...") {
-                                    return; // Skip the init option
-                                }
-                                const selectedModelCodeData = modelsCodeData.find((model) => getProviderName(model) === value);
-                                console.log("Selected Model Code Data: ", selectedModelCodeData);
-                                setSelectedModelCodeData(selectedModelCodeData);
-                                fetchModelNodeTemplate(selectedModelCodeData);
-                            }}
-                            value={
-                                selectedModelCodeData
-                                    ? getProviderName(selectedModelCodeData)
-                                    : ((agentCallNode?.metadata.data as NodeMetadata)?.model?.type as string)
-                            }
-                            containerSx={{ width: "100%" }}
-                        />
-                    </Row>
-                    {selectedModelCodeData?.symbol === GET_DEFAULT_MODEL_PROVIDER && (
-                        <Row>
-                            <InfoBox>
-                                <div className="command-wrapper">
-                                    <span>
-                                        Using the default WSO2 Model Provider will automatically add the necessary configuration values to <strong>Config.toml</strong>.
-                                    </span>
-                                </div>
-                                <div className="description">
-                                    This can also be done using the VSCode command palette command: <br />
-                                    <CodeBlock>
-                                        {">"} Ballerina: Configure default WSO2 model provider
-                                    </CodeBlock>
-                                </div>
-                            </InfoBox>
-                        </Row>
-                    )}
-                </>
-            )}
-            {loading && (
-                <LoaderContainer>
-                    <RelativeLoader />
-                </LoaderContainer>
-            )}
-            {!loading && selectedModelFields?.length > 0 && selectedModel?.codedata?.lineRange && (
-                <ConfigForm
-                    fileName={agentFilePath.current}
-                    formFields={selectedModelFields}
-                    targetLineRange={selectedModel?.codedata.lineRange}
-                    onSubmit={handleOnSave}
-                    disableSaveButton={savingForm}
-                    isSaving={savingForm}
-                />
-            )}
-        </Container>
-    );
-}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/NewAgent.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/NewAgent.tsx
index e0c11fd5d7c..b6a4c21f41f 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/NewAgent.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/NewAgent.tsx
@@ -18,11 +18,10 @@
 
 import { useEffect, useRef, useState } from "react";
 import styled from "@emotion/styled";
-import { FlowNode, LinePosition, LineRange, NodeProperties } from "@wso2/ballerina-core";
+import { AvailableNode, FlowNode, LineRange, NodeProperties } from "@wso2/ballerina-core";
 import { FormField, FormValues } from "@wso2/ballerina-side-panel";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
 import { convertConfig } from "../../../utils/bi";
-import { URI, Utils } from "vscode-uri";
 import ConfigForm from "./ConfigForm";
 import { cloneDeep } from "lodash";
 import { RelativeLoader } from "../../../components/RelativeLoader";
@@ -54,17 +53,13 @@ export function NewAgent(props: NewAgentProps): JSX.Element {
     const { rpcClient } = useRpcContext();
 
     const [agentNode, setAgentNode] = useState<FlowNode | null>(null);
-    const [defaultModelNode, setDefaultModelNode] = useState<FlowNode | null>(null);
     const [formFields, setFormFields] = useState<FormField[]>([]);
 
     const [loading, setLoading] = useState<boolean>(false);
     const [savingForm, setSavingForm] = useState<boolean>(false);
 
-    const agentFilePath = useRef<string>("");
-    const mainFilePath = useRef<string>("");
+    const projectPath = useRef<string>("");
     const aiModuleOrg = useRef<string>("");
-    const agentCallEndOfFile = useRef<LinePosition | null>(null);
-    const agentEndOfFile = useRef<LinePosition | null>(null);
 
     useEffect(() => {
         initPanel();
@@ -72,64 +67,40 @@ export function NewAgent(props: NewAgentProps): JSX.Element {
 
     const initPanel = async () => {
         setLoading(true);
-        // get agent file path
+        // get project path
         const filePath = await rpcClient.getVisualizerLocation();
-        agentFilePath.current = await rpcClient.getVisualizerRpcClient().joinProjectPath("agents.bal");
-        // get main file path
-        mainFilePath.current = Utils.joinPath(URI.file(filePath.projectUri), "main.bal").fsPath;
+        projectPath.current = filePath.projectUri;
         // get agent org
         aiModuleOrg.current = await getAiModuleOrg(rpcClient);
         // fetch agent node
         await fetchAgentNode();
-        // get end of files
-        // main.bal last line
-        const endOfFile = await rpcClient.getBIDiagramRpcClient().getEndOfFile({ filePath: fileName });
-        console.log(">>> endOfFile", endOfFile);
-        agentCallEndOfFile.current = endOfFile;
-        // agent.bal file last line
-        const endOfAgentFile = await rpcClient
-            .getBIDiagramRpcClient()
-            .getEndOfFile({ filePath: agentFilePath.current });
-        console.log(">>> endOfAgentFile", endOfAgentFile);
-        agentEndOfFile.current = endOfAgentFile;
     };
 
     useEffect(() => {
-        if (agentNode && defaultModelNode) {
+        if (agentNode) {
             configureFormFields();
             setLoading(false);
         }
-    }, [agentNode, defaultModelNode]);
+    }, [agentNode]);
 
     const fetchAgentNode = async () => {
-        // get the agent node
-        const allAgents = await rpcClient.getAIAgentRpcClient().getAllAgents({ filePath: agentFilePath.current, orgName: aiModuleOrg.current });
-        console.log(">>> allAgents", allAgents);
-        if (!allAgents.agents.length) {
+        // Search for agent node using search API
+        const agentSearchResponse = await rpcClient.getBIDiagramRpcClient().search({
+            filePath: projectPath.current,
+            queryMap: { orgName: aiModuleOrg.current },
+            searchKind: "AGENT"
+        });
+        console.log(">>> agentSearchResponse", agentSearchResponse);
+
+        // Validate search response structure
+        if (!agentSearchResponse?.categories?.[0]?.items?.length) {
             console.log(">>> no agents found");
             return;
         }
-        const agentCodeData = allAgents.agents.at(0);
+        const agentCodeData = (agentSearchResponse.categories[0].items[0] as AvailableNode).codedata;
         // get agent node template
-        const agentNodeTemplate = await getNodeTemplate(rpcClient, agentCodeData, agentFilePath.current);
+        const agentNodeTemplate = await getNodeTemplate(rpcClient, agentCodeData, projectPath.current);
         setAgentNode(agentNodeTemplate);
-
-        // get all llm models
-        const allModels = await rpcClient
-            .getAIAgentRpcClient()
-            .getAllModels({ agent: agentCodeData.object, filePath: agentFilePath.current, orgName: aiModuleOrg.current });
-        console.log(">>> allModels", allModels);
-        // get openai model
-        const defaultModel = allModels.models.find((model) => model.object === "OpenAiProvider" || (model.org === BALLERINA && model.module === AI));
-        if (!defaultModel) {
-            console.log(">>> no default model found");
-            return;
-        }
-        // get model node template
-        const modelNodeTemplate = await getNodeTemplate(rpcClient, defaultModel, agentFilePath.current);
-        setDefaultModelNode(modelNodeTemplate);
-
-        // get agent call node template
     };
 
     const configureFormFields = () => {
@@ -231,16 +202,33 @@ export function NewAgent(props: NewAgentProps): JSX.Element {
         console.log(">>> save value", { data, rawData });
         setSavingForm(true);
 
+        // Search for model providers using search API
+        const modelProviderSearchResponse = await rpcClient.getBIDiagramRpcClient().search({
+            filePath: projectPath.current,
+            queryMap: { q: aiModuleOrg.current === BALLERINA ? "ai" : "OpenAiProvider" },
+            searchKind: aiModuleOrg.current === BALLERINA ? "MODEL_PROVIDER" : "CLASS_INIT"
+        });
+        console.log(">>> modelProviderSearchResponse", modelProviderSearchResponse);
+
+        const modelNodes = modelProviderSearchResponse.categories[0].items as AvailableNode[];
+        // get openai model
+        const defaultModelNode = modelNodes.find((model) =>
+            model.codedata.object === "OpenAiProvider" || (model.codedata.org === BALLERINA && model.codedata.module === AI)
+        );
+        const defaultModel = defaultModelNode?.codedata;
+        if (!defaultModel) {
+            console.log(">>> no default model found");
+            return;
+        }
+        // get model node template
+        const defaultModelNodeTemplate = await getNodeTemplate(rpcClient, defaultModel, projectPath.current);
+
         // save model node
         const modelResponse = await rpcClient
             .getBIDiagramRpcClient()
-            .getSourceCode({ filePath: agentFilePath.current, flowNode: defaultModelNode });
+            .getSourceCode({ filePath: projectPath.current, flowNode: defaultModelNodeTemplate });
         console.log(">>> modelResponse getSourceCode", { modelResponse });
-        const modelVarName = defaultModelNode.properties.variable.value as string;
-
-        // wait 2 seconds (wait until LS is updated)
-        console.log(">>> wait 2 seconds");
-        await new Promise((resolve) => setTimeout(resolve, 2000));
+        const modelVarName = defaultModelNodeTemplate.properties.variable.value as string;
 
         // save the agent node
         const updatedAgentNode = cloneDeep(agentNode);
@@ -258,14 +246,10 @@ export function NewAgent(props: NewAgentProps): JSX.Element {
 
         const agentResponse = await rpcClient
             .getBIDiagramRpcClient()
-            .getSourceCode({ filePath: agentFilePath.current, flowNode: updatedAgentNode });
+            .getSourceCode({ filePath: projectPath.current, flowNode: updatedAgentNode });
         console.log(">>> agentResponse getSourceCode", { agentResponse });
         const agentVarName = agentNode.properties.variable.value as string;
 
-        // wait 2 seconds (wait until LS is updated)
-        console.log(">>> wait 2 seconds");
-        await new Promise((resolve) => setTimeout(resolve, 2000));
-
         // update the agent call node
         const updatedAgentCallNode = cloneDeep(agentCallNode);
         updatedAgentCallNode.properties.variable.value = rawData["variable"];
@@ -303,7 +287,7 @@ export function NewAgent(props: NewAgentProps): JSX.Element {
             )}
             {!loading && (
                 <ConfigForm
-                    fileName={mainFilePath.current}
+                    fileName={projectPath.current}
                     isSaving={savingForm}
                     formFields={formFields}
                     targetLineRange={{
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/utils.ts b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/utils.ts
index b7daf411c67..ffd17f11bd1 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/utils.ts
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/AIChatAgent/utils.ts
@@ -16,10 +16,11 @@
  * under the License.
  */
 
-import { BINodeTemplateRequest, CodeData, FlowNode, LinePosition, ValueTypeConstraint } from "@wso2/ballerina-core";
+import { CodeData, FlowNode, LinePosition, NodeKind } from "@wso2/ballerina-core";
 import { BallerinaRpcClient } from "@wso2/ballerina-rpc-client";
 import { cloneDeep } from "lodash";
 import { URI, Utils } from "vscode-uri";
+import { BALLERINA } from "../../../constants";
 
 export const getNodeTemplate = async (
     rpcClient: BallerinaRpcClient,
@@ -36,7 +37,8 @@ export const getNodeTemplate = async (
     return response?.flowNode;
 };
 
-export const getAiModuleOrg = async (rpcClient: BallerinaRpcClient) => {
+export const getAiModuleOrg = async (rpcClient: BallerinaRpcClient, nodeKind?: NodeKind) => {
+    if (nodeKind && (nodeKind === "NP_FUNCTION" || nodeKind === "NP_FUNCTION_DEFINITION")) return BALLERINA;
     const filePath = await rpcClient.getVisualizerLocation();
     const aiModuleOrgResponse = await rpcClient
         .getAIAgentRpcClient()
@@ -46,8 +48,6 @@ export const getAiModuleOrg = async (rpcClient: BallerinaRpcClient) => {
 }
 
 export const getAgentFilePath = async (rpcClient: BallerinaRpcClient) => {
-    // Get the agent file path and update the node
-    const filePath = await rpcClient.getVisualizerLocation();
     // Create the agent file path
     const agentFilePath = await rpcClient.getVisualizerRpcClient().joinProjectPath("agents.bal");
     return agentFilePath;
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Configurables/ViewConfigurableVariables/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Configurables/ViewConfigurableVariables/index.tsx
index 2ed07dace3b..804863e6ace 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Configurables/ViewConfigurableVariables/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Configurables/ViewConfigurableVariables/index.tsx
@@ -55,20 +55,6 @@ const Description = styled(Typography)`
     color: var(--vscode-descriptionForeground);
 `;
 
-const ButtonWrapper = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: row;
-    font-size: 10px;
-    width: auto;
-    margin-left: 15px;
-`;
-
-const ConfigValueField = styled.div`
-    display: flex;
-`;
-
 const TitleBoxShadow = styled.div`
     box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;
     height: 3px;
@@ -88,17 +74,6 @@ const SearchContainer = styled.div`
     gap: 40px;
 `;
 
-const ConfigNameTitle = styled.div`
-    font-size: 13px;
-    font-weight: 700;
-    height: 20px;
-    color: var(--vscode-settings-headerForeground);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 5px;
-`;
-
 const searchIcon = (<Codicon name="search" sx={{ cursor: "auto" }} />);
 
 export interface ConfigProps {
@@ -297,7 +272,10 @@ export function ViewConfigurableVariables(props?: ConfigProps) {
 
         await rpcClient
             .getBIDiagramRpcClient()
-            .getConfigVariablesV2()
+            .getConfigVariablesV2({
+                includeLibraries: false,
+                projectPath: ''
+            })
             .then((variables) => {
                 data = (variables as any).configVariables;
                 errorMsg = (variables as any).errorMsg;
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/AddConnectionWizard/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/AddConnectionWizard/index.tsx
index 4f0b8dbd0de..e04f50bdd1e 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/AddConnectionWizard/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/AddConnectionWizard/index.tsx
@@ -20,11 +20,13 @@ import { useEffect, useRef, useState } from "react";
 import styled from "@emotion/styled";
 import {
     AvailableNode,
+    DIRECTORY_MAP,
     EVENT_TYPE,
     FlowNode,
     LinePosition,
     LineRange,
     MACHINE_VIEW,
+    ParentPopupData,
     RunExternalCommandResponse,
     SubPanel,
     SubPanelView,
@@ -35,6 +37,7 @@ import ConnectionConfigView from "../ConnectionConfigView";
 import { getFormProperties } from "../../../../utils/bi";
 import { ExpressionFormField, FormField, FormValues, PanelContainer } from "@wso2/ballerina-side-panel";
 import { Icon, Overlay, ThemeColors, Typography } from "@wso2/ui-toolkit";
+import { RelativeLoader } from "../../../../components/RelativeLoader";
 import { HelperView } from "../../HelperView";
 import { BodyText } from "../../../styles";
 import { DownloadIcon } from "../../../../components/DownloadIcon";
@@ -46,11 +49,23 @@ const Container = styled.div`
     justify-content: center;
 `;
 
+const PopupContainer = styled.div`
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80%;
+    height: 80%;
+    z-index: 2000;
+    background-color: ${ThemeColors.SURFACE_BRIGHT};
+    border-radius: 20px;
+    overflow: hidden;
+`;
+
 const StatusCard = styled.div`
     margin: 16px 16px 0 16px;
     padding: 16px;
     border-radius: 8px;
-    background: ${ThemeColors.SURFACE_DIM_2};
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -62,6 +77,13 @@ const StatusCard = styled.div`
     }
 `;
 
+const StatusContainer = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+`;
+
 const StatusText = styled(Typography)`
     color: ${ThemeColors.ON_SURFACE};
 `;
@@ -73,9 +95,9 @@ enum WizardStep {
 }
 
 enum PullingStatus {
+    FETCHING = "fetching",
     PULLING = "pulling",
     SUCCESS = "success",
-    EXISTS = "exists",
     ERROR = "error",
 }
 
@@ -88,15 +110,17 @@ enum SavingFormStatus {
 interface AddConnectionWizardProps {
     fileName: string; // file path of `connection.bal`
     target?: LinePosition;
-    onClose?: () => void;
+    onClose?: (parent?: ParentPopupData) => void;
+    isPopupScreen?: boolean;
+    openCustomConnectorView?: boolean;
 }
 
 export function AddConnectionWizard(props: AddConnectionWizardProps) {
-    const { fileName, target, onClose } = props;
+    const { fileName, target, onClose, isPopupScreen, openCustomConnectorView } = props;
     const { rpcClient } = useRpcContext();
 
     const [currentStep, setCurrentStep] = useState<WizardStep>(WizardStep.CONNECTOR_LIST);
-    const [pullingStatus, setPullingStatus] = useState<PullingStatus>(undefined);
+    const [pullingStatus, setPullingStatus] = useState<PullingStatus>(PullingStatus.FETCHING);
     const [savingFormStatus, setSavingFormStatus] = useState<SavingFormStatus>(undefined);
     const selectedConnectorRef = useRef<AvailableNode>();
     const selectedNodeRef = useRef<FlowNode>();
@@ -137,15 +161,49 @@ export function AddConnectionWizard(props: AddConnectionWizardProps) {
             return;
         }
         selectedConnectorRef.current = connector;
-        setFetchingInfo(true);
+        setCurrentStep(WizardStep.CONNECTION_CONFIG);
 
         try {
-            const response = await rpcClient.getBIDiagramRpcClient().getNodeTemplate({
+            let timer: ReturnType<typeof setTimeout> | null = null;
+            let didTimeout = false;
+
+            // Set status to FETCHING before starting
+            setPullingStatus(PullingStatus.FETCHING);
+            selectedNodeRef.current = undefined;
+
+            // Start a timer for 3 seconds
+            const timeoutPromise = new Promise<void>((resolve) => {
+                timer = setTimeout(() => {
+                    didTimeout = true;
+                    setPullingStatus(PullingStatus.PULLING);
+                    resolve();
+                }, 3000);
+            });
+
+            // Start the request
+            const nodeTemplatePromise = rpcClient.getBIDiagramRpcClient().getNodeTemplate({
                 position: target || null,
                 filePath: fileName,
                 id: connector.codedata,
             });
 
+            // Wait for either the timer or the request to finish
+            const response = await Promise.race([
+                nodeTemplatePromise.then((res) => {
+                    if (timer) {
+                        clearTimeout(timer);
+                        timer = null;
+                    }
+                    return res;
+                }),
+                timeoutPromise.then(() => nodeTemplatePromise)
+            ]);
+
+            if (didTimeout) {
+                // If it timed out, set status to SUCCESS
+                setPullingStatus(PullingStatus.SUCCESS);
+            }
+
             console.log(">>> FlowNode template", response);
             selectedNodeRef.current = response.flowNode;
             const formProperties = getFormProperties(response.flowNode);
@@ -156,12 +214,14 @@ export function AddConnectionWizard(props: AddConnectionWizardProps) {
                 handleOnFormSubmit(response.flowNode);
                 return;
             }
-
-            // get node properties
-            setCurrentStep(WizardStep.CONNECTION_CONFIG);
-            // Start pulling connector after transitioning to config step
+        } catch (error) {
+            console.error(">>> Error selecting connector", error);
+            setPullingStatus(PullingStatus.ERROR);
         } finally {
-            setFetchingInfo(false);
+            // After few seconds, set status to undefined
+            setTimeout(() => {
+                setPullingStatus(undefined);
+            }, 2000);
         }
     };
 
@@ -208,7 +268,8 @@ export function AddConnectionWizard(props: AddConnectionWizardProps) {
                         // clear memory
                         selectedNodeRef.current = undefined;
                         setSavingFormStatus(SavingFormStatus.SUCCESS);
-                        onClose ? onClose() : gotoHome();
+                        const newConnection = response.artifacts.find((artifact) => artifact.isNew);
+                        onClose ? onClose({ recentIdentifier: newConnection.name, artifactType: DIRECTORY_MAP.CONNECTION }) : gotoHome();
                     } else {
                         console.error(">>> Error updating source code", response);
                         setSavingFormStatus(SavingFormStatus.ERROR);
@@ -243,7 +304,7 @@ export function AddConnectionWizard(props: AddConnectionWizardProps) {
     };
 
     const handleOnBack = () => {
-        setCurrentStep(WizardStep.CONNECTOR_LIST);
+        isPopupScreen ? onClose() : setCurrentStep(WizardStep.CONNECTOR_LIST);
     };
 
     const handleSubPanel = (subPanel: SubPanel) => {
@@ -287,87 +348,92 @@ export function AddConnectionWizard(props: AddConnectionWizardProps) {
 
     return (
         <Container>
-            <>
+            {!isPopupScreen ? (
                 <ConnectorView
                     key={connectorsViewKey}
                     fileName={fileName}
                     targetLinePosition={target}
                     onSelectConnector={handleOnSelectConnector}
                     onAddGeneratedConnector={handleOnAddGeneratedConnector}
-                    fetchingInfo={fetchingInfo}
                     onClose={onClose}
+                    openCustomConnectorView={openCustomConnectorView}
                 />
-                {(currentStep === WizardStep.CONNECTION_CONFIG || currentStep === WizardStep.GENERATE_CONNECTOR) && (
-                    <Overlay sx={{ background: `${ThemeColors.SURFACE_CONTAINER}`, opacity: `0.3`, zIndex: 2000 }} />
-                )}
-            </>
-            {!fetchingInfo && currentStep === WizardStep.CONNECTION_CONFIG && (
+            ) : (currentStep === WizardStep.CONNECTOR_LIST) && (
+                <>
+                    <Overlay sx={{ background: `${ThemeColors.SURFACE_CONTAINER}`, opacity: `0.5`, zIndex: 1999 }} />
+                    <PopupContainer>
+                        <ConnectorView
+                            key={connectorsViewKey}
+                            fileName={fileName}
+                            targetLinePosition={target}
+                            onSelectConnector={handleOnSelectConnector}
+                            onAddGeneratedConnector={handleOnAddGeneratedConnector}
+                            onClose={onClose}
+                        />
+                    </PopupContainer>
+                </>
+            )}
+            {(currentStep === WizardStep.CONNECTION_CONFIG || currentStep === WizardStep.GENERATE_CONNECTOR) && (
+                <Overlay sx={{ background: `${ThemeColors.SURFACE_CONTAINER}`, opacity: `0.3`, zIndex: 2000 }} />
+            )}
+            {currentStep === WizardStep.CONNECTION_CONFIG && (
                 <PanelContainer
                     show={true}
                     title={`Configure the ${selectedConnectorRef.current?.metadata.label || ""} Connector`}
                     onClose={onClose ? onClose : handleOnBack}
                     width={400}
-                    subPanelWidth={subPanel?.view === SubPanelView.INLINE_DATA_MAPPER ? 800 : 400}
+                    subPanelWidth={400}
                     subPanel={findSubPanelComponent(subPanel)}
                     onBack={handleOnBack}
                 >
                     <>
-                        {pullingStatus === PullingStatus.PULLING && (
-                            <StatusCard>
-                                <DownloadIcon color={ThemeColors.ON_SURFACE} />
-                                <StatusText variant="body2">
-                                    Please wait while the connector package is being pulled...
-                                </StatusText>
-                            </StatusCard>
-                        )}
-                        {pullingStatus === PullingStatus.EXISTS && (
-                            <StatusCard>
-                                <Icon name="bi-success" sx={{ color: ThemeColors.ON_SURFACE, fontSize: "18px" }} />
-                                <StatusText variant="body2">
-                                    Connector module already pulled. Please continue with the configuration.
-                                </StatusText>
-                            </StatusCard>
-                        )}
-                        {pullingStatus === PullingStatus.SUCCESS && (
-                            <StatusCard>
-                                <Icon name="bi-success" sx={{ color: ThemeColors.PRIMARY, fontSize: "18px" }} />
-                                <StatusText variant="body2">Connector module pulled successfully.</StatusText>
-                            </StatusCard>
-                        )}
-                        {pullingStatus === PullingStatus.ERROR && (
-                            <StatusCard>
-                                <Icon name="bi-error" sx={{ color: ThemeColors.ERROR, fontSize: "18px" }} />
-                                <StatusText variant="body2">
-                                    Failed to pull the connector module. Please try again.
-                                </StatusText>
-                            </StatusCard>
+                        {pullingStatus && (
+                            <StatusContainer>
+                                {pullingStatus === PullingStatus.FETCHING && (
+                                    <RelativeLoader message="Loading connector package..." />
+                                )}
+                                {pullingStatus === PullingStatus.PULLING && (
+                                    <StatusCard>
+                                        <DownloadIcon color={ThemeColors.ON_SURFACE} />
+                                        <StatusText variant="body2">
+                                            Please wait while the connector package is being pulled...
+                                        </StatusText>
+                                    </StatusCard>
+                                )}
+                                {pullingStatus === PullingStatus.SUCCESS && (
+                                    <StatusCard>
+                                        <Icon name="bi-success" sx={{ color: ThemeColors.PRIMARY, fontSize: "18px" }} />
+                                        <StatusText variant="body2">Connector package pulled successfully.</StatusText>
+                                    </StatusCard>
+                                )}
+                                {pullingStatus === PullingStatus.ERROR && (
+                                    <StatusCard>
+                                        <Icon name="bi-error" sx={{ color: ThemeColors.ERROR, fontSize: "18px" }} />
+                                        <StatusText variant="body2">
+                                            Failed to pull the connector package. Please try again.
+                                        </StatusText>
+                                    </StatusCard>
+                                )}
+                            </StatusContainer>
                         )}
-
-                        <BodyText style={{ padding: "20px 16px 0 16px" }}>
-                            Provide the necessary configuration details for the selected connector to complete the
-                            setup.
-                        </BodyText>
-                        <ConnectionConfigView
-                            fileName={fileName}
-                            submitText={savingFormStatus === SavingFormStatus.SAVING ? "Creating..." : "Create"}
-                            isSaving={savingFormStatus === SavingFormStatus.SAVING}
-                            selectedNode={selectedNodeRef.current}
-                            onSubmit={handleOnFormSubmit}
-                            updatedExpressionField={updatedExpressionField}
-                            resetUpdatedExpressionField={handleResetUpdatedExpressionField}
-                            openSubPanel={handleSubPanel}
-                            isPullingConnector={
-                                pullingStatus === PullingStatus.PULLING || savingFormStatus === SavingFormStatus.SAVING
-                            }
-                        />
-                        {savingFormStatus === SavingFormStatus.SAVING && (
-                            <BodyText style={{ padding: "20px 20px 0 20px" }}>Saving connection ...</BodyText>
-                        )}
-                        {savingFormStatus === SavingFormStatus.SUCCESS && (
-                            <BodyText style={{ padding: "20px 20px 0 20px" }}>Connection saved successfully.</BodyText>
-                        )}
-                        {savingFormStatus === SavingFormStatus.ERROR && (
-                            <BodyText style={{ padding: "20px 20px 0 20px" }}>Error saving connection.</BodyText>
+                        {!pullingStatus && selectedNodeRef.current && (
+                            <>
+                                <BodyText style={{ padding: "20px 16px 0 16px" }}>
+                                    Provide the necessary configuration details for the selected connector to complete the
+                                    setup.
+                                </BodyText>
+                                <ConnectionConfigView
+                                    fileName={fileName}
+                                    submitText={savingFormStatus === SavingFormStatus.SAVING ? "Creating..." : "Create"}
+                                    isSaving={savingFormStatus === SavingFormStatus.SAVING}
+                                    selectedNode={selectedNodeRef.current}
+                                    onSubmit={handleOnFormSubmit}
+                                    updatedExpressionField={updatedExpressionField}
+                                    resetUpdatedExpressionField={handleResetUpdatedExpressionField}
+                                    openSubPanel={handleSubPanel}
+                                    isPullingConnector={savingFormStatus === SavingFormStatus.SAVING}
+                                />
+                            </>
                         )}
                     </>
                 </PanelContainer>
@@ -405,31 +471,8 @@ export function AddConnectionWizard(props: AddConnectionWizardProps) {
                     </>
                 </PanelContainer>
             )}
-        </Container>
+        </Container >
     );
 }
 
 export default AddConnectionWizard;
-
-// TODO: remove this logic once module pull supported from LS
-export function isConnectorDependOnDriver(connectorModule: string): boolean {
-    const dbConnectors = ["mysql", "mssql", "postgresql", "oracledb", "cdata.connect", "snowflake"];
-    if (dbConnectors.includes(connectorModule)) {
-        return true;
-    }
-    return false;
-}
-
-// run command message handler
-export function handleRunCommandResponse(response: RunExternalCommandResponse): PullingStatus {
-    if (response.message.includes("Package already exists")) {
-        return PullingStatus.EXISTS;
-    }
-    if (response.message.includes("pulled from central successfully")) {
-        return PullingStatus.SUCCESS;
-    }
-    if (!response.error) {
-        return PullingStatus.SUCCESS;
-    }
-    return PullingStatus.ERROR;
-}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/ConnectionConfigView/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/ConnectionConfigView/index.tsx
index e4b988052ae..9b68166967b 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/ConnectionConfigView/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/ConnectionConfigView/index.tsx
@@ -22,6 +22,8 @@ import { ExpressionFormField } from "@wso2/ballerina-side-panel";
 import { FlowNode, LineRange, SubPanel } from "@wso2/ballerina-core";
 import FormGenerator from "../../Forms/FormGenerator";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
+import { SidePanelView } from "../../FlowDiagram/PanelManager";
+import { ConnectionKind } from "../../../../components/ConnectionSelector";
 
 const Container = styled.div`
     max-width: 600px;
@@ -54,6 +56,7 @@ interface ConnectionConfigViewProps {
     resetUpdatedExpressionField?: () => void;
     isActiveSubPanel?: boolean;
     isPullingConnector?: boolean;
+    navigateToPanel?: (targetPanel: SidePanelView, connectionKind?: ConnectionKind) => void;
 }
 
 export function ConnectionConfigView(props: ConnectionConfigViewProps) {
@@ -67,6 +70,7 @@ export function ConnectionConfigView(props: ConnectionConfigViewProps) {
         isPullingConnector,
         submitText,
         isSaving,
+        navigateToPanel,
     } = props;
     const { rpcClient } = useRpcContext();
     const [targetLineRange, setTargetLineRange] = useState<LineRange>();
@@ -109,6 +113,7 @@ export function ConnectionConfigView(props: ConnectionConfigViewProps) {
                     updatedExpressionField={updatedExpressionField}
                     resetUpdatedExpressionField={resetUpdatedExpressionField}
                     disableSaveButton={isPullingConnector}
+                    navigateToPanel={navigateToPanel}
                 />
             )}
         </Container>
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/ConnectorView/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/ConnectorView/index.tsx
index 37d4c6e2af8..b7e04db9d39 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/ConnectorView/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/ConnectorView/index.tsx
@@ -20,7 +20,7 @@ import React, { useEffect, useState } from "react";
 import styled from "@emotion/styled";
 import { AvailableNode, Category, FlowNode, Item, LinePosition } from "@wso2/ballerina-core";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
-import { Button, Codicon, ProgressRing, SearchBox, Typography, View } from "@wso2/ui-toolkit";
+import { Button, Codicon, ProgressRing, SearchBox, SplitView, ThemeColors, TreeViewItem, Typography, View } from "@wso2/ui-toolkit";
 import { cloneDeep, debounce } from "lodash";
 import ButtonCard from "../../../../components/ButtonCard";
 import { BodyText, BodyTinyInfo, TopBar } from "../../../styles";
@@ -31,13 +31,17 @@ import { TopNavigationBar } from "../../../../components/TopNavigationBar";
 const ViewWrapper = styled.div<{ isHalfView?: boolean }>`
     display: flex;
     flex-direction: column;
-    height: ${(props: { isHalfView: boolean }) => (props.isHalfView ? "40vh" : "100vh")};
+    height: ${(props: { isHalfView: boolean }) => (props.isHalfView ? "40vh" : "100%")};
     width: 100%;
 `;
 
 const Container = styled.div`
     padding: 0 20px;
     width: 100%;
+    height: 100%;
+    padding-bottom: 20px;
+    display: flex;
+    flex-direction: column;
 `;
 
 const ListContainer = styled.div<{ isHalfView?: boolean }>`
@@ -45,6 +49,7 @@ const ListContainer = styled.div<{ isHalfView?: boolean }>`
     flex-direction: column;
     gap: 8px;
     margin-top: 16px;
+    margin-left: 20px;
     height: ${(props: { isHalfView: boolean }) => (props.isHalfView ? "30vh" : "calc(100vh - 200px)")};
     overflow-y: scroll;
 `;
@@ -73,6 +78,15 @@ const LabelRow = styled.div`
     width: 100%;
 `;
 
+const TreeViewItemContent = styled.div<{ isLoading: boolean }>`
+    display: flex;
+    align-items: center;
+    height: 20px;
+    opacity: ${(props: { isLoading: boolean }) => props.isLoading ? 0.5 : 1};
+    cursor: ${(props: { isLoading: boolean }) => props.isLoading ? 'not-allowed' : 'pointer'};
+    pointer-events: ${(props: { isLoading: boolean }) => props.isLoading ? 'none' : 'auto'};
+`;
+
 const StyledSearchInput = styled(SearchBox)`
     height: 30px;
 `;
@@ -82,9 +96,9 @@ interface ConnectorViewProps {
     targetLinePosition: LinePosition;
     onSelectConnector: (connector: AvailableNode) => void;
     onAddGeneratedConnector: () => void;
-    fetchingInfo: boolean;
     onClose?: () => void;
     hideTitle?: boolean;
+    openCustomConnectorView?: boolean;
 }
 
 export function ConnectorView(props: ConnectorViewProps) {
@@ -94,14 +108,18 @@ export function ConnectorView(props: ConnectorViewProps) {
         onSelectConnector,
         onAddGeneratedConnector,
         onClose,
-        fetchingInfo,
         hideTitle,
+        openCustomConnectorView,
     } = props;
     const { rpcClient } = useRpcContext();
 
     const [connectors, setConnectors] = useState<Category[]>([]);
     const [searchText, setSearchText] = useState<string>("");
     const [isSearching, setIsSearching] = useState(false);
+    const [fetchingInfo, setFetchingInfo] = useState(false);
+    const [selectedConnectorCategory, setSelectedConnectorCategory] = useState<string>(
+        openCustomConnectorView? "LocalConnectors" : "StandardLibrary"
+    );
 
     useEffect(() => {
         setIsSearching(true);
@@ -114,7 +132,8 @@ export function ConnectorView(props: ConnectorViewProps) {
         }
     });
 
-    const getConnectors = () => {
+    const getConnectors = (filter?: boolean) => {
+        setFetchingInfo(true);
         rpcClient
             .getBIDiagramRpcClient()
             .search({
@@ -123,8 +142,12 @@ export function ConnectorView(props: ConnectorViewProps) {
                     endLine: targetLinePosition,
                 },
                 filePath: fileName,
-                queryMap: { limit: 60 },
-                searchKind: "CONNECTOR",
+                queryMap: {
+                    limit: 60,
+                    filterByCurrentOrg:
+                        filter ?? false,
+                },
+                searchKind: "CONNECTOR"
             })
             .then(async (model) => {
                 console.log(">>> bi connectors", model);
@@ -134,6 +157,7 @@ export function ConnectorView(props: ConnectorViewProps) {
             })
             .finally(() => {
                 setIsSearching(false);
+                setFetchingInfo(false);
             });
     };
 
@@ -152,8 +176,14 @@ export function ConnectorView(props: ConnectorViewProps) {
                     endLine: targetLinePosition,
                 },
                 filePath: fileName,
-                queryMap: { q: text, limit: 60 },
-                searchKind: "CONNECTOR",
+                queryMap: {
+                    q: text,
+                    limit: 60,
+                    filterByCurrentOrg:
+                        selectedConnectorCategory === "CurrentOrg" ?
+                            true : false,
+                },
+                searchKind: "CONNECTOR"
             })
             .then(async (model) => {
                 console.log(">>> bi searched connectors", model);
@@ -171,6 +201,13 @@ export function ConnectorView(props: ConnectorViewProps) {
         setSearchText(text);
     };
 
+    const handleCategoryChange = (category: string) => {
+        if (category !== selectedConnectorCategory) {
+            setSelectedConnectorCategory(category);
+            getConnectors(category === "CurrentOrg" ? true : false);
+        }
+    };
+
     const filterItems = (items: Item[]): Item[] => {
         return items
             .map((item) => {
@@ -201,6 +238,12 @@ export function ConnectorView(props: ConnectorViewProps) {
         }
         category.items = filterItems(category.items);
         return category;
+    }).filter((category) => {
+        if (selectedConnectorCategory === "LocalConnectors") {
+            return category.metadata.label === "Local";
+        } else {
+            return category.metadata.label !== "Local";
+        }
     });
 
     async function filterCategories(categories: Category[]): Promise<Category[]> {
@@ -221,6 +264,13 @@ export function ConnectorView(props: ConnectorViewProps) {
         });
     }
 
+    const openLearnMoreURL = () => {
+        rpcClient.getCommonRpcClient().openExternalUrl({
+            url: 'https://ballerina.io/learn/publish-packages-to-ballerina-central/'
+        })
+    };
+
+
     const isFullView = onClose === undefined;
     const isLoading = isSearching || fetchingInfo;
 
@@ -257,116 +307,252 @@ export function ConnectorView(props: ConnectorViewProps) {
                         autoFocus={true}
                         onChange={handleOnSearch}
                         size={60}
-                        sx={{ width: "100%" }}
+                        sx={{ width: "100%", marginBottom: "10px" }}
                     />
                 </Row>
-                {isLoading && (
-                    <ListContainer>
-                        <div
-                            style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }}
+
+                <SplitView sx={{ height: "100%", overflow: "hidden" }} defaultWidths={[20, 80]}>
+                    <div style={{ marginTop: "24px", minWidth: "220px" }}>
+                        <TreeViewItem
+                            key={`StandardLibrary`}
+                            id={`StandardLibrary`}
+                            sx={{
+                                backgroundColor: 'transparent',
+                                height: '25px',
+                                border: selectedConnectorCategory === "StandardLibrary"
+                                    ? '1px solid var(--vscode-focusBorder)'
+                                    : 'none'
+                            }}
+                            selectedId={`StandardLibrary`}
                         >
-                            <ProgressRing />
-                        </div>
-                    </ListContainer>
-                )}
-                {!isLoading && filteredCategories && filteredCategories.length > 0 && (
+                            <TreeViewItemContent
+                                isLoading={isLoading}
+                                onClick={(e) => {
+                                    handleCategoryChange("StandardLibrary");
+                                }}
+                            >
+                                <Typography
+                                    variant="body3"
+                                    sx={{
+                                        fontWeight: selectedConnectorCategory === "StandardLibrary"
+                                            ? 'bold' : 'normal'
+                                    }}
+                                >
+                                    {'Standard Libraries'}
+                                </Typography>
+                            </TreeViewItemContent>
+                        </TreeViewItem>
+                        <TreeViewItem
+                            key={`CurrentOrg`}
+                            id={`CurrentOrg`}
+                            sx={{
+                                backgroundColor: 'transparent',
+                                height: '25px',
+                                border: selectedConnectorCategory === "CurrentOrg"
+                                    ? '1px solid var(--vscode-focusBorder)'
+                                    : 'none'
+                            }}
+                            selectedId={`CurrentOrg`}
+                        >
+                            <TreeViewItemContent
+                                isLoading={isLoading}
+                                onClick={(e) => {
+                                    handleCategoryChange("CurrentOrg");
+                                }}
+                            >
+                                <Typography
+                                    variant="body3"
+                                    sx={{
+                                        fontWeight: selectedConnectorCategory === "CurrentOrg"
+                                            ? 'bold' : 'normal'
+                                    }}
+                                >
+                                    {'Organization\'s Connectors'}
+                                </Typography>
+                            </TreeViewItemContent>
+                        </TreeViewItem>
+                        <TreeViewItem
+                            key={`LocalConnectors`}
+                            id={`LocalConnectors`}
+                            sx={{
+                                backgroundColor: 'transparent',
+                                height: '25px',
+                                border: selectedConnectorCategory === "LocalConnectors"
+                                    ? '1px solid var(--vscode-focusBorder)'
+                                    : 'none'
+                            }}
+                            selectedId={`LocalConnectors`}
+                        >
+                            <TreeViewItemContent
+                                isLoading={isLoading}
+                                onClick={(e) => {
+                                    handleCategoryChange("LocalConnectors");
+                                }}
+                            >
+                                <Typography
+                                    variant="body3"
+                                    sx={{
+                                        fontWeight: selectedConnectorCategory === "LocalConnectors"
+                                            ? 'bold' : 'normal'
+                                    }}
+                                >
+                                    {'Custom Connectors'}
+                                </Typography>
+                            </TreeViewItemContent>
+                        </TreeViewItem>
+                    </div>
                     <ListContainer isHalfView={hideTitle}>
+                        {selectedConnectorCategory === "CurrentOrg" && (
+                            <LabelRow>
+                                <Typography variant="h3">{'Organization\'s Connectors'}</Typography>
+                            </LabelRow>
+                        )}
+                        {isLoading && (
+                            <ListContainer>
+                                <div
+                                    style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }}
+                                >
+                                    <ProgressRing />
+                                </div>
+                            </ListContainer>
+                        )}
+                        {selectedConnectorCategory === "CurrentOrg" && filteredCategories.length === 0 && (
+                            <div style={{ display: "flex", flexDirection: "column", gap: 10, alignItems: "center", marginTop: '140px' }}>
+                                <BodyTinyInfo style={{ textAlign: "center" }}>
+                                    No connectors found in your organization. You can create and publish connectors to Ballerina Central.
+                                </BodyTinyInfo>
+                                <BodyTinyInfo style={{ textAlign: "center", color: 'var(--vscode-descriptionForeground)' }}>
+                                    Learn how to{' '}
+                                    <span
+                                        style={{
+                                            color: 'var(--vscode-textLink-foreground)',
+                                            cursor: 'pointer',
+                                            textDecoration: 'underline'
+                                        }}
+                                        onClick={() => {
+                                            openLearnMoreURL();
+                                        }}
+                                    >
+                                        publish packages to Ballerina Central
+                                    </span>
+                                </BodyTinyInfo>
+                            </div>
+                        )}
                         {/* Default connectors of LS is hardcoded and is sent with categories with item field */}
-                        {filteredCategories[0]?.items ? (
-                            filteredCategories.map((category, index) => {
-                                const isLocalConnectorCategory = category.metadata.label === "Local";
-                                const itemCount = category.items?.length || 0;
-                                const isLocalConnectorsEmpty = isLocalConnectorCategory && itemCount === 0;
-
-                                if (!isLocalConnectorCategory && (!category.items || category.items.length === 0)) {
-                                    return null;
-                                }
-
-                                return (
-                                    <div key={category.metadata.label + index}>
-                                        <LabelRow>
-                                            <Typography variant="h3">{category.metadata.label}</Typography>
-                                            {isLocalConnectorCategory && (
-                                                <Button
-                                                    appearance="icon"
-                                                    tooltip={"Add a Connector from OpenAPI"}
-                                                    onClick={onAddGeneratedConnector}
-                                                >
-                                                    <Codicon name="add" />
-                                                </Button>
-                                            )}
-                                        </LabelRow>
-                                        {isLocalConnectorsEmpty ? (
-                                            <BodyTinyInfo style={{ textAlign: "center" }}>
-                                                No local connectors found. You can create one by importing an OpenAPI
-                                                spec.
-                                            </BodyTinyInfo>
-                                        ) : (
-                                            <GridContainer isHalfView={hideTitle}>
-                                                {category.items?.map((connector, index) => {
-                                                    return (
-                                                        <ButtonCard
-                                                            id={`connector-${connector.metadata.label.replace(/[ .]/g, "-").toLowerCase()}`}
-                                                            key={connector.metadata.label + index}
-                                                            title={connector.metadata.label}
-                                                            description={
-                                                                (connector as AvailableNode).codedata.org +
-                                                                " / " +
-                                                                (connector as AvailableNode).codedata.module
-                                                            }
-                                                            truncate={true}
-                                                            icon={
-                                                                connector.metadata.icon ? (
-                                                                    <ConnectorIcon
-                                                                        url={connector.metadata.icon}
-                                                                    />
-                                                                ) : (
-                                                                    <Codicon name="package" />
-                                                                )
-                                                            }
-                                                            onClick={() => {
-                                                                onSelectConnector(connector as AvailableNode);
-                                                            }}
-                                                        />
-                                                    );
-                                                })}
-                                            </GridContainer>
-                                        )}
-                                    </div>
-                                );
-                            })
-                        ) : (
-                            <GridContainer isHalfView={hideTitle}>
-                                {connectors.map((item, index) => {
-                                    const connector = item as Item;
-                                    return (
-                                        <ButtonCard
-                                            id={`connector-${connector.metadata.label.replace(/[ .]/g, "-").toLowerCase()}`}
-                                            key={connector.metadata.label + index}
-                                            title={connector.metadata.label}
-                                            description={
-                                                (connector as AvailableNode).codedata.org +
-                                                " / " +
-                                                (connector as AvailableNode).codedata.module
-                                            }
-                                            icon={
-                                                connector.metadata.icon ? (
-                                                    <ConnectorIcon url={connector.metadata.icon} />
+                        {!isLoading && filteredCategories && filteredCategories.length > 0 && (
+                            <div>
+                                {filteredCategories[0]?.items ? (
+                                    filteredCategories.map((category, index) => {
+                                        const isLocalConnectorCategory = category.metadata.label === "Local";
+                                        const itemCount = category.items?.length || 0;
+                                        const isLocalConnectorsEmpty = isLocalConnectorCategory && itemCount === 0;
+                                        const label = category.metadata.label === "Local" ? "Custom Connectors" : category.metadata.label;
+
+                                        if (!isLocalConnectorCategory && (!category.items || category.items.length === 0)) {
+                                            return null;
+                                        }
+
+                                        return (
+                                            <div key={category.metadata.label + index}>
+                                                <LabelRow>
+                                                    <Typography variant="h3">{label}</Typography>
+                                                    {isLocalConnectorCategory && (
+                                                        <Button
+                                                            appearance="icon"
+                                                            tooltip={"Add a Connector from OpenAPI"}
+                                                            onClick={onAddGeneratedConnector}
+                                                        >
+                                                            <Codicon name="add" />
+                                                        </Button>
+                                                    )}
+                                                </LabelRow>
+                                                {isLocalConnectorsEmpty ? (
+                                                    <>
+                                                        <BodyTinyInfo>
+                                                            Generate connector using OpenAPI spec
+                                                        </BodyTinyInfo>
+                                                        <BodyTinyInfo style={{ fontSize: '12px', color: 'var(--vscode-descriptionForeground)' }}>
+                                                            Can’t find what you need in the standard connectors? Create a custom connector using an OpenAPI specification.
+                                                        </BodyTinyInfo>
+                                                        <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: '40px' }}>
+
+                                                            <Button
+                                                                sx={{ display: 'flex', justifySelf: 'flex-end' }}
+                                                                appearance="primary"
+                                                                onClick={onAddGeneratedConnector}
+                                                            >
+                                                                <Codicon name="add" sx={{ marginRight: 5 }} />
+                                                                Generate a connector
+                                                            </Button>
+                                                        </div>
+                                                    </>
                                                 ) : (
-                                                    <Codicon name="package" />
-                                                )
-                                            }
-                                            onClick={() => {
-                                                onSelectConnector(connector as AvailableNode);
-                                            }}
-                                        />
-                                    );
-                                })}
-                            </GridContainer>
+                                                    <GridContainer isHalfView={hideTitle}>
+                                                        {category.items?.map((connector, index) => {
+                                                            return (
+                                                                <ButtonCard
+                                                                    id={`connector-${connector.metadata.label.replace(/[ .]/g, "-").toLowerCase()}`}
+                                                                    key={connector.metadata.label + index}
+                                                                    title={connector.metadata.label}
+                                                                    description={
+                                                                        (connector as AvailableNode).codedata.org +
+                                                                        " / " +
+                                                                        (connector as AvailableNode).codedata.module
+                                                                    }
+                                                                    truncate={true}
+                                                                    icon={
+                                                                        connector.metadata.icon ? (
+                                                                            <ConnectorIcon
+                                                                                url={connector.metadata.icon}
+                                                                            />
+                                                                        ) : (
+                                                                            <Codicon name="package" />
+                                                                        )
+                                                                    }
+                                                                    onClick={() => {
+                                                                        onSelectConnector(connector as AvailableNode);
+                                                                    }}
+                                                                />
+                                                            );
+                                                        })}
+                                                    </GridContainer>
+                                                )}
+                                            </div>
+                                        );
+                                    })
+                                ) : (
+                                    <GridContainer isHalfView={hideTitle}>
+                                        {connectors.map((item, index) => {
+                                            const connector = item as Item;
+                                            return (
+                                                <ButtonCard
+                                                    id={`connector-${connector.metadata.label.replace(/[ .]/g, "-").toLowerCase()}`}
+                                                    key={connector.metadata.label + index}
+                                                    title={connector.metadata.label}
+                                                    description={
+                                                        (connector as AvailableNode).codedata.org +
+                                                        " / " +
+                                                        (connector as AvailableNode).codedata.module
+                                                    }
+                                                    icon={
+                                                        connector.metadata.icon ? (
+                                                            <ConnectorIcon url={connector.metadata.icon} />
+                                                        ) : (
+                                                            <Codicon name="package" />
+                                                        )
+                                                    }
+                                                    onClick={() => {
+                                                        onSelectConnector(connector as AvailableNode);
+                                                    }}
+                                                />
+                                            );
+                                        })}
+                                    </GridContainer>
+                                )}
+                            </div>
                         )}
                     </ListContainer>
-                )}
-                {!isSearching && connectors.length === 0 && <p>No connectors found</p>}
+                </SplitView>
             </Container>
         </ViewWrapper>
     );
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/EditConnectionWizard/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/EditConnectionWizard/index.tsx
index c5f99a4868b..4eb8afe443c 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/EditConnectionWizard/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Connection/EditConnectionWizard/index.tsx
@@ -25,7 +25,9 @@ import { getFormProperties } from "../../../../utils/bi";
 import { ExpressionFormField, PanelContainer } from "@wso2/ballerina-side-panel";
 import { ProgressRing, ThemeColors } from "@wso2/ui-toolkit";
 import { HelperView } from "../../HelperView";
-import { URI, Utils } from "vscode-uri";
+import { ConnectionKind, ConnectionSelectionList, ConnectionCreator } from "../../../../components/ConnectionSelector";
+import { SidePanelView } from "../../FlowDiagram/PanelManager";
+import { getNodeTemplateForConnection } from "../../FlowDiagram/utils";
 
 const Container = styled.div`
     width: 100%;
@@ -39,6 +41,13 @@ const SpinnerContainer = styled.div`
     height: 100%;
 `;
 
+// Navigation views for the wizard
+export enum WizardView {
+    CONNECTION_CONFIG = "CONNECTION_CONFIG",
+    CONNECTION_SELECT = "CONNECTION_SELECT",
+    CONNECTION_CREATE = "CONNECTION_CREATE"
+}
+
 interface EditConnectionWizardProps {
     projectUri: string;
     connectionName: string;
@@ -46,16 +55,20 @@ interface EditConnectionWizardProps {
 }
 
 export function EditConnectionWizard(props: EditConnectionWizardProps) {
-    const { projectUri, connectionName, onClose } = props;
+    const { connectionName, onClose } = props;
     const { rpcClient } = useRpcContext();
 
     const [connection, setConnection] = useState<FlowNode>();
     const [subPanel, setSubPanel] = useState<SubPanel>({ view: SubPanelView.UNDEFINED });
-    const [showSubPanel, setShowSubPanel] = useState(false);
     const [updatingContent, setUpdatingContent] = useState(false);
     const [filePath, setFilePath] = useState("");
     const [updatedExpressionField, setUpdatedExpressionField] = useState<ExpressionFormField>(undefined);
 
+    // Navigation state
+    const [currentView, setCurrentView] = useState<WizardView>(WizardView.CONNECTION_CONFIG);
+    const [selectedConnectionKind, setSelectedConnectionKind] = useState<ConnectionKind>();
+    const [nodeFormTemplate, setNodeFormTemplate] = useState<FlowNode>();
+
     useEffect(() => {
         rpcClient
             .getBIDiagramRpcClient()
@@ -131,7 +144,6 @@ export function EditConnectionWizard(props: EditConnectionWizardProps) {
     };
 
     const handleSubPanel = (subPanel: SubPanel) => {
-        setShowSubPanel(subPanel.view !== SubPanelView.UNDEFINED);
         setSubPanel(subPanel);
     };
 
@@ -161,6 +173,110 @@ export function EditConnectionWizard(props: EditConnectionWizardProps) {
         setUpdatedExpressionField(undefined);
     };
 
+    // Navigation handlers
+    const handleNavigateToPanel = async (targetPanel: SidePanelView, connectionKind?: ConnectionKind) => {
+        if (connectionKind) {
+            setSelectedConnectionKind(connectionKind);
+        }
+
+        switch (targetPanel) {
+            case SidePanelView.CONNECTION_SELECT:
+                setCurrentView(WizardView.CONNECTION_SELECT);
+                break;
+            case SidePanelView.CONNECTION_CREATE:
+                setCurrentView(WizardView.CONNECTION_CREATE);
+                break;
+            default:
+                setCurrentView(WizardView.CONNECTION_CONFIG);
+                break;
+        }
+    };
+
+    const handleSelectNewConnection = async (nodeId: string, metadata?: any) => {
+        try {
+            const { flowNode, connectionKind } = await getNodeTemplateForConnection(
+                nodeId,
+                metadata,
+                connection?.codedata?.lineRange,
+                filePath,
+                rpcClient
+            );
+
+            setNodeFormTemplate(flowNode);
+            setSelectedConnectionKind(connectionKind as ConnectionKind);
+            setCurrentView(WizardView.CONNECTION_CREATE);
+        } catch (error) {
+            console.error('Error getting node template for connection:', error);
+        }
+    };
+
+    const handleConnectionCreated = (connectionNode: FlowNode) => {
+        setCurrentView(WizardView.CONNECTION_CONFIG);
+    };
+
+    const handleBack = () => {
+        switch (currentView) {
+            case WizardView.CONNECTION_SELECT:
+                setCurrentView(WizardView.CONNECTION_CONFIG);
+                break;
+            case WizardView.CONNECTION_CREATE:
+                setCurrentView(WizardView.CONNECTION_SELECT);
+                break;
+            default:
+                onClose ? onClose() : gotoHome();
+                break;
+        }
+    };
+
+    const getViewTitle = () => {
+        switch (currentView) {
+            case WizardView.CONNECTION_SELECT:
+                return `Select ${connection?.codedata?.module || ''} Connection`;
+            case WizardView.CONNECTION_CREATE:
+                return `Create ${connection?.codedata?.module || ''} Connection`;
+            default:
+                return `Configure ${connection?.codedata?.module || ''} Connector`;
+        }
+    };
+
+    const renderCurrentView = () => {
+        switch (currentView) {
+            case WizardView.CONNECTION_SELECT:
+                return (
+                    <ConnectionSelectionList
+                        connectionKind={selectedConnectionKind}
+                        selectedNode={connection}
+                        onSelect={handleSelectNewConnection}
+                    />
+                );
+
+            case WizardView.CONNECTION_CREATE:
+                return (
+                    <ConnectionCreator
+                        connectionKind={selectedConnectionKind}
+                        selectedNode={connection}
+                        nodeFormTemplate={nodeFormTemplate}
+                        onSave={handleConnectionCreated}
+                    />
+                );
+
+            default:
+                return (
+                    <ConnectionConfigView
+                        submitText={updatingContent ? "Saving..." : "Save"}
+                        fileName={filePath}
+                        selectedNode={connection}
+                        onSubmit={handleOnFormSubmit}
+                        updatedExpressionField={updatedExpressionField}
+                        resetUpdatedExpressionField={handleResetUpdatedExpressionField}
+                        openSubPanel={handleSubPanel}
+                        isSaving={updatingContent}
+                        navigateToPanel={handleNavigateToPanel}
+                    />
+                );
+        }
+    };
+
     return (
         <Container>
             {!connection && (
@@ -171,23 +287,14 @@ export function EditConnectionWizard(props: EditConnectionWizardProps) {
             {connection && (
                 <PanelContainer
                     show={true}
-                    title={`Configure ${connection.codedata.module || ''} Connector`}
+                    title={getViewTitle()}
                     onClose={onClose ? onClose : gotoHome}
                     width={400}
-                    onBack={onClose ? onClose : gotoHome}
-                    subPanelWidth={subPanel?.view === SubPanelView.INLINE_DATA_MAPPER ? 800 : 400}
+                    onBack={handleBack}
+                    subPanelWidth={400}
                     subPanel={findSubPanelComponent(subPanel)}
                 >
-                    <ConnectionConfigView
-                        submitText={updatingContent ? "Saving..." : "Save"}
-                        fileName={filePath}
-                        selectedNode={connection}
-                        onSubmit={handleOnFormSubmit}
-                        updatedExpressionField={updatedExpressionField}
-                        resetUpdatedExpressionField={handleResetUpdatedExpressionField}
-                        openSubPanel={handleSubPanel}
-                        isSaving={updatingContent}
-                    />
+                    {renderCurrentView()}
                 </PanelContainer>
             )}
         </Container>
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/PanelManager.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/PanelManager.tsx
index 80fb85a018c..84e77cc91b3 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/PanelManager.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/PanelManager.tsx
@@ -29,16 +29,16 @@ import {
 import { HelperView } from "../HelperView";
 import FormGenerator from "../Forms/FormGenerator";
 import { getContainerTitle, getSubPanelWidth } from "../../../utils/bi";
-import { ModelConfig } from "../AIChatAgent/ModelConfig";
 import { ToolConfig } from "../AIChatAgent/ToolConfig";
 import { AgentConfig } from "../AIChatAgent/AgentConfig";
 import { NewAgent } from "../AIChatAgent/NewAgent";
 import { AddTool } from "../AIChatAgent/AddTool";
 import { AddMcpServer } from "../AIChatAgent/AddMcpServer";
-import { useEffect, useState } from "react";
 import { NewTool, NewToolSelectionMode } from "../AIChatAgent/NewTool";
 import styled from "@emotion/styled";
 import { MemoryManagerConfig } from "../AIChatAgent/MemoryManagerConfig";
+import { FormSubmitOptions } from ".";
+import { ConnectionConfig, ConnectionCreator, ConnectionSelectionList, ConnectionKind } from "../../../components/ConnectionSelector";
 
 const Container = styled.div`
     display: flex;
@@ -58,6 +58,10 @@ export enum SidePanelView {
     VECTOR_STORE_LIST = "VECTOR_STORE_LIST",
     EMBEDDING_PROVIDERS = "EMBEDDING_PROVIDERS",
     EMBEDDING_PROVIDER_LIST = "EMBEDDING_PROVIDER_LIST",
+    DATA_LOADERS = "DATA_LOADERS",
+    DATA_LOADER_LIST = "DATA_LOADER_LIST",
+    CHUNKERS = "CHUNKERS",
+    CHUNKER_LIST = "CHUNKER_LIST",
     VECTOR_KNOWLEDGE_BASE_LIST = "VECTOR_KNOWLEDGE_BASE_LIST",
     NEW_AGENT = "NEW_AGENT",
     ADD_TOOL = "ADD_TOOL",
@@ -67,7 +71,9 @@ export enum SidePanelView {
     ADD_MCP_SERVER = "ADD_MCP_SERVER",
     EDIT_MCP_SERVER = "EDIT_MCP_SERVER",
     AGENT_TOOL = "AGENT_TOOL",
-    AGENT_MODEL = "AGENT_MODEL",
+    CONNECTION_CONFIG = "CONNECTION_CONFIG",
+    CONNECTION_SELECT = "CONNECTION_SELECT",
+    CONNECTION_CREATE = "CONNECTION_CREATE",
     AGENT_MEMORY_MANAGER = "AGENT_MEMORY_MANAGER",
     AGENT_CONFIG = "AGENT_CONFIG",
 }
@@ -90,6 +96,7 @@ interface PanelManagerProps {
     showProgressIndicator?: boolean;
     canGoBack?: boolean;
     selectedMcpToolkitName?: string;
+    selectedConnectionKind?: ConnectionKind;
 
     // Action handlers
     onClose: () => void;
@@ -103,7 +110,9 @@ interface PanelManagerProps {
     onAddVectorStore?: () => void;
     onAddEmbeddingProvider?: () => void;
     onAddVectorKnowledgeBase?: () => void;
-    onSubmitForm: (updatedNode?: FlowNode, openInDataMapper?: boolean) => void;
+    onAddDataLoader?: () => void;
+    onAddChunker?: () => void;
+    onSubmitForm: (updatedNode?: FlowNode, openInDataMapper?: boolean, options?: FormSubmitOptions) => void;
     onDiscardSuggestions: () => void;
     onSubPanel: (subPanel: SubPanel) => void;
     onUpdateExpressionField: (updatedExpressionField: ExpressionFormField) => void;
@@ -114,7 +123,11 @@ interface PanelManagerProps {
     onSearchVectorStore?: (searchText: string, functionType: FUNCTION_TYPE) => void;
     onSearchEmbeddingProvider?: (searchText: string, functionType: FUNCTION_TYPE) => void;
     onSearchVectorKnowledgeBase?: (searchText: string, functionType: FUNCTION_TYPE) => void;
+    onSearchDataLoader?: (searchText: string, functionType: FUNCTION_TYPE) => void;
+    onSearchChunker?: (searchText: string, functionType: FUNCTION_TYPE) => void;
     onEditAgent?: () => void;
+    onNavigateToPanel?: (targetPanel: SidePanelView, connectionKind?: ConnectionKind) => void;
+    setSidePanelView: (view: SidePanelView) => void;
 
     // AI Agent handlers
     onSelectTool?: (tool: ToolData, node: FlowNode) => void;
@@ -122,6 +135,8 @@ interface PanelManagerProps {
     onDeleteTool?: (tool: ToolData, node: FlowNode) => void;
     onAddTool?: (node: FlowNode) => void;
     onAddMcpServer?: (node: FlowNode) => void;
+    onSelectNewConnection?: (nodeId: string, metadata?: any) => void;
+    onUpdateNodeWithConnection?: (selectedNode: FlowNode) => void;
 }
 
 export function PanelManager(props: PanelManagerProps) {
@@ -143,6 +158,8 @@ export function PanelManager(props: PanelManagerProps) {
         showProgressIndicator,
         canGoBack,
         selectedMcpToolkitName,
+        selectedConnectionKind,
+        setSidePanelView,
         onClose,
         onBack,
         onSelectNode,
@@ -154,6 +171,8 @@ export function PanelManager(props: PanelManagerProps) {
         onAddVectorStore,
         onAddEmbeddingProvider,
         onAddVectorKnowledgeBase,
+        onAddDataLoader,
+        onAddChunker,
         onSubmitForm,
         onDiscardSuggestions,
         onSubPanel,
@@ -164,40 +183,39 @@ export function PanelManager(props: PanelManagerProps) {
         onSearchVectorStore,
         onSearchEmbeddingProvider,
         onSearchVectorKnowledgeBase,
+        onSearchDataLoader,
+        onSearchChunker,
+        onSelectNewConnection,
+        onUpdateNodeWithConnection,
+        onNavigateToPanel,
     } = props;
 
-    const [panelView, setPanelView] = useState<SidePanelView>(sidePanelView);
-
-    useEffect(() => {
-        setPanelView(sidePanelView);
-    }, [sidePanelView]);
-
     const handleOnAddTool = () => {
-        setPanelView(SidePanelView.NEW_TOOL);
+        setSidePanelView(SidePanelView.NEW_TOOL);
     };
 
     const handleOnAddMcpServer = () => {
-        setPanelView(SidePanelView.ADD_MCP_SERVER);
+        setSidePanelView(SidePanelView.ADD_MCP_SERVER);
     };
 
     const handleOnEditMcpServer = () => {
-        setPanelView(SidePanelView.EDIT_MCP_SERVER);
+        setSidePanelView(SidePanelView.EDIT_MCP_SERVER);
     };
 
     const handleOnBackToAddTool = () => {
-        setPanelView(SidePanelView.ADD_TOOL);
+        setSidePanelView(SidePanelView.ADD_TOOL);
     };
 
     const handleOnUseConnection = () => {
-        setPanelView(SidePanelView.NEW_TOOL_FROM_CONNECTION);
+        setSidePanelView(SidePanelView.NEW_TOOL_FROM_CONNECTION);
     };
 
     const handleOnUseFunction = () => {
-        setPanelView(SidePanelView.NEW_TOOL_FROM_FUNCTION);
+        setSidePanelView(SidePanelView.NEW_TOOL_FROM_FUNCTION);
     };
 
     const handleOnUseMcpServer = () => {
-        setPanelView(SidePanelView.ADD_MCP_SERVER);
+        setSidePanelView(SidePanelView.ADD_MCP_SERVER);
     };
 
     const handleSubmitAndClose = () => {
@@ -224,7 +242,7 @@ export function PanelManager(props: PanelManagerProps) {
     };
 
     const renderPanelContent = () => {
-        switch (panelView) {
+        switch (sidePanelView) {
             case SidePanelView.NODE_LIST:
                 return (
                     <NodeList
@@ -314,9 +332,6 @@ export function PanelManager(props: PanelManagerProps) {
                 );
                 return <ToolConfig agentCallNode={selectedNode} toolData={selectedTool} onSave={onClose} />;
 
-            case SidePanelView.AGENT_MODEL:
-                return <ModelConfig agentCallNode={selectedNode} onSave={onClose} />;
-
             case SidePanelView.AGENT_CONFIG:
                 return <AgentConfig agentCallNode={selectedNode} fileName={fileName} onSave={onClose} />;
 
@@ -464,6 +479,87 @@ export function PanelManager(props: PanelManagerProps) {
                     />
                 );
 
+            case SidePanelView.DATA_LOADER_LIST:
+                return (
+                    <NodeList
+                        categories={categories}
+                        onSelect={onSelectNode}
+                        onAdd={onAddDataLoader}
+                        addButtonLabel={"Add Data Loader"}
+                        onClose={onClose}
+                        title={"Data Loaders"}
+                        searchPlaceholder={"Search data loaders"}
+                        onSearchTextChange={(searchText) =>
+                            onSearchDataLoader?.(searchText, FUNCTION_TYPE.REGULAR)
+                        }
+                        onBack={canGoBack ? onBack : undefined}
+                    />
+                );
+
+            case SidePanelView.DATA_LOADERS:
+                return (
+                    <CardList
+                        categories={categories}
+                        onSelect={onSelectNode}
+                        onClose={onClose}
+                        title={"Data Loaders"}
+                        searchPlaceholder={"Search data loaders"}
+                        onBack={canGoBack ? onBack : undefined}
+                    />
+                );
+
+            case SidePanelView.CHUNKER_LIST:
+                return (
+                    <NodeList
+                        categories={categories}
+                        onSelect={onSelectNode}
+                        onAdd={onAddChunker}
+                        addButtonLabel={"Add Chunker"}
+                        onClose={onClose}
+                        title={"Chunkers"}
+                        searchPlaceholder={"Search chunkers"}
+                        onSearchTextChange={(searchText) =>
+                            onSearchChunker?.(searchText, FUNCTION_TYPE.REGULAR)
+                        }
+                        onBack={canGoBack ? onBack : undefined}
+                    />
+                );
+
+            case SidePanelView.CHUNKERS:
+                return (
+                    <CardList
+                        categories={categories}
+                        onSelect={onSelectNode}
+                        onClose={onClose}
+                        title={"Chunkers"}
+                        searchPlaceholder={"Search chunkers"}
+                        onBack={canGoBack ? onBack : undefined}
+                    />
+                );
+
+            case SidePanelView.CONNECTION_CONFIG:
+                return (
+                    <ConnectionConfig
+                        connectionKind={selectedConnectionKind}
+                        selectedNode={selectedNode}
+                        onSave={onUpdateNodeWithConnection}
+                        onNavigateToSelectionList={() => onNavigateToPanel?.(SidePanelView.CONNECTION_SELECT)}
+                    />
+                );
+
+            case SidePanelView.CONNECTION_SELECT:
+                return <ConnectionSelectionList connectionKind={selectedConnectionKind} onSelect={onSelectNewConnection} />;
+
+            case SidePanelView.CONNECTION_CREATE:
+                return (
+                    <ConnectionCreator
+                        connectionKind={selectedConnectionKind}
+                        nodeFormTemplate={nodeFormTemplate}
+                        selectedNode={selectedNode}
+                        onSave={onUpdateNodeWithConnection}
+                    />
+                );
+
             case SidePanelView.FORM:
                 return (
                     <FormGenerator
@@ -481,6 +577,9 @@ export function PanelManager(props: PanelManagerProps) {
                         openSubPanel={onSubPanel}
                         updatedExpressionField={updatedExpressionField}
                         resetUpdatedExpressionField={onResetUpdatedExpressionField}
+                        //TODO: this should be merged with onSubmit prop
+                        handleOnFormSubmit={onSubmitForm}
+                        navigateToPanel={onNavigateToPanel}
                     />
                 );
 
@@ -489,21 +588,27 @@ export function PanelManager(props: PanelManagerProps) {
         }
     };
 
-    const onBackCallback =
-        panelView === SidePanelView.NEW_TOOL ||
-        panelView === SidePanelView.NEW_TOOL_FROM_CONNECTION ||
-        panelView === SidePanelView.NEW_TOOL_FROM_FUNCTION ||
-        panelView === SidePanelView.ADD_MCP_SERVER
-            ? handleOnBackToAddTool
-            : panelView === SidePanelView.NEW_AGENT
-            ? onBack
-            : panelView === SidePanelView.FORM && !showEditForm
-            ? onBack
-            : undefined;
+    const onBackCallback = (() => {
+        switch (sidePanelView) {
+            case SidePanelView.NEW_TOOL:
+            case SidePanelView.NEW_TOOL_FROM_CONNECTION:
+            case SidePanelView.NEW_TOOL_FROM_FUNCTION:
+            case SidePanelView.ADD_MCP_SERVER:
+                return handleOnBackToAddTool;
+            case SidePanelView.CONNECTION_SELECT:
+            case SidePanelView.CONNECTION_CREATE:
+            case SidePanelView.NEW_AGENT:
+                return onBack;
+            case SidePanelView.FORM:
+                return !showEditForm ? onBack : undefined;
+            default:
+                return undefined;
+        }
+    })();
 
     return (
         <PanelContainer
-            title={getContainerTitle(panelView, selectedNode, selectedClientName)}
+            title={getContainerTitle(sidePanelView, selectedNode, selectedClientName, selectedConnectionKind)}
             show={showSidePanel}
             onClose={onClose}
             onBack={onBackCallback}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/index.tsx
index d8868092d7c..1250551b872 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/index.tsx
@@ -44,7 +44,6 @@ import {
     ParentMetadata,
     NodeMetadata,
     SearchKind,
-    Item,
 } from "@wso2/ballerina-core";
 
 import {
@@ -54,15 +53,17 @@ import {
     convertModelProviderCategoriesToSidePanelCategories,
     convertVectorStoreCategoriesToSidePanelCategories,
     convertEmbeddingProviderCategoriesToSidePanelCategories,
-    convertVectorKnowledgeBaseCategoriesToSidePanelCategories,
+    convertDataLoaderCategoriesToSidePanelCategories,
+    convertChunkerCategoriesToSidePanelCategories,
 } from "../../../utils/bi";
 import { NodePosition, STNode } from "@wso2/syntax-tree";
-import { View, ProgressRing, ProgressIndicator, ThemeColors } from "@wso2/ui-toolkit";
+import { View, ProgressIndicator, ThemeColors } from "@wso2/ui-toolkit";
 import { applyModifications, textToModifications } from "../../../utils/utils";
 import { PanelManager, SidePanelView } from "./PanelManager";
-import { findFunctionByName, transformCategories } from "./utils";
+import { findFunctionByName, transformCategories, getNodeTemplateForConnection } from "./utils";
 import { ExpressionFormField, Category as PanelCategory } from "@wso2/ballerina-side-panel";
 import { cloneDeep, debounce } from "lodash";
+import { ConnectionKind } from "../../../components/ConnectionSelector";
 import {
     findFlowNodeByModuleVarName,
     getAgentFilePath,
@@ -102,6 +103,13 @@ interface NavigationStackItem {
     clientName?: string;
 }
 
+export type FormSubmitOptions = {
+    shouldCloseSidePanel?: boolean;
+    updateLineRangeForRecursiveInserts?: (nodes: FlowNode[]) => void;
+    shouldUpdateTargetLine?: boolean;
+
+};
+
 export function BIFlowDiagram(props: BIFlowDiagramProps) {
     const { projectPath, breakpointState, syntaxTree, onUpdate, onReady, onSave } = props;
     const { rpcClient } = useRpcContext();
@@ -118,6 +126,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
     const [breakpointInfo, setBreakpointInfo] = useState<BreakpointInfo>();
     const [selectedMcpToolkitName, setSelectedMcpToolkitName] = useState<string | undefined>(undefined);
     const [forceUpdate, setForceUpdate] = useState(0);
+    const [selectedConnectionKind, setSelectedConnectionKind] = useState<ConnectionKind>();
 
     // Navigation stack for back navigation
     const [navigationStack, setNavigationStack] = useState<NavigationStackItem[]>([]);
@@ -132,10 +141,17 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
     const initialCategoriesRef = useRef<any[]>([]);
     const showEditForm = useRef<boolean>(false);
     const selectedNodeMetadata = useRef<{ nodeId: string; metadata: any; fileName: string }>();
+    const onRerenderRef = useRef<((nodes: FlowNode[]) => void) | null>(null);
+    const shouldUpdateLineRangeRef = useRef<boolean>(false);
+    const updatedNodeRef = useRef<FlowNode>(undefined);
+    const [targetLineRange, setTargetLineRange] = useState<LineRange>(targetRef?.current);
+
     const isCreatingNewModelProvider = useRef<boolean>(false);
     const isCreatingNewVectorStore = useRef<boolean>(false);
     const isCreatingNewEmbeddingProvider = useRef<boolean>(false);
     const isCreatingNewVectorKnowledgeBase = useRef<boolean>(false);
+    const isCreatingNewDataLoader = useRef<boolean>(false);
+    const isCreatingNewChunker = useRef<boolean>(false);
 
     useEffect(() => {
         debouncedGetFlowModel();
@@ -160,11 +176,47 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                     return;
                 }
                 setShowProgressIndicator(true);
+                if (parent.artifactType === DIRECTORY_MAP.CONNECTION) {
+                    updateConnectionWithNewItem(parent.recentIdentifier);
+                }
                 fetchNodesAndAISuggestions(topNodeRef.current, targetRef.current, false, false);
             }
         });
     }, [rpcClient]);
 
+    const updateConnectionWithNewItem = (recentIdentifier: string) => {
+        // Add a new item as loading into the "Connections" category
+        setCategories((prev: PanelCategory[]) => {
+            // Find the "Connections" category
+            const updated = prev.map((cat) => {
+                if (cat.title === "Connections") {
+                    // Add new item to the items array and sort the items by title
+                    return {
+                        ...cat,
+                        items: [
+                            ...(cat.items || []),
+                            { title: recentIdentifier, isLoading: true, items: [] }
+                        ].sort((a, b) => (a as PanelCategory).title.localeCompare((b as PanelCategory).title))
+                    };
+                }
+                return cat;
+            });
+            return updated as PanelCategory[];
+        });
+    };
+
+
+    const changeTargetRange = (range: LineRange) => {
+        targetRef.current = range;
+        setTargetLineRange(range);
+    }
+
+    useEffect(() => {
+        console.log(targetLineRange)
+    }, [targetLineRange]);
+
+
+
     const debouncedGetFlowModel = useCallback(
         debounce(() => {
             getFlowModel();
@@ -258,7 +310,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
             }
         } else {
             console.log(">>> MODEL_PROVIDER_LIST not found in navigation stack, closing panel");
-            handleOnCloseSidePanel();
+            closeSidePanelAndFetchUpdatedFlowModel();
         }
     };
 
@@ -288,7 +340,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
             }
         } else {
             console.log(">>> VECTOR_STORE_LIST not found in navigation stack, closing panel");
-            handleOnCloseSidePanel();
+            closeSidePanelAndFetchUpdatedFlowModel();
         }
     };
 
@@ -318,7 +370,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
             }
         } else {
             console.log(">>> EMBEDDING_PROVIDER_LIST not found in navigation stack, closing panel");
-            handleOnCloseSidePanel();
+            closeSidePanelAndFetchUpdatedFlowModel();
         }
     };
 
@@ -351,7 +403,63 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
             }
         } else {
             console.log(">>> VECTOR_KNOWLEDGE_BASE_LIST not found in navigation stack, closing panel");
-            handleOnCloseSidePanel();
+            closeSidePanelAndFetchUpdatedFlowModel();
+        }
+    };
+
+    const handleDataLoaderAdded = async () => {
+        console.log(">>> Data loader added, navigating back to data loader list");
+
+        // Try to navigate back to DATA_LOADER_LIST in the stack
+        const foundInStack = popNavigationStackUntilView(SidePanelView.DATA_LOADER_LIST);
+
+        if (foundInStack) {
+            setShowProgressIndicator(true);
+            try {
+                const response = await rpcClient.getBIDiagramRpcClient().getAvailableDataLoaders({
+                    position: targetRef.current.startLine,
+                    filePath: model?.fileName,
+                });
+                console.log(">>> Refreshed data loader list", response);
+                setCategories(convertDataLoaderCategoriesToSidePanelCategories(response.categories as Category[]));
+                setSidePanelView(SidePanelView.DATA_LOADER_LIST);
+                setShowSidePanel(true);
+            } catch (error) {
+                console.error(">>> Error refreshing data loaders", error);
+            } finally {
+                setShowProgressIndicator(false);
+            }
+        } else {
+            console.log(">>> DATA_LOADER_LIST not found in navigation stack, closing panel");
+            closeSidePanelAndFetchUpdatedFlowModel();
+        }
+    };
+
+    const handleChunkerAdded = async () => {
+        console.log(">>> Chunker added, navigating back to chunker list");
+
+        // Try to navigate back to CHUNKER_LIST in the stack
+        const foundInStack = popNavigationStackUntilView(SidePanelView.CHUNKER_LIST);
+
+        if (foundInStack) {
+            setShowProgressIndicator(true);
+            try {
+                const response = await rpcClient.getBIDiagramRpcClient().getAvailableChunkers({
+                    position: targetRef.current.startLine,
+                    filePath: model?.fileName,
+                });
+                console.log(">>> Refreshed chunker list", response);
+                setCategories(convertChunkerCategoriesToSidePanelCategories(response.categories as Category[]));
+                setSidePanelView(SidePanelView.CHUNKER_LIST);
+                setShowSidePanel(true);
+            } catch (error) {
+                console.error(">>> Error refreshing chunkers", error);
+            } finally {
+                setShowProgressIndicator(false);
+            }
+        } else {
+            console.log(">>> CHUNKER_LIST not found in navigation stack, closing panel");
+            closeSidePanelAndFetchUpdatedFlowModel();
         }
     };
 
@@ -375,6 +483,19 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                                 (node) => node.codedata.node === "EVENT_START"
                             )?.metadata.data as ParentMetadata | undefined;
                             onReady(model.flowModel.fileName, parentMetadata);
+                            if (onRerenderRef.current) {
+                                onRerenderRef.current(model.flowModel.nodes);
+                            }
+                            if (shouldUpdateLineRangeRef.current) {
+                                const varName = typeof updatedNodeRef.current?.properties?.variable?.value === "string"
+                                    ? updatedNodeRef.current.properties.variable.value
+                                    : "";
+                                const newNode = searchNodesByName(model.flowModel.nodes, varName)
+                                changeTargetRange({
+                                    startLine: newNode.codedata.lineRange.endLine,
+                                    endLine: newNode.codedata.lineRange.endLine
+                                })
+                            }
                         }
                     })
                     .finally(() => {
@@ -435,8 +556,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
             // Only update refs if we found a matching node and it's different from the current one
             if (matchingNode && matchingNode.id !== selectedNodeRef.current.id) {
                 selectedNodeRef.current = matchingNode;
-                targetRef.current = matchingNode.codedata.lineRange;
-                setForceUpdate(prev => prev + 1);
+                changeTargetRange(matchingNode.codedata.lineRange)
             }
         }
     }, [model]);
@@ -483,7 +603,31 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
         return searchNodes(flowModel.nodes);
     };
 
-    const handleOnCloseSidePanel = () => {
+
+    const findNodeWithName = (node: FlowNode, name: string) => {
+        return node?.properties?.variable?.value === name;
+    }
+
+    const searchNodesByName = (nodes: FlowNode[], name: string): FlowNode | undefined => {
+        for (const node of nodes) {
+            if (findNodeWithName(node, name)) {
+                return node;
+            }
+            if (node.branches && node.branches.length > 0) {
+                for (const branch of node.branches) {
+                    if (branch.children && branch.children.length > 0) {
+                        const foundNode = searchNodesByName(branch.children, name);
+                        if (foundNode) {
+                            return foundNode;
+                        }
+                    }
+                }
+            }
+        }
+        return undefined;
+    };
+
+    const resetNodeSelectionStates = () => {
         setShowSidePanel(false);
         setSidePanelView(SidePanelView.NODE_LIST);
         setSubPanel({ view: SubPanelView.UNDEFINED });
@@ -491,12 +635,21 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
         nodeTemplateRef.current = undefined;
         topNodeRef.current = undefined;
         targetRef.current = undefined;
+        changeTargetRange(undefined);
         selectedClientName.current = undefined;
         showEditForm.current = false;
         isCreatingNewModelProvider.current = false;
+        isCreatingNewVectorStore.current = false;
+        isCreatingNewEmbeddingProvider.current = false;
+        isCreatingNewVectorKnowledgeBase.current = false;
+        isCreatingNewDataLoader.current = false;
+        isCreatingNewChunker.current = false;
         clearNavigationStack();
+    };
 
-        // restore original model
+    const closeSidePanelAndFetchUpdatedFlowModel = () => {
+        resetNodeSelectionStates();
+        // fetch new flow model
         if (originalFlowModel.current) {
             debouncedGetFlowModel();
             originalFlowModel.current = undefined;
@@ -505,6 +658,17 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
         }
     };
 
+    const handleOnCloseSidePanel = () => {
+        resetNodeSelectionStates();
+        // return to previous flow model
+        if (originalFlowModel.current) {
+            setModel(originalFlowModel.current);
+            originalFlowModel.current = undefined;
+            setSuggestedModel(undefined);
+            suggestedText.current = undefined;
+        }
+    };
+
     const fetchNodesAndAISuggestions = (
         parent: FlowNode | Branch,
         target: LineRange,
@@ -585,22 +749,22 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                 topNodeRef: topNodeRef.current,
                 targetRef: targetRef.current,
             });
-            handleOnCloseSidePanel();
+            closeSidePanelAndFetchUpdatedFlowModel();
             return;
         }
         // handle add new node
         topNodeRef.current = parent;
-        targetRef.current = target;
+        changeTargetRange(target)
         fetchNodesAndAISuggestions(parent, target);
     };
 
     const handleOnAddNodePrompt = (parent: FlowNode | Branch, target: LineRange, prompt: string) => {
         if (topNodeRef.current || targetRef.current) {
-            handleOnCloseSidePanel();
+            closeSidePanelAndFetchUpdatedFlowModel();
             return;
         }
         topNodeRef.current = parent;
-        targetRef.current = target;
+        changeTargetRange(target)
         originalFlowModel.current = model;
         setFetchingAiSuggestions(true);
         rpcClient
@@ -669,6 +833,12 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                     case "VECTOR_KNOWLEDGE_BASE":
                         panelView = SidePanelView.VECTOR_KNOWLEDGE_BASE_LIST;
                         break;
+                    case "DATA_LOADER":
+                        panelView = SidePanelView.DATA_LOADER_LIST;
+                        break;
+                    case "CHUNKER":
+                        panelView = SidePanelView.CHUNKER_LIST;
+                        break;
                     default:
                         panelView = SidePanelView.NODE_LIST;
                 }
@@ -705,6 +875,14 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
         // await handleSearch(searchText, functionType, "VECTOR_KNOWLEDGE_BASE");
     };
 
+    const handleSearchDataLoader = async (searchText: string, functionType: FUNCTION_TYPE) => {
+        // await handleSearch(searchText, functionType, "DATA_LOADER");
+    };
+
+    const handleSearchChunker = async (searchText: string, functionType: FUNCTION_TYPE) => {
+        // await handleSearch(searchText, functionType, "CHUNKER");
+    };
+
     const updateCurrentArtifactLocation = async (artifacts: UpdatedArtifactsResponse) => {
         console.log(">>> Updating current artifact location", { artifacts });
         // Get the updated component and update the location
@@ -747,6 +925,16 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                 await handleVectorKnowledgeBaseAdded();
                 return;
             }
+            if (isCreatingNewDataLoader.current) {
+                isCreatingNewDataLoader.current = false;
+                await handleDataLoaderAdded();
+                return;
+            }
+            if (isCreatingNewChunker.current) {
+                isCreatingNewChunker.current = false;
+                await handleChunkerAdded();
+                return;
+            }
         }
         await rpcClient.getVisualizerRpcClient().openView({
             type: EVENT_TYPE.UPDATE_PROJECT_LOCATION,
@@ -756,7 +944,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                 identifier: currentIdentifier,
             },
         });
-        handleOnCloseSidePanel();
+        closeSidePanelAndFetchUpdatedFlowModel();
         debouncedGetFlowModel();
     };
 
@@ -942,6 +1130,44 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                     });
                 break;
 
+            case "DATA_LOADERS":
+                setShowProgressIndicator(true);
+                rpcClient
+                    .getBIDiagramRpcClient()
+                    .getAvailableDataLoaders({
+                        position: targetRef.current.startLine,
+                        filePath: model?.fileName || fileName,
+                    })
+                    .then((response) => {
+                        console.log(">>> List of data loaders", response);
+                        setCategories(convertDataLoaderCategoriesToSidePanelCategories(response.categories as Category[]));
+                        setSidePanelView(SidePanelView.DATA_LOADER_LIST);
+                        setShowSidePanel(true);
+                    })
+                    .finally(() => {
+                        setShowProgressIndicator(false);
+                    });
+                break;
+
+            case "CHUNKERS":
+                setShowProgressIndicator(true);
+                rpcClient
+                    .getBIDiagramRpcClient()
+                    .getAvailableChunkers({
+                        position: targetRef.current.startLine,
+                        filePath: model?.fileName || fileName,
+                    })
+                    .then((response) => {
+                        console.log(">>> List of chunkers", response);
+                        setCategories(convertChunkerCategoriesToSidePanelCategories(response.categories as Category[]));
+                        setSidePanelView(SidePanelView.CHUNKER_LIST);
+                        setShowSidePanel(true);
+                    })
+                    .finally(() => {
+                        setShowProgressIndicator(false);
+                    });
+                break;
+
             default:
                 // default node
                 console.log(">>> on select panel node", { nodeId, metadata });
@@ -974,17 +1200,41 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
         }
     };
 
-    const handleOnFormSubmit = (updatedNode?: FlowNode, openInDataMapper?: boolean) => {
+    const handleOnSelectNewConnection = async (nodeId: string, metadata?: any) => {
+        // Push current state to navigation stack before navigating
+        pushToNavigationStack(sidePanelView, categories, selectedNodeRef.current, selectedClientName.current);
+        setShowProgressIndicator(true);
+
+        try {
+            const { flowNode, connectionKind } = await getNodeTemplateForConnection(
+                nodeId,
+                metadata,
+                targetRef.current,
+                model?.fileName,
+                rpcClient
+            );
+
+            nodeTemplateRef.current = flowNode;
+            setSelectedConnectionKind(connectionKind as ConnectionKind);
+            setSidePanelView(SidePanelView.CONNECTION_CREATE);
+            setShowSidePanel(true);
+        } finally {
+            setShowProgressIndicator(false);
+        }
+    };
+
+    const handleOnFormSubmit = (updatedNode?: FlowNode, openInDataMapper?: boolean, options?: FormSubmitOptions) => {
         if (!updatedNode) {
             console.log(">>> No updated node found");
             updatedNode = selectedNodeRef.current;
             debouncedGetFlowModel();
         }
         setShowProgressIndicator(true);
+        const noFormSubmitOptions = !options || !(options?.shouldCloseSidePanel || options?.updateLineRangeForRecursiveInserts);
 
         if (openInDataMapper) {
             rpcClient
-                .getInlineDataMapperRpcClient()
+                .getDataMapperRpcClient()
                 .getInitialIDMSource({
                     filePath: model.fileName,
                     flowNode: updatedNode,
@@ -1027,18 +1277,31 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
             .then(async (response) => {
                 console.log(">>> Updated source code", response);
                 if (response.artifacts.length > 0) {
-                    // If the selected model is the default WSO2 model provider, configure it
                     if (updatedNode?.codedata?.symbol === GET_DEFAULT_MODEL_PROVIDER) {
                         await rpcClient.getAIAgentRpcClient().configureDefaultModelProvider();
                     }
-                    selectedNodeRef.current = undefined;
-                    await updateCurrentArtifactLocation(response);
+                    if (noFormSubmitOptions) {
+                        selectedNodeRef.current = undefined;
+                        await updateCurrentArtifactLocation(response);
+                    }
+                    if (options?.shouldCloseSidePanel) {
+                        selectedNodeRef.current = undefined;
+                        closeSidePanelAndFetchUpdatedFlowModel();
+                    }
+                    if (options?.updateLineRangeForRecursiveInserts) {
+                        onRerenderRef.current = options.updateLineRangeForRecursiveInserts;
+                    }
+                    shouldUpdateLineRangeRef.current = options?.shouldUpdateTargetLine;
+                    updatedNodeRef.current = updatedNode;
                 } else {
                     console.error(">>> Error updating source code", response);
                 }
             })
             .finally(() => {
                 setShowProgressIndicator(false);
+                if (options?.shouldCloseSidePanel === true) {
+                    setShowSidePanel(false);
+                }
             });
     };
 
@@ -1068,7 +1331,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
         await updateCurrentArtifactLocation(deleteNodeResponse);
 
         selectedNodeRef.current = undefined;
-        handleOnCloseSidePanel();
+        closeSidePanelAndFetchUpdatedFlowModel();
         setShowProgressIndicator(false);
         debouncedGetFlowModel();
     };
@@ -1116,7 +1379,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                 if (response.artifacts.length > 0) {
                     selectedNodeRef.current = undefined;
                     await updateCurrentArtifactLocation(response);
-                    handleOnCloseSidePanel();
+                    closeSidePanelAndFetchUpdatedFlowModel();
                 } else {
                     console.error(">>> Error updating source code", response);
                 }
@@ -1131,6 +1394,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
         } else {
             topNodeRef.current = undefined;
             targetRef.current = node.codedata.lineRange;
+            setTargetLineRange(node.codedata.lineRange)
         }
         if (!targetRef.current) {
             return;
@@ -1193,6 +1457,22 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                 );
                 setCategories([]);
                 setSidePanelView(SidePanelView.EMBEDDING_PROVIDER_LIST);
+            } else if (sidePanelView === SidePanelView.DATA_LOADERS) {
+                handleOnSelectNode(
+                    selectedNodeMetadata.current.nodeId,
+                    selectedNodeMetadata.current.metadata,
+                    selectedNodeMetadata.current.fileName
+                );
+                setCategories([]);
+                setSidePanelView(SidePanelView.DATA_LOADER_LIST);
+            } else if (sidePanelView === SidePanelView.CHUNKERS) {
+                handleOnSelectNode(
+                    selectedNodeMetadata.current.nodeId,
+                    selectedNodeMetadata.current.metadata,
+                    selectedNodeMetadata.current.fileName
+                );
+                setCategories([]);
+                setSidePanelView(SidePanelView.CHUNKER_LIST);
             } else if (
                 sidePanelView === SidePanelView.FORM &&
                 selectedNodeMetadata.current.metadata.node.codedata.node === "VECTOR_KNOWLEDGE_BASE"
@@ -1211,7 +1491,9 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                 sidePanelView === SidePanelView.MODEL_PROVIDER_LIST ||
                 sidePanelView === SidePanelView.VECTOR_STORE_LIST ||
                 sidePanelView === SidePanelView.EMBEDDING_PROVIDER_LIST ||
-                sidePanelView === SidePanelView.VECTOR_KNOWLEDGE_BASE_LIST
+                sidePanelView === SidePanelView.VECTOR_KNOWLEDGE_BASE_LIST ||
+                sidePanelView === SidePanelView.DATA_LOADER_LIST ||
+                sidePanelView === SidePanelView.CHUNKER_LIST
             ) {
                 setCategories(initialCategoriesRef.current);
                 setSidePanelView(SidePanelView.NODE_LIST);
@@ -1401,6 +1683,62 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
             });
     };
 
+    const handleOnAddNewDataLoader = () => {
+        console.log(">>> Adding new data loader");
+        isCreatingNewDataLoader.current = true;
+        setShowProgressIndicator(true);
+
+        // Push current state to navigation stack
+        pushToNavigationStack(sidePanelView, categories, selectedNodeRef.current, selectedClientName.current);
+
+        // Use search to get available data loader types
+        rpcClient
+            .getBIDiagramRpcClient()
+            .search({
+                position: { startLine: targetRef.current.startLine, endLine: targetRef.current.endLine },
+                filePath: model?.fileName,
+                queryMap: undefined,
+                searchKind: "DATA_LOADER",
+            })
+            .then((response) => {
+                console.log(">>> Available data loader types", response);
+                setCategories(convertDataLoaderCategoriesToSidePanelCategories(response.categories as Category[]));
+                setSidePanelView(SidePanelView.DATA_LOADERS);
+                setShowSidePanel(true);
+            })
+            .finally(() => {
+                setShowProgressIndicator(false);
+            });
+    };
+
+    const handleOnAddNewChunker = () => {
+        console.log(">>> Adding new chunker");
+        isCreatingNewChunker.current = true;
+        setShowProgressIndicator(true);
+
+        // Push current state to navigation stack
+        pushToNavigationStack(sidePanelView, categories, selectedNodeRef.current, selectedClientName.current);
+
+        // Use search to get available chunker types
+        rpcClient
+            .getBIDiagramRpcClient()
+            .search({
+                position: { startLine: targetRef.current.startLine, endLine: targetRef.current.endLine },
+                filePath: model?.fileName,
+                queryMap: undefined,
+                searchKind: "CHUNKER",
+            })
+            .then((response) => {
+                console.log(">>> Available chunker types", response);
+                setCategories(convertChunkerCategoriesToSidePanelCategories(response.categories as Category[]));
+                setSidePanelView(SidePanelView.CHUNKERS);
+                setShowSidePanel(true);
+            })
+            .finally(() => {
+                setShowProgressIndicator(false);
+            });
+    };
+
     const handleOnGoToSource = (node: FlowNode) => {
         const targetPosition: NodePosition = {
             startLine: node.codedata.lineRange.startLine.line,
@@ -1450,7 +1788,7 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
         applyModifications(rpcClient, modifications);
 
         // clear diagram
-        handleOnCloseSidePanel();
+        closeSidePanelAndFetchUpdatedFlowModel();
         onDiscardSuggestions();
     };
 
@@ -1490,11 +1828,19 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
     };
 
     // AI Agent callback handlers
-    const handleOnEditAgentModel = (node: FlowNode) => {
-        console.log(">>> Edit agent model called", node);
-        selectedNodeRef.current = node;
+    const handleOnEditAgentModel = async (agentCallNode: FlowNode) => {
+        console.log(">>> Edit agent model called", agentCallNode);
+
+        const moduleNodes = await rpcClient.getBIDiagramRpcClient().getModuleNodes();
+        const agentNode = moduleNodes.flowModel.connections.find((node) => node.properties.variable.value === agentCallNode.properties.connection.value);
+        if (!agentNode) {
+            console.error(`Agent node not found`, agentCallNode);
+        }
+
+        selectedNodeRef.current = agentNode;
         showEditForm.current = true;
-        setSidePanelView(SidePanelView.AGENT_MODEL);
+        setSelectedConnectionKind('MODEL_PROVIDER');
+        setSidePanelView(SidePanelView.CONNECTION_CONFIG);
         setShowSidePanel(true);
     };
 
@@ -1680,6 +2026,17 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
         }, 500);
     };
 
+    const updateNodeWithConnection = async (selectedNode: FlowNode) => {
+        if (selectedNode.codedata.node === "VECTOR_KNOWLEDGE_BASE") {
+            setSidePanelView(SidePanelView.FORM);
+            return;
+        }
+        await rpcClient
+            .getBIDiagramRpcClient()
+            .getSourceCode({ filePath: projectPath, flowNode: selectedNode });
+        closeSidePanelAndFetchUpdatedFlowModel();
+    };
+
     const handleOnDeleteTool = async (tool: ToolData, node: FlowNode) => {
         console.log(">>> Delete tool called", tool, node);
 
@@ -1737,6 +2094,14 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
         });
     };
 
+    const handleOnNavigateToPanel = (targetPanel: SidePanelView, connectionKind?: ConnectionKind) => {
+        if (connectionKind) {
+            setSelectedConnectionKind(connectionKind);
+        }
+        pushToNavigationStack(sidePanelView, categories, selectedNodeRef.current, selectedClientName.current);
+        setSidePanelView(targetPanel);
+    };
+
     const flowModel = originalFlowModel.current && suggestedModel ? suggestedModel : model;
 
     const memoizedDiagramProps = useMemo(
@@ -1795,13 +2160,15 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                 nodeFormTemplate={nodeTemplateRef.current}
                 selectedClientName={selectedClientName.current}
                 showEditForm={showEditForm.current}
-                targetLineRange={targetRef.current}
+                targetLineRange={targetLineRange}
                 connections={model?.connections}
                 fileName={model?.fileName}
                 projectPath={projectPath}
                 editForm={showEditForm.current}
                 updatedExpressionField={updatedExpressionField}
                 canGoBack={navigationStack.length > 0}
+                selectedConnectionKind={selectedConnectionKind}
+                setSidePanelView={setSidePanelView}
                 // Regular callbacks
                 onClose={handleOnCloseSidePanel}
                 onBack={handleOnFormBack}
@@ -1815,6 +2182,8 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                 onAddVectorStore={handleOnAddNewVectorStore}
                 onAddEmbeddingProvider={handleOnAddNewEmbeddingProvider}
                 onAddVectorKnowledgeBase={handleOnAddNewVectorKnowledgeBase}
+                onAddDataLoader={handleOnAddNewDataLoader}
+                onAddChunker={handleOnAddNewChunker}
                 onSubmitForm={handleOnFormSubmit}
                 showProgressIndicator={showProgressIndicator}
                 onDiscardSuggestions={onDiscardSuggestions}
@@ -1827,13 +2196,18 @@ export function BIFlowDiagram(props: BIFlowDiagramProps) {
                 onSearchVectorStore={handleSearchVectorStore}
                 onSearchEmbeddingProvider={handleSearchEmbeddingProvider}
                 onSearchVectorKnowledgeBase={handleSearchVectorKnowledgeBase}
+                onSearchDataLoader={handleSearchDataLoader}
+                onSearchChunker={handleSearchChunker}
+                onUpdateNodeWithConnection={updateNodeWithConnection}
                 // AI Agent specific callbacks
                 onEditAgent={handleEditAgent}
                 onSelectTool={handleOnSelectTool}
                 onDeleteTool={handleOnDeleteTool}
                 onAddTool={handleOnAddTool}
                 onAddMcpServer={handleOnAddMcpServer}
+                onSelectNewConnection={handleOnSelectNewConnection}
                 selectedMcpToolkitName={selectedMcpToolkitName}
+                onNavigateToPanel={handleOnNavigateToPanel}
             />
         </>
     );
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/utils.ts b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/utils.ts
index deaab7daf45..f886145ed02 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/utils.ts
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FlowDiagram/utils.ts
@@ -85,3 +85,36 @@ export const findFunctionByName = (components: BallerinaProjectComponents, funct
     }
     return null;
 };
+
+export const getNodeTemplateForConnection = async (
+    nodeId: string,
+    metadata: any,
+    targetRef: any,
+    modelFileName: string | undefined,
+    rpcClient: any
+) => {
+    const { node } = metadata as { node: AvailableNode };
+
+    const response = await rpcClient
+        .getBIDiagramRpcClient()
+        .getNodeTemplate({
+            position: targetRef?.startLine || { line: 0, offset: 0 },
+            filePath: modelFileName,
+            id: node.codedata,
+        });
+
+    const flowNode = response.flowNode;
+    flowNode.metadata = node.metadata;
+
+    let connectionKind: string;
+    switch (nodeId) {
+        case "MODEL_PROVIDER":
+        case "CLASS_INIT":
+            connectionKind = 'MODEL_PROVIDER';
+            break;
+        default:
+            connectionKind = nodeId;
+    }
+
+    return { flowNode, connectionKind };
+};
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/FocusFlowDiagram/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FocusFlowDiagram/index.tsx
index a1d3d6fa42d..c050f301dd2 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/FocusFlowDiagram/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FocusFlowDiagram/index.tsx
@@ -37,7 +37,6 @@ import {
     VisualizerLocation,
     CurrentBreakpointsResponse as BreakpointInfo,
     ParentPopupData,
-    FocusFlowDiagramView,
     ExpressionProperty,
     TRIGGER_CHARACTERS,
     TriggerCharacter,
@@ -46,7 +45,7 @@ import {
     UpdatedArtifactsResponse
 } from "@wso2/ballerina-core";
 import { PanelContainer } from "@wso2/ballerina-side-panel";
-import { ModelConfig } from "../AIChatAgent/ModelConfig";
+import { ConnectionConfig, ConnectionCreator, ConnectionSelectionList } from "../../../components/ConnectionSelector";
 
 import {
     addDraftNodeToDiagram,
@@ -54,12 +53,14 @@ import {
     convertBICategoriesToSidePanelCategories,
     getFlowNodeForNaturalFunction,
     calculateExpressionOffsets,
-    isNaturalFunction,
     updateLineRange,
 } from "../../../utils/bi";
-import { NodePosition, STNode } from "@wso2/syntax-tree";
+import { getNodeTemplateForConnection } from "../FlowDiagram/utils";
+import { NodePosition } from "@wso2/syntax-tree";
 import { View, ProgressRing, ProgressIndicator, ThemeColors, CompletionItem } from "@wso2/ui-toolkit";
 import { EXPRESSION_EXTRACTION_REGEX } from "../../../constants";
+import { ConnectionKind } from "../../../components/ConnectionSelector";
+import { SidePanelView } from "../FlowDiagram/PanelManager";
 
 const Container = styled.div`
     width: 100%;
@@ -88,8 +89,10 @@ export function BIFocusFlowDiagram(props: BIFocusFlowDiagramProps) {
     const [suggestedModel, setSuggestedModel] = useState<Flow>();
     const [showProgressIndicator, setShowProgressIndicator] = useState(false);
     const [breakpointInfo, setBreakpointInfo] = useState<BreakpointInfo>();
-    const [showModelConfigPanel, setShowModelConfigPanel] = useState(false);
-    const [selectedNodeForModelConfig, setSelectedNodeForModelConfig] = useState<FlowNode | undefined>();
+    const [showConnectionPanel, setShowConnectionPanel] = useState(false);
+    const [selectedNodeForConnection, setSelectedNodeForConnection] = useState<FlowNode | undefined>();
+    const [selectedConnectionKind, setSelectedConnectionKind] = useState<ConnectionKind>();
+    const [connectionView, setConnectionView] = useState<SidePanelView.CONNECTION_CONFIG | SidePanelView.CONNECTION_SELECT | SidePanelView.CONNECTION_CREATE>();
 
     const selectedNodeRef = useRef<FlowNode>();
     const nodeTemplateRef = useRef<FlowNode>();
@@ -567,23 +570,58 @@ export function BIFocusFlowDiagram(props: BIFocusFlowDiagramProps) {
         handleExpressionEditorCancel();
     };
 
-    const handleOnEditAgentModel = (node: FlowNode) => {
-        console.log(">>> on edit agent model", node);
-        setSelectedNodeForModelConfig(node);
-        setShowModelConfigPanel(true);
+    const handleOnEditNPFunctionModel = (node: FlowNode) => {
+        console.log(">>> on edit np function model provider", node);
+        setSelectedNodeForConnection(node);
+        setSelectedConnectionKind('MODEL_PROVIDER');
+        setConnectionView(SidePanelView.CONNECTION_CONFIG);
+        setShowConnectionPanel(true);
     };
 
-    const handleSaveModelConfigPanel = (response: UpdatedArtifactsResponse) => {
-        setShowModelConfigPanel(false);
-        setSelectedNodeForModelConfig(undefined);
-        if (response) {
-            updateCurrentArtifactLocation(response);
+    const handleCloseConnectionPanel = () => {
+        setShowConnectionPanel(false);
+        setSelectedNodeForConnection(undefined);
+        getFlowModel();
+    };
+
+    const handleCreateNewConnection = () => {
+        setConnectionView(SidePanelView.CONNECTION_SELECT);
+    };
+
+    const handleSelectConnection = async (nodeId: string, metadata?: any) => {
+        setShowProgressIndicator(true);
+
+        try {
+            const { flowNode, connectionKind } = await getNodeTemplateForConnection(
+                nodeId,
+                metadata,
+                targetRef.current,
+                model?.fileName,
+                rpcClient
+            );
+
+            nodeTemplateRef.current = flowNode;
+            setSelectedConnectionKind(connectionKind as ConnectionKind);
+            setConnectionView(SidePanelView.CONNECTION_CREATE);
+        } finally {
+            setShowProgressIndicator(false);
         }
     };
 
-    const handleCloseModelConfigPanel = () => {
-        setShowModelConfigPanel(false);
-        setSelectedNodeForModelConfig(undefined);
+    const handleUpdateNodeWithConnection = async (selectedNode: FlowNode) => {
+        setShowProgressIndicator(true);
+
+        const clonedNode = structuredClone(selectedNode);
+
+        const isNpFunction = clonedNode.codedata.node === "NP_FUNCTION";
+        if (isNpFunction)
+            clonedNode.codedata.node = "NP_FUNCTION_DEFINITION";
+
+        await rpcClient
+            .getBIDiagramRpcClient()
+            .getSourceCode({ filePath: model?.fileName, flowNode: clonedNode, isFunctionNodeUpdate: isNpFunction });
+        handleCloseConnectionPanel();
+        setShowProgressIndicator(false);
     };
 
     const memoizedDiagramProps = useMemo(
@@ -607,7 +645,7 @@ export function BIFocusFlowDiagram(props: BIFocusFlowDiagramProps) {
                 onCancel: handleExpressionEditorCancel
             },
             aiNodes: {
-                onModelSelect: handleOnEditAgentModel,
+                onModelSelect: handleOnEditNPFunctionModel,
             },
         }),
         [flowModel, projectPath, breakpointInfo, filteredCompletions]
@@ -629,16 +667,38 @@ export function BIFocusFlowDiagram(props: BIFocusFlowDiagramProps) {
                 </Container>
             </View>
 
-            {showModelConfigPanel && selectedNodeForModelConfig && (
+            {showConnectionPanel && selectedNodeForConnection && (
                 <PanelContainer
-                    title="Configure LLM Model"
-                    show={showModelConfigPanel}
-                    onClose={handleCloseModelConfigPanel}
+                    title="Configure Model Provider Connection"
+                    show={showConnectionPanel}
+                    onClose={handleCloseConnectionPanel}
+                    onBack={connectionView === SidePanelView.CONNECTION_SELECT ? () => setConnectionView(SidePanelView.CONNECTION_CONFIG) :
+                        connectionView === SidePanelView.CONNECTION_CREATE ? () => setConnectionView(SidePanelView.CONNECTION_SELECT) :
+                            undefined}
                 >
-                    <ModelConfig
-                        agentCallNode={selectedNodeForModelConfig}
-                        onSave={handleSaveModelConfigPanel}
-                    />
+                    {connectionView === SidePanelView.CONNECTION_CONFIG && (
+                        <ConnectionConfig
+                            connectionKind={selectedConnectionKind}
+                            selectedNode={selectedNodeForConnection}
+                            onSave={handleUpdateNodeWithConnection}
+                            onCreateNew={handleCreateNewConnection}
+                        />
+                    )}
+                    {connectionView === SidePanelView.CONNECTION_SELECT && (
+                        <ConnectionSelectionList
+                            connectionKind={selectedConnectionKind}
+                            selectedNode={selectedNodeForConnection}
+                            onSelect={handleSelectConnection}
+                        />
+                    )}
+                    {connectionView === SidePanelView.CONNECTION_CREATE && (
+                        <ConnectionCreator
+                            connectionKind={selectedConnectionKind}
+                            nodeFormTemplate={nodeTemplateRef.current}
+                            selectedNode={selectedNodeForConnection}
+                            onSave={handleUpdateNodeWithConnection}
+                        />
+                    )}
                 </PanelContainer>
             )}
         </>
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/DeclareVariableForm/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/DeclareVariableForm/index.tsx
new file mode 100644
index 00000000000..cdfaedf47de
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/DeclareVariableForm/index.tsx
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+    Form,
+    FormProps,
+} from "@wso2/ballerina-side-panel";
+import { CompletionItem } from "@wso2/ui-toolkit";
+import { useEffect, useState } from "react";
+
+
+export const VariableForm = (props: FormProps) => {
+    const { handleSelectedTypeChange } = props;
+    const [formFields, setFormFields] = useState(props.formFields);
+
+    useEffect(() => {
+        setFormFields(props.formFields);
+    }, [props.formFields]);
+
+    const handleOnTypeChange = (type: CompletionItem) => {
+        updateExpressionValueTypeConstraint(type?.value || '');
+        handleSelectedTypeChange(type);
+    };
+
+    const updateExpressionValueTypeConstraint = (valueTypeConstraint: string) => {
+        const fieldsWithoutExpression = props.formFields.filter((field) => {
+            return field.type !== "ACTION_OR_EXPRESSION";
+        });
+        const expressionField = props.formFields.find((field) => field.type === "ACTION_OR_EXPRESSION");
+        if (expressionField) {
+            expressionField.valueTypeConstraint = valueTypeConstraint;
+        }
+        const updatedFields = [...fieldsWithoutExpression, expressionField];
+        setFormFields(updatedFields);
+    }
+    return (
+        <>
+            <Form {...props}  handleSelectedTypeChange={handleOnTypeChange} formFields={formFields} />
+        </>
+
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGenerator/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGenerator/index.tsx
index 6af595ddbaa..87f8f991c06 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGenerator/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGenerator/index.tsx
@@ -19,7 +19,6 @@
 import { RefObject, useCallback, useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle } from "react";
 import {
     EVENT_TYPE,
-    ColorThemeKind,
     FlowNode,
     LineRange,
     NodePosition,
@@ -36,7 +35,9 @@ import {
     RecordTypeField,
     Imports,
     CodeData,
-    VisualizableField
+    VisualizableField,
+    Member,
+    TypeNodeKind
 } from "@wso2/ballerina-core";
 import {
     FormField,
@@ -80,12 +81,19 @@ import {
     updateNodeWithProperties,
 } from "../form-utils";
 import ForkForm from "../ForkForm";
-import { getHelperPane } from "../../HelperPane";
 import { FormTypeEditor } from "../../TypeEditor";
 import { getTypeHelper } from "../../TypeHelper";
 import { EXPRESSION_EXTRACTION_REGEX } from "../../../../constants";
 import MatchForm from "../MatchForm";
+import { FormSubmitOptions } from "../../FlowDiagram";
+import { getHelperPaneNew } from "../../HelperPaneNew";
+import { VariableForm } from "../DeclareVariableForm";
 import VectorKnowledgeBaseForm from "../VectorKnowledgeBaseForm";
+import { EditorContext, StackItem } from "@wso2/type-editor";
+import DynamicModal from "../../../../components/Modal";
+import React from "react";
+import { SidePanelView } from "../../FlowDiagram/PanelManager";
+import { ConnectionKind } from "../../../../components/ConnectionSelector";
 
 interface TypeEditorState {
     isOpen: boolean;
@@ -116,11 +124,14 @@ interface FormProps {
         description?: string; // Optional description explaining what the action button does
         callback: () => void;
     };
+    handleOnFormSubmit?: (updatedNode?: FlowNode, openInDataMapper?: boolean, options?: FormSubmitOptions) => void;
+    isInModal?: boolean;
     scopeFieldAddon?: React.ReactNode;
     newServerUrl?: string;
     onChange?: (fieldKey: string, value: any, allValues: FormValues) => void;
     mcpTools?: { name: string; description?: string }[];
     onToolsChange?: (selectedTools: string[]) => void;
+    navigateToPanel?: (panel: SidePanelView, connectionKind?: ConnectionKind) => void;
 }
 
 // Styled component for the action button description
@@ -146,6 +157,30 @@ const StyledActionButton = styled(Button)`
     }
 `;
 
+export const BreadcrumbContainer = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 20px;
+    background: ${ThemeColors.SURFACE_CONTAINER};
+    border-bottom: 1px solid ${ThemeColors.OUTLINE_VARIANT};
+`;
+
+export const BreadcrumbItem = styled.span`
+    color: ${ThemeColors.ON_SURFACE_VARIANT};
+    font-size: var(--vscode-font-size);
+    
+    &:last-child {
+        color: ${ThemeColors.ON_SURFACE};
+        font-weight: 500;
+    }
+`;
+
+export const BreadcrumbSeparator = styled.span`
+    color: ${ThemeColors.ON_SURFACE_VARIANT};
+    font-size: var(--vscode-font-size);
+`;
+
 export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(function FormGenerator(props: FormProps, ref: React.ForwardedRef<FormExpressionEditorRef>) {
     const {
         fileName,
@@ -165,6 +200,8 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
         disableSaveButton,
         actionButtonConfig,
         submitText,
+        handleOnFormSubmit,
+        isInModal,
         scopeFieldAddon,
         newServerUrl,
         onChange,
@@ -186,8 +223,58 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
     const [types, setTypes] = useState<CompletionItem[]>([]);
     const [filteredTypes, setFilteredTypes] = useState<CompletionItem[]>([]);
     const expressionOffsetRef = useRef<number>(0); // To track the expression offset on adding import statements
+
+    const [selectedType, setSelectedType] = useState<CompletionItem | null>(null);
+
     const importsCodedataRef = useRef<any>(null); // To store codeData for getVisualizableFields
 
+    //stack for recursive type creation
+    const [stack, setStack] = useState<StackItem[]>([{
+        isDirty: false,
+        type: undefined
+    }]);
+    const [refetchStates, setRefetchStates] = useState<boolean[]>([false]);
+
+    const pushTypeStack = (item: StackItem) => {
+        setStack((prev) => [...prev, item]);
+        setRefetchStates((prev) => [...prev, false]);
+    };
+
+    const popTypeStack = () => {
+        setStack((prev) => prev.slice(0, -1));
+        setRefetchStates((prev) => {
+            const newStates = [...prev];
+            const currentState = newStates.pop();
+            if (currentState && newStates.length > 0) {
+                newStates[newStates.length - 1] = true;
+            }
+            return newStates;
+        });
+    };
+
+    const peekTypeStack = (): StackItem | null => {
+        return stack.length > 0 ? stack[stack.length - 1] : null;
+    };
+
+    const replaceTop = (item: StackItem) => {
+        if (stack.length === 0) return;
+        setStack((prev) => {
+            const newStack = [...prev];
+            newStack[newStack.length - 1] = item;
+            return newStack;
+        });
+    }
+
+    const setRefetchForCurrentModal = (shouldRefetch: boolean) => {
+        setRefetchStates((prev) => {
+            const newStates = [...prev];
+            if (newStates.length > 0) {
+                newStates[newStates.length - 1] = shouldRefetch;
+            }
+            return newStates;
+        });
+    };
+
     useEffect(() => {
         if (rpcClient) {
             // Set current theme
@@ -269,7 +356,7 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
         if (node.codedata.node === "VARIABLE") {
             const codedata = importsCodedataRef.current || { symbol: formProperties?.type.value };
             rpcClient
-                .getInlineDataMapperRpcClient()
+                .getDataMapperRpcClient()
                 .getVisualizableFields({ filePath: fileName, codedata })
                 .then((res) => {
                     setVisualizableField(res.visualizableProperties);
@@ -345,6 +432,17 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
         setTypeEditorState({ isOpen, fieldKey: editingField?.key, newTypeValue: f[editingField?.key] });
     };
 
+    const handleTypeEditorStateChange = (state: boolean) => {
+        if (!state) {
+            if (stack.length > 1) {
+                popTypeStack();
+                return;
+            }
+            stack[0].type = undefined
+        }
+        setTypeEditorState({ isOpen: state });
+    }
+
     const handleUpdateImports = (key: string, imports: Imports, codedata?: CodeData) => {
         importsCodedataRef.current = codedata;
         const importKey = Object.keys(imports)?.[0];
@@ -605,7 +703,7 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
     };
 
     const onTypeEditorClosed = () => {
-        setTypeEditorState({ isOpen: false });
+        setTypeEditorState({ isOpen: stack.length !== 0 });
     };
 
     const onTypeChange = async (type: Type) => {
@@ -616,7 +714,7 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
             return field;
         });
         setFields(updatedFields);
-        setTypeEditorState({ isOpen: false });
+        setTypeEditorState({ isOpen: true });
     };
 
     const handleGetHelperPane = (
@@ -629,7 +727,8 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
         changeHelperPaneState: (isOpen: boolean) => void,
         helperPaneHeight: HelperPaneHeight,
         recordTypeField?: RecordTypeField,
-        isAssignIdentifier?: boolean
+        isAssignIdentifier?: boolean,
+        valueTypeConstraint?: string,
     ) => {
         const handleHelperPaneClose = () => {
             debouncedRetrieveCompletions.cancel();
@@ -637,7 +736,7 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
             handleExpressionEditorCancel();
         }
 
-        return getHelperPane({
+        return getHelperPaneNew({
             fieldKey: fieldKey,
             fileName: fileName,
             targetLineRange: updateLineRange(targetLineRange, expressionOffsetRef.current),
@@ -650,7 +749,15 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
             helperPaneHeight: helperPaneHeight,
             recordTypeField: recordTypeField,
             isAssignIdentifier: isAssignIdentifier,
-            updateImports: handleUpdateImports
+            updateImports: handleUpdateImports,
+            completions: completions,
+            projectPath: projectPath,
+            handleOnFormSubmit: handleOnFormSubmit,
+            selectedType: selectedType,
+            filteredCompletions: filteredCompletions,
+            isInModal: isInModal,
+            valueTypeConstraint: valueTypeConstraint,
+            handleRetrieveCompletions: handleRetrieveCompletions,
         });
     };
 
@@ -665,6 +772,7 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
         changeHelperPaneState: (isOpen: boolean) => void,
         typeHelperHeight: HelperPaneHeight,
         onTypeCreate: () => void,
+        exprRef?: RefObject<FormExpressionEditorRef>,
     ) => {
         const handleCreateNewType = (typeName: string) => {
             onTypeCreate();
@@ -690,7 +798,8 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
             changeTypeHelperState: changeHelperPaneState,
             updateImports: handleUpdateImports,
             onTypeCreate: handleCreateNewType,
-            onCloseCompletions: handleCloseCompletions
+            onCloseCompletions: handleCloseCompletions,
+            exprRef: exprRef,
         });
     }
 
@@ -709,8 +818,9 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
             onCompletionItemSelect: handleCompletionItemSelect,
             onBlur: handleExpressionEditorBlur,
             onCancel: handleExpressionEditorCancel,
-            helperPaneOrigin: "left",
-            helperPaneHeight: "full",
+            helperPaneOrigin: "vertical",
+            helperPaneHeight: "default",
+            helperPaneZIndex: isInModal ? 40001 : undefined,
         } as FormExpressionEditorProps;
     }, [
         filteredCompletions,
@@ -729,16 +839,59 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
     const fetchVisualizableFields = async (filePath: string, typeName?: string) => {
         const codedata = importsCodedataRef.current || { symbol: typeName };
         const res = await rpcClient
-            .getInlineDataMapperRpcClient()
-            .getVisualizableFields({ filePath, codedata});
+            .getDataMapperRpcClient()
+            .getVisualizableFields({ filePath, codedata });
         setVisualizableField(res.visualizableProperties);
         importsCodedataRef.current = {};
     };
 
     const handleTypeCreate = (typeName?: string) => {
-        setTypeEditorState({ isOpen: true, newTypeValue: typeName, fieldKey: typeEditorState.fieldKey });
+        try {
+            setTypeEditorState({ isOpen: stack.length !== 0, newTypeValue: typeName, fieldKey: typeEditorState.fieldKey });
+            popTypeStack()
+        } catch (e) {
+            console.error(e)
+        }
     };
 
+    const onSaveType = (type: Type) => {
+        if (stack.length > 0) {
+            setRefetchForCurrentModal(true);
+            popTypeStack();
+        } else {
+            setTypeEditorState({ isOpen: false });
+        }
+    }
+
+    const handleSelectedTypeChange = (type: CompletionItem) => {
+        setSelectedType(type);
+    }
+
+    const getNewTypeCreateForm = () => {
+        pushTypeStack({
+            type: {
+                name: "",
+                members: [] as Member[],
+                editable: true,
+                metadata: {
+                    description: "",
+                    label: ""
+                },
+                properties: {},
+                codedata: {
+                    node: "RECORD" as TypeNodeKind
+                },
+                includes: [] as string[],
+                allowAdditionalFields: false
+            },
+            isDirty: false
+        })
+        setTypeEditorState({
+            isOpen: true,
+            newTypeValue: ""
+        })
+    }
+
     // handle if node form
     if (node?.codedata.node === "IF") {
         return (
@@ -808,6 +961,7 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
                 resetUpdatedExpressionField={resetUpdatedExpressionField}
                 subPanelView={subPanelView}
                 disableSaveButton={disableSaveButton}
+                navigateToPanel={props.navigateToPanel}
             />
         );
     }
@@ -834,9 +988,79 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
         </ActionButtonContainer>
     ) : undefined;
 
+    // handle declare variable node form
+    if (node?.codedata.node === "VARIABLE") {
+        return (
+            <EditorContext.Provider value={{ stack, push: pushTypeStack, pop: popTypeStack, peek: peekTypeStack, replaceTop: replaceTop }}>
+                <VariableForm
+                    formFields={fields}
+                    projectPath={projectPath}
+                    selectedNode={node.codedata.node}
+                    openRecordEditor={handleOpenTypeEditor}
+                    onSubmit={handleOnSubmit}
+                    openView={handleOpenView}
+                    openSubPanel={openSubPanel}
+                    subPanelView={subPanelView}
+                    expressionEditor={expressionEditor}
+                    targetLineRange={targetLineRange}
+                    fileName={fileName}
+                    isSaving={showProgressIndicator}
+                    submitText={submitText}
+                    updatedExpressionField={updatedExpressionField}
+                    resetUpdatedExpressionField={resetUpdatedExpressionField}
+                    mergeFormDataWithFlowNode={mergeFormDataWithFlowNode}
+                    handleVisualizableFields={fetchVisualizableFields}
+                    visualizableField={visualizableField}
+                    infoLabel={infoLabel}
+                    disableSaveButton={disableSaveButton}
+                    actionButton={actionButton}
+                    recordTypeFields={recordTypeFields}
+                    isInferredReturnType={!!node.codedata?.inferredReturnType}
+                    formImports={formImports}
+                    handleSelectedTypeChange={handleSelectedTypeChange}
+                    preserveOrder={node.codedata.node === "VARIABLE" || node.codedata.node === "CONFIG_VARIABLE"}
+                />
+                {
+                    stack.map((item, i) => <DynamicModal
+                        key={i}
+                        width={420}
+                        height={600}
+                        anchorRef={undefined}
+                        title="Create New Type"
+                        openState={typeEditorState.isOpen}
+                        setOpenState={handleTypeEditorStateChange}>
+                        <div style={{ padding: '0px 15px' }}>
+                            <BreadcrumbContainer>
+                                {stack.slice(0, i + 1).map((stackItem, index) => (
+                                    <React.Fragment key={index}>
+                                        {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}
+                                        <BreadcrumbItem>
+                                            {stackItem?.type?.name || "New Type"}
+                                        </BreadcrumbItem>
+                                    </React.Fragment>
+                                ))}
+                            </BreadcrumbContainer>
+                            <FormTypeEditor
+                                type={peekTypeStack()?.type}
+                                newType={peekTypeStack() ? peekTypeStack().isDirty : false}
+                                newTypeValue={typeEditorState.newTypeValue}
+                                isGraphql={isGraphql}
+                                onTypeChange={onTypeChange}
+                                onSaveType={onSaveType}
+                                onTypeCreate={handleTypeCreate}
+                                getNewTypeCreateForm={getNewTypeCreateForm}
+                                refetchTypes={refetchStates[i]}
+                            />
+                        </div>
+                    </DynamicModal>)
+                }
+            </EditorContext.Provider>
+        );
+    }
+
     // default form
     return (
-        <>
+        <EditorContext.Provider value={{ stack, push: pushTypeStack, pop: popTypeStack, peek: peekTypeStack, replaceTop: replaceTop }}>
             {fields && fields.length > 0 && (
                 <Form
                     ref={ref}
@@ -864,6 +1088,7 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
                     recordTypeFields={recordTypeFields}
                     isInferredReturnType={!!node.codedata?.inferredReturnType}
                     formImports={formImports}
+                    handleSelectedTypeChange={handleSelectedTypeChange}
                     preserveOrder={node.codedata.node === "VARIABLE" || node.codedata.node === "CONFIG_VARIABLE"}
                     scopeFieldAddon={scopeFieldAddon}
                     newServerUrl={newServerUrl}
@@ -872,18 +1097,41 @@ export const FormGenerator = forwardRef<FormExpressionEditorRef, FormProps>(func
                     onToolsChange={props.onToolsChange}
                 />
             )}
-            {typeEditorState.isOpen && (
-                <PanelContainer title={"New Type"} show={true} onClose={onTypeEditorClosed}>
-                    <FormTypeEditor
-                        newType={true}
-                        newTypeValue={typeEditorState.newTypeValue}
-                        isGraphql={isGraphql}
-                        onTypeChange={onTypeChange}
-                        onTypeCreate={handleTypeCreate}
-                    />
-                </PanelContainer>
-            )}
-        </>
+            {
+                stack.map((item, i) => <DynamicModal
+                    key={i}
+                    width={420}
+                    height={600}
+                    anchorRef={undefined}
+                    title="Create New Type"
+                    openState={typeEditorState.isOpen}
+                    setOpenState={handleTypeEditorStateChange}>
+                    <div style={{ padding: '0px 20px' }}>
+                        <BreadcrumbContainer>
+                            {stack.slice(0, i + 1).map((stackItem, index) => (
+                                <React.Fragment key={index}>
+                                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}
+                                    <BreadcrumbItem>
+                                        {stackItem?.type?.name || "New Type"}
+                                    </BreadcrumbItem>
+                                </React.Fragment>
+                            ))}
+                        </BreadcrumbContainer>
+                        <FormTypeEditor
+                            type={peekTypeStack()?.type}
+                            newType={peekTypeStack() ? peekTypeStack().isDirty : false}
+                            newTypeValue={typeEditorState.newTypeValue}
+                            isGraphql={isGraphql}
+                            onTypeChange={onTypeChange}
+                            onSaveType={onSaveType}
+                            onTypeCreate={handleTypeCreate}
+                            getNewTypeCreateForm={getNewTypeCreateForm}
+                            refetchTypes={refetchStates[i]}
+                        />
+                    </div>
+                </DynamicModal>)
+            }
+        </EditorContext.Provider>
     );
 });
 
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGeneratorNew/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGeneratorNew/index.tsx
index 9751e11b995..2cfd62adf27 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGeneratorNew/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/FormGeneratorNew/index.tsx
@@ -32,7 +32,10 @@ import {
     RecordTypeField,
     FormDiagnostics,
     Imports,
-    CodeData
+    CodeData,
+    LinePosition,
+    TypeNodeKind,
+    Member
 } from "@wso2/ballerina-core";
 import {
     FormField,
@@ -57,11 +60,15 @@ import {
     removeDuplicateDiagnostics,
     updateLineRange
 } from "../../../../utils/bi";
-import { debounce, set } from "lodash";
-import { getHelperPane } from "../../HelperPane";
+import { debounce } from "lodash";
 import { FormTypeEditor } from "../../TypeEditor";
 import { getTypeHelper } from "../../TypeHelper";
 import { EXPRESSION_EXTRACTION_REGEX } from "../../../../constants";
+import { getHelperPaneNew } from "../../HelperPaneNew";
+import React from "react";
+import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbSeparator } from "../FormGenerator";
+import { EditorContext, StackItem } from "@wso2/type-editor";
+import DynamicModal from "../../../../components/Modal";
 
 interface TypeEditorState {
     isOpen: boolean;
@@ -72,7 +79,7 @@ interface TypeEditorState {
 interface FormProps {
     fileName: string;
     fields: FormField[];
-    targetLineRange: LineRange;
+    targetLineRange?: LineRange;
     projectPath?: string;
     submitText?: string;
     cancelText?: string;
@@ -128,11 +135,15 @@ export function FormGeneratorNew(props: FormProps) {
         concertRequired,
         description,
         preserveFieldOrder,
-        injectedComponents
+        injectedComponents,
     } = props;
 
     const { rpcClient } = useRpcContext();
 
+    const getAdjustedStartLine = (targetLineRange: LineRange | undefined, expressionOffset: number): LinePosition | undefined => {
+        return targetLineRange ? updateLineRange(targetLineRange, expressionOffset).startLine : undefined;
+    };
+
     const [typeEditorState, setTypeEditorState] = useState<TypeEditorState>({ isOpen: false, newTypeValue: "" });
 
     /* Expression editor related state and ref variables */
@@ -146,6 +157,88 @@ export function FormGeneratorNew(props: FormProps) {
 
     const [fieldsValues, setFields] = useState<FormField[]>(fields);
     const [formImports, setFormImports] = useState<FormImports>({});
+    const [selectedType, setSelectedType] = useState<CompletionItem | null>(null);
+    const [refetchStates, setRefetchStates] = useState<boolean[]>([false]);
+    //stack for recursive type creation
+    const [stack, setStack] = useState<StackItem[]>([{
+        isDirty: false,
+        type: undefined
+    }]);
+
+    const pushTypeStack = (item: StackItem) => {
+        setStack((prev) => [...prev, item]);
+        setRefetchStates((prev) => [...prev, false]);
+    };
+
+    const popTypeStack = () => {
+        setStack((prev) => prev.slice(0, -1));
+        setRefetchStates((prev) => {
+            const newStates = [...prev];
+            const currentState = newStates.pop();
+            if (currentState && newStates.length > 0) {
+                newStates[newStates.length - 1] = true;
+            }
+            return newStates;
+        });
+    };
+
+    const peekTypeStack = (): StackItem | null => {
+        return stack.length > 0 ? stack[stack.length - 1] : null;
+    };
+
+    const replaceTop = (item: StackItem) => {
+        if (stack.length === 0) return;
+        setStack((prev) => {
+            const newStack = [...prev];
+            newStack[newStack.length - 1] = item;
+            return newStack;
+        });
+    }
+
+    const setRefetchForCurrentModal = (shouldRefetch: boolean) => {
+        setRefetchStates((prev) => {
+            const newStates = [...prev];
+            if (newStates.length > 0) {
+                newStates[newStates.length - 1] = shouldRefetch;
+            }
+            return newStates;
+        });
+    };
+
+    const defaultType = (): Type => {
+        if (typeEditorState.field?.type === 'PARAM_MANAGER') {
+            return {
+                name: typeEditorState.newTypeValue || "MyType",
+                editable: true,
+                metadata: {
+                    label: "",
+                    description: "",
+                },
+                codedata: {
+                    node: "RECORD",
+                },
+                properties: {},
+                members: [],
+                includes: [] as string[],
+                allowAdditionalFields: false
+            };
+        } return {
+            name: typeEditorState.newTypeValue || "MyType",
+            editable: true,
+            metadata: {
+                label: "",
+                description: ""
+            },
+            codedata: {
+                node: "CLASS"
+            },
+            properties: {},
+            members: [],
+            includes: [] as string[],
+            functions: []
+        };
+    }
+
 
     useEffect(() => {
         if (rpcClient) {
@@ -244,7 +337,7 @@ export function FormGeneratorNew(props: FormProps) {
                         filePath: fileName,
                         context: {
                             expression: value,
-                            startLine: updateLineRange(targetLineRange, expressionOffsetRef.current).startLine,
+                            startLine: getAdjustedStartLine(targetLineRange, expressionOffsetRef.current),
                             lineOffset: lineOffset,
                             offset: charOffset,
                             codedata: undefined,
@@ -314,7 +407,7 @@ export function FormGeneratorNew(props: FormProps) {
                 if (!types.length) {
                     const types = await rpcClient.getBIDiagramRpcClient().getVisibleTypes({
                         filePath: fileName,
-                        position: updateLineRange(targetLineRange, expressionOffsetRef.current).startLine,
+                        position: getAdjustedStartLine(targetLineRange, expressionOffsetRef.current),
                         ...(valueTypeConstraint && { typeConstraint: valueTypeConstraint })
                     });
 
@@ -397,7 +490,7 @@ export function FormGeneratorNew(props: FormProps) {
                             filePath: fileName,
                             context: {
                                 expression: expression,
-                                startLine: updateLineRange(targetLineRange, expressionOffsetRef.current).startLine,
+                                startLine: getAdjustedStartLine(targetLineRange, expressionOffsetRef.current),
                                 lineOffset: 0,
                                 offset: 0,
                                 codedata: field.codedata,
@@ -408,7 +501,7 @@ export function FormGeneratorNew(props: FormProps) {
                         let uniqueDiagnostics = removeDuplicateDiagnostics(response.diagnostics);
                         // HACK: filter unknown module and undefined type diagnostics for local connections
                         uniqueDiagnostics = filterUnsupportedDiagnostics(uniqueDiagnostics);
-                        
+
                         setDiagnosticsInfo({ key, diagnostics: uniqueDiagnostics });
                     }
                 } catch (error) {
@@ -433,17 +526,19 @@ export function FormGeneratorNew(props: FormProps) {
         changeHelperPaneState: (isOpen: boolean) => void,
         helperPaneHeight: HelperPaneHeight,
         recordTypeField?: RecordTypeField,
-        isAssignIdentifier?: boolean
+        isAssignIdentifier?: boolean,
+        valueTypeConstraint?: string,
     ) => {
         const handleHelperPaneClose = () => {
+            debouncedRetrieveCompletions.cancel();
             changeHelperPaneState(false);
             handleExpressionEditorCancel();
         }
 
-        return getHelperPane({
+        return getHelperPaneNew({
             fieldKey: fieldKey,
             fileName: fileName,
-            targetLineRange: updateLineRange(targetLineRange, expressionOffsetRef.current),
+            targetLineRange: targetLineRange ? updateLineRange(targetLineRange, expressionOffsetRef.current) : undefined,
             exprRef: exprRef,
             anchorRef: anchorRef,
             onClose: handleHelperPaneClose,
@@ -453,7 +548,14 @@ export function FormGeneratorNew(props: FormProps) {
             helperPaneHeight: helperPaneHeight,
             recordTypeField: recordTypeField,
             isAssignIdentifier: isAssignIdentifier,
-            updateImports: handleUpdateImports
+            updateImports: handleUpdateImports,
+            completions: completions,
+            projectPath: projectPath,
+            selectedType: selectedType,
+            filteredCompletions: filteredCompletions,
+            isInModal: false,
+            valueTypeConstraint: valueTypeConstraint,
+            handleRetrieveCompletions: handleRetrieveCompletions,
         });
     };
 
@@ -468,6 +570,7 @@ export function FormGeneratorNew(props: FormProps) {
         changeHelperPaneState: (isOpen: boolean) => void,
         typeHelperHeight: HelperPaneHeight,
         onTypeCreate: () => void,
+        exprRef: RefObject<FormExpressionEditorRef>,
     ) => {
         const formField = fieldsValues.find(f => f.key === fieldKey);
         const handleCreateNewType = (typeName: string) => {
@@ -485,7 +588,7 @@ export function FormGeneratorNew(props: FormProps) {
             valueTypeConstraint: valueTypeConstraint,
             typeBrowserRef: typeBrowserRef,
             filePath: fileName,
-            targetLineRange: updateLineRange(targetLineRange, expressionOffsetRef.current),
+            targetLineRange: targetLineRange ? updateLineRange(targetLineRange, expressionOffsetRef.current) : undefined,
             currentType: currentType,
             currentCursorPosition: currentCursorPosition,
             helperPaneHeight: typeHelperHeight,
@@ -494,12 +597,13 @@ export function FormGeneratorNew(props: FormProps) {
             changeTypeHelperState: changeHelperPaneState,
             updateImports: handleUpdateImports,
             onTypeCreate: handleCreateNewType,
-            onCloseCompletions: handleCloseCompletions
+            onCloseCompletions: handleCloseCompletions,
+            exprRef: exprRef,
         });
     }
 
     const handleTypeChange = async (type: Type) => {
-        setTypeEditorState({ isOpen: false });
+        setTypeEditorState({ isOpen: true });
 
         if (typeEditorState.field) {
             const updatedFields = fieldsValues.map(field => {
@@ -559,52 +663,48 @@ export function FormGeneratorNew(props: FormProps) {
         }
     }
 
-    const defaultType = (): Type => {
-        if (typeEditorState.field.type === 'PARAM_MANAGER') {
-            return {
-                name: typeEditorState.newTypeValue || "MyType",
-                editable: true,
-                metadata: {
-                    label: "",
-                    description: "",
-                },
-                codedata: {
-                    node: "RECORD",
-                },
-                properties: {},
-                members: [],
-                includes: [] as string[],
-                allowAdditionalFields: false
-            };
-        }
-        return {
-            name: typeEditorState.newTypeValue || "MyType",
-            editable: true,
-            metadata: {
-                label: "",
-                description: ""
-            },
-            codedata: {
-                node: "CLASS"
-            },
-            properties: {},
-            members: [],
-            includes: [] as string[],
-            functions: []
-        };
+    const handleSelectedTypeChange = (type: CompletionItem) => {
+        setSelectedType(type);
     }
 
     const onCloseTypeEditor = () => {
         setTypeEditorState({ isOpen: false });
     };
 
+    const handleTypeEditorStateChange = (state: boolean) => {
+        if (!state) {
+            if (stack.length > 1) {
+                popTypeStack();
+                return;
+            }
+            stack[0].type = undefined
+        }
+        setTypeEditorState({ isOpen: state });
+    }
+
+    const getNewTypeCreateForm = () => {
+        pushTypeStack({
+            type: defaultType(), 
+            isDirty: false
+        })
+    }
+
+    const onSaveType = (type: Type) => {
+        if (stack.length > 0) {
+            setRefetchForCurrentModal(true);
+            popTypeStack();
+        } else {
+            setTypeEditorState({ isOpen: false });
+        }
+    }
+
     const extractArgsFromFunction = async (value: string, property: ExpressionProperty, cursorPosition: number) => {
         const { lineOffset, charOffset } = calculateExpressionOffsets(value, cursorPosition);
         const signatureHelp = await rpcClient.getBIDiagramRpcClient().getSignatureHelp({
             filePath: fileName,
             context: {
                 expression: value,
-                startLine: updateLineRange(targetLineRange, expressionOffsetRef.current).startLine,
+                startLine: getAdjustedStartLine(targetLineRange, expressionOffsetRef.current),
                 lineOffset: lineOffset,
                 offset: charOffset,
                 codedata: undefined,
@@ -634,8 +734,8 @@ export function FormGeneratorNew(props: FormProps) {
             onCompletionItemSelect: handleCompletionItemSelect,
             onBlur: handleExpressionEditorBlur,
             onCancel: handleExpressionEditorCancel,
-            helperPaneOrigin: helperPaneSide || "right",
-            helperPaneHeight: "3/4"
+            helperPaneOrigin: "vertical",
+            helperPaneHeight: "default",
         } as FormExpressionEditorProps;
     }, [
         filteredCompletions,
@@ -658,28 +758,9 @@ export function FormGeneratorNew(props: FormProps) {
         setTypeEditorState({ isOpen: true, newTypeValue: typeName, field: typeEditorState.field });
     };
 
-    const renderTypeEditor = (isGraphql: boolean) => (
-        <>
-            <PanelContainer
-                title={"New Type"}
-                show={true}
-                onClose={onCloseTypeEditor}
-            >
-                <FormTypeEditor
-                    newType={true}
-                    onTypeChange={handleTypeChange}
-                    newTypeValue={typeEditorState.newTypeValue}
-                    onTypeCreate={handleTypeCreate}
-                    {...(isGraphql && { type: defaultType(), isGraphql: true })}
-                />
-            </PanelContainer>
-            <Overlay sx={{ background: `${ThemeColors.SURFACE_CONTAINER}`, opacity: `0.3`, zIndex: 1000 }} />
-        </>
-    );
-
     // default form
     return (
-        <>
+        <EditorContext.Provider value={{ stack, push: pushTypeStack, pop: popTypeStack, peek: peekTypeStack, replaceTop: replaceTop }}>
             {fields && fields.length > 0 && (
                 <Form
                     nestedForm={nestedForm}
@@ -708,12 +789,44 @@ export function FormGeneratorNew(props: FormProps) {
                     formImports={formImports}
                     preserveOrder={preserveFieldOrder}
                     injectedComponents={injectedComponents}
+                    handleSelectedTypeChange={handleSelectedTypeChange}
                 />
             )}
-            {typeEditorState.isOpen && (
-                renderTypeEditor(isGraphqlEditor)
-            )}
-        </>
+            {
+                stack.map((item, i) => <DynamicModal
+                    key={i}
+                    width={420}
+                    height={600}
+                    anchorRef={undefined}
+                    title="Create New Type"
+                    openState={typeEditorState.isOpen}
+                    setOpenState={handleTypeEditorStateChange}>
+                    <div style={{ padding: '0px 15px' }}>
+                        <BreadcrumbContainer>
+                            {stack.slice(0, i + 1).map((stackItem, index) => (
+                                <React.Fragment key={index}>
+                                    {index > 0 && <BreadcrumbSeparator>/</BreadcrumbSeparator>}
+                                    <BreadcrumbItem>
+                                        {stackItem?.type?.name || "New Type"}
+                                    </BreadcrumbItem>
+                                </React.Fragment>
+                            ))}
+                        </BreadcrumbContainer>
+                        <FormTypeEditor
+                            type={ isGraphqlEditor? defaultType() : undefined}
+                            newType={peekTypeStack() ? peekTypeStack().isDirty : false}
+                            newTypeValue={typeEditorState.newTypeValue}
+                            onTypeChange={handleTypeChange}
+                            onSaveType={onSaveType}
+                            onTypeCreate={handleTypeCreate}
+                            getNewTypeCreateForm={getNewTypeCreateForm}
+                            refetchTypes={refetchStates[i]}
+                            isGraphql={isGraphqlEditor}
+                        />
+                    </div>
+                </DynamicModal>)
+            }
+        </EditorContext.Provider>
     );
 }
 
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/MatchForm/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/MatchForm/index.tsx
index 4bc82255f89..055fea307f8 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/MatchForm/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/MatchForm/index.tsx
@@ -166,8 +166,8 @@ export function MatchForm(props: MatchFormProps) {
     useEffect(() => {
         handleFormOpen();
         // set target value
-        if (node.properties.condition) {
-            setValue(`branch-${TARGET_FIELD_INDEX}`, node.properties.condition.value);
+        if (node.properties.matchTarget) {
+            setValue(`branch-${TARGET_FIELD_INDEX}`, node.properties.matchTarget.value);
         }
         // set branch values
         branches.forEach((branch, index) => {
@@ -203,7 +203,7 @@ export function MatchForm(props: MatchFormProps) {
             }
 
             // update target value
-            updatedNode.properties.condition.value = data[`branch-${TARGET_FIELD_INDEX}`]?.trim();
+            updatedNode.properties.matchTarget.value = data[`branch-${TARGET_FIELD_INDEX}`]?.trim();
 
             // Update branches with form values
             const updatedBranches = branches.map((branch, index) => {
@@ -512,7 +512,7 @@ export function MatchForm(props: MatchFormProps) {
     console.log(">>> Match node", node);
 
     const disableSaveButton = !isValid || isValidating || showProgressIndicator;
-    const targetField = convertNodePropertyToFormField(`branch-${TARGET_FIELD_INDEX}`, node.properties.condition);
+    const targetField = convertNodePropertyToFormField(`branch-${TARGET_FIELD_INDEX}`, node.properties.matchTarget);
     targetField.label = "Target";
 
     return (
@@ -520,7 +520,6 @@ export function MatchForm(props: MatchFormProps) {
             <FormStyles.Row>
                 <ExpressionEditor
                     {...expressionEditor}
-                    ref={exprRef}
                     control={control}
                     field={targetField}
                     watch={watch}
@@ -549,7 +548,6 @@ export function MatchForm(props: MatchFormProps) {
                         <FormStyles.Row key={field.key}>
                             <ExpressionEditor
                                 {...expressionEditor}
-                                ref={exprRef}
                                 control={control}
                                 field={field}
                                 watch={watch}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/VectorKnowledgeBaseForm/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/VectorKnowledgeBaseForm/index.tsx
index c654935848a..76d38cdefbd 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/VectorKnowledgeBaseForm/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/Forms/VectorKnowledgeBaseForm/index.tsx
@@ -16,8 +16,8 @@
  * under the License.
  */
 
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Button, Dropdown, OptionProps, ProgressRing, ThemeColors, Typography } from "@wso2/ui-toolkit";
+import { useEffect, useState } from "react";
+import { Button, Codicon, ProgressRing, ThemeColors, Typography } from "@wso2/ui-toolkit";
 import styled from "@emotion/styled";
 
 import { FlowNode, LineRange, SubPanel, SubPanelView } from "@wso2/ballerina-core";
@@ -38,12 +38,16 @@ import {
     removeEmptyNodes,
     updateNodeWithProperties,
 } from "../form-utils";
+import { SidePanelView } from "../../FlowDiagram/PanelManager";
+import { ConnectionKind } from "../../../../components/ConnectionSelector";
+
+const DEFAULT_CHUNKER_VALUE = "\"AUTO\"";
 
 namespace S {
     export const Container = styled.div`
         display: flex;
         flex-direction: column;
-        height: calc(100vh - 100px);
+        height: calc(100vh - 60px);
         min-height: 600px;
     `;
 
@@ -53,29 +57,14 @@ namespace S {
         padding: 16px;
         display: flex;
         flex-direction: column;
-        gap: 20px;
     `;
 
     export const Content = styled.div`
         display: flex;
         flex-direction: column;
-        /* gap: 20px; */
         flex: 1;
     `;
 
-    export const SectionTitle = styled.h3`
-        font-size: 14px;
-        font-weight: 600;
-        margin: 0 0 12px 0;
-        color: ${ThemeColors.ON_SURFACE};
-    `;
-
-    export const DropdownContainer = styled.div`
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-    `;
-
     export const Footer = styled.div`
         display: flex;
         gap: 8px;
@@ -89,18 +78,11 @@ namespace S {
     `;
 
     export const FormWrapper = styled.div`
-        margin-top: 12px;
         & > div:first-child {
             padding: 0px;
         }
     `;
 
-    export const Divider = styled.div`
-        height: 1px;
-        background: ${ThemeColors.OUTLINE_VARIANT};
-        margin-bottom: 20px;
-    `;
-
     export const SpinnerContainer = styled.div`
         display: flex;
         justify-content: center;
@@ -126,6 +108,7 @@ interface VectorKnowledgeBaseFormProps {
     resetUpdatedExpressionField?: () => void;
     subPanelView?: SubPanelView;
     disableSaveButton?: boolean;
+    navigateToPanel?: (panel: SidePanelView, connectionKind?: ConnectionKind) => void;
 }
 
 interface ComponentData {
@@ -148,61 +131,21 @@ export function VectorKnowledgeBaseForm(props: VectorKnowledgeBaseFormProps) {
     } = props;
 
     const { rpcClient } = useRpcContext();
-    const [vectorStoreOptions, setVectorStoreOptions] = useState<OptionProps[]>([]);
-    const [embeddingProviderOptions, setEmbeddingProviderOptions] = useState<OptionProps[]>([]);
-
-    const [vectorStoreFields, setVectorStoreFields] = useState<FormField[]>([]);
-    const [embeddingProviderFields, setEmbeddingProviderFields] = useState<FormField[]>([]);
     const [knowledgeBaseFields, setKnowledgeBaseFields] = useState<FormField[]>([]);
     const [formImports, setFormImports] = useState<FormImports>({});
-    const [isVectorStoreFormValid, setIsVectorStoreFormValid] = useState(false);
-    const [isEmbeddingProviderFormValid, setIsEmbeddingProviderFormValid] = useState(false);
-    const [isKnowledgeBaseFormValid, setIsKnowledgeBaseFormValid] = useState(false);
-    const [componentDataMap, setComponentDataMap] = useState<ComponentData>({});
     const [isInitialized, setIsInitialized] = useState(false);
-    const [vectorStoreVariableName, setVectorStoreVariableName] = useState<string>("");
-    const [embeddingProviderVariableName, setEmbeddingProviderVariableName] = useState<string>("");
-    const [vectorStoreFormValues, setVectorStoreFormValues] = useState<FormValues>({});
-    const [embeddingProviderFormValues, setEmbeddingProviderFormValues] = useState<FormValues>({});
+    const [isFormValid, setIsFormValid] = useState(true);
     const [knowledgeBaseFormValues, setKnowledgeBaseFormValues] = useState<FormValues>({});
-    const [isEditForm, setIsEditForm] = useState<boolean>(false);
-    const [selectedVectorStoreOption, setSelectedVectorStoreOption] = useState<string>("");
-    const [selectedEmbeddingProviderOption, setSelectedEmbeddingProviderOption] = useState<string>("");
     const [saving, setSaving] = useState<boolean>(false);
 
-    const vectorStoreTemplateRef = useRef<FlowNode | null>(null);
-    const embeddingProviderTemplateRef = useRef<FlowNode | null>(null);
-    const vectorStoreLineRange = useRef<LineRange | null>(null);
-    const embeddingProviderLineRange = useRef<LineRange | null>(null);
-
     useEffect(() => {
-        // Check if this is an edit form
-        const formProperties = getFormProperties(node);
-        const vectorStoreValue = formProperties.vectorStore?.value as string;
-        const embeddingModelValue = formProperties.embeddingModel?.value as string;
-        const isEdit = !!(vectorStoreValue && embeddingModelValue);
-        setIsEditForm(isEdit);
-
-        if (isEdit) {
-            editFormInit();
-        } else {
-            initializeForm();
-            fetchAvailableComponents();
-        }
+        initializeForm();
         handleFormOpen();
-
         return () => {
             handleFormClose();
         };
     }, []);
 
-    // Update knowledge base fields when variable names change
-    useEffect(() => {
-        if (vectorStoreVariableName && embeddingProviderVariableName && knowledgeBaseFields.length > 0) {
-            updateKnowledgeBaseFields();
-        }
-    }, [vectorStoreVariableName, embeddingProviderVariableName]);
-
     const handleFormOpen = () => {
         rpcClient
             .getBIDiagramRpcClient()
@@ -221,406 +164,43 @@ export function VectorKnowledgeBaseForm(props: VectorKnowledgeBaseFormProps) {
             });
     };
 
-    const initializeForm = () => {
-        // Initialize knowledge base form fields from the node
-        const formProperties = getFormProperties(node);
-        formProperties.vectorStore.hidden = true;
-        formProperties.embeddingModel.hidden = true;
-        const fields = convertNodePropertiesToFormFields(formProperties);
-        setKnowledgeBaseFields(fields);
-        setFormImports(getImportsForFormFields(fields));
-    };
-
-    const editFormInit = async () => {
-        try {
-            // Get the current vector store and embedding model values
-            const formProperties = getFormProperties(node);
-            const vectorStoreValue = formProperties.vectorStore?.value;
-            const embeddingModelValue = formProperties.embeddingModel?.value;
-
-            // Fetch module nodes to find existing components
-            const moduleNodesResponse = await rpcClient.getBIDiagramRpcClient().getModuleNodes();
-            // Find the vector store and embedding provider nodes
-            let vectorStoreNode: FlowNode | null = null;
-            let embeddingProviderNode: FlowNode | null = null;
-
-            // Search through module nodes to find matching variable names
-            moduleNodesResponse.flowModel.connections.forEach((moduleNode) => {
-                const moduleNodeVariableValue = moduleNode.properties?.variable?.value;
-                const isStringValue = typeof moduleNodeVariableValue === "string";
-
-                if (isStringValue && moduleNodeVariableValue === vectorStoreValue) {
-                    if (
-                        moduleNode.codedata.node === "VECTOR_STORE" ||
-                        moduleNode.codedata.object?.includes("VectorStore")
-                    ) {
-                        vectorStoreNode = moduleNode;
-                        vectorStoreTemplateRef.current = moduleNode;
-                        vectorStoreLineRange.current = moduleNode.codedata.lineRange;
-                        setVectorStoreVariableName(vectorStoreValue as string);
-                    }
-                }
-
-                if (isStringValue && moduleNodeVariableValue === embeddingModelValue) {
-                    if (
-                        moduleNode.codedata.node === "EMBEDDING_PROVIDER" ||
-                        moduleNode.codedata.object?.includes("EmbeddingProvider") ||
-                        moduleNode.codedata.symbol?.includes("EmbeddingProvider")
-                    ) {
-                        embeddingProviderNode = moduleNode;
-                        embeddingProviderTemplateRef.current = moduleNode;
-                        embeddingProviderLineRange.current = moduleNode.codedata.lineRange;
-                        setEmbeddingProviderVariableName(embeddingModelValue as string);
-                    }
-                }
-            });
-
-            if (vectorStoreNode && embeddingProviderNode) {
-                // Process vector store fields
-                const vectorStoreFormProperties = getFormProperties(vectorStoreNode);
-                const vectorStoreProps = vectorStoreFormProperties as any;
-                if (vectorStoreProps.variable) {
-                    vectorStoreProps.variable.hidden = true;
-                }
-                if (vectorStoreProps.type) {
-                    vectorStoreProps.type.hidden = true;
-                }
-                const vectorStoreFields = convertNodePropertiesToFormFields(vectorStoreFormProperties);
-                setVectorStoreFields(vectorStoreFields);
-
-                // Set existing vector store form values
-                const vectorStoreExistingValues: FormValues = {};
-                Object.keys(vectorStoreNode.properties || {}).forEach((key) => {
-                    if (key !== "variable" && key !== "type") {
-                        vectorStoreExistingValues[key] = (vectorStoreNode.properties as any)[key].value;
-                    }
-                });
-                setVectorStoreFormValues(vectorStoreExistingValues);
-
-                // Process embedding provider fields
-                const embeddingProviderFormProperties = getFormProperties(embeddingProviderNode);
-                const embeddingProviderProps = embeddingProviderFormProperties as any;
-                if (embeddingProviderProps.variable) {
-                    embeddingProviderProps.variable.hidden = true;
-                }
-                if (embeddingProviderProps.type) {
-                    embeddingProviderProps.type.hidden = true;
-                }
-                const embeddingProviderFields = convertNodePropertiesToFormFields(embeddingProviderFormProperties);
-                setEmbeddingProviderFields(embeddingProviderFields);
-
-                // Set existing embedding provider form values
-                const embeddingProviderExistingValues: FormValues = {};
-                Object.keys(embeddingProviderNode.properties || {}).forEach((key) => {
-                    if (key !== "variable" && key !== "type") {
-                        embeddingProviderExistingValues[key] = (embeddingProviderNode.properties as any)[key].value;
-                    }
-                });
-                setEmbeddingProviderFormValues(embeddingProviderExistingValues);
-            }
-
-            // Initialize knowledge base fields (same as create mode)
-            const knowledgeBaseProps = formProperties as any;
-            if (knowledgeBaseProps.vectorStore) {
-                knowledgeBaseProps.vectorStore.hidden = true;
-            }
-            if (knowledgeBaseProps.embeddingModel) {
-                knowledgeBaseProps.embeddingModel.hidden = true;
-            }
-            const knowledgeBaseFields = convertNodePropertiesToFormFields(formProperties);
-            setKnowledgeBaseFields(knowledgeBaseFields);
-            setFormImports(getImportsForFormFields(knowledgeBaseFields));
-
-            // Set existing knowledge base form values
-            const knowledgeBaseExistingValues: FormValues = {};
-            Object.keys(node.properties || {}).forEach((key) => {
-                if (key !== "vectorStore" && key !== "embeddingModel") {
-                    knowledgeBaseExistingValues[key] = (node.properties as any)[key].value;
-                }
-            });
-            setKnowledgeBaseFormValues(knowledgeBaseExistingValues);
-
-            // load dropdown options and default selections
-            fetchAvailableComponentsInEditMode(vectorStoreNode, embeddingProviderNode);
-
-            setIsInitialized(true);
-        } catch (error) {
-            console.error("Error initializing edit form:", error);
-            setIsInitialized(true); // Still set to prevent infinite loading
-        }
-    };
-
-    const fetchAvailableComponents = async () => {
-        try {
-            // Fetch available vector stores
-            const vectorStoreResponse = await rpcClient.getBIDiagramRpcClient().search({
-                position: { startLine: targetLineRange.startLine, endLine: targetLineRange.endLine },
-                filePath: fileName,
-                queryMap: undefined,
-                searchKind: "VECTOR_STORE",
-            });
-
-            const vectorStoreOptions: OptionProps[] = [];
-            const vectorStoreDataMap: ComponentData = {};
-
-            vectorStoreResponse.categories?.forEach((category) => {
-                category.items?.forEach((item) => {
-                    // Check if it's an AvailableNode (not a nested Category)
-                    if ("codedata" in item && "enabled" in item) {
-                        const flowNode = item as any; // AvailableNode extends FlowNode
-                        vectorStoreOptions.push({
-                            id: item.metadata.label,
-                            content: item.metadata.label,
-                            value: item.metadata.label,
-                        });
-                        vectorStoreDataMap[item.metadata.label] = flowNode;
-                    }
-                });
-            });
-
-            setVectorStoreOptions(vectorStoreOptions);
-
-            // Fetch available embedding providers
-            const embeddingProviderResponse = await rpcClient.getBIDiagramRpcClient().search({
-                position: { startLine: targetLineRange.startLine, endLine: targetLineRange.endLine },
-                filePath: fileName,
-                queryMap: undefined,
-                searchKind: "EMBEDDING_PROVIDER",
-            });
-
-            const embeddingProviderOptions: OptionProps[] = [];
-            const embeddingProviderDataMap: ComponentData = {};
-
-            embeddingProviderResponse.categories?.forEach((category) => {
-                category.items?.forEach((item) => {
-                    // Check if it's an AvailableNode (not a nested Category)
-                    if ("codedata" in item && "enabled" in item) {
-                        const flowNode = item as any; // AvailableNode extends FlowNode
-                        embeddingProviderOptions.push({
-                            id: item.metadata.label,
-                            content: item.metadata.label,
-                            value: item.metadata.label,
-                        });
-                        embeddingProviderDataMap[item.metadata.label] = flowNode;
-                    }
-                });
-            });
-
-            setEmbeddingProviderOptions(embeddingProviderOptions);
-            const fullComponentDataMap = { ...vectorStoreDataMap, ...embeddingProviderDataMap };
-            setComponentDataMap(fullComponentDataMap);
-
-            // Set default selections and load their forms
-            const defaultVectorStore = vectorStoreOptions.find((option) => {
-                const content = option.content?.toString().toLowerCase() || "";
-                return content.includes("memory") || content.includes("in-memory");
-            });
-
-            const defaultEmbeddingProvider = embeddingProviderOptions.find((option) => {
-                const content = option.content?.toString().toLowerCase() || "";
-                return content.includes("wso2") || content.includes("default");
-            });
-
-            // Load default vector store
-            if (defaultVectorStore) {
-                await handleVectorStoreSelect(defaultVectorStore.value, fullComponentDataMap);
-            } else if (vectorStoreOptions.length > 0) {
-                await handleVectorStoreSelect(vectorStoreOptions[0].value, fullComponentDataMap);
-            }
-
-            // Load default embedding provider
-            if (defaultEmbeddingProvider) {
-                await handleEmbeddingProviderSelect(defaultEmbeddingProvider.value, fullComponentDataMap);
-            } else if (embeddingProviderOptions.length > 0) {
-                await handleEmbeddingProviderSelect(embeddingProviderOptions[0].value, fullComponentDataMap);
-            }
-
-            setIsInitialized(true);
-        } catch (error) {
-            console.error("Error fetching available components:", error);
-        }
-    };
-
-    const fetchAvailableComponentsInEditMode = async (vectorStoreNode: FlowNode, embeddingProviderNode: FlowNode) => {
-        try {
-            // Fetch available vector stores
-            const vectorStoreResponse = await rpcClient.getBIDiagramRpcClient().search({
-                position: { startLine: targetLineRange.startLine, endLine: targetLineRange.endLine },
-                filePath: fileName,
-                queryMap: undefined,
-                searchKind: "VECTOR_STORE",
-            });
-
-            const vectorStoreOptions: OptionProps[] = [];
-            const vectorStoreDataMap: ComponentData = {};
-
-            vectorStoreResponse.categories?.forEach((category) => {
-                category.items?.forEach((item) => {
-                    // Check if it's an AvailableNode (not a nested Category)
-                    if ("codedata" in item && "enabled" in item) {
-                        const flowNode = item as any; // AvailableNode extends FlowNode
-                        vectorStoreOptions.push({
-                            id: item.metadata.label,
-                            content: item.metadata.label,
-                            value: item.metadata.label,
-                        });
-                        vectorStoreDataMap[item.metadata.label] = flowNode;
-                        if (
-                            flowNode.codedata.module === vectorStoreNode.codedata.module &&
-                            flowNode.codedata.org === vectorStoreNode.codedata.org
-                        ) {
-                            setSelectedVectorStoreOption(item.metadata.label);
-                        }
-                    }
-                });
-            });
-
-            setVectorStoreOptions(vectorStoreOptions);
-
-            // Fetch available embedding providers
-            const embeddingProviderResponse = await rpcClient.getBIDiagramRpcClient().search({
-                position: { startLine: targetLineRange.startLine, endLine: targetLineRange.endLine },
-                filePath: fileName,
-                queryMap: undefined,
-                searchKind: "EMBEDDING_PROVIDER",
-            });
-
-            const embeddingProviderOptions: OptionProps[] = [];
-            const embeddingProviderDataMap: ComponentData = {};
-
-            embeddingProviderResponse.categories?.forEach((category) => {
-                category.items?.forEach((item) => {
-                    // Check if it's an AvailableNode (not a nested Category)
-                    if ("codedata" in item && "enabled" in item) {
-                        const flowNode = item as any; // AvailableNode extends FlowNode
-                        embeddingProviderOptions.push({
-                            id: item.metadata.label,
-                            content: item.metadata.label,
-                            value: item.metadata.label,
-                        });
-                        embeddingProviderDataMap[item.metadata.label] = flowNode;
-                        if (
-                            flowNode.codedata.module === embeddingProviderNode.codedata.module &&
-                            flowNode.codedata.org === embeddingProviderNode.codedata.org
-                        ) {
-                            setSelectedEmbeddingProviderOption(item.metadata.label);
-                        }
-                    }
-                });
-            });
-
-            setEmbeddingProviderOptions(embeddingProviderOptions);
-            const fullComponentDataMap = { ...vectorStoreDataMap, ...embeddingProviderDataMap };
-            setComponentDataMap(fullComponentDataMap);
-        } catch (error) {
-            console.error("Error fetching available components:", error);
-        }
-    };
-
-    const handleVectorStoreSelect = async (value: string, dataMap?: ComponentData) => {
-        const currentDataMap = dataMap || componentDataMap;
-        const vectorStoreNode = currentDataMap[value];
-        if (vectorStoreNode) {
-            vectorStoreTemplateRef.current = vectorStoreNode;
-            setSelectedVectorStoreOption(value);
-
-            // Get node template for the selected vector store to show its form
-            try {
-                const template = await rpcClient.getBIDiagramRpcClient().getNodeTemplate({
-                    filePath: fileName,
-                    position: { line: targetLineRange.startLine.line, offset: 0 },
-                    id: vectorStoreNode.codedata,
-                });
-
-                const variableName = `${template.flowNode.properties.variable.value || "vectorStore"}`;
-                setVectorStoreVariableName(variableName);
-
-                // Store template for later use in submission
-                vectorStoreTemplateRef.current = template.flowNode;
-
-                const formProperties = getFormProperties(template.flowNode);
-                const props = formProperties as any;
-                if (props.variable) {
-                    props.variable.hidden = true;
-                }
-                if (props.type) {
-                    props.type.hidden = true;
-                }
-                const fields = convertNodePropertiesToFormFields(formProperties);
-                setVectorStoreFields(fields);
-
-                // Update knowledge base fields with the vector store variable name
-                updateKnowledgeBaseFields();
-            } catch (error) {
-                console.error("Error fetching vector store template:", error);
-            }
+    const getConnectionKind = (fieldName: string): ConnectionKind | undefined => {
+        switch (fieldName) {
+            case "vectorStore":
+                return "VECTOR_STORE";
+            case "embeddingModel":
+                return "EMBEDDING_PROVIDER";
+            case "chunker":
+                return "CHUNKER";
+            default:
+                return undefined;
         }
     };
 
-    const handleEmbeddingProviderSelect = async (value: string, dataMap?: ComponentData) => {
-        const currentDataMap = dataMap || componentDataMap;
-        const embeddingProviderNode = currentDataMap[value];
-        if (embeddingProviderNode) {
-            embeddingProviderTemplateRef.current = embeddingProviderNode;
-            setSelectedEmbeddingProviderOption(value);
-
-            // Get node template for the selected embedding provider to show its form
-            try {
-                const template = await rpcClient.getBIDiagramRpcClient().getNodeTemplate({
-                    filePath: fileName,
-                    position: { line: targetLineRange.startLine.line, offset: 0 },
-                    id: embeddingProviderNode.codedata,
-                });
-
-                const variableName = `${template.flowNode.properties.variable.value || "embeddingProvider"}`;
-                setEmbeddingProviderVariableName(variableName);
-
-                // Store template for later use in submission
-                embeddingProviderTemplateRef.current = template.flowNode;
-
-                const formProperties = getFormProperties(template.flowNode);
-                const props = formProperties as any;
-                if (props.variable) {
-                    props.variable.hidden = true;
-                }
-                if (props.type) {
-                    props.type.hidden = true;
-                }
-                const fields = convertNodePropertiesToFormFields(formProperties);
-                setEmbeddingProviderFields(fields);
-
-                // Update knowledge base fields with the embedding provider variable name
-                updateKnowledgeBaseFields();
-            } catch (error) {
-                console.error("Error fetching embedding provider template:", error);
+    const initializeForm = () => {
+        const formProperties = getFormProperties(node);
+        const fields = convertNodePropertiesToFormFields(formProperties);
+        const actionFields = ["vectorStore", "embeddingModel", "chunker"];
+        fields.forEach((field) => {
+            const originalName = field?.codedata?.originalName;
+            if (actionFields.includes(originalName)) {
+                field.type = "ACTION_EXPRESSION";
+                field.advanced = false;
+                field.actionCallback = () => {
+                    props.navigateToPanel?.(SidePanelView.CONNECTION_SELECT, getConnectionKind(originalName));
+                };
+                field.actionLabel = <><Codicon name="add" />{`Create New ${field?.label}`}</>;
+                field.imports = node?.properties?.type?.imports;
             }
-        }
-    };
-
-    const updateKnowledgeBaseFields = () => {
-        // Update knowledge base fields with variable names from selected components
-        if (knowledgeBaseFields.length > 0) {
-            let hasChanges = false;
-            const updatedFields = knowledgeBaseFields.map((field) => {
-                if (field.key === "vectorStore" && vectorStoreVariableName && field.value !== vectorStoreVariableName) {
-                    hasChanges = true;
-                    return { ...field, value: vectorStoreVariableName };
-                }
-                if (
-                    field.key === "embeddingModel" &&
-                    embeddingProviderVariableName &&
-                    field.value !== embeddingProviderVariableName
-                ) {
-                    hasChanges = true;
-                    return { ...field, value: embeddingProviderVariableName };
-                }
-                return field;
-            });
-
-            if (hasChanges) {
-                setKnowledgeBaseFields(updatedFields);
+            if (originalName === "chunker") {
+                // hack: set default value for chunker field
+                field.defaultValue = DEFAULT_CHUNKER_VALUE;
+                field.value ??= field.defaultValue;
             }
-        }
+        });
+        setKnowledgeBaseFields(fields);
+        setFormImports(getImportsForFormFields(fields));
+        setIsInitialized(true);
     };
 
     const mergeFormDataWithFlowNode = (data: FormValues, targetLineRange: LineRange): FlowNode => {
@@ -632,105 +212,9 @@ export function VectorKnowledgeBaseForm(props: VectorKnowledgeBaseFormProps) {
     };
 
     const handleSubmit = async () => {
-        if (!vectorStoreTemplateRef.current || !embeddingProviderTemplateRef.current) {
-            console.error("Vector store and embedding provider must be selected");
-            return;
-        }
-
-        if (!vectorStoreTemplateRef.current || !embeddingProviderTemplateRef.current) {
-            console.error("Templates not loaded yet");
-            return;
-        }
-
         try {
             setSaving(true);
-            // Use stored templates instead of fetching again
-            const vectorStoreTemplate = vectorStoreTemplateRef.current;
-            const embeddingProviderTemplate = embeddingProviderTemplateRef.current;
-
-            // Merge vector store template with form values
-            const vectorStoreNode = cloneDeep(vectorStoreTemplate);
-            const vectorStoreUpdatedNode = updateNodeWithProperties(
-                vectorStoreNode,
-                vectorStoreNode,
-                vectorStoreFormValues,
-                formImports
-            );
-            // Set the variable name
-            if (vectorStoreUpdatedNode.properties?.variable) {
-                vectorStoreUpdatedNode.properties.variable.value = vectorStoreVariableName;
-            }
-
-            // Merge embedding provider template with form values
-            const embeddingProviderNode = cloneDeep(embeddingProviderTemplate);
-            const embeddingProviderUpdatedNode = updateNodeWithProperties(
-                embeddingProviderNode,
-                embeddingProviderNode,
-                embeddingProviderFormValues,
-                formImports
-            );
-            // Set the variable name
-            if (embeddingProviderUpdatedNode.properties?.variable) {
-                embeddingProviderUpdatedNode.properties.variable.value = embeddingProviderVariableName;
-            }
-
-            if (isEditForm) {
-                if (!vectorStoreLineRange.current || !embeddingProviderLineRange.current) {
-                    console.error("Vector store and embedding provider line range not found");
-                    return;
-                }
-                // new vector store node
-                const newVectorStoreNode = cloneDeep(vectorStoreUpdatedNode);
-                newVectorStoreNode.codedata.lineRange = {
-                    fileName: vectorStoreLineRange.current.fileName,
-                    startLine: vectorStoreLineRange.current.startLine,
-                    endLine: vectorStoreLineRange.current.endLine,
-                };
-                newVectorStoreNode.codedata.isNew = false;
-                const newEmbeddingProviderNode = cloneDeep(embeddingProviderUpdatedNode);
-                newEmbeddingProviderNode.codedata.lineRange = {
-                    fileName: embeddingProviderLineRange.current.fileName,
-                    startLine: embeddingProviderLineRange.current.startLine,
-                    endLine: embeddingProviderLineRange.current.endLine,
-                };
-                newEmbeddingProviderNode.codedata.isNew = false;
-
-                // save the vector store and embedding provider nodes
-                const vectorStoreSourceCode = await rpcClient.getBIDiagramRpcClient().getSourceCode({
-                    filePath: fileName,
-                    flowNode: newVectorStoreNode,
-                });
-                console.log(">>> vector store source code updated", { newVectorStoreNode, vectorStoreSourceCode });
-                const embeddingProviderSourceCode = await rpcClient.getBIDiagramRpcClient().getSourceCode({
-                    filePath: fileName,
-                    flowNode: newEmbeddingProviderNode,
-                });
-                console.log(">>> embedding provider source code updated", {
-                    newEmbeddingProviderNode,
-                    embeddingProviderSourceCode,
-                });
-            } else {
-                // save the vector store and embedding provider nodes
-                const vectorStoreSourceCode = await rpcClient.getBIDiagramRpcClient().getSourceCode({
-                    filePath: fileName,
-                    flowNode: vectorStoreUpdatedNode,
-                });
-                console.log(">>> vector store source code", { vectorStoreSourceCode });
-                const embeddingProviderSourceCode = await rpcClient.getBIDiagramRpcClient().getSourceCode({
-                    filePath: fileName,
-                    flowNode: embeddingProviderUpdatedNode,
-                });
-                console.log(">>> embedding provider source code", { embeddingProviderSourceCode });
-            }
-            // Create knowledge base node with form values and references
-            const combinedKnowledgeBaseData = {
-                ...knowledgeBaseFormValues,
-                vectorStore: vectorStoreVariableName,
-                embeddingModel: embeddingProviderVariableName,
-            };
-
-            const knowledgeBaseNode = mergeFormDataWithFlowNode(combinedKnowledgeBaseData, targetLineRange);
-
+            const knowledgeBaseNode = mergeFormDataWithFlowNode(knowledgeBaseFormValues, targetLineRange);
             onSubmit(knowledgeBaseNode, false, formImports);
         } catch (error) {
             console.error("Error creating vector knowledge base:", error);
@@ -739,24 +223,6 @@ export function VectorKnowledgeBaseForm(props: VectorKnowledgeBaseFormProps) {
         }
     };
 
-    const isFormValid = useMemo(() => {
-        return (
-            vectorStoreTemplateRef.current &&
-            embeddingProviderTemplateRef.current &&
-            isVectorStoreFormValid &&
-            isEmbeddingProviderFormValid &&
-            isKnowledgeBaseFormValid &&
-            vectorStoreVariableName &&
-            embeddingProviderVariableName
-        );
-    }, [
-        isVectorStoreFormValid,
-        isEmbeddingProviderFormValid,
-        isKnowledgeBaseFormValid,
-        vectorStoreVariableName,
-        embeddingProviderVariableName,
-    ]);
-
     if (!isInitialized) {
         return (
             <S.Container>
@@ -773,77 +239,6 @@ export function VectorKnowledgeBaseForm(props: VectorKnowledgeBaseFormProps) {
         <S.Container>
             <S.ScrollableContent>
                 <S.Content>
-                    <S.DropdownContainer>
-                        <Dropdown
-                            id="vector-store-dropdown"
-                            label="Select Vector Store"
-                            items={vectorStoreOptions}
-                            onChange={(e) => handleVectorStoreSelect(e.target.value)}
-                            placeholder="Choose a vector store..."
-                            value={selectedVectorStoreOption}
-                        />
-                    </S.DropdownContainer>
-                    <S.FormWrapper>
-                        {vectorStoreFields.length > 0 ? (
-                            <Form
-                                formFields={vectorStoreFields}
-                                fileName={fileName}
-                                targetLineRange={targetLineRange}
-                                selectedNode={vectorStoreTemplateRef.current?.codedata.node}
-                                expressionEditor={expressionEditor}
-                                openSubPanel={openSubPanel}
-                                subPanelView={subPanelView}
-                                updatedExpressionField={updatedExpressionField}
-                                resetUpdatedExpressionField={resetUpdatedExpressionField}
-                                hideSaveButton={true}
-                                onValidityChange={setIsVectorStoreFormValid}
-                                nestedForm={true}
-                                compact={true}
-                                onChange={(fieldKey, value, allValues) => {
-                                    setVectorStoreFormValues(allValues);
-                                }}
-                            />
-                        ) : (
-                            <Typography variant="progress">Loading vector store configuration...</Typography>
-                        )}
-                    </S.FormWrapper>
-                    <S.Divider />
-                    <S.DropdownContainer>
-                        <Dropdown
-                            id="embedding-provider-dropdown"
-                            label="Select Embedding Provider"
-                            items={embeddingProviderOptions}
-                            onChange={(e) => handleEmbeddingProviderSelect(e.target.value)}
-                            placeholder="Choose an embedding provider..."
-                            value={selectedEmbeddingProviderOption}
-                        />
-                    </S.DropdownContainer>
-
-                    <S.FormWrapper>
-                        {embeddingProviderFields.length > 0 ? (
-                            <Form
-                                formFields={embeddingProviderFields}
-                                fileName={fileName}
-                                targetLineRange={targetLineRange}
-                                selectedNode={embeddingProviderTemplateRef.current?.codedata.node}
-                                expressionEditor={expressionEditor}
-                                openSubPanel={openSubPanel}
-                                subPanelView={subPanelView}
-                                updatedExpressionField={updatedExpressionField}
-                                resetUpdatedExpressionField={resetUpdatedExpressionField}
-                                hideSaveButton={true}
-                                onValidityChange={setIsEmbeddingProviderFormValid}
-                                nestedForm={true}
-                                compact={true}
-                                onChange={(fieldKey, value, allValues) => {
-                                    setEmbeddingProviderFormValues(allValues);
-                                }}
-                            />
-                        ) : (
-                            <Typography variant="progress">Loading embedding provider configuration...</Typography>
-                        )}
-                    </S.FormWrapper>
-                    <S.Divider />
                     {knowledgeBaseFields.length > 0 && (
                         <S.FormWrapper>
                             <Form
@@ -856,11 +251,15 @@ export function VectorKnowledgeBaseForm(props: VectorKnowledgeBaseFormProps) {
                                 subPanelView={subPanelView}
                                 updatedExpressionField={updatedExpressionField}
                                 resetUpdatedExpressionField={resetUpdatedExpressionField}
-                                hideSaveButton={true}
-                                onValidityChange={setIsKnowledgeBaseFormValid}
+                                hideSaveButton={false}
                                 nestedForm={true}
                                 compact={true}
+                                onSubmit={handleSubmit}
+                                disableSaveButton={!isFormValid}
+                                isSaving={showProgressIndicator || saving}
                                 onChange={(fieldKey, value, allValues) => {
+                                    const isValid = allValues["vectorStore"] !== "" && allValues["embeddingModel"] !== "";
+                                    setIsFormValid(isValid);
                                     setKnowledgeBaseFormValues(allValues);
                                 }}
                             />
@@ -868,16 +267,6 @@ export function VectorKnowledgeBaseForm(props: VectorKnowledgeBaseFormProps) {
                     )}
                 </S.Content>
             </S.ScrollableContent>
-
-            <S.Footer>
-                <Button
-                    appearance="primary"
-                    onClick={handleSubmit}
-                    disabled={!isFormValid || showProgressIndicator || disableSaveButton || saving}
-                >
-                    {showProgressIndicator || saving ? <Typography variant="progress">Saving...</Typography> : "Save"}
-                </Button>
-            </S.Footer>
         </S.Container>
     );
 }
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/FunctionFormStatic/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FunctionFormStatic/index.tsx
new file mode 100644
index 00000000000..9924b79ecbc
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/FunctionFormStatic/index.tsx
@@ -0,0 +1,393 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { FunctionNode, LineRange, NodeKind, NodeProperties as OriginalNodeProperties, NodePropertyKey, DIRECTORY_MAP, EVENT_TYPE } from "@wso2/ballerina-core";
+import styled from "@emotion/styled";
+import { useRpcContext } from "@wso2/ballerina-rpc-client";
+import { FormField, FormImports, FormValues } from "@wso2/ballerina-side-panel";
+import { URI, Utils } from "vscode-uri";
+import FormGeneratorNew from "../Forms/FormGeneratorNew";
+import { FormHeader } from "../../../components/FormHeader";
+import { convertConfig, getImportsForProperty } from "../../../utils/bi";
+import { LoadingContainer } from "../../styles";
+import { LoadingRing } from "../../../components/Loader";
+
+type NodeProperties = OriginalNodeProperties & {
+    [key: string]: any;
+};
+
+const FormContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    max-width: 600px;
+    height: 400px;
+    gap: 20px;
+    overflow-y: auto;
+    padding-right: 16px;
+
+    /* Add smooth scrolling */
+    scroll-behavior: smooth;
+    
+    /* Style the scrollbar */
+    &::-webkit-scrollbar {
+        width: 8px;
+    }
+    
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+    
+    &::-webkit-scrollbar-thumb {
+        background-color: rgba(0, 0, 0, 0.2);
+        border-radius: 4px;
+    }
+`;
+
+interface FunctionFormProps {
+    filePath: string;
+    projectPath: string;
+    functionName: string;
+    isDataMapper?: boolean;
+    isNpFunction?: boolean;
+    isAutomation?: boolean;
+    handleSubmit?: (value: string) => void;
+    defaultType?: string;
+}
+
+export function FunctionFormStatic(props: FunctionFormProps) {
+    const { rpcClient } = useRpcContext();
+    const { projectPath, functionName, filePath, isDataMapper, isNpFunction, isAutomation, defaultType, handleSubmit } = props;
+
+    const [functionFields, setFunctionFields] = useState<FormField[]>([]);
+    const [functionNode, setFunctionNode] = useState<FunctionNode>(undefined);
+    const [targetLineRange, setTargetLineRange] = useState<LineRange>();
+    const [saving, setSaving] = useState<boolean>(false);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+
+    const fileName = filePath.split(/[\\/]/).pop();
+    const formType = useRef("Function");
+
+    useEffect(() => {
+        let nodeKind: NodeKind;
+        if (isAutomation || functionName === "main") {
+            nodeKind = 'AUTOMATION';
+            formType.current = "Automation";
+        } else if (isDataMapper) {
+            nodeKind = 'DATA_MAPPER_DEFINITION';
+            formType.current = 'Data Mapper';
+        } else if (isNpFunction) {
+            nodeKind = 'NP_FUNCTION_DEFINITION';
+            formType.current = 'Natural Function';
+        } else {
+            nodeKind = 'FUNCTION_DEFINITION';
+            formType.current = 'Function';
+        }
+
+        if (functionName) {
+            getExistingFunctionNode();
+        } else {
+            getFunctionNode(nodeKind);
+        }
+    }, [isDataMapper, isNpFunction, isAutomation, functionName]);
+
+    useEffect(() => {
+        let fields = functionNode ? convertConfig(functionNode.properties) : [];
+
+        // TODO: Remove this once the hidden flag is implemented 
+        if (isAutomation || functionName === "main") {
+            formType.current = "Automation";
+            const automationFields = fields.filter(field => field.key !== "functionName" && field.key !== "type");
+            fields = automationFields;
+        }
+
+        // update description fields as "TEXTAREA"
+        fields.forEach((field) => {
+            if (field.key === "functionNameDescription" || field.key === "typeDescription") {
+                field.type = "TEXTAREA";
+            }
+            if (field.key === "parameters") {
+                if ((field.valueTypeConstraint as any).value.parameterDescription) {
+                    (field.valueTypeConstraint as any).value.parameterDescription.type = "TEXTAREA";
+                }
+            }
+        });
+
+        setFunctionFields(fields);
+    }, [functionNode]);
+
+    const getFunctionNode = async (kind: NodeKind) => {
+        setIsLoading(true);
+        const res = await rpcClient
+            .getBIDiagramRpcClient()
+            .getNodeTemplate({
+                position: { line: 0, offset: 0 },
+                filePath: Utils.joinPath(URI.file(projectPath), fileName).fsPath,
+                id: { node: kind },
+            });
+        let flowNode = res.flowNode;
+
+        let properties = flowNode.properties as NodeProperties;
+
+        console.log("FLOWNODE", flowNode)
+
+        // Remove the description fields from properties
+        properties = Object.keys(properties).reduce((acc, key) => {
+            if (!key.toLowerCase().includes('functionnamedescription') && !key.toLowerCase().includes('typedescription')) {
+                acc[key] = properties[key];
+            }
+            return acc;
+        }, {} as NodeProperties);
+        flowNode.properties = properties;
+
+        if (defaultType && flowNode.properties && flowNode.properties.type) {
+            flowNode.properties.type.value = defaultType;
+        }
+        if (isNpFunction) {
+            /* 
+            * TODO: Remove this once the LS is updated
+            * HACK: Add the advanced fields under parameters.advanceProperties
+            */
+            // Get all the advanced fields
+            const advancedProperties = Object.fromEntries(
+                Object.entries(properties).filter(([_, property]) => property.advanced)
+            );
+            // Remove the advanced fields from properties
+            properties = Object.fromEntries(
+                Object.entries(properties).filter(([_, property]) => !property.advanced)
+            );
+            flowNode.properties = properties;
+
+            // Add the all the advanced fields to advanceProperties
+            flowNode.properties.parameters = {
+                ...flowNode.properties.parameters,
+                advanceProperties: advancedProperties
+            }
+        }
+
+        setFunctionNode(flowNode);
+        setIsLoading(false);
+        console.log("Function Node: ", flowNode);
+    }
+
+    const getExistingFunctionNode = async () => {
+        setIsLoading(true);
+        const res = await rpcClient
+            .getBIDiagramRpcClient()
+            .getFunctionNode({
+                functionName,
+                fileName,
+                projectPath
+            });
+        let flowNode = res.functionDefinition;
+        if (isNpFunction) {
+            /* 
+            * TODO: Remove this once the LS is updated
+            * HACK: Add the advanced fields under parameters.advanceProperties
+            */
+            // Get all the advanced fields
+            let properties = flowNode.properties as NodeProperties;
+            const advancedProperties = Object.fromEntries(
+                Object.entries(properties).filter(([_, property]) => property.advanced)
+            );
+            // Remove the advanced fields from properties
+            properties = Object.fromEntries(
+                Object.entries(properties).filter(([_, property]) => !property.advanced)
+            );
+            flowNode.properties = properties;
+
+            // Add the all the advanced fields to advanceProperties
+            flowNode.properties.parameters = {
+                ...flowNode.properties.parameters,
+                advanceProperties: advancedProperties
+            }
+        }
+
+        setFunctionNode(flowNode);
+        setIsLoading(false);
+        console.log("Existing Function Node: ", flowNode);
+    }
+
+    const onSubmit = async (data: FormValues, formImports?: FormImports) => {
+        console.log("Function Form Data: ", data);
+        const functionNodeCopy = { ...functionNode };
+
+        /**
+         * TODO: Remove this once the LS is updated
+         * HACK: Add the advanced fields under parameters.advanceProperties back to properties
+         */
+        if (isNpFunction) {
+            // Add values back to properties
+            const properties = functionNodeCopy.properties;
+            functionNodeCopy.properties = {
+                ...properties,
+                ...properties.parameters.advanceProperties,
+            }
+
+            // Remove the advanceProperties from parameters
+            delete properties.parameters.advanceProperties;
+        }
+
+        if (isNpFunction) {
+            // Handle advance properties
+            const enrichFlowNodeForAdvanceProperties = (data: FormValues) => {
+                for (const value of Object.values(data)) {
+                    const nestedData = value.advanceProperties;
+                    if (nestedData) {
+                        for (const [advanceKey, advanceValue] of Object.entries(nestedData)) {
+                            functionNodeCopy.properties[advanceKey as NodePropertyKey].value = advanceValue;
+                        }
+
+                        delete value.advanceProperties;
+                    }
+                }
+            }
+
+            enrichFlowNodeForAdvanceProperties(data);
+        }
+
+        for (const [dataKey, dataValue] of Object.entries(data)) {
+            const properties = functionNodeCopy.properties as NodeProperties;
+            for (const [key, property] of Object.entries(properties)) {
+                if (dataKey === key) {
+                    if (property.valueType === "REPEATABLE_PROPERTY") {
+                        const baseConstraint = property.valueTypeConstraint;
+                        property.value = {};
+                        // Go through the parameters array
+                        for (const [repeatKey, repeatValue] of Object.entries(dataValue)) {
+                            // Create a deep copy for each iteration
+                            const valueConstraint = JSON.parse(JSON.stringify(baseConstraint));
+                            // Fill the values of the parameter constraint
+                            for (const [paramKey, param] of Object.entries((valueConstraint as any).value as NodeProperties)) {
+                                param.value = (repeatValue as any).formValues[paramKey] || "";
+                            }
+                            (property.value as any)[(repeatValue as any).key] = valueConstraint;
+                        }
+                    } else {
+                        property.value = dataValue;
+                    }
+                    const imports = getImportsForProperty(key, formImports);
+                    property.imports = imports;
+                }
+            }
+        }
+        console.log("Updated function node: ", functionNodeCopy);
+        const sourceCode = await rpcClient
+            .getBIDiagramRpcClient()
+            .getSourceCode({ filePath, flowNode: functionNodeCopy, isFunctionNodeUpdate: true });
+
+        if (sourceCode.artifacts.length === 0) {
+            showErrorNotification();
+        }
+        else {
+            handleSubmit(`${sourceCode.artifacts[0].name}()`);
+        }
+        setSaving(false)
+    };
+
+    const handleFormSubmit = async (data: FormValues, formImports?: FormImports) => {
+        setSaving(true);
+        // HACK: Remove new lines from function description fields
+        const descriptionFields = ["functionNameDescription", "typeDescription"];
+        for (const field of descriptionFields) {
+            if (data[field]) {
+                data[field] = data[field]?.replace(/\n/g, " ");
+            }
+        }
+        // HACK: Remove new lines from parameter description
+        if (data.parameters) {
+            for (const parameter of data.parameters) {
+                if (parameter && parameter.formValues?.parameterDescription) {
+                    parameter.formValues.parameterDescription = parameter.formValues.parameterDescription.replace(/\n/g, " ");
+                }
+            }
+        }
+
+        try {
+            await onSubmit(data, formImports);
+        } catch (error) {
+            console.error("Error submitting form: ", error);
+            showErrorNotification();
+        }
+    };
+
+    const showErrorNotification = async () => {
+        const functionType = getFunctionType();
+        await rpcClient
+            .getCommonRpcClient()
+            .showErrorMessage({
+                message: `${functionName ? `Failed to update the ${functionType}` : `Failed to create the ${functionType}`}. `
+            });
+    }
+
+    const getFunctionType = () => {
+        if (isDataMapper) {
+            return "Data Mapper";
+        } else if (isNpFunction) {
+            return "Natural Function";
+        } else if (isAutomation || functionName === "main") {
+            return "Automation";
+        }
+        return "Function";
+    };
+
+    useEffect(() => {
+        if (filePath && rpcClient) {
+            rpcClient
+                .getBIDiagramRpcClient()
+                .getEndOfFile({ filePath })
+                .then((res) => {
+                    setTargetLineRange({
+                        startLine: res,
+                        endLine: res,
+                    });
+                });
+        }
+    }, [filePath, rpcClient]);
+
+    //HACK: Hide is isolated field form function form
+    functionFields.forEach((field) => {
+        if (field.key === "isIsolated") {
+            field.hidden = true;
+        }
+    });
+
+    return (
+        <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+
+            {isLoading && (
+                <LoadingContainer>
+                    <LoadingRing />
+                </LoadingContainer>
+            )}
+            <FormContainer>
+                {filePath && targetLineRange && functionFields.length > 0 &&
+                    <FormGeneratorNew
+                        fileName={filePath}
+                        targetLineRange={targetLineRange}
+                        fields={functionFields}
+                        isSaving={saving}
+                        onSubmit={handleFormSubmit}
+                        submitText={saving ? (functionName ? "Saving..." : "Creating...") : (functionName ? "Save" : "Create")}
+                        selectedNode={functionNode?.codedata?.node}
+                    />
+                }
+            </FormContainer>
+        </div>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/ConfigureRecordPage.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/ConfigureRecordPage.tsx
index 1bf853b308d..c85f0880061 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/ConfigureRecordPage.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/ConfigureRecordPage.tsx
@@ -26,7 +26,7 @@ import { debounce } from "lodash";
 
 type ConfigureRecordPageProps = {
     fileName: string;
-    targetLineRange: LineRange;
+    targetLineRange?: LineRange;
     onChange: (value: string, isRecordConfigureChange: boolean) => void;
     currentValue: string;
     recordTypeField: RecordTypeField;
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/FunctionsPage.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/FunctionsPage.tsx
index 3138cb63a51..4ef98c8b8ac 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/FunctionsPage.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/FunctionsPage.tsx
@@ -42,7 +42,7 @@ type FunctionsPageProps = {
     fieldKey: string;
     anchorRef: RefObject<HTMLDivElement>;
     fileName: string;
-    targetLineRange: LineRange;
+    targetLineRange?: LineRange;
     onClose: () => void;
     onChange: (insertText: CompletionInsertText) => void;
     updateImports: (key: string, imports: {[key: string]: string}) => void;
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/ParameterBranch.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/ParameterBranch.tsx
index e4886b265e4..a2fddd7311b 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/ParameterBranch.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/ParameterBranch.tsx
@@ -15,6 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
 import React, { useState } from "react";
 
 import { TypeField } from "@wso2/ballerina-core";
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/Types/CustomType/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/Types/CustomType/index.tsx
index 0ef73447d39..c45afd16c47 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/Types/CustomType/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/Types/CustomType/index.tsx
@@ -15,6 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
 import React, { useState } from "react";
 
 import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react";
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/Types/InclusionType/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/Types/InclusionType/index.tsx
index 37ec0427e5e..3141405e95c 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/Types/InclusionType/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/Types/InclusionType/index.tsx
@@ -15,6 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
 import React, { useState } from "react";
 
 import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react";
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/Types/RecordType/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/Types/RecordType/index.tsx
index 750c7dcea01..7841775c8ac 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/Types/RecordType/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/Types/RecordType/index.tsx
@@ -15,6 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
 import React, { useState } from "react";
 
 import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react";
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/Types/UnionType/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/Types/UnionType/index.tsx
index dfd1ceaf27c..edd70167fa2 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/Types/UnionType/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/Types/UnionType/index.tsx
@@ -15,7 +15,8 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useRef, useState, useEffect } from "react";
+
+import  { useState, useEffect } from "react";
 
 import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react";
 import { TypeField } from "@wso2/ballerina-core";
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/styles.ts b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/styles.ts
index eabf726c434..a2e8a00ab71 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/styles.ts
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/RecordConstructView/styles.ts
@@ -15,6 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
 import { css } from "@emotion/css";
 
 
@@ -313,5 +314,3 @@ export const useHelperPaneStyles = () => ({
         paddingLeft: '0px',
     }),
 });
-
-
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/SuggestionsPage.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/SuggestionsPage.tsx
index c95f8a81d0a..8cd25af4bcb 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/SuggestionsPage.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/SuggestionsPage.tsx
@@ -26,7 +26,7 @@ import { convertToHelperPaneVariable, filterHelperPaneVariables } from "../../..
 
 type SuggestionsPageProps = {
     fileName: string;
-    targetLineRange: LineRange;
+    targetLineRange?: LineRange;
     defaultValue: string;
     onChange: (value: string) => void;
 };
@@ -42,14 +42,14 @@ export const SuggestionsPage = ({ fileName, targetLineRange, defaultValue, onCha
     const getVariableInfo = useCallback(() => {
         setIsLoading(true);
         setTimeout(() => {
+            const position = targetLineRange
+                ? { line: targetLineRange.startLine.line, offset: targetLineRange.startLine.offset }
+                : undefined;
             rpcClient
                 .getBIDiagramRpcClient()
                 .getVisibleVariableTypes({
                     filePath: fileName,
-                    position: {
-                        line: targetLineRange.startLine.line,
-                        offset: targetLineRange.startLine.offset
-                    }
+                    position
                 })
                 .then((response) => {
                     if (response.categories?.length) {
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/index.tsx
index bb8ae3cfc8d..4b8f16db397 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPane/index.tsx
@@ -28,7 +28,7 @@ import { RecordTypeField } from '@wso2/ballerina-core';
 export type HelperPaneProps = {
     fieldKey: string;
     fileName: string;
-    targetLineRange: LineRange;
+    targetLineRange?: LineRange;
     exprRef: RefObject<FormExpressionEditorRef>;
     anchorRef: RefObject<HTMLDivElement>;
     onClose: () => void;
diff --git a/workspaces/ballerina/ballerina-core/src/rpc-types/inline-data-mapper/interfaces.ts b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/EmptyItemsPlaceHolder.tsx
similarity index 68%
rename from workspaces/ballerina/ballerina-core/src/rpc-types/inline-data-mapper/interfaces.ts
rename to workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/EmptyItemsPlaceHolder.tsx
index ed626f1609c..e312567e6db 100644
--- a/workspaces/ballerina/ballerina-core/src/rpc-types/inline-data-mapper/interfaces.ts
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/EmptyItemsPlaceHolder.tsx
@@ -16,15 +16,16 @@
  * under the License.
  */
 
-import { TypeKind } from "../../interfaces/inline-data-mapper";
-
-export interface IDMType {
-    category: string;
-    kind: TypeKind;
-    typeName?: string;
-    fieldName?: string;
-    memberType?: IDMType;
-    defaultValue?: unknown;
-    optional?: boolean;
-    fields?: IDMType[];
+export const EmptyItemsPlaceHolder = () => {
+    return (
+        <div style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100%',
+            width: '100%'
+        }}>
+            <span>No items found</span>
+        </div>
+    )
 }
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/ExpandableList.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/ExpandableList.tsx
new file mode 100644
index 00000000000..354fdef072b
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/ExpandableList.tsx
@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { HorizontalListContainer, HorizontalListItem, HorizontalListItemLeftContent } from "../styles/HorizontalList"
+import React from "react";
+import styled from "@emotion/styled";
+
+
+type ExpandableListProps = {
+    children: React.ReactNode;
+    sx?: React.CSSProperties;
+};
+
+export const ExpandableList = ({ children, sx }: ExpandableListProps) => {
+    return (
+        <HorizontalListContainer style={sx}>
+            {children}
+        </HorizontalListContainer>
+    );
+};
+
+interface ExpandableListItemProps {
+    children: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    sx?: React.CSSProperties;
+}
+
+const Item = ({ children, onClick, sx }: ExpandableListItemProps) => {
+    return (
+        <HorizontalListItem onClick={onClick} style={sx} className="expandable-list-item">
+            <HorizontalListItemLeftContent>
+                {children}
+            </HorizontalListItemLeftContent>
+        </HorizontalListItem>
+    );
+};
+
+interface ExpandableListSectionProps {
+    children: React.ReactNode;
+    title: string;
+    level?: number;
+    sx?: React.CSSProperties;
+}
+
+
+const Section = ({ children, title, level = 0, sx }: ExpandableListSectionProps) => {
+    return (
+        <ExpandableListSection level={level} style={{ ...sx , display: 'flex', flexDirection: 'column'}}>
+            <ExpandableListSectionTitle style={{marginLeft: '8px'}}>{title}</ExpandableListSectionTitle>
+            {children}
+        </ExpandableListSection>
+    );
+};
+
+
+ExpandableList.Item = Item;
+ExpandableList.Section = Section;
+
+export default ExpandableList;
+
+
+const ExpandableListSection = styled.div<{ level?: number }>`
+   
+`;
+
+
+const ExpandableListSectionTitle = styled.span`
+    font-weight: 600;
+`;
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/FooterButtons.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/FooterButtons.tsx
new file mode 100644
index 00000000000..eee7dddce3f
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/FooterButtons.tsx
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Button, Codicon, ThemeColors } from "@wso2/ui-toolkit";
+import styled from '@emotion/styled';
+
+const InvisibleButton = styled.button`
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    text-align: inherit;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    outline: none;
+    box-shadow: none;
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+`;
+
+type FooterButtonProps = {
+    onClick?: () => void;
+    startIcon: string;
+    title: string;
+    sx?: React.CSSProperties;
+    disabled?:boolean;
+}
+
+const FooterButtons = (props: FooterButtonProps) => {
+    const { onClick, startIcon, title, sx } = props;
+    return (
+        <div style={{ display: "flex", justifyContent: "center", alignItems: "center", margin: "5px", ...sx }}>
+            <InvisibleButton 
+            disabled={props.disabled}
+            onClick={onClick}>
+                <Codicon name={startIcon} sx={{color: ThemeColors.PRIMARY}}/>
+                <span style={{color: ThemeColors.PRIMARY, marginLeft: "10px" }}>{title}</span>
+            </InvisibleButton>
+        </div>
+    )
+}
+
+export default FooterButtons;
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/ParameterBranch.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/ParameterBranch.tsx
new file mode 100644
index 00000000000..6ff47a25c4c
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/ParameterBranch.tsx
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useState } from "react";
+
+import { TypeField } from "@wso2/ballerina-core";
+import { Button } from "@wso2/ui-toolkit";
+
+
+import { useHelperPaneStyles } from "./styles";
+import { isAnyFieldSelected, isRequiredParam } from "./utils";
+
+import * as Types from "./Types";
+
+export interface ParameterBranchProps {
+    parameters: TypeField[];
+    depth: number;
+    onChange: () => void;
+}
+
+export interface TypeProps {
+    param: TypeField;
+    depth: number;
+    onChange: () => void;
+}
+
+export function ParameterBranch(props: ParameterBranchProps) {
+    const { parameters, depth, onChange } = props;
+    const helperStyleClass = useHelperPaneStyles();
+
+    const [showOptionalParams, setShowOptionalParams] = useState(isAnyFieldSelected(parameters));
+
+    const requiredParams: JSX.Element[] = [];
+    const optionalParams: JSX.Element[] = [];
+
+    parameters?.forEach((param: TypeField, index: number) => {
+        let TypeComponent = (Types as any)[param.typeName];
+        const typeProps: TypeProps = {
+            param,
+            depth,
+            onChange,
+        };
+        if (!TypeComponent) {
+            TypeComponent = (Types as any).custom;
+        }
+        if (isRequiredParam(param)) {
+            requiredParams.push(<TypeComponent key={index} {...typeProps} />);
+        } else {
+            optionalParams.push(<TypeComponent key={index} {...typeProps} />);
+        }
+    });
+
+    function toggleOptionalParams(e: any) {
+        setShowOptionalParams(!showOptionalParams);
+    }
+
+    return (
+        <div data-testid="parameter-branch">
+            {requiredParams}
+            {(optionalParams.length > 0 && depth === 1) ? (
+                optionalParams
+            ) : (
+                <>
+                    {optionalParams.length > 0 && (
+                        <div className={helperStyleClass.listOptionalWrapper}>
+                            {/* <div className={helperStyleClass.listOptionalHeader}>Optional fields </div> */}
+                            <Button
+                                data-testid="optional-toggle-button"
+                                className={helperStyleClass.listOptionalBtn}
+                                onClick={toggleOptionalParams}
+                                appearance="secondary"
+                            >
+                                {showOptionalParams ? "Hide" : "Show"}
+                            </Button>
+                        </div>
+                    )}
+                    {showOptionalParams && optionalParams.length > 0 && optionalParams}
+                </>
+            )}
+        </div>
+    );
+}
+
+export const MemoizedParameterBranch = React.memo(ParameterBranch);
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/Types/CustomType/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/Types/CustomType/index.tsx
new file mode 100644
index 00000000000..0ef73447d39
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/Types/CustomType/index.tsx
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useState } from "react";
+
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react";
+import { Codicon, Tooltip, Typography } from "@wso2/ui-toolkit";
+
+import { TypeProps } from "../../ParameterBranch";
+import { useHelperPaneStyles } from "../../styles";
+import { isRequiredParam } from "../../utils";
+
+export default function CustomType(props: TypeProps) {
+    const { param, onChange } = props;
+    const helperStyleClass = useHelperPaneStyles();
+    const requiredParam = isRequiredParam(param);
+    if (requiredParam) {
+        param.selected = true;
+    }
+
+    const [paramSelected, setParamSelected] = useState<boolean>(param.selected || requiredParam);
+
+    const toggleParamCheck = () => {
+        if (!requiredParam) {
+            const newSelectedState = !paramSelected;
+            param.selected = newSelectedState;
+            setParamSelected(newSelectedState);
+            onChange();
+        }
+    };
+
+    return (
+        <div className={helperStyleClass.docListDefault}>
+            <div className={helperStyleClass.listItemMultiLine}>
+                <div className={helperStyleClass.listItemHeader}>
+                    <VSCodeCheckbox
+                        checked={paramSelected}
+                        {...(requiredParam && { disabled: true })}
+                        onClick={toggleParamCheck}
+                        className={helperStyleClass.parameterCheckbox}
+                    />
+                    <Typography
+                        variant="body3"
+                        sx={{ margin: '0px 5px' }}
+                    >
+                        {param.name}
+                    </Typography>
+                    <Typography
+                        className={helperStyleClass.suggestionDataType}
+                        variant="body3"
+                    >
+                        {param.optional || param.defaultable ? param.typeName + " (Optional)" : param.typeName}
+                    </Typography>
+                    {param.documentation && (
+                        <Tooltip
+                            content={
+                                <Typography
+                                    className={helperStyleClass.paramTreeDescriptionText}
+                                    variant="body3"
+                                >
+                                    {param.documentation}
+                                </Typography>
+                            }
+                            position="right"
+                            sx={{ maxWidth: '300px', whiteSpace: 'normal', pointerEvents: 'none' }}
+                        >
+                            <Codicon
+                                name="info"
+                                sx={{ marginLeft: '4px' }}
+                            />
+                        </Tooltip>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/Types/InclusionType/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/Types/InclusionType/index.tsx
new file mode 100644
index 00000000000..37ec0427e5e
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/Types/InclusionType/index.tsx
@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useState } from "react";
+
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react";
+import { Codicon, Tooltip, Typography } from "@wso2/ui-toolkit";
+
+import { TypeProps } from "../../ParameterBranch";
+import { useHelperPaneStyles } from "../../styles";
+import { ParameterBranch } from "../../ParameterBranch";
+import { isAllDefaultableFields, isRequiredParam, updateFieldsSelection } from "../../utils";
+
+export default function InclusionType(props: TypeProps) {
+    const { param, depth, onChange } = props;
+    const helperStyleClass = useHelperPaneStyles();
+    const requiredParam = isRequiredParam(param) && depth > 1; // Only apply required param logic after depth 1
+    const isAllIncludedParamDefaultable = isAllDefaultableFields(param.inclusionType?.fields);
+    if (requiredParam && !isAllIncludedParamDefaultable) {
+        param.selected = true;
+    }
+
+    const [paramSelected, setParamSelected] = useState(
+        param.selected || (requiredParam && !isAllIncludedParamDefaultable)
+    );
+
+    const toggleParamCheck = () => {
+        const newSelectedState = !paramSelected;
+        param.selected = newSelectedState;
+        param.inclusionType.selected = newSelectedState;
+
+        // If the inclusion type has fields, update their selection state
+        if (param.inclusionType?.fields && param.inclusionType.fields.length > 0) {
+            updateFieldsSelection(param.inclusionType.fields, newSelectedState);
+        }
+
+        setParamSelected(newSelectedState);
+        onChange();
+    };
+
+    const handleOnChange = () => {
+        param.selected = param.inclusionType.selected;
+        onChange();
+    };
+
+    return (
+        <div className={helperStyleClass.docListDefault}>
+            <div className={helperStyleClass.listItemMultiLine}>
+                <div className={helperStyleClass.listItemHeader}>
+                    <VSCodeCheckbox
+                        checked={paramSelected}
+                        {...(requiredParam && !isAllIncludedParamDefaultable && { disabled: true })}
+                        onClick={toggleParamCheck}
+                        className={helperStyleClass.parameterCheckbox}
+                    />
+                    <Typography
+                        variant="body3"
+                        sx={{ margin: '0px 5px' }}
+                    >
+                        {param.name}
+                    </Typography>
+                    {param.inclusionType?.typeInfo && (
+                        <Typography
+                            className={helperStyleClass.suggestionDataType}
+                            variant="body3"
+                        >
+                            {(param.optional || param.defaultable) && " (Optional)"} *
+                            {param.inclusionType.typeInfo.name}
+                        </Typography>
+                    )}
+                    {param.documentation && (
+                        <Tooltip
+                            content={
+                                <Typography
+                                    className={helperStyleClass.paramTreeDescriptionText}
+                                    variant="body3"
+                                >
+                                    {param.documentation}
+                                </Typography>
+                            }
+                            position="right"
+                            sx={{ maxWidth: '300px', whiteSpace: 'normal', pointerEvents: 'none' }}
+                        >
+                            <Codicon
+                                name="info"
+                                sx={{ marginLeft: '4px' }}
+                            />
+                        </Tooltip>
+                    )}
+                </div>
+                {paramSelected && param.inclusionType?.fields?.length > 0 && (
+                    <div className={helperStyleClass.listItemBody}>
+                        <ParameterBranch
+                            parameters={param.inclusionType.fields}
+                            depth={depth + 1}
+                            onChange={handleOnChange}
+                        />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/Types/RecordType/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/Types/RecordType/index.tsx
new file mode 100644
index 00000000000..750c7dcea01
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/Types/RecordType/index.tsx
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useState } from "react";
+
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react";
+import { Codicon, Tooltip, Typography } from "@wso2/ui-toolkit";
+
+import { TypeProps } from "../../ParameterBranch";
+import { useHelperPaneStyles } from "../../styles";
+import { MemoizedParameterBranch } from "../../ParameterBranch";
+import { isRequiredParam, updateFieldsSelection } from "../../utils";
+
+export default function RecordType(props: TypeProps) {
+    const { param, depth, onChange } = props;
+    const helperStyleClass = useHelperPaneStyles();
+    const requiredParam = isRequiredParam(param) && depth > 1; // Only apply required param logic after depth 1
+    if (requiredParam) {
+        param.selected = true;
+    }
+
+    const [paramSelected, setParamSelected] = useState(param.selected || requiredParam);
+
+    const toggleParamCheck = () => {
+        if (!requiredParam) {
+            const newSelectedState = !paramSelected;
+            param.selected = newSelectedState;
+
+            // If the record has fields, update their selection state
+            if (param.fields && param.fields.length > 0) {
+                updateFieldsSelection(param.fields, newSelectedState);
+            }
+
+            setParamSelected(newSelectedState);
+            onChange();
+        }
+    };
+
+    return (
+        <div className={helperStyleClass.docListDefault}>
+            <div className={helperStyleClass.listItemMultiLine}>
+                <div className={helperStyleClass.listItemHeader}>
+                    <VSCodeCheckbox
+                        checked={paramSelected}
+                        {...(requiredParam && { disabled: true })}
+                        onClick={toggleParamCheck}
+                        className={helperStyleClass.parameterCheckbox}
+                    />
+                    <Typography
+                        variant="body3"
+                        sx={{ margin: '0px 5px' }}
+                    >
+                        {param.name}
+                    </Typography>
+                    {param.typeInfo && (
+                        <Typography
+                            className={helperStyleClass.suggestionDataType}
+                            variant="body3"
+                        >
+                            {(param.optional || param.defaultable) && " (Optional)"} {param.typeInfo.name}
+                        </Typography>
+                    )}
+                    {param.documentation && (
+                        <Tooltip
+                            content={
+                                    <Typography
+                                        className={helperStyleClass.paramTreeDescriptionText}
+                                        variant="body3"
+                                    >
+                                        {param.documentation}
+                                    </Typography>
+                            }
+                            position="right"
+                            sx={{ maxWidth: '300px', whiteSpace: 'normal', pointerEvents: 'none' }}
+                        >
+                            <Codicon
+                                name="info"
+                                sx={{ marginLeft: '4px' }}
+                            />
+                        </Tooltip>
+                    )}
+                </div>
+                {paramSelected && param.fields?.length > 0 && (
+                    <div className={helperStyleClass.listItemBody}>
+                        <MemoizedParameterBranch parameters={param.fields} depth={depth + 1} onChange={onChange} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/Types/UnionType/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/Types/UnionType/index.tsx
new file mode 100644
index 00000000000..dfd1ceaf27c
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/Types/UnionType/index.tsx
@@ -0,0 +1,184 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useRef, useState, useEffect } from "react";
+
+import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react";
+import { TypeField } from "@wso2/ballerina-core";
+import { Codicon, Dropdown, Tooltip, Typography } from "@wso2/ui-toolkit";
+
+import { TypeProps } from "../../ParameterBranch";
+import { useHelperPaneStyles } from "../../styles";
+import { ParameterBranch } from "../../ParameterBranch";
+import { getSelectedUnionMember, isRequiredParam, updateFieldsSelection } from "../../utils";
+
+export default function UnionType(props: TypeProps) {
+    const { param, depth, onChange } = props;
+    const helperStyleClass = useHelperPaneStyles();
+
+    const requiredParam = isRequiredParam(param) && depth > 1; // Only apply required param logic after depth 1
+    if (requiredParam) {
+        param.selected = true;
+    }
+    const memberTypes = param.members?.map((field, index) => ({ id: index.toString(), value: getUnionParamName(field) }));
+    const initSelectedMember = getSelectedUnionMember(param);
+
+    const [paramSelected, setParamSelected] = useState(param.selected || requiredParam);
+    const [selectedMemberType, setSelectedMemberType] = useState(getUnionParamName(initSelectedMember));
+    const [parameter, setParameter] = useState<TypeField>(initSelectedMember);
+
+    // Initialize: If the union is selected, ensure the selected member and its required fields are also selected
+    useEffect(() => {
+        if (paramSelected && initSelectedMember) {
+            handleMemberType(paramSelected ? selectedMemberType : "");
+        }
+    }, []);
+
+    if (!(param.members && param.members.length > 0)) {
+        return <></>;
+    }
+
+    const updateFormFieldMemberSelection = (unionField: TypeField) => {
+        const unionFieldName = getUnionParamName(unionField);
+        param.members.forEach((field) => {
+            field.selected = getUnionParamName(field) === unionFieldName;
+
+            // If this is the selected field and it has nested fields, update them
+            if (field.selected && field.fields && field.fields.length > 0) {
+                // Set required fields to selected
+                updateFieldsSelection(field.fields, true);
+            } else if (!field.selected && field.fields && field.fields.length > 0) {
+                // Deselect all fields of non-selected members
+                updateFieldsSelection(field.fields, false);
+            }
+        });
+    };
+
+    const handleMemberType = (type: string) => {
+        const selectedMember = param.members.find((field) => getUnionParamName(field) === type);
+        updateFormFieldMemberSelection(selectedMember);
+        setSelectedMemberType(type);
+        setParameter(selectedMember);
+
+        // If the parent is selected and the selected member has fields, ensure required fields are selected
+        if (param.selected && selectedMember && selectedMember.fields && selectedMember.fields.length > 0) {
+            updateFieldsSelection(selectedMember.fields, true);
+        }
+
+        onChange();
+    };
+
+    const toggleParamCheck = () => {
+        const newSelectedState = !paramSelected;
+        param.selected = newSelectedState;
+
+        // When checkbox is checked, ensure the currently selected member is also marked as selected
+        if (newSelectedState) {
+            const selectedMember = param.members.find((field) => getUnionParamName(field) === selectedMemberType);
+            if (selectedMember) {
+                updateFormFieldMemberSelection(selectedMember);
+
+                // If the selected member has fields, recursively set required fields to selected
+                if (selectedMember.fields && selectedMember.fields.length > 0) {
+                    updateFieldsSelection(selectedMember.fields, true);
+                }
+            }
+        } else {
+            // When unchecking, clear all member selections
+            param.members.forEach((field) => {
+                field.selected = false;
+
+                // If the member has fields, recursively deselect all fields
+                if (field.fields && field.fields.length > 0) {
+                    updateFieldsSelection(field.fields, false);
+                }
+            });
+        }
+
+        setParamSelected(newSelectedState);
+        onChange();
+    };
+
+    return (
+        <div className={helperStyleClass.docListDefault}>
+            <div className={helperStyleClass.listItemMultiLine} data-testid="union-arg">
+                <div className={helperStyleClass.listItemHeader}>
+                    <VSCodeCheckbox
+                        checked={paramSelected}
+                        {...(requiredParam && { disabled: true })}
+                        onClick={toggleParamCheck}
+                        className={helperStyleClass.parameterCheckbox}
+                        data-testid="arg-check"
+                    />
+                    <Typography
+                        variant="body3"
+                        sx={{ margin: '0px 5px' }}
+                    >
+                        {param.name}
+                    </Typography>
+                    {(param.optional || param.defaultable) && (
+                        <Typography
+                            className={helperStyleClass.suggestionDataType}
+                            variant="body3"
+                            data-testid="arg-type"
+                        >
+                            {"(Optional)"}
+                        </Typography>
+                    )}
+                    {param.documentation && (
+                        <Tooltip
+                            content={
+                                <Typography
+                                    className={helperStyleClass.paramTreeDescriptionText}
+                                    variant="body3"
+                                >
+                                    {param.documentation}
+                                </Typography>
+                            }
+                            position="right"
+                            sx={{ maxWidth: '300px', whiteSpace: 'normal', pointerEvents: 'none' }}
+                        >
+                            <Codicon
+                                name="info"
+                                sx={{ marginLeft: '4px' }}
+                            />
+                        </Tooltip>
+                    )}
+                    <div className={helperStyleClass.listDropdownWrapper} data-testid="arg-dropdown">
+                        <Dropdown
+                            onValueChange={handleMemberType}
+                            id="arg-dropdown"
+                            value={selectedMemberType}
+                            items={memberTypes}
+                            data-testid="arg-dropdown-component"
+                            sx={{ marginLeft: '5px', width: 'fit-content' }}
+                        />
+                    </div>
+                </div>
+                {paramSelected && parameter && (
+                    <div className={helperStyleClass.listItemBody}>
+                        <ParameterBranch parameters={[parameter]} depth={depth + 1} onChange={onChange} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export function getUnionParamName(param: TypeField) {
+    return param ? param.name || param.typeName : "";
+}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/index.ts b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/Types/index.ts
similarity index 68%
rename from workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/index.ts
rename to workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/Types/index.ts
index f265dfdfdd6..74a8994a46e 100644
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/index.ts
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/Types/index.ts
@@ -16,5 +16,13 @@
  * under the License.
  */
 
-export * from "./ExpandedMappingHeaderNode";
-export * from "./ExpandedMappingHeaderNodeFactory";
+import CustomType from './CustomType';
+import InclusionType from "./InclusionType";
+import RecordType from "./RecordType";
+import UnionType from "./UnionType";
+
+export {RecordType as record};
+export {UnionType as union};
+export {UnionType as enum};
+export {InclusionType as inclusion};
+export {CustomType as custom};
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/styles.ts b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/styles.ts
new file mode 100644
index 00000000000..eabf726c434
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/styles.ts
@@ -0,0 +1,317 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { css } from "@emotion/css";
+
+
+const removePadding = {
+    padding: '0px'
+}
+
+const statementFontStyles = {
+    fontSize: "15px",
+    'user-select': 'none',
+    fontFamily: 'monospace'
+}
+
+const truncateText = {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+}
+
+export const useHelperPaneStyles = () => ({
+    suggestionsInner: css({
+        overflowY: 'hidden',
+        height: '100%',
+        width: '100%'
+    }),
+    suggestionListContainer: css({
+        overflowY: 'scroll',
+        marginTop: '5px',
+    }),
+    suggestionListItem: css({
+        display: 'flex'
+    }),
+    suggestionDataType: css({
+        color: 'var(--vscode-terminal-ansiGreen)',
+        ...truncateText,
+    }),
+    suggestionValue: css({
+        ...truncateText,
+    }),
+    listItem: css({
+        display: 'flex',
+        maxWidth: '155px',
+    }),
+    suggestionListInner: css({
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column'
+    }),
+    expressionExample: css({
+        fontSize: '13px',
+    }),
+    searchBox: css({
+        width: '100%'
+    }),
+    librarySearchBox: css({
+        position: 'relative',
+        height: '32px',
+        width: 'inherit',
+        border: '1px var(--custom-input-border-color)',
+        color: '#8D91A3',
+        textIndent: '12px',
+        textAlign: 'left',
+        marginBottom: '16px',
+        paddingLeft: '10px'
+    }),
+    helperPaneSubHeader: css({
+        color: 'var(--vscode-editor-foreground)',
+        marginBottom: '4px',
+        fontWeight: 500
+    }),
+    groupHeaderWrapper: css({
+        display: 'flex',
+        flexDirection: 'row',
+        marginBottom: '14px'
+    }),
+    selectionWrapper: css({
+        display: 'flex',
+        flexDirection: 'row',
+        marginTop: '5px'
+    }),
+    suggestionDividerWrapper: css({
+        marginTop: '5px',
+    }),
+    groupHeader: css({
+        color: 'var(--vscode-editor-foreground)',
+        fontWeight: 500
+    }),
+    selectionSubHeader: css({
+        color: 'var(--vscode-settings-textInputForeground)',
+        borderRadius: '5px',
+        backgroundColor: 'var(--vscode-editor-selectionBackground)',
+        marginRight: '5px',
+        ...statementFontStyles
+    }),
+    selectionSeparator: css({
+        height: '1px',
+        width: '100%',
+        flex: '1 0',
+        backgroundColor: 'var(--vscode-panel-border)',
+        alignSelf: 'flex-end'
+    }),
+    loadingContainer: css({
+        height: '60vh',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+    }),
+    libraryWrapper: css({
+        marginTop: '5px',
+        overflowY: 'scroll',
+    }),
+    libraryBrowser: css({
+        height: '100%'
+    }),
+    libraryBrowserHeader: css({
+        display: 'flex',
+        flexDirection: 'row',
+        width: '100%',
+        alignItems: 'center',
+        zIndex: 1,
+        color: 'var(--vscode-sideBar-foreground)'
+    }),
+    searchResult: css({
+        paddingTop: '15px',
+    }),
+
+    moduleTitle: css({
+        fontSize: '14px',
+        margin: '0 10px'
+    }),
+    libraryReturnIcon: css({
+        marginRight: '8px'
+    }),
+    libraryElementBlock: css({
+        top: '5%',
+        display: 'flex',
+        flexDirection: 'column'
+    }),
+    libraryElementBlockLabel: css({
+        height: '10%',
+        padding: '0 10px'
+    }),
+    parameterCheckbox: css({
+        margin: '0px'
+    }),
+    checked: css({}),
+    docParamSuggestions: css({
+        height: '100%',
+        overflowY: 'scroll'
+    }),
+    returnSeparator: css({
+        height: '1px',
+        opacity: '0.52',
+        backgroundColor: 'var(--vscode-panel-border)',
+        marginBottom: '15px'
+    }),
+    docParamDescriptionText: css({
+        flex: "inherit",
+        ...removePadding
+    }),
+    includedRecordPlusBtn: css({
+        display: 'block',
+        alignSelf: 'center',
+        padding: '0px',
+        marginLeft: '10px'
+    }),
+    paramHeader: css({
+        marginTop: '0px',
+        color: 'var(--vscode-editor-foreground)'
+    }),
+    paramDataType: css({
+        marginLeft: '8px',
+        marginRight: '8px',
+        flex: 'inherit',
+        ...removePadding
+    }),
+    requiredArgList: css({
+        display: 'flex',
+        alignItems: 'flex-start',
+        overflowX: 'hidden',
+        width: 'fit-content',
+        ...removePadding
+    }),
+    docDescription: css({
+        maxHeight: '50%',
+        overflowY: 'scroll',
+        whiteSpace: 'break-spaces',
+        display: 'block',
+        margin: '10px 0px',
+        ...removePadding
+    }),
+    returnDescription: css({
+        maxHeight: '15%',
+        overflowY: 'scroll',
+        whiteSpace: 'break-spaces',
+        "& .MuiListItem-root": {
+            paddingLeft: '0px'
+        },
+        ...removePadding
+    }),
+    paramList: css({
+        overflowY: 'auto',
+        margin: '10px 0px',
+    }),
+    documentationWrapper: css({
+        marginLeft: '28px',
+    }),
+    includedRecordHeaderList: css({
+        "& .MuiListItem-root": {
+            padding: '0px',
+            alignItems: 'flex-start'
+        },
+        "& .MuiListItemText-root": {
+            flex: "inherit"
+        },
+        ...removePadding
+    }),
+    docListDefault: css({
+        "& .MuiListItem-root": {
+            padding: '0px'
+        },
+        "& .MuiListItemText-root": {
+            flex: 'inherit',
+            minWidth: 'auto',
+            margin: '0 6px 0 0'
+        },
+        alignItems: 'flex-start',
+        width: 'fit-content',
+        ...removePadding
+    }),
+    docListCustom: css({
+        marginBottom: '12px',
+        "& .MuiListItem-root": {
+            padding: '0px'
+        },
+        "& .MuiListItemText-root": {
+            flex: 'inherit',
+            minWidth: 'auto',
+            margin: '0 6px 0 0'
+        },
+        alignItems: 'flex-start',
+        width: 'fit-content',
+        ...removePadding
+    }),
+    exampleCode: css({
+        display: 'flex',
+        padding: '5px',
+        fontFamily: 'monospace',
+        borderRadius: '0px'
+    }),
+    paramTreeDescriptionText: css({
+        flex: "inherit",
+        whiteSpace: 'pre-wrap',
+        marginLeft: '24px',
+        ...removePadding
+    }),
+    listItemMultiLine: css({
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        minHeight: '32px'
+    }),
+    listItemHeader: css({
+        display: 'flex',
+        alignItems: 'center',
+        height: '28px'
+    }),
+    listItemBody: css({
+        marginLeft: '12px',
+        marginBottom: '8px',
+        paddingLeft: '16px',
+        borderLeft: "1px solid #d8d8d8",
+    }),
+    listDropdownWrapper: css({
+        width: '200px',
+    }),
+    listOptionalWrapper: css({
+        display: 'flex',
+        alignItems: 'center',
+        height: '32px',
+        marginBottom: '12px'
+    }),
+    listOptionalBtn: css({
+        textTransform: 'none',
+        minWidth: '32px',
+        marginLeft: '8px'
+    }),
+    listOptionalHeader: css({
+        fontSize: '13px',
+        color: "gray",
+        fontWeight: 500,
+        letterSpacing: '0',
+        lineHeight: '14px',
+        paddingLeft: '0px',
+    }),
+});
+
+
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/utils/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/utils/index.tsx
new file mode 100644
index 00000000000..2027af17715
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/RecordConstructView/utils/index.tsx
@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+    FormField,
+    keywords,
+} from "@wso2/ballerina-core";
+
+
+export function isRequiredParam(param: FormField): boolean {
+    return !(param.optional || param.defaultable);
+}
+
+export function isAllDefaultableFields(recordFields: FormField[]): boolean {
+    return recordFields?.every((field) => field.defaultable || (field.fields && isAllDefaultableFields(field.fields)));
+}
+
+export function isAnyFieldSelected(recordFields: FormField[]): boolean {
+    return recordFields?.some((field) => field.selected || (field.fields && isAnyFieldSelected(field.fields)));
+}
+
+export function getSelectedUnionMember(unionFields: FormField): FormField {
+    let selectedMember = unionFields.members?.find((member) => member.selected === true);
+    if (!selectedMember) {
+        selectedMember = unionFields.members?.find(
+            (member) => getUnionFormFieldName(member) === unionFields.selectedDataType
+        );
+    }
+    if (!selectedMember) {
+        selectedMember = unionFields.members?.find(
+            (member) => member.typeName === unionFields.value?.replace(/['"]+/g, "")
+        );
+    }
+    if (!selectedMember && unionFields.members && unionFields.members.length > 0) {
+        selectedMember = unionFields.members[0];
+    }
+    return selectedMember;
+}
+
+export function getFieldName(fieldName: string): string {
+    return keywords.includes(fieldName) ? "'" + fieldName : fieldName;
+}
+
+export function getUnionFormFieldName(field: FormField): string {
+    return field.name || field.typeInfo?.name || field.typeName;
+}
+
+export function checkFormFieldValue(field: FormField): boolean {
+    return field.value !== undefined && field.value !== null;
+}
+
+export function updateFieldsSelection(fields: FormField[], selected: boolean): void {
+    if (!fields || !fields.length) return;
+
+    fields.forEach(field => {
+        // When selecting: only select required fields
+        // When deselecting: deselect all fields (both required and optional)
+        if (!selected || isRequiredParam(field)) {
+            field.selected = selected;
+        }
+
+        // Recursively process nested fields
+        if (field.fields && field.fields.length > 0) {
+            updateFieldsSelection(field.fields, selected);
+        }
+    });
+}
diff --git a/workspaces/ballerina/data-mapper-view/src/resources/test-samples/main.bal b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/ScrollableContainer.tsx
similarity index 82%
rename from workspaces/ballerina/data-mapper-view/src/resources/test-samples/main.bal
rename to workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/ScrollableContainer.tsx
index 9175dc317b0..254043e4e1b 100644
--- a/workspaces/ballerina/data-mapper-view/src/resources/test-samples/main.bal
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/ScrollableContainer.tsx
@@ -15,8 +15,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import ballerina/io;
 
-public function main() {
-    io:println("Hello, World!");
-}
+import styled from "@emotion/styled";
+
+export const ScrollableContainer = styled.div`
+    flex: 1;
+    overflow: auto;
+    min-height: 0;
+`;
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/modifications.ts b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/SelectableItem.tsx
similarity index 64%
rename from workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/modifications.ts
rename to workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/SelectableItem.tsx
index 4d5fb714826..e19317b7f3e 100644
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/modifications.ts
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/SelectableItem.tsx
@@ -15,16 +15,20 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { STModification } from "@wso2/ballerina-core";
-import { NodePosition } from "@wso2/syntax-tree";
 
-export function getModification(statement: string, targetPosition: NodePosition): STModification {
-    return {
-        type: "INSERT",
-        isImport: false,
-        config: {
-            "STATEMENT": statement
-        },
-        ...targetPosition
-    };
-}
+import { ThemeColors } from "@wso2/ui-toolkit";
+import styled from "@emotion/styled";
+
+const SelectableItem = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: 8px;
+    &:hover {
+        background-color: ${ThemeColors.SURFACE_DIM};
+        cursor: pointer;
+    }
+`
+
+export default SelectableItem;
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/VariableTypeIndicator.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/VariableTypeIndicator.tsx
new file mode 100644
index 00000000000..4364333639a
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Components/VariableTypeIndicator.tsx
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import styled from "@emotion/styled";
+import { VSCodeTag } from "@vscode/webview-ui-toolkit/react";
+
+export const VariableTypeIndicator = styled(VSCodeTag)`
+    ::part(control) {
+        text-transform: none;
+        font-size: 10px;
+        height: 11px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+`;
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Mappings/EditableRecordField.ts b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Utils/types.ts
similarity index 57%
rename from workspaces/ballerina/data-mapper-view/src/components/Diagram/Mappings/EditableRecordField.ts
rename to workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Utils/types.ts
index 28944b81d6b..cab38d07515 100644
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Mappings/EditableRecordField.ts
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Utils/types.ts
@@ -15,25 +15,26 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { TypeField } from "@wso2/ballerina-core";
-import { STNode } from "@wso2/syntax-tree";
 
-export interface ArrayElement {
-	member: EditableRecordField;
-	elementNode: STNode;
+export const DEFAULT_VALUE_MAP: Record<string, string> = {
+    "struct": "{}",
+    "array": "[]",
+    "map": "{}",
+    "int": "0",
+    "float": "0.0",
+    "boolean": "false",
+    "any": "null",
 }
 
-export class EditableRecordField {
-	constructor(
-		public type: TypeField,
-		public value?: STNode,
-		public parentType?: EditableRecordField,
-		public originalType?: TypeField,
-		public childrenTypes?: EditableRecordField[],
-		public elements?: ArrayElement[]
-	){}
+export const isRowType = (type: string | string[]) => {
+    return type && type === "struct";
+}
+
+export const isUnionType = (type: string) => {
+    return type && type === "enum";
+}
 
-	public hasValue() {
-		return !!this.value;
-	}
+export const getDefaultValue = (type: string) => {
+    //TODO: handle this using API
+     return DEFAULT_VALUE_MAP[type] || "";
 }
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Configurables.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Configurables.tsx
new file mode 100644
index 00000000000..1d4697a24de
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Configurables.tsx
@@ -0,0 +1,259 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { CompletionInsertText, ConfigVariable, FlowNode, LineRange, TomlPackage } from "@wso2/ballerina-core";
+import { useRpcContext } from "@wso2/ballerina-rpc-client";
+import { ReactNode, useEffect, useState } from "react";
+import ExpandableList from "../Components/ExpandableList";
+import { SlidingPaneNavContainer } from "@wso2/ui-toolkit/lib/components/ExpressionEditor/components/Common/SlidingPane";
+import { COMPLETION_ITEM_KIND, Divider, getIcon, ThemeColors } from "@wso2/ui-toolkit";
+import { ScrollableContainer } from "../Components/ScrollableContainer";
+import DynamicModal from "../../../../components/Modal";
+import FooterButtons from "../Components/FooterButtons";
+import FormGenerator from "../../Forms/FormGenerator";
+import { URI, Utils } from "vscode-uri";
+
+type ConfigVariablesState = {
+    [category: string]: {
+        [module: string]: ConfigVariable[];
+    };
+};
+
+type ListItem = {
+    name: string;
+    items: any[]
+}
+
+type ConfigurablesPageProps = {
+    onChange: (insertText: string | CompletionInsertText, isRecordConfigureChange?: boolean) => void;
+    isInModal?: boolean;
+    anchorRef: React.RefObject<HTMLDivElement>;
+    fileName: string;
+    targetLineRange: LineRange;
+}
+
+type AddNewConfigFormProps = {
+    isImportEnv: boolean;
+    title: string;
+}
+
+export const Configurables = (props: ConfigurablesPageProps) => {
+    const { onChange, anchorRef, fileName, targetLineRange } = props;
+
+    const { rpcClient } = useRpcContext();
+    const [configVariables, setConfigVariables] = useState<ConfigVariablesState>({});
+    const [errorMessage, setErrorMessage] = useState<string>('');
+    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+    const [configVarNode, setCofigVarNode] = useState<FlowNode>();
+    const [isSaving, setIsSaving] = useState(false);
+    const [packageInfo, setPackageInfo] = useState<TomlPackage>();
+    const [isImportEnv, setIsImportEnv] = useState<boolean>(false);
+    const [projectPathUri, setProjectPathUri] = useState<string>();
+
+    useEffect(() => {
+        const fetchNode = async () => {
+            const node = await rpcClient.getBIDiagramRpcClient().getConfigVariableNodeTemplate({
+                isNew: true,
+                isEnvVariable: isImportEnv
+            });
+            setCofigVarNode(node.flowNode);
+        };
+
+        fetchNode();
+    }, [isImportEnv]);
+
+    useEffect(() => {
+        getConfigVariables()
+        getProjectInfo()
+        const fetchTomlValues = async () => {
+            try {
+                const tomValues = await rpcClient.getCommonRpcClient().getCurrentProjectTomlValues();
+                setPackageInfo(tomValues?.package);
+            } catch (error) {
+                console.error("Failed to fetch TOML values:", error);
+                setPackageInfo({
+                    org: "",
+                    name: "",
+                    version: ""
+                });
+            }
+        };
+
+        fetchTomlValues();
+    }, [])
+
+    const getProjectInfo = async () => {
+        const projectPath = await rpcClient.getVisualizerLocation();
+        setProjectPathUri(URI.file(projectPath.projectUri).fsPath);
+    }
+
+    const getConfigVariables = async () => {
+        let data: ConfigVariablesState = {};
+        let errorMsg: string = '';
+
+        await rpcClient
+            .getBIDiagramRpcClient()
+            .getConfigVariablesV2({
+                includeLibraries: false,
+                projectPath: projectPathUri
+            })
+            .then((variables) => {
+                data = (variables as any).configVariables;
+                errorMsg = (variables as any).errorMsg;
+            });
+
+        setConfigVariables(data);
+        setErrorMessage(errorMsg);
+    };
+
+    const handleFormClose = () => {
+        setIsModalOpen(false)
+    }
+
+    const handleSave = async (node: FlowNode) => {
+        setIsModalOpen(false);
+        //TODO: Need to disable the form before saving and move form close to finally block
+        setIsSaving(true);
+        await rpcClient.getBIDiagramRpcClient().updateConfigVariablesV2({
+            configFilePath: Utils.joinPath(URI.file(projectPathUri), 'config.bal').fsPath,
+            configVariable: node,
+            packageName: `${packageInfo.org}/${packageInfo.name}`,
+            moduleName: "",
+        }).finally(() => {
+            setIsSaving(false);
+            getConfigVariables();
+        });
+    };
+
+    const translateToArrayFormat = (object: object): ListItem[] => {
+        if (Array.isArray(object)) return object;
+        const keys = Object.keys(object);
+        return keys.map((key): { name: string; items: object[] } => {
+            return {
+                name: key,
+                items: translateToArrayFormat((object as Record<string, object>)[key])
+            }
+        });
+    }
+
+    const handleItemClicked = (name: string) => {
+        onChange(name, true)
+    }
+
+    const AddNewForms = (props: AddNewConfigFormProps) => {
+        return (
+            <DynamicModal
+                width={400}
+                height={650}
+                anchorRef={anchorRef}
+                title={props.title}
+                openState={isModalOpen}
+                setOpenState={setIsModalOpen}>
+                <DynamicModal.Trigger>
+                    <FooterButtons
+                        startIcon='add'
+                        title={props.title}
+                        onClick={() => {
+                            setIsImportEnv(props.isImportEnv)
+                        }}
+                    />
+                </DynamicModal.Trigger>
+                <FormGenerator
+                    fileName={fileName}
+                    node={configVarNode}
+                    connections={[]}
+                    targetLineRange={targetLineRange}
+                    projectPath={projectPathUri}
+                    editForm={false}
+                    onSubmit={handleSave}
+                    showProgressIndicator={false}
+                    resetUpdatedExpressionField={() => { }}
+                    isInModal={true}
+                />
+            </DynamicModal>
+        )
+    }
+
+    return (
+        <div style={{
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
+            overflow: "hidden"
+        }}>
+            <ScrollableContainer style={{ margin: '8px 0px' }}>
+                {translateToArrayFormat(configVariables)
+                    .filter(category =>
+                        Array.isArray(category.items) &&
+                        category.items.some(sub => Array.isArray(sub.items) && sub.items.length > 0)
+                    )
+                    .map(category => (
+                        <div >
+                            {category.items
+                                .filter(subCategory => subCategory.items && subCategory.items.length > 0)
+                                .map(subCategory => (
+                                    <div key={subCategory.name}>
+                                        {subCategory.name !== '' ? (
+                                            <ExpandableList.Section
+                                                key={subCategory.name}
+                                                title={subCategory.name}
+                                                level={0}
+                                            >
+                                                <div style={{ marginTop: '10px' }}>
+                                                    {subCategory.items.map((item: ConfigVariable) => (
+                                                        <SlidingPaneNavContainer
+                                                            key={item.id}
+                                                            onClick={() => { handleItemClicked(item?.properties?.variable?.value as string) }}
+                                                        >
+                                                            <ExpandableList.Item
+                                                            >
+                                                                {getIcon(COMPLETION_ITEM_KIND.Constant)}
+                                                                {item?.properties?.variable?.value as ReactNode}
+                                                            </ExpandableList.Item>
+                                                        </SlidingPaneNavContainer>
+                                                    ))}
+                                                </div>
+                                            </ExpandableList.Section>
+                                        ) : (
+                                            <div>
+                                                {subCategory.items.map((item: ConfigVariable) => (
+                                                    <SlidingPaneNavContainer key={item.id}
+                                                        onClick={() => { handleItemClicked(item?.properties?.variable?.value as string) }}>
+                                                        <ExpandableList.Item
+                                                        >
+                                                            {getIcon(COMPLETION_ITEM_KIND.Constant)}
+                                                            {item?.properties?.variable?.value as ReactNode}
+                                                        </ExpandableList.Item>
+                                                    </SlidingPaneNavContainer>
+                                                ))}
+                                            </div>
+                                        )}
+                                    </div>
+                                ))}
+                        </div>
+                    ))}
+            </ScrollableContainer>
+
+            <Divider sx={{ margin: "0px" }} />
+            <div style={{ marginTop: "auto", display: 'flex', flexDirection: 'column', justifyContent: 'space-around', padding: '8px' }}>
+                <AddNewForms isImportEnv={false} title="New Configurable" />
+                {/* <AddNewForms isImportEnv={true} title="Import from ENV variable" /> */}
+            </div>
+        </div>
+    )
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/CreateValue.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/CreateValue.tsx
new file mode 100644
index 00000000000..b0288750132
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/CreateValue.tsx
@@ -0,0 +1,187 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { GetRecordConfigResponse, PropertyTypeMemberInfo, RecordTypeField, TypeField } from "@wso2/ballerina-core";
+import { useRpcContext } from "@wso2/ballerina-rpc-client";
+import { RefObject, useEffect, useRef, useState } from "react";
+import { getDefaultValue, isRowType } from "../Utils/types";
+import ExpandableList from "../Components/ExpandableList";
+import { SlidingPaneNavContainer } from "@wso2/ui-toolkit/lib/components/ExpressionEditor/components/Common/SlidingPane";
+
+type CreateValuePageProps = {
+    fileName: string;
+    currentValue: string;
+    onChange: (value: string, isRecordConfigureChange: boolean) => void;
+    selectedType?: string | string[];
+    recordTypeField?: RecordTypeField;
+    anchorRef: RefObject<HTMLDivElement>;
+}
+
+const passPackageInfoIfExists = (recordTypeMember: PropertyTypeMemberInfo) => {
+    let org = "";
+    let module = "";
+    let version = "";
+    if (recordTypeMember?.packageInfo) {
+        const parts = recordTypeMember?.packageInfo.split(':');
+        if (parts.length === 3) {
+            [org, module, version] = parts;
+        }
+    }
+    return { org, module, version }
+}
+
+const getPropertyMember = (field: RecordTypeField) => {
+    return field?.recordTypeMembers.at(0);
+}
+
+export const CreateValue = (props: CreateValuePageProps) => {
+    const { fileName, currentValue, onChange, selectedType, recordTypeField, anchorRef } = props;
+    const [recordModel, setRecordModel] = useState<TypeField[]>([]);
+    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+
+    const { rpcClient } = useRpcContext();
+    const propertyMember = getPropertyMember(recordTypeField)
+
+    const sourceCode = useRef<string>(currentValue);
+
+    const getRecordConfigRequest = async () => {
+        if (recordTypeField) {
+            const packageInfo = passPackageInfoIfExists(recordTypeField?.recordTypeMembers.at(0))
+            return {
+                filePath: fileName,
+                codedata: {
+                    org: packageInfo.org,
+                    module: packageInfo.module,
+                    version: packageInfo.version,
+                    packageName: propertyMember?.packageName,
+                },
+                typeConstraint: propertyMember?.type,
+            }
+        }
+        else {
+            const tomValues = await rpcClient.getCommonRpcClient().getCurrentProjectTomlValues();
+            return {
+                filePath: fileName,
+                codedata: {
+                    org: tomValues.package.org,
+                    module: tomValues.package.name,
+                    version: tomValues.package.version,
+                    packageName: propertyMember?.packageName,
+                },
+                typeConstraint: propertyMember?.type || Array.isArray(selectedType) ? selectedType[0] : selectedType,
+            }
+        }
+    }
+
+    const fetchRecordModel = async () => {
+        const request = await getRecordConfigRequest();
+        const typeFieldResponse: GetRecordConfigResponse = await rpcClient.getBIDiagramRpcClient().getRecordConfig(request);
+        if (typeFieldResponse.recordConfig) {
+            const recordConfig: TypeField = {
+                name: propertyMember?.type,
+                ...typeFieldResponse.recordConfig
+            }
+
+            setRecordModel([recordConfig]);
+        }
+    }
+
+    useEffect(() => {
+        fetchRecordModel()
+    }, []);
+
+    return (
+        (recordTypeField) ?
+            <>
+            </>
+            : <NonRecordCreateValue
+                fileName={fileName}
+                currentValue={currentValue}
+                onChange={onChange}
+                selectedType={selectedType}
+                {...props}
+            />
+    )
+}
+
+const isSelectedTypeContainsType = (selectedType: string | string[], searchType: string) => {
+    if (Array.isArray(selectedType)) {
+        return selectedType.some(type => type.includes(searchType));
+    }
+    const unionTypes = selectedType.split("|").map(type => type.trim());
+    return unionTypes.includes(searchType);
+}
+
+const NonRecordCreateValue = (props: CreateValuePageProps) => {
+    const { selectedType, onChange } = props;
+
+    const handleValueSelect = (value: string) => {
+        onChange(value, false);
+    }
+
+    const defaultValue = getDefaultValue(Array.isArray(selectedType) ? selectedType[0] : selectedType);
+    return (
+        <div style={{ padding: '8px 0px' }}>
+            {defaultValue && (
+                <ExpandableList>
+                    <SlidingPaneNavContainer onClick={() => { handleValueSelect(defaultValue) }}>
+                        <ExpandableList.Item sx={{ width: "100%" }}>
+                            Initialize to {defaultValue}
+                        </ExpandableList.Item>
+                    </SlidingPaneNavContainer>
+                </ExpandableList>
+            )}
+            {isSelectedTypeContainsType(selectedType, "string") && (
+                <ExpandableList>
+                    <SlidingPaneNavContainer onClick={() => { handleValueSelect("\"TEXT_HERE\"") }}>
+                        <ExpandableList.Item sx={{ width: "100%" }}>
+                            Create a string value
+                        </ExpandableList.Item>
+                    </SlidingPaneNavContainer>
+                </ExpandableList>
+            )}
+            {isSelectedTypeContainsType(selectedType, "string[]") && (
+                <ExpandableList>
+                    <SlidingPaneNavContainer onClick={() => { handleValueSelect("[\"\"]") }}>
+                        <ExpandableList.Item sx={{ width: "100%" }}>
+                            Create a string array
+                        </ExpandableList.Item>
+                    </SlidingPaneNavContainer>
+                </ExpandableList>
+            )}
+            {isSelectedTypeContainsType(selectedType, "log:PrintableRawTemplate") && (
+                <ExpandableList>
+                    <SlidingPaneNavContainer onClick={() => { handleValueSelect("string `TEXT_HERE`") }}>
+                        <ExpandableList.Item sx={{ width: "100%" }}>
+                            Create a printable template
+                        </ExpandableList.Item>
+                    </SlidingPaneNavContainer>
+                </ExpandableList>
+            )}
+            {isSelectedTypeContainsType(selectedType, "error") && (
+                <ExpandableList>
+                    <SlidingPaneNavContainer onClick={() => { handleValueSelect("error(\"ERROR_MESSAGE_HERE\")") }}>
+                        <ExpandableList.Item sx={{ width: "100%" }}>
+                            Create an error
+                        </ExpandableList.Item>
+                    </SlidingPaneNavContainer>
+                </ExpandableList>
+            )}
+        </div>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Functions.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Functions.tsx
new file mode 100644
index 00000000000..0e26d822ca5
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Functions.tsx
@@ -0,0 +1,287 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useRpcContext } from "@wso2/ballerina-rpc-client";
+import { HelperPaneCompletionItem, HelperPaneFunctionInfo } from "@wso2/ballerina-side-panel";
+import { debounce } from "lodash";
+import { useRef, useState, useCallback, RefObject, useEffect } from "react";
+import { convertToHelperPaneFunction, extractFunctionInsertText } from "../../../../utils/bi";
+import { CompletionInsertText, FunctionKind, LineRange } from "@wso2/ballerina-core";
+import { useMutation } from "@tanstack/react-query";
+import { ExpandableList } from "../Components/ExpandableList";
+import { SlidingPaneNavContainer } from "@wso2/ui-toolkit/lib/components/ExpressionEditor/components/Common/SlidingPane";
+import { COMPLETION_ITEM_KIND, CompletionItem, getIcon, HelperPaneCustom } from "@wso2/ui-toolkit/lib/components/ExpressionEditor";
+import { EmptyItemsPlaceHolder } from "../Components/EmptyItemsPlaceHolder";
+import styled from "@emotion/styled";
+import { Divider, SearchBox } from "@wso2/ui-toolkit";
+import { LibraryBrowser } from "../../HelperPane/LibraryBrowser";
+import { ScrollableContainer } from "../Components/ScrollableContainer";
+import FooterButtons from "../Components/FooterButtons";
+import DynamicModal from "../../../../components/Modal";
+import { URI, Utils } from "vscode-uri";
+import { FunctionFormStatic } from "../../FunctionFormStatic";
+
+type FunctionsPageProps = {
+    fieldKey: string;
+    anchorRef: RefObject<HTMLDivElement>;
+    fileName: string;
+    targetLineRange: LineRange;
+    onClose: () => void;
+    onChange: (insertText: CompletionInsertText | string) => void;
+    updateImports: (key: string, imports: { [key: string]: string }) => void;
+    selectedType?: CompletionItem
+};
+
+export const FunctionsPage = ({
+    fieldKey,
+    anchorRef,
+    fileName,
+    targetLineRange,
+    onClose,
+    onChange,
+    updateImports,
+    selectedType
+}: FunctionsPageProps) => {
+
+    const { rpcClient } = useRpcContext();
+    const firstRender = useRef<boolean>(true);
+    const [searchValue, setSearchValue] = useState<string>('');
+    const [isLibraryBrowserOpen, setIsLibraryBrowserOpen] = useState<boolean>(false);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [functionInfo, setFunctionInfo] = useState<HelperPaneFunctionInfo | undefined>(undefined);
+    const [libraryBrowserInfo, setLibraryBrowserInfo] = useState<HelperPaneFunctionInfo | undefined>(undefined);
+    const [projectUri, setProjectUri] = useState<string>('');
+    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+
+
+
+    //TODO: get the correct filepath
+    let defaultFunctionsFile = Utils.joinPath(URI.file(projectUri), 'functions.bal').fsPath;
+
+    const debounceFetchFunctionInfo = useCallback(
+        debounce((searchText: string, includeAvailableFunctions?: string) => {
+            setIsLoading(true);
+            rpcClient
+                .getBIDiagramRpcClient()
+                .search({
+                    position: targetLineRange,
+                    filePath: fileName,
+                    queryMap: {
+                        q: searchText.trim(),
+                        limit: 12,
+                        offset: 0,
+                        ...(!!includeAvailableFunctions && { includeAvailableFunctions })
+                    },
+                    searchKind: "FUNCTION"
+                })
+                .then((response) => {
+                    if (response.categories?.length) {
+                        if (!!includeAvailableFunctions) {
+                            setLibraryBrowserInfo(convertToHelperPaneFunction(response.categories));
+                        } else {
+                            setFunctionInfo(convertToHelperPaneFunction(response.categories));
+                        }
+                    }
+                    console.log(response);
+                })
+                .then(() => setIsLoading(false));
+        }, 150),
+        [rpcClient, fileName, targetLineRange]
+    );
+
+    const fetchFunctionInfo = useCallback(
+        (searchText: string, includeAvailableFunctions?: string) => {
+            debounceFetchFunctionInfo(searchText, includeAvailableFunctions);
+        },
+        [debounceFetchFunctionInfo, searchValue]
+    );
+
+    const { mutateAsync: addFunction, isPending: isAddingFunction } = useMutation({
+        mutationFn: (item: HelperPaneCompletionItem) =>
+            rpcClient.getBIDiagramRpcClient().addFunction({
+                filePath: fileName,
+                codedata: item.codedata,
+                kind: item.kind as FunctionKind,
+                searchKind: 'FUNCTION'
+            })
+    });
+
+    const onFunctionItemSelect = async (item: HelperPaneCompletionItem) => {
+        setIsLoading(true);
+        const response = await addFunction(item);
+
+        setIsLoading(false)
+        if (response) {
+            const importStatement = {
+                [response.prefix]: response.moduleId
+            };
+            updateImports(fieldKey, importStatement);
+            return extractFunctionInsertText(response.template);
+        }
+
+        return { value: '' };
+    };
+
+    useEffect(() => {
+        if (firstRender.current) {
+            firstRender.current = false;
+            fetchFunctionInfo('');
+        }
+
+        setDefaultFunctionsPath()
+    }, []);
+
+    const setDefaultFunctionsPath = () => {
+        rpcClient.getVisualizerLocation().then((location) => {
+            setProjectUri(location?.projectUri || '')
+        })
+    }
+
+    const handleFunctionSearch = (searchText: string) => {
+        setSearchValue(searchText);
+
+        // Search functions
+        if (isLibraryBrowserOpen) {
+            fetchFunctionInfo(searchText, 'true');
+        } else {
+            fetchFunctionInfo(searchText);
+        }
+    };
+
+    const handleFunctionItemSelect = async (item: HelperPaneCompletionItem) => {
+        const { value, cursorOffset } = await onFunctionItemSelect(item);
+        onChange({ value, cursorOffset });
+        onClose();
+    };
+
+    return (
+        <div style={{
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
+            overflow: "hidden"
+        }}>
+            <div style={{ display: "flex", justifyContent: "center", alignItems: "center", margin: "3px 8px" }}>
+                <SearchBox sx={{ width: "100%" }} placeholder='Search' value={searchValue} onChange={handleFunctionSearch} />
+            </div>
+            <ScrollableContainer style={{ margin: '8px 0px' }}>
+                {
+
+                    isLoading ? (
+                        <HelperPaneCustom.Loader />
+                    ) : (
+                        <>
+                            {
+                                !functionInfo || !functionInfo.category || functionInfo.category.length === 0 ? (
+                                    <EmptyItemsPlaceHolder />
+                                ) : (
+                                    functionInfo.category.map((category) => {
+                                        if (!category.subCategory) {
+                                            if (!category.items || category.items.length === 0) {
+                                                return null;
+                                            }
+
+                                            return (
+                                                <ExpandableList>
+                                                    <ExpandableList.Section key={category.label} title={category.label} level={0}>
+                                                        <div style={{ marginTop: '10px' }}>
+                                                            {category.items.map((item) => (
+                                                                <SlidingPaneNavContainer onClick={async () => await handleFunctionItemSelect(item)}>
+                                                                    <ExpandableList.Item
+                                                                        key={item.label}
+                                                                    >
+                                                                        {getIcon(COMPLETION_ITEM_KIND.Function)}
+                                                                        <FunctionItemLabel>{`${item.label}()`}</FunctionItemLabel>
+                                                                    </ExpandableList.Item>
+                                                                </SlidingPaneNavContainer>
+                                                            ))}
+                                                        </div>
+                                                    </ExpandableList.Section>
+                                                </ExpandableList>
+                                            )
+                                        }
+
+                                        //if sub category is empty
+                                        if (category.subCategory.length === 0) {
+                                            return null;
+                                        }
+
+                                        return (
+                                            <ExpandableList>
+                                                {category.subCategory.map((subCategory) => (
+                                                    <ExpandableList.Section sx={{ marginTop: '20px' }} key={subCategory.label} title={subCategory.label} level={0}>
+                                                        <div style={{ marginTop: '10px' }}>
+                                                            {subCategory.items.map((item) => (
+                                                                <SlidingPaneNavContainer onClick={async () => await handleFunctionItemSelect(item)}>
+                                                                    <ExpandableList.Item
+                                                                        key={item.label}
+                                                                    >
+                                                                        {getIcon(COMPLETION_ITEM_KIND.Function)}
+                                                                        <FunctionItemLabel>{`${item.label}()`}</FunctionItemLabel>
+                                                                    </ExpandableList.Item>
+                                                                </SlidingPaneNavContainer>
+                                                            ))}
+                                                        </div>
+                                                    </ExpandableList.Section>
+                                                ))}
+                                            </ExpandableList>
+                                        )
+                                    })
+                                )
+                            }
+                        </>
+                    )
+                }
+            </ScrollableContainer>
+            <Divider sx={{ margin: '0px' }} />
+            <div style={{ marginTop: "auto", display: 'flex', flexDirection: 'column', justifyContent: 'space-around', padding: '8px' }}>
+                <DynamicModal width={400} height={600} anchorRef={anchorRef} title="Create new Function" openState={isModalOpen} setOpenState={setIsModalOpen}>
+                    <DynamicModal.Trigger>
+                        <FooterButtons sx={{ display: 'flex', justifyContent: 'space-between', overflow: "hidden" }} startIcon='add' title="New Function" />
+                    </DynamicModal.Trigger>
+                    <FunctionFormStatic
+                        projectPath={projectUri}
+                        filePath={defaultFunctionsFile}
+                        handleSubmit={onChange}
+                        functionName={undefined}
+                        isDataMapper={false}
+                        defaultType={selectedType?.label}
+                    />
+                </DynamicModal>
+                <FooterButtons sx={{ display: 'flex', justifyContent: 'space-between' }} startIcon='add' title="Open Function Browser" onClick={() => setIsLibraryBrowserOpen(true)} />
+
+            </div>
+            {isLibraryBrowserOpen && (
+                <LibraryBrowser
+                    anchorRef={anchorRef}
+                    isLoading={isLoading}
+                    libraryBrowserInfo={libraryBrowserInfo as HelperPaneFunctionInfo}
+                    setFilterText={handleFunctionSearch}
+                    onBack={() => setIsLibraryBrowserOpen(false)}
+                    onClose={onClose}
+                    onChange={onChange}
+                    onFunctionItemSelect={onFunctionItemSelect}
+                />
+            )}
+        </div>
+    )
+}
+
+const FunctionItemLabel = styled.span`
+    font-size: 13px;
+`;
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/GenerateBICopilot.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/GenerateBICopilot.tsx
new file mode 100644
index 00000000000..e9f7df88ef0
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/GenerateBICopilot.tsx
@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { AutoResizeTextArea, Codicon, TextArea, ThemeColors } from "@wso2/ui-toolkit"
+import styled from "@emotion/styled";
+import { useState } from "react";
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+`
+
+const PromptBox = styled.div`
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+`
+
+const StyledTextArea = styled(AutoResizeTextArea)`
+    ::part(control) {
+        font-family: monospace;
+        font-size: 12px;
+        min-height: 20px;
+        padding: 5px 8px;
+    }
+`;
+
+const GenerateButton = styled.button`
+    width: 30px;
+    height: 30px;
+    border: none;
+    border-radius: 100%;
+    background-color: ${ThemeColors.PRIMARY};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+`;
+
+const ButtonContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    right: 10px;
+    top: 0;
+    height: 100%;
+`
+
+export const GenerateBICopilot = () => {
+
+    const [prompt, setPrompt] = useState('');
+    const [generatedText, setGeneratedText] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+
+    const getGeneratedText = async () => {
+        return new Promise<string>((resolve) => {
+            setTimeout(() => {
+                resolve("This is the generated text you got!");
+            }, 1000);
+        });
+    }
+
+    const handlePromptChange = async (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setPrompt(event?.target?.value || '');
+    }
+
+    const handleGenerate = async () => {
+        setGeneratedText('');
+        setIsLoading(true);
+        const generatedText = await getGeneratedText();
+
+        let i = 0;
+        function animate() {
+            setGeneratedText(generatedText.slice(0, i));
+            i++;
+            if (i <= generatedText.length) {
+                setTimeout(animate, 10);
+            } else {
+                setIsLoading(false);
+                setPrompt('');
+            }
+        }
+        animate();
+    };
+
+    return (
+        <Container>
+            <PromptBox >
+                <TextArea value={prompt} onChange={handlePromptChange} sx={{width: '100%'}} placeholder="What do you want this expression to do?" rows={2}/>                
+                <ButtonContainer>
+                    <GenerateButton disabled={isLoading} onClick={handleGenerate}>
+                        {isLoading ?<Codicon sx={{display: 'flex', alignItems: 'center', justifyContent: 'center'}} name="close" />
+                         : <Codicon sx={{display: 'flex', alignItems: 'center', justifyContent: 'center'}} name="arrow-up" />}
+                    </GenerateButton>
+                </ButtonContainer>
+            </PromptBox>
+            <TextArea value={generatedText} placeholder="Generated Expression will be shown here" rows={15}/>
+        </Container>
+    )
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/RecordConfigModal.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/RecordConfigModal.tsx
new file mode 100644
index 00000000000..446f64c8cef
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/RecordConfigModal.tsx
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { GetRecordConfigResponse, PropertyTypeMemberInfo, RecordTypeField, TypeField } from "@wso2/ballerina-core";
+import { useEffect, useState } from "react";
+import { RecordConfig } from "./RecordConfigView";
+import { useRpcContext } from "@wso2/ballerina-rpc-client/lib/context/ballerina-web-context";
+
+const getPropertyMember = (field: RecordTypeField) => {
+    return field?.recordTypeMembers.at(0);
+}
+
+type RecordConfigModalProps = {
+    recordTypeField: RecordTypeField;
+    fileName: string;
+    handleModalChange: (updatedModel: TypeField[])=>void;
+    valueTypeConstraint: string | string[];
+};
+
+export const RecordConfigModal = (props: RecordConfigModalProps) => {
+    const { recordTypeField, fileName , handleModalChange, valueTypeConstraint} = props;
+    const [recordModel, setRecordModel] = useState<TypeField[]>([]);
+
+    const propertyMember = getPropertyMember(recordTypeField)
+
+    const { rpcClient } = useRpcContext();
+
+    useEffect(() => {
+        fetchRecordModel()
+    }, []);
+
+
+    const passPackageInfoIfExists = (recordTypeMember: PropertyTypeMemberInfo) => {
+        let org = "";
+        let module = "";
+        let version = "";
+        if (recordTypeMember?.packageInfo) {
+            const parts = recordTypeMember?.packageInfo.split(':');
+            if (parts.length === 3) {
+                [org, module, version] = parts;
+            }
+        }
+        return { org, module, version }
+    }
+
+    const getRecordConfigRequest = async () => {
+        if (recordTypeField) {
+            const packageInfo = passPackageInfoIfExists(recordTypeField?.recordTypeMembers.at(0))
+            return {
+                filePath: fileName,
+                codedata: {
+                    org: packageInfo.org,
+                    module: packageInfo.module,
+                    version: packageInfo.version,
+                    packageName: propertyMember?.packageName,
+                },
+                typeConstraint: propertyMember?.type,
+            }
+        }
+        else {
+            const tomValues = await rpcClient.getCommonRpcClient().getCurrentProjectTomlValues();
+            return {
+                filePath: fileName,
+                codedata: {
+                    org: tomValues.package.org,
+                    module: tomValues.package.name,
+                    version: tomValues.package.version,
+                    packageName: propertyMember?.packageName,
+                },
+                typeConstraint: propertyMember?.type || Array.isArray(valueTypeConstraint) ? valueTypeConstraint[0] : valueTypeConstraint,
+            }
+        }
+    }
+
+    const fetchRecordModel = async () => {
+        const request = await getRecordConfigRequest();
+        const typeFieldResponse: GetRecordConfigResponse = await rpcClient.getBIDiagramRpcClient().getRecordConfig(request);
+        if (typeFieldResponse.recordConfig) {
+            const recordConfig: TypeField = {
+                name: propertyMember?.type,
+                ...typeFieldResponse.recordConfig
+            }
+
+            setRecordModel([recordConfig]);
+        }
+    }
+    return (
+        <RecordConfig
+            recordModel={recordModel}
+            onModelChange={handleModalChange}
+        />
+    );
+};
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/RecordConfigView.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/RecordConfigView.tsx
new file mode 100644
index 00000000000..ae93eae3499
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/RecordConfigView.tsx
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { TypeField } from "@wso2/ballerina-core";
+
+import styled from "@emotion/styled";
+import { MemoizedParameterBranch } from "../Components/RecordConstructView/ParameterBranch";
+
+interface ConfigureViewProps {
+    recordModel: TypeField[];
+    onModelChange: (updatedModel: TypeField[]) => void;
+}
+
+export const LabelContainer = styled.div({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    paddingBottom: '10px'
+});
+
+export const Description = styled.div({
+    color: 'var(--vscode-list-deemphasizedForeground)',
+});
+
+const Label = styled.div<{}>`
+    font-size: 14px;
+    font-family: GilmerBold;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    text-wrap: nowrap;
+`;
+
+export const PanelBody = styled.div`
+    height: 100vh;
+`;
+
+
+export function RecordConfig(props: ConfigureViewProps) {
+    const { recordModel, onModelChange } = props;
+
+    const handleOnChange = async () => {
+        onModelChange(recordModel);
+    }
+
+    return (
+        <PanelBody>
+            <>
+                <LabelContainer>
+                    <Description >{`Select fields to construct the record`}</Description>
+                </LabelContainer>
+                <MemoizedParameterBranch key={JSON.stringify(recordModel)} parameters={recordModel} depth={1} onChange={handleOnChange} />
+            </>
+        </PanelBody>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Variables.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Variables.tsx
new file mode 100644
index 00000000000..f6c58f25dc2
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/Views/Variables.tsx
@@ -0,0 +1,367 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ExpandableList } from "../Components/ExpandableList"
+import { VariableTypeIndicator } from "../Components/VariableTypeIndicator"
+import { SlidingPaneNavContainer } from "@wso2/ui-toolkit/lib/components/ExpressionEditor/components/Common/SlidingPane"
+import { useRpcContext } from "@wso2/ballerina-rpc-client"
+import { ExpressionProperty, FlowNode, LineRange, RecordTypeField } from "@wso2/ballerina-core"
+import { Codicon, CompletionItem, Divider, getIcon, HelperPaneCustom, SearchBox, ThemeColors, Typography } from "@wso2/ui-toolkit"
+import {  useEffect, useMemo, useRef, useState } from "react"
+import { getPropertyFromFormField, HelperPaneVariableInfo, useFieldContext } from "@wso2/ballerina-side-panel"
+import FooterButtons from "../Components/FooterButtons"
+import DynamicModal from "../../../../components/Modal"
+import { FormGenerator } from "../../Forms/FormGenerator"
+import { ScrollableContainer } from "../Components/ScrollableContainer"
+import { FormSubmitOptions } from "../../FlowDiagram"
+import { URI } from "vscode-uri"
+import styled from "@emotion/styled"
+
+type VariablesPageProps = {
+    fileName: string;
+    debouncedRetrieveCompletions?: (value: string, property: ExpressionProperty, offset: number, triggerCharacter?: string) => Promise<void>;
+    onChange: (value: string, isRecordConfigureChange: boolean, shouldKeepHelper?: boolean) => void;
+    targetLineRange: LineRange;
+    anchorRef: React.RefObject<HTMLDivElement>;
+    handleOnFormSubmit?: (updatedNode?: FlowNode, openInDataMapper?: boolean, options?: FormSubmitOptions) => void;
+    selectedType?: CompletionItem;
+    filteredCompletions: CompletionItem[];
+    currentValue: string;
+    recordTypeField?: RecordTypeField;
+    isInModal?: boolean;
+    handleRetrieveCompletions: (value: string, property: ExpressionProperty, offset: number, triggerCharacter?: string) => Promise<void>;
+}
+
+type VariableItemProps = {
+    item: CompletionItem;
+    onItemSelect: (value: string) => void;
+    onMoreIconClick: (value: string) => void;
+}
+
+const VariableItem = ({ item, onItemSelect, onMoreIconClick }: VariableItemProps) => {
+    const [isHovered, setIsHovered] = useState(false);
+
+    return (
+        <SlidingPaneNavContainer
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+            onClick={() => onItemSelect(item.label)}
+            data
+            sx={{
+                maxHeight: isHovered ? "none" : "32px" 
+            }}
+            endIcon={
+                <VariablesMoreIconContainer style={{ height: "10px" }} onClick={(event) => {
+                    event.stopPropagation();
+                    onMoreIconClick(item.label);
+                }}>
+                    <VariableTypeIndicator >
+                        {item.description}
+                    </VariableTypeIndicator>
+                    <Codicon name="chevron-right" />
+                </VariablesMoreIconContainer>}
+        >
+            <ExpandableList.Item>
+                {getIcon(item.kind)}
+                <Typography 
+                    variant="body3"
+                    sx={{
+                        maxWidth: isHovered ? 'none' : '20ch',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: isHovered ? 'normal' : 'nowrap',
+                        transition: 'all 0.3s ease'
+                    }}
+                >
+                    {item.label}
+                </Typography>
+            </ExpandableList.Item>
+        </SlidingPaneNavContainer>
+    );
+};
+
+const VariablesMoreIconContainer = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+     &:hover {
+        background-color:  ${ThemeColors.ON_SURFACE_VARIANT};
+        cursor: pointer;
+    }
+`;
+
+type BreadCrumbStep = {
+    label: string;
+    replaceText: string
+}
+
+export const Variables = (props: VariablesPageProps) => {
+    const { fileName, targetLineRange, onChange, anchorRef, handleOnFormSubmit, selectedType, filteredCompletions, currentValue, recordTypeField, isInModal, handleRetrieveCompletions } = props;
+    const [searchValue, setSearchValue] = useState<string>("");
+    const { rpcClient } = useRpcContext();
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const newNodeNameRef = useRef<string>("");
+    const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+    const [projectPathUri, setProjectPathUri] = useState<string>();
+    const [breadCrumbSteps, setBreadCrumbSteps] = useState<BreadCrumbStep[]>([{
+        label: "Variables",
+        replaceText: ""
+    }]);
+
+    const { field, triggerCharacters } = useFieldContext();
+
+    useEffect(() => {
+        getProjectInfo()
+    }, []);
+
+    useEffect(() => {
+        const triggerCharacter =
+            currentValue.length > 0
+                ? triggerCharacters.find((char) => currentValue[currentValue.length - 1] === char)
+                : undefined;
+
+        handleRetrieveCompletions(currentValue, getPropertyFromFormField(field), 0, triggerCharacter);
+    }, [targetLineRange])
+
+    const getProjectInfo = async () => {
+        const projectPath = await rpcClient.getVisualizerLocation();
+        setProjectPathUri(URI.file(projectPath.projectUri).fsPath);
+    }
+
+    const handleSubmit = (updatedNode?: FlowNode, openInDataMapper?: boolean) => {
+        newNodeNameRef.current = "";
+        // Safely extract the variable name as a string, fallback to empty string if not available
+        const varName = typeof updatedNode?.properties?.variable?.value === "string"
+            ? updatedNode.properties.variable.value
+            : "";
+        newNodeNameRef.current = varName;
+        handleOnFormSubmit?.(updatedNode, false, { shouldCloseSidePanel: false, shouldUpdateTargetLine: true });
+        if (isModalOpen) {
+            setIsModalOpen(false)
+        }
+    };
+    const fields = filteredCompletions.filter((completion) => (completion.kind === "field" || completion.kind === "variable") && completion.label !== 'self')
+    const methods = filteredCompletions.filter((completion) => completion.kind === "function")
+
+    const dropdownItems =
+        currentValue.length >0
+            ? fields.concat(methods)
+            : fields;
+
+    const filteredDropDownItems = useMemo(() => {
+        if (!searchValue || searchValue.length === 0) return dropdownItems;
+        return dropdownItems.filter((item) =>
+            item.label.toLowerCase().includes(searchValue.toLowerCase())
+        );
+    }, [searchValue, dropdownItems]);
+
+    const handleSearch = (searchText: string) => {
+        setSearchValue(searchText);
+    };
+
+    const handleItemSelect = (value: string) => {
+        onChange(value, false);
+    }
+
+    const handleVariablesMoreIconClick = (value: string) => {
+        const newBreadCrumSteps = [...breadCrumbSteps, {
+            label: value,
+            replaceText: currentValue + value
+        }];
+        setBreadCrumbSteps(newBreadCrumSteps);
+        onChange(value + '.', false, true);
+    }
+
+    const handleBreadCrumbItemClicked = (step: BreadCrumbStep) => {
+        const replaceText = step.replaceText === ''? step.replaceText : step.replaceText + '.';
+        onChange(replaceText, true);
+        const index = breadCrumbSteps.findIndex(item => item.label === step.label);
+        const newSteps = index !== -1 ? breadCrumbSteps.slice(0, index+1) : breadCrumbSteps;
+        setBreadCrumbSteps(newSteps);
+    }
+
+    const ExpandableListItems = () => {
+        return (
+            <>
+                {
+                    filteredDropDownItems.map((item) => (
+                        <VariableItem
+                            key={item.label}
+                            item={item}
+                            onItemSelect={handleItemSelect}
+                            onMoreIconClick={handleVariablesMoreIconClick}
+                        />
+                    ))
+                }
+            </>
+        )
+    }
+
+
+    const getTypeDef = () => {
+        return (
+            {
+                metadata: {
+                    label: "Type",
+                    description: "Type of the variable",
+                },
+                valueType: "TYPE",
+                value: selectedType?.label,
+                placeholder: "var",
+                optional: false,
+                editable: true,
+                advanced: false,
+                hidden: false,
+            }
+        )
+
+    }
+
+
+    const selectedNode: FlowNode = {
+        codedata: {
+            node: 'VARIABLE',
+            isNew: true,
+        },
+        flags: 0,
+        id: "31",
+        metadata: {
+            label: 'Declare Variable',
+            description: 'New variable with type'
+        },
+        properties: {
+            variable: {
+                metadata: {
+                    label: "Name",
+                    description: "Name of the variable",
+                },
+                valueType: "IDENTIFIER",
+                value: "var1",
+                optional: false,
+                editable: true,
+                advanced: false,
+                hidden: false,
+            },
+            type: getTypeDef(),
+            expression: {
+                metadata: {
+                    label: "Expression",
+                    description: "Expression of the variable",
+                },
+                valueType: "ACTION_OR_EXPRESSION",
+                value: "",
+                optional: false,
+                editable: true,
+                advanced: false,
+                hidden: false,
+            },
+        },
+        returning: false,
+        branches: []
+    };
+
+    const findNodeWithName = (node: FlowNode, name: string) => {
+        return node?.properties?.variable?.value === name;
+    }
+
+    const searchNodes = (nodes: FlowNode[], name: string): FlowNode | undefined => {
+        for (const node of nodes) {
+            if (findNodeWithName(node, name)) {
+                return node;
+            }
+            if (node.branches && node.branches.length > 0) {
+                for (const branch of node.branches) {
+                    if (branch.children && branch.children.length > 0) {
+                        const foundNode = searchNodes(branch.children, name);
+                        if (foundNode) {
+                            return foundNode;
+                        }
+                    }
+                }
+            }
+        }
+        return undefined;
+    };
+
+    return (
+        <div style={{
+            display: "flex",
+            flexDirection: "column",
+            height: "100%",
+            overflow: "hidden"
+        }}>
+
+            {
+                breadCrumbSteps.length > 1 && (
+                    <div style={{ display: "flex", gap: '8px', padding: '5px 8px', backgroundColor: ThemeColors.SURFACE_DIM_2 }}>
+                        {breadCrumbSteps.map((step, index) => (
+                            <span key={index} style={{ cursor: 'pointer', color: ThemeColors.HIGHLIGHT }}>
+                                <span onClick={() => handleBreadCrumbItemClicked(step)}>
+                                    {step.label}
+                                </span>
+                                {index < breadCrumbSteps.length - 1 && <span style={{ margin: '0 8px' }}>{'>'}</span>}
+                            </span>
+                        ))}
+
+                    </div>
+                )}
+            <div style={{ display: "flex", justifyContent: "center", alignItems: "center", margin: "3px 8px", gap: '5px' }}>
+                <SearchBox sx={{ width: "100%" }} placeholder='Search' value={searchValue} onChange={handleSearch} />
+            </div>
+
+            <ScrollableContainer style={{ margin: '8px 0px' }}>
+                {isLoading ? (
+                    <HelperPaneCustom.Loader />
+                ) : (
+                    <ExpandableList>
+                        <ExpandableListItems />
+                    </ExpandableList>
+                )}
+            </ScrollableContainer>
+
+            <Divider sx={{ margin: "0px" }} />
+            {!isInModal &&
+                <div style={{ marginTop: "auto", padding: '8px' }}>
+                    <DynamicModal
+                        width={420}
+                        height={600}
+                        anchorRef={anchorRef}
+                        title="Declare Variable"
+                        openState={isModalOpen}
+                        setOpenState={setIsModalOpen}>
+                        <DynamicModal.Trigger>
+                            <FooterButtons startIcon='add' title="New Variable" />
+                        </DynamicModal.Trigger>
+                        <FormGenerator
+                            fileName={fileName}
+                            node={selectedNode}
+                            connections={[]}
+                            targetLineRange={targetLineRange}
+                            projectPath={projectPathUri}
+                            editForm={false}
+                            onSubmit={handleSubmit}
+                            showProgressIndicator={false}
+                            resetUpdatedExpressionField={() => { }}
+                            isInModal={true}
+                        />
+                    </DynamicModal>
+                </div>}
+        </div>
+    )
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/index.tsx
new file mode 100644
index 00000000000..d783a357326
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/index.tsx
@@ -0,0 +1,473 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { RefObject, useEffect, useLayoutEffect, useRef, useState } from 'react';
+
+import { ExpandableList } from './Components/ExpandableList';
+import { Variables } from './Views/Variables';
+import { CompletionInsertText, ExpressionProperty, FlowNode, LineRange, RecordSourceGenRequest, RecordSourceGenResponse, RecordTypeField, TypeField } from '@wso2/ballerina-core';
+import { COMPLETION_ITEM_KIND, CompletionItem, FormExpressionEditorRef, getIcon, HelperPaneCustom, HelperPaneHeight, ThemeColors, Typography } from '@wso2/ui-toolkit';
+import {  SlidingPane, SlidingPaneHeader, SlidingPaneNavContainer, SlidingWindow } from '@wso2/ui-toolkit/lib/components/ExpressionEditor/components/Common/SlidingPane';
+import { CreateValue } from './Views/CreateValue';
+import DynamicModal from '../../../components/Modal';
+import { FunctionsPage } from './Views/Functions';
+import { FormSubmitOptions } from '../FlowDiagram';
+import { EXPR_ICON_WIDTH } from '@wso2/ui-toolkit/lib/components/ExpressionEditor/components/Form';
+import { Configurables } from './Views/Configurables';
+import styled from '@emotion/styled';
+import { useRpcContext } from '@wso2/ballerina-rpc-client';
+import { RecordConfigModal } from './Views/RecordConfigModal';
+
+const MAX_MENU_ITEM_COUNT = 4;
+
+export type HelperPaneNewProps = {
+    fieldKey: string;
+    fileName: string;
+    targetLineRange: LineRange;
+    exprRef: RefObject<FormExpressionEditorRef>;
+    anchorRef: RefObject<HTMLDivElement>;
+    onClose: () => void;
+    defaultValue: string;
+    currentValue: string;
+    onChange: (value: string, updatedCursorPosition: number) => void;
+    helperPaneHeight: HelperPaneHeight;
+    recordTypeField?: RecordTypeField;
+    updateImports: (key: string, imports: { [key: string]: string }) => void;
+    isAssignIdentifier?: boolean;
+    completions: CompletionItem[],
+    projectPath?: string,
+    handleOnFormSubmit?: (updatedNode?: FlowNode, isDataMapperFormUpdate?: boolean, options?: FormSubmitOptions) => void
+    selectedType?: CompletionItem;
+    filteredCompletions?: CompletionItem[];
+    isInModal?: boolean;
+    valueTypeConstraint?: string | string[];
+    handleRetrieveCompletions: (value: string, property: ExpressionProperty, offset: number, triggerCharacter?: string) => Promise<void>;
+};
+
+const TitleContainer = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+`;
+
+const HelperPaneNewEl = ({
+    fieldKey,
+    fileName,
+    targetLineRange,
+    exprRef,
+    anchorRef,
+    onClose,
+    currentValue,
+    onChange,
+    recordTypeField,
+    updateImports,
+    handleOnFormSubmit,
+    selectedType,
+    filteredCompletions,
+    isInModal,
+    valueTypeConstraint,
+    handleRetrieveCompletions
+}: HelperPaneNewProps) => {
+    const [position, setPosition] = useState<{ top: number, left: number }>({ top: 0, left: 0 });
+    const paneRef = useRef<HTMLDivElement>(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [paneWidth, setPaneWidth] = useState<number>(0);
+    const [selectedItem, setSelectedItem] = useState<number>();
+    const currentMenuItemCount = valueTypeConstraint ? 4 : 3
+    // Create refs array for all menu items
+    const menuItemRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+    const rect = exprRef.current?.parentElement?.getBoundingClientRect();
+
+    const { rpcClient } = useRpcContext();
+
+    useLayoutEffect(() => {
+        const trySetWidth = () => {
+            const inputEl = exprRef.current?.parentElement;
+            if (inputEl) {
+                const rect = inputEl.getBoundingClientRect();
+                setPaneWidth(rect.width + EXPR_ICON_WIDTH - 6);
+            } else {
+                // Try again on next frame if it's not ready yet
+                requestAnimationFrame(trySetWidth);
+            }
+        };
+
+        trySetWidth();
+    }, []);
+
+    useLayoutEffect(() => {
+        if (anchorRef.current) {
+            const host = anchorRef.current.shadowRoot?.host as HTMLElement | undefined;
+            const target = host || (anchorRef.current as unknown as HTMLElement);
+            if (target && target.getBoundingClientRect) {
+                const rect = target.getBoundingClientRect();
+                setPosition({
+                    top: rect.bottom + window.scrollY,
+                    left: rect.left + window.scrollX,
+                });
+            }
+        }
+    }, [anchorRef]);
+
+    const ifCTRLandUP = (e: KeyboardEvent) => {
+        return (
+            (e.ctrlKey || e.metaKey) && e.key === "ArrowUp"
+        );
+    };
+
+    const ifCTRLandDown = (e: KeyboardEvent) => {
+        return (
+            (e.ctrlKey || e.metaKey) && e.key === "ArrowDown"
+        );
+    };
+
+    const ifCTRLandENTER = (e: KeyboardEvent) => {
+        return (
+            (e.ctrlKey || e.metaKey) && e.key === "Enter"
+        );
+    };
+
+    const handleKeyPress = (event: KeyboardEvent) => {
+        if (ifCTRLandUP(event)) {
+            setSelectedItem((prev) => {
+                const current = prev ?? 0; // if prev is undefined, use 0
+                return current > 0 ? current - 1 : current;
+            });
+        } else if (ifCTRLandENTER(event)) {
+            const selectedMenuRef = menuItemRefs.current[selectedItem ?? 0]; // fallback to 0
+            if (selectedMenuRef) {
+                selectedMenuRef.click();
+                event.preventDefault();
+            }
+        } else if (ifCTRLandDown(event)) {
+            setSelectedItem((prev) => {
+                const current = prev ?? 0;
+                return current < currentMenuItemCount - 1 ? current + 1 : current;
+            });
+        }
+    };
+
+
+    useEffect(() => {
+        const handleKeyDown = (event: KeyboardEvent) => {
+            event?.key && handleKeyPress(event);
+        };
+
+        window.addEventListener("keydown", handleKeyDown);
+
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, []);
+
+    const getInsertText = (insertText: string | CompletionInsertText): string => {
+        if (typeof insertText === 'string') {
+            return insertText;
+        }
+        return insertText.value;
+    };
+
+    const getCursorOffset = (insertText: string | CompletionInsertText): number => {
+        if (typeof insertText === 'string') {
+            return 0;
+        }
+        return insertText.cursorOffset ?? 0;
+    };
+
+    const handleChange = (insertText: string | CompletionInsertText, isRecordConfigureChange?: boolean, shouldKeepHelper?: boolean) => {
+        const value = getInsertText(insertText);
+        const cursorOffset = getCursorOffset(insertText);
+        const cursorPosition = exprRef.current?.shadowRoot?.querySelector('textarea')?.selectionStart;
+        const updatedCursorPosition = cursorPosition + value.length + cursorOffset;
+        let updatedValue = value;
+
+        if (!isRecordConfigureChange) {
+            updatedValue = currentValue.slice(0, cursorPosition) + value + currentValue.slice(cursorPosition);
+        }
+
+        // Update the value in the expression editor
+        onChange(updatedValue, updatedCursorPosition);
+        // Focus the expression editor
+        exprRef.current?.focus();
+        // Set the cursor
+        exprRef.current?.setCursor(updatedValue, updatedCursorPosition);
+        if (!shouldKeepHelper && !isRecordConfigureChange) {
+            onClose();
+        }
+    };
+
+    const isItemSelected = (currentCount: number, itemIndex: number) => {
+        const trueItemIndex = currentCount - MAX_MENU_ITEM_COUNT + itemIndex;
+        return (trueItemIndex >= 0) && (selectedItem === trueItemIndex);
+    }
+
+    const getMenuItemColor = (currentCount: number, itemIndex: number) => {
+        return isItemSelected(currentCount, itemIndex) ? ThemeColors.SURFACE_DIM_2 : "transparent";
+    }
+
+    const handleModalChange = async (updatedModel: TypeField[]) => {
+        const request: RecordSourceGenRequest = {
+            filePath: fileName,
+            type: updatedModel[0]
+        }
+        const recordSourceResponse: RecordSourceGenResponse = await rpcClient.getBIDiagramRpcClient().getRecordSource(request);
+        console.log(">>> recordSourceResponse", recordSourceResponse);
+
+        if (recordSourceResponse.recordValue !== undefined) {
+            const content = recordSourceResponse.recordValue;
+            handleChange(content, true);
+        }
+    }
+
+    // Scroll selected item into view when selection changes
+    useEffect(() => {
+        if (menuItemRefs.current[selectedItem]) {
+            menuItemRefs.current[selectedItem]?.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest'
+            });
+        }
+    }, [selectedItem]);
+
+    return (
+        <HelperPaneCustom anchorRef={anchorRef}>
+            <HelperPaneCustom.Body>
+                <SlidingWindow>
+                    <SlidingPane name="PAGE1" paneWidth={rect.width} paneHeight='170px'>
+                        <div style={{ padding: '8px 0px' }}>
+                            <ExpandableList >
+
+                                {valueTypeConstraint && (
+                                    recordTypeField ?
+                                        <SlidingPaneNavContainer onClick={() => setIsModalOpen(true)}>
+                                            <ExpandableList.Item>
+                                                {getIcon(COMPLETION_ITEM_KIND.Value)}
+                                                <Typography variant="body3" sx={{ fontWeight: 600 }}>
+                                                    Create value
+                                                </Typography>
+                                            </ExpandableList.Item>
+                                        </SlidingPaneNavContainer> :
+                                        <SlidingPaneNavContainer
+                                            ref={el => menuItemRefs.current[0] = el}
+                                            to="CREATE_VALUE"
+                                            data={recordTypeField}
+                                            sx={{ backgroundColor: getMenuItemColor(currentMenuItemCount, 0) }}
+                                        >
+                                            <ExpandableList.Item>
+                                                {getIcon(COMPLETION_ITEM_KIND.Value)}
+                                                <Typography variant="body3" sx={{ fontWeight: 600 }}>
+                                                    Create Value
+                                                </Typography>
+                                            </ExpandableList.Item>
+                                        </SlidingPaneNavContainer>
+                                )}
+                                <SlidingPaneNavContainer
+                                    ref={el => menuItemRefs.current[1] = el}
+                                    to="VARIABLES"
+                                    sx={{ backgroundColor: getMenuItemColor(currentMenuItemCount, 1) }}
+                                >
+                                    <ExpandableList.Item>
+                                        {getIcon(COMPLETION_ITEM_KIND.Variable)}
+                                        <Typography variant="body3" sx={{ fontWeight: 600 }}>
+                                            Variables
+                                        </Typography>
+                                    </ExpandableList.Item>
+                                </SlidingPaneNavContainer>
+                                <SlidingPaneNavContainer
+                                    ref={el => menuItemRefs.current[2] = el}
+                                    to="CONFIGURABLES"
+                                    sx={{ backgroundColor: getMenuItemColor(currentMenuItemCount, 2) }}
+                                >
+                                    <ExpandableList.Item>
+                                        <TitleContainer>
+                                            {getIcon(COMPLETION_ITEM_KIND.Constant)}
+                                            <Typography variant="body3" sx={{ fontWeight: 600 }}>
+                                                Configurables
+                                            </Typography>
+                                        </TitleContainer>
+                                    </ExpandableList.Item>
+                                </SlidingPaneNavContainer>
+                                <SlidingPaneNavContainer
+                                    ref={el => menuItemRefs.current[3] = el}
+                                    to="FUNCTIONS"
+                                    sx={{ backgroundColor: getMenuItemColor(currentMenuItemCount, 3) }}
+                                >
+                                    <ExpandableList.Item>
+                                        {getIcon(COMPLETION_ITEM_KIND.Function)}
+                                        <Typography variant="body3" sx={{ fontWeight: 600 }}>
+                                            Functions
+                                        </Typography>
+                                    </ExpandableList.Item>
+                                </SlidingPaneNavContainer>
+                            </ExpandableList>
+
+                        </div>
+                    </SlidingPane>
+
+                    {/* Variables Page */}
+                    <SlidingPane name="VARIABLES" paneWidth={rect.width}>
+                        <SlidingPaneHeader>
+                            Variables
+                        </SlidingPaneHeader>
+                        <Variables
+                            anchorRef={anchorRef}
+                            fileName={fileName}
+                            onChange={handleChange}
+                            targetLineRange={targetLineRange}
+                            handleOnFormSubmit={handleOnFormSubmit}
+                            selectedType={selectedType}
+                            filteredCompletions={filteredCompletions}
+                            currentValue={currentValue}
+                            recordTypeField={recordTypeField}
+                            isInModal={isInModal}
+                            handleRetrieveCompletions={handleRetrieveCompletions}
+                        />
+                    </SlidingPane>
+
+                    <SlidingPane name="CREATE_VALUE" paneWidth={rect.width}>
+                        <SlidingPaneHeader> Create Value</SlidingPaneHeader>
+                        <CreateValue
+                            fileName={fileName}
+                            onChange={handleChange}
+                            currentValue={currentValue}
+                            selectedType={valueTypeConstraint}
+                            recordTypeField={recordTypeField}
+                            anchorRef={anchorRef} />
+                    </SlidingPane>
+
+                    <SlidingPane name="FUNCTIONS" paneWidth={rect.width}>
+                        <SlidingPaneHeader>
+                            Functions
+                        </SlidingPaneHeader>
+                        <FunctionsPage
+                            fieldKey={fieldKey}
+                            anchorRef={anchorRef}
+                            fileName={fileName}
+                            targetLineRange={targetLineRange}
+                            onClose={onClose}
+                            onChange={handleChange}
+                            updateImports={updateImports}
+                            selectedType={selectedType} />
+                    </SlidingPane>
+
+                    <SlidingPane name="CONFIGURABLES" paneWidth={rect.width}>
+                        <SlidingPaneHeader>
+                            Configurables
+                        </SlidingPaneHeader>
+                        <Configurables
+                            anchorRef={anchorRef}
+                            fileName={fileName}
+                            onChange={handleChange}
+                            targetLineRange={targetLineRange}
+                            isInModal={isInModal}
+                        />
+                    </SlidingPane>
+                </SlidingWindow>
+
+                <DynamicModal
+                    width={500}
+                    height={600}
+                    anchorRef={anchorRef}
+                    title="Record Configuration"
+                    openState={isModalOpen}
+                    setOpenState={setIsModalOpen}>
+                 <div style={{padding: '0px 16px'}}>
+                       <RecordConfigModal
+                        valueTypeConstraint={valueTypeConstraint}
+                        fileName={fileName}
+                        recordTypeField={recordTypeField}
+                        handleModalChange={handleModalChange}
+                    />
+                 </div>
+                </DynamicModal>
+            </HelperPaneCustom.Body>
+        </HelperPaneCustom >
+    );
+};
+
+/**
+ * Function to render the helper pane for the expression editor
+ * 
+ * @param fieldKey Key of the field
+ * @param fileName File name of the expression editor
+ * @param targetLineRange Modified line range of the expression editor
+ * @param exprRef Ref object of the expression editor
+ * @param anchorRef Ref object of the library browser
+ * @param onClose Function to close the helper pane
+ * @param defaultValue Default value for the expression editor
+ * @param currentValue Current value of the expression editor
+ * @param onChange Function to handle changes in the expression editor
+ * @param helperPaneHeight Height of the helper pane
+ * @param recordTypeField Record type field
+ * @param projectPath Project path of the expression editor
+ * @param handleOnFormSubmit Function to handle form submission
+ * @param updateImports Function to update the import statements of the expression editor
+ * @param isAssignIdentifier Boolean indicating whether the expression is an assignment LV_EXPRESSION
+ * @returns JSX.Element Helper pane element
+ */
+export const getHelperPaneNew = (props: HelperPaneNewProps) => {
+    const {
+        fieldKey,
+        fileName,
+        targetLineRange,
+        exprRef,
+        anchorRef,
+        onClose,
+        defaultValue,
+        currentValue,
+        onChange,
+        helperPaneHeight,
+        recordTypeField,
+        updateImports,
+        isAssignIdentifier,
+        completions,
+        projectPath,
+        handleOnFormSubmit,
+        selectedType,
+        filteredCompletions,
+        isInModal,
+        valueTypeConstraint
+    } = props;
+
+    return (
+        <HelperPaneNewEl
+            fieldKey={fieldKey}
+            fileName={fileName}
+            targetLineRange={targetLineRange}
+            exprRef={exprRef}
+            anchorRef={anchorRef}
+            onClose={onClose}
+            defaultValue={defaultValue}
+            currentValue={currentValue}
+            onChange={onChange}
+            helperPaneHeight={helperPaneHeight}
+            recordTypeField={recordTypeField}
+            updateImports={updateImports}
+            isAssignIdentifier={isAssignIdentifier}
+            completions={completions}
+            projectPath={projectPath}
+            handleOnFormSubmit={handleOnFormSubmit}
+            selectedType={selectedType}
+            filteredCompletions={filteredCompletions}
+            isInModal={isInModal}
+            valueTypeConstraint={valueTypeConstraint}
+            handleRetrieveCompletions={props.handleRetrieveCompletions}
+        />
+    );
+};
diff --git a/workspaces/ballerina/data-mapper-view/src/utils/data-mapper-view-state.ts b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/styles/Backgrounds.tsx
similarity index 74%
rename from workspaces/ballerina/data-mapper-view/src/utils/data-mapper-view-state.ts
rename to workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/styles/Backgrounds.tsx
index af4c99a0899..488a494837d 100644
--- a/workspaces/ballerina/data-mapper-view/src/utils/data-mapper-view-state.ts
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/styles/Backgrounds.tsx
@@ -16,6 +16,15 @@
  * under the License.
  */
 
-export class DataMapperViewState {
-    public elementIndex: number;
-}
+import styled from "@emotion/styled";
+
+
+export const HelperBackground = styled.div`
+  background:rgb(41, 41, 41);
+  color: #ffffff;
+  padding: 10px 20px;
+  border-radius: 5px;
+  border: none;
+  height: 100%;
+  font-size: 16px;
+`;
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/styles/HorizontalList.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/styles/HorizontalList.tsx
new file mode 100644
index 00000000000..a929705fb43
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/HelperPaneNew/styles/HorizontalList.tsx
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import styled from "@emotion/styled";
+
+export const HorizontalListContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+`;
+
+export const HorizontalListItem = styled.div`
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+`;
+
+export const HorizontalListItemLeftContent = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 10px;
+`;
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/ConfigureProjectForm.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/ConfigureProjectForm.tsx
new file mode 100644
index 00000000000..3e55736eb3c
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/ConfigureProjectForm.tsx
@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ActionButtons, Typography } from "@wso2/ui-toolkit";
+import { useState } from "react";
+import { BodyText } from "../../styles";
+import { ButtonWrapper } from "./styles";
+import { ConfigureProjectFormProps } from "./types";
+import { ProjectFormFields, ProjectFormData } from "../ProjectForm/ProjectFormFields";
+import { isFormValid } from "../ProjectForm/utils";
+
+export function ConfigureProjectForm({ onNext, onBack }: ConfigureProjectFormProps) {
+    const [formData, setFormData] = useState<ProjectFormData>({
+        integrationName: "",
+        packageName: "",
+        path: "",
+        createDirectory: true,
+        orgName: "",
+        version: "",
+    });
+
+    const handleFormDataChange = (data: Partial<ProjectFormData>) => {
+        setFormData(prev => ({ ...prev, ...data }));
+    };
+
+    const handleCreateProject = () => {
+        onNext({
+            projectName: formData.integrationName,
+            packageName: formData.packageName,
+            projectPath: formData.path,
+            createDirectory: formData.createDirectory,
+            orgName: formData.orgName || undefined,
+            version: formData.version || undefined,
+        });
+    };
+
+    return (
+        <>
+            <Typography variant="h2">Configure Your Integration Project</Typography>
+            <BodyText>Please provide the necessary details to create your integration project.</BodyText>
+            
+            <ProjectFormFields
+                formData={formData}
+                onFormDataChange={handleFormDataChange}
+            />
+
+            <ButtonWrapper>
+                <ActionButtons
+                    primaryButton={{
+                        text: "Create and Open Project",
+                        onClick: handleCreateProject,
+                        disabled: !isFormValid(formData)
+                    }}
+                    secondaryButton={{
+                        text: "Back",
+                        onClick: onBack,
+                        disabled: false
+                    }}
+                />
+            </ButtonWrapper>
+        </>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/ImportIntegrationForm.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/ImportIntegrationForm.tsx
new file mode 100644
index 00000000000..6e2c4c185ce
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/ImportIntegrationForm.tsx
@@ -0,0 +1,172 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { MigrationTool } from "@wso2/ballerina-core";
+import { useRpcContext } from "@wso2/ballerina-rpc-client";
+import { ActionButtons, Icon, LocationSelector, Typography } from "@wso2/ui-toolkit";
+import { useState } from "react";
+import ButtonCard from "../../../components/ButtonCard";
+import { LoadingRing } from "../../../components/Loader";
+import { BodyText, LoadingOverlayContainer } from "../../styles";
+import { IntegrationParameters } from "./components/IntegrationParameters";
+import {
+    ButtonWrapper,
+    IntegrationCardGrid,
+    PathText,
+    StepContainer,
+} from "./styles";
+import { FinalIntegrationParams, ImportIntegrationFormProps } from "./types";
+import { getImportTooltip, SELECTION_TEXT } from "./utils";
+
+export function ImportIntegrationForm({
+    selectedIntegration,
+    migrationTools,
+    onSelectIntegration,
+    pullIntegrationTool,
+    setImportParams,
+    pullingTool,
+    toolPullProgress,
+    handleStartImport,
+    onBack,
+}: ImportIntegrationFormProps) {
+    const { rpcClient } = useRpcContext();
+
+    const [importSourcePath, setImportSourcePath] = useState("");
+    const [integrationParams, setIntegrationParams] = useState<Record<string, any>>({});
+
+    const isImportDisabled = importSourcePath.length < 2 || !selectedIntegration;
+
+    const handleIntegrationSelection = (integration: MigrationTool) => {
+        // Reset state when a new integration is selected
+        setImportSourcePath("");
+        onSelectIntegration(integration);
+        const defaultParams = integration.parameters.reduce((acc, param) => {
+            acc[param.key] = param.defaultValue;
+            return acc;
+        }, {} as Record<string, any>);
+        setIntegrationParams(defaultParams);
+    };
+
+    const handleFolderSelection = async () => {
+        const result = await rpcClient.getCommonRpcClient().selectFileOrFolderPath();
+        if (result?.path) {
+            setImportSourcePath(result.path);
+        }
+    };
+
+    const handleImportIntegration = () => {
+        if (!selectedIntegration || !importSourcePath) return;
+
+        const finalParams: FinalIntegrationParams = {
+            importSourcePath,
+            type: selectedIntegration.title,
+            parameters: integrationParams,
+        };
+
+        setImportParams(finalParams);
+        if (selectedIntegration.needToPull) {
+            pullIntegrationTool(selectedIntegration.commandName, selectedIntegration.requiredVersion);
+        } else {
+            handleStartImport(finalParams, selectedIntegration, toolPullProgress);
+        }
+    };
+
+    const handleParameterChange = (paramKey: string, value: any) => {
+        setIntegrationParams((prev) => ({
+            ...prev,
+            [paramKey]: value,
+        }));
+    };
+
+    return (
+        <>
+            <BodyText>
+                This wizard converts an external integration project from MuleSoft or TIBCO into a ready-to-use BI
+                project.
+            </BodyText>
+            <Typography variant="h3" sx={{ marginTop: 20 }}>
+                Choose the source platform
+            </Typography>
+            <BodyText>Select the integration platform that your current project uses:</BodyText>
+            <IntegrationCardGrid>
+                {migrationTools.map((tool) => {
+                    return (
+                        <ButtonCard
+                            key={tool.id}
+                            id={`${tool.id}-integration-card`}
+                            icon={<Icon name="bi-import" />}
+                            title={tool.title}
+                            description=""
+                            onClick={() => handleIntegrationSelection(tool)}
+                            active={selectedIntegration?.id === tool.id}
+                        />
+                    );
+                })}
+            </IntegrationCardGrid>
+
+            {selectedIntegration && (
+                <StepContainer>
+                    <Typography variant="h3">Select Your Project Folder</Typography>
+                    <BodyText>{selectedIntegration.description}</BodyText>
+                    <LocationSelector
+                        label=""
+                        selectedFile={importSourcePath}
+                        onSelect={handleFolderSelection}
+                        btnText={importSourcePath ? "Change" : "Select Project"}
+                    />
+                </StepContainer>
+            )}
+
+            {!selectedIntegration && (
+                <PathText>
+                    <div style={{ color: "var(--vscode-editor-foreground)" }}>{SELECTION_TEXT}</div>
+                </PathText>
+            )}
+
+            {selectedIntegration && (
+                <IntegrationParameters
+                    selectedIntegration={selectedIntegration}
+                    integrationParams={integrationParams}
+                    onParameterChange={handleParameterChange}
+                />
+            )}
+
+            <ButtonWrapper>
+                <ActionButtons
+                    primaryButton={{
+                        text: "Start Migration",
+                        onClick: handleImportIntegration,
+                        disabled: isImportDisabled,
+                        tooltip: getImportTooltip(selectedIntegration, importSourcePath)
+                    }}
+                    secondaryButton={{
+                        text: "Back",
+                        onClick: onBack,
+                        disabled: false
+                    }}
+                />
+            </ButtonWrapper>
+
+            {pullingTool && (
+                <LoadingOverlayContainer>
+                    <LoadingRing message="Pulling integration tool..." />
+                </LoadingOverlayContainer>
+            )}
+        </>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/MigrationProgressView.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/MigrationProgressView.tsx
new file mode 100644
index 00000000000..7020cdd68f6
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/MigrationProgressView.tsx
@@ -0,0 +1,159 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useRpcContext } from "@wso2/ballerina-rpc-client";
+import { ActionButtons, Typography } from "@wso2/ui-toolkit";
+import { useEffect, useMemo, useState } from "react";
+import { BodyText } from "../../styles";
+import { MigrationLogs } from "./components/MigrationLogs";
+import { MigrationStatusContent } from "./components/MigrationStatusContent";
+import { ButtonWrapper, NextButtonWrapper, StepWrapper } from "./styles";
+import { MigrationProgressProps, MigrationReportJSON } from "./types";
+import { getMigrationDisplayState, getMigrationProgressHeaderData } from "./utils";
+
+export function MigrationProgressView({
+    migrationState,
+    migrationLogs,
+    migrationCompleted,
+    migrationSuccessful,
+    migrationResponse,
+    onNext,
+    onBack,
+}: MigrationProgressProps) {
+    const [isLogsOpen, setIsLogsOpen] = useState(false);
+    const { rpcClient } = useRpcContext();
+
+    // Parse migration report JSON when available
+    const parsedReportData = useMemo(() => {
+        if (!migrationResponse?.jsonReport) return null;
+        try {
+            return JSON.parse(migrationResponse.jsonReport) as MigrationReportJSON;
+        } catch (error) {
+            console.error("Failed to parse migration report JSON:", error);
+        }
+    }, [migrationResponse?.jsonReport]);
+
+    // Auto-open logs during migration and auto-collapse when completed
+    useEffect(() => {
+        if (!migrationCompleted && migrationLogs.length > 0) {
+            // Migration is in progress and we have logs - open the dropdown
+            setIsLogsOpen(true);
+        } else if (migrationCompleted) {
+            // Migration is completed - collapse the dropdown
+            setIsLogsOpen(false);
+        }
+    }, [migrationCompleted, migrationLogs.length]);
+
+    const handleViewReport = async () => {
+        console.log("View report clicked", { migrationResponse });
+        try {
+            if (migrationResponse?.report) {
+                console.log("Report found, opening via RPC...");
+                rpcClient.getMigrateIntegrationRpcClient().openMigrationReport({
+                    reportContent: migrationResponse.report,
+                    fileName: "migration-report.html",
+                });
+            }
+        } catch (error) {
+            console.error("Failed to open migration report:", error);
+        }
+    };
+
+    const handleSaveReport = async () => {
+        console.log("Save report clicked", { migrationResponse });
+        try {
+            if (!migrationResponse?.report) {
+                console.error("No report content available to save");
+                return;
+            }
+
+            // VSCode extension environment - use RPC to show save dialog
+            console.log("Saving report via VSCode save dialog...");
+            rpcClient.getMigrateIntegrationRpcClient().saveMigrationReport({
+                reportContent: migrationResponse.report,
+                defaultFileName: "migration-report.html",
+            });
+        } catch (error) {
+            console.error("Failed to save migration report:", error);
+        }
+    };
+
+    const displayState = getMigrationDisplayState(migrationCompleted, migrationSuccessful, !!parsedReportData);
+    const { headerText, headerDesc } = getMigrationProgressHeaderData(displayState);
+
+    return (
+        <>
+            <div>
+                <Typography variant="h2">{headerText}</Typography>
+                <BodyText>{headerDesc}</BodyText>
+            </div>
+            <StepWrapper>
+                <MigrationStatusContent
+                    state={displayState}
+                    migrationState={migrationState}
+                    migrationResponse={migrationResponse}
+                    parsedReportData={parsedReportData}
+                    onViewReport={handleViewReport}
+                    onSaveReport={handleSaveReport}
+                />
+                {displayState.showButtonsInStep && (
+                    <NextButtonWrapper>
+                        <ActionButtons
+                            primaryButton={{
+                                text: "Next",
+                                onClick: onNext,
+                                disabled: !migrationCompleted || !migrationSuccessful
+                            }}
+                            secondaryButton={{
+                                text: "Back",
+                                onClick: onBack,
+                                disabled: false
+                            }}
+                        />
+                    </NextButtonWrapper>
+                )}
+            </StepWrapper>
+
+            <MigrationLogs
+                migrationLogs={migrationLogs}
+                migrationCompleted={migrationCompleted}
+                isLogsOpen={isLogsOpen}
+                onToggleLogs={() => setIsLogsOpen(!isLogsOpen)}
+                showHeader={!(migrationCompleted && !migrationSuccessful)}
+            />
+
+            {/* Show button after logs when migration is in progress or failed */}
+            {displayState.showButtonsAfterLogs && (
+                <ButtonWrapper>
+                    <ActionButtons
+                        primaryButton={{
+                            text: "Next",
+                            onClick: onNext,
+                            disabled: !migrationCompleted || !migrationSuccessful
+                        }}
+                        secondaryButton={{
+                            text: "Back",
+                            onClick: onBack,
+                            disabled: false
+                        }}
+                    />
+                </ButtonWrapper>
+            )}
+        </>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/components/CoverageSummary.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/components/CoverageSummary.tsx
new file mode 100644
index 00000000000..01ae4353404
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/components/CoverageSummary.tsx
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Codicon } from "@wso2/ui-toolkit";
+import React from "react";
+import {
+    CoverageBadge,
+    CoverageContainer,
+    CoverageHeader,
+    CoverageLabel,
+    CoveragePercentage,
+    CoverageProgressBar,
+    CoverageProgressFill,
+    CoverageStat,
+    CoverageStats,
+    ReportButtonsContainer,
+    SaveReportButton,
+    ViewReportButton,
+} from "../styles";
+import { MigrationReportJSON } from "../types";
+import { getCoverageColor, getCoverageLevel } from "../utils";
+
+
+interface CoverageSummaryProps {
+    reportData: MigrationReportJSON;
+    onViewReport: () => void;
+    onSaveReport: () => void;
+}
+
+export const CoverageSummary: React.FC<CoverageSummaryProps> = ({ reportData, onViewReport, onSaveReport }) => {
+    const { coverageOverview } = reportData;
+    const coverageLevel = getCoverageLevel(coverageOverview.coverageLevel);
+    const coverageColor = getCoverageColor(coverageOverview.coverageLevel);
+
+    return (
+        <CoverageContainer>
+            <CoverageHeader>
+                <div>
+                    <CoveragePercentage coverageColor={coverageColor}>
+                        {coverageOverview.coveragePercentage}%
+                    </CoveragePercentage>
+                    <CoverageLabel>Migration Coverage</CoverageLabel>
+                </div>
+                <CoverageStats>
+                    <CoverageStat>
+                        <span>Total {coverageOverview.unitName}(s):</span>
+                        <strong>{coverageOverview.totalElements}</strong>
+                    </CoverageStat>
+                    <CoverageStat>
+                        <span>Migratable {coverageOverview.unitName}(s):</span>
+                        <strong>{coverageOverview.migratableElements}</strong>
+                    </CoverageStat>
+                    <CoverageStat>
+                        <span>Non-migratable {coverageOverview.unitName}(s):</span>
+                        <strong>{coverageOverview.nonMigratableElements}</strong>
+                    </CoverageStat>
+                </CoverageStats>
+            </CoverageHeader>
+            <CoverageProgressBar>
+                <CoverageProgressFill percentage={coverageOverview.coveragePercentage} coverageColor={coverageColor} />
+            </CoverageProgressBar>
+            <CoverageBadge>{coverageLevel}</CoverageBadge>
+            <ReportButtonsContainer>
+                <ViewReportButton onClick={onViewReport} appearance="secondary">
+                    <Codicon name="file-text" />
+                    &nbsp;View Full Report
+                </ViewReportButton>
+                <SaveReportButton onClick={onSaveReport} appearance="secondary">
+                    <Codicon name="save" />
+                    &nbsp;Save Report
+                </SaveReportButton>
+            </ReportButtonsContainer>
+        </CoverageContainer>
+    );
+};
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/components/IntegrationParameters.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/components/IntegrationParameters.tsx
new file mode 100644
index 00000000000..49d80123f64
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/components/IntegrationParameters.tsx
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { MigrationTool } from "@wso2/ballerina-core";
+import { CheckBox, Dropdown, OptionProps, TextField, Typography } from "@wso2/ui-toolkit";
+import React from "react";
+import { ParameterItem, ParametersSection } from "../styles";
+import { BodyText } from "../../../styles";
+
+interface IntegrationParametersProps {
+    selectedIntegration: MigrationTool;
+    integrationParams: Record<string, any>;
+    onParameterChange: (paramKey: string, value: any) => void;
+}
+
+export const IntegrationParameters: React.FC<IntegrationParametersProps> = ({
+    selectedIntegration,
+    integrationParams,
+    onParameterChange,
+}) => {
+    if (!selectedIntegration || !selectedIntegration.parameters.length) return null;
+
+    return (
+        <ParametersSection>
+            <Typography variant="h3" sx={{ marginBottom: 12 }}>
+                Configure {selectedIntegration.title} Settings
+            </Typography>
+            <BodyText>{`Configure additional settings for ${selectedIntegration.title} migration.`}</BodyText>
+            {selectedIntegration.parameters.map((param) => (
+                <ParameterItem key={param.key}>
+                    {param.valueType === "boolean" ? (
+                        <CheckBox
+                            checked={integrationParams[param.key] || false}
+                            onChange={(checked) => onParameterChange(param.key, checked)}
+                            label={param.label}
+                        />
+                    ) : param.valueType === "enum" && param.options ? (
+                        <Dropdown
+                            id={`${param.key}-dropdown`}
+                            label={param.label}
+                            description={param.description}
+                            value={integrationParams[param.key] || param.defaultValue || param.options[0]}
+                            items={param.options.map(option => ({ 
+                                id: option, 
+                                content: option 
+                            } as OptionProps))}
+                            onChange={(e) => onParameterChange(param.key, e.target.value)}
+                            containerSx={{
+                                position: 'relative',
+                                marginBottom: '60px',
+                                '& vscode-dropdown::part(listbox)': {
+                                    position: 'absolute !important',
+                                    top: '100% !important',
+                                    bottom: 'auto !important',
+                                    transform: 'none !important',
+                                    marginTop: '2px !important'
+                                }
+                            }}
+                        />
+                    ) : (
+                        <TextField
+                            value={integrationParams[param.key] || ""}
+                            description={param.description}
+                            onTextChange={(value) => onParameterChange(param.key, value)}
+                            label={param.label}
+                            placeholder={`Enter ${param.label.toLowerCase()}`}
+                        />
+                    )}
+                </ParameterItem>
+            ))}
+        </ParametersSection>
+    );
+};
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/components/MigrationLogs.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/components/MigrationLogs.tsx
new file mode 100644
index 00000000000..a0663bd03e7
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/components/MigrationLogs.tsx
@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Codicon, Typography } from "@wso2/ui-toolkit";
+import React, { useEffect, useRef } from "react";
+import {
+    CardAction,
+    CollapsibleHeader,
+    LogEntry,
+    LogsContainer,
+    StepWrapper,
+} from "../styles";
+
+
+interface MigrationLogsProps {
+    migrationLogs: string[];
+    migrationCompleted: boolean;
+    isLogsOpen: boolean;
+    onToggleLogs: () => void;
+    showHeader?: boolean;
+}
+
+const getColourizedLog = (log: string, index: number) => {
+    if (log.startsWith("[SEVERE]")) {
+        return (
+            <LogEntry key={index} style={{ color: "var(--vscode-terminal-ansiRed)" }}>
+                {log}
+            </LogEntry>
+        );
+    } else if (log.startsWith("[WARN]")) {
+        return (
+            <LogEntry key={index} style={{ color: "var(--vscode-terminal-ansiYellow)" }}>
+                {log}
+            </LogEntry>
+        );
+    }
+    return <LogEntry key={index}>{log}</LogEntry>;
+};
+
+export const MigrationLogs: React.FC<MigrationLogsProps> = ({
+    migrationLogs,
+    migrationCompleted,
+    isLogsOpen,
+    onToggleLogs,
+    showHeader = true,
+}) => {
+    const logsContainerRef = useRef<HTMLDivElement>(null);
+
+    // Auto-scroll to bottom when new logs are added
+    useEffect(() => {
+        if (logsContainerRef.current && isLogsOpen && !migrationCompleted) {
+            logsContainerRef.current.scrollTop = logsContainerRef.current.scrollHeight;
+        }
+    }, [migrationLogs, isLogsOpen, migrationCompleted]);
+
+    if (migrationLogs.length === 0) {
+        return null;
+    }
+
+    return (
+        <StepWrapper>
+            {/* Only show header when migration is completed and showHeader is true */}
+            {migrationCompleted && showHeader && (
+                <CollapsibleHeader onClick={onToggleLogs}>
+                    <Typography variant="h4">View Detailed Logs</Typography>
+                    <CardAction>
+                        {isLogsOpen ? <Codicon name={"chevron-down"} /> : <Codicon name={"chevron-right"} />}
+                    </CardAction>
+                </CollapsibleHeader>
+            )}
+            {/* Show logs container when open OR when migration is in progress OR when showHeader is false */}
+            {(isLogsOpen || !migrationCompleted || !showHeader) && (
+                <LogsContainer ref={logsContainerRef}>
+                    {migrationLogs.map(getColourizedLog)}
+                </LogsContainer>
+            )}
+        </StepWrapper>
+    );
+};
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/components/MigrationStatusContent.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/components/MigrationStatusContent.tsx
new file mode 100644
index 00000000000..5c45b237b40
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/components/MigrationStatusContent.tsx
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { ImportIntegrationResponse } from "@wso2/ballerina-core";
+import { ProgressRing, Typography } from "@wso2/ui-toolkit";
+import React from "react";
+import { MigrationDisplayState, MigrationReportJSON } from "../types";
+import { CoverageSummary } from "./CoverageSummary";
+import { ReportButtons } from "./ReportButtons";
+
+interface MigrationStatusContentProps {
+    state: MigrationDisplayState;
+    migrationState: string | null;
+    migrationResponse: ImportIntegrationResponse | null;
+    parsedReportData: MigrationReportJSON | null;
+    onViewReport: () => void;
+    onSaveReport: () => void;
+}
+
+export const MigrationStatusContent: React.FC<MigrationStatusContentProps> = ({
+    state,
+    migrationState,
+    migrationResponse,
+    parsedReportData,
+    onViewReport,
+    onSaveReport
+}) => {
+    if (state.isInProgress) {
+        return (
+            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                <ProgressRing sx={{ width: 14, height: 14 }} color="var(--vscode-foreground)" />
+                <span style={{ color: "var(--vscode-foreground)" }}>
+                    {migrationState || "Starting migration..."}
+                </span>
+            </div>
+        );
+    }
+
+    if (state.isFailed) {
+        return (
+            <Typography variant="body3" sx={{ color: "var(--vscode-errorForeground)" }}>
+                Migration error: {migrationResponse.error}
+            </Typography>
+        );
+    }
+
+    if (state.isSuccess) {
+        if (state.hasReportData && parsedReportData) {
+            return (
+                <CoverageSummary
+                    reportData={parsedReportData}
+                    onViewReport={onViewReport}
+                    onSaveReport={onSaveReport}
+                />
+            );
+        } else {
+            return (
+                <>
+                    {migrationResponse?.report && (
+                        <ReportButtons onViewReport={onViewReport} onSaveReport={onSaveReport} />
+                    )}
+                </>
+            );
+        }
+    }
+
+    return null;
+};
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/components/ReportButtons.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/components/ReportButtons.tsx
new file mode 100644
index 00000000000..a736bea11a3
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/components/ReportButtons.tsx
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Codicon } from "@wso2/ui-toolkit";
+import React from "react";
+import {
+    ReportButtonsContainer,
+    SaveReportButton,
+    ViewReportButton,
+} from "../styles";
+
+interface ReportButtonsProps {
+    onViewReport: () => void;
+    onSaveReport: () => void;
+}
+
+export const ReportButtons: React.FC<ReportButtonsProps> = ({
+    onViewReport,
+    onSaveReport,
+}) => {
+    return (
+        <ReportButtonsContainer>
+            <ViewReportButton onClick={onViewReport} appearance="secondary">
+                <Codicon name="file-text" />
+                &nbsp;View Full Report
+            </ViewReportButton>
+            <SaveReportButton onClick={onSaveReport} appearance="secondary">
+                <Codicon name="save" />
+                &nbsp;Save Report
+            </SaveReportButton>
+        </ReportButtonsContainer>
+    );
+};
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/index.tsx
new file mode 100644
index 00000000000..99e21be37e8
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/index.tsx
@@ -0,0 +1,209 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {
+    DownloadProgress,
+    EVENT_TYPE,
+    ImportIntegrationResponse,
+    ImportIntegrationRPCRequest,
+    MACHINE_VIEW,
+    MigrateRequest,
+    MigrationTool,
+    ProjectRequest,
+} from "@wso2/ballerina-core";
+import { useRpcContext } from "@wso2/ballerina-rpc-client";
+import { Icon, Typography } from "@wso2/ui-toolkit";
+import { Stepper, StepperContainer } from "@wso2/ui-toolkit/lib/components/Stepper/Stepper";
+import { useEffect, useState } from "react";
+import { ConfigureProjectForm } from "./ConfigureProjectForm";
+import { ImportIntegrationForm } from "./ImportIntegrationForm";
+import { MigrationProgressView } from "./MigrationProgressView";
+import { FormContainer, TitleContainer, IconButton } from "./styles";
+import { FinalIntegrationParams } from "./types";
+
+export function ImportIntegration() {
+    const { rpcClient } = useRpcContext();
+
+    // State managed by the parent component
+    const [step, setStep] = useState(0);
+    const [toolPullProgress, setToolPullProgress] = useState<DownloadProgress | null>(null);
+    const [migrationToolState, setMigrationToolState] = useState<string | null>(null);
+    const [migrationToolLogs, setMigrationToolLogs] = useState<string[]>([]);
+    const [pullingTool, setPullingTool] = useState(false);
+    const [selectedIntegration, setSelectedIntegration] = useState<MigrationTool | null>(null);
+    const [migrationTools, setMigrationTools] = useState<MigrationTool[]>([]);
+    const [importParams, setImportParams] = useState<FinalIntegrationParams | null>(null);
+    const [migrationCompleted, setMigrationCompleted] = useState(false);
+    const [migrationSuccessful, setMigrationSuccessful] = useState(false);
+    const [migrationResponse, setMigrationResponse] = useState<ImportIntegrationResponse | null>(null);
+
+    const defaultSteps = ["Select Source Project", "Migration Status", "Create and Open Project"];
+
+    const pullIntegrationTool = (commandName: string, version: string) => {
+        setPullingTool(true);
+        rpcClient.getMigrateIntegrationRpcClient().pullMigrationTool({
+            toolName: commandName,
+            version: version,
+        });
+    };
+
+    // Handler to begin the import and switch to the migration progress view
+    const handleStartImport = (
+        importParams: FinalIntegrationParams,
+        selectedIntegration: MigrationTool,
+        toolPullProgress: DownloadProgress
+    ) => {
+        if (selectedIntegration.needToPull && toolPullProgress && toolPullProgress.step === -1) {
+            console.error("Cannot start import, tool download failed.");
+        }
+        setStep(1);
+        console.log("Starting import with params:", importParams);
+
+        const params: ImportIntegrationRPCRequest = {
+            packageName: "",
+            commandName: selectedIntegration.commandName,
+            sourcePath: importParams.importSourcePath,
+            parameters: importParams.parameters,
+        };
+        rpcClient
+            .getMigrateIntegrationRpcClient()
+            .importIntegration(params)
+            .then((response) => {
+                setMigrationCompleted(true);
+                setMigrationResponse(response);
+                if (!response.error) {
+                    setMigrationSuccessful(true);
+                }
+            })
+            .catch((error) => {
+                console.error("Error during TIBCO import:", error);
+            });
+    };
+
+    const handleCreateIntegrationFiles = (project: ProjectRequest) => {
+        console.log("Creating integration files with params:", importParams);
+        if (migrationResponse) {
+            const params: MigrateRequest = {
+                project: project,
+                textEdits: migrationResponse.textEdits,
+            };
+            rpcClient.getMigrateIntegrationRpcClient().migrateProject(params);
+        }
+    };
+
+    const gotToWelcome = () => {
+        rpcClient.getVisualizerRpcClient().openView({
+            type: EVENT_TYPE.OPEN_VIEW,
+            location: {
+                view: MACHINE_VIEW.BIWelcome,
+            },
+        });
+    };
+
+    const handleStepBack = () => {
+        if (step === 1) {
+            setMigrationToolState(null);
+            setMigrationToolLogs([]);
+            setMigrationCompleted(false);
+            setMigrationSuccessful(false);
+            setMigrationResponse(null);
+        }
+
+        setStep(step - 1);
+    };
+
+    const getMigrationTools = () => {
+        rpcClient
+            .getMigrateIntegrationRpcClient()
+            .getMigrationTools()
+            .then((response) => {
+                console.log("Available migration tools:", response.tools);
+                setMigrationTools(response.tools);
+            });
+    };
+
+    useEffect(() => {
+        getMigrationTools();
+
+        rpcClient.onDownloadProgress((progressUpdate) => {
+            setToolPullProgress(progressUpdate);
+            if (progressUpdate.success) {
+                setPullingTool(false);
+            }
+
+            if (progressUpdate.step === -1) {
+                setPullingTool(false);
+                rpcClient.getCommonRpcClient().showErrorMessage({ message: progressUpdate.message })
+            }
+        });
+
+        rpcClient.onMigrationToolStateChanged((state) => {
+            setMigrationToolState(state);
+        });
+
+        rpcClient.onMigrationToolLogs((log) => {
+            setMigrationToolLogs((prevLogs) => [...prevLogs, log]);
+        });
+    }, [rpcClient]);
+
+    useEffect(() => {
+        if (selectedIntegration?.needToPull && toolPullProgress && toolPullProgress.success && importParams) {
+            handleStartImport(importParams, selectedIntegration, toolPullProgress);
+        }
+    }, [toolPullProgress, importParams, selectedIntegration]);
+
+    return (
+        <FormContainer>
+            <TitleContainer>
+                <IconButton onClick={gotToWelcome}>
+                    <Icon name="bi-arrow-back" iconSx={{ color: "var(--vscode-foreground)" }} />
+                </IconButton>
+                <Typography variant="h3">Migrate External Integration</Typography>
+            </TitleContainer>
+
+            <StepperContainer style={{ marginBottom: "4%" }}>
+                <Stepper alignment="flex-start" steps={defaultSteps} currentStep={step} />
+            </StepperContainer>
+            {step === 0 && (
+                <ImportIntegrationForm
+                    selectedIntegration={selectedIntegration}
+                    migrationTools={migrationTools}
+                    setImportParams={setImportParams}
+                    pullIntegrationTool={pullIntegrationTool}
+                    pullingTool={pullingTool}
+                    toolPullProgress={toolPullProgress}
+                    onSelectIntegration={setSelectedIntegration}
+                    handleStartImport={handleStartImport}
+                    onBack={gotToWelcome}
+                />
+            )}
+            {step === 1 && (
+                <MigrationProgressView
+                    migrationState={migrationToolState}
+                    migrationLogs={migrationToolLogs}
+                    migrationCompleted={migrationCompleted}
+                    migrationSuccessful={migrationSuccessful}
+                    migrationResponse={migrationResponse}
+                    onNext={() => setStep(2)}
+                    onBack={handleStepBack}
+                />
+            )}
+            {step === 2 && <ConfigureProjectForm onNext={handleCreateIntegrationFiles} onBack={handleStepBack} />}
+        </FormContainer>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/styles.ts b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/styles.ts
new file mode 100644
index 00000000000..fd742614063
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/styles.ts
@@ -0,0 +1,307 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import styled from "@emotion/styled";
+import { Button, Codicon, Typography } from "@wso2/ui-toolkit";
+
+// Main container styles
+export const FormContainer = styled.div`
+    max-width: 660px;
+    margin: 80px 120px;
+    height: calc(100vh - 160px);
+    overflow-y: auto;
+    
+    /* Ensure dropdowns have proper stacking context */
+    position: relative;
+    z-index: 1;
+`;
+
+export const TitleContainer = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 32px;
+`;
+
+export const IconButton = styled.div`
+    cursor: pointer;
+    border-radius: 4px;
+    width: 20px;
+    height: 20px;
+    font-size: 20px;
+    &:hover {
+        background-color: var(--vscode-toolbar-hoverBackground);
+    }
+`;
+
+export const ButtonWrapper = styled.div`
+    margin-top: 20px;
+    display: flex;
+    justify-content: flex-end;
+`;
+
+// Form-specific styles
+export const IntegrationCardGrid = styled.div`
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 12px;
+    margin: 20px 0;
+`;
+
+export const ParametersSection = styled.div`
+    margin: 20px 0;
+`;
+
+export const PathText = styled.div`
+    font-family: var(--vscode-editor-font-family);
+    padding: 4px 0;
+    opacity: 0.8;
+`;
+
+export const ParameterItem = styled.div`
+    margin-bottom: 12px;
+    &:last-child {
+        margin-bottom: 0;
+    }
+`;
+
+// Configure Project Form styles
+export const InputPreviewWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    margin: 20px 0;
+`;
+
+export const PreviewText = styled(Typography)`
+    color: var(--vscode-sideBarTitle-foreground);
+    opacity: 0.5;
+    font-family: var(--vscode-editor-font-family, "Monaco", "Menlo", "Ubuntu Mono", monospace);
+    word-break: break-all;
+    min-width: 100px;
+    display: flex;
+    align-items: center;
+    line-height: 1;
+`;
+
+export const PreviewIcon = styled(Codicon)`
+    display: flex;
+    align-items: center;
+`;
+
+export const PreviewContainer = styled.div`
+    border: 1px solid var(--vscode-input-border);
+    border-radius: 4px;
+    padding: 8px 12px;
+    display: inline-flex;
+    align-items: center;
+    width: fit-content;
+    height: 28px;
+    gap: 8px;
+    background-color: var(--vscode-editor-background);
+    * {
+        cursor: default !important;
+    }
+`;
+
+export const LocationSelectorWrapper = styled.div`
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+`;
+
+// Migration Progress styles
+export const ProgressContainer = styled.div`
+    max-width: 660px;
+    margin: 80px 120px;
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+    max-height: 100vh;
+    overflow-y: auto;
+    padding-bottom: 20px;
+`;
+
+export const StepWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    align-items: flex-start;
+    margin-top: 20px;
+`;
+
+export const LogsContainer = styled.div`
+    border: 1px solid var(--vscode-widget-border);
+    border-radius: 4px;
+    padding: 16px;
+    background-color: var(--vscode-editor-background);
+    max-height: 300px;
+    overflow-y: auto;
+    font-family: var(--vscode-editor-font-family);
+    font-size: var(--vscode-editor-font-size);
+`;
+
+export const LogEntry = styled.div`
+    color: var(--vscode-foreground);
+    margin-bottom: 4px;
+    white-space: pre-wrap;
+    word-break: break-word;
+`;
+
+export const CollapsibleHeader = styled.div`
+    display: flex;
+    cursor: pointer;
+    gap: 8px;
+    align-items: center;
+    &:hover {
+        opacity: 0.8;
+    }
+`;
+
+export const CardAction = styled.div`
+    margin-left: auto;
+`;
+
+// Coverage Summary styles
+export const CoverageContainer = styled.div`
+    border: 1px solid var(--vscode-widget-border);
+    border-radius: 4px;
+    padding: 24px;
+    background-color: var(--vscode-editor-background);
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 100%;
+`;
+
+export const CoverageHeader = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    justify-content: space-between;
+`;
+
+export const CoveragePercentage = styled.div<{ coverageColor: string }>`
+    font-size: 48px;
+    font-weight: bold;
+    color: ${(props: { coverageColor: string }) => props.coverageColor};
+`;
+
+export const CoverageLabel = styled.div`
+    font-size: 14px;
+    color: var(--vscode-descriptionForeground);
+`;
+
+export const CoverageProgressBar = styled.div`
+    width: 100%;
+    height: 8px;
+    background-color: var(--vscode-editorWidget-border);
+    border-radius: 4px;
+    overflow: hidden;
+`;
+
+export const CoverageProgressFill = styled.div<{ percentage: number; coverageColor: string }>`
+    height: 100%;
+    width: ${(props: { percentage: number; coverageColor: string }) => props.percentage}%;
+    background-color: ${(props: { percentage: number; coverageColor: string }) => props.coverageColor};
+    transition: width 0.3s ease;
+`;
+
+export const CoverageStats = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+`;
+
+export const CoverageStat = styled.div`
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+`;
+
+export const CoverageBadge = styled.div`
+    background-color: var(--vscode-badge-background);
+    color: var(--vscode-badge-foreground);
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-size: 12px;
+    font-weight: 500;
+    text-transform: uppercase;
+    align-self: flex-start;
+`;
+
+// Estimation Table styles
+export const EstimationTableContainer = styled.div`
+    border: 1px solid var(--vscode-widget-border);
+    border-radius: 4px;
+    padding: 24px;
+    background-color: var(--vscode-editor-background);
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    width: 100%;
+`;
+
+export const ReportButtonsContainer = styled.div`
+    display: flex;
+    gap: 12px;
+    align-self: flex-start;
+    margin-top: 8px;
+`;
+
+export const ViewReportButton = styled(Button)``;
+
+export const SaveReportButton = styled(Button)``;
+
+export const NextButtonWrapper = styled.div`
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 16px;
+    width: 100%;
+`;
+
+// ImportIntegrationForm specific styles
+export const FolderSelectionContainer = styled.div`
+    display: flex;
+    justify-content: flex-start;
+    margin: 16px 0;
+`;
+
+export const SelectedFolderContainer = styled.div`
+    margin: 16px 0;
+`;
+
+export const SelectedFolderDisplay = styled.div`
+    padding: 12px 16px;
+    background-color: var(--vscode-editor-background);
+    border: 1px solid var(--vscode-input-border);
+    border-radius: 4px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+`;
+
+export const FolderPathText = styled.span`
+    font-family: var(--vscode-editor-font-family);
+`;
+
+export const StepContainer = styled.div`
+    margin-top: 20px;
+`;
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/types.ts b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/types.ts
new file mode 100644
index 00000000000..37308493f08
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/types.ts
@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { DownloadProgress, ImportIntegrationResponse, MigrationTool, ProjectRequest } from "@wso2/ballerina-core";
+
+export interface FinalIntegrationParams {
+    importSourcePath: string;
+    type: string;
+    parameters?: Record<string, any>;
+}
+
+export enum CoverageLevel {
+    HIGH = "high",
+    MEDIUM = "medium",
+    LOW = "low"
+}
+
+export interface CoverageOverview {
+    unitName: string;
+    coveragePercentage: number;
+    coverageLevel: CoverageLevel;
+    totalElements: number;
+    migratableElements: number;
+    nonMigratableElements: number;
+}
+
+
+export interface MigrationReportJSON {
+    coverageOverview: CoverageOverview;
+}
+
+export interface ImportIntegrationFormProps {
+    selectedIntegration: MigrationTool | null;
+    migrationTools: MigrationTool[];
+    pullIntegrationTool: (integrationType: string, version: string) => void;
+    pullingTool: boolean;
+    toolPullProgress: DownloadProgress | null;
+    setImportParams: (params: FinalIntegrationParams) => void;
+    onSelectIntegration: (selectedIntegration: MigrationTool) => void;
+    handleStartImport: (
+        importParams: FinalIntegrationParams,
+        selectedIntegration: MigrationTool,
+        toolPullProgress: DownloadProgress
+    ) => void;
+    onBack: () => void;
+}
+
+export interface MigrationProgressProps {
+    migrationState: string | null;
+    migrationLogs: string[];
+    migrationCompleted: boolean;
+    migrationSuccessful: boolean;
+    migrationResponse: ImportIntegrationResponse | null;
+    onNext: () => void;
+    onBack: () => void;
+}
+
+export interface ConfigureProjectFormProps {
+    onNext: (project: ProjectRequest) => void;
+    onBack: () => void;
+}
+
+export interface MigrationDisplayState {
+    isInProgress: boolean;
+    isSuccess: boolean;
+    isFailed: boolean;
+    hasReportData: boolean;
+    showButtonsInStep: boolean;
+    showButtonsAfterLogs: boolean;
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/utils.ts b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/utils.ts
new file mode 100644
index 00000000000..b2cad4b678b
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ImportIntegration/utils.ts
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { MigrationTool } from "@wso2/ballerina-core";
+import { CoverageLevel, MigrationDisplayState } from "./types";
+
+export const SELECTION_TEXT = "To begin, choose a source platform from the options above.";
+const IMPORT_DISABLED_TOOLTIP = "Please select a source platform to continue.";
+const PATH_SELECTION_TOOLTIP = "Please select a project folder to continue.";
+const IMPORT_ENABLED_TOOLTIP = "Begin converting your selected project and view the progress.";
+
+export const getImportTooltip = (selectedIntegration: MigrationTool, importSourcePath: string) => {
+    if (!selectedIntegration) {
+        return IMPORT_DISABLED_TOOLTIP;
+    }
+    if (importSourcePath.length < 2) {
+        return PATH_SELECTION_TOOLTIP;
+    }
+    return IMPORT_ENABLED_TOOLTIP;
+};
+
+export const sanitizeProjectName = (name: string): string => {
+    return name.replace(/[^a-z0-9]/gi, "_").toLowerCase();
+};
+
+export const getCoverageLevel = (level: CoverageLevel): string => {
+    if (level.toLowerCase() === CoverageLevel.HIGH) return "HIGH COVERAGE";
+    if (level.toLowerCase() === CoverageLevel.MEDIUM) return "MEDIUM COVERAGE";
+    return "LOW COVERAGE";
+};
+
+export const getCoverageColor = (level: CoverageLevel): string => {
+    if (level.toLowerCase() === CoverageLevel.HIGH) return "var(--vscode-charts-green)";
+    if (level.toLowerCase() === CoverageLevel.MEDIUM) return "var(--vscode-charts-orange)";
+    return "var(--vscode-charts-red)";
+};
+
+export const getMigrationProgressHeaderData = (state: MigrationDisplayState) => {
+    let headerText;
+    let headerDesc;
+
+    if (state.isSuccess) {
+        headerText = "Migration Completed Successfully!";
+        headerDesc =
+            "Your integration project has been successfully migrated. You can now proceed to the final step to create and open your project.";
+    } else if (state.isFailed) {
+        headerText = "Migration Failed";
+        headerDesc = "The migration process encountered errors and could not be completed.";
+    } else if (state.isInProgress) {
+        headerText = "Migration in Progress...";
+        headerDesc = "Please wait while we set up your new integration project.";
+    }
+
+    return { headerText, headerDesc };
+};
+
+export const getMigrationDisplayState = (
+    migrationCompleted: boolean,
+    migrationSuccessful: boolean,
+    hasReportData: boolean
+): MigrationDisplayState => ({
+    isInProgress: !migrationCompleted,
+    isSuccess: migrationCompleted && migrationSuccessful,
+    isFailed: migrationCompleted && !migrationSuccessful,
+    hasReportData,
+    showButtonsInStep: migrationCompleted && migrationSuccessful,
+    showButtonsAfterLogs: !migrationCompleted || (migrationCompleted && !migrationSuccessful)
+});
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ProjectForm/ProjectFormFields.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ProjectForm/ProjectFormFields.tsx
new file mode 100644
index 00000000000..43a1d230c63
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ProjectForm/ProjectFormFields.tsx
@@ -0,0 +1,209 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useEffect, useState } from "react";
+import { LocationSelector, TextField, CheckBox, LinkButton, ThemeColors, Codicon } from "@wso2/ui-toolkit";
+import styled from "@emotion/styled";
+import { useRpcContext } from "@wso2/ballerina-rpc-client";
+import { sanitizePackageName, validatePackageName } from "./utils";
+
+const FieldGroup = styled.div`
+    margin-bottom: 20px;
+`;
+
+const CheckboxContainer = styled.div`
+    margin: 16px 0;
+`;
+
+const OptionalConfigRow = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 8px;
+`;
+
+const OptionalConfigButtonContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+    justify-content: flex-end;
+`;
+
+const OptionalConfigContent = styled.div`
+    margin-top: 16px;
+`;
+
+export interface ProjectFormData {
+    integrationName: string;
+    packageName: string;
+    path: string;
+    createDirectory: boolean;
+    orgName: string;
+    version: string;
+}
+
+export interface ProjectFormFieldsProps {
+    formData: ProjectFormData;
+    onFormDataChange: (data: Partial<ProjectFormData>) => void;
+    onValidationChange?: (isValid: boolean) => void;
+}
+
+export function ProjectFormFields({ formData, onFormDataChange, onValidationChange }: ProjectFormFieldsProps) {
+    const { rpcClient } = useRpcContext();
+    const [packageNameTouched, setPackageNameTouched] = useState(false);
+    const [showOptionalConfigurations, setShowOptionalConfigurations] = useState(false);
+    const [packageNameError, setPackageNameError] = useState<string | null>(null);
+
+    const handleIntegrationName = (value: string) => {
+        onFormDataChange({ integrationName: value });
+        // Auto-populate package name if user hasn't manually edited it
+        if (!packageNameTouched) {
+            onFormDataChange({ packageName: sanitizePackageName(value) });
+        }
+    };
+
+    const handlePackageName = (value: string) => {
+        // Allow dots and other characters while typing
+        const sanitized = sanitizePackageName(value);
+        onFormDataChange({ packageName: sanitized });
+        setPackageNameTouched(value.length > 0);
+        // Clear error while typing
+        if (packageNameError) {
+            setPackageNameError(null);
+        }
+    };
+
+    const handleProjectDirSelection = async () => {
+        const projectDirectory = await rpcClient.getCommonRpcClient().selectFileOrDirPath({});
+        onFormDataChange({ path: projectDirectory.path });
+    };
+
+    const handleShowOptionalConfigurations = () => {
+        setShowOptionalConfigurations(true);
+    };
+
+    const handleHideOptionalConfigurations = () => {
+        setShowOptionalConfigurations(false);
+    };
+
+    useEffect(() => {
+        (async () => {
+            if (!formData.path) {
+                const currentDir = await rpcClient.getCommonRpcClient().getWorkspaceRoot();
+                onFormDataChange({ path: currentDir.path });
+            }
+        })();
+    }, []);
+
+    // Effect to trigger validation when requested by parent
+    useEffect(() => {
+        const error = validatePackageName(formData.packageName, formData.integrationName);
+        setPackageNameError(error);
+        onValidationChange?.(error === null);
+    }, [formData.packageName, onValidationChange]);
+
+    return (
+        <>
+            <FieldGroup>
+                <TextField
+                    onTextChange={handleIntegrationName}
+                    value={formData.integrationName}
+                    label="Integration Name"
+                    placeholder="Enter an integration name"
+                    autoFocus={true}
+                    required={true}
+                />
+            </FieldGroup>
+
+            <FieldGroup>
+                <TextField
+                    onTextChange={handlePackageName}
+                    value={formData.packageName}
+                    label="Package Name"
+                    description="This will be used as the Ballerina package name for the integration."
+                    errorMsg={packageNameError || ""}
+                />
+            </FieldGroup>
+
+            <FieldGroup>
+                <LocationSelector
+                    label="Select Integration Path"
+                    selectedFile={formData.path}
+                    btnText="Select Path"
+                    onSelect={handleProjectDirSelection}
+                />
+
+                <CheckboxContainer>
+                    <CheckBox
+                        label="Create a new directory using the package name"
+                        checked={formData.createDirectory}
+                        onChange={(checked) => onFormDataChange({ createDirectory: checked })}
+                    />
+                </CheckboxContainer>
+            </FieldGroup>
+
+            <OptionalConfigRow>
+                Optional Configurations
+                <OptionalConfigButtonContainer>
+                    {!showOptionalConfigurations && (
+                        <LinkButton
+                            onClick={handleShowOptionalConfigurations}
+                            sx={{ fontSize: 12, padding: 8, color: ThemeColors.PRIMARY, gap: 4, userSelect: "none" }}
+                        >
+                            <Codicon name={"chevron-down"} iconSx={{ fontSize: 12 }} sx={{ height: 12 }} />
+                            Expand
+                        </LinkButton>
+                    )}
+                    {showOptionalConfigurations && (
+                        <LinkButton
+                            onClick={handleHideOptionalConfigurations}
+                            sx={{ fontSize: 12, padding: 8, color: ThemeColors.PRIMARY, gap: 4, userSelect: "none" }}
+                        >
+                            <Codicon name={"chevron-up"} iconSx={{ fontSize: 12 }} sx={{ height: 12 }} />
+                            Collapse
+                        </LinkButton>
+                    )}
+                </OptionalConfigButtonContainer>
+            </OptionalConfigRow>
+
+            {showOptionalConfigurations && (
+                <OptionalConfigContent>
+                    <FieldGroup>
+                        <TextField
+                            onTextChange={(value) => onFormDataChange({ orgName: value })}
+                            value={formData.orgName}
+                            label="Organization Name"
+                            description="The organization that owns this Ballerina package."
+                        />
+                    </FieldGroup>
+                    <FieldGroup>
+                        <TextField
+                            onTextChange={(value) => onFormDataChange({ version: value })}
+                            value={formData.version}
+                            label="Package Version"
+                            placeholder="0.1.0"
+                            description="Version of the Ballerina package."
+                        />
+                    </FieldGroup>
+                </OptionalConfigContent>
+            )}
+        </>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ProjectForm/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ProjectForm/index.tsx
index 18f934a342d..3303ceef8e5 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ProjectForm/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ProjectForm/index.tsx
@@ -16,12 +16,17 @@
  * under the License.
  */
 
-import React, { useEffect, useState } from "react";
-import { Button, Icon, LocationSelector, TextField, Typography,Codicon,Tooltip } from "@wso2/ui-toolkit";
+import { useState } from "react";
+import {
+    Button,
+    Icon,
+    Typography,
+} from "@wso2/ui-toolkit";
 import styled from "@emotion/styled";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
-import { BodyText } from "../../styles";
 import { EVENT_TYPE, MACHINE_VIEW } from "@wso2/ballerina-core";
+import { ProjectFormFields, ProjectFormData } from "./ProjectFormFields";
+import { isFormValid } from "./utils";
 
 const FormContainer = styled.div`
     display: flex;
@@ -30,6 +35,13 @@ const FormContainer = styled.div`
     max-width: 600px;
 `;
 
+const TitleContainer = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 32px;
+`;
+
 const ButtonWrapper = styled.div`
     margin-top: 20px;
     display: flex;
@@ -47,77 +59,32 @@ const IconButton = styled.div`
     }
 `;
 
-const PreviewContainer = styled.div`
-    border: 1px solid var(--vscode-input-border);
-    border-radius: 4px;
-    padding: 8px 12px;
-    display: inline-flex;
-    align-items: center;
-    width: fit-content;
-    height: 28px;
-    gap: 8px;
-    background-color: var(--vscode-editor-background);
-    * {
-        cursor: default !important;
-    }
-`;
-
-const InputPreviewWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-    margin: 20px 0;
-`;
-
-const PreviewText = styled(Typography)`
-    color: var(--vscode-sideBarTitle-foreground);
-    opacity: 0.5;
-    font-family: var(--vscode-editor-font-family, 'Monaco', 'Menlo', 'Ubuntu Mono', monospace);
-    word-break: break-all;
-    min-width: 100px;
-    display: flex;
-    align-items: center;
-    line-height: 1;
-`;
-
-const PreviewIcon = styled(Codicon)`
-    display: flex;
-    align-items: center;
-`;
-
-const sanitizeProjectName = (name: string): string => {
-    return name.replace(/[^a-z0-9]/gi, '_').toLowerCase();
-};
-
 export function ProjectForm() {
     const { rpcClient } = useRpcContext();
-    const [selectedModule, setSelectedModule] = useState("Main");
-    const [name, setName] = useState("");
-    const [path, setPath] = useState("");
-
-    const handleProjectName = (value: string) => {
-        setName(value);
+    const [formData, setFormData] = useState<ProjectFormData>({
+        integrationName: "",
+        packageName: "",
+        path: "",
+        createDirectory: true,
+        orgName: "",
+        version: "",
+    });
+
+    const handleFormDataChange = (data: Partial<ProjectFormData>) => {
+        setFormData(prev => ({ ...prev, ...data }));
     };
 
     const handleCreateProject = () => {
-        rpcClient
-            .getBIDiagramRpcClient()
-            .createProject({ projectName: name, isService: selectedModule === "Service", projectPath: path });
-    };
-
-    const handleProjecDirSelection = async () => {
-        const projectDirectory = await rpcClient.getCommonRpcClient().selectFileOrDirPath({});
-        setPath(projectDirectory.path);
+        rpcClient.getBIDiagramRpcClient().createProject({
+            projectName: formData.integrationName,
+            packageName: formData.packageName,
+            projectPath: formData.path,
+            createDirectory: formData.createDirectory,
+            orgName: formData.orgName || undefined,
+            version: formData.version || undefined,
+        });
     };
 
-    useEffect(() => {
-        (async () => {
-            const currentDir = await rpcClient.getCommonRpcClient().getWorkspaceRoot();
-            setPath(currentDir.path);
-        })();
-
-    }, []);
-
     const gotToWelcome = () => {
         rpcClient.getVisualizerRpcClient().openView({
             type: EVENT_TYPE.OPEN_VIEW,
@@ -129,41 +96,21 @@ export function ProjectForm() {
 
     return (
         <FormContainer>
-            <IconButton onClick={gotToWelcome}>
-                <Icon name="bi-arrow-back" iconSx={{ color: "var(--vscode-foreground)" }} />
-            </IconButton>
-            <Typography variant="h2">Create Your Integration</Typography>
-            <BodyText>
-                Name your integration and select a location to start building.
-            </BodyText>
-            <InputPreviewWrapper>
-                <TextField
-                    onTextChange={handleProjectName}
-                    value={name}
-                    label="Integration Name"
-                    placeholder="Enter a integration name"
-                    autoFocus={true}
-                />
-                {name && (
-                    <PreviewContainer>
-                        <PreviewIcon name="project" iconSx={{ fontSize: 14, color: "var(--vscode-descriptionForeground)" }} />
-                            <Tooltip content="A unique identifier for your intergration">
-                                <PreviewText variant="caption">
-                                    {sanitizeProjectName(name)}
-                                </PreviewText>
-                            </Tooltip>
-                    </PreviewContainer>
-                )}
-            </InputPreviewWrapper>
-            <LocationSelector
-                label="Select Integration Path"
-                selectedFile={path}
-                btnText="Select Path"
-                onSelect={handleProjecDirSelection}
+            <TitleContainer>
+                <IconButton onClick={gotToWelcome}>
+                    <Icon name="bi-arrow-back" iconSx={{ color: "var(--vscode-foreground)" }} />
+                </IconButton>
+                <Typography variant="h2">Create Your Integration</Typography>
+            </TitleContainer>
+
+            <ProjectFormFields
+                formData={formData}
+                onFormDataChange={handleFormDataChange}
             />
+
             <ButtonWrapper>
                 <Button
-                    disabled={name.length < 2 || path.length < 2}
+                    disabled={!isFormValid(formData)}
                     onClick={handleCreateProject}
                     appearance="primary"
                 >
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ProjectForm/utils.ts b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ProjectForm/utils.ts
new file mode 100644
index 00000000000..8c0ab104b43
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ProjectForm/utils.ts
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// Import from the component file since types.ts was removed
+import { ProjectFormData } from "./ProjectFormFields";
+
+export const isValidPackageName = (name: string): boolean => {
+    return /^[a-z0-9_.]+$/.test(name);
+};
+
+export const validatePackageName = (name: string, integrationName: string): string | null => {
+    if (integrationName.length === 0 && name.length === 0) {
+        return null;
+    }
+
+    if (name.length === 0) {
+        return "Package name is required";
+    }
+
+    if (!isValidPackageName(name)) {
+        return "Package name can only contain lowercase letters, numbers, underscores, and dots";
+    }
+
+    if (/__/.test(name)) {
+        return "Package name cannot have consecutive underscores";
+    }
+
+    if (/\.{2,}/.test(name)) {
+        return "Package name cannot have consecutive dots";
+    }
+
+    if (name.endsWith("_")) {
+        return "Package name cannot end with an underscore";
+    }
+
+    if (name.endsWith(".")) {
+        return "Package name cannot end with a dot";
+    }
+
+    return null; // No error
+};
+
+export const isFormValid = (formData: ProjectFormData): boolean => {
+    return (
+        formData.integrationName.length >= 2 &&
+        formData.packageName.length >= 2 &&
+        formData.path.length >= 2 &&
+        validatePackageName(formData.packageName, formData.integrationName) === null
+    );
+};
+
+export const sanitizePackageName = (name: string): string => {
+    // Allow dots but sanitize other characters, then convert consecutive dots to single dot
+    return name
+        .replace(/[^a-z0-9._]/gi, "_")
+        .toLowerCase()
+        .replace(/\.{2,}/g, "."); // Convert multiple consecutive dots to single dot
+};
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceClassEditor/FunctionCard.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceClassEditor/FunctionCard.tsx
index 16e8a1f9122..a2d398a9a6f 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceClassEditor/FunctionCard.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceClassEditor/FunctionCard.tsx
@@ -153,19 +153,19 @@ export function FunctionCard(params: FunctionCardProps) {
             <AccordionHeader onClick={handleResourceImplement}>
                 <MethodSection>
                     <MethodBox color={getColorByMethod(functionModel.accessor?.value || functionModel.kind)}>
-                        {functionModel.accessor?.value || functionModel.kind.toLowerCase()}
+                        {functionModel.accessor?.value?.toUpperCase() || functionModel.kind.toLowerCase()}
                     </MethodBox>
                     <MethodPath>{functionModel.name.value}</MethodPath>
                 </MethodSection>
                 <ButtonSection>
                     <>
                         {onEditResource! && (
-                            <VSCodeButton appearance="icon" title="Edit Method" onClick={handleEditResource}>
+                            <VSCodeButton data-testid={`edit-method-button-${functionModel.name.value}`} appearance="icon" title="Edit Method" onClick={handleEditResource}>
                                 <Icon name="bi-edit" sx={{ marginTop: 3.5 }} />
                             </VSCodeButton>
                         )}
                         {onDeleteResource! && (
-                            <VSCodeButton appearance="icon" title="Delete Method" onClick={handleDeleteResource}>
+                            <VSCodeButton data-testid={`delete-method-button-${functionModel.name.value}`} appearance="icon" title="Delete Method" onClick={handleDeleteResource}>
                                 <Codicon name="trash" />
                             </VSCodeButton>
                         )}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceClassEditor/VariableCard.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceClassEditor/VariableCard.tsx
index 9f2325a6f53..e2eecb79484 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceClassEditor/VariableCard.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceClassEditor/VariableCard.tsx
@@ -21,6 +21,10 @@ import { Codicon, Confirm, Icon } from '@wso2/ui-toolkit';
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
 import { FieldType } from '@wso2/ballerina-core';
 
+const COLORS = {
+    METHOD_BOX_BACKGROUND: '#845a23ff'
+} as const;
+
 type ContainerProps = {
     borderColor?: string;
     haveErrors?: boolean;
@@ -69,6 +73,20 @@ const VariableLabel = styled.span`
     margin-left: 5px;
 `;
 
+const MethodBox = styled.div`
+    display: flex;
+    justify-content: center;
+    height: 25px;
+    min-width: 70px;
+    width: auto;
+    text-align: center;
+    padding: 3px 5px 3px 5px;
+    background-color: ${COLORS.METHOD_BOX_BACKGROUND};
+    color: var(--vscode-button-foreground);
+    align-items: center;
+    font-weight: bold;
+    border-radius: 3px;
+`;
 
 export interface VariableCardProps {
     fieldModel: FieldType;
@@ -116,18 +134,28 @@ export function VariableCard(params: VariableCardProps) {
         <AccordionContainer>
             <AccordionHeader onClick={handleVariableImplement}>
                 <MethodSection>
+                    <MethodBox>
+                        {fieldModel.type.value}
+                    </MethodBox>
                     <VariableLabel>{fieldModel.name.value}</VariableLabel>
-                    <VariableLabel>{fieldModel.type.value}</VariableLabel>
                 </MethodSection>
                 <ButtonSection>
                     <>
                         {onEditVariable! && (
-                            <VSCodeButton appearance="icon" title="Edit Variable" onClick={handleEditResource}>
+                            <VSCodeButton
+                                data-testid={`edit-variable-button-${fieldModel.name.value}`}
+                                appearance="icon"
+                                title="Edit Variable"
+                                onClick={handleEditResource}>
                                 <Icon name="bi-edit" sx={{ marginTop: 3.5 }} />
                             </VSCodeButton>
                         )}
                         {onDeleteVariable! && (
-                            <VSCodeButton appearance="icon" title="Delete Variable" onClick={handleDeleteResource}>
+                            <VSCodeButton
+                                data-testid={`delete-variable-button-${fieldModel.name.value}`}
+                                appearance="icon"
+                                title="Delete Variable"
+                                onClick={handleDeleteResource}>
                                 <Codicon name="trash" />
                             </VSCodeButton>
                         )}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ServiceConfigForm.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ServiceConfigForm.tsx
index afc48fadf0b..6ee1c858d54 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ServiceConfigForm.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/ServiceDesigner/Forms/ServiceConfigForm.tsx
@@ -162,7 +162,7 @@ export function ServiceConfigForm(props: ServiceConfigFormProps) {
                         }
                     }
                 })
-            } else if (data[val.key]) {
+            } else if (data[val.key] !== undefined) {
                 val.value = data[val.key];
             }
             val.imports = getImportsForProperty(val.key, formImports);
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeEditor/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeEditor/index.tsx
index 12c418783de..4778c83ff8e 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeEditor/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeEditor/index.tsx
@@ -16,11 +16,11 @@
  * under the License.
  */
 
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { MutableRefObject, useCallback, useEffect, useRef, useState } from 'react';
 import { debounce } from 'lodash';
 import { LineRange, Type } from '@wso2/ballerina-core';
 import { useRpcContext } from '@wso2/ballerina-rpc-client';
-import { TypeEditor, TypeHelperCategory, TypeHelperItem, TypeHelperOperator } from '@wso2/type-editor';
+import { EditorContext, StackItem, TypeEditor, TypeHelperCategory, TypeHelperItem, TypeHelperOperator } from '@wso2/type-editor';
 import { TYPE_HELPER_OPERATORS } from './constants';
 import { filterOperators, filterTypes, getImportedTypes, getTypeBrowserTypes, getTypes } from './utils';
 import { useMutation } from '@tanstack/react-query';
@@ -46,10 +46,13 @@ type FormTypeEditorProps = {
     isGraphql?: boolean;
     onCloseCompletions?: () => void;
     onTypeCreate: (typeName?: string) => void;
+    getNewTypeCreateForm: () => void;
+    onSaveType: (type: Type) => void
+    refetchTypes: boolean;
 };
 
 export const FormTypeEditor = (props: FormTypeEditorProps) => {
-    const { type, onTypeChange, newType, newTypeValue, isGraphql, onCloseCompletions, onTypeCreate } = props;
+    const { type, onTypeChange, newType, newTypeValue, isGraphql, onCloseCompletions, onTypeCreate, getNewTypeCreateForm, onSaveType, refetchTypes } = props;
     const { rpcClient } = useRpcContext();
 
     const [filePath, setFilePath] = useState<string | undefined>(undefined);
@@ -85,17 +88,27 @@ export const FormTypeEditor = (props: FormTypeEditorProps) => {
         }
     }, [rpcClient]);
 
+    const prevRefetchRef = useRef(false);
+
+    useEffect(() => {
+        if (refetchTypes && !prevRefetchRef.current) {
+            fetchedInitialTypes.current = false; 
+            handleSearchTypeHelper('', true); 
+        }
+        prevRefetchRef.current = refetchTypes;
+    }, [refetchTypes]);
+
     const debouncedSearchTypeHelper = useCallback(
         debounce((searchText: string, isType: boolean) => {
-            if (isType && !fetchedInitialTypes.current) {
+            if (isType && (!fetchedInitialTypes.current || refetchTypes)) {
                 if (rpcClient) {
                     rpcClient
                         .getBIDiagramRpcClient()
                         .getVisibleTypes({
                             filePath: filePath,
                             position: {
-                                line: targetLineRange.startLine.line,
-                                offset: targetLineRange.startLine.offset
+                                line: targetLineRange?.startLine.line,
+                                offset: targetLineRange?.startLine.offset
                             },
                         })
                         .then((types) => {
@@ -155,7 +168,7 @@ export const FormTypeEditor = (props: FormTypeEditorProps) => {
                 setLoading(false);
             }
         }, 150),
-        [basicTypes, filePath, targetLineRange]
+        [basicTypes, filePath, targetLineRange, refetchTypes]
     );
 
     const handleSearchTypeHelper = useCallback(
@@ -180,7 +193,7 @@ export const FormTypeEditor = (props: FormTypeEditorProps) => {
                             limit: 60
                         },
                         searchKind: 'TYPE'
-                        })
+                    })
                     .then((response) => {
                         setFilteredTypeBrowserTypes(getTypeBrowserTypes(response.categories));
                     })
@@ -201,7 +214,7 @@ export const FormTypeEditor = (props: FormTypeEditorProps) => {
     );
 
     const { mutateAsync: addFunction, isPending: isAddingType } = useMutation({
-        mutationFn: (item: TypeHelperItem) => 
+        mutationFn: (item: TypeHelperItem) =>
             rpcClient.getBIDiagramRpcClient().addFunction({
                 filePath: filePath,
                 codedata: item.codedata,
@@ -215,7 +228,7 @@ export const FormTypeEditor = (props: FormTypeEditorProps) => {
     };
 
     const handleTypeCreate = (typeName?: string) => {
-        onTypeCreate(typeName || 'MyType');
+        getNewTypeCreateForm();
     };
 
     return (
@@ -227,6 +240,7 @@ export const FormTypeEditor = (props: FormTypeEditorProps) => {
                     onTypeChange={onTypeChange}
                     newType={newType}
                     newTypeValue={newTypeValue}
+                    onSaveType={onSaveType}
                     isGraphql={isGraphql}
                     typeHelper={{
                         loading,
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeHelper/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeHelper/index.tsx
index 7c82cfc40ab..da0a40bd9a4 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeHelper/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/TypeHelper/index.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import { HelperPaneHeight, Overlay, ThemeColors } from "@wso2/ui-toolkit";
+import { FormExpressionEditorRef, HelperPaneHeight, Overlay, ThemeColors } from "@wso2/ui-toolkit";
 
 import { RefObject, useRef } from 'react';
 
@@ -51,6 +51,7 @@ type TypeHelperProps = {
     valueTypeConstraint: string;
     typeBrowserRef: RefObject<HTMLDivElement>;
     filePath: string;
+    exprRef: RefObject<FormExpressionEditorRef>;
     targetLineRange: LineRange;
     currentType: string;
     currentCursorPosition: number;
@@ -78,7 +79,8 @@ const TypeHelperEl = (props: TypeHelperProps) => {
         typeBrowserRef,
         updateImports,
         onTypeCreate,
-        onCloseCompletions
+        onCloseCompletions,
+        exprRef
     } = props;
 
     const { rpcClient } = useRpcContext();
@@ -267,6 +269,7 @@ const TypeHelperEl = (props: TypeHelperProps) => {
                 onClose={handleTypeHelperClose}
                 onTypeCreate={handleTypeCreate}
                 onCloseCompletions={onCloseCompletions}
+                exprRef={exprRef}
             />
             {isAddingType && createPortal(
                 <>
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/BI/WelcomeView/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/BI/WelcomeView/index.tsx
index fd094e16f21..0f910f22e9c 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/BI/WelcomeView/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/BI/WelcomeView/index.tsx
@@ -16,147 +16,224 @@
  * under the License.
  */
 
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { MACHINE_VIEW, EVENT_TYPE, DownloadProgress } from "@wso2/ballerina-core";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
 import styled from "@emotion/styled";
-import { Button, Codicon } from "@wso2/ui-toolkit";
+import { Button, Codicon, Icon, ThemeColors } from "@wso2/ui-toolkit";
 import { VSCodeLink } from "@vscode/webview-ui-toolkit/react";
 
 const Wrapper = styled.div`
-    max-width: 660px;
-    margin: 80px 120px;
-    height: calc(100vh - 160px);
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 32px 20px;
+    height: calc(100vh - 40px);
     overflow-y: auto;
+    font-family: var(--vscode-font-family);
 `;
 
-const Headline = styled.div`
-    font-size: 2.7em;
+const HeaderSection = styled.div`
+    margin-bottom: 32px;
+    padding: 20px 0;
+`;
+
+const Headline = styled.h1`
+    font-size: 24px;
+    font-weight: 600;
+    margin: 0 0 12px 0;
+    color: var(--vscode-foreground);
+    line-height: 1.3;
+`;
+
+const Caption = styled.p`
+    font-size: 14px;
+    line-height: 1.4;
     font-weight: 400;
-    font-size: 2.7em;
-    white-space: nowrap;
-    margin-bottom: 20px;
+    color: var(--vscode-descriptionForeground);
+    margin: 0;
+    max-width: 700px;
 `;
 
-const StyledButton = styled(Button)`
-    margin-top: 10px;
-    width: 100%;
+const GetStartedSection = styled.div`
+    background: var(--vscode-editor-background);
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 3px;
+    padding: 16px 20px;
+    margin-bottom: 24px;
 `;
 
-const ButtonContent = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 10px;
-    height: 28px;
+const GetStartedTitle = styled.h2`
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0 0 8px 0;
+    color: var(--vscode-foreground);
+`;
+
+const GetStartedText = styled.p`
+    font-size: 13px;
+    margin: 0;
+    color: var(--vscode-descriptionForeground);
+    line-height: 1.4;
+`;
+
+const MainActionsGrid = styled.div`
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+    margin-bottom: 32px;
+
+    @media (max-width: 900px) {
+        grid-template-columns: 1fr;
+        gap: 12px;
+    }
 `;
 
-//
+interface ActionCardProps {
+    isPrimary?: boolean;
+    disabled?: boolean;
+}
 
-const TitleContainer = styled.div`
+const ActionCard = styled.div<ActionCardProps>`
+    background: var(--vscode-editor-background);
+    border: 1px solid var(--vscode-panel-border);
+    border-radius: 3px;
+    padding: 20px 16px;
     display: flex;
     flex-direction: column;
-    gap: 4px;
-    margin-bottom: 20px;
-`;
+    transition: border-color 0.2s ease;
+    cursor: ${(props: ActionCardProps) => (props.disabled ? "not-allowed" : "pointer")};
+    opacity: ${(props: ActionCardProps) => (props.disabled ? 0.6 : 1)};
+    min-height: 180px;
 
-const Caption = styled.div`
-    font-size: 1.1em;
-    line-height: 1.5em;
-    font-weight: 400;
-    margin-top: 0;
-    margin-bottom: 5px;
+    &:hover {
+        ${(props: ActionCardProps) =>
+            !props.disabled &&
+            `
+            border-color: ${ThemeColors.PRIMARY};
+            box-shadow: 0 0 0 2px ${ThemeColors.PRIMARY_CONTAINER};
+        `}
+    }
 `;
 
-const StepContainer = styled.div`
-    margin-top: 60px;
+interface CardIconProps {
+    isPrimary?: boolean;
+}
+
+const CardIconContainer = styled.div`
     display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 48px;
+    justify-content: flex-start;
+    margin-bottom: 12px;
 `;
 
-const Row = styled.div`
+const CardIcon = styled.div<CardIconProps>`
+    width: 32px;
+    height: 32px;
+    border-radius: 2px;
     display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    gap: 10px;
+    align-items: center;
+    justify-content: center;
+    color: ${ThemeColors.ON_SURFACE};
+    background-color: ${ThemeColors.SURFACE_CONTAINER};
+    flex-shrink: 0;
+    & > div {
+        margin-left: -4px;
+    }
 `;
 
-const Column = styled.div`
+const CardContent = styled.div`
+    flex: 1;
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
-    gap: 6px;
+    text-align: left;
 `;
 
-const StepTitle = styled.div<{ color?: string }>`
-    font-size: 1.5em;
-    font-weight: 400;
-    margin-top: 0;
-    margin-bottom: 5px;
-    color: ${(props: { color?: string }) => props.color || "inherit"};
+const CardTitle = styled.h3`
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0 0 8px 0;
+    color: var(--vscode-foreground);
+    line-height: 1.3;
+`;
+
+const CardDescription = styled.p`
+    font-size: 13px;
+    line-height: 1.4;
+    margin: 0 0 16px 0;
+    color: var(--vscode-descriptionForeground);
+    flex: 1;
 `;
 
-const StepDescription = styled.div<{ color?: string }>`
-    font-size: 1em;
+const StyledButton = styled(Button)`
+    height: 36px;
+    font-size: 13px;
     font-weight: 400;
-    margin-top: 0;
-    margin-bottom: 5px;
-    color: ${(props: { color?: string }) => props.color || "inherit"};
+    border-radius: 2px;
+    align-self: flex-start;
+`;
+
+const ButtonContent = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
 `;
 
-const Option = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 14px;
-  border-radius: 4px;
-  background-color: rgba(255, 255, 255, 0.05);
-  width: 100%;
-  box-sizing: border-box;
-  border-left: 3px solid #4a86e8;
+const UpdateNotice = styled.div`
+    background: var(--vscode-inputValidation-warningBackground);
+    border: 1px solid var(--vscode-inputValidation-warningBorder);
+    border-radius: 3px;
+    padding: 16px;
+    margin-bottom: 20px;
 `;
 
-const OptionTitle = styled.div`
-  font-weight: 500;
-  font-size: 1.1em;
-  margin-bottom: 8px;
+const UpdateTitle = styled.h4`
+    font-size: 14px;
+    font-weight: 600;
+    margin: 0 0 8px 0;
+    color: var(--vscode-inputValidation-warningForeground);
 `;
 
-const StepDescriptionContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
+const UpdateDescription = styled.p`
+    font-size: 13px;
+    margin: 0 0 12px 0;
+    color: var(--vscode-foreground);
+    line-height: 1.4;
 `;
 
 const ProgressBarWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  margin-top: 5px;
+    display: flex;
+    align-items: center;
+    margin-top: 8px;
 `;
 
 const ProgressBarContainer = styled.div`
-  width: 100%;
-  height: 4px;
-  background-color: var(--vscode-editorWidget-border, rgba(127, 127, 127, 0.3));
-  border-radius: 2px;
-  overflow: hidden;
-  position: relative;
+    width: 100%;
+    height: 3px;
+    background-color: var(--vscode-progressBar-background);
+    border-radius: 1px;
+    overflow: hidden;
+    position: relative;
+    opacity: 0.3;
 `;
 
-const ProgressIndicator = styled.div<{ percentage: number }>`
-  position: absolute;
-  width: ${(props: { percentage: number }) => `${props.percentage}%`};
-  height: 100%;
-  background-color: var(--vscode-progressBar-background);
-  border-radius: 2px;
-  animation: progressAnimation 1.5s infinite ease-in-out;
+interface ProgressIndicatorProps {
+    percentage: number;
+}
+
+const ProgressIndicator = styled.div<ProgressIndicatorProps>`
+    position: absolute;
+    width: ${(props: ProgressIndicatorProps) => `${props.percentage}%`};
+    height: 100%;
+    background-color: var(--vscode-progressBar-background);
+    border-radius: 1px;
+    transition: width 0.3s ease;
+    opacity: 1;
 `;
 
 type WelcomeViewProps = {
     isBISupported: boolean;
 };
 
-
 export function WelcomeView(props: WelcomeViewProps) {
     const { rpcClient } = useRpcContext();
     const [isLoading, setIsLoading] = useState(false);
@@ -173,14 +250,23 @@ export function WelcomeView(props: WelcomeViewProps) {
 
     const openGettingStartedGuide = () => {
         rpcClient.getCommonRpcClient().openExternalUrl({
-            url: "https://bi.docs.wso2.com/get-started/quick-start-guide/"
-        })
+            url: "https://bi.docs.wso2.com/get-started/quick-start-guide/",
+        });
     };
 
     const openSamples = () => {
         rpcClient.getCommonRpcClient().openExternalUrl({
-            url: "https://bi.docs.wso2.com/integration-guides/integration-as-api/message-transformation/"
-        })
+            url: "https://bi.docs.wso2.com/integration-guides/integration-as-api/message-transformation/",
+        });
+    };
+
+    const importExternalIntegration = () => {
+        rpcClient.getVisualizerRpcClient().openView({
+            type: EVENT_TYPE.OPEN_VIEW,
+            location: {
+                view: MACHINE_VIEW.BIImportIntegration,
+            },
+        });
     };
 
     const updateBallerina = () => {
@@ -195,93 +281,161 @@ export function WelcomeView(props: WelcomeViewProps) {
 
     return (
         <Wrapper>
-            <TitleContainer>
+            {/* Header Section */}
+            <HeaderSection>
                 <Headline>WSO2 Integrator: BI for VS Code</Headline>
                 <Caption>
                     A comprehensive integration solution that simplifies your digital transformation journey.
                     Streamlines connectivity among applications, services, data, and cloud using a user-friendly
                     low-code graphical designing experience.
                 </Caption>
-            </TitleContainer>
-
-            <StepContainer>
-                <Row>
-                    <Column>
-                        <StepTitle>Get Started Quickly</StepTitle>
-                        <StepDescription>
-                            New to WSO2 Integrator? Start here! Explore step-by-step tutorials to help you get up and running with
-                            ease. <VSCodeLink onClick={openGettingStartedGuide}>Read the guide</VSCodeLink>.
-                        </StepDescription>
-                    </Column>
-                </Row>
-                <Row>
-                    <Column>
-                        {props.isBISupported &&
-                            <>
-                                <StepTitle>Create Your First Integration</StepTitle>
-                                <StepDescription>
-                                    Ready to build? Start a new integration project using our intuitive graphical designer.
-                                </StepDescription>
-                                <StyledButton disabled={!props.isBISupported} appearance="primary" onClick={() => goToCreateProject()}>
-                                    <ButtonContent>
-                                        <Codicon name="add" iconSx={{ fontSize: 16 }} />
-                                        Create New Integration
-                                    </ButtonContent>
-                                </StyledButton>
-                            </>
-                        }
-                        {!props.isBISupported &&
-                            <>
-                                <Option>
-                                    <OptionTitle>Update to latest Ballerina distribution</OptionTitle>
-                                    <StepDescription>
-                                        Your current Ballerina distribution is not supported. Please update to version 2201.12.3 or above.
-                                    </StepDescription>
-                                    <StyledButton appearance="primary" onClick={updateBallerina} disabled={isLoading}>
-                                        <ButtonContent>
-                                            Update Now
-                                        </ButtonContent>
-                                    </StyledButton>
-
-                                    {isLoading && (
-                                        <div style={{ marginTop: 10 }}>
-                                            {!progress && <StepDescription>
-                                                Updating Ballerina... This may take a few minutes.
-                                            </StepDescription>
-                                            }
-                                            {progress && (
-                                                <>
-                                                    <StepDescriptionContainer>
-                                                        <StepDescription>{progress.message}</StepDescription>
-                                                        <StepDescription>{progress.percentage || 0}%</StepDescription>
-                                                    </StepDescriptionContainer>
-                                                    <ProgressBarWrapper>
-                                                        <ProgressBarContainer>
-                                                            <ProgressIndicator percentage={progress.percentage} />
-                                                        </ProgressBarContainer>
-                                                    </ProgressBarWrapper>
-                                                </>
-                                            )}
-                                        </div>
-                                    )}
-                                    <StepDescription style={{ marginTop: 10 }}>
-                                        Please restart VS Code after updating the Ballerina distribution
-                                    </StepDescription>
-                                </Option>
-                            </>
-                        }
-                    </Column>
-                </Row>
-                <Row>
-                    <Column>
-                        <StepTitle>Explore Pre-Built Samples</StepTitle>
-                        <StepDescription>
-                            Need inspiration? Browse through sample projects to see how WSO2 Integrator: BI handles real-world
-                            integrations. <VSCodeLink onClick={openSamples}>Explore Samples</VSCodeLink>.
-                        </StepDescription>
-                    </Column>
-                </Row>
-            </StepContainer>
+            </HeaderSection>
+
+            {/* Get Started Section */}
+            <GetStartedSection>
+                <GetStartedTitle>Get Started Quickly</GetStartedTitle>
+                <GetStartedText>
+                    New to WSO2 Integrator: BI? Start here! Explore step-by-step tutorials to help you get up and running
+                    with ease. <VSCodeLink onClick={openGettingStartedGuide}>Read the guide</VSCodeLink>.
+                </GetStartedText>
+            </GetStartedSection>
+
+            {/* Update Notice for Unsupported Version */}
+            {!props.isBISupported && (
+                <UpdateNotice>
+                    <UpdateTitle>Update Required</UpdateTitle>
+                    <UpdateDescription>
+                        Your current Ballerina distribution is not supported. Please update to version 2201.12.3 or
+                        above to access all features.
+                    </UpdateDescription>
+                    <StyledButton appearance="primary" onClick={updateBallerina} disabled={isLoading}>
+                        <ButtonContent>
+                            {isLoading ? (
+                                <>
+                                    <Codicon name="sync" iconSx={{ fontSize: 16 }} />
+                                    {progress ? `${progress.percentage || 0}%` : "Updating..."}
+                                </>
+                            ) : (
+                                <>
+                                    <Icon name="bi-update" iconSx={{ fontSize: 16 }} />
+                                    Update Now
+                                </>
+                            )}
+                        </ButtonContent>
+                    </StyledButton>
+                    {isLoading && progress && (
+                        <div style={{ marginTop: 10 }}>
+                            <ProgressBarWrapper>
+                                <ProgressBarContainer>
+                                    <ProgressIndicator percentage={progress.percentage} />
+                                </ProgressBarContainer>
+                            </ProgressBarWrapper>
+                            <UpdateDescription style={{ marginTop: 8, fontSize: "0.85em" }}>
+                                {progress.message}
+                            </UpdateDescription>
+                        </div>
+                    )}
+                    {isLoading && (
+                        <UpdateDescription style={{ marginTop: 12, fontSize: "0.85em", fontStyle: "italic" }}>
+                            Please restart VS Code after updating the Ballerina distribution
+                        </UpdateDescription>
+                    )}
+                </UpdateNotice>
+            )}
+
+            {/* Main Action Cards */}
+            <MainActionsGrid>
+                {/* Create New Integration Card */}
+                <ActionCard
+                    disabled={!props.isBISupported}
+                    onClick={props.isBISupported ? goToCreateProject : undefined}
+                >
+                    <CardIconContainer>
+                        <CardIcon isPrimary={true}>
+                            <Icon name="bi-plus-fill" iconSx={{ fontSize: 18 }} />
+                        </CardIcon>
+                    </CardIconContainer>
+                    <CardContent>
+                        <CardTitle>Create New Integration</CardTitle>
+                        <CardDescription>
+                            Ready to build? Start a new integration project using our intuitive graphical designer.
+                        </CardDescription>
+                        <StyledButton
+                            appearance="primary"
+                            disabled={!props.isBISupported}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                goToCreateProject();
+                            }}
+                        >
+                            <ButtonContent>
+                                <Icon name="bi-plus" iconSx={{ fontSize: 14 }} sx={{ display: "flex", justifyContent: "center" }} />
+                                Create New Integration
+                            </ButtonContent>
+                        </StyledButton>
+                    </CardContent>
+                </ActionCard>
+
+                {/* Import External Integration Card */}
+                <ActionCard
+                    disabled={!props.isBISupported}
+                    onClick={props.isBISupported ? importExternalIntegration : undefined}
+                >
+                    <CardIconContainer>
+                        <CardIcon>
+                            <Icon name="bi-convert" iconSx={{ fontSize: 18 }} />
+                        </CardIcon>
+                    </CardIconContainer>
+                    <CardContent>
+                        <CardTitle>Import External Integration</CardTitle>
+                        <CardDescription>
+                            Have an integration from another platform? Import your MuleSoft or TIBCO integration project
+                            and continue building.
+                        </CardDescription>
+                        <StyledButton
+                            appearance="secondary"
+                            disabled={!props.isBISupported}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                importExternalIntegration();
+                            }}
+                        >
+                            <ButtonContent>
+                                <Icon name="bi-convert" iconSx={{ fontSize: 14 }} />
+                                Import External Integration
+                            </ButtonContent>
+                        </StyledButton>
+                    </CardContent>
+                </ActionCard>
+
+                {/* Explore Samples Card */}
+                <ActionCard onClick={openSamples}>
+                    <CardIconContainer>
+                        <CardIcon>
+                            <Icon name="bi-bookmark" iconSx={{ fontSize: 18 }} />
+                        </CardIcon>
+                    </CardIconContainer>
+                    <CardContent>
+                        <CardTitle>Explore Pre-Built Samples</CardTitle>
+                        <CardDescription>
+                            Need inspiration? Browse through sample projects to see how WSO2 Integrator: BI handles
+                            real-world integrations.
+                        </CardDescription>
+                        <StyledButton
+                            appearance="secondary"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                openSamples();
+                            }}
+                        >
+                            <ButtonContent>
+                                <Icon name="bi-bookmark" iconSx={{ fontSize: 14 }} />
+                                Explore Samples
+                            </ButtonContent>
+                        </StyledButton>
+                    </CardContent>
+                </ActionCard>
+            </MainActionsGrid>
         </Wrapper>
     );
 }
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/InlineDataMapper/DataMapperView.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/DataMapper/DataMapperView.tsx
similarity index 62%
rename from workspaces/ballerina/ballerina-visualizer/src/views/InlineDataMapper/DataMapperView.tsx
rename to workspaces/ballerina/ballerina-visualizer/src/views/DataMapper/DataMapperView.tsx
index 049018b6119..a94c6e6dab0 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/InlineDataMapper/DataMapperView.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/DataMapper/DataMapperView.tsx
@@ -17,60 +17,62 @@
  */
 
 
-import React, { useEffect, useState, useRef, useCallback } from "react";
+import React, { useEffect, useState, useRef, useCallback, useMemo } from "react";
 import debounce from "lodash/debounce";
 
 import {
     AddArrayElementRequest,
     ConvertToQueryRequest,
     ExpandedDMModel,
-    IDMFormProps,
+    DMFormProps,
     DMModel,
     ModelState,
     AddClausesRequest,
-    IDMViewState,
+    DMViewState,
     IntermediateClause,
     TriggerCharacter,
     TRIGGER_CHARACTERS,
     Mapping,
     CodeData,
-    CustomFnMetadata,
+    FnMetadata,
     NodePosition,
     EVENT_TYPE,
     LineRange,
-    ResultClauseType
+    ResultClauseType,
+    IOType,
+    MACHINE_VIEW,
+    VisualizerLocation
 } from "@wso2/ballerina-core";
 import { CompletionItem, ProgressIndicator } from "@wso2/ui-toolkit";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
-import { DataMapperView } from "@wso2/ballerina-inline-data-mapper";
+import { DataMapper } from "@wso2/ballerina-data-mapper";
 
-import { useInlineDataMapperModel } from "../../Hooks";
-import { expandDMModel } from "./modelProcessor";
+import { useDataMapperModel } from "../../Hooks";
 import FormGeneratorNew from "../BI/Forms/FormGeneratorNew";
-import { InlineDataMapperProps } from ".";
+import { DataMapperProps } from ".";
 import { EXPRESSION_EXTRACTION_REGEX } from "../../constants";
 import { calculateExpressionOffsets, convertBalCompletion, updateLineRange } from "../../utils/bi";
 import { createAddSubMappingRequest } from "./utils";
-import { URI, Utils } from "vscode-uri";
+import { FunctionForm } from "../BI/FunctionForm";
 
 // Types for model comparison
 interface ModelSignature {
     inputs: string[];
     output: string;
     subMappings: string[];
-    types: string;
+    refs: string;
 }
 
-export function InlineDataMapperView(props: InlineDataMapperProps) {
-    const { filePath, codedata, varName } = props;
+export function DataMapperView(props: DataMapperProps) {
+    const { filePath, codedata, name, projectUri, position, reusable } = props;
 
     const [isFileUpdateError, setIsFileUpdateError] = useState(false);
     const [modelState, setModelState] = useState<ModelState>({
         model: null,
         hasInputsOutputsChanged: false
     });
-    const [viewState, setViewState] = useState<IDMViewState>({
-        viewId: varName,
+    const [viewState, setViewState] = useState<DMViewState>({
+        viewId: name,
         codedata: codedata
     });
 
@@ -89,14 +91,22 @@ export function InlineDataMapperView(props: InlineDataMapperProps) {
         model,
         isFetching,
         isError
-    } = useInlineDataMapperModel(filePath, viewState);
+    } = useDataMapperModel(filePath, viewState, position);
 
+    const prevPositionRef = useRef(position);
+    
     useEffect(() => {
-        setViewState(prev => ({
-            ...prev,
-            codedata
+        const positionChanged = 
+            prevPositionRef.current?.line !== position?.line || 
+            prevPositionRef.current?.offset !== position?.offset;
+        
+        setViewState(prevState => ({
+            viewId: positionChanged ? name : prevState.viewId || name,
+            codedata: codedata
         }));
-    }, [varName, codedata]);
+        
+        prevPositionRef.current = position;
+    }, [name, codedata, position]);
 
     useEffect(() => {
         if (!model) return;
@@ -107,10 +117,10 @@ export function InlineDataMapperView(props: InlineDataMapperProps) {
         const hasInputsChanged = hasSignatureChanged(currentSignature, prevSignature, 'inputs');
         const hasOutputChanged = hasSignatureChanged(currentSignature, prevSignature, 'output');
         const hasSubMappingsChanged = hasSignatureChanged(currentSignature, prevSignature, 'subMappings');
-        const hasTypesChanged = hasSignatureChanged(currentSignature, prevSignature, 'types');
+        const hasRefsChanged = hasSignatureChanged(currentSignature, prevSignature, 'refs');
 
         // Check if it's already an ExpandedDMModel
-        const isExpandedModel = !('types' in model);
+        const isExpandedModel = !('refs' in model);
         if (isExpandedModel) {
             setModelState({
                 model: model as ExpandedDMModel,
@@ -122,18 +132,34 @@ export function InlineDataMapperView(props: InlineDataMapperProps) {
         }
 
         // If types changed, we need to reprocess everything
-        if (hasTypesChanged || hasInputsChanged || hasOutputChanged || hasSubMappingsChanged) {
-            const expandedModel = expandDMModel(model as DMModel, {
-                processInputs: hasInputsChanged || hasTypesChanged,
-                processOutput: hasOutputChanged || hasTypesChanged,
-                processSubMappings: hasSubMappingsChanged || hasTypesChanged,
-                previousModel: modelState.model as ExpandedDMModel
-            });
-            setModelState({
-                model: expandedModel,
-                hasInputsOutputsChanged: hasInputsChanged || hasOutputChanged || hasTypesChanged,
-                hasSubMappingsChanged: hasSubMappingsChanged || hasTypesChanged
-            });
+        if (hasRefsChanged || hasInputsChanged || hasOutputChanged || hasSubMappingsChanged) {
+            const processExpandedModel = async () => {
+                try {
+                    const expandedModelResponse = await rpcClient.getDataMapperRpcClient().getExpandedDMFromDMModel(
+                        {
+                            model: model as DMModel,
+                            options: {
+                                processInputs: hasInputsChanged || hasRefsChanged,
+                                processOutput: hasOutputChanged || hasRefsChanged,
+                                processSubMappings: hasSubMappingsChanged || hasRefsChanged,
+                                previousModel: modelState.model as ExpandedDMModel
+                            },
+                            rootViewId: name
+                        }
+                    );
+                    console.log(">>> [Data Mapper] processed expandedModel:", expandedModelResponse);
+                    setModelState({
+                        model: expandedModelResponse.expandedModel,
+                        hasInputsOutputsChanged: hasInputsChanged || hasOutputChanged || hasRefsChanged,
+                        hasSubMappingsChanged: hasSubMappingsChanged || hasRefsChanged
+                    });
+                } catch (error) {
+                    console.error("Error processing expanded model:", error);
+                    throw error;
+                }
+            };
+
+            processExpandedModel();
         } else {
             setModelState(prev => ({
                 model: {
@@ -144,16 +170,38 @@ export function InlineDataMapperView(props: InlineDataMapperProps) {
         }
 
         prevSignatureRef.current = currentSignature;
+
     }, [model]);
 
+    const hasInputs = useMemo(
+        () => modelState.model?.inputs?.length > 0,
+        [modelState]
+    );
+
+    const hasOutputs = useMemo(
+        () => !!modelState.model?.output,
+        [modelState]
+    );
+
+
     const onClose = () => {
         rpcClient.getVisualizerRpcClient()?.goBack();
     }
 
+    const onEdit = () => {
+        const context: VisualizerLocation = {
+            view: MACHINE_VIEW.BIDataMapperForm,
+            identifier: modelState.model.output.name,
+            documentUri: filePath,
+        };
+
+        rpcClient.getVisualizerRpcClient().openView({ type: EVENT_TYPE.OPEN_VIEW, location: context });
+    }
+
     const updateExpression = async (outputId: string, expression: string, viewId: string, name: string) => {
         try {
             const resp = await rpcClient
-                .getInlineDataMapperRpcClient()
+                .getDataMapperRpcClient()
                 .getDataMapperSource({
                     filePath,
                     codedata: viewState.codedata,
@@ -165,7 +213,7 @@ export function InlineDataMapperView(props: InlineDataMapperProps) {
                     },
                     withinSubMapping: viewState.isSubMapping
                 });
-            console.log(">>> [Inline Data Mapper] getSource response:", resp);
+            console.log(">>> [Data Mapper] getSource response:", resp);
         } catch (error) {
             console.error(error);
             setIsFileUpdateError(true);
@@ -188,9 +236,9 @@ export function InlineDataMapperView(props: InlineDataMapperProps) {
                 propertyKey: "expression" // TODO: Remove this once the API is updated
             };
             const resp = await rpcClient
-                .getInlineDataMapperRpcClient()
+                .getDataMapperRpcClient()
                 .addNewArrayElement(addElementRequest);
-            console.log(">>> [Inline Data Mapper] addArrayElement response:", resp);
+            console.log(">>> [Data Mapper] addArrayElement response:", resp);
         } catch (error) {
             console.error(error);
             setIsFileUpdateError(true);
@@ -200,19 +248,19 @@ export function InlineDataMapperView(props: InlineDataMapperProps) {
     const handleView = async (viewId: string, isSubMapping?: boolean) => {
         if (isSubMapping) {
             const resp = await rpcClient
-                .getInlineDataMapperRpcClient()
+                .getDataMapperRpcClient()
                 .getSubMappingCodedata({
                     filePath,
                     codedata: viewState.codedata,
                     view: viewId
                 });
-            console.log(">>> [Inline Data Mapper] getSubMappingCodedata response:", resp);
+            console.log(">>> [Data Mapper] getSubMappingCodedata response:", resp);
             setViewState({ viewId, codedata: resp.codedata, isSubMapping: true });
         } else {
             if (viewState.isSubMapping) {
                 // If the view is a sub mapping, we need to get the codedata of the parent mapping
                 const res = await rpcClient
-                    .getInlineDataMapperRpcClient()
+                    .getDataMapperRpcClient()
                     .getDataMapperCodedata({
                         filePath,
                         codedata: viewState.codedata,
@@ -228,7 +276,7 @@ export function InlineDataMapperView(props: InlineDataMapperProps) {
         }
     };
 
-    const generateForm = (formProps: IDMFormProps) => {
+    const generateForm = (formProps: DMFormProps) => {
         return (
             <FormGeneratorNew
                 fileName={filePath}
@@ -241,10 +289,6 @@ export function InlineDataMapperView(props: InlineDataMapperProps) {
 
     const convertToQuery = async (mapping: Mapping, clauseType: ResultClauseType, viewId: string, name: string) => {
         try {
-            const a = viewId.split(".");
-            const b = mapping.output.split(".");
-            const targetField = [...a, ...b.slice(1)].join(".");
-            console.log(">>> [Inline Data Mapper] targetField:", targetField);
             const convertToQueryRequest: ConvertToQueryRequest = {
                 filePath,
                 codedata: viewState.codedata,
@@ -255,9 +299,9 @@ export function InlineDataMapperView(props: InlineDataMapperProps) {
                 propertyKey: "expression" // TODO: Remove this once the API is updated
             };
             const resp = await rpcClient
-                .getInlineDataMapperRpcClient()
+                .getDataMapperRpcClient()
                 .convertToQuery(convertToQueryRequest);
-            console.log(">>> [Inline Data Mapper] convertToQuery response:", resp);
+            console.log(">>> [Data Mapper] convertToQuery response:", resp);
         } catch (error) {
             console.error(error);
             setIsFileUpdateError(true);
@@ -275,14 +319,14 @@ export function InlineDataMapperView(props: InlineDataMapperProps) {
                 index,
                 clause,
                 targetField,
-                varName
+                varName: name
             };
-            console.log(">>> [Inline Data Mapper] addClauses request:", addClausesRequest);
+            console.log(">>> [Data Mapper] addClauses request:", addClausesRequest);
 
             const resp = await rpcClient
-                .getInlineDataMapperRpcClient()
+                .getDataMapperRpcClient()
                 .addClauses(addClausesRequest);
-            console.log(">>> [Inline Data Mapper] addClauses response:", resp);
+            console.log(">>> [Data Mapper] addClauses response:", resp);
         } catch (error) {
             console.error(error);
             setIsFileUpdateError(true);
@@ -298,12 +342,12 @@ export function InlineDataMapperView(props: InlineDataMapperProps) {
     ) => {
         try {
             const visualizableResponse = await rpcClient
-                .getInlineDataMapperRpcClient()
+                .getDataMapperRpcClient()
                 .getVisualizableFields({
                     filePath,
                     codedata: importsCodedata || { symbol: type }
                 });
-            console.log(">>> [Inline Data Mapper] getVisualizableFields response:", visualizableResponse);
+            console.log(">>> [Data Mapper] getVisualizableFields response:", visualizableResponse);
 
             const defaultValue = visualizableResponse.visualizableProperties.defaultValue;
             const request = createAddSubMappingRequest(
@@ -313,16 +357,16 @@ export function InlineDataMapperView(props: InlineDataMapperProps) {
                 targetField,
                 subMappingName,
                 type,
-                varName,
+                name,
                 defaultValue
             );
 
-            console.log(">>> [Inline Data Mapper] addSubMapping request:", request);
+            console.log(">>> [Data Mapper] addSubMapping request:", request);
 
             const response = await rpcClient
-                .getInlineDataMapperRpcClient()
+                .getDataMapperRpcClient()
                 .addSubMapping(request);
-            console.log(">>> [Inline Data Mapper] addSubMapping response:", response);
+            console.log(">>> [Data Mapper] addSubMapping response:", response);
         } catch (error) {
             console.error(error);
             setIsFileUpdateError(true);
@@ -332,34 +376,53 @@ export function InlineDataMapperView(props: InlineDataMapperProps) {
     const deleteMapping = async (mapping: Mapping, viewId: string) => {
         try {
             const resp = await rpcClient
-                .getInlineDataMapperRpcClient()
+                .getDataMapperRpcClient()
                 .deleteMapping({
                     filePath,
                     codedata: viewState.codedata,
                     mapping,
-                    varName,
+                    varName: name,
                     targetField: viewId,
                 });
-            console.log(">>> [Inline Data Mapper] deleteMapping response:", resp);
+            console.log(">>> [Data Mapper] deleteMapping response:", resp);
         } catch (error) {
             console.error(error);
             setIsFileUpdateError(true);
         }
     };
 
-    const mapWithCustomFn = async (mapping: Mapping, metadata: CustomFnMetadata, viewId: string) => {
+    const mapWithCustomFn = async (mapping: Mapping, metadata: FnMetadata, viewId: string) => {
         try {
             const resp = await rpcClient
-                .getInlineDataMapperRpcClient()
+                .getDataMapperRpcClient()
                 .mapWithCustomFn({
                     filePath,
                     codedata,
                     mapping,
                     functionMetadata: metadata,
-                    varName,
+                    varName: name,
                     targetField: viewId,
                 });
-            console.log(">>> [Inline Data Mapper] mapWithCustomFn response:", resp);
+            console.log(">>> [Data Mapper] mapWithCustomFn response:", resp);
+        } catch (error) {
+            console.error(error);
+            setIsFileUpdateError(true);
+        }
+    };
+
+    const mapWithTransformFn = async (mapping: Mapping, metadata: FnMetadata, viewId: string) => {
+        try {
+            const resp = await rpcClient
+                .getDataMapperRpcClient()
+                .mapWithTransformFn({
+                    filePath,
+                    codedata,
+                    mapping,
+                    functionMetadata: metadata,
+                    varName: name,
+                    targetField: viewId,
+                });
+            console.log(">>> [Data Mapper] mapWithTransformFn response:", resp);
         } catch (error) {
             console.error(error);
             setIsFileUpdateError(true);
@@ -379,6 +442,43 @@ export function InlineDataMapperView(props: InlineDataMapperProps) {
             .openView({ type: EVENT_TYPE.OPEN_VIEW, location: { documentUri, position } });
     };
 
+    const goToSource = async (outputId: string, viewId: string) => {
+        const { property } = await rpcClient.getDataMapperRpcClient().getProperty({
+            filePath,
+            codedata: viewState.codedata,
+            propertyKey: "expression", // TODO: Remove this once the API is updated
+            targetField: viewId,
+            fieldId: outputId,
+        })
+        if (property.codedata) {
+            const position: NodePosition = {
+                startLine: property.codedata.lineRange?.startLine?.line,
+                startColumn: property.codedata.lineRange?.startLine?.offset,
+                endLine: property.codedata.lineRange?.endLine?.line,
+                endColumn: property.codedata.lineRange?.endLine?.offset,
+            };
+            rpcClient.getCommonRpcClient().goToSource({ position, fileName: property.codedata.lineRange?.fileName });
+        }
+    }
+
+    const enrichChildFields = async (parentField: IOType) => {
+        if (!parentField.ref) return;
+
+        const response = await rpcClient.getDataMapperRpcClient().getProcessTypeReference({
+            ref: parentField.ref,
+            fieldId: parentField.id,
+            model: model as DMModel,
+            visitedRefs: new Set()
+        });
+
+        if (!response.success || !response.result) {
+            throw new Error(`Failed to get process type reference: ${response.error}`);
+        }
+
+        parentField.fields = response.result.fields;
+        parentField.isDeepNested = false;
+    }
+
     useEffect(() => {
         // Hack to hit the error boundary
         if (isError) {
@@ -406,8 +506,8 @@ export function InlineDataMapperView(props: InlineDataMapperProps) {
                     })
                     .sort((a, b) => a.sortText.localeCompare(b.sortText));
             } else {
-                const { property } = await rpcClient.getInlineDataMapperRpcClient().getProperty({
-                    filePath: filePath,
+                const { property } = await rpcClient.getDataMapperRpcClient().getProperty({
+                    filePath,
                     codedata: viewState.codedata,
                     propertyKey: "expression", // TODO: Remove this once the API is updated
                     targetField: viewId,
@@ -457,7 +557,7 @@ export function InlineDataMapperView(props: InlineDataMapperProps) {
             }
             setFilteredCompletions(expressionCompletions);
         }, 150),
-        [filePath, codedata, varName, completions]
+        [filePath, codedata, name, completions]
     );
 
     const handleCompletionSelect = (value: string) => {
@@ -476,39 +576,54 @@ export function InlineDataMapperView(props: InlineDataMapperProps) {
                 <ProgressIndicator />
             )}
             {modelState.model && (
-                <DataMapperView
-                    modelState={modelState}
-                    name={varName}
-                    onClose={onClose}
-                    applyModifications={updateExpression}
-                    addArrayElement={addArrayElement}
-                    handleView={handleView}
-                    generateForm={generateForm}
-                    convertToQuery={convertToQuery}
-                    addClauses={addClauses}
-                    addSubMapping={addSubMapping}
-                    deleteMapping={deleteMapping}
-                    mapWithCustomFn={mapWithCustomFn}
-                    goToFunction={goToFunction}
-                    expressionBar={{
-                        completions: filteredCompletions,
-                        isUpdatingSource,
-                        triggerCompletions: retrieveCompeletions,
-                        onCompletionSelect: handleCompletionSelect,
-                        onSave: updateExprFromExprBar,
-                        onCancel: handleExpressionCancel,
-                    }}
-                />
+                <>
+                    {reusable && (!hasInputs || !hasOutputs) ? (
+                        <FunctionForm
+                            projectPath={projectUri}
+                            filePath={filePath}
+                            functionName={modelState.model.output.name}
+                            isDataMapper={true}
+                        />
+                    ) : (
+                        <DataMapper
+                            modelState={modelState}
+                            name={name}
+                            onClose={onClose}
+                            onEdit={reusable ? onEdit : undefined}
+                            applyModifications={updateExpression}
+                            addArrayElement={addArrayElement}
+                            handleView={handleView}
+                            generateForm={generateForm}
+                            convertToQuery={convertToQuery}
+                            addClauses={addClauses}
+                            addSubMapping={addSubMapping}
+                            deleteMapping={deleteMapping}
+                            mapWithCustomFn={mapWithCustomFn}
+                            mapWithTransformFn={mapWithTransformFn}
+                            goToFunction={goToFunction}
+                            enrichChildFields={enrichChildFields}
+                            expressionBar={{
+                                completions: filteredCompletions,
+                                isUpdatingSource,
+                                triggerCompletions: retrieveCompeletions,
+                                onCompletionSelect: handleCompletionSelect,
+                                onSave: updateExprFromExprBar,
+                                onCancel: handleExpressionCancel,
+                                goToSource: goToSource
+                            }}
+                        />
+                    )}
+                </>
             )}
         </>
     );
 };
 
 const getModelSignature = (model: DMModel | ExpandedDMModel): ModelSignature => ({
-    inputs: model.inputs.map(i => i.id),
-    output: model.output.id,
-    subMappings: model.subMappings?.map(s => s.id) || [],
-    types: 'types' in model ? JSON.stringify(model.types) : ''
+    inputs: model.inputs.map(i => i.name),
+    output: model.output.name,
+    subMappings: model.subMappings?.map(s => s.name) || [],
+    refs: 'refs' in model ? JSON.stringify(model.refs) : ''
 });
 
 const hasSignatureChanged = (
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/DataMapper/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/DataMapper/index.tsx
index f16c9e408f6..9ff24c3e77a 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/DataMapper/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/DataMapper/index.tsx
@@ -16,93 +16,30 @@
  * under the License.
  */
 
-import React, { useMemo } from "react";
+import React from "react";
+
+import { CodeData, LinePosition } from "@wso2/ballerina-core";
+import { ErrorBoundary } from "@wso2/ui-toolkit";
 
-import { DataMapperView } from "@wso2/data-mapper-view";
-import { useRpcContext } from "@wso2/ballerina-rpc-client";
-import { STModification, HistoryEntry, EVENT_TYPE } from "@wso2/ballerina-core";
-import { FunctionDefinition } from "@wso2/syntax-tree";
-import { RecordEditor, StatementEditorComponentProps } from "@wso2/record-creator";
-import { View } from "@wso2/ui-toolkit";
 import { TopNavigationBar } from "../../components/TopNavigationBar";
-import { FunctionForm } from "../BI";
+import { DataMapperView } from "./DataMapperView";
 
-interface DataMapperProps {
-    projectPath: string;
+export interface DataMapperProps {
     filePath: string;
-    model: FunctionDefinition;
-    functionName: string;
-    applyModifications: (modifications: STModification[], isRecordModification?: boolean) => Promise<void>;
+    codedata: CodeData;
+    name: string;
+    projectUri?: string;
+    position?: LinePosition;
+    reusable?: boolean;
 }
 
 export function DataMapper(props: DataMapperProps) {
-    const { projectPath, filePath, model, functionName, applyModifications } = props;
-    const { rpcClient } = useRpcContext();
-    const langServerRpcClient = rpcClient.getLangClientRpcClient();
-    const libraryBrowserRPCClient = rpcClient.getLibraryBrowserRPCClient();
-    const recordCreatorRpcClient = rpcClient.getRecordCreatorRpcClient();
-
-    const hasInputs = useMemo(
-        () => model.functionSignature.parameters?.length > 0,
-        [model.functionSignature.parameters]
-    );
-
-    const hasOutputs = useMemo(
-        () => model.functionSignature?.returnTypeDesc && model.functionSignature.returnTypeDesc.type,
-        [model.functionSignature]
-    );
-
-
-    const goToFunction = async (entry: HistoryEntry) => {
-        const documentUri = entry?.location?.documentUri;
-        const position = entry?.location?.position;
-        rpcClient
-            .getVisualizerRpcClient()
-            .openView({ type: EVENT_TYPE.OPEN_VIEW, location: { documentUri, position } });
-    };
-
-    const applyRecordModifications = async (modifications: STModification[]) => {
-        await props.applyModifications(modifications, true);
-    };
-
-    const renderRecordPanel = (props: {
-        closeAddNewRecord: (createdNewRecord?: string) => void,
-        onUpdate: (updated: boolean) => void
-    } & StatementEditorComponentProps) => {
-        return (
-            <RecordEditor
-                isDataMapper={true}
-                onCancel={props.closeAddNewRecord}
-                recordCreatorRpcClient={recordCreatorRpcClient}
-                {...props}
-                applyModifications={applyRecordModifications}
-            />
-        );
-    };
-
     return (
         <>
-            {!hasInputs || !hasOutputs ? (
-                <FunctionForm
-                    projectPath={projectPath}
-                    filePath={filePath}
-                    functionName={functionName}
-                    isDataMapper={true}
-                />
-            ) : (
-                <View>
-                    <TopNavigationBar />
-                    <DataMapperView
-                        fnST={model}
-                        filePath={filePath}
-                        langServerRpcClient={langServerRpcClient}
-                        libraryBrowserRpcClient={libraryBrowserRPCClient}
-                        applyModifications={applyModifications}
-                        goToFunction={goToFunction}
-                        renderRecordPanel={renderRecordPanel}
-                    />
-                </View>
-            )}
+            <TopNavigationBar />
+            <ErrorBoundary errorMsg="Error while loading the Data Mapper">
+                <DataMapperView {...props} />
+            </ErrorBoundary>
         </>
     );
 };
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/InlineDataMapper/utils.ts b/workspaces/ballerina/ballerina-visualizer/src/views/DataMapper/utils.ts
similarity index 100%
rename from workspaces/ballerina/ballerina-visualizer/src/views/InlineDataMapper/utils.ts
rename to workspaces/ballerina/ballerina-visualizer/src/views/DataMapper/utils.ts
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/OperationForm.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/OperationForm.tsx
index cde5205e60e..bc651ea5906 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/OperationForm.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/OperationForm.tsx
@@ -17,7 +17,7 @@
  */
 
 import React, { useState, useEffect } from 'react';
-import { FunctionModel, LineRange, ParameterModel, ConfigProperties, Type, PropertyModel } from '@wso2/ballerina-core';
+import { FunctionModel, LineRange, ParameterModel, ConfigProperties, PropertyModel, RecordTypeField, Property, PropertyTypeMemberInfo } from '@wso2/ballerina-core';
 import { FormGeneratorNew } from '../BI/Forms/FormGeneratorNew';
 import { FormField, FormImports, FormValues, Parameter } from '@wso2/ballerina-side-panel';
 import { getImportsForProperty } from '../../utils/bi';
@@ -37,6 +37,7 @@ export function OperationForm(props: OperationFormProps) {
     console.log("OperationForm props: ", props);
     const { model, onSave, onClose, filePath, lineRange, isGraphqlView, isServiceClass, isSaving } = props;
     const [fields, setFields] = useState<FormField[]>([]);
+    const [recordTypeFields, setRecordTypeFields] = useState<RecordTypeField[]>([]);
 
     const handleParamChange = (param: Parameter) => {
         const name = `${param.formValues['variable']}`;
@@ -82,6 +83,7 @@ export function OperationForm(props: OperationFormProps) {
                     addNewButton: false,
                     enabled: typeField?.enabled,
                     editable: typeField?.editable,
+                    imports: param?.imports || {}
                 },
                 name: {
                     value: param.formValues['variable'] as string,
@@ -110,7 +112,7 @@ export function OperationForm(props: OperationFormProps) {
 
     // Initialize form fields
     useEffect(() => {
-        const initialFields = [
+        const initialFields: FormField[] = [
             {
                 key: 'name',
                 label: model.name.metadata?.label || 'Operation Name',
@@ -155,6 +157,37 @@ export function OperationForm(props: OperationFormProps) {
                 valueTypeConstraint: model.returnType.valueTypeConstraint || ''
             }
         ];
+
+        const properties = convertConfigToFormFields(model);
+        initialFields.push(...properties);
+
+        if (model?.properties) {
+            const recordTypeFields: RecordTypeField[] = Object.entries(model?.properties)
+                .filter(([_, property]) =>
+                    property.typeMembers &&
+                    property.typeMembers.some((member: PropertyTypeMemberInfo) => member.kind === "RECORD_TYPE")
+                )
+                .map(([key, property]) => ({
+                    key,
+                    property: {
+                        ...property,
+                        metadata: {
+                            label: property.metadata?.label || key,
+                            description: property.metadata?.description || ''
+                        },
+                        valueType: property?.valueType || 'string',
+                        diagnostics: {
+                            hasDiagnostics: property.diagnostics && property.diagnostics.length > 0,
+                            diagnostics: property.diagnostics
+                        }
+                    } as Property,
+                    recordTypeMembers: property.typeMembers.filter((member: PropertyTypeMemberInfo) => member.kind === "RECORD_TYPE")
+                }));
+            console.log(">>> recordTypeFields of model.advanceProperties", recordTypeFields);
+
+            setRecordTypeFields(recordTypeFields);
+        }
+
         setFields(initialFields);
     }, [model]);
 
@@ -167,6 +200,11 @@ export function OperationForm(props: OperationFormProps) {
         newFunctionModel.returnType.value = returnType;
         newFunctionModel.parameters = paramList;
         newFunctionModel.returnType.imports = getImportsForProperty('returnType', formImports);
+        Object.entries(data).forEach(([key, value]) => {
+            if (newFunctionModel?.properties?.[key]) {
+                newFunctionModel.properties[key].value = value as string;
+            }
+        });
         onSave(newFunctionModel);
     };
 
@@ -184,6 +222,7 @@ export function OperationForm(props: OperationFormProps) {
                     helperPaneSide="left"
                     isSaving={isSaving}
                     preserveFieldOrder={true}
+                    recordTypeFields={recordTypeFields}
                 />
             )}
         </>
@@ -229,6 +268,36 @@ export function convertParameterToFormField(key: string, param: ParameterModel):
     };
 }
 
+
+function convertConfigToFormFields(model: FunctionModel): FormField[] {
+    const formFields: FormField[] = [];
+    for (const key in model?.properties) {
+        const property = model?.properties[key];
+        const formField: FormField = {
+            key: key,
+            label: property?.metadata.label || key,
+            type: property.valueType,
+            documentation: property?.metadata.description || "",
+            valueType: property.valueTypeConstraint,
+            editable: property.editable,
+            enabled: property.enabled ?? true,
+            optional: property.optional,
+            value: property.value,
+            valueTypeConstraint: property.valueTypeConstraint,
+            advanced: property.advanced,
+            diagnostics: [],
+            items: property.items,
+            choices: property.choices,
+            placeholder: property.placeholder,
+            addNewButton: property.addNewButton,
+            lineRange: property?.codedata?.lineRange
+        }
+
+        formFields.push(formField);
+    }
+    return formFields;
+}
+
 function convertParameterToParamValue(param: ParameterModel, index: number) {
     return {
         id: index,
@@ -241,6 +310,8 @@ function convertParameterToParamValue(param: ParameterModel, index: number) {
         },
         icon: 'symbol-variable',
         identifierEditable: param.name?.editable,
-        identifierRange: param.name.codedata?.lineRange
+        identifierRange: param.name.codedata?.lineRange,
+        hidden: param.hidden ?? false,
+        imports: param.type?.imports || {}
     };
 }
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/index.tsx
index 5b14ae0156e..71f3e16d7a7 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/GraphQLDiagram/index.tsx
@@ -214,6 +214,63 @@ export function GraphQLDiagram(props: GraphQLDiagramProps) {
         setFocusedNodeId(nodeId);
     };
 
+    const verifyTypeDelete = async (typeId: string): Promise<boolean> => {
+        if (!graphqlTypeModel?.refs) {
+            return false;
+        }
+        const component = graphqlTypeModel.refs.find((type) => type.name === typeId);
+        if (!component) {
+            return false;
+        }
+
+        try {
+            const response = await rpcClient.getBIDiagramRpcClient().verifyTypeDelete({
+                filePath: component.codedata?.lineRange?.fileName,
+                startPosition: component.codedata?.lineRange?.startLine,
+            });
+
+            if (response.errorMsg) {
+                rpcClient.getCommonRpcClient().showErrorMessage({
+                    message: response.errorMsg || "Failed to find usages.",
+                });
+                throw new Error(response.errorMsg);
+            }
+            return !!response.canDelete;
+        } catch (error: any) {
+            rpcClient.getCommonRpcClient().showErrorMessage({
+                message: error?.message || "Failed to find usages.",
+            });
+            throw error;
+        }
+    };
+
+    // After user confirms in the diagram, delete without re-verifying.
+    const onTypeDelete = async (typeId: string) => {
+        const component = graphqlTypeModel?.refs.find((type) => type.name === typeId);
+        if (!component) {
+            return;
+        }
+        await rpcClient.getBIDiagramRpcClient().deleteType({
+            filePath: component.codedata?.lineRange?.fileName,
+            lineRange: {
+                startLine: component.codedata?.lineRange?.startLine,
+                endLine: component.codedata?.lineRange?.endLine,
+            }
+        }).then((response) => {
+            if (response.errorMsg) {
+                rpcClient.getCommonRpcClient().showErrorMessage({
+                    message: response.errorMsg || "Failed to delete type. Please check the console for more details.",
+                });
+                throw new Error(response.errorMsg || "Failed to delete type. Please check the console for more details.");
+            }
+        }).catch((error) => {
+            rpcClient.getCommonRpcClient().showErrorMessage({
+                message: error.message || "Failed to delete type. Please check the console for more details.",
+            });
+        });
+    };
+
+
     return (
         <>
             <View>
@@ -259,6 +316,8 @@ export function GraphQLDiagram(props: GraphQLDiagramProps) {
                             onTypeEdit={onTypeEdit}
                             focusedNodeId={focusedNodeId}
                             updateFocusedNodeId={handleFocusedNodeIdChange}
+                            onTypeDelete={onTypeDelete}
+                            verifyTypeDelete={verifyTypeDelete}
                         />
                     ) : null}
                 </ViewContent>
@@ -294,9 +353,9 @@ export function GraphQLDiagram(props: GraphQLDiagramProps) {
                         type={editingType}
                         onTypeChange={onTypeChange}
                         newType={false}
-                        isGraphql={true} 
-                        onTypeCreate={() => { }}    
-                        />
+                        isGraphql={true}
+                        onTypeCreate={() => { }}
+                    />
                 </PanelContainer>
             )}
             {isTypeEditorOpen && editingType && editingType.codedata.node === "CLASS" && (
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/InlineDataMapper/modelProcessor.ts b/workspaces/ballerina/ballerina-visualizer/src/views/InlineDataMapper/modelProcessor.ts
deleted file mode 100644
index daa43f2dacd..00000000000
--- a/workspaces/ballerina/ballerina-visualizer/src/views/InlineDataMapper/modelProcessor.ts
+++ /dev/null
@@ -1,202 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import {
-    DMModel,
-    EnumType,
-    ExpandedDMModel,
-    IORoot,
-    IOType,
-    IOTypeField,
-    RecordType,
-    TypeKind,
-} from "@wso2/ballerina-core";
-
-interface ExpandOptions {
-    processInputs?: boolean;
-    processOutput?: boolean;
-    processSubMappings?: boolean;
-    previousModel?: ExpandedDMModel;
-}
-
-/**
- * Generates a unique field ID by combining parent ID and field name
- */
-function generateFieldId(parentId: string, fieldName: string): string {
-    return `${parentId}.${fieldName}`;
-}
-
-/**
- * Processes a type reference and returns the appropriate IOType structure
- */
-function processTypeReference(
-    refType: RecordType | EnumType,
-    fieldId: string,
-    model: DMModel
-): Partial<IOType> {
-    if ('fields' in refType) {
-        return {
-            fields: processTypeFields(refType, fieldId, model)
-        };
-    }
-    if ('members' in refType) {
-        return {
-            members: refType.members || []
-        };
-    }
-    return {};
-}
-
-/**
- * Processes array type fields and their members
- */
-function processArray(
-    field: IOTypeField,
-    parentId: string,
-    member: IOTypeField,
-    model: DMModel
-): IOType {
-    const fieldId = generateFieldId(parentId, `${parentId.split(".").pop()!}Item`);
-    const ioType: IOType = {
-        id: fieldId,
-        typeName: member.typeName!,
-        kind: member.kind
-    };
-
-    if (member.ref) {
-        const refType = model.types[member.ref];
-        return {
-            ...ioType,
-            ...processTypeReference(refType, fieldId, model)
-        };
-    }
-
-    if (member.kind === TypeKind.Array && member.member) {
-        return {
-            ...ioType,
-            member: processArray(field, fieldId, member.member, model)
-        };
-    }
-
-    return ioType;
-}
-
-/**
- * Processes fields of a record type
- */
-function processTypeFields(
-    type: RecordType,
-    parentId: string,
-    model: DMModel
-): IOType[] {
-    if (!type.fields) return [];
-
-    return type.fields.map(field => {
-        const fieldId = generateFieldId(parentId, field.fieldName!);
-        const ioType: IOType = {
-            id: fieldId,
-            variableName: field.fieldName!,
-            typeName: field.typeName!,
-            kind: field.kind
-        };
-
-        if (field.kind === TypeKind.Record && field.ref) {
-            const refType = model.types[field.ref];
-            return {
-                ...ioType,
-                ...processTypeReference(refType, fieldId, model)
-            };
-        }
-
-        if (field.kind === TypeKind.Array && field.member) {
-            return {
-                ...ioType,
-                member: processArray(field, fieldId, field.member, model)
-            };
-        }
-
-        return ioType;
-    });
-}
-
-/**
- * Creates a base IOType from an IORoot
- */
-function createBaseIOType(root: IORoot): IOType {
-    return {
-        id: root.id,
-        variableName: root.fieldName!,
-        typeName: root.typeName,
-        kind: root.kind,
-        ...(root.category && { category: root.category })
-    };
-}
-
-/**
- * Processes an IORoot (input or output) into an IOType
- */
-function processIORoot(root: IORoot, model: DMModel): IOType {
-    const ioType = createBaseIOType(root);
-
-    if (root.ref) {
-        const refType = model.types[root.ref];
-        return {
-            ...ioType,
-            ...processTypeReference(refType, root.id, model)
-        };
-    }
-
-    if (root.kind === TypeKind.Array && root.member) {
-        return {
-            ...ioType,
-            member: processArray(root, root.id, root.member, model)
-        };
-    }
-
-    return ioType;
-}
-
-/**
- * Expands a DMModel into an ExpandedDMModel
- */
-export function expandDMModel(
-    model: DMModel,
-    options: ExpandOptions = {}
-): ExpandedDMModel {
-    const {
-        processInputs = true,
-        processOutput = true,
-        processSubMappings = true,
-        previousModel
-    } = options;
-
-    return {
-        inputs: processInputs
-            ? model.inputs.map(input => processIORoot(input, model))
-            : previousModel?.inputs || [],
-        output: processOutput
-            ? processIORoot(model.output, model)
-            : previousModel?.output!,
-        subMappings: processSubMappings
-            ? model.subMappings?.map(subMapping => processIORoot(subMapping, model))
-            : previousModel?.subMappings || [],
-        mappings: model.mappings,
-        source: "",
-        view: ""
-    };
-}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/TypeDiagram/NodeSelectorView/NodeSelector.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/TypeDiagram/NodeSelectorView/NodeSelector.tsx
new file mode 100644
index 00000000000..04093d1c969
--- /dev/null
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/TypeDiagram/NodeSelectorView/NodeSelector.tsx
@@ -0,0 +1,248 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState, useMemo } from 'react';
+import { Type } from '@wso2/ballerina-core';
+import { ThemeColors, SearchBox, Typography, Codicon, Icon, Tooltip } from '@wso2/ui-toolkit';
+import styled from '@emotion/styled';
+
+const ViewWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    width: 100%;
+`;
+
+const Container = styled.div`
+    padding: 0 20px;
+    width: 100%;
+`;
+
+const TopBar = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+`;
+
+const BodyText = styled.p`
+    font-size: 14px;
+    color: ${ThemeColors.ON_SURFACE_VARIANT};
+    margin: 0 0 8px;
+    opacity: 0.8;
+`;
+
+const Row = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    margin-top: 32px;
+    width: 100%;
+`;
+
+const StyledSearchInput = styled(SearchBox)`
+    height: 30px;
+`;
+
+const ListContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: 16px;
+    height: calc(100vh - 280px);
+    overflow-y: scroll;
+    padding-top: 8px;
+`;
+
+const GridContainer = styled.div`
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 12px;
+    width: 100%;
+`;
+
+const NodeCard = styled.div`
+    gap: 16px;
+    max-width: 42rem;
+    padding: 12px;
+    border-radius: 4px;
+    border: 1px solid ${ThemeColors.OUTLINE_VARIANT};
+    background-color: ${ThemeColors.SURFACE_DIM};
+    cursor: pointer;
+    &:hover {
+        background-color: ${ThemeColors.PRIMARY_CONTAINER};
+        border: 1px solid ${ThemeColors.HIGHLIGHT};
+    }
+`;
+
+const CardContainer = styled.div`
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+`;
+
+const IconContainer = styled.div`
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    margin-top: 1px;
+`;
+
+const ContentContainer = styled.div`
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+`;
+
+const NodeTitle = styled.p`
+    font-size: 13px;
+    color: ${ThemeColors.ON_SURFACE};
+    font-weight: bold;
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 100%;
+`;
+
+const NodeTypeBadge = styled.span`
+    padding: 2px 0px;
+    border-radius: 3px;
+    font-size: 10px;
+    font-weight: 500;
+    color: ${ThemeColors.PRIMARY};
+    margin-top: 4px;
+    display: inline-block;
+`;
+
+const EmptyState = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+    flex-direction: column;
+    gap: 20px;
+    color: ${ThemeColors.ON_SURFACE_VARIANT};
+    
+    .codicon {
+        font-size: 24px;
+        margin-bottom: 0.5rem;
+    }
+`;
+
+interface NodeSelectorProps {
+    nodes: Type[];
+    onNodeSelect: (nodeId: string) => void;
+}
+
+export function NodeSelector({ nodes, onNodeSelect }: NodeSelectorProps) {
+    const [searchTerm, setSearchTerm] = useState('');
+
+    // Filter and sort nodes based on search term
+    const filteredNodes = useMemo(() => {
+        let filtered = nodes;
+
+        if (searchTerm.trim()) {
+            const term = searchTerm.toLowerCase();
+            filtered = nodes.filter(node =>
+                node.name.toLowerCase().includes(term) ||
+                node.metadata?.description?.toLowerCase().includes(term)
+            );
+        }
+
+        // Sort alphabetically
+        return filtered.sort((a, b) => a.name.localeCompare(b.name));
+    }, [nodes, searchTerm]);
+
+    const handleOnSearch = (text: string) => {
+        setSearchTerm(text);
+    };
+
+    const formatNodeType = (nodeType: string) => {
+        return nodeType.toLowerCase().charAt(0).toUpperCase() + nodeType.toLowerCase().slice(1);
+    };
+
+    return (
+        <ViewWrapper>
+            <Container>
+                <TopBar>
+                    <Typography variant="h2">Select a Type</Typography>
+                </TopBar>
+
+                <BodyText>
+                    {nodes.length} types detected. Select a type for a focused dependency diagram.
+                </BodyText>
+
+                <Row>
+                    <StyledSearchInput
+                        value={searchTerm}
+                        placeholder="Search types"
+                        autoFocus={true}
+                        onChange={handleOnSearch}
+                        size={60}
+                        sx={{ width: "100%" }}
+                    />
+                </Row>
+
+                <ListContainer>
+                    {filteredNodes.length === 0 ? (
+                        <EmptyState>
+                            <Codicon name="search" />
+                            <div>No types found</div>
+                        </EmptyState>
+                    ) : (
+                        <GridContainer>
+                            {filteredNodes.map((node) => (
+                                <NodeCard
+                                    key={node.name}
+                                    onClick={() => onNodeSelect(node.name)}
+                                >
+                                    <CardContainer>
+                                        <IconContainer>
+                                            <Icon name="bi-type" iconSx={{
+                                                color: ThemeColors.ON_SURFACE_VARIANT,
+                                                fontSize: '14px'
+                                            }} />
+                                        </IconContainer>
+                                        <ContentContainer>
+                                            <Tooltip content={node.name} position="top">
+                                                <NodeTitle>
+                                                    {node.name}
+                                                </NodeTitle>
+                                            </Tooltip>
+                                            <NodeTypeBadge>
+                                                {formatNodeType(node.codedata?.node || 'Type')}
+                                            </NodeTypeBadge>
+                                        </ContentContainer>
+                                    </CardContainer>
+                                </NodeCard>
+                            ))}
+                        </GridContainer>
+                    )}
+                </ListContainer>
+            </Container>
+        </ViewWrapper>
+    );
+}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/TypeDiagram/index.tsx b/workspaces/ballerina/ballerina-visualizer/src/views/TypeDiagram/index.tsx
index eead416f2f0..d35a473aa12 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/TypeDiagram/index.tsx
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/TypeDiagram/index.tsx
@@ -17,7 +17,7 @@
  */
 
 import React, { useEffect, useRef } from "react";
-import { VisualizerLocation, NodePosition, Type, EVENT_TYPE, MACHINE_VIEW, TypeNodeKind } from "@wso2/ballerina-core";
+import { VisualizerLocation, NodePosition, Type, EVENT_TYPE, MACHINE_VIEW, TypeNodeKind, ComponentInfo } from "@wso2/ballerina-core";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
 import { TypeDiagram as TypeDesignDiagram } from "@wso2/type-diagram";
 import { Button, Codicon, ProgressRing, ThemeColors, View, ViewContent } from "@wso2/ui-toolkit";
@@ -26,6 +26,7 @@ import { PanelContainer } from "@wso2/ballerina-side-panel";
 import { TopNavigationBar } from "../../components/TopNavigationBar";
 import { TitleBar } from "../../components/TitleBar";
 import { FormTypeEditor } from "../BI/TypeEditor";
+import { NodeSelector } from "./NodeSelectorView/NodeSelector";
 
 const HeaderContainer = styled.div`
     align-items: center;
@@ -58,6 +59,8 @@ interface TypeEditorState {
     editingType: Type;
 }
 
+const MAX_TYPES_FOR_FULL_VIEW= 80;
+
 export function TypeDiagram(props: TypeDiagramProps) {
     const { selectedTypeId, projectUri, addType } = props;
     const { rpcClient } = useRpcContext();
@@ -66,6 +69,7 @@ export function TypeDiagram(props: TypeDiagramProps) {
     const [typesModel, setTypesModel] = React.useState<Type[]>(undefined);
     const [focusedNodeId, setFocusedNodeId] = React.useState<string | undefined>(undefined);
     const [highlightedNodeId, setHighlightedNodeId] = React.useState<string | undefined>(selectedTypeId);
+    const [isModelLoaded, setIsModelLoaded] = React.useState<boolean>(false);
     const [typeEditorState, setTypeEditorState] = React.useState<TypeEditorState>({
         isTypeCreatorOpen: false,
         editingTypeId: undefined,
@@ -73,6 +77,26 @@ export function TypeDiagram(props: TypeDiagramProps) {
         editingType: undefined,
     });
 
+    useEffect(() => {
+        if (!typesModel) {
+            return;
+        }
+
+        if (typesModel.length > MAX_TYPES_FOR_FULL_VIEW) {
+            if (selectedTypeId) {
+                setFocusedNodeId(selectedTypeId);
+            } else {
+                setFocusedNodeId(undefined);
+            }
+
+        } else {
+            if (selectedTypeId) {
+                setHighlightedNodeId(selectedTypeId);
+            }
+            setFocusedNodeId(undefined);
+        }
+    }, [selectedTypeId, typesModel]);
+
     useEffect(() => {
         if (addType) {
             setTypeEditorState((prevState) => ({
@@ -91,19 +115,18 @@ export function TypeDiagram(props: TypeDiagramProps) {
     }, [rpcClient]);
 
     useEffect(() => {
+        setIsModelLoaded(false);
         getComponentModel();
     }, [visualizerLocation]);
 
     rpcClient?.onProjectContentUpdated((state: boolean) => {
         if (state) {
+            console.log("Project content updated, refreshing type model");
+            setIsModelLoaded(false);
             getComponentModel();
         }
     });
 
-    useEffect(() => {
-        setFocusedNodeId(undefined);
-        setHighlightedNodeId(selectedTypeId);
-    }, [selectedTypeId]);
 
     const getComponentModel = async () => {
         if (!rpcClient || !visualizerLocation?.metadata?.recordFilePath) {
@@ -113,6 +136,13 @@ export function TypeDiagram(props: TypeDiagramProps) {
             .getBIDiagramRpcClient()
             .getTypes({ filePath: visualizerLocation?.metadata?.recordFilePath });
         setTypesModel(response.types);
+
+        // Set focused node immediately if we have selectedTypeId and more than 80 types
+        if (response.types && response.types.length > MAX_TYPES_FOR_FULL_VIEW && selectedTypeId) {
+            setFocusedNodeId(selectedTypeId);
+        }
+
+        setIsModelLoaded(true);
         console.log(response);
     };
 
@@ -168,6 +198,62 @@ export function TypeDiagram(props: TypeDiagramProps) {
         setHighlightedNodeId(typeId);
     };
 
+    const verifyTypeDelete = async (typeId: string) => {
+        if (!visualizerLocation || !visualizerLocation.metadata?.recordFilePath) {
+            return false;
+        }
+        const component = typesModel?.find((type) => type.name === typeId);
+        if (!component) {
+            return false;
+        }
+
+        try {
+            const response = await rpcClient.getBIDiagramRpcClient().verifyTypeDelete({
+                filePath: component.codedata?.lineRange?.fileName,
+                startPosition: component.codedata?.lineRange?.startLine,
+            });
+
+            if (response.errorMsg) {
+                rpcClient.getCommonRpcClient().showErrorMessage({
+                    message: response.errorMsg || "Failed to find usages.",
+                });
+                throw new Error(response.errorMsg);
+            }
+            return !!response.canDelete;
+        } catch (error: any) {
+            rpcClient.getCommonRpcClient().showErrorMessage({
+                message: error?.message || "Failed to find usages.",
+            });
+            throw error;
+        }
+    };
+
+    // After user confirms in the diagram, delete without re-verifying.
+    const onTypeDelete = async (typeId: string) => {
+        const component = typesModel?.find((type) => type.name === typeId);
+        if (!component || !visualizerLocation?.metadata?.recordFilePath) {
+            return;
+        }
+        await rpcClient.getBIDiagramRpcClient().deleteType({
+            filePath: component.codedata?.lineRange?.fileName,
+            lineRange: {
+                startLine: component.codedata?.lineRange?.startLine,
+                endLine: component.codedata?.lineRange?.endLine,
+            }
+        }).then((response) => {
+            if (response.errorMsg) {
+                rpcClient.getCommonRpcClient().showErrorMessage({
+                    message: response.errorMsg || "Failed to delete type. Please check the console for more details.",
+                });
+                throw new Error(response.errorMsg || "Failed to delete type. Please check the console for more details.");
+            }
+        }).catch((error) => {
+            rpcClient.getCommonRpcClient().showErrorMessage({
+                message: error.message || "Failed to delete type. Please check the console for more details.",
+            });
+        });
+    };
+
     const onTypeEditorClosed = () => {
         setTypeEditorState({
             editingTypeId: undefined,
@@ -177,31 +263,12 @@ export function TypeDiagram(props: TypeDiagramProps) {
         });
     };
 
-    const onSwitchToTypeDiagram = () => {
-        setFocusedNodeId(undefined);
-    };
-
     const onFocusedNodeIdChange = (typeId: string) => {
         setFocusedNodeId(typeId);
         onTypeEditorClosed();
         setHighlightedNodeId(undefined);
     };
 
-    const Header = () => (
-        <HeaderContainer>
-            {focusedNodeId ? <Title>Type : {focusedNodeId}</Title> : <Title>Types</Title>}
-            {focusedNodeId ? (
-                <Button appearance="primary" onClick={onSwitchToTypeDiagram} tooltip="Switch to complete Type Diagram">
-                    <Codicon name="discard" sx={{ marginRight: 5 }} /> Switch to Type Diagram
-                </Button>
-            ) : (
-                <Button appearance="primary" onClick={addNewType} tooltip="Add New Type">
-                    <Codicon name="add" sx={{ marginRight: 5 }} /> Add Type
-                </Button>
-            )}
-        </HeaderContainer>
-    );
-
     const findSelectedType = (typeId: string): Type => {
         if (!typeId) {
             return {
@@ -231,7 +298,6 @@ export function TypeDiagram(props: TypeDiagramProps) {
                 isTypeCreatorOpen: false,
                 newTypeName: undefined,
             });
-            setHighlightedNodeId(type.name);
             return;
         }
         setTypeEditorState({
@@ -240,7 +306,6 @@ export function TypeDiagram(props: TypeDiagramProps) {
             isTypeCreatorOpen: false,
             newTypeName: undefined,
         });
-        setHighlightedNodeId(type.name); // Highlight the newly created type
     };
 
     // Helper function to convert TypeNodeKind to display name
@@ -270,6 +335,35 @@ export function TypeDiagram(props: TypeDiagramProps) {
         }));
     };
 
+    const handleNodeSelect = (nodeId: string) => {
+        setFocusedNodeId(nodeId);
+    };
+
+    const renderView = () => {
+        if (typesModel && typesModel.length > MAX_TYPES_FOR_FULL_VIEW && focusedNodeId === undefined) {
+            return (
+                <NodeSelector
+                    nodes={typesModel || []}
+                    onNodeSelect={handleNodeSelect}
+                />
+            );
+        } else {
+            return (
+                <TypeDesignDiagram
+                    typeModel={typesModel}
+                    selectedNodeId={highlightedNodeId}
+                    focusedNodeId={focusedNodeId}
+                    updateFocusedNodeId={onFocusedNodeIdChange}
+                    showProblemPanel={showProblemPanel}
+                    goToSource={handleOnGoToSource}
+                    onTypeEdit={onTypeEdit}
+                    onTypeDelete={onTypeDelete}
+                    verifyTypeDelete={verifyTypeDelete}
+                />
+            );
+        }
+    }
+
     return (
         <>
             <View>
@@ -286,24 +380,22 @@ export function TypeDiagram(props: TypeDiagramProps) {
                     />
                 )}
                 {focusedNodeId && (
-                    <TitleBar title={focusedNodeId} subtitle="Type" onBack={() => setFocusedNodeId(undefined)} />
+                    <TitleBar
+                        title={focusedNodeId}
+                        subtitle="Type"
+                        onBack={() => {
+                            setFocusedNodeId(undefined);
+                        }}
+                    />
                 )}
                 <ViewContent>
-                    {typesModel ? (
-                        <TypeDesignDiagram
-                            typeModel={typesModel}
-                            selectedNodeId={highlightedNodeId}
-                            focusedNodeId={focusedNodeId}
-                            updateFocusedNodeId={onFocusedNodeIdChange}
-                            showProblemPanel={showProblemPanel}
-                            goToSource={handleOnGoToSource}
-                            onTypeEdit={onTypeEdit}
-                        />
-                    ) : (
-                        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
-                            <ProgressRing color={ThemeColors.PRIMARY} />
-                        </div>
-                    )}
+                    <>
+                        {!isModelLoaded ? (
+                            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
+                                <ProgressRing color={ThemeColors.PRIMARY} />
+                            </div>
+                        ) : renderView()}
+                    </>
                 </ViewContent>
             </View>
             {/* Panel for editing and creating types */}
@@ -323,8 +415,8 @@ export function TypeDiagram(props: TypeDiagramProps) {
                         type={findSelectedType(typeEditorState.editingTypeId)}
                         newType={typeEditorState.editingTypeId ? false : true}
                         onTypeChange={onTypeChange}
-                        onTypeCreate={handleTypeCreate}
-                    />
+                        onTypeCreate={handleTypeCreate} 
+                     />
                 </PanelContainer>
             )}
         </>
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/styles.ts b/workspaces/ballerina/ballerina-visualizer/src/views/styles.ts
index dcab779a213..9ac5dfaa791 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/styles.ts
+++ b/workspaces/ballerina/ballerina-visualizer/src/views/styles.ts
@@ -34,11 +34,10 @@ export const BodyText = styled(Text)`
 `;
 
 export const BodyTinyInfo = styled(Text)`
-    color: var(--vscode-sideBarTitle-foreground);
+    color: var(--vscode-descriptionForeground);
     margin: 0 0 8px;
-    opacity: 0.5;
     font-weight: normal;
-    font-size: 12px;
+    font-size: 14px;
     letter-spacing: 0.39px;
 `;
 
@@ -57,7 +56,7 @@ export const LoadingOverlayContainer = styled.div`
     left: 0;
     width: 100%;
     height: 100%;
-    opacity: 0.5;
+    opacity: 0.7;
     background-color: var(--vscode-editor-background);
     justify-content: center;
     align-items: center;
diff --git a/workspaces/ballerina/ballerina-visualizer/webpack.config.js b/workspaces/ballerina/ballerina-visualizer/webpack.config.js
index ab6c7e79e50..8821da857f9 100644
--- a/workspaces/ballerina/ballerina-visualizer/webpack.config.js
+++ b/workspaces/ballerina/ballerina-visualizer/webpack.config.js
@@ -4,7 +4,8 @@ const webpack = require('webpack');
 module.exports = {
   entry: "./src/index.tsx",
   target: "web",
-  devtool: "eval-cheap-module-source-map",
+  devtool: !process.env.CI ? "eval-source-map" : undefined,
+  mode: !process.env.CI ? "development" : "production",
   output: {
     path: path.resolve(__dirname, "build"),
     filename: "Visualizer.js",
@@ -26,49 +27,49 @@ module.exports = {
   },
   module: {
     rules: [{
-        test: /\.(ts|tsx)$/,
-        loader: "ts-loader",
-        exclude: '/node_modules/',
-        options: {
-          configFile: path.resolve(__dirname, 'tsconfig.json'),
-          transpileOnly: true, 
-        },
+      test: /\.(ts|tsx)$/,
+      loader: "ts-loader",
+      exclude: '/node_modules/',
+      options: {
+        configFile: path.resolve(__dirname, 'tsconfig.json'),
+        transpileOnly: true,
       },
-      {
-        enforce: "pre",
-        test: /\.js$/,
-        loader: "source-map-loader",
-        exclude: /node_modules\/parse5/,
-      },
-      {
-        test: /\.css$/,
-        use: [
-          'style-loader',
-          'css-loader'
-        ]
-      },
-      {
-        test: /\.s[ac]ss$/i,
-        use: [
-          // Creates `style` nodes from JS strings
-          'style-loader',
-          // Translates CSS into CommonJS
-          'css-loader',
-          // Compiles Sass to CSS
-          'sass-loader',
-        ],
-      },
-      {
-        test: /\.(woff|woff2|ttf|otf|eot)$/,
-        type: 'asset/inline',
+    },
+    {
+      enforce: "pre",
+      test: /\.js$/,
+      loader: "source-map-loader",
+      exclude: /node_modules\/parse5/,
+    },
+    {
+      test: /\.css$/,
+      use: [
+        'style-loader',
+        'css-loader'
+      ]
+    },
+    {
+      test: /\.s[ac]ss$/i,
+      use: [
+        // Creates `style` nodes from JS strings
+        'style-loader',
+        // Translates CSS into CommonJS
+        'css-loader',
+        // Compiles Sass to CSS
+        'sass-loader',
+      ],
+    },
+    {
+      test: /\.(woff|woff2|ttf|otf|eot)$/,
+      type: 'asset/inline',
+    },
+    {
+      test: /\.(svg)$/,
+      type: 'asset/resource',
+      generator: {
+        filename: './images/[name][ext]',
       },
-      {
-        test: /\.(svg)$/,
-        type: 'asset/resource',
-        generator: {
-          filename: './images/[name][ext]',
-        },
-      }
+    }
     ],
   },
   devServer: {
diff --git a/workspaces/ballerina/bi-diagram/src/components/ConnectorIcon/index.tsx b/workspaces/ballerina/bi-diagram/src/components/ConnectorIcon/index.tsx
index b89d190da31..2d9918b268a 100644
--- a/workspaces/ballerina/bi-diagram/src/components/ConnectorIcon/index.tsx
+++ b/workspaces/ballerina/bi-diagram/src/components/ConnectorIcon/index.tsx
@@ -95,6 +95,7 @@ export function getLlmModelIcons(modelType: string) {
         case "ai.openai":
             return <OpenAiIcon />;
         case "AzureOpenAiProvider":
+        case "OpenAiModelProvider":
         case "ai.azure":
             return <AzureOpenAiIcon />;
         case "AnthropicProvider":
diff --git a/workspaces/ballerina/bi-diagram/src/components/NodeIcon/index.tsx b/workspaces/ballerina/bi-diagram/src/components/NodeIcon/index.tsx
index d4f122ee0dd..8a114166d8d 100644
--- a/workspaces/ballerina/bi-diagram/src/components/NodeIcon/index.tsx
+++ b/workspaces/ballerina/bi-diagram/src/components/NodeIcon/index.tsx
@@ -90,7 +90,11 @@ const NODE_COLOR_GROUPS = {
         "VECTOR_STORES",
         "EMBEDDING_PROVIDER",
         "EMBEDDING_PROVIDERS",
-    ],    
+        "DATA_LOADER",
+        "DATA_LOADERS",
+        "CHUNKER",
+        "CHUNKERS"
+    ],
     // Data related - magenta variants
     MAGENTA_DATA_GROUP: ["VARIABLE", "NEW_DATA", "UPDATE_DATA", "ASSIGN"],
     
@@ -231,6 +235,10 @@ const NODE_ICONS: Record<NodeKind, React.FC<{ size: number; color: string }>> =
     VECTOR_STORES: ({ size, color }) => <Icon name="bi-db" sx={{ fontSize: size, width: size, height: size, color }} />,
     EMBEDDING_PROVIDER: ({ size, color }) => <Icon name="bi-doc" sx={{ fontSize: size, width: size, height: size, color }} />,
     EMBEDDING_PROVIDERS: ({ size, color }) => <Icon name="bi-doc" sx={{ fontSize: size, width: size, height: size, color }} />,
+    DATA_LOADER: ({ size, color }) => <Icon name="bi-data-table" sx={{ fontSize: size, width: size, height: size, color }} />,
+    DATA_LOADERS: ({ size, color }) => <Icon name="bi-data-table" sx={{ fontSize: size, width: size, height: size, color }} />,
+    CHUNKER: ({ size, color }) => <Icon name="bi-cut" sx={{ fontSize: size, width: size, height: size, color }} />,
+    CHUNKERS: ({ size, color }) => <Icon name="bi-cut" sx={{ fontSize: size, width: size, height: size, color }} />,
     // Default case for any NodeKind not explicitly handled
 } as Record<NodeKind, React.FC<{ size: number; color: string }>>;
 
diff --git a/workspaces/ballerina/bi-diagram/src/components/nodes/IfNode/MatchNodeWidget.tsx b/workspaces/ballerina/bi-diagram/src/components/nodes/IfNode/MatchNodeWidget.tsx
index 33d9b3ff204..9b8447627b1 100644
--- a/workspaces/ballerina/bi-diagram/src/components/nodes/IfNode/MatchNodeWidget.tsx
+++ b/workspaces/ballerina/bi-diagram/src/components/nodes/IfNode/MatchNodeWidget.tsx
@@ -107,6 +107,11 @@ export function MatchNodeWidget(props: MatchNodeWidgetProps) {
 
     const disabled = model.node.suggested;
     const hasError = nodeHasError(model.node);
+    const condition = (
+        model.node.properties.condition?.value ||
+        model.node.properties.matchTarget?.value ||
+        ""
+    ).toString();
 
     return (
         <NodeStyles.Node
@@ -169,7 +174,7 @@ export function MatchNodeWidget(props: MatchNodeWidgetProps) {
                 </NodeStyles.Column>
                 <NodeStyles.Header onClick={handleOnClick}>
                     <NodeStyles.Title>{model.node.metadata.label || model.node.codedata.node}</NodeStyles.Title>
-                    <NodeStyles.Description>{model.node.properties.condition.value as ReactNode}</NodeStyles.Description>
+                    <NodeStyles.Description>{condition}</NodeStyles.Description>
                 </NodeStyles.Header>
                 {hasError && (
                     <NodeStyles.ErrorIcon>
diff --git a/workspaces/ballerina/bi-diagram/src/components/nodes/PromptNode/PromptNodeWidget.tsx b/workspaces/ballerina/bi-diagram/src/components/nodes/PromptNode/PromptNodeWidget.tsx
index 21178f6c3d1..83d8f2dbc9c 100644
--- a/workspaces/ballerina/bi-diagram/src/components/nodes/PromptNode/PromptNodeWidget.tsx
+++ b/workspaces/ballerina/bi-diagram/src/components/nodes/PromptNode/PromptNodeWidget.tsx
@@ -238,7 +238,8 @@ export function PromptNodeWidget(props: PromptNodeWidgetProps) {
     const fetchingStateRef = useRef<FetchCompletionsState>(FETCH_COMPLETIONS_STATE.IDLE);
     const invalidateCacheRef = useRef<boolean>(false);
     const field: ExpressionProperty = useMemo(() => model.node.properties['prompt'], [model]);
-    const nodeModelType = (model.node.properties?.modelProvider?.metadata?.data as NodeMetadata)?.module;
+    const nodeMetadata = (model.node.properties?.modelProvider?.metadata?.data as NodeMetadata);
+    const nodeModelType = nodeMetadata?.type === "ModelProvider" ? nodeMetadata?.module : nodeMetadata?.type;
 
     const handleOnClick = async (event: React.MouseEvent<HTMLDivElement>) => {
         if (event.metaKey) {
diff --git a/workspaces/ballerina/component-diagram/src/components/Diagram.tsx b/workspaces/ballerina/component-diagram/src/components/Diagram.tsx
index 4c09c76644c..073964d3e10 100644
--- a/workspaces/ballerina/component-diagram/src/components/Diagram.tsx
+++ b/workspaces/ballerina/component-diagram/src/components/Diagram.tsx
@@ -22,6 +22,7 @@ import { CanvasWidget } from "@projectstorm/react-canvas-core";
 import {
     autoDistribute,
     calculateEntryNodeHeight,
+    calculateGraphQLNodeHeight,
     createNodesLink,
     createPortNodeLink,
     generateEngine,
@@ -33,19 +34,15 @@ import { NodeLinkModel } from "./NodeLink";
 import { OverlayLayerModel } from "./OverlayLayer";
 import { DiagramContextProvider, DiagramContextState } from "./DiagramContext";
 import Controls from "./Controls";
-import {
-    CDAutomation,
-    CDConnection,
-    CDFunction,
-    CDListener,
-    CDModel,
-    CDService,
-    CDResourceFunction,
-} from "@wso2/ballerina-core";
+import { CDAutomation, CDConnection, CDFunction, CDListener, CDModel, CDService, CDResourceFunction } from "@wso2/ballerina-core";
 import { EntryNodeModel } from "./nodes/EntryNode";
 import { ListenerNodeModel } from "./nodes/ListenerNode";
 import { ConnectionNodeModel } from "./nodes/ConnectionNode";
 
+export type GroupKey = "Query" | "Subscription" | "Mutation";
+export const PREVIEW_COUNT = 2;
+export const SHOW_ALL_THRESHOLD = 3;
+
 export interface DiagramProps {
     project: CDModel;
     onListenerSelect: (listener: CDListener) => void;
@@ -56,6 +53,14 @@ export interface DiagramProps {
     onDeleteComponent: (component: CDListener | CDService | CDAutomation | CDConnection) => void;
 }
 
+export type GQLFuncListType = Record<GroupKey, Array<CDFunction | CDResourceFunction>>;
+
+export type GQLState = {
+    Query: boolean;
+    Subscription: boolean;
+    Mutation: boolean;
+};
+
 export function Diagram(props: DiagramProps) {
     const {
         project,
@@ -69,6 +74,38 @@ export function Diagram(props: DiagramProps) {
     const [diagramEngine] = useState<DiagramEngine>(generateEngine());
     const [diagramModel, setDiagramModel] = useState<DiagramModel | null>(null);
     const [expandedNodes, setExpandedNodes] = useState<Set<string>>(new Set());
+    const [graphQLGroupOpen, setGraphQLGroupOpen] = useState<Record<string, GQLState>>({} as Record<string, GQLState>);
+
+    // Ensure every service has a default GraphQL group open state.
+    // Defaults: Query = true, Subscription = false, Mutation = false
+    useEffect(() => {
+        if (!project?.services) return;
+
+        const graphqlServices = project.services.filter(
+            (svc) => svc.type === "graphql:Service"
+        );
+        const currentGraphqlIds = new Set(graphqlServices.map((svc) => svc.uuid));
+
+        setGraphQLGroupOpen((previousState) => {
+            const updatedState = { ...previousState };
+
+            // Remove services that no longer exist
+            Object.keys(updatedState).forEach((id) => {
+                if (!currentGraphqlIds.has(id)) {
+                    delete updatedState[id];
+                }
+            });
+
+            // Add new services that are not yet in the state
+            graphqlServices.forEach((service) => {
+                if (!updatedState[service.uuid]) {
+                    updatedState[service.uuid] = { Query: true, Subscription: false, Mutation: false };
+                }
+            });
+
+            return updatedState;
+        });
+    }, [project]);
 
     useEffect(() => {
         if (diagramEngine) {
@@ -76,7 +113,7 @@ export function Diagram(props: DiagramProps) {
             drawDiagram(nodes, links);
             autoDistribute(diagramEngine);
         }
-    }, [project, expandedNodes]);
+    }, [project, expandedNodes, graphQLGroupOpen]);
 
     useEffect(() => {
         const handleResize = () => {
@@ -104,6 +141,14 @@ export function Diagram(props: DiagramProps) {
         });
     };
 
+    const handleToggleGraphQLGroup = (serviceUuid: string, group: "Query" | "Subscription" | "Mutation") => {
+        setGraphQLGroupOpen(prev => {
+            const current = prev[serviceUuid] ?? { Query: true, Subscription: false, Mutation: false };
+            const next = { ...current, [group]: !current[group] } as { Query: boolean; Subscription: boolean; Mutation: boolean };
+            return { ...prev, [serviceUuid]: next };
+        });
+    };
+
     const getDiagramData = () => {
         const nodes: NodeModel[] = [];
         const links: NodeLinkModel[] = [];
@@ -114,7 +159,6 @@ export function Diagram(props: DiagramProps) {
         const sortedConnections = sortItems(filteredConnections || []) as CDConnection[];
         sortedConnections.forEach((connection, index) => {
             const node = new ConnectionNodeModel(connection);
-            // Set initial Y position for connections
             node.setPosition(0, 100 + index * 100);
             nodes.push(node);
         });
@@ -124,74 +168,82 @@ export function Diagram(props: DiagramProps) {
         // Sort services by sortText before creating nodes
         const sortedServices = sortItems(project.services || []) as CDService[];
         sortedServices.forEach((service) => {
-            // Calculate height based on visible functions and expansion state
-            const totalFunctions = service.remoteFunctions.length + service.resourceFunctions.length;
-            const isExpanded = expandedNodes.has(service.uuid);
-            const nodeHeight = calculateEntryNodeHeight(totalFunctions, isExpanded);
-
             // Create entry node with calculated height
             const node = new EntryNodeModel(service, "service");
-            node.height = nodeHeight;
-            node.setPosition(0, startY);
-            nodes.push(node);
 
-            startY += nodeHeight + 16;
+            const isGraphQL = service.type === "graphql:Service";
+            if (isGraphQL) {
+                const { visible, hidden } = partitionGraphQLServiceFunctions(
+                    service,
+                    expandedNodes,
+                    graphQLGroupOpen[service.uuid] ?? { Query: true, Subscription: false, Mutation: false }
+                );
+                // Reusable function to create connections for a list of functions to a given port getter
+                const nodeHeight = calculateGraphQLNodeHeight(
+                    visible,
+                    hidden,
+                    graphQLGroupOpen[service.uuid] || { Query: true, Subscription: false, Mutation: false });
 
-            // Determine visible and hidden functions based on expansion state
-            const serviceFunctions = [];
-            if (service.remoteFunctions?.length > 0) {
-                serviceFunctions.push(...service.remoteFunctions);
-            }
-            if (service.resourceFunctions?.length > 0) {
-                serviceFunctions.push(...service.resourceFunctions);
-            }
+                node.height = nodeHeight;
+                node.setPosition(0, startY);
+                nodes.push(node);
+                startY += nodeHeight + 16;
 
-            const isNodeExpanded = expandedNodes.has(service.uuid);
-            
-            let visibleFunctions, hiddenFunctions;
-            if (serviceFunctions.length <= 3 || isNodeExpanded) {
-                // Show all functions if ≤3 total or if expanded
-                visibleFunctions = serviceFunctions;
-                hiddenFunctions = [];
-            } else {
-                // Show only first 2 functions when collapsed
-                visibleFunctions = serviceFunctions.slice(0, 2);
-                hiddenFunctions = serviceFunctions.slice(2);
-            }
-
-            // Create connections for visible functions
-            visibleFunctions.forEach((func) => {
-                func.connections?.forEach((connectionUuid) => {
-                    const connectionNode = nodes.find((node) => node.getID() === connectionUuid);
-                    if (connectionNode) {
-                        const port = node.getFunctionPort(func);
-                        if (port) {
-                            const link = createPortNodeLink(port, connectionNode);
-                            if (link) {
-                                links.push(link);
-                            }
-                        }
-                    }
+                // For GraphQL, handle visible and hidden per group
+                (Object.keys(visible) as GroupKey[]).forEach((group) => {
+                    createFunctionConnections(
+                        visible[group],
+                        nodes,
+                        node,
+                        (func) => node.getFunctionPort(func),
+                        links,
+                        group
+                    );
                 });
-            });
 
-            // Create connections for hidden functions to the view all resources port (only when collapsed)
-            if (hiddenFunctions.length > 0 && !isNodeExpanded) {
-                const viewAllPort = node.getViewAllResourcesPort();
-                hiddenFunctions.forEach((func) => {
-                    func.connections?.forEach((connectionUuid) => {
-                        const connectionNode = nodes.find((node) => node.getID() === connectionUuid);
-                        if (connectionNode && viewAllPort) {
-                            const link = createPortNodeLink(viewAllPort, connectionNode);
-                            if (link) {
-                                links.push(link);
-                            }
-                        }
-                    });
+                (Object.keys(hidden) as GroupKey[]).forEach((group) => {
+                    createFunctionConnections(
+                        hidden[group],
+                        nodes,
+                        node,
+                        (_func, grp) => node.getGraphQLGroupPort(grp!),
+                        links,
+                        group
+                    );
                 });
+
+            } else {
+
+                // Calculate height based on visible functions and expansion state
+                const totalFunctions = service.remoteFunctions.length + service.resourceFunctions.length;
+                const isExpanded = expandedNodes.has(service.uuid);
+                const nodeHeight = calculateEntryNodeHeight(totalFunctions, isExpanded);
+                node.height = nodeHeight;
+                node.setPosition(0, startY);
+                nodes.push(node);
+
+                startY += nodeHeight + 16;
+
+                const { hidden, visible } = partitionRegularServiceFunctions(service, expandedNodes);
+                createFunctionConnections(
+                    visible,
+                    nodes,
+                    node,
+                    (func) => node.getFunctionPort(func),
+                    links
+                );
+
+                if (hidden.length > 0) {
+                    createFunctionConnections(
+                        hidden,
+                        nodes,
+                        node,
+                        () => node.getViewAllResourcesPort(),
+                        links
+                    );
+                }
             }
         });
-
         // create automation
         const automation = project.automation;
         if (automation) {
@@ -260,6 +312,7 @@ export function Diagram(props: DiagramProps) {
     const context: DiagramContextState = {
         project,
         expandedNodes,
+        graphQLGroupOpen,
         onListenerSelect,
         onServiceSelect,
         onFunctionSelect,
@@ -267,6 +320,7 @@ export function Diagram(props: DiagramProps) {
         onConnectionSelect,
         onDeleteComponent,
         onToggleNodeExpansion: handleToggleNodeExpansion,
+        onToggleGraphQLGroup: handleToggleGraphQLGroup,
     };
 
     return (
@@ -283,3 +337,99 @@ export function Diagram(props: DiagramProps) {
         </>
     );
 }
+
+function getGraphQLGroupLabel(accessor?: string, name?: string): GroupKey | null {
+    if (accessor === "get") return "Query";
+    if (accessor === "subscribe") return "Subscription";
+    if (!accessor && name) return "Mutation";
+    return null;
+}
+
+function partitionRegularServiceFunctions(
+    service: CDService,
+    expandedNodes: Set<string>
+): { visible: Array<CDFunction | CDResourceFunction>; hidden: Array<CDFunction | CDResourceFunction> } {
+    const serviceFunctions: Array<CDFunction | CDResourceFunction> = [];
+    if (service.remoteFunctions?.length) serviceFunctions.push(...service.remoteFunctions);
+    if (service.resourceFunctions?.length) serviceFunctions.push(...service.resourceFunctions);
+
+    const isExpanded = expandedNodes.has(service.uuid);
+    if (serviceFunctions.length <= SHOW_ALL_THRESHOLD || isExpanded) {
+        return { visible: serviceFunctions, hidden: [] };
+    }
+    return { visible: serviceFunctions.slice(0, PREVIEW_COUNT), hidden: serviceFunctions.slice(PREVIEW_COUNT) };
+}
+
+function partitionGraphQLServiceFunctions(
+    service: CDService,
+    expandedNodes: Set<string>,
+    groupOpen?: { Query: boolean; Subscription: boolean; Mutation: boolean; }
+): { visible: GQLFuncListType; hidden: GQLFuncListType } {
+    const serviceFunctions: Array<CDFunction | CDResourceFunction> = [];
+    if (service.remoteFunctions?.length) serviceFunctions.push(...service.remoteFunctions);
+    if (service.resourceFunctions?.length) serviceFunctions.push(...service.resourceFunctions);
+
+
+
+    const grouped = serviceFunctions.reduce((acc, fn) => {
+        const accessor = (fn as CDResourceFunction).accessor;
+        const name = (fn as CDFunction).name;
+        const group = getGraphQLGroupLabel(accessor, name);
+        if (!group) return acc;
+        (acc[group] ||= []).push(fn);
+        return acc;
+    }, {} as GQLFuncListType);
+
+    const visible: GQLFuncListType = {
+        Query: [],
+        Subscription: [],
+        Mutation: [],
+    };
+    const hidden: GQLFuncListType = {
+        Query: [],
+        Subscription: [],
+        Mutation: [],
+    };
+
+    (Object.keys(grouped) as GroupKey[]).forEach((group) => {
+        const items = grouped[group];
+        const isOpen = groupOpen ? !!groupOpen[group] : true; // default open if not provided
+        if (!isOpen) {
+            hidden[group].push(...items);
+            return;
+        }
+        const groupExpanded = expandedNodes.has(service.uuid + group);
+        if (items.length <= SHOW_ALL_THRESHOLD || groupExpanded) {
+            visible[group].push(...items);
+        } else {
+            visible[group].push(...items.slice(0, PREVIEW_COUNT));
+            hidden[group].push(...items.slice(PREVIEW_COUNT));
+        }
+    });
+
+    return { visible, hidden };
+}
+
+function createFunctionConnections(
+    funcs: Array<CDFunction | CDResourceFunction>,
+    nodes: NodeModel[],
+    node: EntryNodeModel,
+    portGetter: (func: CDFunction | CDResourceFunction, group?: GroupKey) => any,
+    links: NodeLinkModel[],
+    group?: GroupKey
+) {
+    funcs.forEach((func) => {
+        func.connections?.forEach((connectionUuid) => {
+            const connectionNode = nodes.find((n) => n.getID() === connectionUuid);
+            if (connectionNode) {
+                const port = portGetter(func, group);
+                if (port) {
+                    const link = createPortNodeLink(port, connectionNode);
+                    if (link) {
+                        links.push(link);
+                    }
+                }
+            }
+        });
+    });
+}
diff --git a/workspaces/ballerina/component-diagram/src/components/DiagramContext.tsx b/workspaces/ballerina/component-diagram/src/components/DiagramContext.tsx
index 7e5e406df10..f72ec54f757 100644
--- a/workspaces/ballerina/component-diagram/src/components/DiagramContext.tsx
+++ b/workspaces/ballerina/component-diagram/src/components/DiagramContext.tsx
@@ -24,6 +24,7 @@ import { CDFunction, CDResourceFunction } from "@wso2/ballerina-core";
 export interface DiagramContextState {
     project: CDModel;
     expandedNodes: Set<string>; // Track which nodes are expanded by their UUID
+    graphQLGroupOpen?: Record<string, { Query: boolean; Subscription: boolean; Mutation: boolean }>;
     onListenerSelect: (listener: CDListener) => void;
     onServiceSelect: (service: CDService) => void;
     onFunctionSelect: (func: CDFunction | CDResourceFunction) => void;
@@ -31,11 +32,13 @@ export interface DiagramContextState {
     onConnectionSelect: (connection: CDConnection) => void;
     onDeleteComponent: (component: CDListener | CDService | CDAutomation | CDConnection) => void;
     onToggleNodeExpansion: (nodeId: string) => void; // Toggle expansion state of a node
+    onToggleGraphQLGroup?: (serviceUuid: string, group: "Query" | "Subscription" | "Mutation") => void;
 }
 
 export const DiagramContext = React.createContext<DiagramContextState>({
     project: { connections: [], listeners: [], services: [] },
     expandedNodes: new Set(),
+    graphQLGroupOpen: {},
     onListenerSelect: () => {},
     onServiceSelect: () => {},
     onFunctionSelect: () => {},
@@ -43,6 +46,7 @@ export const DiagramContext = React.createContext<DiagramContextState>({
     onConnectionSelect: () => {},
     onDeleteComponent: () => {},
     onToggleNodeExpansion: () => {},
+    onToggleGraphQLGroup: () => {},
 });
 
 export const useDiagramContext = () => React.useContext(DiagramContext);
diff --git a/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/EntryNodeModel.ts b/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/EntryNodeModel.ts
index 12da632af98..c72d520e1ae 100644
--- a/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/EntryNodeModel.ts
+++ b/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/EntryNodeModel.ts
@@ -17,13 +17,22 @@
  */
 
 import { NodeModel } from "@projectstorm/react-diagrams";
+import { DiagramEngine } from "@projectstorm/react-diagrams-core";
 import { NodePortModel } from "../../NodePort";
 import { NODE_LOCKED, NodeTypes } from "../../../resources/constants";
 import { EntryPoint, EntryPointType } from "../../../utils/types";
 import { CDFunction, CDResourceFunction, CDService } from "@wso2/ballerina-core";
 import { getEntryNodeFunctionPortName } from "../../../utils/diagram";
 
+export interface BaseNodeWidgetProps {
+    model: EntryNodeModel;
+    engine: DiagramEngine;
+}
+
 export const VIEW_ALL_RESOURCES_PORT_NAME = "view-all-resources";
+export const GQL_GROUP_QUERY_PORT_NAME = "graphql-group-Query";
+export const GQL_GROUP_MUTATION_PORT_NAME = "graphql-group-Mutation";
+export const GQL_GROUP_SUBSCRIPTION_PORT_NAME = "graphql-group-Subscription";
 
 export class EntryNodeModel extends NodeModel {
     readonly node: EntryPoint;
@@ -43,21 +52,39 @@ export class EntryNodeModel extends NodeModel {
         this.outPorts = [];
         this.addInPort("in");
         this.addOutPort("out");
-        
+
         const serviceFunctions = [
             ...(node as CDService).remoteFunctions ?? [],
             ...(node as CDService).resourceFunctions ?? []
         ];
-        
+
         // Add function ports
         serviceFunctions.forEach((func) => {
             this.addOutPort(getEntryNodeFunctionPortName(func));
         });
-        
+
         // Add view all resources port if there are more than 3 functions
         if (serviceFunctions.length > 3) {
             this.addOutPort(VIEW_ALL_RESOURCES_PORT_NAME);
         }
+
+        // For GraphQL services, add per-group header ports so links can attach when a group is collapsed
+        const svc = node as CDService;
+        if (svc?.type === "graphql:Service") {
+            let hasQuery = false;
+            let hasSubscription = false;
+            let hasMutation = false;
+            serviceFunctions.forEach((fn) => {
+                const accessor = (fn as CDResourceFunction).accessor;
+                const name = (fn as CDFunction).name;
+                if (accessor === "get") hasQuery = true;
+                else if (accessor === "subscribe") hasSubscription = true;
+                else if (!accessor && name) hasMutation = true;
+            });
+            if (hasQuery) this.addOutPort(GQL_GROUP_QUERY_PORT_NAME);
+            if (hasMutation) this.addOutPort(GQL_GROUP_MUTATION_PORT_NAME);
+            if (hasSubscription) this.addOutPort(GQL_GROUP_SUBSCRIPTION_PORT_NAME);
+        }
     }
 
     addPort<T extends NodePortModel>(port: T): T {
@@ -100,6 +127,15 @@ export class EntryNodeModel extends NodeModel {
         return this.outPorts.find((port) => port.getOptions().name === VIEW_ALL_RESOURCES_PORT_NAME);
     }
 
+    getGraphQLGroupPort(group: "Query" | "Mutation" | "Subscription"): NodePortModel | undefined {
+        const name = group === "Query"
+            ? GQL_GROUP_QUERY_PORT_NAME
+            : group === "Mutation"
+                ? GQL_GROUP_MUTATION_PORT_NAME
+                : GQL_GROUP_SUBSCRIPTION_PORT_NAME;
+        return this.outPorts.find((port) => port.getOptions().name === name);
+    }
+
     getHeight(): number {
         return this.height;
     }
diff --git a/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/EntryNodeWidget.tsx b/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/EntryNodeWidget.tsx
index aa0c0e21e91..221cac1986e 100644
--- a/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/EntryNodeWidget.tsx
+++ b/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/EntryNodeWidget.tsx
@@ -16,189 +16,13 @@
  * under the License.
  */
 
-import React, { useState } from "react";
-import styled from "@emotion/styled";
-import { DiagramEngine, PortWidget } from "@projectstorm/react-diagrams-core";
-import { EntryNodeModel, VIEW_ALL_RESOURCES_PORT_NAME } from "./EntryNodeModel";
-import { NODE_BORDER_WIDTH, ENTRY_NODE_WIDTH, ENTRY_NODE_HEIGHT } from "../../../resources/constants";
-import { Button, Item, Menu, MenuItem, Popover, ImageWithFallback, ThemeColors, Icon } from "@wso2/ui-toolkit";
-import { useDiagramContext } from "../../DiagramContext";
-import { HttpIcon, TaskIcon } from "../../../resources";
-import { MoreVertIcon } from "../../../resources/icons/nodes/MoreVertIcon";
-import { CDAutomation, CDFunction, CDService, CDResourceFunction } from "@wso2/ballerina-core";
-import { getEntryNodeFunctionPortName } from "../../../utils/diagram";
-type NodeStyleProp = {
-    hovered: boolean;
-    inactive?: boolean;
-};
-const Node = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    color: ${ThemeColors.ON_SURFACE};
-`;
-
-const Header = styled.div<NodeStyleProp>`
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    gap: 6px;
-    width: 100%;
-    cursor: pointer;
-`;
-
-const TopPortWidget = styled(PortWidget)`
-    margin-top: -3px;
-`;
-
-const BottomPortWidget = styled(PortWidget)`
-    margin-bottom: -2px;
-`;
-
-const FunctionPortWidget = styled(PortWidget)`
-`;
-
-const StyledText = styled.div`
-    font-size: 14px;
-`;
-
-const IconWrapper = styled.div`
-    padding: 4px;
-    max-width: 32px;
-    svg {
-        fill: ${ThemeColors.ON_SURFACE};
-    }
-    > div:first-child {
-        width: 24px;
-        height: 24px;
-        font-size: 24px;
-    }
-`;
-
-const Title = styled(StyledText) <NodeStyleProp>`
-    max-width: ${ENTRY_NODE_WIDTH - 80}px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-family: "GilmerMedium";
-    color: ${(props: NodeStyleProp) => (props.hovered ? ThemeColors.HIGHLIGHT : ThemeColors.ON_SURFACE)};
-    opacity: ${(props: NodeStyleProp) => (props.inactive && !props.hovered ? 0.7 : 1)};
-`;
-
-const Accessor = styled(StyledText)`
-    text-transform: uppercase;
-    font-family: "GilmerBold";
-`;
-
-const ResourceAccessor = styled(StyledText)<{ color?: string }>`
-    text-transform: uppercase;
-    font-family: "GilmerBold";
-    background-color: ${(props) => props.color};
-    color: #FFF;
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    justify-content: center;
-    min-width: 60px;
-    text-align: center;
-    align-items: center;
-    font-weight: bold;
-`;
-
-const Description = styled(StyledText)`
-    font-size: 12px;
-    max-width: ${ENTRY_NODE_WIDTH - 80}px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-family: monospace;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    color: ${ThemeColors.ON_SURFACE};
-    opacity: 0.7;
-`;
-
-const Box = styled.div<NodeStyleProp>`
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-
-    border: ${NODE_BORDER_WIDTH}px solid
-        ${(props: NodeStyleProp) => (props.hovered ? ThemeColors.HIGHLIGHT : ThemeColors.OUTLINE_VARIANT)};
-    border-radius: 8px;
-    background-color: ${ThemeColors.SURFACE_DIM};
-
-    padding: 0 8px 8px 8px;
-`;
-
-const ServiceBox = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 10px;
-    width: ${ENTRY_NODE_WIDTH}px;
-    height: ${ENTRY_NODE_HEIGHT}px;
-    cursor: pointer;
-`;
-
-const FunctionBoxWrapper = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    color: ${ThemeColors.ON_SURFACE};
-`;
-
-const StyledServiceBox = styled(ServiceBox) <NodeStyleProp>`
-    height: 40px;
-    padding: 0 12px;
-
-    border: ${NODE_BORDER_WIDTH}px solid
-        ${(props: NodeStyleProp) => (props.hovered ? ThemeColors.HIGHLIGHT : ThemeColors.OUTLINE_VARIANT)};
-    border-radius: 8px;
-    background-color: ${ThemeColors.SURFACE_DIM};
-`;
-
-const MenuButton = styled(Button)`
-    border-radius: 5px;
-`;
-
-const ViewAllButton = styled(FunctionBoxWrapper)`
-    color: ${ThemeColors.PRIMARY};
-    height: 40px;
-    width: 100%;
-    cursor: pointer;
-    font-family: "GilmerMedium";
-    font-size: 14px;
-    &:hover {
-        border: 1px solid ${ThemeColors.HIGHLIGHT};
-        border-radius: 8px;
-    }
-`;
-
-const ViewAllButtonWrapper = styled.div`
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-`;
-
-const colors = {
-    "GET": '#3d7eff',
-    "PUT": '#fca130',
-    "POST": '#49cc90',
-    "DELETE": '#f93e3e',
-    "PATCH": '#986ee2',
-    "OPTIONS": '#0d5aa7',
-    "HEAD": '#9012fe'
-}
+import React from "react";
+import { DiagramEngine } from "@projectstorm/react-diagrams-core";
+import { EntryNodeModel } from "./EntryNodeModel";
+import { CDService } from "@wso2/ballerina-core";
+import { AIServiceWidget } from "./components/AIServiceWidget";
+import { GraphQLServiceWidget } from "./components/GraphQLServiceWidget";
+import { GeneralServiceWidget } from "./components/GeneralWidget";
 
 interface EntryNodeWidgetProps {
     model: EntryNodeModel;
@@ -209,304 +33,17 @@ export interface NodeWidgetProps extends Omit<EntryNodeWidgetProps, "children">
 
 export function EntryNodeWidget(props: EntryNodeWidgetProps) {
     const { model, engine } = props;
-    const [isHovered, setIsHovered] = React.useState(false);
-    const {
-        onServiceSelect,
-        onAutomationSelect,
-        onDeleteComponent,
-        onFunctionSelect,
-        expandedNodes,
-        onToggleNodeExpansion
-    } = useDiagramContext();
-    const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | SVGSVGElement>(null);
-    const isMenuOpen = Boolean(menuAnchorEl);
-
-    const handleOnClick = () => {
-        if (model.type === "service") {
-            if ((model.node as CDService).type === "ai:Service") {
-                onFunctionSelect(serviceFunctions[0]);
-            } else {
-                onServiceSelect(model.node as CDService);
-            }
-        } else {
-            onAutomationSelect(model.node as CDAutomation);
-        }
-    };
-
-    const handleToggleExpansion = (event: React.MouseEvent) => {
-        event.stopPropagation();
-        onToggleNodeExpansion(model.node.uuid);
-    };
-
-    const getNodeIcon = () => {
-        switch (model.type) {
-            case "automation":
-                return <TaskIcon />;
-            case "service":
-                const serviceType = (model.node as CDService)?.type;
-                const customIcon = getCustomEntryNodeIcon(serviceType);
-                if (customIcon) {
-                    return customIcon;
-                }
-                return <ImageWithFallback imageUrl={(model.node as CDService).icon} fallbackEl={<HttpIcon />} />;
-            default:
-                return <HttpIcon />;
-        }
-    };
-
-    const getNodeTitle = () => {
-        if (model.node.displayName) {
-            return model.node.displayName;
-        }
-        if ((model.node as CDService).absolutePath) {
-            return (model.node as CDService).absolutePath;
-        }
-        return "";
-    };
-
-    const getNodeDescription = () => {
-        if (model.type === "automation") {
-            return "Automation";
-        }
-        // Service
-        if ((model.node as CDService).type) {
-            return (model.node as CDService).type.replace(":Listener", ":Service");
-        }
-        return "Service";
-    };
-
-    const handleOnMenuClick = (event: React.MouseEvent<HTMLElement | SVGSVGElement>) => {
-        event.stopPropagation();
-        setMenuAnchorEl(event.currentTarget);
-    };
-
-    const handleOnMenuClose = () => {
-        setMenuAnchorEl(null);
-    };
-
-    const menuItems: Item[] = [
-        { id: "edit", label: "Edit", onClick: () => handleOnClick() },
-        { id: "delete", label: "Delete", onClick: () => onDeleteComponent(model.node) },
-    ];
-
-    const serviceFunctions = [];
-    if ((model.node as CDService).remoteFunctions?.length > 0) {
-        serviceFunctions.push(...(model.node as CDService).remoteFunctions);
-    }
-    if ((model.node as CDService).resourceFunctions?.length > 0) {
-        serviceFunctions.push(...(model.node as CDService).resourceFunctions);
-    }
-
-    const isExpanded = expandedNodes.has(model.node.uuid);
-    const hasMoreFunctions = serviceFunctions.length > 3;
-
-    let visibleFunctions;
-    if (serviceFunctions.length <= 3 || isExpanded) {
-        // Show all functions if ≤3 total or if expanded
-        visibleFunctions = serviceFunctions;
-    } else {
-        // Show only first 2 functions when collapsed
-        visibleFunctions = serviceFunctions.slice(0, 2);
-    }
 
+    // Determine which widget to render based on service type
     if ((model.node as CDService)?.type === "ai:Service") {
-        return (
-            <Node>
-                <TopPortWidget port={model.getPort("in")!} engine={engine} />
-                <Box hovered={isHovered}>
-                    <ServiceBox
-                        onMouseEnter={() => setIsHovered(true)}
-                        onMouseLeave={() => setIsHovered(false)}
-                        onClick={() => { onFunctionSelect(serviceFunctions[0]) }}
-                    >
-                        <IconWrapper><Icon name="bi-ai-agent" /></IconWrapper>
-                        <Header hovered={isHovered} onClick={() => { onFunctionSelect(serviceFunctions[0]) }}>
-                            <Title hovered={isHovered}>{getNodeTitle().replace(/^\//, '')}</Title>
-                            <Description>{getNodeDescription()}</Description>
-                        </Header>
-                        <MenuButton appearance="icon" onClick={handleOnMenuClick}>
-                            <MoreVertIcon />
-                        </MenuButton>
-                    </ServiceBox>
-                </Box>
-                <Popover
-                    open={isMenuOpen}
-                    anchorEl={menuAnchorEl}
-                    handleClose={handleOnMenuClose}
-                    sx={{
-                        padding: 0,
-                        borderRadius: 0,
-                    }}
-                >
-                    <Menu>
-                        {menuItems.map((item) => (
-                            <MenuItem key={item.id} item={item} />
-                        ))}
-                    </Menu>
-                </Popover>
-                <BottomPortWidget port={model.getPort("out")!} engine={engine} />
-                <BottomPortWidget port={model.getPort(getEntryNodeFunctionPortName(serviceFunctions[0]))!} engine={engine} />
-            </Node>
-        );
+        return <AIServiceWidget model={model} engine={engine} />;
     }
 
-
-    return (
-        <Node>
-            <TopPortWidget port={model.getPort("in")!} engine={engine} />
-            <Box hovered={isHovered}>
-                <ServiceBox
-                    onMouseEnter={() => setIsHovered(true)}
-                    onMouseLeave={() => setIsHovered(false)}
-                    onClick={handleOnClick}
-                >
-                    <IconWrapper>{getNodeIcon()}</IconWrapper>
-                    <Header hovered={isHovered}>
-                        <Title hovered={isHovered}>{getNodeTitle()}</Title>
-                        <Description>{getNodeDescription()}</Description>
-                    </Header>
-                    <MenuButton appearance="icon" onClick={handleOnMenuClick}>
-                        <MoreVertIcon />
-                    </MenuButton>
-                </ServiceBox>
-                {visibleFunctions.map((serviceFunction) => (
-                    <FunctionBox
-                        key={getEntryNodeFunctionPortName(serviceFunction)}
-                        func={serviceFunction}
-                        model={model}
-                        engine={engine}
-                    />
-                ))}
-                {hasMoreFunctions && !isExpanded && (
-                    <ViewAllButtonWrapper>
-                        <ViewAllButton onClick={handleToggleExpansion}>
-                            Show More Resources
-                        </ViewAllButton>
-                        <PortWidget port={model.getPort(VIEW_ALL_RESOURCES_PORT_NAME)!} engine={engine} />
-                    </ViewAllButtonWrapper>
-                )}
-                {hasMoreFunctions && isExpanded && (
-                    <ViewAllButton onClick={handleToggleExpansion}>
-                        Show Fewer Resources
-                    </ViewAllButton>
-                )}
-            </Box>
-            <Popover
-                open={isMenuOpen}
-                anchorEl={menuAnchorEl}
-                handleClose={handleOnMenuClose}
-                sx={{
-                    padding: 0,
-                    borderRadius: 0,
-                }}
-            >
-                <Menu>
-                    {menuItems.map((item) => (
-                        <MenuItem key={item.id} item={item} />
-                    ))}
-                </Menu>
-            </Popover>
-            <BottomPortWidget port={model.getPort("out")!} engine={engine} />
-        </Node>
-    );
-}
-
-export function getColorByMethod(method: string) {
-    switch (method.toUpperCase()) {
-        case "GET":
-            return colors.GET;
-        case "PUT":
-            return colors.PUT;
-        case "POST":
-            return colors.POST;
-        case "DELETE":
-            return colors.DELETE;
-        case "PATCH":
-            return colors.PATCH;
-        case "OPTIONS":
-            return colors.OPTIONS;
-        case "HEAD":
-            return colors.HEAD;
-        default:
-            return '#876036'; // Default color
+    if ((model.node as CDService)?.type === "graphql:Service") {
+        return <GraphQLServiceWidget model={model} engine={engine} />;
     }
-}
-
-function FunctionBox(props: { func: CDFunction | CDResourceFunction; model: EntryNodeModel; engine: DiagramEngine }) {
-    const { func, model, engine } = props;
-    const [isHovered, setIsHovered] = useState(false);
-    const { onFunctionSelect } = useDiagramContext();
-    const isGraphQL = (model.node as CDService)?.type === "graphql:Service";
-
-    const handleOnClick = () => {
-        onFunctionSelect(func);
-    };
 
-    const getAccessorDisplay = (accessor: string, isGraphQL: boolean): string => {
-        if (!isGraphQL) {
-            return accessor;
-        }
-
-        if (accessor === "get") return "Query";
-        if (accessor === "subscribe") return "Subscription";
-        return accessor;
-    };
-
-    return (
-        <FunctionBoxWrapper>
-            <StyledServiceBox
-                hovered={isHovered}
-                onClick={() => handleOnClick()}
-                onMouseEnter={() => setIsHovered(true)}
-                onMouseLeave={() => setIsHovered(false)}
-            >
-                {(func as CDResourceFunction).accessor && (
-                    <ResourceAccessor color={getColorByMethod((func as CDResourceFunction).accessor)}>
-                        {getAccessorDisplay((func as CDResourceFunction).accessor, isGraphQL)}
-                    </ResourceAccessor>
-                )}
-                {isGraphQL && !(func as CDResourceFunction).accessor && (func as CDFunction).name && (
-                    <Accessor>Mutation</Accessor>
-                )}
-                {(func as CDResourceFunction).path && (
-                    <Title hovered={isHovered}>/{(func as CDResourceFunction).path}</Title>
-                )}
-                {(func as CDFunction).name && <Title hovered={isHovered}>{(func as CDFunction).name}</Title>}
-            </StyledServiceBox>
-            <FunctionPortWidget port={model.getPort(getEntryNodeFunctionPortName(func))!} engine={engine} />
-        </FunctionBoxWrapper>
-    );
+    // Default to general service widget for all other cases
+    return <GeneralServiceWidget model={model} engine={engine} />;
 }
 
-export function getCustomEntryNodeIcon(type: string) {
-    let typePart = type;
-    if (type && type.includes(":")) {
-        const typeParts = type.split(":");
-        typePart = typeParts.at(0);
-    }
-
-    switch (typePart) {
-        case "tcp":
-            return <Icon name="bi-tcp" />;
-        case "kafka":
-            return <Icon name="bi-kafka" />;
-        case "rabbitmq":
-            return <Icon name="bi-rabbitmq" sx={{ color: "#f60" }} />;
-        case "nats":
-            return <Icon name="bi-nats" />;
-        case "mqtt":
-            return <Icon name="bi-mqtt" sx={{ color: "#606" }} />;
-        case "grpc":
-            return <Icon name="bi-grpc" />;
-        case "graphql":
-            return <Icon name="bi-graphql" sx={{ color: "#e535ab" }} />;
-        case "java.jms":
-            return <Icon name="bi-java" />;
-        case "trigger.github":
-            return <Icon name="bi-github" />;
-        case "http":
-            return <Icon name="bi-globe" />;
-        default:
-            return null;
-    }
-}
diff --git a/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/AIServiceWidget.tsx b/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/AIServiceWidget.tsx
new file mode 100644
index 00000000000..3f66696b24f
--- /dev/null
+++ b/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/AIServiceWidget.tsx
@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState } from "react";
+import { CDService } from "@wso2/ballerina-core";
+import { Button, Item, Menu, MenuItem, Popover, Icon } from "@wso2/ui-toolkit";
+import { useDiagramContext } from "../../../DiagramContext";
+import { MoreVertIcon } from "../../../../resources/icons/nodes/MoreVertIcon";
+import { getEntryNodeFunctionPortName } from "../../../../utils/diagram";
+import { BaseNodeWidgetProps, EntryNodeModel } from "../EntryNodeModel";
+import {
+    Node,
+    Box,
+    ServiceBox,
+    Header,
+    Title,
+    Description,
+    IconWrapper,
+    MenuButton,
+    TopPortWidget,
+    BottomPortWidget
+} from "./styles";
+
+// Utility functions specific to AI Service
+const getNodeTitle = (model: EntryNodeModel) => {
+    const serviceName = (model.node as any)?.serviceName ||
+        (model.node as any)?.name ||
+        "AI Service";
+    return serviceName.replace(/^\//, '');
+};
+
+const getNodeDescription = (model: EntryNodeModel) => {
+    return (model.node as any)?.description || "";
+};
+
+export function AIServiceWidget({ model, engine }: BaseNodeWidgetProps) {
+    const [isHovered, setIsHovered] = useState(false);
+    const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | SVGSVGElement>(null);
+
+    const { onFunctionSelect, onDeleteComponent } = useDiagramContext();
+    const isMenuOpen = Boolean(menuAnchorEl);
+
+    const serviceFunctions = [];
+    if ((model.node as CDService).remoteFunctions?.length > 0) {
+        serviceFunctions.push(...(model.node as CDService).remoteFunctions);
+    }
+    if ((model.node as CDService).resourceFunctions?.length > 0) {
+        serviceFunctions.push(...(model.node as CDService).resourceFunctions);
+    }
+
+    const handleOnClick = () => {
+        if (serviceFunctions.length > 0) {
+            onFunctionSelect(serviceFunctions[0]);
+        }
+    };
+
+    const handleOnMenuClick = (event: React.MouseEvent<HTMLElement | SVGSVGElement>) => {
+        event.stopPropagation();
+        setMenuAnchorEl(event.currentTarget);
+    };
+
+    const handleOnMenuClose = () => {
+        setMenuAnchorEl(null);
+    };
+
+    const menuItems: Item[] = [
+        { id: "edit", label: "Edit", onClick: () => handleOnClick() },
+        { id: "delete", label: "Delete", onClick: () => onDeleteComponent(model.node) },
+    ];
+
+    return (
+        <Node>
+            <TopPortWidget port={model.getPort("in")!} engine={engine} />
+            <Box hovered={isHovered}>
+                <ServiceBox
+                    onMouseEnter={() => setIsHovered(true)}
+                    onMouseLeave={() => setIsHovered(false)}
+                    onClick={handleOnClick}
+                >
+                    <IconWrapper><Icon name="bi-ai-agent" /></IconWrapper>
+                    <Header hovered={isHovered}>
+                        <Title hovered={isHovered}>{getNodeTitle(model)}</Title>
+                        <Description>{getNodeDescription(model)}</Description>
+                    </Header>
+                    <MenuButton appearance="icon" onClick={handleOnMenuClick}>
+                        <MoreVertIcon />
+                    </MenuButton>
+                </ServiceBox>
+            </Box>
+
+            <Popover
+                open={isMenuOpen}
+                anchorEl={menuAnchorEl}
+                handleClose={handleOnMenuClose}
+                sx={{
+                    padding: 0,
+                    borderRadius: 0,
+                }}
+            >
+                <Menu>
+                    {menuItems.map((item) => (
+                        <MenuItem key={item.id} item={item} />
+                    ))}
+                </Menu>
+            </Popover>
+
+            <BottomPortWidget port={model.getPort("out")!} engine={engine} />
+            {serviceFunctions.length > 0 && (
+                <BottomPortWidget
+                    port={model.getPort(getEntryNodeFunctionPortName(serviceFunctions[0]))!}
+                    engine={engine}
+                />
+            )}
+        </Node>
+    );
+}
diff --git a/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/GeneralWidget.tsx b/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/GeneralWidget.tsx
new file mode 100644
index 00000000000..c0685d7a529
--- /dev/null
+++ b/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/GeneralWidget.tsx
@@ -0,0 +1,292 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState } from "react";
+import { PortWidget } from "@projectstorm/react-diagrams-core";
+import { CDAutomation, CDService } from "@wso2/ballerina-core";
+import { Item, Menu, MenuItem, Popover, ImageWithFallback, Icon } from "@wso2/ui-toolkit";
+import { useDiagramContext } from "../../../DiagramContext";
+import { HttpIcon, TaskIcon } from "../../../../resources";
+import { MoreVertIcon } from "../../../../resources/icons/nodes/MoreVertIcon";
+import { getEntryNodeFunctionPortName } from "../../../../utils/diagram";
+import { PREVIEW_COUNT, SHOW_ALL_THRESHOLD } from "../../../Diagram";
+import { VIEW_ALL_RESOURCES_PORT_NAME, BaseNodeWidgetProps, EntryNodeModel } from "../EntryNodeModel";
+import {
+    Node,
+    Box,
+    ServiceBox,
+    Header,
+    Title,
+    Description,
+    IconWrapper,
+    MenuButton,
+    TopPortWidget,
+    BottomPortWidget,
+    ViewAllButton,
+    ViewAllButtonWrapper,
+    FunctionBoxWrapper,
+    StyledServiceBox,
+    ResourceAccessor,
+    colors
+} from "./styles";
+
+const getNodeTitle = (model: EntryNodeModel) => {
+    if (model.node.displayName) {
+        return model.node.displayName;
+    }
+    if ((model.node as CDService).absolutePath) {
+        return (model.node as CDService).absolutePath;
+    }
+    return "";
+};
+
+const getNodeDescription = (model: EntryNodeModel) => {
+    if (model.type === "automation") {
+        return "Automation";
+    }
+    // Service
+    if ((model.node as CDService).type) {
+        return (model.node as CDService).type.replace(":Listener", ":Service");
+    }
+    return "Service";
+};
+
+function getColorByMethod(method: string) {
+    switch (method.toUpperCase()) {
+        case "GET":
+            return colors.GET;
+        case "PUT":
+            return colors.PUT;
+        case "POST":
+            return colors.POST;
+        case "DELETE":
+            return colors.DELETE;
+        case "PATCH":
+            return colors.PATCH;
+        case "OPTIONS":
+            return colors.OPTIONS;
+        case "HEAD":
+            return colors.HEAD;
+        default:
+            return '#876036'; // Default color
+    }
+}
+
+function getCustomEntryNodeIcon(type: string) {
+    let typePart = type;
+    if (type && type.includes(":")) {
+        const typeParts = type.split(":");
+        typePart = typeParts.at(0);
+    }
+
+    switch (typePart) {
+        case "tcp":
+            return <Icon name="bi-tcp" />;
+        case "kafka":
+            return <Icon name="bi-kafka" />;
+        case "rabbitmq":
+            return <Icon name="bi-rabbitmq" sx={{ color: "#f60" }} />;
+        case "nats":
+            return <Icon name="bi-nats" />;
+        case "mqtt":
+            return <Icon name="bi-mqtt" sx={{ color: "#606" }} />;
+        case "grpc":
+            return <Icon name="bi-grpc" />;
+        case "graphql":
+            return <Icon name="bi-graphql" sx={{ color: "#e535ab" }} />;
+        case "java.jms":
+            return <Icon name="bi-java" />;
+        case "trigger.github":
+            return <Icon name="bi-github" />;
+        case "http":
+            return <Icon name="bi-globe" />;
+        default:
+            return null;
+    }
+}
+
+function FunctionBox(props: { func: any; model: EntryNodeModel; engine: any }) {
+    const { func, model, engine } = props;
+    const [isHovered, setIsHovered] = useState(false);
+    const { onFunctionSelect } = useDiagramContext();
+
+    const handleOnClick = () => {
+        onFunctionSelect(func);
+    };
+
+    return (
+        <FunctionBoxWrapper>
+            <StyledServiceBox
+                hovered={isHovered}
+                onClick={() => handleOnClick()}
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+            >
+                {func.accessor && (
+                    <ResourceAccessor color={getColorByMethod(func.accessor)}>
+                        {func.accessor}
+                    </ResourceAccessor>
+                )}
+                {func.path && (
+                    <Title hovered={isHovered}>
+                        {`/${func.path}`}
+                    </Title>
+                )}
+                {func.name && <Title hovered={isHovered}>{func.name}</Title>}
+            </StyledServiceBox>
+            <PortWidget port={model.getPort(getEntryNodeFunctionPortName(func))!} engine={engine} />
+        </FunctionBoxWrapper>
+    );
+}
+
+export function GeneralServiceWidget({ model, engine }: BaseNodeWidgetProps) {
+    const [isHovered, setIsHovered] = useState(false);
+    const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | SVGSVGElement>(null);
+
+    const {
+        onServiceSelect,
+        onAutomationSelect,
+        onDeleteComponent,
+        expandedNodes,
+        onToggleNodeExpansion
+    } = useDiagramContext();
+
+    const isMenuOpen = Boolean(menuAnchorEl);
+
+    const handleOnClick = () => {
+        if (model.type === "service") {
+            onServiceSelect(model.node as CDService);
+        } else {
+            onAutomationSelect(model.node as CDAutomation);
+        }
+    };
+
+    const handleToggleExpansion = (event: React.MouseEvent) => {
+        event.stopPropagation();
+        onToggleNodeExpansion(model.node.uuid);
+    };
+
+    const handleOnMenuClick = (event: React.MouseEvent<HTMLElement | SVGSVGElement>) => {
+        event.stopPropagation();
+        setMenuAnchorEl(event.currentTarget);
+    };
+
+    const handleOnMenuClose = () => {
+        setMenuAnchorEl(null);
+    };
+
+    const menuItems: Item[] = [
+        { id: "edit", label: "Edit", onClick: () => handleOnClick() },
+        { id: "delete", label: "Delete", onClick: () => onDeleteComponent(model.node) },
+    ];
+
+    const serviceFunctions = [];
+    if ((model.node as CDService).remoteFunctions?.length > 0) {
+        serviceFunctions.push(...(model.node as CDService).remoteFunctions);
+    }
+    if ((model.node as CDService).resourceFunctions?.length > 0) {
+        serviceFunctions.push(...(model.node as CDService).resourceFunctions);
+    }
+
+    const isExpanded = expandedNodes.has(model.node.uuid);
+    const hasMoreFunctions = serviceFunctions.length > 3;
+
+    let visibleFunctions;
+    if (serviceFunctions.length <= SHOW_ALL_THRESHOLD || isExpanded) {
+        visibleFunctions = serviceFunctions;
+    } else {
+        visibleFunctions = serviceFunctions.slice(0, PREVIEW_COUNT);
+    }
+
+    const nodeIcon = (() => {
+        switch (model.type) {
+            case "automation":
+                return <TaskIcon />;
+            case "service":
+                const serviceType = (model.node as CDService)?.type;
+                const customIcon = getCustomEntryNodeIcon(serviceType);
+                if (customIcon) {
+                    return customIcon;
+                }
+                return <ImageWithFallback imageUrl={(model.node as CDService).icon} fallbackEl={<HttpIcon />} />;
+            default:
+                return <HttpIcon />;
+        }
+    })();
+
+    return (
+        <Node>
+            <TopPortWidget port={model.getPort("in")!} engine={engine} />
+            <Box hovered={isHovered}>
+                <ServiceBox
+                    onMouseEnter={() => setIsHovered(true)}
+                    onMouseLeave={() => setIsHovered(false)}
+                    onClick={handleOnClick}
+                >
+                    <IconWrapper>{nodeIcon}</IconWrapper>
+                    <Header hovered={isHovered}>
+                        <Title hovered={isHovered}>{getNodeTitle(model)}</Title>
+                        <Description>{getNodeDescription(model)}</Description>
+                    </Header>
+                    <MenuButton appearance="icon" onClick={handleOnMenuClick}>
+                        <MoreVertIcon />
+                    </MenuButton>
+                </ServiceBox>
+                {visibleFunctions.map((serviceFunction) => (
+                    <FunctionBox
+                        key={getEntryNodeFunctionPortName(serviceFunction)}
+                        func={serviceFunction}
+                        model={model}
+                        engine={engine}
+                    />
+                ))}
+
+                {hasMoreFunctions && !isExpanded && (
+                    <ViewAllButtonWrapper>
+                        <ViewAllButton onClick={handleToggleExpansion}>
+                            Show More Resources
+                        </ViewAllButton>
+                        <PortWidget port={model.getPort(VIEW_ALL_RESOURCES_PORT_NAME)!} engine={engine} />
+                    </ViewAllButtonWrapper>
+                )}
+
+                {hasMoreFunctions && isExpanded && (
+                    <ViewAllButton onClick={handleToggleExpansion}>
+                        Show Fewer Resources
+                    </ViewAllButton>
+                )}
+            </Box>
+            <Popover
+                open={isMenuOpen}
+                anchorEl={menuAnchorEl}
+                handleClose={handleOnMenuClose}
+                sx={{
+                    padding: 0,
+                    borderRadius: 0,
+                }}
+            >
+                <Menu>
+                    {menuItems.map((item) => (
+                        <MenuItem key={item.id} item={item} />
+                    ))}
+                </Menu>
+            </Popover>
+            <BottomPortWidget port={model.getPort("out")!} engine={engine} />
+        </Node>
+    );
+}
diff --git a/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/GraphQLServiceWidget.tsx b/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/GraphQLServiceWidget.tsx
new file mode 100644
index 00000000000..0fce8cf1197
--- /dev/null
+++ b/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/GraphQLServiceWidget.tsx
@@ -0,0 +1,283 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useMemo, useState } from "react";
+import { CDFunction, CDResourceFunction, CDService } from "@wso2/ballerina-core";
+import { Item, Menu, MenuItem, Popover, Icon } from "@wso2/ui-toolkit";
+import { EntryNodeModel } from "../EntryNodeModel";
+import { DiagramEngine, PortWidget } from "@projectstorm/react-diagrams-core";
+import { useDiagramContext } from "../../../DiagramContext";
+import { GQLFuncListType, PREVIEW_COUNT, SHOW_ALL_THRESHOLD } from "../../../Diagram";
+import { CollapseButton, FunctionBoxWrapper, GroupContainer, GroupHeader, ViewAllButton, ViewAllButtonWrapper, Node, Box, ServiceBox, Header, Title, Description, IconWrapper, MenuButton, TopPortWidget, BottomPortWidget, StyledServiceBox, colors } from "./styles";
+import { Codicon } from "@wso2/ui-toolkit/lib/components/Codicon/Codicon";
+import { getEntryNodeFunctionPortName } from "../../../../utils/diagram";
+import { BaseNodeWidgetProps } from "../EntryNodeModel";
+import { MoreVertIcon } from "../../../../resources/icons/nodes/MoreVertIcon";
+
+type GroupKey = "Query" | "Subscription" | "Mutation";
+
+const getNodeTitle = (model: EntryNodeModel) => {
+    return (model.node as any)?.serviceName || 
+           (model.node as any)?.name || 
+           "GraphQL Service";
+};
+
+const getNodeDescription = (model: EntryNodeModel) => {
+    return (model.node as any)?.description || "";
+};
+
+function FunctionBox(props: { func: any; model: EntryNodeModel; engine: any; }) {
+    const { func, model, engine } = props;
+    const [isHovered, setIsHovered] = useState(false);
+    const { onFunctionSelect } = useDiagramContext();
+
+    const handleOnClick = () => {
+        onFunctionSelect(func);
+    };
+
+    return (
+        <FunctionBoxWrapper>
+            <StyledServiceBox
+                hovered={isHovered}
+                onClick={() => handleOnClick()}
+                onMouseEnter={() => setIsHovered(true)}
+                onMouseLeave={() => setIsHovered(false)}
+            >
+                {func.path && (
+                    <Title hovered={isHovered}>
+                        {func.path}
+                    </Title>
+                )}
+                {func.name && <Title hovered={isHovered}>{func.name}</Title>}
+            </StyledServiceBox>
+            <PortWidget port={model.getPort(getEntryNodeFunctionPortName(func))!} engine={engine} />
+        </FunctionBoxWrapper>
+    );
+}
+
+function GraphQLFunctionList(props: {
+    group: "Query" | "Subscription" | "Mutation";
+    functions: Array<CDFunction | CDResourceFunction>;
+    model: EntryNodeModel;
+    engine: DiagramEngine;
+    collapsed: boolean;
+    onToggleCollapse: (group: GroupKey) => void;
+}) {
+    const { group, functions, model, engine, collapsed, onToggleCollapse } = props;
+    const { expandedNodes, onToggleNodeExpansion } = useDiagramContext();
+
+    const accent = (() => {
+        switch (group) {
+            case "Query": return colors.GET;
+            case "Subscription": return colors.PUT;
+            case "Mutation": return colors.POST;
+        }
+    })();
+
+    const isExpanded = expandedNodes.has(model.node.uuid + group);
+    const canToggleItems = functions.length > SHOW_ALL_THRESHOLD;
+
+    let visibleFunctions;
+    if (functions.length <= SHOW_ALL_THRESHOLD || isExpanded) {
+        visibleFunctions = functions;
+    } else {
+        visibleFunctions = functions.slice(0, PREVIEW_COUNT);
+    }
+
+    const handleToggleExpansion = () => {
+        onToggleNodeExpansion(model.node.uuid + group);
+    };
+
+    return (
+        <FunctionBoxWrapper>
+            <GroupContainer accent={accent}>
+                <GroupHeader>
+                    <CollapseButton
+                        appearance="icon"
+                        aria-label={collapsed ? `Expand ${group}` : `Collapse ${group}`}
+                        onClick={(e: React.MouseEvent) => {
+                            e.stopPropagation();
+                            onToggleCollapse(group);
+                        }}
+                    >
+                        {collapsed ? (
+                            <Codicon name="chevron-right" />
+                        ) : (
+                            <Codicon name="chevron-down" />
+                        )}
+                    </CollapseButton>
+                    {group}
+                </GroupHeader>
+                {!collapsed && (
+                    <>
+                        {visibleFunctions.map((fn) => (
+                            <FunctionBox
+                                key={getEntryNodeFunctionPortName(fn)}
+                                func={fn}
+                                model={model}
+                                engine={engine}
+                            />
+                        ))}
+                        {canToggleItems && !isExpanded && (
+                            <ViewAllButtonWrapper>
+                                <ViewAllButton onClick={handleToggleExpansion}>
+                                    Show More
+                                </ViewAllButton>
+                                <PortWidget
+                                    port={model.getGraphQLGroupPort(group)}
+                                    engine={engine}
+                                />
+                            </ViewAllButtonWrapper>
+                        )}
+                        {canToggleItems && isExpanded && (
+                            <ViewAllButton onClick={handleToggleExpansion}>
+                                Show Fewer
+                            </ViewAllButton>
+                        )}
+                    </>
+                )}
+            </GroupContainer>
+            {collapsed &&
+                <PortWidget
+                    port={ model.getGraphQLGroupPort(group)}
+                    engine={engine}
+                >
+                </PortWidget>}
+        </FunctionBoxWrapper>
+    );
+}
+
+export function GraphQLServiceWidget({ model, engine }: BaseNodeWidgetProps) {
+    const [isHovered, setIsHovered] = useState(false);
+    const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | SVGSVGElement>(null);
+    
+    const {
+        graphQLGroupOpen,
+        onServiceSelect,
+        onDeleteComponent,
+        onToggleGraphQLGroup
+    } = useDiagramContext();
+
+    const isMenuOpen = Boolean(menuAnchorEl);
+
+    const handleOnClick = () => {
+        onServiceSelect(model.node as CDService);
+    };
+
+    const handleOnMenuClick = (event: React.MouseEvent<HTMLElement | SVGSVGElement>) => {
+        event.stopPropagation();
+        setMenuAnchorEl(event.currentTarget);
+    };
+
+    const handleOnMenuClose = () => {
+        setMenuAnchorEl(null);
+    };
+
+    const menuItems: Item[] = [
+        { id: "edit", label: "Edit", onClick: () => handleOnClick() },
+        { id: "delete", label: "Delete", onClick: () => onDeleteComponent(model.node) },
+    ];
+
+    const serviceFunctions = useMemo(() => {
+        const functions: Array<CDFunction | CDResourceFunction> = [];
+        const service = model.node as CDService;
+
+        if (service.remoteFunctions?.length) {
+            functions.push(...service.remoteFunctions);
+        }
+        if (service.resourceFunctions?.length) {
+            functions.push(...service.resourceFunctions);
+        }
+
+        return functions;
+    }, [model.node]);
+
+    const getGroupLabel = (accessor?: string, name?: string): GroupKey | null => {
+        if (accessor === "get") return "Query";
+        if (accessor === "subscribe") return "Subscription";
+        if (!accessor && name) return "Mutation";
+        return null;
+    };
+
+    const grouped: GQLFuncListType = useMemo(() => {
+        return serviceFunctions.reduce((acc, fn) => {
+            const accessor = (fn as CDResourceFunction).accessor;
+            const name = (fn as CDFunction).name;
+            const group = getGroupLabel(accessor, name);
+            if (!group) return acc;
+            (acc[group] ||= []).push(fn);
+            return acc;
+        }, {} as GQLFuncListType);
+    }, [serviceFunctions]);
+
+    const orderedGroups: GroupKey[] = ["Query", "Mutation", "Subscription"];
+
+    return (
+        <Node>
+            <TopPortWidget port={model.getPort("in")!} engine={engine} />
+            <Box hovered={isHovered}>
+                <ServiceBox
+                    onMouseEnter={() => setIsHovered(true)}
+                    onMouseLeave={() => setIsHovered(false)}
+                    onClick={handleOnClick}
+                >
+                    <IconWrapper><Icon name="bi-graphql" sx={{ color: "#e535ab" }} /></IconWrapper>
+                    <Header hovered={isHovered}>
+                        <Title hovered={isHovered}>{getNodeTitle(model)}</Title>
+                        <Description>{getNodeDescription(model)}</Description>
+                    </Header>
+                    <MenuButton appearance="icon" onClick={handleOnMenuClick}>
+                        <MoreVertIcon />
+                    </MenuButton>
+                </ServiceBox>
+                {orderedGroups
+                    .filter((g) => grouped[g]?.length)
+                    .map((group) => (
+                        <React.Fragment key={`gql-accordion-${group}`}>
+                            <GraphQLFunctionList
+                                group={group}
+                                functions={grouped[group]}
+                                model={model}
+                                engine={engine}
+                                collapsed={graphQLGroupOpen[model.node.uuid]?.[group] === false}
+                                onToggleCollapse={(group) => {
+                                    onToggleGraphQLGroup(model.node.uuid, group);
+                                }}
+                            />
+                        </React.Fragment>
+                ))}
+            </Box>
+            <Popover
+                open={isMenuOpen}
+                anchorEl={menuAnchorEl}
+                handleClose={handleOnMenuClose}
+                sx={{
+                    padding: 0,
+                    borderRadius: 0,
+                }}
+            >
+                <Menu>
+                    {menuItems.map((item) => (
+                        <MenuItem key={item.id} item={item} />
+                    ))}
+                </Menu>
+            </Popover>
+            <BottomPortWidget port={model.getPort("out")!} engine={engine} />
+        </Node>
+    );
+}
diff --git a/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/styles.ts b/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/styles.ts
new file mode 100644
index 00000000000..695ae4ff4b1
--- /dev/null
+++ b/workspaces/ballerina/component-diagram/src/components/nodes/EntryNode/components/styles.ts
@@ -0,0 +1,232 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import styled from "@emotion/styled";
+import { PortWidget } from "@projectstorm/react-diagrams-core";
+import { Button, ThemeColors } from "@wso2/ui-toolkit";
+import { NODE_BORDER_WIDTH, ENTRY_NODE_WIDTH, ENTRY_NODE_HEIGHT } from "../../../../resources/constants";
+
+type NodeStyleProp = {
+    hovered: boolean;
+    inactive?: boolean;
+};
+
+export const Node = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    color: ${ThemeColors.ON_SURFACE};
+`;
+
+export const Header = styled.div<NodeStyleProp>`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 6px;
+    width: 100%;
+    cursor: pointer;
+`;
+
+export const TopPortWidget = styled(PortWidget)`
+    margin-top: -3px;
+`;
+
+export const BottomPortWidget = styled(PortWidget)`
+    margin-bottom: -2px;
+`;
+
+export const StyledText = styled.div`
+    font-size: 14px;
+`;
+
+export const IconWrapper = styled.div`
+    padding: 4px;
+    max-width: 32px;
+    svg {
+        fill: ${ThemeColors.ON_SURFACE};
+    }
+    > div:first-child {
+        width: 24px;
+        height: 24px;
+        font-size: 24px;
+    }
+`;
+
+export const Title = styled(StyledText) <NodeStyleProp>`
+    max-width: ${ENTRY_NODE_WIDTH - 80}px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: "GilmerMedium";
+    color: ${(props: NodeStyleProp) => (props.hovered ? ThemeColors.HIGHLIGHT : ThemeColors.ON_SURFACE)};
+    opacity: ${(props: NodeStyleProp) => (props.inactive && !props.hovered ? 0.7 : 1)};
+`;
+
+export const ResourceAccessor = styled(StyledText) <{ color?: string }>`
+    text-transform: uppercase;
+    font-family: "GilmerBold";
+    background-color: ${(props) => props.color};
+    color: #FFF;
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    justify-content: center;
+    min-width: 60px;
+    text-align: center;
+    align-items: center;
+    font-weight: bold;
+`;
+
+export const Description = styled(StyledText)`
+    font-size: 12px;
+    max-width: ${ENTRY_NODE_WIDTH - 80}px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-family: monospace;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    color: ${ThemeColors.ON_SURFACE};
+    opacity: 0.7;
+`;
+
+export const Box = styled.div<NodeStyleProp>`
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    border: ${NODE_BORDER_WIDTH}px solid
+        ${(props: NodeStyleProp) => (props.hovered ? ThemeColors.HIGHLIGHT : ThemeColors.OUTLINE_VARIANT)};
+    border-radius: 8px;
+    background-color: ${ThemeColors.SURFACE_DIM};
+    padding: 0 8px 8px 8px;
+`;
+
+export const ServiceBox = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+    width: ${ENTRY_NODE_WIDTH}px;
+    height: ${ENTRY_NODE_HEIGHT}px;
+    cursor: pointer;
+`;
+
+export const FunctionBoxWrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    color: ${ThemeColors.ON_SURFACE};
+`;
+
+export const StyledServiceBox = styled(ServiceBox) <NodeStyleProp>`
+    height: 40px;
+    padding: 0 12px;
+    border: ${NODE_BORDER_WIDTH}px solid
+        ${(props: NodeStyleProp) => (props.hovered ? ThemeColors.HIGHLIGHT : ThemeColors.OUTLINE_VARIANT)};
+    border-radius: 8px;
+    background-color: ${ThemeColors.SURFACE_DIM};
+`;
+
+export const GroupContainer = styled.div<{ accent: string }>`
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: ${ENTRY_NODE_WIDTH}px;
+    position: relative;
+    border: ${NODE_BORDER_WIDTH}px solid ${ThemeColors.OUTLINE_VARIANT};
+    border-radius: 8px;
+    background-color: ${ThemeColors.SURFACE_DIM};
+    padding: 6px;
+`;
+
+export const GroupHeader = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    height: 40px;
+    padding: 0 6px 0 8px;
+    cursor: pointer;
+`;
+
+export const MenuButton = styled(Button)`
+    border-radius: 5px;
+`;
+
+export const ViewAllButton = styled(FunctionBoxWrapper)`
+    color: ${ThemeColors.PRIMARY};
+    height: 40px;
+    width: 100%;
+    cursor: pointer;
+    font-family: "GilmerMedium";
+    font-size: 14px;
+    &:hover {
+        border: 1px solid ${ThemeColors.HIGHLIGHT};
+        border-radius: 8px;
+    }
+`;
+
+export const ViewAllButtonWrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+`;
+
+export const CollapseButton = styled(Button)`
+    border-radius: 5px;
+    padding: 2px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    color: ${ThemeColors.ON_SURFACE};
+    & > div:first-of-type {
+        width: 16px;
+        height: 16px;
+        font-size: 16px;
+    }
+    svg {
+        fill: ${ThemeColors.ON_SURFACE} !important;
+    }
+    &:hover {
+        color: ${ThemeColors.HIGHLIGHT};
+    }
+    &:hover svg {
+        fill: ${ThemeColors.HIGHLIGHT} !important;
+    }
+`;
+
+export const colors = {
+    "GET": '#3d7eff',
+    "PUT": '#fca130',
+    "POST": '#49cc90',
+    "DELETE": '#f93e3e',
+    "PATCH": '#986ee2',
+    "OPTIONS": '#0d5aa7',
+    "HEAD": '#9012fe'
+}
diff --git a/workspaces/ballerina/component-diagram/src/utils/diagram.ts b/workspaces/ballerina/component-diagram/src/utils/diagram.ts
index 0ecffa6d0f1..0bde6be9e87 100644
--- a/workspaces/ballerina/component-diagram/src/utils/diagram.ts
+++ b/workspaces/ballerina/component-diagram/src/utils/diagram.ts
@@ -28,6 +28,7 @@ import { LISTENER_NODE_WIDTH, NodeTypes, NODE_GAP_X, ENTRY_NODE_WIDTH } from "..
 import { ListenerNodeModel } from "../components/nodes/ListenerNode";
 import { ConnectionNodeModel } from "../components/nodes/ConnectionNode";
 import { CDConnection, CDResourceFunction, CDFunction, CDService } from "@wso2/ballerina-core";
+import { GQLFuncListType, GQLState, PREVIEW_COUNT } from "../components/Diagram";
 
 export function generateEngine(): DiagramEngine {
     const engine = createEngine({
@@ -232,6 +233,49 @@ export const calculateEntryNodeHeight = (numFunctions: number, isExpanded: boole
     return BASE_HEIGHT + 2 * FUNCTION_HEIGHT + PADDING + VIEW_ALL_BUTTON_HEIGHT;
 };
 
+export const calculateGraphQLNodeHeight = (
+    visible: GQLFuncListType,
+    hidden: GQLFuncListType,
+    graphQLGroupOpen: GQLState
+) => {
+    const PADDING = 8;
+    const BASE_HEIGHT = 64 + 2 * PADDING;
+    const FUNCTION_HEIGHT = 40 + PADDING;
+    const SHOW_BUTTON_HEIGHT = 40;
+    const HEADER_HEIGHT = 45 + 2 * PADDING;
+
+    let totalHeight = BASE_HEIGHT;
+
+    Object.keys(visible).forEach((group) => {
+        const visibleCount = visible[group].length;
+        const hiddenCount = hidden[group].length;
+        const hasShowML = visibleCount > PREVIEW_COUNT || hiddenCount > 0;
+        const isCollapsed = !graphQLGroupOpen[group];
+        const hasSection = visibleCount > 0 || hiddenCount > 0;
+        const hasFunction = visibleCount > 0;
+
+        let sectionHeight = 0;
+
+        if (hasSection) {
+            if (isCollapsed) {
+                sectionHeight = HEADER_HEIGHT;
+            } else {
+                if (hasFunction) {
+                    sectionHeight += HEADER_HEIGHT;
+                    sectionHeight += visibleCount * FUNCTION_HEIGHT;
+                }
+                if (hasShowML) {
+                    sectionHeight += SHOW_BUTTON_HEIGHT;
+                }
+            }
+        }
+
+        totalHeight += sectionHeight;
+    });
+
+    return totalHeight;
+};
+
 export const getEntryNodeFunctionPortName = (func: CDFunction | CDResourceFunction) => {
     if ((func as CDResourceFunction).accessor) {
         return (func as CDResourceFunction).accessor + "-" + (func as CDResourceFunction).path;
diff --git a/workspaces/ballerina/data-mapper-view/package.json b/workspaces/ballerina/data-mapper-view/package.json
deleted file mode 100644
index e605b29e12f..00000000000
--- a/workspaces/ballerina/data-mapper-view/package.json
+++ /dev/null
@@ -1,126 +0,0 @@
-{
-  "name": "@wso2/data-mapper-view",
-  "version": "1.0.0",
-  "description": "Ballerina Data Mapper",
-  "files": [
-    "lib"
-  ],
-  "main": "lib/index.js",
-  "types": "lib/index.d.ts",
-  "scripts": {
-    "watch": "tsc --pretty --watch",
-    "build": "tsc --pretty && pnpm run copy:assets",
-    "copy:assets": "copyfiles -u 1 \"src/**/*.scss\" \"src/**/*.svg\"  \"src/**/*.css\" \"src/**/*.png\" \"src/**/*.txt\" \"src/**/*.json\" \"src/assets/fonts/Gilmer/*.*\" lib/",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
-  },
-  "dependencies": {
-    "@wso2/ballerina-core": "workspace:*",
-    "@wso2/ballerina-rpc-client": "workspace:*",
-    "@wso2/ballerina-statement-editor": "workspace:*",
-    "@wso2/syntax-tree": "workspace:*",
-    "@wso2/ui-toolkit": "workspace:*",
-    "@wso2/record-creator": "workspace:*",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-intl": "^7.1.11",
-    "react-lottie": "^1.2.10",
-    "vscode-languageserver-types": "^3.17.5",
-    "@emotion/styled": "^11.14.0",
-    "lodash.debounce": "^4.0.8",
-    "@vscode/webview-ui-toolkit": "^1.4.0",
-    "lodash": "^4.17.21",
-    "@emotion/react": "^11.14.0",
-    "classnames": "^2.5.1",
-    "@projectstorm/react-canvas-core": "^6.7.4",
-    "@projectstorm/geometry": "^6.7.4",
-    "@projectstorm/react-diagrams": "^6.7.4",
-    "@projectstorm/react-diagrams-core": "^6.7.4",
-    "tsyringe": "^4.10.0",
-    "resize-observer-polyfill": "^1.5.1",
-    "zustand": "^4.5.7",
-    "reflect-metadata": "^0.1.14",
-    "blueimp-md5": "^2.19.0",
-    "@tanstack/react-query": "5.77.1",
-    "@tanstack/query-core": "^5.77.1",
-    "@emotion/css": "~11.13.5"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.27.1",
-    "@babel/preset-env": "^7.27.2",
-    "@rollup/plugin-commonjs": "^28.0.3",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@storybook/addon-actions": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/builder-webpack5": "^8.6.14",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^8.6.14",
-    "@types/classnames": "^2.3.4",
-    "@types/handlebars": "^4.1.0",
-    "@types/lodash.debounce": "^4.0.9",
-    "@types/react-lottie": "^1.2.10",
-    "@types/uuid": "^10.0.0",
-    "@types/webpack": "^5.28.5",
-    "@types/lodash": "4.17.16",
-    "babel-loader": "^10.0.0",
-    "babel-plugin-transform-typescript-metadata": "^0.3.2",
-    "copy-webpack-plugin": "^13.0.0",
-    "css-loader": "^7.1.2",
-    "dagre": "^0.8.5",
-    "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^9.1.0",
-    "monaco-editor-webpack-plugin": "^7.1.0",
-    "mousetrap": "^1.6.5",
-    "pathfinding": "^0.4.18",
-    "paths-js": "^0.4.11",
-    "react-scripts-ts": "^3.1.0",
-    "react-test-renderer": "^19.1.0",
-    "resize-observer-polyfill": "^1.5.1",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.41.0",
-    "rollup-plugin-import-css": "^3.5.8",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-scss": "^4.0.1",
-    "rollup-plugin-svg": "^2.0.0",
-    "rollup-plugin-typescript2": "^0.36.0",
-    "sass": "^1.89.0",
-    "sass-loader": "^16.0.5",
-    "storybook": "^8.6.14",
-    "style-loader": "^4.0.0",
-    "stylelint": "^16.19.1",
-    "stylelint-config-standard": "^38.0.0",
-    "svg-url-loader": "^8.0.0",
-    "ts-loader": "^9.5.2",
-    "tslib": "^2.8.1",
-    "tslint": "^6.1.3",
-    "tslint-react": "^5.0.0",
-    "tslint-react-hooks": "^2.2.2",
-    "vscode-uri": "^3.1.0",
-    "webpack": "^5.99.8",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.1",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.0",
-    "@typescript-eslint/eslint-plugin": "~8.32.1",
-    "@typescript-eslint/parser": "~8.32.1",
-    "@vitejs/plugin-react": "^4.4.1",
-    "copyfiles": "^2.4.1",
-    "eslint": "^9.27.0",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
-    "typescript": "5.8.3",
-    "vite": "^6.3.5",
-    "@types/blueimp-md5": "^2.18.2"
-  },
-  "author": "wso2",
-  "license": "UNLICENSED",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/wso2/ballerina-plugin-vscode.git"
-  },
-  "publishConfig": {
-    "registry": "https://npm.pkg.github.com/"
-  }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/PatternBg.svg b/workspaces/ballerina/data-mapper-view/src/assets/PatternBg.svg
deleted file mode 100644
index ed4241a18ab..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/assets/PatternBg.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Color/Fill/Pattern</title>
-    <defs>
-        <pattern id="pattern-1" width="8" height="8" x="-8" y="-8" patternUnits="userSpaceOnUse">
-            <use xlink:href="#image-2"></use>
-        </pattern>
-        <image id="image-2" width="8" height="8" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAABGdBTUEAALGN5fIAKQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAACKADAAQAAAABAAAACAAAAAC2TFloAAAAIElEQVQYGWPYuHnP/+8/fuPEjCBJBjyACY8cWGpIKAAA9ZEidQKyF7EAAAAASUVORK5CYII="></image>
-    </defs>
-    <g id="Color/Fill/Pattern" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <rect id="Color" fill="url(#pattern-1)" x="0" y="0" width="40" height="40"></rect>
-    </g>
-</svg>
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-bold.eot b/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-bold.eot
deleted file mode 100644
index 4066e7d5e35..00000000000
Binary files a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-bold.eot and /dev/null differ
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-bold.ttf b/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-bold.ttf
deleted file mode 100644
index 2dc04cf81a3..00000000000
Binary files a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-bold.ttf and /dev/null differ
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-bold.woff b/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-bold.woff
deleted file mode 100644
index 9ac3a190e8e..00000000000
Binary files a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-bold.woff and /dev/null differ
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-bold.woff2 b/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-bold.woff2
deleted file mode 100644
index 22793f9a198..00000000000
Binary files a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-bold.woff2 and /dev/null differ
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-light.eot b/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-light.eot
deleted file mode 100644
index ef2a6743bcf..00000000000
Binary files a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-light.eot and /dev/null differ
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-light.ttf b/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-light.ttf
deleted file mode 100644
index 65f5a08a342..00000000000
Binary files a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-light.ttf and /dev/null differ
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-light.woff b/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-light.woff
deleted file mode 100644
index c04be8c6e39..00000000000
Binary files a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-light.woff and /dev/null differ
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-light.woff2 b/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-light.woff2
deleted file mode 100644
index 5dab907f5de..00000000000
Binary files a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-light.woff2 and /dev/null differ
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-medium.eot b/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-medium.eot
deleted file mode 100644
index bb048187163..00000000000
Binary files a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-medium.eot and /dev/null differ
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-medium.ttf b/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-medium.ttf
deleted file mode 100644
index 615fdee7116..00000000000
Binary files a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-medium.ttf and /dev/null differ
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-medium.woff b/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-medium.woff
deleted file mode 100644
index e248e37d6a6..00000000000
Binary files a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-medium.woff and /dev/null differ
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-medium.woff2 b/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-medium.woff2
deleted file mode 100644
index 3ebe650a755..00000000000
Binary files a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-medium.woff2 and /dev/null differ
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-regular.eot b/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-regular.eot
deleted file mode 100644
index 6d528a51578..00000000000
Binary files a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-regular.eot and /dev/null differ
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-regular.ttf b/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-regular.ttf
deleted file mode 100644
index 679bf3e954b..00000000000
Binary files a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-regular.ttf and /dev/null differ
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-regular.woff b/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-regular.woff
deleted file mode 100644
index c66fc561409..00000000000
Binary files a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-regular.woff and /dev/null differ
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-regular.woff2 b/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-regular.woff2
deleted file mode 100644
index e92be881e24..00000000000
Binary files a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer-regular.woff2 and /dev/null differ
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer.css b/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer.css
deleted file mode 100644
index c40968d1822..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/assets/fonts/Gilmer/gilmer.css
+++ /dev/null
@@ -1,111 +0,0 @@
-/*
-Font: 		Gilmer
-Style: 		Light
-URL: 		https://www.youworkforthem.com/font/T9758/gilmer
-Foundry: 	Piotr Lapa
-Foundry: 	https://www.youworkforthem.com/designer/1166/piotr-lapa
-Copyright:	Copyright © 2018 by Piotr _apa. All rights reserved.
-Version: 	17
-Created:	August 17, 2018
-License: 	https://www.youworkforthem.com/font-license
-License: 	The WebFont(s) listed in this document must follow the YouWorkForThem
-			WebFont license rules. All other parties are strictly restricted
-			from using the WebFonts(s) listed without a purchased license.
-			All details above must always remain unaltered and visible in your CSS.
-*/
-
-@font-face {
-    font-family: 'GilmerLight';
-    src: url('gilmer-light.eot');
-    src:
-        url('gilmer-light.eot?#iefix') format('embedded-opentype'),
-        url('gilmer-light.woff2') format('woff2'),
-        url('gilmer-light.woff') format('woff'),
-        url('gilmer-light.ttf') format('truetype');
-    font-weight: 300;
-    font-style: normal;
-}
-
-/*
-Font: 		Gilmer
-Style: 		Regular
-URL: 		https://www.youworkforthem.com/font/T9758/gilmer
-Foundry: 	Piotr Lapa
-Foundry: 	https://www.youworkforthem.com/designer/1166/piotr-lapa
-Copyright:	Copyright © 2018 by Piotr _apa. All rights reserved.
-Version: 	17
-Created:	August 17, 2018
-License: 	https://www.youworkforthem.com/font-license
-License: 	The WebFont(s) listed in this document must follow the YouWorkForThem
-			WebFont license rules. All other parties are strictly restricted
-			from using the WebFonts(s) listed without a purchased license.
-			All details above must always remain unaltered and visible in your CSS.
-*/
-
-@font-face {
-    font-family: 'GilmerRegular';
-    src: url('gilmer-regular.eot');
-    src:
-        url('gilmer-regular.eot?#iefix') format('embedded-opentype'),
-        url('gilmer-regular.woff2') format('woff2'),
-        url('gilmer-regular.woff') format('woff'),
-        url('gilmer-regular.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
-
-/*
-Font: 		Gilmer
-Style: 		Medium
-URL: 		https://www.youworkforthem.com/font/T9758/gilmer
-Foundry: 	Piotr Lapa
-Foundry: 	https://www.youworkforthem.com/designer/1166/piotr-lapa
-Copyright:	Copyright © 2018 by Piotr _apa. All rights reserved.
-Version: 	17
-Created:	August 17, 2018
-License: 	https://www.youworkforthem.com/font-license
-License: 	The WebFont(s) listed in this document must follow the YouWorkForThem
-			WebFont license rules. All other parties are strictly restricted
-			from using the WebFonts(s) listed without a purchased license.
-			All details above must always remain unaltered and visible in your CSS.
-*/
-
-@font-face {
-    font-family: 'GilmerMedium';
-    src: url('gilmer-medium.eot');
-    src:
-        url('gilmer-medium.eot?#iefix') format('embedded-opentype'),
-        url('gilmer-medium.woff2') format('woff2'),
-        url('gilmer-medium.woff') format('woff'),
-        url('gilmer-medium.ttf') format('truetype');
-    font-weight: 500;
-    font-style: normal;
-}
-
-/*
-Font: 		Gilmer
-Style: 		Bold
-URL: 		https://www.youworkforthem.com/font/T9758/gilmer
-Foundry: 	Piotr Lapa
-Foundry: 	https://www.youworkforthem.com/designer/1166/piotr-lapa
-Copyright:	Copyright © 2018 by Piotr _apa. All rights reserved.
-Version: 	17
-Created:	August 17, 2018
-License: 	https://www.youworkforthem.com/font-license
-License: 	The WebFont(s) listed in this document must follow the YouWorkForThem
-			WebFont license rules. All other parties are strictly restricted
-			from using the WebFonts(s) listed without a purchased license.
-			All details above must always remain unaltered and visible in your CSS.
-*/
-
-@font-face {
-    font-family: 'GilmerBold';
-    src: url('gilmer-bold.eot');
-    src:
-        url('gilmer-bold.eot?#iefix') format('embedded-opentype'),
-        url('gilmer-bold.woff2') format('woff2'),
-        url('gilmer-bold.woff') format('woff'),
-        url('gilmer-bold.ttf') format('truetype');
-    font-weight: bold;
-    font-style: normal;
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/icons/CollapseIcon.tsx b/workspaces/ballerina/data-mapper-view/src/assets/icons/CollapseIcon.tsx
deleted file mode 100644
index 0289921addf..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/assets/icons/CollapseIcon.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from "react";
-
-export default function CollapseIcon() {
-    return (
-        <svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M20 20L15 15M15 15V19M15 15H19" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-            <path d="M4 20L9 15M9 15V19M9 15H5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-            <path d="M20 4L15 9M15 9V5M15 9H19" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-            <path d="M4 4L9 9M9 9V5M9 9H5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
-        </svg>
-
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/icons/EditIcon.tsx b/workspaces/ballerina/data-mapper-view/src/assets/icons/EditIcon.tsx
deleted file mode 100644
index d15daae8070..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/assets/icons/EditIcon.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from "react";
-
-export default function RoundEditIcon() {
-    return (
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fillRule="evenodd" clipRule="evenodd" d="M8.57143 0.571429C8.57143 0.255837 8.31559 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 7.68441 15.7442 7.42857 15.4286 7.42857C15.113 7.42857 14.8571 7.68441 14.8571 8C14.8571 11.7871 11.7871 14.8571 8 14.8571C4.2129 14.8571 1.14286 11.7871 1.14286 8C1.14286 4.2129 4.2129 1.14286 8 1.14286C8.31559 1.14286 8.57143 0.88702 8.57143 0.571429ZM11.7645 1.55603L7.33957 6.36762L6.62291 9.90938L10.0375 9.06944L14.4727 4.28047C15.195 3.50051 15.1683 2.28812 14.4122 1.54077C13.6769 0.813827 12.4914 0.820659 11.7645 1.55603ZM13.7888 2.34072C14.0813 2.71052 14.0673 3.24647 13.739 3.60098L9.4947 8.18199L7.7747 8.65999L8.2447 6.85999L12.482 2.25254C12.8143 1.91645 13.3666 1.91326 13.7092 2.25194L13.7888 2.34072Z" fill="#40404B"/>
-        </svg>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/icons/Error.tsx b/workspaces/ballerina/data-mapper-view/src/assets/icons/Error.tsx
deleted file mode 100644
index cb863d9e02a..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/assets/icons/Error.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-
-export default function ErrorIcon() {
-    return (
-        <svg width="16px" height="15px" viewBox="0 0 16 15" >
-        <g id="Test" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-            <g id="tooltips" transform="translate(-1293.000000, -559.000000)">
-                <g id="Group-2-Copy" transform="translate(1062.000000, 468.000000)">
-                    <g id="Icon/Alerts/Warning" transform="translate(231.000000, 91.000000)">
-                        <path d="M15.7099089,11.0833333 L9.79757659,1.02777778 C9.41078849,0.388888889 8.74772318,0 8.00177471,0 C7.25582624,0 6.59276093,0.388888889 6.20597283,1.02777778 L0.293640489,11.0833333 C-0.0931476076,11.7222222 -0.0931476076,12.5277778 0.266012768,13.1666667 C0.652800865,13.8333333 1.31586617,14.2222222 2.06181465,14.2222222 L13.914107,14.2222222 C14.6600555,14.2222222 15.3507486,13.8333333 15.7099089,13.1666667 C16.096697,12.5277778 16.096697,11.7222222 15.7099089,11.0833333 Z" id="Path" fill="#FD6B6B" fill-rule="nonzero"/>
-                        <path d="M8,10.6666667 C8.49091978,10.6666667 8.88888889,11.0646358 8.88888889,11.5555556 C8.88888889,12.0464753 8.49091978,12.4444444 8,12.4444444 C7.50908022,12.4444444 7.11111111,12.0464753 7.11111111,11.5555556 C7.11111111,11.0646358 7.50908022,10.6666667 8,10.6666667 Z M8,3.55555556 C8.49091978,3.55555556 8.88888889,3.95352467 8.88888889,4.44444444 L8.88888889,8 C8.88888889,8.49091978 8.49091978,8.88888889 8,8.88888889 C7.50908022,8.88888889 7.11111111,8.49091978 7.11111111,8 L7.11111111,4.44444444 C7.11111111,3.95352467 7.50908022,3.55555556 8,3.55555556 Z" id="Combined-Shape" fill="#FFFFFF"/>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </svg>
-    )}
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/icons/ExpandIcon.tsx b/workspaces/ballerina/data-mapper-view/src/assets/icons/ExpandIcon.tsx
deleted file mode 100644
index 18c4f9f47dc..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/assets/icons/ExpandIcon.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from "react";
-
-export default function ExpandIcon() {
-    return (
-        <svg viewBox="0 0 242.133 242.133" xmlns="http://www.w3.org/2000/svg" fill={"'#5567d5"}>
-            <path
-                id="XMLID_15_"
-                d="M227.133,83.033c8.283,0,15-6.716,15-15V15c0-8.284-6.717-15-15-15H174.1c-8.284,0-15,6.716-15,15
-                    s6.716,15,15,15h16.82l-69.854,69.854L51.213,30h16.82c8.284,0,15-6.716,15-15s-6.716-15-15-15H15C6.717,0,0,6.716,0,15v53.033
-                    c0,8.284,6.717,15,15,15c8.285,0,15-6.716,15-15v-16.82l69.854,69.854L30,190.92V174.1c0-8.284-6.715-15-15-15
-                    c-8.283,0-15,6.716-15,15v53.033c0,8.284,6.717,15,15,15h53.033c8.284,0,15-6.716,15-15c0-8.284-6.716-15-15-15h-16.82
-                    l69.854-69.854l69.854,69.854H174.1c-8.284,0-15,6.716-15,15c0,8.284,6.716,15,15,15h53.033c8.283,0,15-6.716,15-15V174.1
-                    c0-8.284-6.717-15-15-15c-8.285,0-15,6.716-15,15v16.82l-69.854-69.854l69.854-69.854v16.82
-                    C212.133,76.317,218.848,83.033,227.133,83.033z"
-            />
-        </svg>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/icons/FilterIcon.tsx b/workspaces/ballerina/data-mapper-view/src/assets/icons/FilterIcon.tsx
deleted file mode 100644
index de820242346..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/assets/icons/FilterIcon.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from "react";
-
-export interface FilterIconProps {
-    height?: string,
-    width?: string,
-    color?: string,
-    filled?: boolean
-}
-
-export default function FilterIcon(props: FilterIconProps) {
-    const { height, width, color } = props;
-    const iconHeight = height ? height : "16px";
-    const iconWidth = width ? width : "16px";
-    const iconColor = color ? color : "#000000";
-    return (
-        <svg width={iconWidth} height={iconHeight} viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
-            <g id="UI-kit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                <g id="Icons" transform="translate(-1082.000000, -542.000000)" fill={iconColor} fill-rule="nonzero">
-                    <g id="Icon/Add-Copy-90" transform="translate(1082.000000, 542.000000)">
-                        {props.filled && (<path d="M14.504357,0.5 L1.49572037,0.5 C1.28820549,0.5 1.08587642,0.564179196 0.917014611,0.683566658 L0.819895281,0.761667387 C0.456120195,1.09359335 0.390507353,1.64948929 0.685532307,2.05831867 L6.00775695,8.06149452 L6.00875259,14.5142788 C6.00875259,14.6672737 6.0447402,14.8181674 6.11386542,14.9550102 C6.35977855,15.4418286 6.95783448,15.6391508 7.44966073,15.3957416 L9.16575784,14.053677 L9.28828878,13.9857522 C9.7227678,13.7176272 9.99132475,13.2447455 9.99132475,12.7314829 L9.9903291,8.06346553 L15.314545,2.05831867 C15.4351606,1.89117623 15.5,1.69090729 15.5,1.48550533 C15.5,0.941225767 15.0542354,0.5 14.504357,0.5 Z" id="Combined-Shape"/>)}
-                        {!props.filled && (<path d="M14.504357,0.5 L1.49572037,0.5 C1.28820549,0.5 1.08587642,0.564179196 0.917014611,0.683566658 L0.819895281,0.761667387 C0.456120195,1.09359335 0.390507353,1.64948929 0.685532307,2.05831867 L6.00775695,8.06149452 L6.00875259,14.5142788 C6.00875259,14.6672737 6.0447402,14.8181674 6.11386542,14.9550102 C6.35977855,15.4418286 6.95783448,15.6391508 7.44966073,15.3957416 L9.16575784,14.053677 L9.28828878,13.9857522 C9.7227678,13.7176272 9.99132475,13.2447455 9.99132475,12.7314829 L9.9903291,8.06346553 L15.314545,2.05831867 C15.4351606,1.89117623 15.5,1.69090729 15.5,1.48550533 C15.5,0.941225767 15.0542354,0.5 14.504357,0.5 Z M1.49572037,1.48550533 L14.504357,1.48550533 L8.99568171,7.74787466 L8.99568171,12.7314829 C8.99568171,12.9181238 8.88914672,13.0887459 8.72049274,13.1722143 L7.00439563,14.5142788 L7.00439563,7.74787466 L1.49572037,1.48550533 Z" id="Combined-Shape"/>)}
-                    </g>
-                </g>
-            </g>
-        </svg>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/icons/FuctionIcon.tsx b/workspaces/ballerina/data-mapper-view/src/assets/icons/FuctionIcon.tsx
deleted file mode 100644
index c543be9c5ba..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/assets/icons/FuctionIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from 'react';
-
-export default function FunctionIcon() {
-    return (
-        <svg width="16px" height="14px" viewBox="0 0 16 14" version="1.1" fill="currentColor">
-            <g id="Home" stroke="none" strokeWidth="1" fillRule="evenodd">
-                <g id="choose-service" transform="translate(-136.000000, -306.000000)" className="svg-sub-menu-plus-option-icon" fillRule="nonzero">
-                    <g id="Icon/Fx-Copy" transform="translate(136.000000, 306.000000)">
-                        <path d="M1.60633037,14 C2.87240356,14 3.85888559,13.2071197 4.56577646,11.6213592 C5.06693043,10.4937073 5.70260468,8.12261776 6.47279921,4.50809061 L7.93669634,4.50809061 L8.08704253,3.86623517 L6.58358061,3.86623517 L6.884273,2.77130529 C7.09000989,2.01618123 7.31289153,1.44228695 7.5529179,1.04962244 C7.79294428,0.656957929 8.06066601,0.460625674 8.35608309,0.460625674 C8.46158919,0.460625674 8.53544346,0.485796476 8.5776459,0.53613808 C8.61457303,0.591513844 8.6330366,0.636821287 8.6330366,0.67206041 C8.6330366,0.697231212 8.58951533,0.781553398 8.5024728,0.925026969 C8.41543027,1.06850054 8.371909,1.20819849 8.371909,1.34412082 C8.371909,1.54045307 8.45103858,1.71161453 8.60929773,1.85760518 C8.76755687,2.00359583 8.9548302,2.07659115 9.17111771,2.07659115 C9.39268051,2.07659115 9.58391032,2.00233729 9.74480712,1.85382956 C9.90570392,1.70532183 9.98615232,1.50773103 9.98615232,1.26105717 C9.98615232,0.843221863 9.829212,0.528586839 9.51533136,0.317152104 C9.20145071,0.105717368 8.7992087,0 8.30860534,0 C7.69666996,0 7.1005605,0.239122618 6.52027695,0.717367853 C6.0402242,1.12010068 5.64589515,1.64994606 5.33728981,2.30690399 C5.02868447,2.96386192 4.82690406,3.48363898 4.73194857,3.86623517 L3.54500495,3.86623517 L3.39465875,4.50809061 L4.58160237,4.50809061 L3.91691395,7.18878101 C3.25222552,10.169004 2.81437521,11.9661992 2.60336301,12.5803668 C2.39235081,13.1995685 2.08374547,13.5091694 1.67754698,13.5091694 C1.59841741,13.5091694 1.53115727,13.4940669 1.47576657,13.4638619 C1.42037587,13.433657 1.39268051,13.3908666 1.39268051,13.3354908 C1.39268051,13.2901834 1.43620178,13.2058612 1.52324431,13.0825243 C1.61028684,12.9591873 1.65380811,12.8345919 1.65380811,12.7087379 C1.65380811,12.4721323 1.57072206,12.2846099 1.40454995,12.1461704 C1.23837784,12.007731 1.04978569,11.9385113 0.838773492,11.9385113 C0.622485987,11.9385113 0.42861853,12.0140237 0.257171118,12.1650485 C0.0857237059,12.3160734 0,12.5149227 0,12.7615965 C0,13.1039195 0.143752061,13.3959008 0.431256182,13.6375405 C0.718760303,13.8791802 1.1104517,14 1.60633037,14 Z M8.67260138,11.0323625 C9.15265414,11.0323625 9.57467854,10.8410644 9.93867458,10.4584682 C10.1813386,10.201726 10.5637982,9.64545128 11.0860534,8.78964401 L11.1968348,8.60841424 C11.2232113,8.68896081 11.2825585,8.90165408 11.3748764,9.24649407 C11.4671942,9.59133405 11.5397296,9.83171521 11.5924827,9.96763754 C11.6927135,10.2294139 11.8087702,10.4358145 11.9406528,10.5868393 C12.1727662,10.8687522 12.4681833,11.0097087 12.8269041,11.0097087 C13.2542038,11.0097087 13.6907352,10.8083423 14.1364985,10.4056095 C14.5822618,10.0028767 14.944939,9.57749011 15.2245302,9.12944984 L14.892186,8.91046386 C14.6547972,9.20747932 14.4780745,9.41136282 14.3620178,9.52211435 C14.1510056,9.72851492 13.9716452,9.83171521 13.8239367,9.83171521 C13.6604022,9.83171521 13.5364326,9.76627113 13.4520277,9.63538296 C13.3676228,9.50449479 13.2832179,9.29306005 13.1988131,9.00107875 C13.1355094,8.78964401 13.077481,8.55933118 13.024728,8.31014024 C12.9719749,8.0609493 12.9060336,7.74253866 12.8269041,7.35490831 L12.6765579,6.59978425 C13.1091329,5.98058252 13.4137817,5.57533261 13.5905045,5.38403452 C13.7672272,5.19273643 13.9531817,5.09708738 14.148368,5.09708738 C14.2485987,5.09708738 14.3949885,5.15246314 14.5875371,5.26321467 C14.7800857,5.3739662 14.952852,5.42934196 15.1058358,5.42934196 C15.3537751,5.42934196 15.5647873,5.34376124 15.7388724,5.17259978 C15.9129575,5.00143833 16,4.81265732 16,4.60625674 C16,4.40489033 15.9577976,4.23372887 15.8733927,4.09277238 C15.7151335,3.82092772 15.4276294,3.68500539 15.0108803,3.68500539 C14.6627102,3.68500539 14.3053083,3.84232291 13.9386746,4.15695793 C13.5720409,4.47159295 13.0880317,5.01905789 12.4866469,5.79935275 L12.3996044,5.29341963 C12.3468513,4.97123337 12.2690406,4.66666667 12.1661721,4.37971953 C12.0633037,4.09277238 11.9327399,3.84861561 11.7744807,3.64724919 C11.5845697,3.68248831 11.2060666,3.74289824 10.6389713,3.82847896 C10.071876,3.91405969 9.55093966,3.98453794 9.07616222,4.0399137 L9.07616222,4.45523193 C9.17639301,4.44516361 9.2766238,4.43635383 9.3768546,4.42880259 C9.47708539,4.42125135 9.54038905,4.41747573 9.56676558,4.41747573 C9.81998022,4.41747573 10.0019782,4.46026609 10.1127596,4.54584682 C10.3079459,4.69183747 10.4503792,4.99640417 10.5400593,5.45954693 L10.6666667,6.10140237 C10.7299703,6.42358864 10.7919552,6.73822366 10.8526212,7.04530744 C10.9132872,7.35239123 10.9699967,7.61165049 11.0227498,7.82308522 L10.7062315,8.3214671 C10.3580613,8.87019058 10.1246291,9.21377202 10.0059347,9.35221143 C9.88724036,9.49065085 9.74612595,9.55987055 9.58259149,9.55987055 C9.50873722,9.55987055 9.3517969,9.50449479 9.11177052,9.39374326 C8.87174415,9.28299173 8.66996373,9.22761597 8.50642928,9.22761597 C8.23738872,9.22761597 8.02769535,9.31948939 7.87734916,9.50323625 C7.72700297,9.6869831 7.65182987,9.88709097 7.65182987,10.1035599 C7.65182987,10.3653362 7.75337949,10.5855807 7.95647873,10.7642934 C8.15957798,10.9430061 8.39828553,11.0323625 8.67260138,11.0323625 Z" id="fx"/>
-                    </g>
-                </g>
-            </g>
-        </svg>
-    )
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/icons/RoundEditIcon.tsx b/workspaces/ballerina/data-mapper-view/src/assets/icons/RoundEditIcon.tsx
deleted file mode 100644
index d15daae8070..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/assets/icons/RoundEditIcon.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from "react";
-
-export default function RoundEditIcon() {
-    return (
-        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fillRule="evenodd" clipRule="evenodd" d="M8.57143 0.571429C8.57143 0.255837 8.31559 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 7.68441 15.7442 7.42857 15.4286 7.42857C15.113 7.42857 14.8571 7.68441 14.8571 8C14.8571 11.7871 11.7871 14.8571 8 14.8571C4.2129 14.8571 1.14286 11.7871 1.14286 8C1.14286 4.2129 4.2129 1.14286 8 1.14286C8.31559 1.14286 8.57143 0.88702 8.57143 0.571429ZM11.7645 1.55603L7.33957 6.36762L6.62291 9.90938L10.0375 9.06944L14.4727 4.28047C15.195 3.50051 15.1683 2.28812 14.4122 1.54077C13.6769 0.813827 12.4914 0.820659 11.7645 1.55603ZM13.7888 2.34072C14.0813 2.71052 14.0673 3.24647 13.739 3.60098L9.4947 8.18199L7.7747 8.65999L8.2447 6.85999L12.482 2.25254C12.8143 1.91645 13.3666 1.91326 13.7092 2.25194L13.7888 2.34072Z" fill="#40404B"/>
-        </svg>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/icons/SquareEditIcon.tsx b/workspaces/ballerina/data-mapper-view/src/assets/icons/SquareEditIcon.tsx
deleted file mode 100644
index 7bc3b07159e..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/assets/icons/SquareEditIcon.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from "react";
-
-export default function SquareEditIcon(props: {color: string}) {
-    const { color } = props;
-    return (
-        <svg width="13px" height="13px" viewBox="0 0 13 13" fill={color} version="1.1" xmlns="http://www.w3.org/2000/svg">
-            <defs>
-                <path fillRule="evenodd" d="M5.5,0.395986235 C5.77614237,0.395986235 6,0.61984386 6,0.895986235 C6,1.14144612 5.82312484,1.3455946 5.58987563,1.38793057 L5.5,1.39598623 L2.5,1.39598623 C1.72030388,1.39598623 1.07955132,1.99087432 1.00686658,2.75152622 L1,2.89598623 L1,9.89598623 C1,10.6756824 1.59488808,11.3164349 2.35553999,11.3891197 L2.5,11.3959862 L9.5,11.3959862 C10.2796961,11.3959862 10.9204487,10.8010982 10.9931334,10.0404462 L11,9.89598623 L11,6.89598623 C11,6.61984386 11.2238576,6.39598623 11.5,6.39598623 C11.7454599,6.39598623 11.9496084,6.5728614 11.9919443,6.8061106 L12,6.89598623 L12,9.89598623 C12,11.2214696 10.9684641,12.3060249 9.66437569,12.3906686 L9.5,12.3959862 L2.5,12.3959862 C1.1745166,12.3959862 0.089961328,11.3644503 0.00531767968,10.0603619 L0,9.89598623 L0,2.89598623 C0,1.57050283 1.03153594,0.485947563 2.33562431,0.401303914 L2.5,0.395986235 L5.5,0.395986235 Z M9.19180465,0.556025946 C9.91874506,-0.179341475 11.1041798,-0.186172916 11.8395472,0.540767497 C12.5955682,1.28812479 12.6223059,2.50050757 11.8999681,3.28046834 L11.8999681,3.28046834 L7.46480412,8.06943845 L4.05021504,8.90938018 L4.76686995,5.3676207 Z M11.136527,1.25193739 C10.7939279,0.913264307 10.2416476,0.916446996 9.90928918,1.25254138 L9.90928918,1.25254138 L5.672,5.85998623 L5.202,7.65998623 L6.922,7.18198623 L11.1662787,2.6009834 C11.4946021,2.24646868 11.5086395,1.71052476 11.2160563,1.34072489 L11.2160563,1.34072489 Z" id="path-1"/>
-            </defs>
-            <g id="Tree-Editor" stroke="none" strokeWidth="1" fill={color} fillRule="evenodd">
-                <g id="tree-editor-while" transform="translate(-1370.000000, -226.000000)">
-                    <g id="Icon/docs-Copy-7" transform="translate(1370.000000, 226.604014)">
-                        <mask id="mask-2" fill="white">
-                            <use xlinkHref="#path-1"/>
-                        </mask>
-                        <use id="Combined-Shape" fill={color} fillRule="nonzero" xlinkHref="#path-1"/>
-                    </g>
-                </g>
-            </g>
-        </svg>
-
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/icons/SymbolStructIcon.tsx b/workspaces/ballerina/data-mapper-view/src/assets/icons/SymbolStructIcon.tsx
deleted file mode 100644
index 8368f81c46a..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/assets/icons/SymbolStructIcon.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from "react";
-
-export default function SymbolStructIcon() {
-    return (
-        <svg width="16px" height="16px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#616161">
-            <path fillRule="evenodd" clipRule="evenodd" d="M2 2L1 3v3l1 1h12l1-1V3l-1-1H2zm0 1h12v3H2V3zm-1 7l1-1h3l1 1v3l-1 1H2l-1-1v-3zm2 0H2v3h3v-3H3zm7 0l1-1h3l1 1v3l-1 1h-3l-1-1v-3zm2 0h-1v3h3v-3h-2z" />
-        </svg>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/icons/fitToScreen.tsx b/workspaces/ballerina/data-mapper-view/src/assets/icons/fitToScreen.tsx
deleted file mode 100644
index 81021eef9cb..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/assets/icons/fitToScreen.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import * as React from "react";
-
-export default function FitToScreenSVG() {
-  return (
-    <svg width="14.985" height="14.986">
-      <path id="FitToScreen" d="M150.138,330.317l-2.366-2.367v.574a.98.98,0,1,1-1.96,0V324.6h3.92a.98.98,0,1,1,0,1.96h-.574l2.367,2.366a.981.981,0,0,1-1.387,1.387Zm-13.039,0a.981.981,0,0,1,0-1.387l2.366-2.366h-.573a.98.98,0,1,1,0-1.96h3.92v3.92a.98.98,0,1,1-1.96,0v-.574l-2.366,2.367A.981.981,0,0,1,137.1,330.317Zm9.693-8.713h-.98v-3.92a.98.98,0,0,1,1.96,0v.574l2.366-2.367a.981.981,0,0,1,1.387,1.387l-2.367,2.366h.574a.98.98,0,1,1,0,1.96Zm-4.96,0h-2.94a.98.98,0,1,1,0-1.96h.573l-2.366-2.366a.981.981,0,0,1,1.387-1.387l2.366,2.367v-.574a.98.98,0,0,1,1.96,0h0v3.92Z" transform="translate(-136.812 -315.619)" fill="#8d91a3" opacity="0.769" />
-      <title>Fit to screen</title>
-    </svg>
-  );
-}
-
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/DataMapperConfigPanel.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/DataMapperConfigPanel.tsx
deleted file mode 100644
index cb0905963d4..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/DataMapperConfigPanel.tsx
+++ /dev/null
@@ -1,571 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React, { FocusEvent, useContext, useEffect, useMemo, useRef, useState } from "react";
-
-import styled from "@emotion/styled";
-import {
-    BallerinaProjectComponents,
-    createFunctionSignature,
-    STModification,
-    updateFunctionSignature,
-} from "@wso2/ballerina-core";
-import { LangClientRpcClient } from "@wso2/ballerina-rpc-client";
-import { Button, Divider, Typography, Codicon, SidePanel, Confirm } from "@wso2/ui-toolkit";
-import {
-    ExpressionFunctionBody,
-    FunctionDefinition,
-    NodePosition,
-    STKindChecker,
-    STNode
-} from "@wso2/syntax-tree";
-import { camelCase } from "lodash";
-
-import { CurrentFileContext } from "../Context/current-file-context";
-import { isArraysSupported } from "../utils";
-
-import { FunctionNameEditor } from "./FunctionNameEditor";
-import { InputParamsPanel } from "./InputParamsPanel/InputParamsPanel";
-import { DataMapperInputParam, DataMapperOutputParam } from "./InputParamsPanel/types";
-import { OutputTypePanel } from "./OutputTypePanel/OutputTypePanel";
-import { CompletionResponseWithModule } from "./TypeBrowser";
-import {
-    getDefaultFnName,
-    getDiagnosticsForFnName,
-    getFnNameFromST,
-    getModifiedTargetPosition
-} from "./utils";
-import { getRecordCompletions } from "../../Diagram/utils/ls-utils";
-
-export const DM_DEFAULT_FUNCTION_NAME = "transform";
-export const REDECLARED_SYMBOL_ERROR_CODE = "BCE2008";
-
-export interface DataMapperConfigPanelProps {
-    fnST: FunctionDefinition;
-    targetPosition?: NodePosition;
-    importStatements: string[];
-    projectComponents?: BallerinaProjectComponents;
-    filePath: string;
-    inputs: DataMapperInputParam[];
-    output: DataMapperOutputParam;
-    ballerinaVersion: string;
-    onSave: (funcName: string, inputParams: DataMapperInputParam[], outputType: DataMapperOutputParam) => void;
-    onClose: () => void;
-    applyModifications: (modifications: STModification[]) => Promise<void>;
-    langServerRpcClient: LangClientRpcClient;
-    recordPanel?: (props: { targetPosition: NodePosition, closeAddNewRecord: (createdNewRecord?: string) => void, onUpdate: (updated: boolean) => void }) => React.ReactElement;
-}
-
-
-export function DataMapperConfigPanel(props: DataMapperConfigPanelProps) {
-    const {
-        fnST,
-        targetPosition,
-        importStatements,
-        projectComponents,
-        filePath,
-        inputs,
-        output,
-        ballerinaVersion,
-        onSave,
-        onClose,
-        applyModifications,
-        langServerRpcClient,
-        recordPanel
-    } = props;
-    const { path, content } = useContext(CurrentFileContext);
-
-    const [fnNameFromST, setFnNameFromST] = useState(getFnNameFromST(fnST));
-    const [inputParams, setInputParams] = useState<DataMapperInputParam[]>(inputs);
-    const [fnName, setFnName] = useState(fnNameFromST === undefined ? DM_DEFAULT_FUNCTION_NAME : fnNameFromST);
-    const [outputType, setOutputType] = useState<DataMapperOutputParam>(output);
-    const [isNewRecord, setIsNewRecord] = useState(false);
-    const [isAddExistType, setAddExistType] = useState(false);
-    const [dmFuncDiagnostic, setDmFuncDiagnostic] = useState("");
-    const [showOutputType, setShowOutputType] = useState(false);
-    const [newRecordBy, setNewRecordBy] = useState<"input" | "output">(undefined);
-    const [newRecords, setNewRecords] = useState<string[]>([]);
-    const [initiated, setInitiated] = useState(false);
-    const [isValidationInProgress, setValidationInProgress] = useState(false);
-    const [popoverAnchorEl, setPopoverAnchorEl] = React.useState(null);
-    const [isClicked, setIsClicked] = React.useState<boolean>(false);
-    const [disableFnNameEditing, setDisableFnNameEditing] = React.useState<boolean>(false);
-    const editConfirmMessage = useRef<string>();
-    const buttonContainerRef = useRef<HTMLDivElement>(null);
-    const editConfirmPopoverOpen = Boolean(popoverAnchorEl);
-    const id = editConfirmPopoverOpen ? 'edit-confirm-popover' : undefined;
-
-    const isValidConfig = useMemo(() => {
-        const hasInvalidInputs = inputParams.some(input => input.isUnsupported);
-        return fnName
-            && inputParams.length > 0
-            && !hasInvalidInputs
-            && outputType.type !== ""
-            && !outputType.isUnsupported
-            && dmFuncDiagnostic === "";
-    }, [fnName, inputParams, outputType, dmFuncDiagnostic])
-
-    useEffect(() => {
-        void (async () => {
-            setValidationInProgress(true);
-            try {
-                const diagnostics = await getDiagnosticsForFnName(
-                    fnName,
-                    inputParams,
-                    outputType.type,
-                    fnST,
-                    targetPosition,
-                    content,
-                    filePath,
-                    langServerRpcClient
-                );
-                if (diagnostics.length > 0) {
-                    const redeclaredSymbol = diagnostics.some((diagnostic) => {
-                        return diagnostic.code === REDECLARED_SYMBOL_ERROR_CODE
-                    });
-                    if (fnNameFromST === undefined && redeclaredSymbol) {
-                        const defaultFnName = await getDefaultFnName(filePath, targetPosition, langServerRpcClient);
-                        setFnName(defaultFnName);
-                    } else {
-                        setDmFuncDiagnostic(diagnostics[0]?.message);
-                    }
-                }
-            } finally {
-                setValidationInProgress(false);
-            }
-            setInitiated(true);
-        })();
-    }, []);
-    const [fetchingCompletions, setFetchingCompletions] = useState(false);
-
-    const [recordCompletions, setRecordCompletions] = useState<CompletionResponseWithModule[]>([]);
-
-    useEffect(() => {
-        void (async () => {
-            if (initiated) {
-                setFetchingCompletions(true);
-                const allCompletions = await getRecordCompletions(
-                    content,
-                    importStatements,
-                    fnST?.position as NodePosition || targetPosition,
-                    path,
-                    langServerRpcClient
-                );
-                setRecordCompletions(allCompletions);
-                setFetchingCompletions(false);
-            }
-        })();
-    }, [content, initiated]);
-
-    useEffect(() => {
-        if (isClicked && !isValidationInProgress && !editConfirmPopoverOpen) {
-            onSaveForm();
-        }
-    }, [isClicked, isValidationInProgress, editConfirmPopoverOpen]);
-
-
-    const handleOnConfirm = (status: boolean) => {
-        if (status) {
-            onSaveForm();
-        }
-        handleClosePopover();
-    }
-
-    const onSaveForm = () => {
-        handleClosePopover();
-        const parametersStr = inputParams
-            .map((item) => `${item.type}${item.isArray ? '[]' : ''} ${item.name}`)
-            .join(",");
-
-        const returnTypeStr = `returns ${outputType.type}${outputType.isArray ? '[]' : ''}`;
-
-        const modifications: STModification[] = [];
-        if (fnST && STKindChecker.isFunctionDefinition(fnST)) {
-            // check previous output signature and decide whether or not to reset the signature
-            modifications.push(
-                updateFunctionSignature(fnName, parametersStr, returnTypeStr, {
-                    ...fnST?.functionSignature?.position as NodePosition,
-                    startColumn: (fnST?.functionName?.position as NodePosition)?.startColumn,
-                })
-            );
-
-            let functionExpression: STNode = (fnST.functionBody as ExpressionFunctionBody)?.expression;
-            if (functionExpression && STKindChecker.isLetExpression(functionExpression)) {
-                functionExpression = functionExpression.expression
-            }
-            if (
-                functionExpression &&
-                (STKindChecker.isNilLiteral(functionExpression) ||
-                    outputType.type !== output?.type ||
-                    outputType?.isArray !== output?.isArray)
-            ) {
-                // if function returns () or if output type has changed
-                // reset function body with {} or []
-                modifications.push({
-                    type: "INSERT",
-                    config: { STATEMENT: outputType.isArray ? "[]" : "{}" },
-                    ...functionExpression.position,
-                });
-            }
-        } else {
-            modifications.push(
-                createFunctionSignature(
-                    "",
-                    fnName,
-                    parametersStr,
-                    returnTypeStr,
-                    targetPosition,
-                    false,
-                    true,
-                    outputType.isArray ? '[]' : '{}'
-                )
-            );
-        }
-        onSave(fnName, inputParams, outputType);
-        void applyModifications(modifications);
-    };
-
-    useEffect(() => {
-        setInputParams(inputs);
-        setOutputType(output);
-        setFnNameFromST(getFnNameFromST(fnST));
-    }, [inputs, output]);
-
-    useEffect(() => {
-        if (fnST) {
-            if (fnNameFromST === undefined) {
-                setFnNameFromST(getFnNameFromST(fnST));
-            }
-        }
-    }, [fnST]);
-
-
-    useEffect(() => {
-        void (async () => {
-            setValidationInProgress(true);
-            try {
-                if (fnNameFromST) {
-                    const diagnostics = await getDiagnosticsForFnName(
-                        fnNameFromST,
-                        inputParams,
-                        outputType.type,
-                        fnST,
-                        targetPosition,
-                        content,
-                        filePath,
-                        langServerRpcClient
-                    );
-                    if (diagnostics.length > 0) {
-                        setDmFuncDiagnostic(diagnostics[0]?.message);
-                    }
-                    setFnName(fnNameFromST);
-                }
-            } finally {
-                setValidationInProgress(false);
-            }
-        })();
-    }, [fnNameFromST]);
-
-    // For Input Value
-    const enableAddNewRecord = () => {
-        setIsNewRecord(true);
-        setNewRecordBy("input");
-    };
-
-    const closeAddNewRecord = (createdNewRecord?: string) => {
-        setIsNewRecord(false);
-        if (createdNewRecord) {
-            const constantWord = "type";
-            const pattern = new RegExp(`${constantWord}\\s+(\\w+)`);
-            const match = createdNewRecord.match(pattern);
-            const newRecordType = match ? match[1] : "";
-            if (newRecordBy === "input") {
-                setInputParams([...inputParams, {
-                    name: camelCase(newRecordType),
-                    type: newRecordType,
-                    isUnsupported: false,
-                    isArray: false
-                }])
-            }
-            if (newRecordBy === "output") {
-                setOutputType({ type: newRecordType, isUnsupported: false, isArray: false });
-            }
-            setNewRecords([...newRecords, newRecordType]);
-        }
-        setNewRecordBy(undefined);
-    };
-
-    const handleShowOutputType = () => {
-        setShowOutputType(true);
-    };
-
-    const handleHideOutputType = () => {
-        setShowOutputType(false);
-    }
-
-    // For Output Value
-    const handleShowRecordEditor = () => {
-        enableAddNewRecord();
-        setNewRecordBy("output");
-    };
-
-    const handleOutputDeleteClick = () => {
-        setOutputType({ type: undefined, isUnsupported: true, isArray: false });
-        setShowOutputType(false);
-    };
-
-    const handleOutputTypeChange = (type: string, isArray: boolean) => {
-        setOutputType({ type, isUnsupported: false, isArray })
-    }
-
-    const breadCrumb = (
-        <FormTitleContainer>
-            <FormTitle variant="h4">Data Mapper</FormTitle>
-            <Codicon name="chevron-right" />
-            <FormTitle variant="h4">Record</FormTitle>
-            <CloseButton
-                appearance="icon"
-                onClick={() => closeAddNewRecord()}
-            >
-                <Codicon sx={{ width: "16px" }} iconSx={{ color: "var(--vscode-input-placeholderForeground)" }} name="close" />
-            </CloseButton>
-        </FormTitleContainer>
-    );
-
-    const onNameOutFocus = async (value: string) => {
-        const name = value;
-        if (name === "") {
-            setDmFuncDiagnostic("missing function name");
-        } else if (name !== fnNameFromST) {
-            setValidationInProgress(true);
-            try {
-                const diagnostics = await getDiagnosticsForFnName(
-                    value,
-                    inputParams,
-                    outputType.type,
-                    fnST,
-                    targetPosition,
-                    content,
-                    filePath,
-                    langServerRpcClient
-                );
-                if (diagnostics.length > 0) {
-                    setDmFuncDiagnostic(diagnostics[0]?.message);
-                }
-            } finally {
-                setValidationInProgress(false);
-            }
-        }
-    };
-
-    const onNameChange = (name: string) => {
-        setFnName(name);
-        setDmFuncDiagnostic("");
-    };
-
-    const isArraySupported = useMemo(() => isArraysSupported(ballerinaVersion), [ballerinaVersion]);
-
-    const handleClosePopover = () => {
-        setIsClicked(false);
-        setPopoverAnchorEl(null);
-    };
-
-    const onSaveInit = (event: React.MouseEvent<HTMLElement>) => {
-        // only show confirm popover if something has changed and if its the edit flow
-        if (fnST && STKindChecker.isFunctionDefinition(fnST)) {
-            const outputChanged =
-                output.type &&
-                outputType.type !== output?.type ||
-                outputType?.isArray !== output?.isArray;
-            const inputsChanged = !inputs?.every((item) =>
-                inputParams?.some(
-                    (newInput) =>
-                        newInput.isArray === item.isArray &&
-                        newInput.name === item.name &&
-                        newInput.type === item.type
-                )
-            );
-            if (outputChanged || inputsChanged) {
-                let confirmMessage = "";
-                if (outputChanged) {
-                    confirmMessage = "Modifying the output type will reset the function body. "
-                } else if (inputsChanged) {
-                    confirmMessage += "Modifying the existing input types might make any existing mappings invalid. "
-                }
-                confirmMessage += "Are you sure you want to proceed?";
-                editConfirmMessage.current = confirmMessage;
-                setPopoverAnchorEl(event.currentTarget);
-            }
-        }
-    };
-
-    const handleSave = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-        if (!isClicked) {
-            setIsClicked(true);
-            onSaveInit(event);
-        }
-    }
-
-    return (
-        <SidePanel
-            isOpen={true}
-            alignment="right"
-            sx={{ transition: "all 0.3s ease-in-out", width: 600 }}
-        >
-            <div>
-                <WizardFormControlExtended
-                    data-testid="data-mapper-form"
-                >
-                    {(isNewRecord && breadCrumb) || (
-                        <FormTitleContainer>
-                            <FormTitle variant="h4">Data Mapper</FormTitle>
-                            <CloseButton
-                                appearance="icon"
-                                onClick={onClose}
-                            >
-                                <Codicon sx={{ width: "16px" }} iconSx={{ color: "var(--vscode-input-placeholderForeground)" }} name="close" />
-                            </CloseButton>
-                        </FormTitleContainer>
-                    )}
-                    {isNewRecord &&
-                        recordPanel({
-                            targetPosition: getModifiedTargetPosition(newRecords, targetPosition, projectComponents, filePath),
-                            closeAddNewRecord,
-                            onUpdate: setDisableFnNameEditing
-                        })
-                    }
-                    {!isNewRecord && (
-                        <>
-                            <FormBody>
-                                <FunctionNameEditor
-                                    value={fnName}
-                                    onBlur={(event: FocusEvent<HTMLInputElement>) => onNameOutFocus(event.target.value)}
-                                    onChange={onNameChange}
-                                    isValidating={!initiated || isValidationInProgress}
-                                    errorMessage={dmFuncDiagnostic}
-                                />
-                                <FormDivider />
-                                <InputParamsPanel
-                                    inputParams={inputParams}
-                                    onUpdateParams={setInputParams}
-                                    enableAddNewRecord={enableAddNewRecord}
-                                    setAddExistType={setAddExistType}
-                                    isAddExistType={isAddExistType}
-                                    loadingCompletions={fetchingCompletions}
-                                    completions={recordCompletions}
-                                    isArraySupported={isArraySupported}
-                                />
-                                <FormDivider />
-                                <OutputTypePanel
-                                    outputType={outputType}
-                                    fetchingCompletions={fetchingCompletions}
-                                    completions={recordCompletions}
-                                    showOutputType={showOutputType}
-                                    handleShowOutputType={handleShowOutputType}
-                                    handleHideOutputType={handleHideOutputType}
-                                    handleOutputTypeChange={handleOutputTypeChange}
-                                    handleShowRecordEditor={handleShowRecordEditor}
-                                    handleOutputDeleteClick={handleOutputDeleteClick}
-                                    isArraySupported={isArraySupported}
-                                />
-                            </FormBody>
-                            <ButtonContainer ref={buttonContainerRef}>
-                                <Button
-                                    appearance="secondary"
-                                    onClick={onClose}
-                                >
-                                    Cancel
-                                </Button>
-                                <Button
-                                    appearance="primary"
-                                    disabled={isClicked || !isValidConfig}
-                                    onClick={handleSave}
-                                >
-                                    Save
-                                </Button>
-                            </ButtonContainer>
-                            <Confirm
-                                id={id}
-                                isOpen={editConfirmPopoverOpen}
-                                anchorEl={popoverAnchorEl}
-                                confirmText="Continue"
-                                message={editConfirmMessage.current}
-                                onConfirm={handleOnConfirm}
-                                anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-                                transformOrigin={{ vertical: 'top', horizontal: 'right' }}
-                                sx={{zIndex: 2000}}
-                            />
-                        </>
-                    )}
-                </WizardFormControlExtended>
-            </div>
-        </SidePanel>
-    );
-}
-
-const FormTitleContainer = styled.div`
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid var(--vscode-editorIndentGuide-background);
-    padding: 16px 12px;
-    gap: 8px;
-`;
-
-const FormTitle = styled(Typography)`
-    margin: 0;
-`
-
-const FormBody = styled.div`
-    width: 100%;
-    flex-direction: row;
-    padding: 15px 20px;
-`;
-
-const FormDivider = styled(Divider)`
-    margin: 1.5rem 0;
-`;
-
-const WizardFormControlExtended = styled.div`
-    width: 600;
-`;
-
-const CloseButton = styled(Button)`
-    margin-left: auto;
-`
-
-export const Title = styled.div((element) => ({
-    color: 'inherit',
-    fontSize: "13px",
-    letterSpacing: "normal",
-    textTransform: "capitalize",
-    margin: "0 0 8px",
-    lineHeight: "1rem",
-    paddingBottom: "0.6rem",
-    fontWeight: 500,
-}));
-
-const ButtonContainer = styled.div`
-    display: flex;
-    gap: 10px;
-    padding: 0 20px;
-
-    & :nth-of-type(1) {
-        margin-left: auto;
-    }
-`;
-
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/FunctionNameEditor.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/FunctionNameEditor.tsx
deleted file mode 100644
index 3a746617b73..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/FunctionNameEditor.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-
-import React from "react";
-
-import { ProgressIndicator, TextField } from "@wso2/ui-toolkit";
-
-export interface FunctionNameEditorProps {
-    value: string;
-    onBlur?: (event: unknown) => void;
-    onChange: (newVal: string) => void;
-    isValidating: boolean;
-    errorMessage?: string;
-    disabled?: boolean;
-}
-
-export function FunctionNameEditor(props: FunctionNameEditorProps)  {
-    const { value, onChange, onBlur, isValidating, errorMessage, disabled } = props;
-    return (
-        <>
-            <TextField
-                size={80}
-                onBlur={onBlur}
-                onTextChange={onChange}
-                label="Name"
-                required={true}
-                value={value}
-                placeholder="Data Mapper Name"
-                errorMsg={errorMessage}
-                data-testid={`data-mapper-config-fn-name`}
-                disabled={disabled}
-            />
-            {isValidating && <ProgressIndicator />}
-        </>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/InputParamsPanel/InputParam.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/InputParamsPanel/InputParam.tsx
deleted file mode 100644
index 021c046c19b..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/InputParamsPanel/InputParam.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React from "react";
-
-import styled from "@emotion/styled";
-import { Button, Codicon, TruncatedLabel } from "@wso2/ui-toolkit";
-
-import { DataMapperInputParam } from "./types";
-
-interface InputParamItemProps {
-    index: number;
-    inputParam: DataMapperInputParam;
-    onDelete?: (index: number, inputParam: DataMapperInputParam) => void;
-    onEditClick?: (index: number, inputParam: DataMapperInputParam) => void;
-}
-
-export function InputParamItem(props: InputParamItemProps) {
-    const { index, inputParam, onDelete, onEditClick } = props;
-
-    const label = (
-        <TruncatedLabel style={{ marginRight: "auto" }}>
-            <TypeName isInvalid={inputParam.isUnsupported}>{inputParam.isArray ? `${inputParam.type}[]` : inputParam.type}</TypeName>
-            <span>{" " + inputParam.name}</span>
-        </TruncatedLabel>
-    );
-
-    const handleDelete = () => {
-        onDelete(index, inputParam);
-    };
-
-    const handleEdit = () => {
-        if (!inputParam.isUnsupported) {
-            onEditClick(index, inputParam);
-        }
-    };
-
-    return (
-        <InputParamContainer >
-            <ClickToEditContainer isInvalid={inputParam.isUnsupported} onClick={handleEdit}>
-                {label}
-            </ClickToEditContainer>
-            <Box>
-                {!inputParam.isUnsupported && (
-                    <EditButton
-                        onClick={handleEdit}
-                        appearance="icon"
-                        data-testid={`data-mapper-config-edit-input-${index}`}
-                    >
-                        <Codicon name="edit" iconSx={{ color: "var(--vscode-input-placeholderForeground)" }} />
-                    </EditButton>
-                )}
-                <DeleteButton
-                    onClick={handleDelete}
-                    appearance="icon"
-                    data-testid={`data-mapper-config-delete-input-${index}`}
-                >
-                    <Codicon name="trash" iconSx={{ color: "var(--vscode-errorForeground)" }} />
-                </DeleteButton>
-            </Box>
-        </InputParamContainer>
-    );
-}
-
-const ClickToEditContainer = styled.div(({ isInvalid }: { isInvalid?: boolean }) => ({
-    cursor: isInvalid ? 'auto' : 'pointer',
-    width: '100%'
-}));
-
-const DeleteButton = styled(Button)`
-    padding: 0;
-    color: var(--vscode-errorForeground);
-`;
-
-const EditButton = styled(Button)`
-    padding: 0;
-    margin-right: 5px;
-    color: #36B475;
-`;
-
-const InputParamContainer = styled.div(() => ({
-    background: 'var(--vscode-sideBar-background)',
-    color: 'inherit',
-    padding: 10,
-    margin: '1rem 0 0.25rem',
-    justifyContent: 'space-between',
-    display: 'flex',
-    width: '100%',
-    alignItems: 'center'
-}));
-
-const TypeName = styled.span(({ isInvalid }: { isInvalid?: boolean }) => ({
-    fontWeight: 500,
-    color: `${isInvalid ? 'var(--vscode-errorForeground)' : 'inherit'}`,
-}));
-
-const Box = styled.div`
-    display: flex;
-`;
-
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/InputParamsPanel/InputParamEditor.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/InputParamsPanel/InputParamEditor.tsx
deleted file mode 100644
index dc6ca80e91c..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/InputParamsPanel/InputParamEditor.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-// tslint:disable: jsx-no-lambda
-import React, { useState } from "react";
-
-import styled from "@emotion/styled";
-import { camelCase } from "lodash";
-
-import { CompletionResponseWithModule, TypeBrowser } from "../TypeBrowser";
-
-import { DataMapperInputParam } from "./types";
-import { Button, TextField, Typography } from "@wso2/ui-toolkit";
-import { VSCodeCheckbox } from "@vscode/webview-ui-toolkit/react";
-
-interface InputParamEditorProps {
-    index?: number;
-    param?: DataMapperInputParam,
-    onSave?: (param: DataMapperInputParam) => void;
-    onUpdate?: (index: number, param: DataMapperInputParam) => void;
-    onCancel?: () => void;
-    validateParamName?: (paramName: string) => { isValid: boolean, message: string };
-    isArraySupported: boolean;
-    completions: CompletionResponseWithModule[];
-    loadingCompletions: boolean;
-    hideName?: boolean;
-}
-
-export function InputParamEditor(props: InputParamEditorProps) {
-
-    const { param, onSave, onUpdate, index, onCancel, validateParamName, isArraySupported, completions, loadingCompletions, hideName } = props;
-
-    const initValue: DataMapperInputParam = param ? { ...param } : {
-        name: "",
-        type: "",
-        isArray: false,
-    };
-
-    const [paramType, setParamType] = useState<string>(param?.type || "");
-    const [paramName, setParamName] = useState<string>(param?.name || "");
-    const [pramError, setParamError] = useState<string>("");
-    const [isValidParam, setIsValidParam] = useState(true);
-    const [isArray, setIsArray] = useState<boolean>(param?.isArray || false);
-
-    const validateNameValue = (value: string) => {
-        if (value && validateParamName) {
-            const { isValid, message } = validateParamName(value);
-            setIsValidParam(isValid);
-            if (!isValid) {
-                setParamError(message);
-            }
-        }
-        setParamError("");
-        return true;
-    };
-
-    const onUpdateParamName = (value: string) => {
-        setParamName(value);
-        validateNameValue(value);
-    }
-
-    const handleOnSave = () => {
-        onSave({
-            ...initValue,
-            name: paramName,
-            type: paramType,
-            isArray
-        });
-    };
-
-    const handleOnUpdate = () => {
-        onUpdate(index, {
-            ...initValue,
-            name: paramName,
-            type: paramType,
-            isArray
-        });
-    };
-
-    const handleParamTypeChange = (type: string) => {
-        setParamType(type);
-        if (type && type.length > 1) {
-            setParamName(camelCase(type.split(':').pop()));
-        }
-    }
-
-    return (
-        <ParamEditorContainer>
-            <Row>
-                <Column>
-                    <InputLabel>Type</InputLabel>
-                    <TypeBrowser
-                        type={paramType}
-                        onChange={handleParamTypeChange}
-                        isLoading={loadingCompletions}
-                        recordCompletions={completions}
-                    />
-                </Column>
-                {!hideName && (
-                    <Column>
-                        <InputLabel>Name</InputLabel>
-                        <TextField
-                            value={paramName}
-                            placeholder={paramName}
-                            onTextChange={onUpdateParamName}
-                            errorMsg={pramError}
-                            size={40}
-                        />
-                    </Column>
-                )}
-
-            </Row>
-            <Row style={{ marginTop: "8px" }}>
-                <Column>
-                    {isArraySupported && (
-                        <FormControlLabel>
-                            <VSCodeCheckbox
-                                checked={isArray}
-                                onChange={event => setIsArray((event.target as HTMLInputElement).checked)}
-                            />
-                            <Typography variant="h4" sx={{ textWrap: "nowrap" }}>Is Array</Typography>
-                        </FormControlLabel>
-                    )}
-
-                </Column>
-                <Column>
-                    <ButtonContainer>
-                        <Button
-                            appearance="secondary"
-                            onClick={onCancel}
-                        >
-                            Cancel
-                        </Button>
-                        <Button
-                            appearance="primary"
-                            disabled={(!hideName && !paramName) || !paramType || pramError !== "" || !isValidParam}
-                            onClick={onUpdate ? handleOnUpdate : handleOnSave}
-                        >
-                            {onUpdate ? "Update" : " Add"}
-                        </Button>
-                    </ButtonContainer>
-                </Column>
-            </Row>
-        </ParamEditorContainer>
-    );
-}
-
-
-const ParamEditorContainer = styled.div((element) => ({
-    boxSizing: "border-box",
-    height: "153px",
-    width: "100%",
-    border: "1px solid var(--vscode-editorIndentGuide-background)",
-    backgroundColor: "var(--vscode-editorWidget-background)",
-    padding: "15px 10px"
-}));
-
-const InputLabel = styled.div((element) => ({
-    height: "24px",
-    width: "38px",
-    color: "var(--vscode-input-foreground)",
-    fontSize: "13px",
-    letterSpacing: "0",
-    lineHeight: "24px"
-}));
-
-const ButtonContainer = styled.div((element) => ({
-    display: "flex",
-    alignItems: "center",
-    gap: "8px",
-    marginLeft: "auto",
-}))
-
-const FormControlLabel = styled.div`
-    display: flex;
-    align-items: center;
-    gap: 6px;
-`;
-
-const Row = styled.div`
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    align-items: center;
-    width: 100%;
-`;
-
-const Column = styled.div`
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-`;
-
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/InputParamsPanel/InputParamsPanel.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/InputParamsPanel/InputParamsPanel.tsx
deleted file mode 100644
index 9e46f50b928..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/InputParamsPanel/InputParamsPanel.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React, { useState } from "react";
-
-import styled from "@emotion/styled";
-
-import { Title } from "../DataMapperConfigPanel";
-import { RecordButtonGroup } from "../RecordButtonGroup";
-import { CompletionResponseWithModule } from "../TypeBrowser";
-import { getTypeIncompatibilityMsg } from "../utils";
-
-import { InputParamItem } from "./InputParam";
-import { InputParamEditor } from "./InputParamEditor";
-import { DataMapperInputParam } from "./types";
-import { ErrorBanner } from "@wso2/ui-toolkit";
-
-export interface InputConfigWidgetProps {
-    inputParams: DataMapperInputParam[];
-    isAddExistType: boolean;
-    onUpdateParams: (newParams: DataMapperInputParam[]) => void;
-    enableAddNewRecord: () => void;
-    setAddExistType: (value: boolean) => void;
-    completions: CompletionResponseWithModule[];
-    loadingCompletions: boolean;
-    isArraySupported: boolean;
-}
-
-export function InputParamsPanel(props: InputConfigWidgetProps) {
-    const {
-        inputParams,
-        isAddExistType,
-        onUpdateParams,
-        enableAddNewRecord,
-        setAddExistType,
-        completions,
-        loadingCompletions,
-        isArraySupported
-    } = props;
-
-    const [editingIndex, setEditingIndex] = useState(-1);
-
-    const handleEnableAddNewRecord = () => {
-        enableAddNewRecord();
-    };
-
-    const enableAddNew = () => {
-        setAddExistType(true);
-    };
-
-    const disableAddNew = () => {
-        setAddExistType(false);
-    };
-
-    const onAddNew = (param: DataMapperInputParam) => {
-        onUpdateParams([...inputParams, param]);
-        setAddExistType(false);
-    };
-
-    const onUpdate = (index: number, param: DataMapperInputParam) => {
-        onUpdateParams([
-            ...inputParams.slice(0, index),
-            param,
-            ...inputParams.slice(index + 1),
-        ]);
-        setEditingIndex(-1);
-    };
-
-    const onUpdateCancel = () => {
-        setEditingIndex(-1);
-    };
-
-    const onEditClick = (index: number) => {
-        inputParams[index].isUnsupported = false;
-        setEditingIndex(index);
-    };
-
-    const onDeleteClick = (index: number) => {
-        onUpdateParams([...inputParams.filter((item, i) => index !== i)]);
-    };
-
-    return (
-        <InputParamsContainer data-testid='dm-inputs'>
-            <Title>Inputs</Title>
-            {inputParams.map((param, index) =>
-                editingIndex === index ? (
-                    <>
-                        <InputParamEditor
-                            key={index}
-                            index={editingIndex}
-                            param={param}
-                            onUpdate={onUpdate}
-                            onCancel={onUpdateCancel}
-                            completions={completions}
-                            loadingCompletions={loadingCompletions}
-                            isArraySupported={isArraySupported}
-                        />
-                        {param.isUnsupported && (
-                            <ErrorBanner
-                                errorMsg={getTypeIncompatibilityMsg(param.typeNature, param.type, "input")}
-                            />
-                        )}
-                    </>
-                ) : (
-                    <>
-                        <InputParamItem
-                            index={index}
-                            inputParam={param}
-                            onEditClick={onEditClick}
-                            onDelete={onDeleteClick}
-                        />
-                        {param.isUnsupported && (
-                            <ErrorBanner
-                                errorMsg={getTypeIncompatibilityMsg(param.typeNature, param.type, "input")}
-                            />
-                        )}
-                    </>
-                )
-            )}
-            {isAddExistType && (
-                <InputParamEditor
-                    param={{ name: "", type: "" }}
-                    onSave={onAddNew}
-                    onCancel={disableAddNew}
-                    completions={completions}
-                    loadingCompletions={loadingCompletions}
-                    isArraySupported={isArraySupported}
-                />
-            )}
-            {!isAddExistType && editingIndex === -1 && (
-                <RecordButtonGroup
-                    openRecordEditor={handleEnableAddNewRecord}
-                    showTypeList={enableAddNew}
-                />
-            )}
-        </InputParamsContainer>
-    );
-}
-
-const InputParamsContainer = styled.div(() => ({
-    color: 'var(--vscode-foreground)',
-    marginBottom: '10px'
-}));
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/InputParamsPanel/types.ts b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/InputParamsPanel/types.ts
deleted file mode 100644
index b06fbc2dd28..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/InputParamsPanel/types.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-export interface DataMapperInputParam {
-    name: string;
-    type: string;
-    isUnsupported?: boolean;
-    typeNature?: TypeNature;
-    isArray?: boolean;
-}
-
-export interface DataMapperOutputParam {
-    type: string;
-    isUnsupported?: boolean;
-    typeNature?: TypeNature;
-    isArray?: boolean;
-}
-
-export enum TypeNature {
-    BLACKLISTED,
-    WHITELISTED,
-    YET_TO_SUPPORT,
-    INVALID,
-    NOT_FOUND,
-    TYPE_UNAVAILABLE,
-    PARAM_NAME_UNAVAILABLE,
-    DUMMY
-}
-
-export interface WarningBannerProps {
-    message: React.ReactNode | string;
-}
-
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/OutputTypePanel/OutputTypePanel.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/OutputTypePanel/OutputTypePanel.tsx
deleted file mode 100644
index 8fd144e5ca7..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/OutputTypePanel/OutputTypePanel.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-// tslint:disable: jsx-no-lambda
-import React from "react";
-
-import styled from "@emotion/styled";
-import { Button, Codicon, ErrorBanner, TruncatedLabel } from "@wso2/ui-toolkit";
-
-import { Title } from "../DataMapperConfigPanel";
-import { InputParamEditor } from "../InputParamsPanel/InputParamEditor";
-import { DataMapperOutputParam } from "../InputParamsPanel/types";
-import { RecordButtonGroup } from "../RecordButtonGroup";
-import { CompletionResponseWithModule } from "../TypeBrowser";
-import { getTypeIncompatibilityMsg } from "../utils";
-
-export interface OutputConfigWidgetProps {
-    outputType: DataMapperOutputParam;
-    fetchingCompletions: boolean;
-    completions: CompletionResponseWithModule[]
-    showOutputType: boolean;
-    isArraySupported: boolean;
-    handleShowOutputType: () => void;
-    handleHideOutputType: () => void;
-    handleOutputTypeChange: (type: string, isArray: boolean) => void;
-    handleShowRecordEditor: () => void;
-    handleOutputDeleteClick: () => void;
-}
-
-export function OutputTypePanel(props: OutputConfigWidgetProps) {
-    const {
-        outputType,
-        fetchingCompletions,
-        completions,
-        showOutputType,
-        isArraySupported,
-        handleShowOutputType,
-        handleHideOutputType,
-        handleOutputTypeChange,
-        handleShowRecordEditor,
-        handleOutputDeleteClick
-    } = props;
-
-    const label = (
-        <TruncatedLabel style={{ marginRight: "auto" }}>
-            <TypeName isInvalid={outputType.isUnsupported}>{outputType.isArray ? `${outputType.type}[]` : outputType.type}</TypeName>
-        </TruncatedLabel>
-    );
-
-    const handleEdit = () => {
-        if (!outputType.isUnsupported) {
-            handleShowOutputType();
-        }
-    };
-
-
-    return (
-        <OutputTypeConfigPanel data-testid='dm-output'>
-            <Title>Output Type</Title>
-            {(!outputType.type || showOutputType) ? (
-                <>
-                    {showOutputType ? (
-                        <InputParamEditor
-                            param={{ ...outputType, name: "" }}
-                            hideName={true}
-                            onUpdate={(_, param) => {
-                                handleOutputTypeChange(param.type, param.isArray);
-                                handleHideOutputType();
-                            }}
-                            onCancel={handleHideOutputType}
-                            completions={completions}
-                            loadingCompletions={fetchingCompletions}
-                            isArraySupported={isArraySupported}
-                        />
-                    ) :
-                        <RecordButtonGroup openRecordEditor={handleShowRecordEditor} showTypeList={handleShowOutputType} />
-                    }
-
-                </>
-            ) : (
-                <>
-                    <OutputTypeContainer isInvalid={outputType.isUnsupported}>
-                        <ClickToEditContainer isInvalid={outputType.isUnsupported} onClick={handleEdit}>
-                            {label}
-                        </ClickToEditContainer>
-                        <Box>
-                            {!outputType.isUnsupported && (
-                                <EditButton
-                                    onClick={handleShowOutputType}
-                                    appearance="icon"
-                                    data-testid={`data-mapper-config-edit-output`}
-                                >
-                                    <Codicon name="edit" iconSx={{ color: "var(--vscode-input-placeholderForeground)" }} />
-                                </EditButton>
-                            )}
-                            <DeleteButton
-                                onClick={handleOutputDeleteClick}
-                                appearance="icon"
-                                data-testid={`data-mapper-config-delete-output`}
-                            >
-                                <Codicon name="trash" iconSx={{ color: "var(--vscode-errorForeground)" }} />
-                            </DeleteButton>
-                        </Box>
-                    </OutputTypeContainer>
-                    {outputType.type && outputType.isUnsupported && (
-                        <ErrorBanner
-                            errorMsg={getTypeIncompatibilityMsg(outputType.typeNature, outputType.type, "output")}
-                        />
-                    )}
-                </>
-            )}
-        </OutputTypeConfigPanel>
-    );
-}
-
-const ClickToEditContainer = styled.div(({ isInvalid }: { isInvalid?: boolean }) => ({
-    cursor: isInvalid ? 'auto' : 'pointer',
-    width: '100%'
-}));
-
-const OutputTypeContainer = styled.div(({ isInvalid }: { isInvalid?: boolean }) => ({
-    background: 'var(--vscode-sideBar-background)',
-    padding: 10,
-    color: `${isInvalid ? 'var(--vscode-errorForeground)' : 'inherit'}`,
-    margin: "1rem 0 0.25rem",
-    justifyContent: "space-between",
-    display: "flex",
-    width: "100%",
-    alignItems: "center",
-}));
-
-const OutputTypeConfigPanel = styled.div`
-    color: 'var(--vscode-foreground)';
-    width: 100%;
-`;
-
-const DeleteButton = styled(Button)`
-    padding: 0;
-    color: var(--vscode-errorForeground);
-`;
-
-const TypeName = styled.span(({ isInvalid }: { isInvalid?: boolean }) => ({
-    fontWeight: 500,
-    color: `${isInvalid ? 'var(--vscode-errorForeground)' : 'inherit'}`,
-    marginRight: '6px'
-}));
-
-const EditButton = styled(Button)`
-    padding: 0;
-    margin-right: 5px;
-    color: #36B475;
-`;
-
-const Box = styled.div`
-    display: flex;
-`;
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/RecordButtonGroup.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/RecordButtonGroup.tsx
deleted file mode 100644
index 1fca69495d2..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/RecordButtonGroup.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-
-import styled from "@emotion/styled";
-import { Button, Codicon, Typography } from "@wso2/ui-toolkit";
-import React from "react";
-
-export interface RecordButtonGroupProps {
-  openRecordEditor: () => void;
-  showTypeList: () => void;
-}
-
-export function RecordButtonGroup(props: RecordButtonGroupProps) {
-  const { openRecordEditor, showTypeList } = props;
-
-  return (
-    <Container>
-      <Button
-        onClick={openRecordEditor}
-        appearance="icon"
-        data-testid='new-record'
-      >
-        <Codicon name="add" sx={{ marginRight: "4px" }} iconSx={{ color: "var(--vscode-focusBorder)" }} />
-        <Typography variant="body3" sx={{ color: "var(--vscode-focusBorder)" }}>NEW RECORD</Typography>
-      </Button>
-      <Typography variant="body1">OR</Typography>
-      <Button
-        onClick={showTypeList}
-        appearance="icon"
-        data-testid='exiting-record'
-      >
-        <Codicon name="add" sx={{ marginRight: "4px" }} iconSx={{ color: "var(--vscode-focusBorder)" }} />
-        <Typography variant="body3" sx={{ color: "var(--vscode-focusBorder)" }}>EXISTING RECORD</Typography>
-      </Button>
-    </Container>
-  );
-}
-
-const Container = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-`;
\ No newline at end of file
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/TypeBrowser.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/TypeBrowser.tsx
deleted file mode 100644
index a87e8073b9f..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/TypeBrowser.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-// tslint:disable: jsx-no-lambda jsx-no-multiline-js
-import React, { useEffect, useState } from "react";
-
-import { Completion } from "@wso2/ballerina-core";
-import { AutoComplete, ProgressIndicator } from "@wso2/ui-toolkit";
-
-export interface TypeBrowserProps {
-    type?: string;
-    onChange: (newType: string) => void;
-    isLoading: boolean;
-    recordCompletions: CompletionResponseWithModule[];
-}
-
-export interface CompletionResponseWithModule extends Completion {
-    module?: string;
-}
-
-export function TypeBrowser(props: TypeBrowserProps) {
-    const { type, onChange, isLoading, recordCompletions } = props;
-    const [selectedTypeStr, setSelectedTypeStr] = useState(type?.split(':')?.pop() || '')
-
-    useEffect(() => {
-        setSelectedTypeStr(type?.split(':')?.pop() || '')
-    }, [type])
-
-
-    return (
-        <>
-            <AutoComplete
-                identifier="type-select-dropdown"
-                key={`type-select-${isLoading.toString()}`}
-                data-testid='type-select-dropdown'
-                items={recordCompletions.map(
-                    item => item?.module ? `${item.module}:${item.insertText}` : item?.insertText
-                )}
-                value={selectedTypeStr}
-                onValueChange={onChange}
-                borderBox={true}
-            />
-            {isLoading && <ProgressIndicator data-testid={'type-select-linear-progress'} />}
-        </>
-    );
-}
-
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/utils.ts b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/utils.ts
deleted file mode 100644
index f235b820193..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ConfigPanel/utils.ts
+++ /dev/null
@@ -1,367 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import {
-    addToTargetPosition,
-    BallerinaProjectComponents,
-    CompletionParams,
-    createFunctionSignature,
-    getSelectedDiagnostics,
-    getSource,
-    PrimitiveBalType,
-    STModification,
-    TypeField,
-    updateFunctionSignature
-} from "@wso2/ballerina-core";
-import {
-    FunctionDefinition,
-    IdentifierToken,
-    NodePosition,
-    RequiredParam,
-    STKindChecker,
-    STNode
-} from "@wso2/syntax-tree";
-import { CompletionItemKind, Diagnostic } from "vscode-languageserver-types";
-
-import { TypeDescriptor } from "../../Diagram/Node/commons/DataMapperNode";
-import { getTypeOfInputParam, getTypeOfOutput } from "../../Diagram/utils/dm-utils";
-import { getUnsupportedTypesFromTypeDesc } from "../../Diagram/utils/union-type-utils";
-import { DM_INHERENTLY_SUPPORTED_INPUT_TYPES, DM_UNSUPPORTED_TYPES, isArraysSupported } from "../utils";
-
-import { DM_DEFAULT_FUNCTION_NAME } from "./DataMapperConfigPanel";
-import { DataMapperInputParam, DataMapperOutputParam, TypeNature } from "./InputParamsPanel/types";
-import { LangClientRpcClient } from "@wso2/ballerina-rpc-client";
-import { URI } from "vscode-uri";
-
-export const FILE_SCHEME = "file://";
-export const EXPR_SCHEME = "expr://";
-
-/* tslint:disable-next-line */
-export const PROVIDED_TYPE = "${PROVIDED_TYPE}";
-/* tslint:disable-next-line */
-export const IO_KIND = "${IO_KIND}";
-export const DM_TYPES_UNSUPPORTED_MSG = `${PROVIDED_TYPE} is not supported as data mapper ${IO_KIND}`;
-export const DM_TYPES_NOT_FOUND_MSG = `Unrecognized type`;
-export const DM_TYPES_YET_TO_SUPPORT_MSG = `${PROVIDED_TYPE} is currently not supported as data mapper ${IO_KIND}`;
-export const DM_TYPES_SUPPORTED_IN_LATEST_MSG = `TypeField ${PROVIDED_TYPE} is not supported by the data mapper for your Ballerina version.
- Please upgrade Ballerina to the latest version to use this type`;
-export const DM_TYPES_INVALID_MSG = `${PROVIDED_TYPE} is not a valid type descriptor`;
-export const DM_TYPE_UNAVAILABLE_MSG = `TypeField is missing`;
-export const DM_PARAM_NAME_UNAVAILABLE_MSG = `Parameter name is missing`;
-
-function isSupportedType(node: STNode,
-                         type: TypeField,
-                         kind: 'input' | 'output',
-                         balVersion: string,
-                         paramName?: IdentifierToken): [boolean, TypeNature?] {
-    if (!node) {
-        return [false, TypeNature.NOT_FOUND];
-    }
-
-    const isUnionType = STKindChecker.isUnionTypeDesc(node);
-    const isArrayType = STKindChecker.isArrayTypeDesc(node);
-    const isMapType = STKindChecker.isMapTypeDesc(node);
-    const isRecordType = STKindChecker.isRecordTypeDesc(node);
-    const isOptionalType = STKindChecker.isOptionalTypeDesc(node);
-    const isTypeMissing = STKindChecker.isSimpleNameReference(node) && node.name.isMissing;
-    const isParenthesisedType = STKindChecker.isParenthesisedTypeDesc(node);
-
-    if (!type && isRecordType) {
-        return [false, TypeNature.WHITELISTED];
-    } else if (!type) {
-        if (paramName && paramName.isMissing) {
-            return [false, TypeNature.INVALID];
-        }
-        return [false, TypeNature.NOT_FOUND];
-    }
-    const isInvalid = type && type.typeName === "$CompilationError$";
-
-    let isAlreadySupportedType: boolean;
-    if (kind === 'input') {
-        isAlreadySupportedType = DM_INHERENTLY_SUPPORTED_INPUT_TYPES.some(t => {
-            return t === type.typeName && !isUnionType && !isArrayType;
-        });
-    } else {
-        isAlreadySupportedType = type.typeName === PrimitiveBalType.Record && !isArrayType;
-    }
-
-    const isUnsupportedType = DM_UNSUPPORTED_TYPES.some(t => t === type.typeName);
-
-    if (isTypeMissing) {
-        return [false, TypeNature.TYPE_UNAVAILABLE];
-    } else if ((isUnionType || isOptionalType) && kind === 'output' && getUnsupportedTypesFromTypeDesc(node).length === 0) {
-        return [true];
-    } else if (isMapType) {
-        return [false, TypeNature.YET_TO_SUPPORT];
-    } else if (isArrayType || isParenthesisedType) {
-        return [getUnsupportedTypesFromTypeDesc(node).length === 0, TypeNature.BLACKLISTED]
-    } else if (isInvalid) {
-        return [false, TypeNature.INVALID];
-    } else if (isAlreadySupportedType || (!isUnsupportedType && isArraysSupported(balVersion))) {
-        return [true];
-    } else if (!isUnsupportedType) {
-        return [false, TypeNature.WHITELISTED];
-    } else {
-        return [false, TypeNature.BLACKLISTED];
-    }
-}
-
-export function getFnNameFromST(fnST: FunctionDefinition) {
-    return fnST && fnST.functionName.value;
-}
-
-export function getFnSignatureFromST(fnST: FunctionDefinition) {
-    return fnST && fnST.functionSignature.source;
-}
-
-export function getInputsFromST(fnST: FunctionDefinition, balVersion: string): DataMapperInputParam[] {
-    let params: DataMapperInputParam[] = [];
-    if (fnST) {
-        // TODO: Check other Param Types
-        const reqParams = fnST.functionSignature.parameters.filter((val) => STKindChecker.isRequiredParam(val)) as RequiredParam[];
-        params = reqParams.map((param) => {
-            const typeName = getTypeFromTypeDesc(param.typeName);
-            const isArray = STKindChecker.isArrayTypeDesc(param.typeName);
-            const typeInfo = getTypeOfInputParam(param, balVersion);
-            let [isSupported, nature] = isSupportedType(param.typeName, typeInfo, 'input', balVersion, param?.paramName);
-            if (isSupported && param?.paramName.isMissing) {
-                isSupported = false;
-                nature = TypeNature.PARAM_NAME_UNAVAILABLE;
-            }
-            return {
-                name: param.paramName.value,
-                type: typeName,
-                isUnsupported: typeInfo ? !isSupported : true,
-                typeNature: nature,
-                isArray
-            }
-        });
-    }
-    return params;
-}
-
-export function getOutputTypeFromST(fnST: FunctionDefinition, balVersion: string): DataMapperOutputParam {
-    const typeDesc = fnST.functionSignature?.returnTypeDesc && fnST.functionSignature.returnTypeDesc.type;
-    if (typeDesc) {
-        const typeName = getTypeFromTypeDesc(typeDesc);
-        const isArray = STKindChecker.isArrayTypeDesc(typeDesc);
-        const typeInfo = getTypeOfOutput(typeDesc, balVersion);
-        const [isSupported, nature] = isSupportedType(typeDesc, typeInfo, 'output', balVersion);
-        return {
-            type: typeName,
-            isUnsupported: typeInfo ? !isSupported : true,
-            typeNature: nature,
-            isArray
-        }
-    }
-}
-
-export function getTypeIncompatibilityMsg(nature: TypeNature,
-                                          typeName: string,
-                                          kind?: 'input' | 'output'): string {
-    switch (nature) {
-        case TypeNature.WHITELISTED: {
-            return DM_TYPES_SUPPORTED_IN_LATEST_MSG.replace(PROVIDED_TYPE, typeName);
-        }
-        case TypeNature.BLACKLISTED: {
-            return DM_TYPES_UNSUPPORTED_MSG.replace(PROVIDED_TYPE, typeName).replace(IO_KIND, kind);
-        }
-        case TypeNature.YET_TO_SUPPORT: {
-            return DM_TYPES_YET_TO_SUPPORT_MSG.replace(PROVIDED_TYPE, typeName).replace(IO_KIND, kind);
-        }
-        case TypeNature.INVALID: {
-            return DM_TYPES_INVALID_MSG.replace(PROVIDED_TYPE, typeName);
-        }
-        case TypeNature.NOT_FOUND: {
-            return DM_TYPES_NOT_FOUND_MSG;
-        }
-        case TypeNature.TYPE_UNAVAILABLE: {
-            return DM_TYPE_UNAVAILABLE_MSG;
-        }
-        case TypeNature.PARAM_NAME_UNAVAILABLE: {
-            return DM_PARAM_NAME_UNAVAILABLE_MSG;
-        }
-    }
-}
-
-export function getTypeFromTypeDesc(typeDesc: TypeDescriptor) {
-    if (typeDesc && STKindChecker.isSimpleNameReference(typeDesc)) {
-        return !typeDesc.name.isMissing ? typeDesc.name.value : typeDesc?.source?.trim();
-    } else if (typeDesc && STKindChecker.isQualifiedNameReference(typeDesc)) {
-        return typeDesc.source?.trim();
-    } else if (typeDesc && STKindChecker.isArrayTypeDesc(typeDesc)) {
-        return typeDesc.memberTypeDesc.source;
-    }
-    return typeDesc?.source?.trim() || "";
-}
-
-export function getModifiedTargetPosition(
-    currentRecords: string[],
-    currentTargetPosition: NodePosition,
-    projectComponents: BallerinaProjectComponents,
-    filePath: string
-) {
-    if (currentRecords.length === 0) {
-        return currentTargetPosition;
-    } else {
-        if (projectComponents) {
-            const recordsWithinFile = projectComponents.packages
-            .flatMap(pkg => pkg.modules
-                .flatMap(mdl => mdl.records
-                    .filter(record => pkg.filePath + record.filePath === `file://${filePath}`)
-                )
-            );
-            const recordWithHighestEndLine = recordsWithinFile.reduce((prev, current) => {
-                return (prev.endLine > current.endLine) ? prev : current
-            });
-            if (recordWithHighestEndLine) {
-                return {
-                    endColumn: 0,
-                    endLine: recordWithHighestEndLine.endLine + 1,
-                    startColumn: 0,
-                    startLine: recordWithHighestEndLine.endLine + 1,
-                }
-            }
-        }
-        return currentTargetPosition;
-    }
-}
-
-export async function getDiagnosticsForFnName(name: string,
-                                              inputParams: DataMapperInputParam[],
-                                              outputType: string,
-                                              fnST: FunctionDefinition,
-                                              targetPosition: NodePosition,
-                                              currentFileContent: string,
-                                              filePath: string,
-                                              langServerRpcClient: LangClientRpcClient) {
-    const parametersStr = inputParams
-        .map((item) => `${item.type} ${item.name}`)
-        .join(",");
-    const returnTypeStr = outputType ? `returns ${outputType}` : '';
-
-    let stModification: STModification;
-    let fnConfigPosition: NodePosition;
-    let diagTargetPosition: NodePosition;
-    if (fnST && STKindChecker.isFunctionDefinition(fnST)) {
-        fnConfigPosition = {
-            ...fnST?.functionSignature?.position as NodePosition,
-            startLine: (fnST.functionName.position as NodePosition)?.startLine,
-            startColumn: (fnST.functionName.position as NodePosition)?.startColumn
-        }
-        diagTargetPosition = {
-            startLine: (fnST.functionName.position as NodePosition).startLine,
-            startColumn: (fnST.functionName.position as NodePosition).startColumn,
-            endLine: (fnST.functionName.position as NodePosition).endLine,
-            endColumn: (fnST.functionName.position as NodePosition).startColumn + name.length
-        };
-        stModification = updateFunctionSignature(name, parametersStr, returnTypeStr, fnConfigPosition);
-    } else {
-        fnConfigPosition = targetPosition;
-        const fnNameStartColumn = "function ".length + 1;
-        diagTargetPosition = {
-            startLine: targetPosition.startLine + 1,
-            startColumn: targetPosition.startColumn + fnNameStartColumn,
-            endLine: targetPosition.endLine + 1,
-            endColumn: targetPosition.endColumn + (fnNameStartColumn + name.length)
-        };
-        stModification = createFunctionSignature(
-            "",
-            name,
-            parametersStr,
-            returnTypeStr,
-            targetPosition,
-            false,
-            true,
-            outputType ? `{}` : `()`  // TODO: Find default value for selected output type when DM supports types other than records
-        );
-    }
-    const source = getSource(stModification);
-    const content = addToTargetPosition(currentFileContent, fnConfigPosition, source);
-
-    const diagnostics = await getVirtualDiagnostics(filePath, currentFileContent, content, langServerRpcClient);
-
-    return getSelectedDiagnostics(diagnostics, diagTargetPosition, 0, name.length);
-}
-
-export async function getDefaultFnName(
-    filePath: string,
-    targetPosition: NodePosition,
-    langServerRpcClient: LangClientRpcClient
-): Promise<string> {
-    const completionParams: CompletionParams = {
-        textDocument: {
-            uri: URI.file(filePath).toString()
-        },
-        position: {
-            character: targetPosition.endColumn,
-            line: targetPosition.endLine
-        },
-        context: {
-            triggerKind: 3
-        }
-    };
-    const completions = (await langServerRpcClient.getCompletion(completionParams)).completions;
-    const existingFnNames = completions.map((completion) => {
-        if (completion.kind === CompletionItemKind.Function) {
-            return completion?.filterText;
-        }
-    }).filter((name) => name !== undefined);
-
-    let suffixIndex = 2;
-    while (existingFnNames.includes(`${DM_DEFAULT_FUNCTION_NAME}${suffixIndex}`)) {
-        suffixIndex++;
-    }
-
-    return `${DM_DEFAULT_FUNCTION_NAME}${suffixIndex}`;
-}
-
-async function getVirtualDiagnostics(filePath: string,
-                                     currentFileContent: string,
-                                     newContent: string,
-                                     langServerRpcClient: LangClientRpcClient): Promise<Diagnostic[]> {
-    const docUri = URI.file(filePath).toString();
-    langServerRpcClient.didChange({
-        contentChanges: [
-            {
-                text: newContent
-            }
-        ],
-        textDocument: {
-            uri: docUri,
-            version: 1
-        }
-    });
-    const diagResp = await langServerRpcClient.getDiagnostics({
-        documentIdentifier: {
-            uri: docUri,
-        }
-    });
-    langServerRpcClient.didChange({
-        contentChanges: [
-            {
-                text: currentFileContent
-            }
-        ],
-        textDocument: {
-            uri: docUri,
-            version: 1
-        }
-    });
-
-    return diagResp.diagnostics[0]?.diagnostics || [];
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Context/current-file-context.ts b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Context/current-file-context.ts
deleted file mode 100644
index 797a75f1bc9..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Context/current-file-context.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-
-export interface CurrentFile {
-    content: string;
-    path: string;
-    size: number;
-}
-
-export const CurrentFileContext = React.createContext<CurrentFile>(undefined);
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/DataMapper.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/DataMapper.tsx
deleted file mode 100644
index 7a9eb366d79..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/DataMapper.tsx
+++ /dev/null
@@ -1,609 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React, { useEffect, useMemo, useReducer, useState } from "react";
-
-import { css, keyframes } from "@emotion/css";
-import {
-    EVENT_TYPE,
-    FileListEntry,
-    MACHINE_VIEW,
-    VisualizerLocation
-} from "@wso2/ballerina-core";
-import { NodePosition, STNode, traversNode } from "@wso2/syntax-tree";
-
-import { useDMSearchStore, useDMStore } from "../../store/store";
-import { DataMapperContext } from "../../utils/DataMapperContext/DataMapperContext";
-import DataMapperDiagram from "../Diagram/Diagram";
-import { DataMapperNodeModel } from "../Diagram/Node/commons/DataMapperNode";
-import { hasIONodesPresent } from "../Diagram/utils/dm-utils";
-import { FunctionDefinitionStore } from "../Diagram/utils/fn-definition-store";
-import { handleDiagnostics } from "../Diagram/utils/ls-utils";
-import { TypeDescriptorStore, TypeStoreStatus } from "../Diagram/utils/type-descriptor-store";
-import { NodeInitVisitor } from "../Diagram/visitors/NodeInitVisitor";
-import { SelectedSTFindingVisitor } from "../Diagram/visitors/SelectedSTFindingVisitor";
-import { ViewStateSetupVisitor } from "../Diagram/visitors/ViewStateSetupVisitor";
-import { StatementEditorComponent } from "../StatementEditorComponent/StatementEditorComponent"
-
-import { DataMapperInputParam, DataMapperOutputParam, TypeNature } from "./ConfigPanel/InputParamsPanel/types";
-import { getFnNameFromST, getFnSignatureFromST, getInputsFromST, getOutputTypeFromST } from "./ConfigPanel/utils";
-import { CurrentFileContext } from "./Context/current-file-context";
-import { ErrorNodeKind } from "./Error/RenderingError";
-import { DataMapperErrorBoundary } from "./ErrorBoundary";
-import { DataMapperHeader } from "./Header/DataMapperHeader";
-import { UnsupportedDataMapperHeader } from "./Header/UnsupportedDataMapperHeader";
-import { LocalVarConfigPanel } from "./LocalVarConfigPanel/LocalVarConfigPanel";
-import { isArraysSupported } from "./utils";
-import { useFileContent, useDMMetaData, useProjectComponents } from "../Hooks";
-import { DataMapperViewProps } from "../..";
-import { WarningBanner } from "./Warning/DataMapperWarning";
-
-import { useRpcContext } from "@wso2/ballerina-rpc-client";
-import { QueryExprMappingType } from "../Diagram/Node/QueryExpression";
-import { IOErrorComponent, UnsupportedIOErrorComponent } from "./Error/DataMapperError";
-import { SkeletonLoader } from './SkeletonLoader/SkeletonLoader';
-
-const fadeIn = keyframes`
-    from { opacity: 0.5; }
-    to { opacity: 1; }
-`;
-
-const classes = {
-    root: css({
-        flexGrow: 1,
-        height: "100%",
-        overflow: "hidden",
-    }),
-    gridContainer: css({
-        height: "100%",
-        gridTemplateColumns: "1fr fit-content(200px)"
-    }),
-    paper: css({
-        padding: "16px",
-        textAlign: 'center',
-        color: "var(--vscode-foreground)",
-    }),
-    overlay: css({
-        zIndex: 1,
-        position: 'absolute',
-        width: '100%',
-        height: '100%',
-        background: "var(--vscode-input-background)",
-        opacity: 0.5,
-        cursor: 'not-allowed'
-    }),
-    dmUnsupportedOverlay: css({
-        zIndex: 1,
-        position: 'absolute',
-        width: '100%',
-        height: '100%',
-        background: "var(--vscode-input-background)",
-        opacity: 0.5,
-    }),
-    dmUnsupportedMessage: css({
-        zIndex: 1,
-        position: 'absolute',
-        left: '50%',
-        transform: 'translateX(-50%)'
-    }),
-    errorBanner: css({
-        borderColor: "var(--vscode-errorForeground)"
-    }),
-    errorMessage: css({
-        zIndex: 1,
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        width: '500px',
-        animation: `${fadeIn} 0.5s ease-in-out`
-    })
-}
-
-export enum ViewOption {
-    INITIALIZE,
-    EXPAND,
-    COLLAPSE,
-    NAVIGATE,
-    RESET,
-}
-
-export interface SelectionState {
-    selectedST: DMNode;
-    prevST?: DMNode[];
-    state?: DMState;
-}
-
-export interface ExpressionInfo {
-    value: string;
-    valuePosition: NodePosition;
-    label?: string;
-}
-
-export interface InternalError {
-    hasError: boolean;
-    message?: string;
-}
-
-export interface DMNode {
-    // the parent node of the selected node
-    stNode: STNode;
-    // fqn for identifying the query expression view
-    fieldPath: string;
-    // position of the query expression (use to identify query expressions comes under select clauses)
-    position?: NodePosition;
-    // index of the select clause of chanined query expression
-    index?: number;
-    // nature of the query expression
-    mappingType?: QueryExprMappingType;
-}
-
-enum DMState {
-    INITIALIZED,
-    NOT_INITIALIZED,
-    ST_NOT_FOUND,
-}
-
-const selectionReducer = (state: SelectionState, action: { type: ViewOption, payload?: SelectionState, index?: number }) => {
-    switch (action.type) {
-        case ViewOption.EXPAND: {
-            const previousST = state.prevST.length ? [...state.prevST, state.selectedST] : [state.selectedST];
-            return { ...state, selectedST: action.payload.selectedST, prevST: previousST };
-        }
-        case ViewOption.COLLAPSE: {
-            const prevSelection = state.prevST.pop();
-            return { ...state, selectedST: prevSelection, prevST: [...state.prevST] };
-        }
-        case ViewOption.NAVIGATE: {
-            const targetST = state.prevST[action.index];
-            return { ...state, selectedST: targetST, prevST: [...state.prevST.slice(0, action.index)] };
-        }
-        case ViewOption.RESET: {
-            return { selectedST: { stNode: undefined, fieldPath: undefined }, prevST: [], state: state.selectedST?.stNode ? DMState.ST_NOT_FOUND : DMState.INITIALIZED };
-        }
-        case ViewOption.INITIALIZE: {
-            return { selectedST: action.payload.selectedST, prevST: action.payload.prevST, state: DMState.INITIALIZED };
-        }
-        default: {
-            return state;
-        }
-    }
-};
-
-export function DataMapperC(props: DataMapperViewProps) {
-    const {
-        fnST,
-        filePath,
-        langServerRpcClient,
-        libraryBrowserRpcClient,
-        applyModifications,
-        onClose,
-        goToFunction: updateSelectedComponent,
-        renderRecordPanel
-    } = props;
-    const openedViaPlus = false;
-    const updateActiveFile: (currentFile: FileListEntry) => void = undefined;
-
-    const {
-        projectComponents,
-        isFetching: isFetchingComponents,
-    } = useProjectComponents(langServerRpcClient, filePath, fnST.source);
-    const { 
-        ballerinaVersion,
-        dMSupported,
-        dMUnsupportedMessage,
-        isFetching: isFetchingDMMetaData,
-        isError: isErrorDMMetaData
-    } = useDMMetaData(langServerRpcClient);
-    const {
-        content,
-        isFetching: isFetchingContent
-    } = useFileContent(langServerRpcClient, filePath, fnST);
-
-    const [currentEditableField, setCurrentEditableField] = useState<ExpressionInfo>(null);
-    const [isStmtEditorCanceled, setIsStmtEditorCanceled] = useState(false);
-    const [showDMOverlay, setShowDMOverlay] = useState(false);
-    const [selection, dispatchSelection] = useReducer(selectionReducer, {
-        selectedST: { stNode: fnST, fieldPath: fnST && fnST.functionName.value },
-        prevST: [],
-        state: DMState.NOT_INITIALIZED,
-    });
-    const [collapsedFields, setCollapsedFields] = React.useState<string[]>([]);
-    const [inputs, setInputs] = useState<DataMapperInputParam[]>();
-    const [output, setOutput] = useState<DataMapperOutputParam>();
-    const [fnName, setFnName] = useState(getFnNameFromST(fnST));
-    const [fnSignature, setFnSignature] = useState(getFnSignatureFromST(fnST));
-    const [showLocalVarConfigPanel, setShowLocalVarConfigPanel] = useState(false);
-    const { setFunctionST } = useDMStore();
-    const { resetSearchStore } = useDMSearchStore();
-    const [dmContext, setDmContext] = useState<DataMapperContext>();
-    const [dmNodes, setDmNodes] = useState<DataMapperNodeModel[]>();
-    const [shouldRestoreTypes, setShouldRestoreTypes] = useState(true);
-    const [internalError, setInternalError] = useState<InternalError>();
-    const [errorKind, setErrorKind] = useState<ErrorNodeKind>();
-    const [isSelectionComplete, setIsSelectionComplete] = useState(false);
-    const [currentReferences, setCurrentReferences] = useState<string[]>([]);
-
-    const typeStore = TypeDescriptorStore.getInstance();
-    const typeStoreStatus = typeStore.getStatus();
-    const { rpcClient } = useRpcContext();
-
-    const goToSource = (position: NodePosition) => {
-        rpcClient.getCommonRpcClient().goToSource({ position, filePath });
-    };
-
-    const isOverlay = (!isFetchingDMMetaData && !isErrorDMMetaData) && (showDMOverlay || showLocalVarConfigPanel);
-
-    const handleSelectedST = (mode: ViewOption, selectionState?: SelectionState, navIndex?: number) => {
-        dispatchSelection({ type: mode, payload: selectionState, index: navIndex });
-        resetSearchStore();
-    }
-
-    const handleCurrentReferences = (referencedFields: string[]) => {
-        setCurrentReferences(referencedFields);
-    }
-
-    const onEdit = () => {
-        const context: VisualizerLocation = {
-            view: MACHINE_VIEW.BIDataMapperForm,
-            identifier: fnST.functionName.value,
-            documentUri: filePath,
-        };
-        rpcClient.getVisualizerRpcClient().openView({ type: EVENT_TYPE.OPEN_VIEW, location: context });
-    };
-
-    const enableStatementEditor = (expressionInfo: ExpressionInfo) => {
-        setCurrentEditableField(expressionInfo);
-    }
-
-    const closeStatementEditor = () => {
-        setCurrentEditableField(null);
-    }
-
-    const cancelStatementEditor = () => {
-        setCurrentEditableField(null);
-        setIsStmtEditorCanceled(true);
-    }
-
-    const handleCollapse = (fieldName: string, expand?: boolean) => {
-        if (!expand) {
-            setCollapsedFields((prevState) => [...prevState, fieldName]);
-        }
-        else {
-            setCollapsedFields((prevState) => prevState.filter((element) => element !== fieldName));
-        }
-    }
-
-    const handleOverlay = (showOverlay: boolean) => {
-        setShowDMOverlay(showOverlay);
-    }
-
-    const handleLocalVarConfigPanel = (showPanel: boolean) => {
-        setShowLocalVarConfigPanel(showPanel);
-    }
-
-    const recordPanel = (props: {
-        targetPosition: NodePosition,
-        closeAddNewRecord: (createdNewRecord?: string) => void,
-        onUpdate: (updated: boolean) => void
-    }) => {
-            return renderRecordPanel({
-                langServerRpcClient,
-                libraryBrowserRpcClient,
-                applyModifications,
-                currentFile,
-                onCancelStatementEditor: cancelStatementEditor,
-                onClose: closeStatementEditor,
-                importStatements,
-                currentReferences,
-                ...props
-            });
-    }
-
-    const referenceManager = {
-        currentReferences,
-        handleCurrentReferences
-    }
-
-    const currentFile = useMemo(() => ({
-        content: content ? content[0] : "",
-        path: filePath,
-        size: 1
-    }), [content, isFetchingContent]);
-
-    const importStatements = useMemo(() => content ? content[1] : [], [content, isFetchingContent]);
-
-    const moduleComponents = useMemo(() => {
-        const moduleVars = [];
-        const consts = [];
-        const enums = [];
-        const functions = [];
-        if (projectComponents && projectComponents.packages) {
-            for (const pkg of projectComponents.packages) {
-                for (const mdl of pkg.modules) {
-                    for (const moduleVariable of mdl.moduleVariables) {
-                        moduleVars.push(moduleVariable);
-                    }
-                    for (const constant of mdl.constants) {
-                        consts.push(constant);
-                    }
-                    for (const enumType of mdl.enums) {
-                        enums.push({
-                            filePath: pkg.filePath,
-                            enum: enumType,
-                        });
-                    }
-                    for (const fn of mdl.functions) {
-                        functions.push(fn);
-                    }
-                }
-            }
-        }
-        return {
-            moduleVarDecls: moduleVars,
-            constDecls: consts,
-            enumDecls: enums,
-            functions: functions
-        };
-    }, [projectComponents, isFetchingComponents]);
-
-    const autoMapWithAI = async () => {
-        rpcClient.getAiPanelRpcClient().generateMappings({position: fnST.position, filePath});
-    };
-
-    useEffect(() => {
-        if (fnST) {
-            const defaultSt = { stNode: fnST, fieldPath: fnST.functionName.value };
-            if (selection.selectedST) {
-                try {
-                    traversNode(fnST, new ViewStateSetupVisitor());
-                    const selectedSTFindingVisitor = new SelectedSTFindingVisitor([...selection.prevST, selection.selectedST]);
-                    traversNode(fnST, selectedSTFindingVisitor);
-                    const { selectedST, prevST } = selectedSTFindingVisitor.getST();
-
-                    dispatchSelection({ type: ViewOption.INITIALIZE, payload: { prevST, selectedST: selectedST || defaultSt } });
-                } catch (e) {
-                    setInternalError({ hasError: true});
-                    // tslint:disable-next-line:no-console
-                    console.error(e);
-                }
-            } else {
-                dispatchSelection({ type: ViewOption.INITIALIZE, payload: { prevST: [], selectedST: defaultSt } });
-            }
-        } else {
-            dispatchSelection({ type: ViewOption.RESET });
-        }
-        setFunctionST(fnST);
-        setShouldRestoreTypes(true);
-        const fnSignatureFromFnST = getFnSignatureFromST(fnST);
-        const fnNameFromFnST = getFnNameFromST(fnST);
-        if (!(inputs && output) || (fnST && fnSignatureFromFnST !== fnSignature && fnNameFromFnST !== fnName)) {
-            const fnSTFromTypeStore = typeStore.getSTNode();
-            const hasFnSwitched = fnST && fnSTFromTypeStore && (
-                fnNameFromFnST !== getFnNameFromST(fnSTFromTypeStore)
-                || fnSignatureFromFnST !== getFnSignatureFromST(fnSTFromTypeStore)
-            );
-            if (hasFnSwitched || (!(inputs && output) && (!fnSTFromTypeStore || openedViaPlus))) {
-                typeStore.resetStatus();
-                setInputs(undefined);
-                setOutput(undefined);
-            }
-            setFnSignature(fnSignatureFromFnST);
-            setFnName(fnNameFromFnST);
-        }
-    }, [fnST]);
-
-    useEffect(() => {
-        setIsSelectionComplete(false)
-        void (async () => {
-            if (selection.selectedST.stNode && !isFetchingComponents && !isFetchingDMMetaData) {
-                const diagnostics = await handleDiagnostics(filePath, langServerRpcClient);
-
-                const context = new DataMapperContext(
-                    filePath,
-                    fnST,
-                    selection,
-                    langServerRpcClient,
-                    currentFile,
-                    moduleComponents,
-                    handleSelectedST,
-                    goToSource,
-                    diagnostics,
-                    enableStatementEditor,
-                    collapsedFields,
-                    handleCollapse,
-                    isStmtEditorCanceled,
-                    handleOverlay,
-                    ballerinaVersion,
-                    handleLocalVarConfigPanel,
-                    applyModifications,
-                    updateActiveFile,
-                    updateSelectedComponent,
-                    referenceManager
-                );
-
-                if (shouldRestoreTypes) {
-                    await typeStore.storeTypeDescriptors(fnST, context, isArraysSupported(ballerinaVersion), langServerRpcClient);
-                    const functionDefinitions = FunctionDefinitionStore.getInstance();
-                    await functionDefinitions.storeFunctionDefinitions(fnST, context, langServerRpcClient);
-                    setShouldRestoreTypes(false);
-                }
-
-                setDmContext(context);
-            }
-        })();
-        setIsSelectionComplete(true)
-    }, [selection.selectedST, collapsedFields, isStmtEditorCanceled, isFetchingComponents, isFetchingDMMetaData]);
-
-    useEffect(() => {
-        if (isSelectionComplete && dmContext && selection?.selectedST?.stNode) {
-            const nodeInitVisitor = new NodeInitVisitor(dmContext, selection);
-            try {
-                traversNode(selection.selectedST.stNode, nodeInitVisitor);
-                const nodes = nodeInitVisitor.getNodes();
-                if (hasIONodesPresent(nodes) && typeStoreStatus === TypeStoreStatus.Loaded) {
-                    setDmNodes(nodes);
-                }
-            } catch (e) {
-                setInternalError({ hasError: true, message: e.message});
-                // tslint:disable-next-line:no-console
-                console.error(e);
-            }
-        } else {
-            setDmNodes([]);
-        }
-    }, [isSelectionComplete, dmContext, typeStoreStatus]);
-
-    useEffect(() => {
-        let inputParams: DataMapperInputParam[] = [];
-        let outputType: DataMapperOutputParam = { type: undefined, isUnsupported: true, typeNature: TypeNature.DUMMY };
-        const hasIncompleteInputs = inputs && inputs.some(i => i.isUnsupported && (
-            i.typeNature === TypeNature.TYPE_UNAVAILABLE
-            || i.typeNature === TypeNature.PARAM_NAME_UNAVAILABLE
-            || i.typeNature === TypeNature.INVALID)
-        );
-        const hasIncompleteOutput = output && output.isUnsupported
-            && (output.typeNature === TypeNature.INVALID || output.typeNature === TypeNature.TYPE_UNAVAILABLE);
-        if (selection.prevST.length === 0
-            && typeStoreStatus === TypeStoreStatus.Loaded
-            && ((!hasInvalidIO) || hasIncompleteInputs || hasIncompleteOutput)) {
-            if (fnST && selection.state === DMState.INITIALIZED) {
-                // When open the DM of an existing function using code lens
-                const hasNoParameter = fnST.functionSignature.parameters.length === 0;
-                const hasNoReturnType = !fnST.functionSignature?.returnTypeDesc;
-                if (!hasNoParameter) {
-                    inputParams = getInputsFromST(fnST, ballerinaVersion) || inputParams;
-                    setInputs(inputParams);
-                }
-                if (!hasNoReturnType) {
-                    outputType = getOutputTypeFromST(fnST, ballerinaVersion) || outputType;
-                    setOutput(outputType);
-                }
-                if (!inputs && !output) {
-                    setInputs(inputParams);
-                    setOutput(outputType);
-                }
-            }
-        } else if (typeStoreStatus === TypeStoreStatus.Init && openedViaPlus) {
-            // When creating a new DM using plus menu
-            setInputs(inputParams);
-            setOutput(outputType);
-        }
-    }, [fnSignature, typeStoreStatus]);
-
-    useEffect(() => {
-        if (selection.state === DMState.ST_NOT_FOUND) {
-            onClose();
-        }
-    }, [selection.state])
-
-    const hasInvalidIO = useMemo(() => {
-        if (inputs && output) {
-            const hasInvalidInputs = !inputs.length || inputs.some(input => input.isUnsupported);
-            const isInvalidOutput = output.isUnsupported;
-            return hasInvalidInputs || isInvalidOutput;
-        }
-    }, [inputs, output])
-
-    useEffect(() => {
-        handleOverlay(!!currentEditableField || !selection?.selectedST?.stNode || hasInvalidIO);
-    }, [currentEditableField, selection.selectedST, hasInvalidIO])
-
-    useEffect(() => {
-        resetSearchStore();
-    }, [fnName]);
-
-    const handleErrors = (kind: ErrorNodeKind) => {
-        setErrorKind(kind);
-    };
-
-    const handleBack = () => {
-        rpcClient.getVisualizerRpcClient()?.goBack();
-    };
-
-    return (
-        <DataMapperErrorBoundary hasError={internalError?.hasError} message={internalError?.message}>
-            <CurrentFileContext.Provider value={currentFile}>
-                {selection.state === DMState.INITIALIZED && (
-                    <div className={classes.root}>
-                        {isOverlay &&
-                            <>
-                                <div className={dMSupported ? classes.overlay : classes.dmUnsupportedOverlay} />
-                            </>
-                        }
-                        {fnST && (
-                            <DataMapperHeader
-                                selection={selection}
-                                hasEditDisabled={!dMSupported || !!errorKind}
-                                changeSelection={handleSelectedST}
-                                onClose={onClose}
-                                autoMapWithAI={autoMapWithAI}
-                                onEdit={onEdit}
-                                onBack={handleBack}
-                            />
-                        )}
-                        {(!isFetchingDMMetaData && !isErrorDMMetaData) && !dMSupported && (
-                            <>
-                                {!fnST && (<UnsupportedDataMapperHeader onClose={onClose} />)}
-                                <div className={classes.dmUnsupportedMessage}>
-                                    <WarningBanner message={dMUnsupportedMessage} testId={"warning-message"} />
-                                </div>
-                            </>
-                        )}
-                        {errorKind && <IOErrorComponent errorKind={errorKind} classes={classes} />}
-                        {dmNodes.length > 0 && !hasInvalidIO && !errorKind && (
-                            <DataMapperDiagram
-                                nodes={dmNodes}
-                                onError={handleErrors}
-                            />
-                        )}
-                        {dmNodes.length === 0 && !errorKind && (
-                            <SkeletonLoader />
-                        )}
-                        {hasInvalidIO && <UnsupportedIOErrorComponent inputs={inputs} output={output} classes={classes} />}
-                        {!!currentEditableField && dMSupported && (
-                            <StatementEditorComponent
-                                expressionInfo={currentEditableField}
-                                langServerRpcClient={langServerRpcClient}
-                                libraryBrowserRpcClient={libraryBrowserRpcClient}
-                                applyModifications={applyModifications}
-                                currentFile={currentFile}
-                                onCancel={cancelStatementEditor}
-                                onClose={closeStatementEditor}
-                                importStatements={importStatements}
-                                currentReferences={currentReferences}
-                            />
-                        )}
-                        {showLocalVarConfigPanel && (
-                            <LocalVarConfigPanel
-                                handleLocalVarConfigPanel={handleLocalVarConfigPanel}
-                                enableStatementEditor={enableStatementEditor}
-                                fnDef={selection.selectedST.stNode}
-                                applyModifications={applyModifications}
-                                langServerRpcClient={langServerRpcClient}
-                                filePath={filePath}
-                            />
-                        )}
-                    </div>
-                )}
-            </CurrentFileContext.Provider>
-        </DataMapperErrorBoundary>
-    )
-}
-
-export const DataMapper = React.memo(DataMapperC);
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Error/AutoMapError.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Error/AutoMapError.tsx
deleted file mode 100644
index 95d1e36f3fd..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Error/AutoMapError.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React from 'react';
-
-import { Button, Typography } from '@wso2/ui-toolkit';
-import { css } from '@emotion/css';
-import { ISSUES_URL } from '../utils';
-
-const useStyles = (() => ({
-    errorContainer: css({
-        display: 'flex',
-        flexDirection: 'column'
-    }),
-    closeButton: css({
-        marginTop: '20px',
-        textTransform: 'none',
-        alignSelf: 'flex-end',
-        justifySelf: 'flex-start',
-    })
-}))
-
-export interface AutoMapError {
-    code: number;
-    onClose: () => void;
-    message?: string;
-}
-
-export function AutoMapError(props: AutoMapError) {
-    const { code, onClose, message } = props;
-    const classes = useStyles();
-
-    let errorMessage = "Request timeout exceeded. Please try again.";
-
-    if (message) {
-        errorMessage = message;
-    }
-
-    function shouldRenderGithubRepo(errorCode: number): boolean {
-        switch (errorCode) {
-            case 3:
-            case 4:
-            case 5:
-                return true;
-            default:
-                return false;
-        }
-    }
-
-    return (
-        <div className={classes.errorContainer}>
-            <Typography variant="body2">
-                {errorMessage}
-            </Typography>
-            {shouldRenderGithubRepo(code) && (
-                <Typography >
-                    Please raise an issue with a sample code in our <a href={ISSUES_URL}>issue tracker.</a>
-                </Typography>
-            )}
-            <Button
-                onClick={onClose}
-                className={classes.closeButton}
-            >
-                {'Close'}
-            </Button>
-        </div>
-    )
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Error/DataMapperError.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Error/DataMapperError.tsx
deleted file mode 100644
index 947bb98c534..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Error/DataMapperError.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-
-import React from 'react';
-
-
-import { AutoMapError } from './AutoMapError';
-import { ErrorNodeKind, RenderingError } from './RenderingError';
-import { WarningBanner } from '../Warning/DataMapperWarning';
-import { DataMapperInputParam, DataMapperOutputParam } from '../ConfigPanel/InputParamsPanel/types';
-
-// Function to render WarningBanner with error message
-const renderWarningBanner = (classes: any, message: React.ReactNode) => (
-    <WarningBanner
-        message={message}
-        className={classes.errorBanner}
-    />
-);
-
-// Function to render error message with overlay
-const renderErrorMessage = (classes: any, errorMessage: React.ReactNode) => (
-    <>
-        <div className={classes.overlay} />
-        <div className={classes.errorMessage}>
-            {errorMessage}
-        </div>
-    </>
-);
-
-// Component to render error based on error kind
-export const IOErrorComponent: React.FC<{
-    errorKind: ErrorNodeKind;
-    classes: any
-}> = ({ errorKind, classes }) => {
-    if (errorKind) {
-        const errorMessage = <RenderingError errorNodeKind={errorKind} />;
-        return renderErrorMessage(classes, renderWarningBanner(classes, errorMessage));
-    }
-    return null;
-};
-
-// Component to render auto map error
-export const AutoMapErrorComponent: React.FC<{
-    autoMapError: AutoMapError;
-    classes: any
-}> = ({ autoMapError, classes }) => {
-    if (autoMapError) {
-        const errorMessage = <AutoMapError {...autoMapError} />;
-        return renderErrorMessage(classes, renderWarningBanner(classes, errorMessage));
-    }
-    return null;
-};
-
-// Component to render error for unsupported IO
-export const UnsupportedIOErrorComponent: React.FC<{
-    inputs: DataMapperInputParam[];
-    output: DataMapperOutputParam;
-    classes: any;
-}> = ({ inputs, output, classes }) => {
-    const hasInvalidInputs = inputs.some(input => input.isUnsupported);
-    const hasInvalidOutput = output.isUnsupported;
-
-    let errorMsg = `The Data Mapper does not support the selected `;
-    if (hasInvalidInputs) {
-        errorMsg += 'input type(s)';
-    }
-    if (hasInvalidOutput) {
-        errorMsg += `${hasInvalidInputs ? ' and output type.' : 'output type.'}`;
-    } else {
-        errorMsg += '.';
-    }
-    errorMsg += ' Please ensure you are using compatible Record Types or Primitive Types.';
-
-    const errorMessage = <p>{errorMsg}</p>;
-    return renderErrorMessage( classes, renderWarningBanner(classes, errorMessage));
-};
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Error/RenderingError.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Error/RenderingError.tsx
deleted file mode 100644
index 688474386ca..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Error/RenderingError.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React from 'react';
-import { ISSUES_URL } from '../utils';
-
-export enum ErrorNodeKind {
-    Input,
-    Output,
-    Intermediate,
-    UnsupportedIO,
-    Other
-}
-
-export interface DataMapperErrorProps {
-    errorNodeKind?: ErrorNodeKind;
-}
-
-export function RenderingError(props: DataMapperErrorProps) {
-    const { errorNodeKind } = props;
-
-    let errorMessage = "A problem occurred while rendering the ";
-    switch (errorNodeKind) {
-        case ErrorNodeKind.Input:
-            errorMessage += "input.";
-            break;
-        case ErrorNodeKind.Output:
-            errorMessage += "output.";
-            break;
-        default:
-            errorMessage += "diagram.";
-    }
-
-    return (
-        <>
-            <p>
-                {errorMessage}
-            </p>
-            <p>
-                Please raise an issue with the sample code in our <a href={ISSUES_URL}>issue tracker</a>
-            </p>
-        </>
-    )
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ErrorBoundary/index.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ErrorBoundary/index.tsx
deleted file mode 100644
index 5d222ac1fb9..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/ErrorBoundary/index.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import * as React from "react";
-
-import { WarningBanner } from "../Warning/DataMapperWarning";
-import { css, keyframes } from "@emotion/css";
-import { Typography } from "@wso2/ui-toolkit";
-import { ISSUES_URL } from "../utils";
-
-const fadeIn = keyframes`
-    from { opacity: 0.5; }
-    to { opacity: 1; }
-`;
-
-const classes = {
-  errorContainer: css({
-    display: 'flex',
-    flexDirection: 'column',
-    opacity: 0.7
-  }),
-  errorBanner: css({
-      borderColor: "var(--vscode-errorForeground)"
-  }),
-  errorMessage: css({
-      zIndex: 1,
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      width: '500px',
-      animation: `${fadeIn} 0.5s ease-in-out`
-  }),
-  errorTitle: css({
-    marginTop: "10px"
-  })
-}
-
-export interface DataMapperErrorBoundaryProps {
-    hasError: boolean;
-    message?: string;
-    children?: React.ReactNode;
-}
-
-export class DataMapperErrorBoundaryC extends React.Component<DataMapperErrorBoundaryProps, { hasError: boolean, message: string }> {
-    state = { hasError: false, message: "" }
-
-    static getDerivedStateFromProps(props: DataMapperErrorBoundaryProps) {
-        return {
-            hasError: props.hasError,
-            message: props.message
-        };
-    }
-
-    static getDerivedStateFromError() {
-      return { hasError: true };
-    }
-
-    componentDidCatch(error: any, errorInfo: any) {
-      // tslint:disable: no-console
-      console.error(error, errorInfo);
-    }
-
-    defaultContent = (
-      <div className={classes.errorContainer}>
-        <Typography variant="body2">
-          A problem occurred while rendering the Data Mapper.
-        </Typography>
-        <Typography variant="body2">
-          Please raise an issue with the sample code in our <a href={ISSUES_URL}>issue tracker</a>
-        </Typography>
-      </div>
-    );
-
-    render() {
-      if (this.state.hasError) {
-        return (
-          <div className={classes.errorMessage}>
-            <WarningBanner message={(
-              this.state.message || this.defaultContent
-            )}
-            />
-          </div>
-        );
-      }
-      return this.props?.children;
-    }
-}
-
-export const DataMapperErrorBoundary = DataMapperErrorBoundaryC;
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/AutoMapButton.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/AutoMapButton.tsx
deleted file mode 100644
index c686db3079a..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/AutoMapButton.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React from "react";
-
-import { Button, Codicon, Tooltip } from "@wso2/ui-toolkit";
-
-import { useMediaQuery } from "../utils";
-
-interface AutoMapButtonProps {
-    onClick: () => void;
-    disabled?: boolean;
-}
-
-export default function AutoMapButton(props: AutoMapButtonProps) {
-    const { onClick, disabled } = props;
-    const showText = useMediaQuery('(min-width:800px)');
-
-    return (
-        <Tooltip content={"Create mapping using AI"} position="bottom-start">
-            <Button
-                onClick={onClick}
-                appearance="secondary"
-                disabled={disabled}
-            >
-                <Codicon name="wand" sx={{ marginRight: 5 }} />
-                {showText ? 'Auto Map' : null}
-            </Button>
-        </Tooltip>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/DataMapperHeader.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/DataMapperHeader.tsx
deleted file mode 100644
index 60d55398d2e..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/DataMapperHeader.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React from "react";
-
-import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
-import styled from "@emotion/styled";
-import { Codicon, Icon } from "@wso2/ui-toolkit";
-
-import { SelectionState, ViewOption } from "../DataMapper";
-import AutoMapButton from "./AutoMapButton";
-import HeaderBreadcrumb from "./HeaderBreadcrumb";
-import HeaderSearchBox from "./HeaderSearchBox";
-import EditButton from "./EditButton";
-
-export interface DataMapperHeaderProps {
-    selection: SelectionState;
-    hasEditDisabled: boolean;
-    changeSelection: (mode: ViewOption, selection?: SelectionState, navIndex?: number) => void;
-    onEdit: () => void;
-    onClose?: () => void;
-    autoMapWithAI: () => Promise<void>;
-    onBack?: () => void;
-}
-
-export function DataMapperHeader(props: DataMapperHeaderProps) {
-    const {
-        selection,
-        hasEditDisabled,
-        changeSelection,
-        onEdit,
-        onClose,
-        autoMapWithAI,
-        onBack
-    } = props;
-
-    const handleAutoMap = async () => {
-        await autoMapWithAI();
-    };
-
-    return (
-        <HeaderContainer>
-            <IconButton onClick={onBack}>
-                <Icon name="bi-arrow-back" iconSx={{ fontSize: "24px", color: "var(--vscode-foreground)" }} />
-            </IconButton>
-            <BreadCrumb>
-                <Title>Data Mapper</Title>
-                {!hasEditDisabled && (
-                    <HeaderBreadcrumb
-                        selection={selection}
-                        changeSelection={changeSelection}
-                    />
-                )}
-            </BreadCrumb>
-            {!onClose && (
-                <RightContainer isClickable={!hasEditDisabled}>
-                    <FilterBar>
-                        <HeaderSearchBox selection={selection} />
-                    </FilterBar>
-                    <AutoMapButton onClick={handleAutoMap} disabled={hasEditDisabled} />
-                    {<EditButton onClick={onEdit} disabled={hasEditDisabled} />}
-                </RightContainer>
-            )}
-            {onClose && (
-                <VSCodeButton 
-                    appearance="icon"
-                    onClick={onClose}
-                    style={{ marginLeft: "15px" }}
-                >
-                    <Codicon name="chrome-close" />
-                </VSCodeButton>
-            )}
-        </HeaderContainer>
-    );
-}
-
-const HeaderContainer = styled.div`
-    height: 56px;
-    display: flex;
-    padding: 15px;
-    background-color: var(--vscode-editorWidget-background);
-    justify-content: space-between;
-    align-items: center;
-    gap: 12px;
-    border-bottom: 1px solid rgba(102,103,133,0.15);
-`;
-
-const Title = styled.h2`
-    margin: 0;
-    font-size: 20px;
-    font-weight: 600;
-    color: var(--vscode-foreground);
-`;
-
-const BreadCrumb = styled.div`
-    width: 60%;
-    display: flex;
-    align-items: baseline;
-    gap: 12px;
-    margin-left: 12px;
-`;
-
-const FilterBar = styled.div`
-    flex: 3;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-`;
-
-const IconButton = styled.div`
-    padding: 4px;
-    cursor: pointer;
-    border-radius: 4px;
-
-    &:hover {
-        background-color: var(--vscode-toolbar-hoverBackground);
-    }
-
-    & > div:first-child {
-        width: 24px;
-        height: 24px;
-        font-size: 24px;
-    }
-`;
-
-const LeftContainer = styled.div`
-    gap: 12px;
-`;
-
-const RightContainer = styled.div<{ isClickable: boolean }>`
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    pointer-events: ${({ isClickable }) => (isClickable ? 'auto' : 'none')};
-    opacity: ${({ isClickable }) => (isClickable ? 1 : 0.5)};
-`;
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/EditButton.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/EditButton.tsx
deleted file mode 100644
index 864f8b61991..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/EditButton.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React from "react";
-
-import { Button, Icon, Tooltip } from "@wso2/ui-toolkit";
-
-import { useMediaQuery } from "../utils";
-
-interface AutoMapButtonProps {
-    onClick: () => void;
-    disabled?: boolean;
-}
-
-export default function EditButton(props: AutoMapButtonProps) {
-    const { onClick, disabled } = props;
-    const showText = useMediaQuery('(min-width:800px)');
-
-    return (
-        <Tooltip content={"Edit data mapping name, inputs and output"} position="bottom-start">
-            <Button
-                onClick={onClick}
-                appearance="secondary"
-                disabled={disabled}
-            >
-                <Icon name="bi-edit" sx={{ marginRight: 5, width: 16, height: 16, fontSize: 14 }} />
-                {showText ? 'Edit' : null}
-            </Button>
-        </Tooltip>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/HeaderBreadcrumb.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/HeaderBreadcrumb.tsx
deleted file mode 100644
index b9b63dadf0a..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/HeaderBreadcrumb.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React, { useMemo } from 'react';
-
-import { Breadcrumbs, Codicon } from '@wso2/ui-toolkit';
-import { STKindChecker } from "@wso2/syntax-tree";
-
-import { SelectionState, ViewOption } from "../DataMapper";
-import { css } from '@emotion/css';
-
-const useStyles = () => {
-    const baseStyle = {
-        color: "inherit",
-        fontFamily: "var(--vscode-editor-font-family)",
-        fontSize: "13px"
-    };
-
-    return {
-        active: css({
-            ...baseStyle,
-            cursor: "default"
-        }),
-        link: css({
-            ...baseStyle,
-            cursor: "pointer",
-            "&:hover": {
-                color: "var(--vscode-textLink-activeForeground)"
-            }
-        })
-    };
-};
-
-export interface HeaderBreadcrumbProps {
-    selection: SelectionState;
-    changeSelection: (mode: ViewOption, selection?: SelectionState, navIndex?: number) => void;
-}
-
-export default function HeaderBreadcrumb(props: HeaderBreadcrumbProps) {
-    const { selection, changeSelection } = props;
-    const classes = useStyles();
-
-    const [activeLink, links] = useMemo(() => {
-        if (selection.selectedST.stNode) {
-            let isFnDef = STKindChecker.isFunctionDefinition(selection.selectedST.stNode);
-            let label = selection.selectedST.fieldPath;
-            const selectedLink = (
-                <div className={classes.active}>
-                    {isFnDef ? label : `${label}:query`}
-                </div>
-            );
-
-            const restLinks = selection.prevST.length > 0 && (
-                selection.prevST.map((node, index) => {
-                    label = node.fieldPath;
-                    isFnDef = STKindChecker.isFunctionDefinition(node.stNode);
-                    return (
-                        <a
-                            data-index={index}
-                            key={index}
-                            onClick={handleClick}
-                            className={classes.link}
-                            data-testid={`dm-header-breadcrumb-${index}`}
-                        >
-                            {isFnDef ? label : `${label}:query`}
-                        </a>
-                    );
-                })
-            );
-
-            return [selectedLink, restLinks];
-        }
-        return [undefined, undefined];
-    }, [selection]);
-
-    function handleClick(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
-        event.preventDefault();
-        const index: number = +event.currentTarget.getAttribute('data-index');
-        changeSelection(ViewOption.NAVIGATE, undefined, index);
-    }
-
-    return (
-        <Breadcrumbs
-            maxItems={3}
-            separator={<Codicon name="chevron-right" />}
-        >
-            {/* <div className={classes.path}> */}
-                {links}
-                {activeLink}
-            {/* </div> */}
-        </Breadcrumbs>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/HeaderSearchBox.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/HeaderSearchBox.tsx
deleted file mode 100644
index f4036734c1a..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/HeaderSearchBox.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js jsx-no-lambda
-import React, { useEffect, useRef, useState } from 'react';
-
-import debounce from "lodash.debounce";
-import { Codicon, TextField } from '@wso2/ui-toolkit';
-
-import { useDMSearchStore } from "../../../store/store";
-import { SelectionState } from "../DataMapper";
-import { getInputOutputSearchTerms } from "./utils";
-import { HeaderSearchBoxOptions } from './HeaderSearchBoxOptions';
-
-export const INPUT_FIELD_FILTER_LABEL = "in:";
-export const OUTPUT_FIELD_FILTER_LABEL = "out:";
-
-export enum SearchType {
-    INPUT,
-    OUTPUT,
-}
-
-export interface SearchTerm {
-    searchText: string;
-    searchType: SearchType;
-    isLabelAvailable: boolean;
-}
-
-interface SearchBoxProps {
-    selection: SelectionState;
-}
-
-export default function HeaderSearchBox(props: SearchBoxProps) {
-    const { selection } = props;
-
-    const [searchOptions, setSearchOptions] = useState<string[]>([]);
-    const [inputSearchTerm, setInputSearchTerm] = useState<SearchTerm>();
-    const [outputSearchTerm, setOutputSearchTerm] = useState<SearchTerm>();
-
-    const dmStore = useDMSearchStore.getState();
-
-    const searchTermRef = useRef("");
-    const searchInputRef = useRef<HTMLInputElement>(null);
-
-    const searchOptionsData = [
-        { value: INPUT_FIELD_FILTER_LABEL, label: "Filter in inputs" },
-        { value: OUTPUT_FIELD_FILTER_LABEL, label: "Filter in outputs" }
-    ];
-
-    const handleSearchInputChange = (text: string) => {
-        debouncedOnChange(text);
-        searchTermRef.current = text;
-    };
-
-    const handleSearchOptions = (options: string[]) => {
-        setSearchOptions(options);
-    }
-
-    const handleSearch = (term: string) => {
-        const [inSearchTerm, outSearchTerm] = getInputOutputSearchTerms(term);
-        const hasInputFilterLabelChanged = !inputSearchTerm
-            || (inputSearchTerm && inSearchTerm && inputSearchTerm.isLabelAvailable !== inSearchTerm.isLabelAvailable);
-        const hasOutputFilterLabelChanged = !outputSearchTerm
-            || (outputSearchTerm && outSearchTerm && outputSearchTerm.isLabelAvailable !== outSearchTerm.isLabelAvailable);
-
-        if (hasInputFilterLabelChanged || hasOutputFilterLabelChanged) {
-            let modifiedSearchOptions: string[] = searchOptions;
-            if (hasInputFilterLabelChanged) {
-                if (!searchOptions.includes(INPUT_FIELD_FILTER_LABEL)) {
-                    if (inSearchTerm && inSearchTerm.isLabelAvailable) {
-                        modifiedSearchOptions.push(INPUT_FIELD_FILTER_LABEL);
-                    }
-                } else {
-                    if (!inSearchTerm || !inSearchTerm.isLabelAvailable) {
-                        modifiedSearchOptions = modifiedSearchOptions.filter(option => option !== INPUT_FIELD_FILTER_LABEL);
-                    }
-                }
-            }
-            if (hasOutputFilterLabelChanged) {
-                if (!searchOptions.includes(OUTPUT_FIELD_FILTER_LABEL)) {
-                    if (outSearchTerm && outSearchTerm.isLabelAvailable) {
-                        modifiedSearchOptions.push(OUTPUT_FIELD_FILTER_LABEL);
-                    }
-                } else {
-                    if (!outSearchTerm || !outSearchTerm.isLabelAvailable) {
-                        modifiedSearchOptions = modifiedSearchOptions.filter(option => option !== OUTPUT_FIELD_FILTER_LABEL);
-                    }
-                }
-            }
-            handleSearchOptions(modifiedSearchOptions);
-        }
-        setInputSearchTerm(inSearchTerm);
-        setOutputSearchTerm(outSearchTerm);
-        dmStore.setInputSearch(inSearchTerm.searchText.trim());
-        dmStore.setOutputSearch(outSearchTerm.searchText.trim());
-    };
-
-    const handleOnSearchTextClear = () => {
-        handleSearch("");
-        searchTermRef.current = "";
-    };
-
-    useEffect(() => {
-        const [inSearchTerm, outSearchTerm] = getInputOutputSearchTerms(searchTermRef.current);
-        let modifiedSearchTerm = searchTermRef.current;
-        if (searchOptions.includes(INPUT_FIELD_FILTER_LABEL)) {
-            if (inSearchTerm && !inSearchTerm.isLabelAvailable) {
-                modifiedSearchTerm = modifiedSearchTerm.trimEnd() + ` ${INPUT_FIELD_FILTER_LABEL}`;
-            }
-        } else {
-            if (inSearchTerm && inSearchTerm.isLabelAvailable) {
-                modifiedSearchTerm = modifiedSearchTerm.replace(`${INPUT_FIELD_FILTER_LABEL}${inSearchTerm.searchText}`, '');
-            }
-        }
-        if (searchOptions.includes(OUTPUT_FIELD_FILTER_LABEL)) {
-            if (outSearchTerm && !outSearchTerm.isLabelAvailable) {
-                modifiedSearchTerm = modifiedSearchTerm.trimEnd() + ` ${OUTPUT_FIELD_FILTER_LABEL}`;
-            }
-        } else {
-            if (outSearchTerm && outSearchTerm.isLabelAvailable) {
-                modifiedSearchTerm = modifiedSearchTerm.replace(`${OUTPUT_FIELD_FILTER_LABEL}${outSearchTerm.searchText}`, '');
-            }
-        }
-        handleSearch(modifiedSearchTerm);
-        searchTermRef.current = modifiedSearchTerm;
-    }, [searchOptions]);
-
-    useEffect(() => {
-        handleOnSearchTextClear();
-    }, [selection.selectedST.fieldPath]);
-
-    const debouncedOnChange = debounce((value: string) => handleSearch(value), 400);
-    const filterIcon = (<Codicon name="filter" sx= {{ cursor: "auto" }}/>);
-
-    return (
-        <TextField
-            id={`search-${searchOptions}`}
-            icon={{ iconComponent: filterIcon, position: "start" }}
-            placeholder={`filter input and output fields`}
-            value={searchTermRef.current}
-            ref={searchInputRef}
-            onTextChange={handleSearchInputChange}
-            size={100}
-            inputProps={{
-                endAdornment: (
-                    <HeaderSearchBoxOptions
-                        searchTerm={searchTermRef.current}
-                        searchInputRef={searchInputRef}
-                        searchOptions={searchOptions}
-                        handleSearchOptions={handleSearchOptions}
-                        handleOnSearchTextClear={handleOnSearchTextClear}
-                        searchOptionsData={searchOptionsData}
-                    />
-                ),
-            }}
-        />
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/HeaderSearchBoxOptions.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/HeaderSearchBoxOptions.tsx
deleted file mode 100644
index 7d78ae8c089..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/HeaderSearchBoxOptions.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React, { RefObject, useRef, useState } from 'react';
-
-import { CheckBox, CheckBoxGroup, ClickAwayListener, Codicon } from '@wso2/ui-toolkit';
-import styled from '@emotion/styled';
-
-const DropDownContainer = styled.div({
-    position: "absolute",
-    top: "100%",
-    right: "0",
-    zIndex: 5,
-    backgroundColor: "var(--vscode-sideBar-background)",
-    padding: "5px"
-});
-
-const SearchBoxOptionsContainer = styled.div({
-    display: "flex",
-    flexDirection: "row"
-});
-
-interface HeaderSearchBoxOptionsProps {
-    searchTerm: string;
-    searchInputRef: RefObject<HTMLInputElement>;
-    searchOptions: string[];
-    searchOptionsData: { value: string, label: string }[];
-    handleSearchOptions: (options: string[]) => void;
-    handleOnSearchTextClear: () => void;
-}
-
-export function HeaderSearchBoxOptions(props: HeaderSearchBoxOptionsProps) {
-    const {
-        searchTerm,
-        searchInputRef,
-        searchOptions,
-        handleSearchOptions,
-        handleOnSearchTextClear,
-        searchOptionsData
-    } = props;
-
-    const [showSearchOptions, setShowSearchOptions] = useState(false);
-    const showSearchOptionsRef = useRef(null);
-
-    const handleSearchOptionsChange = (checked: boolean, value: string) => {
-        if (checked) {
-            if (searchOptions.indexOf(value) === -1) {
-                handleSearchOptions([value, ...searchOptions]);
-            }
-        } else {
-            handleSearchOptions(searchOptions.filter(option => option !== value));
-        }
-        searchInputRef.current.shadowRoot.querySelector('input').focus();
-    };
-
-    return (
-        <SearchBoxOptionsContainer>
-            {searchTerm && (
-                <Codicon
-                    name="close"
-                    onClick={handleOnSearchTextClear}
-                    sx={{ marginRight: "5px" }}
-                />
-            )}
-
-            <div>
-                <div ref={showSearchOptionsRef}>
-                    <Codicon
-                        name={showSearchOptions ? "chevron-up" : "chevron-down"}
-                        onClick={() => setShowSearchOptions(!showSearchOptions)}
-                    />
-                </div>
-                <ClickAwayListener
-                    onClickAway={() => { setShowSearchOptions(false); }}
-                    anchorEl={showSearchOptionsRef.current}
-                >
-                    {showSearchOptions && (
-                        <DropDownContainer>
-                            <CheckBoxGroup direction="vertical">
-                                {searchOptionsData.map((item) => (
-                                    <CheckBox
-                                        checked={searchOptions.indexOf(item.value) > -1}
-                                        label={item.label}
-                                        onChange={(checked) => {
-                                            handleSearchOptionsChange(checked, item.value);
-                                        }}
-                                        value={item.value}
-                                    />
-                                ))}
-                            </CheckBoxGroup>
-                        </DropDownContainer>
-                    )}
-                </ClickAwayListener>
-            </div>
-        </SearchBoxOptionsContainer>
-    );
-};
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/UnsupportedDataMapperHeader.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/UnsupportedDataMapperHeader.tsx
deleted file mode 100644
index c771d335abb..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/UnsupportedDataMapperHeader.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React from "react";
-
-import styled from "@emotion/styled";
-import { Button, ButtonProps, Codicon } from "@wso2/ui-toolkit";
-
-export interface DataMapperHeaderProps {
-    onClose: () => void;
-}
-
-function Home(props: ButtonProps) {
-    return (
-        <Button
-            appearance="icon"
-            {...props}
-        >
-            <Codicon name="home" /> 
-        </Button>
-    )
-}
-
-export function UnsupportedDataMapperHeader(props: DataMapperHeaderProps) {
-    const { onClose } = props;
-    return (
-        <HeaderContainer>
-            <HomeButton onClick={onClose} />
-            <Title> Data Mapper </Title>
-        </HeaderContainer>
-    );
-}
-
-const HeaderContainer = styled.div`
-    width: 100%;
-    height: 50px;
-    display: flex;
-    padding: 15px;
-    background-color: white;
-`;
-
-const HomeButton = styled(Home)`
-    cursor: pointer;
-    margin-right: 10px;
-`;
-
-const Title = styled.div`
-    font-weight: 600;
-    margin-right: 10px;
-`;
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/utils.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/utils.tsx
deleted file mode 100644
index da19486d2dd..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Header/utils.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { INPUT_FIELD_FILTER_LABEL, OUTPUT_FIELD_FILTER_LABEL, SearchTerm, SearchType } from "./HeaderSearchBox";
-
-export function getInputOutputSearchTerms(searchTerm: string): [SearchTerm, SearchTerm] {
-    const inputFilter = INPUT_FIELD_FILTER_LABEL;
-    const outputFilter = OUTPUT_FIELD_FILTER_LABEL;
-    const searchSegments = searchTerm.split(" ");
-
-    const inputSearchTerm = searchSegments.find(segment => segment.startsWith(inputFilter));
-    const outputSearchTerm = searchSegments.find(segment => segment.startsWith(outputFilter));
-
-    const searchTerms = searchSegments.filter(segment =>
-        !segment.startsWith(inputFilter) && !segment.startsWith(outputFilter));
-    const searchTermItem: SearchTerm = {
-        searchText: searchTerms.join(" "),
-        searchType: undefined,
-        isLabelAvailable: false
-    };
-
-    return [
-        inputSearchTerm ? {
-            searchText: inputSearchTerm.substring(inputFilter.length),
-            searchType: SearchType.INPUT,
-            isLabelAvailable: true
-        } : {...searchTermItem, searchType: SearchType.INPUT},
-        outputSearchTerm ? {
-            searchText: outputSearchTerm.substring(outputFilter.length),
-            searchType: SearchType.OUTPUT,
-            isLabelAvailable: true
-        } : {...searchTermItem, searchType: SearchType.OUTPUT}
-    ];
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/LocalVarConfigPanel/EmptyLocalVarPanel.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/LocalVarConfigPanel/EmptyLocalVarPanel.tsx
deleted file mode 100644
index 44132aebd6c..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/LocalVarConfigPanel/EmptyLocalVarPanel.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from "react";
-import styled from "@emotion/styled";
-import { Button, Codicon } from "@wso2/ui-toolkit";
-import { useStyles } from "./style";
-
-const EmptyLocalVarContainer = styled.div`
-    width: 100%;
-    height: 120px;
-    padding: 15px;
-    background-color: var(--vscode-inputValidation-infoBackground);
-    color: var(--vscode-input-foreground);
-`;
-
-const AlertText = styled.p`
-    margin-bottom: 10px;
-`;
-
-interface EmptyLocalVarPanelProps {
-    onAddNewVar: () => void;
-}
-
-export function EmptyLocalVarPanel(props: EmptyLocalVarPanelProps) {
-    const { onAddNewVar } = props;
-    const overlayClasses = useStyles();
-
-    return (
-        <EmptyLocalVarContainer>
-            <AlertText>You do not have any local variable in this transformation.</AlertText>
-            <Button
-                appearance="icon"
-                onClick={onAddNewVar}
-                className={overlayClasses.linePrimaryButton} 
-                sx={{width: '100%'}}
-            >
-                <Codicon sx={{marginTop: 2, marginRight: 5}} name="add"/>
-                <div>Add New</div>
-            </Button>
-        </EmptyLocalVarContainer>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/LocalVarConfigPanel/LetVarDeclItem.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/LocalVarConfigPanel/LetVarDeclItem.tsx
deleted file mode 100644
index f1460692a2f..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/LocalVarConfigPanel/LetVarDeclItem.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js jsx-no-lambda
-import React, { ReactNode, useMemo, useState } from "react";
-
-// tslint:disable-next-line:no-submodule-imports
-import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
-import { STModification } from "@wso2/ballerina-core";
-import { CaptureBindingPattern, LetVarDecl, NodePosition, STKindChecker, STNode } from "@wso2/syntax-tree";
-import classNames from "classnames";
-
-import { getRenameEdits } from "../../Diagram/utils/ls-utils";
-
-import { LetVarDeclModel } from "./LocalVarConfigPanel";
-import { useStyles } from "./style";
-import { LangClientRpcClient } from "@wso2/ballerina-rpc-client";
-import styled from "@emotion/styled";
-import { Icon, ProgressRing, Tooltip } from "@wso2/ui-toolkit";
-
-export const LocalVarContainer = styled.div`
-    display: flex;
-    margin: 10px 0;
-    flex-direction: row;
-    border-radius: 5px;
-    padding: 10px;
-    border: 1px solid var(--vscode-dropdown-border);
-    margin-left: 10px;
-    justify-content: space-between;
-    height: 40px;
-    align-items: center;
-`;
-
-interface LetVarDeclItemProps {
-    index: number;
-    letVarDeclModel: LetVarDeclModel;
-    handleOnCheck: (index: number) => void;
-    onEditClick: (letVarDecl: LetVarDecl) => void;
-    applyModifications: (modifications: STModification[]) => Promise<void>;
-    langServerRpcClient: LangClientRpcClient;
-    filePath: string;
-}
-
-export function LetVarDeclItem(props: LetVarDeclItemProps) {
-    const {index, letVarDeclModel, handleOnCheck, onEditClick, applyModifications, langServerRpcClient, filePath} = props;
-    const overlayClasses = useStyles();
-    const varNameNode = (letVarDeclModel.letVarDecl.typedBindingPattern.bindingPattern as CaptureBindingPattern)
-        .variableName;
-    const exprSource = letVarDeclModel.letVarDecl.expression.source.trim();
-    const isExprPlaceholder = exprSource === "EXPRESSION";
-    const diagnostic = letVarDeclModel.hasDiagnostics ? letVarDeclModel.letVarDecl?.typeData?.diagnostics[0] : undefined;
-
-    const [type, varName] = useMemo(() => {
-        const pattern = letVarDeclModel.letVarDecl.typedBindingPattern;
-        if (STKindChecker.isCaptureBindingPattern(pattern.bindingPattern)) {
-            return [pattern.typeDescriptor.source.trim(), pattern.bindingPattern.variableName.value];
-        }
-        return [undefined, undefined];
-    }, [letVarDeclModel]);
-
-    const [updatedName, setUpdatedName] = useState(varName);
-    const [updatedExpr, setUpdatedExpr] = useState(exprSource);
-    const [nameEditable, setNameEditable] = useState(false);
-    const [exprEditable, setExprEditable] = useState(false);
-    const [isLoading, setLoading] = useState(false);
-
-    const handleCheckboxClick = () => {
-        handleOnCheck(letVarDeclModel.index);
-    };
-
-    const handleEdit = (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
-        event.preventDefault();
-        onEditClick(letVarDeclModel.letVarDecl);
-    };
-
-    const onKeyUp = async (key: string, node?: STNode) => {
-        if (key === "Escape") {
-            setNameEditable(false);
-            setExprEditable(false);
-        }
-        if (key === "Enter") {
-            setLoading(true);
-            try {
-                const workspaceEdit = await getRenameEdits(filePath, updatedName, node.position as NodePosition, langServerRpcClient);
-                const modifications: STModification[] = [];
-
-                Object.values(workspaceEdit?.changes).forEach((edits) => {
-                    edits.forEach((edit) => {
-                        modifications.push({
-                            type: "INSERT",
-                            config: {STATEMENT: edit.newText},
-                            endColumn: edit.range.end.character,
-                            endLine: edit.range.end.line,
-                            startColumn: edit.range.start.character,
-                            startLine: edit.range.start.line,
-                        });
-                    });
-                });
-
-                if (updatedExpr !== exprSource) {
-                    modifications.push({
-                        type: "INSERT",
-                        config: {STATEMENT: updatedExpr},
-                        endColumn: letVarDeclModel.letVarDecl.expression.position.endColumn,
-                        endLine: letVarDeclModel.letVarDecl.expression.position.endLine,
-                        startColumn: letVarDeclModel.letVarDecl.expression.position.startColumn,
-                        startLine: letVarDeclModel.letVarDecl.expression.position.startLine,
-                    });
-                }
-
-                modifications.sort((a, b) => a.startLine - b.startLine);
-                await applyModifications(modifications);
-            } finally {
-                setLoading(false);
-            }
-        }
-    };
-
-    const ExpressionContent = () => (
-        <>{isExprPlaceholder ? `<add-expression>` : exprSource}</>
-    );
-
-    const DiagnosticsTooltip = (
-        <>
-            {diagnostic && (
-                <div className={overlayClasses.declExpressionWarning}>
-                    <Icon name="error-icon" iconSx={{ color: "var(--vscode-errorForeground)" }} />
-                    <div className={overlayClasses.declExpressionErrorMessage}>{diagnostic.message}</div>
-                </div>
-            )}
-        </>
-    );
-
-    const expression: ReactNode = (
-        <div className={overlayClasses.declWrap}>
-            {nameEditable ? (
-                <input
-                    spellCheck={false}
-                    className={overlayClasses.input}
-                    autoFocus={true}
-                    value={updatedName}
-                    onChange={(event) => setUpdatedName(event.target.value)}
-                    onKeyUp={(event) =>
-                        onKeyUp(
-                            event.key,
-                            varNameNode
-                        )
-                    }
-                    onBlur={() => {
-                        setNameEditable(false);
-                        setUpdatedName(varName);
-                    }}
-                    data-testid={`local-variable-name-input-${index}`}
-                />
-            ) : (
-                <span
-                    onClick={() => setNameEditable(true)}
-                    data-testid={`local-variable-name-${index}`}
-                    className={overlayClasses.declExpression}
-                >
-                    {updatedName}
-                </span>
-            )}
-            <span>{letVarDeclModel.letVarDecl.equalsToken.value}</span>
-            <span
-                className={classNames(
-                    overlayClasses.declExpression,
-                    isExprPlaceholder && overlayClasses.exprPlaceholder,
-                    diagnostic && overlayClasses.declExpressionError
-                )}
-                onClick={handleEdit}
-                data-testid={`local-variable-value-${index}`}
-            >
-                {diagnostic ? (
-                    <Tooltip
-                        id={`local-var-diagnostic-${index}`}
-                        content={DiagnosticsTooltip}
-                        position="bottom"
-                    >
-                        <ExpressionContent />
-                    </Tooltip>
-                ) : (
-                    <ExpressionContent />
-                )}
-            </span>
-        </div>
-    );
-
-    return (
-        <LocalVarContainer>
-            <div className={overlayClasses.contentSection}>
-                {isLoading ? (
-                    <ProgressRing sx={{ height: '16px', width: '16px' }} />
-                ) : (
-                    <VSCodeCheckbox checked={letVarDeclModel.checked} onClick={handleCheckboxClick} id="select-local-var" />
-                )}
-                {expression}
-            </div>
-        </LocalVarContainer>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/LocalVarConfigPanel/LocalVarConfigPanel.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/LocalVarConfigPanel/LocalVarConfigPanel.tsx
deleted file mode 100644
index 6915e7f0b58..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/LocalVarConfigPanel/LocalVarConfigPanel.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React, { ReactNode, useEffect, useMemo, useState } from "react";
-
-import { STModification } from "@wso2/ballerina-core";
-import { LetVarDecl, STKindChecker, STNode } from "@wso2/syntax-tree";
-import classNames from "classnames";
-
-import { ExpressionInfo } from "../DataMapper";
-
-import { LetVarDeclItem } from "./LetVarDeclItem";
-import {
-    getLetExprAddModification,
-    getLetExprDeleteModifications,
-    getLetExpression,
-    getLetExpressions,
-    getLetVarDeclarations
-} from "./local-var-mgt-utils";
-import { NewLetVarDeclPlusButton } from "./NewLetVarDeclPlusButton";
-import { useStyles } from "./style";
-import { LangClientRpcClient } from "@wso2/ballerina-rpc-client";
-import styled from "@emotion/styled";
-import { Button, Codicon, SidePanel } from "@wso2/ui-toolkit";
-import { EmptyLocalVarPanel } from "./EmptyLocalVarPanel";
-import { hasErrorDiagnosis } from "../../../utils/st-utils";
-
-export interface LetVarDeclModel {
-    index: number;
-    letVarDecl: LetVarDecl;
-    checked: boolean;
-    hasDiagnostics: boolean;
-}
-
-export interface LocalVarConfigPanelProps {
-    handleLocalVarConfigPanel: (showPanel: boolean) => void;
-    enableStatementEditor: (expressionInfo: ExpressionInfo) => void;
-    fnDef: STNode;
-    applyModifications: (modifications: STModification[]) => Promise<void>;
-    langServerRpcClient: LangClientRpcClient,
-    filePath: string;
-}
-
-export const SidePanelTitleContainer = styled.div`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px;
-    border-bottom: 1px solid var(--vscode-panel-border);
-    font: inherit;
-    font-weight: bold;
-    color: var(--vscode-editor-foreground);
-`;
-
-export const SidePanelBody = styled.div`
-    padding: 16px;
-`;
-
-export function LocalVarConfigPanel(props: LocalVarConfigPanelProps) {
-    const {
-        handleLocalVarConfigPanel,
-        fnDef,
-        enableStatementEditor,
-        applyModifications,
-        langServerRpcClient,
-        filePath
-    } = props;
-
-    const letExpression = getLetExpression(fnDef);
-    const [letVarDecls, setLetVarDecls] = useState<LetVarDeclModel[]>([]);
-    const hasSelectedLetVarDecl = letVarDecls.some(decl => decl.checked);
-    const hasDiagnostics = letVarDecls.some(decl => decl.hasDiagnostics);
-
-    useEffect(() => {
-        const letVarDeclarations = letExpression
-            ? getLetVarDeclarations(letExpression).filter(decl => STKindChecker.isLetVarDecl(decl)) as LetVarDecl[]
-            : [];
-        setLetVarDecls(letVarDeclarations.map(decl => {
-            return {
-                index: letVarDeclarations.indexOf(decl),
-                letVarDecl: decl,
-                checked: false,
-                hasDiagnostics: hasErrorDiagnosis(decl)
-            };
-        }))
-    }, [fnDef]);
-
-    const overlayClasses = useStyles();
-
-    const onCancel = () => {
-        handleLocalVarConfigPanel(false);
-    };
-
-    const onAddNewVar = async (index?: number) => {
-        const addModification = getLetExprAddModification(index, fnDef, letExpression, letVarDecls);
-        await applyModifications([addModification]);
-    };
-
-    const handleOnCheck = (index: number) => {        
-        setLetVarDecls(prevDecls => {
-            return prevDecls.map(decl => {
-                const isChecked = decl.checked;
-                if (decl.index === index) {
-                    decl.checked = !isChecked;
-                }
-                return decl;
-            }
-        )});
-    };
-
-    const onEditClick = (letVarDecl: LetVarDecl) => {
-        enableStatementEditor({
-            label: "Let Variable Expression",
-            value: letVarDecl.expression.source,
-            valuePosition: letVarDecl.expression.position
-        });
-    };
-
-    const onSelectAll = () => {
-        let checkAll = true;
-        const letVarDeclsClone = [...letVarDecls];
-        if (letVarDeclsClone.every(value => value.checked)) {
-            checkAll = false;
-        }
-        setLetVarDecls(prevDecls => {
-            return prevDecls.map(decl => {
-                decl.checked = checkAll;
-                return decl;
-            }
-        )});
-    }
-
-    const onDeleteSelected = async () => {
-        const letExpressions = getLetExpressions(letExpression);
-        const modifications: STModification[] = [];
-        letExpressions.forEach(expr => {
-            modifications.push(...getLetExprDeleteModifications(expr, letVarDecls));
-        });
-        const updatedVarList = letVarDecls.filter(decl => !decl.checked);
-        setLetVarDecls(updatedVarList);
-        await applyModifications(modifications);
-    };
-
-    const letVarList: ReactNode = useMemo(() => {
-        return (
-            <>
-                {
-                    letVarDecls && letVarDecls.map((decl, index) => {
-                        return (
-                            <>
-                                <NewLetVarDeclPlusButton index={index} onAddNewVar={onAddNewVar}/>
-                                <LetVarDeclItem
-                                    index={index}
-                                    key={decl.letVarDecl.source}
-                                    letVarDeclModel={decl}
-                                    handleOnCheck={handleOnCheck}
-                                    onEditClick={onEditClick}
-                                    applyModifications={applyModifications}
-                                    langServerRpcClient={langServerRpcClient}
-                                    filePath={filePath}
-                                />
-                            </>
-                        );
-                    })
-                }
-            </>
-        );
-    }, [letVarDecls]);
-
-    return (
-        <SidePanel
-            isOpen={true}
-            alignment="right"
-            sx={{ transition: "all 0.3s ease-in-out", width: 600 }}
-        >
-            <SidePanelTitleContainer>
-                <div>Sub Mappings</div>
-                <Button onClick={onCancel} appearance="icon"><Codicon name="close"/></Button>
-            </SidePanelTitleContainer>
-            <SidePanelBody>
-                <div className={overlayClasses.localVarFormWrapper}>
-                    {letVarList}
-                    {letVarDecls.length === 0 ? (
-                        <EmptyLocalVarPanel onAddNewVar={onAddNewVar}/>
-                    ) : (
-                        <>
-                            <div className={overlayClasses.addNewButtonWrapper}>
-                                <Button
-                                    appearance="icon"
-                                    onClick={onAddNewVar}
-                                    className={overlayClasses.linePrimaryButton} 
-                                    sx={{width: '100%'}}
-                                >
-                                    <Codicon sx={{marginTop: 2, marginRight: 5}} name="add"/>
-                                    <div>Add New</div>
-                                </Button>
-                            </div>
-                            <div className={overlayClasses.varMgtToolbar}>
-                                <Button onClick={onSelectAll} appearance="icon">
-                                    <div className={overlayClasses.localVarControlButton}>
-                                        <Codicon sx={{ marginRight: 5 }} name="check-all" />
-                                        Select All
-                                    </div>
-                                </Button>
-                                <Button
-                                    appearance="icon"
-                                    onClick={hasSelectedLetVarDecl ? onDeleteSelected : undefined}
-                                    disabled={!hasSelectedLetVarDecl}
-                                >
-                                    <div 
-                                        className={classNames(
-                                            overlayClasses.deleteLetVarDecl,
-                                            overlayClasses.localVarControlButton,
-                                            hasSelectedLetVarDecl && overlayClasses.deleteLetVarDeclEnabled
-                                        )}
-                                    >
-                                        <Codicon sx={{marginRight: 5}} name="trash"/>
-                                        Delete Selected
-                                    </div>
-                                </Button>
-                            </div>
-                            <div className={overlayClasses.doneButtonWrapper}>
-                                <Button
-                                    appearance="primary"
-                                    onClick={!hasDiagnostics ? onCancel : undefined}
-                                    disabled={hasDiagnostics}
-                                    tooltip={hasDiagnostics ? "Fix errors to continue" : ""}
-                                >
-                                    <div className={overlayClasses.doneButton}>Done</div>
-                                </Button>
-                            </div>
-                        </>
-                    )}
-                </div>
-            </SidePanelBody>
-        </SidePanel>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/LocalVarConfigPanel/NewLetVarDeclPlusButton.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/LocalVarConfigPanel/NewLetVarDeclPlusButton.tsx
deleted file mode 100644
index a9d88bd4e1d..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/LocalVarConfigPanel/NewLetVarDeclPlusButton.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React  from "react";
-
-import { Button, Codicon, Tooltip } from "@wso2/ui-toolkit";
-
-import { useStyles } from "./style";
-
-export interface NewLetVarDeclPlusButtonProps {
-    index: number;
-    onAddNewVar: (index: number) => void;
-}
-
-export function NewLetVarDeclPlusButton(props: NewLetVarDeclPlusButtonProps) {
-    const { index, onAddNewVar } = props;
-    const overlayClasses = useStyles();
-
-    const handleOnClick = () => {
-        onAddNewVar(index);
-    };
-
-    return (
-        <div className={overlayClasses.plusButton}>
-            <Tooltip
-                content={"Add new local variable here"}
-            >
-                <Button
-                    appearance="icon"
-                    onClick={handleOnClick}
-                    data-testid={`add-local-variable-btn-${index}`}
-                >
-                    <Codicon name="add"/>
-                </Button>
-            </Tooltip>
-        </div>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/LocalVarConfigPanel/local-var-mgt-utils.ts b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/LocalVarConfigPanel/local-var-mgt-utils.ts
deleted file mode 100644
index 814cc28540a..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/LocalVarConfigPanel/local-var-mgt-utils.ts
+++ /dev/null
@@ -1,161 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { STModification } from "@wso2/ballerina-core";
-import {
-    CommaToken,
-    LetExpression,
-    LetVarDecl,
-    NodePosition,
-    STKindChecker,
-    STNode
-} from "@wso2/syntax-tree";
-
-import {
-    genLetExpressionVariableName,
-    isPositionsEquals
-} from "../../../utils/st-utils";
-
-import { LetVarDeclModel } from "./LocalVarConfigPanel";
-
-export function getLetExpression(fnDef: STNode): LetExpression {
-    if (STKindChecker.isFunctionDefinition(fnDef) && STKindChecker.isExpressionFunctionBody(fnDef.functionBody)) {
-        if (STKindChecker.isLetExpression(fnDef.functionBody.expression)) {
-            return fnDef.functionBody.expression;
-        }
-    }
-}
-
-export function getLetExpressions(letExpression: LetExpression): LetExpression[] {
-    const letExpressions: LetExpression[] = [letExpression];
-    if (STKindChecker.isLetExpression(letExpression.expression)) {
-        letExpressions.push(...getLetExpressions(letExpression.expression));
-    }
-    return letExpressions;
-}
-
-export function getLetVarDeclarations(letExpr: LetExpression): (LetVarDecl | CommaToken)[] {
-    const letVarDeclarations = [...letExpr.letVarDeclarations];
-    if (STKindChecker.isLetExpression(letExpr.expression)) {
-        letVarDeclarations.push(...getLetVarDeclarations(letExpr.expression));
-    }
-    return letVarDeclarations;
-}
-
-export function getLetExprAddModification(index: number,
-                                          fnDef: STNode,
-                                          letExpression: LetExpression,
-                                          letVarDecls: LetVarDeclModel[]): STModification {
-    const varName = genLetExpressionVariableName([letExpression]);
-    let expr = `var ${varName} = EXPRESSION`;
-    let addPosition: NodePosition;
-
-    if (!letExpression) {
-        const fnBody = STKindChecker.isFunctionDefinition(fnDef)
-            && STKindChecker.isExpressionFunctionBody(fnDef.functionBody)
-            && fnDef.functionBody;
-        addPosition = {
-            ...fnBody.expression.position,
-            endLine: fnBody.expression.position.startLine,
-            endColumn: fnBody.expression.position.startColumn
-        };
-        expr = `let ${expr} in `;
-    } else if (isNaN(index)) {
-        const lastLetDeclPosition = letVarDecls[letVarDecls.length - 1].letVarDecl.position;
-        addPosition = {
-            ...lastLetDeclPosition,
-            startLine: lastLetDeclPosition.endLine,
-            startColumn: lastLetDeclPosition.endColumn
-        };
-        expr = `, ${expr}`;
-    } else {
-        const lastLetDeclPosition = letVarDecls[index].letVarDecl.position;
-        addPosition = {
-            ...lastLetDeclPosition,
-            endLine: lastLetDeclPosition.startLine,
-            endColumn: lastLetDeclPosition.startColumn
-        }
-        expr = `${expr} ,`;
-    }
-    return {
-        type: "INSERT",
-        config: {STATEMENT: expr},
-        ...addPosition
-    };
-}
-
-export function getLetExprDeleteModifications(letExpression: LetExpression,
-                                              letVarDecls: LetVarDeclModel[]): STModification[] {
-    let modifications: STModification[] = [];
-    const selectedLetVarDecls: LetVarDecl[] = letVarDecls.filter(decl => decl.checked).map(decl => decl.letVarDecl);
-    const hasSelectedAllExpressions = !(letExpression.letVarDeclarations
-        .filter(decl => STKindChecker.isLetVarDecl(decl)) as LetVarDecl[])
-        .some(decl => !selectedLetVarDecls.includes(decl));
-
-    const allLetVarDecls = [...letExpression.letVarDeclarations];
-    const deleteIndices = allLetVarDecls.map((decl, index) => {
-        return selectedLetVarDecls.some(selectedDecl =>
-            isPositionsEquals(selectedDecl.position, decl.position)
-        ) ? index : -1;
-    }).filter(v => v !== -1);
-
-    if (hasSelectedAllExpressions) {
-        // Should delete the 'let' and 'in' keywords too
-        modifications.push({
-            type: "DELETE",
-            startLine: letExpression.letKeyword.position.startLine,
-            startColumn: letExpression.letKeyword.position.startColumn,
-            endLine: letExpression.inKeyword.position.endLine,
-            endColumn: letExpression.inKeyword.position.endColumn
-        });
-    } else {
-        modifications = deleteIndices.reverse().map(index => {
-            const previous = allLetVarDecls[index - 1];
-            const next = allLetVarDecls[index + 1];
-            const isLastElement = index + 1 === allLetVarDecls.length;
-            const selected = allLetVarDecls[index];
-
-            let deletePosition = selected.position;
-
-            if (previous && STKindChecker.isCommaToken(previous) && isLastElement) {
-                // if its the last element, need to delete previous comma as well
-                deletePosition = {
-                    ...selected.position,
-                    startLine: (previous.position as NodePosition)?.startLine,
-                    startColumn: (previous.position as NodePosition)?.startColumn,
-                };
-                allLetVarDecls.splice(index - 1);
-            } else if (next && STKindChecker.isCommaToken(next)) {
-                // if its not the last element, need to delete the following comma as well
-                deletePosition = {
-                    ...selected.position,
-                    endLine: (next.position as NodePosition)?.endLine,
-                    endColumn: (next.position as NodePosition)?.endColumn,
-                };
-                allLetVarDecls.splice(index, 2);
-            } else {
-                allLetVarDecls.splice(index, 1);
-            }
-            return {
-                type: "DELETE",
-                ...deletePosition
-            }
-        });
-    }
-    return modifications.reverse();
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/LocalVarConfigPanel/style.ts b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/LocalVarConfigPanel/style.ts
deleted file mode 100644
index a815786a3d2..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/LocalVarConfigPanel/style.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { css } from "@emotion/css";
-
-export const useStyles = () => ({
-    localVarFormWrapper: css({
-        width: '100%',
-        maxHeight: 800,
-        overflowY: 'scroll',
-        flexDirection: "row",
-    }),
-    addNewButtonWrapper: css({
-        display: "flex",
-        marginTop: 20,
-        marginLeft: 10,
-        flexDirection: "column",
-        "& button": {
-            marginBottom: 16
-        }
-    }),
-    doneButtonWrapper: css({
-        display: 'flex',
-        justifyContent: 'flex-end',
-        marginTop: '16px'
-    }),
-    contentSection: css({
-        display: "flex",
-        width: "75%",
-        justifyContent: "flex-start"
-    }),
-    varMgtToolbar: css({
-        padding: '10px',
-        marginTop: '10px',
-        display: "inline-flex",
-        alignItems: "center",
-        "& a": {
-            cursor: "pointer",
-            color: "var(--vscode-editorInfo-foreground)"
-        },
-        "& a:hover": {
-            textDecoration: "none",
-        }
-    }),
-    localVarControlButton: css({
-        padding: '5px',
-        display: "flex",
-        alignItems: "center",
-        cursor: "pointer",
-    }),
-    deleteLetVarDecl: css({
-        color: "var(--vscode-charts-red)"
-    }),
-    deleteLetVarDeclEnabled: css({
-        color: "var(--vscode-terminal-ansiRed)",
-        fontWeight: 500
-    }),
-    declWrap: css({
-        alignItems: 'center',
-        display: 'inline-block',
-        maxWidth: '500px',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-        padding: '5px',
-        verticalAlign: 'middle'
-    }),
-    declExpression: css({
-        background: "var(--vscode-editorHoverWidget-background)",
-        marginLeft: "5px",
-        marginRight: "5px",
-        borderRadius: "4px",
-        border: "1px solid transparent",
-        cursor: 'pointer',
-        padding: 4,
-        transition: 'border 0.2s',
-        '&:hover': {
-            border: "1px solid var(--vscode-pickerGroup-border)"
-        }
-    }),
-    declExpressionError: css({
-        border: '1px solid var(--vscode-inputValidation-errorBorder)',
-        '&:hover': {
-            border: "1px solid var(--vscode-inputValidation-errorBorder)"
-        }
-    }),
-    declExpressionWarning: css({
-        display: 'flex',
-        padding: '4px',
-    }),
-    declExpressionErrorMessage: css({
-        fontSize: '12px',
-        letterSpacing: '0',
-        color: "var(--vscode-errorForeground)",
-        marginLeft: '5px',
-    }),
-    exprPlaceholder: css({
-        background: 'var(--vscode-inputValidation-warningBackground)'
-    }),
-    input: css({
-        maxWidth: '120px',
-        padding: "4px",
-        '&:focus': { outline: 0, border: "1px solid var(--vscode-inputOption-activeBorder)" },
-        background: "var(--vscode-editorHoverWidget-background)",
-        marginLeft: "5px",
-        marginRight: "5px",
-        color: 'var(--vscode-editor-foreground)',
-        borderRadius: "4px",
-        border: "1px solid transparent",
-    }),
-    plusButton: css({
-        margin: '5px 0 5px 10px',
-    }),
-    linePrimaryButton: css({
-        "& > vscode-button": {
-            color: "var(--button-primary-foreground)",
-            backgroundColor: "var(--button-primary-background)",
-            display: "flex",
-            justifyContent: "center",
-            height: "35px",
-            width: "100%",
-            borderRadius: "3px",
-            "&:hover": {
-                backgroundColor: "var(--vscode-button-hoverBackground)"
-            }
-        }
-    }),
-    doneButton: css({
-        color: "var(--button-primary-foreground)",
-        padding: "3px",
-    }),
-});
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/SkeletonLoader/SkeletonLoader.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/SkeletonLoader/SkeletonLoader.tsx
deleted file mode 100644
index c06cb9d9026..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/SkeletonLoader/SkeletonLoader.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from 'react';
-import { css, keyframes } from "@emotion/css";
-import styled from '@emotion/styled';
-
-const skeletonPulse = keyframes`
-    0% { opacity: 0.6; }
-    50% { opacity: 0.8; }
-    100% { opacity: 0.6; }
-`;
-
-const classes = {
-    loadingContainer: css({
-        position: 'relative',
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'flex-start',
-        width: '100%',
-        height: '100%',
-        boxSizing: 'border-box'
-    }),
-    skeletonNode: css({
-        width: '320px',
-        minHeight: '320px',
-        background: 'var(--vscode-sideBar-background)',
-        borderRadius: '2px',
-        border: '1px solid var(--vscode-welcomePage-tileBorder)',
-        boxShadow: '0 2px 8px 0 rgba(0,0,0,0.04)',
-        padding: '24px 16px',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'flex-start',
-        animation: `${skeletonPulse} 1.5s ease-in-out infinite`,
-        gap: '24px',
-    }),
-    skeletonHeader: css({
-        height: '36px',
-        backgroundColor: 'var(--vscode-editor-inactiveSelectionBackground)',
-        borderRadius: '8px',
-        marginBottom: '24px',
-        width: '85%',
-    }),
-    skeletonFieldsContainer: css({
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '16px',
-        width: '100%',
-    }),
-    skeletonField: css({
-        height: '24px',
-        backgroundColor: 'var(--vscode-editor-inactiveSelectionBackground)',
-        borderRadius: '6px',
-        width: '60%',
-        '&:nth-of-type(2)': {
-            width: '50%'
-        },
-        '&:nth-of-type(3)': {
-            width: '70%'
-        }
-    }),
-};
-
-export const Container = styled.div`
-    width: 100%;
-    height: 100%;
-    background-image: radial-gradient(var(--vscode-editor-inactiveSelectionBackground) 10%, transparent 0px);
-    background-size: 16px 16px;
-    background-color: var(--vscode-editor-background);
-`;
-
-interface SkeletonLoaderProps {
-    className?: string;
-}
-
-export const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({ className }) => {
-    return (
-        <Container className={`${classes.loadingContainer} ${className || ''}`}>
-            <div className={classes.skeletonNode}>
-                <div className={classes.skeletonHeader} />
-                <div className={classes.skeletonFieldsContainer}>
-                    <div className={classes.skeletonField} />
-                    <div className={classes.skeletonField} />
-                    <div className={classes.skeletonField} />
-                </div>
-            </div>
-            <div className={classes.skeletonNode}>
-                <div className={classes.skeletonHeader} />
-                <div className={classes.skeletonFieldsContainer}>
-                    <div className={classes.skeletonField} />
-                    <div className={classes.skeletonField} />
-                    <div className={classes.skeletonField} />
-                </div>
-            </div>
-        </Container>
-    );
-};
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Warning/DataMapperWarning.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Warning/DataMapperWarning.tsx
deleted file mode 100644
index 14a67861c4c..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Warning/DataMapperWarning.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React, { ReactNode } from 'react';
-
-import { Codicon } from '@wso2/ui-toolkit';
-import classNames from "classnames";
-import { useStyles } from './style';
-
-export interface WarningBannerProps {
-    message: ReactNode | string;
-    testId?: string;
-    className?: string;
-}
-
-export const WarningBanner = (props: WarningBannerProps) => {
-    const classes = useStyles();
-    const { message, testId, className } = props;
-
-    return (
-        <div className={classNames(classes.warningContainer, className)} data-testid="warning-banner">
-            <div className={classes.warningIcon}>
-                <Codicon iconSx={{ fontSize: 40 }} sx={{ height: 40, width: 40 }} name="warning" />
-            </div>
-            <div data-test-id={testId} className={classes.warningBody} >
-                {(typeof message === 'string' ? <p>{message}</p> : (message))}
-            </div>
-        </div>
-    );
-};
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Warning/style.ts b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Warning/style.ts
deleted file mode 100644
index 7fe95addb5e..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/Warning/style.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { css } from "@emotion/css";
-
-export const useStyles = () => ({
-    warningContainer: css({
-        marginTop: 20,
-        marginLeft: 16,
-        marginRight: 16,
-        backgroundColor: 'var(--vscode-editorWidget-background)',
-        color: 'var(--vscode-sideBarSectionHeader-foreground)',
-        padding: 10,
-        minWidth: 120,
-        width: 'fit-content',
-        textAlign: 'left',
-        display: 'flex',
-        flexDirection: 'row',
-        height: 'fit-content',
-    }),
-    warningIcon: css({
-        display: 'flex',
-        alignItems: 'center',
-        color: 'var(--vscode-editorWarning-foreground)',
-    }),
-    warningBody: css({
-        marginLeft: 10,
-        fontSize: 14,
-        lineHeight: 1.5,
-        fontWeight: 300,
-        opacity: 0.8
-    })
-});
diff --git a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/utils.tsx b/workspaces/ballerina/data-mapper-view/src/components/DataMapper/utils.tsx
deleted file mode 100644
index b68b94f6da3..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/DataMapper/utils.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { useState, useEffect } from "react";
-import { PrimitiveBalType } from "@wso2/ballerina-core";
-
-export const ObjectBalType = "object";
-
-// Input types that the dm were supporting even before expanding the type support
-export const DM_INHERENTLY_SUPPORTED_INPUT_TYPES = [
-    PrimitiveBalType.Boolean,
-    PrimitiveBalType.Decimal,
-    PrimitiveBalType.Float,
-    PrimitiveBalType.Int,
-    PrimitiveBalType.Record,
-    PrimitiveBalType.String,
-    PrimitiveBalType.Json
-];
-
-export const DM_UNSUPPORTED_TYPES = [
-    PrimitiveBalType.Enum,
-    PrimitiveBalType.Error,
-    PrimitiveBalType.Xml,
-    PrimitiveBalType.Var,
-    PrimitiveBalType.Nil,
-    ObjectBalType
-];
-
-const balVersionRegex = new RegExp("^[0-9]{4}.[0-9]+.[0-9]+");
-
-export const ISSUES_URL = "https://github.com/wso2/product-ballerina-integrator/issues";
-
-export function isDMSupported(version: string): boolean {
-    if (!version) {
-        return false;
-    }
-    const versionStr = version.match(balVersionRegex);
-    const splittedVersions = versionStr[0]?.split(".");
-    if ((parseInt(splittedVersions[0], 10) === 2201) && (parseInt(splittedVersions[1], 10) === 1)) {
-        // 2201.1.x
-        return (parseInt(splittedVersions[2], 10) >= 2);
-    } else  if ((parseInt(splittedVersions[0], 10) === 2201) && (parseInt(splittedVersions[1], 10) === 2)) {
-        // 2201.2.x
-        return (parseInt(splittedVersions[2], 10) >= 1);
-    } else  if ((parseInt(splittedVersions[0], 10) === 2201) && (parseInt(splittedVersions[1], 10) > 2)) {
-        // > 2201.2
-        return true;
-    } else  if (parseInt(splittedVersions[0], 10) > 2201) {
-        // > 2201 (eg: 2301, 2202)
-        return true;
-    } else {
-        return false;
-    }
-}
-
-export function isArraysSupported(version: string): boolean {
-    if (!version) {
-        return false;
-    }
-    const versionStr = version.match(balVersionRegex);
-    const splittedVersions = versionStr[0]?.split(".");
-    if ((parseInt(splittedVersions[0], 10) === 2201) && (parseInt(splittedVersions[1], 10) === 1)) {
-        // >= 2201.1.3
-        return (parseInt(splittedVersions[2], 10) >= 3);
-    } else  if ((parseInt(splittedVersions[0], 10) === 2201) && (parseInt(splittedVersions[1], 10) === 2)) {
-        // >= 2201.2.4
-        return (parseInt(splittedVersions[2], 10) >= 4);
-    } else  if ((parseInt(splittedVersions[0], 10) === 2201) && (parseInt(splittedVersions[1], 10) === 3)) {
-        // >= 2201.3.1
-        return (parseInt(splittedVersions[2], 10) >= 1);
-    } else  if ((parseInt(splittedVersions[0], 10) === 2201) && (parseInt(splittedVersions[1], 10) > 3)) {
-        // > 2201.3
-        return true;
-    } else  if (parseInt(splittedVersions[0], 10) > 2201) {
-        // > 2201 (eg: 2301, 2202)
-        return true;
-    } else {
-        return false;
-    }
-}
-
-export function isGoToQueryWithinLetExprSupported(version: string): boolean {
-    if (!version) {
-        return false;
-    }
-    const versionStr = version.match(balVersionRegex);
-    const splittedVersions = versionStr[0]?.split(".");
-    if ((parseInt(splittedVersions[0], 10) === 2201) && (parseInt(splittedVersions[1], 10) === 3)) {
-        // >= 2201.3.3
-        return (parseInt(splittedVersions[2], 10) >= 3);
-    } else  if ((parseInt(splittedVersions[0], 10) === 2201) && (parseInt(splittedVersions[1], 10) > 3)) {
-        // > 2201.3
-        return true;
-    } else  if (parseInt(splittedVersions[0], 10) > 2201) {
-        // > 2201 (eg: 2301, 2202)
-        return true;
-    } else {
-        return false;
-    }
-}
-
-export function useMediaQuery(query: string): boolean {
-    const [matches, setMatches] = useState<boolean>(false);
-
-    useEffect(() => {
-        const media = window.matchMedia(query);
-        if (media.matches !== matches) {
-            setMatches(media.matches);
-        }
-
-        const listener = () => {
-            setMatches(media.matches);
-        };
-
-        media.addEventListener("change", listener);
-        return () => media.removeEventListener("change", listener);
-    }, [matches, query]);
-
-    return matches;
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Actions/IONodesScrollCanvasAction.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Actions/IONodesScrollCanvasAction.ts
deleted file mode 100644
index b0394a14260..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Actions/IONodesScrollCanvasAction.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { Action, ActionEvent, InputType } from "@projectstorm/react-canvas-core";
-import { DiagramEngine, NodeModel } from "@projectstorm/react-diagrams-core";
-import { QueryExpressionNode } from "../Node";
-import { RecordFieldPortModel } from "../Port";
-import { DataMapperLinkModel } from "../Link";
-import { LinkConnectorNode } from "../Node/LinkConnector";
-import {
-    INPUT_NODE_DEFAULT_RIGHT_X,
-    MIN_VISIBLE_HEIGHT,
-    isInputNode,
-    isOutputNode
-} from "./utils";
-import { IO_NODE_DEFAULT_WIDTH, VISUALIZER_PADDING, defaultModelOptions } from "../utils/constants";
-
-export interface PanAndZoomCanvasActionOptions {
-    inverseZoom?: boolean;
-}
-
-export class IONodesScrollCanvasAction extends Action {
-    constructor(options: PanAndZoomCanvasActionOptions = {}) {
-        super({
-            type: InputType.MOUSE_WHEEL,
-            fire: (actionEvent: ActionEvent<any>) => {
-                const { event } = actionEvent;
-                const { clientX, deltaY } = event;
-                const zoomOffset = 100 / defaultModelOptions.zoom;
-
-                for (let layer of this.engine.getModel().getLayers()) {
-                    layer.allowRepaint(false);
-                }
-                event.stopPropagation();
-
-                const element = this.engine.getActionEventBus().getModelForEvent(actionEvent);
-
-                let isInputScrollable = false;
-                let isOutputScrollable = false;
-
-                if (!element) {
-                    // Scroll on empty space
-                    const zoomOffset = 100 / defaultModelOptions.zoom;
-                    const outputNodeDefaultLeftX =
-                        ((window.innerWidth - VISUALIZER_PADDING) - IO_NODE_DEFAULT_WIDTH) * zoomOffset;
-                    const scrolledX = clientX * zoomOffset;
-                    if (scrolledX >= 0 && scrolledX <= INPUT_NODE_DEFAULT_RIGHT_X) {
-                        isInputScrollable = true;
-                    } else if (scrolledX >= outputNodeDefaultLeftX && scrolledX <= (window.innerWidth - VISUALIZER_PADDING) * zoomOffset) {
-                        isOutputScrollable = true;
-                    }
-                } else {
-                    isInputScrollable = isInputNode(element);
-                    isOutputScrollable = isOutputNode(element);
-                }
-
-                let yDelta = (options.inverseZoom ? - deltaY : deltaY) as number;
-                const diagramEngine = this.engine as DiagramEngine;
-
-                if (isInputScrollable) {
-                    handleInputScroll(diagramEngine, yDelta);
-                } else if (isOutputScrollable) {
-                    handleOutputScroll(diagramEngine, yDelta);
-                } else {
-                    handleInputScroll(diagramEngine, yDelta);
-                    handleOutputScroll(diagramEngine, yDelta);
-                }
-
-                this.engine.repaintCanvas();
-
-                // re-enable rendering
-                for (let layer of this.engine.getModel().getLayers()) {
-                    layer.allowRepaint(true);
-                }
-            },
-        });
-    }
-}
-
-
-function handleInputScroll(diagramEngine: DiagramEngine, yDelta: number) {
-    const inputNodes = getInputNodes(diagramEngine);
-    const totalHeight = inputNodes.reduce((acc, node) => acc + node.height, 0);
-    const averageHeight = totalHeight / inputNodes.length;
-    let scrollStep = Math.min(Math.abs(yDelta), averageHeight / 2) * Math.sign(yDelta);
-
-    const firstNode = inputNodes[0];
-    const lastNode = inputNodes[inputNodes.length - 1];
-
-    if (firstNode) {
-        const newY = firstNode.getY() - scrollStep;
-        if (newY >= 0 && scrollStep < 0) {
-            // If the first node is at the top of the canvas, do not scroll further
-            scrollStep = firstNode.getY();
-        }
-    }
-
-    if (lastNode) {
-        const newY = lastNode.getY() - scrollStep;
-        const nodeBottomY = newY + lastNode.height;
-        if (nodeBottomY < MIN_VISIBLE_HEIGHT) {
-            // If the last node is at the bottom of the canvas, do not scroll further
-            scrollStep = lastNode.getY() + lastNode.height - MIN_VISIBLE_HEIGHT;
-        }
-    }
-
-    inputNodes.forEach(element => {
-        element.setPosition(element.getX(), element.getY() - scrollStep);
-    });
-
-}
-
-function handleOutputScroll(diagramEngine: DiagramEngine, yDelta: number) {
-    const outputNode = getOutputNode(diagramEngine);
-    if (outputNode) {
-        let scrollStep = Math.min(Math.abs(yDelta), outputNode.height / 2) * Math.sign(yDelta);
-        let newY = outputNode.getY() - scrollStep;
-        const nodeBottomY = newY + outputNode.height;
-        if (newY >= 0 && scrollStep < 0) {
-            // If the output node is at the top of the canvas, do not scroll further
-            scrollStep = outputNode.getY();
-        }
-        if (nodeBottomY < MIN_VISIBLE_HEIGHT) {
-            // If the output node is at the bottom of the canvas, do not scroll further
-            scrollStep = outputNode.getY() + outputNode.height - MIN_VISIBLE_HEIGHT;
-        }
-        outputNode.setPosition(outputNode.getX(), outputNode.getY() - scrollStep);
-    }
-    outputNode && repositionIntermediateNodes(outputNode);
-}
-
-function getInputNodes(diagramEngine: DiagramEngine) {
-    return diagramEngine.getModel().getNodes().filter(node => isInputNode(node));
-}
-
-function getOutputNode(diagramEngine: DiagramEngine) {
-    return diagramEngine.getModel().getNodes().filter(node => isOutputNode(node))[0];
-}
-
-function repositionIntermediateNodes(outputNode: NodeModel) {
-    const ports = outputNode.getPorts();
-    for (const port of Object.values(ports)) {
-        if (port instanceof RecordFieldPortModel) {
-            // Output port can only have one link, hence the first link is considered
-            const link = Object.values(port.getLinks())[0];
-            if (link instanceof DataMapperLinkModel) {
-                const sourceNode = link.getSourcePort().getNode();
-                const targetPortPosition = link.getTargetPort().getPosition();
-                if (sourceNode instanceof LinkConnectorNode || sourceNode instanceof QueryExpressionNode) {
-                    sourceNode.setPosition(sourceNode.getX(), targetPortPosition.y - 4.5);
-                }
-            }
-        }
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Actions/utils.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Actions/utils.ts
deleted file mode 100644
index 93d177f0ad9..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Actions/utils.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-
-import { BaseModel } from "@projectstorm/react-canvas-core";
-import {
-    ListConstructorNode,
-    MappingConstructorNode,
-    PrimitiveTypeNode,
-    QueryExpressionNode,
-    RequiredParamNode,
-    EnumTypeNode,
-    FromClauseNode,
-    JoinClauseNode,
-    LetClauseNode,
-    LetExpressionNode,
-    LinkConnectorNode,
-    ModuleVariableNode,
-    UnionTypeNode,
-    UnsupportedIONode
-} from "../Node";
-import { IO_NODE_DEFAULT_WIDTH } from "../utils/constants";
-import { ExpandedMappingHeaderNode } from "../Node/ExpandedMappingHeader";
-
-export type InputNode =
-    | RequiredParamNode
-    | FromClauseNode
-    | LetExpressionNode
-    | ModuleVariableNode
-    | EnumTypeNode
-    | LetClauseNode
-    | JoinClauseNode
-    | ExpandedMappingHeaderNode;
-
-export type NodeWithoutTypeDesc = 
-    | LetExpressionNode
-    | ModuleVariableNode
-    | EnumTypeNode
-    | ExpandedMappingHeaderNode;
-
-type OutputNode =
-    | MappingConstructorNode
-    | ListConstructorNode
-    | PrimitiveTypeNode
-    | UnionTypeNode
-    | UnsupportedIONode;
-
-type IntermediateNode = 
-    | LinkConnectorNode
-    | QueryExpressionNode;
-    
-export const MIN_VISIBLE_HEIGHT = 68;
-export const INPUT_NODE_DEFAULT_RIGHT_X = IO_NODE_DEFAULT_WIDTH;
-
-export function isInputNode(node: BaseModel): node is InputNode {
-    return (
-        node instanceof RequiredParamNode ||
-        node instanceof FromClauseNode ||
-        node instanceof LetExpressionNode ||
-        node instanceof ModuleVariableNode ||
-        node instanceof EnumTypeNode ||
-        node instanceof LetClauseNode ||
-        node instanceof JoinClauseNode ||
-        node instanceof ExpandedMappingHeaderNode
-    );
-}
-
-export function isOutputNode(node: BaseModel): node is OutputNode {
-    return (
-        node instanceof MappingConstructorNode ||
-        node instanceof ListConstructorNode ||
-        node instanceof PrimitiveTypeNode ||
-        node instanceof UnionTypeNode ||
-        node instanceof UnsupportedIONode
-    );
-}
-
-export function isIntermediateNode(node: BaseModel): node is IntermediateNode {
-    return (
-        node instanceof LinkConnectorNode ||
-        node instanceof QueryExpressionNode
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Canvas/DataMapperCanvasContainerWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Canvas/DataMapperCanvasContainerWidget.tsx
deleted file mode 100644
index 64f2adceefd..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Canvas/DataMapperCanvasContainerWidget.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: no-var-requires
-import * as React from 'react';
-
-import { css, Global } from '@emotion/react';
-import styled from '@emotion/styled';
-
-export const Container = styled.div`
-	// should take up full height minus the height of the header
-	height: calc(100% - 50px);
-	background-image: radial-gradient(var(--vscode-editor-inactiveSelectionBackground) 10%, transparent 0px);
-  	background-size: 16px 16px;
-	background-color: var(--vscode-editor-background);
-	display: ${(props: { hidden: any; }) => (props.hidden ? 'none' : 'flex')};
-	font-weight: 400;
-	> * {
-		height: 100%;
-		min-height: 100%;
-		width: 100%;
-	}
-`;
-
-export const Expand = css`
-	html,
-	body,
-	#root {
-		height: 100%;
-	}
-`;
-
-export interface DataMapperCanvasContainerProps {
-    hideCanvas: boolean;
-    children?: React.ReactNode;
-}
-
-export function DataMapperCanvasContainerWidget({ hideCanvas, children }: DataMapperCanvasContainerProps) {
-    return (
-        <>
-            <Global styles={Expand} />
-            <Container hidden={hideCanvas}>
-                {children}
-            </Container>
-        </>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Canvas/DataMapperCanvasWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Canvas/DataMapperCanvasWidget.tsx
deleted file mode 100644
index 5696c132725..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Canvas/DataMapperCanvasWidget.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-// tslint:disable: jsx-no-lambda jsx-no-multiline-js no-unused-expression
-import * as React from 'react';
-
-import styled from '@emotion/styled';
-import { CanvasEngine, CanvasEngineListener, ListenerHandle, SmartLayerWidget, TransformLayerWidget } from '@projectstorm/react-canvas-core'
-
-import { OverlayLayerModel } from '../OverlayLayer/OverlayLayerModel';
-
-export interface DiagramProps {
-	engine: CanvasEngine;
-	className?: string;
-}
-
-export const Canvas = styled.div`
-	position: relative;
-	cursor: move;
-	overflow: hidden;
-	& > svg {
-		overflow: visible;
-	}
-`;
-
-export const DMCanvasContainerID = "data-mapper-canvas-container";
-
-export class DataMapperCanvasWidget extends React.Component<DiagramProps> {
-	ref: React.RefObject<HTMLDivElement>;
-	keyUp: (this: Document, event: KeyboardEvent) => void;
-	keyDown: (this: Document, event: KeyboardEvent) => void;
-	canvasListener: CanvasEngineListener | ListenerHandle;
-
-	constructor(props: DiagramProps) {
-		super(props);
-
-		this.ref = React.createRef();
-		this.state = {
-			action: null,
-			diagramEngineListener: null
-		};
-	}
-
-	componentWillUnmount() {
-		this.props.engine.deregisterListener(this.canvasListener);
-		this.props.engine.setCanvas(null);
-
-		document.removeEventListener('keyup', this.keyUp);
-		document.removeEventListener('keydown', this.keyDown);
-	}
-
-	registerCanvas() {
-		this.props.engine.setCanvas(this.ref.current);
-		this.props.engine.iterateListeners((list) => {
-			list.rendered && list.rendered();
-		});
-	}
-
-	componentDidUpdate() {
-		this.registerCanvas();
-	}
-
-	componentDidMount() {
-		this.canvasListener = this.props.engine.registerListener({
-			repaintCanvas: () => {
-				this.forceUpdate();
-			}
-		});
-
-		this.keyDown = (event: KeyboardEvent) => {
-			this.props.engine.getActionEventBus().fireAction({ event: event as any });
-		};
-		this.keyUp = (event: KeyboardEvent) => {
-			this.props.engine.getActionEventBus().fireAction({ event: event as any });
-		};
-
-		document.addEventListener('keyup', this.keyUp);
-		document.addEventListener('keydown', this.keyDown);
-		this.registerCanvas();
-	}
-
-	render() {
-		const engine = this.props.engine;
-		const model = engine.getModel();
-		const layers = model.getLayers();
-		const svgLayers = layers.filter((layer) => layer.getOptions().isSvg && !(layer instanceof OverlayLayerModel));
-		const nonSVGLayers = layers.filter((layer) => !layer.getOptions().isSvg && !(layer instanceof OverlayLayerModel));
-		const overlayLayers = layers.filter(layer => layer instanceof OverlayLayerModel);
-		const reArrangedLayers = [...nonSVGLayers, ...svgLayers, ...overlayLayers];
-
-		return (
-			<Canvas
-				id={DMCanvasContainerID}
-				className={this.props.className}
-				ref={this.ref}
-				onWheel={(event) => {
-					this.props.engine.getActionEventBus().fireAction({ event });
-				}}
-				onMouseDown={(event) => {
-					this.props.engine.getActionEventBus().fireAction({ event });
-				}}
-				onMouseUp={(event) => {
-					this.props.engine.getActionEventBus().fireAction({ event });
-				}}
-				onMouseMove={(event) => {
-					this.props.engine.getActionEventBus().fireAction({ event });
-				}}
-				onTouchStart={(event) => {
-					this.props.engine.getActionEventBus().fireAction({ event });
-				}}
-				onTouchEnd={(event) => {
-					this.props.engine.getActionEventBus().fireAction({ event });
-				}}
-				onTouchMove={(event) => {
-					this.props.engine.getActionEventBus().fireAction({ event });
-				}}
-			>
-				{reArrangedLayers.map((layer) => {
-					return (
-						<TransformLayerWidget layer={layer} key={layer.getID()}>
-							<SmartLayerWidget layer={layer} engine={this.props.engine} key={layer.getID()} />
-						</TransformLayerWidget>
-					);
-				})}
-			</Canvas>
-		);
-	}
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/CodeAction/CodeAction.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/CodeAction/CodeAction.tsx
deleted file mode 100644
index af2c010a978..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/CodeAction/CodeAction.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js jsx-no-lambda
-import React from "react";
-
-import { CodeAction } from "vscode-languageserver-types";
-
-import { IDataMapperContext } from "../../../utils/DataMapperContext/DataMapperContext";
-
-import { CodeActionTooltip } from "./CodeActionTooltip/CodeActionTooltip";
-import { Button, Codicon } from "@wso2/ui-toolkit";
-
-export interface CustomAction {
-    title: string;
-    onClick: () => void;
-}
-
-export interface CodeActionWidgetProps {
-    codeActions?: CodeAction[];
-    context: IDataMapperContext;
-    additionalActions?: CustomAction[];
-    isConfiguration?: boolean;
-    btnSx?: React.CSSProperties;
-}
-
-export function CodeActionWidget(props: CodeActionWidgetProps) {
-    const { codeActions, context, additionalActions, isConfiguration, btnSx } = props;
-
-    return (
-        <CodeActionTooltip codeActions={codeActions} context={context} additionalActions={additionalActions}>
-            <Button
-                appearance="icon"
-                data-testid={`expression-label-code-action`}
-                sx={{ ...btnSx, userSelect: "none", pointerEvents: "auto" }}
-            >
-                <Codicon
-                    name={isConfiguration ? "settings-gear" : "lightbulb"}
-                    sx={{ height: "18px", width: "18px" }}
-                    iconSx={{ fontSize: "17px", color: "var(--vscode-input-placeholderForeground)" }}
-                />
-            </Button>
-        </CodeActionTooltip>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/CodeAction/CodeActionTooltip/CodeActionTooltip.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/CodeAction/CodeActionTooltip/CodeActionTooltip.tsx
deleted file mode 100644
index 94bc997ebac..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/CodeAction/CodeActionTooltip/CodeActionTooltip.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js jsx-no-lambda
-import React from "react";
-
-import { Item, Menu, MenuItem, Tooltip } from "@wso2/ui-toolkit";
-import { STModification } from "@wso2/ballerina-core";
-import { CodeAction, TextDocumentEdit, TextEdit } from "vscode-languageserver-types";
-
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-
-interface Props {
-    codeActions: CodeAction[];
-    context: IDataMapperContext;
-    additionalActions?: {
-        title: string;
-        onClick: () => void;
-    }[];
-    children: React.ReactNode | React.ReactNode[];
-}
-
-export const CodeActionTooltipID = "data-mapper-codeaction-tooltip";
-
-export function CodeActionTooltip(props: Partial<Props>) {
-    const { codeActions, context, children, additionalActions } = props;
-    const menuItems: React.ReactNode[] = [];
-    
-    const onCodeActionSelect = (action: CodeAction) => {
-        const modifications: STModification[] = [];
-        (action.edit?.documentChanges[0] as TextDocumentEdit).edits.forEach(
-            (change: TextEdit) => {
-                modifications.push({
-                    type: "INSERT",
-                    config: {
-                        STATEMENT: change.newText,
-                    },
-                    endColumn: change.range.end.character,
-                    endLine: change.range.end.line,
-                    startColumn: change.range.start.character,
-                    startLine: change.range.start.line,
-                });
-            }
-        );
-        modifications.sort((a, b) => a.startLine - b.startLine);
-        void context.applyModifications(modifications);
-    };
-
-    if (additionalActions && additionalActions.length > 0) {
-        additionalActions.forEach((item, index) => {
-            const menuItem: Item = { id: `${item.title}-${index}`, label: item.title, onClick: item.onClick }
-            menuItems.push(
-                <MenuItem
-                    key={`${item.title}-${index}`}
-                    sx={{ pointerEvents: "auto", userSelect: "none" }}
-                    item={menuItem}
-                    data-testid={`code-action-additional-${index}`}
-                />
-            );
-        });
-    }
-    if (codeActions) {
-        codeActions.forEach((action, index) => {
-            const menuItem: Item = { id: index, label: action.title, onClick: () => onCodeActionSelect(action) };
-            menuItems.push(
-                <MenuItem
-                    key={index}
-                    sx={{ pointerEvents: "auto", userSelect: "none" }}
-                    item={menuItem}
-                    data-testid={`code-action-${index}`}
-                />
-            );
-        });
-    }
-
-
-    const tooltipTitleComponent = (
-        <Menu sx={{ background: 'none', boxShadow: 'none', padding: 0 }}>
-            {menuItems}
-        </Menu>
-    );
-
-    return (
-        <Tooltip
-            content={tooltipTitleComponent}
-            position="bottom"
-            sx={{ padding: 0, fontSize: "12px" }}
-        >
-            {children}
-        </Tooltip>
-    )
-
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/CodeAction/style.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/CodeAction/style.ts
deleted file mode 100644
index 7ff78d45f26..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/CodeAction/style.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { css } from "@emotion/css";
-
-export const tooltipBaseStyles = {
-  tooltip: {
-      color: "#8d91a3",
-      backgroundColor: "#fdfdfd",
-      border: "1px solid #e6e7ec",
-      borderRadius: 6,
-      padding: "1rem"
-  },
-  arrow: {
-      color: "#fdfdfd"
-  }
-};
-
-export const useStyles = () => ({
-  element: css({
-    backgroundColor: "var(--vscode-input-background)",
-    padding: "10px",
-    cursor: "pointer",
-    transitionDuration: "0.2s",
-    userSelect: "none",
-    pointerEvents: "auto",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    "&:hover": {
-      filter: "brightness(0.95)",
-    }
-  }),
-  lightBulbWrapper: css({
-    height: "22px",
-    width: "22px",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-  }),
-  iconButton: css({
-    padding: "10px 14px",
-  }),
-  menu: css({
-    '& .MuiMenuItem-root': {
-      fontSize: '11px',
-      paddingBottom: "1px",
-      paddingTop: "1px"
-    }
-  }),
-  pre: css({
-    margin: 0,
-    overflowX: "auto",
-    whiteSpace: "pre-wrap",
-    wordWrap: "break-word",
-    backgroundColor: "white"
-  })
-});
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Diagnostic/Diagnostic.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Diagnostic/Diagnostic.tsx
deleted file mode 100644
index c6d09808fd1..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Diagnostic/Diagnostic.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js jsx-no-lambda
-import React from "react";
-
-import { Diagnostic } from "vscode-languageserver-types";
-
-import { DiagnosticTooltip } from "./DiagnosticTooltip/DiagnosticTooltip";
-import { Button, Icon } from "@wso2/ui-toolkit";
-
-export interface DiagnosticWidgetProps {
-    diagnostic: Diagnostic,
-    value?: string,
-    onClick?: () => void,
-    isLabelElement? : boolean,
-    btnSx?: React.CSSProperties
-}
-
-
-export function DiagnosticWidget(props: DiagnosticWidgetProps) {
-    const {diagnostic, value, onClick, btnSx} =  props;
-
-    return (
-        <DiagnosticTooltip diagnostic={diagnostic} value={value} onClick={onClick}>
-            <Button
-                appearance="icon"
-                data-testid={`expression-label-diagnostic`}
-                onClick={onClick}
-                sx={btnSx}
-            >
-                <Icon
-                    name="error-icon"
-                    sx={{ height: "14px", width: "14px" }}
-                    iconSx={{ fontSize: "14px", color: "var(--vscode-errorForeground)" }}
-                />
-            </Button>
-        </DiagnosticTooltip>
-    )
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Diagnostic/DiagnosticTooltip/DiagnosticTooltip.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Diagnostic/DiagnosticTooltip/DiagnosticTooltip.tsx
deleted file mode 100644
index ed88b76d0ae..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Diagnostic/DiagnosticTooltip/DiagnosticTooltip.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js jsx-no-lambda
-import React from "react";
-
-import { Button, Codicon, Divider, Icon, Tooltip } from "@wso2/ui-toolkit";
-import { Diagnostic } from "vscode-languageserver-types";
-
-import { useStyles } from "../style";
-
-interface Props {
-    placement: "top" | "bottom" | "left" | "right";
-    children: React.ReactNode;
-    diagnostic: Diagnostic
-    value?: string
-    onClick?: () => void;
-}
-
-export const DiagnosticTooltipID = "data-mapper-diagnostic-tooltip";
-
-export function DiagnosticTooltip(props: Partial<Props>) {
-    const { diagnostic, value, children, onClick } = props;
-    const classes = useStyles();
-    const source = diagnostic.source || value
-
-    const Code = () => (
-        <>
-            <Divider />
-            <div className={classes.source}>
-                <code
-                    data-lang="ballerina"
-                    className={classes.code}
-                >
-                    {source.trim()}
-                </code>
-                <Button
-                    appearance="icon"
-                    className={classes.editButton}
-                    aria-label="edit"
-                    onClick={onClick}
-                >
-                    <Codicon name="tools" sx={{ marginRight: "8px" }} />
-                    <span className={classes.editButtonText}>Fix by editing expression</span>
-                </Button>
-            </div>
-        </>
-
-    );
-    const DiagnosticC = () => (
-        <>
-            <Button
-                appearance="icon"
-                className={classes.editButton}
-                aria-label="edit"
-                onClick={onClick}
-            >
-                <Icon name="error-icon" iconSx={{ color: "var(--vscode-errorForeground)" }} />
-            </Button>
-            <div className={classes.diagnosticWrapper}>{diagnostic.message}</div>
-        </>
-
-    );
-
-    const tooltipTitleComponent = (
-        <pre className={classes.pre}>
-            {diagnostic.message && <DiagnosticC />}
-            {source && <Code />}
-        </pre>
-    );
-
-    return (
-        <Tooltip
-            id={DiagnosticTooltipID}
-            content={tooltipTitleComponent}
-            position="bottom"
-        >
-            {children}
-        </Tooltip>
-    )
-
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Diagnostic/style.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Diagnostic/style.ts
deleted file mode 100644
index 33b969aa4f6..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Diagnostic/style.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { css } from "@emotion/css";
-
-export const tooltipBaseStyles = {
-    tooltip: {
-        color: "#8d91a3",
-        backgroundColor: "#fdfdfd",
-        border: "1px solid #e6e7ec",
-        borderRadius: 6,
-        padding: "1rem"
-    },
-    arrow: {
-        color: "#fdfdfd"
-    }
-};
-
-export const useStyles = () => ({
-    element: css({
-        backgroundColor: "var(--vscode-input-background)",
-        padding: "10px",
-        cursor: "pointer",
-        transitionDuration: "0.2s",
-        userSelect: "none",
-        pointerEvents: "auto",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        "&:hover": {
-            filter: "brightness(0.95)",
-        }
-    }),
-    iconWrapper: css({
-        height: "22px",
-        width: "22px",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-    }),
-    divider: css({
-        margin: '5px 0px'
-    }),
-    editorLink: css({
-        color: "var(--vscode-editorInfo-foreground)",
-        fontSize: 12,
-        marginTop: 10,
-        cursor: 'pointer',
-        transition: "all 0.2s",
-        '&:hover': {
-            color: "var(--vscode-editorInfo-foreground)",
-        },
-    }),
-    pre: css({
-        margin: 0,
-        width: "300px",
-        whiteSpace: "pre-wrap",
-        wordWrap: "break-word",
-    }),
-    code: css({
-        borderRadius: 0,
-        backgroundColor: "var(--vscode-sideBar-background)",
-        fontSize: "13px",
-        padding: "4px 2px",
-        "& span": {
-            color: "var(--vscode-inputOption-activeForeground)"
-        }
-    }),
-    diagnosticWrapper: css({
-        fontSize: '12px',
-        letterSpacing: '0',
-        color: "var(--vscode-errorForeground)"
-    }),
-    source: css({
-        display: "flex",
-        flexDirection: "column"
-    }),
-    editText: css({
-        textTransform: "none",
-        justifyContent: "left",
-        fontSize: "13px"
-    }),
-    editButton: css({
-        marginTop: "10px",
-        color: "var(--vscode-input-placeholderForeground)",
-        width: "100% !important"
-    }),
-    editButtonText: css({
-        width: "fit-content",
-        textWrap: "nowrap",
-        fontSize: "13px"
-    })
-});
\ No newline at end of file
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Diagram.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Diagram.tsx
deleted file mode 100644
index d25432e4d6a..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Diagram.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-/* eslint-disable @typescript-eslint/await-thenable */
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js jsx-no-lambda
-import React, { useEffect, useRef, useState } from 'react';
-
-import { SelectionBoxLayerFactory } from "@projectstorm/react-canvas-core";
-import {
-	DefaultDiagramState,
-	DefaultLabelFactory,
-	DefaultLinkFactory,
-	DefaultNodeFactory,
-	DefaultPortFactory,
-	DiagramEngine,
-	DiagramModel,
-	NodeLayerFactory,
-	PathFindingLinkFactory
-} from "@projectstorm/react-diagrams";
-import "reflect-metadata";
-import { container } from "tsyringe";
-
-import { DataMapperDIContext } from '../../utils/DataMapperDIContext/DataMapperDIContext';
-import { ErrorNodeKind } from "../DataMapper/Error/RenderingError";
-
-import { DataMapperCanvasContainerWidget } from './Canvas/DataMapperCanvasContainerWidget';
-import { DataMapperCanvasWidget } from './Canvas/DataMapperCanvasWidget';
-import { DataMapperLinkModel } from './Link/model/DataMapperLink';
-import { DefaultState as LinkState } from './LinkState/DefaultState';
-import { DataMapperNodeModel } from './Node/commons/DataMapperNode';
-import { LinkConnectorNode } from './Node/LinkConnector';
-import { QueryExpressionNode } from './Node/QueryExpression';
-import { OverlayLayerFactory } from './OverlayLayer/OverlayLayerFactory';
-import { OverriddenLinkLayerFactory } from './OverriddenLinkLayer/LinkLayerFactory';
-import { useDiagramModel, useRepositionedNodes, useSearchScrollReset } from '../Hooks';
-import { throttle } from 'lodash';
-import { defaultModelOptions } from './utils/constants';
-import { calculateZoomLevel } from './utils/diagram-utils';
-import { IONodesScrollCanvasAction } from './Actions/IONodesScrollCanvasAction';
-import { ArrowLinkFactory } from './Link/ArrowLink';
-import { useDMSearchStore } from '../../store/store';
-
-interface DataMapperDiagramProps {
-	nodes?: DataMapperNodeModel[];
-	links?: DataMapperLinkModel[];
-	hideCanvas?: boolean;
-	onError?: (kind: ErrorNodeKind) => void;
-}
-
-function initDiagramEngine() {
-	const diContext = container.resolve(DataMapperDIContext);
-
-	const engine = new DiagramEngine({
-		registerDefaultPanAndZoomCanvasAction: false,
-		registerDefaultZoomCanvasAction: false,
-	});
-
-	// register model factories
-	engine.getLayerFactories().registerFactory(new NodeLayerFactory());
-	engine.getLayerFactories().registerFactory(new OverriddenLinkLayerFactory());
-	engine.getLayerFactories().registerFactory(new SelectionBoxLayerFactory());
-
-	engine.getLabelFactories().registerFactory(new DefaultLabelFactory());
-	engine.getNodeFactories().registerFactory(new DefaultNodeFactory());
-	engine.getLinkFactories().registerFactory(new DefaultLinkFactory());
-	engine.getLinkFactories().registerFactory(new PathFindingLinkFactory());
-	engine.getPortFactories().registerFactory(new DefaultPortFactory());
-	engine.getLinkFactories().registerFactory(new ArrowLinkFactory());
-
-	// register the default interaction behaviours
-	engine.getStateMachine().pushState(new DefaultDiagramState());
-	engine.getLayerFactories().registerFactory(new OverlayLayerFactory());
-
-	engine.getActionEventBus().registerAction(new IONodesScrollCanvasAction());
-
-	diContext.nodeFactories.forEach((nf) =>
-		engine.getNodeFactories().registerFactory(nf));
-	diContext.portFactories.forEach((pf) =>
-		engine.getPortFactories().registerFactory(pf));
-	diContext.linkFactories.forEach((lf) =>
-		engine.getLinkFactories().registerFactory(lf));
-	diContext.labelFactories.forEach((lbf) =>
-		engine.getLabelFactories().registerFactory(lbf));
-
-	const state = engine.getStateMachine().getCurrentState();
-	if (state instanceof DefaultDiagramState) {
-		state.dragNewLink.config.allowLooseLinks = false;
-	}
-
-	engine.getStateMachine().pushState(new LinkState());
-	return engine;
-}
-
-function DataMapperDiagram(props: DataMapperDiagramProps): React.ReactElement {
-	const { nodes, hideCanvas, onError } = props;
-
-	const [engine, setEngine] = useState<DiagramEngine>(initDiagramEngine());
-	const [diagramModel, setDiagramModel] = useState(new DiagramModel(defaultModelOptions));
-	const [screenWidth, setScreenWidth] = useState(window.innerWidth);
-	const getScreenWidthRef = useRef(() => screenWidth);
-	const devicePixelRatioRef = useRef(window.devicePixelRatio);
-	const [, forceUpdate] = useState({});
-
-	const { inputSearch, outputSearch } = useDMSearchStore.getState();
-
-	const zoomLevel = calculateZoomLevel(screenWidth);
-
-	const repositionedNodes = useRepositionedNodes(nodes, zoomLevel, diagramModel);
-	const { updatedModel, isFetching } = useDiagramModel(repositionedNodes, diagramModel, onError, zoomLevel, screenWidth);
-	useSearchScrollReset(diagramModel);
-
-	engine.setModel(diagramModel);
-
-	useEffect(() => {
-		engine.getStateMachine().pushState(new LinkState(true));
-	}, [inputSearch, outputSearch]);
-
-	useEffect(() => {
-		getScreenWidthRef.current = () => screenWidth;
-	}, [screenWidth]);
-
-	const handleResize = throttle(() => {
-		const newScreenWidth = window.innerWidth;
-		const newDevicePixelRatio = window.devicePixelRatio;
-
-		if (newDevicePixelRatio === devicePixelRatioRef.current && newScreenWidth !== getScreenWidthRef.current()) {
-			setScreenWidth(newScreenWidth);
-		}
-		devicePixelRatioRef.current = newDevicePixelRatio;
-	}, 100);
-
-	useEffect(() => {
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
-
-	useEffect(() => {
-        if (!isFetching) {
-            setDiagramModel(updatedModel);
-        }
-    }, [isFetching, updatedModel]);
-
-	useEffect(() => {
-		if (!isFetching && engine.getModel()) {
-			const modelNodes = engine.getModel().getNodes();
-			const nodesToUpdate = modelNodes.filter(node => 
-				node instanceof LinkConnectorNode || node instanceof QueryExpressionNode
-			);
-
-			nodesToUpdate.forEach((node: LinkConnectorNode | QueryExpressionNode) => {
-				node.initLinks();
-				const targetPortPosition = node.targetPort?.getPosition();
-				if (targetPortPosition) {
-					node.setPosition(targetPortPosition.x - 180, targetPortPosition.y - 6.5);
-				}
-			});
-	
-			if (nodesToUpdate.length > 0) {
-				forceUpdate({});
-			}
-		}
-	}, [diagramModel, isFetching, screenWidth]);
-
-	return (
-		<>
-			{engine && engine.getModel() && (
-				<>
-					<DataMapperCanvasContainerWidget hideCanvas={hideCanvas}>
-						<DataMapperCanvasWidget engine={engine} />
-					</DataMapperCanvasContainerWidget>
-				</>
-			)}
-		</>
-	);
-
-
-}
-
-export default React.memo(DataMapperDiagram);
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/ArrayMappingOptionsWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/ArrayMappingOptionsWidget.tsx
deleted file mode 100644
index 8ff5483e5d5..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/ArrayMappingOptionsWidget.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React from 'react';
-
-import { TypeKind } from '@wso2/ballerina-core';
-import { Codicon, Item, Menu, MenuItem } from '@wso2/ui-toolkit';
-import { css } from '@emotion/css';
-
-import { MappingType, RecordFieldPortModel, ValueType } from '../Port';
-import { DataMapperLinkModel } from '../Link';
-import { ExpressionLabelModel } from './ExpressionLabelModel';
-import { buildInputAccessExpr, createSourceForMapping, genArrayElementAccessSuffix, getLocalVariableNames, getValueType, mapUsingCustomFunction, modifySpecificFieldSource, updateExistingValue } from '../utils/dm-utils';
-import { ClauseType, generateQueryExpression } from '../Link/link-utils';
-import { useDMFocusedViewStateStore } from '../../../store/store';
-import { canPerformAggregation } from '../utils/type-utils';
-
-export const useStyles = () => ({
-    arrayMappingMenu: css({
-        pointerEvents: 'auto'
-    }),
-    itemContainer: css({
-        display: 'flex',
-        width: '100%',
-        alignItems: 'center'
-    }),
-});
-
-const a2aMenuStyles = {
-    backgroundColor: "var(--vscode-quickInput-background)",
-    boxShadow: "none",
-    padding: "0px",
-    border: "1px solid var(--vscode-debugIcon-breakpointDisabledForeground)"
-};
-
-const codiconStyles = {
-    color: 'var(--vscode-editorLightBulb-foreground)',
-    marginRight: '10px'
-}
-
-export interface ArrayMappingOptionsWidgetProps {
-    model: ExpressionLabelModel;
-}
-
-export function ArrayMappingOptionsWidget(props: ArrayMappingOptionsWidgetProps) {
-    const classes = useStyles();
-    const { link, pendingMappingType, context } = props.model;
-    const focusedViewStore = useDMFocusedViewStateStore();
-
-    const sourcePort = link.getSourcePort() as RecordFieldPortModel;
-    const targetPort = link?.getTargetPort() as RecordFieldPortModel;
-    const valueType = getValueType(link);
-    const targetPortHasLinks = Object.values(targetPort.links)
-        ?.some(link => (link as DataMapperLinkModel)?.isActualLink);
-
-    const isValueModifiable = valueType === ValueType.Replaceable
-        || (valueType === ValueType.Mergeable && !targetPortHasLinks);
-    
-    const onClickMapArrays = async () => {
-        if (valueType === ValueType.Replaceable) {
-            await updateExistingValue(sourcePort, targetPort);
-        } else if (valueType === ValueType.Mergeable) {
-            await modifySpecificFieldSource(sourcePort, targetPort, link.getID());
-        } else {
-            await createSourceForMapping(sourcePort, targetPort);
-        }
-    }
-
-    const onClickMapIndividualElements = async (clause: ClauseType = ClauseType.Select, isElementAccss?: boolean) => {
-        if (targetPort instanceof RecordFieldPortModel && sourcePort instanceof RecordFieldPortModel) {
-            const targetPortField = targetPort.field;
-            const isArrayType = targetPortField.typeName === TypeKind.Array && targetPortField?.memberType;
-            const isAggregation = clause === ClauseType.Collect;
-
-            if (isArrayType || isElementAccss || isAggregation) {
-                let isSourceOptional = sourcePort.field.optional;
-                const localVariables = getLocalVariableNames(context.functionST);
-                const inputAccessExpr = buildInputAccessExpr((link.getSourcePort() as RecordFieldPortModel).fieldFQN);
-                const targetType = isElementAccss || isAggregation ? targetPortField : targetPortField.memberType;
-
-                const mapFnSrc = generateQueryExpression(
-                    inputAccessExpr, targetType, isSourceOptional, clause, [...localVariables]
-                );
-
-                focusedViewStore.setPortFQNs(sourcePort.fieldFQN, targetPort.fieldFQN);
-
-                const updatedMapFnSrc = isElementAccss ? `(${mapFnSrc})[0]` : mapFnSrc;
-                if (isValueModifiable) {
-                    await updateExistingValue(sourcePort, targetPort, updatedMapFnSrc);
-                } else {
-                    await createSourceForMapping(sourcePort, targetPort, updatedMapFnSrc);
-                }
-            }
-        }
-    };
-
-    const onClickMapArraysAccessSingleton = async () => {
-        const newExpr = (sourcePort as RecordFieldPortModel).fieldFQN + genArrayElementAccessSuffix(sourcePort, targetPort);
-
-        if (valueType === ValueType.Replaceable) {
-            await updateExistingValue(sourcePort, targetPort, newExpr);
-        } else if (valueType === ValueType.Mergeable) {
-            await modifySpecificFieldSource(sourcePort, targetPort, link.getID(), newExpr);
-        } else {
-            await createSourceForMapping(sourcePort, targetPort, newExpr);
-        }
-    }
-
-    const onClickMapUsingCustomFunction = async () => {
-        await mapUsingCustomFunction(sourcePort, targetPort, link.getID(), context, valueType);
-    };
-
-    const getItemElement = (id: string, label: string) => {
-        return (
-            <div
-                className={classes.itemContainer}
-                key={id}
-            >
-                <Codicon name="lightbulb" sx={codiconStyles} />
-                {label}
-            </div>
-        );
-    }
-
-    const a2aMenuItems: Item[] = [
-        {
-            id: "a2a-direct",
-            label: getItemElement("a2a-direct", "Map Input Array to Output Array"),
-            onClick: onClickMapArrays
-        },
-        {
-            id: "a2a-inner",
-            label: getItemElement("a2a-inner", "Map Using Query Expression"),
-            onClick: onClickMapIndividualElements
-        }
-    ];
-
-    const a2sMenuItems: Item[] = [
-        {
-            id: "a2s-direct",
-            label: getItemElement("a2s-direct", "Extract Single Element from Array"),
-            onClick: onClickMapArraysAccessSingleton
-        },
-        {
-            id: "a2s-inner",
-            label: getItemElement("a2s-inner", "Map via Query Expression and access element"),
-            onClick: () => onClickMapIndividualElements(ClauseType.Select, true)
-        }
-    ];
-
-    if (canPerformAggregation(targetPort)) {
-        a2sMenuItems.push({
-            id: "a2a-aggregate",
-            label: getItemElement("a2a-aggregate", "Aggregate using Query"),
-            onClick: () => onClickMapIndividualElements(ClauseType.Collect)
-        });
-    }
-
-    const menuItems = pendingMappingType === MappingType.ArrayToArray ? a2aMenuItems : a2sMenuItems;
-
-    menuItems.push({
-        id: "a2a-a2s-func",
-        label: getItemElement("a2a-a2s-func", "Map Using Custom Function"),
-        onClick: onClickMapUsingCustomFunction
-    });
-
-    return (
-        <div className={classes.arrayMappingMenu}>
-            <Menu sx={a2aMenuStyles}>
-                {menuItems.map((item: Item) =>
-                    <MenuItem
-                        key={`item ${item.id}`}
-                        item={item}
-                    />
-                )}
-            </Menu>
-        </div>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/ExpressionLabelFactory.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/ExpressionLabelFactory.tsx
deleted file mode 100644
index dd87dd34e80..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/ExpressionLabelFactory.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from 'react';
-
-import { AbstractReactFactory, GenerateWidgetEvent } from '@projectstorm/react-canvas-core';
-import { DiagramEngine } from '@projectstorm/react-diagrams';
-import { container, injectable, singleton } from 'tsyringe';
-
-import { ExpressionLabelModel } from './ExpressionLabelModel';
-import { EditableLabelWidget } from './ExpressionLabelWidget';
-import { MappingType } from '../Port';
-import { ArrayMappingOptionsWidget } from './ArrayMappingOptionsWidget';
-import { SubLinkLabelWidget } from './SubLinkLabelWidget';
-import { IncompatibleMappingOprionsWidget } from './IncompatibleMappingOprionsWidget';
-
-@injectable()
-@singleton()
-export class ExpressionLabelFactory extends AbstractReactFactory<ExpressionLabelModel, DiagramEngine> {
-	constructor() {
-		super('expression-label');
-	}
-
-	generateModel(): ExpressionLabelModel {
-		return new ExpressionLabelModel();
-	}
-
-	generateReactWidget(event: GenerateWidgetEvent<ExpressionLabelModel>): JSX.Element {
-		const { pendingMappingType, isSubLinkLabel } = event.model;
-
-		if (pendingMappingType == MappingType.ArrayToArray || pendingMappingType == MappingType.ArrayToSingleton) {
-			return <ArrayMappingOptionsWidget model={event.model}/>;
-		} else if (pendingMappingType === MappingType.RecordToRecord || pendingMappingType === MappingType.UnionToAny) {
-			return <IncompatibleMappingOprionsWidget model={event.model} />;
-		}
-
-		if (isSubLinkLabel) {
-			return <SubLinkLabelWidget model={event.model}  />;
-		}
-
-		return <EditableLabelWidget model={event.model} />;
-	}
-}
-container.register("LabelFactory", {useClass: ExpressionLabelFactory});
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/ExpressionLabelModel.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/ExpressionLabelModel.ts
deleted file mode 100644
index 3977eb910f3..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/ExpressionLabelModel.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { BaseModelOptions, DeserializeEvent } from '@projectstorm/react-canvas-core';
-import { LabelModel } from '@projectstorm/react-diagrams';
-import { NodePosition, STNode } from '@wso2/syntax-tree';
-
-import { IDataMapperContext } from '../../../utils/DataMapperContext/DataMapperContext';
-import { DataMapperLinkModel } from '../Link';
-import { MappingType, RecordFieldPortModel } from '../Port';
-
-export interface ExpressionLabelOptions extends BaseModelOptions {
-	value?: string;
-	valueNode?: STNode;
-	context?: IDataMapperContext;
-	link?: DataMapperLinkModel;
-	field?: STNode;
-	editorLabel?: string;
-	isSubLinkLabel?: boolean;
-	deleteLink?: () => void;
-}
-
-export class ExpressionLabelModel extends LabelModel {
-	value?: string;
-	valueNode?: STNode;
-	context: IDataMapperContext;
-	link?: DataMapperLinkModel;
-	field?: STNode;
-	editorLabel?: string;
-	pendingMappingType?: MappingType;
-	isSubLinkLabel?: boolean;
-	deleteLink?: () => void;
-
-	constructor(options: ExpressionLabelOptions = {}) {
-		super({
-			...options,
-			type: 'expression-label'
-		});
-		this.value = options.value || '';
-		this.valueNode = options.valueNode;
-		this.context = options.context;
-		this.link = options.link;
-		this.field = options.field;
-		this.editorLabel = options.editorLabel;
-		this.isSubLinkLabel = options.isSubLinkLabel;
-		this.updateSource = this.updateSource.bind(this);
-		this.deleteLink = options.deleteLink;
-	}
-
-	serialize() {
-		return {
-			...super.serialize(),
-			value: this.value
-		};
-	}
-
-	deserialize(event: DeserializeEvent<this>): void {
-		super.deserialize(event);
-		this.value = event.data.value;
-	}
-
-	updateSource(): void {
-		const valueNodePosition = this.valueNode.position as NodePosition;
-		const modifications = [
-			{
-				type: "INSERT",
-				config: {
-					"STATEMENT": this.value,
-				},
-				endColumn: valueNodePosition.endColumn,
-				endLine: valueNodePosition.endLine,
-				startColumn: valueNodePosition.startColumn,
-				startLine: valueNodePosition.startLine
-			}
-		];
-		void this.context.applyModifications(modifications);
-	}
-
-	setPendingMappingType(mappingType: MappingType): void {
-		const sourcePort = this.link?.getSourcePort();
-		const targetPort = this.link?.getTargetPort();
-
-		this.pendingMappingType = mappingType;
-
-		if (sourcePort instanceof RecordFieldPortModel && targetPort instanceof RecordFieldPortModel) {
-			sourcePort.setPendingMappingType(mappingType);
-			targetPort.setPendingMappingType(mappingType);
-		}
-	}
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/ExpressionLabelWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/ExpressionLabelWidget.tsx
deleted file mode 100644
index b49f9561fe5..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/ExpressionLabelWidget.tsx
+++ /dev/null
@@ -1,432 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React from 'react';
-
-import { css } from '@emotion/css';
-import { PrimitiveBalType, TypeField, TypeKind } from "@wso2/ballerina-core";
-import { FunctionCall, NodePosition, STKindChecker,} from '@wso2/syntax-tree';
-import classNames from "classnames";
-
-import { CodeActionWidget } from '../CodeAction/CodeAction';
-import { DiagnosticWidget } from '../Diagnostic/Diagnostic';
-import { DataMapperLinkModel } from "../Link";
-import { generateQueryExpression, ClauseType } from '../Link/link-utils';
-import { MappingType, RecordFieldPortModel } from '../Port';
-import {
-    getBalRecFieldName,
-    getFilteredUnionOutputTypes,
-    getLocalVariableNames,
-    getMappedFnNames,
-    getCollectClauseActions,
-    getMappingType
-} from '../utils/dm-utils';
-import { handleCodeActions } from "../utils/ls-utils";
-
-import { ExpressionLabelModel } from './ExpressionLabelModel';
-import { Button, Codicon, ProgressRing } from '@wso2/ui-toolkit';
-import { QueryExprMappingType } from '../Node';
-import { useDMFocusedViewStateStore } from '../../../store/store';
-import { canPerformAggregation } from '../utils/type-utils';
-
-export interface EditableLabelWidgetProps {
-    model: ExpressionLabelModel;
-}
-
-export const useStyles = () => ({
-    container: css({
-        width: '100%',
-        backgroundColor: "var(--vscode-sideBar-background)",
-        padding: "2px",
-        borderRadius: "2px",
-        display: "flex",
-        color: "var(--vscode-checkbox-border)",
-        alignItems: "center",
-        "& > vscode-button > *": {
-            margin: "0 2px"
-        },
-        border: "1px solid var(--vscode-welcomePage-tileBorder)",
-    }),
-    containerHidden: css({
-        visibility: 'hidden',
-    }),
-    btnContainer: css({
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        "& > *": {
-            margin: "0 2px"
-        }
-    }),
-    element: css({
-        backgroundColor: 'var(--vscode-input-background)',
-        padding: '10px',
-        cursor: 'pointer',
-        transitionDuration: '0.2s',
-        userSelect: 'none',
-        pointerEvents: 'auto',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        '&:hover': {
-            filter: 'brightness(0.95)',
-        },
-    }),
-    iconWrapper: css({
-        height: '22px',
-        width: '22px',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-    }),
-    codeIconButton: css({
-        color: 'var(--vscode-checkbox-border)',
-    }),
-    deleteIconButton: css({
-        color: 'var(--vscode-checkbox-border)',
-    }),
-    separator: css({
-        height: 'fit-content',
-        width: '1px',
-        backgroundColor: 'var(--vscode-editor-lineHighlightBorder)',
-    }),
-    rightBorder: css({
-        borderRightWidth: '2px',
-        borderColor: 'var(--vscode-pickerGroup-border)',
-    }),
-    loadingContainer: css({
-        padding: '10px',
-    }),
-});
-
-export enum LinkState {
-    TemporaryLink,
-    LinkSelected,
-    LinkNotSelected
-}
-
-export const AggregationFunctions = ["avg", "count", "max", "min", "sum"];
-
-// now we can render all what we want in the label
-export function EditableLabelWidget(props: EditableLabelWidgetProps) {
-    const { link, context, value, field, editorLabel, deleteLink } = props.model;
-
-    const [linkStatus, setLinkStatus] = React.useState<LinkState>(LinkState.LinkNotSelected);
-    const [mappingType, setMappingType] = React.useState<MappingType>(undefined);
-    const [codeActions, setCodeActions] = React.useState([]);
-    const [deleteInProgress, setDeleteInProgress] = React.useState(false);
-
-    const focusedViewStore = useDMFocusedViewStateStore();
-
-    const source = link?.getSourcePort()
-    const target = link?.getTargetPort()
-
-    const classes = useStyles();
-    const diagnostic = link && link.hasError() ? link.diagnostics[0] : null;
-    const connectedViaCollectClause = context?.selection.selectedST?.mappingType
-        && context.selection.selectedST.mappingType === QueryExprMappingType.A2SWithCollect;
-
-    React.useEffect(() => {
-        async function genModel() {
-            const actions = (await handleCodeActions(context.filePath, link?.diagnostics, context.langServerRpcClient))
-            setCodeActions(actions)
-        }
-
-        if (value) {
-            void genModel();
-        }
-    }, [props.model]);
-
-    const onClickDelete = (evt?: React.MouseEvent<HTMLDivElement>) => {
-        if (evt) {
-            evt.preventDefault();
-            evt.stopPropagation();
-        }
-        setDeleteInProgress(true);
-        if (deleteLink) {
-            deleteLink();
-        }
-    };
-
-    const onClickEdit = (evt?: React.MouseEvent<HTMLDivElement>) => {
-        const currentReference = (source as RecordFieldPortModel).fieldFQN;
-        context.referenceManager.handleCurrentReferences([currentReference]);
-        if (evt) {
-            evt.preventDefault();
-            evt.stopPropagation();
-        }
-        context.enableStatementEditor({
-            valuePosition: field.position as NodePosition,
-            value: field.source,
-            label: editorLabel
-        });
-    };
-
-    const applyQueryExpr = (
-        linkModel: DataMapperLinkModel,
-        targetRecord: TypeField,
-        clause: ClauseType,
-        isElementAccss?: boolean
-    ) => {
-        if (linkModel.value
-            && (STKindChecker.isFieldAccess(linkModel.value) || STKindChecker.isSimpleNameReference(linkModel.value))) {
-
-                const sourcePort = linkModel.getSourcePort() as RecordFieldPortModel;
-                const targetPort = linkModel.getTargetPort() as RecordFieldPortModel;
-                
-                const isOptionalSource = sourcePort.field.optional;
-                let position = linkModel.value.position as NodePosition;
-
-                const expr = targetPort.editableRecordField?.value;
-                if (STKindChecker.isSpecificField(expr)) {
-                    position = expr.valueExpr.position as NodePosition;
-                } else {
-                    position = expr.position as NodePosition;
-                }
-
-                const localVariables = getLocalVariableNames(context.functionST);
-
-                const querySrc = generateQueryExpression(linkModel.value.source, targetRecord, isOptionalSource,
-                    clause, [...localVariables]);
-                const modifications = [{
-                    type: "INSERT",
-                    config: {
-                        "STATEMENT": isElementAccss ? `(${querySrc})[0]` : querySrc,
-                    },
-                    endColumn: position.endColumn,
-                    endLine: position.endLine,
-                    startColumn: position.startColumn,
-                    startLine: position.startLine
-                }];
-                void context.applyModifications(modifications);
-                focusedViewStore.setPortFQNs(sourcePort.fieldFQN, targetPort.fieldFQN);
-        }
-    };
-
-    React.useEffect(() => {
-        if (link && link.isActualLink) {
-            link.registerListener({
-                selectionChanged(event) {
-                    setLinkStatus(event.isSelected ? LinkState.LinkSelected : LinkState.LinkNotSelected);
-                },
-            });
-            const mappingType = getMappingType(source, target);
-            setMappingType(mappingType);
-        } else {
-            setLinkStatus(LinkState.TemporaryLink);
-        }
-    }, [props.model]);
-
-    const loadingScreen = (
-        <ProgressRing sx={{ height: '16px', width: '16px' }} />
-    );
-
-    const elements: React.ReactNode[] = [
-        (
-            <div className={classes.btnContainer}>
-                <Button
-                    appearance="icon"
-                    onClick={onClickEdit}
-                    data-testid={`expression-label-edit`}
-                    sx={{ userSelect: "none", pointerEvents: "auto" }}
-                >
-                    <Codicon name="code" iconSx={{ color: "var(--vscode-input-placeholderForeground)" }} />
-                </Button>
-                <div className={classes.separator}/>
-                {deleteInProgress ? (
-                    loadingScreen
-                ) : (
-                    <Button
-                        appearance="icon"
-                        onClick={onClickDelete}
-                        data-testid={`expression-label-delete`}
-                        sx={{ userSelect: "none", pointerEvents: "auto" }}
-                    >
-                        <Codicon name="trash" iconSx={{ color: "var(--vscode-errorForeground)" }} />
-                    </Button>
-                )}
-            </div>
-        ),
-    ];
-
-    const isArrayType = (type: TypeField): boolean => {
-        return type.typeName === PrimitiveBalType.Array && !!type.memberType;
-    };
-    
-    const handleArrayType = (
-        type: TypeField,
-        link: DataMapperLinkModel,
-        clauseType: ClauseType,
-        isElementAccss?: boolean
-    ) => {
-        if (isArrayType(type)) {
-            applyQueryExpr(link, type.memberType, clauseType, isElementAccss);
-        } else if (isElementAccss) {
-            applyQueryExpr(link, type, clauseType, isElementAccss);
-        }
-    };
-    
-    const onClickConvertToQuery = (isElementAccss?: boolean) => {
-        if (!(target instanceof RecordFieldPortModel)) {
-            return;
-        }
-    
-        const targetPortField = target.field;
-
-        if (targetPortField.typeName === PrimitiveBalType.Union) {
-            const [unionType] = getFilteredUnionOutputTypes(targetPortField);
-            handleArrayType(unionType, link, ClauseType.Select, isElementAccss);
-        } else {
-            handleArrayType(targetPortField, link, ClauseType.Select, isElementAccss);
-        }
-    };
-
-    const onClickAggregateViaQuery = () => {
-        if (!(target instanceof RecordFieldPortModel)) {
-            return;
-        }
-
-        const targetPortField = target.field;
-
-        if (targetPortField.typeName === PrimitiveBalType.Union) {
-            const [type] = getFilteredUnionOutputTypes(targetPortField);
-            handleArrayType(type, link, ClauseType.Collect);
-        } else {
-            handleArrayType(targetPortField, link, ClauseType.Collect);
-        }
-    };
-
-    const additionalActions = [];
-    if (mappingType === MappingType.ArrayToArray) {
-        additionalActions.push({
-            title: "Convert to Query",
-            onClick: onClickConvertToQuery
-        });
-    } else if (mappingType === MappingType.ArrayToSingleton) {
-        const supportsAggregation = canPerformAggregation(target);
-        if (supportsAggregation) {
-            additionalActions.push({
-                title: "Aggregate using Query",
-                onClick: onClickAggregateViaQuery
-            });
-        }
-        additionalActions.push({
-            title: "Convert to Query and Access Element",
-            onClick: () => onClickConvertToQuery(true)
-        });
-    }
-
-    if (codeActions.length > 0 || additionalActions.length > 0) {
-        elements.push(<div className={classes.separator}/>);
-        elements.push(
-            <CodeActionWidget
-                codeActions={codeActions}
-                context={context}
-                additionalActions={additionalActions}
-                btnSx={{ margin: "0 2px" }}
-            />
-        );
-    }
-
-    if (connectedViaCollectClause) {
-        const fnNames = getMappedFnNames(target);
-        // Getting the 0th element since ExpressionLabelWidget is only used for simple links
-        const fnName = fnNames && fnNames[0];
-        if (AggregationFunctions.includes(fnName)) {
-            const mappedExpr = (target as RecordFieldPortModel)?.editableRecordField?.value;
-            const additionalActions = getCollectClauseActions(fnName, mappedExpr as FunctionCall, context.applyModifications);
-            elements.push(<div className={classes.separator}/>);
-            elements.push(
-                <CodeActionWidget
-                    context={context}
-                    additionalActions={additionalActions}
-                    isConfiguration={true}
-                    btnSx={{ margin: "0 2px" }}
-                />
-            );
-        }
-    }
-
-    if (diagnostic) {
-        elements.push(<div className={classes.separator}/>);
-        elements.push(
-            <DiagnosticWidget
-                diagnostic={diagnostic}
-                value={value}
-                onClick={onClickEdit}
-                isLabelElement={true}
-                btnSx={{ margin: "0 2px" }}
-            />
-        );
-    }
-
-    let isSourceCollapsed = false;
-    let isTargetCollapsed = false;
-    const collapsedFields = props.model?.context?.collapsedFields;
-
-    if (source instanceof RecordFieldPortModel) {
-        if (source?.parentId) {
-            const fieldName = getBalRecFieldName(source.field.name);
-            isSourceCollapsed = collapsedFields?.includes(`${source.parentId}.${fieldName}`)
-        } else {
-            isSourceCollapsed = collapsedFields?.includes(source.portName)
-        }
-    }
-
-    if (target instanceof RecordFieldPortModel) {
-        if (target?.parentId) {
-            const fieldName = getBalRecFieldName(target.field.name);
-            isTargetCollapsed = collapsedFields?.includes(`${target.parentId}.${fieldName}`)
-        } else {
-            isTargetCollapsed = collapsedFields?.includes(target.portName)
-        }
-    }
-
-    const isSourcePortArray = source instanceof RecordFieldPortModel && source?.field.typeName === TypeKind.Array;
-    const isTargetPortArray = target instanceof RecordFieldPortModel && target?.field.typeName === TypeKind.Array;
-
-    if (props.model?.valueNode && isSourceCollapsed && isTargetCollapsed && !isSourcePortArray && !isTargetPortArray) {
-        // for direct links, disable link widgets if both sides are collapsed
-        return null
-    } else if (!props.model?.valueNode && ((isSourceCollapsed && !isSourcePortArray) || (isTargetCollapsed && !isTargetPortArray))) {
-        // for links with intermediary nodes,
-        // disable link widget if either source or target port is collapsed
-        return null;
-    }
-
-    if (linkStatus === LinkState.TemporaryLink) {
-        return (
-            <div className={classNames(classes.container, classes.element, classes.loadingContainer)}>
-                {loadingScreen}
-            </div>
-        );
-    }
-
-    return (
-        <div
-            data-testid={`expression-label-for-${link?.getSourcePort()?.getName()}-to-${link?.getTargetPort()?.getName()}`}
-            className={classNames(
-                classes.container,
-                linkStatus === LinkState.LinkNotSelected && !deleteInProgress && !connectedViaCollectClause && classes.containerHidden
-            )}
-        >
-            {elements}
-        </div>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/IncompatibleMappingOprionsWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/IncompatibleMappingOprionsWidget.tsx
deleted file mode 100644
index 1ab998a800d..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/IncompatibleMappingOprionsWidget.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React from 'react';
-
-import { Codicon, Item, Menu, MenuItem } from '@wso2/ui-toolkit';
-import { css } from '@emotion/css';
-
-import { RecordFieldPortModel, ValueType } from '../Port';
-import {
-    createSourceForMapping,
-    getValueType,
-    mapUsingCustomFunction,
-    modifySpecificFieldSource,
-    updateExistingValue
-} from '../utils/dm-utils';
-import { ExpressionLabelModel } from './ExpressionLabelModel';
-
-export const useStyles = () => ({
-    arrayMappingMenu: css({
-        pointerEvents: 'auto'
-    }),
-    itemContainer: css({
-        display: 'flex',
-        width: '100%',
-        alignItems: 'center'
-    }),
-});
-
-const menuStyles = {
-    backgroundColor: "var(--vscode-quickInput-background)",
-    boxShadow: "none",
-    padding: "0px",
-    border: "1px solid var(--vscode-debugIcon-breakpointDisabledForeground)"
-};
-
-const codiconStyles = {
-    color: 'var(--vscode-editorLightBulb-foreground)',
-    marginRight: '10px'
-}
-
-export interface IncompatibleMappingOprionsWidgetProps {
-    model: ExpressionLabelModel;
-}
-
-export function IncompatibleMappingOprionsWidget(props: IncompatibleMappingOprionsWidgetProps) {
-    const classes = useStyles();
-    const { link, context } = props.model;
-
-    const sourcePort = link.getSourcePort() as RecordFieldPortModel;
-    const targetPort = link?.getTargetPort() as RecordFieldPortModel;
-    const valueType = getValueType(link);
-
-    const onClickMapDirectly = async () => {
-        if (valueType === ValueType.Replaceable) {
-            await updateExistingValue(sourcePort, targetPort);
-        } else if (valueType === ValueType.Mergeable) {
-            await modifySpecificFieldSource(sourcePort, targetPort, link.getID());
-        } else {
-            await createSourceForMapping(sourcePort, targetPort);
-        }
-    }
-
-    const onClickMapUsingCustomFunction = async () => {
-        await mapUsingCustomFunction(sourcePort, targetPort, link.getID(), context, valueType);
-    };
-
-    const getItemElement = (id: string, label: string) => {
-        return (
-            <div
-                className={classes.itemContainer}
-                key={id}
-            >
-                <Codicon name="lightbulb" sx={codiconStyles} />
-                {label}
-            </div>
-        );
-    }
-
-    const o2oMenuItems: Item[] = [
-        {
-            id: "incompatible-direct",
-            label: getItemElement("incompatible-direct", "Map Directly"),
-            onClick: onClickMapDirectly
-        },
-        {
-            id: "incompatible-func",
-            label: getItemElement("incompatible-func", "Map Using Custom Function"),
-            onClick: onClickMapUsingCustomFunction
-        }
-    ];
-
-    return (
-        <div className={classes.arrayMappingMenu}>
-            <Menu sx={menuStyles}>
-                {o2oMenuItems.map((item: Item) =>
-                    <MenuItem
-                        key={`item ${item.id}`}
-                        item={item}
-                    />
-                )}
-            </Menu>
-        </div>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/SubLinkLabelWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/SubLinkLabelWidget.tsx
deleted file mode 100644
index dfaa1acf35c..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/SubLinkLabelWidget.tsx
+++ /dev/null
@@ -1,192 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React, { MouseEvent, ReactNode, useEffect, useState } from 'react';
-
-import { Button, Codicon, ProgressRing } from '@wso2/ui-toolkit';
-import { css } from '@emotion/css';
-import classNames from "classnames";
-
-import { RecordFieldPortModel } from '../Port';
-import { ExpressionLabelModel } from './ExpressionLabelModel';
-
-export const useStyles = () => ({
-    container: css({
-        width: '100%',
-        backgroundColor: "var(--vscode-sideBar-background)",
-        padding: "2px",
-        borderRadius: "6px",
-        border: "1px solid var(--vscode-welcomePage-tileBorder)",
-        display: "flex",
-        color: "var(--vscode-checkbox-border)",
-        alignItems: "center",
-        "& > vscode-button > *": {
-            margin: "0 2px"
-        }
-    }),
-    containerHidden: css({
-        visibility: 'hidden',
-    }),
-    btnContainer: css({
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        "& > *": {
-            margin: "0 2px"
-        }
-    }),
-    element: css({
-        backgroundColor: 'var(--vscode-input-background)',
-        padding: '10px',
-        cursor: 'pointer',
-        transitionDuration: '0.2s',
-        userSelect: 'none',
-        pointerEvents: 'auto',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        '&:hover': {
-            filter: 'brightness(0.95)',
-        },
-    }),
-    loadingContainer: css({
-        padding: '10px',
-    })
-});
-
-export enum LinkState {
-    TemporaryLink,
-    LinkSelected,
-    LinkNotSelected
-}
-
-export interface SubLinkLabelWidgetProps {
-    model: ExpressionLabelModel;
-}
-
-export function SubLinkLabelWidget(props: SubLinkLabelWidgetProps) {
-    const [linkStatus, setLinkStatus] = useState<LinkState>(LinkState.LinkNotSelected);
-    const [deleteInProgress, setDeleteInProgress] = useState(false);
-    
-    const classes = useStyles();
-    const { link, value, valueNode, context, deleteLink } = props.model;
-    const collapsedFields = context?.collapsedFields || [];
-    const source = link?.getSourcePort();
-    const target = link?.getTargetPort();
-    
-    useEffect(() => {
-        if (link && link.isActualLink) {
-            link.registerListener({
-                selectionChanged(event) {
-                    setLinkStatus(event.isSelected ? LinkState.LinkSelected : LinkState.LinkNotSelected);
-                },
-            });
-        } else {
-            setLinkStatus(LinkState.TemporaryLink);
-        }
-    }, [props.model]);
-
-    const onClickDelete = (evt?: MouseEvent<HTMLDivElement>) => {
-        if (evt) {
-            evt.preventDefault();
-            evt.stopPropagation();
-        }
-        setDeleteInProgress(true);
-        if (deleteLink) {
-            deleteLink();
-        }
-    };
-
-
-    const loadingScreen = (
-        <ProgressRing sx={{ height: '16px', width: '16px' }} />
-    );
-
-    const elements: ReactNode[] = [
-        (
-            <div
-                key={`sub-link-label-edit-${value}`}
-                className={classes.btnContainer}
-            >
-                {deleteInProgress ? (
-                    loadingScreen
-                ) : (
-                    <Button
-                        appearance="icon"
-                        onClick={onClickDelete}
-                        data-testid={`expression-label-delete`}
-                        sx={{ userSelect: "none", pointerEvents: "auto" }}
-                    >
-                        <Codicon name="trash" iconSx={{ color: "var(--vscode-errorForeground)" }} />
-                    </Button>
-                )}
-            </div>
-        )
-    ];
-
-   
-    let isSourceCollapsed = false;
-    let isTargetCollapsed = false;
-
-    if (source instanceof RecordFieldPortModel) {
-        if (source?.parentId) {
-            const fieldName = source.field.name;
-            isSourceCollapsed = collapsedFields?.includes(`${source.parentId}.${fieldName}`)
-        } else {
-            isSourceCollapsed = collapsedFields?.includes(source.portName)
-        }
-    }
-
-    if (target instanceof RecordFieldPortModel) {
-        if (target?.parentId) {
-            const fieldName = target.field.name;
-            isTargetCollapsed = collapsedFields?.includes(`${target.parentId}.${fieldName}`)
-        } else {
-            isTargetCollapsed = collapsedFields?.includes(target.portName)
-        }
-    }
-
-    const bothCollapsed = isSourceCollapsed && isTargetCollapsed;
-    const eitherCollapsed = isSourceCollapsed || isTargetCollapsed;
-
-    if ((valueNode && bothCollapsed) || (!valueNode && eitherCollapsed)) {
-        // Disable link widgets based on collapse states
-        return null;
-    }
-
-    if (linkStatus === LinkState.TemporaryLink) {
-        return (
-            <div className={classNames(classes.container, classes.element, classes.loadingContainer)}>
-                {loadingScreen}
-            </div>
-        );
-    }
-
-    return (
-        <div
-            data-testid={`sub-link-label-for-${link?.getSourcePort()?.getName()}-to-${link?.getTargetPort()?.getName()}`}
-            className={classNames(
-                classes.container,
-                linkStatus === LinkState.LinkNotSelected && !deleteInProgress && classes.containerHidden
-            )}
-        >
-            {elements}
-        </div>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/index.ts
deleted file mode 100644
index eec95a0624e..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Label/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./ExpressionLabelFactory";
-export * from "./ExpressionLabelModel";
-export * from "./ExpressionLabelWidget";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/index.ts
deleted file mode 100644
index c9fd11b682c..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./model/DataMapperLink";
-export * from "./model/DataMapperLinkFactory";
-export * from "./ArrowLink/ArrowLinkModel";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/link-utils.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/link-utils.ts
deleted file mode 100644
index 91777eccc70..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/link-utils.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-import { PrimitiveBalType, TypeField } from "@wso2/ballerina-core";
-
-import { MappingType, RecordFieldPortModel } from "../Port";
-import {
-    findTypeByInfoFromStore,
-    genVariableName,
-    getBalRecFieldName,
-    getDefaultValue,
-    getLinebreak,
-    getTypeName,
-    normalizeTypeName,
-    toFirstLetterLowerCase,
-    toFirstLetterUpperCase
-} from "../utils/dm-utils";
-import { getSupportedUnionTypes } from "../utils/union-type-utils";
-
-import { LinkModel, PortModel } from "@projectstorm/react-diagrams-core";
-
-export enum ClauseType {
-    Select = "select",
-    Collect = "collect"
-}
-
-interface FunctionNameComponents {
-    sourceName: string;
-    targetName: string;
-}
-
-export function generateQueryExpression(
-    srcExpr: string,
-    targetType: TypeField,
-    isOptionalSource: boolean,
-    clauseType: ClauseType,
-    variableNames: string[]
-) {
-
-    let itemName = `${srcExpr.split('.').pop().trim()}Item`;
-    itemName = genVariableName(itemName, variableNames);
-    let selectExpr = '';
-
-    if (!targetType?.typeName && targetType?.typeInfo) {
-        targetType = findTypeByInfoFromStore(targetType.typeInfo) || targetType;
-    }
-    if (targetType.typeName === PrimitiveBalType.Record) {
-        const srcFields = targetType.fields;
-        selectExpr = `{
-            ${targetType.fields.filter(field => !field.defaultable && !field.optional).map((field, index) =>
-                `${getBalRecFieldName(field.name)}: ${(index !== srcFields.length - 1) ? `,${getLinebreak()}\t\t\t` : ''}`
-            ).join("")}
-        }`
-    } else if (targetType.typeName === PrimitiveBalType.Union) {
-        const firstTypeName = getSupportedUnionTypes(targetType)[0];
-        const firstType = targetType?.members && targetType.members.find(member => {
-            return getTypeName(member) === firstTypeName;
-        });
-        selectExpr = firstType && firstType?.typeName ? getDefaultValue(firstType.typeName) : "\"\"";
-    } else {
-        selectExpr = getDefaultValue(targetType?.typeName);
-    }
-
-    return `from var ${itemName} in ${srcExpr.trim()}${isOptionalSource ? ' ?: []' : ''} ${clauseType} ${selectExpr}`
-}
-
-export function generateCustomFunction(
-    sourcePort: RecordFieldPortModel,
-    targetPort: RecordFieldPortModel,
-    existingFunctions: string[]
-): [string, string] {
-    const nameComponents = generateFunctionNameComponents(sourcePort, targetPort);
-    const baseFunctionName = createBaseFunctionName(nameComponents);
-    const functionName = getUniqueFunctionName(baseFunctionName, existingFunctions);
-    
-    let sourceType = getTypeName(sourcePort.field);
-    let targetType = getTypeName(targetPort.field);
-    let paramName = toFirstLetterLowerCase(nameComponents.sourceName);
-
-    sourceType = formatRecordType(sourceType);
-    targetType = formatRecordType(targetType);
-    paramName = paramName === PrimitiveBalType.Record ? 'rec' : paramName;
-
-    const functionSignature = `function ${functionName}(${sourceType} ${paramName}) returns ${targetType} {
-
-    }`;
-
-    return [functionName, functionSignature];
-}
-
-function generateFunctionNameComponents(
-    sourcePort: RecordFieldPortModel,
-    targetPort: RecordFieldPortModel
-): FunctionNameComponents {
-    const sourceType = getTypeName(sourcePort.field);
-    const targetType = getTypeName(targetPort.field);
-    
-    return {
-        sourceName: normalizeTypeName(sourceType),
-        targetName: normalizeTypeName(targetType)
-    };
-}
-
-function createBaseFunctionName({ sourceName, targetName }: FunctionNameComponents): string {
-    return `map${toFirstLetterUpperCase(sourceName)}To${toFirstLetterUpperCase(targetName)}`;
-}
-
-function getUniqueFunctionName(baseName: string, existingFunctions: string[]): string {
-    if (!existingFunctions.includes(baseName)) {
-        return baseName;
-    }
-
-    let index = 1;
-    let functionName = baseName;
-    
-    while (existingFunctions.includes(functionName)) {
-        functionName = `${baseName}${index}`;
-        index++;
-    }
-    
-    return functionName;
-}
-
-function formatRecordType(type: string): string {
-    return type === PrimitiveBalType.Record ? `${type}{}` : type;
-}
-
-export function removePendingMappingTempLinkIfExists(link: LinkModel) {
-	const sourcePort = link.getSourcePort();
-	const targetPort = link.getTargetPort();
-
-	const pendingMappingType = sourcePort instanceof RecordFieldPortModel
-		&& targetPort instanceof RecordFieldPortModel
-		&& sourcePort.pendingMappingType
-		&& targetPort.pendingMappingType;
-
-	if (pendingMappingType) {
-		sourcePort?.fireEvent({}, "link-removed");
-		targetPort?.fireEvent({}, "link-removed");
-		sourcePort.setPendingMappingType(MappingType.Default);
-		targetPort.setPendingMappingType(MappingType.Default);
-		link.remove();
-	}
-}
-
-export function userActionRequiredMapping(mappingType: MappingType, targetPort: PortModel): boolean {
-    return mappingType === MappingType.ArrayToArray
-        || mappingType === MappingType.ArrayToSingleton
-        || mappingType === MappingType.RecordToRecord
-        || mappingType === MappingType.UnionToAny;
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/model/DataMapperLink.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/model/DataMapperLink.ts
deleted file mode 100644
index ff85527c8d0..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/model/DataMapperLink.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { BezierCurve, Point } from "@projectstorm/geometry";
-import { DefaultLinkModel } from "@projectstorm/react-diagrams";
-import { STNode } from "@wso2/syntax-tree";
-import { Diagnostic } from "vscode-languageserver-types";
-
-import { IntermediatePortModel } from "../../Port";
-import { calculateControlPointOffset } from "../../utils/diagram-utils";
-
-export const LINK_TYPE_ID = "datamapper-link";
-
-export class DataMapperLinkModel extends DefaultLinkModel {
-
-	constructor(public value?: STNode, public diagnostics: Diagnostic[] = [],
-		public isActualLink: boolean = false, public notContainsLabel?: boolean) {
-		super({
-			type: LINK_TYPE_ID,
-			width: 1,
-			curvyness: 0,
-			locked: true,
-			color: "var(--vscode-debugIcon-breakpointDisabledForeground)"
-		});
-
-		if (isActualLink){
-			this.setColor('var(--vscode-list-focusAndSelectionOutline, var(--vscode-contrastActiveBorder, var(--vscode-editorLink-activeForeground, var(--vscode-list-focusOutline))))');
-		}
-
-		if (diagnostics.length > 0){
-			this.setColor('var(--vscode-errorForeground)');
-		}
-
-	}
-
-	getSVGPath(): string {
-		const screenWidth = window.innerWidth;
-		let controlPointOffset = calculateControlPointOffset(screenWidth);
-		if (this.points.length === 2) {
-			const curve = new BezierCurve();
-			const sourcePoint: Point = new Point(this.getFirstPoint().getPosition().x + 5,
-				this.getFirstPoint().getPosition().y);
-			const targetPoint: Point = new Point(this.getLastPoint().getPosition().x - 5,
-				this.getLastPoint().getPosition().y);
-			curve.setSource(sourcePoint);
-			curve.setTarget(targetPoint);
-
-			if (this.sourcePort instanceof IntermediatePortModel) {
-				curve.setSourceControl(sourcePoint);
-				curve.setTargetControl(targetPoint);
-			} else {
-				const srcControl = sourcePoint.clone();
-				srcControl.translate(controlPointOffset, 0);
-				const targetControl = targetPoint.clone();
-				targetControl.translate(-controlPointOffset, 0);
-				curve.setSourceControl(srcControl);
-				curve.setTargetControl(targetControl);
-			}
-			return curve.getSVGCurve();
-		}
-	}
-
-	public hasError(): boolean {
-		return this.diagnostics.length > 0 ;
-	}
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/model/DataMapperLinkFactory.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/model/DataMapperLinkFactory.tsx
deleted file mode 100644
index 51853b816cd..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/model/DataMapperLinkFactory.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from "react";
-
-import { DefaultLinkFactory } from "@projectstorm/react-diagrams";
-import { container, injectable, singleton } from "tsyringe";
-
-import { DataMapperLinkModel, LINK_TYPE_ID } from "./DataMapperLink";
-import { DefaultLinkWidget } from "./DefaultLinkWidget";
-
-@injectable()
-@singleton()
-export class DataMapperLinkFactory extends DefaultLinkFactory {
-    constructor() {
-        super(LINK_TYPE_ID);
-    }
-
-    generateModel(): DataMapperLinkModel {
-        return new DataMapperLinkModel();
-    }
-
-    generateReactWidget(event: { model: DataMapperLinkModel }): JSX.Element {
-        return (
-            <DefaultLinkWidget link={event.model} diagramEngine={this.engine} />
-        );
-    }
-}
-container.register("LinkFactory", { useClass: DataMapperLinkFactory });
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/model/DefaultLinkSegmentWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/model/DefaultLinkSegmentWidget.tsx
deleted file mode 100644
index a6382d2dd91..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/model/DefaultLinkSegmentWidget.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import * as React from "react";
-
-import { DefaultLinkSegmentWidgetProps } from "@projectstorm/react-diagrams";
-
-import { IntermediatePortModel } from "../../Port";
-
-import { DataMapperLinkModel } from "./DataMapperLink";
-
-export class DefaultLinkSegmentWidget extends React.Component<DefaultLinkSegmentWidgetProps> {
-    render() {
-        const isSelected = !(this.props.link as DataMapperLinkModel).notContainsLabel &&
-            (this.props.selected || this.props.link.isSelected());
-
-        const Bottom = React.cloneElement(
-            this.props.factory.generateLinkSegment(
-                this.props.link,
-                false,
-                this.props.path
-            ),
-            {
-                ref: this.props.forwardRef,
-                strokeWidth: isSelected ? 2 : 1,
-                cursor: !(this.props.link as DataMapperLinkModel).notContainsLabel ? "pointer" : "inherit"
-            }
-        );
-
-        const sourcePortName =
-            this.props.link.getSourcePort() instanceof IntermediatePortModel
-                ? this.props.link.getSourcePort().getOptions().type
-                : this.props.link.getSourcePort().getName();
-        const targetPortName =
-            this.props.link.getTargetPort() instanceof IntermediatePortModel
-                ? this.props.link.getTargetPort().getOptions().type
-                : this.props.link.getTargetPort().getName();
-
-        const Top = React.cloneElement(Bottom, {
-            strokeLinecap: "round",
-            onMouseLeave: () => {
-                this.props.onSelection(false);
-            },
-            onMouseEnter: () => {
-                this.props.onSelection(true);
-            },
-            ...this.props.extras,
-            ref: null,
-            "data-linkid": this.props.link.getID(),
-            "data-testid": `link-from-${sourcePortName}-to-${targetPortName}`,
-            "data-diagnostics": !!(this.props.link as DataMapperLinkModel)?.diagnostics?.length,
-            strokeOpacity: isSelected ? 0.1 : 0,
-            strokeWidth: 10, // Note: Original strokeWidth was 20
-            onContextMenu: () => {
-                if (!this.props.link.isLocked()) {
-                    event.preventDefault();
-                    this.props.link.remove();
-                }
-            },
-        });
-
-        return (
-            <>
-                {Bottom}
-                {Top}
-            </>
-        );
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/model/DefaultLinkWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/model/DefaultLinkWidget.tsx
deleted file mode 100644
index f4eba7f43ba..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/model/DefaultLinkWidget.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-// tslint:disable: jsx-no-lambda jsx-no-multiline-js
-import * as React from "react";
-
-import { DefaultLinkWidget as ReactDiagramDefaultLinkWidget } from "@projectstorm/react-diagrams";
-
-import { DefaultLinkSegmentWidget } from "./DefaultLinkSegmentWidget";
-
-export class DefaultLinkWidget extends ReactDiagramDefaultLinkWidget {
-    generateLink(
-        path: string,
-        extraProps: React.Attributes,
-        id: string | number
-    ): JSX.Element {
-        const ref = React.createRef<SVGPathElement>();
-        this.refPaths.push(ref);
-        return (
-            <DefaultLinkSegmentWidget
-                key={`link-${id}`}
-                path={path}
-                selected={this.state.selected}
-                diagramEngine={this.props.diagramEngine}
-                factory={this.props.diagramEngine.getFactoryForLink(
-                    this.props.link
-                )}
-                link={this.props.link}
-                forwardRef={ref}
-                onSelection={(selected) => {
-                    this.setState({ selected });
-                }}
-                extras={extraProps}
-            />
-        );
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/LinkState/CreateLinkState.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/LinkState/CreateLinkState.ts
deleted file mode 100644
index dfea60cfd12..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/LinkState/CreateLinkState.ts
+++ /dev/null
@@ -1,227 +0,0 @@
-import { KeyboardEvent, MouseEvent } from 'react';
-
-import { Action, ActionEvent, InputType, State } from '@projectstorm/react-canvas-core';
-import { DiagramEngine, LinkModel, PortModel } from '@projectstorm/react-diagrams-core';
-
-import { ExpressionLabelModel } from "../Label";
-import { ListConstructorNode, MappingConstructorNode, PrimitiveTypeNode, RequiredParamNode } from '../Node';
-import { EnumTypeNode } from '../Node/EnumType';
-import { FromClauseNode } from '../Node/FromClause';
-import { JoinClauseNode } from "../Node/JoinClause";
-import { LetClauseNode } from "../Node/LetClause";
-import { LetExpressionNode } from "../Node/LetExpression";
-import { LinkConnectorNode } from '../Node/LinkConnector';
-import { ModuleVariableNode } from "../Node/ModuleVariable";
-import { UnionTypeNode } from "../Node/UnionType";
-import { IntermediatePortModel } from '../Port';
-import { RecordFieldPortModel } from '../Port/model/RecordFieldPortModel';
-import { getMappingType, isLinkModel } from '../utils/dm-utils';
-import { DataMapperLinkModel } from '../Link';
-import { removePendingMappingTempLinkIfExists, userActionRequiredMapping } from '../Link/link-utils';
-import { DataMapperNodeModel } from '../Node/commons/DataMapperNode';
-
-/**
- * This state is controlling the creation of a link.
- */
-export class CreateLinkState extends State<DiagramEngine> {
-	sourcePort: PortModel;
-	link: LinkModel;
-	temporaryLink: LinkModel;
-
-	constructor(resetState: boolean = false) {
-		super({ name: 'create-new-link' });
-
-		if (resetState) {
-			this.clearState();
-		}
-
-		this.registerAction(
-			new Action({
-				type: InputType.MOUSE_UP,
-				fire: (actionEvent: ActionEvent<MouseEvent>) => {
-					let element = this.engine.getActionEventBus().getModelForEvent(actionEvent);
-
-					if (element === null) {
-						this.clearState();
-					} else if (!(element instanceof PortModel)) {
-						if (element instanceof MappingConstructorNode
-							|| element instanceof ListConstructorNode
-							|| element instanceof PrimitiveTypeNode
-							|| element instanceof UnionTypeNode
-						) {
-							const recordFieldElement = (event.target as Element).closest('div[id^="recordfield"]')
-							if (recordFieldElement) {
-								const fieldId = (recordFieldElement.id.split("-"))[1] + ".IN";
-								const portModel = element.getPort(fieldId) as RecordFieldPortModel
-								if (portModel) {
-									element = portModel;
-								}
-							}
-						}
-
-						if (element instanceof RequiredParamNode
-							|| element instanceof FromClauseNode
-							|| element instanceof LetExpressionNode
-							|| element instanceof ModuleVariableNode
-							|| element instanceof EnumTypeNode
-							|| element instanceof LetClauseNode
-							|| element instanceof JoinClauseNode
-						) {
-							const recordFieldElement = (event.target as Element).closest('div[id^="recordfield"]')
-							if (recordFieldElement) {
-								const fieldId = (recordFieldElement.id.split("-"))[1] + ".OUT";
-								const portModel = element.getPort(fieldId) as RecordFieldPortModel
-								if (portModel) {
-									element = portModel;
-								}
-							}
-						}
-
-						if (isLinkModel(element)) {
-							element = (element as DataMapperLinkModel).getTargetPort();
-
-							if (element instanceof IntermediatePortModel) {
-								const parentNode = element.getNode();
-								if (parentNode instanceof LinkConnectorNode) {
-									element = parentNode.targetMappedPort;
-								}
-							}
-						}
-					}
-
-					if (this.temporaryLink) {
-						removePendingMappingTempLinkIfExists(this.temporaryLink);
-						this.temporaryLink = undefined;
-					}
-
-					if (element instanceof PortModel && !this.sourcePort) {
-						if (element instanceof RecordFieldPortModel) {
-							if (element.portType === "OUT" && !element.isDisabled()) {
-								this.sourcePort = element;
-								element.fireEvent({}, "mappingStartedFrom");
-								element.linkedPorts.forEach((linkedPort) => {
-									linkedPort.fireEvent({}, "disableNewLinking")
-								})
-								const link = this.sourcePort.createLinkModel();
-								link.setSourcePort(this.sourcePort);
-								link.addLabel(new ExpressionLabelModel({
-									link: link as DataMapperLinkModel,
-									value: undefined,
-									context: (element.getNode() as DataMapperNodeModel).context
-								}));
-								this.link = link;
-
-							} else {
-								// TODO: show a message: select input port first
-								element.fireEvent({}, "mappingStartedTo");
-								this.clearState();
-								this.eject();
-							}
-						}
-					} else if (element instanceof PortModel && this.sourcePort && element !== this.sourcePort) {
-						if ((element instanceof RecordFieldPortModel)
-						|| ((element instanceof IntermediatePortModel) && (element.getParent() instanceof LinkConnectorNode))) {
-							if (element.portType === "IN") {
-								let isDisabled = false;
-								if (element instanceof RecordFieldPortModel) {
-									isDisabled = element.isDisabled();
-								}
-								if (!isDisabled) {
-									element.fireEvent({}, "mappingFinishedTo");
-									if (this.sourcePort.canLinkToPort(element)) {
-
-										this.link?.setTargetPort(element);
-
-										const connectingMappingType = getMappingType(this.sourcePort, element);
-										if (userActionRequiredMapping(connectingMappingType, element)) {
-											const label = this.link.getLabels()
-												.find(label => label instanceof ExpressionLabelModel) as ExpressionLabelModel;
-											label.setPendingMappingType(connectingMappingType);
-											this.temporaryLink = this.link;
-										}
-
-										this.engine.getModel().addAll(this.link)
-										if (this.sourcePort instanceof RecordFieldPortModel) {
-											this.sourcePort.linkedPorts.forEach((linkedPort) => {
-												linkedPort.fireEvent({}, "enableNewLinking")
-											})
-										}
-										this.sourcePort = undefined;
-										this.eject();
-									}
-								}
-							} else {
-								// Selected another input port, change selected port
-								this.sourcePort.fireEvent({}, "link-unselected");
-								if (this.sourcePort instanceof RecordFieldPortModel) {
-									this.sourcePort.linkedPorts.forEach((linkedPort) => {
-										linkedPort.fireEvent({}, "enableNewLinking")
-									})
-								}
-								this.sourcePort.removeLink(this.link);
-								if (!(element instanceof RecordFieldPortModel) || !element.isDisabled()) {
-									this.sourcePort = element;
-									this.link?.setSourcePort(element);
-									element.fireEvent({}, "mappingStartedFrom");
-									if (element instanceof RecordFieldPortModel) {
-										element.linkedPorts.forEach((linkedPort) => {
-											linkedPort.fireEvent({}, "disableNewLinking")
-										})
-									}
-								}
-							}
-						}
-					} else if (element === this.link?.getLastPoint()) {
-						this.link?.point(0, 0, -1);
-					} else if (element === this.sourcePort) {
-						element.fireEvent({}, "mappingStartedFromSelectedAgain");
-						if (element instanceof RecordFieldPortModel) {
-							element.linkedPorts.forEach((linkedPort) => {
-								linkedPort.fireEvent({}, "enableNewLinking")
-							})
-						}
-						this.link?.remove();
-						this.clearState();
-						this.eject();
-					}
-
-					this.engine.repaintCanvas();
-				}
-			})
-		);
-
-		this.registerAction(
-			new Action({
-				type: InputType.MOUSE_MOVE,
-				fire: () => {
-					if (!this.link) return;
-					this.engine.repaintCanvas();
-				}
-			})
-		);
-
-		this.registerAction(
-			new Action({
-				type: InputType.KEY_UP,
-				fire: (actionEvent: ActionEvent<KeyboardEvent>) => {
-					// on esc press remove any started link and pop back to default state
-					if (actionEvent.event.keyCode === 27) {
-						this.link?.remove();
-						this.clearState();
-						this.eject();
-						this.engine.repaintCanvas();
-					}
-				}
-			})
-		);
-	}
-
-	clearState() {
-		if (this.sourcePort) {
-			this.sourcePort.fireEvent({}, "link-unselected");
-			this.sourcePort.removeLink(this.link);
-		}
-		this.link = undefined;
-		this.sourcePort = undefined;
-	}
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/LinkState/DefaultState.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/LinkState/DefaultState.ts
deleted file mode 100644
index 6f769a80b67..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/LinkState/DefaultState.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-import { MouseEvent } from 'react';
-
-import {
-	Action,
-	ActionEvent,
-	DragCanvasState,
-	InputType,
-	SelectingState,
-	State
-} from '@projectstorm/react-canvas-core';
-import { DiagramEngine, DragDiagramItemsState, PortModel } from '@projectstorm/react-diagrams-core';
-
-import { DMCanvasContainerID } from "../Canvas/DataMapperCanvasWidget";
-import { DiagnosticTooltipID } from "../Diagnostic/DiagnosticTooltip/DiagnosticTooltip";
-import { ListConstructorNode, MappingConstructorNode, PrimitiveTypeNode, RequiredParamNode } from '../Node';
-import { DataMapperNodeModel } from "../Node/commons/DataMapperNode";
-import { EnumTypeNode } from '../Node/EnumType';
-import { FromClauseNode } from '../Node/FromClause';
-import { JoinClauseNode } from "../Node/JoinClause";
-import { LetClauseNode } from "../Node/LetClause";
-import { LetExpressionNode } from "../Node/LetExpression";
-import { ModuleVariableNode } from "../Node/ModuleVariable";
-import { UnionTypeNode } from "../Node/UnionType";
-import { LinkOverayContainerID } from '../OverriddenLinkLayer/LinkOverlayPortal';
-
-import { CreateLinkState } from './CreateLinkState';
-import { removePendingMappingTempLinkIfExists } from '../Link/link-utils';
-
-export class DefaultState extends State<DiagramEngine> {
-	dragCanvas: DragCanvasState;
-	createLink: CreateLinkState;
-	dragItems: DragDiagramItemsState;
-
-	constructor(resetState: boolean = false) {
-		super({ name: 'starting-state' });
-		this.childStates = [new SelectingState()];
-		this.dragCanvas = new DragCanvasState({allowDrag: false});
-		this.createLink = new CreateLinkState(resetState);
-		this.dragItems = new DragDiagramItemsState();
-
-		// determine what was clicked on
-		this.registerAction(
-			new Action({
-				type: InputType.MOUSE_DOWN,
-				fire: (event: ActionEvent<MouseEvent>) => {
-					const element = this.engine.getActionEventBus().getModelForEvent(event);
-					const isExpandOrCollapse = (event.event.target as Element)
-						.closest('div[id^="expand-or-collapse"]');
-
-					// the canvas was clicked on, transition to the dragging canvas state
-					if (!element) {
-						const targetElement = event.event.target as Element;
-						const dmCanvasContainer = targetElement.closest(`#${DMCanvasContainerID}`);
-						const linkOverlayContainer = targetElement.closest(`#${LinkOverayContainerID}`);
-						const diagnosticsTooltip = targetElement.closest(`#${DiagnosticTooltipID}`);
-						if (linkOverlayContainer || diagnosticsTooltip) {
-							// Clicked on a link overlay item or a diagnostic tooltip,
-							// hence, do not propagate as a canvas drag
-						} else if (dmCanvasContainer) {
-							// deselect links when clicking on the canvas
-							this.deselectLinks();
-							this.transitionWithEvent(this.dragCanvas, event);
-						}
-					}
-					// initiate dragging a new link
-					else if (element instanceof PortModel || element instanceof DataMapperNodeModel && !isExpandOrCollapse) {
-						return;
-					}
-					// move the items (and potentially link points)
-					else {
-						this.transitionWithEvent(this.dragItems, event);
-					}
-				}
-			})
-		);
-
-		this.registerAction(
-			new Action({
-				type: InputType.MOUSE_UP,
-				fire: (actionEvent: ActionEvent<MouseEvent>) => {
-					const element = this.engine.getActionEventBus().getModelForEvent(actionEvent);
-					const isExpandOrCollapse = (actionEvent.event.target as Element)
-						.closest('button[id^="expand-or-collapse"]');
-					const isAddElement = (actionEvent.event.target as Element)
-						.closest('button[id^="add-array-element"]');
-					const isAddLocalVariable = (actionEvent.event.target as Element)
-						.closest('button[id^="add-local-variable"]');
-					const isEditLocalVariables = (actionEvent.event.target as Element)
-						.closest('button[id^="edit-local-variables"]');
-
-					if (!isExpandOrCollapse && !isAddElement && !isAddLocalVariable && !isEditLocalVariables
-						&& (element instanceof PortModel
-							|| element instanceof MappingConstructorNode
-							|| element instanceof ListConstructorNode
-							|| element instanceof PrimitiveTypeNode
-							|| element instanceof UnionTypeNode
-							|| element instanceof RequiredParamNode
-							|| element instanceof FromClauseNode
-							|| element instanceof LetExpressionNode
-							|| element instanceof ModuleVariableNode
-							|| element instanceof EnumTypeNode
-							|| element instanceof LetClauseNode
-							|| element instanceof JoinClauseNode
-						)
-					) {
-						this.transitionWithEvent(this.createLink, actionEvent);
-					}
-				}
-			})
-		);
-
-		this.registerAction(
-			new Action({
-				type: InputType.KEY_UP,
-				fire: (actionEvent) => {
-					// On esc press unselect any selected link
-					if ((actionEvent.event as any).keyCode === 27) {
-						this.engine.getModel().getLinks().forEach((link) => {
-							this.deselectLinks();
-							this.transitionWithEvent(this.dragCanvas, actionEvent);
-						});
-					}
-				}
-			})
-		);
-	}
-
-	deselectLinks() {
-		this.engine.getModel().getLinks().forEach((link) => {
-			link.setSelected(false);
-			link.getSourcePort()?.fireEvent({}, "link-unselected");
-			link.getTargetPort()?.fireEvent({}, "link-unselected");
-			removePendingMappingTempLinkIfExists(link);
-		});
-	}
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Mappings/FieldAccessToSpecificFied.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Mappings/FieldAccessToSpecificFied.ts
deleted file mode 100644
index 1fb9206999c..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Mappings/FieldAccessToSpecificFied.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { FieldAccess, OptionalFieldAccess, SimpleNameReference, STNode } from "@wso2/syntax-tree";
-
-export class FieldAccessToSpecificFied {
-	constructor(
-		public fields: STNode[],
-		public value: FieldAccess | OptionalFieldAccess | SimpleNameReference,
-		public otherVal?: STNode
-	){}
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/BinaryExpression/BinaryExpressionNode.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/BinaryExpression/BinaryExpressionNode.ts
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/BinaryExpression/BinaryExpressionNodeWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/BinaryExpression/BinaryExpressionNodeWidget.tsx
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/EnumType/EnumTypeItemWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/EnumType/EnumTypeItemWidget.tsx
deleted file mode 100644
index b487f20b5d2..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/EnumType/EnumTypeItemWidget.tsx
+++ /dev/null
@@ -1,159 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React, { useState } from "react";
-
-import { Button, Codicon, TruncatedLabel } from "@wso2/ui-toolkit";
-import { DiagramEngine } from "@projectstorm/react-diagrams";
-import classNames from "classnames";
-
-import {
-    DataMapperPortWidget,
-    PortState,
-    RecordFieldPortModel,
-} from "../../Port";
-import { getTypeName } from "../../utils/dm-utils";
-import { InputSearchHighlight } from "../commons/Search";
-
-import { DMEnumTypeDecl, DMEnumTypeMember } from "./EnumTypeNode";
-import { useIONodesStyles } from "../../../styles";
-
-export interface EnumTypeItemWidgetProps {
-    id: string; // this will be the root ID used to prepend for UUIDs of nested fields
-    enumType?: DMEnumTypeDecl;
-    enumMember?: DMEnumTypeMember;
-    engine: DiagramEngine;
-    treeDepth?: number;
-    getPort: (portId: string) => RecordFieldPortModel;
-    handleCollapse: (portName: string, isExpanded?: boolean) => void;
-    valueLabel?: string;
-    hasHoveredParent?: boolean;
-}
-
-export function EnumTypeItemWidget(props: EnumTypeItemWidgetProps) {
-    const {
-        engine,
-        enumType,
-        enumMember,
-        id,
-        treeDepth = 0,
-        getPort,
-        handleCollapse,
-        valueLabel,
-        hasHoveredParent,
-    } = props;
-    const classes = useIONodesStyles();
-
-    const [portState, setPortState] = useState<PortState>(PortState.Unselected);
-    const [isHovered, setIsHovered] = useState(false);
-
-    const enumValue = enumType || enumMember;
-    const isType = treeDepth === 0;
-    const typeName = getTypeName(enumValue.type);
-    const portOut = getPort(`${id}.OUT`);
-    const expanded = !(portOut && portOut.collapsed);
-
-    const indentation = isType ? 0 : (treeDepth + 1) * 16 + 8;
-
-    const label = (
-        <TruncatedLabel style={{ marginRight: "auto" }}>
-            <span style={{ marginRight: "auto" }}>
-                <span
-                    className={classes.valueLabel}
-                    style={{ marginLeft: indentation }}
-                >
-                    <InputSearchHighlight>{valueLabel}</InputSearchHighlight>
-                    {typeName && ":"}
-                </span>
-                {typeName && <span className={classes.inputTypeLabel}>{typeName}</span>}
-            </span>
-        </TruncatedLabel>
-    );
-
-    const handleExpand = () => {
-        handleCollapse(id, !expanded);
-    };
-
-    const handlePortState = (state: PortState) => {
-        setPortState(state);
-    };
-
-    const onMouseEnter = () => {
-        setIsHovered(true);
-    };
-
-    const onMouseLeave = () => {
-        setIsHovered(false);
-    };
-
-    return (
-        <>
-            <div
-                id={"recordfield-" + id}
-                className={classNames(
-                    isType ? classes.enumHeaderTreeLabel : classes.treeLabel,
-                    portState !== PortState.Unselected
-                        ? classes.treeLabelPortSelected
-                        : "",
-                    hasHoveredParent ? classes.treeLabelParentHovered : ""
-                )}
-                onMouseEnter={onMouseEnter}
-                onMouseLeave={onMouseLeave}
-            >
-                <span className={classes.label}>
-                    {isType && (
-                        <Button
-                            appearance="icon"
-                            sx={{ marginLeft: treeDepth * 16 }}
-                            onClick={handleExpand}
-                        >
-                            {expanded ? <Codicon name="chevron-right" /> : <Codicon name="chevron-down" />}
-                        </Button>
-                    )}
-                    {label}
-                </span>
-                <span className={classes.outPort}>
-                    {portOut && (
-                        <DataMapperPortWidget
-                            engine={engine}
-                            port={portOut}
-                            handlePortState={handlePortState}
-                        />
-                    )}
-                </span>
-            </div>
-            {isType &&
-                expanded &&
-                enumType.fields.map((subField) => {
-                    return (
-                        <EnumTypeItemWidget
-                            key={`${id}.${subField.varName}`}
-                            id={`${id}.${subField.varName}`}
-                            engine={engine}
-                            enumMember={subField}
-                            treeDepth={treeDepth + 1}
-                            getPort={getPort}
-                            handleCollapse={handleCollapse}
-                            valueLabel={subField.varName}
-                            hasHoveredParent={isHovered || hasHoveredParent}
-                        />
-                    );
-                })}
-        </>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/EnumType/EnumTypeNode.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/EnumType/EnumTypeNode.ts
deleted file mode 100644
index c0a12bc86c6..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/EnumType/EnumTypeNode.ts
+++ /dev/null
@@ -1,256 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import { Point } from "@projectstorm/geometry";
-import {
-    ResolvedTypeForExpression,
-    ComponentInfo,
-    ExpressionRange,
-    PrimitiveBalType,
-    TypeField,
-} from "@wso2/ballerina-core";
-import { NodePosition, STNode } from "@wso2/syntax-tree";
-
-import { useDMSearchStore } from "../../../../store/store";
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { containsWithin, isPositionsEquals } from "../../../../utils/st-utils";
-import { ENUM_TYPE_SOURCE_PORT_PREFIX } from "../../utils/constants";
-import { getDefinitionPosition, getTypesForExpressions } from "../../utils/ls-utils";
-import { DataMapperNodeModel } from "../commons/DataMapperNode";
-import { ModuleVariable, ModuleVarKind } from "../ModuleVariable";
-import { URI } from "vscode-uri";
-
-export const ENUM_TYPE_SOURCE_NODE_TYPE = "datamapper-node-type-desc-enum-type";
-const NODE_ID = "enum-type-node";
-
-export interface EnumType {
-    enumName: string;
-    value: ResolvedTypeForExpression;
-}
-
-export interface EnumInfo {
-    filePath: string;
-    enum: ComponentInfo;
-}
-
-export interface DMEnumTypeDecl {
-    varName: string;
-    type: TypeField;
-    fields: DMEnumTypeMember[];
-}
-
-export interface DMEnumTypeMember {
-    varName: string;
-    kind: ModuleVarKind;
-    type: TypeField;
-    node: STNode;
-}
-
-export class EnumTypeNode extends DataMapperNodeModel {
-    public enumTypeDecls: DMEnumTypeDecl[];
-    public hasNoMatchingFields: boolean;
-    public x: number;
-    public numberOfFields: number;
-    private enums: EnumInfo[];
-
-    constructor(public context: IDataMapperContext, public value: Map<string, ModuleVariable>) {
-        super(
-            NODE_ID,
-            context,
-            ENUM_TYPE_SOURCE_NODE_TYPE
-        );
-        this.numberOfFields = 1;
-        this.enumTypeDecls = [];
-        this.enums = context.moduleComponents ? context.moduleComponents.enumDecls : [];
-    }
-
-    async initPorts() {
-        const exprRanges: ExpressionRange[] = [...this.value].map(([, item]) => {
-            const exprPosition: NodePosition = item.node.position as NodePosition;
-            item.exprPosition = exprPosition;
-            return {
-                startLine: {
-                    line: exprPosition.startLine,
-                    offset: exprPosition.startColumn,
-                },
-                endLine: {
-                    line: exprPosition.endLine,
-                    offset: exprPosition.endColumn,
-                },
-            };
-        });
-        const types = await getTypesForExpressions(
-            this.context.filePath,
-            exprRanges,
-            this.context.langServerRpcClient
-        );
-
-        const allEnumTypeDecls: DMEnumTypeDecl[] = [];
-        for (const type of types) {
-            const definitionPosition = await getDefinitionPosition(
-                this.context.filePath,
-                {
-                    line: type.requestedRange.startLine.line,
-                    offset: type.requestedRange.startLine.offset,
-                },
-                this.context.langServerRpcClient
-            );
-            if (definitionPosition.parseSuccess) {
-                const enumTypePath = URI.parse(definitionPosition.defFilePath).fsPath;
-                for (const enumType of this.enums) {
-                    const enumMemberPath = URI.parse(
-                        enumType.filePath + enumType.enum.filePath
-                    ).fsPath;
-                    const contains = containsWithin(
-                        enumTypePath,
-                        enumMemberPath,
-                        definitionPosition.syntaxTree?.position,
-                        {
-                            startLine: enumType.enum.startLine,
-                            startColumn: enumType.enum.startColumn,
-                            endLine: enumType.enum.endLine,
-                            endColumn: enumType.enum.endColumn,
-                        }
-                    );
-                    if (contains) {
-                        for (const [varName, item] of this.value) {
-                            if (
-                                isPositionsEquals(item.exprPosition, {
-                                    startLine: type.requestedRange.startLine.line,
-                                    startColumn: type.requestedRange.startLine.offset,
-                                    endLine: type.requestedRange.endLine.line,
-                                    endColumn: type.requestedRange.endLine.offset,
-                                })
-                            ) {
-                                let typeDeclared: boolean = false;
-                                const typeDecl: TypeField = {
-                                    name: varName,
-                                    ...type.type,
-                                };
-                                for (const enumTypeDecl of allEnumTypeDecls) {
-                                    if (enumTypeDecl.varName === enumType.enum.name) {
-                                        enumTypeDecl.fields.push({
-                                            varName,
-                                            kind: item.kind,
-                                            node: item.node,
-                                            type: typeDecl,
-                                        });
-                                        typeDeclared = true;
-                                        break;
-                                    }
-                                }
-                                if (!typeDeclared)
-                                    allEnumTypeDecls.push({
-                                        varName: enumType.enum.name,
-                                        type: {
-                                            ...type.type,
-                                            typeName: PrimitiveBalType.Enum,
-                                        },
-                                        fields: [
-                                            {
-                                                varName,
-                                                kind: item.kind,
-                                                node: item.node,
-                                                type: typeDecl,
-                                            },
-                                        ],
-                                    });
-                                break;
-                            }
-                        }
-                        break;
-                    }
-                }
-            }
-        }
-
-        this.enumTypeDecls = this.getSearchFilteredVariables(allEnumTypeDecls);
-        const searchValue = useDMSearchStore.getState().inputSearch;
-        this.hasNoMatchingFields =
-            searchValue && allEnumTypeDecls.length > 0 && this.enumTypeDecls.length === 0;
-
-        this.enumTypeDecls.forEach((enumType) => {
-            const { varName, type, fields } = enumType;
-
-            const parentPort = this.addPortsForHeaderField(
-                type,
-                varName,
-                "OUT",
-                ENUM_TYPE_SOURCE_PORT_PREFIX,
-                this.context.collapsedFields
-            );
-
-            fields.forEach((field) => {
-                this.numberOfFields += this.addPortsForInputRecordField(
-                    field.type,
-                    "OUT",
-                    varName,
-                    varName,
-                    ENUM_TYPE_SOURCE_PORT_PREFIX,
-                    parentPort,
-                    this.context.collapsedFields,
-                    parentPort.collapsed
-                );
-            });
-        });
-    }
-
-    async initLinks() {
-        // Currently we create links from "IN" ports and back tracing the inputs.
-    }
-
-    setPosition(point: Point): void;
-    setPosition(x: number, y: number): void;
-    setPosition(x: unknown, y?: unknown): void {
-        if (typeof x === "number" && typeof y === "number") {
-            if (!this.x) {
-                this.x = x;
-            }
-            super.setPosition(this.x, y);
-        }
-    }
-
-    private getSearchFilteredVariables(items: DMEnumTypeDecl[]) {
-        const searchValue = useDMSearchStore.getState().inputSearch;
-        if (!searchValue) {
-            return items;
-        }
-        const filteredVariables: DMEnumTypeDecl[] = [];
-
-        for (const item of items) {
-            if (item.varName?.toLowerCase()?.includes(searchValue.toLowerCase())) {
-                filteredVariables.push(item);
-            } else {
-                const fields: DMEnumTypeMember[] = [];
-                for (const field of item.fields) {
-                    if (field.varName?.toLowerCase()?.includes(searchValue.toLowerCase())) {
-                        fields.push(field);
-                    }
-                }
-                if (fields.length > 0) {
-                    filteredVariables.push({
-                        ...item,
-                        fields,
-                    });
-                }
-            }
-        }
-
-        return filteredVariables;
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/EnumType/EnumTypeNodeFactory.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/EnumType/EnumTypeNodeFactory.tsx
deleted file mode 100644
index 818664703bc..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/EnumType/EnumTypeNodeFactory.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import * as React from "react";
-
-import { AbstractReactFactory } from "@projectstorm/react-canvas-core";
-import { DiagramEngine } from "@projectstorm/react-diagrams-core";
-import { container, injectable, singleton } from "tsyringe";
-
-import { IDataMapperNodeFactory } from "../commons/DataMapperNode";
-import { InputSearchNoResultFound, SearchNoResultFoundKind } from "../commons/Search";
-
-import { EnumTypeNode, ENUM_TYPE_SOURCE_NODE_TYPE } from "./EnumTypeNode";
-import { EnumTypeTreeWidget } from "./EnumTypeTreeWidget";
-
-@injectable()
-@singleton()
-export class EnumTypeNodeFactory
-    extends AbstractReactFactory<EnumTypeNode, DiagramEngine>
-    implements IDataMapperNodeFactory
-{
-    constructor() {
-        super(ENUM_TYPE_SOURCE_NODE_TYPE);
-    }
-
-    generateReactWidget(event: { model: EnumTypeNode }): JSX.Element {
-        return (
-            <>
-                {event.model.hasNoMatchingFields ? (
-                    <InputSearchNoResultFound kind={SearchNoResultFoundKind.ModuleVariable} />
-                ) : (
-                    <EnumTypeTreeWidget
-                        engine={this.engine}
-                        enums={event.model.enumTypeDecls}
-                        context={event.model.context}
-                        getPort={event.model.getPort.bind(event.model)}
-                        handleCollapse={event.model.context.handleCollapse.bind(event.model)}
-                    />
-                )}
-            </>
-        );
-    }
-
-    generateModel(): EnumTypeNode {
-        return undefined;
-    }
-}
-
-container.register("NodeFactory", { useClass: EnumTypeNodeFactory });
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/EnumType/EnumTypeTreeWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/EnumType/EnumTypeTreeWidget.tsx
deleted file mode 100644
index b0e5986e21f..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/EnumType/EnumTypeTreeWidget.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js jsx-no-lambda
-import * as React from "react";
-
-import styled from "@emotion/styled";
-import { DiagramEngine } from "@projectstorm/react-diagrams";
-
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { RecordFieldPortModel } from "../../Port";
-import { ENUM_TYPE_SOURCE_PORT_PREFIX } from "../../utils/constants";
-import { TreeBody, TreeContainer } from "../commons/Tree/Tree";
-
-import { EnumTypeItemWidget } from "./EnumTypeItemWidget";
-import { DMEnumTypeDecl } from "./EnumTypeNode";
-
-export interface EnumTypeTreeWidgetProps {
-    enums: DMEnumTypeDecl[];
-    engine: DiagramEngine;
-    context: IDataMapperContext;
-    getPort: (portId: string) => RecordFieldPortModel;
-    handleCollapse: (portName: string, isExpanded?: boolean) => void;
-}
-
-export function EnumTypeTreeWidget(props: EnumTypeTreeWidgetProps) {
-    const { engine, enums, getPort, handleCollapse } = props;
-    const hasMappingsWithModuleVariables = enums.length > 0;
-
-    return (
-        <>
-            {hasMappingsWithModuleVariables && (
-                <TreeContainer data-testid={"enum-type-node"}>
-                    <ModuleVarsHeader>
-                        <HeaderText>Enums</HeaderText>
-                    </ModuleVarsHeader>
-                    <TreeBody>
-                        {enums.map((e) => {
-                            return (
-                                <EnumTypeItemWidget
-                                    key={`${ENUM_TYPE_SOURCE_PORT_PREFIX}.${e.varName}`}
-                                    id={`${ENUM_TYPE_SOURCE_PORT_PREFIX}.${e.varName}`}
-                                    engine={engine}
-                                    enumType={e}
-                                    getPort={(portId: string) =>
-                                        getPort(portId) as RecordFieldPortModel
-                                    }
-                                    handleCollapse={handleCollapse}
-                                    valueLabel={e.varName}
-                                />
-                            );
-                        })}
-                    </TreeBody>
-                </TreeContainer>
-            )}
-        </>
-    );
-}
-
-const ModuleVarsHeader = styled.div`
-    background: var(--vscode-editorWidget-background);
-    width: 100%;
-    line-height: 35px;
-    display: flex;
-    justify-content: space-between;
-    cursor: default;
-`;
-
-const HeaderText = styled.span`
-    margin-left: 10px;
-    min-width: 280px;
-    font-size: 13px;
-    font-weight: 600;
-`;
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/EnumType/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/EnumType/index.ts
deleted file mode 100644
index 41e84b42cfa..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/EnumType/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-export * from "./EnumTypeNode";
-export * from "./EnumTypeNodeFactory";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/ClauseAddButton/ClauseAddButton.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/ClauseAddButton/ClauseAddButton.tsx
deleted file mode 100644
index ce8ee20d2f4..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/ClauseAddButton/ClauseAddButton.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React, { useState } from "react";
-
-import { NodePosition, QueryExpression, STNode } from "@wso2/syntax-tree";
-
-import { IDataMapperContext } from "../../../../../utils/DataMapperContext/DataMapperContext";
-import { genLetClauseVariableName } from "../../../../../utils/st-utils";
-import { useStyles } from "../styles";
-import { Button, Icon, Item, Menu, MenuItem, Popover, ProgressRing } from "@wso2/ui-toolkit";
-
-export interface ExpandedMappingHeaderWidgetProps {
-    queryExprNode: QueryExpression;
-    context: IDataMapperContext;
-    addIndex: number;
-}
-
-export function ClauseAddButton(props: ExpandedMappingHeaderWidgetProps) {
-    const { context, queryExprNode, addIndex } = props;
-    const classes = useStyles();
-    const [isLoading, setLoading] = useState(false);
-    const [anchorEl, setAnchorEl] = React.useState<null | SVGSVGElement>(null);
-    const open = Boolean(anchorEl);
-
-    const handleClick = (event: React.MouseEvent<SVGSVGElement>) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClose = () => {
-        setAnchorEl(null);
-    };
-
-    const getAddFieldPosition = (): NodePosition => {
-        let addPosition: NodePosition;
-        const intermediateClauses: STNode[] = queryExprNode.queryPipeline.intermediateClauses;
-        const insertAfterNode = intermediateClauses[addIndex];
-
-        if (addIndex >= 0 && insertAfterNode) {
-            addPosition = {
-                ...insertAfterNode.position as NodePosition,
-                startColumn: (insertAfterNode.position as NodePosition).endColumn
-            };
-        } else {
-            addPosition = {
-                ...queryExprNode.queryPipeline.fromClause.position as NodePosition,
-                startColumn: (queryExprNode.queryPipeline.fromClause.position as NodePosition).endColumn
-            }
-        }
-
-        return addPosition;
-    };
-
-    const insertStatement = async (statement: string) => {
-        handleClose();
-        setLoading(true);
-        try {
-            const addPosition = getAddFieldPosition();
-            const modifications = [
-                {
-                    type: "INSERT",
-                    config: { STATEMENT: statement },
-                    ...addPosition,
-                },
-            ];
-            await context.applyModifications(modifications);
-        } finally {
-            setLoading(false);
-        }
-    }
-
-    const onClickAddLetClause = async () => {
-        const variableName = genLetClauseVariableName(queryExprNode.queryPipeline.intermediateClauses);
-        await insertStatement(` let var ${variableName} = EXPRESSION`)
-    };
-
-    const onClickAddWhereClause = async () => insertStatement(` where EXPRESSION`);
-
-    const onClickAddLimitClause = async () => insertStatement(` limit EXPRESSION`);
-
-    const onClickAddOrderByClause = async () => insertStatement(` order by EXPRESSION ascending`);
-
-    const onClickAddJoinClause = async () => {
-        const variableName = genLetClauseVariableName(queryExprNode.queryPipeline.intermediateClauses);
-        await insertStatement(` join var ${variableName} in EXPRESSION on EXPRESSION equals EXPRESSION`)
-    };
-
-    const onClickAddOuterJoinClause = async () => {
-        const variableName = genLetClauseVariableName(queryExprNode.queryPipeline.intermediateClauses);
-        await insertStatement(` outer join var ${variableName} in EXPRESSION on EXPRESSION equals EXPRESSION`)
-    };
-
-    const menuItems: Item[] = [
-        { id: 0, label: "Add where clause", onClick: onClickAddWhereClause },
-        { id: 1, label: "Add let clause", onClick: onClickAddLetClause },
-        { id: 2, label: "Add limit clause", onClick: onClickAddLimitClause },
-        { id: 3, label: "Add order by clause", onClick: onClickAddOrderByClause },
-        { id: 4, label: "Add join clause", onClick: onClickAddJoinClause },
-        { id: 5, label: "Add outer join clause", onClick: onClickAddOuterJoinClause },
-    ]
-
-    return (
-        <>
-            <div className={classes.lineWrap}>
-                <div className={classes.line} />
-                <div className={classes.addButtonWrap} data-testid={`intermediary-add-btn-${addIndex}`}>
-                    {isLoading ? (
-                        <ProgressRing sx={{ height: '16px', width: '16px' }} />
-                    ) : (
-                        <Button
-                            appearance="icon"
-                            onClick={handleClick}
-                        >
-                            <Icon name="add-circle-outline" className={classes.addIcon} />
-                        </Button>
-                    )}
-                </div>
-                <div className={classes.line} />
-            </div>
-            <Popover
-                open={open}
-                anchorEl={anchorEl}
-                handleClose={handleClose}
-                sx={{
-                    padding: 0,
-                    borderRadius: 0
-                }}
-            >
-                <Menu 
-                    sx={{ 
-                        padding: 0,
-                        backgroundColor: "var(--vscode-editor-background)",
-                        color: "var(--vscode-inputOption-activeForeground)",
-                    }}
-                >
-                    {menuItems.map((item) => (
-                        <MenuItem
-                            key={item.id}
-                            item={item}
-                            sx={{ fontSize: "var(--type-ramp-base-font-size)" }}
-                        />
-                    ))}
-                </Menu>
-            </Popover>
-        </>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/ClauseAddButton/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/ClauseAddButton/index.ts
deleted file mode 100644
index 9686368f703..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/ClauseAddButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./ClauseAddButton";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/Common/ClickableExpression.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/Common/ClickableExpression.tsx
deleted file mode 100644
index 8d1e1cd4eac..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/Common/ClickableExpression.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React from "react";
-
-import { STNode } from "@wso2/syntax-tree";
-import classNames from "classnames";
-
-import { DiagnosticTooltip } from "../../../Diagnostic/DiagnosticTooltip/DiagnosticTooltip";
-import { useStyles } from "../styles";
-import { Button, Icon } from "@wso2/ui-toolkit";
-
-export const ClickableExpression = (props: {
-    node: STNode;
-    onEditClick: () => void;
-    index?: number;
-    testIdPrefix?: string;
-    expressionPlaceholder?: string;
-}) => {
-    const classes = useStyles();
-    const { node, onEditClick, index, testIdPrefix, expressionPlaceholder = "<add-expression>" } = props;
-    const hasDiagnostic = !!node?.typeData?.diagnostics?.length && node.source.trim() !== "EXPRESSION";
-
-    if (hasDiagnostic) {
-        return (
-            <DiagnosticTooltip
-                placement="right"
-                diagnostic={node?.typeData?.diagnostics?.[0]}
-                value={node.source}
-                onClick={onEditClick}
-            >
-                <Button
-                    appearance="icon"
-                    data-testid={`${testIdPrefix || "intermediate-clause-expression"}-${index}`}
-                    onClick={onEditClick}
-                >
-                    {node.source}
-                    <Icon
-                        name="error-icon"
-                        sx={{ height: "14px", width: "14px" }}
-                        iconSx={{ fontSize: "14px", color: "var(--vscode-errorForeground)" }}
-                    />
-                </Button>
-            </DiagnosticTooltip>
-        );
-    }
-
-    return (
-        <span
-            className={classNames({
-                [classes.clausePlaceholder]: node.source.trim() === "EXPRESSION",
-                [classes.clauseExpression]: true,
-            })}
-            onClick={onEditClick}
-            data-testid={`${testIdPrefix || "intermediate-clause-expression"}-${index}`}
-        >
-            {node.source.trim() === "EXPRESSION" ? expressionPlaceholder : node.source}
-        </span>
-    );
-};
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/Common/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/Common/index.ts
deleted file mode 100644
index d3149de5a4c..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/Common/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ClickableExpression } from './ClickableExpression'
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/ExpandedMappingHeaderNode.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/ExpandedMappingHeaderNode.ts
deleted file mode 100644
index b1e74e81a0a..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/ExpandedMappingHeaderNode.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { Point } from "@projectstorm/geometry";
-import { DefaultPortModel, PortModel, PortModelGenerics } from "@projectstorm/react-diagrams";
-import { QueryExpression } from "@wso2/syntax-tree";
-
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { DataMapperNodeModel } from "../commons/DataMapperNode";
-import { ArrowLinkModel } from "../../Link";
-
-export const EXPANDED_MAPPING_HEADER_NODE_TYPE = "datamapper-node-expanded-mapping-header";
-const NODE_ID = "expanded-mapping-header-node";
-
-export class ExpandedMappingHeaderNode extends DataMapperNodeModel {
-
-    public x: number;
-    public y: number;
-    public sourcePort: DefaultPortModel;
-    public targetPorts: PortModel<PortModelGenerics>[];
-
-    constructor(
-        public context: IDataMapperContext,
-        public queryExpr: QueryExpression
-    ) {
-        super(
-            NODE_ID,
-            context,
-            EXPANDED_MAPPING_HEADER_NODE_TYPE
-        );
-    }
-
-    initPorts() {
-        this.sourcePort = new DefaultPortModel(false, EXPANDED_MAPPING_HEADER_NODE_TYPE)
-        this.addPort(this.sourcePort);
-    }
-
-    initLinks() {
-        for (const targetPort of this.targetPorts) {
-            const link = new ArrowLinkModel();
-            link.setSourcePort(this.sourcePort);
-            link.setTargetPort(targetPort);
-            this.getModel().addAll(link);
-        }
-    }
-
-    setPosition(point: Point): void;
-    setPosition(x: number, y: number): void;
-    setPosition(x: unknown, y?: unknown): void {
-        if (typeof x === 'number' && typeof y === 'number') {
-            if (!this.x || !this.y) {
-                this.x = x;
-                this.y = y;
-            }
-            super.setPosition(x, y);
-        }
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/ExpandedMappingHeaderNodeFactory.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/ExpandedMappingHeaderNodeFactory.tsx
deleted file mode 100644
index c3d8eb9a9a5..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/ExpandedMappingHeaderNodeFactory.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import * as React from 'react';
-
-import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
-import { DiagramEngine } from '@projectstorm/react-diagrams-core';
-import "reflect-metadata";
-import { container, injectable, singleton } from "tsyringe";
-
-import { IDataMapperNodeFactory } from '../commons/DataMapperNode';
-
-import { ExpandedMappingHeaderNode, EXPANDED_MAPPING_HEADER_NODE_TYPE } from './ExpandedMappingHeaderNode';
-import { ExpandedMappingHeaderWidget } from "./ExpandedMappingHeaderWidget";
-
-@injectable()
-@singleton()
-export class ExpandedMappingHeaderNodeFactory extends AbstractReactFactory<ExpandedMappingHeaderNode, DiagramEngine> implements IDataMapperNodeFactory {
-    constructor() {
-        super(EXPANDED_MAPPING_HEADER_NODE_TYPE);
-    }
-
-    generateReactWidget(event: { model: ExpandedMappingHeaderNode; }): JSX.Element {
-        return (
-            <ExpandedMappingHeaderWidget
-                node={event.model}
-                title={`Query: ${event.model.queryExpr.queryPipeline.fromClause.expression.source}`}
-                engine={this.engine}
-                port={event.model.getPort(EXPANDED_MAPPING_HEADER_NODE_TYPE)}
-            />
-        );
-    }
-
-    generateModel(): ExpandedMappingHeaderNode {
-        return undefined;
-    }
-}
-
-container.register("NodeFactory", { useClass: ExpandedMappingHeaderNodeFactory });
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/ExpandedMappingHeaderWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/ExpandedMappingHeaderWidget.tsx
deleted file mode 100644
index 3ac1e02c19b..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/ExpandedMappingHeaderWidget.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-lambda  jsx-no-multiline-js
-import React from "react";
-
-import { PortModel, PortModelGenerics } from "@projectstorm/react-diagrams";
-import { DiagramEngine, PortWidget } from "@projectstorm/react-diagrams-core";
-import {
-    NodePosition,
-    STKindChecker,
-    STNode,
-} from "@wso2/syntax-tree";
-import classNames from "classnames";
-
-import { ClauseAddButton } from "./ClauseAddButton";
-import { ExpandedMappingHeaderNode } from "./ExpandedMappingHeaderNode";
-import { JoinClauseItem } from "./JoinClauseItem";
-import { LetClauseItem } from "./LetClauseItem";
-import { LimitClauseItem } from "./LimitClauseItem";
-import { OrderByClauseItem } from "./OrderClauseItem";
-import { useStyles } from "./styles";
-import { WhereClauseItem } from "./WhereClauseItem";
-
-export interface ExpandedMappingHeaderWidgetProps {
-    node: ExpandedMappingHeaderNode;
-    title: string;
-
-    engine: DiagramEngine;
-    port: PortModel<PortModelGenerics>;
-}
-
-export function ExpandedMappingHeaderWidget(props: ExpandedMappingHeaderWidgetProps) {
-    const { node, engine, port } = props;
-    const { context: { applyModifications }} = node;
-    const classes = useStyles();
-
-    const onClickEdit = (value: string, valuePosition: NodePosition, label: string) => {
-        node.context.enableStatementEditor({value, valuePosition, label});
-    };
-
-    const deleteClause = async (clauseItem: STNode) => {
-        await applyModifications([{ type: "DELETE", ...clauseItem.position }]);
-    };
-
-    const fromClause = props.node.queryExpr.queryPipeline.fromClause;
-    const intermediateClauses = props.node.queryExpr.queryPipeline.intermediateClauses;
-
-    return (
-        <>
-            <div>
-                <div className={classes.clauseItem}>
-                    <div className={classNames(classes.clauseKeyWrap, classes.fromClauseKeyWrap)}>{fromClause.fromKeyword.value}</div>
-                    <div className={classes.clauseItemBody}>
-                        <div className={classes.clauseWrap}>
-                            <span
-                                className={classes.clauseItemKey}
-                            >
-                                {` ${fromClause.typedBindingPattern.source} ${fromClause.inKeyword.value}`}
-                            </span>
-                            <span
-                                className={classes.clauseExpression}
-                                onClick={() => onClickEdit(fromClause.expression.source, fromClause.expression.position, "From clause")}
-                            >
-                                {fromClause.expression.source}
-                            </span>
-                        </div>
-                    </div>
-                </div>
-
-                <ClauseAddButton
-                    context={node.context}
-                    queryExprNode={node.queryExpr}
-                    addIndex={-1}
-                />
-
-                {intermediateClauses.length > 0 &&
-                    intermediateClauses?.map((clauseItem, index) => {
-                        const itemProps = {
-                            key: index,
-                            onEditClick: (value: string, position: NodePosition, label: string) => onClickEdit(value, position, label),
-                            onDeleteClick: () => deleteClause(clauseItem),
-                            context: node.context,
-                            queryExprNode: node.queryExpr,
-                            itemIndex: index,
-                        };
-                        if (STKindChecker.isWhereClause(clauseItem)) {
-                            return <WhereClauseItem {...itemProps} intermediateNode={clauseItem} />;
-                        } else if (STKindChecker.isLetClause(clauseItem)) {
-                            return <LetClauseItem {...itemProps} intermediateNode={clauseItem} />;
-                        } else if (STKindChecker.isLimitClause(clauseItem)) {
-                            return <LimitClauseItem {...itemProps} intermediateNode={clauseItem} />;
-                        } else if (STKindChecker.isOrderByClause(clauseItem)) {
-                            return <OrderByClauseItem {...itemProps} intermediateNode={clauseItem} />;
-                        } else if (STKindChecker.isJoinClause(clauseItem)) {
-                            return <JoinClauseItem {...itemProps} intermediateNode={clauseItem} />;
-                        }
-                    })}
-
-                <div className={classes.queryInputInputPortWrap}>
-                    <PortWidget port={port} engine={engine} />
-                </div>
-            </div>
-        </>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/JoinClauseItem/JoinClauseItem.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/JoinClauseItem/JoinClauseItem.tsx
deleted file mode 100644
index 459cf40c2c9..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/JoinClauseItem/JoinClauseItem.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-lambda  jsx-no-multiline-js
-import React, { useState } from "react";
-
-import { STModification } from "@wso2/ballerina-core";
-import {
-    CaptureBindingPattern,
-    JoinClause,
-    NodePosition,
-    QueryExpression,
-    STNode,
-} from "@wso2/syntax-tree";
-
-import { IDataMapperContext } from "../../../../../utils/DataMapperContext/DataMapperContext";
-import { getRenameEdits } from "../../../utils/ls-utils";
-import { ClauseAddButton } from "../ClauseAddButton";
-import { ClickableExpression } from "../Common";
-import { useStyles } from "../styles";
-import { Button, Codicon, ProgressRing } from "@wso2/ui-toolkit";
-
-export function JoinClauseItem(props: {
-    intermediateNode: JoinClause;
-    onEditClick: (value: string, position: NodePosition, label: string) => void;
-    onDeleteClick: () => Promise<void>;
-    context: IDataMapperContext;
-    queryExprNode: QueryExpression;
-    itemIndex: number;
-}) {
-    const { onEditClick, onDeleteClick, intermediateNode, context, queryExprNode, itemIndex } = props;
-    const { filePath, applyModifications, langServerRpcClient } = context;
-    const classes = useStyles();
-    const [nameEditable, setNameEditable] = useState(false);
-    const variableName = (intermediateNode?.typedBindingPattern?.bindingPattern as CaptureBindingPattern)?.variableName;
-    const [updatedName, setUpdatedName] = useState(variableName.value);
-    const [isLoading, setLoading] = useState(false);
-
-    const onDelete = async () => {
-        setLoading(true);
-        try {
-            await onDeleteClick();
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const onKeyUp = async (key: string, node?: STNode) => {
-        if (key === "Escape") {
-            setNameEditable(false);
-            setUpdatedName("");
-        }
-        if (key === "Enter") {
-            setLoading(true);
-            try {
-                const workspaceEdit = await getRenameEdits(
-                    filePath,
-                    updatedName,
-                    node.position as NodePosition,
-                    langServerRpcClient
-                );
-                const modifications: STModification[] = [];
-
-                Object.values(workspaceEdit?.changes).forEach((edits) => {
-                    edits.forEach((edit) => {
-                        modifications.push({
-                            type: "INSERT",
-                            config: { STATEMENT: edit.newText },
-                            endColumn: edit.range.end.character,
-                            endLine: edit.range.end.line,
-                            startColumn: edit.range.start.character,
-                            startLine: edit.range.start.line,
-                        });
-                    });
-                });
-
-                modifications.sort((a, b) => a.startLine - b.startLine);
-                await applyModifications(modifications);
-            } finally {
-                setLoading(false);
-            }
-        }
-    };
-
-    const expression = intermediateNode.expression;
-    const onExpression = intermediateNode.joinOnCondition?.lhsExpression;
-    const equalsExpression = intermediateNode.joinOnCondition?.rhsExpression;
-
-    return (
-        <>
-            <div className={classes.clauseItem}>
-                <div className={classes.clauseKeyWrap}>{`${
-                    intermediateNode.outerKeyword ? `${intermediateNode?.outerKeyword.value} ` : ""
-                }${intermediateNode.joinKeyword.value}`}</div>
-
-                <div className={classes.clauseItemBody}>
-                    <div className={classes.clauseWrap}>
-                        <span>{intermediateNode.typedBindingPattern.typeDescriptor.source}</span>
-                        <span className={classes.clauseExpression}>
-                            {nameEditable ? (
-                                <input
-                                    spellCheck={false}
-                                    className={classes.input}
-                                    autoFocus={true}
-                                    value={updatedName}
-                                    onChange={(event) => setUpdatedName(event.target.value)}
-                                    onKeyUp={(event) => onKeyUp(event.key, variableName)}
-                                    onBlur={() => {
-                                        setNameEditable(false);
-                                        setUpdatedName(variableName.value);
-                                    }}
-                                    data-testid={`let-clause-name-input-${itemIndex}`}
-                                />
-                            ) : (
-                                <span onClick={() => setNameEditable(true)} data-testid={`join-clause-name-${itemIndex}`}>
-                                    {updatedName}
-                                </span>
-                            )}
-                        </span>
-                        <span>{intermediateNode.inKeyword.value}</span>
-                        <ClickableExpression
-                            node={expression}
-                            onEditClick={() => onEditClick(expression?.source, expression?.position, "Join expression")}
-                            index={itemIndex}
-                        />
-                        <span>{intermediateNode.joinOnCondition?.onKeyword?.value}</span>
-                        <ClickableExpression
-                            node={onExpression}
-                            onEditClick={() => onEditClick(onExpression?.source, onExpression?.position, "Join on expression")}
-                            index={itemIndex}
-                            testIdPrefix='join-clause-on-expression'
-                            expressionPlaceholder='<add-on-expression>'
-                        />
-                        <span>{intermediateNode.joinOnCondition?.equalsKeyword?.value}</span>
-                        <ClickableExpression
-                            node={equalsExpression}
-                            onEditClick={() => onEditClick(equalsExpression?.source, equalsExpression?.position, "Join equals expression")}
-                            index={itemIndex}
-                            testIdPrefix='join-clause-equals-on-expression'
-                            expressionPlaceholder='<add-equals-expression>'
-                        />
-                    </div>
-                    {isLoading ? (
-                        <ProgressRing sx={{ height: '16px', width: '16px', marginRight: "10px" }} />
-                    ) : (
-                        <Button
-                            appearance="icon"
-                            onClick={onDelete}
-                            data-testid={`join-clause-delete-${itemIndex}`}
-                            sx={{ marginRight: "10px"}}
-                        >
-                            <Codicon name="trash" iconSx={{ color: "var(--vscode-errorForeground)" }} />
-                        </Button>
-                    )}
-                </div>
-            </div>
-
-            <ClauseAddButton context={context} queryExprNode={queryExprNode} addIndex={itemIndex} />
-        </>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/JoinClauseItem/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/JoinClauseItem/index.ts
deleted file mode 100644
index 08ab8b6fd50..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/JoinClauseItem/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./JoinClauseItem";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/LetClauseItem/LetClauseItem.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/LetClauseItem/LetClauseItem.tsx
deleted file mode 100644
index 7aa9be242a2..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/LetClauseItem/LetClauseItem.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-lambda  jsx-no-multiline-js
-import React, { useState } from "react";
-
-import { STModification } from "@wso2/ballerina-core";
-import {
-    CaptureBindingPattern,
-    LetClause,
-    LetVarDecl,
-    NodePosition,
-    QueryExpression,
-    STNode,
-} from "@wso2/syntax-tree";
-
-import { IDataMapperContext } from "../../../../../utils/DataMapperContext/DataMapperContext";
-import { getRenameEdits } from "../../../utils/ls-utils";
-import { ClauseAddButton } from "../ClauseAddButton";
-import { ClickableExpression } from "../Common";
-import { useStyles } from "../styles";
-import { Button, Codicon, ProgressRing } from "@wso2/ui-toolkit";
-
-export function LetClauseItem(props: {
-    intermediateNode: LetClause;
-    onEditClick: (value: string, position: NodePosition, label: string) => void;
-    onDeleteClick: () => Promise<void>;
-    context: IDataMapperContext;
-    queryExprNode: QueryExpression;
-    itemIndex: number;
-}) {
-    const {
-        onEditClick,
-        onDeleteClick,
-        intermediateNode,
-        context,
-        queryExprNode,
-        itemIndex,
-    } = props;
-    const { filePath, applyModifications, langServerRpcClient } = context;
-    const classes = useStyles();
-    const [nameEditable, setNameEditable] = useState(false);
-    const letVarDeclaration = intermediateNode.letVarDeclarations[0] as LetVarDecl;
-    const variableName = (
-        letVarDeclaration.typedBindingPattern.bindingPattern as CaptureBindingPattern
-    )?.variableName?.value;
-    const [updatedName, setUpdatedName] = useState(variableName);
-    const [isLoading, setLoading] = useState(false);
-
-    const onDelete = async () => {
-        setLoading(true);
-        try {
-            await onDeleteClick();
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const onKeyUp = async (key: string, node?: STNode) => {
-        if (key === "Escape") {
-            setNameEditable(false);
-            setUpdatedName("");
-        }
-        if (key === "Enter") {
-            setLoading(true);
-            try {
-                const workspaceEdit = await getRenameEdits(
-                    filePath,
-                    updatedName,
-                    node.position as NodePosition,
-                    langServerRpcClient
-                );
-                const modifications: STModification[] = [];
-
-                Object.values(workspaceEdit?.changes).forEach((edits) => {
-                    edits.forEach((edit) => {
-                        modifications.push({
-                            type: "INSERT",
-                            config: { STATEMENT: edit.newText },
-                            endColumn: edit.range.end.character,
-                            endLine: edit.range.end.line,
-                            startColumn: edit.range.start.character,
-                            startLine: edit.range.start.line,
-                        });
-                    });
-                });
-
-                modifications.sort((a, b) => a.startLine - b.startLine);
-                await applyModifications(modifications);
-            } finally {
-                setLoading(false);
-            }
-        }
-    };
-
-    return (
-        <>
-            <div className={classes.clauseItem}>
-                <div className={classes.clauseKeyWrap}>{intermediateNode.letKeyword.value}</div>
-
-                <div className={classes.clauseItemBody}>
-                    <div className={classes.clauseWrap}>
-                        <span className={classes.clauseExpression}>
-                            {nameEditable ? (
-                                <input
-                                    spellCheck={false}
-                                    className={classes.input}
-                                    autoFocus={true}
-                                    value={updatedName}
-                                    onChange={(event) => setUpdatedName(event.target.value)}
-                                    onKeyUp={(event) =>
-                                        onKeyUp(
-                                            event.key,
-                                            (
-                                                letVarDeclaration.typedBindingPattern
-                                                    .bindingPattern as CaptureBindingPattern
-                                            )?.variableName
-                                        )
-                                    }
-                                    onBlur={() => {
-                                        setNameEditable(false);
-                                        setUpdatedName(variableName);
-                                    }}
-                                    data-testid={`let-clause-name-input-${itemIndex}`}
-                                />
-                            ) : (
-                                <span onClick={() => setNameEditable(true)} data-testid={`let-clause-name-${itemIndex}`}>{updatedName}</span>
-                            )}
-                        </span>
-                        <span>{letVarDeclaration.equalsToken.value}</span>
-                        <ClickableExpression
-                            node={letVarDeclaration.expression}
-                            onEditClick={() =>
-                                onEditClick(
-                                    letVarDeclaration?.expression?.source,
-                                    letVarDeclaration?.expression?.position,
-                                    "Let clause"
-                                )
-                            }
-                            index={itemIndex}
-                        />
-                    </div>
-                    {isLoading ? (
-                        <ProgressRing sx={{ height: '16px', width: '16px', marginRight: '10px' }} />
-                    ) : (
-                        <Button
-                            appearance="icon"
-                            onClick={onDelete}
-                            data-testid={`let-clause-delete-${itemIndex}`}
-                            sx={{ marginRight: "10px"}}
-                        >
-                            <Codicon name="trash" iconSx={{ color: "var(--vscode-errorForeground)" }} />
-                        </Button>
-                    )}
-                </div>
-            </div>
-
-            <ClauseAddButton context={context} queryExprNode={queryExprNode} addIndex={itemIndex} />
-        </>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/LetClauseItem/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/LetClauseItem/index.ts
deleted file mode 100644
index 8ab479cc78a..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/LetClauseItem/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./LetClauseItem";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/LimitClauseItem/LimitClauseItem.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/LimitClauseItem/LimitClauseItem.tsx
deleted file mode 100644
index 42bbb210080..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/LimitClauseItem/LimitClauseItem.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-lambda jsx-no-multiline-js
-import React, { useState } from "react";
-
-import { LimitClause, NodePosition, QueryExpression } from "@wso2/syntax-tree";
-
-import { IDataMapperContext } from "../../../../../utils/DataMapperContext/DataMapperContext";
-import { ClauseAddButton } from "../ClauseAddButton";
-import { ClickableExpression } from "../Common";
-import { useStyles } from "../styles";
-import { Button, Codicon, ProgressRing } from "@wso2/ui-toolkit";
-
-export function LimitClauseItem(props: {
-    intermediateNode: LimitClause;
-    onEditClick: (value: string, position: NodePosition, label: string) => void;
-    onDeleteClick: () => Promise<void>;
-    context: IDataMapperContext;
-    queryExprNode: QueryExpression;
-    itemIndex: number;
-}) {
-    const { onEditClick, onDeleteClick, intermediateNode, context, queryExprNode, itemIndex } =
-        props;
-    const classes = useStyles();
-    const [isLoading, setLoading] = useState(false);
-
-    const onDelete = async () => {
-        setLoading(true);
-        try {
-            await onDeleteClick();
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    return (
-        <>
-            <div className={classes.clauseItem}>
-                <div className={classes.clauseKeyWrap}>{intermediateNode.limitKeyword.value}</div>
-
-                <div className={classes.clauseItemBody}>
-                    <div className={classes.clauseWrap}>
-                        <ClickableExpression
-                            node={intermediateNode.expression}
-                            onEditClick={() =>
-                                onEditClick(
-                                    intermediateNode.expression?.source,
-                                    intermediateNode.expression?.position,
-                                    "Limit clause"
-                                )
-                            }
-                            index={itemIndex}
-                        />
-                    </div>
-                    {isLoading ? (
-                        <ProgressRing sx={{ height: '16px', width: '16px', marginRight: '10px' }} />
-                    ) : (
-                        <Button
-                            appearance="icon"
-                            onClick={onDelete}
-                            data-testid={`limit-clause-delete-${itemIndex}`}
-                            sx={{ marginRight: "10px"}}
-                        >
-                            <Codicon name="trash" iconSx={{ color: "var(--vscode-errorForeground)" }} />
-                        </Button>
-                    )}
-                </div>
-            </div>
-
-            <ClauseAddButton context={context} queryExprNode={queryExprNode} addIndex={itemIndex} />
-        </>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/LimitClauseItem/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/LimitClauseItem/index.ts
deleted file mode 100644
index ada43c56264..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/LimitClauseItem/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./LimitClauseItem";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/OrderClauseItem/OrderClauseItem.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/OrderClauseItem/OrderClauseItem.tsx
deleted file mode 100644
index f889159d1c7..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/OrderClauseItem/OrderClauseItem.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-lambda jsx-no-multiline-js
-import React, { useState } from "react";
-
-import { CommaToken, NodePosition, OrderByClause, OrderKey, QueryExpression, STKindChecker, STNode } from "@wso2/syntax-tree";
-
-import { IDataMapperContext } from "../../../../../utils/DataMapperContext/DataMapperContext";
-import { ClauseAddButton } from "../ClauseAddButton";
-import { ClickableExpression } from "../Common";
-import { useStyles } from "../styles";
-import { Button, Codicon, Dropdown, OptionProps, ProgressRing } from "@wso2/ui-toolkit";
-
-export function OrderByClauseItem(props: {
-    intermediateNode: OrderByClause;
-    onEditClick: (value: string, position: NodePosition, label: string) => void;
-    onDeleteClick: () => Promise<void>;
-    context: IDataMapperContext;
-    queryExprNode: QueryExpression;
-    itemIndex: number;
-}) {
-    const { onEditClick, onDeleteClick, intermediateNode, context, queryExprNode, itemIndex } = props;
-    const classes = useStyles();
-    const [isLoading, setLoading] = useState(false);
-
-    const onDelete = async () => {
-        setLoading(true);
-        try {
-            await onDeleteClick();
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const onOrderDirectionChange = async (value: string, currentKey: OrderKey) => {
-        setLoading(true);
-        try {
-            const modifications = [
-                {
-                    type: "INSERT",
-                    config: { "STATEMENT": value },
-                    ...currentKey.orderDirection.position
-                }
-            ];
-            await context.applyModifications(modifications);
-        } finally {
-            setLoading(false);
-        }
-    }
-
-    const addOrderKey = async () => {
-        setLoading(true);
-        try {
-            const lastOrderKey = intermediateNode.orderKey[intermediateNode.orderKey.length - 1];
-            const modifications = [
-                {
-                    type: "INSERT",
-                    config: { "STATEMENT": ', EXPRESSION ascending' },
-                    startLine: lastOrderKey.position.endLine,
-                    startColumn: lastOrderKey.position.endColumn,
-                    endLine: lastOrderKey.position.endLine,
-                    endColumn: lastOrderKey.position.endColumn,
-                }
-            ];
-            await context.applyModifications(modifications);
-        } finally {
-            setLoading(false);
-        }
-    }
-
-    const onDeleteOrderKey = async (index: number) => {
-        setLoading(true);
-        try {
-            const orderKeyPosition: NodePosition = (intermediateNode.orderKey[index] as OrderKey)?.position;
-            if (index === 0) {
-                const CommaTokenPosition: NodePosition = (intermediateNode.orderKey[index + 1] as CommaToken)?.position;
-                const modifications = [
-                    {
-                        type: "DELETE",
-                        startLine: orderKeyPosition.startLine,
-                        startColumn: orderKeyPosition.startColumn,
-                        endLine: CommaTokenPosition?.endLine || orderKeyPosition.endLine,
-                        endColumn: CommaTokenPosition?.endColumn || orderKeyPosition.endColumn,
-                    }
-                ];
-                await context.applyModifications(modifications);
-            } else {
-                const CommaTokenPosition: NodePosition = (intermediateNode.orderKey[index - 1] as CommaToken)?.position;
-                const modifications = [
-                    {
-                        type: "DELETE",
-                        startLine: CommaTokenPosition?.startLine || orderKeyPosition.startLine,
-                        startColumn: CommaTokenPosition?.startColumn || orderKeyPosition.startColumn,
-                        endLine: orderKeyPosition.endLine,
-                        endColumn: orderKeyPosition.endColumn,
-                    }
-                ];
-                await context.applyModifications(modifications);
-            }
-        } finally {
-            setLoading(false);
-        }
-    }
-
-    const dropDownItems: OptionProps[] = [
-        { id: "ascending", content: "Ascending", value: "ascending" },
-        { id: "descending", content: "Descending", value: "descending" }
-    ];
-
-    return (
-        <>
-            <div className={classes.clauseItem}>
-                <div className={classes.clauseKeyWrap}>{`${intermediateNode.orderKeyword.value} ${intermediateNode.byKeyword.value}`}</div>
-
-                <div className={classes.clauseItemBody}>
-                    <div className={classes.clauseWrap}>
-                        {intermediateNode.orderKey.map((item, index) => {
-                            if (STKindChecker.isOrderKey(item)) {
-                                return (
-                                    <span className={classes.clauseExpressionLight}>
-                                        <ClickableExpression
-                                            node={item.expression}
-                                            onEditClick={() =>
-                                                onEditClick(
-                                                    item.expression?.source,
-                                                    item.expression?.position,
-                                                    "Order by clause"
-                                                )
-                                            }
-                                            index={itemIndex}
-                                        />
-                                        <Dropdown
-                                            id={`order-direction-${itemIndex}-${index}`}
-                                            value="ascending"
-                                            onValueChange={(val: string) => onOrderDirectionChange(val, item)}
-                                            items={dropDownItems}
-                                        />
-                                        {intermediateNode.orderKey.length > 1 && (
-                                            <Button
-                                                appearance="icon"
-                                                onClick={() => onDeleteOrderKey(index)}
-                                            >
-                                                <Codicon name="trash" iconSx={{ color: "var(--vscode-errorForeground)" }} />
-                                            </Button>
-                                        )}
-                                    </span>
-                                );
-                            } else if (STKindChecker.isCommaToken(item)) {
-                                return <span>{item.value}</span>;
-                            }
-                        })}
-                        <Button
-                            appearance="icon"
-                            onClick={addOrderKey}
-                            data-testid={`order-clause-add-${itemIndex}`}
-                        >
-                            <Codicon name="add" iconSx={{ color: "var(--vscode-input-placeholderForeground)" }} />
-                        </Button>
-                    </div>
-                    {isLoading ? (
-                        <ProgressRing sx={{ height: '16px', width: '16px', marginRight: '10px' }} />
-                    ) : (
-                        <Button
-                            appearance="icon"
-                            onClick={onDelete}
-                            data-testid={`order-clause-delete-${itemIndex}`}
-                            sx={{ marginRight: "10px"}}
-                        >
-                            <Codicon name="trash" iconSx={{ color: "var(--vscode-errorForeground)" }} />
-                        </Button>
-                    )}
-                </div>
-            </div>
-
-            <ClauseAddButton context={context} queryExprNode={queryExprNode} addIndex={itemIndex} />
-        </>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/OrderClauseItem/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/OrderClauseItem/index.ts
deleted file mode 100644
index d896188bd07..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/OrderClauseItem/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./OrderClauseItem";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/WhereClauseItem/WhereClauseItem.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/WhereClauseItem/WhereClauseItem.tsx
deleted file mode 100644
index 8eee72b8963..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/WhereClauseItem/WhereClauseItem.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-lambda jsx-no-multiline-js
-import React, { useState } from "react";
-
-import { NodePosition, QueryExpression, WhereClause } from "@wso2/syntax-tree";
-
-import { IDataMapperContext } from "../../../../../utils/DataMapperContext/DataMapperContext";
-import { ClauseAddButton } from "../ClauseAddButton";
-import { ClickableExpression } from "../Common";
-import { useStyles } from "../styles";
-import { Button, Codicon, ProgressRing } from "@wso2/ui-toolkit";
-
-export function WhereClauseItem(props: {
-    intermediateNode: WhereClause;
-    onEditClick: (value: string, position: NodePosition, label: string) => void;
-    onDeleteClick: () => Promise<void>;
-    context: IDataMapperContext;
-    queryExprNode: QueryExpression;
-    itemIndex: number;
-}) {
-    const { onEditClick, onDeleteClick, intermediateNode, context, queryExprNode, itemIndex } =
-        props;
-    const classes = useStyles();
-    const [isLoading, setLoading] = useState(false);
-
-    const onDelete = async () => {
-        setLoading(true);
-        try {
-            await onDeleteClick();
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    return (
-        <>
-            <div className={classes.clauseItem}>
-                <div className={classes.clauseKeyWrap}>{intermediateNode.whereKeyword.value}</div>
-
-                <div className={classes.clauseItemBody}>
-                    <div className={classes.clauseWrap}>
-                        <ClickableExpression
-                            node={intermediateNode.expression}
-                            onEditClick={() =>
-                                onEditClick(
-                                    intermediateNode.expression?.source,
-                                    intermediateNode.expression?.position,
-                                    "Where clause"
-                                )
-                            }
-                            index={itemIndex}
-                        />
-                    </div>
-                    {isLoading ? (
-                        <ProgressRing sx={{ height: '16px', width: '16px', marginRight: '10px' }} />
-                    ) : (
-                        <Button
-                            appearance="icon"
-                            onClick={onDelete}
-                            data-testid={`where-clause-delete-${itemIndex}`}
-                            sx={{ marginRight: "10px"}}
-                        >
-                            <Codicon name="trash" iconSx={{ color: "var(--vscode-errorForeground)" }} />
-                        </Button>
-                    )}
-                </div>
-            </div>
-
-            <ClauseAddButton context={context} queryExprNode={queryExprNode} addIndex={itemIndex} />
-        </>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/WhereClauseItem/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/WhereClauseItem/index.ts
deleted file mode 100644
index b16e612ca1e..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/WhereClauseItem/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./WhereClauseItem";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/styles.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/styles.ts
deleted file mode 100644
index 9a8d9090df6..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ExpandedMappingHeader/styles.ts
+++ /dev/null
@@ -1,220 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { css } from "@emotion/css";
-import { GAP_BETWEEN_INTERMEDIATE_CLAUSES, QUERY_EXPR_INTERMEDIATE_CLAUSE_HEIGHT } from "../../utils/constants";
-
-export const useStyles = () => ({
-    clauseItem: css({
-        width: "100%",
-        minWidth: "200px",
-        display: "flex",
-        alignItems: "center",
-        "&:hover": {
-            color: "var(--vscode-inputOption-activeForeground)",
-            "& $deleteIcon": {
-                opacity: 1
-            }
-        }
-    }),
-    clauseItemBody: css({
-        display: "flex",
-        alignItems: "center",
-        background: "var(--vscode-editorWidget-background)",
-        marginLeft: "25px"
-    }),
-    lineWrap: css({
-        width: "80px",
-        height: `${GAP_BETWEEN_INTERMEDIATE_CLAUSES}px`,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        position: "relative",
-        flexDirection: "column"
-    }),
-    line: css({
-        height: "6px",
-        width: "2px",
-        background: "var(--vscode-input-background)"
-    }),
-    clauseKeyWrap: css({
-        border: "1px solid var(--vscode-input-background)",
-        height: `${QUERY_EXPR_INTERMEDIATE_CLAUSE_HEIGHT}px`,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "26px 0",
-        background: "var(--vscode-editorWidget-background)",
-        width: "80px",
-        textAlign: "center",
-        fontWeight: "bold"
-    }),
-    fromClauseKeyWrap: css({
-        border: "1px solid var(--vscode-pickergroup-border)"
-    }),
-    clauseWrap: css({
-        background: "var(--vscode-editorWidget-background)",
-        height: `${QUERY_EXPR_INTERMEDIATE_CLAUSE_HEIGHT}px`,
-        display: "flex",
-        alignItems: "center",
-        padding: "26px 10px",
-        "&:hover": {
-            "& $addOrderKeyIcon": {
-                opacity: 0.7
-            }
-        }
-    }),
-    buttonWrapper: css({
-        border: "1px solid var(--vscode-editorwidget-background)",
-        borderRadius: "8px",
-        right: "35px"
-    }),
-    clauseItemKey: css({
-        marginLeft: "5px"
-    }),
-    clauseExpressionLight: css({
-        marginLeft: "5px",
-        marginRight: "5px",
-        display: "flex",
-        alignItems: "center",
-        transition: "background 0.2s",
-        "&:hover": {
-            background: "var(--vscode-editorHoverWidget-background)",
-            "& $deleteOrderKeyIcon": {
-                opacity: 0.7
-            }
-        }
-    }),
-    clauseExpression: css({
-        cursor: "pointer",
-        padding: "5px",
-        marginLeft: "5px",
-        marginRight: "5px",
-        transition: "border 0.2s",
-        width: "max-content",
-        border: "1px solid var(--vscode-pickerGroup-border)",
-        '&:hover': {
-            border: "1px solid var(--vscode-welcomePage-tileBorder)",
-            background: "var(--vscode-input-background)",
-            color: "var(--vscode-input-foreground)"
-        }
-    }),
-    clauseDiagnostics: css({
-        background: "var(--vscode-inputValidation-errorBackground)",
-        "&:hover": {
-            border: "1px solid var(--vscode-errorForeground)"
-        }
-    }),
-    errorIconWrapper: css({
-        height: "22px",
-        width: "22px",
-        marginLeft: '5px',
-        verticalAlign: 'middle',
-    }),
-    clausePlaceholder: css({
-        background: 'var(--vscode-dropdown-border)',
-    }),
-    addIcon: css({
-        cursor: 'pointer',
-        fontSize: '18px',
-        color: 'var(--vscode-inputOption-activeForeground)',
-        transition: 'all 0.2s',
-        "&:hover": {
-            color: 'var(--vscode-textLink-foreground)',
-        }
-    }),
-    deleteIcon: css({
-        cursor: 'pointer',
-        color: "var(--vscode-errorForeground)",
-        fontSize: '20px',
-        transition: 'all 0.2s ease-in-out',
-        opacity: 0,
-        "&:hover": {
-            color: "var(--vscode-inputValidation-errorBorder)",
-        }
-    }),
-    deleteOrderKeyIcon: css({
-        cursor: 'pointer',
-        color: "var(--vscode-errorForeground)",
-        fontSize: '20px',
-        transition: 'opacity 0.2s ease-in-out',
-        opacity: 0,
-        paddingRight: 5,
-        "&:hover": {
-            opacity: 1,
-            color: "var(--vscode-inputValidation-errorBorder)",
-        }
-    }),
-    addOrderKeyIcon: css({
-        cursor: 'pointer',
-        color: "var(--vscode-input-placeholderForeground)",
-        fontSize: '20px',
-        transition: 'opacity 0.2s ease-in-out',
-        opacity: 0,
-        paddingRight: 5,
-        "&:hover": {
-            opacity: 1,
-            color: "var(--vscode-icon-foreground)",
-        }
-    }),
-    input: css({
-        maxWidth: '120px',
-        padding: "5px",
-        border: 0,
-        "&:hover": { outline: 0 },
-        "&:focus": { outline: 0 },
-        background: 'transparent'
-    }),
-    addButtonWrap: css({
-        position: 'absolute',
-        bottom: 0,
-        display: 'flex',
-        alignItems: 'center',
-        top: 0,
-    }),
-    queryInputInputPortWrap: css({
-        width: 85,
-        display: 'flex',
-        justifyContent: 'center'
-    }),
-    addMenu: css({
-        marginLeft: 5,
-        marginTop: 10,
-        "& .MuiMenuItem-root": {
-            fontSize: '11px',
-            paddingBottom: "1px",
-            paddingTop: "1px"
-        }
-    }),
-    orderSelect: css({
-        '& .MuiSelect-select:focus': {
-            backgroundColor: 'unset',
-        },
-        background: "var(--vscode-editorHoverWidget-background)",
-        borderRadius: 5,
-        cursor: 'pointer',
-        paddingLeft: 5,
-        paddingRight: 5,
-        marginLeft: 5,
-        marginRight: 5,
-        transition: 'border 0.2s',
-        border: `1px solid transparent`,
-        '&:hover': {
-            border: "1px solid var(--vscode-pickerGroup-border)"
-        }
-    })
-});
\ No newline at end of file
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/FromClause/FromClauseNode.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/FromClause/FromClauseNode.ts
deleted file mode 100644
index 560d6e2f8f9..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/FromClause/FromClauseNode.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { Point } from "@projectstorm/geometry";
-import { PrimitiveBalType, TypeField } from "@wso2/ballerina-core";
-import {
-    CaptureBindingPattern,
-    FromClause,
-    ListBindingPattern,
-    MappingBindingPattern,
-    NodePosition,
-    QueryExpression,
-    RecordTypeDesc,
-    STKindChecker,
-    traversNode
-} from "@wso2/syntax-tree";
-
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { EXPANDED_QUERY_SOURCE_PORT_PREFIX } from "../../utils/constants";
-import {
-    getFromClauseNodeLabel,
-    getOptionalArrayField,
-    getSearchFilteredInput,
-    getTypeFromStore,
-    isOptionalAndNillableField
-} from "../../utils/dm-utils";
-import { DataMapperNodeModel } from "../commons/DataMapperNode";
-import { QueryExprMappingType } from "../QueryExpression";
-import { NodeFindingVisitorByPosition } from "../../visitors/NodeFindingVisitorByPosition";
-import { AggregationFunctions } from "../../Label";
-
-export const QUERY_EXPR_SOURCE_NODE_TYPE = "datamapper-node-record-type-desc";
-const NODE_ID = "from-clause-node";
-
-export class FromClauseNode extends DataMapperNodeModel {
-
-    public sourceTypeDesc: RecordTypeDesc;
-    public typeDef: TypeField;
-    public sourceBindingPattern: CaptureBindingPattern | MappingBindingPattern | ListBindingPattern;
-    public nodeLabel: string;
-    public x: number;
-    public y: number;
-    public numberOfFields:  number;
-    public hasNoMatchingFields: boolean;
-    public mappedWithCollectClause: boolean;
-    originalTypeDef: TypeField;
-
-    constructor(
-        public context: IDataMapperContext,
-        public value: FromClause) {
-        super(
-            NODE_ID,
-            context,
-            QUERY_EXPR_SOURCE_NODE_TYPE
-        );
-        this.numberOfFields = 1;
-
-        // tslint:disable-next-line: prefer-conditional-expression
-        const valExpr = this.value.expression;
-        if (STKindChecker.isBinaryExpression(valExpr)
-            && STKindChecker.isElvisToken(valExpr.operator)) {
-            const exprType = getTypeFromStore(valExpr.lhsExpr.position as NodePosition);
-            this.typeDef = exprType && getOptionalArrayField(exprType);
-        } else {
-            this.typeDef = getTypeFromStore(valExpr.position as NodePosition);
-        }
-        const bindingPattern = this.value.typedBindingPattern.bindingPattern;
-        if (STKindChecker.isCaptureBindingPattern(bindingPattern)
-            || STKindChecker.isMappingBindingPattern(bindingPattern)
-            || STKindChecker.isListBindingPattern(bindingPattern)
-        ) {
-            this.sourceBindingPattern = bindingPattern;
-        }
-        
-        this.nodeLabel = getFromClauseNodeLabel(bindingPattern, valExpr);
-        this.originalTypeDef = this.typeDef;
-
-        // Check if the selected query expression is connected via a collect clause with aggregation function
-        // If so, disable all fields since it can't accept multiple inputs (due to collect clause only deal with sequencial variables)
-        const selectedST = context?.selection.selectedST;
-        if (selectedST) {
-            const queryExprFindingVisitor = new NodeFindingVisitorByPosition(selectedST.position);
-            traversNode(selectedST.stNode, queryExprFindingVisitor);
-            const queryExpr = queryExprFindingVisitor.getNode() as QueryExpression;
-
-            const connectedViaCollectClause = selectedST?.mappingType
-                && selectedST.mappingType === QueryExprMappingType.A2SWithCollect;
-            if (queryExpr && connectedViaCollectClause) {
-                const resultClause = queryExpr?.resultClause || queryExpr?.selectClause;
-                const fnName = resultClause.kind === "CollectClause" && resultClause.expression
-                    && STKindChecker.isFunctionCall(resultClause.expression)
-                    && STKindChecker.isSimpleNameReference(resultClause.expression.functionName)
-                    && resultClause.expression.functionName.name.value;
-                if (AggregationFunctions.includes(fnName)) {
-                    this.mappedWithCollectClause = true;
-                }
-            }
-        }
-    }
-
-    initPorts(): void {
-        this.typeDef = this.getSearchFilteredType();
-        this.hasNoMatchingFields = !this.typeDef;
-        if (this.sourceBindingPattern) {
-            if (this.typeDef){
-                const parentPort = this.addPortsForHeaderField(this.typeDef, this.nodeLabel, "OUT",
-                    EXPANDED_QUERY_SOURCE_PORT_PREFIX, this.context.collapsedFields);
-
-                if (this.typeDef.typeName === PrimitiveBalType.Record) {
-                    const fields = this.typeDef.fields;
-                    fields.forEach((subField) => {
-                        this.numberOfFields += this.addPortsForInputRecordField(
-                            subField, "OUT", this.nodeLabel, this.nodeLabel,
-                            EXPANDED_QUERY_SOURCE_PORT_PREFIX, parentPort, this.context.collapsedFields,
-                            parentPort.collapsed
-                        );
-                    });
-                } else {
-                    const isOptional = isOptionalAndNillableField(this.typeDef);
-                    this.numberOfFields += this.addPortsForInputRecordField(
-                        this.typeDef, "OUT", this.nodeLabel, this.nodeLabel,
-                        EXPANDED_QUERY_SOURCE_PORT_PREFIX, parentPort, this.context.collapsedFields, parentPort.collapsed, isOptional
-                    );
-                }
-            }
-        }
-    }
-
-    async initLinks() {
-        // Currently, we create links from "IN" ports and back tracing the inputs.
-    }
-
-    public getSearchFilteredType() {
-        if (this.originalTypeDef
-            && this.originalTypeDef?.memberType
-            && this.originalTypeDef.typeName === PrimitiveBalType.Array
-        ) {
-            return getSearchFilteredInput(this.originalTypeDef.memberType, this.nodeLabel);
-        }
-    }
-
-    setPosition(point: Point): void;
-    setPosition(x: number, y: number): void;
-    setPosition(x: unknown, y?: unknown): void {
-        if (typeof x === 'number' && typeof y === 'number'){
-            if (!this.x){
-                this.x = x;
-            }
-            super.setPosition(this.x, y);
-        }
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/FromClause/FromClauseNodeFactory.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/FromClause/FromClauseNodeFactory.tsx
deleted file mode 100644
index 2ca9b7ec967..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/FromClause/FromClauseNodeFactory.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-lambda  jsx-no-multiline-js
-import * as React from 'react';
-
-import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
-import { DiagramEngine } from '@projectstorm/react-diagrams-core';
-import "reflect-metadata";
-import { container, injectable, singleton } from "tsyringe";
-
-import { RecordFieldPortModel } from "../../Port";
-import { EXPANDED_QUERY_SOURCE_PORT_PREFIX } from '../../utils/constants';
-import { IDataMapperNodeFactory } from '../commons/DataMapperNode';
-import { RecordTypeTreeWidget } from '../commons/RecordTypeTreeWidget/RecordTypeTreeWidget';
-
-import {
-    FromClauseNode,
-    QUERY_EXPR_SOURCE_NODE_TYPE
-} from './FromClauseNode';
-import { InputSearchNoResultFound, SearchNoResultFoundKind } from '../commons/Search';
-
-@injectable()
-@singleton()
-export class FromClauseNodeFactory extends AbstractReactFactory<FromClauseNode, DiagramEngine> implements IDataMapperNodeFactory {
-    constructor() {
-        super(QUERY_EXPR_SOURCE_NODE_TYPE);
-    }
-
-    generateReactWidget(event: { model: FromClauseNode; }): JSX.Element {
-        if (event.model.hasNoMatchingFields) {
-            return (
-                <InputSearchNoResultFound kind={SearchNoResultFoundKind.InputField} />
-            );
-        }
-        return (
-            <RecordTypeTreeWidget
-                engine={this.engine}
-                id={`${EXPANDED_QUERY_SOURCE_PORT_PREFIX}.${event.model.nodeLabel}`}
-                typeDesc={event.model.typeDef}
-                getPort={(portId: string) => event.model.getPort(portId) as RecordFieldPortModel}
-                handleCollapse={(fieldName: string, expand?: boolean) => event.model.context.handleCollapse(fieldName, expand)}
-                valueLabel={event.model.nodeLabel}
-                hasLinkViaCollectClause={event.model.mappedWithCollectClause}
-            />
-        );
-    }
-
-    generateModel(): FromClauseNode {
-        return undefined;
-    }
-}
-
-container.register("NodeFactory", {useClass: FromClauseNodeFactory});
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/FromClause/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/FromClause/index.ts
deleted file mode 100644
index 6aab4e111c2..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/FromClause/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-export * from "./FromClauseNode";
-export * from "./FromClauseNodeFactory";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/JoinClause/JoinClauseNode.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/JoinClause/JoinClauseNode.ts
deleted file mode 100644
index 6365a9bea24..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/JoinClause/JoinClauseNode.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { Point } from "@projectstorm/geometry";
-import { PrimitiveBalType, TypeField } from "@wso2/ballerina-core";
-import {
-    CaptureBindingPattern,
-    FieldAccess,
-    JoinClause,
-    NodePosition,
-    OptionalFieldAccess,
-    RecordTypeDesc,
-    SimpleNameReference,
-    STKindChecker
-} from "@wso2/syntax-tree";
-
-import { useDMSearchStore } from "../../../../store/store";
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { EXPANDED_QUERY_SOURCE_PORT_PREFIX } from "../../utils/constants";
-import { getFilteredSubFields, getOptionalRecordField, getSearchFilteredInput } from "../../utils/dm-utils";
-import { TypeDescriptorStore } from "../../utils/type-descriptor-store";
-import { DataMapperNodeModel } from "../commons/DataMapperNode";
-
-export const QUERY_EXPR_JOIN_NODE_TYPE = "datamapper-node-record-type-desc-join";
-const NODE_ID = "query-expr-join-node";
-
-export class JoinClauseNode extends DataMapperNodeModel {
-
-    public sourceTypeDesc: RecordTypeDesc;
-    public typeDef: TypeField;
-    public sourceBindingPattern: CaptureBindingPattern;
-    public isOptional: boolean;
-    public x: number;
-    public numberOfFields:  number;
-
-    constructor(
-        public context: IDataMapperContext,
-        public value: JoinClause) {
-        super(
-            `${NODE_ID}-${value.typedBindingPattern.bindingPattern.source.trim()}`,
-            context,
-            QUERY_EXPR_JOIN_NODE_TYPE
-        );
-        this.numberOfFields = 1;
-    }
-
-    initPorts(): void {
-        if (this.sourceBindingPattern) {
-            let name = this.sourceBindingPattern.variableName.value;
-            if (this.isOptional && [PrimitiveBalType.Array, PrimitiveBalType.Record, PrimitiveBalType.Union].includes(this.typeDef.typeName as PrimitiveBalType)){
-                name = `${name}?`
-            }
-
-            if (this.typeDef){
-                const parentPort = this.addPortsForHeaderField(this.typeDef, name, "OUT", EXPANDED_QUERY_SOURCE_PORT_PREFIX, this.context.collapsedFields);
-
-                const optionalRecordField = getOptionalRecordField(this.typeDef);
-                if (optionalRecordField) {
-                    optionalRecordField?.fields.forEach((subField) => {
-                        this.numberOfFields += this.addPortsForInputRecordField(
-                            subField, "OUT", name, name, EXPANDED_QUERY_SOURCE_PORT_PREFIX,
-                            parentPort, this.context.collapsedFields, parentPort.collapsed, true
-                        );
-                    });
-                } else if (this.typeDef.typeName === PrimitiveBalType.Record) {
-                    const fields = this.typeDef.fields;
-                    fields.forEach((subField) => {
-                        this.numberOfFields += this.addPortsForInputRecordField(
-                            subField, "OUT", name, name, EXPANDED_QUERY_SOURCE_PORT_PREFIX,
-                                parentPort, this.context.collapsedFields, parentPort.collapsed
-                            );
-                    });
-                } else {
-                    this.numberOfFields += this.addPortsForInputRecordField(
-                        this.typeDef, "OUT", name, name, EXPANDED_QUERY_SOURCE_PORT_PREFIX,
-                            parentPort, this.context.collapsedFields, parentPort.collapsed
-                        );
-                }
-            }
-        }
-    }
-
-    async initLinks() {
-        // Currently, we create links from "IN" ports and back tracing the inputs.
-    }
-
-    public getSourceType() {
-        const expr = this.value.expression;
-        const bindingPattern = this.value.typedBindingPattern.bindingPattern;
-        if (STKindChecker.isCaptureBindingPattern(bindingPattern)) {
-            this.sourceBindingPattern = bindingPattern;
-
-            let exprPosition: NodePosition;
-            if (STKindChecker.isFieldAccess(this.value.joinOnCondition.rhsExpression)){
-                exprPosition = (this.value.joinOnCondition.rhsExpression as FieldAccess)?.expression?.position;
-            } else if (STKindChecker.isSimpleNameReference(this.value.joinOnCondition.rhsExpression)){
-                exprPosition = (this.value.joinOnCondition.rhsExpression as SimpleNameReference)?.position;
-            } else if (STKindChecker.isOptionalFieldAccess(this.value.joinOnCondition.rhsExpression)){
-                exprPosition = (this.value.joinOnCondition.rhsExpression as OptionalFieldAccess)?.expression?.position;
-            }
-
-            if (exprPosition){
-                const recordTypeDescriptors = TypeDescriptorStore.getInstance();
-                const type = recordTypeDescriptors.getTypeDescriptor({
-                    startLine: exprPosition.startLine,
-                    startColumn: exprPosition.startColumn,
-                    endLine: exprPosition.endLine,
-                    endColumn: exprPosition.endColumn
-                });
-                const optionalRecordField = getOptionalRecordField(type);
-                const name = this.sourceBindingPattern.variableName.value;
-                if (optionalRecordField) {
-                    this.typeDef = getSearchFilteredInput({ ...optionalRecordField, optional: true }, name);
-                }else if (type && type.typeName === PrimitiveBalType.Record) {
-                    this.typeDef = getSearchFilteredInput(type, name);
-                } else if (type && type.typeName === PrimitiveBalType.Array) {
-                    this.typeDef = getSearchFilteredInput(type.memberType, name);
-                } else {
-                    this.typeDef = getSearchFilteredInput({ ...type, name: (expr as SimpleNameReference)?.name?.value }, name)
-                }
-            }
-        }
-        return this.typeDef;
-    }
-
-    setPosition(point: Point): void;
-    setPosition(x: number, y: number): void;
-    setPosition(x: unknown, y?: unknown): void {
-        if (typeof x === 'number' && typeof y === 'number'){
-            if (!this.x){
-                this.x = x;
-            }
-            super.setPosition(this.x, y);
-        }
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/JoinClause/JoinClauseNodeFactory.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/JoinClause/JoinClauseNodeFactory.tsx
deleted file mode 100644
index 03684c25968..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/JoinClause/JoinClauseNodeFactory.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js jsx-no-lambda
-import * as React from 'react';
-
-import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
-import { DiagramEngine } from '@projectstorm/react-diagrams-core';
-import { PrimitiveBalType } from "@wso2/ballerina-core";
-import "reflect-metadata";
-import { container, injectable, singleton } from "tsyringe";
-
-import { RecordFieldPortModel } from "../../Port";
-import { EXPANDED_QUERY_SOURCE_PORT_PREFIX } from '../../utils/constants';
-import { IDataMapperNodeFactory } from '../commons/DataMapperNode';
-import { PrimitiveTypeItemWidget } from '../commons/PrimitiveTypeItemWidget';
-import { RecordTypeTreeWidget } from '../commons/RecordTypeTreeWidget/RecordTypeTreeWidget';
-
-import {
-    JoinClauseNode,
-    QUERY_EXPR_JOIN_NODE_TYPE
-} from './JoinClauseNode';
-
-@injectable()
-@singleton()
-export class JoinClauseNodeFactory extends AbstractReactFactory<JoinClauseNode, DiagramEngine> implements IDataMapperNodeFactory {
-    constructor() {
-        super(QUERY_EXPR_JOIN_NODE_TYPE);
-    }
-
-    generateReactWidget(event: { model: JoinClauseNode; }): JSX.Element {
-        const id = `${EXPANDED_QUERY_SOURCE_PORT_PREFIX}.${event.model.sourceBindingPattern.variableName.value}`;
-
-        const props = {
-            id,
-            engine: this.engine,
-            typeDesc: event.model.typeDef,
-            getPort: (portId: string) => event.model.getPort(portId) as RecordFieldPortModel,
-            valueLabel: event.model.sourceBindingPattern.variableName.value,
-            nodeHeaderSuffix: event.model.value.outerKeyword ? "Outer join" : "Join"
-        }
-        if ([PrimitiveBalType.Array, PrimitiveBalType.Record, PrimitiveBalType.Union].includes(event.model.typeDef.typeName as PrimitiveBalType)) {
-            if (event.model.isOptional) {
-                props.id = `${id}?`
-            }
-            return (
-                <RecordTypeTreeWidget
-                    {...props}
-                    handleCollapse={(fieldName: string, expand?: boolean) => event.model.context.handleCollapse(fieldName, expand)}
-                />
-            );
-        }
-
-        return (
-            <PrimitiveTypeItemWidget {...props} />
-        )
-    }
-
-    generateModel(): JoinClauseNode {
-        return undefined;
-    }
-}
-
-container.register("NodeFactory", { useClass: JoinClauseNodeFactory });
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/JoinClause/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/JoinClause/index.ts
deleted file mode 100644
index a2ce7bbcd46..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/JoinClause/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-export * from "./JoinClauseNode";
-export * from "./JoinClauseNodeFactory";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetClause/LetClauseNode.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetClause/LetClauseNode.ts
deleted file mode 100644
index 2c80338180b..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetClause/LetClauseNode.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { Point } from "@projectstorm/geometry";
-import { PrimitiveBalType, TypeField } from "@wso2/ballerina-core";
-import {
-    CaptureBindingPattern,
-    LetClause,
-    LetVarDecl,
-    NodePosition,
-    RecordTypeDesc,
-    SimpleNameReference,
-    STKindChecker
-} from "@wso2/syntax-tree";
-
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { EXPANDED_QUERY_SOURCE_PORT_PREFIX } from "../../utils/constants";
-import {
-    getLetClauseVarNames,
-    getFromClauseNodeLabel,
-    getSearchFilteredInput,
-    getTypeFromStore
-} from "../../utils/dm-utils";
-import { DataMapperNodeModel } from "../commons/DataMapperNode";
-
-export const QUERY_EXPR_LET_NODE_TYPE = "datamapper-node-record-type-desc-let";
-const NODE_ID = "query-expr-let-node";
-
-export class LetClauseNode extends DataMapperNodeModel {
-
-    public sourceTypeDesc: RecordTypeDesc;
-    public typeDef: TypeField;
-    public sourceBindingPattern: CaptureBindingPattern;
-    public nodeLabel: string;
-    public x: number;
-    public numberOfFields:  number;
-    public hasNoMatchingFields: boolean;
-    originalTypeDef: TypeField;
-    letVarDecl: LetVarDecl;
-
-    constructor(
-        public context: IDataMapperContext,
-        public value: LetClause
-    ) {
-        super(
-            `${NODE_ID}-${getLetClauseVarNames(value).join('.')}`,
-            context,
-            QUERY_EXPR_LET_NODE_TYPE
-        );
-        this.numberOfFields = 1;
-        this.letVarDecl = value.letVarDeclarations[0] as LetVarDecl;
-        const expr = this.letVarDecl?.expression;
-        const bindingPattern = (this.value.letVarDeclarations[0] as LetVarDecl)?.typedBindingPattern.bindingPattern;
-        if (STKindChecker.isCaptureBindingPattern(bindingPattern)) {
-            this.sourceBindingPattern = bindingPattern;
-            this.originalTypeDef = getTypeFromStore(expr.position as NodePosition);
-            this.typeDef = this.originalTypeDef;
-        }
-        this.nodeLabel = getFromClauseNodeLabel(bindingPattern, expr);
-    }
-
-    initPorts(): void {
-        this.typeDef = this.getSearchFilteredType();
-        this.hasNoMatchingFields = !this.typeDef;
-        if (this.sourceBindingPattern) {
-            const name = this.sourceBindingPattern.variableName.value;
-            if (this.typeDef){
-                const parentPort = this.addPortsForHeaderField(this.typeDef, name, "OUT", EXPANDED_QUERY_SOURCE_PORT_PREFIX, this.context.collapsedFields);
-
-                if (this.typeDef && (this.typeDef.typeName === PrimitiveBalType.Record)) {
-                    const fields = this.typeDef.fields;
-                    fields.forEach((subField) => {
-                        this.numberOfFields += this.addPortsForInputRecordField(
-                            subField, "OUT", this.sourceBindingPattern.variableName.value,
-                            this.sourceBindingPattern.variableName.value, EXPANDED_QUERY_SOURCE_PORT_PREFIX,
-                            parentPort, this.context.collapsedFields, parentPort.collapsed
-                        );
-                    });
-                } else {
-                    this.addPortsForInputRecordField(
-                        this.typeDef, "OUT", this.sourceBindingPattern.variableName.value,
-                        this.sourceBindingPattern.variableName.value, EXPANDED_QUERY_SOURCE_PORT_PREFIX,
-                        parentPort, this.context.collapsedFields, parentPort.collapsed
-                    );
-                }
-            }
-        }
-    }
-
-    async initLinks() {
-        // Currently, we create links from "IN" ports and back tracing the inputs.
-    }
-
-    public getSearchFilteredType() {
-        if (this.originalTypeDef){
-            const name = this.sourceBindingPattern.variableName.value;
-            const isRecordOrArray = this.originalTypeDef.typeName === PrimitiveBalType.Record || this.originalTypeDef.typeName === PrimitiveBalType.Array;
-            return getSearchFilteredInput(isRecordOrArray ? this.originalTypeDef : {...this.originalTypeDef, name: (this.letVarDecl?.expression as SimpleNameReference)?.name?.value}, name)
-        }
-    }
-
-    setPosition(point: Point): void;
-    setPosition(x: number, y: number): void;
-    setPosition(x: unknown, y?: unknown): void {
-        if (typeof x === 'number' && typeof y === 'number'){
-            if (!this.x){
-                this.x = x;
-            }
-            super.setPosition(this.x, y);
-        }
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetClause/LetClauseNodeFactory.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetClause/LetClauseNodeFactory.tsx
deleted file mode 100644
index 17e0f743319..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetClause/LetClauseNodeFactory.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js jsx-no-lambda
-import * as React from 'react';
-
-import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
-import { DiagramEngine } from '@projectstorm/react-diagrams-core';
-import { PrimitiveBalType } from "@wso2/ballerina-core";
-import "reflect-metadata";
-import { container, injectable, singleton } from "tsyringe";
-
-import { RecordFieldPortModel } from "../../Port";
-import { EXPANDED_QUERY_SOURCE_PORT_PREFIX } from '../../utils/constants';
-import { IDataMapperNodeFactory } from '../commons/DataMapperNode';
-import { PrimitiveTypeItemWidget } from '../commons/PrimitiveTypeItemWidget';
-import { RecordTypeTreeWidget } from '../commons/RecordTypeTreeWidget/RecordTypeTreeWidget';
-
-import {
-    LetClauseNode,
-    QUERY_EXPR_LET_NODE_TYPE
-} from './LetClauseNode';
-
-@injectable()
-@singleton()
-export class LetClauseNodeFactory extends AbstractReactFactory<LetClauseNode, DiagramEngine> implements IDataMapperNodeFactory {
-    constructor() {
-        super(QUERY_EXPR_LET_NODE_TYPE);
-    }
-
-    generateReactWidget(event: { model: LetClauseNode; }): JSX.Element {
-        if (event.model.hasNoMatchingFields && !event.model.typeDef) {
-            return;
-        }
-        if (event.model.typeDef.typeName === PrimitiveBalType.Record || event.model.typeDef.typeName === PrimitiveBalType.Array){
-            return (
-                <RecordTypeTreeWidget
-                    engine={this.engine}
-                    id={`${EXPANDED_QUERY_SOURCE_PORT_PREFIX}.${event.model.sourceBindingPattern.variableName.value}`}
-                    typeDesc={event.model.typeDef}
-                    getPort={(portId: string) => event.model.getPort(portId) as RecordFieldPortModel}
-                    handleCollapse={(fieldName: string, expand?: boolean) => event.model.context.handleCollapse(fieldName, expand)}
-                    valueLabel={event.model.sourceBindingPattern.variableName.value}
-                    nodeHeaderSuffix='Let'
-                />
-            );
-        }
-
-        return (
-            <PrimitiveTypeItemWidget
-                engine={this.engine}
-                id={`${EXPANDED_QUERY_SOURCE_PORT_PREFIX}.${event.model.sourceBindingPattern.variableName.value}`}
-                typeDesc={event.model.typeDef}
-                getPort={(portId: string) => event.model.getPort(portId) as RecordFieldPortModel}
-                valueLabel={event.model.sourceBindingPattern.variableName.value}
-                nodeHeaderSuffix='Let'
-            />
-        )
-    }
-
-    generateModel(): LetClauseNode {
-        return undefined;
-    }
-}
-
-container.register("NodeFactory", {useClass: LetClauseNodeFactory});
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetClause/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetClause/index.ts
deleted file mode 100644
index cf5331e52d1..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetClause/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-export * from "./LetClauseNode";
-export * from "./LetClauseNodeFactory";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetExpression/LetExpressionNode.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetExpression/LetExpressionNode.ts
deleted file mode 100644
index 971b46b3420..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetExpression/LetExpressionNode.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { Point } from "@projectstorm/geometry";
-import { PrimitiveBalType, TypeField } from "@wso2/ballerina-core";
-import {
-    ExpressionFunctionBody,
-    LetExpression,
-    LetVarDecl,
-    NodePosition,
-    STKindChecker
-} from "@wso2/syntax-tree";
-
-import { useDMSearchStore } from "../../../../store/store";
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { getLetExpressions } from "../../../DataMapper/LocalVarConfigPanel/local-var-mgt-utils";
-import { isGoToQueryWithinLetExprSupported } from "../../../DataMapper/utils";
-import { LET_EXPRESSION_SOURCE_PORT_PREFIX } from "../../utils/constants";
-import { getSearchFilteredInput, getTypeFromStore, getTypeOfOutput } from "../../utils/dm-utils";
-import { DataMapperNodeModel } from "../commons/DataMapperNode";
-
-export const LET_EXPR_SOURCE_NODE_TYPE = "datamapper-node-type-desc-let-expression";
-const NODE_ID = "let-expr-node";
-
-export interface DMLetVarDecl {
-    varName: string;
-    type: TypeField;
-    declaration: LetVarDecl;
-}
-
-export class LetExpressionNode extends DataMapperNodeModel {
-    public letExpr: LetExpression;
-    public letVarDecls: DMLetVarDecl[];
-    public hasNoMatchingFields: boolean;
-    public numberOfFields:  number;
-
-    constructor(
-        public context: IDataMapperContext,
-        public value: ExpressionFunctionBody,
-        public isWithinQuery?: boolean) {
-        super(
-            NODE_ID,
-            context,
-            LET_EXPR_SOURCE_NODE_TYPE
-        );
-        this.numberOfFields = 1;
-        this.letVarDecls = [];
-    }
-
-    async initPorts() {
-        this.letVarDecls = [];
-        if (!STKindChecker.isLetExpression(this.value.expression)) {
-            return;
-        }
-        this.letExpr = this.value.expression;
-        const letExpressions = getLetExpressions(this.letExpr);
-        const balVersion = this.context.ballerinaVersion;
-        const searchValue = useDMSearchStore.getState().inputSearch;
-
-        letExpressions.forEach(expr => {
-            const letVarDecls = expr.letVarDeclarations;
-            letVarDecls.forEach(decl => {
-                if (STKindChecker.isLetVarDecl(decl)) {
-                    const bindingPattern = decl.typedBindingPattern.bindingPattern;
-
-                    if (STKindChecker.isCaptureBindingPattern(bindingPattern)) {
-                        const varName = bindingPattern.variableName;
-                        const exprPosition = decl.expression.position as NodePosition;
-
-                        const typeWithoutFilter = isGoToQueryWithinLetExprSupported(balVersion)
-                            ? getTypeOfOutput(varName, this.context.ballerinaVersion)
-                            : getTypeFromStore(exprPosition);
-
-                        const type = getSearchFilteredInput(typeWithoutFilter, varName.value);
-
-                        if (type) {
-                            const parentPort = this.addPortsForHeaderField(type, varName.value, "OUT",
-                            LET_EXPRESSION_SOURCE_PORT_PREFIX, this.context.collapsedFields);
-
-                            if (type && (type.typeName === PrimitiveBalType.Record)) {
-                                const fields = type.fields;
-                                fields.forEach((subField) => {
-                                    this.numberOfFields += 1 + this.addPortsForInputRecordField(
-                                        subField, "OUT", varName.value, varName.value,
-                                        LET_EXPRESSION_SOURCE_PORT_PREFIX, parentPort, this.context.collapsedFields,
-                                        parentPort.collapsed
-                                    );
-                                });
-                            } else {
-                                this.numberOfFields += this.addPortsForInputRecordField(
-                                    type, "OUT", varName.value, varName.value,
-                                    LET_EXPRESSION_SOURCE_PORT_PREFIX, parentPort, this.context.collapsedFields,
-                                    parentPort.collapsed
-                                );
-                            }
-
-                            this.letVarDecls.push({varName: varName.value, type, declaration: decl});
-                        }
-                    }
-                }
-            });
-        });
-        this.hasNoMatchingFields = searchValue && letExpressions.length > 0 && this.letVarDecls.length === 0;
-    }
-
-    async initLinks() {
-        // Currently we create links from "IN" ports and back tracing the inputs.
-    }
-
-    setPosition(point: Point): void;
-    setPosition(x: number, y: number): void;
-    setPosition(x: unknown, y?: unknown): void {
-        if (typeof x === 'number' && typeof y === 'number'){
-            super.setPosition(x, y);
-        }
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetExpression/LetExpressionNodeFactory.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetExpression/LetExpressionNodeFactory.tsx
deleted file mode 100644
index 6e7ea98504c..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetExpression/LetExpressionNodeFactory.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js jsx-no-lambda
-import * as React from 'react';
-
-import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
-import { DiagramEngine } from '@projectstorm/react-diagrams-core';
-import "reflect-metadata";
-import { container, injectable, singleton } from "tsyringe";
-
-import { RecordFieldPortModel } from '../../Port';
-import { IDataMapperNodeFactory } from '../commons/DataMapperNode';
-import { InputSearchNoResultFound, SearchNoResultFoundKind } from "../commons/Search";
-
-import { LetExpressionNode, LET_EXPR_SOURCE_NODE_TYPE } from "./LetExpressionNode";
-import { LetExpressionTreeWidget } from "./LetExpressionTreeWidget";
-
-@injectable()
-@singleton()
-export class LetExpressionNodeFactory extends AbstractReactFactory<LetExpressionNode, DiagramEngine> implements IDataMapperNodeFactory {
-    constructor() {
-        super(LET_EXPR_SOURCE_NODE_TYPE);
-    }
-
-    generateReactWidget(event: { model: LetExpressionNode; }): JSX.Element {
-        return (
-            <>
-                {event.model.hasNoMatchingFields ? (
-                    <InputSearchNoResultFound kind={SearchNoResultFoundKind.LocalVariable} />
-                ) : (
-                    <LetExpressionTreeWidget
-                        engine={this.engine}
-                        letVarDecls={event.model.letVarDecls}
-                        context={event.model.context}
-                        getPort={(portId: string) => event.model.getPort(portId) as RecordFieldPortModel}
-                        handleCollapse={(fieldName: string, expand?: boolean) => event.model.context.handleCollapse(fieldName, expand)}
-                        isWithinQuery={event.model.isWithinQuery}
-                    />
-                )}
-            </>
-        );
-    }
-
-    generateModel(): LetExpressionNode {
-        return undefined;
-    }
-}
-
-container.register("NodeFactory", { useClass: LetExpressionNodeFactory });
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetExpression/LetExpressionTreeWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetExpression/LetExpressionTreeWidget.tsx
deleted file mode 100644
index 046ba2005af..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetExpression/LetExpressionTreeWidget.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js jsx-no-lambda
-import React, { ReactNode, useMemo } from 'react';
-
-import styled from "@emotion/styled";
-import { Button, Codicon, Icon } from '@wso2/ui-toolkit';
-import { DiagramEngine } from '@projectstorm/react-diagrams';
-import { CaptureBindingPattern, STKindChecker } from "@wso2/syntax-tree";
-
-import { useDMSearchStore } from "../../../../store/store";
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { RecordFieldPortModel } from '../../Port';
-import { LET_EXPRESSION_SOURCE_PORT_PREFIX } from "../../utils/constants";
-import { TreeContainer } from '../commons/Tree/Tree';
-
-import { DMLetVarDecl } from "./index";
-import { LetVarDeclItemWidget } from "./LetVarDeclItemWidget";
-import { useIONodesStyles } from '../../../styles';
-
-export interface LetExpressionTreeWidgetProps {
-    letVarDecls: DMLetVarDecl[];
-    engine: DiagramEngine;
-    context: IDataMapperContext;
-    isWithinQuery: boolean;
-    getPort: (portId: string) => RecordFieldPortModel;
-    handleCollapse: (portName: string, isExpanded?: boolean) => void;
-}
-
-export function LetExpressionTreeWidget(props: LetExpressionTreeWidgetProps) {
-    const { engine, letVarDecls, context, isWithinQuery, getPort, handleCollapse } = props;
-    const searchValue = useDMSearchStore.getState().inputSearch;
-    const classes = useIONodesStyles();
-    const selectedST = context.selection.selectedST.stNode;
-
-    const onClick = () => {
-        context.handleLocalVarConfigPanel(true);
-    };
-
-    const letVarDeclItems: ReactNode[] = useMemo(() => {
-        return letVarDecls.map(decl => {
-            const isExprPlaceholder = decl.declaration.expression.source.trim() === "EXPRESSION";
-            const isSelfReferencedWithinQuery = isWithinQuery
-                && STKindChecker.isLetVarDecl(selectedST)
-                && (selectedST.typedBindingPattern.bindingPattern as CaptureBindingPattern)
-                    .variableName.value === decl.varName;
-            if (!isExprPlaceholder && !isSelfReferencedWithinQuery) {
-                return (
-                    <LetVarDeclItemWidget
-                        key={`${LET_EXPRESSION_SOURCE_PORT_PREFIX}.${decl.varName}`}
-                        id={`${LET_EXPRESSION_SOURCE_PORT_PREFIX}.${decl.varName}`}
-                        engine={engine}
-                        declaration={decl.declaration}
-                        context={context}
-                        typeDesc={decl.type}
-                        getPort={(portId: string) => getPort(portId) as RecordFieldPortModel}
-                        handleCollapse={handleCollapse}
-                        valueLabel={decl.varName}
-                    />
-                );
-            }
-        }).filter(decl => !!decl);
-    }, [letVarDecls]);
-
-    return (
-        <>
-            {letVarDeclItems.length > 0 ? (
-                <TreeContainer data-testid={"local-variables-node"}>
-                    <LocalVarsHeader>
-                        <HeaderText>Sub Mappings</HeaderText>
-                        {!isWithinQuery && (
-                            <Button
-                                appearance="icon"
-                                tooltip="Edit"
-                                onClick={onClick}
-                                data-testid={"edit-local-variables-btn"}
-                                sx={{ paddingRight: "8px" }}
-                            >
-                                <Icon name="editIcon" />
-                            </Button>
-                        )}
-                    </LocalVarsHeader>
-                    {letVarDeclItems}
-                </TreeContainer>
-            ) : !isWithinQuery && !searchValue && (
-                <Button
-                    className={classes.addLocalVariableButton}
-                    onClick={onClick}
-                    appearance="secondary"
-                >
-                     <Codicon name="add" />
-                    Add Sub Mapping
-                </Button>
-            )}
-        </>
-    );
-}
-
-const LocalVarsHeader = styled.div`
-    background: var(--vscode-editorWidget-background);
-    width: 100%;
-    line-height: 35px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    cursor: default;
-`;
-
-const HeaderText = styled.span`
-    margin-left: 10px;
-    min-width: 280px;
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--vscode-inputOption-activeForeground)
-`;
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetExpression/LetVarDeclItemWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetExpression/LetVarDeclItemWidget.tsx
deleted file mode 100644
index 501cf565ac5..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetExpression/LetVarDeclItemWidget.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React, { useState } from "react";
-
-import { Button, Codicon, TruncatedLabel } from "@wso2/ui-toolkit";
-import { DiagramEngine } from '@projectstorm/react-diagrams';
-import { PrimitiveBalType, TypeField } from "@wso2/ballerina-core";
-import { LetVarDecl, STKindChecker } from "@wso2/syntax-tree";
-
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { ViewOption } from "../../../DataMapper/DataMapper";
-import { isGoToQueryWithinLetExprSupported } from "../../../DataMapper/utils";
-import { DataMapperPortWidget, PortState, RecordFieldPortModel } from '../../Port';
-import { getTypeName } from "../../utils/dm-utils";
-import { RecordFieldTreeItemWidget } from "../commons/RecordTypeTreeWidget/RecordFieldTreeItemWidget";
-import { OutputSearchHighlight } from "../commons/Search";
-import { TreeBody, TreeHeader } from '../commons/Tree/Tree';
-import { useIONodesStyles } from "../../../styles";
-
-export interface LetVarDeclItemProps {
-    id: string; // this will be the root ID used to prepend for UUIDs of nested fields
-    typeDesc: TypeField;
-    engine: DiagramEngine;
-    declaration: LetVarDecl;
-    context: IDataMapperContext;
-    getPort: (portId: string) => RecordFieldPortModel;
-    handleCollapse: (portName: string, isExpanded?: boolean) => void;
-    valueLabel?: string;
-}
-
-export function LetVarDeclItemWidget(props: LetVarDeclItemProps) {
-    const { engine, typeDesc, id, declaration, context, getPort, handleCollapse, valueLabel } = props;
-    const classes = useIONodesStyles();
-
-    const [ portState, setPortState ] = useState<PortState>(PortState.Unselected);
-    const [isHovered, setIsHovered] = useState(false);
-
-    const typeName = getTypeName(typeDesc);
-    const portOut = getPort(`${id}.OUT`);
-    const expanded = !(portOut && portOut.collapsed);
-    const isRecord = typeDesc.typeName === PrimitiveBalType.Record;
-    const isQueryExpr = STKindChecker.isQueryExpression(declaration.expression);
-    const hasFields = !!typeDesc?.fields?.length;
-
-    const label = (
-        <TruncatedLabel style={{ marginRight: "auto" }}>
-            <span style={{ marginRight: "auto" }} data-testid={`local-var-widget-label-${id}`}>
-                <span className={classes.valueLabel}>
-                    <OutputSearchHighlight>{valueLabel ? valueLabel : id}</OutputSearchHighlight>
-                    {typeName && ":"}
-                </span>
-                {typeName && (
-                    <span className={classes.inputTypeLabel}>
-                        {typeName !== `$CompilationError$` ? typeName : 'var'}
-                    </span>
-                )}
-            </span>
-        </TruncatedLabel>
-    );
-
-    const handleExpand = () => {
-        handleCollapse(id, !expanded);
-    };
-
-    const onMouseEnter = () => {
-        setIsHovered(true);
-    };
-
-    const onMouseLeave = () => {
-        setIsHovered(false);
-    };
-
-    const onClickOnExpand = () => {
-        context.changeSelection(ViewOption.EXPAND,
-            {
-                ...context.selection,
-                selectedST: {
-                    stNode: declaration,
-                    fieldPath: `LetExpr.${valueLabel ? valueLabel : id}`
-                }
-            });
-    };
-
-    const handlePortState = (state: PortState) => {
-        setPortState(state)
-    };
-
-    return (
-        <>
-            <TreeHeader
-                id={"recordfield-" + id}
-                isSelected={portState !== PortState.Unselected}
-                onMouseEnter={onMouseEnter}
-                onMouseLeave={onMouseLeave}
-            >
-                <span className={classes.label}>
-                    {isRecord && hasFields && (
-                        <Button
-                            id={"expand-or-collapse-" + id}
-                            appearance="icon"
-                            tooltip="Expand/Collapse"
-                            onClick={handleExpand}
-                            data-testid={`${id}-expand-icon-local-var-node`}
-                        >
-                            {expanded ? <Codicon name="chevron-right" /> : <Codicon name="chevron-down" />}
-                        </Button>
-                    )}
-                    {label}
-                    {isQueryExpr && isGoToQueryWithinLetExprSupported(context.ballerinaVersion) && (
-                        <Button
-                            appearance="icon"
-                            tooltip="Map elements within sub-mapping"
-                            className={classes.gotoExprIcon}
-                            onClick={onClickOnExpand}
-                        >
-                            <Codicon name="export" />
-                        </Button>
-                    )}
-                </span>
-                <span className={classes.outPort}>
-                    {portOut && (
-                        <DataMapperPortWidget
-                            engine={engine}
-                            port={portOut}
-                            dataTestId={`local-variable-port-${portOut.getName()}`}
-                        />
-                    )}
-                </span>
-            </TreeHeader>
-            {
-                expanded && isRecord && hasFields && (
-                    <TreeBody>
-                        {typeDesc.fields.map((field, index) => {
-                            return (
-                                <RecordFieldTreeItemWidget
-                                    key={index}
-                                    engine={engine}
-                                    field={field}
-                                    getPort={getPort}
-                                    parentId={id}
-                                    handleCollapse={handleCollapse}
-                                    treeDepth={0}
-                                    hasHoveredParent={isHovered}
-                                />
-                            );
-                        })}
-                    </TreeBody>
-                )
-            }
-        </>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetExpression/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetExpression/index.ts
deleted file mode 100644
index c4d85980831..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LetExpression/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-export * from "./LetExpressionNode";
-export * from "./LetExpressionNodeFactory";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LinkConnector/LinkConnectorNode.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LinkConnector/LinkConnectorNode.ts
deleted file mode 100644
index c1624bfe39f..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LinkConnector/LinkConnectorNode.ts
+++ /dev/null
@@ -1,353 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { PrimitiveBalType, STModification } from "@wso2/ballerina-core";
-import {
-    FieldAccess,
-    NodePosition,
-    OptionalFieldAccess,
-    SimpleNameReference,
-    STKindChecker,
-    STNode,
-    traversNode
-} from "@wso2/syntax-tree";
-import md5 from "blueimp-md5";
-import { Diagnostic } from "vscode-languageserver-types";
-
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { isPositionsEquals } from "../../../../utils/st-utils";
-import { DataMapperLinkModel } from "../../Link";
-import { IntermediatePortModel, RecordFieldPortModel } from "../../Port";
-import {
-    LIST_CONSTRUCTOR_TARGET_PORT_PREFIX,
-    OFFSETS, PRIMITIVE_TYPE_TARGET_PORT_PREFIX
-} from "../../utils/constants";
-import {
-    getDefaultValue,
-    getInputNodeExpr,
-    getInputPortsForExpr,
-    getOutputPortForField,
-    getTargetPortPrefix
-} from "../../utils/dm-utils";
-import { FnDefInfo } from "../../utils/fn-definition-store";
-import { filterDiagnostics } from "../../utils/ls-utils";
-import { LinkDeletingVisitor } from "../../visitors/LinkDeletingVistior";
-import { DataMapperNodeModel } from "../commons/DataMapperNode";
-import { ListConstructorNode } from "../ListConstructor";
-import { MappingConstructorNode } from "../MappingConstructor";
-import { PrimitiveTypeNode } from "../PrimitiveType";
-import { UnionTypeNode } from "../UnionType";
-import { ExpressionLabelModel } from "../../Label";
-import { NodeFindingVisitorByPosition } from "../../visitors/NodeFindingVisitorByPosition";
-
-export const LINK_CONNECTOR_NODE_TYPE = "link-connector-node";
-const NODE_ID = "link-connector-node";
-
-export class LinkConnectorNode extends DataMapperNodeModel {
-
-    public sourcePorts: RecordFieldPortModel[] = [];
-    public sourceValues:{[key: string]: STNode[]} = {};
-    public targetMappedPort: RecordFieldPortModel;
-    public targetPort: RecordFieldPortModel;
-
-    public inPort: IntermediatePortModel;
-    public outPort: IntermediatePortModel;
-
-    public value: string;
-    public diagnostics: Diagnostic[];
-    public hidden: boolean;
-    public hasScreenWidthChanged: boolean;
-
-    constructor(
-        public context: IDataMapperContext,
-        public valueNode: STNode,
-        public editorLabel: string,
-        public parentNode: STNode,
-        public fieldAccessNodes: (FieldAccess | OptionalFieldAccess | SimpleNameReference)[],
-        public fields: STNode[],
-        public fnDefForFnCall?: FnDefInfo,
-        public isPrimitiveTypeArrayElement?: boolean) {
-        super(
-            NODE_ID,
-            context,
-            LINK_CONNECTOR_NODE_TYPE
-        );
-        if (STKindChecker.isSpecificField(valueNode)) {
-            this.value = valueNode.valueExpr ? valueNode.valueExpr.source.trim() : '';
-            this.diagnostics = filterDiagnostics(this.context.diagnostics, valueNode.valueExpr.position as NodePosition);
-        } else {
-            this.value = valueNode.value ? (valueNode.value as string).trim()  : valueNode.source.trim();
-            this.diagnostics = filterDiagnostics(this.context.diagnostics, valueNode.position as NodePosition);
-        }
-    }
-
-    initPorts(): void {
-        this.sourcePorts = [];
-        this.sourceValues = {};
-        this.targetMappedPort = undefined;
-        this.inPort = new IntermediatePortModel(
-            md5(JSON.stringify(this.valueNode.position) + "IN")
-            , "IN"
-        );
-        this.addPort(this.inPort);
-        this.outPort = new IntermediatePortModel(
-            md5(JSON.stringify(this.valueNode.position) + "OUT")
-            , "OUT"
-        );
-        this.addPort(this.outPort);
-
-        this.fieldAccessNodes.forEach((field) => {
-            const inputNode = getInputNodeExpr(field, this);
-            if (inputNode) {
-                const inputPort = getInputPortsForExpr(inputNode, field);
-                if (inputPort) {
-                    if (!this.sourcePorts.some(port => port.getID() === inputPort.getID())) {
-                        this.sourcePorts.push(inputPort);
-                        this.sourceValues[inputPort.getID()] = [field];
-                    } else {
-                        this.sourceValues[inputPort.getID()].push(field);
-                    }
-                }
-            }
-        })
-
-        if (this.outPort) {
-            this.getModel().getNodes().map((node) => {
-                if (node instanceof MappingConstructorNode
-                    || node instanceof PrimitiveTypeNode
-                    || node instanceof ListConstructorNode
-                    || node instanceof UnionTypeNode)
-                {
-                    const targetPortPrefix = getTargetPortPrefix(node);
-                    if (STKindChecker.isFunctionDefinition(this.parentNode)
-                        || STKindChecker.isQueryExpression(this.parentNode)
-                        || STKindChecker.isSpecificField(this.parentNode)
-                        || STKindChecker.isBracedExpression(this.parentNode))
-                    {
-                        const typeName = targetPortPrefix === PRIMITIVE_TYPE_TARGET_PORT_PREFIX
-                            ? node.recordField.type.typeName
-                            : (node as MappingConstructorNode | ListConstructorNode | UnionTypeNode)?.rootName
-                        this.targetPort = node.getPort(
-                            `${targetPortPrefix}${typeName ? `.${typeName}` : ''}.IN`
-                        ) as RecordFieldPortModel;
-                        this.targetMappedPort = this.targetPort;
-                    } else {
-                        const rootName = targetPortPrefix === LIST_CONSTRUCTOR_TARGET_PORT_PREFIX
-                            ? (node as ListConstructorNode | UnionTypeNode).rootName
-                            : undefined;
-                        [this.targetPort, this.targetMappedPort] = getOutputPortForField(this.fields,
-                            node.recordField, targetPortPrefix,
-                            (portId: string) =>  node.getPort(portId) as RecordFieldPortModel,
-                            rootName);
-                        this.hidden = this.targetMappedPort?.portName !== this.targetPort?.portName;
-                    }
-                }
-            });
-        }
-    }
-
-    initLinks(): void {
-        if (this.hasScreenWidthChanged) {
-            return;
-        }
-        if (!this.hidden) {
-            this.sourcePorts.forEach((sourcePort) => {
-                const inPort = this.inPort;
-
-                const lm = new DataMapperLinkModel(undefined, undefined, true);
-                if (sourcePort) {
-                    lm.setTargetPort(this.inPort);
-                    lm.setSourcePort(sourcePort);
-                    sourcePort.addLinkedPort(this.inPort);
-                    sourcePort.addLinkedPort(this.targetMappedPort);
-                    const targetPortExpr = this.targetMappedPort?.editableRecordField?.value;
-                    const isSubLinkLabel = targetPortExpr && STKindChecker.isSpecificField(targetPortExpr)
-                        && !STKindChecker.isConditionalExpression(targetPortExpr.valueExpr);
-
-                    if (this.sourcePorts.length > 1 && isSubLinkLabel) {
-                        lm.addLabel(new ExpressionLabelModel({
-                            link: lm,
-                            value: undefined,
-                            context: undefined,
-                            isSubLinkLabel: true,
-                            deleteLink: () => this.deleteSubLink(sourcePort.getID())
-                        }));
-                    }
-
-                    lm.registerListener({
-                        selectionChanged(event) {
-                            if (event.isSelected) {
-                                inPort.fireEvent({}, "link-selected");
-                                sourcePort.fireEvent({}, "link-selected");
-                            } else {
-                                inPort.fireEvent({}, "link-unselected");
-                                sourcePort.fireEvent({}, "link-unselected");
-                            }
-                        },
-                    })
-                    this.getModel().addAll(lm);
-                }
-            })
-
-            if (this.targetMappedPort) {
-                const outPort = this.outPort;
-                const targetPort = this.targetMappedPort;
-
-                const lm = new DataMapperLinkModel(undefined, this.diagnostics, true);
-                lm.setTargetPort(this.targetMappedPort);
-                lm.setSourcePort(this.outPort);
-
-                lm.registerListener({
-                    selectionChanged(event) {
-                        if (event.isSelected) {
-                            outPort.fireEvent({}, "link-selected");
-                            targetPort.fireEvent({}, "link-selected");
-                        } else {
-                            outPort.fireEvent({}, "link-unselected");
-                            targetPort.fireEvent({}, "link-unselected");
-                        }
-                    },
-                })
-
-                if (!this.editorLabel) {
-                    this.editorLabel = this.targetMappedPort.fieldFQN.split('.').pop();
-                }
-                this.getModel().addAll(lm);
-            }
-        } else {
-            if (this.targetMappedPort) {
-                this.sourcePorts.forEach((sourcePort) => {
-                    const inPort = this.targetMappedPort;
-
-                    const lm = new DataMapperLinkModel(undefined, this.diagnostics, true);
-                    lm.setTargetPort(this.targetMappedPort);
-                    lm.setSourcePort(sourcePort);
-                    sourcePort.addLinkedPort(this.targetMappedPort);
-
-                    lm.registerListener({
-                        selectionChanged(event) {
-                            if (event.isSelected) {
-                                inPort.fireEvent({}, "link-selected");
-                                sourcePort.fireEvent({}, "link-selected");
-                            } else {
-                                inPort.fireEvent({}, "link-unselected");
-                                sourcePort.fireEvent({}, "link-unselected");
-                            }
-                        },
-                    })
-                    this.getModel().addAll(lm);
-                    if (!this.editorLabel) {
-                        this.editorLabel = this.targetMappedPort.fieldFQN.split('.').pop();
-                    }
-                })
-            }
-        }
-    }
-
-    updateSource(): void {
-        const targetPosition = STKindChecker.isSpecificField(this.valueNode)
-            ? this.valueNode.valueExpr.position as NodePosition
-            : this.valueNode.position as NodePosition;
-        const modifications = [
-            {
-                type: "INSERT",
-                config: {
-                    "STATEMENT": this.value,
-                },
-                ...targetPosition
-            }
-        ];
-        void this.context.applyModifications(modifications);
-    }
-
-    public updatePosition() {
-        if (this.targetMappedPort) {
-            const position = this.targetMappedPort.getPosition()
-            this.setPosition(this.hasError() ? OFFSETS.LINK_CONNECTOR_NODE_WITH_ERROR.X : OFFSETS.LINK_CONNECTOR_NODE.X, position.y - 2)
-        }
-    }
-
-    public hasError(): boolean {
-        return this.diagnostics.length > 0;
-    }
-
-    public deleteLink(): void {
-        const targetField = this.targetPort.field;
-        let modifications: STModification[];
-        const selectedST = this.context.selection.selectedST.stNode;
-        const exprFuncBodyPosition: NodePosition = STKindChecker.isFunctionDefinition(selectedST)
-            && STKindChecker.isExpressionFunctionBody(selectedST.functionBody)
-            && selectedST.functionBody.expression.position;
-        if ((!targetField?.name && targetField?.typeName !== PrimitiveBalType.Array
-            && targetField?.typeName !== PrimitiveBalType.Record)
-            || (isPositionsEquals(exprFuncBodyPosition, this.valueNode.position)))
-        {
-            let deletePosition = this.valueNode.position;
-            if (STKindChecker.isQueryExpression(this.valueNode)) {
-                const selectClause = this.valueNode?.selectClause || this.valueNode?.resultClause;
-                deletePosition = selectClause.expression?.position;
-            }
-            // Fallback to the default value if the target is a primitive type element
-            modifications = [{
-                type: "INSERT",
-                config: {
-                    "STATEMENT": getDefaultValue(targetField?.typeName)
-                },
-                ...deletePosition
-            }];
-        } else {
-            const linkDeleteVisitor = new LinkDeletingVisitor(this.valueNode.position as NodePosition, this.parentNode);
-            traversNode(this.context.selection.selectedST.stNode, linkDeleteVisitor);
-            const nodePositionsToDelete = linkDeleteVisitor.getPositionToDelete();
-
-            modifications = [{
-                type: "DELETE",
-                ...nodePositionsToDelete
-            }];
-        }
-
-        void this.context.applyModifications(modifications);
-    }
-
-    public async deleteSubLink(sourcePortId: string): Promise<void> {
-
-        const subLinkSTNodes = this.sourceValues[sourcePortId];
-
-        for (let subLinkSTNode of subLinkSTNodes) {
-
-            const nodeFindingVisitor = new NodeFindingVisitorByPosition(subLinkSTNode.position);
-            traversNode(this.valueNode, nodeFindingVisitor);
-            let subLinkValue  = nodeFindingVisitor.getNode();
-
-            const linkDeleteVisitor = new LinkDeletingVisitor(subLinkValue.position as NodePosition, this.parentNode);
-            traversNode(this.context.selection.selectedST.stNode, linkDeleteVisitor);
-            const nodePositionsToDelete = linkDeleteVisitor.getPositionToDelete();
-
-            let modifications: STModification[] = [{
-                type: "DELETE",
-                ...nodePositionsToDelete
-            }];
-
-            void this.context.applyModifications(modifications);
-        }
-
-    }
-
-    public setHasScreenWidthChanged(hasScreenWidthChanged: boolean): void {
-        this.hasScreenWidthChanged = hasScreenWidthChanged;
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LinkConnector/LinkConnectorNodeFactory.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LinkConnector/LinkConnectorNodeFactory.tsx
deleted file mode 100644
index 068fc872587..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LinkConnector/LinkConnectorNodeFactory.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from 'react';
-
-import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
-import { DiagramEngine } from '@projectstorm/react-diagrams-core';
-import "reflect-metadata";
-import { container, injectable, singleton } from "tsyringe";
-
-import { IDataMapperNodeFactory } from '../commons/DataMapperNode';
-
-import { LinkConnectorNode, LINK_CONNECTOR_NODE_TYPE } from './LinkConnectorNode';
-import { LinkConnectorNodeWidget } from './LinkConnectorNodeWidget';
-
-@injectable()
-@singleton()
-export class LinkConnectorNodeFactory extends AbstractReactFactory<LinkConnectorNode, DiagramEngine> implements IDataMapperNodeFactory {
-	constructor() {
-		super(LINK_CONNECTOR_NODE_TYPE);
-	}
-
-	generateReactWidget(event: { model: LinkConnectorNode; }): JSX.Element {
-		const inputPortHasLinks = Object.keys(event.model.inPort.links).length;
-		const outputPortHasLinks = Object.keys(event.model.outPort.links).length;
-		if (inputPortHasLinks && outputPortHasLinks) {
-			return <LinkConnectorNodeWidget engine={this.engine} node={event.model} />;
-		}
-		return null;
-	}
-
-	generateModel(): LinkConnectorNode {
-		return undefined;
-	}
-}
-
-container.register("NodeFactory",  {useClass: LinkConnectorNodeFactory});
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LinkConnector/LinkConnectorNodeWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LinkConnector/LinkConnectorNodeWidget.tsx
deleted file mode 100644
index ea06525d5a3..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LinkConnector/LinkConnectorNodeWidget.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import * as React from 'react';
-
-import { DiagramEngine } from '@projectstorm/react-diagrams';
-import { HistoryEntry, MACHINE_VIEW } from "@wso2/ballerina-core";
-import { FunctionCall, NodePosition, SpecificField, STKindChecker } from "@wso2/syntax-tree";
-import { Button, Codicon, Icon, ProgressRing, Tooltip } from '@wso2/ui-toolkit';
-import classnames from "classnames";
-
-import { DiagnosticWidget } from '../../Diagnostic/Diagnostic';
-import { DataMapperPortWidget, RecordFieldPortModel } from '../../Port';
-import { genArrayElementAccessExpr, getCollectClauseActions, getFieldLabel, getMappedFnNames, hasFieldAccessExpression } from '../../utils/dm-utils';
-
-import { LinkConnectorNode } from './LinkConnectorNode';
-import { useRpcContext } from '@wso2/ballerina-rpc-client';
-import { QueryExprMappingType } from '../QueryExpression';
-import { CodeActionWidget } from '../../CodeAction/CodeAction';
-import { AggregationFunctions } from '../../Label';
-import { useIntermediateNodeStyles } from '../../../styles';
-
-export interface LinkConnectorNodeWidgetProps {
-    node: LinkConnectorNode;
-    engine: DiagramEngine;
-}
-
-export function LinkConnectorNodeWidget(props: LinkConnectorNodeWidgetProps) {
-    const { node, engine } = props;
-    const { context } = node;
-    const { rpcClient } = useRpcContext();
-
-    const classes = useIntermediateNodeStyles();
-    const hasError = node.hasError();
-    const diagnostic = hasError ? node.diagnostics[0] : null;
-    const fnDef = node.fnDefForFnCall;
-    const hasFieldAccessExpr = hasFieldAccessExpression(node.valueNode);
-    const connectedViaCollectClause = context?.selection.selectedST?.mappingType
-        && context.selection.selectedST.mappingType === QueryExprMappingType.A2SWithCollect;
-
-    const {
-        enableStatementEditor,
-        updateSelectedComponent,
-        referenceManager: {
-            handleCurrentReferences
-        }
-    } = context;
-    const [deleteInProgress, setDeleteInProgress] = React.useState(false);
-
-    const onClickEdit = () => {
-        const valueNode = node.valueNode;
-        const currentReferences = node.sourcePorts.map((port) => port.fieldFQN);
-        handleCurrentReferences(currentReferences)
-        if (STKindChecker.isSpecificField(valueNode)) {
-            enableStatementEditor({
-                valuePosition: valueNode.valueExpr.position as NodePosition,
-                value: valueNode.valueExpr.source,
-                label: (node.isPrimitiveTypeArrayElement ? getFieldLabel(node.targetPort.parentId) : node.editorLabel)
-            });
-        } else if (STKindChecker.isBinaryExpression(valueNode)) {
-            enableStatementEditor({
-                valuePosition: valueNode.position as NodePosition,
-                value: valueNode.source,
-                label: (node.isPrimitiveTypeArrayElement ? getFieldLabel(node.targetPort.portName) : node.editorLabel)
-            });
-        } else {
-            context.enableStatementEditor({
-                valuePosition: valueNode.position as NodePosition,
-                value: valueNode.source,
-                label: "Expression"
-            });
-        }
-    };
-
-    const onClickDelete = () => {
-        setDeleteInProgress(true);
-        if (node.deleteLink) {
-            node.deleteLink();
-        }
-    };
-
-    const onClickOnGoToDef = async (evt: React.MouseEvent) => {
-        evt.stopPropagation();
-        const {fnDefPosition, fileUri, fnName} = fnDef;
-        const fnDefFilePath = fileUri.replace(/^file:\/\//, "");
-        const history = await rpcClient.getVisualizerRpcClient().getHistory();
-        const entry: HistoryEntry = {
-            location: {
-                documentUri: fnDefFilePath,
-                position: fnDefPosition,
-                view: MACHINE_VIEW.DataMapper,
-                identifier: fnName
-            },
-            dataMapperDepth: history[history.length - 1].dataMapperDepth + 1
-        }
-        updateSelectedComponent(entry);
-    };
-
-    let aggrFnConfigurations: React.ReactNode = null;
-    if (connectedViaCollectClause) {
-        const target = node.targetMappedPort;
-        const fnNames = getMappedFnNames(target);
-        if (fnNames.length === 1 && AggregationFunctions.includes(fnNames[0])) {
-            const mappedExpr = (target as RecordFieldPortModel)?.editableRecordField?.value;
-            const actions = getCollectClauseActions(fnNames[0], mappedExpr as FunctionCall, context.applyModifications);
-            aggrFnConfigurations = (
-                <CodeActionWidget
-                    context={context}
-                    additionalActions={actions}
-                    isConfiguration={true}
-                    btnSx={{ margin: "0 2px" }}
-                />
-            );
-        }
-        // TODO: Add support for multiple aggregation functions
-    }
-
-    const loadingScreen = (
-        <ProgressRing sx={{ height: '16px', width: '16px' }} />
-    );
-
-    return (!node.hidden && (
-        <div className={classes.root} data-testid={`link-connector-node-${node?.value}`}>
-            <div className={classes.header}>
-                <DataMapperPortWidget engine={engine} port={node.inPort} dataTestId={`link-connector-node-${node?.value}-input`}/>
-                <Tooltip
-                    content={fnDef ? "Function Call" : "Multi-Input Expression"}
-                    position="bottom-end"
-                >
-                    {fnDef ? (
-                        <Icon name="function-icon" iconSx={{ fontSize: "15px", color: "var(--vscode-input-placeholderForeground)" }} />) : (
-                        <Icon name="explicit-outlined" sx={{ height: "20px", width: "20px" }} iconSx={{ fontSize: "20px", color: "var(--vscode-input-placeholderForeground)" }} />
-                    )}
-                </Tooltip>
-                {fnDef && (
-                    <Button
-                        appearance="icon"
-                        onClick={onClickOnGoToDef}
-                        data-testid={`go-to-tnf-fn-${node?.value}`}
-                    >
-                        <Codicon name="chevron-right" iconSx={{ color: "var(--vscode-input-placeholderForeground)" }} />
-                    </Button>
-                )}
-                {aggrFnConfigurations !== null && aggrFnConfigurations}
-                {hasFieldAccessExpr ? (
-                    <Button
-                        appearance="icon"
-                        onClick={onClickEdit}
-                        data-testid={`link-connector-indexing-${node?.value}`}
-                        tooltip='indexing'
-                    >
-                        {genArrayElementAccessExpr(node.valueNode)}
-                    </Button>
-                ) : (
-                    <Button
-                        appearance="icon"
-                        onClick={onClickEdit}
-                        data-testid={`link-connector-edit-${node?.value}`}
-                    >
-                        <Codicon name="code" iconSx={{ color: "var(--vscode-input-placeholderForeground)" }} />
-                    </Button>
-                )}
-                {deleteInProgress ? (
-                    <div className={classnames(classes.element, classes.loadingContainer)}>
-                        {loadingScreen}
-                    </div>
-                ) : (
-                    <Button
-                        appearance="icon"
-                        onClick={onClickDelete} data-testid={`link-connector-delete-${node?.value}`}
-                    >
-                        <Codicon name="trash" iconSx={{ color: "var(--vscode-errorForeground)" }} />
-                    </Button>
-                )}
-                { diagnostic && (
-                    <DiagnosticWidget
-                        diagnostic={diagnostic}
-                        value={node.valueNode.source}
-                        onClick={onClickEdit}
-                        btnSx={{ margin: "0 2px" }}
-                    />
-                )}
-                <DataMapperPortWidget engine={engine} port={node.outPort} dataTestId={`link-connector-node-${node?.value}-output`}/>
-            </div>
-        </div>
-        )
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LinkConnector/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LinkConnector/index.ts
deleted file mode 100644
index 6e127d75f17..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/LinkConnector/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./LinkConnectorNode";
-export * from "./LinkConnectorNodeFactory";
-export * from "./LinkConnectorNodeWidget";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ListConstructor/ListConstructorNode.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ListConstructor/ListConstructorNode.ts
deleted file mode 100644
index b893539f3df..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ListConstructor/ListConstructorNode.ts
+++ /dev/null
@@ -1,242 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { Point } from "@projectstorm/geometry";
-import { PrimitiveBalType, STModification, TypeField } from "@wso2/ballerina-core";
-import {
-    ExpressionFunctionBody,
-    IdentifierToken,
-    QueryExpression,
-    SelectClause,
-    STKindChecker,
-    STNode,
-    traversNode
-} from "@wso2/syntax-tree";
-
-import { useDMSearchStore } from "../../../../store/store";
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { ExpressionLabelModel } from "../../Label";
-import { DataMapperLinkModel } from "../../Link";
-import { EditableRecordField } from "../../Mappings/EditableRecordField";
-import { FieldAccessToSpecificFied } from "../../Mappings/FieldAccessToSpecificFied";
-import { RecordFieldPortModel } from "../../Port";
-import { LIST_CONSTRUCTOR_TARGET_PORT_PREFIX } from "../../utils/constants";
-import {
-    getBalRecFieldName,
-    getDefaultValue,
-    getDiagnosticsPosition,
-    getFilteredMappings,
-    getFilteredUnionOutputTypes,
-    getInnermostExpressionBody,
-    getInputNodeExpr,
-    getInputPortsForExpr,
-    getOutputPortForField,
-    getSearchFilteredOutput,
-    getTypeName,
-    getTypeOfValue,
-    hasNoMatchFound,
-    isIndexedExpression,
-    isSelectClauseQueryExpr
-} from "../../utils/dm-utils";
-import { filterDiagnostics } from "../../utils/ls-utils";
-import { enrichAndProcessType } from "../../utils/type-utils";
-import { LinkDeletingVisitor } from "../../visitors/LinkDeletingVistior";
-import { DataMapperNodeModel, TypeDescriptor } from "../commons/DataMapperNode";
-
-export const LIST_CONSTRUCTOR_NODE_TYPE = "data-mapper-node-list-constructor";
-const NODE_ID = "list-constructor-node";
-
-export class ListConstructorNode extends DataMapperNodeModel {
-
-    public recordField: EditableRecordField;
-    public typeName: string;
-    public rootName: string;
-    public hasNoMatchingFields: boolean;
-    public innermostExpr: STNode;
-    public x: number;
-    public y: number;
-    originalTypeDef: TypeField;
-
-    constructor(
-        public context: IDataMapperContext,
-        public value: ExpressionFunctionBody | SelectClause,
-        public typeIdentifier: TypeDescriptor | IdentifierToken,
-        public typeDef: TypeField,
-        public queryExpr?: QueryExpression) {
-        super(
-            NODE_ID,
-            context,
-            LIST_CONSTRUCTOR_NODE_TYPE
-        );
-        this.innermostExpr = getInnermostExpressionBody(this.queryExpr
-            ? (this.queryExpr?.selectClause || this.queryExpr?.resultClause).expression
-            : this.value.expression
-        );
-        this.originalTypeDef = this.typeDef;
-    }
-
-    async initPorts() {
-        this.typeDef = getSearchFilteredOutput(this.originalTypeDef);
-
-        if (this.typeDef) {
-            const isSelectClause = STKindChecker.isSelectClause(this.value);
-            this.rootName = this.typeDef?.name ? getBalRecFieldName(this.typeDef.name) : this.typeDef.typeName;
-            if (isSelectClause){
-                this.rootName = this.typeIdentifier.value || this.typeIdentifier.source;
-            }
-            if (this.typeDef.typeName === PrimitiveBalType.Union) {
-                this.typeName = getTypeName(this.typeDef);
-                const acceptedMembers = getFilteredUnionOutputTypes(this.typeDef);
-                if (acceptedMembers.length === 1) {
-                    this.typeDef = acceptedMembers[0];
-                }
-            }
-            const [valueEnrichedType, type] = enrichAndProcessType(this.typeDef, this.innermostExpr,
-                this.context.selection.selectedST.stNode);
-            this.typeDef = type;
-            this.hasNoMatchingFields = hasNoMatchFound(this.originalTypeDef, valueEnrichedType);
-            this.typeName = !this.typeName ? getTypeName(valueEnrichedType.type) : this.typeName;
-            this.recordField = valueEnrichedType;
-            if (this.typeDef.typeName === PrimitiveBalType.Union) {
-                this.rootName = valueEnrichedType?.type?.typeName;
-            }
-            const parentPort = this.addPortsForHeaderField(this.typeDef, this.rootName, "IN",
-                LIST_CONSTRUCTOR_TARGET_PORT_PREFIX, this.context.collapsedFields, isSelectClause, this.recordField);
-            if (valueEnrichedType.type.typeName === PrimitiveBalType.Array) {
-                if (this.recordField?.elements && this.recordField.elements.length > 0) {
-                    this.recordField.elements.forEach((field, index) => {
-                        this.addPortsForOutputRecordField(field.member, "IN", this.rootName, index,
-                            LIST_CONSTRUCTOR_TARGET_PORT_PREFIX, parentPort,
-                            this.context.collapsedFields, parentPort.collapsed);
-                    });
-                }
-            }
-        }
-    }
-
-    async initLinks() {
-        const searchValue = useDMSearchStore.getState().outputSearch;
-        const mappings = this.genMappings(this.value.expression);
-        const filteredMappings = getFilteredMappings(mappings, searchValue);
-        this.createLinks(filteredMappings);
-    }
-
-    private createLinks(mappings: FieldAccessToSpecificFied[]) {
-        mappings.forEach((mapping) => {
-            const { fields, value, otherVal } = mapping;
-            const field = fields[fields.length - 1];
-            if (!value || !value.source || (otherVal && isIndexedExpression(otherVal))) {
-                // Unsupported mapping
-                return;
-            }
-            const inputNode = getInputNodeExpr(value, this);
-            let inPort: RecordFieldPortModel;
-            if (inputNode) {
-                inPort = getInputPortsForExpr(inputNode, value);
-            }
-            let outPort: RecordFieldPortModel;
-            let mappedOutPort: RecordFieldPortModel;
-            const body = getInnermostExpressionBody(this.recordField.value);
-            if (this.recordField.type.typeName === PrimitiveBalType.Array
-                && this.recordField?.value
-                && !STKindChecker.isListConstructor(body)
-            ) {
-                outPort = this.getPort(`${LIST_CONSTRUCTOR_TARGET_PORT_PREFIX}.${this.rootName}.IN`) as RecordFieldPortModel;
-                mappedOutPort = outPort;
-            } else {
-                [outPort, mappedOutPort] = getOutputPortForField(fields,
-                    this.recordField,
-                    LIST_CONSTRUCTOR_TARGET_PORT_PREFIX,
-                    (portId: string) =>  this.getPort(portId) as RecordFieldPortModel,
-                    this.rootName);
-            }
-            if (inPort && mappedOutPort) {
-                const diagnostics = filterDiagnostics(this.context.diagnostics,
-                    getDiagnosticsPosition(mappedOutPort.editableRecordField, mapping));
-                const lm = new DataMapperLinkModel(value, diagnostics, true);
-                lm.addLabel(new ExpressionLabelModel({
-                    value: otherVal?.source || value.source,
-                    valueNode: otherVal || value,
-                    context: this.context,
-                    link: lm,
-                    field: STKindChecker.isSpecificField(field)
-                        ? field.valueExpr
-                        : field,
-                    editorLabel: STKindChecker.isSpecificField(field)
-                        ? field.fieldName.value as string
-                        : `${outPort.fieldFQN.split('.').pop()}[${outPort.index}]`,
-                    deleteLink: () => this.deleteField(field, true)
-                }));
-                lm.setTargetPort(mappedOutPort);
-                lm.setSourcePort(inPort);
-                inPort.addLinkedPort(mappedOutPort);
-                lm.registerListener({
-                    selectionChanged(event) {
-                        if (event.isSelected) {
-                            inPort.fireEvent({}, "link-selected");
-                            mappedOutPort.fireEvent({}, "link-selected");
-                        } else {
-                            inPort.fireEvent({}, "link-unselected");
-                            mappedOutPort.fireEvent({}, "link-unselected");
-                        }
-                    },
-                })
-                this.getModel().addAll(lm);
-            }
-        });
-    }
-
-    async deleteField(field: STNode, keepDefaultVal?: boolean) {
-        let modifications: STModification[];
-        const typeOfValue = getTypeOfValue(this.recordField, field.position);
-        if (keepDefaultVal && !STKindChecker.isSpecificField(field)) {
-            modifications = [{
-                type: "INSERT",
-                config: {
-                    "STATEMENT": getDefaultValue(typeOfValue?.typeName)
-                },
-                ...field.position
-            }];
-        } else {
-            const linkDeleteVisitor = new LinkDeletingVisitor(field.position, this.value.expression);
-            traversNode(this.value.expression, linkDeleteVisitor);
-            const nodePositionsToDelete = linkDeleteVisitor.getPositionToDelete();
-            modifications = [{
-                type: "DELETE",
-                ...nodePositionsToDelete
-            }]
-        }
-
-        await this.context.applyModifications(modifications);
-    }
-
-    public updatePosition() {
-        this.setPosition(this.position.x, this.position.y);
-    }
-
-    setPosition(point: Point): void;
-    setPosition(x: number, y: number): void;
-    setPosition(x: unknown, y?: unknown): void {
-        if (typeof x === 'number' && typeof y === 'number') {
-            if (!this.x || !this.y) {
-                this.x = x;
-                this.y = y;
-            }
-            super.setPosition(x, y);
-        }
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ListConstructor/ListConstructorNodeFactory.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ListConstructor/ListConstructorNodeFactory.tsx
deleted file mode 100644
index 894624d02de..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ListConstructor/ListConstructorNodeFactory.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-lambda jsx-no-multiline-js
-import * as React from 'react';
-
-import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
-import { DiagramEngine } from '@projectstorm/react-diagrams-core';
-import { STKindChecker, STNode } from '@wso2/syntax-tree';
-import "reflect-metadata";
-import { container, injectable, singleton } from "tsyringe";
-
-import { RecordFieldPortModel } from '../../Port';
-import { FUNCTION_BODY_QUERY, LIST_CONSTRUCTOR_TARGET_PORT_PREFIX } from '../../utils/constants';
-import { ArrayTypeOutputWidget } from "../commons/DataManipulationWidget/ArrayTypeOutputWidget";
-import { IDataMapperNodeFactory } from '../commons/DataMapperNode';
-import { OutputSearchNoResultFound, SearchNoResultFoundKind } from "../commons/Search";
-
-import { ListConstructorNode, LIST_CONSTRUCTOR_NODE_TYPE } from './ListConstructorNode';
-
-@injectable()
-@singleton()
-export class ListConstructorNodeFactory extends AbstractReactFactory<ListConstructorNode, DiagramEngine> implements IDataMapperNodeFactory {
-	constructor() {
-		super(LIST_CONSTRUCTOR_NODE_TYPE);
-	}
-
-	generateReactWidget(event: { model: ListConstructorNode; }): JSX.Element {
-		let valueLabel;
-		if (STKindChecker.isSelectClause(event.model.value)
-			&& event.model.context.selection.selectedST.fieldPath !== FUNCTION_BODY_QUERY)
-		{
-			valueLabel = event.model.typeIdentifier.value || event.model.typeIdentifier.source;
-		}
-		return (
-			<>
-				{event.model.hasNoMatchingFields ? (
-					<OutputSearchNoResultFound kind={SearchNoResultFoundKind.OutputField} />
-				) : (
-					<ArrayTypeOutputWidget
-						id={`${LIST_CONSTRUCTOR_TARGET_PORT_PREFIX}${event.model.rootName ? `.${event.model.rootName}` : ''}`}
-						engine={this.engine}
-						field={event.model.recordField}
-						getPort={(portId: string) => event.model.getPort(portId) as RecordFieldPortModel}
-						context={event.model.context}
-						typeName={event.model.typeName}
-						valueLabel={valueLabel}
-						deleteField={(node: STNode) => event.model.deleteField(node)}
-					/>
-				)}
-			</>
-		);
-	}
-
-	generateModel(event: { initialConfig: any }): any {
-		return undefined;
-	}
-}
-container.register("NodeFactory", { useClass: ListConstructorNodeFactory });
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ListConstructor/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ListConstructor/index.ts
deleted file mode 100644
index ae9e8ed9ee7..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ListConstructor/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-export * from "./ListConstructorNodeFactory";
-export * from "./ListConstructorNode";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/MappingConstructor/MappingConstructorNode.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/MappingConstructor/MappingConstructorNode.ts
deleted file mode 100644
index bf71d5dc19c..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/MappingConstructor/MappingConstructorNode.ts
+++ /dev/null
@@ -1,255 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { Point } from "@projectstorm/geometry";
-import { PrimitiveBalType, STModification, TypeField } from "@wso2/ballerina-core";
-import {
-    ExpressionFunctionBody,
-    IdentifierToken,
-    NodePosition,
-    QueryExpression,
-    SelectClause,
-    STKindChecker,
-    STNode,
-    traversNode
-} from "@wso2/syntax-tree";
-
-import { useDMSearchStore } from "../../../../store/store";
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { ExpressionLabelModel } from "../../Label";
-import { DataMapperLinkModel } from "../../Link";
-import { EditableRecordField } from "../../Mappings/EditableRecordField";
-import { FieldAccessToSpecificFied } from "../../Mappings/FieldAccessToSpecificFied";
-import { RecordFieldPortModel } from "../../Port";
-import { MAPPING_CONSTRUCTOR_TARGET_PORT_PREFIX } from "../../utils/constants";
-import {
-    getBalRecFieldName,
-    getDefaultValue,
-    getDiagnosticsPosition,
-    getFilteredMappings,
-    getFilteredUnionOutputTypes,
-    getInnermostExpressionBody,
-    getInputNodeExpr,
-    getInputPortsForExpr,
-    getOutputPortForField,
-    getSearchFilteredOutput,
-    getTypeName,
-    getTypeOfValue,
-    hasNoMatchFound
-} from "../../utils/dm-utils";
-import { filterDiagnostics } from "../../utils/ls-utils";
-import { enrichAndProcessType } from "../../utils/type-utils";
-import { LinkDeletingVisitor } from "../../visitors/LinkDeletingVistior";
-import { DataMapperNodeModel, TypeDescriptor } from "../commons/DataMapperNode";
-
-export const MAPPING_CONSTRUCTOR_NODE_TYPE = "data-mapper-node-mapping-constructor";
-const NODE_ID = "mapping-constructor-node";
-
-export class MappingConstructorNode extends DataMapperNodeModel {
-
-    public recordField: EditableRecordField;
-    public typeName: string;
-    public rootName: string;
-    public mappings: FieldAccessToSpecificFied[];
-    public hasNoMatchingFields: boolean;
-    public innermostExpr: STNode;
-    public x: number;
-    public y: number;
-    originalTypeDef: TypeField;
-
-    constructor(
-        public context: IDataMapperContext,
-        public value: ExpressionFunctionBody | SelectClause,
-        public typeIdentifier: TypeDescriptor | IdentifierToken,
-        public typeDef: TypeField,
-        public queryExpr?: QueryExpression) {
-        super(
-            NODE_ID,
-            context,
-            MAPPING_CONSTRUCTOR_NODE_TYPE
-        );
-        this.innermostExpr = getInnermostExpressionBody(this.queryExpr
-            ? (this.queryExpr?.selectClause || this.queryExpr?.resultClause).expression
-            : this.value.expression
-        );
-        this.originalTypeDef = this.typeDef;
-    }
-
-    async initPorts() {
-        this.typeDef = getSearchFilteredOutput(this.originalTypeDef);
-
-        if (this.typeDef) {
-            const isSelectClause = STKindChecker.isSelectClause(this.value);
-            this.rootName = this.typeDef?.name && getBalRecFieldName(this.typeDef.name);
-            if (isSelectClause
-                && this.typeDef.typeName === PrimitiveBalType.Array
-                && this.typeDef?.memberType
-                && this.typeDef.memberType.typeName === PrimitiveBalType.Record) {
-                this.rootName = this.typeDef.memberType?.name;
-            }
-            if (this.typeDef.typeName === PrimitiveBalType.Union) {
-                this.typeName = getTypeName(this.typeDef);
-                const acceptedMembers = getFilteredUnionOutputTypes(this.typeDef);
-                if (acceptedMembers.length === 1) {
-                    this.typeDef = acceptedMembers[0];
-                    this.rootName = acceptedMembers[0]?.name;
-                }
-            }
-            const [valueEnrichedType, type] = enrichAndProcessType(this.typeDef, this.innermostExpr,
-                this.context.selection.selectedST.stNode);
-            this.typeDef = type;
-            this.hasNoMatchingFields = hasNoMatchFound(this.originalTypeDef, valueEnrichedType);
-            this.typeName = !this.typeName ? getTypeName(valueEnrichedType.type) : this.typeName;
-            const parentPort = this.addPortsForHeaderField(this.typeDef, this.rootName, "IN",
-                MAPPING_CONSTRUCTOR_TARGET_PORT_PREFIX, this.context.collapsedFields,
-                isSelectClause, valueEnrichedType);
-            if (valueEnrichedType.type.typeName === PrimitiveBalType.Record) {
-                this.recordField = valueEnrichedType;
-                if (this.recordField.childrenTypes.length) {
-                    this.recordField.childrenTypes.forEach((field) => {
-                        this.addPortsForOutputRecordField(field, "IN", this.rootName, undefined,
-                            MAPPING_CONSTRUCTOR_TARGET_PORT_PREFIX, parentPort,
-                            this.context.collapsedFields, parentPort.collapsed);
-                    });
-                }
-            } else if (valueEnrichedType.type.typeName === PrimitiveBalType.Array && isSelectClause) {
-                // valueEnrichedType only contains a single element as it is being used within the select clause in the query expression
-                this.recordField = valueEnrichedType.elements[0].member;
-                if (this.recordField.childrenTypes.length) {
-                    this.recordField.childrenTypes.forEach((field) => {
-                        this.addPortsForOutputRecordField(field, "IN", this.rootName, undefined,
-                            MAPPING_CONSTRUCTOR_TARGET_PORT_PREFIX, parentPort,
-                            this.context.collapsedFields, parentPort.collapsed, true);
-                    });
-                }
-            }
-        }
-    }
-
-    initLinks(): void {
-        const searchValue = useDMSearchStore.getState().outputSearch;
-        const mappings = this.genMappings(this.value.expression);
-        this.mappings = getFilteredMappings(mappings, searchValue);
-        this.createLinks(this.mappings);
-    }
-
-    private createLinks(mappings: FieldAccessToSpecificFied[]) {
-        mappings.forEach((mapping) => {
-            const { fields, value, otherVal } = mapping;
-            const field = fields[fields.length - 1];
-            if (!value || !value.source || (otherVal && STKindChecker.isIndexedExpression(otherVal))) {
-                // Unsupported mapping
-                return;
-            }
-            const inputNode = getInputNodeExpr(value, this);
-            let inPort: RecordFieldPortModel;
-            if (inputNode) {
-                inPort = getInputPortsForExpr(inputNode, value);
-            }
-            const [outPort, mappedOutPort] = getOutputPortForField(fields,
-                this.recordField,
-                MAPPING_CONSTRUCTOR_TARGET_PORT_PREFIX,
-                (portId: string) =>  this.getPort(portId) as RecordFieldPortModel);
-            if (inPort && mappedOutPort) {
-                const diagnostics = filterDiagnostics(this.context.diagnostics,
-                    getDiagnosticsPosition(mappedOutPort.editableRecordField, mapping));
-                const lm = new DataMapperLinkModel(value, diagnostics, true);
-                const mappedField = mappedOutPort.editableRecordField && mappedOutPort.editableRecordField.type;
-                const keepDefault = ((mappedField && !mappedField?.name
-                    && mappedField.typeName !== PrimitiveBalType.Array
-                    && mappedField.typeName !== PrimitiveBalType.Record)
-                    || !STKindChecker.isMappingConstructor(this.value.expression)
-                );
-                lm.addLabel(new ExpressionLabelModel({
-                    value: otherVal?.source || value.source,
-                    valueNode: otherVal || value,
-                    context: this.context,
-                    link: lm,
-                    field: STKindChecker.isSpecificField(field)
-                        ? field.valueExpr
-                        : field,
-                    editorLabel: STKindChecker.isSpecificField(field)
-                        ? field.fieldName.value as string
-                        : `${outPort.fieldFQN.split('.').pop()}[${outPort.index}]`,
-                    deleteLink: () => this.deleteField(field, keepDefault),
-                }));
-                lm.setTargetPort(mappedOutPort);
-                lm.setSourcePort(inPort);
-                inPort.addLinkedPort(mappedOutPort);
-                lm.registerListener({
-                    selectionChanged(event) {
-                        if (event.isSelected) {
-                            inPort.fireEvent({}, "link-selected");
-                            mappedOutPort.fireEvent({}, "link-selected");
-                        } else {
-                            inPort.fireEvent({}, "link-unselected");
-                            mappedOutPort.fireEvent({}, "link-unselected");
-                        }
-                    },
-                })
-                this.getModel().addAll(lm);
-            }
-        });
-    }
-
-    async deleteField(field: STNode, keepDefaultVal?: boolean) {
-        let modifications: STModification[];
-        const typeOfValue = getTypeOfValue(this.recordField, field.position);
-        if (keepDefaultVal && !STKindChecker.isSpecificField(field)) {
-            modifications = [{
-                type: "INSERT",
-                config: {
-                    "STATEMENT": getDefaultValue(typeOfValue?.typeName)
-                },
-                ...field.position
-            }];
-        } else if (STKindChecker.isSelectClause(this.value) && STKindChecker.isSpecificField(field)) {
-            // if Within query expression expanded view
-            modifications = [{
-                type: "DELETE",
-                ...field.valueExpr?.position
-            }];
-        } else {
-            const linkDeleteVisitor = new LinkDeletingVisitor(field.position as NodePosition, this.value.expression);
-            traversNode(this.value.expression, linkDeleteVisitor);
-            const nodePositionsToDelete = linkDeleteVisitor.getPositionToDelete();
-            modifications = [{
-                type: "DELETE",
-                ...nodePositionsToDelete
-            }];
-        }
-
-        this.context.applyModifications(modifications);
-        await this.context.applyModifications(modifications);
-    }
-
-    public updatePosition() {
-        this.setPosition(this.position.x, this.position.y);
-    }
-
-    setPosition(point: Point): void;
-    setPosition(x: number, y: number): void;
-    setPosition(x: unknown, y?: unknown): void {
-        if (typeof x === 'number' && typeof y === 'number') {
-            if (!this.x || !this.y) {
-                this.x = x;
-                this.y = y;
-            }
-            super.setPosition(x, y);
-        }
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/MappingConstructor/MappingConstructorNodeFactory.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/MappingConstructor/MappingConstructorNodeFactory.tsx
deleted file mode 100644
index 7adde992e37..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/MappingConstructor/MappingConstructorNodeFactory.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-lambda  jsx-no-multiline-js
-import * as React from 'react';
-
-import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
-import { DiagramEngine } from '@projectstorm/react-diagrams-core';
-import { STKindChecker, STNode } from '@wso2/syntax-tree';
-import "reflect-metadata";
-import { container, injectable, singleton } from "tsyringe";
-
-import { RecordFieldPortModel } from '../../Port';
-import { FUNCTION_BODY_QUERY, MAPPING_CONSTRUCTOR_TARGET_PORT_PREFIX } from '../../utils/constants';
-import { getExprBodyFromLetExpression } from "../../utils/dm-utils";
-import { EditableMappingConstructorWidget } from "../commons/DataManipulationWidget/EditableMappingConstructorWidget";
-import { IDataMapperNodeFactory } from '../commons/DataMapperNode';
-import { OutputSearchNoResultFound, SearchNoResultFoundKind } from "../commons/Search";
-
-import { MappingConstructorNode, MAPPING_CONSTRUCTOR_NODE_TYPE } from './MappingConstructorNode';
-
-@injectable()
-@singleton()
-export class ExpressionFunctionBodyFactory extends AbstractReactFactory<MappingConstructorNode, DiagramEngine> implements IDataMapperNodeFactory {
-	constructor() {
-		super(MAPPING_CONSTRUCTOR_NODE_TYPE);
-	}
-
-	generateReactWidget(event: { model: MappingConstructorNode; }): JSX.Element {
-		let valueLabel: string;
-		if (STKindChecker.isSelectClause(event.model.value)
-			&& event.model.context.selection.selectedST.fieldPath !== FUNCTION_BODY_QUERY)
-		{
-			valueLabel = event.model.typeIdentifier.value as string || event.model.typeIdentifier.source;
-		}
-		return (
-			<>
-				{event.model.hasNoMatchingFields ? (
-					<OutputSearchNoResultFound kind={SearchNoResultFoundKind.OutputField}/>
-				) : (
-					<EditableMappingConstructorWidget
-						engine={this.engine}
-						id={`${MAPPING_CONSTRUCTOR_TARGET_PORT_PREFIX}${event.model.rootName ? `.${event.model.rootName}` : ''}`}
-						editableRecordField={event.model.recordField}
-						typeName={event.model.typeName}
-						value={event.model.innermostExpr}
-						getPort={(portId: string) => event.model.getPort(portId) as RecordFieldPortModel}
-						context={event.model.context}
-						mappings={event.model.mappings}
-						valueLabel={valueLabel}
-						deleteField={(node: STNode) => event.model.deleteField(node)}
-						originalTypeName={event.model.typeDef.originalTypeName}
-					/>
-				)}
-			</>
-		);
-	}
-
-	generateModel(): MappingConstructorNode {
-		return undefined;
-	}
-}
-container.register("NodeFactory", { useClass: ExpressionFunctionBodyFactory });
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/MappingConstructor/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/MappingConstructor/index.ts
deleted file mode 100644
index 8422e05ce1a..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/MappingConstructor/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-export * from "./MappingConstructorNodeFactory";
-export * from "./MappingConstructorNode";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ModuleVariable/ModuleVariableItemWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ModuleVariable/ModuleVariableItemWidget.tsx
deleted file mode 100644
index 72cc3f43397..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ModuleVariable/ModuleVariableItemWidget.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React, { useState } from "react";
-
-import { Button, Codicon, TruncatedLabel } from "@wso2/ui-toolkit";
-import { DiagramEngine } from '@projectstorm/react-diagrams';
-import { PrimitiveBalType, TypeField } from "@wso2/ballerina-core";
-
-import { DataMapperPortWidget, PortState, RecordFieldPortModel } from '../../Port';
-import { getTypeName } from "../../utils/dm-utils";
-import { RecordFieldTreeItemWidget } from "../commons/RecordTypeTreeWidget/RecordFieldTreeItemWidget";
-import { TreeBody, TreeHeader } from '../commons/Tree/Tree';
-import { useIONodesStyles } from "../../../styles";
-
-export interface ModuleVariableItemProps {
-    id: string; // this will be the root ID used to prepend for UUIDs of nested fields
-    typeDesc: TypeField;
-    engine: DiagramEngine;
-    getPort: (portId: string) => RecordFieldPortModel;
-    handleCollapse: (portName: string, isExpanded?: boolean) => void;
-    valueLabel?: string;
-}
-
-export function ModuleVariableItemWidget(props: ModuleVariableItemProps) {
-    const { engine, typeDesc, id, getPort, handleCollapse, valueLabel } = props;
-    const classes = useIONodesStyles();
-
-    const [ portState, setPortState ] = useState<PortState>(PortState.Unselected);
-    const [isHovered, setIsHovered] = useState(false);
-
-    const typeName = getTypeName(typeDesc);
-    const portOut = getPort(`${id}.OUT`);
-    const expanded = !(portOut && portOut.collapsed);
-    const isRecord = typeDesc.typeName === PrimitiveBalType.Record;
-    const hasFields = !!typeDesc?.fields?.length;
-
-    const label = (
-        <TruncatedLabel style={{ marginRight: "auto" }}>
-            <span style={{ marginRight: "auto" }} data-testid={`module-var-widget-label-${id}`}>
-                <span className={classes.valueLabel}>
-                    {valueLabel ? valueLabel : id}
-                    {typeName && ":"}
-                </span>
-                {typeName && (
-                    <span className={classes.inputTypeLabel}>
-                        {typeName}
-                    </span>
-                )}
-
-            </span>
-        </TruncatedLabel>
-    );
-
-    const handleExpand = () => {
-        handleCollapse(id, !expanded);
-    };
-
-    const handlePortState = (state: PortState) => {
-        setPortState(state)
-    };
-
-    const onMouseEnter = () => {
-        setIsHovered(true);
-    };
-
-    const onMouseLeave = () => {
-        setIsHovered(false);
-    };
-
-    return (
-        <>
-            <TreeHeader
-                id={"recordfield-" + id}
-                isSelected={portState !== PortState.Unselected}
-                onMouseEnter={onMouseEnter}
-                onMouseLeave={onMouseLeave}
-            >
-                <span className={classes.label}>
-                {isRecord && hasFields && (
-                    <Button
-                        id={"expand-or-collapse-" + id}
-                        appearance="icon"
-                        tooltip="Expand/Collapse"
-                        onClick={handleExpand}
-                        data-testid={`${id}-expand-icon-module-var-node`}
-                    >
-                        {expanded ? <Codicon name="chevron-right" /> : <Codicon name="chevron-down" />}
-                    </Button>
-                )}
-                    {label}
-                </span>
-                <span className={classes.outPort}>
-                    {portOut && (
-                        <DataMapperPortWidget
-                            engine={engine}
-                            port={portOut}
-                            dataTestId={`module-variable-port-${portOut.getName()}`}
-                        />
-                    )}
-                </span>
-            </TreeHeader>
-            {
-                expanded && isRecord && hasFields && (
-                    <TreeBody>
-                        {typeDesc.fields.map((field, index) => {
-                            return (
-                                <RecordFieldTreeItemWidget
-                                    key={index}
-                                    engine={engine}
-                                    field={field}
-                                    getPort={getPort}
-                                    parentId={id}
-                                    handleCollapse={handleCollapse}
-                                    treeDepth={0}
-                                    hasHoveredParent={isHovered}
-                                />
-                            );
-                        })
-                        }
-                    </TreeBody>
-                )
-            }
-        </>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ModuleVariable/ModuleVariableNode.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ModuleVariable/ModuleVariableNode.ts
deleted file mode 100644
index a239122a50c..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ModuleVariable/ModuleVariableNode.ts
+++ /dev/null
@@ -1,173 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { Point } from "@projectstorm/geometry";
-import { ExpressionRange, PrimitiveBalType, TypeField } from "@wso2/ballerina-core";
-import {
-    NodePosition,
-    STKindChecker,
-    STNode
-} from "@wso2/syntax-tree";
-
-import { useDMSearchStore } from "../../../../store/store";
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { isPositionsEquals } from "../../../../utils/st-utils";
-import { MODULE_VARIABLE_SOURCE_PORT_PREFIX } from "../../utils/constants";
-import { getFilteredSubFields } from "../../utils/dm-utils";
-import { getTypesForExpressions } from "../../utils/ls-utils";
-import { DataMapperNodeModel } from "../commons/DataMapperNode";
-
-export const MODULE_VAR_SOURCE_NODE_TYPE = "datamapper-node-type-desc-module-variable";
-const NODE_ID = "module-variable-node";
-
-export enum ModuleVarKind {
-    Variable,
-    Configurable,
-    Constant,
-    Enum
-}
-
-export interface ModuleVariable {
-    kind: ModuleVarKind;
-    node: STNode;
-    exprPosition?: NodePosition;
-}
-
-export interface DMModuleVarDecl {
-    varName: string;
-    kind: ModuleVarKind;
-    type: TypeField;
-    node: STNode;
-}
-
-export class ModuleVariableNode extends DataMapperNodeModel {
-    public moduleVarDecls: DMModuleVarDecl[];
-    public hasNoMatchingFields: boolean;
-    public x: number;
-    public numberOfFields:  number;
-
-    constructor(
-        public context: IDataMapperContext,
-        public value: Map<string, ModuleVariable>) {
-        super(
-            NODE_ID,
-            context,
-            MODULE_VAR_SOURCE_NODE_TYPE
-        );
-        this.numberOfFields = 1;
-        this.moduleVarDecls = [];
-    }
-
-    async initPorts() {
-        this.moduleVarDecls = [];
-        const exprRanges: ExpressionRange[] = [...this.value].map(([, item]) => {
-            let exprPosition: NodePosition = item.node.position as NodePosition;
-            if (STKindChecker.isFieldAccess(item.node) || STKindChecker.isOptionalFieldAccess(item.node)) {
-                let valueExpr = item.node.expression;
-                while (valueExpr && (STKindChecker.isFieldAccess(valueExpr)
-                    || STKindChecker.isOptionalFieldAccess(valueExpr))) {
-                    valueExpr = valueExpr.expression;
-                }
-                exprPosition = valueExpr.position;
-            }
-            item.exprPosition = exprPosition;
-            return {
-                startLine: {
-                    line: exprPosition.startLine,
-                    offset: exprPosition.startColumn
-                },
-                endLine: {
-                    line: exprPosition.endLine,
-                    offset: exprPosition.endColumn
-                }
-            };
-        });
-        const types = await getTypesForExpressions(this.context.filePath, exprRanges, this.context.langServerRpcClient);
-        const allModuleVarDecls = [...this.value].map(([varName, item]) => {
-            return {
-                varName,
-                kind: item.kind,
-                node: item.node,
-                type: types.find(type => isPositionsEquals(item.exprPosition, {
-                    startLine: type.requestedRange.startLine.line,
-                    startColumn: type.requestedRange.startLine.offset,
-                    endLine: type.requestedRange.endLine.line,
-                    endColumn: type.requestedRange.endLine.offset,
-                })).type
-            }
-        });
-        this.moduleVarDecls = this.getSearchFilteredVariables(allModuleVarDecls);
-        const searchValue = useDMSearchStore.getState().inputSearch;
-        this.hasNoMatchingFields = searchValue && allModuleVarDecls.length > 0 && this.moduleVarDecls.length === 0;
-
-        this.moduleVarDecls.forEach(moduleVar => {
-            const { varName, type } = moduleVar;
-
-            const parentPort = this.addPortsForHeaderField(type, varName, "OUT",
-                MODULE_VARIABLE_SOURCE_PORT_PREFIX, this.context.collapsedFields);
-
-            if (type && (type.typeName === PrimitiveBalType.Record)) {
-                const fields = type.fields;
-                fields.forEach((subField) => {
-                    this.numberOfFields += this.addPortsForInputRecordField(
-                        subField, "OUT", varName, varName, MODULE_VARIABLE_SOURCE_PORT_PREFIX,
-                        parentPort, this.context.collapsedFields, parentPort.collapsed);
-                });
-            } else {
-                this.numberOfFields += this.addPortsForInputRecordField(
-                    type, "OUT", varName, varName, MODULE_VARIABLE_SOURCE_PORT_PREFIX,
-                    parentPort, this.context.collapsedFields, parentPort.collapsed);
-            }
-        });
-    }
-
-    async initLinks() {
-        // Currently we create links from "IN" ports and back tracing the inputs.
-    }
-
-    setPosition(point: Point): void;
-    setPosition(x: number, y: number): void;
-    setPosition(x: unknown, y?: unknown): void {
-        if (typeof x === 'number' && typeof y === 'number'){
-            if (!this.x){
-                this.x = x;
-            }
-            super.setPosition(this.x, y);
-        }
-    }
-
-    private getSearchFilteredVariables(items: DMModuleVarDecl[]) {
-        const searchValue = useDMSearchStore.getState().inputSearch;
-        if (!searchValue) {
-            return items;
-        }
-        const filteredVariables: DMModuleVarDecl[] = [];
-
-        for (const item of items) {
-            if (item.varName?.toLowerCase()?.includes(searchValue.toLowerCase())) {
-                filteredVariables.push(item)
-            } else if (item.type.typeName === PrimitiveBalType.Record) {
-                const filteredRecordType = getFilteredSubFields(item.type, searchValue);
-                if (filteredRecordType) {
-                    filteredVariables.push({ ...item, type: filteredRecordType })
-                }
-            }
-        }
-
-        return filteredVariables;
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ModuleVariable/ModuleVariableNodeFactory.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ModuleVariable/ModuleVariableNodeFactory.tsx
deleted file mode 100644
index 02f0ea0d8a4..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ModuleVariable/ModuleVariableNodeFactory.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js jsx-no-lambda
-import * as React from 'react';
-
-import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
-import { DiagramEngine } from '@projectstorm/react-diagrams-core';
-import "reflect-metadata";
-import { container, injectable, singleton } from "tsyringe";
-
-import { RecordFieldPortModel } from '../../Port';
-import { IDataMapperNodeFactory } from '../commons/DataMapperNode';
-import { InputSearchNoResultFound, SearchNoResultFoundKind } from "../commons/Search";
-
-import { ModuleVariableNode, MODULE_VAR_SOURCE_NODE_TYPE } from "./ModuleVariableNode";
-import { ModuleVariableTreeWidget } from "./ModuleVariableTreeWidget";
-
-@injectable()
-@singleton()
-export class ModuleVariableNodeFactory extends AbstractReactFactory<ModuleVariableNode, DiagramEngine> implements IDataMapperNodeFactory {
-    constructor() {
-        super(MODULE_VAR_SOURCE_NODE_TYPE);
-    }
-
-    generateReactWidget(event: { model: ModuleVariableNode; }): JSX.Element {
-        return (
-            <>
-                {event.model.hasNoMatchingFields ? (
-                    <InputSearchNoResultFound kind={SearchNoResultFoundKind.ModuleVariable}/>
-                ) : (
-                    <ModuleVariableTreeWidget
-                        engine={this.engine}
-                        moduleVariables={event.model.moduleVarDecls}
-                        context={event.model.context}
-                        getPort={(portId: string) => event.model.getPort(portId) as RecordFieldPortModel}
-                        handleCollapse={(fieldName: string, expand?: boolean) => event.model.context.handleCollapse(fieldName, expand)}
-                    />
-                )}
-            </>
-        );
-    }
-
-    generateModel(): ModuleVariableNode {
-        return undefined;
-    }
-}
-
-container.register("NodeFactory", { useClass: ModuleVariableNodeFactory });
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ModuleVariable/ModuleVariableTreeWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ModuleVariable/ModuleVariableTreeWidget.tsx
deleted file mode 100644
index b7797536e71..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ModuleVariable/ModuleVariableTreeWidget.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js jsx-no-lambda
-import * as React from 'react';
-
-import styled from "@emotion/styled";
-import { DiagramEngine } from '@projectstorm/react-diagrams';
-
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { RecordFieldPortModel } from '../../Port';
-import { MODULE_VARIABLE_SOURCE_PORT_PREFIX } from "../../utils/constants";
-import { TreeContainer } from '../commons/Tree/Tree';
-
-import { DMModuleVarDecl } from "./index";
-import { ModuleVariableItemWidget } from "./ModuleVariableItemWidget";
-
-export interface ModuleVariableTreeWidgetProps {
-    moduleVariables: DMModuleVarDecl[];
-    engine: DiagramEngine;
-    context: IDataMapperContext;
-    getPort: (portId: string) => RecordFieldPortModel;
-    handleCollapse: (portName: string, isExpanded?: boolean) => void;
-}
-
-export function ModuleVariableTreeWidget(props: ModuleVariableTreeWidgetProps) {
-    const { engine, moduleVariables, getPort, handleCollapse } = props;
-    const hasMappingsWithModuleVariables = moduleVariables.length > 0;
-
-    return (
-        <>
-            {hasMappingsWithModuleVariables && (
-                <TreeContainer data-testid={"module-variables-node"}>
-                    <ModuleVarsHeader>
-                        <HeaderText>Module Variables</HeaderText>
-                    </ModuleVarsHeader>
-                    {moduleVariables.map(moduleVar => {
-                        return (
-                            <>
-                                <ModuleVariableItemWidget
-                                    key={`${MODULE_VARIABLE_SOURCE_PORT_PREFIX}.${moduleVar.varName}`}
-                                    id={`${MODULE_VARIABLE_SOURCE_PORT_PREFIX}.${moduleVar.varName}`}
-                                    engine={engine}
-                                    typeDesc={moduleVar.type}
-                                    getPort={(portId: string) => getPort(portId) as RecordFieldPortModel}
-                                    handleCollapse={handleCollapse}
-                                    valueLabel={moduleVar.varName}
-                                />
-                            </>
-                        );
-                    })}
-                </TreeContainer>
-            )}
-        </>
-    );
-}
-
-const ModuleVarsHeader = styled.div`
-    background: var(--vscode-editorWidget-background);
-    width: 100%;
-    line-height: 35px;
-    display: flex;
-    justify-content: space-between;
-    cursor: default;
-`;
-
-const HeaderText = styled.span`
-    margin-left: 10px;
-    min-width: 280px;
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--vscode-inputOption-activeForeground);
-`;
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ModuleVariable/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ModuleVariable/index.ts
deleted file mode 100644
index fe9140ba90f..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/ModuleVariable/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-export * from "./ModuleVariableNode";
-export * from "./ModuleVariableNodeFactory";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/PrimitiveType/PrimitiveTypeNode.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/PrimitiveType/PrimitiveTypeNode.ts
deleted file mode 100644
index 9ad3c97ce90..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/PrimitiveType/PrimitiveTypeNode.ts
+++ /dev/null
@@ -1,210 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { Point } from "@projectstorm/geometry";
-import { STModification, TypeField, PrimitiveBalType } from "@wso2/ballerina-core";
-import {
-    ExpressionFunctionBody,
-    IdentifierToken,
-    QueryExpression,
-    SelectClause,
-    STKindChecker,
-    STNode
-} from "@wso2/syntax-tree";
-
-import { useDMSearchStore } from "../../../../store/store";
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { ExpressionLabelModel } from "../../Label";
-import { DataMapperLinkModel } from "../../Link";
-import { EditableRecordField } from "../../Mappings/EditableRecordField";
-import { FieldAccessToSpecificFied } from "../../Mappings/FieldAccessToSpecificFied";
-import { RecordFieldPortModel } from "../../Port";
-import { PRIMITIVE_TYPE_TARGET_PORT_PREFIX } from "../../utils/constants";
-import {
-    getDefaultValue,
-    getDiagnosticsPosition,
-    getFilteredMappings,
-    getFilteredUnionOutputTypes,
-    getInnermostExpressionBody,
-    getInputNodeExpr,
-    getInputPortsForExpr,
-    getOutputPortForField,
-    getTypeName,
-    isArrayOrRecord,
-    isIndexedExpression
-} from "../../utils/dm-utils";
-import { filterDiagnostics } from "../../utils/ls-utils";
-import { getEnrichedRecordType } from "../../utils/type-utils";
-import { DataMapperNodeModel, TypeDescriptor } from "../commons/DataMapperNode";
-
-export const PRIMITIVE_TYPE_NODE_TYPE = "data-mapper-node-primitive-type";
-const NODE_ID = "primitive-type-node";
-
-export class PrimitiveTypeNode extends DataMapperNodeModel {
-
-    public recordField: EditableRecordField;
-    public typeName: string;
-    public hasNoMatchingFields: boolean;
-    public innermostExpr: STNode;
-    public x: number;
-    public y: number;
-
-    constructor(
-        public context: IDataMapperContext,
-        public value: SelectClause | ExpressionFunctionBody,
-        public typeIdentifier: TypeDescriptor | IdentifierToken,
-        public typeDef: TypeField,
-        public queryExpr?: QueryExpression) {
-        super(
-            NODE_ID,
-            context,
-            PRIMITIVE_TYPE_NODE_TYPE
-        );
-        this.innermostExpr = getInnermostExpressionBody(this.queryExpr
-            ? (this.queryExpr?.selectClause || this.queryExpr?.resultClause).expression
-            : this.value.expression
-        );
-    }
-
-    async initPorts() {
-        if (this.typeDef) {
-            const searchValue = useDMSearchStore.getState().outputSearch;
-            this.hasNoMatchingFields = searchValue && !this.value.expression.source.includes(searchValue);
-            if (this.typeDef.typeName === PrimitiveBalType.Union) {
-                this.typeName = getTypeName(this.typeDef);
-                const acceptedMembers = getFilteredUnionOutputTypes(this.typeDef);
-                if (acceptedMembers.length === 1) {
-                    this.typeDef = acceptedMembers[0];
-                }
-            }
-            const valueEnrichedType = getEnrichedRecordType(this.typeDef,
-                this.innermostExpr, this.context.selection.selectedST.stNode);
-            this.typeName = !this.typeName ? getTypeName(valueEnrichedType.type) : this.typeName;
-            this.recordField = valueEnrichedType;
-            if (valueEnrichedType.type.typeName === PrimitiveBalType.Array
-                && STKindChecker.isSelectClause(this.value)
-            ) {
-                this.recordField = valueEnrichedType.elements[0].member;
-            }
-            const parentPort = this.addPortsForHeaderField(this.typeDef, '', "IN",
-                PRIMITIVE_TYPE_TARGET_PORT_PREFIX, this.context.collapsedFields,
-                STKindChecker.isSelectClause(this.value), this.recordField);
-            this.addPortsForOutputRecordField(this.recordField, "IN", this.recordField.type.typeName,
-                undefined, PRIMITIVE_TYPE_TARGET_PORT_PREFIX, parentPort,
-                this.context.collapsedFields, parentPort.collapsed, STKindChecker.isSelectClause(this.value));
-        }
-    }
-
-    initLinks(): void {
-        const searchValue = useDMSearchStore.getState().outputSearch;
-        const mappings = this.genMappings(this.value.expression);
-        const filteredMappings = getFilteredMappings(mappings, searchValue);
-        this.createLinks(filteredMappings);
-    }
-
-    private createLinks(mappings: FieldAccessToSpecificFied[]) {
-        mappings.forEach((mapping) => {
-            const { fields, value, otherVal } = mapping;
-            const field = fields[fields.length - 1];
-            if (!value || !value.source || (otherVal && isIndexedExpression(otherVal))) {
-                // Unsupported mapping
-                return;
-            }
-            const inputNode = getInputNodeExpr(value, this);
-            let inPort: RecordFieldPortModel;
-            if (inputNode) {
-                inPort = getInputPortsForExpr(inputNode, value);
-            }
-            let outPort: RecordFieldPortModel;
-            let mappedOutPort: RecordFieldPortModel;
-            if (!isArrayOrRecord(this.recordField.type)) {
-                outPort = this.getPort(`${PRIMITIVE_TYPE_TARGET_PORT_PREFIX}.${
-                    this.recordField.type.typeName}.IN`) as RecordFieldPortModel;
-                mappedOutPort = outPort;
-            } else {
-                [outPort, mappedOutPort] = getOutputPortForField(fields,
-                    this.recordField,
-                    PRIMITIVE_TYPE_TARGET_PORT_PREFIX,
-                    (portId: string) =>  this.getPort(portId) as RecordFieldPortModel);
-            }
-            if (inPort && mappedOutPort) {
-                const diagnostics = filterDiagnostics(this.context.diagnostics,
-                    getDiagnosticsPosition(mappedOutPort.editableRecordField, mapping));
-                const lm = new DataMapperLinkModel(value, diagnostics, true);
-                lm.addLabel(new ExpressionLabelModel({
-                    value: otherVal?.source || value.source,
-                    valueNode: otherVal || value,
-                    context: this.context,
-                    link: lm,
-                    field: STKindChecker.isSpecificField(field)
-                        ? field.valueExpr
-                        : field,
-                    editorLabel: STKindChecker.isSpecificField(field)
-                        ? field.fieldName.value as string
-                        : `${outPort.fieldFQN.split('.').pop()}${outPort.index ? `[${outPort.index}]`: ''}`,
-                    deleteLink: () => this.deleteField(field),
-                }));
-                lm.setTargetPort(mappedOutPort);
-                lm.setSourcePort(inPort);
-                inPort.addLinkedPort(mappedOutPort);
-                lm.registerListener({
-                    selectionChanged(event) {
-                        if (event.isSelected) {
-                            inPort.fireEvent({}, "link-selected");
-                            mappedOutPort.fireEvent({}, "link-selected");
-                        } else {
-                            inPort.fireEvent({}, "link-unselected");
-                            mappedOutPort.fireEvent({}, "link-unselected");
-                        }
-                    },
-                })
-                this.getModel().addAll(lm);
-            }
-        });
-    }
-
-    async deleteField(field: STNode) {
-        const typeOfValue = STKindChecker.isSelectClause(this.value) && this.typeDef?.memberType
-            ? this.typeDef.memberType
-            : this.typeDef;
-        const modifications: STModification[] = [{
-                type: "INSERT",
-                config: {
-                    "STATEMENT": getDefaultValue(typeOfValue?.typeName)
-                },
-                ...field.position
-            }];
-
-        this.context.applyModifications(modifications);
-    }
-
-    public updatePosition() {
-        this.setPosition(this.position.x, this.position.y);
-    }
-
-    setPosition(point: Point): void;
-    setPosition(x: number, y: number): void;
-    setPosition(x: unknown, y?: unknown): void {
-        if (typeof x === 'number' && typeof y === 'number') {
-            if (!this.x || !this.y) {
-                this.x = x;
-                this.y = y;
-            }
-            super.setPosition(x, y);
-        }
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/PrimitiveType/PrimitiveTypeNodeFactory.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/PrimitiveType/PrimitiveTypeNodeFactory.tsx
deleted file mode 100644
index 75170836faf..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/PrimitiveType/PrimitiveTypeNodeFactory.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-lambda jsx-no-multiline-js
-import * as React from 'react';
-
-import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
-import { DiagramEngine } from '@projectstorm/react-diagrams-core';
-import { STKindChecker, STNode } from '@wso2/syntax-tree';
-import "reflect-metadata";
-import { container, injectable, singleton } from "tsyringe";
-
-import { RecordFieldPortModel } from '../../Port';
-import { FUNCTION_BODY_QUERY, PRIMITIVE_TYPE_TARGET_PORT_PREFIX } from "../../utils/constants";
-import { PrimitiveTypeOutputWidget } from "../commons/DataManipulationWidget/PrimitiveTypeOutputWidget";
-import { IDataMapperNodeFactory } from '../commons/DataMapperNode';
-import { OutputSearchNoResultFound, SearchNoResultFoundKind } from "../commons/Search";
-
-import { PrimitiveTypeNode, PRIMITIVE_TYPE_NODE_TYPE } from './PrimitiveTypeNode';
-
-@injectable()
-@singleton()
-export class PrimitiveTypeNodeFactory extends AbstractReactFactory<PrimitiveTypeNode, DiagramEngine> implements IDataMapperNodeFactory {
-	constructor() {
-		super(PRIMITIVE_TYPE_NODE_TYPE);
-	}
-
-	generateReactWidget(event: { model: PrimitiveTypeNode; }): JSX.Element {
-		let valueLabel: string;
-		if (STKindChecker.isSelectClause(event.model.value)
-			&& event.model.context.selection.selectedST.fieldPath !== FUNCTION_BODY_QUERY)
-		{
-			valueLabel = event.model.typeIdentifier.value as string || event.model.typeIdentifier.source;
-		}
-		return (
-			<>
-				{event.model.hasNoMatchingFields ? (
-					<OutputSearchNoResultFound kind={SearchNoResultFoundKind.OutputValue} />
-				) : (
-					<PrimitiveTypeOutputWidget
-						id={PRIMITIVE_TYPE_TARGET_PORT_PREFIX}
-						engine={this.engine}
-						field={event.model.recordField}
-						getPort={(portId: string) => event.model.getPort(portId) as RecordFieldPortModel}
-						context={event.model.context}
-						typeName={event.model.typeName}
-						valueLabel={valueLabel}
-						deleteField={(node: STNode) => event.model.deleteField(node)}
-					/>
-				)}
-			</>
-		);
-	}
-
-	generateModel(): PrimitiveTypeNode {
-		return undefined;
-	}
-}
-container.register("NodeFactory", { useClass: PrimitiveTypeNodeFactory });
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/PrimitiveType/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/PrimitiveType/index.ts
deleted file mode 100644
index 3425ee24bb4..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/PrimitiveType/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-export * from "./PrimitiveTypeNodeFactory";
-export * from "./PrimitiveTypeNode";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/QueryExpression/QueryExpressionNode.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/QueryExpression/QueryExpressionNode.ts
deleted file mode 100644
index 892236a1ea8..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/QueryExpression/QueryExpressionNode.ts
+++ /dev/null
@@ -1,396 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { PrimitiveBalType, STModification, TypeField } from "@wso2/ballerina-core";
-import {
-    ExpressionFunctionBody,
-    NodePosition,
-    QueryExpression,
-    STKindChecker,
-    STNode,
-    traversNode
-} from "@wso2/syntax-tree";
-import md5 from "blueimp-md5";
-
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { isPositionsEquals } from "../../../../utils/st-utils";
-import { DataMapperLinkModel } from "../../Link";
-import { IntermediatePortModel, RecordFieldPortModel } from "../../Port";
-import {
-    EXPANDED_QUERY_SOURCE_PORT_PREFIX,
-    LET_EXPRESSION_SOURCE_PORT_PREFIX,
-    LIST_CONSTRUCTOR_TARGET_PORT_PREFIX,
-    OFFSETS,
-    PRIMITIVE_TYPE_TARGET_PORT_PREFIX,
-    UNION_TYPE_TARGET_PORT_PREFIX
-} from "../../utils/constants";
-import {
-    getDefaultValue,
-    getExprBodyFromLetExpression,
-    getFieldNames,
-    getInnermostExpressionBody,
-    getMethodCallElements,
-    getTypeFromStore, isRepresentFnBody
-} from "../../utils/dm-utils";
-import { LinkDeletingVisitor } from "../../visitors/LinkDeletingVistior";
-import { DataMapperNodeModel } from "../commons/DataMapperNode";
-import { FromClauseNode } from "../FromClause";
-import { LetExpressionNode } from "../LetExpression";
-import { ListConstructorNode } from "../ListConstructor";
-import { MappingConstructorNode } from "../MappingConstructor";
-import { PrimitiveTypeNode } from "../PrimitiveType";
-import { RequiredParamNode } from "../RequiredParam";
-import { UnionTypeNode } from "../UnionType";
-
-export const QUERY_EXPR_NODE_TYPE = "datamapper-node-query-expr";
-const NODE_ID = "query-expr-node";
-
-export enum QueryExprMappingType {
-    A2AWithSelect = "array-to-array-with-select",
-    A2SWithSelect = "array-to-single-with-select",
-    A2SWithCollect = "array-to-single-with-collect",
-};
-
-export class QueryExpressionNode extends DataMapperNodeModel {
-
-    public sourceTypeDesc: TypeField;
-    public sourcePort: RecordFieldPortModel;
-    public targetPort: RecordFieldPortModel;
-
-    public inPort: IntermediatePortModel;
-    public outPort: IntermediatePortModel;
-
-    public targetFieldFQN: string;
-    public hidden: boolean;
-    public hasScreenWidthChanged: boolean;
-
-    constructor(
-        public context: IDataMapperContext,
-        public value: QueryExpression,
-        public parentNode: STNode) {
-        super(
-            // `${NODE_ID}-${value.queryPipeline.fromClause.typedBindingPattern.bindingPattern.source.trim()}`,
-            NODE_ID,
-            context,
-            QUERY_EXPR_NODE_TYPE
-        );
-    }
-
-    initPorts(): void {
-        this.sourcePort = undefined;
-        this.targetPort = undefined;
-        this.sourceTypeDesc = undefined;
-        this.getSourceType();
-        this.getTargetType();
-        this.inPort = new IntermediatePortModel(
-            md5(JSON.stringify(this.value.position) + "IN")
-            , "IN"
-        );
-        this.addPort(this.inPort);
-        this.outPort = new IntermediatePortModel(
-            md5(JSON.stringify(this.value.position) + "OUT")
-            , "OUT"
-        );
-        this.addPort(this.outPort);
-    }
-
-    private getSourceType(): void {
-        const fromClause = this.value.queryPipeline.fromClause;
-        const sourceFieldAccess = fromClause.expression;
-        const bindingPattern = this.value.queryPipeline.fromClause.typedBindingPattern.bindingPattern;
-        if (STKindChecker.isCaptureBindingPattern(bindingPattern)
-            || STKindChecker.isMappingBindingPattern(bindingPattern)
-            || STKindChecker.isListBindingPattern(bindingPattern)) {
-            const type = getTypeFromStore(fromClause.expression.position);
-
-            if (type && type?.memberType && type.typeName === PrimitiveBalType.Array) {
-                this.sourceTypeDesc = type.memberType;
-            }
-
-            let fieldId: string;
-            let paramName: string;
-            if (STKindChecker.isFieldAccess(sourceFieldAccess)) {
-                const fieldNames = getFieldNames(sourceFieldAccess);
-                fieldId = fieldNames.reduce((pV, cV) => pV ? `${pV}.${cV.name}` : cV.name, "");
-                paramName = fieldNames[0].name;
-            } else if (STKindChecker.isSimpleNameReference(sourceFieldAccess)) {
-                fieldId = sourceFieldAccess.name.value;
-                paramName = fieldId;
-            } else if (STKindChecker.isBinaryExpression(sourceFieldAccess)
-                && STKindChecker.isElvisToken(sourceFieldAccess.operator)) {
-                fieldId = sourceFieldAccess.lhsExpr.source.trim();
-                if (STKindChecker.isFieldAccess(sourceFieldAccess.lhsExpr)
-                    && STKindChecker.isSimpleNameReference(sourceFieldAccess.lhsExpr.expression)) {
-                    paramName = sourceFieldAccess.lhsExpr.expression.name.value;
-                }
-            } else if (STKindChecker.isMethodCall(sourceFieldAccess)) {
-                const elements = getMethodCallElements(sourceFieldAccess);
-                fieldId = elements.reduce((pV, cV) => pV ? `${pV}.${cV}` : cV, "");
-                paramName = elements[0];
-            }
-
-            this.getModel().getNodes().map((node) => {
-                if (node instanceof RequiredParamNode && node?.value && node.value.paramName.value === paramName) {
-                    this.sourcePort = node.getPort(fieldId + ".OUT") as RecordFieldPortModel;
-                } else if (node instanceof FromClauseNode
-                    && STKindChecker.isCaptureBindingPattern(node.value.typedBindingPattern.bindingPattern)
-                    && node.value.typedBindingPattern.bindingPattern.source.trim() === paramName.trim())
-                {
-                    this.sourcePort = node.getPort(
-                        `${EXPANDED_QUERY_SOURCE_PORT_PREFIX}.${fieldId}.OUT`) as RecordFieldPortModel;
-                } else if (node instanceof LetExpressionNode) {
-                    const letDecl = node.letVarDecls.some(decl => decl.varName === paramName);
-                    if (letDecl) {
-                        this.sourcePort = node.getPort(
-                            `${LET_EXPRESSION_SOURCE_PORT_PREFIX}.${fieldId}.OUT`) as RecordFieldPortModel;
-                    }
-                }
-                while (this.sourcePort && this.sourcePort.hidden){
-                    this.sourcePort = this.sourcePort.parentModel;
-                }
-            });
-        }
-    }
-
-    private getTargetType(): void {
-        const innerMostExpr = getInnermostExpressionBody(this.parentNode);
-        const selectedST = this.context.selection.selectedST.stNode;
-        let exprFuncBody : ExpressionFunctionBody;
-        if (STKindChecker.isFunctionDefinition(selectedST) && STKindChecker.isExpressionFunctionBody(selectedST.functionBody)) {
-            exprFuncBody = selectedST.functionBody;
-        }
-        const fieldNamePosition = STKindChecker.isSpecificField(innerMostExpr)
-            && innerMostExpr.fieldName.position as NodePosition;
-        const isSelectClauseQuery = STKindChecker.isSelectClause(this.parentNode) || (fieldNamePosition
-            && STKindChecker.isQueryExpression(innerMostExpr.valueExpr)
-            && !isPositionsEquals(innerMostExpr.valueExpr.position, this.value.position));
-
-        if (fieldNamePosition && !isSelectClauseQuery) {
-            this.getModel().getNodes().map((node) => {
-                if (node instanceof MappingConstructorNode
-                    || node instanceof ListConstructorNode
-                    || node instanceof UnionTypeNode) {
-                    const ports = Object.entries(node.getPorts());
-                    ports.map((entry) => {
-                        const port = entry[1];
-                        if (port instanceof RecordFieldPortModel
-                            && port?.editableRecordField && port.editableRecordField?.value
-                            && STKindChecker.isSpecificField(port.editableRecordField.value)
-                            && isPositionsEquals(port.editableRecordField.value.fieldName.position as NodePosition,
-                                            fieldNamePosition)
-                        ) {
-                            this.targetPort = port;
-                        }
-                    });
-                }
-            });
-        } else if (isSelectClauseQuery || isRepresentFnBody(this.parentNode, exprFuncBody)) {
-            this.getModel().getNodes().forEach((node) => {
-                const ports = Object.entries(node.getPorts());
-                if (node instanceof ListConstructorNode) {
-                    ports.map((entry) => {
-                        const port = entry[1];
-                        if (port instanceof RecordFieldPortModel
-                            && port?.editableRecordField && port.editableRecordField?.value
-                            && STKindChecker.isQueryExpression(port.editableRecordField.value)
-                            && isPositionsEquals(port.editableRecordField.value.position, this.value.position)
-                            && port.portName === `${LIST_CONSTRUCTOR_TARGET_PORT_PREFIX}.${node.rootName}`
-                            && port.portType === 'IN'
-                        ) {
-                            this.targetPort = port;
-                        }
-                    });
-                } else if (node instanceof UnionTypeNode) {
-                    ports.map((entry) => {
-                        const port = entry[1];
-                        if (port instanceof RecordFieldPortModel
-                            && port.portName === `${UNION_TYPE_TARGET_PORT_PREFIX}`
-                            && port.portType === 'IN'
-                        ) {
-                            this.targetPort = port;
-                        }
-                    });
-                } else if (node instanceof PrimitiveTypeNode) {
-                    ports.map((entry) => {
-                        const port = entry[1];
-                        if (port instanceof RecordFieldPortModel
-                            && port.portName === `${PRIMITIVE_TYPE_TARGET_PORT_PREFIX}.${node.recordField.type.typeName}`
-                            && port.portType === 'IN'
-                        ) {
-                            this.targetPort = port;
-                        }
-                    });
-                }
-            });
-        } else if (STKindChecker.isLetExpression(this.parentNode)) {
-            const exprPosition = this.parentNode.expression.position;
-            this.getModel().getNodes().forEach((node) => {
-                if (node instanceof ListConstructorNode) {
-                    const ports = Object.entries(node.getPorts());
-                    ports.map((entry) => {
-                        const port = entry[1];
-                        if (port instanceof RecordFieldPortModel
-                            && port?.editableRecordField && port.editableRecordField?.value
-                            && STKindChecker.isLetExpression(port.editableRecordField.value)
-                            && isPositionsEquals(getExprBodyFromLetExpression(port.editableRecordField.value).position, exprPosition)
-                            && port.portName === `${LIST_CONSTRUCTOR_TARGET_PORT_PREFIX}.${node.rootName}`
-                            && port.portType === 'IN'
-                        ) {
-                            this.targetPort = port;
-                        }
-                    });
-                }
-            });
-        } else if (STKindChecker.isBracedExpression(innerMostExpr)) {
-            // To draw link between query node and output node
-            // when having indexed query expressions at function body level
-            this.getModel().getNodes().forEach((node) => {
-                if (node instanceof PrimitiveTypeNode) {
-                    const ports = Object.entries(node.getPorts());
-                    ports.map((entry) => {
-                        const port = entry[1];
-                        if (port instanceof RecordFieldPortModel
-                            && port?.editableRecordField && port.editableRecordField?.value
-                            && STKindChecker.isQueryExpression(port.editableRecordField.value)
-                            && STKindChecker.isBracedExpression(innerMostExpr)
-                            && STKindChecker.isQueryExpression(innerMostExpr.expression)
-                            && isPositionsEquals(port.editableRecordField.value.position, innerMostExpr.expression.position)
-                            && port.portName === `${PRIMITIVE_TYPE_TARGET_PORT_PREFIX}.${node.typeDef.name ? `${node.typeDef.typeName}.${node.typeDef.name}` : node.typeName}`
-                            && port.portType === 'IN'
-                        ) {
-                            this.targetPort = port;
-                        }
-                    });
-                }
-            });
-        }
-
-        this.hidden = this.targetPort?.hidden;
-        while (this.targetPort && this.targetPort.hidden){
-            this.targetPort = this.targetPort.parentModel;
-        }
-    }
-
-    initLinks(): void {
-        if (this.hasScreenWidthChanged) {
-            return;
-        }
-        if (!this.hidden) {
-            // Currently, we create links from "IN" ports and back tracing the inputs.
-            if (this.sourcePort && this.inPort) {
-                const link = new DataMapperLinkModel(undefined, undefined, true);
-                link.setSourcePort(this.sourcePort);
-                link.setTargetPort(this.inPort);
-                this.sourcePort.addLinkedPort(this.inPort);
-                this.sourcePort.addLinkedPort(this.targetPort);
-                link.registerListener({
-                    selectionChanged: (event) => {
-                        if (event.isSelected) {
-                            this.sourcePort.fireEvent({}, "link-selected");
-                            this.inPort.fireEvent({}, "link-selected");
-                        } else {
-
-                            this.sourcePort.fireEvent({}, "link-unselected");
-                            this.inPort.fireEvent({}, "link-unselected");
-                        }
-                    },
-                })
-                this.getModel().addAll(link);
-            }
-
-            // TODO - temp hack to render link
-            if (this.outPort && this.targetPort) {
-                const link = new DataMapperLinkModel(undefined, undefined, true);
-                link.setSourcePort(this.outPort);
-                link.setTargetPort(this.targetPort);
-                link.registerListener({
-                    selectionChanged: (event) => {
-                        if (event.isSelected) {
-                            this.targetPort.fireEvent({}, "link-selected");
-                            this.outPort.fireEvent({}, "link-selected");
-                        } else {
-                            this.targetPort.fireEvent({}, "link-unselected");
-                            this.outPort.fireEvent({}, "link-unselected");
-                        }
-                    },
-                })
-                this.getModel().addAll(link);
-                this.targetFieldFQN = this.targetPort.fieldFQN;
-            }
-        } else {
-            if (this.sourcePort && this.targetPort) {
-                const link = new DataMapperLinkModel(undefined, undefined, true);
-                link.setSourcePort(this.sourcePort);
-                link.setTargetPort(this.targetPort);
-                this.sourcePort.addLinkedPort(this.targetPort);
-                link.registerListener({
-                    selectionChanged: (event) => {
-                        if (event.isSelected) {
-                            this.sourcePort.fireEvent({}, "link-selected");
-                            this.targetPort.fireEvent({}, "link-selected");
-                        } else {
-
-                            this.sourcePort.fireEvent({}, "link-unselected");
-                            this.targetPort.fireEvent({}, "link-unselected");
-                        }
-                    },
-                })
-                this.getModel().addAll(link);
-            }
-        }
-    }
-
-    public updatePosition() {
-        if (this.targetPort){
-            const position = this.targetPort.getPosition()
-            this.setPosition(OFFSETS.QUERY_EXPRESSION_NODE.X, position.y - 2)
-        }
-    }
-
-    public deleteLink(): void {
-        let modifications: STModification[];
-        const dmNode = this.getModel().getNodes().find(node =>
-            node instanceof MappingConstructorNode || node instanceof ListConstructorNode || node instanceof PrimitiveTypeNode
-        ) as MappingConstructorNode | ListConstructorNode | PrimitiveTypeNode;
-        if (dmNode) {
-            if (STKindChecker.isSpecificField(this.parentNode)) {
-                const rootConstruct = dmNode.value.expression;
-                const linkDeleteVisitor = new LinkDeletingVisitor(this.parentNode.position as NodePosition, rootConstruct);
-                traversNode(this.context.selection.selectedST.stNode, linkDeleteVisitor);
-                const nodePositionsToDelete = linkDeleteVisitor.getPositionToDelete();
-                modifications = [{
-                    type: "DELETE",
-                    ...nodePositionsToDelete
-                }];
-            } else {
-                modifications = [{
-                    type: "INSERT",
-                    config: {
-                        "STATEMENT": getDefaultValue(dmNode.typeDef?.typeName)
-                    },
-                    ...this.value.position
-                }];
-            }
-        }
-
-        this.context.applyModifications(modifications);
-    }
-
-    public setHasScreenWidthChanged(hasScreenWidthChanged: boolean): void {
-        this.hasScreenWidthChanged = hasScreenWidthChanged;
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/QueryExpression/QueryExpressionNodeFactory.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/QueryExpression/QueryExpressionNodeFactory.tsx
deleted file mode 100644
index e55f3e8b3e9..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/QueryExpression/QueryExpressionNodeFactory.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-
-import * as React from 'react';
-
-import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
-import { DiagramEngine } from '@projectstorm/react-diagrams-core';
-import "reflect-metadata";
-import { container, injectable, singleton } from "tsyringe";
-
-import { IDataMapperNodeFactory } from '../commons/DataMapperNode';
-
-import { QueryExpressionNode, QUERY_EXPR_NODE_TYPE } from './QueryExpressionNode';
-import { QueryExpressionNodeWidget } from './QueryExpressionNodeWidget';
-import { expandArrayFn } from '../../utils/dm-utils';
-import { useDMFocusedViewStateStore } from '../../../../store/store';
-
-@injectable()
-@singleton()
-export class QueryExpressionNodeFactory extends AbstractReactFactory<QueryExpressionNode, DiagramEngine> implements IDataMapperNodeFactory {
-	constructor() {
-		super(QUERY_EXPR_NODE_TYPE);
-	}
-
-	generateReactWidget(event: { model: QueryExpressionNode; }): JSX.Element {
-		const { sourcePortFQN, targetPortFQN, resetFocusedViewState } = useDMFocusedViewStateStore.getState();
-		const { sourcePort: queryExprSrcPort, targetPort: queryExprTgtPort } = event.model;
-
-		if (queryExprSrcPort?.fieldFQN === sourcePortFQN && queryExprTgtPort?.fieldFQN === targetPortFQN) {
-			// Handle automatic navigation to the focused node
-			resetFocusedViewState();
-			expandArrayFn(event.model);
-		}
-
-		const inputPortHasLinks = Object.keys(event.model.inPort.links).length;
-		const outputPortHasLinks = Object.keys(event.model.outPort.links).length;
-		if (inputPortHasLinks && outputPortHasLinks) {
-			return <QueryExpressionNodeWidget engine={this.engine} node={event.model} />;
-		}
-		return null;
-	}
-
-	generateModel(): QueryExpressionNode {
-		return undefined;
-	}
-}
-
-container.register("NodeFactory",  {useClass: QueryExpressionNodeFactory});
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/QueryExpression/QueryExpressionNodeWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/QueryExpression/QueryExpressionNodeWidget.tsx
deleted file mode 100644
index 20b97473638..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/QueryExpression/QueryExpressionNodeWidget.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import * as React from 'react';
-
-import { DiagramEngine } from '@projectstorm/react-diagrams';
-import classnames from "classnames";
-
-import { DataMapperPortWidget } from '../../Port';
-import { expandArrayFn } from "../../utils/dm-utils";
-
-import {
-    QueryExpressionNode,
-} from './QueryExpressionNode';
-import { Button, Codicon, ProgressRing, Tooltip } from '@wso2/ui-toolkit';
-import { useIntermediateNodeStyles } from '../../../styles';
-
-export interface QueryExprAsSFVNodeWidgetProps {
-    node: QueryExpressionNode;
-    engine: DiagramEngine;
-}
-
-export function QueryExpressionNodeWidget(props: QueryExprAsSFVNodeWidgetProps) {
-    const { node, engine } = props;
-    const classes = useIntermediateNodeStyles();
-
-    const [deleteInProgress, setDeleteInProgress] = React.useState(false);
-
-    const deleteQueryLink = async () => {
-        setDeleteInProgress(true);
-        await node.deleteLink();
-    }
-
-    const loadingScreen = (
-        <ProgressRing sx={{ height: '16px', width: '16px' }} />
-    );
-
-    return (!node.hidden && (
-        <>
-            {(!!node.sourcePort && !!node.inPort && !!node.outPort) && (
-                <div className={classes.root} >
-                    <div className={classes.header}>
-                        <DataMapperPortWidget engine={engine} port={node.inPort} />
-                        <Tooltip content={"Query Expression"} position="bottom">
-                            <Codicon name="list-unordered" iconSx={{ color: "var(--vscode-input-placeholderForeground)" }} />
-                        </Tooltip>
-                        <Button
-                            appearance="icon"
-                            tooltip="Map array elements"
-                            onClick={() => expandArrayFn(node)}
-                            data-testid={`expand-query-${node?.targetFieldFQN}`}
-                        >
-                            <Codicon name="export" iconSx={{ color: "var(--vscode-input-placeholderForeground)" }} />
-                        </Button>
-                        {deleteInProgress ? (
-                            <div className={classnames(classes.element, classes.loadingContainer)}>
-                                {loadingScreen}
-                            </div>
-                        ) : (
-                            <Button
-                                appearance="icon"
-                                tooltip="Delete"
-                                onClick={deleteQueryLink} data-testid={`delete-query-${node?.targetFieldFQN}`}
-                            >
-                                <Codicon name="trash" iconSx={{ color: "var(--vscode-errorForeground)" }} />
-                            </Button>
-                        )}
-                        <DataMapperPortWidget engine={engine} port={node.outPort} />
-                    </div>
-                </div>
-            )}
-        </>
-    ));
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/QueryExpression/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/QueryExpression/index.ts
deleted file mode 100644
index 2ec0e884b25..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/QueryExpression/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./QueryExpressionNode";
-export * from "./QueryExpressionNodeFactory";
-export * from "./QueryExpressionNodeWidget";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/RequiredParam/RequiredParamNode.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/RequiredParam/RequiredParamNode.ts
deleted file mode 100644
index 5aa583f01c2..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/RequiredParam/RequiredParamNode.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { Point } from "@projectstorm/geometry";
-import { PrimitiveBalType, TypeField } from "@wso2/ballerina-core";
-import { RequiredParam } from "@wso2/syntax-tree";
-
-import { useDMSearchStore } from "../../../../store/store";
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { getSearchFilteredInput, getTypeOfInputParam, isOptionalAndNillableField } from "../../utils/dm-utils";
-import { DataMapperNodeModel, TypeDescriptor } from "../commons/DataMapperNode";
-
-export const REQ_PARAM_NODE_TYPE = "datamapper-node-required-param";
-const NODE_ID = "required-param-node";
-
-export class RequiredParamNode extends DataMapperNodeModel {
-    public typeDef: TypeField;
-    public x: number;
-    public numberOfFields:  number;
-    originalTypeDef: TypeField;
-
-    constructor(
-        public context: IDataMapperContext,
-        public value: RequiredParam,
-        public typeDesc: TypeDescriptor,
-        public hasNoMatchingFields?: boolean
-    ) {
-        super(
-            `${NODE_ID}${!hasNoMatchingFields && value.paramName.value}`,
-            context,
-            REQ_PARAM_NODE_TYPE
-        );
-        this.numberOfFields = 1;
-        if (!hasNoMatchingFields) {
-            this.originalTypeDef = this.value ? getTypeOfInputParam(this.value, this.context.ballerinaVersion) : undefined;
-            this.typeDef = this.originalTypeDef;
-        }
-    }
-
-    async initPorts() {
-        this.numberOfFields = 1;
-        this.typeDef = this.getSearchFilteredType();
-        this.hasNoMatchingFields = !this.typeDef;
-        if (this.typeDef) {
-            const parentPort = this.addPortsForHeaderField(this.typeDef, this.value.paramName.value, "OUT", undefined, this.context.collapsedFields);
-
-            if (this.typeDef.typeName === PrimitiveBalType.Record) {
-                const fields = this.typeDef.fields;
-                fields.forEach((subField) => {
-                    const isOptional = isOptionalAndNillableField(subField);
-                    this.numberOfFields += this.addPortsForInputRecordField(
-                        subField, "OUT", this.value.paramName.value, this.value.paramName.value, '',
-                        parentPort, this.context.collapsedFields, parentPort.collapsed, isOptional
-                    );
-                });
-            } else {
-                const isOptional = isOptionalAndNillableField(this.typeDef);
-                this.numberOfFields += this.addPortsForInputRecordField(
-                    this.typeDef, "OUT", this.value.paramName.value, this.value.paramName.value,
-                    '', parentPort, this.context.collapsedFields, parentPort.collapsed, isOptional
-                );
-            }
-        }
-    }
-
-    public getSearchFilteredType() {
-        if (this.value) {
-            const searchValue = useDMSearchStore.getState().inputSearch;
-
-            const matchesParamName = this.value?.paramName?.value?.toLowerCase()?.includes(searchValue?.toLowerCase());
-            const type = matchesParamName
-                ? this.originalTypeDef
-                : getSearchFilteredInput(this.originalTypeDef,  this.value?.paramName?.value);
-            return type;
-        }
-    }
-
-    async initLinks() {
-        // Currently we create links from "IN" ports and back tracing the inputs.
-    }
-
-    setPosition(point: Point): void;
-    setPosition(x: number, y: number): void;
-    setPosition(x: unknown, y?: unknown): void {
-        if (typeof x === 'number' && typeof y === 'number'){
-            if (!this.x){
-                this.x = x;
-            }
-            super.setPosition(this.x, y);
-        }
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/RequiredParam/RequiredParamNodeFactory.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/RequiredParam/RequiredParamNodeFactory.tsx
deleted file mode 100644
index dbf2c70539d..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/RequiredParam/RequiredParamNodeFactory.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-// tslint:disable: jsx-no-lambda jsx-no-multiline-js
-import * as React from 'react';
-
-import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
-import { DiagramEngine } from '@projectstorm/react-diagrams-core';
-import { PrimitiveBalType } from "@wso2/ballerina-core";
-import "reflect-metadata";
-import { container, injectable, singleton } from "tsyringe";
-
-import { RecordFieldPortModel } from '../../Port';
-import { IDataMapperNodeFactory } from '../commons/DataMapperNode';
-import { PrimitiveTypeItemWidget } from '../commons/PrimitiveTypeItemWidget';
-import { RecordTypeTreeWidget } from "../commons/RecordTypeTreeWidget/RecordTypeTreeWidget";
-import { InputSearchNoResultFound, SearchNoResultFoundKind } from "../commons/Search";
-
-import { RequiredParamNode, REQ_PARAM_NODE_TYPE } from './RequiredParamNode';
-
-@injectable()
-@singleton()
-export class RequiredParamNodeFactory extends AbstractReactFactory<RequiredParamNode, DiagramEngine> implements IDataMapperNodeFactory {
-    constructor() {
-        super(REQ_PARAM_NODE_TYPE);
-    }
-
-    generateReactWidget(event: { model: RequiredParamNode; }): JSX.Element {
-        if (event.model.hasNoMatchingFields && !event.model.typeDef) {
-            return (
-                <InputSearchNoResultFound kind={SearchNoResultFoundKind.InputField} />
-            );
-        } else if (event.model.typeDef &&
-            (event.model.typeDef.typeName === PrimitiveBalType.Record ||
-                event.model.typeDef.typeName === PrimitiveBalType.Union)
-        ) {
-            return (
-                <RecordTypeTreeWidget
-                    engine={this.engine}
-                    id={event.model.value && event.model.value.paramName.value}
-                    typeDesc={event.model.typeDef}
-                    getPort={(portId: string) => event.model.getPort(portId) as RecordFieldPortModel}
-                    handleCollapse={(fieldName: string, expand?: boolean) => event.model.context.handleCollapse(fieldName, expand)}
-                />
-            );
-        }
-        return (
-            <PrimitiveTypeItemWidget
-                engine={this.engine}
-                id={event.model.value.paramName.value}
-                typeDesc={event.model.typeDef}
-                getPort={(portId: string) => event.model.getPort(portId) as RecordFieldPortModel}
-                valueLabel={event.model.value.paramName.value}
-            />
-        )
-    }
-
-    generateModel(): RequiredParamNode {
-        return undefined;
-    }
-}
-
-container.register("NodeFactory", { useClass: RequiredParamNodeFactory });
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/RequiredParam/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/RequiredParam/index.ts
deleted file mode 100644
index 1729c8e3b09..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/RequiredParam/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./RequiredParamNode";
-export * from "./RequiredParamNodeFactory";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/UnionTypeListItem.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/UnionTypeListItem.tsx
deleted file mode 100644
index 310f270280d..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/UnionTypeListItem.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js no-submodule-imports
-import React, { useState } from "react";
-
-import { NodePosition, STNode } from "@wso2/syntax-tree";
-import { Icon, ProgressRing, Tooltip, Typography } from "@wso2/ui-toolkit";
-
-import { IDataMapperContext} from "../../../../utils/DataMapperContext/DataMapperContext";
-import { getModification } from "../../utils/modifications";
-import { useUnionTypeNodeStyles } from "../../../styles";
-import { UnionTypeInfo } from "../../utils/union-type-utils";
-import { getDefaultValue, getTypeName } from "../../utils/dm-utils";
-
-export interface UnionTypeListItemProps {
-    key: number;
-    context: IDataMapperContext;
-    type: string;
-    hasInvalidTypeCast: boolean;
-    innermostExpr: STNode;
-    typeCastExpr: STNode;
-    unionTypeInfo: UnionTypeInfo;
-}
-
-export function UnionTypeListItem(props: UnionTypeListItemProps) {
-    const { key, context, type, hasInvalidTypeCast, innermostExpr, typeCastExpr, unionTypeInfo } = props;
-    const [isAddingTypeCast, setIsAddingTypeCast] = useState(false);
-    const classes = useUnionTypeNodeStyles();
-
-    const onClickOnListItem = async () => {
-        setIsAddingTypeCast(true)
-        try {
-            const selectedType = unionTypeInfo.unionType.members.find(member => {
-                return getTypeName(member) === type;
-            });
-            const defaultValue = selectedType ? getDefaultValue(selectedType.typeName) : `()`;
-            let targetPosition: NodePosition;
-            const valueExprPosition: NodePosition = innermostExpr.position;
-            if (hasInvalidTypeCast) {
-                const typeCastExprPosition: NodePosition = typeCastExpr.position;
-                targetPosition = {
-                    ...typeCastExprPosition,
-                    endLine: valueExprPosition.startLine,
-                    endColumn: valueExprPosition.startColumn
-                };
-            } else {
-                targetPosition = valueExprPosition;
-            }
-            const modification = [getModification(`<${type}>${defaultValue}`, targetPosition)];
-            await context.applyModifications(modification);
-        } finally {
-            setIsAddingTypeCast(false);
-        }
-    };
-
-    return (
-        <Tooltip
-            content={type}
-            position="right"
-        >
-            <div
-                key={key}
-                onMouseDown={onClickOnListItem}
-                className={classes.unionTypeListItem}
-            >
-                {isAddingTypeCast ? (
-                    <ProgressRing />
-                ) : (
-                    <Icon
-                        name="symbol-struct-icon"
-                        sx={{ height: "15px", width: "15px" }}
-                        iconSx={{ display: "flex", fontSize: "15px", color: "var(--vscode-input-placeholderForeground)" }}
-                    />
-                )}
-                <Typography variant="h4" className={classes.unionTypeValue} sx={{ margin: "0 0 0 6px" }} >
-                    {type}
-                </Typography>
-            </div>
-        </Tooltip>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/UnionTypeNode.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/UnionTypeNode.ts
deleted file mode 100644
index abf137d64a3..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/UnionTypeNode.ts
+++ /dev/null
@@ -1,498 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { Point } from "@projectstorm/geometry";
-import { STModification, TypeField, PrimitiveBalType } from "@wso2/ballerina-core";
-import {
-    ExpressionFunctionBody,
-    IdentifierToken,
-    NodePosition,
-    SelectClause,
-    STKindChecker,
-    STNode,
-    traversNode,
-} from "@wso2/syntax-tree";
-
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { ExpressionLabelModel } from "../../Label";
-import { DataMapperLinkModel } from "../../Link";
-import { EditableRecordField } from "../../Mappings/EditableRecordField";
-import { FieldAccessToSpecificFied } from "../../Mappings/FieldAccessToSpecificFied";
-import { RecordFieldPortModel } from "../../Port";
-import {
-    LIST_CONSTRUCTOR_TARGET_PORT_PREFIX,
-    MAPPING_CONSTRUCTOR_TARGET_PORT_PREFIX,
-    PRIMITIVE_TYPE_TARGET_PORT_PREFIX,
-    UNION_TYPE_TARGET_PORT_PREFIX
-} from "../../utils/constants";
-import {
-    getBalRecFieldName,
-    getDefaultValue,
-    getExprBodyFromLetExpression,
-    getInnermostExpressionBody,
-    getInputNodeExpr,
-    getInputPortsForExpr,
-    getOutputPortForField,
-    getSearchFilteredOutput,
-    getTypeFromStore,
-    getTypeName,
-    getTypeOfValue,
-    isArrayOrRecord
-} from "../../utils/dm-utils";
-import { filterDiagnostics } from "../../utils/ls-utils";
-import { enrichAndProcessType } from "../../utils/type-utils";
-import { getResolvedType, getSupportedUnionTypes, getUnionTypes, isAnydataType } from "../../utils/union-type-utils";
-import { LinkDeletingVisitor } from "../../visitors/LinkDeletingVistior";
-import { DataMapperNodeModel, TypeDescriptor } from "../commons/DataMapperNode";
-
-export const UNION_TYPE_NODE_TYPE = "data-mapper-node-union-type";
-const NODE_ID = "union-type-node";
-
-export class UnionTypeNode extends DataMapperNodeModel {
-
-    public recordField: EditableRecordField;
-    public typeName: string;
-    public rootName: string;
-    public resolvedType: TypeField;
-    public hasInvalidTypeCast: boolean;
-    public mappings: FieldAccessToSpecificFied[];
-    public unionTypeDef: TypeField;
-    public unionTypes: string[];
-    public innermostExpr: STNode;
-    public typeCastExpr: STNode;
-    public x: number;
-    public y: number;
-
-    constructor(
-        public context: IDataMapperContext,
-        public value: ExpressionFunctionBody | SelectClause,
-        public typeIdentifier: TypeDescriptor | IdentifierToken,
-        public typeDef: TypeField
-    ) {
-        super(
-            NODE_ID,
-            context,
-            UNION_TYPE_NODE_TYPE
-        );
-        this.innermostExpr = getInnermostExpressionBody(this.value.expression);
-        this.typeCastExpr = this.getTypeCastExpr();
-        this.unionTypeDef = this.typeDef.typeName === PrimitiveBalType.Union
-            ? this.typeDef
-            : this.typeDef.typeName === PrimitiveBalType.Array && this.typeDef.memberType.typeName === PrimitiveBalType.Union
-                ? this.typeDef.memberType
-                : undefined;
-        this.unionTypes = this.unionTypeDef && getUnionTypes(this.unionTypeDef);
-    }
-
-    async initPorts() {
-        this.typeName = getTypeName(this.typeDef);
-        this.resolveType();
-        const renderResolvedTypes = !this.shouldRenderUnionType();
-        const isSelectClause = STKindChecker.isSelectClause(this.innermostExpr);
-        if (this.resolvedType && renderResolvedTypes) {
-            this.typeDef = getSearchFilteredOutput(this.resolvedType);
-            if (this.typeDef) {
-                this.rootName = this.typeDef?.name
-                    ? getBalRecFieldName(this.typeDef.name)
-                    : this.resolvedType.typeName === PrimitiveBalType.Array
-                        ? this.typeDef.typeName
-                        : undefined;
-                if (isSelectClause
-                    && this.typeDef.typeName === PrimitiveBalType.Array
-                    && this.typeDef?.memberType)
-                {
-                    this.rootName = this.typeDef.memberType.typeName === PrimitiveBalType.Record
-                        ? this.typeDef.memberType?.name
-                        : this.typeIdentifier.value || this.typeIdentifier.source;
-                }
-                const [valueEnrichedType, type] = enrichAndProcessType(this.typeDef, this.innermostExpr,
-                    this.context.selection.selectedST.stNode);
-                this.typeDef = type;
-                this.addPorts(valueEnrichedType, isSelectClause);
-            }
-        } else {
-            this.rootName = undefined;
-            this.addPortsForHeaderField(this.typeDef, this.rootName, "IN", UNION_TYPE_TARGET_PORT_PREFIX, [], isSelectClause);
-        }
-    }
-
-    initLinks(): void {
-        this.mappings = this.genMappings(this.value.expression);
-        this.createLinks(this.mappings);
-    }
-
-    private createLinks(mappings: FieldAccessToSpecificFied[]) {
-        mappings.forEach((mapping) => {
-            const { fields, value, otherVal } = mapping;
-            const field = fields[fields.length - 1];
-            if (!value || !value.source) {
-                // Unsupported mapping
-                return;
-            }
-            const inputNode = getInputNodeExpr(value, this);
-            let inPort: RecordFieldPortModel;
-            if (inputNode) {
-                inPort = getInputPortsForExpr(inputNode, value);
-            }
-            const [outPort, mappedOutPort] = this.getOutPort(fields);
-            const diagnosticsPosition = (this.shouldRenderUnionType()
-                ? this.resolvedType && this.typeCastExpr
-                    ? this.typeCastExpr.position
-                    : this.innermostExpr.position
-                : otherVal.position || value.position) as NodePosition;
-            const diagnostics = filterDiagnostics(this.context.diagnostics, diagnosticsPosition);
-            const lm = new DataMapperLinkModel(value, diagnostics, true);
-            if (inPort && mappedOutPort) {
-                let keepDefault = this.resolvedType && this.resolvedType.typeName === PrimitiveBalType.Array;
-                if (this.resolvedType && this.resolvedType.typeName === PrimitiveBalType.Record) {
-                    const mappedField = mappedOutPort.editableRecordField && mappedOutPort.editableRecordField.type;
-                    keepDefault = ((mappedField && !mappedField?.name
-                            && mappedField.typeName !== PrimitiveBalType.Array
-                            && mappedField.typeName !== PrimitiveBalType.Record)
-                        || !STKindChecker.isMappingConstructor(this.value.expression)
-                    );
-                }
-                lm.addLabel(new ExpressionLabelModel({
-                    value: otherVal?.source || value.source,
-                    valueNode: otherVal || value,
-                    context: this.context,
-                    link: lm,
-                    field: STKindChecker.isSpecificField(field)
-                        ? field.valueExpr
-                        : field,
-                    editorLabel: STKindChecker.isSpecificField(field)
-                        ? field.fieldName.value as string
-                        : `${outPort.fieldFQN.split('.').pop()}[${outPort.index}]`,
-                    deleteLink: () => this.deleteField(field, keepDefault)
-                }));
-                lm.setTargetPort(mappedOutPort);
-                lm.setSourcePort(inPort);
-                inPort.addLinkedPort(mappedOutPort);
-                lm.registerListener({
-                    selectionChanged(event) {
-                        if (event.isSelected) {
-                            inPort.fireEvent({}, "link-selected");
-                            mappedOutPort.fireEvent({}, "link-selected");
-                        } else {
-                            inPort.fireEvent({}, "link-unselected");
-                            mappedOutPort.fireEvent({}, "link-unselected");
-                        }
-                    },
-                })
-                this.getModel().addAll(lm);
-            }
-        });
-    }
-
-    private resolveType() {
-        const bodyExpr = STKindChecker.isLetExpression(this.value.expression)
-            ? getExprBodyFromLetExpression(this.value.expression)
-            : this.value.expression;
-        const supportedTypes = getSupportedUnionTypes(this.unionTypeDef, this.typeIdentifier);
-        if (STKindChecker.isTypeCastExpression(bodyExpr)) {
-            // when the expr is wrapped with a type cast
-            const type = bodyExpr.typeCastParam?.type;
-            this.resolvedType = this.unionTypeDef.members.find((member) => {
-                return getResolvedType(member, type);
-            });
-            this.hasInvalidTypeCast = !this.resolvedType;
-        } else if (supportedTypes.length === 1) {
-            // when the specified union type is narrowed down to a single type
-            this.resolvedType = this.unionTypeDef.members.find(member => {
-                const typeName = getTypeName(member);
-                return typeName === supportedTypes[0];
-            });
-        } else {
-            // when the type is derivable from the expr
-            const typeFromStore = getTypeFromStore(this.innermostExpr.position as NodePosition);
-            const typeName = getTypeName(typeFromStore);
-            this.resolvedType = !!typeFromStore
-                && typeFromStore.typeName !== '$CompilationError$'
-                && supportedTypes.includes(typeName)
-                && typeFromStore;
-            if (!!typeFromStore && !this.resolvedType) {
-                if (supportedTypes.includes("anydata") || supportedTypes.includes("any")) {
-                    this.resolvedType = this.unionTypeDef.members.find((member) => {
-                        return isAnydataType(member.typeName);
-                    });
-                }
-            }
-        }
-    }
-
-    private addPorts(valueEnrichedType: EditableRecordField, isSelectClause: boolean) {
-        switch (this.resolvedType.typeName) {
-            case PrimitiveBalType.Record:
-                this.addPortsForMappingConstructor(valueEnrichedType, isSelectClause);
-                break;
-            case PrimitiveBalType.Array:
-                this.addPortsForListConstructor(valueEnrichedType, isSelectClause);
-                break;
-            default:
-                this.addPortsForPrimitiveType(valueEnrichedType);
-                break;
-        }
-    }
-
-    private addPortsForMappingConstructor(valueEnrichedType: EditableRecordField, isSelectClause: boolean) {
-        const parentPort = this.addPortsForHeaderField(this.typeDef, this.rootName, "IN",
-            MAPPING_CONSTRUCTOR_TARGET_PORT_PREFIX, this.context.collapsedFields,
-            isSelectClause, valueEnrichedType);
-        if (valueEnrichedType.type.typeName === PrimitiveBalType.Record) {
-            this.recordField = valueEnrichedType;
-            if (this.recordField.childrenTypes.length) {
-                this.recordField.childrenTypes.forEach((field) => {
-                    this.addPortsForOutputRecordField(field, "IN", this.rootName, undefined,
-                        MAPPING_CONSTRUCTOR_TARGET_PORT_PREFIX, parentPort,
-                        this.context.collapsedFields, parentPort.collapsed);
-                });
-            }
-        } else if (valueEnrichedType.type.typeName === PrimitiveBalType.Array && isSelectClause) {
-            // valueEnrichedType only contains a single element as it is being used within the select clause in the query expression
-            this.recordField = valueEnrichedType.elements[0].member;
-            if (this.recordField.childrenTypes.length) {
-                this.recordField.childrenTypes.forEach((field) => {
-                    this.addPortsForOutputRecordField(field, "IN", this.rootName, undefined,
-                        MAPPING_CONSTRUCTOR_TARGET_PORT_PREFIX, parentPort,
-                        this.context.collapsedFields, parentPort.collapsed, true);
-                });
-            }
-        }
-    }
-
-    private addPortsForListConstructor(valueEnrichedType: EditableRecordField, isSelectClause: boolean) {
-        this.recordField = valueEnrichedType;
-        const parentPort = this.addPortsForHeaderField(this.typeDef, this.rootName, "IN",
-            LIST_CONSTRUCTOR_TARGET_PORT_PREFIX, this.context.collapsedFields, isSelectClause, this.recordField);
-        if (valueEnrichedType.type.typeName === PrimitiveBalType.Array) {
-            if (isSelectClause) {
-                this.recordField = valueEnrichedType.elements[0].member;
-            }
-            if (this.recordField?.elements && this.recordField.elements.length > 0) {
-                this.recordField.elements.forEach((field, index) => {
-                    this.addPortsForOutputRecordField(field.member, "IN", this.rootName, index,
-                        LIST_CONSTRUCTOR_TARGET_PORT_PREFIX, parentPort,
-                        this.context.collapsedFields, parentPort.collapsed);
-                });
-            }
-        }
-    }
-
-    private addPortsForPrimitiveType(valueEnrichedType: EditableRecordField) {
-        this.recordField = valueEnrichedType;
-        if (valueEnrichedType.type.typeName === PrimitiveBalType.Array
-            && STKindChecker.isSelectClause(this.value)
-        ) {
-            this.recordField = valueEnrichedType.elements[0].member;
-        }
-        const parentPort = this.addPortsForHeaderField(this.typeDef, '', "IN",
-            PRIMITIVE_TYPE_TARGET_PORT_PREFIX, this.context.collapsedFields,
-            STKindChecker.isSelectClause(this.value), this.recordField);
-        this.addPortsForOutputRecordField(this.recordField, "IN", this.recordField.type.typeName,
-            undefined, PRIMITIVE_TYPE_TARGET_PORT_PREFIX, parentPort,
-            this.context.collapsedFields, parentPort.collapsed, STKindChecker.isSelectClause(this.value));
-    }
-
-    private getOutPort(fields: STNode[]): [RecordFieldPortModel, RecordFieldPortModel] {
-        if (this.shouldRenderUnionType()) {
-            return this.getOutPortForUnionType();
-        }
-        switch (this.resolvedType.typeName) {
-            case PrimitiveBalType.Record:
-                return this.getOutPortForMappingConstructor(fields);
-            case PrimitiveBalType.Array:
-                return this.getOutPortForListConstructor(fields);
-            default:
-                return this.getOutPortForPrimitiveType(fields);
-        }
-    }
-
-    private getOutPortForMappingConstructor(fields: STNode[]): [RecordFieldPortModel, RecordFieldPortModel] {
-        return getOutputPortForField(fields,
-            this.recordField,
-            MAPPING_CONSTRUCTOR_TARGET_PORT_PREFIX,
-            (portId: string) =>  this.getPort(portId) as RecordFieldPortModel)
-    }
-
-    private getOutPortForListConstructor(fields: STNode[]): [RecordFieldPortModel, RecordFieldPortModel] {
-        let outPort: RecordFieldPortModel;
-        let mappedOutPort: RecordFieldPortModel;
-        const body = getInnermostExpressionBody(this.recordField.value);
-        if (this.recordField.type.typeName === PrimitiveBalType.Array
-            && this.recordField?.value
-            && !STKindChecker.isListConstructor(body)
-        ) {
-            outPort = this.getPort(`${LIST_CONSTRUCTOR_TARGET_PORT_PREFIX}.${this.rootName}.IN`) as RecordFieldPortModel;
-            mappedOutPort = outPort;
-        } else {
-            [outPort, mappedOutPort] = getOutputPortForField(fields,
-                this.recordField,
-                LIST_CONSTRUCTOR_TARGET_PORT_PREFIX,
-                (portId: string) =>  this.getPort(portId) as RecordFieldPortModel,
-                this.rootName);
-        }
-        return [outPort, mappedOutPort];
-    }
-
-    private getOutPortForPrimitiveType(fields: STNode[]): [RecordFieldPortModel, RecordFieldPortModel] {
-        let outPort: RecordFieldPortModel;
-        let mappedOutPort: RecordFieldPortModel;
-        if (!isArrayOrRecord(this.recordField.type)) {
-            outPort = this.getPort(`${PRIMITIVE_TYPE_TARGET_PORT_PREFIX}.${
-                this.recordField.type.typeName}.IN`) as RecordFieldPortModel;
-            mappedOutPort = outPort;
-        } else {
-            [outPort, mappedOutPort] = getOutputPortForField(fields,
-                this.recordField,
-                PRIMITIVE_TYPE_TARGET_PORT_PREFIX,
-                (portId: string) =>  this.getPort(portId) as RecordFieldPortModel);
-        }
-        return [outPort, mappedOutPort];
-    }
-
-    private getOutPortForUnionType(): [RecordFieldPortModel, RecordFieldPortModel] {
-        const outPort = this.getPort(`${UNION_TYPE_TARGET_PORT_PREFIX}.IN`) as RecordFieldPortModel;
-        return [outPort, outPort];
-    }
-
-    public shouldRenderUnionType() {
-        return !this.resolvedType
-            || !STKindChecker.isMappingConstructor(this.innermostExpr) && this.resolvedType.typeName === PrimitiveBalType.Record
-            || !STKindChecker.isListConstructor(this.innermostExpr) && this.resolvedType.typeName === PrimitiveBalType.Array;
-    }
-
-    public getTypeCastExpr(): STNode {
-        let valueExpr: STNode = this.value.expression;
-        if (STKindChecker.isLetExpression(valueExpr)) {
-            valueExpr = getExprBodyFromLetExpression(valueExpr);
-        }
-        return STKindChecker.isTypeCastExpression(valueExpr) ? valueExpr : undefined;
-    }
-
-    async deleteField(field: STNode, keepDefault?: boolean) {
-        if (this.shouldRenderUnionType()) {
-            await this.deleteLinkForUnionType(field);
-        }
-        switch (this.resolvedType.typeName) {
-            case PrimitiveBalType.Record:
-                await this.deleteLinkForMappingConstructor(field, keepDefault);
-                break;
-            case PrimitiveBalType.Array:
-                await this.deleteLinkForListConstructor(field, keepDefault);
-                break;
-            default:
-                await this.deleteLinkForPrimitiveType(field);
-        }
-    }
-
-    async deleteLinkForMappingConstructor(field: STNode, keepDefault?: boolean) {
-        let modifications: STModification[];
-        const typeOfValue = getTypeOfValue(this.recordField, field.position);
-        if (keepDefault && !STKindChecker.isSpecificField(field)) {
-            modifications = [{
-                type: "INSERT",
-                config: {
-                    "STATEMENT": getDefaultValue(typeOfValue?.typeName)
-                },
-                ...field.position
-            }];
-        } else if (STKindChecker.isSelectClause(this.value) && STKindChecker.isSpecificField(field)) {
-            // if Within query expression expanded view
-            modifications = [{
-                type: "DELETE",
-                ...field.valueExpr?.position
-            }];
-        } else {
-            const linkDeleteVisitor = new LinkDeletingVisitor(field.position as NodePosition, this.innermostExpr);
-            traversNode(this.value.expression, linkDeleteVisitor);
-            const nodePositionsToDelete = linkDeleteVisitor.getPositionToDelete();
-            modifications = [{
-                type: "DELETE",
-                ...nodePositionsToDelete
-            }];
-        }
-
-        await this.context.applyModifications(modifications);
-    }
-
-    async deleteLinkForListConstructor(field: STNode, keepDefault?: boolean) {
-        let modifications: STModification[];
-        const typeOfValue = getTypeOfValue(this.recordField, field.position);
-        if (keepDefault && !STKindChecker.isSpecificField(field)) {
-            modifications = [{
-                type: "INSERT",
-                config: {
-                    "STATEMENT": getDefaultValue(typeOfValue?.typeName)
-                },
-                ...field.position
-            }];
-        } else {
-            const linkDeleteVisitor = new LinkDeletingVisitor(field.position, this.innermostExpr);
-            traversNode(this.innermostExpr, linkDeleteVisitor);
-            const nodePositionsToDelete = linkDeleteVisitor.getPositionToDelete();
-            modifications = [{
-                type: "DELETE",
-                ...nodePositionsToDelete
-            }]
-        }
-
-        await this.context.applyModifications(modifications);
-    }
-
-    async deleteLinkForPrimitiveType(field: STNode) {
-        const typeOfValue = STKindChecker.isSelectClause(this.value) && this.typeDef?.memberType
-            ? this.typeDef.memberType
-            : this.typeDef;
-        const modifications: STModification[] = [{
-            type: "INSERT",
-            config: {
-                "STATEMENT": getDefaultValue(typeOfValue?.typeName)
-            },
-            ...field.position
-        }];
-
-        await this.context.applyModifications(modifications);
-    }
-
-    async deleteLinkForUnionType(field: STNode) {
-        const modifications: STModification[] = [{
-            type: "INSERT",
-            config: {
-                "STATEMENT": ''
-            },
-            ...field.position
-        }];
-
-        await this.context.applyModifications(modifications);
-    }
-
-    public updatePosition() {
-        this.setPosition(this.position.x, this.position.y);
-    }
-
-    setPosition(point: Point): void;
-    setPosition(x: number, y: number): void;
-    setPosition(x: unknown, y?: unknown): void {
-        if (typeof x === 'number' && typeof y === 'number') {
-            if (!this.x || !this.y) {
-                this.x = x;
-                this.y = y;
-            }
-            super.setPosition(x, y);
-        }
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/UnionTypeNodeFactory.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/UnionTypeNodeFactory.tsx
deleted file mode 100644
index d4cc48e25dc..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/UnionTypeNodeFactory.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js jsx-no-lambda
-import * as React from 'react';
-
-import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
-import { DiagramEngine } from '@projectstorm/react-diagrams-core';
-import { PrimitiveBalType } from "@wso2/ballerina-core";
-import { STKindChecker, STNode } from '@wso2/syntax-tree';
-import "reflect-metadata";
-import { container, injectable, singleton } from "tsyringe";
-
-import { RecordFieldPortModel } from "../../Port";
-import {
-	FUNCTION_BODY_QUERY,
-	LIST_CONSTRUCTOR_TARGET_PORT_PREFIX,
-	MAPPING_CONSTRUCTOR_TARGET_PORT_PREFIX,
-	PRIMITIVE_TYPE_TARGET_PORT_PREFIX,
-	UNION_TYPE_TARGET_PORT_PREFIX
-} from '../../utils/constants';
-import { getTypeName } from "../../utils/dm-utils";
-import { UnionTypeInfo } from "../../utils/union-type-utils";
-import { ArrayTypeOutputWidget } from "../commons/DataManipulationWidget/ArrayTypeOutputWidget";
-import { EditableMappingConstructorWidget } from "../commons/DataManipulationWidget/EditableMappingConstructorWidget";
-import { PrimitiveTypeOutputWidget } from "../commons/DataManipulationWidget/PrimitiveTypeOutputWidget";
-import { IDataMapperNodeFactory } from '../commons/DataMapperNode';
-
-import {
-	UnionTypeNode,
-	UNION_TYPE_NODE_TYPE
-} from './UnionTypeNode';
-import { UnionTypeTreeWidget } from "./UnionTypeTreeWidget";
-
-@injectable()
-@singleton()
-export class UnionTypeNodeFactory extends AbstractReactFactory<UnionTypeNode, DiagramEngine> implements IDataMapperNodeFactory {
-	constructor() {
-		super(UNION_TYPE_NODE_TYPE);
-	}
-
-	generateReactWidget(event: { model: UnionTypeNode; }): JSX.Element {
-		let valueLabel: string;
-		const resolvedType = event.model.resolvedType;
-		const resolvedTypeName = getTypeName(resolvedType);
-		const shouldRenderUnionType = event.model.shouldRenderUnionType();
-
-		if (STKindChecker.isSelectClause(event.model.value)
-			&& event.model.context.selection.selectedST.fieldPath !== FUNCTION_BODY_QUERY)
-		{
-			valueLabel = event.model.typeIdentifier.value as string || event.model.typeIdentifier.source;
-		}
-
-		const unionTypeInfo: UnionTypeInfo = {
-			unionType: event.model.unionTypeDef,
-			typeNames: event.model.unionTypes,
-			resolvedTypeName,
-			isResolvedViaTypeCast: !!event.model.typeCastExpr,
-			valueExpr: event.model.value
-		};
-
-		return (
-			<>
-				{shouldRenderUnionType && (
-					<UnionTypeTreeWidget
-						id={`${UNION_TYPE_TARGET_PORT_PREFIX}${event.model.rootName ? `.${event.model.rootName}` : ''}`}
-						engine={this.engine}
-						context={event.model.context}
-						typeName={event.model.typeName}
-						typeIdentifier={event.model.typeIdentifier}
-						typeDef={event.model.unionTypeDef}
-						hasInvalidTypeCast={event.model.hasInvalidTypeCast}
-						innermostExpr={event.model.innermostExpr}
-						typeCastExpr={event.model.typeCastExpr}
-						unionTypeInfo={unionTypeInfo}
-						getPort={(portId: string) => event.model.getPort(portId) as RecordFieldPortModel}
-					/>
-				)}
-				{!shouldRenderUnionType && resolvedType && resolvedType.typeName === PrimitiveBalType.Record && (
-					<EditableMappingConstructorWidget
-						engine={this.engine}
-						id={`${MAPPING_CONSTRUCTOR_TARGET_PORT_PREFIX}${event.model.rootName ? `.${event.model.rootName}` : ''}`}
-						editableRecordField={event.model.recordField}
-						typeName={event.model.typeName}
-						value={event.model.innermostExpr}
-						getPort={(portId: string) => event.model.getPort(portId) as RecordFieldPortModel}
-						context={event.model.context}
-						mappings={event.model.mappings}
-						valueLabel={valueLabel}
-						deleteField={(node: STNode) => event.model.deleteField(node)}
-						originalTypeName={event.model.typeDef.originalTypeName}
-						unionTypeInfo={unionTypeInfo}
-					/>
-				)}
-				{!shouldRenderUnionType && resolvedType && resolvedType.typeName === PrimitiveBalType.Array && (
-					<ArrayTypeOutputWidget
-						id={`${LIST_CONSTRUCTOR_TARGET_PORT_PREFIX}${event.model.rootName ? `.${event.model.rootName}` : ''}`}
-						engine={this.engine}
-						field={event.model.recordField}
-						getPort={(portId: string) => event.model.getPort(portId) as RecordFieldPortModel}
-						context={event.model.context}
-						typeName={event.model.typeName}
-						valueLabel={valueLabel}
-						deleteField={(node: STNode) => event.model.deleteField(node)}
-						unionTypeInfo={unionTypeInfo}
-					/>
-				)}
-				{!shouldRenderUnionType
-					&& resolvedType
-					&& resolvedType.typeName !== PrimitiveBalType.Record
-					&& resolvedType.typeName !== PrimitiveBalType.Array
-					&& (
-					<PrimitiveTypeOutputWidget
-						id={PRIMITIVE_TYPE_TARGET_PORT_PREFIX}
-						engine={this.engine}
-						field={event.model.recordField}
-						getPort={(portId: string) => event.model.getPort(portId) as RecordFieldPortModel}
-						context={event.model.context}
-						typeName={event.model.typeName}
-						valueLabel={valueLabel}
-						deleteField={(node: STNode) => event.model.deleteField(node)}
-						unionTypeInfo={unionTypeInfo}
-					/>
-				)}
-			</>
-		);
-	}
-
-	generateModel(): UnionTypeNode {
-		return undefined;
-	}
-}
-container.register("NodeFactory", { useClass: UnionTypeNodeFactory });
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/UnionTypeSelector.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/UnionTypeSelector.tsx
deleted file mode 100644
index 075ac5e09ff..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/UnionTypeSelector.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js jsx-no-lambda
-import React from "react";
-
-import { STNode } from "@wso2/syntax-tree";
-
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { UnionTypeInfo } from "../../utils/union-type-utils";
-
-import { UnionTypesList } from "./UnionTypesList";
-
-export interface UnionTypeSelectorProps {
-    context: IDataMapperContext;
-    supportedUnionTypes: string[];
-    hasInvalidTypeCast: boolean;
-    innermostExpr: STNode;
-    typeCastExpr: STNode;
-    unionTypeInfo: UnionTypeInfo;
-}
-
-export function UnionTypeSelector(props: UnionTypeSelectorProps) {
-    const { context, supportedUnionTypes, hasInvalidTypeCast, innermostExpr, typeCastExpr, unionTypeInfo } = props;
-
-    return (
-        <UnionTypesList
-            context={context}
-            unionTypes={supportedUnionTypes}
-            hasInvalidTypeCast={hasInvalidTypeCast}
-            innermostExpr={innermostExpr}
-            typeCastExpr={typeCastExpr}
-            unionTypeInfo={unionTypeInfo}
-        />
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/UnionTypeTreeWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/UnionTypeTreeWidget.tsx
deleted file mode 100644
index 45fb2ae31ee..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/UnionTypeTreeWidget.tsx
+++ /dev/null
@@ -1,318 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js jsx-no-lambda
-import React, { ReactNode, useState } from "react";
-
-import { DiagramEngine } from '@projectstorm/react-diagrams';
-import { STModification, TypeField } from "@wso2/ballerina-core";
-import { IdentifierToken, NodePosition, STKindChecker, STNode } from "@wso2/syntax-tree";
-
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { DataMapperPortWidget, PortState, RecordFieldPortModel } from '../../Port';
-import {
-    getDefaultValue,
-    getExprBodyFromLetExpression,
-    getExprBodyFromTypeCastExpression,
-    getTypeName
-} from "../../utils/dm-utils";
-import { getModification } from "../../utils/modifications";
-import {
-    CLEAR_EXISTING_MAPPINGS_WARNING,
-    getSupportedUnionTypes,
-    INCOMPATIBLE_CASTING_WARNING,
-    isAnydataType,
-    UnionTypeInfo
-} from "../../utils/union-type-utils";
-import { ValueConfigMenu } from "../commons/DataManipulationWidget/ValueConfigButton";
-import { ValueConfigMenuItem } from "../commons/DataManipulationWidget/ValueConfigButton/ValueConfigMenuItem";
-import { TypeDescriptor } from "../commons/DataMapperNode";
-import { OutputSearchHighlight } from "../commons/Search";
-import { TreeBody, TreeContainer, TreeHeader } from '../commons/Tree/Tree';
-
-import { UnionTypeSelector } from "./UnionTypeSelector";
-import { Codicon, Divider, ProgressRing, TruncatedLabel } from "@wso2/ui-toolkit";
-import { useIONodesStyles, useUnionTypeNodeStyles } from "../../../styles";
-
-export interface UnionTypeTreeWidgetProps {
-    id: string;
-    engine: DiagramEngine;
-    context: IDataMapperContext;
-    typeName: string;
-    typeIdentifier: TypeDescriptor | IdentifierToken;
-    typeDef: TypeField;
-    valueLabel?: string;
-    hasInvalidTypeCast: boolean;
-    innermostExpr: STNode;
-    typeCastExpr: STNode;
-    unionTypeInfo: UnionTypeInfo;
-    getPort: (portId: string) => RecordFieldPortModel;
-}
-
-export function UnionTypeTreeWidget(props: UnionTypeTreeWidgetProps) {
-    const {
-        id,
-        engine,
-        context,
-        typeName,
-        typeIdentifier,
-        typeDef,
-        valueLabel,
-        hasInvalidTypeCast,
-        innermostExpr,
-        typeCastExpr,
-        unionTypeInfo,
-        getPort
-    } = props;
-    const { typeNames, resolvedTypeName } = unionTypeInfo;
-    const ioNodesStyles = useIONodesStyles();
-    const unionTypeNodeStyles = useUnionTypeNodeStyles();
-    const [portState, setPortState] = useState<PortState>(PortState.Unselected);
-    const [isHovered, setIsHovered] = useState(false);
-    const [isModifyingTypeCast, setIsModifyingTypeCast] = useState(false);
-
-    const portIn = getPort(`${id}.IN`);
-
-    const handlePortState = (state: PortState) => {
-        setPortState(state)
-    };
-
-    const onMouseEnter = () => {
-        setIsHovered(true);
-    };
-
-    const onMouseLeave = () => {
-        setIsHovered(false);
-    };
-
-    const getUnionType = () => {
-        const typeText: JSX.Element[] = [];
-        typeNames.forEach((type) => {
-            if (type.trim() === resolvedTypeName) {
-                typeText.push(<span className={ioNodesStyles.boldedTypeLabel}>{type}</span>);
-            } else {
-                typeText.push(<>{type}</>);
-            }
-            if (type !== typeNames[typeNames.length - 1]) {
-                typeText.push(<> | </>);
-            }
-        });
-        return typeText;
-    };
-
-    const label = (
-        <TruncatedLabel style={{ marginRight: "auto" }}>
-            <span style={{ marginRight: "auto" }}>
-                {valueLabel && (
-                    <span className={ioNodesStyles.valueLabel}>
-                        <OutputSearchHighlight>{valueLabel}</OutputSearchHighlight>
-                        {typeName && ":"}
-                    </span>
-                )}
-                <span className={ioNodesStyles.outputTypeLabel}>
-                    {getUnionType()}
-                </span>
-            </span>
-        </TruncatedLabel>
-    );
-
-    const getTargetPositionForReInitWithTypeCast = () => {
-        const rootValueExpr = unionTypeInfo.valueExpr.expression;
-        const valueExpr: STNode = STKindChecker.isLetExpression(rootValueExpr)
-            ? getExprBodyFromLetExpression(rootValueExpr)
-            : rootValueExpr;
-
-        return valueExpr.position;
-    }
-
-    const getTargetPositionForWrapWithTypeCast = () => {
-        const rootValueExpr = unionTypeInfo.valueExpr.expression;
-        const valueExpr: STNode = STKindChecker.isLetExpression(rootValueExpr)
-            ? getExprBodyFromLetExpression(rootValueExpr)
-            : rootValueExpr;
-        const valueExprPosition: NodePosition = valueExpr.position;
-
-        let targetPosition: NodePosition = {
-            ...valueExprPosition,
-            endLine: valueExprPosition.startLine,
-            endColumn: valueExprPosition.startColumn
-        }
-
-        if (STKindChecker.isTypeCastExpression(valueExpr)) {
-            const exprBodyPosition = getExprBodyFromTypeCastExpression(valueExpr).position;
-            targetPosition = {
-                ...valueExprPosition,
-                endLine: exprBodyPosition.startLine,
-                endColumn: exprBodyPosition.startColumn
-            };
-        }
-
-        return targetPosition;
-    }
-
-    const handleWrapWithTypeCast = async (type: TypeField, shouldReInitialize?: boolean) => {
-        setIsModifyingTypeCast(true)
-        try {
-            const name = getTypeName(type);
-            const modification: STModification[] = [];
-            if (shouldReInitialize) {
-                const defaultValue = getDefaultValue(type.typeName);
-                const targetPosition = getTargetPositionForReInitWithTypeCast();
-                modification.push(getModification(`<${name}>${defaultValue}`, targetPosition));
-            } else {
-                const targetPosition = getTargetPositionForWrapWithTypeCast();
-                modification.push(getModification(`<${name}>`, targetPosition));
-            }
-            await context.applyModifications(modification);
-        } finally {
-            setIsModifyingTypeCast(false);
-        }
-    };
-
-    const getTypedElementMenuItems = () => {
-        const menuItems: ValueConfigMenuItem[] = [];
-        const supportedTypes = getSupportedUnionTypes(unionTypeInfo.unionType);
-
-        for (const member of unionTypeInfo.unionType.members) {
-            const memberTypeName = getTypeName(member);
-            if (!supportedTypes.includes(memberTypeName) || isAnydataType(memberTypeName)) {
-                continue;
-            }
-            const isResolvedType = memberTypeName === resolvedTypeName;
-            if (unionTypeInfo.isResolvedViaTypeCast) {
-                if (!isResolvedType) {
-                    menuItems.push({
-                        title: `Change type cast to ${memberTypeName}`,
-                        onClick: () => handleWrapWithTypeCast(member, false),
-                        level: 2,
-                        warningMsg: INCOMPATIBLE_CASTING_WARNING
-                    });
-                }
-            } else if (supportedTypes.length > 1) {
-                if (isResolvedType) {
-                    menuItems.push({
-                        title: `Cast type as ${memberTypeName}`,
-                        onClick: () => handleWrapWithTypeCast(member, false),
-                        level: 0
-                    });
-                } else {
-                    menuItems.push(
-                        {
-                            title: `Cast type as ${memberTypeName}`,
-                            onClick: () => handleWrapWithTypeCast(member, false),
-                            level: 1,
-                            warningMsg: INCOMPATIBLE_CASTING_WARNING
-                        }, {
-                            title: `Re-initialize as ${memberTypeName}`,
-                            onClick: () => handleWrapWithTypeCast(member, true),
-                            level: 3,
-                            warningMsg: CLEAR_EXISTING_MAPPINGS_WARNING
-                        }
-                    );
-                }
-            }
-        }
-
-        return menuItems.sort((a, b) => (a.level || 0) - (b.level || 0));
-    };
-
-    const valConfigMenuItems = unionTypeInfo && getTypedElementMenuItems();
-    const supportedUnionTypes = getSupportedUnionTypes(typeDef, typeIdentifier)
-        ?.filter(type => !isAnydataType(type)) || [];
-
-    const header: ReactNode = (
-        <TreeHeader
-            isSelected={portState !== PortState.Unselected}
-            id={"recordfield-" + id}
-            onMouseEnter={onMouseEnter}
-            onMouseLeave={onMouseLeave}
-        >
-            <span className={ioNodesStyles.inPort}>
-                {portIn &&
-                    <DataMapperPortWidget engine={engine} port={portIn} handlePortState={handlePortState} />
-                }
-            </span>
-            <span className={ioNodesStyles.label}>
-                {label}
-            </span>
-            {unionTypeInfo && resolvedTypeName && (
-                <>
-                    {isModifyingTypeCast ? (
-                        <ProgressRing sx={{ height: '16px', width: '16px' }} />
-                    ) : (
-                        <ValueConfigMenu menuItems={valConfigMenuItems} portName={portIn?.getName()} />
-                    )}
-                </>
-            )}
-        </TreeHeader>
-    );
-
-    const typeSelector: ReactNode = (
-        <TreeBody>
-            <div
-                className={unionTypeNodeStyles.selectTypeWrap}
-                data-testid={"union-type-selector-list"}
-            >
-                <div className={unionTypeNodeStyles.warningText}>
-                    <div className={unionTypeNodeStyles.warningContainer}>
-                        <Codicon name="warning" sx={{ marginRight: "6px" }} iconSx={{ color: "var(--vscode-errorForeground)" }} />
-                        <span>{`Types are ambiguous.`}</span>
-                    </div>
-                    <span>{`Please select a type to continue.`}</span>
-                </div>
-                <UnionTypeSelector
-                    context={context}
-                    supportedUnionTypes={supportedUnionTypes}
-                    hasInvalidTypeCast={hasInvalidTypeCast}
-                    innermostExpr={innermostExpr}
-                    typeCastExpr={typeCastExpr}
-                    unionTypeInfo={unionTypeInfo}
-                />
-            </div>
-        </TreeBody>
-    );
-
-    const incompatibleTypeBanner: ReactNode = (
-        <div className={unionTypeNodeStyles.treeContainer}>
-            <span className={unionTypeNodeStyles.unsupportedIOBanner}>
-                <div className={unionTypeNodeStyles.infoContainer}>
-                    <Codicon name="warning" className={unionTypeNodeStyles.warningIcon} />
-                    <span className={unionTypeNodeStyles.messageTitle}>Incompatible Union Types Found</span>
-                </div>
-                <Divider className={unionTypeNodeStyles.divider} />
-                <div className={unionTypeNodeStyles.messageBody}>
-                    {`The union type ${typeName} is not compatible with the Visual Data Mapper.`}
-                    {` Please ensure you are using compatible Record Types or Primitive Types.`}
-                </div>
-            </span>
-        </div>
-    );
-
-    return (
-        <>
-            {supportedUnionTypes.length === 0
-                ? incompatibleTypeBanner
-                : (
-                    <TreeContainer data-testid={"union-type-selector-node"}>
-                        {header}
-                        {!resolvedTypeName && supportedUnionTypes.length > 0 && typeSelector}
-                    </TreeContainer>
-                )
-            } 
-        </>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/UnionTypesList.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/UnionTypesList.tsx
deleted file mode 100644
index b779fa5bee9..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/UnionTypesList.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React from "react";
-
-import { STNode } from "@wso2/syntax-tree";
-
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-
-import { UnionTypeListItem } from "./UnionTypeListItem";
-import { UnionTypeInfo } from "../../utils/union-type-utils";
-
-export interface UnionTypesListProps {
-    unionTypes: string[];
-    context: IDataMapperContext;
-    hasInvalidTypeCast: boolean;
-    innermostExpr: STNode;
-    typeCastExpr: STNode;
-    unionTypeInfo: UnionTypeInfo;
-}
-
-export function UnionTypesList(props: UnionTypesListProps) {
-    const { unionTypes, context, hasInvalidTypeCast, innermostExpr, typeCastExpr, unionTypeInfo } = props;
-
-    return (
-        <>
-            {
-                unionTypes.map((type: string, index: number) => (
-                    <UnionTypeListItem
-                        key={index}
-                        context={context}
-                        type={type}
-                        hasInvalidTypeCast={hasInvalidTypeCast}
-                        innermostExpr={innermostExpr}
-                        typeCastExpr={typeCastExpr}
-                        unionTypeInfo={unionTypeInfo}
-                    />
-                ))
-            }
-        </>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/index.ts
deleted file mode 100644
index 6aed1d33ec9..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnionType/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-export * from "./UnionTypeNodeFactory";
-export * from "./UnionTypeNode";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnsupportedIO/UnsupportedIONode.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnsupportedIO/UnsupportedIONode.ts
deleted file mode 100644
index e3a2e07087f..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnsupportedIO/UnsupportedIONode.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { Point } from "@projectstorm/geometry";
-import { STNode } from "@wso2/syntax-tree";
-
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { DataMapperNodeModel } from "../commons/DataMapperNode";
-
-export const UNSUPPORTED_IO_NODE_TYPE = "data-mapper-node-unsupported-io";
-const NODE_ID = "unsupported-io-node";
-
-export enum UnsupportedExprNodeKind {
-    Input,
-    Output
-}
-
-export class UnsupportedIONode extends DataMapperNodeModel {
-
-    public filePath: string;
-    public x: number;
-    public y: number;
-
-    constructor(
-        public context: IDataMapperContext,
-        public kind: UnsupportedExprNodeKind,
-        public message?: string,
-        public unsupportedExpr?: STNode
-    ) {
-        super(
-            `${NODE_ID}-${kind}`,
-            context,
-            UNSUPPORTED_IO_NODE_TYPE
-        );
-        this.filePath = this.context.filePath;
-    }
-
-    initPorts() {
-        // Ports are not needed
-    }
-
-    initLinks(): void {
-        // Links are not needed
-    }
-
-    public updatePosition() {
-        this.setPosition(this.position.x, this.position.y);
-    }
-
-    setPosition(point: Point): void;
-    setPosition(x: number, y: number): void;
-    setPosition(x: unknown, y?: unknown): void {
-        if (typeof x === 'number' && typeof y === 'number') {
-            if (!this.x || !this.y) {
-                this.x = x;
-                this.y = y;
-            }
-            super.setPosition(x, y);
-        }
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnsupportedIO/UnsupportedIONodeFactory.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnsupportedIO/UnsupportedIONodeFactory.tsx
deleted file mode 100644
index cc6f2ec2286..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnsupportedIO/UnsupportedIONodeFactory.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import * as React from 'react';
-
-import { AbstractReactFactory } from '@projectstorm/react-canvas-core';
-import { DiagramEngine } from '@projectstorm/react-diagrams-core';
-import "reflect-metadata";
-import { container, injectable, singleton } from "tsyringe";
-
-import { IDataMapperNodeFactory } from '../commons/DataMapperNode';
-
-import { UnsupportedIONode, UNSUPPORTED_IO_NODE_TYPE } from './UnsupportedIONode';
-import { UnsupportedExpr, UnsupportedIO } from "./UnsupportedIONodeWidget";
-
-@injectable()
-@singleton()
-export class UnsupportedIONodeFactory extends AbstractReactFactory<UnsupportedIONode, DiagramEngine> implements IDataMapperNodeFactory {
-	constructor() {
-		super(UNSUPPORTED_IO_NODE_TYPE);
-	}
-
-	generateReactWidget(event: { model: UnsupportedIONode; }): JSX.Element {
-		return (
-			<>
-				{event.model.message ? (
-					<UnsupportedIO
-						message={event.model.message}
-					/>
-				) : (
-					<UnsupportedExpr
-						filePath={event.model.filePath}
-						unsupportedExpr={event.model.unsupportedExpr}
-						context={event.model.context}
-					/>
-				)}
-			</>
-		);
-	}
-
-	generateModel(): UnsupportedIONode {
-		return undefined;
-	}
-}
-container.register("NodeFactory", { useClass: UnsupportedIONodeFactory });
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnsupportedIO/UnsupportedIONodeWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnsupportedIO/UnsupportedIONodeWidget.tsx
deleted file mode 100644
index eb70c350b09..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnsupportedIO/UnsupportedIONodeWidget.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React, { ReactNode } from "react";
-
-import { css } from "@emotion/css";
-import { STNode } from "@wso2/syntax-tree";
-
-import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
-import { TreeContainer } from "../commons/Tree/Tree";
-import { Divider, Icon } from "@wso2/ui-toolkit";
-
-interface UnsupportedIOProp {
-    children: ReactNode
-}
-
-interface UnsupportedExprProps {
-    filePath: string;
-    unsupportedExpr: STNode;
-    context: IDataMapperContext;
-}
-
-interface UnsupportedIOProps {
-    message: string;
-}
-
-const useStyles = () => ({
-    treeContainer: css({
-        cursor: "default"
-    }),
-    unsupportedIOBanner: css({
-        width: "320px"
-    }),
-    infoContainer: css({
-        display: 'flex',
-        lineHeight: 'initial',
-        fontSize: '13.5px',
-        padding: '5px'
-    }),
-    unsupportedFile: css({
-        color: "var(--vscode-button-background)",
-        backgroundColor: "var(--vscode-input-background)",
-        fontFamily: "monospace",
-        fontWeight: 100,
-        cursor: "pointer",
-        '&:hover': {
-            textDecoration: "underline"
-        }
-    }),
-    infoSymbol: css({
-        fontSize: "17px",
-        marginRight: "5px"
-    }),
-    divider: css({
-        margin: '5px 0px'
-    }),
-});
-
-function UnsupportedIOWidget({ children }: UnsupportedIOProp) {
-    const classes = useStyles();
-    return (
-        <TreeContainer className={classes.treeContainer}>
-            <span className={classes.unsupportedIOBanner}>
-                {children}
-            </span>
-        </TreeContainer>
-    );
-}
-
-export function UnsupportedIO({ message }: UnsupportedIOProps) {
-    const classes = useStyles();
-
-    return (
-        <UnsupportedIOWidget>
-            <div className={classes.infoContainer}>
-                <Icon name="error-outline" />
-                <span>{message}</span>
-            </div>
-        </UnsupportedIOWidget>
-    );
-}
-
-export function UnsupportedExpr({ filePath, unsupportedExpr, context }: UnsupportedExprProps) {
-    const classes = useStyles();
-
-    const handleGoToSource = () => {
-        context.goToSource(unsupportedExpr.position);
-    }
-
-
-    return (
-        <UnsupportedIOWidget>
-            <div className={classes.infoContainer}>
-                <Icon name="error-outline" />
-                <span>{`Unsupported Expression`}</span>
-            </div>
-            <Divider />
-            <a
-                onClick={handleGoToSource}
-                className={classes.unsupportedFile}
-            >
-                {`${unsupportedExpr?.value || unsupportedExpr.source}`}
-            </a>
-            <div>{`Conditional outputs are not supported by the Data Mapper.`}</div>
-            <span>{`Please change the source and try again.`}</span>
-        </UnsupportedIOWidget>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnsupportedIO/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnsupportedIO/index.ts
deleted file mode 100644
index d6f4b450aa0..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/UnsupportedIO/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-export * from "./UnsupportedIONodeFactory";
-export * from "./UnsupportedIONode";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/AddRecordFieldButton/AddRecordFieldButton.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/AddRecordFieldButton/AddRecordFieldButton.tsx
deleted file mode 100644
index 44d18d01a13..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/AddRecordFieldButton/AddRecordFieldButton.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-lambda jsx-no-multiline-js
-import React, { FC, useEffect, useMemo, useRef, useState } from "react";
-import { Button, Codicon, Icon, Tooltip } from "@wso2/ui-toolkit";
-
-import { getBalRecFieldName } from "../../../utils/dm-utils";
-import { useStyles } from "./styles";
-
-interface Props {
-    indentation: number;
-    addNewField: (fieldName: string) => void;
-    existingFieldNames: string[];
-    fieldId?: string;
-}
-
-export const AddRecordFieldButton: FC<Props> = ({
-    indentation,
-    addNewField,
-    existingFieldNames,
-    fieldId
-}) => {
-    const [newFieldName, setNewFieldName] = useState("");
-    const [isEditing, setIsEditing] = useState(false);
-
-    const classes = useStyles();
-
-    const inputRef = useRef<HTMLInputElement | null>(null);
-
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (
-                inputRef.current && 
-                !inputRef.current.contains(event.target as Node) && 
-                !(event.target instanceof Element && event.target.closest('.codicon-pass'))
-            ) {
-                handleClose();
-            }
-        };
-
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
-    }, []);
-
-    const handleClose = () => {
-        setNewFieldName("");
-        setIsEditing(false);
-    };
-
-    const onNewFieldNameKeyUp = async (key: string) => {
-        if (key === "Escape") {
-            handleClose();
-        }
-        if (key === "Enter" && isValid) {
-            addField(newFieldName);
-        }
-    };
-
-    const addField = (fieldName: string) => {
-        if (newFieldName) {
-            addNewField(getBalRecFieldName(fieldName));
-        }
-        handleClose();
-    };
-
-    const handleClick = () => {
-        setIsEditing(true);
-    };
-
-    const validationMessage = useMemo(() => {
-        if (existingFieldNames.includes(getBalRecFieldName(newFieldName))) {
-            return "Field name already exists";
-        } else if (newFieldName.trim() === "") {
-            return "Field name cannot be empty";
-        } else if (/\s/.test(newFieldName)) {
-            return "Field name cannot contain spaces";
-        } else if (/^[0-9]/.test(newFieldName)) {
-            return "Field name cannot start with a number";
-        } else if (/[^a-zA-Z0-9_]/.test(newFieldName)) {
-            return "Field name can only contain letters, numbers, and underscores";
-        }
-        return "";
-    }, [newFieldName, existingFieldNames]);
-
-    const isValid = useMemo(() => {
-        return validationMessage === "";
-    }, [validationMessage]);
-
-    return (
-        <div className={classes.addFieldWrap} style={{ paddingLeft: indentation }}>
-            {!isEditing && (
-                <Button
-                    appearance="icon"
-                    data-testid={`add-new-field-${fieldId}`}
-                    aria-label="add"
-                    onClick={handleClick}
-                    className={classes.addFieldButton}
-                >
-                    <Codicon name="add" sx={{ marginRight: "4px" }} />
-                    Add Field
-                </Button>
-            )}
-            {isEditing && (
-                <div className={classes.fieldEditor}>
-                    <input
-                        ref={inputRef}
-                        spellCheck={false}
-                        className={classes.input}
-                        autoFocus={true}
-                        value={newFieldName}
-                        onChange={(event) => setNewFieldName(event.target.value)}
-                        onKeyUp={(event) => onNewFieldNameKeyUp(event.key)}
-                        placeholder="New field name (eg. outputField)"
-                        data-testid={`new-field-name`}
-                    />
-                    {newFieldName && (
-                        <>
-                            {!isValid && (
-                                <Tooltip
-                                    content={validationMessage}
-                                    position="bottom"
-                                >
-                                    <Codicon name="warning" iconSx={{ color: "var(--vscode-charts-red)"}} />
-                                </Tooltip>
-                            )}
-                            {isValid && (
-                                <Button
-                                    appearance="icon"
-                                    onClick={() => addField(newFieldName)}
-                                >
-                                    <Codicon name="pass" iconSx={{ color: "var(--vscode-charts-green)"}} />
-                                </Button>
-                            )}
-                        </>
-                    )}
-                </div>
-            )}
-        </div>
-    );
-};
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/AddRecordFieldButton/styles.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/AddRecordFieldButton/styles.ts
deleted file mode 100644
index 433d0bec73d..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/AddRecordFieldButton/styles.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { css } from "@emotion/css";
-
-export const useStyles = () => ({
-    addIcon: css({
-        color: "var(--vscode-editorInfo-foreground)",
-        padding: "5px",
-        textTransform: "none",
-        justifyContent: "left",
-        fontStyle: "normal",
-        fontWeight: 400,
-        fontSize: "13px",
-        lineHeight: "24px"
-    }),
-    tvalueConfigMenu: css({
-        '& .MuiMenuItem-root': {
-            fontSize: '12px',
-            paddingBottom: "1px",
-            paddingTop: "1px"
-        }
-    }),
-    addFieldWrap: css({
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "flex-start",
-        width: "inherit",
-        background: "var(--vscode-editorWidget-background)",
-        padding: "5px",
-    }),
-    addFieldButton: css({
-        "& > vscode-button": {
-            color: "var(--vscode-textLink-foreground)",
-            padding: "4px",
-        }
-    }),
-    input: css({
-        maxWidth: '300px',
-        width: '100%',
-        padding: "5px",
-        '&:focus': { outline: 0, border: "1px solid var(--vscode-editorHoverWidget-background)" },
-        background: "var(--vscode-editorHoverWidget-background)",
-        color: 'var(--vscode-editor-foreground)',
-        border: "1px solid transparent",
-        fontSize: 13,
-        "&::placeholder": {
-            opacity: 0.6
-        },
-        overflow: "hidden",
-        textOverflow: "ellipsis"
-    }),
-    fieldEditor: css({
-        display: 'flex',
-        alignItems: 'center',
-        width: '100%'
-    }),
-    popoverRoot: css({
-        padding: '5px 10px',
-        display: 'flex',
-        alignItems: 'center'
-    }),
-    tooltip: css({
-        backgroundColor: "var(--vscode-input-background)",
-        color: "var(--vscode-inputValidation-errorBorder)",
-        boxShadow: "8px 8px",
-        fontSize: 13,
-    }),
-    errorIcon: css({
-        color: "var(--vscode-errorForeground)",
-    }),
-    tickIcon: css({
-        color: "var(--vscode-inputValidation-infoBackground)"
-    })
-});
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/ArrayTypeOutputWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/ArrayTypeOutputWidget.tsx
deleted file mode 100644
index cb2b67d68fc..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/ArrayTypeOutputWidget.tsx
+++ /dev/null
@@ -1,313 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React, { useMemo, useState } from "react";
-
-import { Button, Codicon, ProgressRing, TruncatedLabel } from "@wso2/ui-toolkit";
-import { DiagramEngine } from '@projectstorm/react-diagrams';
-import { STModification, TypeField } from "@wso2/ballerina-core";
-import { NodePosition, STKindChecker, STNode } from "@wso2/syntax-tree";
-import classnames from "classnames";
-
-import { IDataMapperContext } from "../../../../../utils/DataMapperContext/DataMapperContext";
-import { EditableRecordField } from "../../../Mappings/EditableRecordField";
-import { DataMapperPortWidget, PortState, RecordFieldPortModel } from "../../../Port";
-import {
-	getDefaultValue,
-	getExprBodyFromLetExpression,
-	getExprBodyFromTypeCastExpression,
-	getInnermostExpressionBody,
-	getTypeName,
-	isConnectedViaLink
-} from "../../../utils/dm-utils";
-import { getModification } from "../../../utils/modifications";
-import {
-	CLEAR_EXISTING_MAPPINGS_WARNING,
-	getSupportedUnionTypes,
-	INCOMPATIBLE_CASTING_WARNING,
-	isAnydataType,
-	UnionTypeInfo
-} from "../../../utils/union-type-utils";
-import { OutputSearchHighlight } from '../Search';
-import { TreeBody, TreeContainer, TreeHeader } from "../Tree/Tree";
-
-import { ArrayTypedEditableRecordFieldWidget } from "./ArrayTypedEditableRecordFieldWidget";
-import { ValueConfigMenu } from "./ValueConfigButton";
-import { ValueConfigMenuItem } from "./ValueConfigButton/ValueConfigMenuItem";
-import { useIONodesStyles } from "../../../../styles";
-
-export interface ArrayTypeOutputWidgetProps {
-	id: string;
-	field: EditableRecordField;
-	engine: DiagramEngine;
-	getPort: (portId: string) => RecordFieldPortModel;
-	context: IDataMapperContext;
-	typeName: string;
-	valueLabel?: string;
-	deleteField?: (node: STNode) => Promise<void>;
-	unionTypeInfo?: UnionTypeInfo;
-}
-
-export function ArrayTypeOutputWidget(props: ArrayTypeOutputWidgetProps) {
-	const { id, field, getPort, engine, context, typeName, valueLabel, deleteField, unionTypeInfo } = props;
-	const classes = useIONodesStyles();
-
-	const [ portState, setPortState ] = useState<PortState>(PortState.Unselected);
-	const [isModifyingTypeCast, setIsModifyingTypeCast] = useState(false);
-
-	const body = field && getInnermostExpressionBody(field.value);
-	const hasValue = field && field?.elements && field.elements.length > 0;
-	const isBodyListConstructor = body && STKindChecker.isListConstructor(body);
-	const isBodyQueryExpression = body && STKindChecker.isQueryExpression(body);
-	const hasSyntaxDiagnostics = field?.value && field.value.syntaxDiagnostics.length > 0;
-
-	const portIn = getPort(`${id}.IN`);
-
-	let expanded = true;
-	if ((portIn && portIn.collapsed)) {
-		expanded = false;
-	}
-
-	const indentation = (portIn && (!hasValue || !expanded)) ? 0 : 24;
-	const shouldPortVisible = (isBodyQueryExpression || !hasSyntaxDiagnostics)
-		&& (!hasValue || !expanded || !isBodyListConstructor || (
-			STKindChecker.isListConstructor(body) && body.expressions.length === 0
-	));
-
-	const hasElementConnectedViaLink = useMemo(() => {
-		if (isBodyListConstructor) {
-			return body.expressions.some(expr => isConnectedViaLink(expr));
-		}
-	}, [body]);
-
-	let isDisabled = portIn?.descendantHasValue;
-	if (expanded && !isDisabled && isBodyListConstructor && body.expressions.length > 0) {
-		portIn.setDescendantHasValue();
-		isDisabled = true;
-	} else if (!expanded && !hasElementConnectedViaLink && !isDisabled && isBodyListConstructor && body.expressions.length > 0) {
-		isDisabled = true;
-	}
-
-	const getUnionType = () => {
-		const typeText: JSX.Element[] = [];
-		const { typeNames, resolvedTypeName } = unionTypeInfo;
-		typeNames.forEach((type) => {
-			if (type.trim() === resolvedTypeName) {
-				typeText.push(<span className={classes.boldedTypeLabel}>{type}</span>);
-			} else {
-				typeText.push(<>{type}</>);
-			}
-			if (type !== typeNames[typeNames.length - 1]) {
-				typeText.push(<> | </>);
-			}
-		});
-		return typeText;
-	};
-
-	const label = (
-		<TruncatedLabel style={{ marginRight: "auto" }}>
-			<span style={{ marginRight: "auto" }}>
-				{valueLabel && (
-					<span className={classnames(classes.valueLabel, isDisabled ? classes.labelDisabled : "")}>
-						<OutputSearchHighlight>{valueLabel}</OutputSearchHighlight>
-						{typeName && ":"}
-					</span>
-				)}
-				<span className={classnames(classes.outputTypeLabel, isDisabled ? classes.labelDisabled : "")}>
-					{unionTypeInfo ? getUnionType() : typeName || ''}
-				</span>
-			</span>
-		</TruncatedLabel>
-	);
-
-	const handleExpand = () => {
-		context.handleCollapse(id, !expanded);
-	};
-
-	const handlePortState = (state: PortState) => {
-		setPortState(state)
-	};
-
-	const getTargetPositionForReInitWithTypeCast = () => {
-		const rootValueExpr = unionTypeInfo.valueExpr.expression;
-		const valueExpr: STNode = STKindChecker.isLetExpression(rootValueExpr)
-			? getExprBodyFromLetExpression(rootValueExpr)
-			: rootValueExpr;
-
-		return valueExpr.position;
-	}
-
-	const getTargetPositionForWrapWithTypeCast = () => {
-		const rootValueExpr = unionTypeInfo.valueExpr.expression;
-		const valueExpr: STNode = STKindChecker.isLetExpression(rootValueExpr)
-			? getExprBodyFromLetExpression(rootValueExpr)
-			: rootValueExpr;
-		const valueExprPosition: NodePosition = valueExpr.position;
-
-		let targetPosition: NodePosition = {
-			...valueExprPosition,
-			endLine: valueExprPosition.startLine,
-			endColumn: valueExprPosition.startColumn
-		}
-
-		if (STKindChecker.isTypeCastExpression(valueExpr)) {
-			const exprBodyPosition = getExprBodyFromTypeCastExpression(valueExpr).position;
-			targetPosition = {
-				...valueExprPosition,
-				endLine: exprBodyPosition.startLine,
-				endColumn: exprBodyPosition.startColumn
-			};
-		}
-
-		return targetPosition;
-	}
-
-	const handleWrapWithTypeCast = async (type: TypeField, shouldReInitialize?: boolean) => {
-		setIsModifyingTypeCast(true)
-		try {
-			const name = getTypeName(type);
-			const modification: STModification[] = [];
-			if (shouldReInitialize) {
-				const defaultValue = getDefaultValue(type.typeName);
-				const targetPosition = getTargetPositionForReInitWithTypeCast();
-				modification.push(getModification(`<${name}>${defaultValue}`, targetPosition));
-			} else {
-				const targetPosition = getTargetPositionForWrapWithTypeCast();
-				modification.push(getModification(`<${name}>`, targetPosition));
-			}
-			await context.applyModifications(modification);
-		} finally {
-			setIsModifyingTypeCast(false);
-		}
-	};
-
-	const getTypedElementMenuItems = () => {
-		const menuItems: ValueConfigMenuItem[] = [];
-		const resolvedTypeName = getTypeName(field.type);
-		const supportedTypes = getSupportedUnionTypes(unionTypeInfo.unionType);
-		const hasEmptyListConstructor = isBodyListConstructor && body.expressions.length === 0;
-
-		for (const member of unionTypeInfo.unionType.members) {
-			const memberTypeName = getTypeName(member);
-			if (!supportedTypes.includes(memberTypeName) || isAnydataType(memberTypeName)) {
-				continue;
-			}
-			const isResolvedType = memberTypeName === resolvedTypeName;
-			if (unionTypeInfo.isResolvedViaTypeCast) {
-				if (!isResolvedType) {
-					menuItems.push({
-						title: `Change type cast to ${memberTypeName}`,
-						onClick: () => handleWrapWithTypeCast(member, false),
-						level: 2,
-						warningMsg: INCOMPATIBLE_CASTING_WARNING
-					});
-					if (!hasEmptyListConstructor) {
-						menuItems.push({
-							title: `Re-initialize as ${memberTypeName}`,
-							onClick: () => handleWrapWithTypeCast(member, true),
-							level: 3,
-							warningMsg: CLEAR_EXISTING_MAPPINGS_WARNING
-						});
-					}
-				}
-			} else if (supportedTypes.length > 1) {
-				if (isResolvedType) {
-					menuItems.push({
-						title: `Cast type as ${memberTypeName}`,
-						onClick: () => handleWrapWithTypeCast(member, false),
-						level: 0
-					});
-				} else {
-					menuItems.push(
-						{
-							title: `Cast type as ${memberTypeName}!`,
-							onClick: () => handleWrapWithTypeCast(member, false),
-							level: 1,
-							warningMsg: INCOMPATIBLE_CASTING_WARNING
-						}, {
-							title: `Re-initialize as ${memberTypeName}`,
-							onClick: () => handleWrapWithTypeCast(member, true),
-							level: 1,
-							warningMsg: INCOMPATIBLE_CASTING_WARNING
-						}
-					);
-				}
-			}
-		}
-
-		return menuItems.sort((a, b) => (a.level || 0) - (b.level || 0));
-	};
-
-	const valConfigMenuItems = unionTypeInfo && getTypedElementMenuItems();
-
-	return (
-		<>
-			<TreeContainer data-testid={`${id}-node`}>
-				<TreeHeader isSelected={portState !== PortState.Unselected} isDisabled={isDisabled} id={"recordfield-" + id}>
-					<span className={classes.inPort}>
-						{portIn && shouldPortVisible && (
-							<DataMapperPortWidget
-								engine={engine}
-								port={portIn}
-								disable={isDisabled}
-								handlePortState={handlePortState}
-							/>
-						)}
-					</span>
-					<span className={classes.label}>
-						<Button
-							id={"expand-or-collapse-" + id}
-							appearance="icon"
-							tooltip="Expand/Collapse"
-							onClick={handleExpand}
-							data-testid={`${id}-expand-icon-mapping-target-node`}
-							sx={{ marginLeft: indentation }}
-						>
-							{expanded ? <Codicon name="chevron-right" /> : <Codicon name="chevron-down" />}
-						</Button>
-						{label}
-					</span>
-					{unionTypeInfo && (
-						<>
-							{isModifyingTypeCast ? (
-								<ProgressRing sx={{ height: '16px', width: '16px' }} />
-							) : (
-								<ValueConfigMenu menuItems={valConfigMenuItems} portName={portIn?.getName()} />
-							)}
-						</>
-					)}
-				</TreeHeader>
-				{expanded && field && isBodyListConstructor && (
-					<TreeBody>
-						<ArrayTypedEditableRecordFieldWidget
-							key={id}
-							engine={engine}
-							field={field}
-							getPort={getPort}
-							parentId={id}
-							parentMappingConstruct={undefined}
-							context={context}
-							deleteField={deleteField}
-							isReturnTypeDesc={true}
-						/>
-					</TreeBody>
-				)}
-			</TreeContainer>
-		</>
-	);
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/ArrayTypedEditableRecordFieldWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/ArrayTypedEditableRecordFieldWidget.tsx
deleted file mode 100644
index f75a3a09ac1..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/ArrayTypedEditableRecordFieldWidget.tsx
+++ /dev/null
@@ -1,567 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React, { useMemo, useState } from "react";
-
-import { Button, Codicon, Icon, Item, Menu, MenuItem, ProgressRing, TruncatedLabel } from "@wso2/ui-toolkit";
-import { DiagramEngine } from "@projectstorm/react-diagrams-core";
-import { AnydataType, PrimitiveBalType } from "@wso2/ballerina-core";
-import { MappingConstructor, NodePosition, STKindChecker, STNode } from "@wso2/syntax-tree";
-import classnames from "classnames";
-import { Diagnostic } from "vscode-languageserver-types";
-
-import { useDMSearchStore } from "../../../../../store/store";
-import { IDataMapperContext } from "../../../../../utils/DataMapperContext/DataMapperContext";
-import { DiagnosticTooltip } from "../../../Diagnostic/DiagnosticTooltip/DiagnosticTooltip";
-import { EditableRecordField } from "../../../Mappings/EditableRecordField";
-import { DataMapperPortWidget, PortState, RecordFieldPortModel } from "../../../Port";
-import {
-    createSourceForUserInput,
-    findTypeByInfoFromStore,
-    getDefaultValue,
-    getExprBodyFromTypeCastExpression,
-    getFieldName,
-    getInnermostExpressionBody,
-    getLinebreak,
-    getShortenedTypeName,
-    getTypeName,
-    isConnectedViaLink,
-} from "../../../utils/dm-utils";
-import { getModification } from "../../../utils/modifications";
-import { getSupportedUnionTypes, getUnionTypes } from "../../../utils/union-type-utils";
-import { OutputSearchHighlight } from "../Search";
-import { TreeBody } from "../Tree/Tree";
-
-import { EditableRecordFieldWidget } from "./EditableRecordFieldWidget";
-import { PrimitiveTypedEditableElementWidget } from "./PrimitiveTypedEditableElementWidget";
-import { ValueConfigMenu, ValueConfigOption } from "./ValueConfigButton";
-import { ValueConfigMenuItem } from "./ValueConfigButton/ValueConfigMenuItem";
-import { useIONodesStyles } from "../../../../styles";
-
-export interface ArrayTypedEditableRecordFieldWidgetProps {
-    parentId: string;
-    field: EditableRecordField;
-    engine: DiagramEngine;
-    getPort: (portId: string) => RecordFieldPortModel;
-    parentMappingConstruct: MappingConstructor;
-    context: IDataMapperContext;
-    fieldIndex?: number;
-    treeDepth?: number;
-    deleteField?: (node: STNode) => Promise<void>;
-    isReturnTypeDesc?: boolean;
-    hasHoveredParent?: boolean;
-}
-
-export function ArrayTypedEditableRecordFieldWidget(props: ArrayTypedEditableRecordFieldWidgetProps) {
-    const {
-        parentId,
-        field,
-        getPort,
-        engine,
-        parentMappingConstruct,
-        context,
-        fieldIndex,
-        treeDepth = 0,
-        deleteField,
-        isReturnTypeDesc,
-        hasHoveredParent
-    } = props;
-    const { handleCollapse, filePath } = context;
-    const classes = useIONodesStyles();
-    const [isLoading, setLoading] = useState(false);
-    const [isAddingElement, setIsAddingElement] = useState(false);
-    const [isHovered, setIsHovered] = useState(false);
-    const [isAddingTypeCast, setIsAddingTypeCast] = useState(false);
-
-    const fieldName = getFieldName(field);
-    const fieldId = fieldIndex !== undefined
-        ? `${parentId}.${fieldIndex}${fieldName ? `.${fieldName}` : ''}`
-        : `${parentId}${fieldName ? `.${fieldName}` : ''}`;
-    const portIn = getPort(`${fieldId}.IN`);
-    const body = field.hasValue() && getInnermostExpressionBody(field.value);
-    const valExpr = body && STKindChecker.isSpecificField(body) ? body.valueExpr : body;
-    const diagnostic = (valExpr as STNode)?.typeData?.diagnostics[0] as Diagnostic
-    const hasValue = valExpr && !!valExpr.source;
-    const innerValExpr = getInnermostExpressionBody(valExpr);
-    const isValQueryExpr = valExpr && STKindChecker.isQueryExpression(innerValExpr);
-    const isUnionTypedElement = field.type.typeName === PrimitiveBalType.Union && !field.type.resolvedUnionType;
-    const typeName = getTypeName(field.type);
-    const elements = field.elements;
-    const [portState, setPortState] = useState<PortState>(PortState.Unselected);
-    const [addElementAnchorEl, addElementSetAnchorEl] = React.useState<null | HTMLButtonElement>(null);
-    const addMenuOpen = Boolean(addElementAnchorEl);
-    const searchValue = useDMSearchStore.getState().outputSearch;
-
-    const connectedViaLink = useMemo(() => {
-        if (hasValue) {
-            return isConnectedViaLink(innerValExpr);
-        }
-        return false;
-    }, [field]);
-
-    let expanded = true;
-    if (portIn && portIn.collapsed) {
-        expanded = false;
-    }
-
-    const listConstructor = hasValue ? (STKindChecker.isListConstructor(innerValExpr) ? innerValExpr : null) : null;
-
-    let indentation = treeDepth * 16;
-    if (!portIn) {
-        indentation += 24;
-    }
-
-    let isDisabled = portIn?.descendantHasValue;
-    if (portIn && !isDisabled) {
-        const hasElements = listConstructor && listConstructor.expressions.length > 0;
-        if (listConstructor && hasElements && expanded && portIn.parentModel) {
-            portIn.setDescendantHasValue();
-            isDisabled = true;
-        }
-        if (portIn.parentModel && (Object.entries(portIn.parentModel.links).length > 0 || portIn.parentModel.ancestorHasValue)) {
-            portIn.ancestorHasValue = true;
-            isDisabled = true;
-        }
-    }
-
-    const handlePortState = (state: PortState) => {
-        setPortState(state)
-    };
-
-    const handleEditValue = () => {
-        let value = field.value.source;
-        let valuePosition = field.value.position as NodePosition;
-        let editorLabel = 'Array Element';
-        if (field.value && STKindChecker.isSpecificField(field.value)) {
-            value = field.value.valueExpr.source;
-            valuePosition = field.value.valueExpr.position as NodePosition;
-            editorLabel = field.value.fieldName.value as string;
-        }
-        props.context.enableStatementEditor({
-            value,
-            valuePosition,
-            label: editorLabel
-        });
-    };
-
-    const onAddElementClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-        if (isAnydataType || isUnionType) {
-            addElementSetAnchorEl(event.currentTarget)
-        } else {
-            handleAddArrayElement(field?.type?.memberType?.typeName)
-        }
-    };
-
-    const getUnionType = () => {
-        const typeText: JSX.Element[] = [];
-        const unionTypes = getUnionTypes(field.originalType);
-        const resolvedTypeName = getTypeName(field.type);
-        unionTypes.forEach((type) => {
-            if (type.trim() === resolvedTypeName) {
-                typeText.push(<span className={classes.boldedTypeLabel}>{type}</span>);
-            } else {
-                typeText.push(<>{type}</>);
-            }
-            if (type !== unionTypes[unionTypes.length - 1]) {
-                typeText.push(<> | </>);
-            }
-        });
-        return typeText;
-    };
-
-    const label = (
-        <TruncatedLabel style={{ marginRight: "auto" }}>
-            <span style={{ marginRight: "auto" }} data-testid={`record-widget-field-label-${portIn?.getName()}`}>
-                <span
-                    className={classnames(classes.valueLabel,
-                        isDisabled ? classes.labelDisabled : "")}
-                    style={{ marginLeft: (hasValue && !connectedViaLink && !isValQueryExpr) ? 0 : indentation + 24 }}
-                >
-                    <OutputSearchHighlight>{fieldName}</OutputSearchHighlight>
-                    {!field.type?.optional && <span className={classes.requiredMark}>*</span>}
-                    {fieldName && typeName && ":"}
-                </span>
-                {typeName !== '[]' ? (
-                    <span className={classnames(classes.outputTypeLabel, isDisabled ? classes.labelDisabled : "")}>
-                        {field.originalType.typeName === PrimitiveBalType.Union ? getUnionType() : typeName || ''}
-                    </span>
-                ) : (
-                    <DiagnosticTooltip
-                        diagnostic={{
-                            message: "Type information is missing",
-                            range: null
-                        }}
-                    >
-                        <Button
-                            appearance="icon"
-                        >
-                            {typeName}
-                            <Icon
-                                name="error-icon"
-                                sx={{ height: "14px", width: "14px" }}
-                                iconSx={{ fontSize: "14px", color: "var(--vscode-errorForeground)" }}
-                            />
-                        </Button>
-                    </DiagnosticTooltip>
-                )}
-                {!listConstructor && !connectedViaLink && hasValue && (
-                    <>
-                        {diagnostic ? (
-                            <DiagnosticTooltip
-                                placement="right"
-                                diagnostic={diagnostic}
-                                value={valExpr?.source}
-                                onClick={handleEditValue}
-                            >
-                                <Button
-                                    appearance="icon"
-                                    data-testid={`array-widget-field-${portIn?.getName()}`}
-                                >
-                                    {valExpr?.source}
-                                    <Icon
-                                        name="error-icon"
-                                        sx={{ height: "14px", width: "14px" }}
-                                        iconSx={{ fontSize: "14px", color: "var(--vscode-errorForeground)" }}
-                                    />
-                                </Button>
-                            </DiagnosticTooltip>
-                        ) : (
-                            <span
-                                className={classes.outputNodeValue}
-                                onClick={handleEditValue}
-                                data-testid={`array-widget-field-${portIn?.getName()}`}
-                            >
-                                {valExpr?.source}
-                            </span>
-                        )}
-                    </>
-                )}
-            </span>
-        </TruncatedLabel>
-    );
-
-    const arrayElements = useMemo(() => {
-        return elements && (
-            elements.map((element, index) => {
-                if (element.elementNode) {
-                    const elementNode = STKindChecker.isTypeCastExpression(element.elementNode)
-                        ? getExprBodyFromTypeCastExpression(element.elementNode)
-                        : element.elementNode;
-                    if (STKindChecker.isMappingConstructor(elementNode)
-                        || element.member?.type.typeName === PrimitiveBalType.Record) {
-                        return (
-                            <>
-                                <TreeBody>
-                                    <EditableRecordFieldWidget
-                                        key={index}
-                                        engine={engine}
-                                        field={element.member}
-                                        getPort={getPort}
-                                        parentId={fieldId}
-                                        parentMappingConstruct={elementNode as MappingConstructor}
-                                        context={context}
-                                        fieldIndex={index}
-                                        treeDepth={treeDepth + 1}
-                                        deleteField={deleteField}
-                                        hasHoveredParent={isHovered || hasHoveredParent}
-                                    />
-                                </TreeBody>
-                                <br />
-                            </>
-                        );
-                    } else if (STKindChecker.isListConstructor(elementNode)) {
-                        return (
-                            <ArrayTypedEditableRecordFieldWidget
-                                key={fieldId}
-                                engine={engine}
-                                field={element.member}
-                                getPort={getPort}
-                                parentId={fieldId}
-                                parentMappingConstruct={parentMappingConstruct}
-                                context={context}
-                                fieldIndex={index}
-                                treeDepth={treeDepth + 1}
-                                deleteField={deleteField}
-                                hasHoveredParent={isHovered || hasHoveredParent}
-                            />
-                        )
-                    } else {
-                        const value: string = elementNode.value || elementNode.source;
-                        if (searchValue && !value.toLowerCase().includes(searchValue.toLowerCase())) {
-                            return null;
-                        }
-                    }
-                }
-                return (
-                    <PrimitiveTypedEditableElementWidget
-                        parentId={fieldId}
-                        field={element.member}
-                        engine={engine}
-                        getPort={getPort}
-                        context={context}
-                        fieldIndex={index}
-                        deleteField={deleteField}
-                        isArrayElement={true}
-                        hasHoveredParent={isHovered || hasHoveredParent}
-                    />
-                );
-            })
-        );
-    }, [elements]);
-
-    const addElementButton = useMemo(() => {
-        return (
-            <Button
-                className={classes.addArrayElementButton}
-                appearance="icon"
-                aria-label="add"
-                onClick={onAddElementClick}
-                disabled={isAddingElement}
-                data-testid={`array-widget-${portIn?.getName()}-add-element`}
-            >
-                {isAddingElement ? <ProgressRing sx={{ height: '16px', width: '16px' }} /> : <Codicon name="add" iconSx={{ color: "var(--vscode-inputOption-activeForeground)" }} />}
-                Add Element
-            </Button>
-        );
-    }, [isAddingElement]);
-
-    const handleExpand = () => {
-        handleCollapse(fieldId, !expanded);
-    };
-
-    const handleArrayInitialization = async () => {
-        setLoading(true);
-        try {
-            await createSourceForUserInput(field, parentMappingConstruct, '[]', context.applyModifications);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const handleArrayDeletion = async () => {
-        setLoading(true);
-        try {
-            await deleteField(field.value);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const handleAddArrayElement = async (typeNameStr: string) => {
-        setIsAddingElement(true)
-        try {
-            const fieldsAvailable = !!listConstructor.expressions.length;
-            let type = typeNameStr;
-            if (isUnionType) {
-                let unionType = field.type.memberType;
-                if (!field.type.memberType.typeName && field.type.memberType.typeInfo) {
-                    unionType = findTypeByInfoFromStore(field.type.memberType.typeInfo);
-                }
-                type = unionType.members.find(member => typeNameStr === getTypeName(member)).typeName;
-            }
-            const defaultValue = getDefaultValue(type);
-            let targetPosition: NodePosition;
-            let newElementSource: string =
-                `${getLinebreak()}${isUnionType ? `<${getShortenedTypeName(typeNameStr)}>` : ''}${defaultValue}`;
-            if (fieldsAvailable) {
-                targetPosition = listConstructor.expressions[listConstructor.expressions.length - 1].position as NodePosition;
-                newElementSource = `,${newElementSource}`
-            } else {
-                targetPosition = listConstructor.openBracket.position as NodePosition;
-            }
-            const modification = [getModification(newElementSource, {
-                ...targetPosition,
-                startLine: targetPosition.endLine,
-                startColumn: targetPosition.endColumn
-            })];
-            await context.applyModifications(modification);
-        } finally {
-            setIsAddingElement(false);
-        }
-    };
-
-    const handleWrapWithTypeCast = async (type: string) => {
-        setIsAddingTypeCast(true)
-        try {
-            let targetPosition: NodePosition;
-            const typeCastExpr = STKindChecker.isTypeCastExpression(field.value) && field.value;
-            const valueExprPosition: NodePosition = typeCastExpr
-                ? getExprBodyFromTypeCastExpression(typeCastExpr).position
-                : field.value.position;
-            if (typeCastExpr) {
-                const typeCastExprPosition: NodePosition = typeCastExpr.position;
-                targetPosition = {
-                    ...typeCastExprPosition,
-                    endLine: valueExprPosition.startLine,
-                    endColumn: valueExprPosition.startColumn
-                };
-            } else {
-                targetPosition = {
-                    ...valueExprPosition,
-                    endLine: valueExprPosition.startLine,
-                    endColumn: valueExprPosition.startColumn
-                };
-            }
-            const modification = [getModification(`<${type}>`, targetPosition)];
-            await context.applyModifications(modification);
-        } finally {
-            setIsAddingTypeCast(false);
-        }
-    };
-
-    const onMouseEnter = () => {
-        setIsHovered(true);
-    };
-
-    const onMouseLeave = () => {
-        setIsHovered(false);
-    };
-
-    const isAnydataType = field.type?.memberType?.typeName === AnydataType
-        || field.type?.memberType?.originalTypeName === AnydataType
-        || field.type?.originalTypeName === AnydataType;
-
-    const isUnionType = useMemo(() => {
-        if (field.type?.memberType.typeName) {
-            return field.type?.memberType?.typeName === PrimitiveBalType.Union;
-        }
-        const referredType = findTypeByInfoFromStore(field.type?.memberType?.typeInfo);
-        return referredType && referredType.typeName === PrimitiveBalType.Union;
-    }, [field]);
-
-    const onCloseElementSetAnchor = () => addElementSetAnchorEl(null);
-
-    const possibleTypeOptions: Item[] = useMemo(() => {
-        if (isAnydataType) {
-            const anyDataConvertOptions: Item[] = [];
-            anyDataConvertOptions.push({ id: 'primitive', label: `Add a primitive element`, onClick: () => handleAddArrayElement("()") })
-            anyDataConvertOptions.push({ id: 'record', label: `Add a record element`, onClick: () => handleAddArrayElement(PrimitiveBalType.Record) })
-            anyDataConvertOptions.push({ id: 'array', label: `Add an array element`, onClick: () => handleAddArrayElement(PrimitiveBalType.Array) })
-            return anyDataConvertOptions;
-        } else if (isUnionType) {
-            const unionTypeOptions: Item[] = [];
-            const supportedTypes = getSupportedUnionTypes(field.type.memberType);
-            supportedTypes.forEach((type) => {
-                unionTypeOptions.push({ id: type, label: `Add a ${type} element`, onClick: () => handleAddArrayElement(type) })
-            })
-            return unionTypeOptions;
-        }
-    }, [])
-
-    const valConfigMenuItems: ValueConfigMenuItem[] = hasValue
-        ? [
-            { title: ValueConfigOption.EditValue, onClick: handleEditValue },
-            { title: ValueConfigOption.DeleteArray, onClick: handleArrayDeletion },
-        ]
-        : [
-            { title: ValueConfigOption.InitializeArray, onClick: handleArrayInitialization }
-        ];
-
-    const typeSelectorMenuItems: ValueConfigMenuItem[] = isUnionTypedElement
-        && field.type.members.map(member => {
-            const memberTypeName = getTypeName(member);
-            return {
-                title: `Re-initialize as ${memberTypeName}`,
-                onClick: () => handleWrapWithTypeCast(memberTypeName)
-            }
-        });
-
-    if (isUnionTypedElement) {
-        valConfigMenuItems.push(...typeSelectorMenuItems);
-    }
-
-    return (
-        <div
-            className={classnames(
-                classes.treeLabelArray,
-                hasHoveredParent ? classes.treeLabelParentHovered : "",
-                (portState !== PortState.Unselected) ? classes.treeLabelPortSelected : ""
-            )}
-        >
-            {!isReturnTypeDesc && (
-                <div
-                    id={"recordfield-" + fieldId}
-                    className={classnames(classes.ArrayFieldRow,
-                        isDisabled ? classes.ArrayFieldRowDisabled : "",
-                        hasHoveredParent ? classes.treeLabelParentHovered : ""
-                    )}
-                    onMouseEnter={onMouseEnter}
-                    onMouseLeave={onMouseLeave}
-                >
-                    <span className={classes.inPort}>
-                        {portIn && (
-                            <DataMapperPortWidget
-                                engine={engine}
-                                port={portIn}
-                                disable={isDisabled && expanded}
-                                handlePortState={handlePortState}
-                                dataTestId={`array-type-editable-record-field-${portIn.getName()}`}
-                            />
-                        )}
-                    </span>
-                    <span className={classes.label}>
-                        {(hasValue && !connectedViaLink) && (
-                            <Button
-                                id={`expand-or-collapse-${fieldId}`}
-                                appearance="icon"
-                                sx={{ marginLeft: indentation }}
-                                onClick={handleExpand}
-                                data-testid={`${portIn?.getName()}-expand-icon-array-field`}
-                            >
-                                {expanded ? <Codicon name="chevron-right" /> : <Codicon name="chevron-down" />}
-                            </Button>
-                        )}
-                        {label}
-                    </span>
-                    {(isLoading || isAddingTypeCast) ? (
-                        <ProgressRing />
-                    ) : (
-                        <>
-                            {((hasValue && !connectedViaLink) || !isDisabled) && (
-                                <ValueConfigMenu
-                                    menuItems={valConfigMenuItems}
-                                    isDisabled={!typeName || typeName === "[]"}
-                                    portName={portIn?.getName()}
-                                />
-                            )}
-                        </>
-                    )}
-                </div>
-            )}
-            {expanded && hasValue && listConstructor && !isUnionTypedElement && (
-                <div data-testid={`array-widget-${portIn?.getName()}-values`}>
-                    <div className={classes.innerTreeLabel}>
-                        <span>[</span>
-                        {arrayElements}
-                        {addElementButton}
-                        {(isAnydataType || isUnionType) && (
-                            <Menu>
-                                {possibleTypeOptions?.map((item) => (
-                                    <>
-                                        <MenuItem item={item} />
-                                    </>
-                                ))}
-                            </Menu>
-                        )}
-                        <span>]</span>
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/EditableMappingConstructorWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/EditableMappingConstructorWidget.tsx
deleted file mode 100644
index a01f3ef4a44..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/EditableMappingConstructorWidget.tsx
+++ /dev/null
@@ -1,362 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React, { useMemo, useState } from 'react';
-
-import { DiagramEngine } from '@projectstorm/react-diagrams';
-import { AnydataType, STModification, TypeField } from "@wso2/ballerina-core";
-import { NodePosition, STKindChecker, STNode } from '@wso2/syntax-tree';
-
-import { IDataMapperContext } from "../../../../../utils/DataMapperContext/DataMapperContext";
-import { EditableRecordField } from "../../../Mappings/EditableRecordField";
-import { FieldAccessToSpecificFied } from "../../../Mappings/FieldAccessToSpecificFied";
-import { DataMapperPortWidget, PortState, RecordFieldPortModel } from '../../../Port';
-import {
-	getDefaultValue,
-	getExprBodyFromLetExpression,
-	getExprBodyFromTypeCastExpression,
-	getNewFieldAdditionModification,
-	getTypeName,
-	isEmptyValue
-} from "../../../utils/dm-utils";
-import { getModification } from "../../../utils/modifications";
-import {
-	CLEAR_EXISTING_MAPPINGS_WARNING,
-	getSupportedUnionTypes,
-	INCOMPATIBLE_CASTING_WARNING,
-	isAnydataType,
-	UnionTypeInfo
-} from "../../../utils/union-type-utils";
-import { AddRecordFieldButton } from '../AddRecordFieldButton';
-import { OutputSearchHighlight } from '../Search';
-import { TreeBody, TreeContainer, TreeHeader } from '../Tree/Tree';
-
-import { EditableRecordFieldWidget } from "./EditableRecordFieldWidget";
-import { ValueConfigMenu } from "./ValueConfigButton";
-import { ValueConfigMenuItem } from "./ValueConfigButton/ValueConfigMenuItem";
-import { Button, Codicon, ProgressRing, TruncatedLabel } from '@wso2/ui-toolkit';
-import { useIONodesStyles } from '../../../../styles';
-
-export interface EditableMappingConstructorWidgetProps {
-	id: string; // this will be the root ID used to prepend for UUIDs of nested fields
-	editableRecordField: EditableRecordField;
-	typeName: string;
-	value: STNode;
-	engine: DiagramEngine;
-	getPort: (portId: string) => RecordFieldPortModel;
-	context: IDataMapperContext;
-	valueLabel?: string;
-	mappings?: FieldAccessToSpecificFied[];
-	deleteField?: (node: STNode) => Promise<void>;
-	originalTypeName?: string;
-	unionTypeInfo?: UnionTypeInfo;
-}
-
-
-export function EditableMappingConstructorWidget(props: EditableMappingConstructorWidgetProps) {
-	const {
-		id,
-		editableRecordField,
-		typeName,
-		value,
-		engine,
-		getPort,
-		context,
-		mappings,
-		valueLabel,
-		deleteField,
-		originalTypeName,
-		unionTypeInfo
-	} = props;
-	const classes = useIONodesStyles();
-
-	const [portState, setPortState] = useState<PortState>(PortState.Unselected);
-	const [isHovered, setIsHovered] = useState(false);
-	const [isModifyingTypeCast, setIsModifyingTypeCast] = useState(false);
-
-	const editableRecordFields = editableRecordField && editableRecordField.childrenTypes;
-	const hasValue = editableRecordFields && editableRecordFields.length > 0;
-	const isBodyMappingConstructor = value && STKindChecker.isMappingConstructor(value);
-	const hasSyntaxDiagnostics = value && value.syntaxDiagnostics.length > 0;
-	const hasEmptyFields = mappings && (mappings.length === 0 || !mappings.some(mapping => {
-		if (mapping.value) {
-			return !isEmptyValue(mapping.value.position);
-		}
-		return true;
-	}));
-	const isAnyData = originalTypeName === AnydataType;
-
-	const portIn = getPort(`${id}.IN`);
-
-	let expanded = true;
-	if ((portIn && portIn.collapsed)) {
-		expanded = false;
-	}
-
-	const indentation = (portIn && (!hasValue || !expanded)) ? 0 : 24;
-
-	const getUnionType = () => {
-		const typeText: JSX.Element[] = [];
-		const { typeNames, resolvedTypeName } = unionTypeInfo;
-		typeNames.forEach((type) => {
-			if (type.trim() === resolvedTypeName) {
-				typeText.push(<span className={classes.boldedTypeLabel}>{type}</span>);
-			} else {
-				typeText.push(<>{type}</>);
-			}
-			if (type !== typeNames[typeNames.length - 1]) {
-				typeText.push(<> | </>);
-			}
-		});
-		return typeText;
-	};
-
-	const label = (
-		<TruncatedLabel style={{ marginRight: "auto" }}>
-			<span style={{ marginRight: "auto" }}>
-				{valueLabel && (
-					<span className={classes.valueLabel}>
-						<OutputSearchHighlight>{valueLabel}</OutputSearchHighlight>
-						{typeName && ":"}
-					</span>
-				)}
-				<span className={classes.outputTypeLabel}>
-					{unionTypeInfo ? getUnionType() : typeName || ''}
-				</span>
-			</span>
-		</TruncatedLabel>
-	);
-
-	const handleExpand = () => {
-		context.handleCollapse(id, !expanded);
-	};
-
-	const handlePortState = (state: PortState) => {
-		setPortState(state)
-	};
-
-	const onMouseEnter = () => {
-		setIsHovered(true);
-	};
-
-	const onMouseLeave = () => {
-		setIsHovered(false);
-	};
-
-
-	const addNewField = async (newFieldName: string) => {
-		const modification = getNewFieldAdditionModification(value, newFieldName);
-		if (modification) {
-			await context.applyModifications(modification);
-		}
-	}
-
-	const subFieldNames = useMemo(() => {
-		const fieldNames: string[] = [];
-		editableRecordFields?.forEach(field => {
-			if (field.value && STKindChecker.isSpecificField(field.value)) {
-				fieldNames.push(field.value?.fieldName?.value)
-			}
-		})
-		return fieldNames;
-	}, [editableRecordFields])
-
-	const getTargetPositionForReInitWithTypeCast = () => {
-		const rootValueExpr = unionTypeInfo.valueExpr.expression;
-		const valueExpr: STNode = STKindChecker.isLetExpression(rootValueExpr)
-			? getExprBodyFromLetExpression(rootValueExpr)
-			: rootValueExpr;
-
-		return valueExpr.position;
-	}
-
-	const getTargetPositionForWrapWithTypeCast = () => {
-		const rootValueExpr = unionTypeInfo.valueExpr.expression;
-		const valueExpr: STNode = STKindChecker.isLetExpression(rootValueExpr)
-			? getExprBodyFromLetExpression(rootValueExpr)
-			: rootValueExpr;
-		const valueExprPosition: NodePosition = valueExpr.position;
-
-		let targetPosition: NodePosition = {
-			...valueExprPosition,
-			endLine: valueExprPosition.startLine,
-			endColumn: valueExprPosition.startColumn
-		}
-
-		if (STKindChecker.isTypeCastExpression(valueExpr)) {
-			const exprBodyPosition = getExprBodyFromTypeCastExpression(valueExpr).position;
-			targetPosition = {
-				...valueExprPosition,
-				endLine: exprBodyPosition.startLine,
-				endColumn: exprBodyPosition.startColumn
-			};
-		}
-
-		return targetPosition;
-	}
-
-	const handleWrapWithTypeCast = async (type: TypeField, shouldReInitialize?: boolean) => {
-		setIsModifyingTypeCast(true)
-		try {
-			const name = getTypeName(type);
-			const modification: STModification[] = [];
-			if (shouldReInitialize) {
-				const defaultValue = getDefaultValue(type.typeName);
-				const targetPosition = getTargetPositionForReInitWithTypeCast();
-				modification.push(getModification(`<${name}>${defaultValue}`, targetPosition));
-			} else {
-				const targetPosition = getTargetPositionForWrapWithTypeCast();
-				modification.push(getModification(`<${name}>`, targetPosition));
-			}
-			await context.applyModifications(modification);
-		} finally {
-			setIsModifyingTypeCast(false);
-		}
-	};
-
-	const getTypedElementMenuItems = () => {
-		const menuItems: ValueConfigMenuItem[] = [];
-		const resolvedTypeName = getTypeName(editableRecordField.type);
-		const supportedTypes = getSupportedUnionTypes(unionTypeInfo.unionType);
-
-		for (const member of unionTypeInfo.unionType.members) {
-			const memberTypeName = getTypeName(member);
-			if (!supportedTypes.includes(memberTypeName) || isAnydataType(memberTypeName)) {
-				continue;
-			}
-			const isResolvedType = memberTypeName === resolvedTypeName;
-			if (unionTypeInfo.isResolvedViaTypeCast) {
-				if (!isResolvedType) {
-					menuItems.push({
-						title: `Change type cast to ${memberTypeName}`,
-						onClick: () => handleWrapWithTypeCast(member, false),
-						level: 2,
-						warningMsg: INCOMPATIBLE_CASTING_WARNING
-					});
-					if (!hasEmptyFields) {
-						menuItems.push({
-							title: `Re-initialize as ${memberTypeName}`,
-							onClick: () => handleWrapWithTypeCast(member, true),
-							level: 3,
-							warningMsg: CLEAR_EXISTING_MAPPINGS_WARNING
-						});
-					}
-				}
-			} else if (supportedTypes.length > 1) {
-				if (isResolvedType) {
-					menuItems.push({
-						title: `Cast type as ${memberTypeName}`,
-						onClick: () => handleWrapWithTypeCast(member, false),
-						level: 0
-					});
-				} else {
-					menuItems.push(
-						{
-							title: `Cast type as ${memberTypeName}`,
-							onClick: () => handleWrapWithTypeCast(member, false),
-							level: 1,
-							warningMsg: INCOMPATIBLE_CASTING_WARNING
-						}, {
-							title: `Re-initialize as ${memberTypeName}`,
-							onClick: () => handleWrapWithTypeCast(member, true),
-							level: 3,
-							warningMsg: CLEAR_EXISTING_MAPPINGS_WARNING
-						}
-					);
-				}
-			}
-		}
-
-		return menuItems.sort((a, b) => (a.level || 0) - (b.level || 0));
-	};
-
-	const valConfigMenuItems = unionTypeInfo && getTypedElementMenuItems();
-
-	return (
-		<>
-			<TreeContainer data-testid={`${id}-node`}>
-				<TreeHeader
-					isSelected={portState !== PortState.Unselected}
-					id={"recordfield-" + id}
-					onMouseEnter={onMouseEnter}
-					onMouseLeave={onMouseLeave}
-				>
-					<span className={classes.inPort}>
-						{portIn && (isBodyMappingConstructor || !hasSyntaxDiagnostics) && (!hasValue
-								|| !expanded
-								|| !isBodyMappingConstructor
-								|| hasEmptyFields
-							) &&
-							<DataMapperPortWidget engine={engine} port={portIn} handlePortState={handlePortState} />
-						}
-					</span>
-					<span className={classes.label}>
-						<Button
-							id={"expand-or-collapse-" + id}
-							appearance="icon"
-							tooltip="Expand/Collapse"
-							sx={{ marginLeft: indentation }}
-							onClick={handleExpand}
-							data-testid={`${id}-expand-icon-mapping-target-node`}
-						>
-							{expanded ? <Codicon name="chevron-right" /> : <Codicon name="chevron-down" />}
-						</Button>
-						{label}
-					</span>
-					{unionTypeInfo && (
-						<>
-							{isModifyingTypeCast ? (
-								<ProgressRing sx={{ height: '16px', width: '16px' }} />
-							) : (
-								<ValueConfigMenu menuItems={valConfigMenuItems} portName={portIn?.getName()} />
-							)}
-						</>
-					)}
-				</TreeHeader>
-				{((expanded && editableRecordFields) || isAnyData) && (
-					<TreeBody>
-						{editableRecordFields?.map((item, index) => {
-							return (
-								<EditableRecordFieldWidget
-									key={index}
-									engine={engine}
-									field={item}
-									getPort={getPort}
-									parentId={id}
-									parentMappingConstruct={value}
-									context={context}
-									treeDepth={0}
-									deleteField={deleteField}
-									hasHoveredParent={isHovered}
-								/>
-							);
-						})}
-						{isAnyData && (
-							<AddRecordFieldButton
-								addNewField={addNewField}
-								indentation={0}
-								existingFieldNames={subFieldNames}
-								fieldId={id}
-							/>
-						)}
-					</TreeBody>
-				)}
-			</TreeContainer>
-		</>
-	);
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/EditableRecordFieldWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/EditableRecordFieldWidget.tsx
deleted file mode 100644
index abf7adf2e2f..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/EditableRecordFieldWidget.tsx
+++ /dev/null
@@ -1,646 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React, { useEffect, useMemo, useState } from "react";
-
-import { DiagramEngine } from "@projectstorm/react-diagrams-core";
-import { AnydataType, PrimitiveBalType, STModification, TypeField } from "@wso2/ballerina-core";
-import {
-    MappingConstructor,
-    NodePosition,
-    STKindChecker,
-    STNode
-} from "@wso2/syntax-tree";
-import classnames from "classnames";
-import { Diagnostic } from "vscode-languageserver-types";
-import { URI } from "vscode-uri";
-
-import { useDMStore } from "../../../../../store/store";
-import { IDataMapperContext } from "../../../../../utils/DataMapperContext/DataMapperContext";
-import { DiagnosticTooltip } from "../../../Diagnostic/DiagnosticTooltip/DiagnosticTooltip";
-import { EditableRecordField } from "../../../Mappings/EditableRecordField";
-import { DataMapperPortWidget, PortState, RecordFieldPortModel } from "../../../Port";
-import {
-    createSourceForUserInput,
-    extractImportAlias,
-    getDefaultValue,
-    getExprBodyFromTypeCastExpression,
-    getFieldName,
-    getInnermostExpressionBody,
-    getMatchingType,
-    getNewFieldAdditionModification,
-    getTypeName,
-    isConnectedViaLink,
-    isEmptyValue
-} from "../../../utils/dm-utils";
-import { getModification } from "../../../utils/modifications";
-import {
-    CLEAR_EXISTING_MAPPINGS_WARNING,
-    getSupportedUnionTypes,
-    getUnionTypes,
-    INCOMPATIBLE_CASTING_WARNING,
-    isAnydataType
-} from "../../../utils/union-type-utils";
-import { AddRecordFieldButton } from "../AddRecordFieldButton";
-import { OutputSearchHighlight } from "../Search";
-
-import { ArrayTypedEditableRecordFieldWidget } from "./ArrayTypedEditableRecordFieldWidget";
-import { ValueConfigMenu, ValueConfigOption } from "./ValueConfigButton";
-import { ValueConfigMenuItem } from "./ValueConfigButton/ValueConfigMenuItem";
-import { Button, Codicon, Icon, ProgressRing, TruncatedLabel } from "@wso2/ui-toolkit";
-import { useIONodesStyles } from "../../../../styles";
-
-export interface EditableRecordFieldWidgetProps {
-    parentId: string;
-    field: EditableRecordField;
-    engine: DiagramEngine;
-    getPort: (portId: string) => RecordFieldPortModel;
-    parentMappingConstruct: STNode;
-    context: IDataMapperContext;
-    fieldIndex?: number;
-    treeDepth?: number;
-    deleteField?: (node: STNode) => Promise<void>;
-    hasHoveredParent?: boolean;
-}
-
-export function EditableRecordFieldWidget(props: EditableRecordFieldWidgetProps) {
-    const {
-        parentId,
-        field,
-        getPort,
-        engine,
-        parentMappingConstruct,
-        context,
-        fieldIndex,
-        treeDepth = 0,
-        deleteField,
-        hasHoveredParent
-    } = props;
-    const {
-        applyModifications,
-        enableStatementEditor,
-        filePath,
-        handleCollapse,
-        langServerRpcClient
-    } = context;
-    const classes = useIONodesStyles();
-    const [isLoading, setIsLoading] = useState(false);
-    const [isHovered, setIsHovered] = useState(false);
-    const [isModyfying, setIsModyfying] = useState(false);
-
-    let fieldName = getFieldName(field);
-    const fieldId = fieldIndex !== undefined
-        ? `${parentId}.${fieldIndex}${fieldName && `.${fieldName}`}`
-        : `${parentId}.${fieldName}`;
-    const portIn = getPort(fieldId + ".IN");
-    const specificField = field.hasValue() && STKindChecker.isSpecificField(field.value) && field.value;
-    const mappingConstruct = STKindChecker.isMappingConstructor(parentMappingConstruct) && parentMappingConstruct;
-    const isArray = field.type.typeName === PrimitiveBalType.Array;
-    const isRecord = field.type.typeName === PrimitiveBalType.Record;
-    const typeName = getTypeName(field.type);
-    const hasValue = specificField && specificField.valueExpr;
-    const fields = isRecord && field.childrenTypes;
-    const isWithinArray = fieldIndex !== undefined;
-    const isUnionTypedElement = field.originalType.typeName === PrimitiveBalType.Union;
-    const isEnumTypedElement = field.originalType.typeName === PrimitiveBalType.Enum;
-    const isUnresolvedUnionTypedElement = isUnionTypedElement && field.type.typeName === PrimitiveBalType.Union;
-    let indentation = treeDepth * 16;
-    const [portState, setPortState] = useState<PortState>(PortState.Unselected);
-    const [isDisabled, setIsDisabled] = useState(portIn?.descendantHasValue);
-
-    const connectedViaLink = useMemo(() => {
-        if (hasValue) {
-            return isConnectedViaLink(specificField.valueExpr);
-        }
-        return false;
-    }, [field]);
-
-    const value: string = !isArray && !isRecord && hasValue && getInnermostExpressionBody(specificField.valueExpr).source;
-    let expanded = true;
-
-    const handleAddValue = async () => {
-        setIsLoading(true);
-        try {
-            let targetTypeName = field.type?.typeName;
-            if (!targetTypeName) {
-                const typeInfo = field.type.typeInfo;
-                const langClient = await langServerRpcClient;
-                const typesRes = await langClient.getTypeFromExpression({
-                    documentIdentifier: {
-                        uri: URI.file(filePath).toString()
-                    },
-                    expressionRanges: [{
-                        startLine: {
-                            line: field.parentType.value.position.startLine,
-                            offset: field.parentType.value.position.startColumn
-                        },
-                        endLine: {
-                            line: field.parentType.value.position.endLine,
-                            offset: field.parentType.value.position.endColumn
-                        },
-                        filePath: URI.file(filePath).toString()
-                    }]
-                });
-                for (const { type } of typesRes.types) {
-                    const matchingType = getMatchingType(type, typeInfo);
-                    targetTypeName = matchingType ? matchingType.typeName : targetTypeName;
-                }
-            }
-            const defaultValue = getDefaultValue(targetTypeName);
-            await createSourceForUserInput(field, mappingConstruct, defaultValue, applyModifications);
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const handleEditValue = () => {
-        if (field.value && STKindChecker.isSpecificField(field.value)) {
-            const innerExpr = getInnermostExpressionBody(field.value.valueExpr);
-            enableStatementEditor({
-                value: innerExpr.source,
-                valuePosition: innerExpr.position as NodePosition,
-                label: field.value.fieldName.value as string
-            });
-        }
-    };
-
-    const handleDeleteValue = async () => {
-        setIsLoading(true);
-        try {
-            await deleteField(field.value);
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const handleExpand = () => {
-        handleCollapse(fieldId, !expanded);
-    };
-
-    const handlePortState = (state: PortState) => {
-        setPortState(state)
-    };
-
-    const onMouseEnter = () => {
-        setIsHovered(true);
-    };
-
-    const onMouseLeave = () => {
-        setIsHovered(false);
-    };
-
-    const getTargetPositionForReInitWithTypeCast = () => {
-        let targetPosition: NodePosition = field.value.position;
-
-        if (STKindChecker.isSpecificField(field.value)) {
-            targetPosition = field.value.valueExpr.position;
-            const isValueExprEmpty = isEmptyValue(field.value.valueExpr.position);
-            if (isValueExprEmpty) {
-                targetPosition = {
-                    ...field.value.position,
-                    startLine: field.value.position.endLine,
-                    startColumn: field.value.position.endColumn
-                }
-            }
-        }
-
-        return targetPosition;
-    }
-
-    const getTargetPositionForWrapWithTypeCast = () => {
-        let valueExpr: STNode = field.value;
-        let valueExprPosition: NodePosition = valueExpr.position;
-
-        if (STKindChecker.isSpecificField(field.value)) {
-            valueExpr = field.value.valueExpr;
-            valueExprPosition = valueExpr.position;
-        }
-
-        let targetPosition: NodePosition = {
-            ...valueExprPosition,
-            endLine: valueExprPosition.startLine,
-            endColumn: valueExprPosition.startColumn
-        }
-
-        if (STKindChecker.isTypeCastExpression(valueExpr)) {
-            const exprBodyPosition = getExprBodyFromTypeCastExpression(valueExpr).position;
-            targetPosition = {
-                ...valueExprPosition,
-                endLine: exprBodyPosition.startLine,
-                endColumn: exprBodyPosition.startColumn
-            };
-        }
-
-        return targetPosition;
-    }
-
-    const handleWrapWithTypeCast = async (type: TypeField, shouldReInitialize?: boolean) => {
-        setIsModyfying(true)
-        try {
-            const name = getTypeName(type);
-            if (field?.value) {
-                const modification: STModification[] = [];
-                if (shouldReInitialize) {
-                    const defaultValue = getDefaultValue(type.typeName);
-                    const targetPosition = getTargetPositionForReInitWithTypeCast();
-                    modification.push(getModification(`<${name}>${defaultValue}`, targetPosition));
-                } else {
-                    const targetPosition = getTargetPositionForWrapWithTypeCast();
-                    modification.push(getModification(`<${name}>`, targetPosition));
-                }
-                await applyModifications(modification);
-            } else {
-                const defaultValue = `<${name}>${getDefaultValue(type.typeName)}`;
-                await createSourceForUserInput(field, mappingConstruct, defaultValue, applyModifications);
-            }
-        } finally {
-            setIsModyfying(false);
-        }
-    };
-
-    useEffect(() => {
-        if (!isDisabled) {
-            if (portIn?.parentModel && (Object.entries(portIn?.parentModel.links).length > 0 || portIn?.parentModel.ancestorHasValue)) {
-                portIn.ancestorHasValue = true;
-                setIsDisabled(true);
-            }
-            const isConnectedViaQueryExpr = hasValue && STKindChecker.isQueryExpression(specificField.valueExpr);
-            const isInitializedRecord = isRecord && hasValue && !connectedViaLink;
-            const isInitializedArray = isArray && hasValue && !connectedViaLink;
-            const isEmptyArray = isArray && portIn.editableRecordField?.elements?.length === 0;
-
-            if (isConnectedViaQueryExpr || isInitializedRecord || (isInitializedArray && !isEmptyArray)) {
-                portIn?.setDescendantHasValue();
-                setIsDisabled(true);
-            }
-        }
-    }, [field]);
-
-    if (portIn && portIn.collapsed) {
-        expanded = false;
-    }
-
-    if (!portIn) {
-        indentation += 24;
-    }
-
-    if (isWithinArray) {
-        const elementName = fieldName || field.parentType.type?.name;
-        fieldName = elementName ? `${elementName}Item` : 'item';
-    }
-
-    const diagnostic = (specificField.valueExpr as STNode)?.typeData?.diagnostics[0] as Diagnostic;
-
-    const getUnionType = () => {
-        const typeText: JSX.Element[] = [];
-        const unionTypes = getUnionTypes(field.originalType);
-        const resolvedTypeName = getTypeName(field.type);
-        unionTypes.forEach((type) => {
-            if (type.trim() === resolvedTypeName) {
-                typeText.push(<span className={classes.boldedTypeLabel}>{type}</span>);
-            } else {
-                typeText.push(<>{type}</>);
-            }
-            if (type !== unionTypes[unionTypes.length - 1]) {
-                typeText.push(<> | </>);
-            }
-        });
-        return typeText;
-    };
-
-    const label = !isArray && (
-        <TruncatedLabel style={{ marginRight: "auto" }}>
-            <span style={{ marginRight: "auto" }} data-testid={`record-widget-field-label-${portIn?.getName()}`}>
-                <span
-                    className={classnames(
-                        classes.valueLabel,
-                        isDisabled && !hasHoveredParent ? classes.labelDisabled : ""
-                    )}
-                    style={{ marginLeft: fields ? 0 : indentation + 24 }}
-                >
-                    <OutputSearchHighlight>{fieldName}</OutputSearchHighlight>
-                    {!field.type?.optional && <span className={classes.requiredMark}>*</span>}
-                    {typeName && ":"}
-                </span>
-                {typeName && (
-                    <span
-                        className={classnames(classes.outputTypeLabel,
-                            isDisabled && !hasHoveredParent ? classes.labelDisabled : ""
-                        )}
-                    >
-                        {field.originalType.typeName === PrimitiveBalType.Union ? getUnionType() : typeName || ''}
-                    </span>
-                )}
-                {value && !connectedViaLink && (
-                    <>
-                        {diagnostic ? (
-                            <DiagnosticTooltip diagnostic={diagnostic} value={value} onClick={handleEditValue}>
-                                <Button
-                                    appearance="icon"
-                                    onClick={handleEditValue}
-                                    data-testid={`record-widget-field-${portIn?.getName()}`}
-                                >
-                                    <Icon
-                                        name="error-icon"
-                                        sx={{ height: "14px", width: "14px" }}
-                                        iconSx={{ fontSize: "14px", color: "var(--vscode-errorForeground)" }}
-                                    />
-                                </Button>
-                            </DiagnosticTooltip>
-                        ) : (
-                            <span
-                                className={classes.outputNodeValue}
-                                onClick={handleEditValue}
-                                data-testid={`record-widget-field-${portIn?.getName()}`}
-                            >
-                                {value}
-                            </span>
-                        )}
-                    </>
-                )}
-            </span>
-        </TruncatedLabel>
-    );
-
-    const handleAssignDefaultValue = async (typeNameStr: string) => {
-        setIsLoading(true);
-        try {
-            const defaultValue = getDefaultValue(typeNameStr);
-            await createSourceForUserInput(
-                field, parentMappingConstruct as MappingConstructor, defaultValue, applyModifications
-            );
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const addOrEditValueMenuItem: ValueConfigMenuItem = hasValue
-        ? { title: ValueConfigOption.EditValue, onClick: handleEditValue }
-        : !(isUnionTypedElement || isEnumTypedElement)
-            && { title: ValueConfigOption.InitializeWithValue, onClick: handleAddValue };
-
-    const deleteValueMenuItem: ValueConfigMenuItem = {
-        title: isWithinArray ? ValueConfigOption.DeleteElement : ValueConfigOption.DeleteValue,
-        onClick: handleDeleteValue
-    };
-
-    const getTypeCastMenuItem = (unionMember: TypeField, shouldWarn?: boolean): ValueConfigMenuItem => {
-        const memberTypeName = getTypeName(unionMember);
-        return {
-            title: `Cast type as ${memberTypeName}`,
-            onClick: () => handleWrapWithTypeCast(unionMember),
-            level: 0,
-            warningMsg: shouldWarn && INCOMPATIBLE_CASTING_WARNING
-        };
-    };
-
-    const getReInitMenuItem = (unionMember: TypeField): ValueConfigMenuItem => {
-        const memberTypeName = getTypeName(unionMember);
-        return {
-            title: `Re-initialize as ${memberTypeName}`,
-            onClick: () => handleWrapWithTypeCast(unionMember, true),
-            level: 1,
-            warningMsg: CLEAR_EXISTING_MAPPINGS_WARNING
-        };
-    };
-
-    const getTypedElementMenuItems = () => {
-        const menuItems: ValueConfigMenuItem[] = [];
-        const resolvedTypeName = getTypeName(field.type);
-        const supportedTypes = getSupportedUnionTypes(field.originalType);
-        const resolvedViaTypeCast = field?.value
-            && !isUnresolvedUnionTypedElement
-            && STKindChecker.isSpecificField(field.value)
-            && STKindChecker.isTypeCastExpression(field.value.valueExpr);
-
-        for (const member of field.originalType.members) {
-            const memberTypeName = getTypeName(member);
-            if (!supportedTypes.includes(memberTypeName) || isAnydataType(memberTypeName)) {
-                continue;
-            }
-            if (field.hasValue()) {
-                if (isUnresolvedUnionTypedElement) {
-                    menuItems.push(getReInitMenuItem(member));
-                    if (field?.value && STKindChecker.isSpecificField(field.value) && !isEmptyValue(field.value.valueExpr.position)) {
-                        menuItems.push(getTypeCastMenuItem(member, true));
-                    }
-                } else {
-                    const isResolvedType = memberTypeName === resolvedTypeName;
-                    if (resolvedViaTypeCast) {
-                        if (!isResolvedType) {
-                            menuItems.push(getTypeCastMenuItem(member, true), getReInitMenuItem(member));
-                        }
-                    } else if (supportedTypes.length > 1) {
-                        if (isResolvedType) {
-                            menuItems.push(getTypeCastMenuItem(member));
-                        } else {
-                            menuItems.push(getReInitMenuItem(member));
-                        }
-                    }
-                }
-            } else {
-                menuItems.push({
-                    title: `Initialize as ${memberTypeName}`,
-                    onClick: () => handleWrapWithTypeCast(member)
-                })
-            }
-        }
-
-        return menuItems.sort((a, b) => (a.level || 0) - (b.level || 0));
-    };
-
-    const getEnumElementMenuItems = () => {
-        const menuItems: ValueConfigMenuItem[] = [];
-        for (const member of field.originalType.members) {
-            const memberTypeName = getTypeName(member);
-
-            let enumValName = memberTypeName;
-            if (field.type?.typeInfo) {
-                const { orgName, moduleName } = field.type?.typeInfo;
-                const importStatements = useDMStore.getState().imports;
-                const importStatement = importStatements.find(item => item.includes(`${orgName}/${moduleName}`));
-                if (importStatement) {
-                    // If enum is from an imported package
-                    const importAlias = extractImportAlias(moduleName, importStatement);
-                    enumValName = `${(importAlias || moduleName.split('.').pop())}:${memberTypeName}`;
-                }
-            }
-            menuItems.push({
-                title: `${hasValue ? `Re-Initialize` : 'Initialize'} as ${enumValName}`,
-                onClick: () => hasValue
-                    ? handleReInitEnumValue(memberTypeName)
-                    : createSourceForUserInput(field, mappingConstruct, enumValName, applyModifications)
-            });
-        }
-        return menuItems.sort((a, b) => (a.level || 0) - (b.level || 0));
-    };
-
-    const handleReInitEnumValue = async (newValue: string) => {
-        setIsModyfying(true)
-        try {
-            if (field?.value) {
-                const modification: STModification[] = [];
-                if (STKindChecker.isSpecificField(field.value)) {
-                    const valueExprPosition = field.value.valueExpr.position;
-                    modification.push(getModification(newValue, valueExprPosition));
-                    await applyModifications(modification);
-                }
-            }
-        } finally {
-            setIsModyfying(false);
-        }
-    };
-
-    const valConfigMenuItems = [
-        !isWithinArray && addOrEditValueMenuItem,
-        (hasValue || isWithinArray) && deleteValueMenuItem,
-    ];
-
-    const isAnyDataRecord = field.type?.originalTypeName === AnydataType && field.type?.typeName !== PrimitiveBalType.Array;
-
-    if (field.type?.typeName === AnydataType) {
-        const anyDataConvertOptions: ValueConfigMenuItem[] = []
-        anyDataConvertOptions.push({ title: `Initialize as record`, onClick: () => handleAssignDefaultValue(PrimitiveBalType.Record) })
-        anyDataConvertOptions.push({ title: `Initialize as array`, onClick: () => handleAssignDefaultValue(PrimitiveBalType.Array) })
-        valConfigMenuItems.push(...anyDataConvertOptions)
-    }
-
-    const typeSpecificMenuItems = useMemo(() => {
-        if (isUnionTypedElement) {
-            return getTypedElementMenuItems();
-        } else if (isEnumTypedElement) {
-            return getEnumElementMenuItems();
-        }
-        return [];
-    }, [field.originalType.members, isUnionTypedElement, isEnumTypedElement]);
-
-    valConfigMenuItems.push(...typeSpecificMenuItems);
-
-    const addNewField = async (newFieldNameStr: string) => {
-        const modification = getNewFieldAdditionModification(field.value, newFieldNameStr);
-        if (modification) {
-            await applyModifications(modification);
-        }
-    }
-
-    const subFieldNames = useMemo(() => {
-        const fieldNames: string[] = [];
-        if (expanded && fields) {
-            fields?.forEach(fieldItem => {
-                if (fieldItem.value && STKindChecker.isSpecificField(fieldItem.value)) {
-                    fieldNames.push(fieldItem.value?.fieldName?.value)
-                }
-            })
-        }
-        return fieldNames;
-    }, [fields, expanded])
-
-    return (
-        <>
-            {!isArray && (
-                <div
-                    id={"recordfield-" + fieldId}
-                    className={classnames(classes.treeLabel,
-                        isDisabled && !hasHoveredParent && !isHovered ? classes.treeLabelDisabled : "",
-                        isDisabled && isHovered ? classes.treeLabelDisableHover : "",
-                        portState !== PortState.Unselected ? classes.treeLabelPortSelected : "",
-                        hasHoveredParent ? classes.treeLabelParentHovered : ""
-                    )}
-                    onMouseEnter={onMouseEnter}
-                    onMouseLeave={onMouseLeave}
-                >
-                    <span className={classes.inPort}>
-                        {portIn && (
-                            <DataMapperPortWidget
-                                engine={engine}
-                                port={portIn}
-                                disable={isDisabled && expanded}
-                                handlePortState={handlePortState}
-                            />
-                        )}
-                    </span>
-                    <span className={classes.label}>
-                        {fields && (
-                            <Button
-                                id={"expand-or-collapse-" + fieldId}
-                                appearance="icon"
-                                tooltip="Expand/Collapse"
-                                sx={{ marginLeft: indentation }}
-                                onClick={handleExpand}
-                                data-testid={`${portIn?.getName()}-expand-icon-element`}
-                            >
-                                {expanded ? <Codicon name="chevron-right" /> : <Codicon name="chevron-down" />}
-                            </Button>
-                        )}
-                        {label}
-                    </span>
-                    {(!isDisabled || hasValue) && (
-                        <>
-                            {(isLoading || isModyfying) ? (
-                                <ProgressRing sx={{ height: '16px', width: '16px' }} />
-                            ) : (
-                                <ValueConfigMenu menuItems={valConfigMenuItems} portName={portIn?.getName()} />
-                            )}
-                        </>
-                    )}
-                </div>
-            )}
-            {isArray && (
-                <ArrayTypedEditableRecordFieldWidget
-                    key={fieldId}
-                    engine={engine}
-                    field={field}
-                    getPort={getPort}
-                    parentId={parentId}
-                    parentMappingConstruct={mappingConstruct}
-                    context={context}
-                    fieldIndex={fieldIndex}
-                    treeDepth={treeDepth}
-                    deleteField={deleteField}
-                    hasHoveredParent={isHovered || hasHoveredParent}
-                />
-            )}
-            {fields && expanded &&
-                fields.map((subField, index) => {
-                    return (
-                        <EditableRecordFieldWidget
-                            key={index}
-                            engine={engine}
-                            field={subField}
-                            getPort={getPort}
-                            parentId={fieldId}
-                            parentMappingConstruct={mappingConstruct}
-                            context={context}
-                            treeDepth={treeDepth + 1}
-                            deleteField={deleteField}
-                            hasHoveredParent={isHovered || hasHoveredParent}
-                        />
-                    );
-                })
-            }
-            {isAnyDataRecord && (
-                <AddRecordFieldButton
-                    fieldId={fieldId}
-                    addNewField={addNewField}
-                    indentation={indentation + 50}
-                    existingFieldNames={subFieldNames}
-                />
-            )}
-        </>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/PrimitiveTypeOutputWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/PrimitiveTypeOutputWidget.tsx
deleted file mode 100644
index ccd1499a554..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/PrimitiveTypeOutputWidget.tsx
+++ /dev/null
@@ -1,274 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import * as React from 'react';
-// tslint:disable-next-line:no-duplicate-imports
-import { useState } from "react";
-
-import { Button, Codicon, ProgressRing, TruncatedLabel } from '@wso2/ui-toolkit';
-import { DiagramEngine } from '@projectstorm/react-diagrams';
-import { STModification, TypeField } from "@wso2/ballerina-core";
-import { NodePosition, STKindChecker, STNode } from "@wso2/syntax-tree";
-
-import { IDataMapperContext } from "../../../../../utils/DataMapperContext/DataMapperContext";
-import { EditableRecordField } from "../../../Mappings/EditableRecordField";
-import { DataMapperPortWidget, RecordFieldPortModel } from "../../../Port";
-import {
-	getDefaultValue,
-	getExprBodyFromLetExpression,
-	getExprBodyFromTypeCastExpression,
-	getTypeName
-} from "../../../utils/dm-utils";
-import { getModification } from "../../../utils/modifications";
-import {
-	CLEAR_EXISTING_MAPPINGS_WARNING,
-	getSupportedUnionTypes,
-	INCOMPATIBLE_CASTING_WARNING,
-	isAnydataType,
-	UnionTypeInfo
-} from "../../../utils/union-type-utils";
-import { OutputSearchHighlight } from '../Search';
-import { TreeBody, TreeContainer, TreeHeader } from "../Tree/Tree";
-
-import { PrimitiveTypedEditableElementWidget } from "./PrimitiveTypedEditableElementWidget";
-import { ValueConfigMenu } from "./ValueConfigButton";
-import { ValueConfigMenuItem } from "./ValueConfigButton/ValueConfigMenuItem";
-import { useIONodesStyles } from '../../../../styles';
-
-export interface PrimitiveTypeOutputWidgetProps {
-	id: string;
-	field: EditableRecordField;
-	engine: DiagramEngine;
-	getPort: (portId: string) => RecordFieldPortModel;
-	context: IDataMapperContext;
-	typeName: string;
-	valueLabel?: string;
-	deleteField?: (node: STNode) => Promise<void>;
-	unionTypeInfo?: UnionTypeInfo;
-}
-
-
-export function PrimitiveTypeOutputWidget(props: PrimitiveTypeOutputWidgetProps) {
-	const { id, field, getPort, engine, context, typeName, valueLabel, deleteField, unionTypeInfo } = props;
-	const classes = useIONodesStyles();
-
-	const [isModifyingTypeCast, setIsModifyingTypeCast] = useState(false);
-
-	const type = typeName || field?.type?.typeName;
-	const fieldId = `${id}.${type}`;
-	const portIn = getPort(`${fieldId}.IN`);
-
-	let expanded = true;
-	if ((portIn && portIn.collapsed)) {
-		expanded = false;
-	}
-
-	const indentation = (portIn && !expanded) ? 0 : 24;
-
-	const getUnionType = () => {
-		const typeText: JSX.Element[] = [];
-		const { typeNames, resolvedTypeName } = unionTypeInfo;
-		typeNames.forEach((unionType) => {
-			if (unionType.trim() === resolvedTypeName) {
-				typeText.push(<span className={classes.boldedTypeLabel}>{unionType}</span>);
-			} else {
-				typeText.push(<>{unionType}</>);
-			}
-			if (unionType !== typeNames[typeNames.length - 1]) {
-				typeText.push(<> | </>);
-			}
-		});
-		return typeText;
-	};
-
-	const label = (
-		<TruncatedLabel style={{ marginRight: "auto" }}>
-			<span style={{ marginRight: "auto" }}>
-				{valueLabel && (
-					<span className={classes.valueLabel}>
-						<OutputSearchHighlight>{valueLabel}</OutputSearchHighlight>
-						{type && ":"}
-					</span>
-				)}
-				<span className={classes.outputTypeLabel}>
-					{unionTypeInfo ? getUnionType() : type}
-				</span>
-			</span>
-		</TruncatedLabel>
-	);
-
-	const handleExpand = () => {
-		context.handleCollapse(fieldId, !expanded);
-	}
-
-	const getTargetPositionForReInitWithTypeCast = () => {
-		const rootValueExpr = unionTypeInfo.valueExpr.expression;
-		const valueExpr: STNode = STKindChecker.isLetExpression(rootValueExpr)
-			? getExprBodyFromLetExpression(rootValueExpr)
-			: rootValueExpr;
-
-		return valueExpr.position;
-	}
-
-	const getTargetPositionForWrapWithTypeCast = () => {
-		const rootValueExpr = unionTypeInfo.valueExpr.expression;
-		const valueExpr: STNode = STKindChecker.isLetExpression(rootValueExpr)
-			? getExprBodyFromLetExpression(rootValueExpr)
-			: rootValueExpr;
-		const valueExprPosition: NodePosition = valueExpr.position;
-
-		let targetPosition: NodePosition = {
-			...valueExprPosition,
-			endLine: valueExprPosition.startLine,
-			endColumn: valueExprPosition.startColumn
-		}
-
-		if (STKindChecker.isTypeCastExpression(valueExpr)) {
-			const exprBodyPosition = getExprBodyFromTypeCastExpression(valueExpr).position;
-			targetPosition = {
-				...valueExprPosition,
-				endLine: exprBodyPosition.startLine,
-				endColumn: exprBodyPosition.startColumn
-			};
-		}
-
-		return targetPosition;
-	}
-
-	const handleWrapWithTypeCast = async (selectedType: TypeField, shouldReInitialize?: boolean) => {
-		setIsModifyingTypeCast(true)
-		try {
-			const name = getTypeName(selectedType);
-			const modification: STModification[] = [];
-			if (shouldReInitialize) {
-				const defaultValue = getDefaultValue(selectedType.typeName);
-				const targetPosition = getTargetPositionForReInitWithTypeCast();
-				modification.push(getModification(`<${name}>${defaultValue}`, targetPosition));
-			} else {
-				const targetPosition = getTargetPositionForWrapWithTypeCast();
-				modification.push(getModification(`<${name}>`, targetPosition));
-			}
-			await context.applyModifications(modification);
-		} finally {
-			setIsModifyingTypeCast(false);
-		}
-	};
-
-	const getTypedElementMenuItems = () => {
-		const menuItems: ValueConfigMenuItem[] = [];
-		const resolvedTypeName = getTypeName(field.type);
-		const supportedTypes = getSupportedUnionTypes(unionTypeInfo.unionType);
-
-		for (const member of unionTypeInfo.unionType.members) {
-			const memberTypeName = getTypeName(member);
-			if (!supportedTypes.includes(memberTypeName) || isAnydataType(memberTypeName)) {
-				continue;
-			}
-			const isResolvedType = memberTypeName === resolvedTypeName;
-			if (unionTypeInfo.isResolvedViaTypeCast) {
-				if (!isResolvedType) {
-					menuItems.push(
-						{
-							title: `Change type cast to ${memberTypeName}`,
-							onClick: () => handleWrapWithTypeCast(member, false),
-							level: 2,
-							warningMsg: INCOMPATIBLE_CASTING_WARNING
-						},
-						{
-							title: `Re-initialize as ${memberTypeName}`,
-							onClick: () => handleWrapWithTypeCast(member, true),
-							level: 3,
-							warningMsg: CLEAR_EXISTING_MAPPINGS_WARNING
-						}
-					);
-				}
-			} else if (supportedTypes.length > 1) {
-				if (isResolvedType) {
-					menuItems.push({
-						title: `Cast type as ${memberTypeName}`,
-						onClick: () => handleWrapWithTypeCast(member, false),
-						level: 0
-					});
-				} else {
-					menuItems.push(
-						{
-							title: `Cast type as ${memberTypeName}!`,
-							onClick: () => handleWrapWithTypeCast(member, false),
-							level: 1,
-							warningMsg: INCOMPATIBLE_CASTING_WARNING
-						}, {
-							title: `Re-initialize as ${memberTypeName}`,
-							onClick: () => handleWrapWithTypeCast(member, true),
-							level: 3,
-							warningMsg: CLEAR_EXISTING_MAPPINGS_WARNING
-						}
-					);
-				}
-			}
-		}
-
-		return menuItems.sort((a, b) => (a.level || 0) - (b.level || 0));
-	};
-
-	const valConfigMenuItems = unionTypeInfo && getTypedElementMenuItems();
-
-	return (
-		<TreeContainer data-testid={`${id}-node`}>
-			<TreeHeader>
-				<span className={classes.inPort}>
-					{portIn && !expanded &&
-						<DataMapperPortWidget engine={engine} port={portIn} />
-					}
-				</span>
-				<span className={classes.label}>
-					<Button
-						appearance="icon"
-						sx={{ marginLeft: indentation }}
-						onClick={handleExpand}
-						data-testid={`${id}-expand-icon-primitive-type`}
-					>
-						{expanded ? <Codicon name="chevron-right" /> : <Codicon name="chevron-down" />}
-					</Button>
-					{label}
-				</span>
-				{valConfigMenuItems?.length > 0 && (
-					<>
-						{isModifyingTypeCast ? (
-							<ProgressRing sx={{ height: '16px', width: '16px' }} />
-						) : (
-							<ValueConfigMenu menuItems={valConfigMenuItems} portName={portIn?.getName()} />
-						)}
-					</>
-				)}
-			</TreeHeader>
-			{expanded && field && (
-				<TreeBody>
-					<PrimitiveTypedEditableElementWidget
-						key={id}
-						parentId={id}
-						engine={engine}
-						field={field}
-						getPort={getPort}
-						context={context}
-						deleteField={deleteField}
-					/>
-				</TreeBody>
-			)}
-		</TreeContainer>
-	);
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/PrimitiveTypedEditableElementWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/PrimitiveTypedEditableElementWidget.tsx
deleted file mode 100644
index 7e87baa668e..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/PrimitiveTypedEditableElementWidget.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React, { useEffect, useMemo, useState } from "react";
-
-import { DiagramEngine } from "@projectstorm/react-diagrams-core";
-import { NodePosition, STKindChecker, STNode } from "@wso2/syntax-tree";
-import { TruncatedLabel } from "@wso2/ui-toolkit";
-import classnames from "classnames";
-
-import { IDataMapperContext } from "../../../../../utils/DataMapperContext/DataMapperContext";
-import { EditableRecordField } from "../../../Mappings/EditableRecordField";
-import { DataMapperPortWidget, PortState, RecordFieldPortModel } from "../../../Port";
-import {
-    getDefaultValue,
-    getFieldLabel,
-    getFieldName,
-    getInnermostExpressionBody
-} from "../../../utils/dm-utils";
-import { OutputSearchHighlight } from "../Search";
-
-import { ValueConfigMenu, ValueConfigOption } from "./ValueConfigButton";
-import { useIONodesStyles } from "../../../../styles";
-
-export interface PrimitiveTypedEditableElementWidgetProps {
-    parentId: string;
-    field: EditableRecordField;
-    engine: DiagramEngine;
-    getPort: (portId: string) => RecordFieldPortModel;
-    context: IDataMapperContext;
-    fieldIndex?: number;
-    deleteField?: (node: STNode) => Promise<void>;
-    isArrayElement?: boolean;
-    hasHoveredParent?: boolean;
-}
-
-export function PrimitiveTypedEditableElementWidget(props: PrimitiveTypedEditableElementWidgetProps) {
-    const {
-        parentId,
-        field,
-        getPort,
-        engine,
-        context,
-        fieldIndex,
-        deleteField,
-        isArrayElement,
-        hasHoveredParent
-    } = props;
-    const classes = useIONodesStyles();
-
-    const fieldName = getFieldName(field);
-    const typeName = field.type.typeName;
-    let fieldId = parentId;
-    if (fieldIndex !== undefined) {
-        fieldId = fieldName !== ''
-            ? `${parentId}.${fieldIndex}.${fieldName}`
-            : `${parentId}.${fieldIndex}`;
-    } else if (fieldName) {
-        fieldId = `${parentId}.${typeName}.${fieldName}`;
-    } else {
-        fieldId = `${parentId}.${typeName}`;
-    }
-    const portIn = getPort(`${fieldId}.IN`);
-    let body: STNode;
-
-    if (field?.value) {
-        body = getInnermostExpressionBody(field.value);
-        if (STKindChecker.isQueryExpression(field.value)) {
-            const selectClause = field.value?.selectClause || field.value?.resultClause;
-            body = selectClause.expression;
-        }
-    }
-
-    const value = body && body.source.trim();
-
-    const [editable, setEditable] = useState<boolean>(false);
-    const [portState, setPortState] = useState<PortState>(PortState.Unselected);
-
-    useEffect(() => {
-        if (editable) {
-            context.enableStatementEditor({
-                value: body?.source,
-                valuePosition: body?.position as NodePosition,
-                label: getFieldLabel(fieldId)
-            });
-            setEditable(false);
-        }
-    }, [editable, body]);
-
-    const label = (
-        <TruncatedLabel style={{ marginRight: "auto" }}>
-            <span style={{marginRight: "auto"}} data-testid={`primitive-array-element-${portIn?.getName()}`}>
-                <span className={classes.valueLabel} style={{ marginLeft: "24px" }}>
-                    <OutputSearchHighlight>{value}</OutputSearchHighlight>
-                </span>
-            </span>
-        </TruncatedLabel>
-    );
-
-    const handleEditable = () => {
-        setEditable(true);
-    };
-
-    const handleDelete = async () => {
-        await deleteField(field.value);
-    };
-
-    const valueConfigMenuItems = useMemo(() => {
-        const items =  [
-            {
-                title: ValueConfigOption.EditValue,
-                onClick: handleEditable
-            }
-        ];
-        if (isArrayElement) {
-            items.push({
-                title: ValueConfigOption.DeleteElement,
-                onClick: handleDelete
-            });
-        } else if (value !== getDefaultValue(field.type?.typeName)) {
-            items.push({
-                title: ValueConfigOption.DeleteValue,
-                onClick: handleDelete
-            });
-        }
-        return items;
-    }, [value]);
-
-    const handlePortState = (state: PortState) => {
-        setPortState(state)
-    };
-
-    return (
-        <>
-            {value && (
-                <div
-                    id={"recordfield-" + fieldId}
-                    className={classnames(classes.treeLabel,
-                        (portState !== PortState.Unselected) ? classes.treeLabelPortSelected : "",
-                        hasHoveredParent ? classes.treeLabelParentHovered : ""
-                    )}
-                >
-                    <span className={classes.inPort}>
-                        {portIn &&
-                            <DataMapperPortWidget engine={engine} port={portIn} handlePortState={handlePortState} />
-                        }
-                    </span>
-                    <span className={classes.label}>{label}</span>
-                    <ValueConfigMenu
-                        menuItems={valueConfigMenuItems}
-                        portName={portIn?.getName()}
-                    />
-                </div>
-            )}
-        </>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/ValueConfigButton/ValueConfigMenu.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/ValueConfigButton/ValueConfigMenu.tsx
deleted file mode 100644
index aa1e34f0786..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/ValueConfigButton/ValueConfigMenu.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-lambda  jsx-no-multiline-js
-import React from 'react';
-
-import { css } from '@emotion/css';
-import { Button, ContextMenu, Icon, Item } from '@wso2/ui-toolkit';
-
-const useStyles = () => ({
-    itemContainer: css({
-        display: 'flex',
-        justifyContent: 'space-between',
-        width: '100%',
-        alignItems: 'center'
-    }),
-});
-
-export enum ValueConfigOption {
-    InitializeWithValue = "Initialize With Default Value",
-    EditValue = "Edit Value",
-    InitializeArray = "Initialize Array",
-    DeleteValue = "Delete Value",
-    DeleteElement = "Delete Element",
-    DeleteArray = "Delete Array"
-}
-
-export interface ValueConfigMenuItem {
-    title: string;
-    onClick: () => void;
-    onClose?: () => void;
-    warningMsg?: string;
-    level?: number;
-}
-
-export interface ValueConfigMenuProps {
-    menuItems: ValueConfigMenuItem[]
-    isDisabled?: boolean;
-    portName?: string
-}
-
-export function ValueConfigMenu(props: ValueConfigMenuProps) {
-    const { menuItems, portName } = props;
-    const classes = useStyles();
-
-    const items: Item[] = []
-    menuItems.forEach((menuItem: ValueConfigMenuItem) => {
-        if (menuItem) {
-            const itemElement = (
-                <div
-                    className={classes.itemContainer}
-                    key={menuItem.title}
-                    data-testid={`value-config-${portName}-item-${menuItem.title}`}
-                >
-                    <div>{menuItem.title}</div>
-                    {menuItem?.warningMsg && (
-                        <Button
-                            appearance="icon"
-                            tooltip={menuItem?.warningMsg}
-                        >
-                            <Icon
-                                name="error-icon"
-                                iconSx={{ fontSize: "16px", color: "var(--vscode-errorForeground)" }}
-                            />
-                        </Button>
-                    )}
-                </div>
-            );
-            const item: Item = { id: menuItem.title, label: itemElement, onClick: menuItem.onClick }
-            items.push(item);
-        }
-    });
-
-    return (
-        <ContextMenu iconSx={{ transform: "rotate(90deg)" }} menuItems={items} />
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/styles.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/styles.ts
deleted file mode 100644
index b9deb344a00..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/styles.ts
+++ /dev/null
@@ -1,228 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { css } from "@emotion/css";
-
-export const useStyles = () => ({
-    treeLabel: css({
-        verticalAlign: "middle",
-        padding: "5px",
-        minWidth: "100px",
-        display: "flex",
-        minHeight: "24px",
-        width: "100%",
-        '&:hover': {
-            backgroundColor: 'var(--vscode-list-hoverBackground)',
-        },
-    }),
-    treeLabelPortSelected: css({
-        color: "var(--vscode-list-activeSelectionForeground)",
-        backgroundColor: 'var(--vscode-list-activeSelectionBackground)',
-        outline: "1px solid var(--vscode-list-focusAndSelectionOutline, var(--vscode-contrastActiveBorder, var(--vscode-editorLink-activeForeground, var(--vscode-list-focusOutline))))",
-        "&:hover": {
-            backgroundColor: 'var(--vscode-list-activeSelectionBackground)'
-        }
-    }),
-    treeLabelParentHovered: css({
-        backgroundColor: 'var(--vscode-list-hoverBackground)',
-    }),
-    treeLabelDisableHover: css({
-        '&:hover': {
-            backgroundColor: 'var(--vscode-input-background)',
-        }
-    }),
-    treeLabelDisabled: css({
-        backgroundColor: "var(--vscode-editorWidget-background)",
-        '&:hover': {
-            backgroundColor: 'var(--vscode-editorWidget-background)',
-        },
-        cursor: 'not-allowed'
-    }),
-    treeLabelArray: css({
-        flexDirection: "column"
-    }),
-    ArrayFieldRow: css({
-        display: "flex",
-        alignItems: 'center',
-        '&:hover': {
-            backgroundColor: 'inherit',
-        }
-    }),
-    ArrayFieldRowDisabled: css({
-        '&:hover': {
-            backgroundColor: 'var(--vscode-editorWidget-background)'
-        }
-    }),
-    innerTreeLabel: css({
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "flex-start",
-        width: "inherit",
-        padding: "10px 12px",
-        margin: "10px",
-        flex: "none",
-        order: 1,
-        flexGrow: 0
-    }),
-    treeLabelOutPort: css({
-        float: "right",
-        width: 'fit-content',
-        marginLeft: "auto",
-        display: "flex",
-        alignItems: "center"
-    }),
-    treeLabelInPort: css({
-        float: "left",
-        marginRight: "5px",
-        width: 'fit-content',
-        display: "flex",
-        alignItems: "center"
-    }),
-    typeLabel: css({
-        marginLeft: "3px",
-        padding: "5px",
-        fontSize: "13px",
-        minWidth: "100px",
-        marginRight: "24px",
-        fontWeight: 400
-    }),
-    typeLabelDisabled: css({
-        backgroundColor: "var(--vscode-editorWidget-background)",
-        color: "var(--vscode-icon-foreground)",
-        opacity: 0.5
-    }),
-    value: css({
-        verticalAlign: "middle",
-        padding: "5px",
-        backgroundColor: "var(--vscode-input-background)",
-        borderRadius: "5px",
-        cursor: 'pointer',
-        pointerEvents: 'auto',
-        transition: 'border 0.2s',
-        border: `1px solid var(--vscode-input-background)`,
-        '&:hover': {
-            border: "1px solid var(--vscode-pickerGroup-border)"
-        }
-    }),
-    valueWithError: css({
-        verticalAlign: "middle",
-        padding: "5px",
-        backgroundColor: "var(--vscode-inputValidation-errorBackground)",
-        borderRadius: "5px",
-        cursor: 'pointer',
-        pointerEvents: 'auto',
-        transition: 'border 0.2s',
-        border: "1px solid var(--vscode-inputValidation-errorBackground)",
-        '&:hover': {
-            border: "1px solid var(--vscode-errorForeground)"
-        }
-    }),
-    errorIconWrapper: css({
-        height: "22px",
-        width: "22px",
-        marginLeft: '5px',
-        verticalAlign: 'middle',
-    }),
-    valueLabel: css({
-        padding: "5px",
-        fontWeight: 600,
-        fontSize: "13px",
-        color: "inherit"
-    }),
-    valueLabelDisabled: css({
-        backgroundColor: "var(--vscode-editorWidget-background)",
-        color: "var(--vscode-input-foreground)",
-        opacity: 0.5
-    }),
-    group: css({
-        marginLeft: "0px",
-        paddingLeft: "0px",
-        paddingBottom: "5px"
-    }),
-    content: css({
-        borderTopRightRadius: "16px",
-        borderBottomRightRadius: "16px",
-        paddingRight: "8px",
-    }),
-    addIcon: css({
-        "& > vscode-button": {
-            color: "var(--vscode-inputOption-activeForeground)",
-            padding: "5px",
-            textTransform: "none",
-            display: "flex",
-            justifyContent: "space-between",
-            fontStyle: "normal",
-            fontWeight: 400,
-            fontSize: "13px",
-            lineHeight: "24px"
-        },
-        "& > vscode-button > *": {
-            margin: "0px 6px"
-        }
-    }),
-    editButton: css({
-        float: "right",
-        width: 'fit-content',
-        marginLeft: "auto"
-    }),
-    label: css({
-        width: "300px",
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        pointerEvents: "none",
-        display: "flex",
-        alignItems: "center",
-        color: "inherit",
-        "&:hover": {
-            overflow: "visible"
-        }
-    }),
-    expandIcon: css({
-        cursor: "pointer",
-        pointerEvents: "all",
-        color:  "var(--vscode-inputOption-activeForeground)",
-        height: "25px",
-        width: "25px",
-        marginLeft: "auto"
-    }),
-    expandIconDisabled: css({
-        color: "var(--vscode-editorHoverWidget-border)",
-    }),
-    requiredMark: css({
-        color: "var(--vscode-errorForeground)",
-        margin: '0 2px',
-        fontSize: '13px'
-    }),
-    loader: css({
-        float: "right",
-        marginLeft: "auto",
-        marginRight: '3px',
-        alignSelf: 'center'
-    }),
-    valueConfigMenu: css({
-        '& .MuiMenuItem-root': {
-            fontSize: '12px',
-            paddingBottom: "1px",
-            paddingTop: "1px"
-        }
-    }),
-    boldedTypeLabel: css({
-        fontWeight: 800,
-        fontSize: "14px",
-    })
-});
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataMapperNode.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataMapperNode.ts
deleted file mode 100644
index 8e9d809ac9d..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataMapperNode.ts
+++ /dev/null
@@ -1,301 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: no-empty-interface
-import { DiagramModel, NodeModel, NodeModelGenerics } from '@projectstorm/react-diagrams';
-import { PrimitiveBalType, TypeField } from "@wso2/ballerina-core";
-import {
-	AnydataTypeDesc,
-	AnyTypeDesc,
-	ArrayTypeDesc,
-	BooleanTypeDesc,
-	ByteTypeDesc,
-	DecimalTypeDesc,
-	DistinctTypeDesc,
-	ErrorTypeDesc,
-	FloatTypeDesc,
-	FunctionTypeDesc,
-	FutureTypeDesc,
-	HandleTypeDesc,
-	IntersectionTypeDesc,
-	IntTypeDesc,
-	JsonTypeDesc,
-	MapTypeDesc,
-	NeverTypeDesc,
-	NilTypeDesc,
-	ObjectTypeDesc,
-	OptionalTypeDesc,
-	ParenthesisedTypeDesc,
-	QualifiedNameReference,
-	ReadonlyTypeDesc,
-	RecordTypeDesc,
-	SimpleNameReference,
-	SingletonTypeDesc,
-	STKindChecker,
-	STNode,
-	StreamTypeDesc,
-	StringTypeDesc,
-	TableTypeDesc,
-	TupleTypeDesc,
-	TypedescTypeDesc,
-	UnionTypeDesc,
-	XmlTypeDesc
-} from '@wso2/syntax-tree';
-
-import { IDataMapperContext } from '../../../../utils/DataMapperContext/DataMapperContext';
-import { ArrayElement, EditableRecordField } from "../../Mappings/EditableRecordField";
-import { FieldAccessToSpecificFied } from '../../Mappings/FieldAccessToSpecificFied';
-import { RecordFieldPortModel } from "../../Port";
-import {
-	getBalRecFieldName,
-	getFieldName,
-	getFnDefForFnCall,
-	getInnermostExpressionBody,
-	getInputNodes,
-	getOptionalRecordField,
-	isComplexExpression,
-	isOptionalAndNillableField
-} from "../../utils/dm-utils";
-
-export interface DataMapperNodeModelGenerics {
-	PORT: RecordFieldPortModel;
-}
-
-export type TypeDescriptor = AnyTypeDesc | AnydataTypeDesc | ArrayTypeDesc | BooleanTypeDesc | ByteTypeDesc | DecimalTypeDesc
-	| DistinctTypeDesc | ErrorTypeDesc | FloatTypeDesc | FunctionTypeDesc | FutureTypeDesc | HandleTypeDesc | IntTypeDesc
-	| IntersectionTypeDesc | JsonTypeDesc | MapTypeDesc | NeverTypeDesc | NilTypeDesc | ObjectTypeDesc | OptionalTypeDesc
-	| ParenthesisedTypeDesc | QualifiedNameReference | ReadonlyTypeDesc | RecordTypeDesc | SimpleNameReference
-	| SingletonTypeDesc | StreamTypeDesc | StringTypeDesc | TableTypeDesc | TupleTypeDesc | TypedescTypeDesc | UnionTypeDesc
-	| XmlTypeDesc;
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface IDataMapperNodeFactory {
-
-}
-
-export abstract class DataMapperNodeModel extends NodeModel<NodeModelGenerics & DataMapperNodeModelGenerics> {
-
-	private diagramModel: DiagramModel;
-
-	constructor(
-		public id: string,
-		public context: IDataMapperContext,
-		type: string
-	) {
-		super({
-			type
-		});
-	}
-
-	public setModel(model: DiagramModel) {
-		this.diagramModel = model;
-	}
-
-	public getModel() {
-		return this.diagramModel;
-	}
-
-	abstract initPorts(): void;
-	abstract initLinks(): void;
-	// extend this class to add link init, port init logics
-
-	protected addPortsForInputRecordField(
-		field: TypeField,
-		type: "IN" | "OUT",
-		parentId: string,
-		unsafeParentId: string,
-		portPrefix?: string,
-		parent?: RecordFieldPortModel,
-		collapsedFields?: string[],
-		hidden?: boolean,
-		isOptional?: boolean
-	): number {
-
-		const fieldName = field?.name ? getBalRecFieldName(field.name) : '';
-
-		const fieldFQN = parentId
-			? `${parentId}${fieldName && isOptional
-				? `?.${fieldName}`
-				: fieldName ? `.${fieldName}` : ''}`
-			: fieldName && fieldName;
-		const unsafeFieldFQN = fieldFQN.replaceAll('?.', '.');
-
-		if (fieldName.startsWith("$missingNode$")) {
-			return;
-		}
-
-		const portName = portPrefix ? `${portPrefix}.${unsafeFieldFQN}` : unsafeFieldFQN;
-		const isCollapsed = !hidden && collapsedFields && collapsedFields.includes(portName);
-		const fieldPort = new RecordFieldPortModel(
-			field, portName, type, parentId, undefined, undefined, fieldFQN,
-			unsafeFieldFQN, parent, isCollapsed, hidden);
-
-		this.addPort(fieldPort);
-
-		let numberOfFields = 1;		
-		const optionalRecordField = getOptionalRecordField(field);
-		if (optionalRecordField) {
-			optionalRecordField?.fields.forEach((subField) => {
-				numberOfFields += this.addPortsForInputRecordField(
-					subField, type, fieldFQN, unsafeFieldFQN, portPrefix, fieldPort,
-					collapsedFields, isCollapsed ? true : hidden, true)
-				;
-			});
-		} else if (field.typeName === PrimitiveBalType.Record) {
-			const fields = field?.fields;
-			if (fields && !!fields.length) {
-				fields.forEach((subField) => {
-					numberOfFields += this.addPortsForInputRecordField(
-						subField, type, fieldFQN, unsafeFieldFQN, portPrefix, fieldPort,
-						collapsedFields, isCollapsed || hidden, subField.optional || isOptional
-					);
-				});
-			}
-		}
-		return hidden ? 0 : numberOfFields;
-	}
-
-	protected addPortsForOutputRecordField(
-		field: EditableRecordField,
-		type: "IN" | "OUT",
-		parentId: string,
-		elementIndex?: number,
-		portPrefix?: string,
-		parent?: RecordFieldPortModel,
-		collapsedFields?: string[],
-		hidden?: boolean,
-		isWithinSelectClause?: boolean
-	) {
-		const fieldName = getFieldName(field);
-
-		if (fieldName.startsWith("$missingNode$")) {
-			return;
-		}
-
-		if (elementIndex !== undefined) {
-			parentId = parentId ? `${parentId}.${elementIndex}` : elementIndex.toString();
-		}
-		const fieldFQN = parentId ? `${parentId}${fieldName && `.${fieldName}`}` : fieldName && fieldName;
-		const portName = portPrefix ? `${portPrefix}.${fieldFQN}` : fieldFQN;
-		const isCollapsed = !hidden && collapsedFields && collapsedFields.includes(portName);
-		const fieldPort = new RecordFieldPortModel(
-			field.type, portName, type, parentId, elementIndex, field,
-			fieldFQN, fieldFQN, parent, isCollapsed, hidden, isWithinSelectClause);
-		this.addPort(fieldPort);
-
-		if (field.type.typeName === PrimitiveBalType.Record) {
-			const fields = field?.childrenTypes;
-			if (fields && !!fields.length) {
-				fields.forEach((subField) => {
-					this.addPortsForOutputRecordField(subField, type, fieldFQN, undefined, portPrefix,
-						fieldPort, collapsedFields, isCollapsed ? true : hidden);
-				});
-			}
-		} else if (field.type.typeName === PrimitiveBalType.Array) {
-			const elements: ArrayElement[] = field?.elements;
-			if (elements && !!elements.length) {
-				elements.forEach((element, index) => {
-					this.addPortsForOutputRecordField(element.member, type, fieldFQN, index, portPrefix,
-						fieldPort, collapsedFields, isCollapsed ? true : hidden);
-				});
-			}
-		}
-	}
-
-	protected addPortsForHeaderField(
-		field: TypeField,
-		name: string,
-		type: "IN" | "OUT",
-		portPrefix: string,
-		collapsedFields?: string[],
-		isWithinSelectClause?: boolean,
-		editableRecordField?: EditableRecordField
-	): RecordFieldPortModel {
-
-		const fieldName = getBalRecFieldName(name);
-
-		if (fieldName.startsWith("$missingNode$")) {
-			return;
-		}
-
-		let portName = fieldName;
-		if (portPrefix) {
-			portName = fieldName ? `${portPrefix}.${fieldName}` : portPrefix;
-		}
-		const isCollapsed = collapsedFields && collapsedFields.includes(portName);
-		const fieldPort = new RecordFieldPortModel(
-			field, portName, type, undefined, undefined, editableRecordField,
-			fieldName, fieldName, undefined, isCollapsed, false, isWithinSelectClause
-		);
-		this.addPort(fieldPort)
-
-		return fieldPort;
-	}
-
-	protected genMappings(val: STNode, parentFields?: STNode[]) {
-		let foundMappings: FieldAccessToSpecificFied[] = [];
-		const currentFields = [...(parentFields ? parentFields : [])];
-		if (val) {
-			if (STKindChecker.isMappingConstructor(val)) {
-				val.fields.forEach((field) => {
-					if (!STKindChecker.isCommaToken(field)) {
-						foundMappings = [...foundMappings, ...this.genMappings(field, [...currentFields, val])];
-					}
-				});
-			} else if (STKindChecker.isSpecificField(val) && val.valueExpr) {
-				const expr = getInnermostExpressionBody(val.valueExpr);
-				const isMappingConstructor = STKindChecker.isMappingConstructor(expr);
-				const isListConstructor = STKindChecker.isListConstructor(expr);
-				if (isMappingConstructor || isListConstructor) {
-					foundMappings = [...foundMappings, ...this.genMappings(expr, [...currentFields, val])];
-				} else {
-					foundMappings.push(this.getOtherMappings(val, currentFields));
-				}
-			} else if (STKindChecker.isListConstructor(val)) {
-				val.expressions.forEach((expr) => {
-					if (!STKindChecker.isCommaToken(expr)) {
-						foundMappings = [...foundMappings, ...this.genMappings(expr, [...currentFields, val])];
-					}
-				})
-			} else if (STKindChecker.isLetExpression(val) || STKindChecker.isTypeCastExpression(val)) {
-				const expr = getInnermostExpressionBody(val);
-				foundMappings = [...foundMappings, ...this.genMappings(expr, [...currentFields])];
-			} else {
-				foundMappings.push(this.getOtherMappings(val, currentFields));
-			}
-		}
-		return foundMappings;
-	}
-
-	protected getOtherMappings(node: STNode, currentFields: STNode[]) {
-		const valNode = STKindChecker.isSpecificField(node) ? node.valueExpr : node;
-		if (valNode) {
-			const inputNodes = getInputNodes(valNode);
-			const valueExpr = STKindChecker.isCheckExpression(valNode) ? valNode.expression : valNode;
-			const innerExpr = getInnermostExpressionBody(valueExpr);
-			const isExprBodiedFunc = STKindChecker.isFunctionCall(innerExpr) && getFnDefForFnCall(innerExpr);
-			if (inputNodes.length === 1
-				&& !isComplexExpression(valNode)
-				&& !STKindChecker.isQueryExpression(valNode)
-				&& !isExprBodiedFunc
-			) {
-				return new FieldAccessToSpecificFied([...currentFields, node], inputNodes[0], valNode);
-			}
-			return new FieldAccessToSpecificFied([...currentFields, node], undefined, valNode);
-		}
-	}
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/PrimitiveTypeItemWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/PrimitiveTypeItemWidget.tsx
deleted file mode 100644
index 2860b70d299..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/PrimitiveTypeItemWidget.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React, { useState } from "react";
-
-import { DiagramEngine, PortWidget } from '@projectstorm/react-diagrams';
-import { TypeField } from "@wso2/ballerina-core";
-import { TruncatedLabel } from "@wso2/ui-toolkit";
-
-import { DataMapperPortWidget, PortState, RecordFieldPortModel } from '../../Port';
-import { EXPANDED_QUERY_INPUT_NODE_PREFIX } from '../../utils/constants';
-import { getTypeName } from "../../utils/dm-utils";
-
-import { InputSearchHighlight } from './Search';
-import { TreeContainer, TreeHeader } from './Tree/Tree';
-import { useIONodesStyles } from "../../../styles";
-
-export interface RecordTypeTreeWidgetProps {
-    id: string; // this will be the root ID used to prepend for UUIDs of nested fields
-    typeDesc: TypeField;
-    engine: DiagramEngine;
-    getPort: (portId: string) => RecordFieldPortModel;
-    valueLabel?: string;
-    nodeHeaderSuffix?: string;
-}
-
-export function PrimitiveTypeItemWidget(props: RecordTypeTreeWidgetProps) {
-    const { engine, typeDesc, id, getPort, valueLabel, nodeHeaderSuffix } = props;
-    const classes = useIONodesStyles();
-
-    const [ portState, setPortState ] = useState<PortState>(PortState.Unselected);
-
-    const typeName = getTypeName(typeDesc);
-
-    const portIn = getPort(`${id}.IN`);
-    const portOut = getPort(`${id}.OUT`);
-
-    let expanded = true;
-    if ((portIn && portIn.collapsed) || (portOut && portOut.collapsed)) {
-        expanded = false;
-    }
-
-    const label = (
-        <TruncatedLabel style={{ marginRight: "auto" }}>
-            <span style={{ marginRight: "auto" }}>
-                <span className={classes.valueLabel}>
-                    <InputSearchHighlight>{valueLabel ? valueLabel : id}</InputSearchHighlight>
-                    {typeName && ":"}
-                </span>
-                {typeName && (
-                    <span className={classes.inputTypeLabel}>
-                        {typeName}
-                    </span>
-                )}
-
-            </span>
-        </TruncatedLabel>
-    );
-
-    /** Invisible port to which the right angle link from the query header/clauses are connected to */
-    const invisiblePort = getPort(`${EXPANDED_QUERY_INPUT_NODE_PREFIX}.${valueLabel}`);
-
-    const handlePortState = (state: PortState) => {
-        setPortState(state)
-    };
-
-    return (
-        <TreeContainer data-testid={`${id}-node`}>
-            <div className={classes.queryPortWrap}>
-                {invisiblePort && <PortWidget port={invisiblePort} engine={engine} />}
-            </div>
-            <TreeHeader id={"recordfield-" + id} isSelected={portState !== PortState.Unselected}>
-                <span className={classes.label}>
-                    {label}
-                    <span className={classes.nodeType}>{nodeHeaderSuffix}</span>
-                </span>
-                <span className={classes.outPort}>
-                    {portOut &&
-                        <DataMapperPortWidget engine={engine} port={portOut} handlePortState={handlePortState} />
-                    }
-                </span>
-            </TreeHeader>
-        </TreeContainer>
-    );
-}
-
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/RecordItem.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/RecordItem.tsx
deleted file mode 100644
index 254c2b5e329..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/RecordItem.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React from "react";
-
-import { css } from "@emotion/css";
-import { Icon, Typography } from "@wso2/ui-toolkit";
-
-const useStyles = () => ({
-    menuItem: css({
-        fontSize: '12px',
-        height: '30px',
-        cursor: "pointer",
-        '&:hover': {
-            backgroundColor: 'var(--vscode-list-hoverBackground)',
-        }
-    }),
-    menuItemText: css({
-        padding: '5px',
-        fontSize: '12px'
-    })
-});
-
-export interface RecordItemProps {
-    recordName: string;
-    onClickRecordItem: (recordName: string) => void;
-}
-
-export function RecordItem(props: RecordItemProps) {
-    const { recordName, onClickRecordItem } = props;
-    const classes = useStyles();
-
-    const onClickOnListItem = () => {
-        onClickRecordItem(recordName);
-    };
-
-    return (
-        <>
-            <div
-                className={classes.menuItem}
-                key={recordName}
-                onClick={onClickOnListItem}
-            >
-                <Icon name="symbol-struct-icon" />
-                <Typography className={classes.menuItemText}>{recordName}</Typography>
-            </div>
-        </>
-    );
-}
-
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/RecordTypeTreeWidget/RecordFieldTreeItemWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/RecordTypeTreeWidget/RecordFieldTreeItemWidget.tsx
deleted file mode 100644
index 48b8d7e8661..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/RecordTypeTreeWidget/RecordFieldTreeItemWidget.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js jsx-wrap-multiline
-import React, { useState } from "react";
-
-import { DiagramEngine } from "@projectstorm/react-diagrams-core";
-import { PrimitiveBalType, TypeField } from "@wso2/ballerina-core";
-import classnames from "classnames";
-
-import { DataMapperPortWidget, PortState, RecordFieldPortModel } from "../../../Port";
-import { getBalRecFieldName, getOptionalRecordField, getTypeName, isOptionalAndNillableField } from "../../../utils/dm-utils";
-import { InputSearchHighlight } from "../Search";
-import { Button, Codicon, TruncatedLabel } from "@wso2/ui-toolkit";
-import { useIONodesStyles } from "../../../../styles";
-import { getUnionTypes } from "../../../utils/union-type-utils";
-
-export interface RecordFieldTreeItemWidgetProps {
-    parentId: string;
-    field: TypeField;
-    engine: DiagramEngine;
-    getPort: (portId: string) => RecordFieldPortModel;
-    treeDepth?: number;
-    handleCollapse: (portName: string, isExpanded?: boolean) => void;
-    isOptional?: boolean;
-    hasHoveredParent?: boolean;
-    hasLinkViaCollectClause?: boolean;
-}
-
-export function RecordFieldTreeItemWidget(props: RecordFieldTreeItemWidgetProps) {
-    const {
-        parentId,
-        field,
-        getPort,
-        engine,
-        handleCollapse,
-        treeDepth = 0,
-        isOptional,
-        hasHoveredParent,
-        hasLinkViaCollectClause
-    } = props;
-    const classes = useIONodesStyles();
-
-    const fieldName = getBalRecFieldName(field.name);
-    const fieldId = `${parentId}.${fieldName}`;
-    const portOut = getPort(`${fieldId}.OUT`);
-    const [ portState, setPortState ] = useState<PortState>(PortState.Unselected);
-    const [isHovered, setIsHovered] = useState(false);
-    const isPortDisabled = hasLinkViaCollectClause && Object.keys(portOut.getLinks()).length === 0;
-
-    let fields: TypeField[];
-    let optional = false;
-
-    const optionalRecordField = getOptionalRecordField(field);
-    if (optionalRecordField) {
-        optional = true
-        fields = optionalRecordField.fields;
-    } else if (field.typeName === PrimitiveBalType.Record) {
-        fields = field.fields;
-    }
-
-    let expanded = true;
-    if (portOut) {
-        if (portOut.collapsed) {
-            expanded = false;
-        }
-        portOut.isDisabledDueToCollectClause = isPortDisabled;
-    }
-
-    const typeName = getTypeName(field);
-
-    const indentation = fields ? 0 : ((treeDepth + 1) * 16) + 8;
-
-    const getUnionType = () => {
-        const typeText: JSX.Element[] = [];
-        const unionTypes = getUnionTypes(field);
-        unionTypes.forEach((type) => {
-            typeText.push(<>{type}</>);
-            if (type !== unionTypes[unionTypes.length - 1]) {
-                typeText.push(<> | </>);
-            }
-        });
-        return typeText;
-    };
-
-    const label = (
-        <TruncatedLabel style={{ marginRight: "auto" }}>
-            <span style={{ marginRight: "auto" }}>
-                <span className={classes.valueLabel} style={{ marginLeft: indentation }}>
-                    <InputSearchHighlight>{fieldName}</InputSearchHighlight>
-                    {field.optional && "?"}
-                    {typeName && ":"}
-                </span>
-                {typeName && (
-                    <span className={classes.inputTypeLabel}>
-                        {field.typeName === PrimitiveBalType.Union ? getUnionType() : typeName || ''}
-                    </span>
-                )}
-
-            </span>
-        </TruncatedLabel>
-    );
-
-    const handleExpand = () => {
-        handleCollapse(fieldId, !expanded);
-    };
-
-    const handlePortState = (state: PortState) => {
-        setPortState(state)
-    };
-
-    const onMouseEnter = () => {
-        setIsHovered(true);
-    };
-
-    const onMouseLeave = () => {
-        setIsHovered(false);
-    };
-
-    return (
-        <>
-            <div
-                id={"recordfield-" + fieldId}
-                className={classnames(classes.treeLabel,
-                    isPortDisabled && !hasHoveredParent && !isHovered ? classes.treeLabelDisabled : "",
-                    isPortDisabled && isHovered ? classes.treeLabelDisableHover : "",
-                    (portState !== PortState.Unselected) ? classes.treeLabelPortSelected : "",
-                    hasHoveredParent ? classes.treeLabelParentHovered : ""
-                )}
-                onMouseEnter={onMouseEnter}
-                onMouseLeave={onMouseLeave}
-            >
-                <span className={classes.label}>
-                    {fields && <Button
-                            id={"expand-or-collapse-" + fieldId}
-                            appearance="icon"
-                            tooltip="Expand/Collapse"
-                            onClick={handleExpand}
-                            sx={{ marginLeft: treeDepth * 16 }}
-                        >
-                            {expanded ? <Codicon name="chevron-right" /> : <Codicon name="chevron-down" />}
-                        </Button>}
-                    {label}
-                </span>
-                <span className={classes.outPort}>
-                    {portOut &&
-                        <DataMapperPortWidget
-                            engine={engine}
-                            port={portOut}
-                            handlePortState={handlePortState}
-                            disable={isPortDisabled}
-                        />
-                    }
-                </span>
-            </div>
-            {fields && expanded &&
-                fields.map((subField, index) => {
-                    return (
-                        <RecordFieldTreeItemWidget
-                            key={index}
-                            engine={engine}
-                            field={subField}
-                            getPort={getPort}
-                            parentId={fieldId}
-                            handleCollapse={handleCollapse}
-                            treeDepth={treeDepth + 1}
-                            isOptional={isOptional || optional || isOptionalAndNillableField(subField)}
-                            hasHoveredParent={isHovered || hasHoveredParent}
-                            hasLinkViaCollectClause={hasLinkViaCollectClause}
-                        />
-                    );
-                })
-            }
-        </>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/RecordTypeTreeWidget/RecordTypeTreeWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/RecordTypeTreeWidget/RecordTypeTreeWidget.tsx
deleted file mode 100644
index 4c448bbb92a..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/RecordTypeTreeWidget/RecordTypeTreeWidget.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React, { useState } from "react";
-
-import { Button, Codicon, TruncatedLabel } from "@wso2/ui-toolkit";
-import { DiagramEngine, PortWidget } from '@projectstorm/react-diagrams';
-import { PrimitiveBalType, TypeField } from "@wso2/ballerina-core";
-
-import { DataMapperPortWidget, PortState, RecordFieldPortModel } from '../../../Port';
-import { EXPANDED_QUERY_INPUT_NODE_PREFIX } from '../../../utils/constants';
-import { getOptionalRecordField, getTypeName } from "../../../utils/dm-utils";
-import { InputSearchHighlight } from '../Search';
-import { TreeBody, TreeContainer, TreeHeader } from '../Tree/Tree';
-
-import { RecordFieldTreeItemWidget } from "./RecordFieldTreeItemWidget";
-import classnames from "classnames";
-import { useIONodesStyles } from "../../../../styles";
-
-export interface RecordTypeTreeWidgetProps {
-    id: string; // this will be the root ID used to prepend for UUIDs of nested fields
-    typeDesc: TypeField;
-    engine: DiagramEngine;
-    getPort: (portId: string) => RecordFieldPortModel;
-    handleCollapse: (portName: string, isExpanded?: boolean) => void;
-    valueLabel?: string;
-    nodeHeaderSuffix?: string;
-    hasLinkViaCollectClause?: boolean;
-}
-
-export function RecordTypeTreeWidget(props: RecordTypeTreeWidgetProps) {
-    const { engine, typeDesc, id, getPort, handleCollapse, valueLabel, nodeHeaderSuffix, hasLinkViaCollectClause } = props;
-    const classes = useIONodesStyles();
-
-    const [ portState, setPortState ] = useState<PortState>(PortState.Unselected);
-    const [isHovered, setIsHovered] = useState(false);
-
-    const typeName = getTypeName(typeDesc);
-
-    const portOut = getPort(`${id}.OUT`);
-    const isPortDisabled = hasLinkViaCollectClause && Object.keys(portOut.getLinks()).length === 0;
-    portOut.isDisabledDueToCollectClause = isPortDisabled;
-
-    let fields: TypeField[] = [];
-    let optional = false;
-
-    const optionalRecordField = getOptionalRecordField(typeDesc);
-    if (optionalRecordField) {
-        optional = true
-        fields = optionalRecordField.fields;
-    } else if (typeDesc.typeName === PrimitiveBalType.Record) {
-        fields = typeDesc.fields;
-    }
-
-    const hasFields = fields?.length > 0;
-
-    let expanded = true;
-    if (portOut && (portOut.collapsed || portOut.hidden)) {
-        expanded = false;
-    }
-
-    const label = (
-        <TruncatedLabel style={{ marginRight: "auto" }}>
-            <span style={{ marginRight: "auto" }}>
-                <span className={classes.valueLabel}>
-                    <InputSearchHighlight>{valueLabel ? valueLabel : id}</InputSearchHighlight>
-                    {typeName && ":"}
-                </span>
-                {typeName && (
-                    <span className={classes.inputTypeLabel}>
-                        {typeName}
-                    </span>
-                )}
-
-            </span>
-        </TruncatedLabel>
-    );
-
-    const handleExpand = () => {
-        handleCollapse(id, !expanded);
-    }
-
-    /** Invisible port to which the right angle link from the query header/clauses are connected to */
-    const invisiblePort = getPort(`${EXPANDED_QUERY_INPUT_NODE_PREFIX}.${valueLabel}`);
-
-    const handlePortState = (state: PortState) => {
-        setPortState(state)
-    };
-
-    const onMouseEnter = () => {
-        setIsHovered(true);
-    };
-
-    const onMouseLeave = () => {
-        setIsHovered(false);
-    };
-
-    return (
-        <TreeContainer data-testid={`${id}-node`}>
-            <div className={classes.queryPortWrap}>
-                {invisiblePort && <PortWidget port={invisiblePort} engine={engine} />}
-            </div>
-            <TreeHeader
-                id={"recordfield-" + id}
-                isSelected={portState !== PortState.Unselected}
-                onMouseEnter={onMouseEnter}
-                onMouseLeave={onMouseLeave}
-                className={classnames(
-                    isPortDisabled && !isHovered ? classes.treeLabelDisabled : "",
-                    isPortDisabled && isHovered ? classes.treeLabelDisableHover : "",
-                )}
-            >
-                <span className={classes.label}>
-                    {hasFields && (
-                        <Button
-                            id={"expand-or-collapse-" + id}
-                            appearance="icon"
-                            tooltip="Expand/Collapse"
-                            onClick={handleExpand}
-                            data-testid={`${id}-expand-icon-record-source-node`}
-                        >
-                            {expanded ? <Codicon name="chevron-right" /> : <Codicon name="chevron-down" />}
-                        </Button>
-                    )}
-                    {label}
-                    <span className={classes.nodeType}>{nodeHeaderSuffix}</span>
-                </span>
-                <span className={classes.outPort}>
-                    {portOut &&
-                        <DataMapperPortWidget
-                            engine={engine}
-                            port={portOut}
-                            handlePortState={handlePortState}
-                            disable={isPortDisabled}
-                        />
-                    }
-                </span>
-            </TreeHeader>
-            {expanded && hasFields && (
-                <TreeBody>
-                    {
-                        fields.map((field, index) => {
-                            return (
-                                <RecordFieldTreeItemWidget
-                                    key={index}
-                                    engine={engine}
-                                    field={field}
-                                    getPort={getPort}
-                                    parentId={id}
-                                    handleCollapse={handleCollapse}
-                                    treeDepth={0}
-                                    isOptional={typeDesc.optional}
-                                    hasHoveredParent={isHovered}
-                                    hasLinkViaCollectClause={hasLinkViaCollectClause}
-                                />
-                            );
-                        })
-                    }
-                </TreeBody>
-            )}
-        </TreeContainer>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/Search/SearchHighlight.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/Search/SearchHighlight.tsx
deleted file mode 100644
index d684588fbd5..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/Search/SearchHighlight.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React from "react";
-
-import { css } from "@emotion/css";
-
-import { useDMSearchStore } from "../../../../../store/store";
-
-interface SearchHighlightRootProps extends SearchHighlightProps{
-    searchText: string;
-}
-
-interface SearchHighlightProps {
-    children: string;
-}
-
-const useStyles = () => ({
-    highlighted: css({ background: "var(--vscode-editor-findMatchHighlightBackground)" }),
-});
-
-function SearchHighlight({ children, searchText }: SearchHighlightRootProps) {
-    const classes = useStyles();
-    const parts = children.split(new RegExp(`(${escapeRegExp(searchText)})`, 'gi'));
-    return (
-        <>
-            {parts.map((part, index) => (
-                <React.Fragment key={index}>
-                    {part.toLowerCase() === searchText.toLowerCase() ? (
-                        <span className={classes.highlighted} data-testid={`search-highlight`}>{part}</span>
-                    ) : (
-                        part
-                    )}
-                </React.Fragment>
-            ))}
-        </>
-    );
-}
-
-export function InputSearchHighlight({ children }: SearchHighlightProps) {
-    const inputSearch = useDMSearchStore((state) => state.inputSearch);
-    return <SearchHighlight searchText={inputSearch}>{children}</SearchHighlight>
-}
-
-export function OutputSearchHighlight({ children }: SearchHighlightProps) {
-    const outputSearch = useDMSearchStore((state) => state.outputSearch);
-    return <SearchHighlight searchText={outputSearch}>{children}</SearchHighlight>
-}
-
-function escapeRegExp(str: string) {
-    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/Search/SearchNoResultFound.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/Search/SearchNoResultFound.tsx
deleted file mode 100644
index e08acec185b..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/Search/SearchNoResultFound.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React from "react";
-
-import { css } from "@emotion/css";
-
-import { TreeContainer } from "../Tree/Tree";
-import { Codicon } from "@wso2/ui-toolkit";
-
-interface SearchNoResultFoundProps {
-    kind: SearchNoResultFoundKind;
-}
-
-export enum SearchNoResultFoundKind {
-    InputField = "input field",
-    OutputField = "output field",
-    OutputValue = "output value",
-    LocalVariable = "local variable",
-    ModuleVariable = "module variable"
-}
-
-const useStyles = () => ({
-    noResultFoundBanner: css({
-        width: "320px",
-        padding: "10px",
-        display: "flex",
-    })
-});
-
-function SearchNoResultFound({ kind }: SearchNoResultFoundProps) {
-    const classes = useStyles();
-    return (
-        <TreeContainer>
-            <div className={classes.noResultFoundBanner}>
-                <Codicon sx={{ marginRight: 8, fontSize: 22 }} name="search" />
-                <div>
-                    {`No matching ${kind} found`}
-                </div>
-            </div>
-        </TreeContainer>
-    );
-}
-
-export function InputSearchNoResultFound({ kind }: SearchNoResultFoundProps) {
-    return <SearchNoResultFound kind={kind}/>
-}
-
-export function OutputSearchNoResultFound({ kind }: SearchNoResultFoundProps) {
-    return <SearchNoResultFound kind={kind}/>
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/Tree/Tree.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/Tree/Tree.tsx
deleted file mode 100644
index b2d89de0a48..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/Tree/Tree.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import styled from "@emotion/styled";
-import {
-    GAP_BETWEEN_FIELDS,
-    GAP_BETWEEN_NODE_HEADER_AND_BODY,
-    IO_NODE_DEFAULT_WIDTH,
-    IO_NODE_HEADER_HEIGHT
-} from "../../../utils/constants";
-
-export const TreeContainer = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: ${GAP_BETWEEN_NODE_HEADER_AND_BODY}px;
-    background: var(--vscode-sideBar-background);
-    border: 1px solid var(--vscode-welcomePage-tileBorder);
-    font-style: normal;
-    font-weight: 600;
-    font-size: 13px;
-    line-height: 24px;
-    width: ${IO_NODE_DEFAULT_WIDTH}px;
-`;
-
-export const TreeHeader = styled.div((
-    { isSelected, isDisabled }: { isSelected?: boolean, isDisabled?: boolean }
-) => ({
-    height: `${IO_NODE_HEADER_HEIGHT}px`,
-    padding: '8px',
-    background: 'none',
-    borderRadius: '3px',
-    width: '100%',
-    display: 'flex',
-        cursor: `${isDisabled ? 'not-allowed' : 'pointer'}`,
-    '&:hover': {
-        backgroundColor: `${isDisabled ? 'var(--vscode-tab-inactiveBackground)' : 'var(--vscode-list-hoverBackground)'}`
-    },
-    color: 'var(--vscode-inputOption-activeForeground)'
-}));
-
-export const TreeBody = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 1px;
-    gap: ${GAP_BETWEEN_FIELDS}px;
-    background: none;
-    border-radius: 3px;
-    flex: none;
-    flex-grow: 0;
-    width: 100%;
-    cursor: pointer;
-    color: var(--vscode-foreground);
-`;
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/index.ts
deleted file mode 100644
index 31e92a2e551..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-export * from "./MappingConstructor";
-export * from "./ListConstructor";
-export * from "./PrimitiveType";
-export * from "./RequiredParam";
-export * from "./QueryExpression";
-export * from "./EnumType";
-export * from "./FromClause";
-export * from "./JoinClause";
-export * from "./LetClause";
-export * from "./LetExpression";
-export * from "./LinkConnector";
-export * from "./ModuleVariable";
-export * from "./UnionType";
-export * from "./UnsupportedIO";
-export * from "./ExpandedMappingHeader";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverlayLayer/OverlayLayerFactory.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverlayLayer/OverlayLayerFactory.tsx
deleted file mode 100644
index e465f059a31..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverlayLayer/OverlayLayerFactory.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react';
-
-import { AbstractReactFactory, GenerateWidgetEvent } from '@projectstorm/react-canvas-core';
-import { DiagramEngine } from '@projectstorm/react-diagrams';
-
-import { OverlayLayerModel } from './OverlayLayerModel';
-import { OverlayLayerWidget } from './OverlayLayerWidget';
-
-export class OverlayLayerFactory extends AbstractReactFactory<OverlayLayerModel, DiagramEngine> {
-	constructor() {
-		super('diagram-overlays');
-	}
-
-	generateModel(): OverlayLayerModel {
-		return new OverlayLayerModel();
-	}
-
-	generateReactWidget(event: GenerateWidgetEvent<OverlayLayerModel>): JSX.Element {
-		return <OverlayLayerWidget layer={event.model} engine={this.engine} />;
-	}
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverlayLayer/OverlayLayerModel.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverlayLayer/OverlayLayerModel.ts
deleted file mode 100644
index b6105542ca1..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverlayLayer/OverlayLayerModel.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { LayerModel, LayerModelGenerics } from '@projectstorm/react-canvas-core';
-import { DiagramEngine } from '@projectstorm/react-diagrams';
-
-import { OverlayModel } from './OverlayModel/OverlayModel';
-
-export interface OverlayLayerModelGenerics extends LayerModelGenerics {
-	CHILDREN: OverlayModel;
-	ENGINE: DiagramEngine;
-}
-
-export class OverlayLayerModel<G extends OverlayLayerModelGenerics = OverlayLayerModelGenerics> extends LayerModel<G> {
-	constructor() {
-		super({
-			type: 'diagram-overlays',
-			isSvg: false,
-			transformed: true
-		});
-	}
-
-	addModel(model: G['CHILDREN']): void {
-		if (!(model instanceof OverlayModel)) {
-			throw new Error('Can only add overlays to this layer');
-		}
-		model.registerListener({
-			entityRemoved: () => {
-				// (this.getParent() as DiagramModel).removeNode(model);
-			}
-		});
-		super.addModel(model);
-	}
-
-	getChildModelFactoryBank(engine: G['ENGINE']) {
-		return engine.getNodeFactories();
-	}
-
-	getOverlayItems() {
-		return this.getModels();
-	}
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverlayLayer/OverlayLayerPortal.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverlayLayer/OverlayLayerPortal.tsx
deleted file mode 100644
index bfa3ef5e98b..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverlayLayer/OverlayLayerPortal.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-
-import { OverlayContainerID } from './OverlayLayerWidget';
-
-export const OverlayLayerPortal: React.FC<React.PropsWithChildren<{}>> = (props) => {
-    const container = document.getElementById(OverlayContainerID);
-	   return container !== null ? ReactDOM.createPortal(props.children, container) : <></>;
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverlayLayer/OverlayLayerWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverlayLayer/OverlayLayerWidget.tsx
deleted file mode 100644
index a267e3adbec..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverlayLayer/OverlayLayerWidget.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// tslint:disable: jsx-no-multiline-js no-implicit-dependencies
-import * as React from 'react';
-
-import styled from '@emotion/styled';
-import { DiagramEngine } from '@projectstorm/react-diagrams';
-import * as _ from 'lodash';
-
-import { OverlayLayerModel } from './OverlayLayerModel';
-import { OverlayModel } from './OverlayModel/OverlayModel';
-import { OverlayWidget } from './OverlayModel/OverlayWidget';
-
-export interface NodeLayerWidgetProps {
-	layer: OverlayLayerModel;
-	engine: DiagramEngine;
-}
-
-export const OverlayContainerID = "data-mapper-overlay-container";
-
-export class OverlayLayerWidget extends React.Component<NodeLayerWidgetProps> {
-	render() {
-		return (
-			<Container id={OverlayContainerID}>
-				{_.map(this.props.layer.getOverlayItems(), (node: OverlayModel) => {
-					return <OverlayWidget key={node.getID()} diagramEngine={this.props.engine} node={node} />;
-				})}
-			</Container>
-		);
-	}
-}
-
-export const Container = styled.div``;
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverlayLayer/OverlayModel/OverlayModel.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverlayLayer/OverlayModel/OverlayModel.ts
deleted file mode 100644
index c716512c0f6..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverlayLayer/OverlayModel/OverlayModel.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Point, Rectangle } from '@projectstorm/geometry';
-import {
-	BaseEntityEvent,
-	BaseModelListener,
-	BasePositionModel,
-	BasePositionModelGenerics,
-} from '@projectstorm/react-canvas-core';
-import { DiagramModel } from '@projectstorm/react-diagrams';
-
-export interface OverlayModelListener extends BaseModelListener {
-	positionChanged?(event: BaseEntityEvent<OverlayModel>): void;
-}
-
-export interface OverlayModelGenerics extends BasePositionModelGenerics {
-	LISTENER: OverlayModelListener;
-	PARENT: DiagramModel;
-}
-
-export class OverlayModel<G extends OverlayModelGenerics = OverlayModelGenerics> extends BasePositionModel<G> {
-
-	// calculated post rendering so routing can be done correctly
-	width: number;
-	height: number;
-
-	constructor(options: G['OPTIONS']) {
-		super(options);
-		this.width = 0;
-		this.height = 0;
-	}
-
-	getBoundingBox(): Rectangle {
-		return new Rectangle(this.getPosition(), this.width, this.height);
-	}
-
-	setPosition(point: Point): void;
-	setPosition(x: number, y: number): void;
-	setPosition(x: number | Point, y?: number): void {
-		if (x instanceof Point) {
-			super.setPosition(x);
-		} else {
-			super.setPosition(x, y);
-		}
-	}
-
-	updateDimensions({ width, height }: { width: number; height: number }) {
-		this.width = width;
-		this.height = height;
-	}
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverlayLayer/OverlayModel/OverlayWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverlayLayer/OverlayModel/OverlayWidget.tsx
deleted file mode 100644
index 9ffb0f5a942..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverlayLayer/OverlayModel/OverlayWidget.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-// tslint:disable: jsx-no-multiline-js
-import * as React from 'react';
-
-import styled from '@emotion/styled';
-import { ListenerHandle, PeformanceWidget } from '@projectstorm/react-canvas-core';
-import { DiagramEngine } from '@projectstorm/react-diagrams';
-import ResizeObserver from 'resize-observer-polyfill';
-
-import { OverlayModel } from './OverlayModel';
-
-export interface OverlayProps {
-	node: OverlayModel;
-	children?: React.ReactElement | React.ReactElement[];
-	diagramEngine: DiagramEngine;
-}
-
-export const Overlay = styled.div`
-	position: absolute;
-	-webkit-touch-callout: none; /* iOS Safari */
-	-webkit-user-select: none; /* Chrome/Safari/Opera */
-	user-select: none;
-	cursor: move;
-	pointer-events: all;
-`;
-
-
-export class OverlayWidget extends React.Component<OverlayProps> {
-	ob: ResizeObserver;
-	ref: React.RefObject<HTMLDivElement>;
-	listener: ListenerHandle;
-
-	constructor(props: OverlayProps) {
-		super(props);
-		this.ref = React.createRef();
-	}
-
-	componentWillUnmount(): void {
-		this.ob.disconnect();
-		this.ob = null;
-
-		this.listener?.deregister();
-		this.listener = null;
-	}
-
-	componentDidUpdate(prevProps: Readonly<OverlayProps>): void {
-		if (this.listener && this.props.node !== prevProps.node) {
-			this.listener.deregister();
-			this.installSelectionListener();
-		}
-	}
-
-	installSelectionListener() {
-		this.listener = this.props.node.registerListener({
-			selectionChanged: () => {
-				this.forceUpdate();
-			}
-		});
-	}
-
-	updateSize(width: number, height: number) {
-		this.props.node.updateDimensions({ width, height });
-	}
-
-	componentDidMount(): void {
-		this.ob = new ResizeObserver((entities) => {
-			const bounds = entities[0].contentRect;
-			this.updateSize(bounds.width, bounds.height);
-		});
-
-		const b = this.ref.current.getBoundingClientRect();
-		this.updateSize(b.width, b.height);
-		this.ob.observe(this.ref.current);
-		this.installSelectionListener();
-	}
-
-	render() {
-		return (
-			<PeformanceWidget model={this.props.node} serialized={this.props.node.serialize()}>
-				{() => {
-					return (
-						<Overlay
-							className="node"
-							ref={this.ref}
-							data-nodeid={this.props.node.getID()}
-							style={{
-								top: this.props.node.getY(),
-								left: this.props.node.getX()
-							}}
-						>
-							{/* TODO: Generate From Factory */}
-						</Overlay>
-					);
-				}}
-			</PeformanceWidget>
-		);
-	}
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverriddenLinkLayer/LabelWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverriddenLinkLayer/LabelWidget.tsx
deleted file mode 100644
index f6120d0df40..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverriddenLinkLayer/LabelWidget.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import * as React from 'react';
-
-import styled from '@emotion/styled';
-import { DiagramEngine, LabelModel } from '@projectstorm/react-diagrams';
-
-import { LinkOveryPortal } from './LinkOverlayPortal';
-
-export interface LabelWidgetProps {
-	engine: DiagramEngine;
-	label: LabelModel;
-	index: number;
-}
-
-export const Label = styled.div`
-	display: inline-block;
-	position: absolute;
-`;
-
-export const Foreign = styled.foreignObject`
-	pointer-events: none;
-	overflow: visible;
-	&:focus {
-		outline: none;
-	}
-`;
-
-
-export class OveriddenLabelWidget extends React.Component<LabelWidgetProps> {
-	ref: React.RefObject<HTMLDivElement>;
-
-	constructor(props: LabelWidgetProps) {
-		super(props);
-		this.ref = React.createRef();
-	}
-
-	componentDidUpdate() {
-		window.requestAnimationFrame(this.calculateLabelPosition);
-	}
-
-	componentDidMount() {
-		window.requestAnimationFrame(this.calculateLabelPosition);
-	}
-
-	findPathAndRelativePositionToRenderLabel = (index: number): { path: SVGPathElement; position: number } => {
-		// an array to hold all path lengths, making sure we hit the DOM only once to fetch this information
-		const link = this.props.label.getParent();
-		const lengths = link.getRenderedPath().map((path) => path.getTotalLength());
-
-		// calculate the point where we want to display the label
-		let labelPosition =
-			lengths.reduce((previousValue, currentValue) => previousValue + currentValue, 0) *
-			(index / (link.getLabels().length + 1));
-
-		// find the path where the label will be rendered and calculate the relative position
-		let pathIndex = 0;
-		while (pathIndex < link.getRenderedPath().length) {
-			if (labelPosition - lengths[pathIndex] < 0) {
-				return {
-					path: link.getRenderedPath()[pathIndex],
-					position: labelPosition
-				};
-			}
-
-			// keep searching
-			labelPosition -= lengths[pathIndex];
-			pathIndex++;
-		}
-	};
-
-	calculateLabelPosition = () => {
-		const found = this.findPathAndRelativePositionToRenderLabel(this.props.index + 1);
-		if (!found) {
-			return;
-		}
-
-		const { path, position } = found;
-
-		const labelDimensions = {
-			width: this.ref.current.offsetWidth,
-			height: this.ref.current.offsetHeight
-		};
-
-		const pathCentre = path.getPointAtLength(position);
-		const canvas = this.props.engine.getCanvas();
-		
-		// Get canvas boundaries
-		const canvasWidth = canvas?.offsetWidth || 0;
-		const canvasHeight = canvas?.offsetHeight || 0;
-
-		// Calculate initial centered position
-		let x = pathCentre.x - labelDimensions.width / 2 + this.props.label.getOptions().offsetX;
-		let y = pathCentre.y - labelDimensions.height / 2 + this.props.label.getOptions().offsetY;
-
-		// Apply boundary constraints to keep label fully visible
-		// Ensure label doesn't go off the left edge
-		if (x < 0) {
-			x = 0;
-		}
-		// Ensure label doesn't go off the right edge
-		if (x + labelDimensions.width > canvasWidth) {
-			x = canvasWidth - labelDimensions.width;
-		}
-		// Ensure label doesn't go off the top edge
-		if (y < 0) {
-			y = 0;
-		}
-		// Ensure label doesn't go off the bottom edge
-		if (y + labelDimensions.height > canvasHeight) {
-			y = canvasHeight - labelDimensions.height;
-		}
-
-		const labelCoordinates = { x, y };
-
-		this.ref.current.style.transform = `translate(${labelCoordinates.x}px, ${labelCoordinates.y}px)`;
-	};
-
-	render() {
-		const canvas = this.props.engine.getCanvas();
-
-		return (
-			<LinkOveryPortal>
-				<Foreign key={this.props.label.getID()} width={canvas?.offsetWidth} height={canvas?.offsetHeight}>
-				<Label ref={this.ref}>
-					{this.props.engine.getFactoryForLabel(this.props.label).generateReactWidget({ model: this.props.label })}
-				</Label>
-				</Foreign>
-			</LinkOveryPortal>
-		);
-	}
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverriddenLinkLayer/LinkLayerFactory.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverriddenLinkLayer/LinkLayerFactory.tsx
deleted file mode 100644
index 53a74eecdcb..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverriddenLinkLayer/LinkLayerFactory.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from 'react';
-
-import { GenerateWidgetEvent } from '@projectstorm/react-canvas-core';
-import { LinkLayerFactory, LinkLayerModel } from '@projectstorm/react-diagrams';
-
-import { OveriddenLinkLayerWidget } from './LinkLayerWidget';
-
-export class OverriddenLinkLayerFactory extends LinkLayerFactory {
-
-	generateReactWidget(event: GenerateWidgetEvent<LinkLayerModel>): JSX.Element {
-		return <OveriddenLinkLayerWidget layer={event.model} engine={this.engine} />;
-	}
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverriddenLinkLayer/LinkLayerWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverriddenLinkLayer/LinkLayerWidget.tsx
deleted file mode 100644
index 914fb91e343..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverriddenLinkLayer/LinkLayerWidget.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-// tslint:disable: jsx-no-multiline-js no-implicit-dependencies
-import * as React from 'react';
-
-import styled from '@emotion/styled';
-import { LinkLayerWidgetProps } from '@projectstorm/react-diagrams';
-import * as _ from 'lodash';
-
-import { LinkOverayContainerID } from './LinkOverlayPortal';
-import { OveriddenLinkWidget } from './LinkWidget';
-
-export class OveriddenLinkLayerWidget extends React.Component<LinkLayerWidgetProps> {
-	render() {
-		return (
-			<>
-				{
-					// only perform these actions when we have a diagram
-					_.map(this.props.layer.getLinks(), (link) => {
-						return <OveriddenLinkWidget key={link.getID()} link={link} diagramEngine={this.props.engine} />;
-					})
-				}
-				<LinkOverlayContainer id={LinkOverayContainerID} />
-			</>
-		);
-	}
-}
-
-
-const LinkOverlayContainer = styled.g`
-	pointer-events: none;
-	&:focus {
-		outline: none;
-	}
-`;
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverriddenLinkLayer/LinkOverlayPortal.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverriddenLinkLayer/LinkOverlayPortal.tsx
deleted file mode 100644
index 2dfa4742d38..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverriddenLinkLayer/LinkOverlayPortal.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react';
-import ReactDOM from 'react-dom';
-
-export const LinkOverayContainerID = "data-mapper-link-overlay-container";
-
-export const LinkOveryPortal: React.FC<React.PropsWithChildren<{}>> = (props) => {
-    const container = document.getElementById(LinkOverayContainerID);
-    return container !== null ? ReactDOM.createPortal(props.children, container) : <></>;
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverriddenLinkLayer/LinkWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverriddenLinkLayer/LinkWidget.tsx
deleted file mode 100644
index 40d49095c52..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/OverriddenLinkLayer/LinkWidget.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-// tslint:disable: no-implicit-dependencies jsx-no-multiline-js
-import * as React from 'react';
-
-import { PeformanceWidget } from '@projectstorm/react-canvas-core';
-import { LinkProps, LinkWidget } from '@projectstorm/react-diagrams';
-import * as _ from 'lodash';
-
-import { OveriddenLabelWidget } from './LabelWidget';
-
-
-export class OveriddenLinkWidget extends LinkWidget {
-
-	constructor(props: LinkProps) {
-		super(props);
-	}
-
-
-	render() {
-		const { link } = this.props;
-
-		// only draw the link when we have reported positions
-		if (link.getSourcePort() && !link.getSourcePort().reportedPosition) {
-			return null;
-		}
-		if (link.getTargetPort() && !link.getTargetPort().reportedPosition) {
-			return null;
-		}
-
-		// generate links
-		return (
-			<PeformanceWidget model={this.props.link} serialized={this.props.link.serialize()}>
-				{() => {
-					return (
-						<g data-linkid={this.props.link.getID()}>
-							{this.props.diagramEngine.generateWidgetForLink(link)}
-							{_.map(this.props.link.getLabels(), (labelModel, index) => {
-								return (
-									<OveriddenLabelWidget
-										key={labelModel.getID()}
-										engine={this.props.diagramEngine}
-										label={labelModel}
-										index={index}
-									/>
-								);
-							})}
-						</g>
-					);
-				}}
-			</PeformanceWidget>
-		);
-	}
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/IntermediatePort/IntermediatePortFactory.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/IntermediatePort/IntermediatePortFactory.ts
deleted file mode 100644
index b9004f10294..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/IntermediatePort/IntermediatePortFactory.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { AbstractModelFactory } from '@projectstorm/react-canvas-core';
-import { DiagramEngine, PortModel } from '@projectstorm/react-diagrams';
-import { container, injectable, singleton } from 'tsyringe';
-
-import { INT_PORT_TYPE_ID } from './IntermediatePortModel';
-
-@injectable()
-@singleton()
-export class IntermediatePortFactory extends AbstractModelFactory<PortModel, DiagramEngine> {
-
-	constructor() {
-		super(INT_PORT_TYPE_ID);
-	}
-
-	generateModel(): PortModel {
-		return undefined;
-	}
-}
-container.register("PortFactory", {useClass: IntermediatePortFactory});
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/IntermediatePort/IntermediatePortModel.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/IntermediatePort/IntermediatePortModel.ts
deleted file mode 100644
index 4c147a81425..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/IntermediatePort/IntermediatePortModel.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { LinkModel, PortModel, PortModelGenerics } from '@projectstorm/react-diagrams';
-
-import { DataMapperLinkModel } from '../../Link/model/DataMapperLink';
-
-export interface IntermediateNodeModelGenerics {
-	PORT: IntermediatePortModel;
-}
-export const INT_PORT_TYPE_ID = "datamapper-intermediate-port";
-
-export class IntermediatePortModel extends PortModel<PortModelGenerics & IntermediateNodeModelGenerics> {
-
-	constructor(
-		public portId: string,
-		public portType: "IN" | "OUT") {
-		super({
-			type: INT_PORT_TYPE_ID,
-			name: portId,
-		});
-	}
-
-	createLinkModel(): LinkModel {
-		const lm = new DataMapperLinkModel();
-		return lm;
-	}
-
-	canLinkToPort(port: IntermediatePortModel): boolean {
-		return this.portType !== port.portType;
-	}
-}
-
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/IntermediatePort/IntermediatePortWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/IntermediatePort/IntermediatePortWidget.tsx
deleted file mode 100644
index d5cdd7c49c5..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/IntermediatePort/IntermediatePortWidget.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-// tslint:disable: jsx-no-multiline-js jsx-wrap-multiline
-import React, { useEffect, useState } from "react";
-
-import { DiagramEngine, PortWidget } from "@projectstorm/react-diagrams-core";
-
-import { IntermediatePortModel } from "./IntermediatePortModel";
-import { Button, Codicon, Icon } from "@wso2/ui-toolkit";
-import styled from "@emotion/styled";
-
-
-export interface IntermediatePortWidgetProps {
-	engine: DiagramEngine;
-	port: IntermediatePortModel;
-}
-
-export const IntermediatePortWidget: React.FC<IntermediatePortWidgetProps> = (props: IntermediatePortWidgetProps) =>  {
-	const { engine, port } = props;
-	const [ active, setActive ] = useState(false);
-	const [ disableNewLinking, setDisableNewLinking] = useState<boolean>(false);
-
-	const hasLinks = Object.entries(port.links).length > 0;
-	useEffect(() => {
-		port.registerListener({
-			eventDidFire(event) {
-				if (event.function === "mappingStartedFrom" || event.function === "mappingFinishedTo") {
-					setActive(true);
-				} else if (event.function === "link-selected") {
-					setActive(true);
-				} else if (event.function === "link-unselected") {
-					setActive(false);
-				}
-			},
-		})
-	}, []);
-
-	useEffect(() => {
-		port.registerListener({
-			eventDidFire(event) {
-				if (event.function === "disableNewLinking") {
-					setDisableNewLinking(true);
-				} else if (event.function === "enableNewLinking") {
-					setDisableNewLinking(false);
-				}
-			},
-		})
-	}, []);
-
-	const RadioButton = (checked: boolean) => (
-		checked ? (
-			<Button appearance="icon">
-				<Icon name="radio-button-checked" />
-			</Button>
-		) : (
-			<Button appearance="icon">
-				<Icon name="radio-button-unchecked" />
-			</Button>
-		)
-	);
-
-	const RadioButtonChecked = styled(() => RadioButton(true))`
-		user-select: none;
-		pointer-events: auto;
-	`;
-
-	const RadioButtonUnchecked = styled(() => RadioButton(false))`
-		user-select: none;
-		pointer-events: auto;
-	`;
-
-	return <PortWidget
-		port={port}
-		engine={engine}
-		style={{
-			cursor: disableNewLinking ? "not-allowed" : "pointer",
-			display: "inline",
-			color: active ? "#C25B56" : (hasLinks ? "#96C0CE" : "#FEF6EB")
-		}}
-	>
-		{active ? (
-			<Button>
-				<Codicon name="circle-filled" />
-			</Button>
-		) : (hasLinks ? <RadioButtonChecked /> : <RadioButtonUnchecked />)}
-	</PortWidget>
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/IntermediatePort/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/IntermediatePort/index.ts
deleted file mode 100644
index b97641ace5f..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/IntermediatePort/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./IntermediatePortFactory";
-export * from "./IntermediatePortModel";
-export * from "./IntermediatePortWidget";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/index.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/index.ts
deleted file mode 100644
index 011f145ce87..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./model/RecordFieldPortModel";
-export * from "./model/RecordFieldPortFactory";
-export * from "./view/DataMapperPortWidget";
-export * from "./IntermediatePort";
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/model/RecordFieldPortFactory.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/model/RecordFieldPortFactory.ts
deleted file mode 100644
index a2eeae603fc..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/model/RecordFieldPortFactory.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { AbstractModelFactory } from '@projectstorm/react-canvas-core';
-import { DiagramEngine, PortModel } from '@projectstorm/react-diagrams';
-import { container, injectable, singleton } from 'tsyringe';
-
-import { FORM_FIELD_PORT } from "./RecordFieldPortModel";
-
-@injectable()
-@singleton()
-export class RecordFieldPortFactory extends AbstractModelFactory<PortModel, DiagramEngine> {
-
-	constructor() {
-		super(FORM_FIELD_PORT);
-	}
-
-	generateModel(): PortModel {
-		return undefined;
-	}
-}
-container.register("PortFactory", {useClass: RecordFieldPortFactory});
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/model/RecordFieldPortModel.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/model/RecordFieldPortModel.ts
deleted file mode 100644
index 3a4c4f17093..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/model/RecordFieldPortModel.ts
+++ /dev/null
@@ -1,176 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { LinkModel, LinkModelGenerics, PortModel, PortModelGenerics } from "@projectstorm/react-diagrams";
-import { PrimitiveBalType, TypeField } from "@wso2/ballerina-core";
-import { STKindChecker } from "@wso2/syntax-tree";
-
-import { DataMapperLinkModel } from "../../Link";
-import { EditableRecordField } from "../../Mappings/EditableRecordField";
-import {
-	createSourceForMapping,
-	generateDestructuringPattern,
-	getInnermostExpressionBody,
-	getMappingType,
-	getModificationForFromClauseBindingPattern,
-	getModificationForSpecificFieldValue,
-	getValueType,
-	isDefaultValue,
-	modifySpecificFieldSource,
-	replaceSpecificFieldValue,
-	updateExistingValue
-} from "../../utils/dm-utils";
-import { IntermediatePortModel } from "../IntermediatePort";
-import { DataMapperNodeModel } from "../../Node/commons/DataMapperNode";
-import { QueryExprMappingType } from "../../Node";
-import { FromClauseNode } from "../../Node/FromClause";
-import { userActionRequiredMapping } from "../../Link/link-utils";
-
-export interface RecordFieldNodeModelGenerics {
-	PORT: RecordFieldPortModel;
-}
-
-export const FORM_FIELD_PORT = "form-field-port";
-
-export enum ValueType {
-	Replaceable,
-	Empty,
-	Mergeable
-}
-
-export enum MappingType {
-	ArrayToArray = "array-array",
-	ArrayToSingleton = "array-singleton",
-	RecordToRecord = "record-record",
-	UnionToAny = "union-any",
-	Default = "" // All other mapping types
-}
-
-export class RecordFieldPortModel extends PortModel<PortModelGenerics & RecordFieldNodeModelGenerics> {
-
-	public linkedPorts: PortModel[];
-	public pendingMappingType: MappingType;
-
-	constructor(
-		public field: TypeField,
-		public portName: string,
-		public portType: "IN" | "OUT",
-		public parentId: string,
-		public index?: number,
-		public editableRecordField?: EditableRecordField,
-		public fieldFQN?: string, // Field FQN with optional included, ie. person?.name?.firstName
-		public optionalOmittedFieldFQN?: string, // Field FQN without optional, ie. person.name.firstName
-		public parentModel?: RecordFieldPortModel,
-		public collapsed?: boolean,
-		public hidden?: boolean,
-		public isWithinSelectClause?: boolean,
-		public descendantHasValue?: boolean,
-		public ancestorHasValue?: boolean,
-		public isDisabledDueToCollectClause?: boolean) {
-		super({
-			type: FORM_FIELD_PORT,
-			name: `${portName}.${portType}`
-		});
-		this.linkedPorts = [];
-	}
-
-
-	createLinkModel(): LinkModel {
-		const lm = new DataMapperLinkModel();
-		lm.registerListener({
-			targetPortChanged: (async () => {
-				if (!lm.getSourcePort() || !lm.getTargetPort()) {
-					return;
-				}
-				const sourcePort = lm.getSourcePort() as RecordFieldPortModel;
-				const targetPort = lm.getTargetPort() as RecordFieldPortModel;
-
-				const targetPortHasLinks = Object.values(targetPort.links)
-					?.some(link => (link as DataMapperLinkModel)?.isActualLink);
-
-				const mappingType = getMappingType(sourcePort, targetPort);
-				if (userActionRequiredMapping(mappingType, targetPort)) {
-					// Source update behavior is determined by the user.
-					return;
-				}
-
-				const targetNode = targetPort.getNode() as DataMapperNodeModel;
-				const { position, mappingType: queryExprMappingType, stNode } = targetNode.context.selection.selectedST;
-				const valueType = getValueType(lm);
-				if (queryExprMappingType === QueryExprMappingType.A2SWithCollect && valueType !== ValueType.Empty) {
-					const modifications = [];
-					let sourceField = sourcePort.fieldFQN;
-					const fieldParts = sourceField.split('.');
-					if ((sourcePort.getParent() as FromClauseNode).typeDef.typeName === PrimitiveBalType.Record) {
-						const bindingPatternSrc = generateDestructuringPattern(fieldParts.slice(1).join('.'));
-						modifications.push(
-							getModificationForFromClauseBindingPattern(position, bindingPatternSrc, stNode),
-						);
-					}
-					// by default, use the sum operator to aggregate the values
-					sourceField = `sum(${fieldParts[fieldParts.length - 1]})`;
-					modifications.push(getModificationForSpecificFieldValue(targetPort, sourceField));
-					replaceSpecificFieldValue(targetPort, modifications);
-				} else if (valueType === ValueType.Replaceable) {
-					updateExistingValue(sourcePort, targetPort);
-				} else if (valueType === ValueType.Mergeable) {
-					modifySpecificFieldSource(sourcePort, targetPort, lm.getID());
-				} else {
-					await createSourceForMapping(sourcePort, targetPort);
-				}
-			})
-		});
-		return lm;
-	}
-
-	addLink(link: LinkModel<LinkModelGenerics>): void {
-		if (this.portType === 'IN'){
-			this.parentModel?.setDescendantHasValue();
-		}
-		super.addLink(link);
-	}
-
-	addLinkedPort(port: PortModel): void {
-		this.linkedPorts.push(port);
-	}
-
-	setPendingMappingType(mappingType: MappingType): void {
-		this.pendingMappingType = mappingType;
-	}
-
-	setDescendantHasValue(): void {
-		this.descendantHasValue = true;
-		if (this.parentModel){
-			this.parentModel.setDescendantHasValue();
-		}
-	}
-
-	isDisabled(): boolean {
-		return this.ancestorHasValue || this.descendantHasValue || this.isDisabledDueToCollectClause;
-	}
-
-	canLinkToPort(port: RecordFieldPortModel): boolean {
-		let isLinkExists = false;
-		if (port.portType === "IN") {
-			isLinkExists = this.linkedPorts.some((linkedPort) => {
-				return port.getID() === linkedPort.getID()
-			})
-		}
-		return this.portType !== port.portType && !isLinkExists
-				&& ((port instanceof IntermediatePortModel) || (!port.isDisabled()));
-	}
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/view/DataMapperPortRadioButton.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/view/DataMapperPortRadioButton.tsx
deleted file mode 100644
index 21e18c7169f..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/view/DataMapperPortRadioButton.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from "react";
-
-import styled from "@emotion/styled";
-import { Icon } from "@wso2/ui-toolkit";
-
-export interface DataMapperPortRadioButtonProps {
-	checked: boolean;
-	disabled?: boolean;
-}
-
-function DataMapperPortRadioButton(props: DataMapperPortRadioButtonProps) {
-	const { checked, disabled } = props;
-
-	const iconSx = {
-		display: "flex",
-		fontSize: "15px"
-	};
-
-	if (disabled) {
-		Object.assign(iconSx, {
-			cursor: 'not-allowed',
-			opacity: 0.9
-		});
-	}
-
-	return (
-		<Icon
-			sx={{ height: "15px", width: "15px" }}
-			iconSx={iconSx}
-			name={checked ? "radio-button-checked" : "radio-button-unchecked"}
-		/>
-	);
-}
-
-export const RadioButtonChecked = styled(({ disabled = false }) => DataMapperPortRadioButton({ checked: true, disabled }))`
-	user-select: none;
-	pointer-events: auto;
-`;
-
-export const RadioButtonUnchecked = styled(({ disabled = false }) => DataMapperPortRadioButton({checked: false, disabled}))`
-	user-select: none;
-	pointer-events: auto;
-`;
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/view/DataMapperPortWidget.tsx b/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/view/DataMapperPortWidget.tsx
deleted file mode 100644
index 56129961238..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Port/view/DataMapperPortWidget.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import styled from "@emotion/styled";
-// tslint:disable-next-line: no-implicit-dependencies
-import { DiagramEngine, PortWidget } from "@projectstorm/react-diagrams-core";
-
-import { DataMapperLinkModel } from "../../Link"
-import { IntermediatePortModel } from "../IntermediatePort";
-import { RecordFieldPortModel } from "../model/RecordFieldPortModel";
-import { RadioButtonChecked, RadioButtonUnchecked } from "./DataMapperPortRadioButton";
-
-export interface DataMapperPortWidgetProps {
-	engine: DiagramEngine;
-	port: IntermediatePortModel | RecordFieldPortModel;
-	disable?: boolean;
-	dataTestId?: string;
-	handlePortState?: (portState: PortState) => void ;
-}
-
-export enum PortState {
-	PortSelected,
-	LinkSelected,
-	Unselected
-}
-
-export const DataMapperPortWidget: React.FC<DataMapperPortWidgetProps> = (props: DataMapperPortWidgetProps) =>  {
-	const { engine, port, disable, dataTestId, handlePortState } = props;
-	const [ portState, setPortState ] = useState<PortState>(PortState.Unselected);
-	const [ disableNewLinking, setDisableNewLinking] = useState<boolean>(false);
-
-	const isDisabled = disable || (port instanceof RecordFieldPortModel && port.isDisabled());
-	const hasLinks = Object.entries(port.links).length > 0;
-	const pendingMappingType = port instanceof RecordFieldPortModel && port.pendingMappingType;
-	const isPortSelected = portState === PortState.PortSelected;
-
-	const hasError = Object.entries(port.links).some((link) => {
-		if (link[1] instanceof DataMapperLinkModel){
-			return link[1].hasError();
-		}
-		return false;
-	});
-
-	useEffect(() => {
-			port.registerListener({
-				eventDidFire(event) {
-					if (event.function === "mappingStartedFrom" || event.function === "mappingFinishedTo") {
-						setPortState(PortState.PortSelected);
-						if (handlePortState) {
-							handlePortState(PortState.PortSelected);
-						}
-					} else if (event.function === "link-selected") {
-						setPortState(PortState.LinkSelected);
-						if (handlePortState) {
-							handlePortState(PortState.LinkSelected);
-						}
-					} else if (event.function === "link-unselected"
-						|| event.function === "mappingStartedFromSelectedAgain"
-						|| event.function === "link-removed"
-					) {
-						setPortState(PortState.Unselected);
-						if (handlePortState) {
-							handlePortState(PortState.Unselected);
-						}
-					}
-				},
-			})
-	}, []);
-
-	useEffect(() => {
-		port.registerListener({
-			eventDidFire(event) {
-				if (event.function === "disableNewLinking") {
-					setDisableNewLinking(true);
-				} else if (event.function === "enableNewLinking") {
-					setDisableNewLinking(false);
-				}
-			},
-		})
-	}, []);
-
-	let portColor = defaultPortColor;
-	if (pendingMappingType) {
-		portColor = tempLinkPortColor;
-	} else if (isPortSelected) {
-		portColor = portActiveColor;
-	} else if (hasLinks) {
-		portColor = hasError ? errorPortColor : portActiveColor;
-	}
-
-	const containerProps = {
-		active: isPortSelected,
-		'data-testid': dataTestId,
-		color: portColor
-	};
-
-	const disabledPortWithLinks = isDisabled && hasLinks;
-
-	if (isDisabled && !hasLinks) {
-		return <RadioButtonUnchecked disabled={isDisabled} data-testid={dataTestId}/>;
-	} else if (disableNewLinking || disabledPortWithLinks) {
-		return (
-			<PortWidget
-				port={port}
-				engine={engine}
-			>
-				<DisabledNewLinkingPortContainer {...containerProps}>
-					{hasLinks ? <RadioButtonChecked disabled={true} /> : <RadioButtonUnchecked disabled = {true} /> }
-				</DisabledNewLinkingPortContainer>
-			</PortWidget>
-		);
-	}
-
-	const isChecked = hasLinks || isPortSelected || !!pendingMappingType;
-
-	return (
-		<PortWidget
-			port={port}
-			engine={engine}
-		>
-			<ActivePortContainer {...containerProps}>
-				{isChecked ? <RadioButtonChecked /> : <RadioButtonUnchecked />}
-			</ActivePortContainer>
-		</PortWidget>
-	);
-}
-
-interface PortsContainerProps {
-	active: boolean;
-	color: string;
-}
-
-const defaultPortColor = "var(--vscode-foreground)";
-const tempLinkPortColor = "var(--vscode-debugIcon-breakpointDisabledForeground)";
-const errorPortColor = "var(--vscode-errorForeground)";
-const portActiveColor = "var(--vscode-list-focusAndSelectionOutline, var(--vscode-contrastActiveBorder, var(--vscode-editorLink-activeForeground, var(--vscode-list-focusOutline))))";
-
-const ActivePortContainer = styled.div((props: PortsContainerProps) => ({
-	cursor: "pointer",
-	display: "flex",
-	strokeOpacity: props.active ? 0.1 : 0,
-	color: props.color,
-	"&:hover": {
-		color: portActiveColor
-	}
-}));
-
-const DisabledNewLinkingPortContainer = styled.div((props: PortsContainerProps) => ({
-	cursor: "not-allowed",
-	display: "flex",
-	color: props.color,
-}));
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/constants.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/constants.ts
deleted file mode 100644
index 8ef6353f35f..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/constants.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-export const MAPPING_CONSTRUCTOR_TARGET_PORT_PREFIX = "mappingConstructor";
-export const LIST_CONSTRUCTOR_TARGET_PORT_PREFIX = "listConstructor";
-export const PRIMITIVE_TYPE_TARGET_PORT_PREFIX = "primitiveType";
-export const UNION_TYPE_TARGET_PORT_PREFIX = "unionType";
-export const LET_EXPRESSION_SOURCE_PORT_PREFIX = "letExpression";
-export const ENUM_TYPE_SOURCE_PORT_PREFIX = "enumType";
-export const MODULE_VARIABLE_SOURCE_PORT_PREFIX = "moduleVariable";
-export const EXPANDED_QUERY_SOURCE_PORT_PREFIX = "expandedQueryExpr.source";
-export const EXPANDED_QUERY_INPUT_NODE_PREFIX = "expandedQueryExpr.input";
-export const FUNCTION_BODY_QUERY = "FunctionBody.query";
-export const SELECT_CALUSE_QUERY = "SelectClause.query";
-export const SYMBOL_KIND_CONSTANT = "CONSTANT";
-
-export const JSON_MERGE_MODULE_NAME = "ballerina/lang.value";
-export const defaultModelOptions = { zoom: 90 };
-export const VISUALIZER_PADDING = 0;
-export const IO_NODE_DEFAULT_WIDTH = 350;
-export const IO_NODE_HEADER_HEIGHT = 40;
-export const IO_NODE_FIELD_HEIGHT = 35;
-export const GAP_BETWEEN_INPUT_NODES = 10;
-export const GAP_BETWEEN_NODE_HEADER_AND_BODY = 10;
-export const GAP_BETWEEN_FIELDS = 1;
-export const QUERY_EXPR_INTERMEDIATE_CLAUSE_HEIGHT = 40;
-export const GAP_BETWEEN_INTERMEDIATE_CLAUSES = 25;
-export const GAP_BETWEEN_INTERMEDIATE_CLAUSES_AND_NODE = 30;
-export const GAP_BETWEEN_MAPPING_HEADER_NODE_AND_INPUT_NODE = 50;
-
-export const AUTO_MAP_TIMEOUT_MS = 2000000;
-export const AUTO_MAP_IN_PROGRESS_MSG = "Generating mappings for your transformation";
-
-export const OFFSETS = {
-    SOURCE_NODE: {
-        X: 0,
-        Y: 0,
-    },
-    TARGET_NODE: {
-        X: (window.innerWidth -VISUALIZER_PADDING)*(100/defaultModelOptions.zoom)-IO_NODE_DEFAULT_WIDTH,
-        Y: 0
-    },
-    QUERY_MAPPING_HEADER_NODE: {
-        X: 25,
-        Y: 25,
-        MARGIN_BOTTOM: 65
-    },
-    LINK_CONNECTOR_NODE: {
-        X: 750
-    },
-    LINK_CONNECTOR_NODE_WITH_ERROR: {
-        X: 718
-    },
-    QUERY_EXPRESSION_NODE: {
-        X: 750
-    },
-    INTERMEDIATE_CLAUSE_HEIGHT: 80,
-    QUERY_VIEW_LEFT_MARGIN: 0,
-    QUERY_VIEW_TOP_MARGIN: 50,
-}
-
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/diagram-utils.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/diagram-utils.ts
deleted file mode 100644
index 40c4c5804e9..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/diagram-utils.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { ExpandedMappingHeaderNode, RequiredParamNode } from "../Node";
-import { DataMapperNodeModel } from "../Node/commons/DataMapperNode";
-import {
-    GAP_BETWEEN_FIELDS,
-    GAP_BETWEEN_INTERMEDIATE_CLAUSES_AND_NODE,
-    GAP_BETWEEN_NODE_HEADER_AND_BODY,
-    IO_NODE_FIELD_HEIGHT,
-    IO_NODE_HEADER_HEIGHT,
-    QUERY_EXPR_INTERMEDIATE_CLAUSE_HEIGHT,
-    defaultModelOptions
-} from "./constants";
-
-export function calculateZoomLevel(screenWidth: number) {
-    const minWidth = 200;
-    const maxWidth = 850; // After this width, the max zoom level is reached
-    const minZoom = 20;
-    const maxZoom = defaultModelOptions.zoom;
-
-	// Ensure the max zoom level is not exceeded
-	const boundedScreenWidth = Math.min(screenWidth, maxWidth);
-    const normalizedWidth = (boundedScreenWidth - minWidth) / (maxWidth - minWidth);
-    const zoomLevel = minZoom + normalizedWidth * (maxZoom - minZoom);
-    return Math.max(minZoom, Math.min(maxZoom, zoomLevel));
-}
-
-export function getIONodeHeight(noOfFields: number) {
-	return noOfFields * IO_NODE_FIELD_HEIGHT
-		+ (IO_NODE_HEADER_HEIGHT - IO_NODE_FIELD_HEIGHT)
-		+ noOfFields * GAP_BETWEEN_FIELDS
-		+ GAP_BETWEEN_NODE_HEADER_AND_BODY;
-}
-
-export function getExpandedMappingHeaderNodeHeight(node: ExpandedMappingHeaderNode) {
-    const noOfIntermediateClauses = node.queryExpr.queryPipeline.intermediateClauses.length;
-    return (noOfIntermediateClauses + 1) * (QUERY_EXPR_INTERMEDIATE_CLAUSE_HEIGHT + GAP_BETWEEN_INTERMEDIATE_CLAUSES_AND_NODE);
-}
-
-export function calculateControlPointOffset(screenWidth: number) {
-    const minWidth = 850;
-    const maxWidth = 1500;
-    const minOffset = 20;
-    const maxOffset = 300;
-
-    const clampedWidth = Math.min(Math.max(screenWidth, minWidth), maxWidth);
-    const interpolationFactor = (clampedWidth - minWidth) / (maxWidth - minWidth);
-    const interpolatedOffset = minOffset + interpolationFactor * (maxOffset - minOffset);
-    return interpolatedOffset;
-}
-
-export function isSameView(newNode: DataMapperNodeModel, existingNode?: DataMapperNodeModel) {
-    if (!existingNode || !existingNode?.context || !newNode?.context) return;
-
-    const prevFocusedView = existingNode.context.selection;
-    const newFocusedView = newNode.context.selection;
-
-    return prevFocusedView.selectedST.fieldPath === newFocusedView.selectedST.fieldPath;
-}
-
-export function hasSameIntermediateClauses(newNodes: DataMapperNodeModel[], existingNodes?: DataMapperNodeModel[]) {
-    if (!existingNodes) return;
-
-    const newMappingHeaderNode = newNodes
-        .find(node => node instanceof ExpandedMappingHeaderNode) as ExpandedMappingHeaderNode;
-    const existingMappingHeaderNode = existingNodes
-        .find(node => node instanceof ExpandedMappingHeaderNode) as ExpandedMappingHeaderNode;
-
-    if (!newMappingHeaderNode && !existingMappingHeaderNode) return true;
-
-    if (newMappingHeaderNode && existingMappingHeaderNode) {
-        return newMappingHeaderNode.queryExpr.queryPipeline.intermediateClauses.length ===
-            existingMappingHeaderNode.queryExpr.queryPipeline.intermediateClauses.length;
-    }
-
-    return true;
-}
-
-export function getFieldCountMismatchIndex(newNodes: DataMapperNodeModel[], existingNodes?: DataMapperNodeModel[]) {
-    if (existingNodes.length === 0) return 0;
-
-    const newRequiredParamNodes = newNodes.filter(node => node instanceof RequiredParamNode);
-    const existingRequiredParamNodes = existingNodes.filter(node => node instanceof RequiredParamNode);
-
-    for (let i = 0; i < newRequiredParamNodes.length; i++) {
-        const newNode = newRequiredParamNodes[i] as RequiredParamNode;
-        const existingNode = existingRequiredParamNodes[i] as RequiredParamNode;
-        
-        if (newNode?.numberOfFields !== existingNode?.numberOfFields) {
-            return i;
-        }
-    }
-    
-    return -1;
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/dm-utils.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/dm-utils.ts
deleted file mode 100644
index 1c6d2f6ed5f..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/dm-utils.ts
+++ /dev/null
@@ -1,2301 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { NodeModel } from "@projectstorm/react-diagrams";
-import {
-	LinePosition,
-	NonPrimitiveBal,
-	STModification,
-	keywords,
-	PrimitiveBalType,
-	TypeField
-} from "@wso2/ballerina-core";
-import {
-	CaptureBindingPattern,
-	ExpressionFunctionBody,
-	FieldAccess,
-	FromClause,
-	FunctionCall,
-	FunctionDefinition,
-	IdentifierToken,
-	JoinClause,
-	LetClause,
-	LetExpression,
-	LetVarDecl,
-	ListConstructor,
-	MappingConstructor,
-	MethodCall,
-	NodePosition,
-	OptionalFieldAccess,
-	QueryExpression,
-	RequiredParam,
-	SelectClause,
-	SimpleNameReference,
-	SpecificField,
-	STKindChecker,
-	STNode,
-	traversNode,
-	TypeCastExpression
-} from "@wso2/syntax-tree";
-import { PortModel } from "@projectstorm/react-diagrams-core";
-
-import { useDMSearchStore, useDMStore } from "../../../store/store";
-import { isPositionsEquals } from "../../../utils/st-utils";
-import { DMNode, ViewOption } from "../../DataMapper/DataMapper";
-import { ErrorNodeKind } from "../../DataMapper/Error/RenderingError";
-import { getLetExpression, getLetExpressions } from "../../DataMapper/LocalVarConfigPanel/local-var-mgt-utils";
-import { isArraysSupported } from "../../DataMapper/utils";
-import { ExpressionLabelModel, AggregationFunctions } from "../Label";
-import { DataMapperLinkModel } from "../Link";
-import { ArrayElement, EditableRecordField } from "../Mappings/EditableRecordField";
-import { FieldAccessToSpecificFied } from "../Mappings/FieldAccessToSpecificFied";
-import {
-	LIST_CONSTRUCTOR_NODE_TYPE,
-	MappingConstructorNode,
-	MAPPING_CONSTRUCTOR_NODE_TYPE, PRIMITIVE_TYPE_NODE_TYPE, QueryExpressionNode,
-	QUERY_EXPR_NODE_TYPE, RequiredParamNode,
-	REQ_PARAM_NODE_TYPE,
-	QueryExprMappingType
-} from "../Node";
-import { DataMapperNodeModel, TypeDescriptor } from "../Node/commons/DataMapperNode";
-import { EnumTypeNode, ENUM_TYPE_SOURCE_NODE_TYPE } from "../Node/EnumType";
-import { ExpandedMappingHeaderNode, EXPANDED_MAPPING_HEADER_NODE_TYPE } from "../Node/ExpandedMappingHeader";
-import { FromClauseNode, QUERY_EXPR_SOURCE_NODE_TYPE } from "../Node/FromClause";
-import { JoinClauseNode, QUERY_EXPR_JOIN_NODE_TYPE } from "../Node/JoinClause";
-import { LetClauseNode, QUERY_EXPR_LET_NODE_TYPE } from "../Node/LetClause";
-import { LetExpressionNode, LET_EXPR_SOURCE_NODE_TYPE } from "../Node/LetExpression";
-import { LinkConnectorNode } from "../Node/LinkConnector";
-import { ListConstructorNode } from "../Node/ListConstructor";
-import { ModuleVariable, ModuleVariableNode, MODULE_VAR_SOURCE_NODE_TYPE } from "../Node/ModuleVariable";
-import { PrimitiveTypeNode } from "../Node/PrimitiveType";
-import { UnionTypeNode } from "../Node/UnionType";
-import { IntermediatePortModel, MappingType, RecordFieldPortModel, ValueType } from "../Port";
-import { FromClauseBindingPatternFindingVisitor } from "../visitors/FromClauseBindingPatternFindingVisitor";
-import { InputNodeFindingVisitor } from "../visitors/InputNodeFindingVisitor";
-import { ModuleVariablesFindingVisitor } from "../visitors/ModuleVariablesFindingVisitor";
-
-import {
-	ENUM_TYPE_SOURCE_PORT_PREFIX,
-	EXPANDED_QUERY_SOURCE_PORT_PREFIX,
-	FUNCTION_BODY_QUERY,
-	JSON_MERGE_MODULE_NAME,
-	LET_EXPRESSION_SOURCE_PORT_PREFIX,
-	LIST_CONSTRUCTOR_TARGET_PORT_PREFIX,
-	MAPPING_CONSTRUCTOR_TARGET_PORT_PREFIX,
-	MODULE_VARIABLE_SOURCE_PORT_PREFIX,
-	PRIMITIVE_TYPE_TARGET_PORT_PREFIX,
-	SELECT_CALUSE_QUERY,
-	UNION_TYPE_TARGET_PORT_PREFIX,
-} from "./constants";
-import { FnDefInfo, FunctionDefinitionStore } from "./fn-definition-store";
-import { getModification } from "./modifications";
-import { TypeDescriptorStore } from "./type-descriptor-store";
-import { QueryExprFindingVisitorByPosition } from "../visitors/QueryExprFindingVisitorByPosition";
-import { NodeFindingVisitorByPosition } from "../visitors/NodeFindingVisitorByPosition";
-import { CustomAction } from "../CodeAction/CodeAction";
-import { FunctionCallFindingVisitor } from "../visitors/FunctionCallFindingVisitor";
-import { BaseModel } from "@projectstorm/react-canvas-core";
-import { getDMTypeDim } from "./type-utils";
-import { QueryParentFindingVisitor } from "../visitors/QueryParentFindingVisitor";
-import { IDataMapperContext } from "../../../utils/DataMapperContext/DataMapperContext";
-import { generateCustomFunction } from "../Link/link-utils";
-import { InputNode, NodeWithoutTypeDesc } from "../Actions/utils";
-
-/**
- * Set of Ballerina types that support merge operations (string concatenation, numeric addition, etc.)
- */
-const MERGEABLE_TYPES = new Set([
-	PrimitiveBalType.String,
-	PrimitiveBalType.Int,
-	PrimitiveBalType.Float,
-	PrimitiveBalType.Decimal,
-	"anydata",
-	"any"
-]);
-
-export function getFieldNames(expr: FieldAccess | OptionalFieldAccess) {
-	const fieldNames: { name: string, isOptional: boolean }[] = [];
-	let nextExp: FieldAccess | OptionalFieldAccess = expr;
-	while (nextExp && (STKindChecker.isFieldAccess(nextExp) || STKindChecker.isOptionalFieldAccess(nextExp))) {
-		if (STKindChecker.isIndexedExpression(nextExp.expression) && STKindChecker.isFieldAccess(nextExp.expression?.containerExpression)) {
-			nextExp = nextExp.expression?.containerExpression;
-		} else {
-			fieldNames.push({ name: (nextExp.fieldName as SimpleNameReference).name.value, isOptional: STKindChecker.isOptionalFieldAccess(nextExp) });
-			if (STKindChecker.isSimpleNameReference(nextExp.expression)) {
-				fieldNames.push({ name: nextExp.expression.name.value, isOptional: false });
-			}
-			nextExp = (STKindChecker.isFieldAccess(nextExp.expression) || STKindChecker.isOptionalFieldAccess(nextExp.expression))
-				? nextExp.expression : undefined;
-		}
-	}
-	let isRestOptional = false;
-	const fieldsToReturn = fieldNames.reverse().map((item) => {
-		if (item.isOptional) {
-			isRestOptional = true;
-		}
-		return { name: item.name, isOptional: isRestOptional || item.isOptional };
-	});
-	return fieldsToReturn
-}
-
-export async function createSourceForMapping(
-	sourcePort: RecordFieldPortModel,
-	targetPort: RecordFieldPortModel,
-	rhsValue?: string
-) {
-	let source = "";
-	let lhs = "";
-	let rhs = "";
-	const modifications: STModification[] = [];
-
-	const targetNode = targetPort.getNode() as DataMapperNodeModel;
-	const fieldIndexes = targetPort && getFieldIndexes(targetPort);
-	const { applyModifications } = targetNode.context;
-
-	rhs =  rhsValue || sourcePort.fieldFQN;
-
-	if (isMappedToPrimitiveTypePort(targetPort)
-		|| isMappedToRootListConstructor(targetPort)
-		|| isMappedToRootMappingConstructor(targetPort)
-		|| isMappedToMappingConstructorWithinArray(targetPort)
-		|| isMappedToExprFuncBody(targetPort, targetNode.context.selection.selectedST.stNode)) {
-		let targetExpr: STNode;
-		if (STKindChecker.isLetExpression(targetPort.editableRecordField.value)) {
-			targetExpr = getExprBodyFromLetExpression(targetPort.editableRecordField.value);
-		} else if (STKindChecker.isQueryExpression(targetPort.editableRecordField.value)) {
-			const selectClause = targetPort.editableRecordField.value?.selectClause
-				|| targetPort.editableRecordField.value?.resultClause;
-			targetExpr = selectClause.expression;
-		} else {
-			targetExpr = targetPort.editableRecordField.value;
-		}
-		const valuePosition = targetExpr.position as NodePosition;
-		const isValueEmpty = isEmptyValue(valuePosition);
-		if (!isValueEmpty) {
-			return await updateValueExprSource(rhs, valuePosition, applyModifications);
-		}
-	} else if (isMappedToSelectClauseExprConstructor(targetPort)) {
-		const queryExpr = targetPort.editableRecordField.value as QueryExpression;
-		const selectClause = queryExpr?.selectClause || queryExpr?.resultClause;
-		const exprPosition = selectClause.expression.position as NodePosition;
-		return await updateValueExprSource(rhs, exprPosition, applyModifications);
-	} else if (isMappedToRootUnionType(targetPort)) {
-		const exprPosition = (targetPort.getParent() as UnionTypeNode).innermostExpr.position as NodePosition;
-		return await updateValueExprSource(rhs, exprPosition, applyModifications);
-	}
-
-	const targetFieldName = getFieldNameFromOutputPort(targetPort);
-	lhs = getBalRecFieldName(targetFieldName);
-
-	// Inserting a new specific field
-	let mappingConstruct;
-	const parentFieldNames: string[] = [];
-	let parent = targetPort.parentModel;
-	let fromFieldIdx = -1;
-
-	while (parent != null && parent.parentModel) {
-		const parentFieldName = getFieldNameFromOutputPort(parent);
-		if (parentFieldName
-			&& !(parent.field.typeName === PrimitiveBalType.Record
-				&& ([PrimitiveBalType.Array, PrimitiveBalType.Union].includes(parent.parentModel.field.typeName as PrimitiveBalType))
-				&& !parent.isWithinSelectClause)
-		) {
-			parentFieldNames.push(getBalRecFieldName(parentFieldName));
-		}
-		parent = parent.parentModel;
-	}
-
-	if (targetNode instanceof MappingConstructorNode
-		|| (targetNode instanceof UnionTypeNode && targetNode.resolvedType.typeName === PrimitiveBalType.Record)) {
-		const targetExpr = targetNode.innermostExpr;
-		if (STKindChecker.isMappingConstructor(targetExpr)) {
-			mappingConstruct = targetExpr;
-		} else if (STKindChecker.isLetExpression(targetExpr)) {
-			const exprBody = getExprBodyFromLetExpression(targetExpr);
-			if (STKindChecker.isMappingConstructor(exprBody)) {
-				mappingConstruct = exprBody;
-			}
-		}
-	} else if (targetNode instanceof ListConstructorNode
-		|| (targetNode instanceof UnionTypeNode && targetNode.resolvedType.typeName === PrimitiveBalType.Array)) {
-		const targetExpr = targetNode.innermostExpr;
-		if (STKindChecker.isListConstructor(targetExpr) && fieldIndexes !== undefined && !!fieldIndexes.length) {
-			mappingConstruct = getNextMappingConstructor(targetExpr);
-		} else if (STKindChecker.isLetExpression(targetExpr)
-			&& fieldIndexes !== undefined
-			&& !!fieldIndexes.length) {
-			const exprBody = getExprBodyFromLetExpression(targetExpr);
-			if (STKindChecker.isListConstructor(exprBody)) {
-				mappingConstruct = getNextMappingConstructor(exprBody);
-			}
-		}
-	}
-
-	let targetMappingConstruct = mappingConstruct;
-
-	if (parentFieldNames.length > 0) {
-		const fieldNames = parentFieldNames.reverse();
-
-		for (let i = 0; i < fieldNames.length; i++) {
-			const fieldName = fieldNames[i];
-			const specificField = getSpecificField(mappingConstruct, fieldName);
-
-			if (specificField && specificField.valueExpr) {
-				const valueExpr = specificField.valueExpr;
-
-				if (!valueExpr.source) {
-					return await createValueExprSource(lhs, rhs, fieldNames, i, specificField.colon.position as NodePosition,
-						applyModifications);
-				}
-
-				const innerExpr = getInnermostExpressionBody(valueExpr);
-				if (STKindChecker.isMappingConstructor(innerExpr)) {
-					mappingConstruct = innerExpr;
-				} else if (STKindChecker.isListConstructor(innerExpr)
-					&& fieldIndexes !== undefined && !!fieldIndexes.length) {
-					mappingConstruct = getNextMappingConstructor(innerExpr);
-				}
-
-				if (i === fieldNames.length - 1) {
-					targetMappingConstruct = mappingConstruct;
-				}
-			} else {
-				fromFieldIdx = i;
-				targetMappingConstruct = mappingConstruct;
-				break;
-			}
-		}
-
-		if (fromFieldIdx >= 0 && fromFieldIdx <= fieldNames.length) {
-			const missingFields = fieldNames.slice(fromFieldIdx);
-			source = createSpecificField(missingFields);
-		} else {
-			const specificField = getSpecificField(targetMappingConstruct, lhs);
-			if (specificField && !specificField.valueExpr.source) {
-				return await createValueExprSource(lhs, rhs, [], 0, specificField.colon.position as NodePosition,
-					applyModifications);
-			}
-			source = `${lhs}: ${rhs}`;
-		}
-	} else {
-		const specificField = getSpecificField(targetMappingConstruct, lhs);
-		if (specificField && !specificField.valueExpr.source) {
-			return await createValueExprSource(lhs, rhs, [], 0, specificField.colon.position as NodePosition, applyModifications);
-		}
-		source = `${lhs}: ${rhs}`;
-	}
-
-	let targetPosition: NodePosition;
-	if (targetMappingConstruct) {
-		const fieldsAvailable = !!targetMappingConstruct.fields.length;
-		if (fieldsAvailable) {
-			const lastField = mappingConstruct.fields[mappingConstruct.fields.length - 1];
-			targetPosition = lastField.position as NodePosition;
-			source = STKindChecker.isSpecificField(lastField) && isEmptyValue(lastField.position)
-				? source
-				: `,${getLinebreak()}${source}`;
-		} else {
-			targetPosition = mappingConstruct.openBrace.position as NodePosition;
-			source = `${getLinebreak()}${source}`
-		}
-		targetPosition = {
-			...targetPosition,
-			startLine: targetPosition.endLine,
-			startColumn: targetPosition.endColumn
-		}
-	} else if (targetNode instanceof MappingConstructorNode) {
-		targetPosition = targetNode.innermostExpr.position as NodePosition;
-		source = `{${getLinebreak()}${source}}`;
-	}
-
-	modifications.push(getModification(source, targetPosition));
-	await applyModifications(modifications);
-
-	function createSpecificField(missingFields: string[]): string {
-		return missingFields.length > 0
-			? `\t${missingFields[0]}: {${getLinebreak()}${createSpecificField(missingFields.slice(1))}}`
-			: `\t${lhs}: ${rhs}`;
-	}
-
-	function getNextMappingConstructor(listConstructor: ListConstructor): MappingConstructor {
-		const targetExpr = listConstructor.expressions[fieldIndexes.pop() * 2];
-		const innerExpr = getInnermostExpressionBody(targetExpr);
-		if (STKindChecker.isMappingConstructor(innerExpr)) {
-			return innerExpr;
-		} else if (STKindChecker.isListConstructor(innerExpr)) {
-			return getNextMappingConstructor(innerExpr);
-		}
-	}
-
-	return `${lhs} = ${rhs}`;
-}
-
-export async function createSourceForUserInput(
-	field: EditableRecordField,
-	mappingConstruct: MappingConstructor,
-	newValue: string,
-	applyModifications: (modifications: STModification[]) => Promise<void>
-) {
-
-	let source;
-	let targetMappingConstructor: STNode = mappingConstruct;
-	const parentFields: string[] = [];
-	let nextField = field;
-	const modifications: STModification[] = [];
-
-	while (nextField && nextField.parentType) {
-		const fieldName = getFieldName(nextField);
-		const innerExpr = nextField.hasValue() && getInnermostExpressionBody(nextField.value);
-		if (fieldName && !(innerExpr && STKindChecker.isMappingConstructor(innerExpr))) {
-			parentFields.push(getBalRecFieldName(fieldName));
-		}
-
-		if (nextField.parentType.hasValue() && STKindChecker.isSpecificField(nextField.parentType.value)) {
-			const rootField: SpecificField = nextField.parentType.value;
-
-			if (!rootField.valueExpr.source) {
-				return await createValueExprSource(fieldName, newValue, parentFields.reverse(), 0,
-					rootField.colon.position as NodePosition, applyModifications);
-			}
-
-			const rootInnerExpr = getInnermostExpressionBody(rootField.valueExpr);
-			if (STKindChecker.isMappingConstructor(rootInnerExpr)) {
-				const specificField = getSpecificField(rootInnerExpr, fieldName);
-				if (specificField && !specificField.valueExpr.source) {
-					return await createValueExprSource(fieldName, newValue, parentFields, 1,
-						specificField.colon.position as NodePosition, applyModifications);
-				}
-				source = createSpecificField(parentFields.reverse());
-				targetMappingConstructor = rootInnerExpr;
-			} else if (STKindChecker.isListConstructor(rootInnerExpr)
-				&& STKindChecker.isMappingConstructor(rootInnerExpr.expressions[0])) {
-				for (const expr of rootInnerExpr.expressions) {
-					if (STKindChecker.isMappingConstructor(expr)
-						&& isPositionsEquals(expr.position as NodePosition, mappingConstruct.position as NodePosition)) {
-						const specificField = getSpecificField(expr, fieldName);
-						if (specificField && !specificField.valueExpr.source) {
-							return await createValueExprSource(fieldName, newValue, parentFields, 1,
-								specificField.colon.position as NodePosition, applyModifications);
-						}
-						source = createSpecificField(parentFields.reverse());
-						targetMappingConstructor = expr;
-					}
-				}
-			}
-			nextField = undefined;
-		} else {
-			nextField = nextField?.parentType;
-		}
-	}
-
-	if (!source) {
-		const specificField = STKindChecker.isMappingConstructor(targetMappingConstructor)
-			&& getSpecificField(targetMappingConstructor, getFieldName(field));
-		if (specificField && !specificField.valueExpr.source) {
-			return await createValueExprSource(field.originalType.name, newValue, parentFields, 1,
-				specificField.colon.position as NodePosition, applyModifications);
-		}
-		source = createSpecificField(parentFields.reverse());
-	}
-
-	let targetPosition: NodePosition;
-	if (STKindChecker.isMappingConstructor(targetMappingConstructor)) {
-		const fieldsAvailable = !!targetMappingConstructor.fields.length;
-		if (fieldsAvailable) {
-			targetPosition = targetMappingConstructor.fields[targetMappingConstructor.fields.length - 1].position as NodePosition;
-			source = `,${source}`;
-		} else {
-			const openBracePosition = targetMappingConstructor.openBrace.position as NodePosition;
-			const closeBracePosition = targetMappingConstructor.closeBrace.position as NodePosition;
-			targetPosition = openBracePosition;
-			if (openBracePosition.startLine === closeBracePosition.endLine) {
-				source = `${getLinebreak()}${source}`;
-			}
-		}
-		targetPosition = {
-			...targetPosition,
-			startLine: targetPosition.endLine,
-			startColumn: targetPosition.endColumn
-		}
-	} else {
-		targetPosition = targetMappingConstructor.position as NodePosition;
-		source = `{${getLinebreak()}${source}}`;
-	}
-
-	modifications.push(getModification(source, targetPosition));
-	await applyModifications(modifications);
-
-	function createSpecificField(missingFields: string[]): string {
-		return missingFields.length > 1
-			? `\t${missingFields[0]}: {${getLinebreak()}${createSpecificField(missingFields.slice(1))}}`
-			: `\t${missingFields[0]}: ${newValue}`;
-	}
-}
-
-export function modifySpecificFieldSource(
-	sourcePort: RecordFieldPortModel,
-	targetPort: RecordFieldPortModel,
-	newLinkId: string,
-	rhsValue?: string
-) {
-	let rhs = "";
-	const modifications: STModification[] = [];
-	if (sourcePort && sourcePort instanceof RecordFieldPortModel) {
-		rhs = rhsValue || sourcePort.fieldFQN;
-	}
-
-	const targetNode = targetPort.getNode();
-	if (targetNode instanceof LinkConnectorNode) {
-		targetNode.value = targetNode.value + " + " + rhs;
-		targetNode.updateSource();
-	}
-	else {
-		const targetPortHasLinks = Object.keys(targetPort.getLinks())
-			?.filter(linkId => linkId !== newLinkId)
-			.length > 0;
-
-		let targetPos: NodePosition;
-		let targetType: TypeField;
-
-		if (targetPortHasLinks) {
-			Object.keys(targetPort.getLinks()).forEach((linkId) => {
-				if (linkId !== newLinkId) {
-					const targerPortLink = targetPort.getLinks()[linkId]
-					if (sourcePort instanceof IntermediatePortModel) {
-						if (sourcePort.getParent() instanceof LinkConnectorNode) {
-							targetPos = (sourcePort.getParent() as LinkConnectorNode).valueNode.position as NodePosition
-						}
-					} else if (targerPortLink.getLabels().length > 0) {
-						targetPos = (targerPortLink.getLabels()[0] as ExpressionLabelModel).valueNode.position as NodePosition;
-						targetType = getTypeFromStore(targetPos);
-					} else if (targetNode instanceof MappingConstructorNode
-						|| targetNode instanceof PrimitiveTypeNode
-						|| targetNode instanceof ListConstructorNode)
-					{
-						const linkConnector = targetNode
-							.getModel()
-							.getNodes()
-							.find(
-								(node) =>
-									node instanceof LinkConnectorNode &&
-									node.targetPort.portName === (targerPortLink.getTargetPort() as RecordFieldPortModel).portName
-							);
-						targetPos = (linkConnector as LinkConnectorNode).valueNode.position as NodePosition;
-					}
-
-				}
-			});
-		} else {
-			targetPos = targetPort?.editableRecordField?.value?.position as NodePosition;
-			targetType = getTypeFromStore(targetPos);
-		}
-
-		if (targetType &&
-			targetType.typeName === PrimitiveBalType.Json &&
-			(sourcePort as RecordFieldPortModel).field.typeName === PrimitiveBalType.Json) {
-			modifications.push({
-				type: "INSERT",
-				config: {
-					"STATEMENT": `value:mergeJson(${(targetNode as UnionTypeNode).recordField.value.source}, ${(sourcePort as RecordFieldPortModel).fieldFQN})`,
-				},
-				...targetPos
-			})
-
-			// add imports
-			modifications.push({
-				type: "IMPORT",
-				config: {
-					"TYPE": JSON_MERGE_MODULE_NAME,
-				},
-				startLine: 0,
-				startColumn: 0,
-				endLine: 0,
-				endColumn: 0
-			});
-
-			const { context } = targetNode as DataMapperNodeModel;
-			void context.applyModifications(modifications);
-		} else if (targetPos) {
-			modifications.push({
-				type: "INSERT",
-				config: {
-					"STATEMENT": " + " + rhs,
-				},
-				endColumn: targetPos.endColumn,
-				endLine: targetPos.endLine,
-				startColumn: targetPos.endColumn,
-				startLine: targetPos.endLine
-			});
-		}
-		const { context } = targetNode as DataMapperNodeModel;
-		void context.applyModifications(modifications);
-	}
-
-}
-
-export async function updateExistingValue(sourcePort: PortModel, targetPort: PortModel, newValue?: string) {
-	const modifications = [];
-	let sourceField = newValue || sourcePort && sourcePort instanceof RecordFieldPortModel && sourcePort.fieldFQN;
-	modifications.push(getModificationForSpecificFieldValue(targetPort, sourceField));
-	replaceSpecificFieldValue(targetPort, modifications);
-}
-
-export async function mapUsingCustomFunction(
-	sourcePort: RecordFieldPortModel,
-	targetPort: RecordFieldPortModel,
-	linkId: string,
-	context: IDataMapperContext,
-	valueType: ValueType
-) {
-	const existingFunctions = context.moduleComponents.functions.map((fn) => fn.name);
-	const [functionName, functionSource] = generateCustomFunction(sourcePort, targetPort, existingFunctions);
-	const functionCallExpr = `${functionName}(${sourcePort.fieldFQN})`;
-
-	const modifications: STModification[] = [];
-
-	const customFnPosition: NodePosition = {
-		...context.functionST.position,
-		startLine: context.functionST.position.endLine,
-		startColumn: context.functionST.position.endColumn
-	}
-
-	modifications.push({
-		type: "INSERT",
-		config: {
-			"STATEMENT": functionSource,
-		},
-		...customFnPosition
-	});
-
-	await context.applyModifications(modifications);
-
-	if (valueType === ValueType.Replaceable) {
-		await updateExistingValue(sourcePort, targetPort, functionCallExpr);
-	} else if (valueType === ValueType.Mergeable) {
-		await modifySpecificFieldSource(sourcePort, targetPort, linkId, functionCallExpr);
-	} else {
-		await createSourceForMapping(sourcePort, targetPort, functionCallExpr);
-	}
-}
-
-export function replaceSpecificFieldValue(targetPort: PortModel, modifications: STModification[]) {
-	const targetNode = (targetPort as RecordFieldPortModel).getNode();
-	const { context } = targetNode as DataMapperNodeModel;
-	void context.applyModifications(modifications);
-}
-
-export function expandArrayFn(node: QueryExpressionNode) {
-	let isExprBodyQuery: boolean;
-	let isSelectClauseQuery: boolean;
-
-	const { parentNode, value, context, targetPort: { fieldFQN } } = node;
-	const { selection, changeSelection } = context;
-	const selectedST = selection.selectedST.stNode;
-
-
-	let exprFnBody: ExpressionFunctionBody;
-	if (STKindChecker.isFunctionDefinition(selectedST) && STKindChecker.isExpressionFunctionBody(selectedST.functionBody)) {
-        exprFnBody = selectedST.functionBody;
-    }
-
-	if (STKindChecker.isBracedExpression(parentNode)) {
-		// Handle scenarios where user tries to expand into
-		// braced indexed query expressions which are at the function body level
-		const specificFieldFindingVisitor = new QueryParentFindingVisitor(value.position);
-		traversNode(selectedST, specificFieldFindingVisitor);
-		const specificField = specificFieldFindingVisitor.getSpecificField();
-		if (specificField && STKindChecker.isFunctionDefinition(specificField)) {
-			isExprBodyQuery = true;
-		}
-	} else if (exprFnBody && isRepresentFnBody(parentNode, exprFnBody)) {
-		isExprBodyQuery = true;
-	} else if (STKindChecker.isSelectClause(parentNode)
-		|| (STKindChecker.isSpecificField(parentNode)
-			&& STKindChecker.isQueryExpression(parentNode.valueExpr)
-			&& !isPositionsEquals(value.position, parentNode.valueExpr.position))
-	) {
-		isSelectClauseQuery = true;
-	}
-	let selectClauseIndex: number;
-	if (isSelectClauseQuery) {
-		const queryExprFindingVisitor = new QueryExprFindingVisitorByPosition(value.position);
-		traversNode(selectedST, queryExprFindingVisitor);
-		selectClauseIndex = queryExprFindingVisitor.getSelectClauseIndex();
-	}
-
-	const hasIndexedQuery = hasIndexedQueryExpr(parentNode);
-	const hasCollectClause = hasCollectClauseExpr(value);
-	const mappingType = getQueryExprMappingType(hasIndexedQuery, hasCollectClause);
-	changeSelection(ViewOption.EXPAND,
-		{
-			...selection,
-			selectedST: {
-				stNode: isExprBodyQuery || isSelectClauseQuery ? selectedST : parentNode,
-				fieldPath: isExprBodyQuery ? FUNCTION_BODY_QUERY : isSelectClauseQuery ? SELECT_CALUSE_QUERY : fieldFQN,
-				position: value.position,
-				index: selectClauseIndex,
-				mappingType: mappingType,
-			}
-		})
-}
-
-export function getModificationForSpecificFieldValue(
-	targetPort: PortModel,
-	newSource: string
-): STModification {
-	if (targetPort instanceof RecordFieldPortModel) {
-		const editableRecordField = targetPort.editableRecordField;
-		let targetPosition: NodePosition;
-		if (editableRecordField?.value) {
-			let expr = editableRecordField.value;
-			if (STKindChecker.isSpecificField(expr)) {
-				expr = expr.valueExpr;
-			}
-			const innerExpr = getInnermostExpressionBody(expr);
-			targetPosition = innerExpr.position as NodePosition;
-		}
-		if (targetPosition) {
-			return {
-				type: "INSERT",
-				config: {
-					"STATEMENT": newSource,
-				},
-				...targetPosition
-			};
-		}
-	}
-}
-
-export function getModificationForFromClauseBindingPattern(
-	queryExprPosition: NodePosition,
-	bindingPatternSrc: string,
-	selectedSTNode: STNode
-): STModification {
-	const nodeFindingVisitor = new NodeFindingVisitorByPosition(queryExprPosition);
-	traversNode(selectedSTNode, nodeFindingVisitor);
-	const queryExpr = nodeFindingVisitor.getNode() as QueryExpression;
-
-	if (queryExpr) {
-		return {
-			type: "INSERT",
-			config: {
-				"STATEMENT": bindingPatternSrc,
-			},
-			...queryExpr.queryPipeline.fromClause.typedBindingPattern.bindingPattern.position
-		};
-	}
-}
-
-export function findNodeByValueNode(value: STNode,
-	                                   dmNode: DataMapperNodeModel
-): RequiredParamNode | FromClauseNode | LetClauseNode | JoinClauseNode | LetExpressionNode {
-	let foundNode: RequiredParamNode | FromClauseNode | LetClauseNode | JoinClauseNode | LetExpressionNode;
-	if (value) {
-		dmNode.getModel().getNodes().find((node) => {
-			if (((STKindChecker.isRequiredParam(value) && node instanceof RequiredParamNode
-				&& node?.value && STKindChecker.isRequiredParam(node.value))
-				|| (STKindChecker.isFromClause(value) && node instanceof FromClauseNode
-					&& STKindChecker.isFromClause(node.value))
-				|| (STKindChecker.isLetClause(value) && node instanceof LetClauseNode
-					&& STKindChecker.isLetClause(node.value))
-				|| (STKindChecker.isJoinClause(value) && node instanceof JoinClauseNode
-					&& STKindChecker.isJoinClause(node.value))
-				|| (STKindChecker.isExpressionFunctionBody(value) && node instanceof LetExpressionNode
-					&& STKindChecker.isExpressionFunctionBody(node.value)))
-				&& isPositionsEquals(value.position as NodePosition, node.value.position as NodePosition)) {
-				foundNode = node;
-			}
-		});
-	}
-	return foundNode;
-}
-
-export function getInputNodeExpr(expr: STNode, dmNode: DataMapperNodeModel) {
-	const dmNodes = dmNode.getModel().getNodes();
-	let paramType: LetClauseNode | LetExpressionNode | RequiredParamNode | FromClauseNode | ModuleVariableNode | EnumTypeNode;
-	let paramNode: RequiredParam | FromClause | LetClause | JoinClause | ExpressionFunctionBody | Map<string, ModuleVariable>;
-	if (STKindChecker.isSimpleNameReference(expr)) {
-		paramType = (dmNodes.find((node) => {
-			if (node instanceof LetClauseNode) {
-				const letVarDecl = node.value.letVarDeclarations[0] as LetVarDecl;
-				const bindingPattern = letVarDecl?.typedBindingPattern?.bindingPattern as CaptureBindingPattern;
-				return bindingPattern?.variableName?.value === expr.source.trim();
-			} else if (node instanceof LetExpressionNode) {
-				return node.letVarDecls.some(decl => decl.varName === expr.source.trim());
-			} else if (node instanceof ModuleVariableNode || node instanceof EnumTypeNode) {
-				return node.value.has(expr.source.trim());
-			} else if (node instanceof JoinClauseNode) {
-				const bindingPattern = (node.value as JoinClause)?.typedBindingPattern?.bindingPattern as CaptureBindingPattern
-				return bindingPattern?.source?.trim() === expr.source?.trim()
-			} else if (node instanceof RequiredParamNode) {
-				return node?.value && expr.name.value === node.value.paramName.value;
-			} else if (node instanceof FromClauseNode) {
-				const bindingPattern = node.value.typedBindingPattern.bindingPattern;
-				return isAvailableWithinBindingPattern(bindingPattern, expr.name.value );
-			}
-		}) as LetClauseNode | LetExpressionNode | RequiredParamNode | FromClauseNode | ModuleVariableNode | EnumTypeNode);
-		paramNode = paramType?.value;
-	} else if (STKindChecker.isFieldAccess(expr) || STKindChecker.isOptionalFieldAccess(expr)) {
-		const valueExpr = getInnerExpr(expr);
-		
-		if (valueExpr && STKindChecker.isSimpleNameReference(valueExpr)) {
-			const { selectedST } = dmNode.context.selection;
-			const { stNode: selectedSTNode, fieldPath, position } = selectedST;
-			const isSpecificFieldValueQueryExpr = STKindChecker.isSpecificField(selectedSTNode)
-				&& STKindChecker.isQueryExpression(selectedSTNode.valueExpr);
-			const isSelectClauseExprQueryExpr = isSelectClauseQueryExpr(fieldPath);
-			paramNode = dmNode.context.functionST.functionSignature.parameters.find((param) =>
-					!isSpecificFieldValueQueryExpr
-					&& !isSelectClauseExprQueryExpr
-					&& STKindChecker.isRequiredParam(param)
-					&& param.paramName?.value === (valueExpr as SimpleNameReference).name.value
-				) as RequiredParam;
-
-			if (!paramNode) {
-				// Check if value expression source matches with any of the let clause, let expr or module variable names
-				paramNode = (dmNodes.find((node) => {
-					if (node instanceof LetClauseNode) {
-						const letVarDecl = node.value.letVarDeclarations[0] as LetVarDecl;
-						const bindingPattern = letVarDecl?.typedBindingPattern?.bindingPattern as CaptureBindingPattern;
-						return bindingPattern?.variableName?.value === valueExpr.source;
-					} else if (node instanceof LetExpressionNode) {
-						return node.letVarDecls.some(decl => {
-							if (decl.type.typeName === PrimitiveBalType.Record) {
-								return decl.varName === expr.source.trim().split(".")[0]
-							}
-							return decl.varName === expr.source.trim()
-						});
-					} else if (node instanceof ModuleVariableNode) {
-						return node.moduleVarDecls.some(decl => {
-							if (decl.type.typeName === PrimitiveBalType.Record) {
-								return decl.varName === expr.source.trim().split(".")[0]
-							}
-							return decl.varName === expr.source.trim()
-						});
-					} else if (node instanceof JoinClauseNode) {
-						const bindingPattern = (node.value as JoinClause)?.typedBindingPattern?.bindingPattern as CaptureBindingPattern
-						return bindingPattern?.source?.trim() === valueExpr.source
-					} else if (node instanceof EnumTypeNode) {
-						return node.enumTypeDecls.some(decl => {
-							return decl.varName === expr.source.trim()
-						});
-					}
-				}) as LetClauseNode | JoinClauseNode | LetExpressionNode | ModuleVariableNode | EnumTypeNode)?.value;
-			}
-
-			if (!paramNode) {
-				if (isSpecificFieldValueQueryExpr && !isSelectClauseExprQueryExpr) {
-					paramNode = (selectedSTNode.valueExpr as QueryExpression).queryPipeline.fromClause;
-				} else if (isSelectClauseExprQueryExpr) {
-					const queryExprFindingVisitor = new QueryExprFindingVisitorByPosition(position);
-					traversNode(selectedSTNode, queryExprFindingVisitor);
-					const queryExpr = queryExprFindingVisitor.getQueryExpression();
-					paramNode = queryExpr ? queryExpr.queryPipeline.fromClause : paramNode;
-				} else if (STKindChecker.isSpecificField(selectedSTNode)
-					&& STKindChecker.isBracedExpression(selectedSTNode.valueExpr)
-					&& STKindChecker.isQueryExpression(selectedSTNode.valueExpr.expression)) {
-					paramNode = selectedSTNode.valueExpr.expression.queryPipeline.fromClause;
-				} else if (STKindChecker.isSpecificField(selectedSTNode)
-					&& STKindChecker.isIndexedExpression(selectedSTNode.valueExpr)
-					&& STKindChecker.isBracedExpression(selectedSTNode.valueExpr.containerExpression)
-					&& STKindChecker.isQueryExpression(selectedSTNode.valueExpr.containerExpression.expression)) {
-					paramNode = selectedSTNode.valueExpr.containerExpression.expression.queryPipeline.fromClause;
-				} else if (STKindChecker.isFunctionDefinition(selectedSTNode)
-					&& STKindChecker.isExpressionFunctionBody(selectedSTNode.functionBody)
-					&& STKindChecker.isIndexedExpression(selectedSTNode.functionBody.expression)
-					&& STKindChecker.isBracedExpression(selectedSTNode.functionBody.expression.containerExpression)
-					&& STKindChecker.isQueryExpression(selectedSTNode.functionBody.expression.containerExpression.expression)) {
-					paramNode = selectedSTNode.functionBody.expression.containerExpression.expression.queryPipeline.fromClause;
-				} else if (STKindChecker.isLetVarDecl(selectedSTNode) && STKindChecker.isQueryExpression(selectedSTNode.expression)) {
-					paramNode = selectedSTNode.expression.queryPipeline.fromClause;
-				} else if (STKindChecker.isFunctionDefinition(selectedSTNode)
-					&& STKindChecker.isExpressionFunctionBody(selectedSTNode.functionBody)) {
-					const bodyExpr = STKindChecker.isLetExpression(selectedSTNode.functionBody.expression)
-						? getExprBodyFromLetExpression(selectedSTNode.functionBody.expression)
-						: selectedSTNode.functionBody.expression;
-					if (STKindChecker.isQueryExpression(bodyExpr)) {
-						paramNode = bodyExpr.queryPipeline.fromClause;
-					}
-				}
-			}
-		}
-	}
-	if (paramNode) {
-		if (paramNode instanceof Map) {
-			if (paramType instanceof ModuleVariableNode) {
-				return dmNodes.find(node => node instanceof ModuleVariableNode) as ModuleVariableNode;
-			} else if (paramType instanceof EnumTypeNode) {
-				return dmNodes.find(node => node instanceof EnumTypeNode) as EnumTypeNode;
-			}
-		} else {
-			return findNodeByValueNode(paramNode, dmNode);
-		}
-	}
-}
-
-export function getInputPortsForExpr(node: InputNode, expr: STNode ): RecordFieldPortModel {
-	let typeDesc = !isNodeWithoutTypeDesc(node) && node.typeDef;
-	let portIdBuffer;
-	if (node instanceof RequiredParamNode) {
-		portIdBuffer = node?.value && node.value.paramName.value
-	} else if (node instanceof LetExpressionNode) {
-		const varDecl = node.letVarDecls.find(decl => {
-			if (decl.type.typeName === PrimitiveBalType.Record) {
-				return decl.varName === expr.source.trim().split(".")[0];
-			}
-			return decl.varName === expr.source.trim()
-		});
-		typeDesc = varDecl.type;
-		portIdBuffer = varDecl && LET_EXPRESSION_SOURCE_PORT_PREFIX + "." + varDecl.varName;
-	} else if (node instanceof ModuleVariableNode) {
-		const moduleVar = node.moduleVarDecls.find(decl => {
-			if (decl.type.typeName === PrimitiveBalType.Record) {
-				return decl.varName === expr.source.trim().split(".")[0];
-			}
-			return decl.varName === expr.source.trim();
-		});
-		typeDesc = moduleVar?.type;
-		portIdBuffer = moduleVar && MODULE_VARIABLE_SOURCE_PORT_PREFIX + "." + moduleVar.varName;
-	} else if (node instanceof EnumTypeNode) {
-		for (const enumType of node.enumTypeDecls) {
-			for (const field of enumType.fields) {
-				if (field.varName === expr.source.trim()) {
-					typeDesc = field.type;
-					portIdBuffer = `${ENUM_TYPE_SOURCE_PORT_PREFIX}.${enumType.varName}.${field.varName}`;
-					break;
-				}
-			}
-		}
-	} else if (node instanceof FromClauseNode
-		&& (STKindChecker.isMappingBindingPattern(node.sourceBindingPattern)
-			|| STKindChecker.isListBindingPattern(node.sourceBindingPattern))
-	) {
-		const fieldPath = getRelativePathOfField(node.value.typedBindingPattern.bindingPattern, expr.source.trim());
-		portIdBuffer = EXPANDED_QUERY_SOURCE_PORT_PREFIX + "." + node.nodeLabel + fieldPath;
-		return (node.getPort(portIdBuffer + ".OUT") as RecordFieldPortModel);
-	} else {
-		portIdBuffer = EXPANDED_QUERY_SOURCE_PORT_PREFIX + "." + (node as FromClauseNode).nodeLabel;
-	}
-
-	if (typeDesc && (typeDesc.typeName === PrimitiveBalType.Record ||
-		typeDesc.typeName === PrimitiveBalType.Union)
-	) {
-		if (STKindChecker.isFieldAccess(expr) || STKindChecker.isOptionalFieldAccess(expr)) {
-			const fieldNames = getFieldNames(expr);
-			let nextTypeNode: TypeField = typeDesc;
-			for (let i = 1; i < fieldNames.length; i++) {
-				const fieldName = fieldNames[i];
-				portIdBuffer += `.${fieldName.name}`;
-				let recField: TypeField;
-				const optionalRecordField = getOptionalRecordField(nextTypeNode);
-				if (optionalRecordField) {
-					recField = optionalRecordField?.fields.find((field: TypeField) => getBalRecFieldName(field.name) === fieldName.name);
-				} else if (nextTypeNode.typeName === PrimitiveBalType.Record) {
-					recField = nextTypeNode.fields.find(
-						(field: TypeField) => getBalRecFieldName(field.name) === fieldName.name);
-				}
-
-				if (recField) {
-					if (i === fieldNames.length - 1) {
-						const portId = portIdBuffer.trim() + ".OUT";
-						let port = (node.getPort(portId) as RecordFieldPortModel);
-						while (port && port.hidden) {
-							port = port.parentModel;
-						}
-						return port;
-					} else if ([PrimitiveBalType.Record, PrimitiveBalType.Union].includes(recField.typeName as PrimitiveBalType)) {
-						nextTypeNode = recField;
-					}
-				}
-			}
-		} else if (STKindChecker.isSimpleNameReference(expr)){
-			return (node.getPort(portIdBuffer + ".OUT") as RecordFieldPortModel);
-		}
-	} else if (STKindChecker.isSimpleNameReference(expr)) {
-		const portId = portIdBuffer + ".OUT";
-		let port = (node.getPort(portId) as RecordFieldPortModel);
-		while (port && port.hidden) {
-			port = port.parentModel;
-		}
-		return port;
-	}
-	return null;
-}
-
-export function getOutputPortForField(fields: STNode[],
-                                      editableRecordField: EditableRecordField,
-                                      portPrefix: string,
-                                      getPort: (portId: string) => RecordFieldPortModel,
-                                      listConstructorRootName?: string): [RecordFieldPortModel, RecordFieldPortModel] {
-	let portIdBuffer = `${portPrefix}${listConstructorRootName ? `.${getBalRecFieldName(listConstructorRootName)}` : ''}`;
-	let nextTypeNode: EditableRecordField = editableRecordField;
-
-	for (let i = 0; i < fields.length; i++) {
-		const field = fields[i];
-		const next = i + 1 < fields.length && fields[i + 1];
-		const nextPosition: NodePosition = next ? next.position : field.position;
-		if (STKindChecker.isSpecificField(field) && STKindChecker.isSpecificField(nextTypeNode.value)) {
-			const isLastField = i === fields.length - 1;
-			const innerExprOfNextTypeNode = getInnermostExpressionBody(nextTypeNode.value.valueExpr);
-			const innerExprOfFieldValue = getInnermostExpressionBody(field?.valueExpr);
-			const targetPosition: NodePosition = isLastField
-				? nextTypeNode.value.position
-				: field?.valueExpr && innerExprOfNextTypeNode.position;
-			if (isPositionsEquals(targetPosition, nextPosition)
-				&& field.valueExpr
-				&& !STKindChecker.isMappingConstructor(innerExprOfFieldValue))
-			{
-				portIdBuffer = `${portIdBuffer}.${getBalRecFieldName(field.fieldName.value)}`;
-			}
-		} else if (STKindChecker.isListConstructor(field) && nextTypeNode.elements) {
-			const [nextField, fieldIndex] = getNextField(nextTypeNode.elements, nextPosition);
-			if (nextField && fieldIndex !== -1) {
-				portIdBuffer = `${portIdBuffer}.${fieldIndex}`;
-				nextTypeNode = nextField;
-			}
-		} else {
-			if (nextTypeNode.childrenTypes) {
-				const fieldIndex = nextTypeNode.childrenTypes.findIndex(recF => {
-					const innerExpr = recF?.value && getInnermostExpressionBody(recF.value);
-					return innerExpr && isPositionsEquals(nextPosition, innerExpr.position as NodePosition);
-				});
-				if (fieldIndex !== -1) {
-					portIdBuffer = `${portIdBuffer}${nextTypeNode.originalType?.name ? `.${getBalRecFieldName(nextTypeNode.originalType.name)}` : ''}`;
-					nextTypeNode = nextTypeNode.childrenTypes[fieldIndex];
-				} else if (isPositionsEquals(nextPosition, nextTypeNode?.value.position)) {
-					portIdBuffer = `${portIdBuffer}${nextTypeNode.originalType?.name ? `.${getBalRecFieldName(nextTypeNode.originalType.name)}` : ''}`;
-				}
-			} else if (nextTypeNode.elements) {
-				const [nextField, fieldIndex] = getNextField(nextTypeNode.elements, nextPosition);
-				if (nextField && fieldIndex !== -1) {
-					portIdBuffer = `${portIdBuffer}.${getBalRecFieldName(nextField.originalType?.name) || ''}`;
-				}
-			}
-		}
-	}
-
-	const outputSearchValue = useDMSearchStore.getState().outputSearch;
-	const memberAccessRegex = /(.+\.\d+(?:\.[a-zA-Z]+)*)/;
-	const isMemberAccessPattern = memberAccessRegex.test(portIdBuffer);
-	const lastPortIdSegment = portIdBuffer.split('.').slice(-1)[0];
-	if (outputSearchValue !== ''
-		&& !isMemberAccessPattern
-		&& !lastPortIdSegment.toLowerCase().includes(outputSearchValue.toLowerCase()))
-	{
-		return [undefined, undefined];
-	}
-	const portId = `${portIdBuffer}.IN`;
-	const port = getPort(portId);
-	let mappedPort = port;
-	while (mappedPort && mappedPort.hidden) {
-		mappedPort = mappedPort.parentModel;
-	}
-	return [port, mappedPort];
-}
-
-export function getLinebreak(){
-	if (navigator.userAgent.indexOf("Windows") !== -1){
-		return "\r\n";
-	}
-	return "\n";
-}
-
-function getNextField(nextTypeMemberNodes: ArrayElement[],
-                      nextFieldPosition: NodePosition): [EditableRecordField, number] {
-	const fieldIndex = nextTypeMemberNodes.findIndex((node) => {
-		const innerExpr = node.member?.value && getInnermostExpressionBody(node.member.value);
-		return innerExpr && isPositionsEquals(nextFieldPosition, innerExpr.position as NodePosition);
-	});
-	if (fieldIndex !== -1) {
-		return [nextTypeMemberNodes[fieldIndex].member, fieldIndex];
-	}
-	return [undefined, undefined];
-}
-
-export function getBalRecFieldName(fieldName: string) {
-	if (fieldName) {
-		return keywords.includes(fieldName) ? `'${fieldName}` : fieldName;
-	}
-	return "";
-}
-
-export function getFieldIndexes(targetPort: RecordFieldPortModel): number[] {
-	const fieldIndexes = [];
-	if (targetPort?.index !== undefined) {
-		fieldIndexes.push(targetPort.index);
-	}
-	const parentPort = targetPort?.parentModel;
-	if (parentPort) {
-		fieldIndexes.push(...getFieldIndexes(parentPort));
-	}
-	return fieldIndexes;
-}
-
-export function isConnectedViaLink(field: STNode) {
-	const inputNodes = getInputNodes(field);
-
-	const isMappingConstruct = STKindChecker.isMappingConstructor(field);
-	const isListConstruct = STKindChecker.isListConstructor(field);
-	const isQueryExpression = STKindChecker.isQueryExpression(field);
-	const isSimpleNameRef = STKindChecker.isSimpleNameReference(field);
-
-	return (!!inputNodes.length || isQueryExpression || isSimpleNameRef)
-		&& !isMappingConstruct && !isListConstruct;
-}
-
-export function getTypeName(field: TypeField): string {
-	if (!field) {
-		return '';
-	}
-	let typeName = '';
-	const importStatements = useDMStore.getState().imports;
-	if (field.typeName === PrimitiveBalType.Record) {
-		typeName = 'record';
-		if (field?.typeInfo) {
-			const { orgName, moduleName, name } = field.typeInfo;
-			typeName = name;
-			const importStatement = importStatements.find(item => item.includes(`${orgName}/${moduleName}`));
-			if (importStatement) {
-				// If record is from an imported package
-				const importAlias = extractImportAlias(moduleName, importStatement);
-				typeName = `${importAlias || moduleName}:${name}`;
-			}
-		}
-	} else if (field.typeName === PrimitiveBalType.Array && field?.memberType) {
-		typeName = getTypeName(field.memberType);
-		typeName = field.memberType.typeName === PrimitiveBalType.Union ? `(${typeName})[]` : `${typeName}[]`;
-	} else if (field.typeName === PrimitiveBalType.Union) {
-		typeName = field.members?.map(item => getTypeName(item)).join('|');
-	} else if (field?.typeInfo) {
-		typeName = field.typeInfo.name;
-	} else {
-		typeName = field.typeName;
-	}
-
-	return getShortenedTypeName(typeName);
-}
-
-export function normalizeTypeName(typeName: string) {
-    // Handle union types first
-    if (typeName.includes('|')) {
-        const types = typeName.split('|').map(t => t.trim());
-        const transformedTypes = types.map(type => {
-            const arrayDim = (type.match(/\[]/g) || []).length;
-            const baseName = type.replace(/\[]/g, '');
-            return arrayDim > 0 ? `${baseName}${arrayDim}DArray` : baseName;
-        });
-        return transformedTypes.join('Or');
-    }
-
-    let baseName = typeName.replace(/\[]/g, '');
-
-	// Handle imported types
-	if (baseName.includes(':')) {
-		const [moduleName, type] = baseName.split(':');
-		baseName = `${moduleName}_${type}`;
-	}
-
-    // Handle array types
-    const arrayDim = (typeName.match(/\[]/g) || []).length;
-
-    if (arrayDim === 0) {
-        return baseName;
-    }
-    
-    return arrayDim === 1 ? `${baseName}Array` : `${baseName}${arrayDim}DArray`;
-}
-
-export function getDefaultValue(typeName: string): string {
-	let draftParameter = "";
-	switch (typeName) {
-		case PrimitiveBalType.String:
-			draftParameter = `""`;
-			break;
-		case PrimitiveBalType.Int:
-		case PrimitiveBalType.Float:
-		case PrimitiveBalType.Decimal:
-			draftParameter = `0`;
-			break;
-		case PrimitiveBalType.Boolean:
-			draftParameter = `true`;
-			break;
-		case PrimitiveBalType.Array:
-			draftParameter = `[]`;
-			break;
-		case PrimitiveBalType.Xml:
-			draftParameter = "xml ``";
-			break;
-		case PrimitiveBalType.Nil:
-		case "anydata":
-		case "any":
-		case "()":
-			draftParameter = `()`;
-			break;
-		case PrimitiveBalType.Record:
-		case PrimitiveBalType.Json:
-		case "map":
-			draftParameter = `{}`;
-			break;
-		case PrimitiveBalType.Enum:
-		case PrimitiveBalType.Union:
-			draftParameter = `()`;
-			break;
-		default:
-			draftParameter = `""`;
-			break;
-	}
-	return draftParameter;
-}
-
-export function isMergeable(typeName: string): boolean {
-	return MERGEABLE_TYPES.has(typeName);
-}
-
-export function isArrayOrRecord(field: TypeField) {
-	return field.typeName === PrimitiveBalType.Array || field.typeName === PrimitiveBalType.Record;
-}
-
-export function getInputNodes(node: STNode) {
-	const inputNodeFindingVisitor: InputNodeFindingVisitor = new InputNodeFindingVisitor();
-	traversNode(node, inputNodeFindingVisitor);
-	return inputNodeFindingVisitor.getFieldAccessNodes();
-}
-
-export function getModuleVariables(node: STNode, moduleVariables: any) {
-	const moduleVarFindingVisitor: ModuleVariablesFindingVisitor = new ModuleVariablesFindingVisitor(moduleVariables);
-	traversNode(node, moduleVarFindingVisitor);
-	return moduleVarFindingVisitor.getModuleVariables();
-}
-
-export function getEnumTypes(node: STNode, moduleVariables: any) {
-	const enumTypeFindingVisitor: ModuleVariablesFindingVisitor = new ModuleVariablesFindingVisitor(moduleVariables);
-	traversNode(node, enumTypeFindingVisitor);
-	return enumTypeFindingVisitor.getEnumTypes();
-}
-
-export function getFieldName(field: EditableRecordField) {
-	return field.originalType?.name ? getBalRecFieldName(field.originalType.name) : '';
-}
-
-export function getFieldLabel(fieldId: string) {
-	const parts = fieldId.split('.').slice(1);
-	let fieldLabel = '';
-	for (const [i, part] of parts.entries()) {
-		if (isNaN(+part)) {
-			fieldLabel += i === 0 ? part : `.${part}`;
-		} else {
-			fieldLabel += `[${part}]`;
-		}
-	}
-	return fieldLabel;
-}
-
-export function getTypeOfValue(editableRecField: EditableRecordField, targetPosition: NodePosition): TypeField {
-	if (editableRecField.hasValue()) {
-		if (isPositionsEquals(editableRecField.value.position, targetPosition)) {
-			return editableRecField.type;
-		} else if (editableRecField.elements) {
-			for (const element of editableRecField.elements) {
-				const type = getTypeOfValue(element.member, targetPosition);
-				if (type) {
-					return type;
-				}
-			}
-		} else if (editableRecField.childrenTypes) {
-			for (const child of editableRecField.childrenTypes) {
-				const type = getTypeOfValue(child, targetPosition);
-				if (type) {
-					return type;
-				}
-			}
-		}
-	}
-	return undefined;
-}
-
-export function getTypeOfInputParam(param: RequiredParam, balVersion: string): TypeField {
-	const paramPosition = isArraysSupported(balVersion) && param?.paramName
-		? param.paramName.position
-		: STKindChecker.isQualifiedNameReference(param.typeName)
-			? param.typeName.identifier.position
-			: param.typeName.position;
-	return getTypeFromStore({
-		startLine: paramPosition.startLine,
-		startColumn: paramPosition.startColumn,
-		endLine: paramPosition.startLine,
-		endColumn: paramPosition.startColumn
-	});
-}
-
-export function getTypeOfOutput(typeIdentifier: TypeDescriptor | IdentifierToken, balVersion: string): TypeField {
-	let typeIdentifierPosition = typeIdentifier.position;
-	if (!isArraysSupported(balVersion) && STKindChecker.isQualifiedNameReference(typeIdentifier)) {
-		typeIdentifierPosition = typeIdentifier.identifier.position;
-	}
-	return getTypeFromStore({
-		startLine: typeIdentifierPosition.startLine,
-		startColumn: typeIdentifierPosition.startColumn,
-		endLine: typeIdentifierPosition.startLine,
-		endColumn: typeIdentifierPosition.startColumn
-	});
-}
-
-export function getTypeOfSelectClause(selectClause: SelectClause): TypeField {
-	let typeIdentifierPosition = selectClause.expression.position;
-	return getTypeFromStore(typeIdentifierPosition);
-}
-
-export function getSubArrayType(arrayType: TypeField, index: number): TypeField {
-    if (index <= 0) {
-        return arrayType;
-    }
-
-	if (arrayType.memberType) {
-		return getSubArrayType(arrayType.memberType, index - 1);
-	}
-	return undefined;
-}
-    
-
-export function getTypeFromStore(position: NodePosition): TypeField {
-	const recordTypeDescriptors = TypeDescriptorStore.getInstance();
-	return recordTypeDescriptors.getTypeDescriptor(position);
-}
-
-export function findTypeByNameFromStore(typeName: string): TypeField {
-	const recordTypeDescriptors = TypeDescriptorStore.getInstance();
-	for (const type of recordTypeDescriptors.typeDescriptors.values()) {
-		if (type?.name && type.name === typeName) {
-			return type;
-		}
-	}
-	return undefined;
-}
-
-export function findTypeByInfoFromStore(typeInfo: NonPrimitiveBal): TypeField {
-	const recordTypeDescriptors = TypeDescriptorStore.getInstance();
-
-	for (const type of recordTypeDescriptors.typeDescriptors.values()) {
-		if (!type) {
-			return undefined;
-		}
-		const matchingType = getMatchingType(type, typeInfo);
-		if (matchingType) {
-			return matchingType;
-		}
-	}
-
-	return undefined;
-}
-
-export function getFnDefFromStore(position: LinePosition): FnDefInfo {
-	const functionDefinitionStore = FunctionDefinitionStore.getInstance();
-	return functionDefinitionStore.getFnDefinitions(position);
-}
-
-export function isEmptyValue(position: NodePosition): boolean {
-	return (position.startLine === position.endLine && position.startColumn === position.endColumn);
-}
-
-export function getExprBodyFromLetExpression(letExpr: LetExpression): STNode {
-	if (STKindChecker.isLetExpression(letExpr.expression)) {
-		return getExprBodyFromLetExpression(letExpr.expression);
-	}
-	return letExpr.expression;
-}
-
-export function getExprBodyFromTypeCastExpression(typeCastExpression: TypeCastExpression): STNode {
-	if (STKindChecker.isTypeCastExpression(typeCastExpression.expression)) {
-		return getExprBodyFromTypeCastExpression(typeCastExpression.expression);
-	}
-	return typeCastExpression.expression;
-}
-
-export function getPrevOutputType(prevSTNodes: DMNode[], ballerinaVersion: string): TypeField {
-	if (prevSTNodes.length === 0) {
-		return undefined;
-	}
-	const prevST = prevSTNodes[prevSTNodes.length - 1].stNode;
-	const prevOutput = STKindChecker.isSpecificField(prevST)
-		? prevST.fieldName as IdentifierToken
-		: STKindChecker.isFunctionDefinition(prevST)
-			? prevST.functionSignature.returnTypeDesc.type
-			: undefined;
-	const prevOutputType = prevOutput && getTypeOfOutput(prevOutput, ballerinaVersion);
-	if (!prevOutputType) {
-		return getPrevOutputType(prevSTNodes.slice(0, -1), ballerinaVersion)
-	}
-	return prevOutputType;
-}
-
-export function hasIONodesPresent(nodes: DataMapperNodeModel[]) {
-	return nodes.filter(node => !(
-		node instanceof LetExpressionNode
-		|| node instanceof QueryExpressionNode
-		|| node instanceof LinkConnectorNode
-		|| node instanceof JoinClauseNode
-		|| node instanceof ExpandedMappingHeaderNode
-		|| node instanceof LetClauseNode
-		|| node instanceof ModuleVariableNode
-		|| node instanceof EnumTypeNode)
-	).length >= 2;
-}
-
-export function hasNoMatchFound(originalTypeDef: TypeField, valueEnrichedType: EditableRecordField): boolean {
-	const searchValue = useDMSearchStore.getState().outputSearch;
-	const filteredTypeDef = valueEnrichedType.type;
-	if (!searchValue) {
-		return false;
-	} else if (originalTypeDef.typeName === PrimitiveBalType.Record && filteredTypeDef.typeName === PrimitiveBalType.Record) {
-		return valueEnrichedType?.childrenTypes.length === 0;
-	} else if (originalTypeDef.typeName === PrimitiveBalType.Array && filteredTypeDef.typeName === PrimitiveBalType.Array) {
-		return hasNoMatchFoundInArray(valueEnrichedType?.elements, searchValue);
-	} else if (originalTypeDef.typeName === PrimitiveBalType.Union) {
-		if (filteredTypeDef.typeName === PrimitiveBalType.Record) {
-			return valueEnrichedType?.childrenTypes.length === 0;
-		} else if (filteredTypeDef.typeName === PrimitiveBalType.Array) {
-			return hasNoMatchFoundInArray(valueEnrichedType?.elements, searchValue);
-		}
-	}
-	return false;
-}
-
-export function getMethodCallElements(methodCall: MethodCall): string[] {
-	const { expression } = methodCall;
-	const elements: string[] = [];
-
-	if (STKindChecker.isFieldAccess(expression) || STKindChecker.isOptionalFieldAccess(expression)) {
-		const fieldNames = getFieldNames(expression).map(item => item.name);
-		elements.push(...fieldNames);
-	} else if (STKindChecker.isSimpleNameReference(expression)) {
-		elements.push(expression.name.value)
-	} else if (STKindChecker.isMethodCall(expression)) {
-		elements.push(...getMethodCallElements(expression));
-	}
-
-	return elements;
-}
-
-export function isDefaultValue(field: TypeField, value: string): boolean {
-	if (value === '()'){
-		return true;
-	}
-	
-	// For numeric types, compare the parsed values instead of string comparison
-	if (field?.typeName === PrimitiveBalType.Int || 
-		field?.typeName === PrimitiveBalType.Float || 
-		field?.typeName === PrimitiveBalType.Decimal) {
-		
-		// Clean the value by removing suffixes like 'f' for floats and 'd' for decimals
-		const cleanValue = value?.trim().replace(/[fd]$/i, '');
-		const numericValue = parseFloat(cleanValue);
-		
-		// Check if it's a valid number and equals 0
-		return !isNaN(numericValue) && numericValue === 0;
-	}
-	
-	const defaultValue = getDefaultValue(field?.typeName);
-	return defaultValue === value?.trim();
-}
-
-export function getShortenedTypeName(typeName: string): string {
-	return typeName && typeName.slice(typeName.lastIndexOf('.') + 1);
-}
-
-export function extractImportAlias(moduleName: string, importStatement: string): string {
-	const regex = new RegExp(`${moduleName}\\s+as\\s+(\\w+)`);
-	const matches = importStatement.match(regex);
-	return matches ? matches[1] : null;
-}
-
-export function getFromClauseNodeLabel(bindingPattern: STNode, valueExpr: STNode): string {
-	const defaultLabel = "Input";
-	if (STKindChecker.isCaptureBindingPattern(bindingPattern)) {
-		return bindingPattern.variableName.value;
-	} else if (STKindChecker.isMappingBindingPattern(bindingPattern)) {
-		if (STKindChecker.isSimpleNameReference(valueExpr)) {
-			return `${valueExpr.name.value}Item`;
-		} else if (STKindChecker.isFieldAccess(valueExpr) || STKindChecker.isOptionalFieldAccess(valueExpr)) {
-			const expr = getInnerExpr(valueExpr);
-			return `${expr}.source`;
-		}
-	}
-	
-	return defaultLabel;
-}
-
-export function isAvailableWithinBindingPattern(bindingPattern: STNode, targetIdentifier: string): boolean {
-	if (STKindChecker.isErrorBindingPattern(bindingPattern) || STKindChecker.isWildcardBindingPattern(bindingPattern)) {
-		return false;
-	}
-
-	if (STKindChecker.isCaptureBindingPattern(bindingPattern)) {
-		return bindingPattern.variableName.value === targetIdentifier; 
-	} else if (STKindChecker.isMappingBindingPattern(bindingPattern)) {
-		return bindingPattern.fieldBindingPatterns.some((fieldBindingPattern) => {
-			// RestBindingPattern is not supported by the Data Mapper
-			if (STKindChecker.isFieldBindingPattern(fieldBindingPattern)) {
-				if (fieldBindingPattern?.bindingPattern) {
-					return isAvailableWithinBindingPattern(fieldBindingPattern.bindingPattern, targetIdentifier);
-				} else {
-					return fieldBindingPattern.variableName.source === targetIdentifier;
-				}
-			}
-		});
-	} else if (STKindChecker.isListBindingPattern(bindingPattern)) {
-		return bindingPattern.bindingPatterns.some((bindingPattern) => {
-			return isAvailableWithinBindingPattern(bindingPattern, targetIdentifier);
-		});
-	}
-
-	return false;
-}
-
-export function getRelativePathOfField(bindingPattern: STNode, targetIdentifier: string, path?: string): string {
-	if (STKindChecker.isErrorBindingPattern(bindingPattern) || STKindChecker.isWildcardBindingPattern(bindingPattern)) {
-		return undefined;
-	}
-
-	if (STKindChecker.isCaptureBindingPattern(bindingPattern)) {
-		if (bindingPattern.variableName.value === targetIdentifier) {
-			return path || `.${targetIdentifier}`;
-		}; 
-		path = undefined;
-	} else if (STKindChecker.isMappingBindingPattern(bindingPattern)) {
-		for (const fieldBindingPattern of bindingPattern.fieldBindingPatterns) {
-			if (STKindChecker.isFieldBindingPattern(fieldBindingPattern)) {
-				if (fieldBindingPattern?.bindingPattern) {
-					const pathElement = fieldBindingPattern.variableName.source;
-					const relativePath = getRelativePathOfField(
-						fieldBindingPattern.bindingPattern,
-						targetIdentifier, path ? `${path}.${pathElement}` : `.${pathElement}`
-					);
-					if (relativePath) {
-						return relativePath;
-					}
-				} else {
-					if (fieldBindingPattern.variableName.source === targetIdentifier) {
-						return path ? `${path}.${targetIdentifier}` : `.${targetIdentifier}`;
-					}
-				}
-			}
-		}
-	} else if (STKindChecker.isListBindingPattern(bindingPattern)) {
-		for (const bPattern of bindingPattern.bindingPatterns) {
-			const relativePath = getRelativePathOfField(bPattern, targetIdentifier, path);
-			if (relativePath) {
-				return relativePath;
-			}
-		}
-	}
-
-	return path;
-}
-
-export function getQueryExprMappingType(hasIndexedQuery: boolean, hasCollectClause: boolean): QueryExprMappingType {
-	if (hasIndexedQuery) {
-		return QueryExprMappingType.A2SWithSelect;
-	} else if (hasCollectClause) {
-		return QueryExprMappingType.A2SWithCollect;
-	}
-	return QueryExprMappingType.A2AWithSelect;
-}
-
-export function hasIndexedQueryExpr(node: STNode) {
-	return STKindChecker.isSpecificField(node)
-		&& STKindChecker.isIndexedExpression(node.valueExpr)
-		&& STKindChecker.isBracedExpression(node.valueExpr.containerExpression)
-		&& STKindChecker.isQueryExpression(node.valueExpr.containerExpression.expression);
-}
-
-export function hasCollectClauseExpr(node: QueryExpression) {
-	const resultClause = node?.selectClause || node?.resultClause;
-	// TODO: Update the syntax tree interfaces to include the collect clause
-	return resultClause.kind === "CollectClause";
-}
-
-export function generateDestructuringPattern(expression: string): string {
-    const parts = expression.split('.');
-    const lastIndex = parts.length - 1;
-
-    const constructPattern = (index: number): string => {
-        if (index === lastIndex) {
-            return `{${parts[index]}}`;
-        } else {
-            return `{${[parts[index]]}: ${constructPattern(index + 1)} }`;
-        }
-    };
-
-    return constructPattern(0);
-}
-
-export function getMappedFnNames(targetPort: PortModel) {
-	const mappedExpr = (targetPort as RecordFieldPortModel)?.editableRecordField?.value;
-
-	const fnCallFindingVisitor = new FunctionCallFindingVisitor();
-	traversNode(mappedExpr, fnCallFindingVisitor);
-	const fnCall = fnCallFindingVisitor.getFunctionCalls();
-
-	return fnCall.map((call) => call.fnName);
-}
-
-export function isLinkModel(node: BaseModel) {
-    return node instanceof DataMapperLinkModel;
-}
-
-export function getValueType(lm: DataMapperLinkModel): ValueType {
-	const editableRecordField = (lm.getTargetPort() as RecordFieldPortModel).editableRecordField;
-
-	if (editableRecordField?.value) {
-		let expr = editableRecordField.value;
-		if (STKindChecker.isSpecificField(expr)) {
-			expr = expr.valueExpr;
-		}
-		const innerExpr = getInnermostExpressionBody(expr);
-		let value: string = innerExpr?.value || innerExpr?.source;
-
-		if (STKindChecker.isListConstructor(innerExpr) && innerExpr.expressions.length === 0) {
-			// Ensure new lines and spaces are removed in empty arrays
-			value = "[]";
-		}
-
-		if (value !== undefined && !isEmptyValue(innerExpr?.position)) {
-			const isDefault = isDefaultValue(editableRecordField.type, value);
-			if (isDefault) {
-				return ValueType.Replaceable;
-			} else {
-				return isMergeable(editableRecordField.type.typeName)
-					? ValueType.Mergeable
-					: ValueType.Replaceable;
-			}
-		}
-	}
-
-	return ValueType.Empty;
-}
-
-export function toFirstLetterLowerCase(identifierName: string){
-    return identifierName.charAt(0).toLowerCase() + identifierName.slice(1);
-}
-
-export function toFirstLetterUpperCase(identifierName: string){
-    return identifierName.charAt(0).toUpperCase() + identifierName.slice(1);
-}
-
-function getInnerExpr(node: FieldAccess | OptionalFieldAccess): STNode {
-	let valueExpr = node.expression;
-	while (valueExpr && (STKindChecker.isFieldAccess(valueExpr)
-		|| STKindChecker.isOptionalFieldAccess(valueExpr))) {
-		valueExpr = valueExpr.expression;
-	}
-	return valueExpr;
-}
-
-function hasNoMatchFoundInArray(elements: ArrayElement[], searchValue: string): boolean {
-	if (!elements) {
-		return false;
-	} else if (elements.length === 0) {
-		return true;
-	}
-	return elements.every(element => {
-		if (element.member.type.typeName === PrimitiveBalType.Record) {
-			return element.member?.childrenTypes.length === 0;
-		} else if (element.member.type.typeName === PrimitiveBalType.Array) {
-			return element.member.elements && element.member.elements.length === 0
-		} else if (element.member.value) {
-			const value = element.member.value.value || element.member.value.source;
-			return !value.toLowerCase().includes(searchValue.toLowerCase());
-		}
-	});
-}
-
-async function createValueExprSource(
-	lhs: string,
-	rhs: string,
-	fieldNames: string[],
-	fieldIndex: number,
-	targetPosition: NodePosition,
-	applyModifications: (modifications: STModification[]) => Promise<void>
-) {
-	let source = "";
-
-	if (fieldIndex >= 0 && fieldIndex <= fieldNames.length) {
-		const missingFields = fieldNames.slice(fieldIndex);
-		source = createValueExpr(missingFields, true);
-	} else {
-		source = rhs;
-	}
-
-	const modifications = [getModification(source, {
-		...targetPosition,
-		startLine: targetPosition.endLine,
-		startColumn: targetPosition.endColumn
-	})];
-	await applyModifications(modifications);
-
-	function createValueExpr(missingFields: string[], isRoot?: boolean): string {
-		return missingFields.length
-			? isRoot
-				? `{${getLinebreak()}${createValueExpr(missingFields.slice(1))}}`
-				: `\t${missingFields[0]}: {${getLinebreak()}${createValueExpr(missingFields.slice(1))}}`
-			: isRoot
-				? rhs
-				: `\t${lhs}: ${rhs}`;
-	}
-
-	return `${rhs}: ${lhs}`;
-}
-
-export function updateCollectClauseAggrFn(
-	newFnName: string,
-	currentFnName: string,
-	mappedExpr: FunctionCall,
-	applyModifications: (modifications: STModification[]) => Promise<void>
-) {
-	const currentExpr: string = mappedExpr.source;
-	const updatedExpr = currentExpr.replace(currentFnName, newFnName);
-
-	const position = mappedExpr.position as NodePosition;
-	const modifications = [{
-		type: "INSERT",
-		config: {
-			"STATEMENT": updatedExpr,
-		},
-		...position
-	}];
-	void applyModifications(modifications);
-}
-
-export function getCollectClauseActions(
-	currentFnName: string,
-	mappedExpr: FunctionCall,
-	applyModifications: (modifications: STModification[]) => Promise<void>
-):CustomAction[] {
-	const aggrOptions = AggregationFunctions.filter((fn) => fn !== currentFnName);
-	return aggrOptions.map((fn) => {
-		return {
-			title: fn,
-			onClick: () => updateCollectClauseAggrFn(fn, currentFnName, mappedExpr, applyModifications)
-		};
-	});
-}
-
-export function getMatchingType(type: TypeField, typeInfo: NonPrimitiveBal): TypeField {
-	if (isTypeMatch(type, typeInfo)) {
-		return type;
-	} else if (type.typeName === PrimitiveBalType.Record) {
-		for (const field of type.fields) {
-			const matchingType = getMatchingType(field, typeInfo);
-			if (matchingType) {
-				return matchingType;
-			}
-		}
-	} else if (type.typeName === PrimitiveBalType.Array && type.memberType) {
-		if (isTypeMatch(type.memberType, typeInfo)) {
-			return type.memberType;
-		} else if (type.memberType?.typeName === PrimitiveBalType.Record) {
-			for (const field of type.memberType.fields) {
-				const matchingType = getMatchingType(field, typeInfo);
-				if (matchingType) {
-					return matchingType;
-				}
-			}
-		}
-	}
-
-	return undefined;
-}
-
-export function isTypeMatch(type: TypeField, typeInfo: NonPrimitiveBal): boolean {
-	return (
-		type.typeInfo &&
-		type.typeInfo.orgName === typeInfo.orgName &&
-		type.typeInfo.moduleName === typeInfo.moduleName &&
-		type.typeInfo.name === typeInfo.name &&
-		type.typeInfo.version === typeInfo.version
-	);
-}
-
-async function updateValueExprSource(
-	value: string,
-	targetPosition: NodePosition,
-	applyModifications: (modifications: STModification[]) => Promise<void>
-) {
-	void await applyModifications([getModification(value, {...targetPosition})]);
-
-	return value;
-}
-
-function getSpecificField(mappingConstruct: MappingConstructor, targetFieldName: string) {
-	return mappingConstruct?.fields.find((val) =>
-		STKindChecker.isSpecificField(val) && val.fieldName.value === targetFieldName
-	) as SpecificField;
-}
-
-export function isComplexExpression(node: STNode): boolean {
-	return (
-		STKindChecker.isConditionalExpression(node) ||
-		(STKindChecker.isBinaryExpression(node) && STKindChecker.isElvisToken(node.operator)) ||
-		STKindChecker.isFunctionCall(node)
-	);
-}
-
-export function isIndexedExpression(node: STNode): boolean {
-	return STKindChecker.isIndexedExpression(node);
-}
-
-export function getFnDefForFnCall(node: FunctionCall): FnDefInfo {
-	const fnCallPosition: LinePosition = {
-		line: node.position.startLine,
-		offset: node.position.startColumn
-	};
-	return getFnDefFromStore(fnCallPosition);
-}
-
-export function getFilteredMappings(mappings: FieldAccessToSpecificFied[], searchValue: string) {
-	return mappings.filter(mapping => {
-		if (mapping) {
-			if (searchValue === "") {
-				return true;
-			}
-
-			const lastField = mapping.fields[mapping.fields.length - 1];
-			const fieldName = STKindChecker.isSpecificField(lastField)
-				? lastField.fieldName?.value || lastField.fieldName.source
-				: lastField.source;
-			const isFieldMatch = fieldName.toLowerCase().includes(searchValue.toLowerCase());
-			if (isFieldMatch) {
-				return true;
-			}
-
-			const elementsBeforeListConstructors = getElementsBeforeListConstructors(mapping.fields);
-			if (elementsBeforeListConstructors) {
-				for (const element of elementsBeforeListConstructors) {
-					const fieldName = STKindChecker.isSpecificField(element)
-						? element.fieldName?.value || element.fieldName.source
-						: element.source;
-					if (fieldName.toLowerCase().includes(searchValue.toLowerCase())) {
-						return true;
-					}
-				}
-			}			
-		}
-	});
-}
-
-export function getInnermostExpressionBody(expr: STNode): STNode {
-	let innerExpr =	expr;
-	if (innerExpr && STKindChecker.isLetExpression(innerExpr)) {
-		innerExpr = getExprBodyFromLetExpression(innerExpr);
-	}
-	if (innerExpr && STKindChecker.isTypeCastExpression(innerExpr)) {
-		innerExpr = getExprBodyFromTypeCastExpression(innerExpr);
-	}
-	return innerExpr;
-}
-
-export function getInnermostMemberTypeFromArrayType(arrayType: TypeField): TypeField {
-	let memberType = arrayType.memberType;
-	while (memberType.typeName === PrimitiveBalType.Array) {
-		memberType = memberType.memberType;
-	}
-	return memberType;
-}
-
-export function getTargetPortPrefix(node: NodeModel): string {
-	switch (true) {
-		case node instanceof MappingConstructorNode:
-			return MAPPING_CONSTRUCTOR_TARGET_PORT_PREFIX;
-		case node instanceof ListConstructorNode:
-			return LIST_CONSTRUCTOR_TARGET_PORT_PREFIX;
-		case node instanceof PrimitiveTypeNode:
-			return PRIMITIVE_TYPE_TARGET_PORT_PREFIX;
-		case node instanceof UnionTypeNode:
-			const unionTypeNode = node as UnionTypeNode;
-			const resolvedType = unionTypeNode.resolvedType;
-			if (unionTypeNode.shouldRenderUnionType()) {
-				return UNION_TYPE_TARGET_PORT_PREFIX;
-			} else if (resolvedType && resolvedType.typeName === PrimitiveBalType.Record) {
-				return MAPPING_CONSTRUCTOR_TARGET_PORT_PREFIX;
-			} else if (resolvedType && resolvedType.typeName === PrimitiveBalType.Array) {
-				return LIST_CONSTRUCTOR_TARGET_PORT_PREFIX;
-			} else {
-				return PRIMITIVE_TYPE_TARGET_PORT_PREFIX;
-			}
-		default:
-			return PRIMITIVE_TYPE_TARGET_PORT_PREFIX;
-	}
-}
-
-export function getDiagnosticsPosition(outPortField: EditableRecordField, mapping: FieldAccessToSpecificFied): NodePosition {
-	const {type, value: outPortFieldValue} = outPortField;
-	const {value: mappedValue, otherVal} = mapping;
-	let diagnosticsPosition: NodePosition = (otherVal.position || mappedValue.position) as NodePosition;
-	if (type.typeName === PrimitiveBalType.Union && !type?.resolvedUnionType && outPortFieldValue) {
-		diagnosticsPosition = outPortFieldValue.position;
-	}
-	return diagnosticsPosition;
-}
-
-export function isRepresentFnBody(queryParentNode: STNode, fnBody: ExpressionFunctionBody) {
-	const isExprFnBody = STKindChecker.isExpressionFunctionBody(queryParentNode);
-	const isQueryParentNodeFnBody = isExprFnBody && isPositionsEquals(queryParentNode.position, fnBody.position);
-	if (isQueryParentNodeFnBody) {
-		return true;
-	}
-	let nextNode: STNode = fnBody.expression;
-	while (STKindChecker.isTypeCastExpression(nextNode) || STKindChecker.isLetExpression(nextNode)) {
-		if (isPositionsEquals(queryParentNode.position, nextNode.position)) {
-			return true;
-		}
-		nextNode = nextNode.expression;
-	}
-	return false;
-}
-
-export function getErrorKind(node: DataMapperNodeModel): ErrorNodeKind {
-	const nodeType = node.getType();
-	switch (nodeType) {
-		case MAPPING_CONSTRUCTOR_NODE_TYPE:
-		case LIST_CONSTRUCTOR_NODE_TYPE:
-		case PRIMITIVE_TYPE_NODE_TYPE:
-			return ErrorNodeKind.Output;
-		case REQ_PARAM_NODE_TYPE:
-			return ErrorNodeKind.Input;
-		case LET_EXPR_SOURCE_NODE_TYPE:
-		case MODULE_VAR_SOURCE_NODE_TYPE:
-		case ENUM_TYPE_SOURCE_NODE_TYPE:
-		case EXPANDED_MAPPING_HEADER_NODE_TYPE:
-		case QUERY_EXPR_NODE_TYPE:
-		case QUERY_EXPR_SOURCE_NODE_TYPE:
-		case QUERY_EXPR_LET_NODE_TYPE:
-		case QUERY_EXPR_JOIN_NODE_TYPE:
-			return ErrorNodeKind.Other;
-		default:
-			return ErrorNodeKind.Other;
-	}
-}
-
-export function getLocalVariableNames(fnDef: FunctionDefinition): string[] {
-	const paramNames = fnDef.functionSignature.parameters.map(param => {
-		return !STKindChecker.isCommaToken(param) && param?.paramName.value;
-	}).filter(param => param !== undefined);
-
-	const letVarDeclNames: string[] = [];
-	const letExpression = getLetExpression(fnDef);
-	const letExpressions = letExpression ? getLetExpressions(letExpression) : [];
-	for (const expr of letExpressions) {
-		for (const decl of expr?.letVarDeclarations) {
-			if (STKindChecker.isLetVarDecl(decl)) {
-				letVarDeclNames.push(decl.typedBindingPattern.bindingPattern.source.trim());
-			}
-		}
-	}
-
-	const visitor = new FromClauseBindingPatternFindingVisitor();
-	traversNode(fnDef, visitor);
-	const fromClauseBindingPatterns = visitor.getBindingPatterns().map(pattern => pattern.source.trim());
-
-	return [...paramNames, ...letVarDeclNames, ...fromClauseBindingPatterns];
-}
-
-export function genVariableName(originalName: string, variables: string[]): string {
-	let modifiedName: string = originalName;
-	let index = 0;
-	while (variables.includes(modifiedName)) {
-		index++;
-		modifiedName = originalName + index;
-	}
-	return modifiedName;
-}
-
-export function isFnBodyQueryExpr(fieldPath: string) {
-	return fieldPath === FUNCTION_BODY_QUERY;
-}
-
-export function isSelectClauseQueryExpr(fieldPath: string) {
-	return fieldPath === SELECT_CALUSE_QUERY;
-}
-
-export function getLetClauseVarNames(letClause: LetClause): string[] {
-	const varNames: string[] = [];
-	for (const decl of letClause.letVarDeclarations) {
-		if (STKindChecker.isLetVarDecl(decl)) {
-			varNames.push(decl.typedBindingPattern.bindingPattern.source.trim());
-		}
-	}
-	return varNames;
-}
-
-export function getMappingType(sourcePort: PortModel, targetPort: PortModel): MappingType {
-
-    if (sourcePort instanceof RecordFieldPortModel
-        && targetPort instanceof RecordFieldPortModel
-        && targetPort.field && sourcePort.field) {
-            
-		const sourceDim = getDMTypeDim(sourcePort.field);
-		const targetDim = getDMTypeDim(targetPort.field);
-
-		if (sourceDim > 0) {
-			const dimDelta = sourceDim - targetDim;
-			if (dimDelta == 0) return MappingType.ArrayToArray;
-			if (dimDelta > 0) return MappingType.ArrayToSingleton;
-		} else if (sourcePort.field.typeName === PrimitiveBalType.Union) {
-			return MappingType.UnionToAny;
-		} else if (sourcePort.field.typeName === PrimitiveBalType.Record
-			&& targetPort.field.typeName === PrimitiveBalType.Record) {
-			return MappingType.RecordToRecord;
-		}
-    }
-
-    return MappingType.Default;
-}
-
-export function buildInputAccessExpr(fieldFqn: string): string {
-	// Regular expression to match either quoted strings or non-quoted strings with dots
-	const regex = /"([^"]+)"|'([^"]+)'|([^".]+)/g;
-
-	const result = fieldFqn.replace(regex, (match, doubleQuoted, singleQuoted, unquoted) => {
-		if (doubleQuoted) {
-			return `["${doubleQuoted}"]`; // If the part is enclosed in double quotes, wrap it in square brackets
-		} else if (singleQuoted) {
-			return `['${singleQuoted}']`; // If the part is enclosed in single quotes, wrap it in square brackets
-		} else {
-			return unquoted; // Otherwise, leave the part unchanged
-		}
-	});
-
-	return result.replace(/(?<!\?)\.\[/g, '['); // Replace occurrences of '.[' with '[' to handle consecutive bracketing
-}
-
-export function genArrayElementAccessSuffix(sourcePort: PortModel, targetPort: PortModel) {
-    if (sourcePort instanceof RecordFieldPortModel && targetPort instanceof RecordFieldPortModel) {
-        let suffix = '';
-        const sourceDim = getDMTypeDim(sourcePort.field);
-        const targetDim = getDMTypeDim(targetPort.field);
-        const dimDelta = sourceDim - targetDim;
-        for (let i = 0; i < dimDelta; i++) {
-            suffix += '[0]';
-        }
-        return suffix;
-    }
-    return '';
-};
-
-export function genArrayElementAccessExpr(node: STNode): string {
-    let accessors: string[] = [];
-	let targetNode = STKindChecker.isSpecificField(node) ? node.valueExpr : node;
-
-    while (STKindChecker.isIndexedExpression(targetNode)) {
-        const keyExprs = targetNode.keyExpression;
-		if (keyExprs?.length === 1 && STKindChecker.isNumericLiteral(keyExprs[0])) {
-			accessors.push(keyExprs[0].source);
-			targetNode = targetNode.containerExpression;
-		}
-    }
-    accessors.reverse();
-    return `[${accessors.join(",")}]`;
-}
-
-export function hasFieldAccessExpression(node: STNode): boolean {
-	if (!node) {
-		return false;
-	} else if (STKindChecker.isSpecificField(node) && STKindChecker.isIndexedExpression(node.valueExpr)) {
-		return true;
-	} else {
-		return STKindChecker.isIndexedExpression(node)
-	}
-}
-
-function isMappedToPrimitiveTypePort(targetPort: RecordFieldPortModel): boolean {
-	return !isArrayOrRecord(targetPort.field)
-		&& targetPort?.editableRecordField?.value
-		&& !STKindChecker.isSpecificField(targetPort.editableRecordField.value)
-		&& !isEmptyValue(targetPort.editableRecordField.value.position);
-}
-
-function isMappedToRootListConstructor(targetPort: RecordFieldPortModel): boolean {
-	return !targetPort.parentModel
-		&& targetPort.field.typeName === PrimitiveBalType.Array
-		&& targetPort?.editableRecordField?.value
-		&& STKindChecker.isListConstructor(targetPort.editableRecordField.value);
-}
-
-function isMappedToRootMappingConstructor(targetPort: RecordFieldPortModel): boolean {
-	return !targetPort.parentModel
-		&& targetPort.field.typeName === PrimitiveBalType.Record
-		&& targetPort?.editableRecordField?.value
-		&& STKindChecker.isMappingConstructor(targetPort.editableRecordField.value);
-}
-
-function isMappedToRootUnionType(targetPort: RecordFieldPortModel): boolean {
-	return !targetPort.parentModel
-		&& targetPort.field.typeName === PrimitiveBalType.Union
-		&& !targetPort?.editableRecordField;
-}
-
-function isMappedToExprFuncBody(targetPort: RecordFieldPortModel, selectedSTNode: STNode): boolean {
-	const exprPosition: NodePosition = STKindChecker.isFunctionDefinition(selectedSTNode)
-		&& STKindChecker.isExpressionFunctionBody(selectedSTNode.functionBody)
-		&& selectedSTNode.functionBody.expression.position;
-	return !targetPort.parentModel
-		&& targetPort?.editableRecordField?.value
-		&& !STKindChecker.isQueryExpression(targetPort.editableRecordField.value)
-		&& isPositionsEquals(targetPort?.editableRecordField?.value.position as NodePosition, exprPosition);
-}
-
-function isMappedToMappingConstructorWithinArray(targetPort: RecordFieldPortModel): boolean {
-	return targetPort.index !== undefined
-		&& targetPort.field.typeName === PrimitiveBalType.Record
-		&& targetPort.editableRecordField?.value
-		&& STKindChecker.isMappingConstructor(getInnermostExpressionBody(targetPort.editableRecordField.value));
-}
-
-function isMappedToSelectClauseExprConstructor(targetPort: RecordFieldPortModel): boolean {
-	const queryExpr = !targetPort.parentModel
-		&& targetPort.field.typeName === PrimitiveBalType.Array
-		&& targetPort?.editableRecordField?.value
-		&& STKindChecker.isQueryExpression(targetPort.editableRecordField.value)
-		&& targetPort.editableRecordField.value;
-	if (queryExpr) {
-		const selectClause = queryExpr?.selectClause || queryExpr?.resultClause;
-		return selectClause
-			&& (STKindChecker.isListConstructor(selectClause.expression)
-				|| STKindChecker.isMappingConstructor(selectClause.expression));
-	}
-	return false;
-}
-
-function getFieldNameFromOutputPort(outputPort: RecordFieldPortModel): string {
-	let fieldName = outputPort.field?.name;
-	if (outputPort?.editableRecordField?.originalType) {
-		fieldName = outputPort.editableRecordField.originalType?.name;
-	}
-	return fieldName;
-}
-
-function isNodeWithoutTypeDesc(node: BaseModel): node is NodeWithoutTypeDesc {
-	return (
-		node instanceof LetExpressionNode ||
-		node instanceof ModuleVariableNode ||
-		node instanceof EnumTypeNode ||
-		node instanceof ExpandedMappingHeaderNode
-	);
-}
-
-export const getOptionalRecordField = (field: TypeField): TypeField | undefined => {
-	if (!field) return;
-
-	let recField: TypeField;
-	if (PrimitiveBalType.Record === field.typeName && field.optional) {
-		recField = field;
-	} else if (PrimitiveBalType.Union === field.typeName) {
-		const isSimpleOptionalType = field.members?.some(member => member.typeName === '()');
-		if (isSimpleOptionalType && field.members?.length === 2) {
-			for (const member of field.members) {
-				if (member.typeName === PrimitiveBalType.Record) {
-					recField = member;
-				} else if (member.typeName === 'intersection') {
-					const recordMem = member.members?.find(member => member.typeName === PrimitiveBalType.Record);
-					recField = recordMem;
-				}
-			}
-		}
-	}
-
-	return recField;
-}
-
-export const isOptionalAndNillableField = (field: TypeField) => {
-	return field.optional
-		&& field.typeName === PrimitiveBalType.Union
-		&& field.members?.some(member => member.typeName === '()');
-}
-
-export const getOptionalArrayField = (field: TypeField): TypeField | undefined => {
-	if (PrimitiveBalType.Array === field.typeName && field.optional) {
-		return field;
-	} else if (PrimitiveBalType.Union === field.typeName) {
-		const isSimpleOptionalType = field.members?.some(member => member.typeName === '()');
-		if (isSimpleOptionalType && field.members?.length === 2){
-			return field.members?.find(member => member.typeName === PrimitiveBalType.Array);
-		}
-	}
-}
-
-/** Filter out error and nill types and return only the types that can be displayed as mapping as target nodes */
-export const getFilteredUnionOutputTypes = (type: TypeField) => type.members?.filter(member => member && !["error"].includes(member.typeName));
-
-
-export const getNewFieldAdditionModification = (node: STNode, fieldName: string, fieldValue = '') => {
-	let insertPosition: NodePosition;
-	let modificationStatement = "";
-	let mappingConstruct: MappingConstructor;
-
-	if (STKindChecker.isMappingConstructor(node)) {
-		mappingConstruct = node;
-	} else if (STKindChecker.isSpecificField(node) && STKindChecker.isMappingConstructor(node.valueExpr)) {
-		mappingConstruct = node.valueExpr
-	}
-
-	if (mappingConstruct) {
-		if (mappingConstruct.fields?.length) {
-			const lastField = mappingConstruct.fields[mappingConstruct.fields?.length - 1]
-			insertPosition = {
-				...lastField.position,
-				startLine: lastField.position.endLine,
-				startColumn: lastField.position.endColumn,
-			}
-			modificationStatement = `,${getLinebreak()}\t${fieldName}:${fieldValue}${getLinebreak()}`
-		} else {
-			insertPosition = mappingConstruct.position
-			modificationStatement = `{${getLinebreak()}\t${fieldName}:${fieldValue}${getLinebreak()}}`
-		}
-	}
-
-	if (insertPosition && modificationStatement) {
-		return [getModification(modificationStatement, insertPosition)];
-	}
-}
-
-export const getSearchFilteredInput = (typeDef: TypeField, varName?: string) => {
-	const searchValue = useDMSearchStore.getState().inputSearch;
-	if (!searchValue) {
-		return typeDef;
-	}
-
-	if (varName?.toLowerCase()?.includes(searchValue.toLowerCase())) {
-		return typeDef
-	} else if (typeDef?.typeName === PrimitiveBalType.Record || typeDef?.typeName === PrimitiveBalType.Array) {
-		const filteredRecordType = getFilteredSubFields(typeDef, searchValue);
-		if (filteredRecordType) {
-			return filteredRecordType
-		}
-	}
-}
-
-export const getFilteredSubFields = (type: TypeField, searchValue: string) => {
-	if (!type) {
-		return null;
-	}
-
-	if (!searchValue) {
-		return type;
-	}
-
-	const optionalRecordField = getOptionalRecordField(type);
-	if (optionalRecordField && type?.typeName === PrimitiveBalType.Union) {
-		const matchedSubFields: TypeField[] = optionalRecordField?.fields?.map(fieldItem => getFilteredSubFields(fieldItem, searchValue)).filter(fieldItem => fieldItem);
-		const matchingName = type?.name?.toLowerCase().includes(searchValue.toLowerCase());
-		if (matchingName || matchedSubFields?.length > 0) {
-			return {
-				...type,
-				members: [
-					{ ...optionalRecordField, fields: matchingName ? optionalRecordField?.fields : matchedSubFields },
-					...type?.members?.filter(member => member.typeName !== PrimitiveBalType.Record)
-				]
-			};
-		}
-	} else if (type?.typeName === PrimitiveBalType.Record) {
-		const matchedSubFields: TypeField[] = type?.fields?.map(fieldItem => getFilteredSubFields(fieldItem, searchValue)).filter(fieldItem => fieldItem);
-		const matchingName = type?.name?.toLowerCase().includes(searchValue.toLowerCase());
-		if (matchingName || matchedSubFields?.length > 0) {
-			return {
-				...type,
-				fields: matchingName ? type?.fields : matchedSubFields
-			}
-		}
-	} else if (type?.typeName === PrimitiveBalType.Array) {
-		const matchedSubFields: TypeField[] = type?.memberType?.fields?.map(fieldItem => getFilteredSubFields(fieldItem, searchValue)).filter(fieldItem => fieldItem);
-		const matchingName = type?.name?.toLowerCase().includes(searchValue.toLowerCase());
-		if (matchingName || matchedSubFields?.length > 0) {
-			return {
-				...type,
-				memberType: {
-					...type?.memberType,
-					fields: matchingName ? type?.memberType?.fields : matchedSubFields
-				}
-			}
-		}
-	} else {
-		return type?.name?.toLowerCase()?.includes(searchValue.toLowerCase()) ? type : null
-	}
-
-	return null;
-}
-
-export const getSearchFilteredOutput = (type: TypeField) => {
-	const searchValue = useDMSearchStore.getState().outputSearch;
-	if (!type) {
-		return null
-	}
-	if (!searchValue) {
-		return type;
-	}
-
-	let searchType: TypeField = type;
-
-	if (type?.typeName === PrimitiveBalType.Union) {
-		const filteredTypes = getFilteredUnionOutputTypes(type);
-		if (filteredTypes?.length === 1) {
-			searchType = filteredTypes[0];
-		}
-	}
-
-	if (searchType.typeName === PrimitiveBalType.Array) {
-		const subFields = searchType.memberType?.fields?.map(item => getFilteredSubFields(item, searchValue)).filter(item => item);
-
-		return {
-			...searchType,
-			memberType: {
-				...searchType.memberType,
-				fields: subFields || []
-			}
-		}
-	} else if (searchType.typeName === PrimitiveBalType.Record) {
-		const subFields = searchType.fields?.map(item => getFilteredSubFields(item, searchValue)).filter(item => item);
-
-		return {
-			...searchType,
-			fields: subFields || []
-		}
-	}
-	return  null;
-}
-
-/**
- * Returns an array of STNodes(fields) that appear before each ListConstructor in the fields array.
- * @param fields - Array of STNodes to search through
- * @returns Array of STNodes that appear before each ListConstructor
- */
-export function getElementsBeforeListConstructors(fields: STNode[]): STNode[] {
-    if (!fields || fields.length < 2) {
-        return [];
-    }
-
-    const elementsBeforeListConstructors: STNode[] = [];
-    
-    // Find all indices where ListConstructors occur and collect elements before them
-    fields.forEach((field, index) => {
-        if (STKindChecker.isListConstructor(field) && index > 0) {
-            // Add the element before this ListConstructor
-            elementsBeforeListConstructors.push(fields[index - 1]);
-        }
-    });
-
-    return elementsBeforeListConstructors;
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/fn-definition-store.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/fn-definition-store.ts
deleted file mode 100644
index ac94cc6f9e1..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/fn-definition-store.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { LinePosition } from "@wso2/ballerina-core";
-import {
-    NodePosition,
-    STNode,
-    traversNode
-} from "@wso2/syntax-tree";
-import { URI } from "vscode-uri";
-
-import { IDataMapperContext } from "../../../utils/DataMapperContext/DataMapperContext";
-import { getFnDefsForFnCalls } from "../../../utils/st-utils";
-import { FunctionCallFindingVisitor } from "../visitors/FunctionCallFindingVisitor";
-import { LangClientRpcClient } from "@wso2/ballerina-rpc-client";
-
-export interface FnDefInfo {
-    fnCallPosition: LinePosition;
-    fnDefPosition: NodePosition;
-    fnName: string;
-    fileUri: string,
-    isExprBodiedFn?: boolean;
-}
-
-export class FunctionDefinitionStore {
-
-    fnDefinitions: Map<LinePosition, FnDefInfo>
-    static instance : FunctionDefinitionStore;
-
-    private constructor() {
-        this.fnDefinitions = new Map();
-    }
-
-    public static getInstance() {
-        if (!this.instance){
-            this.instance = new FunctionDefinitionStore();
-        }
-        return this.instance;
-    }
-
-    public async storeFunctionDefinitions(
-        stNode: STNode,
-        context: IDataMapperContext,
-        langServerRpcClient: LangClientRpcClient) {
-
-        this.fnDefinitions.clear();
-        const fileUri = URI.file(context.currentFile.path).toString();
-        const visitor = new FunctionCallFindingVisitor();
-        traversNode(stNode, visitor);
-
-        const fnCallPositions = visitor.getFunctionCallPositions();
-
-        await this.setFnDefinitions(fileUri, fnCallPositions, langServerRpcClient);
-    }
-
-    async setFnDefinitions(fileUri: string, fnCallPositions: LinePosition[], langServerRpcClient: LangClientRpcClient) {
-
-        const fnDefs = await getFnDefsForFnCalls(fnCallPositions, fileUri, langServerRpcClient)
-
-        for (const fnDef of fnDefs) {
-            this.fnDefinitions.set(fnDef.fnCallPosition, fnDef)
-        }
-    }
-
-    public getFnDefinitions(position : LinePosition) : FnDefInfo {
-        for (const [key, value] of this.fnDefinitions) {
-            if (key.line === position.line && key.offset === position.offset) {
-                return value;
-            }
-        }
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/import-utils.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/import-utils.ts
deleted file mode 100644
index 799d0eaac63..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/import-utils.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-export function getReferencedName(importStatement: string): string {
-    // Remove the 'import' keyword and semicolon
-    const cleanImport = importStatement.replace('import ', '').replace(';', '');
-    
-    // Check if the import has an alias (contains 'as')
-    if (cleanImport.includes(' as ')) {
-        // Split by 'as' and return the alias (trimmed)
-        return cleanImport.split(' as ')[1].trim();
-    }
-    
-    // For imports without alias, get the last part of the path
-    const parts = cleanImport.split('/');
-    const lastPart = parts[parts.length - 1];
-    
-    // Return the last part of the path
-    const dotParts = lastPart.split('.');
-    return dotParts[dotParts.length - 1];
-}
-
-export function createImportReferenceMap(importStatements: string[]): Record<string, string> {
-    const referenceMap: Record<string, string> = {};
-    
-    for (const importStatement of importStatements) {
-        const referencedName = getReferencedName(importStatement);
-        referenceMap[importStatement] = referencedName;
-    }
-    
-    return referenceMap;
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/ls-utils.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/ls-utils.ts
deleted file mode 100644
index 9f920b29168..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/ls-utils.ts
+++ /dev/null
@@ -1,252 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import {
-    SyntaxTreeResponse,
-    CompletionParams,
-    LinePosition,
-    DiagnosticData,
-    ExpressionRange,
-    addToTargetPosition,
-    ResolvedTypeForExpression
-} from "@wso2/ballerina-core";
-import { NodePosition } from "@wso2/syntax-tree";
-import { CodeAction, CompletionItemKind, Diagnostic, WorkspaceEdit } from "vscode-languageserver-types";
-import { URI } from "vscode-uri";
-
-import { CompletionResponseWithModule } from "../../DataMapper/ConfigPanel/TypeBrowser";
-import { EXPR_SCHEME, FILE_SCHEME } from "../../DataMapper/ConfigPanel/utils";
-import { LangClientRpcClient } from "@wso2/ballerina-rpc-client";
-
-export async function getDiagnostics(docUri: string, langServerRpcClient: LangClientRpcClient): Promise<DiagnosticData[]> {
-
-    // Extract project URI from file URI by getting the directory path
-    const fileUri = URI.parse(docUri);
-    const projectUri = URI.file(fileUri.fsPath.split('/').slice(0, -1).join('/')).toString();
-
-    const projectDiagnostics = await langServerRpcClient.getProjectDiagnostics({
-        projectRootIdentifier: {
-            uri: projectUri,
-        }
-    });
-
-    // Convert errorDiagnosticMap to DiagnosticData array
-    const diagnosticDataArray: DiagnosticData[] = [];
-    if (projectDiagnostics.errorDiagnosticMap) {
-        for (const [uri, diagnostics] of Object.entries(projectDiagnostics.errorDiagnosticMap)) {
-            if (uri === docUri) {
-                diagnosticDataArray.push({ uri, diagnostics });
-            }
-        }
-    }
-
-    return diagnosticDataArray;
-}
-
-export const handleDiagnostics = async (fileURI: string, langServerRpcClient: LangClientRpcClient):
-    Promise<Diagnostic[]> => {
-    const diagResp = await getDiagnostics(URI.file(fileURI).toString(), langServerRpcClient);
-    const diag = diagResp[0]?.diagnostics ? diagResp[0].diagnostics : [];
-    return diag;
-}
-
-export const filterDiagnostics = (diagnostics: Diagnostic[], nodePosition: NodePosition): Diagnostic[] => {
-    return diagnostics.filter((diagnostic) => {
-        const diagPosition: NodePosition = {
-            startLine: diagnostic.range.start.line,
-            startColumn: diagnostic.range.start.character,
-            endLine: diagnostic.range.end.line,
-            endColumn: diagnostic.range.end.character
-        };
-        return isDiagInRange(nodePosition, diagPosition);
-    })
-}
-
-export function isDiagInRange(nodePosition: NodePosition, diagPosition: NodePosition): boolean {
-    return diagPosition?.startLine >= nodePosition?.startLine &&
-        (diagPosition?.startLine === nodePosition?.startLine ? diagPosition?.startColumn >= nodePosition?.startColumn : true) &&
-        diagPosition?.endLine <= nodePosition?.endLine &&
-        (diagPosition?.endLine === nodePosition?.endLine ? diagPosition?.endColumn <= nodePosition?.endColumn : true);
-}
-
-
-export async function getCodeAction(filePath: string, diagnostic: Diagnostic, langServerRpcClient: LangClientRpcClient): Promise<CodeAction[]> {
-    const codeAction = await langServerRpcClient.codeAction({
-        context: {
-            diagnostics: [{
-                code: diagnostic.code,
-                message: diagnostic.message,
-                range: {
-                    end: {
-                        line: diagnostic.range.end.line,
-                        character: diagnostic.range.end.character
-                    },
-                    start: {
-                        line: diagnostic.range.start.line,
-                        character: diagnostic.range.start.character
-                    }
-                },
-                severity: 1
-            }],
-            only: ["quickfix"]
-        },
-        range: {
-            end: {
-                line: diagnostic.range.end.line,
-                character: diagnostic.range.end.character
-            },
-            start: {
-                line: diagnostic.range.start.line,
-                character: diagnostic.range.start.character
-            }
-        },
-        textDocument: {
-            uri: filePath
-        }
-    });
-
-    return codeAction.codeActions;
-}
-
-export async function getRenameEdits(fileURI: string,
-    newName: string,
-    position: NodePosition,
-    langServerRpcClient: LangClientRpcClient): Promise<WorkspaceEdit> {
-
-    const renameEdits = await langServerRpcClient.rename({
-        textDocument: { uri: URI.file(fileURI).toString() },
-        position: {
-            line: position.startLine,
-            character: position?.startColumn
-        },
-        newName
-    });
-    return renameEdits.workspaceEdit;
-}
-
-export const handleCodeActions = async (fileURI: string,
-    diagnostics: Diagnostic[],
-    langServerRpcClient: LangClientRpcClient): Promise<CodeAction[]> => {
-    let codeActions: CodeAction[] = []
-
-    for (const diagnostic of diagnostics) {
-        const codeAction = await getCodeAction(URI.file(fileURI).toString(), diagnostic, langServerRpcClient)
-        codeActions = [...codeActions, ...codeAction]
-    }
-    return codeActions;
-}
-
-export async function getRecordCompletions(
-    currentFileContent: string,
-    importStatements: string[],
-    fnSTPosition: NodePosition,
-    path: string,
-    langServerRpcClient: LangClientRpcClient): Promise<CompletionResponseWithModule[]> {
-
-    const typeLabelsToIgnore = ["StrandData"];
-    const completionMap = new Map<string, CompletionResponseWithModule>();
-    const fileUri = URI.file(path).toString();
-
-    const completionParams: CompletionParams = {
-        textDocument: { uri: fileUri },
-        position: { character: 0, line: 0 },
-        context: { triggerKind: 22 },
-    };
-
-    const completions = (await langServerRpcClient.getCompletion(completionParams)).completions;
-    const recCompletions = completions.filter((item) => item.kind === CompletionItemKind.Struct);
-    recCompletions.forEach((item) => completionMap.set(item.insertText, item));
-
-    if (importStatements.length > 0) {
-
-        for (const importStr of importStatements) {
-            const moduleName = importStr.split("/").pop().split(".").pop().replace(";", "");
-            const updatedContent = addToTargetPosition(
-                currentFileContent,
-                {
-                    startLine: fnSTPosition.endLine,
-                    startColumn: fnSTPosition.endColumn,
-                    endLine: fnSTPosition.endLine,
-                    endColumn: fnSTPosition.endColumn,
-                },
-                `${moduleName}:`
-            );
-
-            langServerRpcClient.didChange({
-                textDocument: { uri: fileUri, version: 1 },
-                contentChanges: [{ text: updatedContent }],
-            });
-
-            const importCompletions = await langServerRpcClient.getCompletion({
-                textDocument: { uri: fileUri },
-                position: { character: fnSTPosition.endColumn + moduleName.length + 1, line: fnSTPosition.endLine },
-                context: { triggerKind: 22 },
-            });
-
-            const importRecCompletions = importCompletions.completions.filter((item) => item.kind === CompletionItemKind.Struct);
-
-            importRecCompletions.forEach((item) => {
-                if (!completionMap.has(`${item.insertText}${moduleName}`)) {
-                    completionMap.set(`${item.insertText}${moduleName}`, { ...item, module: moduleName });
-                }
-            });
-        }
-        langServerRpcClient.didChange({
-            textDocument: { uri: fileUri, version: 1 },
-            contentChanges: [{ text: currentFileContent }],
-        });
-    }
-
-    const allCompletions = Array.from(completionMap.values()).filter(
-        (item) => !(typeLabelsToIgnore.includes(item.label) || item.label.startsWith("("))
-    );
-
-    return allCompletions;
-}
-
-export async function getTypesForExpressions(fileURI: string,
-                                             expressionNodesRanges: ExpressionRange[],
-                                             langServerRpcClient: LangClientRpcClient)
-    : Promise<ResolvedTypeForExpression[]> {
-    const typesFromExpression = await langServerRpcClient.getTypeFromExpression({
-        documentIdentifier: {
-            uri: URI.file(fileURI).toString()
-        },
-        expressionRanges: expressionNodesRanges
-    });
-
-    return typesFromExpression.types;
-}
-
-export async function getDefinitionPosition(fileURI: string,
-    position: LinePosition,
-    langServerRpcClient: LangClientRpcClient): Promise<SyntaxTreeResponse> {
-
-    const definitionPosition = await langServerRpcClient.getDefinitionPosition(
-        {
-            textDocument: {
-                uri: URI.file(fileURI).toString()
-            },
-            position: {
-                line: position.line,
-                character: position.offset
-            }
-        }
-    )
-
-    return definitionPosition;
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/type-descriptor-store.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/type-descriptor-store.ts
deleted file mode 100644
index 21316e692c8..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/type-descriptor-store.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import {
-    ExpressionRange,
-    LinePosition,
-    TypeField
-} from "@wso2/ballerina-core";
-import {
-    FunctionDefinition,
-    NodePosition,
-    traversNode
-} from "@wso2/syntax-tree";
-
-import { IDataMapperContext } from "../../../utils/DataMapperContext/DataMapperContext";
-import { isPositionsEquals } from "../../../utils/st-utils";
-import { FnDefPositions, TypeFindingVisitor } from "../visitors/TypeFindingVisitor";
-import { LangClientRpcClient } from "@wso2/ballerina-rpc-client";
-import { URI } from "vscode-uri";
-
-export enum TypeStoreStatus {
-    Init,
-    Loading,
-    Loaded
-}
-
-export class TypeDescriptorStore {
-
-    typeDescriptors: Map<NodePosition, TypeField>;
-    stNode: FunctionDefinition;
-    status: TypeStoreStatus;
-    static instance : TypeDescriptorStore;
-
-    private constructor() {
-        this.typeDescriptors = new Map();
-    }
-
-    public static getInstance() {
-        if (!this.instance){
-            this.instance = new TypeDescriptorStore();
-        }
-        return this.instance;
-    }
-
-    public async storeTypeDescriptors(
-        stNode: FunctionDefinition,
-        context: IDataMapperContext,
-        isArraysSupported: boolean,
-        langServerRpcClient: LangClientRpcClient) {
-
-        if (this.stNode
-                && isPositionsEquals(this.stNode.position, stNode.position)
-                && this.stNode.source === stNode.source) {
-            return;
-        }
-        this.status = TypeStoreStatus.Loading;
-        this.stNode = stNode;
-        this.typeDescriptors.clear();
-        const visitor = new TypeFindingVisitor(isArraysSupported);
-        traversNode(stNode, visitor);
-
-        const fnDefPositions = visitor.getFnDefPositions();
-        const expressionNodesRanges = visitor.getExpressionNodesRanges();
-        const symbolNodesPositions = visitor.getSymbolNodesPositions();
-
-        const noOfTypes = this.getNoOfTypes(visitor.getNoOfParams(), expressionNodesRanges.length, symbolNodesPositions.length);
-        const fileUri = URI.file(context.currentFile.path).toString();
-
-        const promises = [
-            await this.setTypesForFnParamsAndReturnType(fileUri, fnDefPositions, langServerRpcClient),
-            await this.setTypesForSymbol(fileUri, symbolNodesPositions, langServerRpcClient),
-            await this.setTypesForExpressions(fileUri, expressionNodesRanges, langServerRpcClient)
-        ];
-
-        await Promise.allSettled(promises);
-        if (this.typeDescriptors.size === noOfTypes) {
-            this.status = TypeStoreStatus.Loaded;
-        }
-    }
-
-    async setTypesForExpressions(
-        fileUri: string,
-        expressionNodesRanges: ExpressionRange[],
-        langServerRpcClient: LangClientRpcClient) {
-
-        const typesFromExpression = await langServerRpcClient.getTypeFromExpression({
-            documentIdentifier: {
-                uri: fileUri
-            },
-            expressionRanges: expressionNodesRanges
-        });
-
-        for (const {type, requestedRange} of typesFromExpression.types) {
-            this.setTypeDescriptors(type, requestedRange.startLine, requestedRange.endLine);
-        }
-    }
-
-    async setTypesForSymbol(
-        fileUri: string,
-        symbolNodesPositions: LinePosition[],
-        langServerRpcClient: LangClientRpcClient) {
-
-        const typesFromSymbol = await langServerRpcClient.getTypeFromSymbol({
-            documentIdentifier: {
-                uri: fileUri
-            },
-            positions: symbolNodesPositions
-        });
-
-        for (const {type, requestedPosition} of typesFromSymbol.types) {
-            this.setTypeDescriptors(type, requestedPosition);
-        }
-    }
-
-    async setTypesForFnParamsAndReturnType(
-        fileUri: string,
-        fnDefPositions: FnDefPositions,
-        langServerRpcClient: LangClientRpcClient) {
-
-        if (fnDefPositions.fnNamePosition === undefined || fnDefPositions.returnTypeDescPosition === undefined) {
-            return;
-        }
-
-        const FnParamsAndReturnType = await langServerRpcClient.getTypesFromFnDefinition({
-            documentIdentifier: {
-                uri: fileUri
-            },
-            fnPosition: fnDefPositions.fnNamePosition,
-            returnTypeDescPosition: fnDefPositions.returnTypeDescPosition
-        });
-
-        for (const {type, requestedPosition} of FnParamsAndReturnType.types) {
-            this.setTypeDescriptors(type, requestedPosition);
-        }
-    }
-
-    setTypeDescriptors(type: TypeField, startPosition: LinePosition, endPosition?: LinePosition) {
-        if (startPosition) {
-            const position: NodePosition = {
-                startLine: startPosition.line,
-                startColumn: startPosition.offset,
-                endLine: endPosition ? endPosition.line : startPosition.line,
-                endColumn: endPosition ? endPosition.offset : startPosition.offset,
-            };
-
-            // Check if a matching position already exists in the map
-            const existingPosition = Array.from(this.typeDescriptors.keys()).find(
-                pos => isPositionsEquals(pos, position)
-            );
-
-            if (existingPosition) {
-                this.typeDescriptors.set(existingPosition, type);
-            } else {
-                this.typeDescriptors.set(position, type);
-            }
-        }
-    }
-
-    getNoOfTypes(noOfParams: number, noOfExpressions: number, noOfSymbols: number) {
-        const hasReturnType = this.stNode.functionSignature?.returnTypeDesc
-            && this.stNode.functionSignature.returnTypeDesc.type;
-        return noOfParams + noOfExpressions + noOfSymbols + (hasReturnType ? 1 : 0);
-    }
-
-    public getTypeDescriptor(position : NodePosition) : TypeField {
-        for (const [key, value] of this.typeDescriptors) {
-            if (isPositionsEquals(key, position)) {
-                return value;
-            }
-        }
-    }
-
-    public getStatus() {
-        return this.status;
-    }
-
-    public getSTNode() {
-        return this.stNode;
-    }
-
-    public resetStatus() {
-        this.status = TypeStoreStatus.Init;
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/type-utils.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/type-utils.ts
deleted file mode 100644
index c79b01598ab..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/type-utils.ts
+++ /dev/null
@@ -1,443 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { AnydataType, PrimitiveBalType, TypeField, TypeKind } from "@wso2/ballerina-core";
-import {
-    ListConstructor,
-    MappingConstructor,
-    NodePosition,
-    SpecificField,
-    STKindChecker,
-    STNode
-} from "@wso2/syntax-tree";
-
-import { isPositionsEquals } from "../../../utils/st-utils";
-import { ArrayElement, EditableRecordField } from "../Mappings/EditableRecordField";
-
-import {
-    findTypeByInfoFromStore,
-    getBalRecFieldName,
-    getInnermostExpressionBody
-} from "./dm-utils";
-import { resolveUnionType } from "./union-type-utils";
-import { RecordFieldPortModel } from "../Port";
-import { PortModel } from "@projectstorm/react-diagrams-core";
-
-export function enrichAndProcessType(
-    typeToBeProcessed: TypeField,
-    node: STNode,
-    selectedST: STNode
-): [EditableRecordField, TypeField] {
-
-    let type = {...typeToBeProcessed};
-    let valueEnrichedType = getEnrichedRecordType(type, node, selectedST);
-    const [updatedType, isUpdated] = addMissingTypes(valueEnrichedType);
-    if (isUpdated) {
-        type = updatedType;
-        valueEnrichedType = getEnrichedRecordType(type, node, selectedST);
-    }
-    return [valueEnrichedType, type];
-}
-
-export function getEnrichedRecordType(
-    type: TypeField,
-    node: STNode,
-    selectedST: STNode,
-    parentType?: EditableRecordField,
-    childrenTypes?: EditableRecordField[],
-    isRecursiveType?: boolean
-): EditableRecordField {
-
-    let editableRecordField: EditableRecordField = null;
-    let valueNode: STNode;
-    let nextNode: STNode;
-    let originalType: TypeField = type;
-    let isRecursive = isRecursiveType;
-
-    if (!type.typeName && type?.typeInfo) {
-        type = findTypeByInfoFromStore(type.typeInfo) || type;
-        isRecursive = true;
-    }
-    if (type.typeName === PrimitiveBalType.Union && type?.resolvedUnionType && !Array.isArray(type?.resolvedUnionType)) {
-        originalType = type;
-        type = type.resolvedUnionType;
-    }
-
-    if (parentType) {
-        [valueNode, nextNode] = getValueNodeAndNextNodeForParentType(node, parentType, originalType, selectedST);
-    } else {
-        valueNode = node;
-        nextNode = getNextNodeForNoParentType(node);
-    }
-
-    editableRecordField = new EditableRecordField(type, valueNode, parentType, originalType);
-
-    if (type.typeName === PrimitiveBalType.Record && (!isRecursiveType || node)) {
-        addChildrenTypes(type, childrenTypes, nextNode, selectedST, editableRecordField, isRecursive);
-    } else if (type.typeName === PrimitiveBalType.Array && type?.memberType && (!isRecursiveType || node)) {
-        if (nextNode) {
-            addEnrichedArrayElements(nextNode, type, selectedST, editableRecordField, childrenTypes, isRecursive);
-        } else {
-            addArrayElements(type, parentType, selectedST, editableRecordField, childrenTypes, isRecursive);
-        }
-    }
-
-    const [updatedType, hasEnrichedWithUnionType] = addResolvedUnionTypes(editableRecordField)
-    if (hasEnrichedWithUnionType) {
-        type = updatedType;
-        editableRecordField = getEnrichedRecordType(type, node, selectedST, parentType, childrenTypes, isRecursive);
-    }
-
-    return editableRecordField;
-}
-
-export function getEnrichedPrimitiveType(
-    field: TypeField,
-    node: STNode,
-    selectedST: STNode,
-    parentType?: EditableRecordField,
-    childrenTypes?: EditableRecordField[],
-    isRecursiveType?: boolean
-) {
-    const members: ArrayElement[] = [];
-
-    const childType = getEnrichedRecordType(field, node, selectedST, parentType, childrenTypes, isRecursiveType);
-
-    if (childType) {
-        members.push({
-            member: childType,
-            elementNode: node
-        });
-    }
-
-    return members;
-}
-
-export function getEnrichedArrayType(
-    field: TypeField,
-    node: ListConstructor,
-    selectedST: STNode,
-    parentType?: EditableRecordField,
-    childrenTypes?: EditableRecordField[],
-    isSelectClauseExpr?: boolean,
-    isRecursiveType?: boolean
-) {
-    const members: ArrayElement[] = [];
-
-    const expressions = node.expressions.filter((expr) => !STKindChecker.isCommaToken(expr));
-    const fields = new Array(expressions.length).fill(field);
-    if (isSelectClauseExpr && field.typeName === PrimitiveBalType.Array) {
-        return getEnrichedPrimitiveType(field, node, selectedST, parentType, childrenTypes, isRecursiveType);
-    } else if (field.typeName === PrimitiveBalType.Union && Array.isArray(field.resolvedUnionType)) {
-        field.resolvedUnionType.forEach((type, index) => {
-            if (type) {
-                fields[index] = type;
-            } else {
-                fields[index].resolvedUnionType = undefined;
-            }
-        });
-    }
-
-    expressions.forEach((expr, index) => {
-        const type = fields[index];
-        if (type) {
-            const childType = getEnrichedRecordType(type, expr, selectedST, parentType, childrenTypes, isRecursiveType);
-
-            if (childType) {
-                members.push({
-                    member: childType,
-                    elementNode: expr
-                });
-            }
-        }
-    });
-
-    return members;
-}
-
-export function addMissingTypes(field: EditableRecordField): [TypeField, boolean] {
-    let type = { ...field.type };
-    const value = field.value;
-    let hasTypeUpdated = false;
-
-    if (type.typeName === AnydataType && value) {
-        type = constructTypeFromSTNode(value, type?.name);
-        hasTypeUpdated = true;
-    } else if (type.typeName === PrimitiveBalType.Record) {
-        type.fields = field.childrenTypes?.map((child) => {
-            const [updatedType, isUpdated] = addMissingTypes(child);
-            hasTypeUpdated = hasTypeUpdated || isUpdated;
-            return updatedType;
-        });
-    } else if (type.typeName === PrimitiveBalType.Array) {
-        if (field?.elements && field.elements.length > 0) {
-            const [updatedType, isUpdated] = addMissingTypes(field.elements[0].member);
-            hasTypeUpdated = hasTypeUpdated || isUpdated;
-            type.memberType = updatedType;
-        }
-    }
-
-    return [type, hasTypeUpdated];
-}
-
-export function addResolvedUnionTypes(field: EditableRecordField): [TypeField, boolean] {
-    const type = { ...field.type };
-    const value = field.value;
-    let hasTypeUpdated = false;
-
-    if (type.typeName === PrimitiveBalType.Union && value) {
-        const resolvedType = resolveUnionType(value, type);
-        if (resolvedType) {
-            type.resolvedUnionType = resolvedType;
-            hasTypeUpdated = true;
-        }
-    } else if (type.typeName === PrimitiveBalType.Record) {
-        type.fields = field.childrenTypes?.map((child) => {
-            const [updatedType, isUpdated] = addResolvedUnionTypes(child);
-            hasTypeUpdated = hasTypeUpdated || isUpdated;
-            return updatedType;
-        });
-    } else if (type.typeName === PrimitiveBalType.Array) {
-        if (type.memberType.typeName === PrimitiveBalType.Union && value) {
-            type.memberType.resolvedUnionType = field.elements?.map(element => {
-                const [updatedType, isUpdated] = addResolvedUnionTypes(element.member);
-                hasTypeUpdated = hasTypeUpdated || isUpdated;
-                element.member.type = updatedType;
-                return !Array.isArray(updatedType.resolvedUnionType) && updatedType.resolvedUnionType;
-            });
-        } else if (field?.elements && field.elements.length > 0) {
-            const [updatedType, isUpdated] = addResolvedUnionTypes(field.elements[0].member);
-            hasTypeUpdated = hasTypeUpdated || isUpdated;
-            type.memberType = updatedType;
-        }
-    }
-
-    return [type, hasTypeUpdated];
-}
-
-export function constructTypeFromSTNode(node: STNode, fieldName?: string): TypeField {
-    let type: TypeField;
-    if (STKindChecker.isMappingConstructor(node)) {
-        type = {
-            typeName: PrimitiveBalType.Record,
-            name: fieldName ? fieldName : null,
-            fields: (node.fields.filter(field => STKindChecker.isSpecificField(field)) as SpecificField[]).map(field => {
-                return constructTypeFromSTNode(field);
-            }),
-            originalTypeName: AnydataType
-        }
-    } else if (STKindChecker.isListConstructor(node)) {
-        type = {
-            typeName: PrimitiveBalType.Array,
-            name: fieldName ? fieldName : null,
-            originalTypeName: AnydataType
-        }
-        if (node.expressions.length > 0) {
-            type.memberType = constructTypeFromSTNode(node.expressions[0]);
-        }
-    } else if (STKindChecker.isQueryExpression(node)) {
-        type = {
-            typeName: PrimitiveBalType.Array,
-            name: fieldName ? fieldName : null,
-            memberType: constructTypeFromSTNode((node?.selectClause || node?.resultClause).expression)
-        }
-    } else if (STKindChecker.isSpecificField(node)) {
-        const valueExpr = node.valueExpr;
-        if (!STKindChecker.isMappingConstructor(valueExpr)
-            && !STKindChecker.isListConstructor(valueExpr)
-            && !STKindChecker.isQueryExpression(valueExpr))
-        {
-            type = {
-                typeName: AnydataType,
-                name: node.fieldName.value
-            }
-        } else {
-            return constructTypeFromSTNode(node.valueExpr, node.fieldName.value);
-        }
-    } else {
-        type = {
-            typeName: AnydataType
-        }
-    }
-
-    return type;
-}
-
-export function getDMTypeDim(dmType: TypeField) {
-    let dim = 0;
-    while (dmType.typeName == TypeKind.Array) {
-        dim++;
-        dmType = dmType.memberType;
-    }
-    return dim;
-}
-
-export function canPerformAggregation(targetPort: PortModel) {
-    return targetPort instanceof RecordFieldPortModel
-        && (targetPort.field.typeName === PrimitiveBalType.Int
-            || targetPort.field.typeName === PrimitiveBalType.Float
-            || targetPort.field.typeName === PrimitiveBalType.Decimal);
-};
-
-function getValueNodeAndNextNodeForParentType(
-    node: STNode,
-    parentType: EditableRecordField,
-    originalType: TypeField,
-    selectedST: STNode
-): [STNode, STNode] {
-
-    const innerExpr = getInnermostExpressionBody(node);
-    if (innerExpr && STKindChecker.isMappingConstructor(innerExpr)) {
-        const specificField: SpecificField = innerExpr.fields.find((val) =>
-            STKindChecker.isSpecificField(val)
-            && originalType?.name
-            && val.fieldName.value === getBalRecFieldName(originalType.name)
-        ) as SpecificField;
-
-        if (parentType.type.typeName === PrimitiveBalType.Array) {
-            return [node, node];
-        } else if (specificField) {
-            return [specificField, specificField?.valueExpr];
-        }
-    } else if (innerExpr && STKindChecker.isListConstructor(innerExpr)) {
-        const mappingConstructors = innerExpr.expressions.filter((val) =>
-            STKindChecker.isMappingConstructor(val)
-        ) as MappingConstructor[];
-
-        if (mappingConstructors.length > 0) {
-            let valueNode: STNode;
-            for (const expr of mappingConstructors) {
-                valueNode = expr.fields.find(val =>
-                    STKindChecker.isSpecificField(val) && val.fieldName.value === getBalRecFieldName(originalType?.name)
-                );
-            }
-            return [valueNode || node, !valueNode && node];
-        } else {
-            return [node, node];
-        }
-    } else if (innerExpr && STKindChecker.isFunctionDefinition(selectedST)
-        && STKindChecker.isExpressionFunctionBody(selectedST.functionBody)
-        && isPositionsEquals(selectedST.functionBody.expression.position as NodePosition,
-            innerExpr.position as NodePosition))
-    {
-        return [undefined, undefined];
-    } else {
-        return [node, undefined];
-    }
-    return [undefined, undefined];
-}
-
-function getNextNodeForNoParentType(node: STNode): STNode {
-    const innerExpr = getInnermostExpressionBody(node);
-
-    if (STKindChecker.isQueryExpression(innerExpr)) {
-        const selectClause = innerExpr?.selectClause || innerExpr?.resultClause;
-        return STKindChecker.isMappingConstructor(selectClause.expression) ? selectClause.expression : node;
-    }
-    return node;
-}
-
-function addChildrenTypes(
-    type: TypeField,
-    childrenTypes: EditableRecordField[],
-    nextNode: STNode,
-    selectedST: STNode,
-    editableRecordField: EditableRecordField,
-    isRecursiveType?: boolean
-) {
-    const fields = type.fields;
-    const children = [...childrenTypes ? childrenTypes : []];
-    if (fields && !!fields.length) {
-        fields.map((field) => {
-            const childType = getEnrichedRecordType(
-                field, nextNode, selectedST, editableRecordField, childrenTypes, isRecursiveType
-            );
-            children.push(childType);
-        });
-    }
-    editableRecordField.childrenTypes = children;
-}
-
-function addEnrichedArrayElements(
-    nextNode: STNode,
-    type: TypeField,
-    selectedST: STNode,
-    editableRecordField: EditableRecordField,
-    childrenTypes?: EditableRecordField[],
-    isRecursiveType?: boolean
-) {
-    const innerExpr = getInnermostExpressionBody(nextNode);
-
-    if (STKindChecker.isQueryExpression(innerExpr)) {
-        const resultClause = innerExpr?.selectClause || innerExpr?.resultClause;
-        const selectClauseExpr = resultClause.expression;
-
-        if (STKindChecker.isMappingConstructor(selectClauseExpr)) {
-            const childType = getEnrichedRecordType(type.memberType, selectClauseExpr,
-                selectedST, editableRecordField, childrenTypes, isRecursiveType);
-            editableRecordField.elements = [{
-                member: childType,
-                elementNode: nextNode
-            }];
-        } else if (STKindChecker.isListConstructor(selectClauseExpr)) {
-            editableRecordField.elements = getEnrichedArrayType(type.memberType, selectClauseExpr,
-                selectedST, editableRecordField, undefined, true, isRecursiveType);
-        } else {
-            editableRecordField.elements = getEnrichedPrimitiveType(type.memberType, selectClauseExpr,
-                selectedST, editableRecordField, undefined, isRecursiveType);
-        }
-    } else if (STKindChecker.isMappingConstructor(innerExpr)) {
-        if (type.memberType.typeName === PrimitiveBalType.Record) {
-            const childType = getEnrichedRecordType(type.memberType, innerExpr,
-                selectedST, editableRecordField, childrenTypes, isRecursiveType);
-            editableRecordField.elements = [{
-                member: childType,
-                elementNode: nextNode
-            }];
-        } else {
-            editableRecordField.elements = getEnrichedPrimitiveType(type.memberType, innerExpr,
-                selectedST, editableRecordField, undefined, isRecursiveType);
-        }
-    } else if (STKindChecker.isListConstructor(innerExpr)) {
-        editableRecordField.elements = getEnrichedArrayType(type.memberType, innerExpr,
-            selectedST, editableRecordField, undefined, isRecursiveType);
-    } else {
-        editableRecordField.elements = getEnrichedPrimitiveType(type.memberType, innerExpr,
-            selectedST, editableRecordField, undefined, isRecursiveType);
-    }
-}
-
-function addArrayElements(
-    type: TypeField,
-    parentType: EditableRecordField,
-    selectedST: STNode,
-    editableRecordField: EditableRecordField,
-    childrenTypes?: EditableRecordField[],
-    isRecursiveType?: boolean
-) {
-    if (type.memberType.typeName === PrimitiveBalType.Record) {
-        const members: ArrayElement[] = [];
-        const childType = getEnrichedRecordType(
-            type.memberType, undefined, selectedST, parentType, childrenTypes, isRecursiveType
-        );
-        members.push({
-            member: childType,
-            elementNode: undefined
-        });
-        editableRecordField.elements = members;
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/union-type-utils.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/union-type-utils.ts
deleted file mode 100644
index 1b4983f660c..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/utils/union-type-utils.ts
+++ /dev/null
@@ -1,218 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { AnydataType, AnyType, OtherBalType, PrimitiveBalType, TypeField } from "@wso2/ballerina-core";
-import {
-	ExpressionFunctionBody,
-	SelectClause,
-	STKindChecker,
-	STNode
-} from "@wso2/syntax-tree";
-
-import { useDMStore } from "../../../store/store";
-import { TypeDescriptor } from "../Node/commons/DataMapperNode";
-
-import {
-	findTypeByInfoFromStore,
-	getExprBodyFromLetExpression,
-	getInnermostMemberTypeFromArrayType,
-	getShortenedTypeName,
-	getTypeName
-} from "./dm-utils";
-
-export interface UnionTypeInfo {
-	unionType: TypeField;
-	typeNames: string[];
-	resolvedTypeName: string;
-	isResolvedViaTypeCast: boolean;
-	valueExpr: ExpressionFunctionBody | SelectClause;
-}
-
-export const CLEAR_EXISTING_MAPPINGS_WARNING = "This will clear the existing mappings associated with current type";
-export const INCOMPATIBLE_CASTING_WARNING = "This may leads to syntax errors if the type is not matched";
-
-export function resolveUnionType(expr: STNode, unionType: TypeField): TypeField {
-	let innerExpr = expr;
-	if (STKindChecker.isLetExpression(expr)) {
-		innerExpr = getExprBodyFromLetExpression(expr);
-	} else if (STKindChecker.isSpecificField(expr)) {
-		innerExpr = expr.valueExpr;
-	}
-	const supportedTypes = getSupportedUnionTypes(unionType);
-	if (STKindChecker.isTypeCastExpression(innerExpr)) {
-		// when the expr is wrapped with a type cast
-		const castedType = innerExpr.typeCastParam?.type;
-		return unionType?.members.find((member) => {
-			return getResolvedType(member, castedType);
-		});
-	} else if (supportedTypes.length === 1) {
-		// when the specified union type is narrowed down to a single type
-		return unionType?.members.find(member => {
-			const typeName = getTypeName(member);
-			return typeName === supportedTypes[0];
-		});
-	} else {
-		// when the type is derivable from the expr
-		let typeName: string;
-		if (innerExpr.typeData?.typeSymbol && innerExpr.typeData?.typeSymbol?.signature !== "$CompilationError$") {
-			const typeSignature = innerExpr.typeData?.typeSymbol?.signature;
-			const typeSignatureSegments = typeSignature.split(':');
-			typeName = typeSignatureSegments.length === 1 ? typeSignatureSegments[0] : typeSignature.split(':')[2];
-			// If record is from an imported package
-			const orgAndModule = typeSignatureSegments[0];
-			const importStatements = useDMStore.getState().imports;
-
-			importStatements.forEach(item => {
-				if (item.includes(orgAndModule)) {
-					const importReferenceMap = useDMStore.getState().importReferenceMap;
-					const referencedName = importReferenceMap[item];
-					if (referencedName) {
-						typeName = `${referencedName}:${typeName}`;
-					}
-				}
-			});
-		}
-		if (typeName && supportedTypes.includes(typeName)) {
-			return unionType?.members.find(member => {
-				const memberName = getTypeName(member);
-				return memberName === typeName;
-			});
-		}
-	}
-}
-
-export function getResolvedType(type: TypeField, typeDesc: TypeDescriptor): TypeField {
-	const memberName = getTypeName(type).replace(/\s/g, '');
-	const typeDescSource = typeDesc.source.replace(/\s/g, '');
-	if (type.typeName === PrimitiveBalType.Union) {
-		let resolvedType: TypeField;
-		for (const member of type.members) {
-			resolvedType = getResolvedType(member, typeDesc);
-			if (resolvedType) {
-				return resolvedType;
-			}
-		}
-	} else if (memberName === typeDescSource) {
-		return type;
-	}
-}
-
-export function getUnsupportedTypesFromTypeDesc(typeDesc: STNode): string[] {
-	const unsupportedTypes: string[] = [];
-	if (STKindChecker.isUnionTypeDesc(typeDesc)) {
-		const { leftTypeDesc, rightTypeDesc } = typeDesc;
-		unsupportedTypes.push(...getUnsupportedTypesFromTypeDesc(leftTypeDesc),
-			...getUnsupportedTypesFromTypeDesc(rightTypeDesc));
-	} else if (STKindChecker.isArrayTypeDesc(typeDesc)) {
-		const filteredTypes = getUnsupportedTypesFromTypeDesc(typeDesc.memberTypeDesc).map(type => `${type}[]`);
-		unsupportedTypes.push(...filteredTypes);
-	} else if (STKindChecker.isParenthesisedTypeDesc(typeDesc)) {
-		unsupportedTypes.push(...getUnsupportedTypesFromTypeDesc(typeDesc.typedesc));
-	} else if (isUnsupportedTypeDesc(typeDesc)) {
-		unsupportedTypes.push(getShortenedTypeName(typeDesc.source));
-	}
-	return unsupportedTypes;
-}
-
-export function getUnsupportedTypesFromType(unionType: TypeField): string[] {
-	const unsupportedTypes: string[] = [];
-	for (const member of unionType?.members || []) {
-		const memberType = getTypeName(member);
-		let type: TypeField = member;
-		if (member.typeName === PrimitiveBalType.Array) {
-			type = getInnermostMemberTypeFromArrayType(member);
-		}
-		if (isUnsupportedType(type)) {
-			unsupportedTypes.push(memberType);
-		}
-	}
-	return unsupportedTypes;
-}
-
-export function getSupportedUnionTypes(typeDef: TypeField, typeDesc?: STNode): string[] {
-	if (!typeDef.typeName && typeDef.typeInfo) {
-		typeDef = findTypeByInfoFromStore(typeDef.typeInfo) || typeDef;
-	}
-	const unsupportedTypes = typeDesc
-		? getUnsupportedTypesFromTypeDesc(typeDesc)
-		: getUnsupportedTypesFromType(typeDef);
-	const allUnionTypes = getUnionTypes(typeDef);
-
-	const filteredTypes = allUnionTypes.map(unionType => {
-		const type = unionType.trim();
-		if (!unsupportedTypes.includes(type) && type !== "error") {
-			return type;
-		}
-	}).filter(type => type !== undefined);
-
-	return Array.from(new Set(filteredTypes));
-}
-
-export function getUnionTypes(unionType: TypeField): string[] {
-	const unionTypes: string[] = [];
-	if (unionType?.members !== undefined) {
-		for (const member of unionType.members) {
-			if (isUnsupportedType(member)) continue;
-			unionTypes.push(getTypeName(member));
-		}
-	}
-	return unionTypes;
-}
-
-export function isAnydataType(type: string): boolean {
-	return type === AnydataType || type === AnyType;
-}
-
-function isUnsupportedTypeDesc(typeDesc: STNode): boolean {
-	return STKindChecker.isByteTypeDesc(typeDesc)
-		|| STKindChecker.isDistinctTypeDesc(typeDesc)
-		|| STKindChecker.isFunctionTypeDesc(typeDesc)
-		|| STKindChecker.isFutureTypeDesc(typeDesc)
-		|| STKindChecker.isHandleTypeDesc(typeDesc)
-		|| STKindChecker.isIntersectionTypeDesc(typeDesc)
-		|| STKindChecker.isMapTypeDesc(typeDesc)
-		|| STKindChecker.isNeverTypeDesc(typeDesc)
-		|| STKindChecker.isObjectTypeDesc(typeDesc)
-		|| STKindChecker.isReadonlyTypeDesc(typeDesc)
-		|| STKindChecker.isSingletonTypeDesc(typeDesc)
-		|| STKindChecker.isStreamTypeDesc(typeDesc)
-		|| STKindChecker.isTableTypeDesc(typeDesc)
-		|| STKindChecker.isTupleTypeDesc(typeDesc)
-		|| STKindChecker.isTypedescTypeDesc(typeDesc)
-		|| STKindChecker.isXmlTypeDesc(typeDesc)
-		|| typeDesc?.typeData?.symbol?.definition?.kind === "ENUM";
-}
-
-function isUnsupportedType(type: TypeField): boolean {
-	if (type.typeName === PrimitiveBalType.Union) {
-		return type.members.some(member => {
-			return isUnsupportedType(member);
-		});
-	} else if (type.typeName === PrimitiveBalType.Array) {
-		return isUnsupportedType(getInnermostMemberTypeFromArrayType(type));
-	}
-	return type.typeName === PrimitiveBalType.Error
-		|| type.typeName === PrimitiveBalType.Enum
-		|| type.typeName === PrimitiveBalType.Json
-		|| type.typeName === PrimitiveBalType.Var
-		|| type.typeName === PrimitiveBalType.Xml
-		|| type.typeName === OtherBalType.Map
-		|| type.typeName === OtherBalType.Object
-		|| type.typeName === OtherBalType.Stream
-		|| type.typeName === OtherBalType.Table
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/FunctionCallFindingVisitor.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/FunctionCallFindingVisitor.ts
deleted file mode 100644
index ef8fe3c595b..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/FunctionCallFindingVisitor.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { LinePosition } from "@wso2/ballerina-core";
-import {
-    FunctionCall,
-    STKindChecker,
-    Visitor
-} from "@wso2/syntax-tree";
-
-export interface FunctionCallInfo {
-    fnPosition: LinePosition;
-    fnName: string;
-}
-
-export class FunctionCallFindingVisitor implements Visitor {
-    private readonly fnCalls: FunctionCallInfo[];
-
-    constructor() {
-        this.fnCalls = [];
-    }
-
-    public beginVisitFunctionCall(node: FunctionCall) {
-        this.fnCalls.push({
-            fnPosition: {
-                line: node.position.startLine,
-                offset: node.position.startColumn
-            },
-            fnName: STKindChecker.isSimpleNameReference(node.functionName)
-                ? node.functionName.name.value
-                : node.functionName.identifier.value
-        });
-    }
-
-    public getFunctionCallPositions(){
-        return this.fnCalls.map(fnCall => fnCall.fnPosition);
-    }
-
-    public getFunctionCalls(){
-        return this.fnCalls;
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/InputNodeFindingVisitor.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/InputNodeFindingVisitor.ts
deleted file mode 100644
index 9fc8dccde34..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/InputNodeFindingVisitor.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import {
-    FieldAccess,
-    OptionalFieldAccess,
-    SimpleNameReference,
-    STKindChecker,
-    STNode,
-    Visitor
-} from "@wso2/syntax-tree";
-
-export class InputNodeFindingVisitor implements Visitor {
-    private inputNodes: (FieldAccess | OptionalFieldAccess | SimpleNameReference)[];
-    private queryExpressionDepth: number;
-
-    constructor() {
-        this.inputNodes = []
-        this.queryExpressionDepth = 0
-    }
-
-    public beginVisitFieldAccess(node: FieldAccess, parent?: STNode) {
-        if ((!parent || (!STKindChecker.isFieldAccess(parent) && !STKindChecker.isOptionalFieldAccess(parent)))
-            && this.queryExpressionDepth === 0) {
-            this.inputNodes.push(node)
-        }
-    }
-
-    public beginVisitOptionalFieldAccess(node: OptionalFieldAccess, parent?: STNode) {
-        if ((!parent || (!STKindChecker.isFieldAccess(parent) && !STKindChecker.isOptionalFieldAccess(parent)))
-            && this.queryExpressionDepth === 0) {
-            this.inputNodes.push(node)
-        }
-    }
-
-    public beginVisitSimpleNameReference(node: SimpleNameReference, parent?: STNode) {
-        if (
-            STKindChecker.isIdentifierToken(node.name) &&
-            (!parent ||
-                (parent &&
-                    !STKindChecker.isFieldAccess(parent) &&
-                    !STKindChecker.isOptionalFieldAccess(parent) &&
-                    !STKindChecker.isFunctionCall(parent)
-                )) &&
-            this.queryExpressionDepth === 0
-        ) {
-            this.inputNodes.push(node);
-        }
-    }
-
-    public beginVisitQueryExpression() {
-        this.queryExpressionDepth += 1;
-    }
-
-    public endVisitQueryExpression(){
-        this.queryExpressionDepth -= 1;
-    }
-
-    public getFieldAccessNodes() {
-        return this.inputNodes
-    }
-
-}
-
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/LinkDeletingVistior.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/LinkDeletingVistior.ts
deleted file mode 100644
index 20f6c375aa6..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/LinkDeletingVistior.ts
+++ /dev/null
@@ -1,244 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import {
-    BinaryExpression,
-    FunctionCall,
-    ListConstructor,
-    MappingConstructor,
-    NodePosition,
-    STKindChecker,
-    STNode,
-    traversNode,
-    Visitor,
-} from "@wso2/syntax-tree";
-
-import { isPositionsEquals } from "../../../utils/st-utils";
-import { getExprBodyFromLetExpression, getInnermostExpressionBody } from "../utils/dm-utils";
-
-export class LinkDeletingVisitor implements Visitor {
-    /** NodePosition of the specific field or mapping construct that needs to be removed */
-    private fieldPosition: NodePosition;
-    /** Node of the root level mapping construct which will be traversed to find the delete position */
-    private rootMapConstruct: STNode;
-    /** Node position that needs to be removed when deleting a link in a mapping construct */
-    private deletePosition: NodePosition;
-
-    /**
-     * Visitor to traverse and identify the delete position when deleting a link
-     * @param fieldPosition NodePosition of the specific field or mapping construct that needs to be removed
-     * @param rootMapConstruct Node of the root level mapping construct
-     */
-    constructor(fieldPosition: NodePosition, rootMapConstruct: STNode) {
-        this.fieldPosition = fieldPosition;
-        this.rootMapConstruct = STKindChecker.isLetExpression(rootMapConstruct)
-            ? getExprBodyFromLetExpression(rootMapConstruct)
-            : rootMapConstruct;
-        this.deletePosition = null;
-    }
-
-    public beginVisitMappingConstructor(node: MappingConstructor) {
-        this.findDeletePosition(node, false);
-    }
-
-    public beginVisitListConstructor(node: ListConstructor): void {
-        this.findDeletePositionWithinListConstructor(node);
-    }
-
-    public beginVisitBinaryExpression(node: BinaryExpression): void {
-        if (this.deletePosition === null) {
-            // LHS could be another binary expression or field access node
-            // RHS is always field access node
-
-            if (node.lhsExpr && STKindChecker.isFieldAccess(node.lhsExpr)
-                && isPositionsEquals(this.fieldPosition, node.lhsExpr.position as NodePosition)) {
-                // If LHS is a field access node to be deleted
-                // Then also delete the operator right to it
-                this.deletePosition = {
-                    ...(node.lhsExpr.position as NodePosition),
-                    endLine: (node.operator.position as NodePosition)?.endLine,
-                    endColumn: (node.operator.position as NodePosition)?.endColumn,
-                }
-            }else if (node.rhsExpr && STKindChecker.isFieldAccess(node.rhsExpr)
-                    && isPositionsEquals(this.fieldPosition, node.rhsExpr.position as NodePosition)){
-                // If RHS is a field access node to be deleted
-                // Then also delete the operator left to it
-                this.deletePosition = {
-                    ...(node.rhsExpr.position as NodePosition),
-                    startLine: (node.operator.position as NodePosition)?.startLine,
-                    startColumn: (node.operator.position as NodePosition)?.startColumn,
-                }
-            }
-        }
-    }
-
-    public beginVisitFunctionCall(node: FunctionCall, parent?: STNode): void {
-        if (this.deletePosition === null) {
-            const argIndex = node.arguments.findIndex((arg: STNode) =>
-                isPositionsEquals(this.fieldPosition, arg.position as NodePosition)
-            );
-
-            if (argIndex !== -1) {
-                const selectedArg = node.arguments[argIndex];
-                const previousArg = node.arguments[argIndex - 1];
-                const nextArg = node.arguments[argIndex + 1];
-                const isLastArg = argIndex + 1 === node.arguments.length;
-
-                if (node.arguments.length === 1) {
-                    // If it's the only argument, just delete the argument
-                    this.deletePosition = selectedArg.position as NodePosition;
-                } else if (previousArg && STKindChecker.isCommaToken(previousArg) && isLastArg) {
-                    // If it's the last argument, include the previous comma in deletion
-                    this.deletePosition = {
-                        ...(selectedArg.position as NodePosition),
-                        startLine: (previousArg.position as NodePosition)?.startLine,
-                        startColumn: (previousArg.position as NodePosition)?.startColumn,
-                    };
-                } else if (nextArg && STKindChecker.isCommaToken(nextArg)) {
-                    // If it's not the last argument, include the next comma in deletion
-                    this.deletePosition = {
-                        ...(selectedArg.position as NodePosition),
-                        endLine: (nextArg.position as NodePosition)?.endLine,
-                        endColumn: (nextArg.position as NodePosition)?.endColumn,
-                    };
-                }
-            }
-        }
-    }
-
-    /**
-     * Traverse and find the position that needs to be removed
-     * @param node Mapping constructor node which will be checked for the item to delete
-     * @param isChildOfList Is mapping constructor, a child of a list constructor
-     */
-    private findDeletePosition(node: MappingConstructor, isChildOfList: boolean) {
-        if (this.deletePosition === null) {
-            const deleteIndex = node.fields.findIndex((field: STNode) => {
-                if (STKindChecker.isSpecificField(field)) {
-                    const innerExprBody = getInnermostExpressionBody(field.valueExpr);
-                    if (STKindChecker.isMappingConstructor(innerExprBody)) {
-                        // If its a nested map constructor, then compare with the value expression position
-                        if (isPositionsEquals(this.fieldPosition, (innerExprBody.position as NodePosition))) {
-                            return true;
-                        }
-                    }
-                }
-                // Else if its a normal field access elements
-                return isPositionsEquals(this.fieldPosition, (field.position as NodePosition));
-            });
-
-            if (deleteIndex !== -1) {
-                /** Field to be deleted */
-                const selected = node.fields[deleteIndex];
-                /** Comma element prior to the link to be deleted */
-                const previous = node.fields[deleteIndex - 1];
-                /** Comma element after to the link to be deleted */
-                const next = node.fields[deleteIndex + 1];
-                /** Is field, the last element in the mapping construct */
-                const isLastElement = deleteIndex + 1 === node.fields.length;
-
-                let updatedDeletePosition = this.fieldPosition;
-                if (STKindChecker.isSpecificField(selected)) {
-                    const innerExpr = getInnermostExpressionBody(selected.valueExpr);
-                    if (STKindChecker.isMappingConstructor(innerExpr)) {
-                        // If its a nested map constructor, then select the delete position as the selected node position
-                        updatedDeletePosition = (selected.position as NodePosition);
-                    }
-                }
-
-                if (node.fields.length === 1) {
-                    // If only one element in the construct (Could be a root level or sub level map construct)
-                    if (isPositionsEquals((node.position as NodePosition),
-                                            (this.rootMapConstruct.position as NodePosition))
-                        || isChildOfList) {
-                        // If only single element in the root level mapping, then only delete that link
-                        // Or if the last element is within a mapping construct which is within a list constructor
-                        this.deletePosition = updatedDeletePosition;
-                    } else {
-                        // if there's only a single element in a sub level record mapping
-                        // Then, will need to delete record mapping construct element itself
-                        // Therefore rerunning the same visitor with the parent record map as the one to delete
-                        const linkDeleteVisitor = new LinkDeletingVisitor((node.position as NodePosition),
-                                                                        this.rootMapConstruct);
-                        traversNode(this.rootMapConstruct, linkDeleteVisitor);
-                        this.deletePosition = linkDeleteVisitor.getPositionToDelete();
-                    }
-                } else if (previous && STKindChecker.isCommaToken(previous) && isLastElement) {
-                    // if its the last element, need to delete previous comma as well
-                    this.deletePosition = {
-                        ...updatedDeletePosition,
-                        startLine: (previous.position as NodePosition)?.startLine,
-                        startColumn: (previous.position as NodePosition)?.startColumn,
-                    };
-                } else if (next && STKindChecker.isCommaToken(next)) {
-                    // When there are multiple mappings and user tries to delete a link other than the last one
-                    // Then, will need to delete the next comma node as well
-                    this.deletePosition = {
-                        ...updatedDeletePosition,
-                        endLine: (next.position as NodePosition)?.endLine,
-                        endColumn: (next.position as NodePosition)?.endColumn,
-                    };
-                }
-            }
-        }
-    }
-
-    private findDeletePositionWithinListConstructor(node: ListConstructor) {
-        if (this.deletePosition === null) {
-            const deleteIndex = node.expressions.findIndex((expression: STNode) => {
-                return isPositionsEquals(this.fieldPosition, expression.position as NodePosition);
-            });
-
-            if (deleteIndex !== -1) {
-                const selected = node.expressions[deleteIndex];
-                const previous = node.expressions[deleteIndex - 1];
-                const next = node.expressions[deleteIndex + 1];
-                const isLastElement = deleteIndex + 1 === node.expressions.length;
-
-                const updatedDeletePosition = selected.position as NodePosition;
-
-                if (node.expressions.length === 1) {
-                    this.deletePosition = updatedDeletePosition;
-                } else if (previous && STKindChecker.isCommaToken(previous) && isLastElement) {
-                    this.deletePosition = {
-                        ...updatedDeletePosition,
-                        startLine: (previous.position as NodePosition)?.startLine,
-                        startColumn: (previous.position as NodePosition)?.startColumn,
-                    };
-                } else if (next && STKindChecker.isCommaToken(next)) {
-                    this.deletePosition = {
-                        ...updatedDeletePosition,
-                        endLine: (next.position as NodePosition)?.endLine,
-                        endColumn: (next.position as NodePosition)?.endColumn,
-                    };
-                }
-            } else {
-                for (const item of node.expressions) {
-                    const innerExpr = getInnermostExpressionBody(item);
-                    if (STKindChecker.isMappingConstructor(innerExpr)) {
-                        this.findDeletePosition(innerExpr, true);
-                    }
-                }
-            }
-        }
-    }
-
-    /** Get the Node position to be removed when deleting a link in a mapping construct */
-    getPositionToDelete(): NodePosition {
-        return this.deletePosition;
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/ModuleVariablesFindingVisitor.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/ModuleVariablesFindingVisitor.ts
deleted file mode 100644
index 9a6ed066291..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/ModuleVariablesFindingVisitor.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { ComponentInfo } from "@wso2/ballerina-core";
-import {
-    FieldAccess,
-    OptionalFieldAccess,
-    SimpleNameReference,
-    STKindChecker,
-    STNode,
-    Visitor,
-} from "@wso2/syntax-tree";
-
-import { ModuleVariable, ModuleVarKind } from "../Node/ModuleVariable";
-
-export class ModuleVariablesFindingVisitor implements Visitor {
-    private readonly moduleVariables: Map<string, ModuleVariable>;
-    private readonly enumTypes: Map<string, ModuleVariable>;
-    private queryExpressionDepth: number;
-    private moduleVarDecls: ComponentInfo[];
-    private constDecls: ComponentInfo[];
-
-    constructor(
-        moduleVariables: any
-    ) {
-        this.moduleVariables = new Map<string, ModuleVariable>();
-        this.enumTypes = new Map<string, ModuleVariable>();
-        this.queryExpressionDepth = 0;
-
-        this.moduleVarDecls = moduleVariables ? moduleVariables.moduleVarDecls : [];
-        this.constDecls = moduleVariables ? moduleVariables.constDecls : [];
-    }
-
-    public beginVisitFieldAccess(node: FieldAccess, parent?: STNode) {
-        if (
-            (!parent ||
-                (!STKindChecker.isFieldAccess(parent) &&
-                    !STKindChecker.isOptionalFieldAccess(parent))) &&
-            this.queryExpressionDepth === 0
-        ) {
-            const varName = node.source.trim().split(".")[0];
-            const moduleVarKind = this.getModuleVarKind(varName);
-            if (moduleVarKind !== undefined) {
-                this.moduleVariables.set(varName, {
-                    kind: moduleVarKind,
-                    node,
-                });
-            }
-        }
-    }
-
-    public beginVisitOptionalFieldAccess(node: OptionalFieldAccess, parent?: STNode) {
-        if (
-            (!parent ||
-                (!STKindChecker.isFieldAccess(parent) &&
-                    !STKindChecker.isOptionalFieldAccess(parent))) &&
-            this.queryExpressionDepth === 0
-        ) {
-            const varName = node.source.trim().split(".")[0];
-            const moduleVarKind = this.getModuleVarKind(varName);
-            if (moduleVarKind !== undefined) {
-                this.moduleVariables.set(varName, {
-                    kind: moduleVarKind,
-                    node,
-                });
-            }
-        }
-    }
-
-    public beginVisitSimpleNameReference(node: SimpleNameReference, parent?: STNode) {
-        if (
-            STKindChecker.isIdentifierToken(node.name) &&
-            (!parent ||
-                (parent &&
-                    !STKindChecker.isFieldAccess(parent) &&
-                    !STKindChecker.isOptionalFieldAccess(parent))) &&
-            this.queryExpressionDepth === 0
-        ) {
-            const moduleVarKind = this.getModuleVarKind(node.name.value, node);
-            if (moduleVarKind !== undefined && moduleVarKind === ModuleVarKind.Enum) {
-                this.enumTypes.set(node.name.value, {
-                    kind: moduleVarKind,
-                    node,
-                });
-            } else if (moduleVarKind !== undefined) {
-                this.moduleVariables.set(node.name.value, {
-                    kind: moduleVarKind,
-                    node,
-                });
-            }
-        }
-    }
-
-    public beginVisitQueryExpression() {
-        this.queryExpressionDepth += 1;
-    }
-
-    public endVisitQueryExpression() {
-        this.queryExpressionDepth -= 1;
-    }
-
-    private getModuleVarKind(varName: string, node?: STNode) {
-        let kind: ModuleVarKind;
-
-        this.constDecls?.forEach((component) => {
-            if (component.name.trim() === varName && !kind) {
-                kind = ModuleVarKind.Constant;
-            }
-        });
-        this.moduleVarDecls?.forEach((component) => {
-            if (component.name.trim() === varName && !kind) {
-                kind = ModuleVarKind.Variable;
-            }
-        });
-        if (node && node.typeData?.symbol?.kind === "ENUM_MEMBER"){
-            kind = ModuleVarKind.Enum;
-        }
-
-        return kind;
-    }
-
-    public getModuleVariables() {
-        return this.moduleVariables;
-    }
-
-    public getEnumTypes() {
-        return this.enumTypes;
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/NodeFindingVisitorByPosition.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/NodeFindingVisitorByPosition.ts
deleted file mode 100644
index 76b2f06270e..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/NodeFindingVisitorByPosition.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import {
-    NodePosition,
-    STNode,
-    Visitor,
-} from "@wso2/syntax-tree";
-
-import { isPositionsEquals } from "../../../utils/st-utils";
-
-export class NodeFindingVisitorByPosition implements Visitor {
-    private foundNode: STNode;
-    private parentNode: STNode;
-
-    constructor(private position: NodePosition) {}
-
-    public beginVisitSTNode(node: STNode, parent?: STNode): void {
-        if (!this.foundNode) {
-            if (isPositionsEquals(node.position, this.position)) {
-                this.foundNode = node;
-                this.parentNode = parent;
-            }
-        }
-    }
-
-    public getNode() {
-        return this.foundNode;
-    }
-
-    public getParentNode() {
-        return this.parentNode;
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/NodeInitVisitor.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/NodeInitVisitor.ts
deleted file mode 100644
index bc15f80a5ab..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/NodeInitVisitor.ts
+++ /dev/null
@@ -1,1012 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { AnydataType, PrimitiveBalType } from "@wso2/ballerina-core";
-import {
-    CaptureBindingPattern,
-    ExpressionFunctionBody,
-    FunctionDefinition,
-    IdentifierToken,
-    JoinClause,
-    LetClause,
-    LetVarDecl,
-    ListConstructor,
-    MappingConstructor,
-    NodePosition,
-    QueryExpression,
-    SelectClause,
-    SpecificField,
-    STKindChecker,
-    STNode,
-    traversNode,
-    Visitor
-} from "@wso2/syntax-tree";
-import { DataMapperContext } from "../../../utils/DataMapperContext/DataMapperContext";
-import { hasErrorDiagnosis, isPositionsEquals } from "../../../utils/st-utils";
-import { SelectionState } from "../../DataMapper/DataMapper";
-import {
-    MappingConstructorNode,
-    QueryExpressionNode,
-    RequiredParamNode
-} from "../Node";
-import { DataMapperNodeModel } from "../Node/commons/DataMapperNode";
-import { EnumTypeNode } from "../Node/EnumType";
-import { ExpandedMappingHeaderNode } from "../Node/ExpandedMappingHeader";
-import { FromClauseNode } from "../Node/FromClause";
-import { JoinClauseNode } from "../Node/JoinClause";
-import { LetClauseNode } from "../Node/LetClause";
-import { LetExpressionNode } from "../Node/LetExpression";
-import { LinkConnectorNode } from "../Node/LinkConnector";
-import { ListConstructorNode } from "../Node/ListConstructor";
-import { ModuleVariable, ModuleVariableNode } from "../Node/ModuleVariable";
-import { PrimitiveTypeNode } from "../Node/PrimitiveType";
-import { UnionTypeNode } from "../Node/UnionType";
-import { UnsupportedExprNodeKind, UnsupportedIONode } from "../Node/UnsupportedIO";
-import { EXPANDED_QUERY_INPUT_NODE_PREFIX, FUNCTION_BODY_QUERY, OFFSETS, SELECT_CALUSE_QUERY } from "../utils/constants";
-import {
-    getEnumTypes,
-    getExprBodyFromLetExpression,
-    getExprBodyFromTypeCastExpression,
-    getFnDefForFnCall,
-    getFromClauseNodeLabel,
-    getInnermostExpressionBody,
-    getInputNodes,
-    getModuleVariables,
-    getPrevOutputType,
-    getSubArrayType,
-    getTypeFromStore,
-    getTypeOfOutput,
-    isComplexExpression,
-    isFnBodyQueryExpr,
-    isIndexedExpression,
-    isSelectClauseQueryExpr
-} from "../utils/dm-utils";
-import { constructTypeFromSTNode } from "../utils/type-utils";
-
-import { QueryParentFindingVisitor } from "./QueryParentFindingVisitor"
-import { QueryExprFindingVisitorByPosition } from "./QueryExprFindingVisitorByPosition";
-import { DefaultPortModel } from "@projectstorm/react-diagrams";
-
-const INNER_FROM_CLAUSE_ERROR_MESSAGE = `This mapping contains a query expression with inner 'from' clauses, which are not currently supported in the visual data mapper.
-Please switch to the code editor to continue working with this mapping.`;
-
-export class NodeInitVisitor implements Visitor {
-
-    private inputParamNodes: DataMapperNodeModel[] = [];
-    private outputNode: DataMapperNodeModel;
-    private intermediateNodes: DataMapperNodeModel[] = [];
-    private otherInputNodes: DataMapperNodeModel[] = [];
-    private queryNode: DataMapperNodeModel;
-    private mapIdentifiers: STNode[] = [];
-    private isWithinQuery = 0;
-    private isWithinLetVarDecl = 0;
-
-    constructor(
-        private context: DataMapperContext,
-        private selection: SelectionState
-    ) { }
-
-    beginVisitFunctionDefinition(node: FunctionDefinition) {
-        const typeDesc = node.functionSignature?.returnTypeDesc && node.functionSignature.returnTypeDesc.type;
-        const exprFuncBody = STKindChecker.isExpressionFunctionBody(node.functionBody) && node.functionBody;
-        let moduleVariables: Map<string, ModuleVariable> = getModuleVariables(exprFuncBody, this.context.moduleComponents);
-        let enumTypes: Map<string, ModuleVariable> = getEnumTypes(exprFuncBody, this.context.moduleComponents);
-        let isFnBodyQueryExpr = false;
-        if (typeDesc && exprFuncBody) {
-            let returnType = getTypeOfOutput(typeDesc, this.context.ballerinaVersion);
-
-            const isAnydataTypedField = returnType
-                && (returnType.typeName === AnydataType
-                    || (returnType.typeName === PrimitiveBalType.Array
-                        && returnType?.memberType?.typeName === AnydataType));
-            if (isAnydataTypedField) {
-                returnType = constructTypeFromSTNode(exprFuncBody.expression);
-            }
-
-            if (returnType) {
-
-                let bodyExpr: STNode = getInnermostExpressionBody(exprFuncBody.expression);
-                if (
-                    STKindChecker.isIndexedExpression(exprFuncBody.expression) &&
-                    STKindChecker.isBracedExpression(exprFuncBody.expression.containerExpression) &&
-                    STKindChecker.isQueryExpression(exprFuncBody.expression.containerExpression.expression)
-                ) {
-                    bodyExpr = exprFuncBody.expression.containerExpression.expression;
-                }
-
-                if (STKindChecker.isConditionalExpression(bodyExpr)) {
-                    this.outputNode = new UnsupportedIONode(
-                        this.context,
-                        UnsupportedExprNodeKind.Output,
-                        undefined,
-                        bodyExpr,
-                    );
-                } else if (STKindChecker.isQueryExpression(bodyExpr)) {
-                    const { queryPipeline: { fromClause, intermediateClauses } } = bodyExpr;
-
-                    const hasInnerFromClauses = intermediateClauses.some(clause => STKindChecker.isFromClause(clause));
-                    if (hasInnerFromClauses) {
-                        throw new Error(INNER_FROM_CLAUSE_ERROR_MESSAGE);
-                    }
-
-                    if (this.context.selection.selectedST.fieldPath === FUNCTION_BODY_QUERY) {
-                        isFnBodyQueryExpr = true;
-                        const selectClause = bodyExpr?.selectClause || bodyExpr?.resultClause;
-                        const intermediateClausesHeight = 100 + intermediateClauses.length * OFFSETS.INTERMEDIATE_CLAUSE_HEIGHT;
-                        if (returnType?.typeName === PrimitiveBalType.Array) {
-                            const { memberType } = returnType;
-                            if (memberType?.typeName === PrimitiveBalType.Record) {
-                                this.outputNode = new MappingConstructorNode(
-                                    this.context,
-                                    selectClause,
-                                    typeDesc,
-                                    memberType,
-                                    bodyExpr
-                                );
-                            } else if (memberType?.typeName === PrimitiveBalType.Array) {
-                                this.outputNode = new ListConstructorNode(
-                                    this.context,
-                                    selectClause,
-                                    typeDesc,
-                                    memberType,
-                                    bodyExpr
-                                );
-                            } else if (memberType?.typeName === PrimitiveBalType.Union) {
-                                this.outputNode = new UnionTypeNode(
-                                    this.context,
-                                    selectClause,
-                                    typeDesc,
-                                    memberType
-                                );
-                            } else {
-                                this.outputNode = new PrimitiveTypeNode(
-                                    this.context,
-                                    selectClause,
-                                    typeDesc,
-                                    memberType,
-                                    bodyExpr
-                                );
-                            }
-                        } else if (returnType?.typeName === PrimitiveBalType.Record) {
-                            this.outputNode = new MappingConstructorNode(
-                                this.context,
-                                selectClause,
-                                typeDesc,
-                                returnType,
-                                bodyExpr
-                            );
-                        } else if (returnType?.typeName === PrimitiveBalType.Union) {
-                            const message = "Union types within query expressions are not supported at the moment"
-                            this.outputNode = new UnsupportedIONode(
-                                this.context,
-                                UnsupportedExprNodeKind.Output,
-                                message,
-                                undefined
-                            );
-                            // TODO: Uncomment this once the union type support is added in the lang
-                            //  (https://github.com/ballerina-platform/ballerina-lang/issues/40012)
-                            // this.outputNode = new UnionTypeNode(
-                            //     this.context,
-                            //     selectClause,
-                            //     parentIdentifier,
-                            //     exprType
-                            // );
-                        } else {
-                            this.outputNode = new PrimitiveTypeNode(
-                                this.context,
-                                selectClause,
-                                typeDesc,
-                                returnType,
-                                bodyExpr
-                            );
-                        }
-
-                        if (isComplexExpression(selectClause.expression)
-                            || isIndexedExpression(selectClause.expression)
-                        ) {
-                            const inputNodes = getInputNodes(selectClause);
-                            const fnDefForFnCall = STKindChecker.isFunctionCall(selectClause.expression) &&
-                                getFnDefForFnCall(selectClause.expression);
-                            const linkConnectorNode = new LinkConnectorNode(
-                                this.context,
-                                selectClause,
-                                "",
-                                node,
-                                inputNodes,
-                                this.mapIdentifiers.slice(0),
-                                fnDefForFnCall
-                            );
-                            this.intermediateNodes.push(linkConnectorNode);
-                        }
-
-                        this.outputNode.setPosition(OFFSETS.TARGET_NODE.X + OFFSETS.QUERY_VIEW_LEFT_MARGIN, intermediateClausesHeight + OFFSETS.QUERY_VIEW_TOP_MARGIN);
-
-                        const expandedHeaderPorts: DefaultPortModel[] = [];
-                        const fromClauseNode = new FromClauseNode(this.context, fromClause);
-                        fromClauseNode.setPosition(OFFSETS.SOURCE_NODE.X + OFFSETS.QUERY_VIEW_LEFT_MARGIN, intermediateClausesHeight + OFFSETS.QUERY_VIEW_TOP_MARGIN);
-                        this.inputParamNodes.push(fromClauseNode);
-
-                        const fromClauseNodeValueLabel = getFromClauseNodeLabel(fromClause?.typedBindingPattern?.bindingPattern, fromClause.expression);
-                        const fromClausePort = new DefaultPortModel(true, `${EXPANDED_QUERY_INPUT_NODE_PREFIX}.${fromClauseNodeValueLabel}`);
-                        expandedHeaderPorts.push(fromClausePort);
-                        fromClauseNode.addPort(fromClausePort);
-
-                        const letClauses = intermediateClauses?.filter((item) => {
-                            return (
-                                (STKindChecker.isLetClause(item) && !hasErrorDiagnosis(item)) ||
-                                (STKindChecker.isJoinClause(item) && !hasErrorDiagnosis(item))
-                            );
-                        });
-
-                        for (const [, item] of letClauses.entries()) {
-                            if (STKindChecker.isLetClause(item)) {
-                                const paramNode = new LetClauseNode(this.context, item as LetClause);
-                                paramNode.setPosition(OFFSETS.SOURCE_NODE.X + OFFSETS.QUERY_VIEW_LEFT_MARGIN, 0);
-                                this.inputParamNodes.push(paramNode);
-                                const letClauseValueLabel = (
-                                    ((item as LetClause)?.letVarDeclarations[0] as LetVarDecl)?.typedBindingPattern
-                                        ?.bindingPattern as CaptureBindingPattern
-                                )?.variableName?.value;
-                                const letClausePort = new DefaultPortModel(true, `${EXPANDED_QUERY_INPUT_NODE_PREFIX}.${letClauseValueLabel}`);
-                                expandedHeaderPorts.push(letClausePort);
-                            } else if (STKindChecker.isJoinClause(item)) {
-                                const paramNode = new JoinClauseNode(this.context, item as JoinClause);
-                                if (paramNode.getSourceType()){
-                                    paramNode.setPosition(OFFSETS.SOURCE_NODE.X + OFFSETS.QUERY_VIEW_LEFT_MARGIN, 0);
-                                    this.inputParamNodes.push(paramNode);
-                                    const joinClauseValueLabel = ((item as JoinClause)?.typedBindingPattern?.bindingPattern as CaptureBindingPattern)?.variableName?.value;
-                                    const joinClausePort = new DefaultPortModel(true, `${EXPANDED_QUERY_INPUT_NODE_PREFIX}.${joinClauseValueLabel}`);
-                                    expandedHeaderPorts.push(joinClausePort);
-                                }
-                            }
-                        }
-
-                        const queryNode = new ExpandedMappingHeaderNode(this.context, bodyExpr);
-                        queryNode.setLocked(true)
-                        this.queryNode = queryNode;
-                        queryNode.targetPorts = expandedHeaderPorts;
-                        queryNode.height = intermediateClausesHeight;
-                        moduleVariables = getModuleVariables(selectClause.expression, this.context.moduleComponents);
-                        enumTypes = getEnumTypes(selectClause.expression, this.context.moduleComponents);
-                    } else if (this.context.selection.selectedST.fieldPath === SELECT_CALUSE_QUERY) {
-                        isFnBodyQueryExpr = true;
-                        const queryExprFindingVisitor = new QueryExprFindingVisitorByPosition(this.selection.selectedST.position);
-                        traversNode(bodyExpr, queryExprFindingVisitor);
-                        const queryExpr = queryExprFindingVisitor.getQueryExpression();
-                        const selectClauseIndex = queryExprFindingVisitor.getSelectClauseIndex();
-                        returnType = getSubArrayType(returnType, selectClauseIndex);
-                        const selectClause = queryExpr?.selectClause || queryExpr?.resultClause;
-                        const intermediateClausesHeight = 100 + intermediateClauses.length * OFFSETS.INTERMEDIATE_CLAUSE_HEIGHT;
-                        if (returnType?.typeName === PrimitiveBalType.Array) {
-                            const { memberType } = returnType;
-                            if (memberType?.typeName === PrimitiveBalType.Record) {
-                                this.outputNode = new MappingConstructorNode(
-                                    this.context,
-                                    selectClause,
-                                    typeDesc,
-                                    memberType,
-                                    queryExpr
-                                );
-                            } else if (memberType?.typeName === PrimitiveBalType.Array) {
-                                this.outputNode = new ListConstructorNode(
-                                    this.context,
-                                    selectClause,
-                                    typeDesc,
-                                    memberType,
-                                    queryExpr
-                                );
-                            } else if (memberType?.typeName === PrimitiveBalType.Union) {
-                                this.outputNode = new UnionTypeNode(
-                                    this.context,
-                                    selectClause,
-                                    typeDesc,
-                                    memberType
-                                );
-                            } else {
-                                this.outputNode = new PrimitiveTypeNode(
-                                    this.context,
-                                    selectClause,
-                                    typeDesc,
-                                    memberType,
-                                    queryExpr
-                                );
-                            }
-                        } else if (returnType?.typeName === PrimitiveBalType.Record) {
-                            this.outputNode = new MappingConstructorNode(
-                                this.context,
-                                selectClause,
-                                typeDesc,
-                                returnType,
-                                queryExpr
-                            );
-                        } else if (returnType?.typeName === PrimitiveBalType.Union) {
-                            const message = "Union types within query expressions are not supported at the moment"
-                            this.outputNode = new UnsupportedIONode(
-                                this.context,
-                                UnsupportedExprNodeKind.Output,
-                                message,
-                                undefined
-                            );
-                        } else {
-                            this.outputNode = new PrimitiveTypeNode(
-                                this.context,
-                                selectClause,
-                                typeDesc,
-                                returnType,
-                                queryExpr
-                            );
-                        }
-
-                        this.outputNode.setPosition(OFFSETS.TARGET_NODE.X + OFFSETS.QUERY_VIEW_LEFT_MARGIN, intermediateClausesHeight + OFFSETS.QUERY_VIEW_TOP_MARGIN);
-
-                        const expandedHeaderPorts: DefaultPortModel[] = [];
-                        const fromClauseNode = new FromClauseNode(this.context, queryExpr.queryPipeline.fromClause);
-                        fromClauseNode.setPosition(OFFSETS.SOURCE_NODE.X + OFFSETS.QUERY_VIEW_LEFT_MARGIN, intermediateClausesHeight + OFFSETS.QUERY_VIEW_TOP_MARGIN);
-                        this.inputParamNodes.push(fromClauseNode);
-
-                        const fromClauseNodeValueLabel = getFromClauseNodeLabel(fromClause?.typedBindingPattern?.bindingPattern, fromClause.expression);
-                        const fromClausePort = new DefaultPortModel(true, `${EXPANDED_QUERY_INPUT_NODE_PREFIX}.${fromClauseNodeValueLabel}`);
-                        expandedHeaderPorts.push(fromClausePort);
-                        fromClauseNode.addPort(fromClausePort);
-
-                        const letClauses = intermediateClauses?.filter((item) => {
-                            return (
-                                (STKindChecker.isLetClause(item) && item.typeData?.diagnostics?.length === 0) ||
-                                (STKindChecker.isJoinClause(item) && item.typeData?.diagnostics?.length === 0)
-                            );
-                        });
-
-                        for (const [, item] of letClauses.entries()) {
-                            if (STKindChecker.isLetClause(item)) {
-                                const paramNode = new LetClauseNode(this.context, item as LetClause);
-                                paramNode.setPosition(OFFSETS.SOURCE_NODE.X + OFFSETS.QUERY_VIEW_LEFT_MARGIN, 0);
-                                this.inputParamNodes.push(paramNode);
-                                const letClauseValueLabel = (
-                                    ((item as LetClause)?.letVarDeclarations[0] as LetVarDecl)?.typedBindingPattern
-                                        ?.bindingPattern as CaptureBindingPattern
-                                )?.variableName?.value;
-                                const letClausePort = new DefaultPortModel(true, `${EXPANDED_QUERY_INPUT_NODE_PREFIX}.${letClauseValueLabel}`);
-                                expandedHeaderPorts.push(letClausePort);
-                            } else if (STKindChecker.isJoinClause(item)) {
-                                const paramNode = new JoinClauseNode(this.context, item as JoinClause);
-                                if (paramNode.getSourceType()){
-                                    paramNode.setPosition(OFFSETS.SOURCE_NODE.X + OFFSETS.QUERY_VIEW_LEFT_MARGIN, 0);
-                                    this.inputParamNodes.push(paramNode);
-                                    const joinClauseValueLabel = ((item as JoinClause)?.typedBindingPattern?.bindingPattern as CaptureBindingPattern)?.variableName?.value;
-                                    const joinClausePort = new DefaultPortModel(true, `${EXPANDED_QUERY_INPUT_NODE_PREFIX}.${joinClauseValueLabel}`);
-                                    expandedHeaderPorts.push(joinClausePort);
-                                }
-                            }
-                        }
-
-                        const queryNode = new ExpandedMappingHeaderNode(this.context, bodyExpr);
-                        queryNode.setLocked(true)
-                        this.queryNode = queryNode;
-                        queryNode.targetPorts = expandedHeaderPorts;
-                        queryNode.height = intermediateClausesHeight;
-                        moduleVariables = getModuleVariables(selectClause.expression, this.context.moduleComponents);
-                        enumTypes = getEnumTypes(selectClause.expression, this.context.moduleComponents);
-                    } else {
-                        if (returnType.typeName === PrimitiveBalType.Array) {
-                            this.outputNode = new ListConstructorNode(
-                                this.context,
-                                exprFuncBody,
-                                typeDesc,
-                                returnType
-                            );
-                        } else if (returnType.typeName === PrimitiveBalType.Union) {
-                            // TODO: Uncomment this once the union type support is added in the lang
-                            //  (https://github.com/ballerina-platform/ballerina-lang/issues/40012)
-                            this.outputNode = new UnionTypeNode(
-                                this.context,
-                                exprFuncBody,
-                                typeDesc,
-                                returnType
-                            );
-                        } else {
-                            const body = STKindChecker.isIndexedExpression(exprFuncBody.expression)
-                                ? exprFuncBody.expression.containerExpression
-                                : exprFuncBody;
-                            this.outputNode = new PrimitiveTypeNode(
-                                this.context,
-                                body as any,
-                                typeDesc,
-                                returnType
-                            );
-                        }
-                    }
-                } else if (returnType.typeName === PrimitiveBalType.Record) {
-                    this.outputNode = new MappingConstructorNode(
-                        this.context,
-                        exprFuncBody,
-                        typeDesc,
-                        returnType
-                    );
-                } else if (returnType.typeName === PrimitiveBalType.Union) {
-                    this.outputNode = new UnionTypeNode(
-                        this.context,
-                        exprFuncBody,
-                        typeDesc,
-                        returnType
-                    );
-                } else if (returnType.typeName === PrimitiveBalType.Array) {
-                    this.outputNode = new ListConstructorNode(
-                        this.context,
-                        exprFuncBody,
-                        typeDesc,
-                        returnType
-                    );
-                } else {
-                    this.outputNode = new PrimitiveTypeNode(
-                        this.context,
-                        exprFuncBody,
-                        typeDesc,
-                        returnType
-                    );
-                }
-                this.outputNode.setPosition(OFFSETS.TARGET_NODE.X, OFFSETS.TARGET_NODE.Y);
-            }
-        }
-        // create input nodes
-        if (!isFnBodyQueryExpr) {
-            const params = node.functionSignature.parameters;
-            if (params.length) {
-                for (const param of params) {
-                    if (STKindChecker.isRequiredParam(param)) {
-                        const paramNode = new RequiredParamNode(
-                            this.context,
-                            param,
-                            param.typeName
-                        );
-                        paramNode.setPosition(OFFSETS.SOURCE_NODE.X, OFFSETS.SOURCE_NODE.Y);
-                        this.inputParamNodes.push(paramNode);
-                    } else {
-                        // TODO for other param types
-                    }
-                }
-            }
-        }
-
-        // create node for configuring sub mappings
-        const letExprNode = new LetExpressionNode(
-            this.context,
-            exprFuncBody
-        );
-        letExprNode.setPosition(OFFSETS.SOURCE_NODE.X + (isFnBodyQueryExpr ? 80 : 0), 0);
-        this.otherInputNodes.push(letExprNode);
-
-        // create node for module variables
-        if (moduleVariables.size > 0) {
-            const moduleVarNode = new ModuleVariableNode(
-                this.context,
-                moduleVariables
-            );
-            moduleVarNode.setPosition(OFFSETS.SOURCE_NODE.X + (isFnBodyQueryExpr ? 80 : 0), 0);
-            this.otherInputNodes.push(moduleVarNode);
-        }
-
-        // create node for enums
-        if (enumTypes.size > 0) {
-            const enumTypeNode = new EnumTypeNode(
-                this.context,
-                enumTypes
-            );
-            enumTypeNode.setPosition(OFFSETS.SOURCE_NODE.X + (isFnBodyQueryExpr ? 80 : 0), 0);
-            this.otherInputNodes.push(enumTypeNode);
-        }
-    }
-
-    beginVisitQueryExpression?(node: QueryExpression, parent?: STNode) {
-        // TODO: Implement a way to identify the selected query expr without using the positions since positions might change with imports, etc.
-        const { stNode: selectedSTNode, position, fieldPath  } = this.selection.selectedST;
-        const isLetVarDecl = STKindChecker.isLetVarDecl(parent);
-        let parentIdentifier: IdentifierToken;
-        let parentNode = parent;
-
-        if (STKindChecker.isSpecificField(parent) && STKindChecker.isIdentifierToken(parent.fieldName)) {
-            parentIdentifier = parent.fieldName;
-        } else if (isLetVarDecl && STKindChecker.isCaptureBindingPattern(parent.typedBindingPattern.bindingPattern)) {
-            parentIdentifier = parent.typedBindingPattern.bindingPattern.variableName;
-        } else {
-            // Find specific field node if query is nested within braced or indexed expressions
-            const specificFieldFindingVisitor = new QueryParentFindingVisitor(node.position)
-            traversNode(this.context.selection.selectedST.stNode, specificFieldFindingVisitor);
-            const specificField = specificFieldFindingVisitor.getSpecificField();
-            if (specificField && STKindChecker.isSpecificField(specificField) && STKindChecker.isIdentifierToken(specificField.fieldName)) {
-                parentIdentifier = specificField.fieldName as IdentifierToken
-                parentNode = isSelectClauseQueryExpr(fieldPath) ? parent : specificField;
-            }
-        }
-
-        const isSelectedExpr = parentNode
-            && (STKindChecker.isSpecificField(selectedSTNode) || STKindChecker.isLetVarDecl(selectedSTNode))
-            && (isPositionsEquals(parentNode.position, selectedSTNode.position) || isSelectClauseQueryExpr(fieldPath))
-            && (!position || isPositionsEquals(node.position, position));
-
-        if (isSelectedExpr) {
-            const { fromClause, intermediateClauses } = node.queryPipeline;
-
-            const hasInnerFromClauses = intermediateClauses.some(clause => STKindChecker.isFromClause(clause));
-            if (hasInnerFromClauses) {
-                throw new Error(INNER_FROM_CLAUSE_ERROR_MESSAGE);
-            }
-
-            if (parentIdentifier) {
-                const intermediateClausesHeight = 100 + intermediateClauses.length * OFFSETS.INTERMEDIATE_CLAUSE_HEIGHT;
-                // create output node
-                let exprType = getTypeOfOutput(parentIdentifier, this.context.ballerinaVersion);
-                // Fetch types from let var decl expression to ensure the backward compatibility
-                if (!exprType && STKindChecker.isLetVarDecl(parentNode)) {
-                    exprType = getTypeFromStore(parentNode.expression.position as NodePosition);
-                } else if (exprType && isSelectClauseQueryExpr(fieldPath)) {
-                    exprType = getSubArrayType(exprType, this.selection.selectedST.index);
-                }
-
-                const isAnydataTypedField = exprType
-                    && (exprType.typeName === AnydataType
-                        || (exprType.typeName === PrimitiveBalType.Array
-                            && exprType?.memberType?.typeName === AnydataType));
-                if (!exprType || isAnydataTypedField) {
-                    const prevOutputType = getPrevOutputType(this.selection.prevST, this.context.ballerinaVersion);
-                    const isPrevOutputAnydata = prevOutputType
-                        && (prevOutputType.typeName === AnydataType
-                            || (prevOutputType.typeName === PrimitiveBalType.Array
-                                && prevOutputType.memberType.typeName === AnydataType));
-                    if (isPrevOutputAnydata || isAnydataTypedField) {
-                        exprType = constructTypeFromSTNode(node);
-                    }
-                }
-
-                const selectClause = node?.selectClause || node?.resultClause
-                const innerExpr = getInnermostExpressionBody(selectClause.expression);
-                const hasConditionalOutput = STKindChecker.isConditionalExpression(innerExpr);
-                if (hasConditionalOutput) {
-                    this.outputNode = new UnsupportedIONode(
-                        this.context,
-                        UnsupportedExprNodeKind.Output,
-                        undefined,
-                        innerExpr,
-                    );
-                } else if (exprType?.typeName === PrimitiveBalType.Array) {
-                    const { memberType } = exprType;
-                    if (memberType.typeName === PrimitiveBalType.Record) {
-                        this.outputNode = new MappingConstructorNode(
-                            this.context,
-                            selectClause,
-                            parentIdentifier,
-                            memberType,
-                            node
-                        );
-                    } else if (memberType.typeName === PrimitiveBalType.Array) {
-                        this.outputNode = new ListConstructorNode(
-                            this.context,
-                            selectClause,
-                            parentIdentifier,
-                            memberType,
-                            node
-                        );
-                    } else if (memberType.typeName === PrimitiveBalType.Union) {
-                        this.outputNode = new UnionTypeNode(
-                            this.context,
-                            selectClause,
-                            parentIdentifier,
-                            memberType
-                        );
-                    } else {
-                        this.outputNode = new PrimitiveTypeNode(
-                            this.context,
-                            selectClause,
-                            parentIdentifier,
-                            memberType,
-                            node
-                        );
-                    }
-                } else {
-                    if (exprType?.typeName === PrimitiveBalType.Record) {
-                        this.outputNode = new MappingConstructorNode(
-                            this.context,
-                            selectClause,
-                            parentIdentifier,
-                            exprType
-                        );
-                    } else if (exprType?.typeName === PrimitiveBalType.Union) {
-                        const message = "Union types within query expressions are not supported at the moment"
-                        this.outputNode = new UnsupportedIONode(
-                            this.context,
-                            UnsupportedExprNodeKind.Output,
-                            message,
-                            undefined
-                        );
-                        // TODO: Uncomment this once the union type support is added in the lang
-                        //  (https://github.com/ballerina-platform/ballerina-lang/issues/40012)
-                        // this.outputNode = new UnionTypeNode(
-                        //     this.context,
-                        //     selectClause,
-                        //     parentIdentifier,
-                        //     exprType
-                        // );
-                    } else {
-                        this.outputNode = new PrimitiveTypeNode(
-                            this.context,
-                            selectClause,
-                            parentIdentifier,
-                            exprType,
-                            node
-                        );
-                    }
-                    if (isComplexExpression(selectClause.expression) || isIndexedExpression(selectClause.expression)) {
-                        const inputNodes = getInputNodes(selectClause);
-                        const fnDefForFnCall = STKindChecker.isFunctionCall(selectClause.expression)
-                            && getFnDefForFnCall(selectClause.expression);
-                        const linkConnectorNode = new LinkConnectorNode(
-                            this.context,
-                            node,
-                            "",
-                            parent,
-                            inputNodes,
-                            this.mapIdentifiers.slice(0),
-                            fnDefForFnCall
-                        );
-                        this.intermediateNodes.push(linkConnectorNode);
-                    }
-                }
-
-                this.outputNode.setPosition(OFFSETS.TARGET_NODE.X + OFFSETS.QUERY_VIEW_LEFT_MARGIN, intermediateClausesHeight + 50);
-
-                const expandedHeaderPorts: DefaultPortModel[] = [];
-
-                // create input nodes
-                const fromClauseNode = new FromClauseNode(this.context, fromClause);
-                fromClauseNode.setPosition(OFFSETS.SOURCE_NODE.X + OFFSETS.QUERY_VIEW_LEFT_MARGIN, intermediateClausesHeight + OFFSETS.QUERY_VIEW_TOP_MARGIN);
-                this.inputParamNodes.push(fromClauseNode);
-
-                const fromClauseNodeValueLabel = getFromClauseNodeLabel(fromClause?.typedBindingPattern?.bindingPattern, fromClause.expression);
-                const fromClausePort = new DefaultPortModel(true, `${EXPANDED_QUERY_INPUT_NODE_PREFIX}.${fromClauseNodeValueLabel}`);
-                expandedHeaderPorts.push(fromClausePort);
-                fromClauseNode.addPort(fromClausePort);
-
-                const letClauses = intermediateClauses?.filter((item) => {
-                    return (
-                        (STKindChecker.isLetClause(item) && !hasErrorDiagnosis(item)) ||
-                        (STKindChecker.isJoinClause(item) && !hasErrorDiagnosis(item))
-                    );
-                });
-
-                for (const [, item] of letClauses.entries()) {
-                    if (STKindChecker.isLetClause(item)) {
-                        const paramNode = new LetClauseNode(this.context, item as LetClause);
-                        paramNode.setPosition(OFFSETS.SOURCE_NODE.X + OFFSETS.QUERY_VIEW_LEFT_MARGIN, 0);
-                        this.inputParamNodes.push(paramNode);
-
-                        const letClauseValueLabel = (
-                            ((item as LetClause)?.letVarDeclarations[0] as LetVarDecl)?.typedBindingPattern
-                                ?.bindingPattern as CaptureBindingPattern
-                        )?.variableName?.value;
-                        const letClausePort = new DefaultPortModel(true, `${EXPANDED_QUERY_INPUT_NODE_PREFIX}.${letClauseValueLabel}`);
-                        expandedHeaderPorts.push(letClausePort);
-                    } else if (STKindChecker.isJoinClause(item)) {
-                        const paramNode = new JoinClauseNode(this.context, item as JoinClause);
-                        if (paramNode.getSourceType()){
-                            paramNode.setPosition(OFFSETS.SOURCE_NODE.X + OFFSETS.QUERY_VIEW_LEFT_MARGIN, 0);
-                            this.inputParamNodes.push(paramNode);
-
-                            const joinClauseValueLabel = ((item as JoinClause)?.typedBindingPattern?.bindingPattern as CaptureBindingPattern)?.variableName?.value;
-                            const joinClausePort = new DefaultPortModel(true, `${EXPANDED_QUERY_INPUT_NODE_PREFIX}.${joinClauseValueLabel}`);
-                            expandedHeaderPorts.push(joinClausePort);
-                        }
-                    }
-                }
-
-                const queryNode = new ExpandedMappingHeaderNode(this.context, node);
-                queryNode.setLocked(true);
-                this.queryNode = queryNode;
-                queryNode.targetPorts = expandedHeaderPorts;
-                queryNode.height = intermediateClausesHeight;
-
-                // create node for sub mappings
-                const letExprNode = new LetExpressionNode(
-                    this.context,
-                    this.context.functionST.functionBody as ExpressionFunctionBody,
-                    true
-                );
-                letExprNode.setPosition(OFFSETS.SOURCE_NODE.X + OFFSETS.QUERY_VIEW_LEFT_MARGIN, 0);
-                this.otherInputNodes.push(letExprNode);
-
-                // if (STKindChecker.isLetExpression((this.context.functionST.functionBody as ExpressionFunctionBody).expression)) {
-                //     const letExprNode = new LetExpressionNode(
-                //         this.context,
-                //         this.context.functionST.functionBody as ExpressionFunctionBody,
-                //         true
-                //     );
-                //     letExprNode.setPosition(OFFSETS.SOURCE_NODE.X + OFFSETS.QUERY_VIEW_LEFT_MARGIN, 0);
-                //     this.otherInputNodes.push(letExprNode);
-                // }
-
-                // create node for module variables
-                const moduleVariables: Map<string, ModuleVariable> = getModuleVariables(selectClause.expression, this.context.moduleComponents);
-                if (moduleVariables.size > 0) {
-                    const moduleVarNode = new ModuleVariableNode(
-                        this.context,
-                        moduleVariables
-                    );
-                    moduleVarNode.setPosition(OFFSETS.SOURCE_NODE.X + OFFSETS.QUERY_VIEW_LEFT_MARGIN, 0);
-                    this.otherInputNodes.push(moduleVarNode);
-                }
-
-                // create node for enums
-                const enumTypes: Map<string, ModuleVariable> = getEnumTypes(selectClause.expression, this.context.moduleComponents);
-                if (enumTypes.size > 0) {
-                    const enumTypeNode = new EnumTypeNode(
-                        this.context,
-                        enumTypes
-                    );
-                    enumTypeNode.setPosition(OFFSETS.SOURCE_NODE.X + OFFSETS.QUERY_VIEW_LEFT_MARGIN, 0);
-                    this.otherInputNodes.push(enumTypeNode);
-                }
-            }
-            if (isSelectClauseQueryExpr(fieldPath)) {
-                const currentSelectClause = node?.resultClause || node.selectClause;
-                if (STKindChecker.isQueryExpression(currentSelectClause.expression)) {
-                    // query expr as the select clause expr of a query expr declared as a specific field
-                    // (eg: when an ouput field is multi dimensional array and the mapped input is also a multi dimensional array)
-                    const queryNode = new QueryExpressionNode(this.context, currentSelectClause.expression, parentNode);
-                    this.intermediateNodes.push(queryNode);
-                    this.isWithinQuery += 1;
-                }
-            }
-        } else if (!isFnBodyQueryExpr(fieldPath) && !isSelectClauseQueryExpr(fieldPath) && !isLetVarDecl && parentNode) {
-            // query expr as the value expr of a specific field
-            const queryNode = new QueryExpressionNode(this.context, node, parentNode);
-            if (this.isWithinQuery === 0) {
-                this.intermediateNodes.push(queryNode);
-            }
-            this.isWithinQuery += 1;
-        } else {
-            if (STKindChecker.isFunctionDefinition(selectedSTNode)
-                && STKindChecker.isExpressionFunctionBody(selectedSTNode.functionBody)
-                && !isLetVarDecl)
-            {
-                let queryExpr: STNode = selectedSTNode.functionBody.expression;
-                if (STKindChecker.isLetExpression(selectedSTNode.functionBody.expression)) {
-                    queryExpr = getExprBodyFromLetExpression(selectedSTNode.functionBody.expression)
-                } else if (!STKindChecker.isQueryExpression(queryExpr)) {
-                    queryExpr = node;
-                }
-
-                if (isFnBodyQueryExpr(fieldPath)) {
-                    if (!isPositionsEquals(queryExpr.position, node.position) && this.isWithinQuery === 0) {
-                        // query expr as the function body
-                        const queryNode = new QueryExpressionNode(this.context, node, parentNode);
-                        this.intermediateNodes.push(queryNode);
-                        this.isWithinQuery += 1;
-                    }
-                } else if (isSelectClauseQueryExpr(fieldPath)) {
-                    const queryExprFindingVisitor = new QueryExprFindingVisitorByPosition(this.selection.selectedST.position);
-                    traversNode(queryExpr, queryExprFindingVisitor);
-                    const currentQueryExpr = queryExprFindingVisitor.getQueryExpression();
-                    const currentSelectClause = currentQueryExpr?.resultClause || currentQueryExpr.selectClause;
-                    if (isPositionsEquals(currentQueryExpr.position, node.position)
-                        && STKindChecker.isQueryExpression(currentSelectClause.expression)) {
-                        // query expr as the select clause expr of a query expr declared as a function body
-                        // (eg: when output is multi dimensional array and the mapped input is also a multi dimensional array)
-                        const queryNode = new QueryExpressionNode(this.context, currentSelectClause.expression, parentNode);
-                        this.intermediateNodes.push(queryNode);
-                        this.isWithinQuery += 1;
-                    }
-                }
-            }
-        }
-    }
-
-    beginVisitSpecificField(node: SpecificField, parent?: STNode) {
-        const selectedSTNode = this.selection.selectedST.stNode;
-        let valueExpr: STNode = node.valueExpr;
-        const innerExpr = getInnermostExpressionBody(valueExpr);
-        if (!isPositionsEquals(selectedSTNode.position as NodePosition, node.position as NodePosition)) {
-            this.mapIdentifiers.push(node)
-        }
-        if (this.isWithinQuery === 0
-            && (this.isWithinLetVarDecl === 0
-                || (this.isWithinLetVarDecl > 0 && STKindChecker.isLetVarDecl(selectedSTNode)))
-            && innerExpr
-            && !STKindChecker.isMappingConstructor(innerExpr)
-            && !STKindChecker.isListConstructor(innerExpr)
-        ) {
-            const inputNodes = getInputNodes(innerExpr);
-            valueExpr = STKindChecker.isCheckExpression(innerExpr) ? innerExpr.expression : innerExpr;
-            const fnDefForFnCall = STKindChecker.isFunctionCall(valueExpr) && getFnDefForFnCall(valueExpr);
-
-            if (inputNodes.length > 1 ||
-                (inputNodes.length === 1 &&
-                    (isComplexExpression(valueExpr) || fnDefForFnCall)
-                ) ||
-                isIndexedExpression(valueExpr)
-            ) {
-                const linkConnectorNode = new LinkConnectorNode(
-                    this.context,
-                    node,
-                    node.fieldName.value as string,
-                    parent,
-                    inputNodes,
-                    this.mapIdentifiers.slice(0),
-                    fnDefForFnCall
-                );
-                this.intermediateNodes.push(linkConnectorNode);
-            }
-        }
-    }
-
-    beginVisitListConstructor(node: ListConstructor, parent?: STNode): void {
-        this.mapIdentifiers.push(node);
-        if (this.isWithinQuery === 0 && node.expressions) {
-            node.expressions.forEach((expr: STNode) => {
-                let innerExpr = STKindChecker.isTypeCastExpression(expr)
-                    ? getExprBodyFromTypeCastExpression(expr)
-                    : expr;
-                if (!STKindChecker.isMappingConstructor(innerExpr) && !STKindChecker.isListConstructor(innerExpr)) {
-                    const inputNodes = getInputNodes(innerExpr);
-                    innerExpr = STKindChecker.isCheckExpression(innerExpr) ? innerExpr.expression : innerExpr;
-                    const fnDefForFnCall = STKindChecker.isFunctionCall(innerExpr) && getFnDefForFnCall(innerExpr);
-                    if (inputNodes.length > 1 ||
-                        (inputNodes.length === 1 &&
-                            (isComplexExpression(innerExpr) || fnDefForFnCall)
-                        ) ||
-                        isIndexedExpression(innerExpr)
-                    ) {
-                        const linkConnectorNode = new LinkConnectorNode(
-                            this.context,
-                            innerExpr,
-                            "",
-                            parent,
-                            inputNodes,
-                            [...this.mapIdentifiers, innerExpr],
-                            fnDefForFnCall,
-                            true
-                        );
-                        this.intermediateNodes.push(linkConnectorNode);
-                    }
-                }
-            })
-        }
-
-    }
-
-    beginVisitSelectClause(node: SelectClause, parent?: STNode): void {
-        const innerExpr = getInnermostExpressionBody(node.expression);
-        if (this.isWithinQuery === 0
-            && !STKindChecker.isMappingConstructor(innerExpr)
-            && !STKindChecker.isListConstructor(innerExpr)
-        ) {
-            const inputNodes = getInputNodes(innerExpr);
-            const fnDefForFnCall = STKindChecker.isFunctionCall(innerExpr) && getFnDefForFnCall(innerExpr);
-            if (inputNodes.length > 1 || isIndexedExpression(innerExpr) || isComplexExpression(innerExpr)) {
-                const linkConnectorNode = new LinkConnectorNode(
-                    this.context,
-                    innerExpr,
-                    "",
-                    parent,
-                    inputNodes,
-                    [...this.mapIdentifiers, innerExpr],
-                    fnDefForFnCall
-                );
-                this.intermediateNodes.push(linkConnectorNode);
-            }
-        }
-    }
-
-    // TODO: Update the syntax tree interfaces to include the result clause
-    beginVisitSTNode(node: STNode, parent?: STNode): void {
-        if (node?.kind && node.kind === "CollectClause") {
-            const innerExpr = getInnermostExpressionBody((node as SelectClause).expression);
-            if (this.isWithinQuery === 0
-                && !STKindChecker.isMappingConstructor(innerExpr)
-                && !STKindChecker.isListConstructor(innerExpr)
-            ) {
-                const inputNodes = getInputNodes(innerExpr);
-                const fnDefForFnCall = STKindChecker.isFunctionCall(innerExpr) && getFnDefForFnCall(innerExpr);
-
-                if (inputNodes.length > 1 || isIndexedExpression(innerExpr) || isComplexExpression(innerExpr)) {
-                    const linkConnectorNode = new LinkConnectorNode(
-                        this.context,
-                        innerExpr,
-                        "",
-                        parent,
-                        inputNodes,
-                        [...this.mapIdentifiers, innerExpr],
-                        fnDefForFnCall
-                    );
-                    this.intermediateNodes.push(linkConnectorNode);
-                }
-            }
-        }
-    }
-
-    beginVisitExpressionFunctionBody(node: ExpressionFunctionBody, parent?: STNode): void {
-        const expr = getInnermostExpressionBody(node.expression);
-        if (!STKindChecker.isMappingConstructor(expr)
-            && !STKindChecker.isListConstructor(expr)
-            && !STKindChecker.isExplicitAnonymousFunctionExpression(parent))
-        {
-            const inputNodes = getInputNodes(expr);
-            const fnDefForFnCall = STKindChecker.isFunctionCall(expr) && getFnDefForFnCall(expr);
-
-            if (inputNodes.length > 1 || isIndexedExpression(expr) || isComplexExpression(expr)) {
-                const linkConnectorNode = new LinkConnectorNode(
-                    this.context,
-                    node.expression,
-                    "",
-                    parent,
-                    inputNodes,
-                    [node.expression],
-                    fnDefForFnCall
-                );
-                this.intermediateNodes.push(linkConnectorNode);
-            }
-        }
-    }
-
-    beginVisitLetVarDecl(node: LetVarDecl): void {
-        this.isWithinLetVarDecl += 1;
-    }
-
-    endVisitLetVarDecl(node: LetVarDecl): void {
-        this.isWithinLetVarDecl -= 1;
-    }
-
-    beginVisitMappingConstructor(node: MappingConstructor): void {
-        this.mapIdentifiers.push(node);
-    }
-
-    endVisitQueryExpression?() {
-        if (this.isWithinQuery > 0) {
-            this.isWithinQuery -= 1;
-        }
-    };
-
-    endVisitSpecificField() {
-        if (this.mapIdentifiers.length > 0) {
-            this.mapIdentifiers.pop()
-        }
-    }
-
-    endVisitListConstructor() {
-        if (this.mapIdentifiers.length > 0) {
-            this.mapIdentifiers.pop()
-        }
-    }
-
-    endVisitMappingConstructor() {
-        if (this.mapIdentifiers.length > 0) {
-            this.mapIdentifiers.pop()
-        }
-    }
-
-    getNodes() {
-        const nodes = [...this.inputParamNodes, ...this.otherInputNodes];
-        if (this.outputNode) {
-            nodes.push(this.outputNode);
-        }
-        this.intermediateNodes.forEach((node) => {
-            node.setPosition(OFFSETS.LINK_CONNECTOR_NODE.X, OFFSETS.TARGET_NODE.Y);
-        });
-        nodes.push(...this.intermediateNodes);
-        if (this.queryNode){
-            nodes.unshift(this.queryNode);
-        }
-        return nodes;
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/QueryExprFindingVisitorByIndex.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/QueryExprFindingVisitorByIndex.ts
deleted file mode 100644
index 8177c98f7ff..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/QueryExprFindingVisitorByIndex.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import {
-    QueryExpression,
-    SelectClause,
-    STKindChecker,
-    Visitor,
-} from "@wso2/syntax-tree";
-
-export class QueryExprFindingVisitorByIndex implements Visitor {
-    private queryExpression: QueryExpression;
-    private selectClauseIndex: number;
-
-    constructor(private index: number) {
-        this.selectClauseIndex = 0;
-    }
-
-    public beginVisitSelectClause(node: SelectClause): void {
-        if (!this.queryExpression) {
-            this.selectClauseIndex++;
-            if (STKindChecker.isQueryExpression(node.expression) && this.selectClauseIndex === this.index) {
-                this.queryExpression = node.expression;
-            }
-        }
-    }
-
-    public getQueryExpression() {
-        return this.queryExpression;
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/QueryExprFindingVisitorByPosition.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/QueryExprFindingVisitorByPosition.ts
deleted file mode 100644
index 0e1c9515093..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/QueryExprFindingVisitorByPosition.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import {
-    NodePosition,
-    QueryExpression,
-    SelectClause,
-    STKindChecker,
-    Visitor,
-} from "@wso2/syntax-tree";
-
-import { isPositionsEquals } from "../../../utils/st-utils";
-
-export class QueryExprFindingVisitorByPosition implements Visitor {
-    private queryExpression: QueryExpression;
-    private selectClauseIndex: number ;
-
-    constructor(private position: NodePosition) {
-        this.selectClauseIndex = 0;
-    }
-
-    public beginVisitSelectClause(node: SelectClause): void {
-        if (!this.queryExpression) {
-            this.selectClauseIndex++;
-            if (STKindChecker.isQueryExpression(node.expression) && isPositionsEquals(node.expression.position, this.position)) {
-                this.queryExpression = node.expression;
-            }
-        }
-    }
-
-    public getQueryExpression() {
-        return this.queryExpression;
-    }
-
-    public getSelectClauseIndex() {
-        return this.selectClauseIndex;
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/QueryParentFindingVisitor.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/QueryParentFindingVisitor.ts
deleted file mode 100644
index 65458fb6d1d..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/QueryParentFindingVisitor.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import {
-    FunctionDefinition,
-    NodePosition,
-    QueryExpression,
-    SpecificField,
-    STNode,
-    Visitor,
-} from "@wso2/syntax-tree";
-
-import { isPositionsEquals } from "../../../utils/st-utils";
-
-export class QueryParentFindingVisitor implements Visitor {
-    private specifField: SpecificField | FunctionDefinition;
-    private foundSearchingNode: boolean;
-
-    constructor(private position: NodePosition) {
-        this.foundSearchingNode = false
-    }
-
-    public endVisitSpecificField(node: SpecificField, parent?: STNode): void {
-        if (!this.specifField && this.foundSearchingNode){
-            this.specifField = node;
-        }
-    }
-
-    public endVisitQueryExpression(node: QueryExpression, parent?: STNode): void {
-        if (isPositionsEquals(node.position, this.position) && !this.specifField){
-            this.foundSearchingNode = true
-        }
-    }
-
-    public endVisitFunctionDefinition(node: FunctionDefinition, parent?: STNode): void {
-        if (!this.specifField && this.foundSearchingNode){
-            this.specifField = node;
-        }
-    }
-
-    public getSpecificField() {
-        return this.specifField;
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/SelectedSTFindingVisitor.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/SelectedSTFindingVisitor.ts
deleted file mode 100644
index 963eadb8e74..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/SelectedSTFindingVisitor.ts
+++ /dev/null
@@ -1,212 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import {
-    FunctionDefinition,
-    IdentifierToken,
-    LetVarDecl,
-    MappingConstructor,
-    SpecificField,
-    STKindChecker,
-    STNode,
-    traversNode,
-    Visitor
-} from "@wso2/syntax-tree";
-
-import { DataMapperViewState } from "../../../utils/data-mapper-view-state";
-import { DMNode } from "../../DataMapper/DataMapper";
-import { SELECT_CALUSE_QUERY } from "../utils/constants";
-import { QueryExprFindingVisitorByIndex } from "./QueryExprFindingVisitorByIndex";
-
-export class SelectedSTFindingVisitor implements Visitor {
-
-    private updatedPrevST: DMNode[];
-
-    private pathSegmentIndex: number;
-
-    constructor(
-        private prevST: DMNode[],
-    ) {
-        this.updatedPrevST = [];
-        const fnST = prevST[0].stNode;
-        const isOutputAnydata = fnST && STKindChecker.isFunctionDefinition(fnST)
-            && fnST.functionSignature?.returnTypeDesc
-            && STKindChecker.isAnydataTypeDesc(fnST.functionSignature.returnTypeDesc.type);
-        const isOutputInlineRecord = fnST && STKindChecker.isFunctionDefinition(fnST)
-            && fnST.functionSignature?.returnTypeDesc
-            && STKindChecker.isRecordTypeDesc(fnST.functionSignature.returnTypeDesc.type);
-        this.pathSegmentIndex = isOutputAnydata || isOutputInlineRecord ? 0 : 1; // If the output type is available, the field path starts with the record root name, hence segmentIndex = 1
-    }
-
-    beginVisitSTNode(node: FunctionDefinition | SpecificField | LetVarDecl) {
-        const item = this.prevST[0];
-        const isItemSpecificField = item && item.stNode && STKindChecker.isSpecificField(item.stNode);
-        const isItemLetVarDecl = item && item.stNode && STKindChecker.isSpecificField(item.stNode);
-
-        if (isItemSpecificField || isItemLetVarDecl) {
-            const pathSegments = item.fieldPath.split('.');
-            if (STKindChecker.isSpecificField(node) && node.fieldName.value === pathSegments[this.pathSegmentIndex]) {
-                this.pathSegmentIndex++;
-            } else if (STKindChecker.isListConstructor(node)
-                && !isNaN(+pathSegments[this.pathSegmentIndex])
-                && !node.dataMapperViewState) {
-                node.expressions.forEach((exprNode, index) => {
-                    if (!STKindChecker.isCommaToken(exprNode)) {
-                        (exprNode.dataMapperViewState as DataMapperViewState).elementIndex = index / 2;
-                    }
-                });
-            } else if (node.dataMapperViewState) {
-                const elementIndex = (node.dataMapperViewState as DataMapperViewState).elementIndex;
-                if (elementIndex === +pathSegments[this.pathSegmentIndex]) {
-                    if (STKindChecker.isMappingConstructor(node)) {
-                        this.pathSegmentIndex++;
-                        const hasNextFieldName = node.fields.some(field =>
-                            STKindChecker.isSpecificField(field)
-                            && field.fieldName.value === pathSegments[this.pathSegmentIndex]
-                        );
-                        if (!hasNextFieldName) {
-                            this.pathSegmentIndex++; // Skipping the record name segment
-                        }
-                    } else if (STKindChecker.isListConstructor(node) && !isNaN(+pathSegments[this.pathSegmentIndex++])) {
-                        // Add element indexes for list constructors followed by another list constructor
-                        node.expressions.forEach((exprNode, index) => {
-                            if (!STKindChecker.isCommaToken(exprNode)) {
-                                (exprNode.dataMapperViewState as DataMapperViewState).elementIndex = index / 2;
-                            }
-                        });
-                    } else {
-                        this.pathSegmentIndex++;
-                    }
-                }
-            } else if (!STKindChecker.isLetVarDecl(node)) {
-                return;
-            }
-        }
-
-        const itemIdentifierName = item && item.stNode && this.getIdentifier(item.stNode)?.value;
-        const nodeIdentifierName = node && this.getIdentifier(node)?.value;
-
-        if (itemIdentifierName
-            && nodeIdentifierName
-            && nodeIdentifierName === itemIdentifierName
-            && this.areValExprKindsEqual(item.stNode, node))
-        {
-            if (this.prevST.some(prevST => prevST.fieldPath === SELECT_CALUSE_QUERY)) {
-                // Specific fields are repeated when value expression containes chained query expressions
-                // (Query expression as the expression value of a select clause)
-                [...this.prevST].forEach(_ => {
-                    const prevST = this.prevST.shift();
-                    let updatedDMNode: DMNode = { ...prevST, stNode: node };
-                    if (prevST.fieldPath === SELECT_CALUSE_QUERY) {
-                        const queryExprFindingVisitor = new QueryExprFindingVisitorByIndex(prevST.index);
-                        traversNode(prevST.stNode, queryExprFindingVisitor);
-                        const queryExpr = queryExprFindingVisitor.getQueryExpression();
-                        updatedDMNode = {...updatedDMNode, position: queryExpr.position}
-                    } else if (STKindChecker.isSpecificField(node) && STKindChecker.isQueryExpression(node.valueExpr)) {
-                        // Update the position of the query expressions declared as the value expression of specific fields
-                        updatedDMNode = {...updatedDMNode, position: node.valueExpr.position};
-                    }
-                    this.updatedPrevST = [...this.updatedPrevST, updatedDMNode];
-                });
-            } else {
-                const prevST = this.prevST.shift();
-                let updatedDMNode: DMNode = { ...prevST, stNode: node };
-                if (STKindChecker.isSpecificField(node) && STKindChecker.isQueryExpression(node.valueExpr)) {
-                    // Update the position of the query expressions declared as the value expression of specific fields
-                    updatedDMNode = {...updatedDMNode, position: node.valueExpr.position};
-                }
-                this.updatedPrevST = [...this.updatedPrevST, updatedDMNode];
-            }
-            this.pathSegmentIndex = 1;
-            const expr = STKindChecker.isSpecificField(node)
-                ? node.valueExpr
-                : STKindChecker.isLetVarDecl(node)
-                    ? node.expression
-                    : undefined;
-            let nextItem: MappingConstructor;
-            if (expr) {
-                if (STKindChecker.isMappingConstructor(expr)) {
-                    nextItem = expr;
-                } else if (STKindChecker.isQueryExpression(expr)) {
-                    const selectClause = expr?.selectClause || expr?.resultClause;
-                    if (STKindChecker.isMappingConstructor(selectClause.expression)) {
-                        nextItem = selectClause.expression;
-                    }
-                }
-            }
-            if (nextItem && this.prevST) {
-                const nexFieldPath = this.prevST[this.prevST.length - 1]?.fieldPath;
-                const nextPathSegment = nexFieldPath && nexFieldPath.split('.')[0];
-                const hasNextFieldName = nextItem.fields.some(field =>
-                    STKindChecker.isSpecificField(field)
-                    && field.fieldName.value === nextPathSegment
-                );
-                if (hasNextFieldName) {
-                    this.pathSegmentIndex = 0;
-                }
-            }
-        } else if (node && STKindChecker.isFunctionDefinition(node)) {
-            // Function definitions are repeated when the expr function body is query expression
-            const functionDefs = this.prevST.filter(prevST =>
-                prevST.stNode && STKindChecker.isFunctionDefinition(prevST.stNode)
-            );
-            functionDefs.forEach(fnDef => {
-                if (STKindChecker.isFunctionDefinition(fnDef.stNode)
-                    && node.functionName.value === fnDef.stNode.functionName?.value)
-                {
-                    const prevST = this.prevST.shift();
-                    let updatedDMNode: DMNode = { ...prevST, stNode: node };
-                    if (prevST.fieldPath === SELECT_CALUSE_QUERY) {
-                        const queryExprFindingVisitor = new QueryExprFindingVisitorByIndex(prevST.index);
-                        traversNode(prevST.stNode, queryExprFindingVisitor);
-                        const queryExpr = queryExprFindingVisitor.getQueryExpression();
-                        updatedDMNode = {...updatedDMNode, position: queryExpr.position}
-                    }
-                    this.updatedPrevST = [...this.updatedPrevST, updatedDMNode];
-                }
-            });
-        }
-    }
-
-    getIdentifier(node: STNode): IdentifierToken {
-        let identifierName: IdentifierToken;
-        if (STKindChecker.isLetVarDecl(node)) {
-            if (STKindChecker.isCaptureBindingPattern(node.typedBindingPattern.bindingPattern)) {
-                identifierName = node.typedBindingPattern.bindingPattern.variableName;
-            }
-            // TODO: Handle other binding patterns
-        } else if (STKindChecker.isSpecificField(node)) {
-            identifierName = node.fieldName as IdentifierToken;
-        }
-        return identifierName;
-    }
-
-    areValExprKindsEqual(expr1: STNode, expr2: STNode): boolean {
-        if (STKindChecker.isSpecificField(expr1) && STKindChecker.isSpecificField(expr2)) {
-            return expr1.valueExpr.kind === expr2.valueExpr.kind;
-        }
-        return expr1.kind === expr2.kind;
-    }
-
-    getST() {
-        const selectedST = this.updatedPrevST.pop();
-        return {
-            selectedST,
-            prevST: this.updatedPrevST,
-        };
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/SimpleNameReferencesFindingVisitor.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/SimpleNameReferencesFindingVisitor.ts
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/TypeFindingVisitor.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/TypeFindingVisitor.ts
deleted file mode 100644
index b6369ebddb4..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/TypeFindingVisitor.ts
+++ /dev/null
@@ -1,240 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { ExpressionRange, LinePosition } from "@wso2/ballerina-core";
-import {
-    ExpressionFunctionBody,
-    FieldAccess,
-    FromClause,
-    FunctionDefinition,
-    JoinClause,
-    LetClause,
-    LetExpression,
-    LetVarDecl,
-    NodePosition,
-    OptionalFieldAccess,
-    SelectClause,
-    SimpleNameReference,
-    SpecificField,
-    STKindChecker,
-    STNode,
-    Visitor
-} from "@wso2/syntax-tree";
-
-import { getInnermostExpressionBody } from "../utils/dm-utils";
-
-export interface FnDefPositions {
-    fnNamePosition: LinePosition;
-    returnTypeDescPosition: LinePosition;
-}
-
-export class TypeFindingVisitor implements Visitor {
-    private readonly expressionNodeRanges: ExpressionRange[];
-    private readonly symbolNodesPositions: LinePosition[];
-    private fnDefPositions: FnDefPositions;
-    private noOfParams: number;
-    private readonly isArraysSupported: boolean;
-
-    constructor(isArraysSupported: boolean) {
-        this.expressionNodeRanges = []
-        this.symbolNodesPositions = []
-        this.fnDefPositions = {fnNamePosition: undefined, returnTypeDescPosition: undefined}
-        this.isArraysSupported = isArraysSupported
-        this.noOfParams = 0
-    }
-
-    public beginVisitFunctionDefinition(node: FunctionDefinition) {
-        if (this.isArraysSupported) {
-            this.fnDefPositions = {
-                fnNamePosition: {
-                    line: (node.functionName.position as NodePosition).startLine,
-                    offset: (node.functionName.position as NodePosition).startColumn
-                },
-                returnTypeDescPosition: node.functionSignature?.returnTypeDesc ?
-                    {
-                        line: (node.functionSignature.returnTypeDesc.type.position as NodePosition).startLine,
-                        offset: (node.functionSignature.returnTypeDesc.type.position as NodePosition).startColumn
-                    } : null
-            }
-            this.noOfParams = node.functionSignature.parameters.filter(param => !STKindChecker.isCommaToken(param)).length;
-        } else {
-            node.functionSignature.parameters.map((param: STNode) => {
-                if (STKindChecker.isRequiredParam(param)) {
-                    const paramPosition: NodePosition = STKindChecker.isQualifiedNameReference(param.typeName)
-                        ? param.typeName.identifier.position as NodePosition
-                        : param.position as NodePosition as NodePosition;
-                    this.symbolNodesPositions.push({
-                        line: paramPosition.startLine,
-                        offset: paramPosition.startColumn
-                    });
-                    this.noOfParams++;
-                }
-            });
-            if (node.functionSignature?.returnTypeDesc) {
-                const typePosition: NodePosition = STKindChecker.isQualifiedNameReference(node.functionSignature.returnTypeDesc.type)
-                    ? node.functionSignature.returnTypeDesc.type.identifier.position as NodePosition
-                    : node.functionSignature.returnTypeDesc.type.position as NodePosition;
-                this.symbolNodesPositions.push({
-                    line: typePosition.startLine,
-                    offset: typePosition.startColumn
-                });
-            }
-        }
-    }
-
-    public beginVisitExpressionFunctionBody(node: ExpressionFunctionBody) {
-        const fnBody = getInnermostExpressionBody(node.expression);
-        const fnBodyPosition: NodePosition = fnBody.position as NodePosition;
-        this.expressionNodeRanges.push({
-            startLine: {
-                line: fnBodyPosition.startLine,
-                offset: fnBodyPosition.startColumn
-            },
-            endLine: {
-                line: fnBodyPosition.endLine,
-                offset: fnBodyPosition.endColumn
-            }
-        });
-    }
-
-    public beginVisitFromClause(node: FromClause) {
-        let typePosition: NodePosition;
-        // tslint:disable-next-line: prefer-conditional-expression
-        if (STKindChecker.isBinaryExpression(node.expression) && STKindChecker.isElvisToken(node.expression.operator)) {
-            typePosition = node.expression.lhsExpr.position as NodePosition;
-        } else {
-            typePosition = node.expression.position as NodePosition;
-        }
-        this.expressionNodeRanges.push({
-            startLine: {
-                line: typePosition.startLine,
-                offset: typePosition.startColumn
-            },
-            endLine: {
-                line: typePosition.endLine,
-                offset: typePosition.endColumn
-            }
-        });
-    }
-
-    public beginVisitSpecificField(node: SpecificField) {
-        const fieldNamePosition: NodePosition = node.fieldName.position as NodePosition;
-        this.symbolNodesPositions.push({
-            line: fieldNamePosition.startLine,
-            offset: fieldNamePosition.startColumn
-        });
-    }
-
-    public beginVisitSelectClause(node: SelectClause){
-        const exprBody = getInnermostExpressionBody(node.expression);
-        const typePosition: NodePosition = exprBody.position as NodePosition;
-        this.expressionNodeRanges.push({
-            startLine: {
-                line: typePosition.startLine,
-                offset: typePosition.startColumn
-            },
-            endLine: {
-                line: typePosition.endLine,
-                offset: typePosition.endColumn
-            }
-        });
-    }
-
-    public beginVisitLetClause(node: LetClause){
-        const typePosition: NodePosition = (node.letVarDeclarations[0] as LetVarDecl)?.expression?.position as NodePosition;
-        this.expressionNodeRanges.push({
-            startLine: {
-                line: typePosition.startLine,
-                offset: typePosition.startColumn
-            },
-            endLine: {
-                line: typePosition.endLine,
-                offset: typePosition.endColumn
-            }
-        });
-    }
-
-    public beginVisitLetExpression(node: LetExpression){
-        node.letVarDeclarations.map((decl: STNode) => {
-            if (STKindChecker.isLetVarDecl(decl)) {
-                if (STKindChecker.isCaptureBindingPattern(decl.typedBindingPattern.bindingPattern)) {
-                    const varNamePosition: NodePosition = decl.typedBindingPattern.bindingPattern.variableName.position;
-                    this.symbolNodesPositions.push({
-                        line: varNamePosition.startLine,
-                        offset: varNamePosition.startColumn
-                    });
-                }
-                // TODO: Add support for other binding patterns
-
-                // Keeping the below to ensure the backward compatibility
-                const declPosition: NodePosition = decl.expression.position;
-                this.expressionNodeRanges.push({
-                    startLine: {
-                        line: declPosition.startLine,
-                        offset: declPosition.startColumn
-                    },
-                    endLine: {
-                        line: declPosition.endLine,
-                        offset: declPosition.endColumn
-                    }
-                });
-            }
-        });
-    }
-
-    public beginVisitJoinClause(node: JoinClause){
-        const rhsExpression = node.joinOnCondition.rhsExpression
-        let typePosition: NodePosition;
-        if (STKindChecker.isFieldAccess(rhsExpression)){
-            typePosition = (node.joinOnCondition.rhsExpression as FieldAccess)?.expression?.position;
-        } else if (STKindChecker.isSimpleNameReference(rhsExpression)){
-            typePosition = (node.joinOnCondition.rhsExpression as SimpleNameReference)?.position;
-        } else if (STKindChecker.isOptionalFieldAccess(node.joinOnCondition.rhsExpression)){
-            typePosition = (node.joinOnCondition.rhsExpression as OptionalFieldAccess)?.expression?.position;
-        }
-
-        if (typePosition){
-            this.expressionNodeRanges.push({
-                startLine: {
-                    line: typePosition.startLine,
-                    offset: typePosition.startColumn
-                },
-                endLine: {
-                    line: typePosition.endLine,
-                    offset: typePosition.endColumn
-                }
-            });
-        }
-    }
-
-    public getExpressionNodesRanges(){
-        return this.expressionNodeRanges;
-    }
-
-    public getSymbolNodesPositions(){
-        return this.symbolNodesPositions;
-    }
-
-    public getFnDefPositions(){
-        return this.fnDefPositions;
-    }
-
-    public getNoOfParams(){
-        return this.noOfParams;
-    }
-}
-
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/ViewStateSetupVisitor.ts b/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/ViewStateSetupVisitor.ts
deleted file mode 100644
index 837479d9c62..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/ViewStateSetupVisitor.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { ListConstructor, STKindChecker, Visitor } from "@wso2/syntax-tree";
-
-import { DataMapperViewState } from "../../../utils/data-mapper-view-state";
-
-export class ViewStateSetupVisitor implements Visitor {
-
-    public beginVisitListConstructor(node: ListConstructor) {
-        node.expressions.forEach((expr) => {
-            if (!STKindChecker.isCommaToken(expr) && !expr.dataMapperViewState) {
-                expr.dataMapperViewState = new DataMapperViewState();
-            }
-        });
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Hooks/index.tsx b/workspaces/ballerina/data-mapper-view/src/components/Hooks/index.tsx
deleted file mode 100644
index 1832ab01a9e..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/Hooks/index.tsx
+++ /dev/null
@@ -1,366 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React, { useEffect, useRef } from 'react';
-import { useQuery } from '@tanstack/react-query';
-import { URI } from "vscode-uri";
-import { BallerinaProjectComponents } from "@wso2/ballerina-core";
-import { LangClientRpcClient } from '@wso2/ballerina-rpc-client';
-import {
-	DiagramModel,
-    DiagramModelGenerics
-} from "@projectstorm/react-diagrams";
-import { DataMapperNodeModel } from '../Diagram/Node/commons/DataMapperNode';
-import { getErrorKind } from '../Diagram/utils/dm-utils';
-import { OverlayLayerModel } from '../Diagram/OverlayLayer/OverlayLayerModel';
-import { ErrorNodeKind } from '../DataMapper/Error/RenderingError';
-import { useDMSearchStore, useDMStore } from '../../store/store';
-import { ListConstructorNode, MappingConstructorNode, PrimitiveTypeNode, QueryExpressionNode, RequiredParamNode } from '../Diagram/Node';
-import {
-    GAP_BETWEEN_MAPPING_HEADER_NODE_AND_INPUT_NODE,
-    GAP_BETWEEN_INPUT_NODES,
-    IO_NODE_DEFAULT_WIDTH,
-    OFFSETS,
-    VISUALIZER_PADDING
-} from '../Diagram/utils/constants';
-import { FromClauseNode } from '../Diagram/Node/FromClause';
-import { UnionTypeNode } from '../Diagram/Node/UnionType';
-import { UnsupportedExprNodeKind, UnsupportedIONode } from '../Diagram/Node/UnsupportedIO';
-import { LinkConnectorNode } from '../Diagram/Node/LinkConnector';
-import { LetClauseNode } from '../Diagram/Node/LetClause';
-import { JoinClauseNode } from '../Diagram/Node/JoinClause';
-import { LetExpressionNode } from '../Diagram/Node/LetExpression';
-import { ModuleVariableNode } from '../Diagram/Node/ModuleVariable';
-import { EnumTypeNode } from '../Diagram/Node/EnumType';
-import { ExpandedMappingHeaderNode } from '../Diagram/Node/ExpandedMappingHeader';
-import { isDMSupported } from '../DataMapper/utils';
-import { FunctionDefinition, ModulePart } from '@wso2/syntax-tree';
-import {
-    getExpandedMappingHeaderNodeHeight,
-    getFieldCountMismatchIndex,
-    getIONodeHeight,
-    hasSameIntermediateClauses,
-    isSameView
-} from '../Diagram/utils/diagram-utils';
-import { isInputNode, isOutputNode } from '../Diagram/Actions/utils';
-import { createImportReferenceMap } from '../Diagram/utils/import-utils';
-
-export const useProjectComponents = (langServerRpcClient: LangClientRpcClient, fileName: string, fnSrc: string): {
-    projectComponents: BallerinaProjectComponents;
-    isFetching: boolean;
-    isError: boolean;
-    refetch: any;
-} => {
-    const fetchProjectComponents = async () => {
-        try {
-            const componentResponse = await langServerRpcClient.getBallerinaProjectComponents({
-                documentIdentifiers: [
-                    {
-                        uri: URI.file(fileName).toString(),
-                    }
-                ]
-            })
-            return componentResponse;
-        } catch (networkError: any) {
-            console.error('Error while fetching project components', networkError);
-        }
-    };
-
-    const {
-        data: projectComponents,
-        isFetching,
-        isError,
-        refetch,
-    } = useQuery({
-        queryKey: ['fetchProjectComponents', {fnSrc}], 
-        queryFn: () => fetchProjectComponents(),
-        networkMode: 'always',
-    });
-
-    return { projectComponents, isFetching, isError, refetch };
-};
-
-export const useDiagramModel = (
-    nodes: DataMapperNodeModel[],
-    diagramModel: DiagramModel,
-    onError:(kind: ErrorNodeKind) => void,
-    zoomLevel: number,
-    screenWidth: number,
-): {
-    updatedModel: DiagramModel<DiagramModelGenerics>;
-    isFetching: boolean;
-    isError: boolean;
-    refetch: any;
-} => {
-    const offSetX = diagramModel.getOffsetX();
-    const offSetY = diagramModel.getOffsetY();
-    const noOfNodes = nodes.length;
-    const context = nodes.find(node => node.context)?.context;
-	const fnSource = context ? context.selection.selectedST.stNode.source : undefined;
-    const fieldPath = context?.selection.selectedST.fieldPath;
-    const queryExprPosition = context?.selection.selectedST?.position;
-    const collapsedFields = context?.collapsedFields;
-    const { inputSearch, outputSearch } = useDMSearchStore();
-    const prevScreenWidth = useRef(screenWidth);
-
-    const genModel = async () => {
-        if (prevScreenWidth.current !== screenWidth && diagramModel.getNodes().length > 0) {
-            const diagModelNodes = diagramModel.getNodes() as DataMapperNodeModel[];
-            diagModelNodes.forEach(diagModelNode => {
-                if (diagModelNode instanceof LinkConnectorNode || diagModelNode instanceof QueryExpressionNode) {
-                    diagModelNode.setHasScreenWidthChanged(true);
-                }
-                const repositionedNode = nodes.find(newNode => isOutputNode(newNode) && newNode.id === diagModelNode.id);
-                if (repositionedNode) {
-                    diagModelNode.setPosition(repositionedNode.getX(), repositionedNode.getY());
-                }
-            });
-            diagramModel.setZoomLevel(zoomLevel);
-            diagramModel.setOffset(offSetX, offSetY);
-            prevScreenWidth.current = screenWidth;
-            return diagramModel;
-        }
-        const newModel = new DiagramModel();
-        newModel.setZoomLevel(zoomLevel);
-        newModel.setOffset(offSetX, offSetY);
-        const showInputFilterEmpty = !nodes.some(
-            node => (node instanceof RequiredParamNode && node.getSearchFilteredType()) || node instanceof FromClauseNode
-        );
-        if (showInputFilterEmpty) {
-            const inputSearchNotFoundNode = new RequiredParamNode(undefined, undefined, undefined, true);
-            inputSearchNotFoundNode.setPosition(OFFSETS.SOURCE_NODE.X, OFFSETS.SOURCE_NODE.Y);
-            newModel.addNode(inputSearchNotFoundNode);
-        }
-        newModel.addAll(...nodes);
-        for (const node of nodes) {
-            const existingNode = diagramModel.getNodes().find(n => (n as DataMapperNodeModel).id === node.id);
-            const sameView = isSameView(node, existingNode as DataMapperNodeModel);
-            if (sameView && existingNode && existingNode.getY() !== 0) {
-                node.setPosition(existingNode.getX(), existingNode.getY());
-            }
-        }
-        for (const node of nodes) {
-            try {
-                if (node instanceof RequiredParamNode && !node.getSearchFilteredType()) {
-                    newModel.removeNode(node);
-                    continue;
-                }
-                node.setModel(newModel);
-                await node.initPorts();
-                if (node instanceof LinkConnectorNode || node instanceof QueryExpressionNode) {
-                    node.setHasScreenWidthChanged(false);
-                    continue;
-                }
-                node.initLinks();
-            } catch (e) {
-                const errorNodeKind = getErrorKind(node);
-                console.log(e);
-                onError(errorNodeKind);
-            }
-        }
-        newModel.setLocked(true);
-        newModel.addLayer(new OverlayLayerModel());
-        return newModel;
-    };
-
-    const {
-        data: updatedModel,
-        isFetching,
-        isError,
-        refetch,
-    } = useQuery({
-        queryKey: ['genModel', {fnSource, fieldPath, queryExprPosition, noOfNodes, inputSearch, outputSearch, collapsedFields, screenWidth}], 
-        queryFn: () => genModel(), 
-        networkMode: 'always',
-    });
-
-    return { updatedModel, isFetching, isError, refetch };
-};
-
-export const useRepositionedNodes = (nodes: DataMapperNodeModel[], zoomLevel: number, diagramModel: DiagramModel) => {
-    const nodesClone = [...nodes];
-    const prevNodes = diagramModel.getNodes() as DataMapperNodeModel[];
-    const filtersUnchanged = hasSameIntermediateClauses(nodesClone, prevNodes);
-    const fieldCountMismatchIndex = getFieldCountMismatchIndex(nodesClone, prevNodes);
-
-    let prevBottomY = 0;
-
-    nodesClone.forEach((node, index) => {
-        const existingNode = prevNodes.find(prevNode => prevNode.id === node.id);
-        const sameView = isSameView(node, existingNode);
-
-        if (node instanceof MappingConstructorNode
-            || node instanceof ListConstructorNode
-            || node instanceof PrimitiveTypeNode
-            || node instanceof UnionTypeNode
-            || (node instanceof UnsupportedIONode && node.kind === UnsupportedExprNodeKind.Output)
-        ) {
-            const x = (window.innerWidth - VISUALIZER_PADDING) * (100 / zoomLevel) - IO_NODE_DEFAULT_WIDTH;
-            const y = existingNode && sameView && existingNode.getY() !== 0 ? existingNode.getY() : 0;
-            node.setPosition(x, y);
-        }
-        if (node instanceof RequiredParamNode
-            || node instanceof LetClauseNode
-            || node instanceof JoinClauseNode
-            || node instanceof LetExpressionNode
-            || node instanceof ModuleVariableNode
-            || node instanceof EnumTypeNode
-            || node instanceof ExpandedMappingHeaderNode
-        ) {
-            const x = OFFSETS.SOURCE_NODE.X;
-            const computedY = prevBottomY + (prevBottomY ? GAP_BETWEEN_INPUT_NODES : 0);
-            const utilizeExistingY = existingNode
-                && sameView
-                && filtersUnchanged
-                && existingNode.getY() !== 0
-                && !(node instanceof LetExpressionNode)
-                && (fieldCountMismatchIndex === -1 || index <= fieldCountMismatchIndex);
-
-            let y = utilizeExistingY ? existingNode.getY() : computedY;
-
-            node.setPosition(x, y);
-
-            if (node instanceof RequiredParamNode) {
-                const nodeHeight = getIONodeHeight(node.numberOfFields);
-                prevBottomY = y + nodeHeight;
-            } else if (node instanceof ExpandedMappingHeaderNode) {
-                const nodeHeight = getExpandedMappingHeaderNodeHeight(node);
-                prevBottomY = y + (nodeHeight * (100/zoomLevel)) + GAP_BETWEEN_MAPPING_HEADER_NODE_AND_INPUT_NODE;
-            } else if (node instanceof LetClauseNode || node instanceof JoinClauseNode) {
-                const nodeHeight = getIONodeHeight(node.numberOfFields);
-                prevBottomY = y + (nodeHeight * (100/zoomLevel)) + GAP_BETWEEN_INPUT_NODES;
-            }
-        }
-        if (node instanceof FromClauseNode) {
-            const x = OFFSETS.SOURCE_NODE.X;
-            const computedY = prevBottomY + (prevBottomY ? GAP_BETWEEN_INPUT_NODES : 0);
-            let y = existingNode && sameView && filtersUnchanged && existingNode.getY() !== 0 ? existingNode.getY() : computedY;
-
-            node.setPosition(x, y);
-            const nodeHeight = getIONodeHeight(node.numberOfFields);
-            prevBottomY = computedY + nodeHeight;
-        }
-    });
-
-    return nodesClone;
-}
-
-export const useDMMetaData = (langServerRpcClient: LangClientRpcClient): {
-    ballerinaVersion: string;
-    dMSupported: boolean;
-    dMUnsupportedMessage: string;
-    isFetching: boolean;
-    isError: boolean;
-    refetch: any;
-} => {
-    const fetchDMMetaData = async () => {
-        try {
-            const ballerinaVersion = (await langServerRpcClient.getBallerinaVersion()).version;
-            const dMSupported = isDMSupported(ballerinaVersion);
-            const dMUnsupportedMessage = `The current ballerina version ${ballerinaVersion.replace(
-                "(swan lake)", "").trim()
-            } does not support the Data Mapper feature. Please update your Ballerina versions to 2201.1.2, 2201.2.1, or higher version.`;
-            return { ballerinaVersion, dMSupported, dMUnsupportedMessage };
-        } catch (networkError: any) {
-            console.error('Error while fetching ballerina version', networkError);
-        }
-    };
-
-    const {
-        data: { ballerinaVersion, dMSupported, dMUnsupportedMessage } = {},
-        isFetching,
-        isError,
-        refetch,
-    } = useQuery({
-        queryKey: ['fetchDMMetaData'], 
-        queryFn: () => fetchDMMetaData(), 
-        networkMode: 'always'
-    });
-
-    return { ballerinaVersion, dMSupported, dMUnsupportedMessage, isFetching, isError, refetch };
-};
-
-export const useFileContent = (langServerRpcClient: LangClientRpcClient, filePath: string, fnST: FunctionDefinition): {
-    content: [string, string[]];
-    isFetching: boolean;
-    isError: boolean;
-    refetch: any;
-} => {
-    const { source, position } = fnST;
-    const dmStore = useDMStore();
-    const fetchContent = async () : Promise<[string, string[]]> => {
-        const importStatements: string[] = [];
-        try {
-            const fullST = await langServerRpcClient.getST({
-                documentIdentifier: { uri: URI.file(filePath).toString() }
-            });
-            const modulePart = fullST.syntaxTree as ModulePart;
-            modulePart?.imports.map((importDeclaration: any) => {
-                const src = importDeclaration.source.trim();
-                const match = src.match(/\bimport\s+[^\s;]+(?:\s+as\s+\w+)?\s*;/);
-                if (match) {
-                    importStatements.push(match[0]);
-                }
-            });
-            dmStore.setImports(importStatements);
-            dmStore.setImportReferenceMap(createImportReferenceMap(importStatements));
-            return [modulePart.source, importStatements];
-        } catch (networkError: any) {
-            console.error('Error while fetching content', networkError);
-        }
-    };
-
-    const {
-        data: content,
-        isFetching,
-        isError,
-        refetch,
-    } = useQuery({
-        queryKey: ['fetchFileContent', { filePath, source, position }], 
-        queryFn: () => fetchContent(), 
-        networkMode: 'always'
-    });
-
-    return { content, isFetching, isError, refetch };
-};
-
-export const useSearchScrollReset = (
-    diagramModel: DiagramModel<DiagramModelGenerics>
-) => {
-    const { inputSearch, outputSearch } = useDMSearchStore();
-    const prevInSearchTermRef = useRef<string>("");
-    const prevOutSearchTermRef = useRef<string>("");
-
-    useEffect(() => {
-        const nodes = diagramModel.getNodes() as DataMapperNodeModel[];
-        const inputNode = nodes.find((node) => (isInputNode(node) && !(node instanceof LetExpressionNode)));
-        const letExpressionNode = nodes.find((node) => (node instanceof LetExpressionNode));
-        const outputNode = nodes.find(isOutputNode);
-
-        if (inputNode && prevInSearchTermRef.current != inputSearch) {
-            inputNode.setPosition(inputNode.getX(), 0);
-            letExpressionNode?.setPosition(letExpressionNode.getX(), inputNode.height + GAP_BETWEEN_INPUT_NODES);
-            prevInSearchTermRef.current = inputSearch;
-        }
-
-        if (outputNode && prevOutSearchTermRef.current != outputSearch) {
-            outputNode.setPosition(outputNode.getX(), 0);
-            prevOutSearchTermRef.current = outputSearch;
-        }
-
-    }, [diagramModel]);
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/StatementEditorComponent/StatementEditorComponent.tsx b/workspaces/ballerina/data-mapper-view/src/components/StatementEditorComponent/StatementEditorComponent.tsx
deleted file mode 100644
index 5e8843e0ace..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/StatementEditorComponent/StatementEditorComponent.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-// tslint:disable: no-implicit-dependencies
-import React from "react";
-
-import { STModification } from "@wso2/ballerina-core";
-import { LangClientRpcClient, LibraryBrowserRpcClient } from "@wso2/ballerina-rpc-client";
-import { StatementEditorWrapper } from "@wso2/ballerina-statement-editor";
-
-import { ExpressionInfo } from "../DataMapper/DataMapper";
-
-
-export interface StatementEditorComponentProps {
-    expressionInfo: ExpressionInfo,
-    langServerRpcClient: LangClientRpcClient;
-    libraryBrowserRpcClient: LibraryBrowserRpcClient;
-    currentFile?: {
-        content: string,
-        path: string,
-        size: number
-    };
-    applyModifications: (modifications: STModification[]) => void;
-    onCancel: () => void;
-    onClose: () => void;
-    importStatements: string[];
-    currentReferences?: string[];
-}
-function StatementEditorC(props: StatementEditorComponentProps) {
-    const {
-        expressionInfo,
-        langServerRpcClient,
-        libraryBrowserRpcClient,
-        currentFile,
-        applyModifications,
-        onCancel,
-        onClose,
-        importStatements,
-        currentReferences
-    } = props;
-
-    const stmtEditorComponent = StatementEditorWrapper(
-        {
-            formArgs: { formArgs: {
-                targetPosition: expressionInfo.valuePosition
-                } },
-            config: {
-                type: "Custom",
-                model: null
-            },
-            onWizardClose: onClose,
-            syntaxTree: null,
-            stSymbolInfo: null,
-            langServerRpcClient: langServerRpcClient,
-            libraryBrowserRpcClient: libraryBrowserRpcClient,
-            label: expressionInfo.label,
-            initialSource:  expressionInfo.value,
-            applyModifications,
-            currentFile: {
-                ...currentFile,
-                content: currentFile.content,
-                originalContent: currentFile.content
-            },
-            onCancel,
-            isExpressionMode: true,
-            importStatements,
-            currentReferences
-        }
-    );
-
-    return  stmtEditorComponent;
-}
-
-export const StatementEditorComponent = React.memo(StatementEditorC);
diff --git a/workspaces/ballerina/data-mapper-view/src/components/styles.ts b/workspaces/ballerina/data-mapper-view/src/components/styles.ts
deleted file mode 100644
index a5d3d58dec2..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/components/styles.ts
+++ /dev/null
@@ -1,344 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { css } from "@emotion/css";
-import { IO_NODE_DEFAULT_WIDTH, IO_NODE_FIELD_HEIGHT } from "./Diagram/utils/constants";
-
-const typeLabel = {
-    marginLeft: "3px",
-    marginRight: "24px",
-    padding: "5px",
-    minWidth: "100px",
-    color: "inherit",
-    verticalAlign: "middle",
-};
-
-const addElementButton = {
-    color: "var(--vscode-inputOption-activeForeground)",
-    display: "flex",
-    justifyContent: "space-between",
-    fontStyle: "normal",
-    fontWeight: 400,
-    fontSize: "13px",
-    lineHeight: "24px",
-};
-
-const treeLabel = {
-    verticalAlign: "middle",
-    padding: "5px",
-    minWidth: "100px",
-    display: "flex",
-    width: "100%",
-    height: `${IO_NODE_FIELD_HEIGHT}px`,
-    '&:hover': {
-        backgroundColor: 'var(--vscode-list-hoverBackground)',
-    },
-};
-
-export const useIONodesStyles = () => ({
-    inputTypeLabel: css({
-        ...typeLabel
-    }),
-    outputTypeLabel: css({
-        fontSize: "13px",
-        fontWeight: 400,
-        ...typeLabel
-    }),
-    valueLabel: css({
-        padding: "5px",
-        fontWeight: 600,
-        fontSize: "13px",
-        color: "inherit",
-        verticalAlign: "middle",
-    }),
-    inPort: css({
-		float: "left",
-		marginRight: "5px",
-		width: 'fit-content',
-		display: "flex",
-		alignItems: "center"
-	}),
-    outPort: css({
-        float: "right",
-        width: 'fit-content',
-        marginLeft: "auto",
-        display: "flex",
-        alignItems: "center"
-    }),
-    label: css({
-        display: "flex",
-        alignItems: "center",
-        width: "300px",
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        color: "inherit"
-    }),
-    queryPortWrap: css({
-        width: IO_NODE_DEFAULT_WIDTH,
-        position: "absolute"
-    }),
-    nodeType: css({
-        float: 'right',
-        marginRight: 5,
-        color: "var(--vscode-pickerGroup-border)",
-    }),
-    treeLabelDisableHover: css({
-        '&:hover': {
-            backgroundColor: 'var(--vscode-input-background)',
-        },
-        opacity: 0.8
-    }),
-    treeLabelDisabled: css({
-        cursor: 'not-allowed',
-        opacity: 0.5
-    }),
-    header: css({
-		color: "black",
-		backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
-		display: "flex",
-		height: "40px",
-		padding: "8px"
-	}),
-    boldedTypeLabel: css({
-		fontWeight: 800,
-		fontSize: "14px",
-	}),
-    labelDisabled: css({
-		opacity: 0.5
-	}),
-    treeLabelPortSelected: css({
-        color: "var(--vscode-list-activeSelectionForeground)",
-        backgroundColor: 'var(--vscode-list-activeSelectionBackground)',
-        outline: "1px solid var(--vscode-list-focusAndSelectionOutline, var(--vscode-contrastActiveBorder, var(--vscode-list-focusOutline)))",
-        "&:hover": {
-            backgroundColor: 'var(--vscode-list-activeSelectionBackground)'
-        }
-    }),
-    treeLabelParentHovered: css({
-        backgroundColor: 'var(--vscode-list-hoverBackground)',
-    }),
-    treeLabelArray: css({
-        ...treeLabel,
-        height: 'fit-content',
-        flexDirection: "column"
-    }),
-    ArrayFieldRow: css({
-        display: "flex",
-        alignItems: 'center',
-        '&:hover': {
-            backgroundColor: 'inherit',
-        }
-    }),
-    ArrayFieldRowDisabled: css({
-        cursor: 'not-allowed',
-        opacity: 0.5
-    }),
-    innerTreeLabel: css({
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "flex-start",
-        width: "inherit",
-        padding: "10px 12px",
-        margin: "10px",
-        flex: "none",
-        order: 1,
-        flexGrow: 0
-    }),
-    outputNodeValue: css({
-        verticalAlign: "middle",
-        padding: "5px",
-        backgroundColor: "var(--vscode-input-background)",
-        borderRadius: "5px",
-        cursor: 'pointer',
-        pointerEvents: 'auto',
-        transition: 'border 0.2s',
-        border: `1px solid var(--vscode-input-background)`,
-        '&:hover': {
-            border: "1px solid var(--vscode-pickerGroup-border)"
-        }
-    }),
-    addArrayElementButton: css({
-        "& > vscode-button": {
-            padding: "5px",
-            textTransform: "none",
-            ...addElementButton
-        },
-        "& > vscode-button > *": {
-            margin: "0px 6px"
-        }
-    }),
-    addLocalVariableButton: css({
-        "& > vscode-button": {
-            height: "40px",
-            width: `${IO_NODE_DEFAULT_WIDTH}px`,
-            border: "none",
-        },
-        "& > vscode-button > *": {
-            margin: "0px 6px"
-        }
-    }),
-    requiredMark: css({
-        color: "var(--vscode-errorForeground)",
-        margin: '0 2px',
-        fontSize: '13px'
-    }),
-    treeLabel: css({
-        ...treeLabel
-    }),
-    enumHeaderTreeLabel: css({
-        verticalAlign: "middle",
-        padding: "5px",
-        minWidth: "100px",
-        display: "flex",
-        minHeight: "24px",
-        backgroundColor: "var(--vscode-sideBar-background)"
-    }),
-    gotoExprIcon: css({
-        color: "var(--vscode-input-placeholderForeground)",
-        cursor: 'pointer'
-    })
-});
-
-export const useIntermediateNodeStyles = () => ({
-    root: css({
-        width: '100%',
-        backgroundColor: "var(--vscode-sideBar-background)",
-        padding: "2px",
-        borderRadius: "2px",
-        display: "flex",
-        flexDirection: "column",
-        gap: "5px",
-        color: "var(--vscode-checkbox-border)",
-        alignItems: "center",
-        border: "1px solid var(--vscode-welcomePage-tileBorder)",
-    }),
-    element: css({
-        backgroundColor: 'var(--vscode-input-background)',
-        padding: '5px',
-        cursor: 'pointer',
-        transitionDuration: '0.2s',
-        userSelect: 'none',
-        pointerEvents: 'auto',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        '&:hover': {
-            filter: 'brightness(0.95)',
-        },
-    }),
-    header: css({
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        "& > *": {
-            margin: "0 2px"
-        }
-    }),
-    loadingContainer: css({
-        padding: "10px"
-    })
-});
-
-export const useUnionTypeNodeStyles = () => ({
-    selectTypeWrap: css({
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "flex-start",
-        width: "inherit",
-        padding: "10px",
-        background: "var(--vscode-sideBar-background)",
-        borderRadius: "4px"
-    }),
-    unionTypesList: css({
-        columnGap: '5%',
-        display: 'grid',
-        gridTemplateColumns: '100%',
-        width: 'inherit',
-        "& .MuiListItem-root": {
-            marginBottom: '8px',
-            padding: '0 10px'
-        }
-    }),
-    unionTypeListItem: css({
-        display: 'flex',
-        alignItems: 'center',
-        width: '100%',
-        '&:hover': {
-            backgroundColor: 'var(--vscode-list-hoverBackground)',
-        },
-        '&:active': {
-            backgroundColor: 'rgba(204,209,242,0.61)'
-        }
-    }),
-    unionTypeValue: css({
-        color: "var(--vscode-foreground)",
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis'
-    }),
-    warningContainer: css({
-        display: 'flex',
-        alignItems: 'center'
-    }),
-    warningText: css({
-        width: '100%',
-        color: 'var(--vscode-foreground)',
-        fontSize: '14px',
-        fontWeight: '400',
-        marginBottom: '8px',
-        padding: '5px 10px',
-        backgroundColor: 'var(--vscode-input-background)',
-        opacity: 0.8
-    }),
-    treeContainer: css({
-        width: `${IO_NODE_DEFAULT_WIDTH}px`,
-        cursor: "default",
-        padding: "16px",
-        backgroundColor: "var(--vscode-input-background)",
-        border: "1px dashed var(--vscode-input-border)",
-        borderRadius: "4px"
-    }),
-    unsupportedIOBanner: css({
-        padding: "12px"
-    }),
-    infoContainer: css({
-        display: 'flex',
-        alignItems: 'center',
-        lineHeight: '1.4',
-        fontSize: '13.5px',
-        marginBottom: '8px'
-    }),
-    warningIcon: css({
-        color: 'var(--vscode-notificationsWarningIcon-foreground)',
-        fontSize: '16px',
-        marginRight: '8px'
-    }),
-    messageTitle: css({
-        fontWeight: 500
-    }),
-    divider: css({
-        margin: '12px 0'
-    }),
-    messageBody: css({
-        color: 'var(--vscode-foreground)',
-        opacity: 0.8,
-        fontSize: '13px',
-        lineHeight: '1.6'
-    })
-});
diff --git a/workspaces/ballerina/data-mapper-view/src/index.tsx b/workspaces/ballerina/data-mapper-view/src/index.tsx
deleted file mode 100644
index 3ad7a4e99b3..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/index.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React from "react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { FunctionDefinition } from "@wso2/syntax-tree";
-import { HistoryEntry, STModification } from "@wso2/ballerina-core";
-import { DataMapper } from "./components/DataMapper/DataMapper";
-import { LangClientRpcClient } from "@wso2/ballerina-rpc-client";
-import { LibraryBrowserRpcClient } from "@wso2/ballerina-rpc-client/lib/rpc-clients/library-browser/rpc-client";
-import { StatementEditorComponentProps } from "@wso2/record-creator";
-
-const queryClient = new QueryClient({
-    defaultOptions: {
-        queries: {
-            retry: false,
-            refetchOnWindowFocus: false,
-            staleTime: 1000,
-            gcTime: 1000,
-        },
-    },
-});
-
-export interface DataMapperViewProps {
-    fnST: FunctionDefinition;
-    filePath: string;
-    langServerRpcClient: LangClientRpcClient;
-    libraryBrowserRpcClient?: LibraryBrowserRpcClient;
-    applyModifications: (modifications: STModification[], isRecordModification?: boolean) => Promise<void>;
-    goToFunction?: (componentInfo: HistoryEntry) => Promise<void>;
-    onClose?: () => void;
-    renderRecordPanel?: (props: {
-        closeAddNewRecord: (createdNewRecord?: string) => void,
-        onUpdate: (update: boolean) => void
-    } & StatementEditorComponentProps) => React.ReactElement;
-}
-
-export function DataMapperView(props: DataMapperViewProps) {
-    return (
-        <QueryClientProvider client={queryClient}>
-            <DataMapper {...props}/>
-        </QueryClientProvider>
-    );
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/lang/en.json b/workspaces/ballerina/data-mapper-view/src/lang/en.json
deleted file mode 100644
index 0967ef424bc..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/lang/en.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/workspaces/ballerina/data-mapper-view/src/resources/test-samples/.devcontainer.json b/workspaces/ballerina/data-mapper-view/src/resources/test-samples/.devcontainer.json
deleted file mode 100644
index 86079a30844..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/resources/test-samples/.devcontainer.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-    "image": "ballerina/ballerina-devcontainer:2201.6.0",
-    "extensions": ["WSO2.ballerina"],
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/resources/test-samples/.gitignore b/workspaces/ballerina/data-mapper-view/src/resources/test-samples/.gitignore
deleted file mode 100644
index 7512ebe2325..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/resources/test-samples/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-target
-generated
-Config.toml
diff --git a/workspaces/ballerina/data-mapper-view/src/resources/test-samples/Ballerina.toml b/workspaces/ballerina/data-mapper-view/src/resources/test-samples/Ballerina.toml
deleted file mode 100644
index 53e513bd80a..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/resources/test-samples/Ballerina.toml
+++ /dev/null
@@ -1,8 +0,0 @@
-[package]
-org = "data_mapper"
-name = "test_samples"
-version = "0.1.0"
-distribution = "2201.6.0"
-
-[build-options]
-observabilityIncluded = true
diff --git a/workspaces/ballerina/data-mapper-view/src/resources/test-samples/union-type-output/arrayOfUnionTypes.bal b/workspaces/ballerina/data-mapper-view/src/resources/test-samples/union-type-output/arrayOfUnionTypes.bal
deleted file mode 100644
index 4015b53e86f..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/resources/test-samples/union-type-output/arrayOfUnionTypes.bal
+++ /dev/null
@@ -1,145 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import ballerina/auth;
-import ballerina/email;
-
-// array of union types, type resolved through value expression
-function tnfUnionArray1(Vehicle vehicle) returns (SUV|HighEndCar)[] => [
-    {
-        model: vehicle.model.transmission,
-        year: vehicle.year
-    }
-];
-
-// array of union types, type resolved through value expression
-function tnfUnionArray2(Vehicle vehicle) returns (SUV|HighEndCar)[] => [
-    {
-        year: 0,
-        model: vehicle.model.transmission
-    },
-    {
-        year: vehicle.year,
-        model: {
-            transmission: "",
-            engine: ""
-        }
-    }
-];
-
-// array of union types which are arrays, type resolved via casting and via value expression
-function tnfUnionArray3(Vehicle vehicle) returns (SUV[]|HighEndCar[])[] => [
-    <SUV[]>[
-        {
-            year: 0,
-            model: ""
-        },
-        {}
-    ],
-    [
-        {
-            year: 0,
-            model: {
-                transmission: vehicle.model.transmission,
-                engine: ""
-            }
-        }
-    ]
-];
-
-// array of union types which are arrays, the value is empty
-function tnfUnionArray4(Vehicle vehicle) returns (SUV[]|HighEndCar[])[] => [
-];
-
-// array of union types which are arrays (imported types), type is resolved through value expression
-function tnfUnionArray5(Vehicle vehicle) returns (email:Message[]|HighEndCar[])[] => [
-    [
-        {
-            subject: "",
-            to: ""
-        }
-    ]
-];
-
-// array of union types which consists of array and record type (imported)
-function tnfUnionArray6(Vehicle vehicle) returns (email:Message|HighEndCar[])[] => [
-    {
-        subject: "",
-        to: ""
-    }
-];
-
-// array of union types, type resolved via type casting
-function tnfUnionArray7(Vehicle vehicle) returns (SUV|HighEndCar)[] => [
-    <SUV>{
-        year: 0
-    }
-];
-
-// array of union types, type narrowed to single type
-function tnfUnionArray8(Vehicle vehicle) returns (SUV|error)[] => [
-    {}
-];
-
-// optional type array, type narrowed to single type
-function tnfUnionArray9(Vehicle vehicle) returns SUV?[] => [
-    {}
-];
-
-// array of imported union types, type resolved via value expression
-function tnfUnionArray10(Vehicle vehicle) returns (email:Options|auth:LdapUserStoreConfig)[] => [
-    {
-        userEntryObjectClass: "",
-        userNameSearchFilter: "",
-        groupNameAttribute: "",
-        userNameAttribute: "",
-        membershipAttribute: "",
-        groupNameListFilter: "",
-        groupSearchBase: [
-            vehicle.model.engine
-        ],
-        userSearchBase: "",
-        groupNameSearchFilter: "",
-        userNameListFilter: "",
-        domainName: "",
-        connectionUrl: "",
-        groupEntryObjectClass: "",
-        connectionName: "",
-        connectionPassword: ""
-    }
-];
-
-// array of imported union types, type resolved via type casting and via value expression
-function tnfUnionArray11(Vehicle vehicle) returns (email:Options|auth:LdapUserStoreConfig)[] => [
-    <auth:LdapUserStoreConfig>{
-        userEntryObjectClass: "",
-        userNameSearchFilter: "",
-        groupNameAttribute: ""
-    },
-    {}
-];
-
-// array of imported union types consist of primitive type
-function tnfUnionArray12(Vehicle vehicle) returns (int|SUV)[] => [
-    0,
-    <SUV>{}
-];
-
-// regular array typed output
-function tnfUnionArray13(Vehicle v) returns SUV[] => [
-
-];
diff --git a/workspaces/ballerina/data-mapper-view/src/resources/test-samples/union-type-output/types.bal b/workspaces/ballerina/data-mapper-view/src/resources/test-samples/union-type-output/types.bal
deleted file mode 100644
index ee10d89b8e9..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/resources/test-samples/union-type-output/types.bal
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-type Vehicle record {
-    string category;
-    Model model;
-    decimal price;
-    int year;
-};
-
-type Car record {
-    SUV|HighEndCar vehicle;
-};
-
-type SUV record {|
-    string model;
-    int year;
-|};
-
-type HighEndCar record {
-    Model model;
-    int year;
-};
-
-type Model record {
-    string transmission;
-    string engine;
-};
-
-type NewVehicle record {
-    Model|string model;
-};
-
-type CarA record {
-    SUV vehicle;
-};
-
-type CarB record {
-    SUV|error vehicle;
-};
-
-type CarC record {
-    SUV[]|HighEndCar[] vehicle;
-};
-
-type CarD record {
-    (SUV|HighEndCar)[] vehicle;
-};
-
-type VehicleA record {
-    string category;
-    Model[] model;
-};
-
-type CarArr record {
-    string id;
-    ModelA[] model;
-};
-
-type CarInner record {
-    string|ModelA vehicle;
-};
-
-type ModelA record {
-    SUV|HighEndCar vehicleA;
-};
-
-type T1 record {
-    string str;
-};
-
-type T11 record {
-    string str;
-    record {
-        string name;
-        int age;
-        record {
-            string parentName;
-            int parentAge;
-        } parent;
-    } person;
-};
-
-type T2 record {
-    boolean foo;
-};
-
-type T3 record {
-    T1[] t1s;
-};
-
-type T4 record {
-    T1[]|T2[] t1sOrT2s;
-};
-
-type T5 record {
-    (T1|T2)[] t1OrT2s;
-};
-
-type T51 record {
-    (T11|T2)[] t11sOrT2s;
-};
-
-type TypeAll TypeA|TypeB;
-
-type TypeA record {
-    string strA;
-    TypeB1 tb1;
-};
-
-type TypeB TypeB1|TypeB2;
-
-type TypeB1 record {
-    string strB1;
-};
-
-type TypeB2 record {
-    string strB2;
-};
-
-type TypeC record {
-    string strC;
-};
diff --git a/workspaces/ballerina/data-mapper-view/src/resources/test-samples/union-type-output/unionTypeFields.bal b/workspaces/ballerina/data-mapper-view/src/resources/test-samples/union-type-output/unionTypeFields.bal
deleted file mode 100644
index 8e25d077935..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/resources/test-samples/union-type-output/unionTypeFields.bal
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// Union type field, the type is resolved via the value expr
-function tnfUnionField1(Vehicle car) returns Car => {
-    vehicle: {
-        model: car.category,
-        year: car.year
-    }
-};
-
-// Type casted union type field
-function tnfUnionField2(Vehicle car) returns Car => {
-    vehicle: <SUV>{
-        model: car.category,
-        year: car.model.engine.length()
-    }
-};
-
-// Union type field which is missing the value
-function tnfUnionField3(Vehicle car) returns Car => {
-    vehicle:
-
-};
-
-// Normal field
-function tnfUnionField4(Vehicle car) returns CarA => {
-    vehicle: {
-        model: car.category,
-        year: car.year
-    }
-
-};
-
-// Value assigned via link
-function tnfUnionField5(Vehicle vehicle) returns NewVehicle => {
-    model: <string>vehicle.category
-
-};
-
-// Union type consist with error
-function tnfUnionField6(Vehicle car) returns CarB => {
-    vehicle: {}
-};
-
-// Union type field containing arrays
-function tnfUnionField7(Vehicle car) returns CarC => {
-    vehicle: <HighEndCar[]>[
-        {
-            model: car.model
-        },
-        {
-            model: {
-                engine: car.category + car.model.engine
-            }
-        }
-    ]
-
-};
-
-// Union type field within query expression
-function tnfUnionField8(VehicleA car) returns CarArr => {
-};
-
-// Union type inside a union type field
-function tnfUnionField9(Vehicle car) returns CarInner => {
-    vehicle: <ModelA>{
-        vehicleA: <HighEndCar>{
-            model: car.model,
-            year: car.year
-        }
-    }
-
-};
-
-// Union type field inside a root union type
-function tnfUnionField10(Vehicle car) returns Car|CarA => {
-
-};
-
-// Array of union type field
-function tnfUnionField11(Vehicle car) returns CarD => {
-    vehicle: [
-        <HighEndCar>{}
-    ]
-
-};
diff --git a/workspaces/ballerina/data-mapper-view/src/resources/test-samples/union-type-output/unionTypesAtRoot.bal b/workspaces/ballerina/data-mapper-view/src/resources/test-samples/union-type-output/unionTypesAtRoot.bal
deleted file mode 100644
index 291d7100495..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/resources/test-samples/union-type-output/unionTypesAtRoot.bal
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import ballerina/auth;
-import ballerina/jwt;
-import ballerina/email;
-
-// Type resolved through value expr
-function tnfUnionRoot1(Vehicle vehicle) returns SUV|HighEndCar => {
-    year: vehicle.year,
-    model: {
-        transmission: vehicle.model.transmission,
-        engine: vehicle.model.engine
-    }
-};
-
-// Type casted
-function tnfUnionRoot2(Vehicle vehicle) returns SUV|HighEndCar => <SUV>{
-    model: vehicle.category
-};
-
-// Type casted with let expression
-function tnfUnionRoot3(Vehicle vehicle) returns SUV|HighEndCar => let var var1 = "100" in <SUV>{
-        model: var1
-    };
-
-// Mapped to the root type
-function tnfUnionRoot4(Vehicle vehicle) returns SUV|HighEndCar => vehicle.model;
-
-// Union of array types
-function tnfUnionRoot5(Vehicle vehicle) returns SUV[]|HighEndCar[] => [
-];
-
-// Union of array types, resolved type through value expr (need to handle adding new elements)
-function tnfUnionRoot6(Vehicle vehicle) returns SUV|HighEndCar[] => [
-    {
-        year: vehicle.year,
-        model: {
-            transmission: "",
-            engine: ""
-        }
-    }
-];
-
-// Union of multi-dimensional array types
-function tnfUnionRoot7(Vehicle vehicle) returns HighEndCar[]|HighEndCar[][] => [
-];
-
-// mapped to root union type, a mix of array and non-array types
-function tnfUnionRoot8(int x) returns int|float[] => x;
-
-// mapped to root union type, a mix of array and non-array types, resolved type through expr
-function tnfUnionRoot9(int x) returns int|float[] => [
-    x * 1.0,
-    0
-];
-
-// union types consisting imported array types
-function tnfUnionRoot10(int x) returns email:Options[]|auth:LdapUserStoreConfig[] => [
-    {
-        connectionName: x
-    }
-];
-
-// union types consisting imported types, type resolved through value expr
-function tnfUnionRoot11(int x) returns email:Options|auth:LdapUserStoreConfig => {
-
-    htmlBody: "",
-    contentType: "",
-    headers: {},
-    cc: <string>"",
-    bcc: <string>"",
-    replyTo: <string>"",
-    attachments: <email:Attachment>{
-        filePath: "",
-        contentType: ""
-    },
-    sender: ""
-};
-
-// multiple union types including types which are inner union type, type resolved through value expr
-function tnfUnionRoot12(int x, string y) returns TypeA|TypeB|TypeC|error => {
-    strB1: "12"
-};
-
-// multiple union type consist of array types
-function tnfUnionRoot13(int x, string y) returns TypeA[]|(TypeB|TypeC)[]|TypeB1 => <(TypeB1|TypeB2|TypeC)[]>[
-];
-
-// mapped to root union type, resolved type through expr
-function tnfUnionRoot14(TypeA typeA) returns TypeA|TypeB|TypeC|error => typeA.tb1;
-
-// mapped to root union type, resolved type through expr
-function tnfUnionRoot15(int x) returns TypeA|TypeB|TypeC|error => {
-    strB1: x.toString()
-};
-
-// unsupported union type array
-function tnfUnionRoot16(Vehicle vehicle) returns (SUV|xml)[] => [];
-
-// unsupported arrays of union types
-
-function tnfUnionRoot17(Vehicle vehicle) returns xml[]|TypeA[] => [];
-
-// anydata typed output
-function tnfUnionRoot18(TypeA a) returns anydata => {};
diff --git a/workspaces/ballerina/data-mapper-view/src/resources/test-samples/union-type-output/unionWithinQuery.bal b/workspaces/ballerina/data-mapper-view/src/resources/test-samples/union-type-output/unionWithinQuery.bal
deleted file mode 100644
index 078f40a3e96..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/resources/test-samples/union-type-output/unionWithinQuery.bal
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// query expression returns arrays of union type (not supported ATM https://github.com/ballerina-platform/ballerina-lang/issues/40012)
-function tnfUnionQuery1(T3 t3) returns T4 => {
-    t1sOrT2s: from var t1sItem in t3.t1s
-        select {
-            str:
-        }
-};
-
-// query expression returns union type consist of arrays , type resolved by casting
-function tnfUnionQuery2(T3 t3) returns T5 => {
-    t1OrT2s: from var t1sItem in t3.t1s
-        select <T1>{
-            str: 0
-        }
-};
-
-// query expression returns union type consist of arrays , type resolved via value expression
-function tnfUnionQuery3(T3 t3) returns T5 => {
-    t1OrT2s: from var t1sItem in t3.t1s
-        select {
-            str: t1sItem.str
-        }
-};
-
-// query expression returns union type consist of arrays , type resolved via value expression
-function tnfUnionQuery5(T3 t3) returns T51 => {
-    t11sOrT2s: from var t1sItem in t3.t1s
-        select {
-            str: "",
-            person: {
-                name: t1sItem.str,
-                age: 10,
-                parent: {
-                    parentName: t1sItem.str,
-                    parentAge: 100
-                }
-            }
-        }
-};
-
-// query expression returns union type consist of arrays , select clause contains conditional expression (not supported ATM https://github.com/ballerina-platform/ballerina-lang/issues/40013)
-function tnfUnionQuery6(T3 t3) returns T5 => {
-    t1OrT2s: from var t1sItem in t3.t1s
-        select t1sItem.str == "foo" ? {str: t1sItem.str} : {foo: true}
-};
diff --git a/workspaces/ballerina/data-mapper-view/src/resources/test-samples/union-type-output/unionWithinQueryAtFnBody.bal b/workspaces/ballerina/data-mapper-view/src/resources/test-samples/union-type-output/unionWithinQueryAtFnBody.bal
deleted file mode 100644
index 47a72e8e862..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/resources/test-samples/union-type-output/unionWithinQueryAtFnBody.bal
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// query expression returning union type consist of array of records
-function tnfUnionQueryAtFnBody1(T3 t3) returns T1[]|T2[] => <T1[]>from var t1sItem in t3.t1s
-    select {
-        str: ""
-    };
-
-// mapped to root level and type resolved through value
-function tnfUnionQueryAtFnBody3(T3 t3) returns T1[]|T2[] => t3.t1s;
-
-// query expression returns array of union types , type resolved by value expression
-function tnfUnionQueryAtFnBody4(T3 t3) returns (T1|T2)[] => from var t1sItem in t3.t1s
-    select {
-        str: t1sItem.str
-    };
-
-// query expression returns array of union types , type resolved via type casting
-function tnfUnionQueryAtFnBody5(T3 t3) returns (T1|T2)[] => from var t1sItem in t3.t1s
-    select <T1>{
-        str: 100
-    };
-
-// query expression returns array of union types , type resolved by value expression
-function tnfUnionQueryAtFnBody6(Vehicle[] vehicle) returns (SUV|HighEndCar)[] => from var item in vehicle
-        select {
-            year: item.year,
-            model: item.category
-        };
diff --git a/workspaces/ballerina/data-mapper-view/src/store/store.ts b/workspaces/ballerina/data-mapper-view/src/store/store.ts
deleted file mode 100644
index 9ee3e032a53..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/store/store.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { LangClientRpcClient } from '@wso2/ballerina-rpc-client';
-import { FunctionDefinition } from '@wso2/syntax-tree';
-import { create } from 'zustand';
-
-export interface DataMapperState {
-  imports: string[];
-  setImports: (imports: string[]) => void;
-  importReferenceMap: Record<string, string>;
-  setImportReferenceMap: (importReferenceMap: Record<string, string>) => void;
-  functionST: FunctionDefinition;
-  setFunctionST: (st: FunctionDefinition) => void;
-  filePath: string;
-  setFilePath: (filePath: string) => void;
-  langClientPromise: LangClientRpcClient;
-  setLangClientPromise: (lCP: LangClientRpcClient) => void;
-}
-
-export interface DataMapperSearchState {
-  inputSearch: string;
-  setInputSearch: (inputSearch: string) => void;
-  outputSearch: string;
-  setOutputSearch: (outputSearch: string) => void;
-  resetSearchStore: () => void;
-}
-
-export interface DataMapperFocusedViewState {
-  sourcePortFQN: string;
-  targetPortFQN: string;
-  setPortFQNs: (sourcePortFQN: string, targetPortFQN: string) => void;
-  resetFocusedViewState: () => void;
-}
-
-export const useDMStore = create<DataMapperState>((set) => ({
-  imports: [],
-  importReferenceMap: {},
-  functionST: undefined,
-  filePath: undefined,
-  langClientPromise: undefined,
-  setFunctionST: (functionST: FunctionDefinition) => set({ functionST }),
-  setImports: (imports) => set({ imports }),
-  setImportReferenceMap: (importReferenceMap) => set({ importReferenceMap }),
-  setFilePath: (filePath: string) => set({ filePath }),
-  setLangClientPromise: (langClientPromise: LangClientRpcClient) => set({ langClientPromise }),
-}));
-
-
-export const useDMSearchStore = create<DataMapperSearchState>((set) => ({
-  inputSearch: "",
-  outputSearch: "",
-  setInputSearch: (inputSearch: string) => set({ inputSearch }),
-  setOutputSearch: (outputSearch: string) => set({ outputSearch }),
-  resetSearchStore: () => set({ inputSearch: '', outputSearch: '' })
-}));
-
-export const useDMFocusedViewStateStore = create<DataMapperFocusedViewState>((set) => ({
-  sourcePortFQN: "",
-  targetPortFQN: "",
-  setPortFQNs: (sourcePortFQN: string, targetPortFQN: string) => set({ sourcePortFQN, targetPortFQN }),
-  resetFocusedViewState: () => set({ sourcePortFQN: '', targetPortFQN: '' })
-}));
diff --git a/workspaces/ballerina/data-mapper-view/src/utils/DataMapperContext/DataMapperContext.ts b/workspaces/ballerina/data-mapper-view/src/utils/DataMapperContext/DataMapperContext.ts
deleted file mode 100644
index e05df478343..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/utils/DataMapperContext/DataMapperContext.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { FunctionDefinition, NodePosition } from "@wso2/syntax-tree";
-import { Diagnostic } from "vscode-languageserver-types";
-
-import { ExpressionInfo, SelectionState, ViewOption } from "../../components/DataMapper/DataMapper";
-import { LangClientRpcClient } from "@wso2/ballerina-rpc-client";
-import { ComponentInfo, HistoryEntry, STModification } from "@wso2/ballerina-core";
-
-export interface ModuleComponents {
-    moduleVarDecls: ComponentInfo[];
-    constDecls: ComponentInfo[];
-    enumDecls: {
-        filePath: string;
-        enum: ComponentInfo;
-    }[];
-    functions: ComponentInfo[];
-};
-
-export interface IDataMapperContext {
-    functionST: FunctionDefinition;
-    selection: SelectionState;
-    langServerRpcClient: LangClientRpcClient;
-    filePath: string;
-    currentFile?: {
-        content: string,
-        path: string,
-        size: number
-    };
-    moduleComponents: ModuleComponents;
-    changeSelection: (mode: ViewOption, selection?: SelectionState) => void;
-    goToSource: (position: NodePosition) => void;
-    diagnostics: Diagnostic[];
-    enableStatementEditor: (expressionInfo: ExpressionInfo) => void;
-    collapsedFields: string[];
-    handleCollapse: (fieldName: string, expand?: boolean) => void;
-    isStmtEditorCanceled: boolean;
-    handleOverlay: (showOverlay: boolean) => void;
-    ballerinaVersion: string;
-    handleLocalVarConfigPanel: (showPanel: boolean) => void;
-    applyModifications: (modifications: STModification[]) => Promise<void>;
-    updateActiveFile?: (currentFile: any) => void;
-    updateSelectedComponent?: (info: HistoryEntry) => void;
-    referenceManager?: {
-        currentReferences: string[],
-        handleCurrentReferences: (referencedFields: string[]) => void
-    }
-}
-
-export class DataMapperContext implements IDataMapperContext {
-
-    constructor(
-        public filePath: string,
-        private _functionST: FunctionDefinition,
-        private _selection: SelectionState,
-        public langServerRpcClient: LangClientRpcClient,
-        public currentFile: {
-            content: string,
-            path: string,
-            size: number
-        },
-        public moduleComponents: ModuleComponents,
-        public changeSelection: (mode: ViewOption, selection?: SelectionState) => void,
-        public goToSource: (position: NodePosition) => void,
-        public diagnostics: Diagnostic[],
-        public enableStatementEditor: (expressionInfo: ExpressionInfo) => void,
-        public collapsedFields: string[],
-        public handleCollapse: (fieldName: string, expand?: boolean) => void,
-        public isStmtEditorCanceled: boolean,
-        public handleOverlay: (showOverlay: boolean) => void,
-        public ballerinaVersion: string,
-        public handleLocalVarConfigPanel: (showPanel: boolean) => void,
-        public applyModifications: (modifications: STModification[]) => Promise<void>,
-        public updateActiveFile?: (currentFile: any) => void,
-        public updateSelectedComponent?: (info: HistoryEntry) => void,
-        public referenceManager?: {
-            currentReferences: string[],
-            handleCurrentReferences: (referencedFields: string[]) => void;
-        }
-    ){}
-
-    public get functionST(): FunctionDefinition {
-        return this._functionST;
-    }
-
-    public set functionST(st: FunctionDefinition) {
-        if (!st && st.kind !== 'FunctionDefinition') {
-            throw new Error("Invalid value set as FunctionST.");
-        }
-        this._functionST = st;
-    }
-
-    public get selection(): SelectionState {
-        return this._selection;
-    }
-
-    public set selection(selection: SelectionState) {
-        this._selection = selection;
-    }
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/utils/DataMapperDIContext/DataMapperDIContext.ts b/workspaces/ballerina/data-mapper-view/src/utils/DataMapperDIContext/DataMapperDIContext.ts
deleted file mode 100644
index 711f3d629ee..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/utils/DataMapperDIContext/DataMapperDIContext.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import "reflect-metadata";
-import {
-    injectable, injectAll
-  } from 'tsyringe';
-
-@injectable()
-export class DataMapperDIContext {
-    constructor(
-        @injectAll('NodeFactory')
-        public nodeFactories: any[],
-        @injectAll('PortFactory')
-        public portFactories: any[],
-        @injectAll('LinkFactory')
-        public linkFactories: any[],
-        @injectAll('LabelFactory')
-        public labelFactories: any[]
-    ) {}
-}
diff --git a/workspaces/ballerina/data-mapper-view/src/utils/st-utils.ts b/workspaces/ballerina/data-mapper-view/src/utils/st-utils.ts
deleted file mode 100644
index 793bd46cd4c..00000000000
--- a/workspaces/ballerina/data-mapper-view/src/utils/st-utils.ts
+++ /dev/null
@@ -1,184 +0,0 @@
-import { LinePosition } from "@wso2/ballerina-core";
-import {
-    CaptureBindingPattern,
-    LetExpression,
-    ModulePart,
-    NodePosition,
-    STKindChecker,
-    STNode
-} from "@wso2/syntax-tree";
-import {
-    Location,
-    LocationLink
-} from "vscode-languageserver-types";
-
-import { FnDefInfo } from "../components/Diagram/utils/fn-definition-store";
-import { LangClientRpcClient } from "@wso2/ballerina-rpc-client";
-
-export interface FunctionInfo {
-    fnDefInfo: FnDefInfo;
-    fnNamePosition: NodePosition;
-}
-
-export function isObject(item: unknown) {
-    return (typeof item === "object" && !Array.isArray(item) && item !== null);
-}
-
-export function isPositionsEquals(position1: NodePosition, position2: NodePosition): boolean {
-    return position1?.startLine === position2?.startLine &&
-        position1?.startColumn === position2?.startColumn &&
-        position1?.endLine === position2?.endLine &&
-        position1?.endColumn === position2?.endColumn;
-}
-
-export function containsWithin(
-    filePath1: string,
-    filePath2: string,
-    position1: NodePosition,
-    position2: NodePosition) {
-    return (filePath1 === filePath2) &&
-    (position1.startLine >= position2.startLine &&
-        position1.endLine <= position2.endLine)
-}
-
-export function genLetClauseVariableName(intermediateClauses: (STNode)[]): string {
-    const baseName = 'variable';
-    let index = 0;
-    const allVariableNames: string[] = []
-
-    for (const clause of intermediateClauses) {
-        if (STKindChecker.isLetClause(clause)) {
-            for (const item of clause.letVarDeclarations) {
-                if (STKindChecker.isLetVarDecl(item)) {
-                    allVariableNames.push(item.typedBindingPattern.bindingPattern.source.trim())
-                }
-            }
-        }else if (STKindChecker.isJoinClause(clause)){
-            allVariableNames.push((clause?.typedBindingPattern?.bindingPattern as CaptureBindingPattern)?.variableName?.value)
-        }
-    }
-    while (allVariableNames.includes(`${baseName}${index ? index : ""}`)){
-        index++;
-    }
-
-    return `${baseName}${index ? index : ""}`;
-}
-
-export function genLetExpressionVariableName(letExpressions: LetExpression[]): string {
-    const baseName = 'variable';
-    let varName = baseName;
-    let index = 0;
-
-    if (!letExpressions.some(expr => expr === undefined)) {
-        for (const expr of letExpressions) {
-            for (const decl of expr.letVarDeclarations) {
-                if (STKindChecker.isLetVarDecl(decl) && decl.typedBindingPattern.bindingPattern.source.trim() === varName) {
-                    index++;
-                    varName = baseName + index.toString();
-                }
-            }
-        }
-    }
-    return varName;
-}
-
-export async function getFnDefsForFnCalls(
-    fnCallPositions: LinePosition[],
-    fileUri: string,
-    langServerRpcClient: LangClientRpcClient): Promise<FnDefInfo[]> {
-
-    const fnDefs: FnDefInfo[] = [];
-    const fnInfo: Map<string, FunctionInfo[]> = new Map();
-    for (const position of fnCallPositions) {
-        const definition = await langServerRpcClient.definition({
-            position: {
-                line: position.line,
-                character: position.offset
-            },
-            textDocument: {
-                uri: fileUri
-            }
-        });
-        const reply = definition.location;
-        let defLoc: Location;
-        if (Array.isArray(reply)) {
-            if (!reply.length) {
-                return [];
-            }
-            if (isLocationLink(reply[0])) {
-                defLoc = {
-                    uri: reply[0].targetUri,
-                    range: reply[0].targetRange
-                };
-            } else {
-                defLoc = reply[0];
-            }
-        } else {
-            defLoc = reply;
-        }
-        const fnNamePosition: NodePosition = {
-            startLine: defLoc.range.start.line,
-            startColumn: defLoc.range.start.character,
-            endLine: defLoc.range.end.line,
-            endColumn: defLoc.range.end.character
-        }
-
-        const fnEntry: FunctionInfo = {
-            fnDefInfo: {
-                fnCallPosition: position,
-                fnDefPosition: undefined,
-                fnName: "",
-                fileUri: defLoc.uri,
-                isExprBodiedFn: false,
-            },
-            fnNamePosition
-        }
-        if (fnInfo.has(defLoc.uri)) {
-            const existingDefs = fnInfo.get(defLoc.uri);
-            existingDefs.push(fnEntry);
-            fnInfo.set(defLoc.uri, existingDefs);
-        } else {
-            fnInfo.set(defLoc.uri, [fnEntry]);
-        }
-    }
-
-    for (const [key, value] of fnInfo) {
-        const stResp = await langServerRpcClient.getST({
-            documentIdentifier: {
-                uri: key
-            }
-        });
-
-        if (stResp.parseSuccess) {
-            const modPart = stResp.syntaxTree as ModulePart;
-            modPart.members.forEach((mem) => {
-                if (STKindChecker.isFunctionDefinition(mem)) {
-                    const fnNamePosition = mem.functionName.position as NodePosition;
-                    const filteredFnDef = value.find(v => {
-                        return isPositionsEquals(v.fnNamePosition, fnNamePosition)
-                    });
-                    if (filteredFnDef) {
-                        filteredFnDef.fnDefInfo.isExprBodiedFn = STKindChecker.isExpressionFunctionBody(mem.functionBody);
-                        filteredFnDef.fnDefInfo.fnDefPosition = mem.position;
-                        filteredFnDef.fnDefInfo.fnName = mem.functionName.value;
-                        fnDefs.push(filteredFnDef.fnDefInfo);
-                    }
-                }
-            });
-        }
-    }
-
-    return fnDefs;
-}
-
-export function hasErrorDiagnosis(stNode: STNode): boolean {
-    const diagnostics = stNode.typeData?.diagnostics;
-    return diagnostics?.some((diag: any) => {
-        const severity = diag?.diagnosticInfo?.severity;
-        return severity !== "WARNING";
-    });
-}
-
-function isLocationLink(obj: any): obj is LocationLink {
-    return obj.targetUri !== undefined && obj.targetRange !== undefined;
-}
diff --git a/workspaces/ballerina/data-mapper-view/tsconfig.json b/workspaces/ballerina/data-mapper-view/tsconfig.json
deleted file mode 100644
index d9abc828879..00000000000
--- a/workspaces/ballerina/data-mapper-view/tsconfig.json
+++ /dev/null
@@ -1,51 +0,0 @@
-{
-  "compilerOptions": {
-      "target": "ES6",
-      "useDefineForClassFields": true,
-      "lib": ["ESNext", "DOM", "DOM.Iterable"],
-      "module": "ESNext",
-      "skipLibCheck": true,
-      "outDir": "./lib",
-      "rootDir": "./src",
-
-      "moduleResolution": "node",
-      "resolveJsonModule": true,
-    //   "isolatedModules": true,
-      "sourceMap": true,
-      "jsx": "react",
-      "declaration": true,
-      "declarationDir": "./lib",
-      "esModuleInterop": true,
-
-    //   "strict": true,
-      "noUnusedLocals": false,
-      "noUnusedParameters": false,
-    //   "noFallthroughCasesInSwitch": true,
-      "allowJs": false,
-      "allowSyntheticDefaultImports": true,
-      "forceConsistentCasingInFileNames": true,
-      "strictNullChecks": false,
-    //   "preserveSymlinks": true,
-      "noImplicitReturns": false,
-      "noImplicitThis": true,
-      "noImplicitAny": true,
-    //   "typeRoots": [
-    //     "node_modules/@types"
-    //   ],
-      "paths": {
-          "react": [
-              "./node_modules/@types/react"
-          ]
-      },
-      "experimentalDecorators": true,
-      "emitDecoratorMetadata": true,
-  },
-  "include": [
-      "./src/**/*.*",
-      "./src/custom.d.ts"
-  ],
-  "exclude": [
-      "node_modules",
-      "lib"
-  ]
-}
diff --git a/workspaces/ballerina/data-mapper-view/tslint.json b/workspaces/ballerina/data-mapper-view/tslint.json
deleted file mode 100644
index 96b13615d4b..00000000000
--- a/workspaces/ballerina/data-mapper-view/tslint.json
+++ /dev/null
@@ -1,64 +0,0 @@
-{
-    "defaultSeverity": "error",
-    "extends": [
-        "tslint:latest",
-        "tslint-react",
-        "tslint-react-hooks"
-    ],
-    "jsRules": {},
-    "rules": {
-        "interface-name": false,
-        "no-submodule-imports": [
-            true,
-            "@material-ui",
-            "monaco-editor",
-            "@ballerina",
-            "components",
-            "store",
-            "views"
-        ],
-        "no-implicit-dependencies": [
-            true,
-            [
-                "components",
-                "store",
-                "views"
-            ],
-            "dev"
-        ],
-        "ordered-imports": [
-            true,
-            {
-                "module-source-path": "full",
-                "grouped-imports": true,
-                "groups": [
-                    {
-                        "name": "react",
-                        "match": "^react.*",
-                        "order": 1
-                    },
-                    {
-                        "name": "parent_dir",
-                        "match": "^\\.\\.",
-                        "order": 10
-                    },
-                    {
-                        "name": "current_dir",
-                        "match": "^\\.",
-                        "order": 20
-                    },
-                    {
-                        "name": "extra",
-                        "match": ".*",
-                        "order": 5
-                    }
-                ]
-            }
-        ],
-        "eofline": true,
-        "react-hooks-nesting": {
-            "severity": "error"
-        }
-    },
-    "rulesDirectory": []
-}
diff --git a/workspaces/ballerina/data-mapper-view/.eslintrc.cjs b/workspaces/ballerina/data-mapper/.eslintrc.cjs
similarity index 100%
rename from workspaces/ballerina/data-mapper-view/.eslintrc.cjs
rename to workspaces/ballerina/data-mapper/.eslintrc.cjs
diff --git a/workspaces/ballerina/data-mapper-view/README.md b/workspaces/ballerina/data-mapper/README.md
similarity index 100%
rename from workspaces/ballerina/data-mapper-view/README.md
rename to workspaces/ballerina/data-mapper/README.md
diff --git a/workspaces/ballerina/data-mapper-view/config/rush-project.json b/workspaces/ballerina/data-mapper/config/rush-project.json
similarity index 100%
rename from workspaces/ballerina/data-mapper-view/config/rush-project.json
rename to workspaces/ballerina/data-mapper/config/rush-project.json
diff --git a/workspaces/ballerina/inline-data-mapper/package.json b/workspaces/ballerina/data-mapper/package.json
similarity index 96%
rename from workspaces/ballerina/inline-data-mapper/package.json
rename to workspaces/ballerina/data-mapper/package.json
index 2cf391c21c6..7b544924f33 100644
--- a/workspaces/ballerina/inline-data-mapper/package.json
+++ b/workspaces/ballerina/data-mapper/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "@wso2/ballerina-inline-data-mapper",
+  "name": "@wso2/ballerina-data-mapper",
   "version": "1.0.0",
-  "description": "Inline Data Mapper",
+  "description": "Data Mapper",
   "files": [
     "lib"
   ],
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/DataMapper.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/DataMapperEditor.tsx
similarity index 90%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/DataMapper.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/DataMapperEditor.tsx
index 689dc5d488d..02909b90edb 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/DataMapper.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/DataMapper/DataMapperEditor.tsx
@@ -37,7 +37,7 @@ import {
     useDMExpressionBarStore
 } from "../../store/store";
 import { KeyboardNavigationManager } from "../../utils/keyboard-navigation-manager";
-import { InlineDataMapperProps } from "../../index";
+import { DataMapperEditorProps } from "../../index";
 import { ErrorNodeKind } from "./Error/RenderingError";
 import { IOErrorComponent } from "./Error/DataMapperError";
 import { IntermediateNodeInitVisitor } from "../../visitors/IntermediateNodeInitVisitor";
@@ -89,7 +89,8 @@ const classes = {
 enum ActionType {
     ADD_VIEW,
     SWITCH_VIEW,
-    EDIT_VIEW
+    EDIT_VIEW,
+    RESET_VIEW
 }
 
 type ViewAction = {
@@ -112,17 +113,20 @@ function viewsReducer(state: View[], action: ViewAction) {
             return state.slice(0, action.payload.index + 1);
         case ActionType.EDIT_VIEW:
             return [...state.slice(0, state.length - 1), action.payload.view];
+        case ActionType.RESET_VIEW:
+            return [action.payload.view];
         default:
             return state;
     }
 }
 
-export function InlineDataMapper(props: InlineDataMapperProps) {
+export function DataMapperEditor(props: DataMapperEditorProps) {
     const {
         modelState,
         name,
         applyModifications,
         onClose,
+        onEdit,
         addArrayElement,
         handleView,
         convertToQuery,
@@ -131,7 +135,9 @@ export function InlineDataMapper(props: InlineDataMapperProps) {
         generateForm,
         addClauses,
         mapWithCustomFn,
-        goToFunction
+        mapWithTransformFn,
+        goToFunction,
+        enrichChildFields
     } = props;
     const {
         model,
@@ -139,7 +145,7 @@ export function InlineDataMapper(props: InlineDataMapperProps) {
     } = modelState;
 
     const initialView = [{
-        label: model.output.variableName,
+        label: model.output.name,
         targetField: name
     }];
 
@@ -169,6 +175,10 @@ export function InlineDataMapper(props: InlineDataMapperProps) {
         resetSearchStore();
     }, [resetSearchStore]);
 
+    const resetView = useCallback((newData: View) => {
+        dispatch({ type: ActionType.RESET_VIEW, payload: { view: newData } });
+    }, [resetSearchStore]);
+
     useEffect(() => {
         const lastView = views[views.length - 1];
         handleView(lastView.targetField, !!lastView?.subMappingInfo);
@@ -181,6 +191,16 @@ export function InlineDataMapper(props: InlineDataMapperProps) {
 
     useEffect(() => {
         generateNodes(model);
+
+        const prevRootViewId = views[0].label;
+        const newRootViewId = model.rootViewId;
+
+        if (prevRootViewId !== newRootViewId) {
+            resetView({
+                label: model.rootViewId,
+                targetField: name
+            });
+        }
     }, [model]);
 
     useEffect(() => {
@@ -202,7 +222,9 @@ export function InlineDataMapper(props: InlineDataMapperProps) {
                 convertToQuery,
                 deleteMapping,
                 mapWithCustomFn,
-                goToFunction
+                mapWithTransformFn,
+                goToFunction,
+                enrichChildFields
             );
 
             const ioNodeInitVisitor = new IONodeInitVisitor(context);
@@ -263,8 +285,9 @@ export function InlineDataMapper(props: InlineDataMapperProps) {
     };
 
     const autoMapWithAI = async () => {
+        const datamapperModel = await rpcClient.getAiPanelRpcClient().generateDataMapperModel({});
         rpcClient.getAiPanelRpcClient()
-            .openInlineMappingChatWindow();
+            .openAIMappingChatWindow(datamapperModel);
     };
 
     return (
@@ -276,6 +299,7 @@ export function InlineDataMapper(props: InlineDataMapperProps) {
                         switchView={switchView}
                         hasEditDisabled={!!errorKind}
                         onClose={handleOnClose}
+                        onEdit={onEdit}
                         autoMapWithAI={autoMapWithAI}
                     />
                 )}
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Error/DataMapperError.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/Error/DataMapperError.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Error/DataMapperError.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/Error/DataMapperError.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Error/RenderingError.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/Error/RenderingError.tsx
similarity index 95%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Error/RenderingError.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/Error/RenderingError.tsx
index a5d0a891039..cfbd37266ee 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Error/RenderingError.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/DataMapper/Error/RenderingError.tsx
@@ -17,7 +17,7 @@
  */
 import React from 'react';
 
-import { ISSUES_URL } from '../../../components/Diagram/utils/constants';
+import { ISSUES_URL } from '../../Diagram/utils/constants';
 
 export enum ErrorNodeKind {
     Input,
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/ErrorBoundary/Error/index.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/ErrorBoundary/Error/index.tsx
similarity index 93%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/ErrorBoundary/Error/index.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/ErrorBoundary/Error/index.tsx
index 4b2c6a87105..8e5c49d3edc 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/ErrorBoundary/Error/index.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/DataMapper/ErrorBoundary/Error/index.tsx
@@ -19,7 +19,7 @@ import * as React from "react";
 
 import { useStyles } from "./style";
 import { Button, Codicon, Typography } from "@wso2/ui-toolkit";
-import { ISSUES_URL } from "../../../../components/Diagram/utils/constants";
+import { ISSUES_URL } from "../../../Diagram/utils/constants";
 
 interface ErrorScreenProps {
     onClose: () => void;  
@@ -53,7 +53,7 @@ export default function ErrorScreen(props: ErrorScreenProps) {
                     </svg>
                 </div>
                 <Typography variant="h4" className={classes.errorTitle}>
-                    A problem occurred while rendering the Inline Data Mapper.
+                    A problem occurred while rendering the Data Mapper.
                 </Typography>
                 <Typography variant="body2" className={classes.errorMsg}>
                     Please raise an issue with the sample code in our <a href={ISSUES_URL}>issue tracker</a>
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/ErrorBoundary/Error/style.ts b/workspaces/ballerina/data-mapper/src/components/DataMapper/ErrorBoundary/Error/style.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/ErrorBoundary/Error/style.ts
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/ErrorBoundary/Error/style.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/ErrorBoundary/index.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/ErrorBoundary/index.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/ErrorBoundary/index.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/ErrorBoundary/index.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Header/AutoMapButton.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/AutoMapButton.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Header/AutoMapButton.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/Header/AutoMapButton.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Header/DataMapperHeader.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/DataMapperHeader.tsx
similarity index 94%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Header/DataMapperHeader.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/Header/DataMapperHeader.tsx
index 55a88148274..d93b59eb424 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Header/DataMapperHeader.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/DataMapperHeader.tsx
@@ -26,17 +26,19 @@ import { View } from "../Views/DataMapperView";
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react";
 import AutoMapButton from "./AutoMapButton";
 import ExpressionBarWrapper from "./ExpressionBar";
+import EditButton from "./EditButton";
 
 export interface DataMapperHeaderProps {
     views: View[];
     switchView: (index: number) => void;
     hasEditDisabled: boolean;
     onClose: () => void;
+    onEdit?: () => void;
     autoMapWithAI: () => Promise<void>;
 }
 
 export function DataMapperHeader(props: DataMapperHeaderProps) {
-    const { views, switchView, hasEditDisabled, onClose, autoMapWithAI } = props;
+    const { views, switchView, hasEditDisabled, onClose, onEdit, autoMapWithAI } = props;
 
     const handleAutoMap = async () => {
         await autoMapWithAI();
@@ -62,6 +64,7 @@ export function DataMapperHeader(props: DataMapperHeaderProps) {
                         <HeaderSearchBox />
                     </FilterBar>
                     <AutoMapButton onClick={handleAutoMap} disabled={false} />
+                    {onEdit && <EditButton onClick={onEdit} disabled={hasEditDisabled} />}
                 </RightContainer>
                 <VSCodeButton
                     appearance="icon"
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Header/EditButton.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/EditButton.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Header/EditButton.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/Header/EditButton.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Header/ExpressionBar.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/ExpressionBar.tsx
similarity index 86%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Header/ExpressionBar.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/Header/ExpressionBar.tsx
index 622e6503565..02ba7acae0a 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Header/ExpressionBar.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/ExpressionBar.tsx
@@ -21,13 +21,13 @@ import { Button, Codicon, HeaderExpressionEditor, HeaderExpressionEditorRef, Ico
 import { css } from '@emotion/css';
 
 import { useDMExpressionBarStore } from '../../../store/store';
-import { buildInputAccessExpr } from '../../../components/Diagram/utils/modification-utils';
+import { buildInputAccessExpr } from '../../Diagram/utils/modification-utils';
 import { View } from '../Views/DataMapperView';
 import { useExpressionContext } from '../../../context/ExpressionContext';
 import { useMutation } from '@tanstack/react-query';
 import { useShallow } from 'zustand/react/shallow';
-import { DataMapperNodeModel } from '../../../components/Diagram/Node/commons/DataMapperNode';
-import { InputOutputPortModel } from '../../../components/Diagram/Port';
+import { DataMapperNodeModel } from '../../Diagram/Node/commons/DataMapperNode';
+import { InputOutputPortModel } from '../../Diagram/Port';
 
 const useStyles = () => ({
     exprBarContainer: css({
@@ -75,13 +75,21 @@ export interface ExpressionBarProps {
 
 export default function ExpressionBarWrapper({ views }: ExpressionBarProps) {
     const classes = useStyles();
-    const { completions, isUpdatingSource, triggerCompletions, onCompletionSelect, onSave, onCancel } = useExpressionContext();
+    const {
+        completions,
+        isUpdatingSource,
+        triggerCompletions,
+        onCompletionSelect,
+        onSave,
+        onCancel,
+        goToSource
+    } = useExpressionContext();
     const textFieldRef = useRef<HeaderExpressionEditorRef>();
     const savedTextFieldValue = useRef<string>('');
     const [textFieldValue, setTextFieldValue] = useState<string>('');
     const [placeholder, setPlaceholder] = useState<string>();
 
-    const { focusedPort, focusedFilter, lastFocusedPort, inputPort, resetInputPort, setLastFocusedPort, resetExprBarFocus } =
+    const { focusedPort, focusedFilter, lastFocusedPort, inputPort, resetInputPort, setLastFocusedPort } =
         useDMExpressionBarStore(
             useShallow((state) => ({
                 focusedPort: state.focusedPort,
@@ -95,7 +103,7 @@ export default function ExpressionBarWrapper({ views }: ExpressionBarProps) {
         );
 
     const portChanged = !!(focusedPort || lastFocusedPort)
-        && lastFocusedPort?.attributes.fieldFQN !== focusedPort?.attributes.fieldFQN;
+        && lastFocusedPort?.attributes.optionalOmittedFieldFQN !== focusedPort?.attributes.optionalOmittedFieldFQN;
 
     useEffect(() => {
         (async () => {
@@ -164,13 +172,18 @@ export default function ExpressionBarWrapper({ views }: ExpressionBarProps) {
         setTextFieldValue(text);
 
         /* Trigger completions */
-        const outputId = focusedPort.attributes.fieldFQN;
+        const outputId = focusedPort.attributes.optionalOmittedFieldFQN;
         const views = (focusedPort.getNode() as DataMapperNodeModel).context.views;
         const viewId = views[views.length - 1]?.targetField;
         triggerCompletions(outputId, viewId, text, cursorPosition);
     };
 
-    const gotoSource = () => {};
+    const gotoSource = () => {
+        const outputId = focusedPort.attributes.optionalOmittedFieldFQN;
+        const views = (focusedPort.getNode() as DataMapperNodeModel).context.views;
+        const viewId = views[views.length - 1]?.targetField;
+        goToSource(outputId, viewId);
+    };
 
     const saveSource = async (port: InputOutputPortModel, value: string) => {
         const valueChanged = savedTextFieldValue.current !== value;
@@ -178,7 +191,7 @@ export default function ExpressionBarWrapper({ views }: ExpressionBarProps) {
             return;
         }
 
-        const outputId = port.attributes.fieldFQN;
+        const outputId = port.attributes.optionalOmittedFieldFQN;
         const views = (port.getNode() as DataMapperNodeModel).context.views;
         const viewId = views[views.length - 1]?.targetField;
         const name = views[0]?.targetField;
@@ -191,7 +204,7 @@ export default function ExpressionBarWrapper({ views }: ExpressionBarProps) {
     };
 
     const handleManualCompletionRequest = () => {
-        const outputId = focusedPort.attributes.fieldFQN;
+        const outputId = focusedPort.attributes.optionalOmittedFieldFQN;
         const views = (focusedPort.getNode() as DataMapperNodeModel).context.views;
         const viewId = views[views.length - 1]?.targetField;
         const cursorPosition = textFieldRef.current.shadowRoot.querySelector('input').selectionStart;
@@ -207,7 +220,12 @@ export default function ExpressionBarWrapper({ views }: ExpressionBarProps) {
 
     const inputProps: InputProps = {
         endAdornment: (
-            <Button appearance="icon" tooltip="Goto source" onClick={gotoSource}>
+            <Button
+                appearance="icon"
+                tooltip="Goto source"
+                onClick={gotoSource}
+                disabled={!focusedPort}
+            >
                 <Codicon name="code" />
             </Button>
         )
@@ -240,15 +258,15 @@ export default function ExpressionBarWrapper({ views }: ExpressionBarProps) {
     }, [focusedPort, focusedFilter, lastFocusedPort]);
 
     const fieldTitle = useMemo(() => {
-        if (focusedPort?.attributes.fieldFQN) {
-            return focusedPort?.attributes.fieldFQN;
+        if (focusedPort?.attributes.optionalOmittedFieldFQN) {
+            return focusedPort?.attributes.optionalOmittedFieldFQN;
         }
         return undefined;
     }, [focusedPort]);
 
     const partialFieldTitle = useMemo(() => {
         if (fieldTitle) {
-            return focusedPort?.attributes.fieldFQN.split('.').pop();
+            return focusedPort?.attributes.optionalOmittedFieldFQN.split('.').pop();
         }
         return 'No field selected';
     }, [fieldTitle]);
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Header/HeaderBreadcrumb.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/HeaderBreadcrumb.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Header/HeaderBreadcrumb.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/Header/HeaderBreadcrumb.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Header/HeaderSearchBox.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/HeaderSearchBox.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Header/HeaderSearchBox.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/Header/HeaderSearchBox.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Header/HeaderSearchBoxOptions.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/HeaderSearchBoxOptions.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Header/HeaderSearchBoxOptions.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/Header/HeaderSearchBoxOptions.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Header/utils.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/Header/utils.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Header/utils.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/Header/utils.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportDataButtons.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportDataButtons.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportDataButtons.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportDataButtons.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportDataForm.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportDataForm.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportDataForm.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportDataForm.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportDataPanel.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportDataPanel.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportDataPanel.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportDataPanel.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportDataUtils.ts b/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportDataUtils.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportDataUtils.ts
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportDataUtils.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClauseEditor.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClauseEditor.tsx
similarity index 90%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClauseEditor.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClauseEditor.tsx
index 6fe79b1f11a..13c4af1caf8 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClauseEditor.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClauseEditor.tsx
@@ -19,7 +19,7 @@
 import React from "react";
 import { EditorContainer } from "./styles";
 import { Divider, Dropdown, OptionProps, Typography } from "@wso2/ui-toolkit";
-import { IDMFormProps, IDMFormField, IDMFormFieldValues, IntermediateClauseType, IntermediateClause, IntermediateClauseProps } from "@wso2/ballerina-core";
+import { DMFormProps, DMFormField, DMFormFieldValues, IntermediateClauseType, IntermediateClause, IntermediateClauseProps } from "@wso2/ballerina-core";
 
 export interface ClauseEditorProps {
     clause?: IntermediateClause;
@@ -27,7 +27,7 @@ export interface ClauseEditorProps {
     isSaving: boolean;
     onSubmit: (clause: IntermediateClause) => void;
     onCancel: () => void;
-    generateForm: (formProps: IDMFormProps) => JSX.Element;
+    generateForm: (formProps: DMFormProps) => JSX.Element;
 }
 
 export function ClauseEditor(props: ClauseEditorProps) {
@@ -43,7 +43,7 @@ export function ClauseEditor(props: ClauseEditorProps) {
         { content: "from", value: IntermediateClauseType.FROM }
     ]
 
-    const nameField: IDMFormField = {
+    const nameField: DMFormField = {
         key: "name",
         label: "Name",
         type: "IDENTIFIER",
@@ -55,7 +55,7 @@ export function ClauseEditor(props: ClauseEditorProps) {
         enabled: true,
     }
 
-    const typeField: IDMFormField = {
+    const typeField: DMFormField = {
         key: "type",
         label: "Type",
         type: "TYPE",
@@ -67,7 +67,7 @@ export function ClauseEditor(props: ClauseEditorProps) {
         enabled: true,
     }
 
-    const expressionField: IDMFormField = {
+    const expressionField: DMFormField = {
         key: "expression",
         label: "Expression",
         type: "EXPRESSION",
@@ -79,7 +79,7 @@ export function ClauseEditor(props: ClauseEditorProps) {
         enabled: true,
     }
 
-    const orderField: IDMFormField = {
+    const orderField: DMFormField = {
         key: "order",
         label: "Order",
         type: "ENUM",
@@ -92,7 +92,7 @@ export function ClauseEditor(props: ClauseEditorProps) {
         items: ["ascending", "descending"]
     }
 
-    const handleSubmit = (data: IDMFormFieldValues) => {
+    const handleSubmit = (data: DMFormFieldValues) => {
         onSubmit({
             type: clauseType as IntermediateClauseType,
             properties: data as IntermediateClauseProps
@@ -112,7 +112,7 @@ export function ClauseEditor(props: ClauseEditorProps) {
         }
     }
 
-    const formProps: IDMFormProps = {
+    const formProps: DMFormProps = {
         targetLineRange:{ startLine: { line: 0, offset: 0 }, endLine: { line: 0, offset: 0 } },
         fields: generateFields(),
         submitText: onSubmitText || "Add",
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClauseItem.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClauseItem.tsx
similarity index 96%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClauseItem.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClauseItem.tsx
index 7d42d9cd6c9..752e99cdcee 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClauseItem.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClauseItem.tsx
@@ -34,7 +34,7 @@ import {
 } from "./styles";
 import { Button, Codicon, ProgressRing } from "@wso2/ui-toolkit";
 import {  ClauseEditor } from "./ClauseEditor";
-import { IDMFormProps, IntermediateClause, IntermediateClauseType } from "@wso2/ballerina-core";
+import { DMFormProps, IntermediateClause, IntermediateClauseType } from "@wso2/ballerina-core";
 import { set } from "lodash";
 
 export interface ClauseItemProps {
@@ -49,7 +49,7 @@ export interface ClauseItemProps {
     onAdd: (clause: IntermediateClause, index?: number) => void;
     onEdit: (clause: IntermediateClause, index: number) => void;
     onDelete: (index: number) => void;
-    generateForm: (formProps: IDMFormProps) => JSX.Element;
+    generateForm: (formProps: DMFormProps) => JSX.Element;
 }
 
 export function ClauseItem(props: ClauseItemProps) {
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClausesPanel.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClausesPanel.tsx
similarity index 97%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClausesPanel.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClausesPanel.tsx
index b122e44a704..da495690e00 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClausesPanel.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/ClausesPanel.tsx
@@ -23,13 +23,13 @@ import { useDMQueryClausesPanelStore } from "../../../../store/store";
 import { AddButton, ClauseItem } from "./ClauseItem";
 import { ClauseEditor } from "./ClauseEditor";
 import { ClauseItemListContainer } from "./styles";
-import { IDMFormProps, IntermediateClause, Query } from "@wso2/ballerina-core";
+import { DMFormProps, IntermediateClause, Query } from "@wso2/ballerina-core";
 
 export interface ClausesPanelProps {
     query: Query;
     targetField: string;
     addClauses: (clause: IntermediateClause, targetField: string, isNew: boolean, index?:number) => Promise<void>;
-    generateForm: (formProps: IDMFormProps) => JSX.Element;
+    generateForm: (formProps: DMFormProps) => JSX.Element;
 }
 
 export function ClausesPanel(props: ClausesPanelProps) {
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/QueryClauses/styles.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/styles.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/QueryClauses/styles.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/QueryClauses/styles.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/SubMappingConfig/SubMappingConfigForm.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/SubMappingConfig/SubMappingConfigForm.tsx
similarity index 93%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/SubMappingConfig/SubMappingConfigForm.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/SubMappingConfig/SubMappingConfigForm.tsx
index 97873d8a074..38ffad58ab5 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/SidePanel/SubMappingConfig/SubMappingConfigForm.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/DataMapper/SidePanel/SubMappingConfig/SubMappingConfigForm.tsx
@@ -28,7 +28,7 @@ import {
 import { useDMSubMappingConfigPanelStore, SubMappingConfigFormData } from "../../../../store/store";
 import { View } from "../../Views/DataMapperView";
 
-import { CodeData, IDMFormField, IDMFormFieldValues, IDMFormProps} from "@wso2/ballerina-core";
+import { CodeData, DMFormField, DMFormFieldValues, DMFormProps} from "@wso2/ballerina-core";
 
 const ADD_NEW_SUB_MAPPING_HEADER = "Add New Sub Mapping";
 const EDIT_SUB_MAPPING_HEADER = "Edit Sub Mapping";
@@ -38,7 +38,7 @@ export type SubMappingConfigFormProps = {
     updateView: (updatedView: View) => void;
     applyModifications: (outputId: string, expression: string, viewId: string, name: string) => Promise<void>
     addSubMapping: (subMappingName: string, type: string, index: number, targetField: string, importsCodedata?: CodeData) => Promise<void>;
-    generateForm: (formProps: IDMFormProps) => JSX.Element;
+    generateForm: (formProps: DMFormProps) => JSX.Element;
 };
 
 export function SubMappingConfigForm(props: SubMappingConfigFormProps) {
@@ -79,7 +79,7 @@ export function SubMappingConfigForm(props: SubMappingConfigFormProps) {
         resetSubMappingConfig();
     };
 
-    const onSubmit = (data: SubMappingConfigFormData, formImports?: IDMFormFieldValues, importsCodedata?: CodeData) => {
+    const onSubmit = (data: SubMappingConfigFormData, formImports?: DMFormFieldValues, importsCodedata?: CodeData) => {
         if (isEdit) {
             onEdit(data, importsCodedata);
         } else {
@@ -88,7 +88,7 @@ export function SubMappingConfigForm(props: SubMappingConfigFormProps) {
         resetSubMappingConfig();
     };
 
-    const mappingNameField: IDMFormField = {
+    const mappingNameField: DMFormField = {
         key: "name",
         label: "Name",
         type: "IDENTIFIER",
@@ -100,7 +100,7 @@ export function SubMappingConfigForm(props: SubMappingConfigFormProps) {
         enabled: true,
     };
 
-    const mappingTypeField: IDMFormField = {
+    const mappingTypeField: DMFormField = {
         key: "type",
         label: "Type",
         type: "TYPE",
@@ -112,7 +112,7 @@ export function SubMappingConfigForm(props: SubMappingConfigFormProps) {
         enabled: true,
     };
 
-    const formProps: IDMFormProps = {
+    const formProps: DMFormProps = {
         targetLineRange:{ startLine: { line: 0, offset: 0 }, endLine: { line: 0, offset: 0 } },
         fields: [mappingNameField, mappingTypeField],
         submitText: isEdit ? "Save" : "Add",
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Views/DataMapperView.ts b/workspaces/ballerina/data-mapper/src/components/DataMapper/Views/DataMapperView.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Views/DataMapperView.ts
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/Views/DataMapperView.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Warning/DataMapperWarning.tsx b/workspaces/ballerina/data-mapper/src/components/DataMapper/Warning/DataMapperWarning.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Warning/DataMapperWarning.tsx
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/Warning/DataMapperWarning.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Warning/style.ts b/workspaces/ballerina/data-mapper/src/components/DataMapper/Warning/style.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/DataMapper/Warning/style.ts
rename to workspaces/ballerina/data-mapper/src/components/DataMapper/Warning/style.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Actions/IONodesScrollCanvasAction.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Actions/IONodesScrollCanvasAction.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Actions/IONodesScrollCanvasAction.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Actions/IONodesScrollCanvasAction.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Actions/utils.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Actions/utils.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Actions/utils.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Actions/utils.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Canvas/DataMapperCanvasContainerWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Canvas/DataMapperCanvasContainerWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Canvas/DataMapperCanvasContainerWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Canvas/DataMapperCanvasContainerWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Canvas/DataMapperCanvasWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Canvas/DataMapperCanvasWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Canvas/DataMapperCanvasWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Canvas/DataMapperCanvasWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/CodeAction/CodeAction.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/CodeAction/CodeAction.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/CodeAction/CodeAction.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/CodeAction/CodeAction.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/CodeAction/CodeActionTooltip.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/CodeAction/CodeActionTooltip.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/CodeAction/CodeActionTooltip.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/CodeAction/CodeActionTooltip.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Diagnostic/DiagnosticTooltip.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Diagnostic/DiagnosticTooltip.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Diagnostic/DiagnosticTooltip.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Diagnostic/DiagnosticTooltip.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Diagnostic/DiagnosticWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Diagnostic/DiagnosticWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Diagnostic/DiagnosticWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Diagnostic/DiagnosticWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Diagnostic/style.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Diagnostic/style.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Diagnostic/style.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Diagnostic/style.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Diagram.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Diagram.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Diagram.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Diagram.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Label/ExpressionLabelFactory.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Label/ExpressionLabelFactory.tsx
similarity index 92%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Label/ExpressionLabelFactory.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Label/ExpressionLabelFactory.tsx
index 6ccccea831d..78bc322bb9f 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Label/ExpressionLabelFactory.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Label/ExpressionLabelFactory.tsx
@@ -23,7 +23,7 @@ import { DiagramEngine } from '@projectstorm/react-diagrams';
 import { ExpressionLabelModel } from './ExpressionLabelModel';
 import { ExpressionLabelWidget } from './ExpressionLabelWidget';
 import { QueryExprLabelWidget } from './QueryExprLabelWidget';
-import { ArrayMappingOptionsWidget } from './ArrayMappingOptionsWidget';
+import { MappingOptionsWidget } from './MappingOptionsWidget';
 
 export class ExpressionLabelFactory extends AbstractReactFactory<ExpressionLabelModel, DiagramEngine> {
 	constructor() {
@@ -39,7 +39,7 @@ export class ExpressionLabelFactory extends AbstractReactFactory<ExpressionLabel
 			return <QueryExprLabelWidget model={event.model} />;
 		}
 		if (event.model.link?.pendingMappingType) {
-			return <ArrayMappingOptionsWidget model={event.model} />;
+			return <MappingOptionsWidget model={event.model} />;
 		}
 		return <ExpressionLabelWidget model={event.model} />;
 	}
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Label/ExpressionLabelModel.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Label/ExpressionLabelModel.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Label/ExpressionLabelModel.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Label/ExpressionLabelModel.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Label/ExpressionLabelWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Label/ExpressionLabelWidget.tsx
similarity index 93%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Label/ExpressionLabelWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Label/ExpressionLabelWidget.tsx
index 497fc2949b4..889ea4d1ded 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Label/ExpressionLabelWidget.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Label/ExpressionLabelWidget.tsx
@@ -18,18 +18,17 @@
 // tslint:disable: jsx-no-multiline-js
 import React, { MouseEvent, ReactNode, useEffect, useState } from 'react';
 
-import { IDMType, ResultClauseType, TypeKind } from '@wso2/ballerina-core';
+import { ResultClauseType } from '@wso2/ballerina-core';
 import { Button, Codicon, ProgressRing } from '@wso2/ui-toolkit';
 import { css } from '@emotion/css';
 import classNames from "classnames";
 
 import { DiagnosticWidget } from '../Diagnostic/DiagnosticWidget';
 import { ExpressionLabelModel } from './ExpressionLabelModel';
-import { isSourcePortArray, isTargetPortArray } from '../utils/link-utils';
-import { DataMapperLinkModel, MappingType } from '../Link';
+import { MappingType } from '../Link';
 import { CodeActionWidget } from '../CodeAction/CodeAction';
 import { InputOutputPortModel } from '../Port';
-import { mapWithCustomFn, mapWithQuery } from '../utils/modification-utils';
+import { mapWithCustomFn, mapWithQuery, mapWithTransformFn } from '../utils/modification-utils';
 import { getMappingType } from '../utils/common-utils';
 import { useDMExpressionBarStore } from "../../../store/store";
 
@@ -224,6 +223,10 @@ export function ExpressionLabelWidget(props: ExpressionLabelWidgetProps) {
         await mapWithCustomFn(link, context);
     };
 
+    const onClickMapWithTransformFn = async () => {
+        await mapWithTransformFn(link, context);
+    }
+
     const codeActions = [];
 
     if (mappingType === MappingType.ArrayToArray) {
@@ -235,10 +238,15 @@ export function ExpressionLabelWidget(props: ExpressionLabelWidgetProps) {
         // TODO: Add impl
     }
 
-    if (mappingType !== MappingType.Default) {
+    codeActions.push({
+        title: "Map with custom function",
+        onClick: onClickMapWithCustomFn
+    });
+
+    if (mappingType !== MappingType.Default && mappingType !== MappingType.ContainsUnions) {   
         codeActions.push({
-            title: "Map with custom function",
-            onClick: onClickMapWithCustomFn
+            title: "Map with transform function",
+            onClick: onClickMapWithTransformFn
         });
     }
 
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Label/ArrayMappingOptionsWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Label/MappingOptionsWidget.tsx
similarity index 80%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Label/ArrayMappingOptionsWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Label/MappingOptionsWidget.tsx
index 6b4c5dddbba..f2e0467e5f0 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Label/ArrayMappingOptionsWidget.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Label/MappingOptionsWidget.tsx
@@ -25,7 +25,7 @@ import { css } from '@emotion/css';
 
 import { MappingType } from '../Link';
 import { ExpressionLabelModel } from './ExpressionLabelModel';
-import { createNewMapping, mapWithCustomFn, mapWithQuery } from '../utils/modification-utils';
+import { createNewMapping, mapWithCustomFn, mapWithQuery, mapWithTransformFn } from '../utils/modification-utils';
 import classNames from 'classnames';
 
 export const useStyles = () => ({
@@ -84,11 +84,11 @@ const codiconStyles = {
     marginRight: '10px'
 }
 
-export interface ArrayMappingOptionsWidgetProps {
+export interface MappingOptionsWidgetProps {
     model: ExpressionLabelModel;
 }
 
-export function ArrayMappingOptionsWidget(props: ArrayMappingOptionsWidgetProps) {
+export function MappingOptionsWidget(props: MappingOptionsWidgetProps) {
     const classes = useStyles();
     const { link, context  } = props.model;
     const pendingMappingType = link.pendingMappingType;
@@ -96,10 +96,8 @@ export function ArrayMappingOptionsWidget(props: ArrayMappingOptionsWidgetProps)
     const [inProgress, setInProgress] = React.useState(false);
     const wrapWithProgress = (onClick: () => Promise<void>) => {
         return async () => {
-            link.pendingMappingType = MappingType.Default;
             setInProgress(true);
             await onClick();
-            setInProgress(false);
         }
     };
     
@@ -119,12 +117,16 @@ export function ArrayMappingOptionsWidget(props: ArrayMappingOptionsWidgetProps)
         await mapWithQuery(link, ResultClauseType.COLLECT, context);
     };
 
-    const onClickMapWithCustomFunction = async () => {
+    const onClickMapWithCustomFn = async () => {
         await mapWithCustomFn(link, context);
     };
 
-    const onClickMapUsingCollectClause = async (collectFunction: string) => {
+    const onClickMapWithTransformFn = async () => {
+        await mapWithTransformFn(link, context);
+    }
 
+    const onClickMapWithAggregateFn = async (fn: string) => {
+        await createNewMapping(link, (expr: string) => `${fn}(${expr})`);
     }
 
     const getItemElement = (id: string, label: string) => {
@@ -165,12 +167,12 @@ export function ArrayMappingOptionsWidget(props: ArrayMappingOptionsWidgetProps)
         }
     ];
 
-    const collectClauseFns = ["sum", "avg", "min", "max", "count"];
+    const aggregateFns = ["sum", "avg", "min", "max", "count"];
 
-    const a2sCollectClauseItems: Item[] = collectClauseFns.map((func) => ({
-        id: `a2s-collect-${func}`,
-        label: getItemElement(`a2s-collect-${func}`, `Aggregate using ${func}`),
-        onClick: wrapWithProgress(async () => await onClickMapUsingCollectClause(func))
+    const a2sAggregateItems: Item[] = aggregateFns.map((fn) => ({
+        id: `a2s-collect-${fn}`,
+        label: getItemElement(`a2s-collect-${fn}`, `Aggregate using ${fn}`),
+        onClick: wrapWithProgress(async () => await onClickMapWithAggregateFn(fn))
     }));
 
     const defaultMenuItems: Item[] = [
@@ -185,16 +187,23 @@ export function ArrayMappingOptionsWidget(props: ArrayMappingOptionsWidgetProps)
         ? a2aMenuItems
         : pendingMappingType === MappingType.ArrayToSingleton
             ? a2sMenuItems
-            : pendingMappingType === MappingType.ArrayToSingletonWithCollect
-                ? a2sCollectClauseItems
+            : pendingMappingType === MappingType.ArrayToSingletonAggregate
+                ? a2sAggregateItems
                 : defaultMenuItems;
 
-    if (pendingMappingType !== MappingType.ArrayToSingletonWithCollect) {
+    if (pendingMappingType !== MappingType.ArrayToSingletonAggregate) {
         menuItems.push({
-            id: "a2a-a2s-func",
-            label: getItemElement("a2a-a2s-func", "Map Using Custom Function"),
-            onClick: wrapWithProgress(onClickMapWithCustomFunction)
+            id: "a2a-a2s-custom-func",
+            label: getItemElement("a2a-a2s-custom-func", "Map Using Custom Function"),
+            onClick: wrapWithProgress(onClickMapWithCustomFn)
         });
+        if (pendingMappingType !== MappingType.ContainsUnions) {
+            menuItems.push({
+                id: "a2a-a2s-transform-func",
+                label: getItemElement("a2a-a2s-transform-func", "Map Using Transform Function"),
+                onClick: wrapWithProgress(onClickMapWithTransformFn)
+            });
+        }
     }
     return (
         <div className={classes.arrayMappingMenu}>
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Label/QueryExprLabelWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Label/QueryExprLabelWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Label/QueryExprLabelWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Label/QueryExprLabelWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Label/index.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Label/index.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Label/index.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Label/index.ts
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/ArrowLink/ArrowLinkFactory.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Link/ArrowLink/ArrowLinkFactory.tsx
similarity index 100%
rename from workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/ArrowLink/ArrowLinkFactory.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Link/ArrowLink/ArrowLinkFactory.tsx
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/ArrowLink/ArrowLinkModel.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Link/ArrowLink/ArrowLinkModel.ts
similarity index 100%
rename from workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/ArrowLink/ArrowLinkModel.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Link/ArrowLink/ArrowLinkModel.ts
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/ArrowLink/ArrowLinkWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Link/ArrowLink/ArrowLinkWidget.tsx
similarity index 100%
rename from workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/ArrowLink/ArrowLinkWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Link/ArrowLink/ArrowLinkWidget.tsx
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/ArrowLink/index.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Link/ArrowLink/index.ts
similarity index 100%
rename from workspaces/ballerina/data-mapper-view/src/components/Diagram/Link/ArrowLink/index.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Link/ArrowLink/index.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/DataMapperLink/DataMapperLink.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Link/DataMapperLink/DataMapperLink.ts
similarity index 92%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/DataMapperLink/DataMapperLink.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Link/DataMapperLink/DataMapperLink.ts
index 7765b5b1d34..8164ebafe6a 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/DataMapperLink/DataMapperLink.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Link/DataMapperLink/DataMapperLink.ts
@@ -20,15 +20,16 @@ import { DefaultLinkModel } from "@projectstorm/react-diagrams";
 
 import { IntermediatePortModel } from "../../Port";
 import { calculateControlPointOffset } from "../../utils/diagram-utils";
-import { IDMDiagnostic } from "@wso2/ballerina-core";
+import { DMDiagnostic } from "@wso2/ballerina-core";
 
 export const LINK_TYPE_ID = "datamapper-link";
 
 export enum MappingType {
 	ArrayToArray = "array-array",
 	ArrayToSingleton = "array-singleton",
-	ArrayToSingletonWithCollect = "array-singleton-collect",
-	Incompatible = "Incompatible",
+	ArrayToSingletonAggregate = "array-singleton-aggregate",
+	Incompatible = "incompatible",
+	ContainsUnions = "contains-unions",
 	Default = undefined // This is for non-array mappings currently
 }
 
@@ -37,7 +38,7 @@ export class DataMapperLinkModel extends DefaultLinkModel {
 
 	constructor(
 		public value?: string,
-		public diagnostics: IDMDiagnostic[] = [],
+		public diagnostics: DMDiagnostic[] = [],
 		public isActualLink: boolean = false,
 		public notContainsLabel?: boolean,
 		public isDashLink?: boolean
@@ -45,7 +46,7 @@ export class DataMapperLinkModel extends DefaultLinkModel {
 		super({
 			type: LINK_TYPE_ID,
 			width: 1,
-			curvyness: 0,
+			curvyness: 50,
 			locked: true,
 			color: "var(--vscode-debugIcon-breakpointDisabledForeground)"
 		});
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/DataMapperLink/DataMapperLinkFactory.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Link/DataMapperLink/DataMapperLinkFactory.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/DataMapperLink/DataMapperLinkFactory.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Link/DataMapperLink/DataMapperLinkFactory.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/DataMapperLink/DefaultLinkSegmentWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Link/DataMapperLink/DefaultLinkSegmentWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/DataMapperLink/DefaultLinkSegmentWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Link/DataMapperLink/DefaultLinkSegmentWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/DataMapperLink/DefaultLinkWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Link/DataMapperLink/DefaultLinkWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/DataMapperLink/DefaultLinkWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Link/DataMapperLink/DefaultLinkWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/DataMapperLink/index.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Link/DataMapperLink/index.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/DataMapperLink/index.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Link/DataMapperLink/index.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/index.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Link/index.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/index.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Link/index.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/LinkState/CreateLinkState.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/LinkState/CreateLinkState.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/LinkState/CreateLinkState.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/LinkState/CreateLinkState.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/LinkState/DefaultState.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/LinkState/DefaultState.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/LinkState/DefaultState.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/LinkState/DefaultState.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Mappings/MappingMetadata.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Mappings/MappingMetadata.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Mappings/MappingMetadata.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Mappings/MappingMetadata.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOuptutFieldWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOuptutFieldWidget.tsx
similarity index 96%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOuptutFieldWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOuptutFieldWidget.tsx
index 3d00fc78e7e..13f90551127 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOuptutFieldWidget.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOuptutFieldWidget.tsx
@@ -32,7 +32,7 @@ import { OutputSearchHighlight } from "../commons/Search";
 import { ObjectOutputFieldWidget } from "../ObjectOutput/ObjectOutputFieldWidget";
 import { ValueConfigMenu, ValueConfigOption } from "../commons/ValueConfigButton";
 import { ValueConfigMenuItem } from "../commons/ValueConfigButton/ValueConfigMenuItem";
-import { fieldFQNFromPortName, getDefaultValue, getSanitizedId } from "../../utils/common-utils";
+import { fieldFQNFromPortName, getDefaultValue } from "../../utils/common-utils";
 import { DiagnosticTooltip } from "../../Diagnostic/DiagnosticTooltip";
 import { TreeBody } from "../commons/Tree/Tree";
 import { getTypeName } from "../../utils/type-utils";
@@ -51,6 +51,7 @@ export interface ArrayOutputFieldWidgetProps {
     treeDepth?: number;
     asOutput?: boolean;
     hasHoveredParent?: boolean;
+    isPortParent?: boolean;
 }
 
 export function ArrayOutputFieldWidget(props: ArrayOutputFieldWidgetProps) {
@@ -63,7 +64,8 @@ export function ArrayOutputFieldWidget(props: ArrayOutputFieldWidgetProps) {
         fieldIndex,
         treeDepth = 0,
         asOutput,
-        hasHoveredParent
+        hasHoveredParent,
+        isPortParent
     } = props;
     const classes = useIONodesStyles();
 
@@ -78,11 +80,11 @@ export function ArrayOutputFieldWidget(props: ArrayOutputFieldWidgetProps) {
     const arrayField = field?.member;
     const typeName = getTypeName(field);
 
-    let portName = getSanitizedId(parentId);
-    if (fieldIndex !== undefined) {
+    let portName = parentId;
+    if (fieldIndex !== undefined && !isPortParent) {
         portName = `${portName}.${fieldIndex}`
     }
-    const fieldName = field?.variableName || '';
+    const fieldName = field?.displayName || field?.name || '';
 
     const portIn = getPort(`${portName}.IN`);
     const mapping = portIn && portIn.attributes.value;
@@ -133,7 +135,10 @@ export function ArrayOutputFieldWidget(props: ArrayOutputFieldWidgetProps) {
 
     const label = (
         <TruncatedLabel style={{ marginRight: "auto" }}>
-            <span className={classnames(classes.valueLabel, isDisabled ? classes.labelDisabled : "")}>
+            <span
+                className={classnames(classes.valueLabel, isDisabled ? classes.labelDisabled : "")}
+                style={{ marginLeft: !connectedViaLink ? 0 : indentation + 24 }}
+            >
                 <OutputSearchHighlight>{fieldName}</OutputSearchHighlight>
                 {!field?.optional && <span className={classes.requiredMark}>*</span>}
                 {fieldName && typeName && ":"}
@@ -252,7 +257,7 @@ export function ArrayOutputFieldWidget(props: ArrayOutputFieldWidgetProps) {
                     ? <ProgressRing sx={{ height: '16px', width: '16px' }} />
                     : <Codicon name="add" iconSx={{ color: "var(--vscode-inputOption-activeForeground)" }} />
                 }
-                Add Element
+                    Add Element
             </Button>
         );
     }, [isAddingElement]);
@@ -281,7 +286,7 @@ export function ArrayOutputFieldWidget(props: ArrayOutputFieldWidgetProps) {
     const handleArrayDeletion = async () => {
         setLoading(true);
         try {
-            await removeMapping(mapping, context);
+            await removeMapping(mapping || {output: portIn?.attributes.fieldFQN, expression: undefined}, context);
         } finally {
             setLoading(false);
         }
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputNode.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputNode.ts
similarity index 98%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputNode.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputNode.ts
index ad6a44d1cb1..b2bb123ea93 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputNode.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputNode.ts
@@ -99,7 +99,7 @@ export class ArrayOutputNode extends DataMapperNodeModel {
                     });
                 } else {
                     this.addPortsForOutputField({
-                        field: { ...this.outputType.member, variableName: this.outputType.variableName + "Item" },
+                        field: this.outputType.member,
                         type: "IN",
                         parentId: this.rootName,
                         mappings,
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputNodeFactory.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputNodeFactory.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputNodeFactory.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputNodeFactory.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/ArrayOutputWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ArrayOutput/OutputFieldPreviewWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/OutputFieldPreviewWidget.tsx
similarity index 95%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ArrayOutput/OutputFieldPreviewWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/OutputFieldPreviewWidget.tsx
index 6600aa8adb2..0f1ec0f9a98 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ArrayOutput/OutputFieldPreviewWidget.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/OutputFieldPreviewWidget.tsx
@@ -29,7 +29,6 @@ import { OutputSearchHighlight } from "../commons/Search";
 import { useIONodesStyles } from "../../../styles";
 import { useDMCollapsedFieldsStore, useDMExpandedFieldsStore } from '../../../../store/store';
 import { getTypeName } from "../../utils/type-utils";
-import { getSanitizedId } from "../../utils/common-utils";
 
 export interface OutputFieldPreviewWidgetProps {
     parentId: string;
@@ -67,11 +66,13 @@ export function OutputFieldPreviewWidget(props: OutputFieldPreviewWidgetProps) {
     const isArray = typeKind === TypeKind.Array;
     const isRecord = typeKind === TypeKind.Record;
 
-    let updatedParentId = getSanitizedId(parentId);
+    let updatedParentId = parentId;
     if (fieldIndex !== undefined) {
         updatedParentId = `${updatedParentId}.${fieldIndex}`
     }
-    let fieldName = field?.variableName || '';
+    let fieldName = field?.name || '';
+    const displayName = field?.displayName || fieldName;
+
     let portName = updatedParentId !== '' ? fieldName !== '' ? `${updatedParentId}.${fieldName}` : updatedParentId : fieldName;
     const portIn = getPort(portName + ".IN");
 
@@ -130,7 +131,7 @@ export function OutputFieldPreviewWidget(props: OutputFieldPreviewWidgetProps) {
                 )}
                 style={{ marginLeft: fields ? 0 : indentation + 24 }}
             >
-                <OutputSearchHighlight>{fieldName}</OutputSearchHighlight>
+                <OutputSearchHighlight>{displayName}</OutputSearchHighlight>
                 {!field?.optional && <span className={classes.requiredMark}>*</span>}
                 {typeName && ":"}
             </span>
@@ -186,8 +187,8 @@ export function OutputFieldPreviewWidget(props: OutputFieldPreviewWidgetProps) {
                 fields
                     .filter((subField) => subField)
                     .map((subField, index) => {
-                        const fieldKey = subField.variableName 
-                            ? `${portName}.${subField.variableName}` 
+                        const fieldKey = subField.name 
+                            ? `${portName}.${subField.name}` 
                             : `${portName}.${index}`;
                         
                         return (
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ArrayOutput/index.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/index.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ArrayOutput/index.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/ArrayOutput/index.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/DataImport/DataImportNode.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/DataImport/DataImportNode.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/DataImport/DataImportNode.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/DataImport/DataImportNode.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/DataImport/DataImportNodeFactory.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/DataImport/DataImportNodeFactory.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/DataImport/DataImportNodeFactory.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/DataImport/DataImportNodeFactory.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/DataImport/DataImportNodeWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/DataImport/DataImportNodeWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/DataImport/DataImportNodeWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/DataImport/DataImportNodeWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/DataImport/index.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/DataImport/index.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/DataImport/index.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/DataImport/index.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/EmptyInputs/EmptyInputsNode.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/EmptyInputs/EmptyInputsNode.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/EmptyInputs/EmptyInputsNode.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/EmptyInputs/EmptyInputsNode.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/EmptyInputs/EmptyInputsNodeFactory.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/EmptyInputs/EmptyInputsNodeFactory.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/EmptyInputs/EmptyInputsNodeFactory.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/EmptyInputs/EmptyInputsNodeFactory.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/EmptyInputs/EmptyInputsNodeWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/EmptyInputs/EmptyInputsNodeWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/EmptyInputs/EmptyInputsNodeWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/EmptyInputs/EmptyInputsNodeWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/EmptyInputs/index.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/EmptyInputs/index.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/EmptyInputs/index.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/EmptyInputs/index.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/Input/InputNode.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNode.ts
similarity index 98%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/Input/InputNode.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNode.ts
index 8eefac80e4c..989ff638f8f 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/Input/InputNode.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNode.ts
@@ -142,7 +142,7 @@ export class InputNode extends DataMapperNodeModel {
 
     public getSearchFilteredType() {
         // TODO: Include variableName for inputTypes (Currently only available for variables)
-        const variableName = this.inputType.variableName || this.inputType.id;
+        const variableName = this.inputType.name || this.inputType.id;
         if (variableName) {
             const searchValue = useDMSearchStore.getState().inputSearch;
 
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/Input/InputNodeFactory.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeFactory.tsx
similarity index 97%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/Input/InputNodeFactory.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeFactory.tsx
index 4b7b308af75..cc21fd98b49 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/Input/InputNodeFactory.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeFactory.tsx
@@ -60,7 +60,7 @@ export class InputNodeFactory extends AbstractReactFactory<InputNode, DiagramEng
                 id={event.model.filteredInputType?.id}
                 dmType={event.model.filteredInputType}
                 getPort={(portId: string) => event.model.getPort(portId) as InputOutputPortModel}
-                valueLabel={event.model.filteredInputType?.variableName}
+                valueLabel={event.model.filteredInputType?.name}
             />
         )
     }
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/Input/InputNodeTreeItemWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeTreeItemWidget.tsx
similarity index 95%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/Input/InputNodeTreeItemWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeTreeItemWidget.tsx
index b2444901c7b..2ff8cf6bfba 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/Input/InputNodeTreeItemWidget.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeTreeItemWidget.tsx
@@ -28,7 +28,7 @@ import { InputSearchHighlight } from "../commons/Search";
 import { useIONodesStyles } from "../../../styles";
 import { useDMCollapsedFieldsStore, useDMExpandedFieldsStore } from '../../../../store/store';
 import { getTypeName, isEnumMember } from "../../utils/type-utils";
-import { InputNode } from "../Input/InputNode";
+import { InputNode } from "./InputNode";
 
 export interface InputNodeTreeItemWidgetProps {
     parentId: string;
@@ -48,7 +48,8 @@ export function InputNodeTreeItemWidget(props: InputNodeTreeItemWidgetProps) {
     const collapsedFieldsStore = useDMCollapsedFieldsStore();
     const expandedFieldsStore = useDMExpandedFieldsStore();
 
-    const fieldName = dmType.variableName;
+    const fieldName = dmType.name;
+    const displayName = dmType.displayName || fieldName;
     const typeName = getTypeName(dmType);
     const fieldId = dmType.isFocused ? fieldName : `${parentId}.${fieldName}`;
     const portOut = getPort(`${fieldId}.OUT`);
@@ -75,7 +76,7 @@ export function InputNodeTreeItemWidget(props: InputNodeTreeItemWidgetProps) {
         <TruncatedLabel style={{ marginRight: "auto" }}>
             <span style={{ opacity: portOut?.attributes.isPreview ? 0.5 : 1 }}>
                 <span className={classes.valueLabel} style={{ marginLeft: indentation }}>
-                    <InputSearchHighlight>{fieldName}</InputSearchHighlight>
+                    <InputSearchHighlight>{displayName}</InputSearchHighlight>
                     {dmType.optional && "?"}
                 </span>
                 {typeName && !isEnumMember(portOut?.getParent() as InputNode) && (
@@ -88,7 +89,7 @@ export function InputNodeTreeItemWidget(props: InputNodeTreeItemWidgetProps) {
     );
 
     const handleExpand = () => {
-        if (dmType.kind === TypeKind.Array) {
+        if (dmType.kind === TypeKind.Array || dmType.isDeepNested) {
             const expandedFields = expandedFieldsStore.fields;
             if (expanded) {
                 expandedFieldsStore.setFields(expandedFields.filter((element) => element !== fieldId));
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/Input/InputNodeWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/Input/InputNodeWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/InputNodeWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/Input/index.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/index.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/Input/index.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/Input/index.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorNode.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorNode.ts
similarity index 98%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorNode.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorNode.ts
index 6799f170929..d2bac4f13a5 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorNode.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorNode.ts
@@ -23,7 +23,7 @@ import { DataMapperNodeModel } from "../commons/DataMapperNode";
 import { ObjectOutputNode } from "../ObjectOutput";
 import { findInputNode } from "../../utils/node-utils";
 import { getInputPort, getOutputPort } from "../../utils/port-utils";
-import { IDMDiagnostic, Mapping } from "@wso2/ballerina-core";
+import { DMDiagnostic, Mapping } from "@wso2/ballerina-core";
 import { getTargetPortPrefix } from "../../utils/port-utils";
 import { ArrayOutputNode } from "../ArrayOutput";
 import { removeMapping } from "../../utils/modification-utils";
@@ -43,7 +43,7 @@ export class LinkConnectorNode extends DataMapperNodeModel {
     public outPort: IntermediatePortModel;
 
     public value: string;
-    public diagnostics: IDMDiagnostic[];
+    public diagnostics: DMDiagnostic[];
     public hidden: boolean;
     public shouldInitLinks: boolean;
     public label: string;
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorNodeFactory.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorNodeFactory.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorNodeFactory.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorNodeFactory.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorNodeWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorNodeWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorNodeWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorNodeWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorWidgetComponents.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorWidgetComponents.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorWidgetComponents.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/LinkConnector/LinkConnectorWidgetComponents.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/LinkConnector/index.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/LinkConnector/index.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/LinkConnector/index.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/LinkConnector/index.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputFieldWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputFieldWidget.tsx
similarity index 90%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputFieldWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputFieldWidget.tsx
index 4c345713ea2..997654123ae 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputFieldWidget.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputFieldWidget.tsx
@@ -27,10 +27,10 @@ import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapp
 import { DataMapperPortWidget, PortState, InputOutputPortModel } from "../../Port";
 import { OutputSearchHighlight } from "../commons/Search";
 import { useIONodesStyles } from "../../../styles";
-import { useDMCollapsedFieldsStore, useDMExpressionBarStore } from '../../../../store/store';
+import { useDMCollapsedFieldsStore, useDMExpandedFieldsStore, useDMExpressionBarStore } from '../../../../store/store';
 import { getTypeName } from "../../utils/type-utils";
 import { ArrayOutputFieldWidget } from "../ArrayOutput/ArrayOuptutFieldWidget";
-import { fieldFQNFromPortName, getDefaultValue, getSanitizedId } from "../../utils/common-utils";
+import { fieldFQNFromPortName, getDefaultValue } from "../../utils/common-utils";
 import { addValue, removeMapping } from "../../utils/modification-utils";
 import FieldActionWrapper from "../commons/FieldActionWrapper";
 import { ValueConfigMenu, ValueConfigMenuItem, ValueConfigOption } from "../commons/ValueConfigButton";
@@ -46,6 +46,7 @@ export interface ObjectOutputFieldWidgetProps {
     fieldIndex?: number;
     treeDepth?: number;
     hasHoveredParent?: boolean;
+    isPortParent?: boolean;
 }
 
 export function ObjectOutputFieldWidget(props: ObjectOutputFieldWidgetProps) {
@@ -57,7 +58,8 @@ export function ObjectOutputFieldWidget(props: ObjectOutputFieldWidgetProps) {
         context,
         fieldIndex,
         treeDepth = 0,
-        hasHoveredParent
+        hasHoveredParent,
+        isPortParent
     } = props;
     const classes = useIONodesStyles();
     const [isLoading, setLoading] = useState(false);
@@ -66,6 +68,8 @@ export function ObjectOutputFieldWidget(props: ObjectOutputFieldWidgetProps) {
     const [portState, setPortState] = useState<PortState>(PortState.Unselected);
 
     const collapsedFieldsStore = useDMCollapsedFieldsStore();
+    const expandedFieldsStore = useDMExpandedFieldsStore();
+
     const setExprBarFocusedPort = useDMExpressionBarStore(state => state.setFocusedPort);
 
     let indentation = treeDepth * 16;
@@ -78,18 +82,22 @@ export function ObjectOutputFieldWidget(props: ObjectOutputFieldWidgetProps) {
     const isRecord = typeKind === TypeKind.Record;
     const isEnum = typeKind === TypeKind.Enum;
 
-    let updatedParentId = getSanitizedId(parentId);
+    let updatedParentId = parentId;
     
     if (fieldIndex !== undefined) {
         updatedParentId = `${updatedParentId}.${fieldIndex}`
     }
 
-    let fieldName = field?.variableName || '';
-    let portName = updatedParentId !== ''
-        ? fieldName !== '' && fieldIndex === undefined
-            ? `${updatedParentId}.${fieldName}`
-            : updatedParentId
-        : fieldName;
+    let fieldName = field?.name || '';
+    let displayName = field?.displayName || fieldName;
+
+    let portName = isPortParent
+        ? parentId
+        : updatedParentId !== ''
+            ? fieldName !== '' && fieldIndex === undefined
+                ? `${updatedParentId}.${fieldName}`
+                : updatedParentId
+            : fieldName;
 
     const portIn = getPort(portName + ".IN");
     const isUnknownType = field?.kind === TypeKind.Unknown;
@@ -105,11 +113,14 @@ export function ObjectOutputFieldWidget(props: ObjectOutputFieldWidgetProps) {
     const isWithinArray = fieldIndex !== undefined;
 
     const handleExpand = () => {
-		const collapsedFields = collapsedFieldsStore.fields;
-        if (!expanded) {
-            collapsedFieldsStore.setFields(collapsedFields.filter((element) => element !== portName));
-        } else {
+		const expandedFields = expandedFieldsStore.fields;
+        const collapsedFields = collapsedFieldsStore.fields;
+        if (expanded) {
+            expandedFieldsStore.setFields(expandedFields.filter((element) => element !== portName));
             collapsedFieldsStore.setFields([...collapsedFields, portName]);
+        } else {
+            expandedFieldsStore.setFields([...expandedFields, portName]);
+            collapsedFieldsStore.setFields(collapsedFields.filter((element) => element !== portName));
         }
     };
 
@@ -139,7 +150,7 @@ export function ObjectOutputFieldWidget(props: ObjectOutputFieldWidgetProps) {
     const handleDeleteValue = async () => {
         setLoading(true);
         try {
-            await removeMapping(mapping, context);
+            await removeMapping(mapping || {output: portIn?.attributes.fieldFQN, expression: undefined}, context);
         } finally {
             setLoading(false);
         }
@@ -179,7 +190,7 @@ export function ObjectOutputFieldWidget(props: ObjectOutputFieldWidgetProps) {
     }
 
     if (isWithinArray) {
-        fieldName = field?.typeName ? `${field?.typeName}Item` : 'item';
+        displayName = field?.typeName ? `${field?.typeName}Item` : 'item';
     }
 
     const label = !isArray && (
@@ -190,7 +201,7 @@ export function ObjectOutputFieldWidget(props: ObjectOutputFieldWidgetProps) {
                 )}
                 style={{ marginLeft: fields ? 0 : indentation + 24 }}
             >
-                <OutputSearchHighlight>{fieldName}</OutputSearchHighlight>
+                <OutputSearchHighlight>{displayName}</OutputSearchHighlight>
                 {!field?.optional && <span className={classes.requiredMark}>*</span>}
             </span>
             {typeName && (
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputNode.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputNode.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputNode.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputNode.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputNodeFactory.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputNodeFactory.tsx
similarity index 96%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputNodeFactory.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputNodeFactory.tsx
index 7af710b67ac..8aca2c27790 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputNodeFactory.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputNodeFactory.tsx
@@ -49,7 +49,7 @@ export class ObjectOutputNodeFactory extends AbstractReactFactory<ObjectOutputNo
 						context={event.model.context}
 						mappings={event.model.filteredMappings}
 						valueLabel={event.model.filteredOutputType.id}
-						originalTypeName={event.model.filteredOutputType?.variableName}
+						originalTypeName={event.model.filteredOutputType?.name}
 					/>
 				)}
 			</>
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/ObjectOutputWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ObjectOutput/index.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/index.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/ObjectOutput/index.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/ObjectOutput/index.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputElementWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputElementWidget.tsx
similarity index 92%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputElementWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputElementWidget.tsx
index 968cb113841..2dc1f0e874f 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputElementWidget.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputElementWidget.tsx
@@ -24,7 +24,7 @@ import { Button, Icon, ProgressRing, TruncatedLabel } from "@wso2/ui-toolkit";
 
 import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
 import { DataMapperPortWidget, PortState, InputOutputPortModel } from "../../Port";
-import { getDefaultValue, getSanitizedId } from "../../utils/common-utils";
+import { getDefaultValue } from "../../utils/common-utils";
 import { OutputSearchHighlight } from "../commons/Search";
 import { ValueConfigMenu, ValueConfigOption } from "../commons/ValueConfigButton";
 import { useIONodesStyles } from "../../../styles";
@@ -45,6 +45,7 @@ export interface PrimitiveOutputElementWidgetWidgetProps {
     fieldIndex?: number;
     isArrayElement?: boolean;
     hasHoveredParent?: boolean;
+    isPortParent?: boolean;
 }
 
 export function PrimitiveOutputElementWidget(props: PrimitiveOutputElementWidgetWidgetProps) {
@@ -56,7 +57,8 @@ export function PrimitiveOutputElementWidget(props: PrimitiveOutputElementWidget
         context,
         fieldIndex,
         isArrayElement,
-        hasHoveredParent
+        hasHoveredParent,
+        isPortParent
     } = props;
     const classes = useIONodesStyles();
     
@@ -70,15 +72,17 @@ export function PrimitiveOutputElementWidget(props: PrimitiveOutputElementWidget
     const [isLoading, setLoading] = useState(false);
     const [portState, setPortState] = useState<PortState>(PortState.Unselected);
 
-    const fieldName = field?.id || '';
+    const fieldName = field?.name || '';
 
-    let portName = getSanitizedId(parentId);
-    if (fieldIndex !== undefined) {
-        portName = `${portName}.${fieldIndex}`;
-    } else if (fieldName) {
-        portName = `${portName}.${fieldName}`;
+    let portName = parentId;
+    if (!isPortParent) {
+        if (fieldIndex !== undefined) {
+            portName = `${portName}.${fieldIndex}`;
+        } else if (fieldName) {
+            portName = `${portName}.${fieldName}`;
+        }
     }
-    
+  
     const portIn = getPort(`${portName}.IN`);
     const isExprBarFocused = exprBarFocusedPort?.getName() === portIn?.getName();
     const mapping = portIn && portIn.attributes.value;
@@ -92,7 +96,7 @@ export function PrimitiveOutputElementWidget(props: PrimitiveOutputElementWidget
     const handleDelete = async () => {
         setLoading(true);
         try {
-            await removeMapping(mapping, context);
+            await removeMapping(mapping || {output: portIn?.attributes.fieldFQN, expression: undefined}, context);
         } finally {
             setLoading(false);
         }
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputNode.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputNode.ts
similarity index 88%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputNode.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputNode.ts
index 432cea78375..0cdefd6de89 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputNode.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputNode.ts
@@ -148,31 +148,6 @@ export class PrimitiveOutputNode extends DataMapperNodeModel {
             }
         });
 
-        if (query) {
-            const { inputs: queryInputs, output: queryOutput} = query;
-
-            const inputNode = findInputNode(queryInputs[0], this);
-            let inPort: InputOutputPortModel;
-            if (inputNode) {
-                inPort = getInputPort(inputNode, queryInputs[0].replace(/\.\d+/g, ''));
-            }
-
-            const [_, mappedOutPort] = getOutputPort(this, `${queryOutput}.HEADER`);
-
-            if (inPort && mappedOutPort) {
-                const lm = new DataMapperLinkModel(undefined, undefined, true, undefined, true);
-
-                lm.setTargetPort(mappedOutPort);
-                lm.setSourcePort(inPort);
-                inPort.addLinkedPort(mappedOutPort);
-
-                lm.addLabel(new ExpressionLabelModel({
-                    isQuery: true
-                }));
-
-                this.getModel().addAll(lm as any);
-            }
-        }
     }
 
     async deleteField(mapping: Mapping) {
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputNodeFactory.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputNodeFactory.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputNodeFactory.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputNodeFactory.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/PrimitiveOutput/PrimitiveOutputWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/PrimitiveOutput/index.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/PrimitiveOutput/index.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/PrimitiveOutput/index.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/PrimitiveOutput/index.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNode.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNode.ts
similarity index 98%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNode.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNode.ts
index c47021de0d7..e2ad9f5ab2e 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNode.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNode.ts
@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { IDMDiagnostic, Mapping } from "@wso2/ballerina-core";
+import { DMDiagnostic, Mapping } from "@wso2/ballerina-core";
 
 import { IDataMapperContext } from "../../../../utils/DataMapperContext/DataMapperContext";
 import { DataMapperLinkModel } from "../../Link";
@@ -42,7 +42,7 @@ export class QueryExprConnectorNode extends DataMapperNodeModel {
     public inPort: IntermediatePortModel;
     public outPort: IntermediatePortModel;
 
-    public diagnostics: IDMDiagnostic[];
+    public diagnostics: DMDiagnostic[];
     public value: string;
     public hidden: boolean;
     public shouldInitLinks: boolean;
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNodeFactory.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNodeFactory.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNodeFactory.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNodeFactory.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNodeWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNodeWidget.tsx
similarity index 98%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNodeWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNodeWidget.tsx
index 87b6236ef58..200d8c87050 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNodeWidget.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryExprConnector/QueryExprConnectorNodeWidget.tsx
@@ -75,7 +75,7 @@ export function QueryExprConnectorNodeWidget(props: QueryExprConnectorNodeWidget
 	    const lastView = context.views[context.views.length - 1];
         const targetField = getTargetField(lastView.targetField, node.targetMappedPort.attributes.value?.output);
 
-        expandArrayFn(context, node.sourcePorts[0].attributes.field?.id, targetField);
+        expandArrayFn(context, node.targetMappedPort.attributes.value.inputs[0], targetField);
     };
 
     const loadingScreen = (
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryExprConnector/index.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryExprConnector/index.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryExprConnector/index.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryExprConnector/index.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputNode.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputNode.ts
similarity index 90%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputNode.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputNode.ts
index 3fcf32438ee..b4868c6aa6f 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputNode.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputNode.ts
@@ -67,9 +67,9 @@ export class QueryOutputNode extends DataMapperNodeModel {
 
             this.hasNoMatchingFields = hasNoOutputMatchFound(this.outputType, this.filteredOutputType);
     
-            const parentPort = this.addPortsForHeader({
+            const headerPort = this.addPortsForHeader({
                 dmType: this.filteredOutputType,
-                name: this.rootName,
+                name: this.rootName + ".#",
                 portType: "IN",
                 portPrefix: QUERY_OUTPUT_TARGET_PORT_PREFIX,
                 mappings: this.context.model.mappings,
@@ -78,8 +78,20 @@ export class QueryOutputNode extends DataMapperNodeModel {
                 isPreview: true
             });
 
-            this.addPortsForOutputField({
-                field: this.filteredOutputType.member,
+            const parentField = this.filteredOutputType.member || this.filteredOutputType;
+
+            const parentPort = this.addPortsForHeader({
+                dmType: parentField,
+                name: this.rootName,
+                portType: "IN",
+                portPrefix: QUERY_OUTPUT_TARGET_PORT_PREFIX,
+                mappings: this.context.model.mappings,
+                collapsedFields,
+                expandedFields
+            });
+
+            this.processOutputFieldKind({
+                field: parentField,
                 type: "IN",
                 parentId: this.rootName,
                 mappings: this.context.model.mappings,
@@ -89,7 +101,6 @@ export class QueryOutputNode extends DataMapperNodeModel {
                 expandedFields,
                 hidden: parentPort.attributes.collapsed
             });
-    
         }
     }
 
@@ -107,12 +118,9 @@ export class QueryOutputNode extends DataMapperNodeModel {
         const { inputs: queryInputs, output: queryOutput} = this.context.model.query;
 
         mappings.forEach((mapping) => {
-            if (mapping.output === queryOutput) {
-                mapping.output += `.<${queryOutput.split('.').pop()}Item>`;
-            }
             
-            const { isComplex, isQueryExpression, inputs, output, expression, diagnostics } = mapping;
-            if (isComplex || isQueryExpression || inputs.length !== 1) {
+            const { isComplex, isQueryExpression, isFunctionCall, inputs, output, expression, diagnostics } = mapping;
+            if (isComplex || isQueryExpression || isFunctionCall || inputs.length !== 1) {
                 // Complex mappings are handled in the LinkConnectorNode
                 return;
             }
@@ -123,8 +131,6 @@ export class QueryOutputNode extends DataMapperNodeModel {
                 inPort = getInputPort(inputNode, inputs[0].replace(/\.\d+/g, ''));
             }
 
-            
-
             const [_, mappedOutPort] = getOutputPort(this, output);
 
             if (inPort && mappedOutPort) {
@@ -164,7 +170,7 @@ export class QueryOutputNode extends DataMapperNodeModel {
             inPort = getInputPort(inputNode, queryInputs[0].replace(/\.\d+/g, ''));
         }
 
-        const [_, mappedOutPort] = getOutputPort(this, queryOutput);
+        const [_, mappedOutPort] = getOutputPort(this, queryOutput + ".#");
 
         if (inPort && mappedOutPort) {
             const lm = new DataMapperLinkModel(undefined, undefined, true, undefined, true);
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputNodeFactory.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputNodeFactory.tsx
similarity index 93%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputNodeFactory.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputNodeFactory.tsx
index 1fcebc0295e..cf3b9e0e3ee 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputNodeFactory.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputNodeFactory.tsx
@@ -48,8 +48,8 @@ export class QueryOutputNodeFactory extends AbstractReactFactory<QueryOutputNode
 						getPort={(portId: string) => event.model.getPort(portId) as InputOutputPortModel}
 						context={event.model.context}
 						mappings={event.model.filteredMappings}
-						valueLabel={event.model.outputType.variableName}
-						originalTypeName={event.model.filteredOutputType?.variableName}
+						valueLabel={event.model.outputType.displayName || event.model.outputType.name}
+						originalTypeName={event.model.filteredOutputType?.name}
 					/>
 				)}
 			</>
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputWidget.tsx
similarity index 75%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputWidget.tsx
index 44297c7b540..9aa5af39d6f 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputWidget.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryOutput/QueryOutputWidget.tsx
@@ -30,6 +30,8 @@ import { ObjectOutputFieldWidget } from "../ObjectOutput/ObjectOutputFieldWidget
 import { useIONodesStyles } from '../../../styles';
 import { useDMCollapsedFieldsStore, useDMIOConfigPanelStore } from '../../../../store/store';
 import { OutputSearchHighlight } from '../commons/Search';
+import { ArrayOutputFieldWidget } from '../ArrayOutput/ArrayOuptutFieldWidget';
+import { PrimitiveOutputElementWidget } from '../PrimitiveOutput/PrimitiveOutputElementWidget';
 
 export interface QueryOutputWidgetProps {
 	id: string; // this will be the root ID used to prepend for UUIDs of nested fields
@@ -60,8 +62,6 @@ export function QueryOutputWidget(props: QueryOutputWidgetProps) {
 	const [portState, setPortState] = useState<PortState>(PortState.Unselected);
 	const [isHovered, setIsHovered] = useState(false);
 
-	const collapsedFieldsStore = useDMCollapsedFieldsStore();
-
 	const { setIsIOConfigPanelOpen, setIOConfigPanelType, setIsSchemaOverridden } = useDMIOConfigPanelStore(
 		useShallow(state => ({
 			setIsIOConfigPanelOpen: state.setIsIOConfigPanelOpen,
@@ -70,29 +70,15 @@ export function QueryOutputWidget(props: QueryOutputWidgetProps) {
 		}))
 	);
 
-	const fields = [outputType.member ?? outputType];
-	const hasFields = fields.length > 0;
+	const field = outputType.member || outputType;
 
-	const portIn = getPort(`${id}.IN`);
+	const portIn = getPort(`${id}.#.IN`);
 	const isUnknownType = outputType.kind === TypeKind.Unknown;
 
 	let expanded = true;
-	if ((portIn && portIn.attributes.collapsed)) {
-		expanded = false;
-	}
+	
 	const isDisabled = portIn?.attributes.descendantHasValue;
 
-	const indentation = (portIn && (!hasFields || !expanded)) ? 0 : 24;
-
-	const handleExpand = () => {
-		const collapsedFields = collapsedFieldsStore.fields;
-        if (!expanded) {
-            collapsedFieldsStore.setFields(collapsedFields.filter((element) => element !== id));
-        } else {
-            collapsedFieldsStore.setFields([...collapsedFields, id]);
-        }
-	};
-
 	const handlePortState = (state: PortState) => {
 		setPortState(state)
 	};
@@ -146,35 +132,34 @@ export function QueryOutputWidget(props: QueryOutputWidgetProps) {
 						}
 					</span>
 					<span className={classes.label}>
-						<Button
-							id={"expand-or-collapse-" + id} 
-							appearance="icon"
-							tooltip="Expand/Collapse"
-							sx={{ marginLeft: indentation }}
-							onClick={handleExpand}
-							data-testid={`${id}-expand-icon-mapping-target-node`}
-						>
-							{expanded ? <Codicon name="chevron-down" /> : <Codicon name="chevron-right" />}
-						</Button>
 						{label}
 					</span>
 				</TreeHeader>
-				{(expanded && fields) && (
+				{(expanded && field) && (
 					<TreeBody>
-						{fields?.map((item, index) => {
-							return (
-								<ObjectOutputFieldWidget
-									key={index}
-									engine={engine}
-									field={item}
-									getPort={getPort}
-									parentId={id}
-									context={context}
-									treeDepth={0}
-									hasHoveredParent={isHovered}
-								/>
-							);
-						})}
+						{outputType.kind === TypeKind.Array ? (
+							<ObjectOutputFieldWidget
+								engine={engine}
+								field={field}
+								getPort={getPort}
+								parentId={id}
+								context={context}
+								treeDepth={0}
+								hasHoveredParent={isHovered}
+								isPortParent={true}
+							/>
+						) : (
+							<PrimitiveOutputElementWidget
+								key={id}
+								engine={engine}
+								field={field}
+								getPort={getPort}
+								parentId={id}
+								context={context}
+								hasHoveredParent={isHovered}
+								isPortParent={true}
+							/>
+						)}
 					</TreeBody>
 				)}
 			</TreeContainer>
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryOutput/index.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryOutput/index.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/QueryOutput/index.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/QueryOutput/index.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/SubMapping/SubMappingItemWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/SubMapping/SubMappingItemWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/SubMapping/SubMappingItemWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/SubMapping/SubMappingItemWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/SubMapping/SubMappingNode.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/SubMapping/SubMappingNode.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/SubMapping/SubMappingNode.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/SubMapping/SubMappingNode.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/SubMapping/SubMappingNodeFactory.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/SubMapping/SubMappingNodeFactory.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/SubMapping/SubMappingNodeFactory.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/SubMapping/SubMappingNodeFactory.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/SubMapping/SubMappingSeparator.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/SubMapping/SubMappingSeparator.tsx
similarity index 97%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/SubMapping/SubMappingSeparator.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/SubMapping/SubMappingSeparator.tsx
index 17af53092ec..495a43512ea 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/SubMapping/SubMappingSeparator.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/SubMapping/SubMappingSeparator.tsx
@@ -21,7 +21,7 @@ import { keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
 import { Button, Codicon } from "@wso2/ui-toolkit";
 
-import { useIONodesStyles } from "../../../../components/styles";
+import { useIONodesStyles } from "../../../styles";
 
 interface SubMappingSeparatorProps {
     isOnRootView: boolean;
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/SubMapping/SubMappingTreeWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/SubMapping/SubMappingTreeWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/SubMapping/SubMappingTreeWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/SubMapping/SubMappingTreeWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/SubMapping/index.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/SubMapping/index.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/SubMapping/index.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/SubMapping/index.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/DataMapperNode.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/DataMapperNode.ts
similarity index 80%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/DataMapperNode.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/DataMapperNode.ts
index 58ed518daf9..ea70a03ef74 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/DataMapperNode.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/DataMapperNode.ts
@@ -22,7 +22,7 @@ import { IOType, Mapping, MappingElement, TypeKind } from '@wso2/ballerina-core'
 import { IDataMapperContext } from '../../../../utils/DataMapperContext/DataMapperContext';
 import { MappingMetadata } from '../../Mappings/MappingMetadata';
 import { InputOutputPortModel } from "../../Port";
-import { findMappingByOutput } from '../../utils/common-utils';
+import { findMappingByOutput, hasChildMappingsForInput, hasChildMappingsForOutput } from '../../utils/common-utils';
 
 export interface DataMapperNodeModelGenerics {
 	PORT: InputOutputPortModel;
@@ -111,14 +111,28 @@ export abstract class DataMapperNodeModel extends NodeModel<NodeModelGenerics &
 			focusedFieldFQNs
 		} = attributes;
 
-		const fieldName = field?.variableName;
+		const fieldName = field?.name;
 		const isArray = this.isArrayTypedField(field);
 		const fieldFQN = this.getInputFieldFQN(field?.isFocused ? "" : parentId, fieldName, isOptional);
 		const unsafeFieldFQN = this.getUnsafeFieldFQN(field?.isFocused ? "" : unsafeParentId, fieldName);
 		const portName = this.getPortName(portPrefix, unsafeFieldFQN);
 		const isFocused = this.isFocusedField(focusedFieldFQNs, portName);
 		const isPreview = parent.attributes.isPreview || this.isPreviewPort(focusedFieldFQNs, parent.attributes.field);
-		const isCollapsed = this.isInputPortCollapsed(hidden, collapsedFields, expandedFields, portName, isArray, isFocused);
+
+		let collapseByDefault = false;
+		let isEnrichRequired = false;
+
+		if (field.isDeepNested){
+			isEnrichRequired = hasChildMappingsForInput(this.context.model.mappings, fieldFQN);
+			collapseByDefault = !isEnrichRequired;
+		}
+
+		const isCollapsed = this.isInputPortCollapsed(hidden, collapsedFields, expandedFields, 
+			portName, isArray, isFocused, collapseByDefault);
+
+		if (isEnrichRequired || (!isCollapsed && !hidden && field.isDeepNested)) {
+			this.context.enrichChildFields(field);
+		}
 
 		const inputPort = new InputOutputPortModel({
 			field: field,
@@ -163,10 +177,13 @@ export abstract class DataMapperNodeModel extends NodeModel<NodeModelGenerics &
 		let fieldFQN = this.getOutputFieldFQN(newParentId, field, elementIndex);
 		const portName = this.getPortName(portPrefix, fieldFQN);
 		
-		if(fieldFQN.endsWith('>')) fieldFQN = fieldFQN.split('.').slice(0, -1).join('.');
 		const mapping = findMappingByOutput(mappings, fieldFQN);
 		const isCollapsed = this.isOutputPortCollapsed(hidden, collapsedFields, expandedFields, 
-			portName, type, isArray, false, mapping?.elements);
+			portName, isArray, field.isDeepNested, mapping, mappings, fieldFQN);
+
+		if (field.isDeepNested && !isCollapsed && !hidden) {
+			this.context.enrichChildFields(field);
+		}
 
 		const outputPort = new InputOutputPortModel({
 			field: field,
@@ -183,7 +200,7 @@ export abstract class DataMapperNodeModel extends NodeModel<NodeModelGenerics &
 		});
 		this.addPort(outputPort);
 
-		this.processFieldKind({
+		this.processOutputFieldKind({
 			...attributes,
 			parentId: fieldFQN,
 			parent: outputPort,
@@ -191,6 +208,14 @@ export abstract class DataMapperNodeModel extends NodeModel<NodeModelGenerics &
 		});
 	}
 
+	protected processOutputFieldKind(attributes: OutputPortAttributes) {
+		if (attributes.field?.kind === TypeKind.Record) {
+			this.processRecordField(attributes);
+		} else if (attributes.field?.kind === TypeKind.Array) {
+			this.processArrayField(attributes);
+		}
+	}
+
 	protected addPortsForHeader(attributes: HeaderPortAttributes): InputOutputPortModel {
 		const {
 			dmType,
@@ -257,7 +282,7 @@ export abstract class DataMapperNodeModel extends NodeModel<NodeModelGenerics &
 		if (elementIndex !== undefined) {
 			return newParentId;
 		}
-		const fieldName = field?.variableName || '';
+		const fieldName = field?.name || '';
 		return newParentId !== '' ? fieldName !== '' ? `${newParentId}.${fieldName}` : newParentId : fieldName;
 	}
 
@@ -287,11 +312,15 @@ export abstract class DataMapperNodeModel extends NodeModel<NodeModelGenerics &
 		expandedFields: string[],
 		portName: string,
 		isArray: boolean,
-		isFocused: boolean
+		isFocused: boolean,
+		collapseByDefault: boolean
 	) {
 		if (isArray){
 			return isFocused ? false : expandedFields && !expandedFields.includes(portName);
 		}
+		if (collapseByDefault) {
+			return expandedFields && !expandedFields.includes(portName);
+		}
 		return !hidden && collapsedFields && collapsedFields.includes(portName);
 	}
 
@@ -300,12 +329,14 @@ export abstract class DataMapperNodeModel extends NodeModel<NodeModelGenerics &
 		collapsedFields: string[],
 		expandedFields: string[],
 		portName: string,
-		portType: "IN" | "OUT",
 		isArray: boolean,
-		isFocused: boolean,
-		mappingElements: MappingElement[]
+		isDeepNested: boolean,
+		mapping: Mapping,
+		mappings: Mapping[],
+		outputId: string
 	): boolean {
-		if (isArray && !mappingElements?.length && !isFocused) {
+		if ((isArray && !mapping?.elements?.length) ||
+			(isDeepNested && !hasChildMappingsForOutput(mappings, outputId))) {
 			return expandedFields && !expandedFields.includes(portName);
 		}
 		return !hidden && collapsedFields && collapsedFields.includes(portName);
@@ -319,44 +350,54 @@ export abstract class DataMapperNodeModel extends NodeModel<NodeModelGenerics &
 		const isHidden = attributes.hidden || attributes.collapsed;
 		let numberOfFields = 1;
 
+		switch (attributes.field?.kind) {
+			case TypeKind.Record:
+				numberOfFields += this.createInputPortsForRecordField(attributes, isHidden);
+				break;
+			case TypeKind.Array:
+				numberOfFields += this.createInputPortsForArrayField(attributes, isHidden);
+				break;
+			default:
+				break;
+		}
 
-		if (attributes.field?.kind === TypeKind.Record) {
-			const fields = attributes.field?.fields?.filter(f => !!f);
-			if (fields && fields.length) {
-				fields.forEach(subField => {
-					numberOfFields += this.addPortsForInputField({
-						...attributes,
-						hidden: isHidden,
-						field: subField,
-						isOptional: subField.optional || attributes.isOptional
-					});
-				});
-			}
-		} else if (attributes.field?.kind === TypeKind.Array) {
-
-			const focusedMemberId = attributes.field?.focusedMemberId;
-			if (focusedMemberId) {
-				const focusedMemberField = this.context.model.inputs.find(input => input.id === focusedMemberId);
-				if (focusedMemberField) {
-					attributes.field.member = focusedMemberField;
-				}
-			}
+		return attributes.hidden ? 0 : numberOfFields;
+	}
 
-			numberOfFields += this.addPortsForInputField({
+	private createInputPortsForRecordField(attributes: InputPortAttributes, isHidden: boolean): number {
+		const fields = attributes.field?.fields?.filter(f => !!f) || [];
+		if (fields.length === 0) {
+			return 0;
+		}
+		return fields.reduce((total, subField) => {
+			return total + this.addPortsForInputField({
 				...attributes,
 				hidden: isHidden,
-				field: attributes.field?.member
+				field: subField,
+				isOptional: subField.optional || attributes.isOptional
 			});
-		}
-		return attributes.hidden ? 0 : numberOfFields;
+		}, 0);
 	}
 
-	private processFieldKind(attributes: OutputPortAttributes) {
-		if (attributes.field?.kind === TypeKind.Record) {
-			this.processRecordField(attributes);
-		} else if (attributes.field?.kind === TypeKind.Array) {
-			this.processArrayField(attributes);
+	private createInputPortsForArrayField(attributes: InputPortAttributes, isHidden: boolean): number {
+		const memberField = this.resolveArrayMemberField(attributes);
+		return this.addPortsForInputField({
+			...attributes,
+			hidden: isHidden,
+			field: memberField,
+			isOptional: memberField?.optional || attributes.isOptional
+		});
+	}
+
+	private resolveArrayMemberField(attributes: InputPortAttributes): IOType | undefined {
+		const focusedMemberId = attributes.field?.focusedMemberId;
+		if (focusedMemberId) {
+			const focusedMemberField = this.context.model.inputs.find(input => input.id === focusedMemberId);
+			if (focusedMemberField) {
+				return focusedMemberField;
+			}
 		}
+		return attributes.field?.member;
 	}
 
 	private processRecordField(attributes: OutputPortAttributes) {
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/FieldActionWrapper.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/FieldActionWrapper.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/FieldActionWrapper.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/FieldActionWrapper.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/OutputBeforeInputNotification.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/OutputBeforeInputNotification.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/OutputBeforeInputNotification.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/OutputBeforeInputNotification.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/PrimitiveTypeInputWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/PrimitiveTypeInputWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/PrimitiveTypeInputWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/PrimitiveTypeInputWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/Search/SearchHighlight.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/Search/SearchHighlight.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/Search/SearchHighlight.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/Search/SearchHighlight.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/Search/SearchNoResultFound.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/Search/SearchNoResultFound.tsx
similarity index 96%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/Search/SearchNoResultFound.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/Search/SearchNoResultFound.tsx
index c8d3ccc9582..55c8cea2ebf 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/Search/SearchNoResultFound.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/Search/SearchNoResultFound.tsx
@@ -21,7 +21,7 @@ import React from "react";
 import { css } from "@emotion/css";
 import { Codicon } from "@wso2/ui-toolkit";
 
-import { IO_NODE_DEFAULT_WIDTH } from "../../../../../components/Diagram/utils/constants";
+import { IO_NODE_DEFAULT_WIDTH } from "../../../utils/constants";
 
 interface SearchNoResultFoundProps {
     kind: SearchNoResultFoundKind;
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/Search/index.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/Search/index.tsx
similarity index 100%
rename from workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/Search/index.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/Search/index.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/Tree/Tree.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/Tree/Tree.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/Tree/Tree.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/Tree/Tree.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/ValueConfigButton/ValueConfigMenu.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/ValueConfigButton/ValueConfigMenu.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/ValueConfigButton/ValueConfigMenu.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/ValueConfigButton/ValueConfigMenu.tsx
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/ValueConfigButton/ValueConfigMenuItem.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/ValueConfigButton/ValueConfigMenuItem.tsx
similarity index 100%
rename from workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/ValueConfigButton/ValueConfigMenuItem.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/ValueConfigButton/ValueConfigMenuItem.tsx
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/ValueConfigButton/index.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/ValueConfigButton/index.ts
similarity index 100%
rename from workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/DataManipulationWidget/ValueConfigButton/index.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/commons/ValueConfigButton/index.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/index.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Node/index.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/index.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Node/index.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverlayLayer/OverlayLayerFactory.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/OverlayLayer/OverlayLayerFactory.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverlayLayer/OverlayLayerFactory.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/OverlayLayer/OverlayLayerFactory.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverlayLayer/OverlayLayerModel.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/OverlayLayer/OverlayLayerModel.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverlayLayer/OverlayLayerModel.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/OverlayLayer/OverlayLayerModel.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverlayLayer/OverlayLayerPortal.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/OverlayLayer/OverlayLayerPortal.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverlayLayer/OverlayLayerPortal.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/OverlayLayer/OverlayLayerPortal.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverlayLayer/OverlayLayerWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/OverlayLayer/OverlayLayerWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverlayLayer/OverlayLayerWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/OverlayLayer/OverlayLayerWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverlayLayer/OverlayModel/OverlayModel.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/OverlayLayer/OverlayModel/OverlayModel.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverlayLayer/OverlayModel/OverlayModel.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/OverlayLayer/OverlayModel/OverlayModel.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverlayLayer/OverlayModel/OverlayWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/OverlayLayer/OverlayModel/OverlayWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverlayLayer/OverlayModel/OverlayWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/OverlayLayer/OverlayModel/OverlayWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverriddenLinkLayer/LabelWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/OverriddenLinkLayer/LabelWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverriddenLinkLayer/LabelWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/OverriddenLinkLayer/LabelWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverriddenLinkLayer/LinkLayerFactory.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/OverriddenLinkLayer/LinkLayerFactory.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverriddenLinkLayer/LinkLayerFactory.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/OverriddenLinkLayer/LinkLayerFactory.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverriddenLinkLayer/LinkLayerWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/OverriddenLinkLayer/LinkLayerWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverriddenLinkLayer/LinkLayerWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/OverriddenLinkLayer/LinkLayerWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverriddenLinkLayer/LinkOverlayPortal.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/OverriddenLinkLayer/LinkOverlayPortal.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverriddenLinkLayer/LinkOverlayPortal.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/OverriddenLinkLayer/LinkOverlayPortal.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverriddenLinkLayer/LinkWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/OverriddenLinkLayer/LinkWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/OverriddenLinkLayer/LinkWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/OverriddenLinkLayer/LinkWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Port/IntermediatePort/IntermediatePortFactory.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Port/IntermediatePort/IntermediatePortFactory.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Port/IntermediatePort/IntermediatePortFactory.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Port/IntermediatePort/IntermediatePortFactory.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Port/IntermediatePort/IntermediatePortModel.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Port/IntermediatePort/IntermediatePortModel.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Port/IntermediatePort/IntermediatePortModel.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Port/IntermediatePort/IntermediatePortModel.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Port/IntermediatePort/IntermediatePortWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Port/IntermediatePort/IntermediatePortWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Port/IntermediatePort/IntermediatePortWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Port/IntermediatePort/IntermediatePortWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Port/IntermediatePort/index.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Port/IntermediatePort/index.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Port/IntermediatePort/index.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Port/IntermediatePort/index.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Port/index.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Port/index.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Port/index.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Port/index.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Port/model/InputOutputPortFactory.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Port/model/InputOutputPortFactory.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Port/model/InputOutputPortFactory.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Port/model/InputOutputPortFactory.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Port/model/InputOutputPortModel.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Port/model/InputOutputPortModel.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Port/model/InputOutputPortModel.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Port/model/InputOutputPortModel.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Port/model/index.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/Port/model/index.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Port/model/index.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Port/model/index.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Port/view/DataMapperPortRadioButton.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Port/view/DataMapperPortRadioButton.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Port/view/DataMapperPortRadioButton.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Port/view/DataMapperPortRadioButton.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Port/view/DataMapperPortWidget.tsx b/workspaces/ballerina/data-mapper/src/components/Diagram/Port/view/DataMapperPortWidget.tsx
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/Port/view/DataMapperPortWidget.tsx
rename to workspaces/ballerina/data-mapper/src/components/Diagram/Port/view/DataMapperPortWidget.tsx
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/common-utils.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/common-utils.ts
similarity index 85%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/common-utils.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/utils/common-utils.ts
index 64b1a86e343..175e09f0305 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/common-utils.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/common-utils.ts
@@ -23,7 +23,7 @@ import { DataMapperLinkModel, MappingType } from "../Link";
 
 import { IOType, Mapping, TypeKind } from "@wso2/ballerina-core";
 import { DataMapperNodeModel } from "../Node/commons/DataMapperNode";
-import { ErrorNodeKind } from "../../../components/DataMapper/Error/RenderingError";
+import { ErrorNodeKind } from "../../DataMapper/Error/RenderingError";
 import {
     ARRAY_OUTPUT_NODE_TYPE,
     EmptyInputsNode,
@@ -31,10 +31,11 @@ import {
     InputNode,
     OBJECT_OUTPUT_NODE_TYPE,
     PRIMITIVE_OUTPUT_NODE_TYPE,
-    PrimitiveOutputNode
+    PrimitiveOutputNode,
+    QueryOutputNode
 } from "../Node";
 import { IDataMapperContext } from "../../../utils/DataMapperContext/DataMapperContext";
-import { View } from "../../../components/DataMapper/Views/DataMapperView";
+import { View } from "../../DataMapper/Views/DataMapperView";
 import { useDMExpandedFieldsStore } from "../../../store/store";
 
 const MERGEABLE_TYPES = new Set([
@@ -50,8 +51,22 @@ export function findMappingByOutput(mappings: Mapping[], outputId: string): Mapp
     return mappings.find(mapping => (mapping.output === outputId || mapping.output.replaceAll("\"", "") === outputId));
 }
 
+export function hasChildMappingsForOutput(mappings: Mapping[], outputId: string): boolean {
+    return mappings.some(mapping => 
+        mapping.output.startsWith(outputId + ".")
+    );
+}
+
+export function hasChildMappingsForInput(mappings: Mapping[], inputId: string): boolean {
+    return mappings.some(mapping => {
+        if (mapping.inputs.some(input => input.startsWith(inputId + "."))) return true;
+        return mapping.elements?.some(element => hasChildMappingsForInput(element.mappings, inputId));
+    }
+    );
+}
+
 export function isPendingMappingRequired(mappingType: MappingType): boolean {
-    return mappingType === MappingType.Incompatible;
+    return mappingType !== MappingType.Default;
 }
 
 export function getMappingType(sourcePort: PortModel, targetPort: PortModel): MappingType {
@@ -62,7 +77,11 @@ export function getMappingType(sourcePort: PortModel, targetPort: PortModel): Ma
         sourcePort.attributes.field
     ) {
 
-        if (targetPort.getParent() instanceof PrimitiveOutputNode) return MappingType.ArrayToSingletonWithCollect;
+        
+        const targetNode = targetPort.getNode();
+        if (targetNode instanceof QueryOutputNode && targetNode.outputType.kind !== TypeKind.Array) {
+            return MappingType.ArrayToSingletonAggregate;
+        }
 
         const sourceNode = sourcePort.getNode();
 
@@ -74,6 +93,10 @@ export function getMappingType(sourcePort: PortModel, targetPort: PortModel): Ma
         }
 
         const targetField = targetPort.attributes.field;
+
+        if (sourceField.kind === TypeKind.Union || targetField.kind === TypeKind.Union) {
+            return MappingType.ContainsUnions;
+        }
             
         const sourceDim = getDMTypeDim(sourceField);
         const targetDim = getDMTypeDim(targetField);
@@ -184,13 +207,6 @@ export function fieldFQNFromPortName(portName: string): string {
     return portName.split('.').slice(1).join('.');
 }
 
-export function getSanitizedId(id: string): string {
-    if (id.endsWith('>')) {
-         return id.split('.').slice(0, -1).join('.');
-    }
-    return id;
-}
-
 export function getErrorKind(node: DataMapperNodeModel): ErrorNodeKind {
 	const nodeType = node.getType();
 	switch (nodeType) {
@@ -268,5 +284,10 @@ export function isExpandable(field: IOType): boolean {
 }
 
 export function getTargetField(viewId: string, outputId: string){
-    return [...viewId.split("."), ...outputId.split(".").slice(1)].join(".");
+    const outputIdParts = outputId.split(".").slice(1);
+    // Added to support multi dimensional arrays
+    if (outputIdParts.length === 0) {
+        outputIdParts.push("0");
+    }
+    return [...viewId.split("."), ...outputIdParts].join(".");
 }
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/constants.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/constants.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/constants.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/utils/constants.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/diagram-utils.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/diagram-utils.ts
similarity index 85%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/diagram-utils.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/utils/diagram-utils.ts
index 1a8ae09c65a..2e5fb4aa921 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/diagram-utils.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/diagram-utils.ts
@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { FieldCount } from "../../../components/Hooks";
+import { FieldCount } from "../../Hooks";
 import { InputNode } from "../Node";
 import { DataMapperNodeModel } from "../Node/commons/DataMapperNode";
 import {
@@ -49,8 +49,8 @@ export function getIONodeHeight(noOfFields: number) {
 export function calculateControlPointOffset(screenWidth: number) {
     const minWidth = 850;
     const maxWidth = 1500;
-    const minOffset = 15;
-    const maxOffset = 90;
+    const minOffset = 50;
+    const maxOffset = 150;
 
     const clampedWidth = Math.min(Math.max(screenWidth, minWidth), maxWidth);
     const interpolationFactor = (clampedWidth - minWidth) / (maxWidth - minWidth);
@@ -82,3 +82,12 @@ export function getFieldCountMismatchIndex(newFieldCounts: FieldCount[], existin
     
     return -1;
 }
+
+export function isSameView(newNode: DataMapperNodeModel, existingNode?: DataMapperNodeModel) {
+    if (!existingNode || !existingNode?.context || !newNode?.context) return;
+
+    const prevFocusedView = existingNode.context.views[existingNode.context.views.length - 1];
+    const newFocusedView = newNode.context.views[newNode.context.views.length - 1];
+
+    return prevFocusedView.label === newFocusedView.label;
+}
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/link-utils.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/link-utils.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/link-utils.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/utils/link-utils.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/modification-utils.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/modification-utils.ts
similarity index 84%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/modification-utils.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/utils/modification-utils.ts
index 644034af987..ac384a5b2e8 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/modification-utils.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/modification-utils.ts
@@ -22,7 +22,7 @@ import { IDataMapperContext } from "../../../utils/DataMapperContext/DataMapperC
 import { MappingFindingVisitor } from "../../../visitors/MappingFindingVisitor";
 import { traverseNode } from "../../../utils/model-utils";
 import { getTargetField, getValueType } from "./common-utils";
-import { CustomFnMetadata, CustomFnParams, Mapping, ResultClauseType } from "@wso2/ballerina-core";
+import { FnMetadata, FnParams, FnReturnType, Mapping, ResultClauseType } from "@wso2/ballerina-core";
 import { getTypeName, isEnumMember } from "./type-utils";
 import { InputNode } from "../Node/Input/InputNode";
 
@@ -42,7 +42,7 @@ export async function createNewMapping(link: DataMapperLinkModel, modifier?: (ex
 
 	const input = isSourceEnumMember
 		? sourcePortModel.attributes.field?.typeName
-		: sourcePortModel.attributes.optionalOmittedFieldFQN;
+		: sourcePortModel.attributes.fieldFQN;
 	const outputId = outputPortModel.attributes.fieldFQN;
 	const lastView = targetNode.context.views[targetNode.context.views.length - 1];
 	const viewId = lastView?.targetField || null;
@@ -78,10 +78,10 @@ export async function addValue(fieldId: string, value: string, context: IDataMap
 export async function removeMapping(mapping: Mapping, context: IDataMapperContext) {
 	const views=context.views;
 	const viewId = views[views.length-1].targetField;
-	return await context.deleteMapping( mapping as Mapping, viewId)
+	return await context.deleteMapping( mapping, viewId)
 }
 
-export async function mapWithCustomFn(link: DataMapperLinkModel, context: IDataMapperContext){
+function getMapWithFnData(link: DataMapperLinkModel, context: IDataMapperContext){
 	const sourcePort = link.getSourcePort();
 	const targetPort = link.getTargetPort();
 	if (!sourcePort || !targetPort) {
@@ -103,21 +103,40 @@ export async function mapWithCustomFn(link: DataMapperLinkModel, context: IDataM
 
 	const inputField = sourcePortModel.attributes.field;
 	const outputField = outputPortModel.attributes.field;
-	const inputParams: CustomFnParams[] = [{
-		name: inputField.variableName,
+
+	const params: FnParams[] = [{
+		name: inputField.name,
 		type: getTypeName(inputField).replace("record", "any"),
 		isOptional: false,
 		isNullable: false,
 		kind: inputField.kind
 	}];
 
-	const metadata: CustomFnMetadata = {
-		returnType: getTypeName(outputField).replace("record", "any"),
-		parameters: inputParams
+	const returnType: FnReturnType = {
+		type: getTypeName(outputField).replace("record", "any"),
+		kind: outputField.kind
+	}
+
+	const metadata: FnMetadata = {
+		returnType: returnType,
+		parameters: params
+	}
+
+	return {
+		mapping,
+		metadata,
+		viewId
 	}
+}
 
+export async function mapWithCustomFn(link: DataMapperLinkModel, context: IDataMapperContext){
+	const { mapping, metadata, viewId } = getMapWithFnData(link, context);
 	await context.mapWithCustomFn(mapping, metadata, viewId);
+}
 
+export async function mapWithTransformFn(link: DataMapperLinkModel, context: IDataMapperContext){
+	const { mapping, metadata, viewId } = getMapWithFnData(link, context);
+	await context.mapWithTransformFn(mapping, metadata, viewId);
 }
 
 export async function mapWithQuery(link: DataMapperLinkModel, clauseType: ResultClauseType, context: IDataMapperContext) {
@@ -131,18 +150,17 @@ export async function mapWithQuery(link: DataMapperLinkModel, clauseType: Result
 	const outputPortModel = targetPort as InputOutputPortModel;
 
 	const input = sourcePortModel.attributes.optionalOmittedFieldFQN;
-	const outputId = outputPortModel.attributes.fieldFQN;
+	const output = outputPortModel.attributes.fieldFQN;
 	const lastView = context.views[context.views.length - 1];
 	const viewId = lastView?.targetField || null;
 	const name  = context.views[0]?.targetField;
 
 	const mapping: Mapping = {
-		output: "OUTPUT",// TODO: Remove this once the API is updated, currently output is embedded in to targetField
+		output: output,
 		expression: input
 	};
-	const targetField = getTargetField(viewId, outputId); // TODO: Remove this once the API is updated
 
-	await context?.convertToQuery(mapping, clauseType, targetField, name);
+	await context?.convertToQuery(mapping, clauseType, viewId, name);
 }
 
 export function buildInputAccessExpr(fieldFqn: string): string {
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/node-utils.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/node-utils.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/node-utils.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/utils/node-utils.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/port-utils.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/port-utils.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/port-utils.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/utils/port-utils.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/search-utils.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/search-utils.ts
similarity index 89%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/search-utils.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/utils/search-utils.ts
index 0ce40389419..f9a893d8094 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/search-utils.ts
+++ b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/search-utils.ts
@@ -84,7 +84,7 @@ export const getFilteredSubFields = (field: IOType, searchValue: string) => {
 			?.map((fieldItem) => getFilteredSubFields(fieldItem, searchValue))
 			.filter((fieldItem): fieldItem is IOType => fieldItem !== null);
 
-		const matchingName = field?.variableName?.toLowerCase().includes(searchValue.toLowerCase());
+		const matchingName = field?.name?.toLowerCase().includes(searchValue.toLowerCase());
 		if (matchingName || matchedSubFields?.length > 0) {
 			return {
 				...field,
@@ -96,7 +96,7 @@ export const getFilteredSubFields = (field: IOType, searchValue: string) => {
 			?.map((fieldItem) => getFilteredSubFields(fieldItem, searchValue))
 			.filter((fieldItem): fieldItem is IOType => fieldItem !== null);
 
-		const matchingName = field?.variableName?.toLowerCase().includes(searchValue.toLowerCase());
+		const matchingName = field?.name?.toLowerCase().includes(searchValue.toLowerCase());
 		if (matchingName || matchedSubFields?.length > 0) {
 			return {
 				...field,
@@ -107,7 +107,7 @@ export const getFilteredSubFields = (field: IOType, searchValue: string) => {
 			}
 		}
 	} else {
-		return field?.variableName?.toLowerCase()?.includes(searchValue.toLowerCase()) ? field : null
+		return field?.name?.toLowerCase()?.includes(searchValue.toLowerCase()) ? field : null
 	}
 
 	return null;
@@ -126,7 +126,12 @@ export function hasNoOutputMatchFound(outputType: IOType, filteredOutputType: IO
 	return false;
 }
 
-export function getFilteredMappings(mappings: Mapping[], inputSearch: string, outputSearch: string): Mapping[] {
+export function getFilteredMappings(
+	mappings: Mapping[],
+	inputSearch: string,
+	outputSearch: string,
+	isElement: boolean = false
+): Mapping[] {
     return mappings.flatMap(mapping => {
 
 		const filteredInputs = mapping.inputs.filter(input => {
@@ -136,12 +141,13 @@ export function getFilteredMappings(mappings: Mapping[], inputSearch: string, ou
 		});
 
         const outputField = mapping.output.split(".").pop();
-        const matchedWithOutputSearch = outputSearch === "" || 
+        const matchedWithOutputSearch = outputSearch === "" ||
+			isElement ||
             outputField.toLowerCase().includes(outputSearch.toLowerCase());
         
         // Get nested mappings from elements
         const nestedMappings = mapping.elements?.flatMap(element => 
-            getFilteredMappings(element.mappings, inputSearch, outputSearch)
+            getFilteredMappings(element.mappings, inputSearch, outputSearch, matchedWithOutputSearch)
         ) || [];
 
 		const filteredMapping = filteredInputs.length > 0 && matchedWithOutputSearch;
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/st-utils.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/st-utils.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/st-utils.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/utils/st-utils.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/type-utils.ts b/workspaces/ballerina/data-mapper/src/components/Diagram/utils/type-utils.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/components/Diagram/utils/type-utils.ts
rename to workspaces/ballerina/data-mapper/src/components/Diagram/utils/type-utils.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Hooks/index.tsx b/workspaces/ballerina/data-mapper/src/components/Hooks/index.tsx
similarity index 96%
rename from workspaces/ballerina/inline-data-mapper/src/components/Hooks/index.tsx
rename to workspaces/ballerina/data-mapper/src/components/Hooks/index.tsx
index fa26c633b7a..8d404e5d06c 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/Hooks/index.tsx
+++ b/workspaces/ballerina/data-mapper/src/components/Hooks/index.tsx
@@ -23,7 +23,7 @@ import {
 } from "@projectstorm/react-diagrams";
 
 import { DataMapperNodeModel } from '../Diagram/Node/commons/DataMapperNode';
-import { getFieldCountMismatchIndex, getInputNodeFieldCounts, getIONodeHeight } from '../Diagram/utils/diagram-utils';
+import { getFieldCountMismatchIndex, getInputNodeFieldCounts, getIONodeHeight, isSameView } from '../Diagram/utils/diagram-utils';
 import { OverlayLayerModel } from '../Diagram/OverlayLayer/OverlayLayerModel';
 import { ErrorNodeKind } from '../DataMapper/Error/RenderingError';
 import { useDMCollapsedFieldsStore, useDMExpandedFieldsStore, useDMSearchStore } from '../../store/store';
@@ -72,6 +72,7 @@ export const useRepositionedNodes = (
 
     nodesClone.forEach((node, index) => {
         const existingNode = prevNodes.find(prevNode => prevNode.id === node.id);
+        const sameView = isSameView(node, existingNode);
 
         if (node instanceof ObjectOutputNode
             || node instanceof ArrayOutputNode
@@ -80,7 +81,7 @@ export const useRepositionedNodes = (
             || node instanceof OutputDataImportNodeModel
         ) {
             const x = (window.innerWidth) * (100 / zoomLevel) - IO_NODE_DEFAULT_WIDTH;
-            const y = existingNode && existingNode.getY() !== 0 ? existingNode.getY() : 0;
+            const y = existingNode && sameView && existingNode.getY() !== 0 ? existingNode.getY() : 0;
             node.setPosition(x, y);
         }
         if (node instanceof InputNode
@@ -92,6 +93,7 @@ export const useRepositionedNodes = (
             const computedY = prevBottomY + (prevBottomY ? GAP_BETWEEN_INPUT_NODES : 0);
 
             const utilizeExistingY = existingNode &&
+                sameView &&
                 existingNode.getY() !== 0 &&
                 !(node instanceof SubMappingNode) &&
                 (fieldCountMismatchIndex === -1 || index <= fieldCountMismatchIndex);
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/styles.ts b/workspaces/ballerina/data-mapper/src/components/styles.ts
similarity index 98%
rename from workspaces/ballerina/inline-data-mapper/src/components/styles.ts
rename to workspaces/ballerina/data-mapper/src/components/styles.ts
index 5c74ec1f9cc..a5253ed8ef1 100644
--- a/workspaces/ballerina/inline-data-mapper/src/components/styles.ts
+++ b/workspaces/ballerina/data-mapper/src/components/styles.ts
@@ -42,10 +42,7 @@ const addElementButton = {
     color: "var(--vscode-inputOption-activeForeground)",
     display: "flex",
     justifyContent: "space-between",
-    fontStyle: "normal",
-    fontWeight: 400,
-    fontSize: "13px",
-    lineHeight: "24px",
+    opacity: 0.7
 };
 
 const treeLabel = {
@@ -110,11 +107,11 @@ export const useIONodesStyles = () => ({
         '&:hover': {
             backgroundColor: 'var(--vscode-input-background)',
         },
-        opacity: 0.8
+        opacity: 0.9
     }),
     treeLabelDisabled: css({
         cursor: 'not-allowed',
-        opacity: 0.5
+        opacity: 0.7
     }),
     header: css({
 		color: "black",
@@ -128,7 +125,7 @@ export const useIONodesStyles = () => ({
 		fontSize: "14px",
 	}),
     labelDisabled: css({
-		opacity: 0.5
+		opacity: 0.7
 	}),
     treeLabelPortSelected: css({
         color: "var(--vscode-list-activeSelectionForeground)",
@@ -153,7 +150,7 @@ export const useIONodesStyles = () => ({
     }),
     ArrayFieldRowDisabled: css({
         cursor: 'not-allowed',
-        opacity: 0.5
+        opacity: 0.7
     }),
     innerTreeLabel: css({
         display: "flex",
diff --git a/workspaces/ballerina/inline-data-mapper/src/context/ExpressionContext.tsx b/workspaces/ballerina/data-mapper/src/context/ExpressionContext.tsx
similarity index 95%
rename from workspaces/ballerina/inline-data-mapper/src/context/ExpressionContext.tsx
rename to workspaces/ballerina/data-mapper/src/context/ExpressionContext.tsx
index cf899b8cdc2..4ba61da145b 100644
--- a/workspaces/ballerina/inline-data-mapper/src/context/ExpressionContext.tsx
+++ b/workspaces/ballerina/data-mapper/src/context/ExpressionContext.tsx
@@ -25,7 +25,8 @@ const defaultState: ExpressionBarProps = {
     triggerCompletions: () => {},
     onCompletionSelect: () => {},
     onSave: () => Promise.resolve(),
-    onCancel: () => {}
+    onCancel: () => {},
+    goToSource: () => Promise.resolve()
 };
 export const Context = createContext<ExpressionBarProps>(defaultState);
 
diff --git a/workspaces/ballerina/inline-data-mapper/src/index.tsx b/workspaces/ballerina/data-mapper/src/index.tsx
similarity index 77%
rename from workspaces/ballerina/inline-data-mapper/src/index.tsx
rename to workspaces/ballerina/data-mapper/src/index.tsx
index 78f3e8a6f97..96543010983 100644
--- a/workspaces/ballerina/inline-data-mapper/src/index.tsx
+++ b/workspaces/ballerina/data-mapper/src/index.tsx
@@ -24,10 +24,10 @@ import type {} from "@projectstorm/react-diagrams-core";
 import type {} from "@projectstorm/react-diagrams";
 import { css, Global } from '@emotion/react';
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { IDMFormProps, ModelState, IntermediateClause, Mapping, CodeData, CustomFnMetadata, LineRange, ResultClauseType } from "@wso2/ballerina-core";
+import { DMFormProps, ModelState, IntermediateClause, Mapping, CodeData, FnMetadata, LineRange, ResultClauseType, IOType } from "@wso2/ballerina-core";
 import { CompletionItem, ErrorBoundary } from "@wso2/ui-toolkit";
 
-import { InlineDataMapper } from "./components/DataMapper/DataMapper";
+import { DataMapperEditor } from "./components/DataMapper/DataMapperEditor";
 import { ExpressionProvider } from "./context/ExpressionContext";
 
 const queryClient = new QueryClient({
@@ -56,35 +56,39 @@ export interface ExpressionBarProps {
     onCompletionSelect: (value: string) => void;
     onSave: (outputId: string, value: string, viewId: string, name: string) => Promise<void>;
     onCancel: () => void;
+    goToSource: (outputId: string, viewId: string) => Promise<void>;
 }
 
-export interface InlineDataMapperProps {
+export interface DataMapperEditorProps {
     modelState: ModelState;
     name: string;
     applyModifications: (outputId: string, expression: string, viewId: string, name: string) => Promise<void>;
     addArrayElement: (outputId: string, viewId: string, name: string) => Promise<void>;
-    generateForm: (formProps: IDMFormProps) => JSX.Element;
+    generateForm: (formProps: DMFormProps) => JSX.Element;
     convertToQuery: (mapping: Mapping, clauseType: ResultClauseType, viewId: string, name: string) => Promise<void>;
     addClauses: (clause: IntermediateClause, targetField: string, isNew: boolean, index?:number) => Promise<void>;
     addSubMapping: (subMappingName: string, type: string, index: number, targetField: string, importsCodedata?: CodeData) => Promise<void>;
     deleteMapping: (mapping: Mapping, viewId: string) => Promise<void>;
-    mapWithCustomFn: (mapping: Mapping, metadata: CustomFnMetadata, viewId: string) => Promise<void>;
+    mapWithCustomFn: (mapping: Mapping, metadata: FnMetadata, viewId: string) => Promise<void>;
+    mapWithTransformFn: (mapping: Mapping, metadata: FnMetadata, viewId: string) => Promise<void>;
     goToFunction: (functionRange: LineRange) => Promise<void>;
+    enrichChildFields: (parentField: IOType) => void;
     onClose: () => void;
+    onEdit?: () => void;
     handleView: (viewId: string, isSubMapping?: boolean) => void;
 }
 
-export interface DataMapperViewProps extends InlineDataMapperProps {
+export interface DataMapperProps extends DataMapperEditorProps {
     expressionBar: ExpressionBarProps;
 }
 
-export function DataMapperView({ expressionBar, ...props }: DataMapperViewProps) {
+export function DataMapper({ expressionBar, ...props }: DataMapperProps) {
     return (
-        <ErrorBoundary errorMsg="An error occurred while rendering the Inline Data Mapper">
+        <ErrorBoundary errorMsg="An error occurred while rendering the Data Mapper">
             <QueryClientProvider client={queryClient}>
                 <Global styles={globalStyles} />
                 <ExpressionProvider {...expressionBar}>
-                    <InlineDataMapper {...props} />
+                    <DataMapperEditor {...props} />
                 </ExpressionProvider>
             </QueryClientProvider>
         </ErrorBoundary>
diff --git a/workspaces/ballerina/inline-data-mapper/src/store/store.ts b/workspaces/ballerina/data-mapper/src/store/store.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/store/store.ts
rename to workspaces/ballerina/data-mapper/src/store/store.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/utils/DataMapperContext/DataMapperContext.ts b/workspaces/ballerina/data-mapper/src/utils/DataMapperContext/DataMapperContext.ts
similarity index 76%
rename from workspaces/ballerina/inline-data-mapper/src/utils/DataMapperContext/DataMapperContext.ts
rename to workspaces/ballerina/data-mapper/src/utils/DataMapperContext/DataMapperContext.ts
index 1e1ecda2271..7c95620e94f 100644
--- a/workspaces/ballerina/inline-data-mapper/src/utils/DataMapperContext/DataMapperContext.ts
+++ b/workspaces/ballerina/data-mapper/src/utils/DataMapperContext/DataMapperContext.ts
@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { CustomFnMetadata, ExpandedDMModel, LineRange, Mapping, ResultClauseType } from "@wso2/ballerina-core";
+import { FnMetadata, ExpandedDMModel, IOType, LineRange, Mapping, ResultClauseType } from "@wso2/ballerina-core";
 import { View } from "../../components/DataMapper/Views/DataMapperView";
 
 export interface IDataMapperContext {
@@ -27,8 +27,10 @@ export interface IDataMapperContext {
     hasInputsOutputsChanged: boolean;
     convertToQuery: (mapping: Mapping, clauseType: ResultClauseType, viewId: string, name: string) => Promise<void>;
     deleteMapping: (mapping: Mapping, viewId: string) => Promise<void>;
-    mapWithCustomFn: (mapping: Mapping, metadata: CustomFnMetadata, viewId: string) => Promise<void>;
+    mapWithCustomFn: (mapping: Mapping, metadata: FnMetadata, viewId: string) => Promise<void>;
+    mapWithTransformFn: (mapping: Mapping, metadata: FnMetadata, viewId: string) => Promise<void>;
     goToFunction: (functionRange: LineRange) => Promise<void>;
+    enrichChildFields: (parentField: IOType) => void;
 }
 
 export class DataMapperContext implements IDataMapperContext {
@@ -42,7 +44,9 @@ export class DataMapperContext implements IDataMapperContext {
         public hasInputsOutputsChanged: boolean = false,
         public convertToQuery: (mapping: Mapping, clauseType: ResultClauseType, viewId: string, name: string) => Promise<void>,
         public deleteMapping: (mapping: Mapping, viewId: string) => Promise<void>,
-        public mapWithCustomFn: (mapping: Mapping, metadata: CustomFnMetadata, viewId: string) => Promise<void>,
-        public goToFunction: (functionRange: LineRange) => Promise<void>
+        public mapWithCustomFn: (mapping: Mapping, metadata: FnMetadata, viewId: string) => Promise<void>,
+        public mapWithTransformFn: (mapping: Mapping, metadata: FnMetadata, viewId: string) => Promise<void>,
+        public goToFunction: (functionRange: LineRange) => Promise<void>,
+        public enrichChildFields: (parentField: IOType) => void
     ){}
 }
diff --git a/workspaces/ballerina/inline-data-mapper/src/utils/keyboard-navigation-manager.ts b/workspaces/ballerina/data-mapper/src/utils/keyboard-navigation-manager.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/utils/keyboard-navigation-manager.ts
rename to workspaces/ballerina/data-mapper/src/utils/keyboard-navigation-manager.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/utils/model-utils.ts b/workspaces/ballerina/data-mapper/src/utils/model-utils.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/utils/model-utils.ts
rename to workspaces/ballerina/data-mapper/src/utils/model-utils.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/visitors/BaseVisitor.ts b/workspaces/ballerina/data-mapper/src/visitors/BaseVisitor.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/visitors/BaseVisitor.ts
rename to workspaces/ballerina/data-mapper/src/visitors/BaseVisitor.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/visitors/IONodeInitVisitor.ts b/workspaces/ballerina/data-mapper/src/visitors/IONodeInitVisitor.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/visitors/IONodeInitVisitor.ts
rename to workspaces/ballerina/data-mapper/src/visitors/IONodeInitVisitor.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/visitors/IntermediateNodeInitVisitor.ts b/workspaces/ballerina/data-mapper/src/visitors/IntermediateNodeInitVisitor.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/visitors/IntermediateNodeInitVisitor.ts
rename to workspaces/ballerina/data-mapper/src/visitors/IntermediateNodeInitVisitor.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/visitors/MappingDeletionVisitor.ts b/workspaces/ballerina/data-mapper/src/visitors/MappingDeletionVisitor.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/visitors/MappingDeletionVisitor.ts
rename to workspaces/ballerina/data-mapper/src/visitors/MappingDeletionVisitor.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/visitors/MappingFindingVisitor.ts b/workspaces/ballerina/data-mapper/src/visitors/MappingFindingVisitor.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/visitors/MappingFindingVisitor.ts
rename to workspaces/ballerina/data-mapper/src/visitors/MappingFindingVisitor.ts
diff --git a/workspaces/ballerina/inline-data-mapper/src/visitors/SubMappingNodeInitVisitor.ts b/workspaces/ballerina/data-mapper/src/visitors/SubMappingNodeInitVisitor.ts
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/src/visitors/SubMappingNodeInitVisitor.ts
rename to workspaces/ballerina/data-mapper/src/visitors/SubMappingNodeInitVisitor.ts
diff --git a/workspaces/ballerina/inline-data-mapper/tsconfig.json b/workspaces/ballerina/data-mapper/tsconfig.json
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/tsconfig.json
rename to workspaces/ballerina/data-mapper/tsconfig.json
diff --git a/workspaces/ballerina/data-mapper-view/tsconfig.ref.json b/workspaces/ballerina/data-mapper/tsconfig.ref.json
similarity index 100%
rename from workspaces/ballerina/data-mapper-view/tsconfig.ref.json
rename to workspaces/ballerina/data-mapper/tsconfig.ref.json
diff --git a/workspaces/ballerina/inline-data-mapper/tslint.json b/workspaces/ballerina/data-mapper/tslint.json
similarity index 100%
rename from workspaces/ballerina/inline-data-mapper/tslint.json
rename to workspaces/ballerina/data-mapper/tslint.json
diff --git a/workspaces/ballerina/inline-data-mapper/.eslintrc.cjs b/workspaces/ballerina/inline-data-mapper/.eslintrc.cjs
deleted file mode 100644
index ae3a1051d59..00000000000
--- a/workspaces/ballerina/inline-data-mapper/.eslintrc.cjs
+++ /dev/null
@@ -1,18 +0,0 @@
-module.exports = {
-  root: true,
-  env: { browser: true},
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
-}
diff --git a/workspaces/ballerina/inline-data-mapper/README.md b/workspaces/ballerina/inline-data-mapper/README.md
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/workspaces/ballerina/inline-data-mapper/config/rush-project.json b/workspaces/ballerina/inline-data-mapper/config/rush-project.json
deleted file mode 100644
index 3c3241c8f6a..00000000000
--- a/workspaces/ballerina/inline-data-mapper/config/rush-project.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "extends": "../../../rush-config.json"
-}
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/ArrowLink/ArrowLinkFactory.tsx b/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/ArrowLink/ArrowLinkFactory.tsx
deleted file mode 100644
index 7ca6a7e233a..00000000000
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/ArrowLink/ArrowLinkFactory.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from "react";
-
-import { GenerateWidgetEvent } from "@projectstorm/react-canvas-core";
-import { DefaultLinkFactory } from "@projectstorm/react-diagrams";
-
-import { ArrowLinkModel } from "./ArrowLinkModel";
-import { ArrowLinkWidget } from "./ArrowLinkWidget";
-
-export class ArrowLinkFactory extends DefaultLinkFactory {
-    constructor() {
-        super('arrow');
-    }
-
-    generateModel() {
-        return new ArrowLinkModel();
-    }
-
-    generateReactWidget(event: GenerateWidgetEvent<ArrowLinkModel>): JSX.Element {
-        return <ArrowLinkWidget link={event.model} />;
-    }
-}
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/ArrowLink/ArrowLinkModel.ts b/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/ArrowLink/ArrowLinkModel.ts
deleted file mode 100644
index 4891b48e5e5..00000000000
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/ArrowLink/ArrowLinkModel.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { DefaultLinkModel } from "@projectstorm/react-diagrams";
-import { Point } from "@projectstorm/geometry";
-
-export class ArrowLinkModel extends DefaultLinkModel {
-    constructor() {
-      super({
-        type: 'arrow'
-      });
-    }
-
-    getSVGPath(): string {
-		if (this.points.length === 2) {
-			const sourcePoint: Point = new Point(this.getFirstPoint().getPosition().x,
-				this.getFirstPoint().getPosition().y);
-			const targetPoint: Point = new Point(this.getLastPoint().getPosition().x,
-				this.getLastPoint().getPosition().y - 5);
-
-            return `M${sourcePoint.x},${sourcePoint.y} L${sourcePoint.x},${targetPoint.y}`;
-		}
-	}
-}
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/ArrowLink/ArrowLinkWidget.tsx b/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/ArrowLink/ArrowLinkWidget.tsx
deleted file mode 100644
index 3eefce8bbf0..00000000000
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/ArrowLink/ArrowLinkWidget.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from "react";
-
-import { ArrowLinkModel } from "./ArrowLinkModel";
-
-interface ArrowLinkWidgetProps {
-    link: ArrowLinkModel;
-}
-  
-export function ArrowLinkWidget(props: ArrowLinkWidgetProps) {
-    const { link } = props;
-
-    return (
-        <g pointerEvents={"all"}>
-            <path
-                id={link.getID() + "-bg"}
-                d={link.getSVGPath()}
-                fill={"none"}
-                stroke={"transparent"}
-                strokeWidth={16}
-            />
-            <path
-                id={link.getID()}
-                d={link.getSVGPath()}
-                fill={"none"}
-                stroke={"var(--vscode-editorBracketMatch-border)"}
-                strokeWidth={2}
-                strokeDasharray={"0"}
-                markerEnd="url(#arrowhead)"
-            />
-            <defs>
-                <marker
-                    markerWidth="4"
-                    markerHeight="4"
-                    refX="3"
-                    refY="2"
-                    viewBox="0 0 4 4"
-                    orient="auto"
-                    id="arrowhead"
-                >
-                    <polygon
-                        points="0,4 0,0 4,2"
-                        fill={"var(--vscode-editorBracketMatch-border)"}
-                    ></polygon>
-                </marker>
-            </defs>
-        </g>
-    );
-};
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/ArrowLink/index.ts b/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/ArrowLink/index.ts
deleted file mode 100644
index 1c32475f892..00000000000
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Link/ArrowLink/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-export * from "./ArrowLinkModel";
-export * from "./ArrowLinkFactory";
diff --git a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/ValueConfigButton/ValueConfigMenuItem.tsx b/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/ValueConfigButton/ValueConfigMenuItem.tsx
deleted file mode 100644
index be19845956a..00000000000
--- a/workspaces/ballerina/inline-data-mapper/src/components/Diagram/Node/commons/ValueConfigButton/ValueConfigMenuItem.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-// tslint:disable: jsx-no-multiline-js
-import React from 'react';
-
-import { Icon, Item, MenuItem, Tooltip } from '@wso2/ui-toolkit';
-import { css } from '@emotion/css';
-
-const useStyles = () => ({
-    itemContainer: css({
-        display: 'flex',
-        justifyContent: 'space-between',
-        width: '100%',
-        alignItems: 'center'
-    }),
-    symbol: css({
-        alignSelf: 'flex-end',
-    }),
-    warning: css({
-        color: 'var(--vscode-editorError-foreground)',
-        fontSize: '16px',
-        marginLeft: '5px'
-    })
-});
-
-export interface ValueConfigMenuItem {
-    title: string;
-    onClick: () => void;
-    onClose?: () => void;
-    warningMsg?: string;
-    level?: number;
-}
-
-export function ValueConfigMenuItem(props: ValueConfigMenuItem) {
-    const { title, onClick, onClose, warningMsg } = props;
-    const classes = useStyles();
-
-    const onClickMenuItem = () => {
-        onClick();
-        onClose();
-    }
-
-    const itemElement = (
-        <div className={classes.itemContainer}>
-            <div>{title}</div>
-            {warningMsg && (
-                <Tooltip
-                    content={warningMsg}
-                >
-                    <Icon name="error-icon" iconSx={{ color: "var(--vscode-errorForeground)" }} />
-                </Tooltip>
-            )}
-        </div>
-    );
-
-    const menuItem: Item = { id: title, label: itemElement, onClick: onClickMenuItem }
-
-    return (
-        <MenuItem
-            key={title}
-            item={menuItem}
-        />
-    );
-}
diff --git a/workspaces/ballerina/inline-data-mapper/tsconfig.ref.json b/workspaces/ballerina/inline-data-mapper/tsconfig.ref.json
deleted file mode 100644
index e5a86fcee6b..00000000000
--- a/workspaces/ballerina/inline-data-mapper/tsconfig.ref.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "include": ["src/**/*", "src/**/*.json"],
-  "compilerOptions": {
-    "composite": true,
-  },
-}
diff --git a/workspaces/ballerina/persist-layer-diagram/webpack.config.js b/workspaces/ballerina/persist-layer-diagram/webpack.config.js
index 0066dbf89bf..5901792162c 100644
--- a/workspaces/ballerina/persist-layer-diagram/webpack.config.js
+++ b/workspaces/ballerina/persist-layer-diagram/webpack.config.js
@@ -3,7 +3,7 @@ const webpack = require('webpack');
 module.exports = {
   entry: "./src/index.tsx",
   target: "web",
-  devtool: "source-map",
+  devtool: !process.env.CI ? "source-map" : undefined,
   output: {
     path: path.resolve(__dirname, "build"),
     filename: "PersistDiagram.js",
diff --git a/workspaces/ballerina/type-diagram/src/Diagram.tsx b/workspaces/ballerina/type-diagram/src/Diagram.tsx
index 1c3e3e7812b..2ac21570dcd 100644
--- a/workspaces/ballerina/type-diagram/src/Diagram.tsx
+++ b/workspaces/ballerina/type-diagram/src/Diagram.tsx
@@ -29,6 +29,7 @@ import { dagreEngine } from './resources/constants';
 import { DesignDiagramContext } from './components/common';
 import { DiagramControls } from './components/Controls/DiagramControls';
 import { OverlayLayerModel } from './components/OverlayLoader';
+import { FilteringInfoBanner } from './components/FilteringInfoBanner';
 import { Type } from '@wso2/ballerina-core';
 import { focusToNode } from './utils/utils';
 import { graphqlModeller } from './utils/model-mapper/entityModelMapper';
@@ -43,15 +44,23 @@ interface TypeDiagramProps {
     showProblemPanel?: () => void;
     goToSource: (node: Type) => void
     onTypeEdit: (typeId: string, isGraphqlRoot?: boolean) => void;
+    onTypeDelete: (typeId: string) => void;
+    verifyTypeDelete: (typeId: string) => Promise<boolean>;
+}
+
+export interface ModelResult {
+    model: DiagramModel;
+    isFirstLevelDependenciesFiltered?: boolean;
 }
 
 export function TypeDiagram(props: TypeDiagramProps) {
-    const { typeModel, showProblemPanel, selectedNodeId, goToSource, focusedNodeId, updateFocusedNodeId, rootService, isGraphql } = props;
+    const { typeModel, showProblemPanel, selectedNodeId, goToSource, focusedNodeId, updateFocusedNodeId, rootService, isGraphql, verifyTypeDelete } = props;
 
     const [diagramEngine] = useState<DiagramEngine>(createEntitiesEngine());
     const [diagramModel, setDiagramModel] = useState<DiagramModel>(undefined);
     const [hasDiagnostics, setHasDiagnostics] = useState<boolean>(false);
     const [selectedDiagramNode, setSelectedDiagramNode] = useState<string>(selectedNodeId);
+    const [isFirstLevelFiltered, setIsFirstLevelFiltered] = useState<boolean>(false);
 
     useEffect(() => {
         drawDiagram(focusedNodeId);
@@ -62,15 +71,19 @@ export function TypeDiagram(props: TypeDiagramProps) {
     }, [selectedNodeId]);
 
     const drawDiagram = (focusedNode?: string) => {
-        let diagramModel;
+
+        let diagramModel: DiagramModel;
+
 
         // Create diagram model based on type
         if (isGraphql && rootService) {
             console.log("Modeling  graphql diagram");
             diagramModel = graphqlModeller(rootService, typeModel);
         } else if (typeModel && !isGraphql) {
-            console.log("Modeling entity diagram");
-            diagramModel = entityModeller(typeModel, focusedNode);
+            console.log("Modeling entity diagram", focusedNode, selectedNodeId);
+            const modellerResult: ModelResult = entityModeller(typeModel, focusedNode);
+            diagramModel = modellerResult.model;
+            setIsFirstLevelFiltered(modellerResult.isFirstLevelDependenciesFiltered || false);
         }
 
         if (diagramModel) {
@@ -114,6 +127,11 @@ export function TypeDiagram(props: TypeDiagramProps) {
         setSelectedDiagramNode(nodeId);
     }
 
+    const onNodeDelete = (typeId: string) => {
+        console.log("Deleting node: ", selectedDiagramNode);
+        props.onTypeDelete(typeId);
+    }
+
     let ctx = {
         selectedNodeId: selectedDiagramNode,
         setSelectedNodeId: updateSelectionOnDiagram,
@@ -122,7 +140,9 @@ export function TypeDiagram(props: TypeDiagramProps) {
         focusedNodeId,
         setFocusedNodeId: updateFocusedNodeId,
         onEditNode: onTypeEdit,
-        goToSource
+        goToSource,
+        onNodeDelete,
+        verifyTypeDelete
     }
 
     const refreshDiagram = () => {
@@ -131,23 +151,27 @@ export function TypeDiagram(props: TypeDiagramProps) {
 
     return (
         <DesignDiagramContext {...ctx}>
-            {diagramEngine?.getModel() && diagramModel ?
-                <div style={{ width: '100%', height: '100%', overflow: 'hidden' }}>
-                    <DiagramContainer data-testid="type-diagram">
-                        <NavigationWrapperCanvasWidget
-                            diagramEngine={diagramEngine}
-                            className={styles.canvas}
-                            focusedNode={diagramEngine?.getModel()?.getNode(selectedDiagramNode)}
+            {diagramEngine?.getModel() && diagramModel ? (
+                <>
+                    {isFirstLevelFiltered && <FilteringInfoBanner />}
+                    <div style={{ width: '100%', height: '100%', overflow: 'hidden' }}>
+                        <DiagramContainer data-testid="type-diagram">
+                            <NavigationWrapperCanvasWidget
+                                diagramEngine={diagramEngine}
+                                className={styles.canvas}
+                                focusedNode={diagramEngine?.getModel()?.getNode(selectedDiagramNode)}
+                            />
+                        </DiagramContainer>
+                        <DiagramControls
+                            engine={diagramEngine}
+                            refreshDiagram={refreshDiagram}
+                            showProblemPanel={showProblemPanel}
                         />
-                    </DiagramContainer>
-                    <DiagramControls
-                        engine={diagramEngine}
-                        refreshDiagram={refreshDiagram}
-                        showProblemPanel={showProblemPanel}
-                    />
-                </div> :
+                    </div>
+                </>
+            ) : (
                 <ProgressRing sx={{ color: ThemeColors.PRIMARY }} />
-            }
+            )}
         </DesignDiagramContext>
     );
 }
diff --git a/workspaces/ballerina/type-diagram/src/components/FilteringInfoBanner/FilteringInfoBanner.tsx b/workspaces/ballerina/type-diagram/src/components/FilteringInfoBanner/FilteringInfoBanner.tsx
new file mode 100644
index 00000000000..c6e061393e6
--- /dev/null
+++ b/workspaces/ballerina/type-diagram/src/components/FilteringInfoBanner/FilteringInfoBanner.tsx
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { ThemeColors } from '@wso2/ui-toolkit';
+import styled from '@emotion/styled';
+
+const BannerContainer = styled.div`
+    background-color: ${ThemeColors.PRIMARY_CONTAINER};
+    border: 1px solid ${ThemeColors.PRIMARY};
+    border-radius: 6px;
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    position: relative;
+    z-index: 1000;
+`;
+
+const BannerTitle = styled.div`
+    font-weight: 600;
+    color: ${ThemeColors.ON_SURFACE};
+`;
+
+const BannerMessage = styled.div`
+    color: ${ThemeColors.ON_SURFACE_VARIANT};
+    line-height: 1.4;
+`;
+
+
+export function FilteringInfoBanner() {
+    return (
+        <BannerContainer>
+            <BannerTitle>
+                Showing First-Level Dependencies Only
+            </BannerTitle>
+            <BannerMessage>
+                This type has many related dependencies. To explore deeper dependencies, select the focused view from node's menu.
+            </BannerMessage>
+        </BannerContainer>
+    );
+}
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/AddRecordFieldButton/index.ts b/workspaces/ballerina/type-diagram/src/components/FilteringInfoBanner/index.ts
similarity index 91%
rename from workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/AddRecordFieldButton/index.ts
rename to workspaces/ballerina/type-diagram/src/components/FilteringInfoBanner/index.ts
index 123b775b288..688b8b653c1 100644
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/Node/commons/AddRecordFieldButton/index.ts
+++ b/workspaces/ballerina/type-diagram/src/components/FilteringInfoBanner/index.ts
@@ -15,4 +15,5 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-export {AddRecordFieldButton} from './AddRecordFieldButton'
+
+export { FilteringInfoBanner } from './FilteringInfoBanner';
diff --git a/workspaces/ballerina/type-diagram/src/components/common/DiagramContext/DiagramContext.tsx b/workspaces/ballerina/type-diagram/src/components/common/DiagramContext/DiagramContext.tsx
index 7939fea5c90..962fa9d4528 100644
--- a/workspaces/ballerina/type-diagram/src/components/common/DiagramContext/DiagramContext.tsx
+++ b/workspaces/ballerina/type-diagram/src/components/common/DiagramContext/DiagramContext.tsx
@@ -27,7 +27,9 @@ interface DiagramContextProps {
     selectedNodeId?: string;
     setSelectedNodeId?: (id: string) => void;
     onEditNode?: (id: string, isGraphqlRoot?: boolean) => void;
-    goToSource?: (node: Type) => void
+    goToSource?: (node: Type) => void,
+    onNodeDelete?: (typeId: string) => void;
+    verifyTypeDelete?: (typeId: string) => Promise<boolean>;
 }
 
 interface IDiagramContext {
@@ -38,6 +40,8 @@ interface IDiagramContext {
     setSelectedNodeId?: (id: string) => void;
     onEditNode?: (id: string, isGraphqlRoot?: boolean) => void;
     goToSource?: (node: Type) => void
+    onNodeDelete?: (typeId: string) => void;
+    verifyTypeDelete?: (typeId: string) => Promise<boolean>;
 }
 
 const defaultState: any = {};
@@ -52,7 +56,9 @@ export function DesignDiagramContext(props: DiagramContextProps) {
         selectedNodeId,
         setSelectedNodeId,
         onEditNode,
-        goToSource
+        goToSource,
+        onNodeDelete,
+        verifyTypeDelete
     } = props;
 
     let context: IDiagramContext = {
@@ -62,7 +68,9 @@ export function DesignDiagramContext(props: DiagramContextProps) {
         selectedNodeId,
         setSelectedNodeId,
         onEditNode,
-        goToSource
+        goToSource,
+        onNodeDelete,
+        verifyTypeDelete
     }
 
     return (
diff --git a/workspaces/ballerina/type-diagram/src/components/entity-relationship/EntityNode/EntityHead/EntityHead.tsx b/workspaces/ballerina/type-diagram/src/components/entity-relationship/EntityNode/EntityHead/EntityHead.tsx
index 8678eb24aee..d25e8ed122e 100644
--- a/workspaces/ballerina/type-diagram/src/components/entity-relationship/EntityNode/EntityHead/EntityHead.tsx
+++ b/workspaces/ballerina/type-diagram/src/components/entity-relationship/EntityNode/EntityHead/EntityHead.tsx
@@ -24,9 +24,8 @@ import { EntityHead, EntityName } from '../styles';
 import { CtrlClickGo2Source } from '../../../common/CtrlClickHandler/CtrlClickGo2Source';
 import { DiagramContext } from '../../../common';
 import styled from '@emotion/styled';
-import { Button, Item, Menu, MenuItem, Popover, ThemeColors } from '@wso2/ui-toolkit';
+import { Button, Icon, Confirm, Item, Menu, MenuItem, Popover, ThemeColors } from '@wso2/ui-toolkit';
 import { MoreVertIcon } from '../../../../resources';
-import { GraphQLIcon } from '../../../../resources/assets/icons/GraphqlIcon';
 
 interface ServiceHeadProps {
     engine: DiagramEngine;
@@ -38,11 +37,6 @@ const MenuButton = styled(Button)`
     border-radius: 5px;
 `;
 
-// const EditIconContainer = styled.div`
-//     z-index: 1000;
-//     cursor: pointer;
-// `;
-
 const HeaderButtonsContainer = styled.div`
     display: flex;
     flex-direction: row;
@@ -81,15 +75,36 @@ const ImportedLabel = styled.span`
     white-space: nowrap;
 `;
 
+const GraphqlIconContainer = styled.div`
+    margin-right: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 20px;
+`;
+
+interface Origin {
+    vertical: "top" | "center" | "bottom";
+    horizontal: "left" | "center" | "right";
+}
+
 export function EntityHeadWidget(props: ServiceHeadProps) {
     const { engine, node, isSelected } = props;
-    const { setFocusedNodeId, onEditNode, goToSource } = useContext(DiagramContext);
+    const { setFocusedNodeId, onEditNode, goToSource, onNodeDelete, verifyTypeDelete } = useContext(DiagramContext);
 
     const displayName: string = node.getID()?.slice(node.getID()?.lastIndexOf(':') + 1);
     const isImported = !node?.entityObject?.editable;
 
     const [anchorEl, setAnchorEl] = useState<HTMLElement | SVGSVGElement>(null);
     const isMenuOpen = Boolean(anchorEl);
+    const [isConfirmOpen, setIsConfirmOpen] = useState(false);
+    const [confirmEl, setConfirmEl] = React.useState<HTMLElement | SVGSVGElement | null>(null);
+    const [anchorOrigin, setAnchorOrigin] = useState<Origin>({ vertical: "bottom", horizontal: "left" });
+    const [transformOrigin, setTransformOrigin] = useState<Origin>({ vertical: "top", horizontal: "right" });
+
+    const [confirmMessage, setConfirmMessage] = useState<string>("Are you sure you want to delete this?");
+    const [isVerifyingDelete, setIsVerifyingDelete] = useState(false);
 
     const handleOnMenuClick = (event: React.MouseEvent<HTMLElement | SVGSVGElement>) => {
         setAnchorEl(event.currentTarget);
@@ -106,6 +121,13 @@ export function EntityHeadWidget(props: ServiceHeadProps) {
         setAnchorEl(null);
     };
 
+    const onNodeDeleteWithConfirm = async () => {
+        if (node?.entityObject?.editable && onNodeDelete) {
+            onNodeDelete(node.getID());
+        }
+        setAnchorEl(null);
+    };
+
     const onGoToSource = () => {
         goToSource(node.entityObject);
         setAnchorEl(null);
@@ -116,6 +138,50 @@ export function EntityHeadWidget(props: ServiceHeadProps) {
         setAnchorEl(null);
     }
 
+    // Keep this sync to satisfy Menu Item's onClick: () => void
+    const handleDeleteClick = () => {
+        const idLabel = node.getID();
+
+        // Position the confirm near the menu button
+        if (anchorEl) {
+            const rect = anchorEl.getBoundingClientRect();
+            const spaceBelow = window.innerHeight - rect.bottom;
+            const spaceAbove = rect.top;
+
+            if (spaceBelow < 200 && spaceAbove > 200) {
+                setAnchorOrigin({ vertical: "top", horizontal: "left" });
+                setTransformOrigin({ vertical: "bottom", horizontal: "right" });
+            } else {
+                setAnchorOrigin({ vertical: "bottom", horizontal: "left" });
+                setTransformOrigin({ vertical: "top", horizontal: "right" });
+            }
+            setConfirmEl(anchorEl);
+        }
+        setAnchorEl(null); // close menu
+
+        // Open confirm immediately in "verifying" mode
+        setIsVerifyingDelete(true);
+        setConfirmMessage("Checking usages...");
+        setIsConfirmOpen(true);
+
+        // Verify asynchronously and update the message
+        verifyTypeDelete(idLabel)
+            .then((canDelete) => {
+                setConfirmMessage(
+                    canDelete
+                        ? `Are you sure you want to delete ${idLabel}?`
+                        : `${idLabel} has usages. Deleting it may cause errors. Are you sure you want to proceed?`
+                );
+            })
+            .catch(() => {
+                setIsConfirmOpen(false);
+                setConfirmEl(null);
+            })
+            .finally(() => {
+                setIsVerifyingDelete(false);
+            });
+    };
+
     const menuItems: Item[] = [
         ...(node?.entityObject?.editable ? [
             {
@@ -124,20 +190,36 @@ export function EntityHeadWidget(props: ServiceHeadProps) {
                 onClick: () => onNodeEdit(),
             },
             {
-                id: "goToSource", 
-                label: "Source", 
+                id: "goToSource",
+                label: "Source",
                 onClick: () => onGoToSource()
-            }
+            },
+            ...(!node.isGraphqlRoot ? [{
+                id: "delete",
+                label: "Delete",
+                onClick: () => handleDeleteClick()
+            }] : []),
         ] : []),
         {
-            id: "focusView", 
-            label: "Focused View", 
+            id: "focusView",
+            label: "Focused View",
             onClick: () => onFocusedView()
         }
     ];
 
-    const isClickable = true;
+    const handleConfirm = (state: boolean) => {
+        // Block confirm while verifying
+        if (isVerifyingDelete) {
+            return;
+        }
+        if (state) {
+            onNodeDeleteWithConfirm(); // Call the actual delete function
+        }
+        setIsConfirmOpen(false); // Close the confirmation dialog
+        setConfirmEl(null);
+    };
 
+    const isClickable = true;
 
     return (
         <CtrlClickGo2Source node={node.entityObject}>
@@ -152,9 +234,9 @@ export function EntityHeadWidget(props: ServiceHeadProps) {
                 <HeaderWrapper>
                     <EntityNameContainer>
                         {node.isGraphqlRoot && (
-                            <div style={{ marginRight: "5px", marginTop: "2px" }}>
-                                <GraphQLIcon />
-                            </div>
+                            <GraphqlIconContainer>
+                                <Icon name="bi-graphql" iconSx={{ color: "#e535ab", fontSize: "20px" }} />
+                            </GraphqlIconContainer>
                         )}
                         <EntityName
                             isClickable={isClickable && !isImported}
@@ -170,20 +252,6 @@ export function EntityHeadWidget(props: ServiceHeadProps) {
                         )}
                     </EntityNameContainer>
                     <HeaderButtonsContainer>
-                        {/* {selectedNodeId === node.getID() && (
-                            <EditIconContainer>
-                                <Button
-                                    appearance="icon"
-                                    tooltip="Edit Type">
-                                    <Icon
-                                        name="editIcon"
-                                        sx={{ height: "14px", width: "14px" }}
-                                        onClick={onNodeEdit}
-                                        iconSx={{ color: ThemeColors.PRIMARY }}
-                                    />
-                                </Button>
-                            </EditIconContainer>
-                        )} */}
                         <MenuButton appearance="icon" onClick={handleOnMenuClick} data-testid={`type-node-${displayName}-menu`}>
                             <MoreVertIcon />
                         </MenuButton>
@@ -208,6 +276,16 @@ export function EntityHeadWidget(props: ServiceHeadProps) {
                         ))}
                     </Menu>
                 </Popover>
+                <Confirm
+                    isOpen={isConfirmOpen}
+                    onConfirm={handleConfirm}
+                    confirmText={isVerifyingDelete ? "Verifying the possibility to delete the type" : "Delete"}
+                    message={confirmMessage}
+                    anchorEl={confirmEl}
+                    anchorOrigin={anchorOrigin}
+                    transformOrigin={transformOrigin}
+                    sx={{ zIndex: 3002 }}
+                />
             </EntityHead>
         </CtrlClickGo2Source>
     )
diff --git a/workspaces/ballerina/type-diagram/src/resources/assets/icons/GraphqlIcon.tsx b/workspaces/ballerina/type-diagram/src/resources/assets/icons/GraphqlIcon.tsx
deleted file mode 100644
index d789411636f..00000000000
--- a/workspaces/ballerina/type-diagram/src/resources/assets/icons/GraphqlIcon.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React from 'react';
-
-import { ThemeColors } from "@wso2/ui-toolkit";
-
-export function GraphQLIcon() {
-    return (
-        <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 29.999 30" fill={ThemeColors.PRIMARY}>
-            <path d="M4.08 22.864l-1.1-.636L15.248.98l1.1.636z"/>
-            <path d="M2.727 20.53h24.538v1.272H2.727z"/>
-            <path d="M15.486 28.332L3.213 21.246l.636-1.1 12.273 7.086zm10.662-18.47L13.874 2.777l.636-1.1 12.273 7.086z"/>
-            <path d="M3.852 9.858l-.636-1.1L15.5 1.67l.636 1.1z"/>
-            <path d="M25.922 22.864l-12.27-21.25 1.1-.636 12.27 21.25zM3.7 7.914h1.272v14.172H3.7zm21.328 0H26.3v14.172h-1.272z"/>
-            <path d="M15.27 27.793l-.555-.962 10.675-6.163.555.962z"/>
-            <path d="M27.985 22.5a2.68 2.68 0 0 1-3.654.981 2.68 2.68 0 0 1-.981-3.654 2.68 2.68 0 0 1 3.654-.981c1.287.743 1.724 2.375.98 3.654M6.642 10.174a2.68 2.68 0 0 1-3.654.981A2.68 2.68 0 0 1 2.007 7.5a2.68 2.68 0 0 1 3.654-.981 2.68 2.68 0 0 1 .981 3.654M2.015 22.5a2.68 2.68 0 0 1 .981-3.654 2.68 2.68 0 0 1 3.654.981 2.68 2.68 0 0 1-.981 3.654c-1.287.735-2.92.3-3.654-.98m21.343-12.326a2.68 2.68 0 0 1 .981-3.654 2.68 2.68 0 0 1 3.654.981 2.68 2.68 0 0 1-.981 3.654 2.68 2.68 0 0 1-3.654-.981M15 30a2.674 2.674 0 1 1 2.674-2.673A2.68 2.68 0 0 1 15 30m0-24.652a2.67 2.67 0 0 1-2.674-2.674 2.67 2.67 0 1 1 5.347 0A2.67 2.67 0 0 1 15 5.347"/>
-        </svg>
-    );
-}
\ No newline at end of file
diff --git a/workspaces/ballerina/type-diagram/src/utils/model-mapper/entityModelMapper.ts b/workspaces/ballerina/type-diagram/src/utils/model-mapper/entityModelMapper.ts
index 01ebf591024..1d197bd8759 100644
--- a/workspaces/ballerina/type-diagram/src/utils/model-mapper/entityModelMapper.ts
+++ b/workspaces/ballerina/type-diagram/src/utils/model-mapper/entityModelMapper.ts
@@ -19,6 +19,7 @@
 import { Member, Type, TypeFunctionModel, TypeNodeKind } from '@wso2/ballerina-core';
 import { DiagramModel } from '@projectstorm/react-diagrams';
 import { EntityLinkModel, EntityModel, EntityPortModel } from '../../components/entity-relationship';
+import { ModelResult } from '../../Diagram';
 
 function createEntityNodes(components: Type[], selectedEntityId?: string, isGraphqlRoot?: boolean): Map<string, EntityModel> {
     let entityNodes = new Map<string, EntityModel>();
@@ -51,7 +52,11 @@ function createEntityLinks(entityNodes: Map<string, EntityModel>): EntityLinkMod
     entityNodes.forEach((sourceNode) => {
         const members = isNodeClass(sourceNode.entityObject?.codedata?.node) ? sourceNode.entityObject.functions : sourceNode.entityObject.members;
         if (members) {
-            Object.entries(members).forEach(([_, member]: [string, Member | TypeFunctionModel]) => {
+            const memberEntries = Array.isArray(members) 
+                ? members.map((member, index) => [index.toString(), member] as [string, Member | TypeFunctionModel])
+                : Object.entries(members);
+                
+            memberEntries.forEach(([_, member]: [string, Member | TypeFunctionModel]) => {
                 const refs = getRefs(member);
 
                 if (refs.length > 0) {
@@ -107,15 +112,26 @@ export function graphqlModeller(rootService: Type, refs: Type[]): DiagramModel {
     return model;
 }
 
-export function entityModeller(components: Type[], selectedEntityId?: string): DiagramModel {
+const MAX_TYPES_FOR_FOCUSED_VIEW= 60;
+
+export function entityModeller(components: Type[], selectedEntityId?: string): ModelResult {
     let filteredComponents = components;
+    let firstLevelDependenciesFiltered = false;
 
-    // If selectedEntityId is provided, filter for related entities
     if (selectedEntityId) {
         const relatedEntities = new Set<string>();
         relatedEntities.add(selectedEntityId);
         findRelatedEntities(selectedEntityId, components, relatedEntities);
         filteredComponents = components.filter(comp => relatedEntities.has(comp.name));
+        console.log(`Filtered to ${filteredComponents.length} related nodes for selected entity '${selectedEntityId}'`);
+        
+        if (filteredComponents.length > MAX_TYPES_FOR_FOCUSED_VIEW) {
+            // show only the selected entity + first level dependencies
+            const firstLevelDeps = findFirstLevelDependencies(selectedEntityId, components);
+            filteredComponents = components.filter(comp => firstLevelDeps.has(comp.name));
+            firstLevelDependenciesFiltered = true;
+            console.log(`Filtered to first-level dependencies: ${filteredComponents.length} components`);
+        }
     }
 
     // Create nodes and links
@@ -124,7 +140,35 @@ export function entityModeller(components: Type[], selectedEntityId?: string): D
 
     let model = new DiagramModel();
     model.addAll(...Array.from(entityNodes.values()), ...entityLinks);
-    return model;
+    return {
+        model,
+        isFirstLevelDependenciesFiltered: firstLevelDependenciesFiltered
+    };
+}
+
+/**
+ * Finds only the first-level dependencies of a selected entity
+ */
+function findFirstLevelDependencies(componentId: string, components: Type[]): Set<string> {
+    const firstLevelDeps = new Set<string>();
+    firstLevelDeps.add(componentId);
+    
+    const component = components.find(comp => comp.name === componentId);
+    if (!component) return firstLevelDeps;
+
+    const members = isNodeClass(component?.codedata?.node) ? component.functions : component.members;
+
+    if (members) {
+        const memberList = Array.isArray(members) ? members : Object.values(members);
+        memberList.forEach((member: Member | TypeFunctionModel) => {
+            const refs = getRefs(member);
+            refs.forEach(ref => {
+                firstLevelDeps.add(ref);
+            });
+        });
+    }
+    
+    return firstLevelDeps;
 }
 
 function findRelatedEntities(componentId: string, components: Type[], relatedEntities: Set<string>) {
@@ -133,16 +177,18 @@ function findRelatedEntities(componentId: string, components: Type[], relatedEnt
 
     const members = isNodeClass(component?.codedata?.node) ? component.functions : component.members;
 
-    Object.values(members).forEach(member => {
-        if (member.refs) {
-            member.refs.forEach(ref => {
+    if (members) {
+        const memberList = Array.isArray(members) ? members : Object.values(members);
+        memberList.forEach((member: Member | TypeFunctionModel) => {
+            const refs = getRefs(member);
+            refs.forEach(ref => {
                 if (!relatedEntities.has(ref)) {
                     relatedEntities.add(ref);
                     findRelatedEntities(ref, components, relatedEntities);
                 }
             });
-        }
-    });
+        });
+    }
 }
 
 function createLinks(sourcePort: EntityPortModel, targetPort: EntityPortModel, link: EntityLinkModel): EntityLinkModel {
diff --git a/workspaces/ballerina/type-diagram/webpack.config.js b/workspaces/ballerina/type-diagram/webpack.config.js
index 0066dbf89bf..5901792162c 100644
--- a/workspaces/ballerina/type-diagram/webpack.config.js
+++ b/workspaces/ballerina/type-diagram/webpack.config.js
@@ -3,7 +3,7 @@ const webpack = require('webpack');
 module.exports = {
   entry: "./src/index.tsx",
   target: "web",
-  devtool: "source-map",
+  devtool: !process.env.CI ? "source-map" : undefined,
   output: {
     path: path.resolve(__dirname, "build"),
     filename: "PersistDiagram.js",
diff --git a/workspaces/ballerina/type-editor/src/RecordFromJson/RecordFromJson.tsx b/workspaces/ballerina/type-editor/src/RecordFromJson/RecordFromJson.tsx
index 1d059731513..1b4c53d8714 100644
--- a/workspaces/ballerina/type-editor/src/RecordFromJson/RecordFromJson.tsx
+++ b/workspaces/ballerina/type-editor/src/RecordFromJson/RecordFromJson.tsx
@@ -22,7 +22,7 @@ import styled from '@emotion/styled';
 import { FileSelect } from '../style';
 import { FileSelector } from '../components/FileSelector';
 import { BallerinaRpcClient } from '@wso2/ballerina-rpc-client';
-import { JsonToTypeResponse, Type } from '@wso2/ballerina-core';
+import { EVENT_TYPE, Type, UpdateTypesResponse, JsonToTypeResponse } from '@wso2/ballerina-core';
 import { set } from 'lodash';
 
 interface RecordFromJsonProps {
@@ -100,10 +100,14 @@ export const RecordFromJson = (props: RecordFromJsonProps) => {
 
 
             if (otherRecords.length > 0) {
-                await rpcClient.getBIDiagramRpcClient().updateTypes({
+                const response: UpdateTypesResponse = await rpcClient.getBIDiagramRpcClient().updateTypes({
                     filePath: 'types.bal',
                     types: otherRecords
                 });
+
+                await props.rpcClient.getVisualizerRpcClient().openView(
+                    { type: EVENT_TYPE.UPDATE_PROJECT_LOCATION, location: { addType: false } }
+                );
             }
 
             if (record) {
diff --git a/workspaces/ballerina/type-editor/src/RecordFromXml/RecordFromXml.tsx b/workspaces/ballerina/type-editor/src/RecordFromXml/RecordFromXml.tsx
index d36a1015984..8827542a080 100644
--- a/workspaces/ballerina/type-editor/src/RecordFromXml/RecordFromXml.tsx
+++ b/workspaces/ballerina/type-editor/src/RecordFromXml/RecordFromXml.tsx
@@ -21,7 +21,7 @@ import { Button, SidePanelBody, TextArea, Typography } from '@wso2/ui-toolkit';
 import { BallerinaRpcClient } from '@wso2/ballerina-rpc-client';
 import { FileSelect } from '../style';
 import { FileSelector } from '../components/FileSelector';
-import { NOT_SUPPORTED_TYPE, Type, TypeDataWithReferences } from '@wso2/ballerina-core';
+import { EVENT_TYPE, Type, TypeDataWithReferences } from '@wso2/ballerina-core';
 import { XMLToRecord } from '@wso2/ballerina-core';
 import styled from '@emotion/styled';
 import { set } from 'lodash';
@@ -102,6 +102,10 @@ export const RecordFromXml = (props: RecordFromXmlProps) => {
                     filePath: 'types.bal',
                     types: otherRecords
                 });
+
+                await props.rpcClient.getVisualizerRpcClient().openView(
+                    { type: EVENT_TYPE.UPDATE_PROJECT_LOCATION, location: { addType: false } }
+                );
             }
 
             if (lastRecord) {
diff --git a/workspaces/ballerina/type-editor/src/TypeEditor/AdvancedOptions.tsx b/workspaces/ballerina/type-editor/src/TypeEditor/AdvancedOptions.tsx
index e1de7bba339..d7869842e81 100644
--- a/workspaces/ballerina/type-editor/src/TypeEditor/AdvancedOptions.tsx
+++ b/workspaces/ballerina/type-editor/src/TypeEditor/AdvancedOptions.tsx
@@ -7,6 +7,14 @@ interface AdvancedOptionsProps {
     onChange: (type: Type) => void;
 }
 
+enum TypeNodeKind {
+    RECORD = "RECORD",
+    ENUM = "ENUM",
+    CLASS = "CLASS",
+    UNION = "UNION",
+    ARRAY = "ARRAY"
+}
+
 export function AdvancedOptions({ type, onChange }: AdvancedOptionsProps) {
     const [isExpanded, setIsExpanded] = useState<boolean>(false);
 
@@ -28,14 +36,34 @@ export function AdvancedOptions({ type, onChange }: AdvancedOptionsProps) {
                 <span>Advanced Options</span>
             </div>
             {isExpanded && (
-                <CheckBox
+                <>
+                {type.codedata.node===TypeNodeKind.RECORD && <CheckBox
                     sx={{ border: 'none', padding: '5px' }}
                     label="Allow Additional Fields"
                     checked={type?.allowAdditionalFields === true}
                     onChange={(checked: boolean) => {
                         onChange({ ...type, allowAdditionalFields: checked });
                     }}
+                />}
+                <CheckBox
+                    sx={{ border: 'none', padding: '5px' }}
+                    label="Is Readonly Type"
+                    checked={type?.properties?.isReadOnly?.value === "true"}
+                    onChange={(checked: boolean) => {
+                        // Match the same pattern used in the working checkbox
+                        onChange({
+                            ...type,
+                            properties: {
+                                ...type.properties,
+                                isReadOnly: {
+                                    ...type.properties?.isReadOnly,
+                                    value: checked ? "true" : "false"
+                                }
+                            }
+                        });
+                    }}
                 />
+                </>
             )}
         </div>
     );
diff --git a/workspaces/ballerina/type-editor/src/TypeEditor/ArrayEditor.tsx b/workspaces/ballerina/type-editor/src/TypeEditor/ArrayEditor.tsx
index ef6e0f187e4..b21948e993c 100644
--- a/workspaces/ballerina/type-editor/src/TypeEditor/ArrayEditor.tsx
+++ b/workspaces/ballerina/type-editor/src/TypeEditor/ArrayEditor.tsx
@@ -25,6 +25,7 @@ import { TextField } from "@wso2/ui-toolkit/lib/components/TextField/TextField";
 interface ArrayEditorProps {
     type: Type;
     onChange: (type: Type) => void;
+    onValidationError: (isError: boolean) => void;
 }
 
 namespace S {
@@ -71,7 +72,7 @@ export function ArrayEditor(props: ArrayEditorProps) {
     console.log("ARRAY EDITOR PROPS", props.type);
     const newMember: Member = {
         kind: "TYPE",
-        type: "string",
+        type: "",
         refs: [],
         name: ""
     };
@@ -133,6 +134,8 @@ export function ArrayEditor(props: ArrayEditorProps) {
                         sx={{ flexGrow: 1 }}
                         label="Type of the Array"
                         required={true}
+                        autoFocus={true}
+                        onValidationError={props.onValidationError}
                         rootType={props.type}
                     />
                     <TextField
diff --git a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/FromClauseBindingPatternFindingVisitor.ts b/workspaces/ballerina/type-editor/src/TypeEditor/Contexts/TypeEditorContext.ts
similarity index 57%
rename from workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/FromClauseBindingPatternFindingVisitor.ts
rename to workspaces/ballerina/type-editor/src/TypeEditor/Contexts/TypeEditorContext.ts
index 06cddf9f36d..bbaf1e15f09 100644
--- a/workspaces/ballerina/data-mapper-view/src/components/Diagram/visitors/FromClauseBindingPatternFindingVisitor.ts
+++ b/workspaces/ballerina/type-editor/src/TypeEditor/Contexts/TypeEditorContext.ts
@@ -15,24 +15,27 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import {
-    FromClause,
-    STNode,
-    Visitor
-} from "@wso2/syntax-tree";
 
-export class FromClauseBindingPatternFindingVisitor implements Visitor {
-    private readonly bindingPatterns: STNode[];
+import { Type } from "@wso2/ballerina-core";
+import { createContext } from "react";
 
-    constructor() {
-        this.bindingPatterns = []
-    }
-
-    public beginVisitFromClause(node: FromClause) {
-        this.bindingPatterns.push(node.typedBindingPattern.bindingPattern);
-    }
+export interface StackItem {
+    type: Type;
+    isDirty: boolean;
+}
 
-    public getBindingPatterns(){
-        return this.bindingPatterns;
-    }
+export interface EditorContextType {
+  stack: StackItem[];
+  push: (item: StackItem) => void;
+  pop: () => void;
+  peek: () => StackItem | null;
+  replaceTop: (item: StackItem) => void;
 }
+
+export const EditorContext = createContext<EditorContextType>({
+  stack: [],
+  push: () => {},
+  pop: () => {},
+  peek: () => null,
+  replaceTop: (item: StackItem) => {}
+});
diff --git a/workspaces/ballerina/type-editor/src/TypeEditor/FieldEditor.tsx b/workspaces/ballerina/type-editor/src/TypeEditor/FieldEditor.tsx
index 52697b4fa71..d159cc4226e 100644
--- a/workspaces/ballerina/type-editor/src/TypeEditor/FieldEditor.tsx
+++ b/workspaces/ballerina/type-editor/src/TypeEditor/FieldEditor.tsx
@@ -142,6 +142,7 @@ export const FieldEditor: React.FC<FieldEditorProps> = (props) => {
         <>
             <div style={{ display: 'flex', gap: '8px', alignItems: 'start' }}>
                 <ExpandIconButton
+                    data-testid={`field-expand-btn`}
                     appearance="icon"
                     onClick={() => setPanelOpened(!panelOpened)}
                 >
@@ -183,6 +184,19 @@ export const FieldEditor: React.FC<FieldEditorProps> = (props) => {
                 <CollapsibleSection>
                     <TextField label='Default Value' value={member.defaultValue} onChange={handleMemberDefaultValueChange} style={{ width: '180px' }} />
                     <TextField label='Description' value={member.docs} onChange={handleDescriptionChange} style={{ width: '180px' }} />
+                    <CheckBox
+                        sx={{ border: 'none', padding: '5px' }}
+                        label="Readonly"
+                        checked={member.readonly}
+                        onChange={(checked: boolean) => {
+                            // Match the same pattern used in the working checkbox
+                            onChange({
+                                ...member,
+                                readonly: checked 
+                                }
+                            );
+                        }}
+                    />
                 </CollapsibleSection>
             )}
             {isRecord(member.type) && typeof member.type !== 'string' && (
diff --git a/workspaces/ballerina/type-editor/src/TypeEditor/Tabs/TypeCreatorTab.tsx b/workspaces/ballerina/type-editor/src/TypeEditor/Tabs/TypeCreatorTab.tsx
index 798eaf3c3a8..b216226c680 100644
--- a/workspaces/ballerina/type-editor/src/TypeEditor/Tabs/TypeCreatorTab.tsx
+++ b/workspaces/ballerina/type-editor/src/TypeEditor/Tabs/TypeCreatorTab.tsx
@@ -16,7 +16,7 @@
  * under the License.
  */
 
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { TextField, Dropdown, Button, ProgressRing, Icon, Typography, ThemeColors } from "@wso2/ui-toolkit";
 import styled from "@emotion/styled";
 import { useRpcContext } from "@wso2/ballerina-rpc-client";
@@ -29,6 +29,7 @@ import { AdvancedOptions } from "../AdvancedOptions";
 import { ArrayEditor } from "../ArrayEditor";
 import { debounce } from "lodash";
 import { URI, Utils } from "vscode-uri";
+import { EditorContext } from "../Contexts/TypeEditorContext";
 
 const CategoryRow = styled.div<{ showBorder?: boolean }>`
     display: flex;
@@ -153,6 +154,8 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
         return TypeKind.RECORD;
     });
 
+    const { replaceTop } = useContext(EditorContext);
+
     const [isNewType, setIsNewType] = useState<boolean>(newType);
     const [isTypeNameValid, setIsTypeNameValid] = useState<boolean>(true);
     const [onValidationError, setOnValidationError] = useState<boolean>(false);
@@ -167,7 +170,7 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
 
     useEffect(() => {
         if (editingType) {
-            setType(editingType);
+            handleSetType(editingType);
             validateTypeName(editingType.name);
 
             const nodeKind = editingType.codedata.node;
@@ -195,6 +198,14 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
         setIsNewType(newType);
     }, [editingType?.name, newType]);
 
+    const handleSetType = (type: Type | ((currentType: any) => any)) => {
+        replaceTop({
+            type: typeof type === "function" ? type(type) : type,
+            isDirty: true
+        })
+        setType(type)
+    }
+
 
     const handleTypeKindChange = (value: string) => {
         // Convert display name back to internal TypeKind
@@ -221,7 +232,7 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
         const typeValue = selectedKind === TypeKind.CLASS ? "CLASS" : selectedKind.toUpperCase();
 
         // Always create a new type with the selected kind
-        setType((currentType) => ({
+        handleSetType((currentType) => ({
             ...currentType!,
             kind: typeValue,
             members: [] as Member[],
@@ -306,8 +317,7 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
                     }
                 }
             };
-
-            setType(renamedType);
+            handleSetType(renamedType);
             onTypeChange(renamedType, true);
             cancelEditing();
         } catch (error) {
@@ -397,7 +407,7 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
     }
 
     const handleOnTypeNameChange = (value: string) => {
-        setType({ ...type, name: value });
+        handleSetType({ ...type, name: value });
         validateTypeName(value);
     }
 
@@ -412,46 +422,53 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
                         <RecordEditor
                             type={type}
                             isAnonymous={false}
-                            onChange={setType}
+                            onChange={handleSetType}
                             newType={newType}
                             isGraphql={isGraphql}
                             onValidationError={handleValidationError}
                         />
-                        <AdvancedOptions type={type} onChange={setType} />
+                        <AdvancedOptions type={type} onChange={handleSetType} />
                     </>
                 );
             case TypeKind.ENUM:
                 return (
                     <EnumEditor
                         type={type}
-                        onChange={setType}
+                        onChange={handleSetType}
                         onValidationError={handleValidationError}
                     />
                 );
             case TypeKind.UNION:
                 return (
+                    <>
                     <UnionEditor
                         type={type}
-                        onChange={setType}
+                        onChange={handleSetType}
                         rpcClient={rpcClient}
                         onValidationError={handleValidationError}
                     />
+                    <AdvancedOptions type={type} onChange={setType} />
+                    </>
                 );
             case TypeKind.CLASS:
                 return (
                     <ClassEditor
                         type={type}
                         isGraphql={isGraphql}
-                        onChange={setType}
+                        onChange={handleSetType}
                         onValidationError={handleValidationError}
                     />
                 );
             case TypeKind.ARRAY:
                 return (
+                    <>
                     <ArrayEditor
                         type={type}
-                        onChange={setType}
+                        onChange={handleSetType}
+                        onValidationError={handleValidationError}
                     />
+                    <AdvancedOptions type={type} onChange={setType} />
+                    </>
                 );
             default:
                 return <div>Editor for {selectedTypeKind} type is not implemented yet</div>;
@@ -474,7 +491,7 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
                         onChange={(e) => handleTypeKindChange(e.target.value)}
                     />
                 )}
-                {!isNewType && !isEditing && !type.properties["name"].editable && (
+                {!isNewType && !isEditing && !type.properties["name"]?.editable && (
                     <InputWrapper>
                         <TextFieldWrapper>
                             <TextField
@@ -485,7 +502,7 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
                                 label={type?.properties["name"]?.metadata?.label}
                                 required={!type?.properties["name"]?.optional}
                                 description={type?.properties["name"]?.metadata?.description}
-                                readOnly={!type.properties["name"].editable}
+                                readOnly={!type.properties["name"]?.editable}
                             />
                         </TextFieldWrapper>
                         <EditButton appearance="icon" onClick={startEditing} tooltip="Rename">
@@ -555,7 +572,9 @@ export function TypeCreatorTab(props: TypeCreatorTabProps) {
                 )}
             </CategoryRow>
 
-            {renderEditor()}
+           <div style={{overflow: 'auto', maxHeight: '300px'}}>
+             {renderEditor()}
+           </div>
             <Footer>
                 <Button
                     data-testid="type-create-save"
diff --git a/workspaces/ballerina/type-editor/src/TypeEditor/TypeEditor.tsx b/workspaces/ballerina/type-editor/src/TypeEditor/TypeEditor.tsx
index 25a654aa5fa..9ee05978ec2 100644
--- a/workspaces/ballerina/type-editor/src/TypeEditor/TypeEditor.tsx
+++ b/workspaces/ballerina/type-editor/src/TypeEditor/TypeEditor.tsx
@@ -20,7 +20,7 @@ import React, { useState } from "react";
 import { SidePanelBody, ProgressRing, Icon, TabPanel } from "@wso2/ui-toolkit";
 import styled from "@emotion/styled";
 import { BallerinaRpcClient } from "@wso2/ballerina-rpc-client";
-import { Member, Type, TypeNodeKind, Imports, AddImportItemResponse } from "@wso2/ballerina-core";
+import { Member, Type, TypeNodeKind, Imports, AddImportItemResponse, EVENT_TYPE, UpdateTypeResponse } from "@wso2/ballerina-core";
 import { TypeHelperCategory, TypeHelperItem, TypeHelperOperator } from "../TypeHelper";
 import { TypeHelperContext } from "../Context";
 import { ImportTab } from "./Tabs/ImportTab";
@@ -39,6 +39,7 @@ interface TypeEditorProps {
     imports?: Imports;
     rpcClient: BallerinaRpcClient;
     onTypeChange: (type: Type, rename?: boolean) => void;
+    onSaveType: (type: Type) => void;
     newType: boolean;
     newTypeValue?: string;
     isGraphql?: boolean;
@@ -100,16 +101,23 @@ export function TypeEditor(props: TypeEditorProps) {
         // IF type nodeKind is CLASS then we call graphqlEndpoint
         // TODO: for TypeDiagram we need to give a generic class creation
         if (type.codedata.node === "CLASS") {
-            const response = await props.rpcClient
+            const response: UpdateTypeResponse = await props.rpcClient
                 .getBIDiagramRpcClient()
                 .createGraphqlClassType({ filePath: type.codedata?.lineRange?.fileName || 'types.bal', type, description: "" });
+            await props.rpcClient
+                .getVisualizerRpcClient()
+                .openView({ type: EVENT_TYPE.UPDATE_PROJECT_LOCATION, location: { identifier: response.name, addType: false } });
 
         } else {
-            const response = await props.rpcClient
+            const response: UpdateTypeResponse = await props.rpcClient
                 .getBIDiagramRpcClient()
                 .updateType({ filePath: type.codedata?.lineRange?.fileName || 'types.bal', type, description: "" });
+            await props.rpcClient
+                .getVisualizerRpcClient()
+                .openView({ type: EVENT_TYPE.UPDATE_PROJECT_LOCATION, location: { identifier: response.name, addType: false } });
         }
         props.onTypeChange(type);
+        props.onSaveType(type)
         setIsSaving(false);
     }
 
@@ -119,7 +127,7 @@ export function TypeEditor(props: TypeEditorProps) {
 
     return (
         <TypeHelperContext.Provider value={props.typeHelper}>
-            <S.Container data-testid="type-editor-container">
+            <S.Container style={{ height: '100%' }} data-testid="type-editor-container">
                 {!type ? (
                     <ProgressRing />
                 ) : newType ? (
@@ -148,7 +156,7 @@ export function TypeEditor(props: TypeEditorProps) {
                         onViewChange={handleTabChange}
                         childrenSx={{ padding: '10px' }}
                     >
-                        <div id="create-from-scratch" data-testid="create-from-scratch-tab">                           
+                        <div id="create-from-scratch" data-testid="create-from-scratch-tab">
                             <TypeCreatorTab
                                 onTypeChange={props.onTypeChange}
                                 editingType={type}
@@ -160,7 +168,7 @@ export function TypeEditor(props: TypeEditorProps) {
                                 setIsSaving={setIsSaving}
                             />
                         </div>
-                        <div id="import" data-testid="import-tab">                            
+                        <div id="import" data-testid="import-tab">
                             <ImportTab
                                 type={type}
                                 onTypeSave={onTypeSave}
@@ -170,7 +178,7 @@ export function TypeEditor(props: TypeEditorProps) {
                         </div>
                     </TabPanel>
                 ) : (
-                    <div style={{ padding: '10px' }} data-testid="type-editor-content">                        
+                    <div style={{ padding: '10px' }} data-testid="type-editor-content">
                         <TypeCreatorTab
                             onTypeChange={props.onTypeChange}
                             editingType={type}
diff --git a/workspaces/ballerina/type-editor/src/TypeHelper/ExpandableList.tsx b/workspaces/ballerina/type-editor/src/TypeHelper/ExpandableList.tsx
new file mode 100644
index 00000000000..b84e7a0ed86
--- /dev/null
+++ b/workspaces/ballerina/type-editor/src/TypeHelper/ExpandableList.tsx
@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { HorizontalListContainer, HorizontalListItem, HorizontalListItemLeftContent } from "./styles/HorizontalList"
+import React from "react";
+import styled from "@emotion/styled";
+
+
+type ExpandableListProps = {
+    children: React.ReactNode;
+    sx?: React.CSSProperties;
+};
+
+export const ExpandableList = ({ children, sx }: ExpandableListProps) => {
+    return (
+        <HorizontalListContainer style={sx}>
+            {children}
+        </HorizontalListContainer>
+    );
+};
+
+interface ExpandableListItemProps {
+    children: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    sx?: React.CSSProperties;
+}
+
+const Item = ({ children, onClick, sx }: ExpandableListItemProps) => {
+    return (
+        <HorizontalListItem onClick={onClick} style={sx} className="expandable-list-item">
+            <HorizontalListItemLeftContent>
+                {children}
+            </HorizontalListItemLeftContent>
+        </HorizontalListItem>
+    );
+};
+
+interface ExpandableListSectionProps {
+    children: React.ReactNode;
+    title: React.ReactNode;
+    level?: number;
+    sx?: React.CSSProperties;
+}
+
+
+const Section = ({ children, title, level = 0, sx }: ExpandableListSectionProps) => {
+    return (
+        <ExpandableListSection style={{ ...sx, display: 'flex', flexDirection: 'column' }}>
+            <ExpandableListSectionTitle>{title}</ExpandableListSectionTitle>
+            {children}
+        </ExpandableListSection>
+    );
+};
+
+
+
+
+ExpandableList.Item = Item;
+ExpandableList.Section = Section;
+
+export default ExpandableList;
+
+
+const ExpandableListSection = styled.div`
+      
+`;
+
+const ExpandableListSectionTitle = styled.span`
+    font-weight: 600;
+`;
diff --git a/workspaces/ballerina/type-editor/src/TypeHelper/TypeHelper.tsx b/workspaces/ballerina/type-editor/src/TypeHelper/TypeHelper.tsx
index b6c21e073ad..7f24545f086 100644
--- a/workspaces/ballerina/type-editor/src/TypeHelper/TypeHelper.tsx
+++ b/workspaces/ballerina/type-editor/src/TypeHelper/TypeHelper.tsx
@@ -20,15 +20,22 @@ import React, { useEffect, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import {
     Codicon,
+    Divider,
+    FormExpressionEditorRef,
     getIcon,
     HelperPane,
+    HelperPaneCustom,
     HelperPaneHeight,
+    SearchBox,
+    ThemeColors,
     Typography
 } from '@wso2/ui-toolkit';
 import { TypeHelperOperator } from '..';
 import { TypeHelperCategory, TypeHelperItem } from '.';
 import { TypeBrowser } from './TypeBrowser';
 import { getTypeCreateText, isTypePanelOpen } from './utils';
+import ExpandableList from './ExpandableList';
+import { ScrollableContainer, SlidingPane, SlidingPaneNavContainer, SlidingWindow } from '@wso2/ui-toolkit/lib/components/ExpressionEditor/components/Common/SlidingPane';
 
 /* Constants */
 const PANEL_TABS = {
@@ -57,6 +64,7 @@ type TypeHelperComponentProps = {
     onTypeCreate?: (typeName?: string) => void;
     onClose: () => void;
     onCloseCompletions?: () => void;
+    exprRef: React.RefObject<FormExpressionEditorRef>;
 };
 
 type StyleBase = {
@@ -128,6 +136,10 @@ namespace S {
     `;
 }
 
+const FunctionItemLabel = styled.span`
+    font-size: 13px;
+`;
+
 export const TypeHelperComponent = (props: TypeHelperComponentProps) => {
     const {
         open,
@@ -148,13 +160,17 @@ export const TypeHelperComponent = (props: TypeHelperComponentProps) => {
         onTypeItemClick,
         onTypeCreate,
         onClose,
-        onCloseCompletions
+        onCloseCompletions,
+        exprRef
     } = props;
     const [searchValue, setSearchValue] = useState<string>('');
     const [isTypeBrowserOpen, setIsTypeBrowserOpen] = useState<boolean>(false);
     const [activePanelIndex, setActivePanelIndex] = useState<number>(PANEL_TABS.TYPES);
     const newTypeName = useRef<string>('');
 
+    const typeFieldRef = exprRef?.current?.inputElement?.getBoundingClientRect();
+
+    //TODO: use this after operator part is implemented
     const handleOperatorClick = (operator: TypeHelperOperator) => {
         if (operator.insertType === 'global') {
             if (operator.insertLocation === 'start') {
@@ -173,8 +189,8 @@ export const TypeHelperComponent = (props: TypeHelperComponentProps) => {
                 const newCursorPosition = currentCursorPosition + suffixMatch[0].length;
                 onChange(
                     currentType.slice(0, newCursorPosition) +
-                        operator.insertText +
-                        currentType.slice(newCursorPosition),
+                    operator.insertText +
+                    currentType.slice(newCursorPosition),
                     newCursorPosition + operator.insertText.length
                 );
             }
@@ -182,7 +198,9 @@ export const TypeHelperComponent = (props: TypeHelperComponentProps) => {
     };
 
     const handleTypeItemClick = (item: TypeHelperItem) => {
-        const prefixRegex = /[a-zA-Z0-9_':]*$/;
+
+        // Use this after implementing operators
+        const prefixRegex =  /[a-zA-Z0-9_':| ]*$/;
         const suffixRegex = /^[a-zA-Z0-9_':]*/;
         const prefixMatch = currentType.slice(0, currentCursorPosition).match(prefixRegex);
         const suffixMatch = currentType.slice(currentCursorPosition).match(suffixRegex);
@@ -193,7 +211,7 @@ export const TypeHelperComponent = (props: TypeHelperComponentProps) => {
             currentType.slice(0, prefixCursorPosition) + item.insertText + currentType.slice(suffixCursorPosition),
             prefixCursorPosition + item.insertText.length
         );
-
+        onClose();
         onCloseCompletions?.();
     };
 
@@ -235,131 +253,169 @@ export const TypeHelperComponent = (props: TypeHelperComponentProps) => {
     }, [activePanelIndex, open]);
 
     return (
-        <HelperPane helperPaneHeight={typeHelperHeight}>
-            <HelperPane.Header
-                title="Type Helper"
-                titleSx={{ fontFamily: 'GilmerRegular' }}
-                onClose={onClose}
-                searchValue={searchValue}
-                onSearch={handleHelperPaneSearch}
-            />
-            <HelperPane.Body>
-                <HelperPane.Panels>
-                    {/* Type helper tabs */}
-                    <HelperPane.PanelTab
-                        title="Types"
-                        id={PANEL_TABS.TYPES}
-                        onClick={() => setActivePanelIndex(PANEL_TABS.TYPES)}
-                    />
-                    <HelperPane.PanelTab
-                        title="Operators"
-                        id={PANEL_TABS.OPERATORS}
-                        onClick={() => setActivePanelIndex(PANEL_TABS.OPERATORS)}
-                    />
+        <HelperPaneCustom>
+            <HelperPaneCustom.Body>
+                <SlidingWindow>
+                    <SlidingPane name="PAGE1" paneWidth={typeFieldRef?.width} paneHeight='170px'>
+                        <div style={{
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            margin: "3px 8px"
+                        }}>
 
-                    {/* Type helper panel views */}
-                    <HelperPane.PanelView id={PANEL_TABS.TYPES}>
-                        {loading ? (
-                            <HelperPane.Loader rows={3} columns={2} sections={3} />
-                        ) : (
-                            basicTypes?.length > 0 && (
-                                <>
-                                    {basicTypes.map((category) => (
-                                        <HelperPane.Section
-                                            key={category.category}
-                                            title={category.category}
-                                            titleSx={{ fontFamily: 'GilmerMedium' }}
-                                            columns={2}
-                                        >
-                                            {category.items.map((item) => (
-                                                <HelperPane.CompletionItem
-                                                    key={`${category.category}-${item.name}`}
-                                                    label={item.name}
-                                                    getIcon={() => getIcon(item.type)}
-                                                    onClick={() => handleTypeItemClick(item)}
-                                                />
-                                            ))}
-                                        </HelperPane.Section>
-                                    ))}
-                                    {importedTypes?.[0]?.subCategory?.length > 0 && (
-                                        <HelperPane.CollapsibleSection title="Imported Types" defaultCollapsed={true}>
-                                            {importedTypes.map((category) => (
-                                                <HelperPane.Section
-                                                    key={category.category}
-                                                    title={category.category}
-                                                    titleSx={{ fontFamily: 'GilmerMedium' }}
+                            <SearchBox
+                                sx={{ width: "100%" }}
+                                placeholder='Search'
+                                value={searchValue}
+                                onChange={handleHelperPaneSearch}
+                            />
+                        </div>
+                        {
+                            loading ? (
+                                <HelperPane.Loader />
+                            ) : (
+                                basicTypes?.length > 0 && (
+                                    <ScrollableContainer style={{ margin: '8px 0px' }}>
+                                        {basicTypes.map((category, index) => (
+                                            <ExpandableList key={category.category}>
+                                                <ExpandableList.Section
+                                                    sx={{ marginTop: index === 0 ? '0px' : '20px' }}
+                                                    title={
+                                                        <span style={{ padding: '10px' }}>{category.category}</span>
+                                                    }
+                                                    level={0}
                                                 >
-                                                    {category.subCategory?.map((subCategory) => (
-                                                        <HelperPane.SubSection
-                                                            key={subCategory.category}
-                                                            title={subCategory.category}
-                                                            columns={2}
-                                                        >
-                                                            {subCategory.items?.map((item) => (
-                                                                <HelperPane.CompletionItem
-                                                                    key={`${subCategory.category}-${item.name}`}
-                                                                    label={item.name}
-                                                                    getIcon={() => getIcon(item.type)}
-                                                                    onClick={() => handleTypeBrowserItemClick(item)}
-                                                                />
-                                                            ))}
-                                                        </HelperPane.SubSection>
-                                                    ))}
-                                                </HelperPane.Section>
-                                            ))}
-                                        </HelperPane.CollapsibleSection>
-                                    )}
-                                </>
+                                                    <div style={{ marginTop: '10px' }}>
+                                                        {category.items.map((item) => (
+                                                            <SlidingPaneNavContainer
+                                                                key={`${category.category}-${item.name}`}
+                                                                onClick={() => handleTypeItemClick(item)}
+                                                            >
+                                                                <ExpandableList.Item>
+                                                                    {getIcon(item.type)}
+                                                                    <FunctionItemLabel>{item.name}</FunctionItemLabel>
+                                                                </ExpandableList.Item>
+                                                            </SlidingPaneNavContainer>
+                                                        ))}
+                                                    </div>
+                                                </ExpandableList.Section>
+                                            </ExpandableList>
+                                        ))}
+                                        {importedTypes?.[0]?.subCategory?.length > 0 && (
+                                            <ExpandableList>
+                                                {importedTypes.map((category) => (
+                                                    <ExpandableList.Section
+                                                        sx={{ marginTop: '20px' }}
+                                                        key={category.category}
+                                                        title={category.category}
+                                                        level={0}
+                                                    >
+                                                        {category.subCategory?.map((subCategory) => (
+                                                            <ExpandableList.Section
+                                                                sx={{ marginTop: '10px' }}
+                                                                key={subCategory.category}
+                                                                title={subCategory.category}
+                                                                level={0}
+                                                            >
+                                                                <div style={{ marginTop: '10px' }}>
+                                                                    {subCategory.items?.map((item) => (
+                                                                        <SlidingPaneNavContainer onClick={() => handleTypeBrowserItemClick(item)}>
+                                                                            <ExpandableList.Item
+                                                                                key={`${subCategory.category}-${item.name}`}
+                                                                            >
+                                                                                {getIcon(item.type)}
+                                                                                <FunctionItemLabel>{item.name}</FunctionItemLabel>
+                                                                            </ExpandableList.Item>
+                                                                        </SlidingPaneNavContainer>
+                                                                    ))}
+                                                                </div>
+                                                            </ExpandableList.Section>
+                                                        ))}
+                                                    </ExpandableList.Section>
+                                                ))}
+                                            </ExpandableList>
+                                        )}
+                                    </ScrollableContainer>
+                                )
                             )
-                        )}
-                    </HelperPane.PanelView>
-                    
-                    <HelperPane.PanelView id={PANEL_TABS.OPERATORS}>
-                        {loading ? (
-                            <HelperPane.Loader rows={5} columns={1} sections={1} />
-                        ) : (
-                            operators?.length > 0 && (
-                                <S.OperatorContainer>
-                                    {operators.map((operator) => (
-                                        <S.Operator key={operator.name} onClick={() => handleOperatorClick(operator)}>
-                                            <S.OptionIcon>{operator.getIcon()}</S.OptionIcon>
-                                            <Typography variant="body3">{operator.name}</Typography>
-                                        </S.Operator>
-                                    ))}
-                                </S.OperatorContainer>
-                            )
-                        )}
-                    </HelperPane.PanelView>
-                </HelperPane.Panels>
-            </HelperPane.Body>
-            <HelperPane.Footer>
-                <S.FooterContainer>
-                    {onTypeCreate && (
-                        <HelperPane.IconButton
-                            title={getTypeCreateText(currentType, referenceTypes, newTypeName)}
-                            getIcon={() => <Codicon name="add" />}
-                            onClick={() => onTypeCreate(newTypeName.current)}
-                        />
-                    )}
-                    <HelperPane.IconButton
-                        title="Open type browser"
-                        getIcon={() => <Codicon name="library" />}
-                        onClick={() => setIsTypeBrowserOpen(true)}
+                        }
+                        <Divider sx={{ margin: '0px' }} />
+                        <div style={{
+                            marginTop: "auto",
+                            display: 'flex',
+                            flexDirection: 'column',
+                            justifyContent: 'space-around',
+                            padding: '8px'
+                        }}>
+                            {onTypeCreate && (
+                                <FooterButtons
+                                    sx={{ display: 'flex', justifyContent: 'space-between' }}
+                                    startIcon='add'
+                                    title={getTypeCreateText(currentType, referenceTypes, newTypeName)}
+                                    onClick={() => onTypeCreate(newTypeName.current)}
+                                />
+                            )}
+                            {/* TODO: Decided to either rewrite or remove it */}
+                            {/* <FooterButtons
+                                sx={{ display: 'flex', justifyContent: 'space-between' }}
+                                startIcon='library'
+                                title="Open Type Browser"
+                                onClick={() => setIsTypeBrowserOpen(true)}
+                            /> */}
+                        </div>
+                    </SlidingPane>
+                </SlidingWindow>
+                {/* Type browser */}
+                {isTypeBrowserOpen && (
+                    <TypeBrowser
+                        typeBrowserRef={typeBrowserRef}
+                        loadingTypeBrowser={loadingTypeBrowser}
+                        typeBrowserTypes={typeBrowserTypes}
+                        onSearchTypeBrowser={onSearchTypeBrowser}
+                        onTypeItemClick={handleTypeBrowserItemClick}
+                        onClose={() => setIsTypeBrowserOpen(false)}
                     />
-                </S.FooterContainer>
-            </HelperPane.Footer>
-
-            {/* Type browser */}
-            {isTypeBrowserOpen && (
-                <TypeBrowser
-                    typeBrowserRef={typeBrowserRef}
-                    loadingTypeBrowser={loadingTypeBrowser}
-                    typeBrowserTypes={typeBrowserTypes}
-                    onSearchTypeBrowser={onSearchTypeBrowser}
-                    onTypeItemClick={handleTypeBrowserItemClick}
-                    onClose={() => setIsTypeBrowserOpen(false)}
-                />
-            )}
-        </HelperPane>
+                )}
+            </HelperPaneCustom.Body>
+        </HelperPaneCustom>
     );
 };
+
+const InvisibleButton = styled.button`
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    text-align: inherit;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
+    outline: none;
+    box-shadow: none;
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+`;
+
+type FooterButtonProps = {
+    onClick?: () => void;
+    startIcon: string;
+    title: string;
+    sx?: React.CSSProperties;
+    disabled?: boolean;
+}
+
+const FooterButtons = (props: FooterButtonProps) => {
+    const { onClick, startIcon, title, sx } = props;
+    return (
+        <div style={{ display: "flex", justifyContent: "center", alignItems: "center", margin: "5px", ...sx }}>
+            <InvisibleButton
+                disabled={props.disabled}
+                onClick={onClick}>
+                <Codicon name={startIcon} sx={{ color: ThemeColors.PRIMARY }} />
+                <span style={{ color: ThemeColors.PRIMARY, marginLeft: "10px" }}>{title}</span>
+            </InvisibleButton>
+        </div>
+    )
+}
diff --git a/workspaces/ballerina/type-editor/src/TypeHelper/index.tsx b/workspaces/ballerina/type-editor/src/TypeHelper/index.tsx
index 1f8e250437b..83a0b90a7f7 100644
--- a/workspaces/ballerina/type-editor/src/TypeHelper/index.tsx
+++ b/workspaces/ballerina/type-editor/src/TypeHelper/index.tsx
@@ -108,7 +108,7 @@ type StyleBase = {
 namespace S {
     export const Container = styled.div<StyleBase>`
         position: absolute;
-        z-index: 2001;
+        z-index: 40001;
         filter: drop-shadow(0 3px 8px rgb(0 0 0 / 0.2));
 
         *,
@@ -243,9 +243,9 @@ export const TypeHelper = forwardRef<HTMLDivElement, TypeHelperProps>((props, re
                                 open={open}
                                 typeBrowserRef={typeBrowserRef}
                                 onClose={onClose}
+                                exprRef={undefined}
                                 {...rest}
                             />
-                            <S.Arrow sx={position.arrow} />
                         </Transition>
                     </S.Container>,
                     document.body
diff --git a/workspaces/ballerina/data-mapper-view/src/assets/icons/TripleDotsIcon.tsx b/workspaces/ballerina/type-editor/src/TypeHelper/styles/HorizontalList.tsx
similarity index 60%
rename from workspaces/ballerina/data-mapper-view/src/assets/icons/TripleDotsIcon.tsx
rename to workspaces/ballerina/type-editor/src/TypeHelper/styles/HorizontalList.tsx
index 517b173316f..bd599aa568b 100644
--- a/workspaces/ballerina/data-mapper-view/src/assets/icons/TripleDotsIcon.tsx
+++ b/workspaces/ballerina/type-editor/src/TypeHelper/styles/HorizontalList.tsx
@@ -15,14 +15,25 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from "react";
 
-export default function TripleDotsIcon() {
-    return (
-        <svg xmlns="http://www.w3.org/2000/svg"  height="16" fill="currentColor" className="bi bi-three-dots-vertical" viewBox="0 0 16 16">
-            <path
-                d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"
-            />
-        </svg>
-    );
-}
+import styled from "@emotion/styled";
+
+export const HorizontalListContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+`;
+
+export const HorizontalListItem = styled.div`
+    display: flex;
+    width: 100%;
+    gap: 3px;
+    justify-content: space-between;
+    align-items: center;
+`;
+
+export const HorizontalListItemLeftContent = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 10px;
+`;
diff --git a/workspaces/ballerina/type-editor/src/index.tsx b/workspaces/ballerina/type-editor/src/index.tsx
index d2f1759a985..3f2fbc6092d 100644
--- a/workspaces/ballerina/type-editor/src/index.tsx
+++ b/workspaces/ballerina/type-editor/src/index.tsx
@@ -17,5 +17,6 @@
  */
 
 export { TypeEditor } from "./TypeEditor/TypeEditor";
+export * from "./TypeEditor/Contexts/TypeEditorContext"
 export type { TypeHelperCategory, TypeHelperOperator, TypeHelperItem } from "./TypeHelper";
 export { TypeHelperComponent } from "./TypeHelper/TypeHelper";
diff --git a/workspaces/ballerina/type-editor/src/utils/index.ts b/workspaces/ballerina/type-editor/src/utils/index.ts
index 629d049ecd7..0ab58c0f7f8 100644
--- a/workspaces/ballerina/type-editor/src/utils/index.ts
+++ b/workspaces/ballerina/type-editor/src/utils/index.ts
@@ -259,8 +259,8 @@ export function getRemoveCreatedRecordRange(recordNames: string[], syntaxTree: S
 export function getHelperPanePosition(typeFieldRef: RefObject<HTMLElement>, offset: Position): Position {
     const rect = typeFieldRef.current.getBoundingClientRect();
     const position: Position = {
-        top: 0,
-        left: rect.left - HELPER_PANE_WIDTH - ARROW_HEIGHT + offset.left
+        top: rect.top + rect.height,
+        left: rect.left 
     };
 
     return position;
diff --git a/workspaces/bi/bi-extension/package.json b/workspaces/bi/bi-extension/package.json
index 097604bf7ab..3041c6c68b5 100644
--- a/workspaces/bi/bi-extension/package.json
+++ b/workspaces/bi/bi-extension/package.json
@@ -129,7 +129,7 @@
                     "group": "inline"
                 },
                 {
-                    "command": "BI.project-explorer.add-connection",
+                    "command": "BI.project-explorer.add-custom-connector",
                     "when": "view == BI.project-explorer && viewItem == localConnectors",
                     "group": "inline"
                 }
@@ -137,7 +137,7 @@
             "view/title": [
                 {
                     "command": "BI.project-explorer.switch-project",
-                    "when": "view == BI.project-explorer && BI.project == true && BI.isMultiRoot == true",
+                    "when": "view == BI.project-explorer && BI.isMultiRoot == true",
                     "group": "navigation"
                 },
                 {
diff --git a/workspaces/bi/bi-extension/src/biExtentionContext.ts b/workspaces/bi/bi-extension/src/biExtentionContext.ts
index bc39486753b..dfa13fe3303 100644
--- a/workspaces/bi/bi-extension/src/biExtentionContext.ts
+++ b/workspaces/bi/bi-extension/src/biExtentionContext.ts
@@ -23,7 +23,6 @@ import { ExtensionContext } from "vscode";
 export class ExtensionVariables {
     public context!: ExtensionContext;
     public langClient!: ExtendedLangClientInterface;
-    public projectPath: string;
     public biSupported?: boolean;
     public isNPSupported?: boolean;
 }
diff --git a/workspaces/bi/bi-extension/src/extension.ts b/workspaces/bi/bi-extension/src/extension.ts
index c33e02bdfdf..e7c354e0972 100644
--- a/workspaces/bi/bi-extension/src/extension.ts
+++ b/workspaces/bi/bi-extension/src/extension.ts
@@ -27,7 +27,6 @@ export function activate(context: vscode.ExtensionContext) {
 		extension.langClient = ballerinaExt.exports.ballerinaExtInstance.langClient;
 		extension.biSupported = ballerinaExt.exports.ballerinaExtInstance.biSupported;
 		extension.isNPSupported = ballerinaExt.exports.ballerinaExtInstance.isNPSupported;
-		extension.projectPath = ballerinaExt.exports.projectPath;
 		StateMachine.initialize();
 		return;
 	}
diff --git a/workspaces/bi/bi-extension/src/project-explorer/activate.ts b/workspaces/bi/bi-extension/src/project-explorer/activate.ts
index de282c8ab57..7820d33e9da 100644
--- a/workspaces/bi/bi-extension/src/project-explorer/activate.ts
+++ b/workspaces/bi/bi-extension/src/project-explorer/activate.ts
@@ -56,8 +56,12 @@ function createProjectTree(dataProvider: ProjectExplorerEntryProvider) {
 
 function registerBallerinaCommands(dataProvider: ProjectExplorerEntryProvider, isBI: boolean, isMultiRoot?: boolean) {
 	commands.registerCommand(BI_COMMANDS.REFRESH_COMMAND, () => dataProvider.refresh());
+
+	if (isMultiRoot) {
+		commands.executeCommand('setContext', 'BI.isMultiRoot', true);
+	}
 	if (isBI) {
-		registerBICommands(isMultiRoot);
+		registerBICommands();
 	}
 }
 
@@ -90,11 +94,8 @@ function handleNonBallerinaVisibility() {
 	commands.executeCommand(SHARED_COMMANDS.OPEN_BI_WELCOME);
 }
 
-function registerBICommands(isMultiRoot?: boolean) {
+function registerBICommands() {
 	commands.executeCommand(BI_COMMANDS.FOCUS_PROJECT_EXPLORER);
 	commands.executeCommand(SHARED_COMMANDS.SHOW_VISUALIZER);
 	commands.executeCommand('setContext', 'BI.project', true);
-	if (isMultiRoot) {
-		commands.executeCommand('setContext', 'BI.isMultiRoot', true);
-	}
 }
diff --git a/workspaces/bi/bi-extension/src/project-explorer/project-explorer-provider.ts b/workspaces/bi/bi-extension/src/project-explorer/project-explorer-provider.ts
index 759c6ac10e4..3d38d3f2460 100644
--- a/workspaces/bi/bi-extension/src/project-explorer/project-explorer-provider.ts
+++ b/workspaces/bi/bi-extension/src/project-explorer/project-explorer-provider.ts
@@ -19,7 +19,7 @@
 import * as vscode from 'vscode';
 import { window, Uri, commands } from 'vscode';
 import path = require('path');
-import { DIRECTORY_MAP, ProjectStructureArtifactResponse, ProjectStructureResponse, SHARED_COMMANDS, BI_COMMANDS, PackageConfigSchema, BallerinaProject } from "@wso2/ballerina-core";
+import { DIRECTORY_MAP, ProjectStructureArtifactResponse, ProjectStructureResponse, SHARED_COMMANDS, BI_COMMANDS, PackageConfigSchema, BallerinaProject, VisualizerLocation } from "@wso2/ballerina-core";
 import { extension } from "../biExtentionContext";
 
 interface Property {
@@ -132,11 +132,12 @@ export class ProjectExplorerEntryProvider implements vscode.TreeDataProvider<Pro
 async function getProjectStructureData(): Promise<ProjectExplorerEntry[]> {
     if (vscode.workspace.workspaceFolders && vscode.workspace.workspaceFolders.length > 0) {
         const data: ProjectExplorerEntry[] = [];
-        if (extension.langClient && extension.projectPath) {
+        if (extension.langClient) {
+            const stateContext: VisualizerLocation = await commands.executeCommand(SHARED_COMMANDS.GET_STATE_CONTEXT);
             const workspace = vscode
                 .workspace
                 .workspaceFolders
-                .find(folder => folder.uri.fsPath === extension.projectPath);
+                .find(folder => folder.uri.fsPath === stateContext.projectUri);
 
             if (!workspace) {
                 return [];
@@ -144,7 +145,6 @@ async function getProjectStructureData(): Promise<ProjectExplorerEntry[]> {
 
             // Get the state context from ballerina extension as it maintain the event driven tree data
             let projectStructure;
-            const stateContext = await commands.executeCommand(SHARED_COMMANDS.GET_STATE_CONTEXT);
             if (typeof stateContext === 'object' && stateContext !== null && 'projectStructure' in stateContext && stateContext.projectStructure !== null) {
                 projectStructure = stateContext.projectStructure;
                 const projectTree = generateTreeData(workspace, projectStructure);
@@ -304,7 +304,7 @@ function getEntriesBI(components: ProjectStructureResponse): ProjectExplorerEntr
 
     // ---------- Local Connectors ----------
     const localConnectors = new ProjectExplorerEntry(
-        "Local Connectors",
+        "Custom Connectors",
         vscode.TreeItemCollapsibleState.Expanded,
         null,
         'connection',
diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/import-integration/import-integration.spec.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/import-integration/import-integration.spec.ts
new file mode 100644
index 00000000000..c52ffaa65cb
--- /dev/null
+++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/import-integration/import-integration.spec.ts
@@ -0,0 +1,201 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { test } from '@playwright/test';
+import { Form } from '@wso2/playwright-vscode-tester';
+import fs from 'fs';
+import path from 'path';
+import { getWebview, initMigrationTest, page } from '../utils';
+
+export default function createTests() {
+    test.describe('Import Integration Tests', {
+        tag: '@group1',
+    }, async () => {
+        const migrationOutputPath = path.join(__dirname, 'data', 'migration-output');
+        let webview: any;
+
+        initMigrationTest();
+
+        test.beforeEach(async () => {
+            webview = await getWebview('WSO2 Integrator: BI', page);
+            if (!webview) {
+                throw new Error('WSO2 Integrator: BI webview not found');
+            }
+        });
+
+        test.afterAll(async ({ }, testInfo) => {
+            // Clean up migration output folder after all tests complete
+            if (fs.existsSync(migrationOutputPath)) {
+                fs.rmSync(migrationOutputPath, { recursive: true });
+                console.log('✓ Cleaned up migration output folder');
+            }
+
+            console.log(`>>> Finished ${testInfo.title} with status: ${testInfo.status}, Attempt: ${testInfo.retry + 1}`);
+
+        });
+
+        test('Navigate to Import Integration from Welcome Page', async ({ }, testInfo) => {
+            const testAttempt = testInfo.retry + 1;
+            console.log('Testing Import Integration navigation in test attempt: ', testAttempt);
+
+            // Look for the Import External Integration button on the welcome page
+            const importButton = webview.getByText('Import External Integration');
+            await importButton.waitFor({ timeout: 30000 });
+            await importButton.click();
+
+            // Verify we're navigated to the import integration form
+            const importTitle = webview.locator('h1', { hasText: 'Migrate External Integration' });
+            await importTitle.waitFor({ timeout: 30000 });
+        });
+
+        test('Select TIBCO Tool and Set Project Path', async ({ }, testInfo) => {
+            const testAttempt = testInfo.retry + 1;
+            console.log('Testing TIBCO tool selection and project path in test attempt: ', testAttempt);
+
+            // Form should already be loaded from initMigrationTest
+            // Wait for migration tools to be loaded
+            const integrationCards = webview.locator('[id$="-integration-card"]');
+            await integrationCards.first().waitFor({ timeout: 15000 });
+
+            // Select TIBCO integration card
+            const tibcoCard = webview.locator('[id$="-integration-card"]').filter({ hasText: 'TIBCO' }).first();
+            await tibcoCard.click();
+            console.log('Selected TIBCO migration tool');
+
+            // After selecting a tool, project folder selection should appear
+            const folderSelectionTitle = webview.locator('h3', { hasText: 'Select Your Project Folder' });
+            await folderSelectionTitle.waitFor({ timeout: 10000 });
+
+            // Get the test resource path
+            const tibcoProjectPath = path.join(__dirname, 'resources', 'sample-tibco-project');
+            console.log('Test project path:', tibcoProjectPath);
+
+            // Use Form class to handle folder selection
+            const form = new Form(page.page, 'WSO2 Integrator: BI', webview);
+            await form.fill({
+                values: {
+                    'Select Project': {
+                        type: 'file',
+                        value: tibcoProjectPath
+                    }
+                }
+            });
+
+            // Verify the path appears in the UI
+            const pathDisplay = webview.locator(`span`, { hasText: tibcoProjectPath }).or(
+                webview.getByText(tibcoProjectPath, { exact: true })
+            );
+
+            if (await pathDisplay.count() > 0) {
+                console.log('✓ Folder path successfully set in UI');
+            }
+
+        });
+
+        test('Start Migration Process', async ({ }, testInfo) => {
+            const testAttempt = testInfo.retry + 1;
+            console.log('Testing migration start process in test attempt: ', testAttempt);
+
+            // Start Migration button should be enabled after previous test
+            const startMigrationButton = webview.getByRole('button', { name: 'Start Migration' });
+            await startMigrationButton.waitFor();
+
+            // Verify button is enabled
+            const isDisabled = await startMigrationButton.isDisabled();
+            if (isDisabled) {
+                throw new Error('Start Migration button is disabled - cannot proceed');
+            }
+
+            console.log('✓ Start Migration button is enabled, clicking it');
+            await startMigrationButton.click();
+
+            // Wait for migration to start - look for progress indicators or success messages
+            await page.page.waitForTimeout(2000);
+
+            // Wait for migration to complete and look for success message
+            const migrationCompleted = webview.locator('h2', { hasText: 'Migration Completed Successfully!' });
+
+            // Give migration time to complete
+            try {
+                await migrationCompleted.waitFor({ timeout: 60000 });
+                console.log('✓ Migration completed successfully');
+            } catch (error) {
+                console.log('⚠ Migration did not complete within timeout or success message not found');
+                throw error;
+            }
+
+            console.log('Migration start process tested successfully');
+        });
+
+        test('Configure Integration Project', async ({ }, testInfo) => {
+            const testAttempt = testInfo.retry + 1;
+            console.log('Testing integration project configuration in test attempt: ', testAttempt);
+
+            // Click the Next button to proceed to project configuration
+            const nextButton = webview.getByRole('button', { name: 'Next' });
+            await nextButton.waitFor({ timeout: 10000 });
+            await nextButton.click();
+            console.log('✓ Clicked Next button to proceed to project configuration');
+
+            // Wait for the project configuration form to appear
+            const configureTitle = webview.locator('h2', { hasText: 'Configure Your Integration Project' });
+            await configureTitle.waitFor({ timeout: 10000 });
+            console.log('✓ Project configuration form loaded');
+
+            // Create migration output directory if it doesn't exist
+            if (!fs.existsSync(migrationOutputPath)) {
+                fs.mkdirSync(migrationOutputPath, { recursive: true });
+                console.log('✓ Created migration output directory');
+            }
+
+            // Fill both fields using Form class
+            const form = new Form(page.page, 'WSO2 Integrator: BI', webview);
+            await form.fill({
+                values: {
+                    'Integration Name': {
+                        type: 'input',
+                        value: `TibcoMigration${testAttempt}`
+                    },
+                    'Change': {
+                        type: 'file',
+                        value: migrationOutputPath
+                    }
+                }
+            });
+            console.log('✓ Integration name and project location set');
+
+            page.page.waitForTimeout(1000);
+
+            // Click the Create and Open Project button
+            const createProjectButton = webview.getByRole('button', { name: 'Create and Open Project' });
+            await createProjectButton.waitFor();
+
+            // Verify button is enabled
+            const isDisabled = await createProjectButton.isDisabled();
+            if (isDisabled) {
+                throw new Error('Create and Open Project button is disabled - form may not be complete');
+            }
+
+            console.log('✓ Create and Open Project button is enabled, clicking it');
+            await createProjectButton.click();
+
+            await page.page.waitForTimeout(5000);
+
+            console.log('Integration project configuration tested successfully');
+        });
+    });
+}
diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/import-integration/resources/sample-tibco-project/GeneralConnection.sharedhttp b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/import-integration/resources/sample-tibco-project/GeneralConnection.sharedhttp
new file mode 100644
index 00000000000..37a7c7486ed
--- /dev/null
+++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/import-integration/resources/sample-tibco-project/GeneralConnection.sharedhttp
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<ns0:httpSharedResource xmlns:ns0="www.tibco.com/shared/HTTPConnection">
+    <config>
+        <Host>localhost</Host>
+        <Port>9090</Port>
+    </config>
+</ns0:httpSharedResource>
diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/import-integration/resources/sample-tibco-project/helloworld.process b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/import-integration/resources/sample-tibco-project/helloworld.process
new file mode 100644
index 00000000000..157024ee1d4
--- /dev/null
+++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/import-integration/resources/sample-tibco-project/helloworld.process
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<pd:ProcessDefinition xmlns:pd="http://xmlns.tibco.com/bw/process/2003" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:ns="http://www.tibco.com/pe/EngineTypes" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
+    <pd:name>Processes/simpleResponse</pd:name>
+    <pd:startName>HTTP Receiver</pd:startName>
+    <pd:starter name="HTTP Receiver">
+        <pd:type>com.tibco.plugin.http.HTTPEventSource</pd:type>
+        <pd:resourceType>httppalette.httpEventSource</pd:resourceType>
+        <config>
+            <outputMode>String</outputMode>
+            <inputOutputVersion>5.3.0</inputOutputVersion>
+            <sharedChannel>GeneralConnection.sharedhttp</sharedChannel>
+            <parsePostData>true</parsePostData>
+            <Headers/>
+        </config>
+        <pd:inputBindings/>
+    </pd:starter>
+    <pd:endName>End</pd:endName>
+    <pd:errorSchemas/>
+    <pd:processVariables/>
+    <pd:targetNamespace>http://xmlns.example.com/simpleResponse</pd:targetNamespace>
+    <pd:activity name="HTTP Response">
+        <pd:type>com.tibco.plugin.http.HTTPResponseActivity</pd:type>
+        <pd:resourceType>httppalette.httpResponseActivity</pd:resourceType>
+        <config>
+            <responseHeader>
+                <header name="Content-Type">text/xml; charset=UTF-8</header>
+            </responseHeader>
+            <httpResponseCode>200</httpResponseCode>
+        </config>
+        <pd:inputBindings>
+            <ResponseActivityInput>
+                <asciiContent>
+                    <response>hello world</response>
+                </asciiContent>
+            </ResponseActivityInput>
+        </pd:inputBindings>
+    </pd:activity>
+
+    <pd:transition>
+        <pd:from>HTTP Receiver</pd:from>
+        <pd:to>HTTP Response</pd:to>
+        <pd:lineType>Default</pd:lineType>
+    </pd:transition>
+
+    <pd:transition>
+        <pd:from>HTTP Response</pd:from>
+        <pd:to>End</pd:to>
+        <pd:lineType>Default</pd:lineType>
+    </pd:transition>
+</pd:ProcessDefinition>
diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/test.list.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/test.list.ts
index d4d64a2b899..1dba4db0b66 100644
--- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/test.list.ts
+++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/test.list.ts
@@ -49,6 +49,8 @@ import connectionArtifact from './other-artifacts/connection.spec';
 import configuration from './configuration/configuration.spec';
 import typeTest from './type/type.spec';
 
+import importIntegration from './import-integration/import-integration.spec';
+
 test.describe.configure({ mode: 'default' });
 
 test.beforeAll(async () => {
@@ -89,10 +91,11 @@ test.describe(dataMapperArtifact); // TODO: Fix this test
 test.describe(typeDiagramArtifact); // TODO: Fix this test
 test.describe(connectionArtifact);
 test.describe(configuration); // TODO: Fix this test
-
-test.describe(configuration);
 test.describe(typeTest);
 
+// <----Import Integration Test---->
+test.describe(importIntegration);
+
 test.afterAll(async () => {
     console.log(`>>> Finished test suite`);
     const dateTime = new Date().toISOString().replace(/:/g, '-');
diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/type/TypeEditorUtils.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/type/TypeEditorUtils.ts
index fef11ddb937..ff9c0ea6020 100644
--- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/type/TypeEditorUtils.ts
+++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/type/TypeEditorUtils.ts
@@ -239,7 +239,6 @@ export class TypeEditorUtils {
         for (const field of fields) {
             await this.addRecordField(field.name, field.type);
         }
-
         return form;
     }
 
@@ -256,4 +255,58 @@ export class TypeEditorUtils {
 
         return form;
     }
+
+    /**
+     * Toggle field options by clicking the chevron icon
+     * @param fieldIndex Index of the field to toggle (default is 0 for the first field)
+     */
+    async toggleFieldOptionsByChevron(fieldIndex: number = 0): Promise<void> {
+        // Find all field rows
+
+        const chevronIcons = this.webView.locator('[data-testid="field-expand-btn"]');
+        const chevronIcon = chevronIcons.nth(fieldIndex);
+
+        try {
+            await chevronIcon.waitFor({ state: 'visible', timeout: 3000 });
+
+            // Scroll and force click
+            await chevronIcon.scrollIntoViewIfNeeded();
+            await chevronIcon.click({ force: true });
+            console.log('Clicked chevron for field', fieldIndex);
+
+
+            await this.page.waitForTimeout(300);
+        } catch (error) {
+            throw new Error(`Could not click chevron icon at field index ${fieldIndex}: ${error}`);
+        }
+    }
+
+
+    /**
+     * Toggle any dropdown/collapsible section by text
+     */
+    async toggleDropdown(dropdownText: string, waitTime: number = 500): Promise<void> {
+        const dropdownToggle = this.webView.locator(`text=${dropdownText}`);
+        await this.waitForElement(dropdownToggle);
+        await dropdownToggle.click();
+        
+        // Wait for animation to complete
+        await this.page.waitForTimeout(waitTime);
+    }
+
+    /**
+     * Set any checkbox by its aria-label or name
+     */
+    async setCheckbox(checkboxName: string, checked: boolean): Promise<void> {
+        const checkbox = this.webView.getByRole('checkbox', { name: checkboxName });
+        console.log(`Setting checkbox "${checkboxName}" to ${checked}`);
+        await this.waitForElement(checkbox);
+        
+        const ariaChecked = await checkbox.getAttribute('aria-checked');
+        const isCurrentlyChecked = ariaChecked === 'true';
+        
+        if (isCurrentlyChecked !== checked) {
+            await checkbox.click();
+        }
+    }
 }
diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/type/testOutput.bal b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/type/testOutput.bal
index d31bc73a0a1..a553a4e5bdc 100644
--- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/type/testOutput.bal
+++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/type/testOutput.bal
@@ -6,10 +6,15 @@ enum Role1 {
 }
 
 type Id1 int|string;
-
-type Employee1 record {|
+type Organization1 record {
+    Id1 id;
+    string name;
+    string location;
+};
+type Employee1 readonly & record {|
     Id1 id;
     Role1 role;
+    readonly string name;
 |};
 
 service class Project1 {
diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/type/type.spec.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/type/type.spec.ts
index 0efcc63a7f2..040cfa52d65 100644
--- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/type/type.spec.ts
+++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/type/type.spec.ts
@@ -61,6 +61,26 @@ export default function createTests() {
             await typeUtils.saveAndWait(unionForm);
             await typeUtils.verifyTypeNodeExists(unionName);
 
+            // RECORD: Organization
+            await typeUtils.clickAddType();
+            const organizationName = `Organization${testAttempt}`;
+            const organizationForm = await typeUtils.createRecordType(organizationName, [
+                { name: 'id', type: unionName },
+                { name: 'name', type: 'string' },
+                { name: 'location', type: 'string' }
+            ]);
+            
+            // Test Advanced Options functionality
+            console.log('Expanding Advanced Options...');
+            await typeUtils.toggleDropdown('Advanced Options'); 
+        
+            console.log('Testing Allow Additional Fields checkbox...');
+            await typeUtils.setCheckbox('Allow Additional Fields', true); 
+            await typeUtils.saveAndWait(organizationForm);
+            await typeUtils.verifyTypeNodeExists(organizationName);
+            await typeUtils.verifyTypeLink(organizationName, 'id', unionName);
+
+
             // RECORD: Employee (initially with just id field)
             await typeUtils.clickAddType();
             const recordName = `Employee${testAttempt}`;
@@ -80,6 +100,24 @@ export default function createTests() {
             await typeUtils.saveAndWait(editForm);
             await typeUtils.verifyTypeLink(recordName, 'role', enumName);
 
+            // Add name field to Employee record
+            await typeUtils.editType(recordName);
+            await typeUtils.addRecordField('name', 'string' );
+
+            // Toggle drop down
+            await typeUtils.toggleFieldOptionsByChevron(2);
+            await typeUtils.setCheckbox('Readonly', true);
+        
+            // Test Advanced Options functionality
+            console.log('Expanding Advanced Options...');
+            await typeUtils.toggleDropdown('Advanced Options');      
+            
+            console.log('Testing Is Readonly Type checkbox...');
+            await typeUtils.setCheckbox('Is Readonly Type', true);
+
+            await typeUtils.saveAndWait(recordForm);
+            await typeUtils.verifyTypeNodeExists(recordName);
+
             // Create Service Class: Project
             await typeUtils.clickAddType();
             const serviceClassName = `Project${testAttempt}`;
@@ -92,7 +130,7 @@ export default function createTests() {
 
             // Verify the generated types.bal matches testOutput.bal
             const expectedFilePath = path.join(__dirname, 'testOutput.bal');
-            await verifyGeneratedSource('types.bal', expectedFilePath);
+            await verifyGeneratedSource('types.bal', expectedFilePath);                 
 
         });
     });
diff --git a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/utils.ts b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/utils.ts
index 519f6c2840f..cb66b9c6315 100644
--- a/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/utils.ts
+++ b/workspaces/bi/bi-extension/src/test/e2e-playwright-tests/utils.ts
@@ -110,10 +110,10 @@ export async function getWebview(viewName: string, page: ExtendedPage) {
                 console.log(`Attempt ${retryCount + 1} failed to access iframe:`, message);
             }
         }
-        
+
         // Always increment retry count after each attempt
         retryCount++;
-        
+
         // Only retry if we haven't reached max retries
         if (retryCount < maxRetries) {
             await page.page.waitForTimeout(2000);
@@ -138,7 +138,7 @@ export async function createProject(page: ExtendedPage, projectName?: string) {
     await form.switchToFormView(false, webview);
     await form.fill({
         values: {
-            'Integration Name': {
+            'Integration Name*': {
                 type: 'input',
                 value: projectName ?? 'sample',
             },
@@ -187,6 +187,32 @@ export function initTest(newProject: boolean = false, skipProjectCreation: boole
     });
 }
 
+
+export function initMigrationTest() {
+    test.beforeAll(async ({ }, testInfo) => {
+        console.log(`>>> Starting migration tests. Title: ${testInfo.title}, Attempt: ${testInfo.retry + 1}`);
+        console.log('Setting up BI extension for migration testing');
+        await initVSCode();
+        await page.page.waitForLoadState();
+        await toggleNotifications(true);
+        
+        // Reload VS Code to apply the language server setting
+        await page.executePaletteCommand('Reload Window');
+        await page.page.waitForLoadState();
+        await page.page.waitForTimeout(5000); // Give VS Code time to fully reload
+
+        // Select the BI sidebar item and navigate to Import External Integration
+        await page.selectSidebarItem('WSO2 Integrator: BI');
+        const webview = await getWebview('WSO2 Integrator: BI', page);
+        if (!webview) {
+            throw new Error('WSO2 Integrator: BI webview not found');
+        }
+
+        console.log('Migration test runner started');
+    });
+}
+
+
 export async function addArtifact(artifactName: string, testId: string) {
     console.log(`Adding artifact: ${artifactName}`);
     const artifactWebView = await getWebview('WSO2 Integrator: BI', page);
@@ -235,23 +261,23 @@ function normalizeSource(source: string): string {
  */
 export async function verifyGeneratedSource(generatedFileName: string, expectedFilePath: string): Promise<void> {
     const { expect } = await import('@playwright/test');
-    
+
     // Generated file is in the project sample folder
     const generatedFilePath = path.join(newProjectPath, 'sample', generatedFileName);
-    
+
     if (!fs.existsSync(generatedFilePath)) {
         throw new Error(`Generated file not found at: ${generatedFilePath}`);
     }
-    
+
     if (!fs.existsSync(expectedFilePath)) {
         throw new Error(`Expected file not found at: ${expectedFilePath}`);
     }
-    
+
     const actualContent = fs.readFileSync(generatedFilePath, 'utf-8');
     const expectedContent = fs.readFileSync(expectedFilePath, 'utf-8');
-    
+
     const normalizedActual = normalizeSource(actualContent);
     const normalizedExpected = normalizeSource(expectedContent);
-    
+
     expect(normalizedActual).toBe(normalizedExpected);
 }
diff --git a/workspaces/bi/bi-extension/webpack.config.js b/workspaces/bi/bi-extension/webpack.config.js
index 8410ac5af5b..f020f87fe76 100644
--- a/workspaces/bi/bi-extension/webpack.config.js
+++ b/workspaces/bi/bi-extension/webpack.config.js
@@ -47,7 +47,7 @@ const extensionConfig = {
       }]
     }]
   },
-  devtool: 'source-map',
+  devtool: !process.env.CI ? "source-map" : undefined,
   infrastructureLogging: {
     level: "log",
   },
@@ -73,7 +73,7 @@ const extensionConfig = {
         path: path.resolve(__dirname, 'out/'), // Everything under resources/ gets these modes
         fileMode: '755',
         dirMode: '755'
-      } ]
+      }]
     })
   ],
 
diff --git a/workspaces/choreo/choreo-extension/webpack.config.js b/workspaces/choreo/choreo-extension/webpack.config.js
index 3d178157f6e..6cf1e5616a0 100644
--- a/workspaces/choreo/choreo-extension/webpack.config.js
+++ b/workspaces/choreo/choreo-extension/webpack.config.js
@@ -65,7 +65,7 @@ const extensionConfig = {
 			},
 		],
 	},
-	devtool: "source-map",
+	devtool: !process.env.CI ? "source-map" : undefined,
 	infrastructureLogging: {
 		level: "log",
 	},
diff --git a/workspaces/choreo/choreo-webviews/webpack.config.js b/workspaces/choreo/choreo-webviews/webpack.config.js
index 42c966444d3..04919e5279b 100644
--- a/workspaces/choreo/choreo-webviews/webpack.config.js
+++ b/workspaces/choreo/choreo-webviews/webpack.config.js
@@ -13,8 +13,8 @@ class RunTailwindCSSPlugin {
 module.exports = {
 	entry: "./src/index.tsx",
 	target: "web",
-	devtool: "source-map",
-	mode: "development",
+	devtool: !process.env.CI ? "source-map" : undefined,
+	mode: !process.env.CI ? "development" : "production",
 	output: {
 		path: path.resolve(__dirname, "build"),
 		filename: "main.js",
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-bookmark.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-bookmark.svg
new file mode 100644
index 00000000000..49ef33b74d9
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-bookmark.svg
@@ -0,0 +1,21 @@
+<!--
+ ~ Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ ~
+ ~ WSO2 LLC. licenses this file to you under the Apache License,
+ ~ Version 2.0 (the "License"); you may not use this file except
+ ~ in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~     http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing,
+ ~ software distributed under the License is distributed on an
+ ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ ~ KIND, either express or implied. See the License for the
+ ~ specific language governing permissions and limitations
+ ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#000"
+        d="M9.725 14L12 12.625L14.275 14l-.6-2.6l2-1.725l-2.625-.225L12 7l-1.05 2.45l-2.625.225l2 1.725zM5 21V5q0-.825.588-1.412T7 3h10q.825 0 1.413.588T19 5v16l-7-3z" />
+</svg>
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-convert.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-convert.svg
new file mode 100644
index 00000000000..d8d642bcb54
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-convert.svg
@@ -0,0 +1,21 @@
+<!--
+ ~ Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ ~
+ ~ WSO2 LLC. licenses this file to you under the Apache License,
+ ~ Version 2.0 (the "License"); you may not use this file except
+ ~ in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~     http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing,
+ ~ software distributed under the License is distributed on an
+ ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ ~ KIND, either express or implied. See the License for the
+ ~ specific language governing permissions and limitations
+ ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#000"
+        d="M4 22q-.425 0-.712-.288T3 21t.288-.712T4 20h1.55q-1.2-.575-1.937-1.7t-.738-2.55q0-1.975 1.388-3.363T7.625 11q.425 0 .713.288t.287.712t-.288.713t-.712.287q-1.125 0-1.937.8t-.813 1.95q0 .975.6 1.725t1.525.95V17q0-.425.288-.712T8 16t.713.288T9 17v4q0 .425-.288.713T8 22zm9-6h8v3q0 .825-.587 1.413T19 21h-6zm0-2V9h8v5zM3 7V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v2z" />
+</svg>
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-data-table.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-data-table.svg
new file mode 100644
index 00000000000..f17da582040
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-data-table.svg
@@ -0,0 +1,21 @@
+<!--
+ ~ Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ ~
+ ~ WSO2 LLC. licenses this file to you under the Apache License,
+ ~ Version 2.0 (the "License"); you may not use this file except
+ ~ in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~     http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing,
+ ~ software distributed under the License is distributed on an
+ ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ ~ KIND, either express or implied. See the License for the
+ ~ specific language governing permissions and limitations
+ ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#000"
+        d="M5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zM5 8.325h14V5H5zm0 5.35h14v-3.35H5zM5 19h14v-3.325H5zM7 7.65q-.425 0-.712-.288T6 6.65t.288-.712T7 5.65t.713.288T8 6.65t-.288.713T7 7.65M7 13q-.425 0-.712-.288T6 12t.288-.712T7 11t.713.288T8 12t-.288.713T7 13m0 5.35q-.425 0-.712-.288T6 17.35t.288-.712T7 16.35t.713.288t.287.712t-.288.713T7 18.35" />
+</svg>
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-plus-fill.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-plus-fill.svg
new file mode 100644
index 00000000000..4036d96d2f5
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-plus-fill.svg
@@ -0,0 +1,21 @@
+<!--
+ ~ Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ ~
+ ~ WSO2 LLC. licenses this file to you under the Apache License,
+ ~ Version 2.0 (the "License"); you may not use this file except
+ ~ in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~     http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing,
+ ~ software distributed under the License is distributed on an
+ ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ ~ KIND, either express or implied. See the License for the
+ ~ specific language governing permissions and limitations
+ ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#000"
+        d="M11 13v3q0 .425.288.713T12 17t.713-.288T13 16v-3h3q.425 0 .713-.288T17 12t-.288-.712T16 11h-3V8q0-.425-.288-.712T12 7t-.712.288T11 8v3H8q-.425 0-.712.288T7 12t.288.713T8 13zm-6 8q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21z" />
+</svg>
diff --git a/workspaces/common-libs/font-wso2-vscode/src/icons/bi-update.svg b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-update.svg
new file mode 100644
index 00000000000..c8b99b1e9d5
--- /dev/null
+++ b/workspaces/common-libs/font-wso2-vscode/src/icons/bi-update.svg
@@ -0,0 +1,21 @@
+<!--
+ ~ Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ ~
+ ~ WSO2 LLC. licenses this file to you under the Apache License,
+ ~ Version 2.0 (the "License"); you may not use this file except
+ ~ in compliance with the License.
+ ~ You may obtain a copy of the License at
+ ~
+ ~     http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing,
+ ~ software distributed under the License is distributed on an
+ ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ ~ KIND, either express or implied. See the License for the
+ ~ specific language governing permissions and limitations
+ ~ under the License.
+-->
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path fill="#000"
+        d="M12 21q-1.875 0-3.512-.712t-2.85-1.925t-1.925-2.85T3 12t.713-3.512t1.924-2.85t2.85-1.925T12 3q2.05 0 3.888.875T19 6.35V5q0-.425.288-.712T20 4t.713.288T21 5v4q0 .425-.288.713T20 10h-4q-.425 0-.712-.288T15 9t.288-.712T16 8h1.75q-1.025-1.4-2.525-2.2T12 5Q9.075 5 7.038 7.038T5 12t2.038 4.963T12 19q2.375 0 4.25-1.425t2.475-3.675q.125-.4.45-.6t.725-.15q.425.05.675.362t.15.688q-.725 2.975-3.15 4.888T12 21m1-9.4l2.5 2.5q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-2.8-2.8q-.15-.15-.225-.337T11 11.975V8q0-.425.288-.712T12 7t.713.288T13 8z" />
+</svg>
diff --git a/workspaces/common-libs/rpc-generator/package-lock.json b/workspaces/common-libs/rpc-generator/package-lock.json
new file mode 100644
index 00000000000..743bdc933fb
--- /dev/null
+++ b/workspaces/common-libs/rpc-generator/package-lock.json
@@ -0,0 +1,331 @@
+{
+  "name": "rpc-generator",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "rpc-generator",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "@ts-morph/common": "^0.27.0",
+        "ts-morph": "^26.0.0"
+      },
+      "devDependencies": {
+        "@types/node": "^22.15.24"
+      }
+    },
+    "node_modules/@isaacs/balanced-match": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz",
+      "integrity": "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@isaacs/brace-expansion": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@isaacs/brace-expansion/-/brace-expansion-5.0.0.tgz",
+      "integrity": "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@isaacs/balanced-match": "^4.0.1"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@ts-morph/common": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@ts-morph/common/-/common-0.27.0.tgz",
+      "integrity": "sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-glob": "^3.3.3",
+        "minimatch": "^10.0.1",
+        "path-browserify": "^1.0.1"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "22.18.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.18.0.tgz",
+      "integrity": "sha512-m5ObIqwsUp6BZzyiy4RdZpzWGub9bqLJMvZDD0QMXhxjqMHMENlj+SqF5QxoUwaQNFe+8kz8XM8ZQhqkQPTgMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/code-block-writer": {
+      "version": "13.0.3",
+      "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-13.0.3.tgz",
+      "integrity": "sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==",
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
+      "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.3.tgz",
+      "integrity": "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==",
+      "license": "ISC",
+      "dependencies": {
+        "@isaacs/brace-expansion": "^5.0.0"
+      },
+      "engines": {
+        "node": "20 || >=22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "license": "MIT"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-morph": {
+      "version": "26.0.0",
+      "resolved": "https://registry.npmjs.org/ts-morph/-/ts-morph-26.0.0.tgz",
+      "integrity": "sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@ts-morph/common": "~0.27.0",
+        "code-block-writer": "^13.0.3"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}
diff --git a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/Completions.tsx b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/Completions.tsx
index b2814b11b48..41d0d35dbf2 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/Completions.tsx
+++ b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/Completions.tsx
@@ -200,7 +200,7 @@ export const Dropdown = forwardRef<HTMLDivElement, CompletionDropdownProps>((pro
     useImperativeHandle(ref, () => listBoxRef.current);
 
     return (
-        <DropdownBody sx={sx} editorWidth={editorWidth}>
+        <DropdownBody sx={sx} editorWidth={editorWidth} className="unq-modal-overlay">
             {showDefaultCompletion && (
                 <DefaultCompletionItem
                     getDefaultCompletion={getDefaultCompletion}
diff --git a/workspaces/ballerina/ballerina-visualizer/src/views/InlineDataMapper/index.tsx b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/HelperPaneCustom/context.tsx
similarity index 50%
rename from workspaces/ballerina/ballerina-visualizer/src/views/InlineDataMapper/index.tsx
rename to workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/HelperPaneCustom/context.tsx
index 06ce0a0bff6..3e6428dba07 100644
--- a/workspaces/ballerina/ballerina-visualizer/src/views/InlineDataMapper/index.tsx
+++ b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/HelperPaneCustom/context.tsx
@@ -16,27 +16,20 @@
  * under the License.
  */
 
-import React from "react";
+import React, { createContext,  useContext } from 'react';
 
-import { CodeData } from "@wso2/ballerina-core";
-import { ErrorBoundary } from "@wso2/ui-toolkit";
+type HelperPanePanelContextType = {
+    activePanelIndex: number;
+    setActivePanelIndex: (index: number) => void;
+};
 
-import { TopNavigationBar } from "../../components/TopNavigationBar";
-import { InlineDataMapperView } from "./DataMapperView";
+const defaultState: any = {};
+export const HelperPanePanelContext = createContext<HelperPanePanelContextType>(defaultState);
 
-export interface InlineDataMapperProps {
-    filePath: string;
-    codedata: CodeData;
-    varName: string;
-}
+export const HelperPanePanelProvider:  React.FC<React.PropsWithChildren<HelperPanePanelContextType>> = props => {
+    const { children, ...restProps } = props;
 
-export function InlineDataMapper(props: InlineDataMapperProps) {
-    return (
-        <>
-            <TopNavigationBar />
-            <ErrorBoundary errorMsg="Error while loading the Data Mapper">
-                <InlineDataMapperView {...props} />
-            </ErrorBoundary>
-        </>
-    );
+    return <HelperPanePanelContext.Provider value={restProps}>{children}</HelperPanePanelContext.Provider>;
 };
+
+export const useHelperPanePanelContext = () => useContext(HelperPanePanelContext);
diff --git a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/HelperPaneCustom/index.tsx b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/HelperPaneCustom/index.tsx
new file mode 100644
index 00000000000..3942542f433
--- /dev/null
+++ b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/HelperPaneCustom/index.tsx
@@ -0,0 +1,794 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { CSSProperties, useState } from 'react';
+import { createPortal } from 'react-dom';
+import styled from '@emotion/styled';
+import {
+    ArrowProps,
+    HelperPaneBodyProps,
+    HelperPaneCategoryItemProps,
+    HelperPaneCollapsibleSectionProps,
+    HelperPaneCompletionItemProps,
+    HelperPaneCustomProps,
+    HelperPaneFooterProps,
+    HelperPaneHeaderProps,
+    HelperPaneIconButtonProps,
+    HelperPaneSectionProps,
+    LibraryBrowserProps,
+    LoadingSectionProps,
+    PanelsProps,
+    PanelTabProps,
+    PanelViewProps,
+    StyleBase
+} from '../types';
+import { Codicon } from '../../../../Codicon/Codicon';
+import { Divider } from '../../../../Divider/Divider';
+import { SearchBox } from '../../../../SeachBox/SearchBox';
+import Typography from '../../../../Typography/Typography';
+import { Overlay } from '../../../../Commons/Overlay';
+import { ARROW_HEIGHT } from '../../../constants';
+import { HelperPanePanelProvider, useHelperPanePanelContext } from './context';
+
+export const Arrow = styled.div<ArrowProps>`
+    position: absolute;
+    height: ${ARROW_HEIGHT}px;
+    width: ${ARROW_HEIGHT}px;
+    background-color: var(--vscode-dropdown-background);
+    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+
+    ${(props: ArrowProps) => props.origin === "left" && `
+        transform: rotate(90deg);
+    `}
+
+    ${(props: ArrowProps) => props.origin === "right" && `
+        transform: rotate(-90deg);
+    `}
+
+    ${(props: StyleBase) => props.sx}
+`;
+
+const PanelViewContainer = styled.div`
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+`;
+
+const PanelTabContainer = styled.div<{ isActive: boolean }>`
+    padding: 4px 0;
+    color: var(--panel-tab-foreground);
+    cursor: pointer;
+    text-wrap: nowrap;
+    ${({ isActive }: { isActive: boolean }) =>
+        isActive &&
+        `
+        color: var(--panel-tab-active-foreground);
+        border-bottom: 1px solid var(--panel-tab-active-border);
+    `}
+`;
+
+const ViewContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    overflow-y: auto;
+`;
+
+const TabContainer = styled.div<{ sx?: CSSProperties }>`
+    display: flex;
+    align-items: center;
+    gap: 32px;
+    ${({ sx }: { sx?: CSSProperties }) => sx}
+`;
+
+const PanelContainer = styled.div`
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+`;
+
+const LibraryBrowserSearchBoxContainer = styled.div`
+    margin-bottom: 16px;
+`;
+
+const LibraryBrowserBody = styled.div`
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    padding: 16px;
+    overflow-y: auto;
+    scrollbar-color: auto;
+    border: 1px solid var(--vscode-dropdown-border);
+`;
+
+const LibraryBrowserHeader = styled.header`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-inline: 16px;
+`;
+
+const LibraryBrowserWithOverlay = styled.div`
+    height: 100vh;
+`;
+
+const LibraryBrowserContainer = styled.div`
+    width: 55%;
+    height: 70%;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    padding: 16px;
+    border-radius: 8px;
+    background-color: var(--vscode-dropdown-background);
+    box-shadow: 0 3px 8px rgb(0 0 0 / 0.2);
+    z-index: 3002;
+`;
+
+const IconButtonContainer = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+
+    & p,
+    & i {
+        color: var(--vscode-button-background);
+    }
+
+    & p:hover,
+    & i:hover {
+        color: var(--vscode-button-hoverBackground);
+    }
+`;
+
+const FooterBody = styled.div`
+    padding-inline: 8px;
+`;
+
+const FooterContainer = styled.footer`
+    display: flex;
+    flex-direction: column;
+`;
+
+const CompletionItemOuterContainer = styled.div<{ indent: boolean }>`
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 2px;
+    padding-left: ${({ indent }: { indent: boolean }) => indent ? 16 : 0}px;
+`;
+
+const CompletionItemContainer = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 2px;
+    border-radius: 4px;
+    cursor: pointer;
+`;
+
+const HorizontalLine = styled.div`
+    border-top: 1px dotted var(--vscode-editorIndentGuide-background);
+    display: flex;
+    flex: 1 1 auto;
+`;
+
+const CompletionItemWithoutCollapseContainer = styled.div<{ isParent: boolean }>`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    overflow: hidden;
+
+    ${({ isParent }: { isParent: boolean }) => !isParent && `
+        flex: 1 1 auto;
+    `}
+
+    &:hover {
+        background-color: var(--vscode-list-hoverBackground);
+    }
+`;
+
+const CategoryItemContainer = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 16px;
+    margin-block: 4px;
+    border: 1px solid var(--vscode-editorWidget-border);
+    border-radius: 8px;
+    cursor: pointer;
+
+    &:hover {
+        background-color: var(--vscode-list-hoverBackground);
+    }
+`;
+
+const CollapseButton = styled.div`
+    cursor: pointer;
+
+    & p {
+        color: var(--vscode-button-background);
+    }
+
+    & p:hover {
+        color: var(--vscode-button-hoverBackground);
+    }
+`;
+
+const LoadingHeader = styled.div`
+    width: 100px;
+    height: 16px;
+    margin-bottom: 2px;
+    background: var(--vscode-editor-background);
+    animation: loading 1s infinite alternate;
+
+    @keyframes loading {
+        0% {
+            background: var(--vscode-editor-background);
+        }
+        100% {
+            background: var(--vscode-editor-inactiveSelectionBackground);
+        }
+    }
+`;
+
+const LoadingItem = styled.div`
+    height: 16px;
+    margin-bottom: 2px;
+    background: var(--vscode-editor-background);
+    animation: loading 1s infinite alternate;
+
+    @keyframes loading {
+        0% {
+            background: var(--vscode-editor-background);
+        }
+        100% {
+            background: var(--vscode-editor-inactiveSelectionBackground);
+        }
+    }
+`;
+
+const CollapsibleSectionTitle = styled.div`
+    display: flex;
+    align-items: center;
+    padding-block: 8px;
+    cursor: pointer;
+
+    & p {
+        color: var(--vscode-button-background);
+    }
+
+    & p:hover {
+        color: var(--vscode-button-hoverBackground);
+    }
+`;
+
+const SectionBody = styled.div<{ columns?: number }>`
+    display: grid;
+    grid-template-columns: 1fr;
+    ${({ columns }: { columns?: number }) =>
+        columns &&
+        `
+        grid-template-columns: repeat(auto-fit, minmax(calc(${100 / columns}% - ${8 * (columns - 1)}px), 130px));
+        column-gap: 8px;
+    `}
+`;
+
+const SectionContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-bottom: 16px;
+`;
+
+const SearchBoxContainer = styled.div`
+    padding-inline: 8px;
+`;
+
+const TitleContainer = styled.div<{ isLink?: boolean }>`
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    ${({ isLink }: { isLink?: boolean }) =>
+        isLink &&
+        `
+        cursor: pointer;
+    `}
+`;
+
+const HeaderContainer = styled.header`
+    display: flex;
+    align-items: center;
+    padding-inline: 8px;
+`;
+
+const HeaderContainerWithSearch = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+`;
+
+const DropdownBody = styled.div<{  sx?: CSSProperties }>`
+    display: flex;
+    flex-direction: column;
+    padding: 2px;
+    border-radius: 2px;
+    color: var(--input-foreground);
+    ${({ sx }: { sx?: CSSProperties }) => {
+        let style = '';
+        if (sx) {
+            const sxObj = sx as Record<string, any>;
+            for (const key in sxObj) {
+                if (key === 'zIndex' && sxObj[key] !== undefined) {
+                    style += `z-index: ${sxObj[key]} !important;`;
+                } else if (sxObj[key] !== undefined) {
+                    // Convert camelCase to kebab-case
+                    const kebabKey = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+                    style += `${kebabKey}: ${sxObj[key]};`;
+                }
+            }
+        }
+        return style;
+    }}
+`;
+
+const Loader: React.FC<LoadingSectionProps> = ({ columns, rows, sections }) => {
+    const sectionCount = sections ? sections : 2;
+    const rowCount = rows ? rows : 2;
+    const colCount = columns ? columns : 2;
+
+    return (
+        <>
+            {Array.from({ length: sectionCount }).map((_, sectionIndex) => (
+                <SectionContainer key={sectionIndex}>
+                    {/* Loading section header */}
+                    <LoadingHeader />
+
+                    {/* Loading section body */}
+                    <SectionBody columns={colCount}>
+                        {Array.from({ length: rowCount * colCount }).map((_, index) => (
+                            <LoadingItem key={`${sectionIndex}-${index}`} />
+                        ))}
+                    </SectionBody>
+                </SectionContainer>
+            ))}
+        </>
+    );
+}
+
+const PanelView: React.FC<PanelViewProps> = ({ children, id }) => {
+    const { activePanelIndex } = useHelperPanePanelContext();
+    
+    return (
+        <>
+            {activePanelIndex === id && (
+                <PanelViewContainer>
+                    {React.Children.toArray(children).length > 0 ? (
+                        children
+                    ) : (
+                        <Typography variant="body3">No items found.</Typography>
+                    )}
+                </PanelViewContainer>
+            )}
+        </>
+    );
+};
+PanelView.displayName = 'PanelView';
+
+const PanelTab: React.FC<PanelTabProps> = ({ title, id, onClick }) => {
+    const { activePanelIndex, setActivePanelIndex } = useHelperPanePanelContext();
+
+    const handleClick = () => {
+        setActivePanelIndex(id);
+        onClick?.(id);
+    };
+
+    return (
+        <PanelTabContainer isActive={activePanelIndex === id} onClick={handleClick}>
+            <Typography variant="body3">{title}</Typography>
+        </PanelTabContainer>
+    );
+};
+PanelTab.displayName = 'PanelTab';
+
+const Panels: React.FC<PanelsProps> = ({ children, sx }) => {
+    const [activePanelIndex, setActivePanelIndex] = useState<number>(0);
+
+    const tabs = React.Children.toArray(children).filter(child => 
+        React.isValidElement(child) && (child.type as any).displayName === 'PanelTab'
+    );
+
+    const views = React.Children.toArray(children).filter(child => 
+        React.isValidElement(child) && (child.type as any).displayName === 'PanelView'
+    );
+    
+    return (
+        <HelperPanePanelProvider activePanelIndex={activePanelIndex} setActivePanelIndex={setActivePanelIndex}>
+            <PanelContainer>
+                <TabContainer sx={{ ...sx }}>
+                    {tabs}
+                </TabContainer>
+                <ViewContainer>
+                    {views}
+                </ViewContainer>
+            </PanelContainer>
+        </HelperPanePanelProvider>
+    );
+};
+
+const LibraryBrowserSubSection: React.FC<HelperPaneSectionProps> = ({
+    title,
+    columns = 1,
+    collapsible,
+    defaultCollapsed = false,
+    collapsedItemsCount = 10,
+    children
+}) => {
+    const [isCollapsed, setIsCollapsed] = useState<boolean>(defaultCollapsed);
+    const items = React.Children.toArray(children);
+    const visibleItems = isCollapsed ? items.slice(0, collapsedItemsCount) : items;
+    const isItemsOverflowing = items.length > collapsedItemsCount;
+
+    return (
+        <SectionContainer>
+            <Typography variant="body3" sx={{ fontStyle: "italic" }}>{title}</Typography>
+            <SectionBody columns={columns}>
+                {visibleItems.length > 0 ? visibleItems : <Typography variant="body3">No items found.</Typography>}
+            </SectionBody>
+            {collapsible && isItemsOverflowing && (
+                <CollapseButton onClick={() => setIsCollapsed(!isCollapsed)}>
+                    <Typography variant="caption">{isCollapsed ? 'Show more' : 'Show less'}</Typography>
+                </CollapseButton>
+            )}
+        </SectionContainer>
+    );
+};
+
+const LibraryBrowserSection: React.FC<HelperPaneSectionProps> = ({
+    title,
+    columns = 1,
+    collapsible,
+    defaultCollapsed = false,
+    collapsedItemsCount = 10,
+    children,
+    titleSx
+}) => {
+    const [isCollapsed, setIsCollapsed] = useState<boolean>(defaultCollapsed);
+    const items = React.Children.toArray(children);
+    const visibleItems = isCollapsed ? items.slice(0, collapsedItemsCount) : items;
+    const isItemsOverflowing = items.length > collapsedItemsCount;
+
+    return (
+        <SectionContainer>
+            <Typography variant="h3" sx={{ margin: 0, ...titleSx }}>
+                {title}
+            </Typography>
+            <SectionBody columns={columns}>
+                {visibleItems.length > 0 ? visibleItems : <Typography variant="body3">No items found.</Typography>}
+            </SectionBody>
+            {collapsible && isItemsOverflowing && (
+                <CollapseButton onClick={() => setIsCollapsed(!isCollapsed)}>
+                    <Typography variant="body2">{isCollapsed ? 'Show more' : 'Show less'}</Typography>
+                </CollapseButton>
+            )}
+        </SectionContainer>
+    );
+};
+
+const LibraryBrowser: React.FC<LibraryBrowserProps> = ({
+    anchorRef,
+    children,
+    loading = false,
+    searchValue,
+    title = "Library Browser",
+    titleSx,
+    onSearch,
+    onClose,
+}) => {
+    const handleClose = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        e.stopPropagation();
+        onClose();
+    };
+
+    return createPortal(
+        <LibraryBrowserWithOverlay ref={anchorRef}>
+            <Overlay
+                sx={{
+                    background: "var(--vscode-editor-inactiveSelectionBackground)",
+                    opacity: 0.4,
+                    zIndex: 2001
+                }}
+                onClose={handleClose}
+            />
+            <LibraryBrowserContainer>
+                <LibraryBrowserHeader>
+                    <Typography variant="h2" sx={{ margin: 0, ...titleSx }}>
+                        {title}
+                    </Typography>
+                    <Codicon name="close" onClick={handleClose} />
+                </LibraryBrowserHeader>
+                <Divider />
+                <LibraryBrowserSearchBoxContainer>
+                    <SearchBox id="helper-pane-search" placeholder="Search" value={searchValue} onChange={onSearch} />
+                </LibraryBrowserSearchBoxContainer>
+                <LibraryBrowserBody>
+                    {loading ? (
+                        <Loader columns={4} rows={3} sections={3} />
+                    ) : (
+                        children
+                    )}
+                </LibraryBrowserBody>
+            </LibraryBrowserContainer>
+        </LibraryBrowserWithOverlay>,
+        document.body
+    );
+};
+
+const IconButton: React.FC<HelperPaneIconButtonProps> = ({ title, getIcon, onClick }) => {
+    return (
+        <IconButtonContainer onClick={onClick}>
+            {getIcon && getIcon()}
+            <Typography variant="body3">{title}</Typography>
+        </IconButtonContainer>
+    );
+};
+
+const Footer: React.FC<HelperPaneFooterProps> = ({ children }) => {
+    return (
+        <FooterContainer>
+            <Divider />
+            <FooterBody>{children}</FooterBody>
+        </FooterContainer>
+    );
+};
+
+const CompletionItem: React.FC<HelperPaneCompletionItemProps> = ({ getIcon, indent = false, label, type, onClick, children }) => {
+    const [collapsed, setCollapsed] = useState<boolean>(false);
+
+    // Get the child nodes of type CompletionItem
+    const completionItems = children ? React.Children.toArray(children).filter(child => 
+        React.isValidElement(child) && (child.type as any).displayName === 'CompletionItem'
+    ) : [];
+
+    const handleCollapseClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setCollapsed(!collapsed);
+    };
+
+    return (
+        <CompletionItemOuterContainer indent={indent}>
+            <CompletionItemContainer>
+                <CompletionItemWithoutCollapseContainer
+                    title={label}
+                    isParent={completionItems.length > 0}
+                    onClick={onClick}
+                >
+                    {getIcon && getIcon()}
+                    <Typography variant="body3" sx={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                        {label}
+                    </Typography>
+                    {type && (
+                        <Typography variant="body3" sx={{ color: 'var(--vscode-terminal-ansiGreen)' }}>
+                            {type}
+                        </Typography>
+                    )}
+                </CompletionItemWithoutCollapseContainer>
+                {completionItems.length > 0 && <HorizontalLine />}
+                {completionItems.length > 0 && (collapsed ? (
+                    <Codicon name="chevron-up" onClick={handleCollapseClick} />
+                ) : (
+                    <Codicon name="chevron-down" onClick={handleCollapseClick} />
+                ))}
+            </CompletionItemContainer>
+            {!collapsed && completionItems}
+        </CompletionItemOuterContainer>
+    );
+};
+CompletionItem.displayName = 'CompletionItem';
+
+const CategoryItem: React.FC<HelperPaneCategoryItemProps> = ({ label, labelSx, onClick, getIcon }) => {
+    return (
+        <CategoryItemContainer onClick={onClick}>
+            {getIcon && getIcon()}
+            <Typography variant="body2" sx={labelSx}>{label}</Typography>
+            <Codicon sx={{ marginLeft: 'auto' }} name="chevron-right" />
+        </CategoryItemContainer>
+    );
+};
+
+const CollapsibleSection: React.FC<HelperPaneCollapsibleSectionProps> = ({
+    title,
+    titleSx,
+    defaultCollapsed = false,
+    children,
+}) => {
+    const [isCollapsed, setIsCollapsed] = useState<boolean>(defaultCollapsed);
+
+    return (
+        <>
+            <CollapsibleSectionTitle onClick={() => setIsCollapsed(!isCollapsed)}>
+                <Typography variant="body3" sx={{ fontStyle: "italic", ...titleSx }}>
+                    {isCollapsed ? "Show " : "Hide "}{title}
+                </Typography>
+            </CollapsibleSectionTitle>
+            {!isCollapsed && children}
+        </>
+    );
+};
+
+const SubSection: React.FC<HelperPaneSectionProps> = ({
+    title,
+    columns = 1,
+    collapsible,
+    defaultCollapsed = false,
+    collapsedItemsCount = 10,
+    children
+}) => {
+    const [isCollapsed, setIsCollapsed] = useState<boolean>(defaultCollapsed);
+    const items = React.Children.toArray(children);
+    const visibleItems = isCollapsed ? items.slice(0, collapsedItemsCount) : items;
+    const isItemsOverflowing = items.length > collapsedItemsCount;
+
+    return (
+        <SectionContainer>
+            <Typography variant="body3" sx={{ fontStyle: "italic" }}>{title}</Typography>
+            <SectionBody columns={columns}>
+                {visibleItems.length > 0 ? visibleItems : <Typography variant="body3">No items found.</Typography>}
+            </SectionBody>
+            {collapsible && isItemsOverflowing && (
+                <CollapseButton onClick={() => setIsCollapsed(!isCollapsed)}>
+                    <Typography variant="caption">{isCollapsed ? 'Show more' : 'Show less'}</Typography>
+                </CollapseButton>
+            )}
+        </SectionContainer>
+    );
+};
+
+const Section: React.FC<HelperPaneSectionProps> = ({
+    title,
+    columns = 1,
+    collapsible,
+    defaultCollapsed = false,
+    collapsedItemsCount = 10,
+    children,
+    titleSx
+}) => {
+    const [isCollapsed, setIsCollapsed] = useState<boolean>(defaultCollapsed);
+    const items = React.Children.toArray(children);
+    const visibleItems = isCollapsed ? items.slice(0, collapsedItemsCount) : items;
+    const isItemsOverflowing = items.length > collapsedItemsCount;
+
+    return (
+        <SectionContainer>
+            <Typography variant="body2" sx={titleSx}>
+                {title}
+            </Typography>
+            <SectionBody columns={columns}>
+                {visibleItems.length > 0 ? (
+                    visibleItems
+                ) : (
+                    <Typography variant="body3">No items found.</Typography>
+                )}
+            </SectionBody>
+            {collapsible && isItemsOverflowing && (
+                <CollapseButton onClick={() => setIsCollapsed(!isCollapsed)}>
+                    <Typography variant="caption">{isCollapsed ? 'Show more' : 'Show less'}</Typography>
+                </CollapseButton>
+            )}
+        </SectionContainer>
+    );
+};
+
+const Body: React.FC<HelperPaneBodyProps> = ({ children }) => {
+    return (
+        <div >
+            {children}
+        </div>
+    );
+};
+
+const Header: React.FC<HelperPaneHeaderProps> = ({
+    title,
+    titleSx,
+    onBack,
+    onClose,
+    searchValue,
+    onSearch,
+    startAdornment,
+    endAdornment
+}) => {
+    return (
+        <>
+            <HeaderContainerWithSearch>
+                {title && (
+                    <HeaderContainer>
+                        {startAdornment && startAdornment}
+                        <TitleContainer isLink={!!onBack} onClick={onBack}>
+                            {onBack && <Codicon name="chevron-left" />}
+                            {onBack ? (
+                                <Typography variant="caption" sx={titleSx}>{title}</Typography>
+                            ) : (
+                                <Typography sx={{ margin: 0, ...titleSx }}>{title}</Typography>
+                            )}
+                        </TitleContainer>
+                        {endAdornment && endAdornment}
+                        {onClose && <Codicon name="close" sx={{ marginLeft: 'auto' }} onClick={onClose} />}
+                    </HeaderContainer>
+                )}
+                {onSearch && (
+                    <SearchBoxContainer>
+                        <SearchBox id="helper-pane-search" placeholder="Search" value={searchValue} onChange={onSearch} />
+                    </SearchBoxContainer>
+                )}
+            </HeaderContainerWithSearch>
+            <Divider />
+        </>
+    );
+};
+
+const HelperPaneCustom: React.FC<HelperPaneCustomProps> & {
+    Header: typeof Header;
+    Body: typeof Body;
+    Section: typeof Section;
+    SubSection: typeof SubSection;
+    CollapsibleSection: typeof CollapsibleSection;
+    CategoryItem: typeof CategoryItem;
+    CompletionItem: typeof CompletionItem;
+    Footer: typeof Footer;
+    IconButton: typeof IconButton;
+    LibraryBrowser: typeof LibraryBrowser;
+    LibraryBrowserSection: typeof LibraryBrowserSection;
+    LibraryBrowserSubSection: typeof LibraryBrowserSubSection;
+    Panels: typeof Panels;
+    PanelTab: typeof PanelTab;
+    PanelView: typeof PanelView;
+    Arrow: typeof Arrow;
+    Loader: typeof Loader;
+} = ({ children, sx, anchorRef }: HelperPaneCustomProps) => {
+    return (
+        <DropdownBody sx={sx} ref={anchorRef} className='unq-modal-overlay'>
+            {children}
+        </DropdownBody>
+    );
+};
+
+HelperPaneCustom.Header = Header;
+HelperPaneCustom.Body = Body;
+HelperPaneCustom.Section = Section;
+HelperPaneCustom.SubSection = SubSection;
+HelperPaneCustom.CollapsibleSection = CollapsibleSection;
+HelperPaneCustom.CategoryItem = CategoryItem;
+HelperPaneCustom.CompletionItem = CompletionItem;
+HelperPaneCustom.Footer = Footer;
+HelperPaneCustom.IconButton = IconButton;
+HelperPaneCustom.LibraryBrowser = LibraryBrowser;
+HelperPaneCustom.LibraryBrowserSection = LibraryBrowserSection;
+HelperPaneCustom.LibraryBrowserSubSection = LibraryBrowserSubSection;
+HelperPaneCustom.Panels = Panels;
+HelperPaneCustom.PanelTab = PanelTab;
+HelperPaneCustom.PanelView = PanelView;
+HelperPaneCustom.Arrow = Arrow;
+HelperPaneCustom.Loader = Loader;
+
+export default HelperPaneCustom;
diff --git a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/SlidingPane/context.tsx b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/SlidingPane/context.tsx
new file mode 100644
index 00000000000..783d76381c3
--- /dev/null
+++ b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/SlidingPane/context.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { createContext, useContext } from "react";
+import { VisitedPagesElement } from ".";
+
+interface SlidingPaneContextType {
+  prevPage: VisitedPagesElement;
+  height:string;
+  width:number;
+  setPrevPage:(prevPage:VisitedPagesElement) => void;
+  setHeight:(height:string) => void;
+  setWidth:(width:number) => void;
+  moveToNext: (nextPage:VisitedPagesElement) => void;
+  moveToPrev: () => void;
+  visitedPages: VisitedPagesElement[];
+  setVisitedPages: (visitedPages:VisitedPagesElement[]) => void;
+  clearAnimations: boolean;
+  setClearAnimations: (clearAnimations:boolean) => void;
+  getParams: ()=>any;
+  isInitialRender: React.MutableRefObject<boolean>;
+}
+export const SlidingPaneContext = createContext<SlidingPaneContextType | undefined>(undefined);
+
+export const useSlidingPane = () => {
+    const context = useContext(SlidingPaneContext);
+    if (!context) {
+        throw new Error('useSlidingPane must be used within a SlidingPaneProvider');
+    }
+    return context;
+};
diff --git a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/SlidingPane/index.tsx b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/SlidingPane/index.tsx
new file mode 100644
index 00000000000..53a8b666fa0
--- /dev/null
+++ b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/SlidingPane/index.tsx
@@ -0,0 +1,308 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { ReactNode, useEffect, useRef, useState } from "react";
+import { SlidingPaneContext, useSlidingPane } from "./context";
+import styled from '@emotion/styled';
+import { Codicon } from "../../../../Codicon/Codicon";
+import { VERTICAL_HELPERPANE_HEIGHT } from "../../../constants";
+import { ThemeColors } from "../../../../../styles";
+
+const DEFAULT_SLIDING_WINDOW_HEIGHT = `${VERTICAL_HELPERPANE_HEIGHT}px`;
+const DEFAULT_SLIDING_WINDOW_WIDTH = 370;
+
+type SlidingWindowProps = {
+    children: React.ReactNode;
+}
+
+const SlidingWindowContainer = styled.div`
+    display: flex;
+    position: relative;
+    width: 320px;
+    max-height: 350px;
+    overflow-x: scroll;
+    overflow-y: scroll;
+    padding: 0px;
+    background-color: var(--vscode-dropdown-background);
+    transition: height 0.3s ease-in-out;
+`;
+
+//TODO: move it a common place
+export type VisitedPagesElement = {
+    name: string;
+    params: Record<string, unknown>;
+}
+
+export const SlidingWindow = ({ children }: SlidingWindowProps) => {
+    const [visitedPages, setVisitedPages] = useState<VisitedPagesElement[]>([{
+        name: "PAGE1",
+        params: {}
+    }]);
+    const [prevPage, setPrevPage] = useState<VisitedPagesElement>();
+    const [height, setHeight] = useState(DEFAULT_SLIDING_WINDOW_HEIGHT);
+    const [width, setWidth] = useState(DEFAULT_SLIDING_WINDOW_WIDTH);
+    const [clearAnimations, setClearAnimations] = useState(false);
+    const isInitialRender = useRef(true);
+
+
+    const moveToNext = (nextPage: VisitedPagesElement) => {
+        setVisitedPages([...visitedPages, nextPage]);
+    };
+
+    const getParams = () => {
+        if (visitedPages.length > 0) {
+            return visitedPages[visitedPages.length - 1].params;
+        }
+    }
+
+    const moveToPrev = () => {
+        if (visitedPages.length > 1) {
+            const visitedPagesCopy = [...visitedPages];
+            visitedPagesCopy.pop();
+            setVisitedPages(visitedPagesCopy);
+        }
+    };
+    return (
+        <SlidingPaneContext.Provider
+            value={{
+                height: height,
+                width: width,
+                setWidth: setWidth,
+                setHeight: setHeight,
+                moveToNext: moveToNext,
+                moveToPrev: moveToPrev,
+                visitedPages: visitedPages,
+                setVisitedPages: setVisitedPages,
+                clearAnimations: clearAnimations,
+                setClearAnimations: setClearAnimations,
+                prevPage: prevPage,
+                setPrevPage: setPrevPage,
+                getParams: getParams,
+                isInitialRender: isInitialRender
+            }}>
+            <SlidingWindowContainer style={{  width: width }}>
+                {children}
+            </SlidingWindowContainer>
+        </SlidingPaneContext.Provider>
+    );
+}
+
+export const SlidingPaneContainer = styled.div<{ index: number; isCurrent?: boolean; width?: string, clearAnimations?: boolean, isInitialRender?: React.MutableRefObject<boolean> }>`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  transition: ${({ clearAnimations }: { clearAnimations: boolean }) =>
+        clearAnimations ? 'none' : 'transform 0.3s ease-in-out, height 0.3s ease-in-out'};
+  transform: ${({ index, isInitialRender }: { index: number, isInitialRender?: React.MutableRefObject<boolean> }) => 
+        isInitialRender?.current ? 'none' : `translateX(${index * 100}%)`};
+`;
+
+type SlidingPaneProps = {
+    name: string,
+    paneHeight?: string,
+    paneWidth?: number,
+    nextView?: string,
+    prevView?: string,
+    children: React.ReactNode,
+    disableAnimation?: boolean
+}
+
+export const SlidingPane = ({ children, name, paneHeight, paneWidth }: SlidingPaneProps) => {
+    const { setHeight, setWidth, visitedPages, setClearAnimations, clearAnimations, isInitialRender } = useSlidingPane();
+    const [index, setIndex] = useState(1);
+    const currentPage = visitedPages[visitedPages.length - 1];
+    const prevVisitedPagesLength = useRef(visitedPages.length);
+    useEffect(() => {
+        setClearAnimations(true);
+        setIndex(visitedPages.length >= prevVisitedPagesLength.current ? 1 : -1);
+        if (name === currentPage.name) {
+            setTimeout(() => {
+                setClearAnimations(false);
+            }, 50);
+            setHeight(paneHeight || DEFAULT_SLIDING_WINDOW_HEIGHT);
+            setWidth(paneWidth || DEFAULT_SLIDING_WINDOW_WIDTH);
+            setTimeout(() => {
+                setIndex(0);
+                if (isInitialRender.current) {
+                    isInitialRender.current = false;
+                }
+            }, 50);
+        }
+        prevVisitedPagesLength.current = visitedPages.length;
+    }, [visitedPages, name, currentPage, setClearAnimations, setHeight, setWidth, paneHeight, paneWidth, isInitialRender]);
+
+    if (name !== currentPage.name) return null;
+    return (
+        <SlidingPaneContainer index={index} clearAnimations={clearAnimations} isInitialRender={isInitialRender}>
+            {children}
+        </SlidingPaneContainer>
+    );
+}
+
+const InvisibleButton = styled.button`
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    text-align: inherit;
+    color: ${ThemeColors.ON_SURFACE_VARIANT};
+    font: inherit;
+    cursor: pointer;
+    outline: none;
+    box-shadow: none;
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+     &:hover {
+        color: ${ThemeColors.ON_PRIMARY} ;
+    }
+`;
+
+export const ScrollableContainer = styled.div`
+    flex: 1;
+    overflow: auto;
+    min-height: 0;
+`;
+
+const SlidingPaneNavContainerElm = styled.div`
+    width: 100%;
+    max-height: 30px;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+    &:hover {
+        background-color: var(--vscode-list-activeSelectionBackground) !important;
+        cursor: pointer;
+    }
+    &:hover .sliding-pane-text {
+        color:  ${ThemeColors.ON_PRIMARY};
+    }
+`
+export const SlidingPaneCallbackCOntainer = styled.div`
+    width: 100%;
+    padding: 8px;
+    &:hover {
+        background-color:rgb(29, 29, 29);
+        cursor: pointer;
+    }
+`
+
+type SlidingPaneNavContainerProps = {
+    children?: React.ReactNode;
+    to?: string;
+    data?: any;
+    endIcon?: ReactNode;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    sx?: React.CSSProperties;
+    ref?: React.Ref<HTMLDivElement> | null;
+}
+
+export const SlidingPaneNavContainer = ({ children, to, data, endIcon, onClick, sx, ref, onMouseEnter, onMouseLeave }: SlidingPaneNavContainerProps) => {
+    const { moveToNext } = useSlidingPane();
+    const handleNavigation = () => {
+        if (!to) return;
+        moveToNext({
+            name: to,
+            params: data
+        });
+    }
+
+    return (
+        <SlidingPaneNavContainerElm onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} ref={ref} style={sx}>
+            <InvisibleButton
+                className="sliding-pane-text"
+                style={{ width: '100%' }}
+                onClick={() => {
+                    if (onClick) {
+                        onClick();
+                    } else {
+                        handleNavigation();
+                    }
+                }}
+            >
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
+                    <div>
+                        {children}
+                    </div>
+                    {
+                        endIcon ? (
+                            <>{endIcon}</>
+                        ) : to ? (
+                            <div style={{ marginLeft: '8px', display: 'flex', alignItems: 'center' }}>
+                                <Codicon name="chevron-right" />
+                            </div>
+                        ) : null
+                    }
+                </div>
+            </InvisibleButton>
+        </SlidingPaneNavContainerElm>
+    )
+}
+
+export const SlidingPaneBackButton = ({ children }: { children: ReactNode }) => {
+    const { moveToPrev, setPrevPage, visitedPages } = useSlidingPane();
+    const handleBackNavigation = () => {
+        const prevPage = visitedPages[visitedPages.length - 2];
+        setPrevPage(prevPage);
+        setTimeout(() => {
+            moveToPrev();
+        }, 50);
+
+    }
+    return (
+        <>
+            {visitedPages.length > 1 && (
+                <InvisibleButton onClick={handleBackNavigation}>
+                    <>{children}</>
+                </InvisibleButton>
+            )}
+        </>
+    )
+}
+
+const StickyHeader = styled.div`
+    position: relative;
+    padding: 8px;
+    top: 0;
+    z-index: 2;
+    width: 100%;
+`;
+
+
+export const SlidingPaneHeader = ({ children }: { children: ReactNode }) => {
+    return (
+        <StickyHeader>
+            <div style={{ display: 'flex', gap: '8px', alignItems: 'center', justifyContent: 'flex-start', color: ThemeColors.ON_SURFACE_VARIANT }}>
+                <SlidingPaneBackButton>
+                    <Codicon sx={{ color: ThemeColors.ON_SURFACE_VARIANT }} name="chevron-left"/>
+                </SlidingPaneBackButton>
+                {children}
+            </div>
+        </StickyHeader>
+    )
+}
+
+
+export const CopilotFooter = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+`;
diff --git a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/types/common.ts b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/types/common.ts
index 981db4e67b0..a5ca17fe2ce 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/types/common.ts
+++ b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/types/common.ts
@@ -19,6 +19,7 @@
 export type StyleBase = {
     className?: string;
     sx?: React.CSSProperties;
+    zIndex?: number;
 };
 
 export type DropdownContainerStyles = StyleBase & {
diff --git a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/types/helperPane.ts b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/types/helperPane.ts
index 31e54ae14e7..8931578157d 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/types/helperPane.ts
+++ b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Common/types/helperPane.ts
@@ -126,3 +126,8 @@ export type HelperPaneProps = PropsWithChildren<{
     helperPaneHeight: HelperPaneHeight;
     sx?: CSSProperties;
 }>;
+
+export type HelperPaneCustomProps = PropsWithChildren<{
+    sx?: CSSProperties;
+    anchorRef?:RefObject<HTMLDivElement>
+}>;
diff --git a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Form/ExpressionEditor.tsx b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Form/ExpressionEditor.tsx
index a386cc996d6..4f9a902b710 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Form/ExpressionEditor.tsx
+++ b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Form/ExpressionEditor.tsx
@@ -60,18 +60,35 @@ export const StyledTextArea = styled(AutoResizeTextArea)`
 `;
 
 export const DropdownContainer = styled.div<StyleBase>`
-    position: absolute;
-    z-index: 2001;
-    filter: drop-shadow(0 3px 8px rgb(0 0 0 / 0.2));
+ position: absolute;
+  z-index: ${(props: StyleBase) => props.zIndex ?? 2001};
+  filter: drop-shadow(0 3px 8px rgb(0 0 0 / 0.2));
     ${(props: StyleBase) => props.sx}
-
-    *,
-    *::before,
-    *::after {
-        box-sizing: border-box;
-    }
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
 `;
 
+export const ifCTRLandUP = (e: React.KeyboardEvent) => {
+    return (
+        (e.ctrlKey || e.metaKey) && e.key === "ArrowUp"
+    );
+};
+
+export const ifCTRLandDown = (e: React.KeyboardEvent) => {
+    return (
+        (e.ctrlKey || e.metaKey) && e.key === "ArrowDown"
+    );
+};
+
+export const ifCTRLandENTER = (e: React.KeyboardEvent) => {
+    return (
+        (e.ctrlKey || e.metaKey) && e.key === "Enter"
+    );
+};
+
 export const ExpressionEditor = forwardRef<FormExpressionEditorRef, FormExpressionEditorElProps>((props, ref) => {
     const {
         containerRef,
@@ -108,6 +125,7 @@ export const ExpressionEditor = forwardRef<FormExpressionEditorRef, FormExpressi
         useTransaction,
         onFocus,
         onBlur,
+        helperPaneZIndex,
         ...rest
     } = props;
 
@@ -128,7 +146,7 @@ export const ExpressionEditor = forwardRef<FormExpressionEditorRef, FormExpressi
         prefix: /((?:\w|')*)$/,
         suffix: /^((?:\w|')*)/
     };
-    const showCompletions = showDefaultCompletion || completions?.length > 0;
+    const showCompletions = (showDefaultCompletion || completions?.length > 0) && !isHelperPaneOpen;
 
     const editorWidth = useMemo(() => {
         if (textAreaRef.current) {
@@ -359,7 +377,7 @@ export const ExpressionEditor = forwardRef<FormExpressionEditorRef, FormExpressi
         const arrowPosition = getHelperPaneArrowPosition(containerRef, calculatedHelperPaneOrigin, helperPanePosition);
 
         return (
-            <DropdownContainer ref={helperPaneContainerRef} sx={{ ...helperPanePosition, ...helperPaneSx }}>
+            <DropdownContainer ref={helperPaneContainerRef} sx={{ ...helperPanePosition, ...helperPaneSx }} zIndex={helperPaneZIndex}>
                 <Transition show={isHelperPaneOpen} {...ANIMATION}>
                     {getHelperPane(value, handleChange, helperPaneHeight, height)}
                     {arrowPosition && (
@@ -370,7 +388,20 @@ export const ExpressionEditor = forwardRef<FormExpressionEditorRef, FormExpressi
         );
     };
 
+
+
+    const isReservedKeyCombinationPressed = (e: React.KeyboardEvent) => {
+        return ( (e.ctrlKey || e.metaKey) ||
+            ifCTRLandDown(e) ||
+            ifCTRLandUP(e) ||
+            ifCTRLandENTER(e)
+        );
+    }
+
     const handleInputKeyDown = async (e: React.KeyboardEvent) => {
+        if (!isReservedKeyCombinationPressed(e)) {
+            changeHelperPaneState?.(false);
+        }
         if (dropdownContainerRef.current) {
             const hoveredEl = dropdownContainerRef.current.querySelector('.hovered');
             if (dropdownRef.current) {
@@ -522,6 +553,10 @@ export const ExpressionEditor = forwardRef<FormExpressionEditorRef, FormExpressi
         }
     }));
 
+    const isInsideModal = (element: Element) => {
+        return element.closest('.unq-modal-overlay') !== null;
+    };
+
     useEffect(() => {
         // Prevent blur event when clicking on the dropdown
         const handleOutsideClick = async (e: any) => {
@@ -531,7 +566,8 @@ export const ExpressionEditor = forwardRef<FormExpressionEditorRef, FormExpressi
                 !dropdownContainerRef.current?.contains(e.target) &&
                 !helperPaneContainerRef.current?.contains(e.target) &&
                 !anchorRef?.current?.contains(e.target) &&
-                !fnSignatureElRef.current?.contains(e.target)
+                !fnSignatureElRef.current?.contains(e.target) &&
+                !isInsideModal(e.target)
             ) {
                 // Additional actions to be performed when the expression editor loses focus
                 setIsFocused(false);
@@ -585,7 +621,7 @@ export const ExpressionEditor = forwardRef<FormExpressionEditorRef, FormExpressi
             {isSavingExpression && <ProgressIndicator barWidth={6} sx={{ top: '100%' }} />}
             {isFocused &&
                 createPortal(
-                    <DropdownContainer ref={dropdownContainerRef} sx={dropdownElPosition}>
+                    <DropdownContainer ref={dropdownContainerRef} sx={dropdownElPosition} zIndex={helperPaneZIndex}>
                         <Transition show={showCompletions} {...ANIMATION_SCALE_DOWN}>
                             <Codicon
                                 id="expression-editor-close"
@@ -620,9 +656,10 @@ export const ExpressionEditor = forwardRef<FormExpressionEditorRef, FormExpressi
                     document.body
                 )}
             {isFocused && getHelperPane && createPortal(getHelperPaneComponent(), document.body)}
+
             {isFocused &&
                 createPortal(
-                    <DropdownContainer sx={fnSignatureElPosition}>
+                    <DropdownContainer sx={fnSignatureElPosition} zIndex={helperPaneZIndex}>
                         <Transition show={!!fnSignature} {...ANIMATION_SCALE_UP}>
                             <FnSignatureEl
                                 ref={fnSignatureElRef}
diff --git a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Form/index.tsx b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Form/index.tsx
index 4e35b3f4834..ade0f1edebb 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Form/index.tsx
+++ b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/components/Form/index.tsx
@@ -29,6 +29,9 @@ import { Icon } from '../../../Icon/Icon';
 
 import { ThemeColors } from '../../../../styles';
 
+export const EXPR_ICON_WIDTH = 26;
+export const EXPR_ICON_HEIGHT = 26;
+
 // Styled Components
 namespace Ex {
     export const Container = styled.div`
diff --git a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/constants/form.ts b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/constants/form.ts
index 163edc867e0..28295a6ea49 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/constants/form.ts
+++ b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/constants/form.ts
@@ -18,5 +18,6 @@
 
 /* Helper pane related */
 /* All these values are in pixels */
-export const HELPER_PANE_WIDTH = 350;
+export const HELPER_PANE_WIDTH = 370;
 export const HELPER_PANE_HEIGHT = 400;
+export const VERTICAL_HELPERPANE_HEIGHT = 300;
\ No newline at end of file
diff --git a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/index.tsx b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/index.tsx
index cfe5b924a40..7f480d85cab 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/index.tsx
+++ b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/index.tsx
@@ -21,7 +21,9 @@ export { FormExpressionEditorWrapper as FormExpressionEditor } from './component
 export { HeaderExpressionEditorWrapper as HeaderExpressionEditor } from './components/Header';
 export { TokenEditor } from './components/Token';
 export { default as HelperPane } from './components/Common/HelperPane';
-
+export { default as HelperPaneCustom } from './components/Common/HelperPaneCustom';
+export { SlidingPaneContainer } from './components/Common/SlidingPane';
+export { SlidingPaneContext } from './components/Common/SlidingPane/context'
 /* Types */
 export * from './types';
 
diff --git a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/types/common.ts b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/types/common.ts
index 3fa440c8460..aee06bdab3f 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/types/common.ts
+++ b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/types/common.ts
@@ -194,7 +194,7 @@ export type ExpressionEditorRef = {
 
 /* <------ Types related to the helper pane ------> */
 
-export type HelperPaneOrigin = 'bottom' | 'top' | 'left' | 'right' | 'auto';
+export type HelperPaneOrigin = 'bottom' | 'left' | 'right' | 'auto' | 'vertical' | 'top';
 
 export type HelperPaneHeight = 'full' | '3/4' | 'default';
 
diff --git a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/types/form.ts b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/types/form.ts
index 5f1cbcb2d6d..96e951628a3 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/types/form.ts
+++ b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/types/form.ts
@@ -60,6 +60,7 @@ type FormExpressionEditorElBaseProps = ExpressionEditorProps & HelperPaneConditi
     resize?: 'vertical' | 'disabled';
     growRange?: { start: number, offset: number };
     actionButtons?: ActionButtonType[];
+    helperPaneZIndex?: number
 }
 
 export type FormExpressionEditorElProps = FormExpressionEditorElBaseProps & {
diff --git a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/utils/form.tsx b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/utils/form.tsx
index 9ce9ea323ae..ae72108328b 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/utils/form.tsx
+++ b/workspaces/common-libs/ui-toolkit/src/components/ExpressionEditor/utils/form.tsx
@@ -16,9 +16,9 @@
  * under the License.
  */
 
-import { MutableRefObject } from "react";
+import { CSSProperties, MutableRefObject } from "react";
 import { HelperPaneHeight, HelperPaneOrigin, HelperPanePosition } from "../types";
-import { HELPER_PANE_HEIGHT, HELPER_PANE_WIDTH, ARROW_HEIGHT, ARROW_OFFSET } from "../constants"
+import { HELPER_PANE_HEIGHT, HELPER_PANE_WIDTH, ARROW_HEIGHT, ARROW_OFFSET, VERTICAL_HELPERPANE_HEIGHT, HELPER_PANE_EX_BTN_OFFSET } from "../constants"
 
 export const convertHelperPaneHeightToCSS = (helperPaneHeight: HelperPaneHeight): string => {
     switch (helperPaneHeight) {
@@ -27,10 +27,15 @@ export const convertHelperPaneHeightToCSS = (helperPaneHeight: HelperPaneHeight)
         case '3/4':
             return '75vh';
         default:
-            return `${HELPER_PANE_HEIGHT}px`;
+            return `${VERTICAL_HELPERPANE_HEIGHT}px`;
     }
 }
 
+const getVerticalPosition = (expressionEditorRect: DOMRect) => {
+    if (window.innerHeight - (expressionEditorRect.top + expressionEditorRect.height) > VERTICAL_HELPERPANE_HEIGHT) return "bottom";
+    return "top"
+}
+
 /**
  * If helper pane origin is auto, calculate the best position for the helper pane based on the expression editor position
  * @param expressionEditorRef - The ref of the expression editor
@@ -42,13 +47,19 @@ export const getHelperPaneOrigin = (
     helperPaneOrigin: HelperPaneOrigin
 ): HelperPaneOrigin => {
     // If the origin is specified, return it
-    if (helperPaneOrigin !== 'auto') {
+    if (helperPaneOrigin !== 'auto' && helperPaneOrigin !== 'vertical') {
         return helperPaneOrigin;
     }
 
-    // Rendering priority goes as left, right, bottom
     const expressionEditor = expressionEditorRef.current!;
     const rect = expressionEditor.getBoundingClientRect();
+
+    //if origin is vertical then priority is bottom > top
+    if (helperPaneOrigin === "vertical") {
+        return getVerticalPosition(rect)
+    }
+
+    //when auto, Rendering priority goes as left, right, bottom
     if (rect.left > HELPER_PANE_WIDTH + ARROW_HEIGHT) {
         return 'left';
     } else if (window.innerWidth - (rect.left + rect.width) > HELPER_PANE_WIDTH + ARROW_HEIGHT) {
@@ -63,11 +74,15 @@ export const getHelperPanePosition = (
     helperPaneOrigin: HelperPaneOrigin,
     helperPaneHeight: HelperPaneHeight,
     helperPaneWidth?: number
-): HelperPanePosition => {
+): HelperPanePosition & React.CSSProperties => {
     const expressionEditor = expressionEditorRef.current!;
     const rect = expressionEditor.getBoundingClientRect();
     if (helperPaneOrigin === 'bottom') {
-        return { top: rect.top + rect.height, left: rect.left };
+        return { top: rect.top + rect.height, left: rect.left + HELPER_PANE_EX_BTN_OFFSET + 2};
+    }
+
+    if (helperPaneOrigin === 'top') {
+        return { top: rect.top,  left: rect.left + HELPER_PANE_EX_BTN_OFFSET + 2, transform: 'translateY(-100%)' } as HelperPanePosition & CSSProperties;
     }
 
     const position: HelperPanePosition = { top: 0, left: 0 };
@@ -85,7 +100,7 @@ export const getHelperPanePosition = (
     if (helperPaneHeight === 'full') {
         return position;
     }
-    
+
     if (helperPaneHeight === '3/4') {
         position.top = window.innerHeight / 8;
         return position;
@@ -110,7 +125,7 @@ export const getHelperPaneArrowPosition = (
     helperPaneOrigin: HelperPaneOrigin,
     helperPanePosition: HelperPanePosition
 ): HelperPanePosition | undefined => {
-    if (helperPaneOrigin === 'bottom' || !helperPanePosition) {
+    if (helperPaneOrigin === 'bottom' || helperPaneOrigin === 'top' || !helperPanePosition) {
         return undefined;
     }
 
diff --git a/workspaces/common-libs/ui-toolkit/src/components/Stepper/CompletedStepCard.tsx b/workspaces/common-libs/ui-toolkit/src/components/Stepper/CompletedStepCard.tsx
index 1b993716752..c1e79ac5ae4 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/Stepper/CompletedStepCard.tsx
+++ b/workspaces/common-libs/ui-toolkit/src/components/Stepper/CompletedStepCard.tsx
@@ -21,9 +21,6 @@ import styled from "@emotion/styled";
 import { colors } from "../Commons/Colors";
 
 const RightSign = styled.div`
-    position: relative;
-    top: 15%;
-    left: 35%;
     width: 5px;
     height: 12px;
     border: 2px solid white;
diff --git a/workspaces/common-libs/ui-toolkit/src/components/Stepper/IncompleteStepCard.tsx b/workspaces/common-libs/ui-toolkit/src/components/Stepper/IncompleteStepCard.tsx
index fb52d2ad1fe..1587dc2831a 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/Stepper/IncompleteStepCard.tsx
+++ b/workspaces/common-libs/ui-toolkit/src/components/Stepper/IncompleteStepCard.tsx
@@ -21,10 +21,6 @@ import styled from "@emotion/styled";
 import { colors } from "../Commons/Colors";
 
 const StepNumber = styled.div`
-    display: flex;
-    justify-content: center;
-    margin-top: 4px;
-    margin-left: 8px;
     color: var(--vscode-editor-background);
 `;
 
diff --git a/workspaces/common-libs/ui-toolkit/src/components/Stepper/Stepper.tsx b/workspaces/common-libs/ui-toolkit/src/components/Stepper/Stepper.tsx
index 5588add15fd..096801a4e08 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/Stepper/Stepper.tsx
+++ b/workspaces/common-libs/ui-toolkit/src/components/Stepper/Stepper.tsx
@@ -66,11 +66,11 @@ export const StepperContainer = styled.div<StepperContainerProps>`
 export const StepCard = styled.div`
     display: flex;
     flex-direction: row;
+    align-items: center;
 `;
 
 export const StepTitle = styled.div`
     font-size: 14px;
-    padding-top: 12px;
     padding-left: 5px;
     color: ${(props: TitleProps) => props.color};
     font-weight: 600;
@@ -104,23 +104,21 @@ export const StepStatus = styled.div`
 
 export const StepCircle = styled.div`
     display: flex;
-    align-self: center;
+    align-items: center;
+    justify-content: center;
     background-color: ${(props: StepperStyleProps) => props.color};
     width: 24px;
     height: 24px;
+    min-width: 24px;
+    min-height: 24px;
     border-radius: 50%;
-    position: relative;
-    left: 12px;
-    top: 18px;
-    transform: translate(-50%, -50%);
+    flex-shrink: 0;
 `;
 
 export const HorizontalBar = styled.div`
     width: 120px;
     background-color: var(--vscode-editorIndentGuide-activeBackground);
     height: 1px;
-    position: relative;
-    top: 20px;
     margin-left: 5px;
     margin-right: 5px;
 `;
diff --git a/workspaces/common-libs/ui-toolkit/src/components/TabPanel/TabPanel.tsx b/workspaces/common-libs/ui-toolkit/src/components/TabPanel/TabPanel.tsx
index a4ed0e20749..7d81f062aea 100644
--- a/workspaces/common-libs/ui-toolkit/src/components/TabPanel/TabPanel.tsx
+++ b/workspaces/common-libs/ui-toolkit/src/components/TabPanel/TabPanel.tsx
@@ -31,6 +31,7 @@ export interface TabPanelProps {
     onViewChange: (tabId: string) => void;
     children: ReactNode;
     childrenSx?: React.CSSProperties;
+    sx?: React.CSSProperties;
 }
 
 const TabContainer = styled.div`
@@ -110,10 +111,11 @@ export const TabPanel: React.FC<TabPanelProps> = ({
     currentViewId,
     onViewChange,
     children,
-    childrenSx
+    childrenSx,
+    sx
 }) => {
     return (
-        <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', height: '100%', ...sx }}>
             <TabContainer>
                 {views.map(view => (
                     <TabButton
diff --git a/workspaces/mi/mi-core/src/rpc-types/mi-diagram/index.ts b/workspaces/mi/mi-core/src/rpc-types/mi-diagram/index.ts
index 42136b2563d..7dc175cf2b4 100644
--- a/workspaces/mi/mi-core/src/rpc-types/mi-diagram/index.ts
+++ b/workspaces/mi/mi-core/src/rpc-types/mi-diagram/index.ts
@@ -257,7 +257,16 @@ import {
     GetCodeDiagnosticsReqeust,
     GetCodeDiagnosticsResponse,
     GetConnectorIconRequest,
-    GetConnectorIconResponse
+    GetConnectorIconResponse,
+    GetPomFileContentResponse,
+    GetExternalConnectorDetailsResponse,
+    WriteMockServicesRequest,
+    WriteMockServicesResponse,
+    GetMockServicesResponse,
+    ConfigureKubernetesRequest,
+    ConfigureKubernetesResponse,
+    UpdateRegistryPropertyRequest,
+    Property
 } from "./types";
 
 export interface MiDiagramAPI {
@@ -430,4 +439,12 @@ export interface MiDiagramAPI {
     shouldDisplayPayloadAlert: () => Promise<boolean>;
     displayPayloadAlert: () => Promise<void>;
     closePayloadAlert: () => Promise<void>;
+    getPomFileContent: () => Promise<GetPomFileContentResponse>;
+    getExternalConnectorDetails: () => Promise<GetExternalConnectorDetailsResponse>;
+    writeMockServices: (params: WriteMockServicesRequest) => Promise<WriteMockServicesResponse>;
+    getMockServices: () => Promise<GetMockServicesResponse>;
+    configureKubernetes: (params: ConfigureKubernetesRequest) => Promise<ConfigureKubernetesResponse>;
+    isKubernetesConfigured: () => Promise<boolean>;
+    updatePropertiesInArtifactXML: (params: UpdateRegistryPropertyRequest) => Promise<string>;
+    getPropertiesFromArtifactXML: (params: string) => Promise<Property[] | undefined>;
 }
diff --git a/workspaces/mi/mi-core/src/rpc-types/mi-diagram/rpc-type.ts b/workspaces/mi/mi-core/src/rpc-types/mi-diagram/rpc-type.ts
index 9e5afa76626..26c4cf30ad8 100644
--- a/workspaces/mi/mi-core/src/rpc-types/mi-diagram/rpc-type.ts
+++ b/workspaces/mi/mi-core/src/rpc-types/mi-diagram/rpc-type.ts
@@ -260,7 +260,16 @@ import {
     GetCodeDiagnosticsResponse,
     UpdateMediatorResponse,
     GetConnectorIconRequest,
-    GetConnectorIconResponse
+    GetConnectorIconResponse,
+    GetPomFileContentResponse,
+    GetExternalConnectorDetailsResponse,
+    WriteMockServicesRequest,
+    WriteMockServicesResponse,
+    GetMockServicesResponse,
+    ConfigureKubernetesRequest,
+    ConfigureKubernetesResponse,
+    Property,
+    UpdateRegistryPropertyRequest
 } from "./types";
 import { RequestType, NotificationType } from "vscode-messenger-common";
 
@@ -438,3 +447,12 @@ export const getCodeDiagnostics: RequestType<GetCodeDiagnosticsReqeust, GetCodeD
 export const shouldDisplayPayloadAlert: RequestType<void, boolean> = { method: `${_preFix}/shouldDisplayPayloadAlert` };
 export const displayPayloadAlert: RequestType<void, void> = { method: `${_preFix}/displayPayloadAlert` };
 export const closePayloadAlert: RequestType<void, void> = { method: `${_preFix}/closePayloadAlert` };
+export const getValueOfEnvVariable: RequestType<string, string> = { method: `${_preFix}/getValueOfEnvVariable` };
+export const getPomFileContent: RequestType<void, GetPomFileContentResponse> = { method: `${_preFix}/getPomFileContent` };
+export const getExternalConnectorDetails: RequestType<void, GetExternalConnectorDetailsResponse> = { method: `${_preFix}/getExternalConnectorDetails` };
+export const writeMockServices: RequestType<WriteMockServicesRequest, WriteMockServicesResponse> = { method: `${_preFix}/writeMockServices` };
+export const getMockServices: RequestType<void, GetMockServicesResponse> = { method: `${_preFix}/getMockServices` };
+export const configureKubernetes: RequestType<ConfigureKubernetesRequest, ConfigureKubernetesResponse> = { method: `${_preFix}/configureKubernetes` };
+export const isKubernetesConfigured: RequestType<void, boolean> = { method: `${_preFix}/isKubernetesConfigured` };
+export const updatePropertiesInArtifactXML: RequestType<UpdateRegistryPropertyRequest, string> = { method: `${_preFix}/updatePropertiesInArtifactXML` };
+export const getPropertiesFromArtifactXML: RequestType<string, Property[] | undefined> = { method: `${_preFix}/getPropertiesFromArtifactXML` };
diff --git a/workspaces/mi/mi-core/src/rpc-types/mi-diagram/types.ts b/workspaces/mi/mi-core/src/rpc-types/mi-diagram/types.ts
index 0e62327383c..3c3deb6e683 100644
--- a/workspaces/mi/mi-core/src/rpc-types/mi-diagram/types.ts
+++ b/workspaces/mi/mi-core/src/rpc-types/mi-diagram/types.ts
@@ -1257,7 +1257,7 @@ export interface WriteContentToFileResponse {
 }
 
 export interface HandleFileRequest {
-    operation : "read" | "write" | "delete";
+    operation : "read" | "write" | "delete" | "exists";
     fileName : string;
     filePath : string;
     content?: string;
@@ -1463,6 +1463,18 @@ export interface CreateBallerinaModuleResponse {
     path: string;
 }
 
+export interface ConfigureKubernetesRequest {
+    name: string;
+    replicas: number;
+    targetImage: string;
+    ports: Array<{ port: number }>;
+    envValues: any[];
+}
+
+export interface ConfigureKubernetesResponse {
+    path: string;
+}
+
 export interface GetBackendRootUrlResponse {
     url: string;
 }
@@ -2142,6 +2154,7 @@ export interface GenerateConnectorResponse {
 export interface GetHelperPaneInfoRequest {
     documentUri: string;
     position: Position;
+    needLastMediator?: boolean;
 }
 
 export type GetHelperPaneInfoResponse = HelperPaneData;
@@ -2199,3 +2212,30 @@ export interface XmlCode{
     fileName: string;
     code: string;
 }
+
+export interface GetPomFileContentResponse{
+    content: string;
+}
+
+export interface GetExternalConnectorDetailsResponse{
+    connectors: string[];
+}
+
+export interface WriteMockServicesRequest {
+    content: string[];
+    fileNames?: string[];
+}
+
+export interface WriteMockServicesResponse {
+    status: boolean;
+}
+
+export interface GetMockServicesResponse{
+    mockServices: string[];
+    mockServiceNames: string[];
+}
+
+export interface UpdateRegistryPropertyRequest {
+    targetFile: string;
+    properties: Property[];
+}
diff --git a/workspaces/mi/mi-core/src/state-machine-types.ts b/workspaces/mi/mi-core/src/state-machine-types.ts
index e7a2c51fc2f..c78cf04f35b 100644
--- a/workspaces/mi/mi-core/src/state-machine-types.ts
+++ b/workspaces/mi/mi-core/src/state-machine-types.ts
@@ -76,6 +76,8 @@ export enum MACHINE_VIEW {
     BallerinaModuleForm = "Ballerina Module Creation Form",
     DataSourceForm = "Data Source Creation Form",
     ImportArtifactForm = "Add Artifact Form",
+    KubernetesConfigurationForm = "Configure Kubernetes Deployment Form",
+    RegistryForm = "Manage Registry Properties Form",
     AddDriverPopup = "Add Driver Popup",
     Samples = "Samples",
     ImportProject = "Import Project",
@@ -93,6 +95,7 @@ export enum MACHINE_VIEW {
     SETUP_ENVIRONMENT = "Setup Environment",
     ImportConnectorForm = "Import Connector",
     IdpConnectorSchemaGeneratorForm = "IDP Connector Schema Generator Form",
+    DataMapperMigrationForm = "DataMapper Migration Form",
 }
 
 export enum AI_MACHINE_VIEW {
diff --git a/workspaces/mi/mi-data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportCustomTypePanel.tsx b/workspaces/mi/mi-data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportCustomTypePanel.tsx
index ed1b20a6514..94824558772 100644
--- a/workspaces/mi/mi-data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportCustomTypePanel.tsx
+++ b/workspaces/mi/mi-data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportCustomTypePanel.tsx
@@ -179,7 +179,7 @@ export function ImportCustomTypePanel(props: ImportCustomTypePanelProps) {
                         label="Custom Type Name"
                         placeholder="Type name"
                         rows={1}
-                        sx={{ border: "#00ff00", marginBottom: 10 }}
+                        sx={{ marginBottom: 10 }}
                         errorMsg={errors && errors.typeName?.message.toString()}
                     />
                 )}
@@ -209,7 +209,6 @@ export function ImportCustomTypePanel(props: ImportCustomTypePanelProps) {
                         rows={payloadRows}
                         resize="vertical"
                         placeholder={generatePlaceholder}
-                        sx={{ border: "#00ff00" }}
                         errorMsg={errors && errors.payload?.message.toString()}
                     />
                 )}
diff --git a/workspaces/mi/mi-data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportDataPanel.tsx b/workspaces/mi/mi-data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportDataPanel.tsx
index 4ea4f59cf20..ff8f8672c6d 100644
--- a/workspaces/mi/mi-data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportDataPanel.tsx
+++ b/workspaces/mi/mi-data-mapper/src/components/DataMapper/SidePanel/ImportData/ImportDataPanel.tsx
@@ -184,7 +184,6 @@ export function ImportDataPanel(props: ImportDataPanelProps) {
                         resize="vertical"
                         placeholder={generatePlaceholder}
                         value={fileContent}
-                        sx={{border: "#00ff00"}}
                         errorMsg={errors && errors.payload?.message.toString()}
                     />
                 )}
@@ -197,7 +196,6 @@ export function ImportDataPanel(props: ImportDataPanelProps) {
                         {...field}
                         placeholder=','
                         label="Delimiter"
-                        sx={{ border: "#00ff00" }}
                         errorMsg={errors && errors.delimiter?.message.toString()}
                     />
                 )}
diff --git a/workspaces/mi/mi-diagram/src/components/Form/FormExpressionField/index.tsx b/workspaces/mi/mi-diagram/src/components/Form/FormExpressionField/index.tsx
index 2b381f00815..30002c82ad4 100644
--- a/workspaces/mi/mi-diagram/src/components/Form/FormExpressionField/index.tsx
+++ b/workspaces/mi/mi-diagram/src/components/Form/FormExpressionField/index.tsx
@@ -91,6 +91,8 @@ type FormExpressionFieldProps = {
     nodeRange: Range;
     canChange: boolean;
     supportsAIValues?: boolean;
+    artifactPath?: string;
+    artifactType?: string;
     onChange: (value: FormExpressionFieldValue) => void;
     onFocus?: (e?: any) => void | Promise<void>;
     onBlur?: (e?: any) => void | Promise<void>;
@@ -98,6 +100,7 @@ type FormExpressionFieldProps = {
     openExpressionEditor: (value: FormExpressionFieldValue, setValue: (value: FormExpressionFieldValue) => void) => void;
     errorMsg: string;
     sx?: CSSProperties;
+    isUnitTest?: boolean;
 };
 
 export namespace S {
@@ -173,13 +176,16 @@ export const FormExpressionField = (params: FormExpressionFieldProps) => {
         nodeRange,
         canChange,
         supportsAIValues,
+        artifactPath,
+        artifactType,
         onChange,
         onCancel,
         errorMsg,
         onFocus,
         onBlur,
         openExpressionEditor,
-        sx
+        sx,
+        isUnitTest = false
     } = params;
 
     const { rpcClient } = useVisualizerContext();
@@ -246,6 +252,10 @@ export const FormExpressionField = (params: FormExpressionFieldProps) => {
     };
 
     const handleChangeHelperPaneState = (isOpen: boolean) => {
+        // Prevent opening helper pane if artifact type is API
+        if (isOpen && artifactType === "API") {
+            return;
+        }
         setIsHelperPaneOpen(isOpen);
     }
 
@@ -268,16 +278,24 @@ export const FormExpressionField = (params: FormExpressionFieldProps) => {
             nodeRange?.start == nodeRange?.end
                 ? nodeRange.start
                 : { line: nodeRange.start.line, character: nodeRange.start.character + 1 } : undefined;
-
+        
+        // Don't return helper pane if artifact type is API
+        if (artifactType === "API") {
+            return null;
+        }
+        
         return getHelperPane(
             position,
             'default',
             () => handleChangeHelperPaneState(false),
             handleHelperPaneChange,
+            artifactPath,
             undefined,
             undefined,
             380,
-            false
+            false,
+            false,
+            isUnitTest
         );
     }, [expressionRef.current, handleChangeHelperPaneState, nodeRange, getHelperPane]);
 
@@ -350,7 +368,7 @@ export const FormExpressionField = (params: FormExpressionFieldProps) => {
                     }
                 ]
                 : []),
-            ...(value.isExpression
+            ...(value.isExpression && artifactType !== "API"
                 ? [
                     {
                         tooltip: 'Open Helper Pane',
@@ -371,7 +389,8 @@ export const FormExpressionField = (params: FormExpressionFieldProps) => {
         expressionRef.current,
         handleChangeHelperPaneState,
         openExpressionEditor,
-        onChange
+        onChange,
+        artifactType
     ]);
 
     const expressionValue = useMemo(() => {
@@ -406,7 +425,7 @@ export const FormExpressionField = (params: FormExpressionFieldProps) => {
                         onCancel={handleCancel}
                         getExpressionEditorIcon={handleGetExpressionEditorIcon}
                         actionButtons={actionButtons}
-                        {...(value.isExpression && {
+                        {...(value.isExpression && artifactType !== "API" && {
                             completions,
                             isHelperPaneOpen,
                             changeHelperPaneState: handleChangeHelperPaneState,
diff --git a/workspaces/mi/mi-diagram/src/components/Form/FormGenerator.tsx b/workspaces/mi/mi-diagram/src/components/Form/FormGenerator.tsx
index 5481dc7a091..b12dfb31f42 100644
--- a/workspaces/mi/mi-diagram/src/components/Form/FormGenerator.tsx
+++ b/workspaces/mi/mi-diagram/src/components/Form/FormGenerator.tsx
@@ -129,6 +129,9 @@ export interface Element {
     expressionType?: 'xpath/jsonPath' | 'synapse';
     supportsAIValues?: boolean;
     rowCount?: number;
+    artifactPath?: string;
+    artifactType?: string;
+    isUnitTest?: boolean;
 }
 
 interface ExpressionValueWithSetter {
@@ -585,6 +588,9 @@ export function FormGenerator(props: FormGeneratorProps) {
                 canChange={element.inputType !== 'expression'}
                 supportsAIValues={element.supportsAIValues}
                 errorMsg={errorMsg}
+                artifactPath={element.artifactPath}
+                artifactType={element.artifactType}
+                isUnitTest={element.isUnitTest || false}
                 openExpressionEditor={(value, setValue) => {
                     setCurrentExpressionValue({ value, setValue });
                     setExpressionEditorField(name);
diff --git a/workspaces/mi/mi-diagram/src/components/Form/FormTokenEditor/index.tsx b/workspaces/mi/mi-diagram/src/components/Form/FormTokenEditor/index.tsx
index 70f5aee29b0..01f499b343a 100644
--- a/workspaces/mi/mi-diagram/src/components/Form/FormTokenEditor/index.tsx
+++ b/workspaces/mi/mi-diagram/src/components/Form/FormTokenEditor/index.tsx
@@ -106,6 +106,7 @@ export const FormTokenEditor = ({
             'default',
             () => handleChangeHelperPaneState(false),
             onChange,
+            undefined, // artifactPath - not available in FormTokenEditor
             addFunction,
             { width: 'auto', border: '1px solid var(--dropdown-border)' },
             height,
diff --git a/workspaces/mi/mi-diagram/src/components/Form/HelperPane/CategoryPage.tsx b/workspaces/mi/mi-diagram/src/components/Form/HelperPane/CategoryPage.tsx
index 50f4935595e..95aff8179df 100644
--- a/workspaces/mi/mi-diagram/src/components/Form/HelperPane/CategoryPage.tsx
+++ b/workspaces/mi/mi-diagram/src/components/Form/HelperPane/CategoryPage.tsx
@@ -16,15 +16,18 @@
  * under the License.
  */
 
-import React from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import { Position } from 'vscode-languageserver-types';
 import { Divider, HelperPane } from '@wso2/ui-toolkit';
 import { FunctionsPage } from './FunctionsPage';
 import { ConfigsPage } from './ConfigsPage';
+import { createHelperPaneRequestBody } from '../utils';
 import { PAGE, Page } from './index';
+import { useVisualizerContext } from '@wso2/mi-rpc-client';
 
 type PanelPageProps = {
     setCurrentPage: (page: Page) => void;
+    helperPaneResponse?: any;
 };
 
 type CategoryPageProps = {
@@ -34,9 +37,11 @@ type CategoryPageProps = {
     onClose: () => void;
     onChange: (value: string) => void;
     addFunction?: (value: string) => void;
+    artifactPath?: string;
+    isUnitTest?: boolean;
 };
 
-const DataPanel = ({ setCurrentPage }: PanelPageProps) => {
+const DataPanel = ({ setCurrentPage, helperPaneResponse }: PanelPageProps) => {
     return (
         <>
             <HelperPane.CategoryItem label="Payload" onClick={() => setCurrentPage(PAGE.PAYLOAD)} />
@@ -54,24 +59,50 @@ export const CategoryPage = ({
     isHelperPaneHeightOverflow = false,
     setCurrentPage,
     onChange,
-    addFunction
+    addFunction,
+    artifactPath,
+    isUnitTest = false
 }: CategoryPageProps) => {
+    const { rpcClient } = useVisualizerContext();
+    const [helperPaneResponse, setHelperPaneResponse] = useState<any>(null);
+
+    const getHelperPaneInfo = useCallback(() => {
+        rpcClient.getVisualizerState().then((machineView) => {
+            const requestBody = createHelperPaneRequestBody(machineView, position, artifactPath);
+            rpcClient
+                .getMiDiagramRpcClient()
+                .getHelperPaneInfo(requestBody)
+                .then((response) => {
+                    console.log('Response from getHelperPaneInfo:', response);
+                    setHelperPaneResponse(response);
+                });
+        });
+    }, [rpcClient, position, artifactPath]);
+
+    useEffect(() => {
+        getHelperPaneInfo();
+    }, [getHelperPaneInfo]);
+
     return (
         <>
             <HelperPane.Body>
                 <HelperPane.Panels>
                     <HelperPane.PanelTab id={0} title="Data" />
                     <HelperPane.PanelTab id={1} title="Functions" />
-                    <HelperPane.PanelTab id={2} title="Configs" />
+                    {!isUnitTest && (
+                        <HelperPane.PanelTab id={2} title="Configs" />
+                    )}
                     <HelperPane.PanelView id={0}>
-                        <DataPanel setCurrentPage={setCurrentPage} />
+                        <DataPanel setCurrentPage={setCurrentPage} helperPaneResponse={helperPaneResponse} />
                     </HelperPane.PanelView>
                     <HelperPane.PanelView id={1}>
-                        <FunctionsPage position={position} hideSearch={isHelperPaneHeightOverflow} onChange={onChange} addFunction={addFunction} />
-                    </HelperPane.PanelView>
-                    <HelperPane.PanelView id={2}>
-                        <ConfigsPage position={position} hideSearch={isHelperPaneHeightOverflow} onChange={onChange} />
+                        <FunctionsPage position={position} hideSearch={isHelperPaneHeightOverflow} onChange={onChange} addFunction={addFunction} artifactPath={artifactPath} />
                     </HelperPane.PanelView>
+                    {!isUnitTest && (
+                        <HelperPane.PanelView id={2}>
+                            <ConfigsPage position={position} hideSearch={isHelperPaneHeightOverflow} onChange={onChange} artifactPath={artifactPath} />
+                        </HelperPane.PanelView>
+                    )}
                 </HelperPane.Panels>
             </HelperPane.Body>
         </>
diff --git a/workspaces/mi/mi-diagram/src/components/Form/HelperPane/ConfigsPage.tsx b/workspaces/mi/mi-diagram/src/components/Form/HelperPane/ConfigsPage.tsx
index a4dce993cf9..470a28e0d0e 100644
--- a/workspaces/mi/mi-diagram/src/components/Form/HelperPane/ConfigsPage.tsx
+++ b/workspaces/mi/mi-diagram/src/components/Form/HelperPane/ConfigsPage.tsx
@@ -54,6 +54,7 @@ type ConfigsPageProps = {
     position: Position;
     hideSearch?: boolean;
     onChange: (value: string) => void;
+    artifactPath?: string;
 };
 
 /* Validation schema for the config form */
@@ -65,7 +66,7 @@ const schema = yup.object({
 
 type ConfigFormData = yup.InferType<typeof schema>;
 
-export const ConfigsPage = ({ position, onChange, hideSearch }: ConfigsPageProps) => {
+export const ConfigsPage = ({ position, onChange, hideSearch, artifactPath }: ConfigsPageProps) => {
     const { rpcClient } = useVisualizerContext();
     const firstRender = useRef<boolean>(true);
     const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -89,7 +90,7 @@ export const ConfigsPage = ({ position, onChange, hideSearch }: ConfigsPageProps
                 rpcClient
                     .getMiDiagramRpcClient()
                     .getHelperPaneInfo({
-                        documentUri: machineView.documentUri,
+                        documentUri: artifactPath ? artifactPath : machineView.documentUri,
                         position: position,
                     })
                     .then((response) => {
diff --git a/workspaces/mi/mi-diagram/src/components/Form/HelperPane/FunctionsPage.tsx b/workspaces/mi/mi-diagram/src/components/Form/HelperPane/FunctionsPage.tsx
index d43524644c7..f5114829db0 100644
--- a/workspaces/mi/mi-diagram/src/components/Form/HelperPane/FunctionsPage.tsx
+++ b/workspaces/mi/mi-diagram/src/components/Form/HelperPane/FunctionsPage.tsx
@@ -29,13 +29,15 @@ type FunctionsPageProps = {
     hideSearch?: boolean;
     onChange: (value: string) => void;
     addFunction?: (value: string) => void;
+    artifactPath?: string;
 };
 
 export const FunctionsPage = ({
     position,
     hideSearch = false,
     onChange,
-    addFunction
+    addFunction,
+    artifactPath
 }: FunctionsPageProps) => {
     const { rpcClient } = useVisualizerContext();
     const firstRender = useRef<boolean>(true);
@@ -49,7 +51,7 @@ export const FunctionsPage = ({
         setTimeout(() => {
             rpcClient.getVisualizerState().then((machineView) => {
                 rpcClient.getMiDiagramRpcClient().getHelperPaneInfo({
-                    documentUri: machineView.documentUri,
+                    documentUri: artifactPath ? artifactPath : machineView.documentUri,
                     position: position,
                 })
                     .then((response) => {
diff --git a/workspaces/mi/mi-diagram/src/components/Form/HelperPane/HeadersPage.tsx b/workspaces/mi/mi-diagram/src/components/Form/HelperPane/HeadersPage.tsx
index c22493be62d..9b03c7da396 100644
--- a/workspaces/mi/mi-diagram/src/components/Form/HelperPane/HeadersPage.tsx
+++ b/workspaces/mi/mi-diagram/src/components/Form/HelperPane/HeadersPage.tsx
@@ -21,6 +21,7 @@ import { Position } from 'vscode-languageserver-types';
 import { COMPLETION_ITEM_KIND, getIcon, HelperPane } from '@wso2/ui-toolkit';
 import { HelperPaneCompletionItem } from '@wso2/mi-core';
 import { filterHelperPaneCompletionItems, getHelperPaneCompletionItem } from '../FormExpressionField/utils';
+import { createHelperPaneRequestBody } from '../utils';
 import { debounce } from 'lodash';
 import { useVisualizerContext } from '@wso2/mi-rpc-client';
 import { PAGE, Page } from './index';
@@ -30,13 +31,15 @@ type HeadersPageProps = {
     setCurrentPage: (page: Page) => void;
     onClose: () => void;
     onChange: (value: string) => void;
+    artifactPath?: string;
 };
 
 export const HeadersPage = ({
     position,
     setCurrentPage,
     onClose,
-    onChange
+    onChange,
+    artifactPath
 }: HeadersPageProps) => {
     const { rpcClient } = useVisualizerContext();
     const firstRender = useRef<boolean>(true);
@@ -49,12 +52,11 @@ export const HeadersPage = ({
         setIsLoading(true);
         setTimeout(() => {
             rpcClient.getVisualizerState().then((machineView) => {
+                const requestBody = createHelperPaneRequestBody(machineView, position, artifactPath);
+
                 rpcClient
                     .getMiDiagramRpcClient()
-                    .getHelperPaneInfo({
-                        documentUri: machineView.documentUri,
-                        position: position,
-                    })
+                    .getHelperPaneInfo(requestBody)
                     .then((response) => {
                         if (response.headers?.length) {
                             setHeaderInfo(response.headers);
diff --git a/workspaces/mi/mi-diagram/src/components/Form/HelperPane/ParamsPage.tsx b/workspaces/mi/mi-diagram/src/components/Form/HelperPane/ParamsPage.tsx
index ad3062b8a98..8170bc666d1 100644
--- a/workspaces/mi/mi-diagram/src/components/Form/HelperPane/ParamsPage.tsx
+++ b/workspaces/mi/mi-diagram/src/components/Form/HelperPane/ParamsPage.tsx
@@ -23,6 +23,7 @@ import { HelperPaneCompletionItem } from '@wso2/mi-core';
 import { useVisualizerContext } from '@wso2/mi-rpc-client';
 import { COMPLETION_ITEM_KIND, getIcon, HelperPane } from '@wso2/ui-toolkit';
 import { filterHelperPaneCompletionItems, getHelperPaneCompletionItem } from '../FormExpressionField/utils';
+import { createHelperPaneRequestBody } from '../utils';
 import { PAGE, Page } from './index';
 
 type ParamsPageProps = {
@@ -30,13 +31,15 @@ type ParamsPageProps = {
     setCurrentPage: (page: Page) => void;
     onClose: () => void;
     onChange: (value: string) => void;
+    artifactPath?: string;
 };
 
 export const ParamsPage = ({
     position,
     setCurrentPage,
     onClose,
-    onChange
+    onChange,
+    artifactPath
 }: ParamsPageProps) => {
     const { rpcClient } = useVisualizerContext();
     const firstRender = useRef<boolean>(true);
@@ -49,12 +52,11 @@ export const ParamsPage = ({
         setIsLoading(true);
         setTimeout(() => {
             rpcClient.getVisualizerState().then((machineView) => {
+                const requestBody = createHelperPaneRequestBody(machineView, position, artifactPath);
+                
                 rpcClient
                     .getMiDiagramRpcClient()
-                    .getHelperPaneInfo({
-                        documentUri: machineView.documentUri,
-                        position: position,
-                    })
+                    .getHelperPaneInfo(requestBody)
                     .then((response) => {
                         if (response.params?.length) {
                             setParamInfo(response.params);
diff --git a/workspaces/mi/mi-diagram/src/components/Form/HelperPane/PayloadPage.tsx b/workspaces/mi/mi-diagram/src/components/Form/HelperPane/PayloadPage.tsx
index 1fed161897d..f95afb02ab0 100644
--- a/workspaces/mi/mi-diagram/src/components/Form/HelperPane/PayloadPage.tsx
+++ b/workspaces/mi/mi-diagram/src/components/Form/HelperPane/PayloadPage.tsx
@@ -24,6 +24,7 @@ import { HelperPaneCompletionItem } from '@wso2/mi-core';
 import { useVisualizerContext } from '@wso2/mi-rpc-client';
 import { Alert, COMPLETION_ITEM_KIND, getIcon, HelperPane, Icon } from '@wso2/ui-toolkit';
 import { filterHelperPaneCompletionItems, getHelperPaneCompletionItem } from '../FormExpressionField/utils';
+import { createHelperPaneRequestBody } from '../utils';
 import { PAGE, Page } from './index';
 
 const InfoMessage = styled.div`
@@ -37,13 +38,15 @@ type PayloadPageProps = {
     setCurrentPage: (page: Page) => void;
     onClose: () => void;
     onChange: (value: string) => void;
+    artifactPath?: string;
 };
 
 export const PayloadPage = ({
     position,
     setCurrentPage,
     onClose,
-    onChange
+    onChange,
+    artifactPath
 }: PayloadPageProps) => {
     const { rpcClient } = useVisualizerContext();
     const firstRender = useRef<boolean>(true);
@@ -75,12 +78,11 @@ export const PayloadPage = ({
         setIsLoading(true);
         setTimeout(() => {
             rpcClient.getVisualizerState().then((machineView) => {
+                const requestBody = createHelperPaneRequestBody(machineView, position, artifactPath);
+                
                 rpcClient
                     .getMiDiagramRpcClient()
-                    .getHelperPaneInfo({
-                        documentUri: machineView.documentUri,
-                        position: position,
-                    })
+                    .getHelperPaneInfo(requestBody)
                     .then((response) => {
                         if (response.payload?.length) {
                             setPayloadInfo(response.payload);
diff --git a/workspaces/mi/mi-diagram/src/components/Form/HelperPane/PropertiesPage.tsx b/workspaces/mi/mi-diagram/src/components/Form/HelperPane/PropertiesPage.tsx
index eaf0ff901d4..cab00788969 100644
--- a/workspaces/mi/mi-diagram/src/components/Form/HelperPane/PropertiesPage.tsx
+++ b/workspaces/mi/mi-diagram/src/components/Form/HelperPane/PropertiesPage.tsx
@@ -22,6 +22,7 @@ import { Position } from 'vscode-languageserver-types';
 import { HelperPaneCompletionItem } from '@wso2/mi-core';
 import { COMPLETION_ITEM_KIND, getIcon, HelperPane } from '@wso2/ui-toolkit';
 import { filterHelperPaneCompletionItems, getHelperPaneCompletionItem } from '../FormExpressionField/utils';
+import { createHelperPaneRequestBody } from '../utils';
 import { useVisualizerContext } from '@wso2/mi-rpc-client';
 import { PAGE, Page } from './index';
 
@@ -30,13 +31,15 @@ type PropertiesPageProps = {
     setCurrentPage: (page: Page) => void;
     onClose: () => void;
     onChange: (value: string) => void;
+    artifactPath?: string;
 };
 
 export const PropertiesPage = ({
     position,
     setCurrentPage,
     onClose,
-    onChange
+    onChange,
+    artifactPath
 }: PropertiesPageProps) => {
     const { rpcClient } = useVisualizerContext();
     const firstRender = useRef<boolean>(true);
@@ -49,12 +52,11 @@ export const PropertiesPage = ({
         setIsLoading(true);
         setTimeout(() => {
             rpcClient.getVisualizerState().then((machineView) => {
+                const requestBody = createHelperPaneRequestBody(machineView, position, artifactPath);
+                
                 rpcClient
                     .getMiDiagramRpcClient()
-                    .getHelperPaneInfo({
-                        documentUri: machineView.documentUri,
-                        position: position,
-                    })
+                    .getHelperPaneInfo(requestBody)
                     .then((response) => {
                         if (response.properties?.length) {
                             setPropertiesInfo(response.properties);
diff --git a/workspaces/mi/mi-diagram/src/components/Form/HelperPane/VariablesPage.tsx b/workspaces/mi/mi-diagram/src/components/Form/HelperPane/VariablesPage.tsx
index 245bbfa33bf..0ff457a839c 100644
--- a/workspaces/mi/mi-diagram/src/components/Form/HelperPane/VariablesPage.tsx
+++ b/workspaces/mi/mi-diagram/src/components/Form/HelperPane/VariablesPage.tsx
@@ -23,6 +23,7 @@ import { useVisualizerContext } from '@wso2/mi-rpc-client';
 import { COMPLETION_ITEM_KIND, getIcon, HelperPane } from '@wso2/ui-toolkit';
 import { HelperPaneCompletionItem } from '@wso2/mi-core';
 import { filterHelperPaneCompletionItems, getHelperPaneCompletionItem } from '../FormExpressionField/utils';
+import { createHelperPaneRequestBody } from '../utils';
 import { PAGE, Page } from './index';
 
 type VariablesPageProps = {
@@ -30,13 +31,15 @@ type VariablesPageProps = {
     setCurrentPage: (page: Page) => void;
     onClose: () => void;
     onChange: (value: string) => void;
+    artifactPath?: string;
 };
 
 export const VariablesPage = ({
     position,
     setCurrentPage,
     onClose,
-    onChange
+    onChange,
+    artifactPath
 }: VariablesPageProps) => {
     const { rpcClient } = useVisualizerContext();
     const firstRender = useRef<boolean>(true);
@@ -49,12 +52,11 @@ export const VariablesPage = ({
         setIsLoading(true);
         setTimeout(() => {
             rpcClient.getVisualizerState().then((machineView) => {
+                const requestBody = createHelperPaneRequestBody(machineView, position, artifactPath);
+
                 rpcClient
                     .getMiDiagramRpcClient()
-                    .getHelperPaneInfo({
-                        documentUri: machineView.documentUri,
-                        position: position,
-                    })
+                    .getHelperPaneInfo(requestBody)
                     .then((response) => {
                         if (response.variables?.length) {
                             setVariableInfo(response.variables);
diff --git a/workspaces/mi/mi-diagram/src/components/Form/HelperPane/index.tsx b/workspaces/mi/mi-diagram/src/components/Form/HelperPane/index.tsx
index 0c2bd2e6a58..94a03c2560c 100644
--- a/workspaces/mi/mi-diagram/src/components/Form/HelperPane/index.tsx
+++ b/workspaces/mi/mi-diagram/src/components/Form/HelperPane/index.tsx
@@ -35,7 +35,9 @@ export type HelperPaneProps = {
     onClose: () => void;
     onChange: (value: string) => void;
     addFunction?: (value: string) => void;
+    artifactPath?: string;
     sx?: CSSProperties;
+    isUnitTest?: boolean;
 };
 
 export const PAGE = {
@@ -54,7 +56,7 @@ const TOKEN_EDITOR_BOTTOM_OFFSET = 40;
 const FULLSCREEN_OFFSET = 160;
 const FULLSCREEN_DELAY = 200;
 
-const HelperPaneEl = ({ position, helperPaneHeight, isTokenEditor, isFullscreen, height: componentDefaultHeight, sx, onClose, onChange, addFunction }: HelperPaneProps) => {
+const HelperPaneEl = ({ position, helperPaneHeight, isTokenEditor, isFullscreen, height: componentDefaultHeight, sx, onClose, onChange, addFunction, artifactPath, isUnitTest }: HelperPaneProps) => {
     const [currentPage, setCurrentPage] = useState<Page>(PAGE.CATEGORY);
     const panelRef = useRef<HTMLDivElement>(null);
     const timeoutIds = useRef<NodeJS.Timeout[]>([]);
@@ -158,6 +160,8 @@ const HelperPaneEl = ({ position, helperPaneHeight, isTokenEditor, isFullscreen,
                         onClose={onClose}
                         onChange={onChange}
                         addFunction={addFunction}
+                        artifactPath={artifactPath}
+                        isUnitTest={isUnitTest}
                     />
                 )}
                 {currentPage === PAGE.PAYLOAD && (
@@ -166,7 +170,8 @@ const HelperPaneEl = ({ position, helperPaneHeight, isTokenEditor, isFullscreen,
                         setCurrentPage={setCurrentPage}
                         onClose={onClose}
                         onChange={onChange}
-                    />
+                        artifactPath={artifactPath}
+                />
                 )}
                 {currentPage === PAGE.VARIABLES && (
                     <VariablesPage
@@ -174,7 +179,8 @@ const HelperPaneEl = ({ position, helperPaneHeight, isTokenEditor, isFullscreen,
                         setCurrentPage={setCurrentPage}
                         onClose={onClose}
                         onChange={onChange}
-                    />
+                        artifactPath={artifactPath}
+                />
                 )}
                 {currentPage === PAGE.HEADERS && (
                     <HeadersPage
@@ -182,10 +188,17 @@ const HelperPaneEl = ({ position, helperPaneHeight, isTokenEditor, isFullscreen,
                         setCurrentPage={setCurrentPage}
                         onClose={onClose}
                         onChange={onChange}
-                    />
+                        artifactPath={artifactPath}
+                />
                 )}
                 {currentPage === PAGE.PARAMS && (
-                    <ParamsPage position={position} setCurrentPage={setCurrentPage} onClose={onClose} onChange={onChange} />
+                    <ParamsPage 
+                    position={position} 
+                    setCurrentPage={setCurrentPage} 
+                    onClose={onClose} 
+                    onChange={onChange}
+                    artifactPath={artifactPath}
+                />
                 )}
                 {currentPage === PAGE.PROPERTIES && (
                     <PropertiesPage
@@ -193,7 +206,8 @@ const HelperPaneEl = ({ position, helperPaneHeight, isTokenEditor, isFullscreen,
                         setCurrentPage={setCurrentPage}
                         onClose={onClose}
                         onChange={onChange}
-                    />
+                        artifactPath={artifactPath}
+                />
                 )}
             </HelperPane>
         </div>
@@ -205,11 +219,13 @@ export const getHelperPane = (
     helperPaneHeight: HelperPaneHeight,
     onClose: () => void,
     onChange: (value: string) => void,
+    artifactPath?: string,
     addFunction?: (value: string) => void,
     sx?: CSSProperties,
     height?: number,
     isTokenEditor?: boolean,
-    isFullscreen?: boolean
+    isFullscreen?: boolean,
+    isUnitTest?: boolean
 ) => {
     return (
         <HelperPaneEl
@@ -222,6 +238,8 @@ export const getHelperPane = (
             isTokenEditor={isTokenEditor}
             isFullscreen={isFullscreen}
             height={height}
+            artifactPath={artifactPath}
+            isUnitTest={isUnitTest}
         />
     );
 };
diff --git a/workspaces/mi/mi-diagram/src/components/Form/index.tsx b/workspaces/mi/mi-diagram/src/components/Form/index.tsx
index 8c32371d492..b5228053905 100644
--- a/workspaces/mi/mi-diagram/src/components/Form/index.tsx
+++ b/workspaces/mi/mi-diagram/src/components/Form/index.tsx
@@ -22,3 +22,4 @@ export * from './ExpressionField/ExpressionInput';
 export * from './CodeTextArea';
 export * from './FormExpressionField';
 export * from './FormTokenEditor';
+export { default as ParameterManager } from './GigaParamManager/ParameterManager';
diff --git a/workspaces/mi/mi-diagram/src/components/Form/utils.tsx b/workspaces/mi/mi-diagram/src/components/Form/utils.tsx
index b6f527655b3..324e6367105 100644
--- a/workspaces/mi/mi-diagram/src/components/Form/utils.tsx
+++ b/workspaces/mi/mi-diagram/src/components/Form/utils.tsx
@@ -82,3 +82,32 @@ export function isLegacyExpression(
     /* If non of the conditions are met -> enable the new expression editor */
     return false;
 }
+
+/**
+ * Creates a request body for helper pane information based on the document URI and context.
+ *
+ * @param machineView - The machine view containing document URI and other context.
+ * @param position - The position in the document.
+ * @param artifactPath - Optional artifact path to override the document URI.
+ * @returns - The request body object for getHelperPaneInfo RPC call.
+ */
+export function createHelperPaneRequestBody(
+    machineView: { documentUri?: string },
+    position: { line: number; character: number },
+    artifactPath?: string
+) {
+    const documentUri = artifactPath ? artifactPath : machineView.documentUri;
+
+    if (machineView.documentUri?.includes('src/test/')) {
+        return {
+            documentUri: documentUri,
+            position: { line: 0, character: 0 },
+            needLastMediator: true
+        };
+    } else {
+        return {
+            documentUri: documentUri,
+            position: position
+        };
+    }
+}
diff --git a/workspaces/mi/mi-diagram/src/components/nodes/ReferenceNode/ReferenceNodeModel.ts b/workspaces/mi/mi-diagram/src/components/nodes/ReferenceNode/ReferenceNodeModel.ts
index 8225eb5b551..f2d7393d9a4 100644
--- a/workspaces/mi/mi-diagram/src/components/nodes/ReferenceNode/ReferenceNodeModel.ts
+++ b/workspaces/mi/mi-diagram/src/components/nodes/ReferenceNode/ReferenceNodeModel.ts
@@ -20,8 +20,9 @@ import { STNode } from "@wso2/mi-syntax-tree/src";
 import { NODE_DIMENSIONS, NodeTypes } from "../../../resources/constants";
 import { BaseNodeModel } from "../BaseNodeModel";
 import { RpcClient } from "@wso2/mi-rpc-client";
-import { EVENT_TYPE, MACHINE_VIEW } from "@wso2/mi-core";
+import { EVENT_TYPE, MACHINE_VIEW, POPUP_EVENT_TYPE } from "@wso2/mi-core";
 import { Datamapper } from "@wso2/mi-syntax-tree/lib/src";
+import * as path from "path";
 
 export class ReferenceNodeModel extends BaseNodeModel {
     readonly referenceName: string;
@@ -69,6 +70,7 @@ export class ReferenceNodeModel extends BaseNodeModel {
         }
 
         const dmName = config.split("/")[config.split("/").length - 1].split(".")[0];
+        const description = ((this.stNode as Datamapper)?.description) ?? "";
         if (dmName === "") {
             return;
         }
@@ -79,20 +81,84 @@ export class ReferenceNodeModel extends BaseNodeModel {
             dmName: dmName
         };
 
-        rpcClient.getMiDataMapperRpcClient().createDMFiles(dmCreateRequest).then(response => {
-            rpcClient.getMiDataMapperRpcClient().convertRegPathToAbsPath(request).then(response => {
-                // open data mapper view
-                rpcClient.getVisualizerState().then((state) => {
+        // Get project root from the document URI using RPC client
+        const projectRootResponse = await rpcClient.getMiDiagramRpcClient().getProjectRoot({ path: this.documentUri });
+        const projectRoot = projectRootResponse.path;
+        if (!projectRoot) {
+            return;
+        }
+
+        const migratedDmcPath = path.join(projectRoot, 'src', 'main', 'wso2mi', 'resources', 'registry', 'gov', 'datamapper', `${dmName}.dmc`);
+        const migratedInputSchemaPath = path.join(projectRoot, 'src', 'main', 'wso2mi', 'resources', 'registry', 'gov', 'datamapper', `${dmName}_inputSchema.json`);
+        const migratedOutputSchemaPath = path.join(projectRoot, 'src', 'main', 'wso2mi', 'resources', 'registry', 'gov', 'datamapper', `${dmName}_outputSchema.json`);
+        const tsFilePath = path.join(projectRoot, 'src', 'main', 'wso2mi', 'resources', 'datamapper', `${dmName}`, `${dmName}.ts`);
+
+        const pathResponse = await rpcClient.getMiDataMapperRpcClient().convertRegPathToAbsPath(request);
+        if (pathResponse && pathResponse.absPath) {
+            // Check if file exists using RPC client
+            const fileExistsResponse = await rpcClient.getMiDiagramRpcClient().handleFileWithFS({
+                fileName: path.basename(pathResponse.absPath),
+                filePath: pathResponse.absPath,
+                operation: 'exists'
+            });
+
+            if (fileExistsResponse.status) {
+                const state = await rpcClient.getVisualizerState();
+                if (state) {
                     rpcClient.getMiVisualizerRpcClient().openView({
                         type: EVENT_TYPE.OPEN_VIEW,
                         location: {
                             ...state,
-                            documentUri: response.absPath,
+                            documentUri: pathResponse.absPath,
                             view: MACHINE_VIEW.DataMapperView
                         }
                     });
+                }
+            } else {
+                //check if migrated files exist
+                const migratedFileExistsResponse = await rpcClient.getMiDiagramRpcClient().handleFileWithFS({
+                    fileName: path.basename(migratedDmcPath),
+                    filePath: migratedDmcPath,
+                    operation: 'exists'
                 });
-            });
-        });
+
+                if (migratedFileExistsResponse.status) {
+                    rpcClient.getMiVisualizerRpcClient().openView({
+                        type: POPUP_EVENT_TYPE.OPEN_VIEW,
+                        location: {
+                            view: MACHINE_VIEW.DataMapperMigrationForm,
+                            customProps: {
+                                path: pathResponse.absPath,
+                                configName: dmName,
+                                migratedDmcPath: migratedDmcPath,
+                                migratedInputSchemaPath: migratedInputSchemaPath,
+                                migratedOutputSchemaPath: migratedOutputSchemaPath,
+                                range: this.stNode.range,
+                                documentUri: this.documentUri,
+                                tsFilePath: tsFilePath,
+                                description: description
+                            }
+                        },
+                        isPopup: true
+                    });
+                } else {
+                    const createDMResponse = await rpcClient.getMiDataMapperRpcClient().createDMFiles(dmCreateRequest);
+                    if (createDMResponse) {
+                        const state = await rpcClient.getVisualizerState();
+                        if (state) {
+                            rpcClient.getMiVisualizerRpcClient().openView({
+                                type: EVENT_TYPE.OPEN_VIEW,
+                                location: {
+                                    ...state,
+                                    documentUri: pathResponse.absPath,
+                                    view: MACHINE_VIEW.DataMapperView
+                                }
+                            });
+                        }
+                    }
+                }
+            }
+        }
+
     }
 }
diff --git a/workspaces/mi/mi-extension/package.json b/workspaces/mi/mi-extension/package.json
index d04be778dc4..deafda80a89 100644
--- a/workspaces/mi/mi-extension/package.json
+++ b/workspaces/mi/mi-extension/package.json
@@ -3,7 +3,7 @@
   "displayName": "WSO2 Integrator: MI",
   "description": "An extension which gives a development environment for designing, developing, debugging, and testing integration solutions.",
   "icon": "resources/images/wso2-micro-integrator-image.png",
-  "version": "2.4.1",
+  "version": "2.4.125090815",
   "publisher": "wso2",
   "engines": {
     "vscode": "^1.100.0"
@@ -140,6 +140,12 @@
           "description": "Enable remote server deployment support",
           "scope": "resource"
         },
+        "MI.USE_LOCAL_MAVEN": {
+          "type": "boolean",
+          "default": false,
+          "description": "Use local Maven within the extension",
+          "scope": "resource"
+        },
         "MI.Scope": {
           "type": "string",
           "default": "",
@@ -151,6 +157,11 @@
           "default": false,
           "description": "Don't show server update notification",
           "scope": "resource"
+        },
+        "MI.autoUpdateCarPlugin": {
+          "type": "boolean",
+          "default": true,
+          "description": "Update car plugin version automatically"
         }
       }
     },
@@ -413,7 +424,12 @@
       {
         "command": "MI.project-explorer.delete",
         "title": "Delete",
-        "icon": "$(delete)"
+        "icon": "$(trash)"
+      },
+      {
+        "command": "MI.manage-registry-property",
+        "title": "Manage Properties",
+        "icon": "$(add)"
       },
       {
         "command": "MI.project-explorer.markAsDefaultSequence",
@@ -503,6 +519,24 @@
         "title": "Refresh",
         "icon": "$(refresh)",
         "category": "MI"
+      },
+      {
+        "command": "MI.test.delete.mock-service",
+        "title": "Delete Mock Service",
+        "icon": "$(trash)",
+        "category": "MI"
+      },
+      {
+        "command": "MI.test.delete.case",
+        "title": "Delete Test Case",
+        "icon": "$(trash)",
+        "category": "MI"
+      },
+      {
+        "command": "MI.test.delete.suite",
+        "title": "Delete Test Suite",
+        "icon": "$(trash)",
+        "category": "MI"
       }
     ],
     "menus": {
@@ -591,6 +625,10 @@
           "command": "MI.project-explorer.delete",
           "when": "false"
         },
+        {
+          "command": "MI.manage-registry-property",
+          "when": "false"
+        },
         {
           "command": "MI.project-explorer.markAsDefaultSequence",
           "when": "false"
@@ -642,6 +680,18 @@
         {
           "command": "MI.test.refresh.mock-services",
           "when": "false"
+        },
+        {
+          "command": "MI.test.delete.mock-service",
+          "when": "false"
+        },
+        {
+          "command": "MI.test.delete.case",
+          "when": "false"
+        },
+        {
+          "command": "MI.test.delete.suite",
+          "when": "false"
         }
       ],
       "view/title": [
@@ -812,6 +862,11 @@
           "when": "view == MI.project-explorer && viewItem == api || viewItem == resource || viewItem == endpoint || viewItem == sequence || viewItem == proxy-service || viewItem == inboundEndpoint || viewItem == messageStore || viewItem == message-processor || viewItem == task || viewItem == localEntry || viewItem == template  || viewItem == dataSource || viewItem == data-service || viewItem == data-mapper || viewItem == connection || viewItem == registry-with-metadata || viewItem == registry-without-metadata || viewItem == class-mediator || viewItem == ballerina-module || viewItem == idp-schema",
           "key": "delete"
         },
+        {
+          "command": "MI.manage-registry-property",
+          "when": "view == MI.project-explorer && (viewItem == resource || viewItem == registry-with-metadata || viewItem == registry-without-metadata)",
+          "key": "add-registry-property"
+        },
         {
           "command": "MI.project-explorer.markAsDefaultSequence",
           "when": "view == MI.project-explorer && viewItem == sequence",
@@ -831,6 +886,11 @@
           "command": "MI.test.edit.mock-service",
           "group": "inline",
           "when": "view == MI.mock-services && viewItem == mockService"
+        },
+        {
+          "command": "MI.test.delete.mock-service",
+          "group": "inline",
+          "when": "view == MI.mock-services"
         }
       ],
       "testing/item/context": [
@@ -853,6 +913,16 @@
           "command": "MI.test.edit.case",
           "group": "inline",
           "when": "testId in test.cases"
+        },
+        {
+          "command": "MI.test.delete.case",
+          "group": "inline",
+          "when": "testId in test.cases"
+        },
+        {
+          "command": "MI.test.delete.suite",
+          "group": "inline",
+          "when": "testId in test.suites"
         }
       ],
       "testing/message/context": []
diff --git a/workspaces/mi/mi-extension/src/constants/index.ts b/workspaces/mi/mi-extension/src/constants/index.ts
index 27384d1b42f..b2eff1e26db 100644
--- a/workspaces/mi/mi-extension/src/constants/index.ts
+++ b/workspaces/mi/mi-extension/src/constants/index.ts
@@ -101,17 +101,33 @@ export const COMMANDS = {
     EDIT_TEST_SUITE: 'MI.test.edit.suite',
     ADD_TEST_CASE: 'MI.test.add.case',
     EDIT_TEST_CASE: 'MI.test.edit.case',
+    DELETE_TEST_CASE: 'MI.test.delete.case',
+    DELETE_TEST_SUITE: 'MI.test.delete.suite',
     ADD_MOCK_SERVICE: 'MI.test.add.mock-service',
     REFRESH_MOCK_SERVICES: 'MI.test.refresh.mock-services',
     EDIT_MOCK_SERVICE: 'MI.test.edit.mock-service',
+    DELETE_MOCK_SERVICE: 'MI.test.delete.mock-service',
     OPEN_RUNTIME_VIEW: 'MI.Open-runtime-service-view',
     REVEAL_TEST_PANE: 'MI.mock-services.focus',
+    EDIT_K8_CONFIGURATION_COMMAND: 'MI.edit-k8-configuration',
+    MANAGE_REGISTRY_PROPERTIES_COMMAND: 'MI.manage-registry-property',
 
     BI_EXTENSION: 'WSO2.ballerina-integrator',
     BI_OPEN_COMMAND: 'ballerina.open.bi.welcome',
     INSTALL_EXTENSION_COMMAND: 'workbench.extensions.installExtension'
 };
 
+export const MVN_COMMANDS = {
+    MVN_WRAPPER_COMMAND: "./mvnw",
+    MVN_WRAPPER_WIN_COMMAND: ".\\mvnw.cmd",
+    DEPLOY_COMMAND: " clean deploy -Dmaven.deploy.skip=true -Dmaven.car.deploy.skip=false -Dstyle.color=never",
+    BUILD_COMMAND: " clean install -Dstyle.color=never",
+    DOCKER_COMMAND: " clean install -P docker",
+    COMPILE_COMMAND: " compile -Dstyle.color=never",
+    TEST_COMMAND: " test -DtestServerType=remote",
+    GEN_POM_COMMAND: "help:effective-pom",
+}
+
 export const DEFAULT_PROJECT_VERSION = "1.0.0";
 
 export const READONLY_MAPPING_FUNCTION_NAME = "mapFunction";
diff --git a/workspaces/mi/mi-extension/src/debugger/debugHelper.ts b/workspaces/mi/mi-extension/src/debugger/debugHelper.ts
index 734b50bdd9e..3c7caaae41a 100644
--- a/workspaces/mi/mi-extension/src/debugger/debugHelper.ts
+++ b/workspaces/mi/mi-extension/src/debugger/debugHelper.ts
@@ -19,7 +19,7 @@
 
 import * as vscode from 'vscode';
 import * as childprocess from 'child_process';
-import { COMMANDS } from '../constants';
+import { COMMANDS, MVN_COMMANDS } from '../constants';
 import { loadEnvVariables, getBuildCommand, getRunCommand, getStopCommand } from './tasks';
 import * as fs from 'fs';
 import * as path from 'path';
@@ -37,6 +37,7 @@ import treeKill = require('tree-kill');
 import { serverLog, showServerOutputChannel } from '../util/serverLogger';
 import { getJavaHomeFromConfig, getServerPathFromConfig } from '../util/onboardingUtils';
 import * as crypto from 'crypto';
+import { Uri, workspace } from "vscode";
 
 const child_process = require('child_process');
 const findProcess = require('find-process');
@@ -174,7 +175,7 @@ export async function executeBuildTask(projectUri: string, serverPath: string, s
             }
         }
 
-        const buildCommand = getBuildCommand();
+        const buildCommand = getBuildCommand(projectUri);
         const envVariables = {
             ...process.env,
             ...setJavaHomeInEnvironmentAndPath(projectUri)
@@ -260,8 +261,10 @@ export async function executeBuildTask(projectUri: string, serverPath: string, s
 export async function executeRemoteDeployTask(projectUri: string, postBuildTask?: Function) {
     return new Promise<void>(async (resolve, reject) => {
 
-        const buildCommand = process.platform === 'win32' ? ".\\mvnw.cmd clean deploy -Dmaven.deploy.skip=true -Dmaven.car.deploy.skip=false -Dstyle.color=never" :
-            "./mvnw clean deploy -Dmaven.deploy.skip=true -Dmaven.car.deploy.skip=false -Dstyle.color=never";;
+        const config = workspace.getConfiguration('MI', Uri.file(projectUri));
+        const mvnCmd = config.get("USE_LOCAL_MAVEN") ? "mvn" : (process.platform === "win32" ?
+            MVN_COMMANDS.MVN_WRAPPER_WIN_COMMAND : MVN_COMMANDS.MVN_WRAPPER_COMMAND);
+        const buildCommand = mvnCmd + MVN_COMMANDS.DEPLOY_COMMAND;
         const envVariables = {
             ...process.env,
             ...setJavaHomeInEnvironmentAndPath(projectUri)
diff --git a/workspaces/mi/mi-extension/src/debugger/tasks.ts b/workspaces/mi/mi-extension/src/debugger/tasks.ts
index 5b6d6eff5c5..b145c1f3119 100644
--- a/workspaces/mi/mi-extension/src/debugger/tasks.ts
+++ b/workspaces/mi/mi-extension/src/debugger/tasks.ts
@@ -21,9 +21,14 @@ import * as vscode from 'vscode';
 import * as fs from 'fs';
 import { createTempDebugBatchFile, setJavaHomeInEnvironmentAndPath } from './debugHelper';
 import { ERROR_LOG, logDebug } from '../util/logger';
+import { Uri, workspace } from "vscode";
+import { MVN_COMMANDS } from "../constants";
 
 export function getBuildTask(projectUri: string): vscode.Task {
-    const commandToExecute = process.platform === 'win32' ? ".\\mvnw.cmd clean install" : "./mvnw clean install";
+    const config = workspace.getConfiguration('MI', Uri.file(projectUri));
+    const mvnCmd = config.get("USE_LOCAL_MAVEN") ? "mvn" : (process.platform === "win32" ?
+        MVN_COMMANDS.MVN_WRAPPER_WIN_COMMAND : MVN_COMMANDS.MVN_WRAPPER_COMMAND);
+    const commandToExecute = mvnCmd + MVN_COMMANDS.BUILD_COMMAND
     const env = setJavaHomeInEnvironmentAndPath(projectUri);  
     const buildTask = new vscode.Task(
         { type: 'mi-build' },
@@ -37,12 +42,18 @@ export function getBuildTask(projectUri: string): vscode.Task {
     return buildTask;
 }
 
-export function getBuildCommand(): string {
-    return process.platform === 'win32' ? ".\\mvnw.cmd clean install -Dstyle.color=never" : "./mvnw clean install -Dstyle.color=never";
+export function getBuildCommand(projectUri: string): string {
+    const config = workspace.getConfiguration('MI', Uri.file(projectUri));
+    const mvnCmd = config.get("USE_LOCAL_MAVEN") ? "mvn" : (process.platform === "win32" ?
+        MVN_COMMANDS.MVN_WRAPPER_WIN_COMMAND : MVN_COMMANDS.MVN_WRAPPER_COMMAND);
+    return mvnCmd + MVN_COMMANDS.BUILD_COMMAND;
 }
 
 export function getDockerTask(projectUri: string): vscode.Task | undefined {
-    const commandToExecute = process.platform === 'win32' ? ".\\mvnw.cmd clean install -P docker" : "./mvnw clean install -P docker";
+    const config = workspace.getConfiguration('MI', Uri.file(projectUri));
+    const mvnCmd = config.get("USE_LOCAL_MAVEN") ? "mvn" : (process.platform === "win32" ?
+        MVN_COMMANDS.MVN_WRAPPER_WIN_COMMAND : MVN_COMMANDS.MVN_WRAPPER_COMMAND);
+    const commandToExecute = mvnCmd + MVN_COMMANDS.DOCKER_COMMAND;
     const env = setJavaHomeInEnvironmentAndPath(projectUri);  
 
     const workspaceFolder = vscode.workspace.getWorkspaceFolder(vscode.Uri.file(projectUri));
diff --git a/workspaces/mi/mi-extension/src/extension.ts b/workspaces/mi/mi-extension/src/extension.ts
index d37552b7db1..1598808384f 100644
--- a/workspaces/mi/mi-extension/src/extension.ts
+++ b/workspaces/mi/mi-extension/src/extension.ts
@@ -29,7 +29,7 @@ import { MILanguageClient } from './lang-client/activator';
 import { activateUriHandlers } from './uri-handler';
 import { extensions, workspace } from 'vscode';
 import { StateMachineAI } from './ai-panel/aiMachine';
-import { getStateMachine } from './stateMachine';
+import { isOldProjectOrWorkspace, getStateMachine } from './stateMachine';
 import { webviews } from './visualizer/webview';
 import { v4 as uuidv4 } from 'uuid';
 import path from 'path';
@@ -45,14 +45,24 @@ export async function activate(context: vscode.ExtensionContext) {
 		.filter((tab) => (tab.input as any)?.viewType?.includes("micro-integrator."));
 	vscode.window.tabGroups.close(orphanedTabs);
 
-	let firstProject = workspace.workspaceFolders?.[0]?.uri?.fsPath;
-	if (firstProject) {
-		getStateMachine(firstProject);
-	} else {
-		// new project
-		// use a temporary directory to start the state machine
-		const projectUuid = uuidv4();
-		firstProject = path.join(os.tmpdir(), projectUuid);
+	const oldProjects = workspace.workspaceFolders
+		? (await Promise.all(
+			workspace.workspaceFolders.map(async folder => {
+				const isOld = await isOldProjectOrWorkspace(folder.uri.fsPath);
+				if (isOld) getStateMachine(folder.uri.fsPath);
+				return isOld ? folder : null;
+			})
+		)).filter((folder): folder is vscode.WorkspaceFolder => folder !== null)
+		: [];
+	const newProjects = workspace.workspaceFolders
+		? workspace.workspaceFolders.filter(folder => !oldProjects.includes(folder))
+		: [];
+
+	const firstProject = newProjects?.[0]?.uri?.fsPath || 
+						 oldProjects?.[0]?.uri?.fsPath || 
+						 path.join(os.tmpdir(), uuidv4());
+	
+	if (!oldProjects.length) {
 		getStateMachine(firstProject);
 	}
 	workspace.onDidChangeWorkspaceFolders(async (event) => {
@@ -79,8 +89,6 @@ export async function activate(context: vscode.ExtensionContext) {
 
 	activateDebugger(context);
 	activateMigrationSupport(context);
-	// activateActivityPanel(context);
-	// activateAiPrompt(context);
 	activateRuntimeService(context, firstProject);
 	activateVisualizer(context, firstProject);
 	activateAiPanel(context);
diff --git a/workspaces/mi/mi-extension/src/lang-client/ExtendedLanguageClient.ts b/workspaces/mi/mi-extension/src/lang-client/ExtendedLanguageClient.ts
index dd2b84047cd..d4543aa65de 100644
--- a/workspaces/mi/mi-extension/src/lang-client/ExtendedLanguageClient.ts
+++ b/workspaces/mi/mi-extension/src/lang-client/ExtendedLanguageClient.ts
@@ -465,4 +465,8 @@ export class ExtendedLanguageClient extends LanguageClient {
     async pdfToImagesBase64(req: string): Promise<string[]> {
         return this.sendRequest('synapse/pdfToImagesBase64', {base64: req});
     }
+
+    async getConfigurableList(): Promise<any[]> {
+        return this.sendRequest('synapse/getConfigurableList');
+    }
 }
diff --git a/workspaces/mi/mi-extension/src/lang-client/activator.ts b/workspaces/mi/mi-extension/src/lang-client/activator.ts
index 8f77f750d90..6a5cd981ff1 100644
--- a/workspaces/mi/mi-extension/src/lang-client/activator.ts
+++ b/workspaces/mi/mi-extension/src/lang-client/activator.ts
@@ -277,9 +277,7 @@ export class MILanguageClient {
                 this.languageClient = new ExtendedLanguageClient('synapseXML', 'Synapse Language Server', this.projectUri,
                     serverOptions, clientOptions);
                 await this.languageClient.start();
-                const projectDetails = await this.languageClient?.getProjectDetails();
-                const projectName = projectDetails.primaryDetails.projectName.value;
-                await extractCAppDependenciesAsProjects(projectName);
+                await extractCAppDependenciesAsProjects(this.projectUri);
                 await this.languageClient?.loadDependentCAppResources();
 
                 //Setup autoCloseTags
diff --git a/workspaces/mi/mi-extension/src/project-explorer/activate.ts b/workspaces/mi/mi-extension/src/project-explorer/activate.ts
index 88dae3344c9..dbd74d9f170 100644
--- a/workspaces/mi/mi-extension/src/project-explorer/activate.ts
+++ b/workspaces/mi/mi-extension/src/project-explorer/activate.ts
@@ -380,6 +380,23 @@ export async function activateProjectExplorer(context: ExtensionContext, lsClien
 		openView(EVENT_TYPE.OPEN_VIEW, { view: MACHINE_VIEW.DSSServiceDesigner, documentUri });
 	});
 
+	commands.registerCommand(COMMANDS.EDIT_K8_CONFIGURATION_COMMAND, async () => {
+		const webview = [...webviews.values()].find(webview => webview.getWebview()?.active);
+		if (webview && webview?.getProjectUri()) {
+			const filePath = path.join(webview.getProjectUri(), 'deployment', 'kubernetes', 'integration_k8s.yaml');
+			workspace.openTextDocument(filePath).then((doc) => {
+				window.showTextDocument(doc, { preview: false });
+			});
+			commands.executeCommand('workbench.files.action.focusFilesExplorer');
+		}
+	});
+
+	commands.registerCommand(COMMANDS.MANAGE_REGISTRY_PROPERTIES_COMMAND, (item: TreeItem, beside: boolean = true) => {
+		const file = item.command?.arguments?.[0] || (item as any)?.info?.path
+		revealWebviewPanel(beside);
+		openView(EVENT_TYPE.OPEN_VIEW, { view: MACHINE_VIEW.RegistryForm, documentUri: file?.fsPath });
+	});
+
 	// delete
 	commands.registerCommand(COMMANDS.DELETE_PROJECT_EXPLORER_ITEM, async (item: TreeItem) => {
 		let file: string | undefined;
diff --git a/workspaces/mi/mi-extension/src/project-explorer/project-explorer-provider.ts b/workspaces/mi/mi-extension/src/project-explorer/project-explorer-provider.ts
index 9034d24f0b8..6161b15c4e5 100644
--- a/workspaces/mi/mi-extension/src/project-explorer/project-explorer-provider.ts
+++ b/workspaces/mi/mi-extension/src/project-explorer/project-explorer-provider.ts
@@ -26,6 +26,7 @@ import { RUNTIME_VERSION_440 } from "../constants";
 import { compareVersions } from '../util/onboardingUtils';
 import { debounce } from 'lodash';
 import { MILanguageClient } from '../lang-client/activator';
+import { isOldProjectOrWorkspace } from '../stateMachine';
 
 let extensionContext: vscode.ExtensionContext;
 export class ProjectExplorerEntry extends vscode.TreeItem {
@@ -47,7 +48,7 @@ export class ProjectExplorerEntry extends vscode.TreeItem {
 		} else if (icon) {
 			this.iconPath = {
 				light: vscode.Uri.file(path.join(extensionContext.extensionPath, 'assets', `light-${icon}.svg`)),
-				dark:  vscode.Uri.file(path.join(extensionContext.extensionPath, 'assets', `dark-${icon}.svg`))
+				dark: vscode.Uri.file(path.join(extensionContext.extensionPath, 'assets', `dark-${icon}.svg`))
 			};
 		}
 	}
@@ -131,6 +132,18 @@ async function getProjectStructureData(): Promise<ProjectExplorerEntry[]> {
 			const rootPath = workspace.uri.fsPath;
 
 			try {
+				if (await isOldProjectOrWorkspace(rootPath)) {
+					const projectRoot = new ProjectExplorerEntry(
+						`Unsupported Project - ${workspace.name}`,
+						vscode.TreeItemCollapsibleState.None,
+						{ name: workspace.name, path: rootPath, type: 'unsupportedProject' },
+						'project'
+					);
+
+					projectRoot.contextValue = 'unsupportedProject';
+					data.push(projectRoot);
+					continue;
+				}
 				const langClient = await MILanguageClient.getInstance(rootPath);
 				const resp = await langClient?.languageClient?.getProjectExplorerModel(rootPath);
 				const projectDetailsRes = await langClient?.languageClient?.getProjectDetails();
@@ -140,7 +153,7 @@ async function getProjectStructureData(): Promise<ProjectExplorerEntry[]> {
 				if (projectTree) {
 					data.push(projectTree);
 				}
-			} catch {}
+			} catch { }
 		};
 		vscode.commands.executeCommand('setContext', 'projectOpened', true);
 		if (data.length > 0) {
@@ -283,47 +296,49 @@ function generateResources(data: RegistryResourcesFolder, resourceDetails: ListR
 			for (const entry of data.folders) {
 				if (![".meta", "datamapper", "datamappers"].includes(entry.name)) {
 					if (entry.name.includes("idp-schemas")) {
-						const parentEntry = new ProjectExplorerEntry(entry.name, isCollapsibleState(entry.folders.length > 0), {name: entry.name,
-							type: 'resource', path: `${entry.path}`}, 'folder', true); 
-							parentEntry.contextValue = "idp-schemas";
-							parentEntry.id = "idp-schema";
-							parentEntry.children = entry.folders.map((folder:any)=>{
-								const explorerEntry = new ProjectExplorerEntry(
-									folder.name,
-									isCollapsibleState(false),
-									folder,
-									'file'
-								);
-								explorerEntry.contextValue = 'idp-schema';
-								explorerEntry.command = {
-									title: "Open IDP connector schema generation",
-									command: COMMANDS.SHOW_IDP_SCHEMA,
-									arguments: [folder.files.find((file: any) => file.name.endsWith(".json") || file.name.endsWith(".xsd"))?.path]
-								};
-								return explorerEntry;
-							})
+						const parentEntry = new ProjectExplorerEntry(entry.name, isCollapsibleState(entry.folders.length > 0), {
+							name: entry.name,
+							type: 'resource', path: `${entry.path}`
+						}, 'folder', true);
+						parentEntry.contextValue = "idp-schemas";
+						parentEntry.id = "idp-schema";
+						parentEntry.children = entry.folders.map((folder: any) => {
+							const explorerEntry = new ProjectExplorerEntry(
+								folder.name,
+								isCollapsibleState(false),
+								folder,
+								'file'
+							);
+							explorerEntry.contextValue = 'idp-schema';
+							explorerEntry.command = {
+								title: "Open IDP connector schema generation",
+								command: COMMANDS.SHOW_IDP_SCHEMA,
+								arguments: [folder.files.find((file: any) => file.name.endsWith(".json") || file.name.endsWith(".xsd"))?.path]
+							};
+							return explorerEntry;
+						})
 						result.push(parentEntry)
 					}
-					else{
+					else {
 						const files = generateResources(entry, resourceDetails);
 						if (!files || files?.length === 0) {
 							continue;
 						}
 						const explorerEntry = new ProjectExplorerEntry(entry.name,
-						isCollapsibleState(entry.files.length > 0 || entry.folders.length > 0),
-						{
-							name: entry.name,
-							type: 'resource',
-							path: `${entry.path}`
-						}, 'folder', true);
+							isCollapsibleState(entry.files.length > 0 || entry.folders.length > 0),
+							{
+								name: entry.name,
+								type: 'resource',
+								path: `${entry.path}`
+							}, 'folder', true);
 						explorerEntry.children = generateResources(entry, resourceDetails);
 						result.push(explorerEntry);
 						const lastIndex = entry.path.indexOf(resPathPrefix) !== -1 ? entry.path.indexOf(resPathPrefix) + resPathPrefix.length : 0;
 						const resourcePath = entry.path.substring(lastIndex);
 						if (checkExistenceOfResource(resourcePath, resourceDetails)) {
-							explorerEntry.contextValue = "registry-with-metadata";
+							explorerEntry.contextValue = "registry-with-metadata-folder";
 						} else {
-							explorerEntry.contextValue = "registry-without-metadata";
+							explorerEntry.contextValue = "registry-without-metadata-folder";
 						}
 					}
 				}
diff --git a/workspaces/mi/mi-extension/src/rpc-managers/mi-diagram/rpc-handler.ts b/workspaces/mi/mi-extension/src/rpc-managers/mi-diagram/rpc-handler.ts
index 2d0aeda168a..9fc68fa216d 100644
--- a/workspaces/mi/mi-extension/src/rpc-managers/mi-diagram/rpc-handler.ts
+++ b/workspaces/mi/mi-extension/src/rpc-managers/mi-diagram/rpc-handler.ts
@@ -116,6 +116,7 @@ import {
     UpdateTestSuiteRequest,
     UpdateWsdlEndpointRequest,
     WriteContentToFileRequest,
+    WriteMockServicesRequest,
     HandleFileRequest,
     WriteIdpSchemaFileToRegistryRequest,
     ReadIdpSchemaFileContentRequest,
@@ -267,6 +268,7 @@ import {
     updateTestSuite,
     updateWsdlEndpoint,
     writeContentToFile,
+    writeMockServices,
     handleFileWithFS,
     writeIdpSchemaFileToRegistry,
     getIdpSchemaFiles,
@@ -308,7 +310,17 @@ import {
     GetCodeDiagnosticsResponse,
     getCodeDiagnostics,
     GetConnectorIconRequest,
-    getConnectorIcon
+    getConnectorIcon,
+    getValueOfEnvVariable,
+    getPomFileContent,
+    getExternalConnectorDetails,
+    getMockServices,
+    configureKubernetes,
+    ConfigureKubernetesRequest,
+    isKubernetesConfigured,
+    UpdateRegistryPropertyRequest,
+    updatePropertiesInArtifactXML,
+    getPropertiesFromArtifactXML
 } from "@wso2/mi-core";
 import { Messenger } from "vscode-messenger";
 import { MiDiagramRpcManager } from "./rpc-manager";
@@ -381,6 +393,7 @@ export function registerMiDiagramRpcHandlers(messenger: Messenger, projectUri: s
     messenger.onRequest(migrateProject, (args: MigrateProjectRequest) => rpcManger.migrateProject(args));
     messenger.onRequest(getAIResponse, (args: AIUserInput) => rpcManger.getAIResponse(args));
     messenger.onRequest(writeContentToFile, (args: WriteContentToFileRequest) => rpcManger.writeContentToFile(args));
+    messenger.onRequest(writeMockServices, (args: WriteMockServicesRequest) => rpcManger.writeMockServices(args));
     messenger.onRequest(handleFileWithFS, (args: HandleFileRequest) => rpcManger.handleFileWithFS(args));
     messenger.onRequest(writeIdpSchemaFileToRegistry, (args: WriteIdpSchemaFileToRegistryRequest) => rpcManger.writeIdpSchemaFileToRegistry(args));
     messenger.onRequest(getIdpSchemaFiles,() => rpcManger.getIdpSchemaFiles());
@@ -487,4 +500,12 @@ export function registerMiDiagramRpcHandlers(messenger: Messenger, projectUri: s
     messenger.onRequest(shouldDisplayPayloadAlert, () => rpcManger.shouldDisplayPayloadAlert());
     messenger.onRequest(displayPayloadAlert, () => rpcManger.displayPayloadAlert());
     messenger.onRequest(closePayloadAlert, () => rpcManger.closePayloadAlert());
+    messenger.onRequest(getValueOfEnvVariable, (args: string) => rpcManger.getValueOfEnvVariable(args));
+    messenger.onRequest(getPomFileContent, () => rpcManger.getPomFileContent());
+    messenger.onRequest(getExternalConnectorDetails, () => rpcManger.getExternalConnectorDetails());
+    messenger.onRequest(getMockServices, () => rpcManger.getMockServices());
+    messenger.onRequest(configureKubernetes, (args: ConfigureKubernetesRequest) => rpcManger.configureKubernetes(args));
+    messenger.onRequest(isKubernetesConfigured, () => rpcManger.isKubernetesConfigured());
+    messenger.onRequest(updatePropertiesInArtifactXML, (args: UpdateRegistryPropertyRequest) => rpcManger.updatePropertiesInArtifactXML(args));
+    messenger.onRequest(getPropertiesFromArtifactXML, (args: string) => rpcManger.getPropertiesFromArtifactXML(args));
 }
diff --git a/workspaces/mi/mi-extension/src/rpc-managers/mi-diagram/rpc-manager.ts b/workspaces/mi/mi-extension/src/rpc-managers/mi-diagram/rpc-manager.ts
index 85624b489e7..2ef95ab9de3 100644
--- a/workspaces/mi/mi-extension/src/rpc-managers/mi-diagram/rpc-manager.ts
+++ b/workspaces/mi/mi-extension/src/rpc-managers/mi-diagram/rpc-manager.ts
@@ -236,6 +236,8 @@ import {
     WriteIdpSchemaFileToRegistryResponse,
     GetIdpSchemaFilesResponse,
     WriteContentToFileResponse,
+    WriteMockServicesRequest,
+    WriteMockServicesResponse,
     HandleFileRequest,
     HandleFileResponse,
     getAllDependenciesRequest,
@@ -281,7 +283,13 @@ import {
     DependencyDetails,
     GetCodeDiagnosticsReqeust,
     GetCodeDiagnosticsResponse,
-    getCodeDiagnostics
+    getCodeDiagnostics,
+    GetPomFileContentResponse,
+    GetExternalConnectorDetailsResponse,
+    GetMockServicesResponse,
+    ConfigureKubernetesRequest,
+    ConfigureKubernetesResponse,
+    UpdateRegistryPropertyRequest
 } from "@wso2/mi-core";
 import axios from 'axios';
 import { error } from "console";
@@ -308,7 +316,7 @@ import { testFileMatchPattern } from "../../test-explorer/discover";
 import { mockSerivesFilesMatchPattern } from "../../test-explorer/mock-services/activator";
 import { UndoRedoManager } from "../../undoRedoManager";
 import { copyDockerResources, copyMavenWrapper, createFolderStructure, getAPIResourceXmlWrapper, getAddressEndpointXmlWrapper, getDataServiceXmlWrapper, getDefaultEndpointXmlWrapper, getDssDataSourceXmlWrapper, getFailoverXmlWrapper, getHttpEndpointXmlWrapper, getInboundEndpointXmlWrapper, getLoadBalanceXmlWrapper, getMessageProcessorXmlWrapper, getMessageStoreXmlWrapper, getProxyServiceXmlWrapper, getRegistryResourceContent, getTaskXmlWrapper, getTemplateEndpointXmlWrapper, getTemplateXmlWrapper, getWsdlEndpointXmlWrapper, createGitignoreFile, getEditTemplateXmlWrapper } from "../../util";
-import { addNewEntryToArtifactXML, createMetadataFilesForRegistryCollection, deleteRegistryResource, detectMediaType, getAvailableRegistryResources, getMediatypeAndFileExtension, getRegistryResourceMetadata, updateRegistryResourceMetadata} from "../../util/fileOperations";
+import { addNewEntryToArtifactXML, createMetadataFilesForRegistryCollection, deleteRegistryResource, detectMediaType, getAvailableRegistryResources, getMediatypeAndFileExtension, getRegistryResourceMetadata, updateRegistryResourceMetadata, generatePathFromRegistryPath} from "../../util/fileOperations";
 import { log } from "../../util/logger";
 import { importProjects } from "../../util/migrationUtils";
 import { generateSwagger, getResourceInfo, isEqualSwaggers, mergeSwaggers } from "../../util/swagger";
@@ -330,6 +338,8 @@ import { DevantScopes, IWso2PlatformExtensionAPI } from "@wso2/wso2-platform-cor
 import { ICreateComponentCmdParams, CommandIds as PlatformExtCommandIds } from "@wso2/wso2-platform-core";
 import { MiVisualizerRpcManager } from "../mi-visualizer/rpc-manager";
 import { DebuggerConfig } from "../../debugger/config";
+import { getKubernetesConfiguration, getKubernetesDataConfiguration } from "../../util/template-engine/mustach-templates/KubernetesConfiguration";
+import { parseStringPromise, Builder } from "xml2js";
 
 const AdmZip = require('adm-zip');
 
@@ -673,7 +683,7 @@ export class MiDiagramRpcManager implements MiDiagramAPI {
                     const swaggerRegPath = path.join(
                         this.projectUri,
                         SWAGGER_REL_DIR,
-                        fileName + "_original" + path.extname(swaggerDefPath)
+                        fileName + path.extname(swaggerDefPath)
                     );
                     fs.mkdirSync(path.dirname(swaggerRegPath), { recursive: true });
                     fs.copyFileSync(swaggerDefPath, swaggerRegPath);
@@ -3288,6 +3298,52 @@ ${endpointAttributes}
 
     }
 
+    async writeMockServices(params: WriteMockServicesRequest): Promise<WriteMockServicesResponse> {
+        let status = true;
+        const { content, fileNames } = params;
+
+        for (let i = 0; i < content.length; i++) {
+            // Remove starting '''xml and ending '''
+            content[i] = content[i].replace(/```xml/g, '');
+            content[i] = content[i].replace(/```/g, '');
+
+            let serviceName: string;
+
+            if (fileNames && fileNames[i]) {
+                // Use the provided file name
+                serviceName = fileNames[i];
+            } else {
+                // Fallback to regex extraction for backward compatibility
+                const match = content[i].match(/<service-name>\s*([^<]+)\s*<\/service-name>/);
+                if (match) {
+                    serviceName = match[1].trim();
+                } else {
+                    console.warn('Could not extract service name from content and no fileName provided at index', i, ':', content[i].substring(0, 100));
+                    status = false;
+                    continue;
+                }
+            }
+
+            // Create full path for mock service in mock-services directory
+            const fullPath = path.join(this.projectUri, 'src', 'test', 'resources', 'mock-services', `${serviceName}.xml`);
+
+            try {
+                content[i] = content[i].trimStart();
+                await replaceFullContentToFile(fullPath, content[i]);
+            } catch (error) {
+                console.error('Error writing mock service to file:', error);
+                status = false;
+            }
+        }
+
+        if (status) {
+            window.showInformationMessage('Mock services written to file successfully');
+            return { status: true };
+        } else {
+            return { status: false };
+        }
+    }
+
     async handleFileWithFS(params: HandleFileRequest): Promise<HandleFileResponse> {
         const { fileName, filePath, operation, content } = params;
 
@@ -3328,6 +3384,9 @@ ${endpointAttributes}
                         return { status: false, content: "File not found" };
                     }
 
+                case 'exists':
+                    return { status: isExist, content: isExist ? "File exists" : "File does not exist" };
+
                 default:
                     console.error(`Invalid file operation: ${operation}`);
                     return { status: false, content: "Invalid file operation" };
@@ -3474,7 +3533,38 @@ ${endpointAttributes}
 
     async getWorkspaceContext(): Promise<GetWorkspaceContextResponse> {
         const artifactDirPath = path.join(this.projectUri, 'src', 'main', 'wso2mi', 'artifacts');
+        const resourcesDirPath = path.join(this.projectUri, 'src', 'main', 'wso2mi', 'resources');
         const fileContents: string[] = [];
+        
+        // Helper function to recursively read files from a directory
+        const readFilesRecursively = async (dirPath: string, excludeFolders: string[] = []): Promise<void> => {
+            if (!fs.existsSync(dirPath)) {
+                return;
+            }
+
+            const entries = await fs.promises.readdir(dirPath, { withFileTypes: true });
+
+            for (const entry of entries) {
+                const fullPath = path.join(dirPath, entry.name);
+
+                if (entry.isDirectory()) {
+                    // Skip excluded folders
+                    if (!excludeFolders.includes(entry.name)) {
+                        await readFilesRecursively(fullPath, excludeFolders);
+                    }
+                } else if (entry.isFile()) {
+                    try {
+                        const content = await fs.promises.readFile(fullPath, 'utf-8');
+                        fileContents.push(content);
+                    } catch (error) {
+                        // Skip files that can't be read as text
+                        console.warn(`Could not read file as text: ${fullPath}`);
+                    }
+                }
+            }
+        };
+
+        // Read artifacts folders
         var resourceFolders = ['apis', 'endpoints', 'inbound-endpoints', 'local-entries', 'message-processors', 'message-stores', 'proxy-services', 'sequences', 'tasks', 'templates'];
         for (const folder of resourceFolders) {
             const folderPath = path.join(artifactDirPath, folder);
@@ -3493,6 +3583,11 @@ ${endpointAttributes}
                 }
             }
         }
+
+        // Read resources folders recursively, excluding specified folders
+        const excludedFolders = ['api-definitions', 'metadata', 'connectors'];
+        await readFilesRecursively(resourcesDirPath, excludedFolders);
+
         return { context: fileContents, rootPath: this.projectUri };
     }
 
@@ -4018,6 +4113,40 @@ ${endpointAttributes}
         });
     }
 
+    async configureKubernetes(params: ConfigureKubernetesRequest): Promise<ConfigureKubernetesResponse> {
+        return new Promise(async (resolve) => {
+            const hasEnvValues = params.envValues && params.envValues.length > 0;
+            const hasPorts = params.ports && params.ports.length > 0;
+            const k8Configuration = getKubernetesConfiguration({ name: params.name, replicas: params.replicas, targetImage: params.targetImage, ports: params.ports, hasEnvValues: hasEnvValues, hasPorts: hasPorts });
+            const k8Path = path.join(this.projectUri, 'deployment', 'kubernetes');
+            fs.mkdirSync(k8Path, { recursive: true });
+            const configFilePath = path.join(k8Path, 'integration_k8s.yaml');
+            await replaceFullContentToFile(configFilePath, k8Configuration);
+            const configFile = await vscode.workspace.openTextDocument(configFilePath);
+            await configFile.save();
+            if (hasEnvValues) {
+                const envConfiguration = getKubernetesDataConfiguration(params.envValues);
+                const envDataFilePath = path.join(k8Path, "integration_data.yaml");
+                await replaceFullContentToFile(envDataFilePath, envConfiguration);
+                const envDataFile = await vscode.workspace.openTextDocument(envDataFilePath);
+                await envDataFile.save();
+            }
+            commands.executeCommand(COMMANDS.REFRESH_COMMAND);
+            resolve({ path: k8Path });
+        });
+    }
+
+    isKubernetesConfigured(): Promise<boolean> {
+        return new Promise(async (resolve) => {
+            const configFilePath = path.join(this.projectUri, 'deployment', 'kubernetes', 'integration_k8s.yaml');
+            if (fs.existsSync(configFilePath)) {
+                resolve(true);
+            } else {
+                resolve(false);
+            }
+        });
+    }
+
     async getSelectiveWorkspaceContext(): Promise<GetSelectiveWorkspaceContextResponse> {
         var currentFile = getStateMachine(this.projectUri).context().documentUri;
         //get the current file's content
@@ -4890,7 +5019,7 @@ ${keyValuesXML}`;
             const openAPISpecPath = path.join(
                 this.projectUri,
                 SWAGGER_REL_DIR,
-                `${apiName}.yaml`
+                `${path.basename(params.apiPath, ".xml")}.yaml`
             );
 
             // Create directory if not exists
@@ -4919,8 +5048,12 @@ ${keyValuesXML}`;
                 });
             }
 
-            const response = await langClient.swaggerFromAPI({ apiPath: params.apiPath });
-            const generatedSwagger = response.swagger;
+            let swaggerContent;
+            if (fs.existsSync(openAPISpecPath)) {
+                swaggerContent = fs.readFileSync(openAPISpecPath, "utf8");
+            } else {
+                swaggerContent = swagger;
+            }
             const port = await getPortPromise({ port: 1000, stopPort: 3000 });
             const cors_proxy = require('cors-anywhere');
             cors_proxy.createServer({
@@ -4929,7 +5062,7 @@ ${keyValuesXML}`;
             }).listen(port, 'localhost');
 
             const swaggerData: SwaggerData = {
-                generatedSwagger: generatedSwagger,
+                generatedSwagger: swaggerContent,
                 port: port
             };
 
@@ -4940,15 +5073,11 @@ ${keyValuesXML}`;
     async compareSwaggerAndAPI(params: SwaggerTypeRequest): Promise<CompareSwaggerAndAPIResponse> {
         return new Promise(async (resolve) => {
 
-            // TODO: Remove below return statment after fixing issue
-            // https://github.com/wso2/mi-vscode/issues/968 
-            return resolve({ swaggerExists: false });
-
             const { apiPath, apiName } = params;
             const swaggerPath = path.join(
                 this.projectUri,
                 SWAGGER_REL_DIR,
-                `${apiName}.yaml`
+                `${path.basename(params.apiPath, ".xml")}.yaml`
             );
 
             if (!fs.existsSync(swaggerPath)) {
@@ -4956,7 +5085,7 @@ ${keyValuesXML}`;
             }
 
             const langClient = getStateMachine(this.projectUri).context().langClient!;
-            const { swagger: generatedSwagger } = await langClient.swaggerFromAPI({ apiPath });
+            const { swagger: generatedSwagger } = await langClient.swaggerFromAPI({ apiPath: apiPath, swaggerPath: swaggerPath });
             const swaggerContent = fs.readFileSync(swaggerPath, 'utf-8');
             const isEqualSwagger = isEqualSwaggers({
                 existingSwagger: parse(swaggerContent),
@@ -4977,14 +5106,14 @@ ${keyValuesXML}`;
             const swaggerPath = path.join(
                 this.projectUri,
                 SWAGGER_REL_DIR,
-                `${apiName}.yaml`
+                `${path.basename(params.apiPath, ".xml")}.yaml`
             );
 
             let generatedSwagger = params.generatedSwagger;
             let existingSwagger = params.existingSwagger;
             if (!generatedSwagger || !existingSwagger) {
                 const langClient = getStateMachine(this.projectUri).context().langClient!;
-                const response = await langClient.swaggerFromAPI({ apiPath });
+                const response = await langClient.swaggerFromAPI({ apiPath: apiPath, ...(fs.existsSync(swaggerPath) && { swaggerPath: swaggerPath }) });
                 generatedSwagger = response.swagger;
                 existingSwagger = fs.readFileSync(swaggerPath, 'utf-8');
             }
@@ -5004,7 +5133,7 @@ ${keyValuesXML}`;
             const swaggerPath = path.join(
                 this.projectUri,
                 SWAGGER_REL_DIR,
-                `${apiName}.yaml`
+                `${path.basename(params.apiPath, ".xml")}.yaml`
             );
 
             let generatedSwagger = params.generatedSwagger;
@@ -5272,12 +5401,14 @@ ${keyValuesXML}`;
     }
 
     async getOpenAPISpec(params: SwaggerTypeRequest): Promise<SwaggerFromAPIResponse> {
+        const swaggerPath = path.join(this.projectUri, SWAGGER_REL_DIR,
+            `${path.basename(params.apiPath, ".xml")}.yaml`);
         const langClient = getStateMachine(this.projectUri).context().langClient!;
         let response;
         if (params.isRuntimeService) {
-            response = await langClient.swaggerFromAPI({ apiPath: params.apiPath, port: DebuggerConfig.getServerPort() });
+            response = await langClient.swaggerFromAPI({ apiPath: params.apiPath, port: DebuggerConfig.getServerPort(), ...(fs.existsSync(swaggerPath) && { swaggerPath: swaggerPath }) });
         } else {
-            response = await langClient.swaggerFromAPI({ apiPath: params.apiPath });
+            response = await langClient.swaggerFromAPI({ apiPath: params.apiPath, ...(fs.existsSync(swaggerPath) && { swaggerPath: swaggerPath }) });
         }
         const generatedSwagger = response.swagger;
         const port = await getPortPromise({ port: 1000, stopPort: 3000 });
@@ -5764,6 +5895,181 @@ ${keyValuesXML}`;
         }
     };
 
+    async getValueOfEnvVariable(variableName: string): Promise<string> {
+        return new Promise(async (resolve) => {
+            const langClient = getStateMachine(this.projectUri).context().langClient!;
+            const response = await langClient.getConfigurableList();
+            const envVariable = response.find(variable => variable.key === variableName);
+            if (envVariable && envVariable.value != null && envVariable.value !== "") {
+                resolve(envVariable.value);
+            } else {
+                resolve("");
+            }
+        });
+    };
+
+    async getPomFileContent(): Promise<GetPomFileContentResponse> {
+        return new Promise((resolve, reject) => {
+            const pomPath = path.join(this.projectUri, 'pom.xml');
+            fs.readFile(pomPath, 'utf8', (err, data) => {
+                if (err) {
+                    reject(err);
+                } else {
+                    resolve({ content: data });
+                }
+            });
+        });
+    }
+
+    async getExternalConnectorDetails(): Promise<GetExternalConnectorDetailsResponse> {
+        return new Promise((resolve, reject) => {
+            const connectorsPath = path.join(this.projectUri, 'src', 'main', 'wso2mi', 'resources', 'connectors');
+            
+            fs.readdir(connectorsPath, { withFileTypes: true }, (err, entries) => {
+                if (err) {
+                    // If directory doesn't exist or can't be read, return empty array
+                    resolve({ connectors: [] });
+                } else {
+                    // Filter only zip files and get their names without extension
+                    const connectorNames = entries
+                        .filter(entry => entry.isFile() && entry.name.endsWith('.zip'))
+                        .map(entry => entry.name.replace('.zip', ''));
+                    
+                    resolve({ connectors: connectorNames });
+                }
+            });
+        });
+    }
+
+    async getMockServices(): Promise<GetMockServicesResponse> {
+        return new Promise(async (resolve) => {
+            const mockServices: string[] = [];
+            const mockServiceNames: string[] = [];
+            
+            if (workspace.workspaceFolders) {
+                const mockServicesDirPath = path.join(this.projectUri, 'src', 'test', 'resources', 'mock-services');
+                
+                if (fs.existsSync(mockServicesDirPath)) {
+                    try {
+                        const files = fs.readdirSync(mockServicesDirPath);
+                        
+                        for (const file of files) {
+                            if (file.endsWith('.xml')) {
+                                const filePath = path.join(mockServicesDirPath, file);
+                                try {
+                                    const content = fs.readFileSync(filePath, 'utf8');
+                                    const fileName = path.parse(file).name;
+                                    
+                                    mockServices.push(content);
+                                    mockServiceNames.push(fileName);
+                                } catch (error) {
+                                    console.error(`Error reading mock service file ${filePath}:`, error);
+                                }
+                            }
+                        }
+                    } catch (error) {
+                        console.error(`Error reading mock services directory ${mockServicesDirPath}:`, error);
+                    }
+                }
+            }
+
+            return resolve({ 
+                mockServices,
+                mockServiceNames
+            });
+        });
+    }
+
+    async updatePropertiesInArtifactXML(params: UpdateRegistryPropertyRequest): Promise<string> {
+        const possibleArtifactXMLPaths = [
+            path.join(this.projectUri, "src", "main", "wso2mi", "resources", "artifact.xml"),
+            path.join(this.projectUri, "src", "main", "wso2mi", "resources", "registry", "artifact.xml")
+        ];
+
+        let updatedXml = "";
+
+        for (const filePath of possibleArtifactXMLPaths) {
+            if (!fs.existsSync(filePath)) {
+                continue;
+            }
+
+            const xmlData = fs.readFileSync(filePath, "utf8");
+            const parsed = await parseStringPromise(xmlData);
+
+            let registryResourceFound = false;
+            parsed.artifacts.artifact.forEach((artifact: any) => {
+                const fileName = artifact.item[0].file[0];
+                if (params.targetFile.endsWith(generatePathFromRegistryPath(artifact.item[0].path[0], fileName))) {
+                    registryResourceFound = true;
+                    if (params.properties.length === 0) {
+                        artifact.item[0].properties = [""];
+                    } else {
+                        artifact.item[0].properties = [
+                            {
+                                property: params.properties.map(p => ({
+                                    $: { key: p.key, value: p.value }
+                                }))
+                            }
+                        ];
+                    }
+                }
+            });
+
+            if (registryResourceFound) {
+                const builder = new Builder({ xmldec: { version: "1.0", encoding: "UTF-8" } });
+                updatedXml = builder.buildObject(parsed);
+                await replaceFullContentToFile(filePath, updatedXml);
+                break;
+            }
+        }
+        return updatedXml;
+    }
+
+    async getPropertiesFromArtifactXML(targetFile: string): Promise<Property[] | undefined> {
+        if (!targetFile) {
+            await window.showInformationMessage(
+                "Registry properties cannot be added to the selected resource.",
+                { modal: true }
+            );
+            return undefined;
+        }
+
+        const possibleArtifactXMLPaths = [
+            path.join(this.projectUri, "src", "main", "wso2mi", "resources", "artifact.xml"),
+            path.join(this.projectUri, "src", "main", "wso2mi", "resources", "registry", "artifact.xml")
+        ];
+
+        for (const filePath of possibleArtifactXMLPaths) {
+            if (!fs.existsSync(filePath)) {
+                continue;
+            }
+
+            const xmlData = fs.readFileSync(filePath, "utf8");
+            const parsed = await parseStringPromise(xmlData);
+
+            for (const artifact of parsed.artifacts.artifact) {
+                const fileName = artifact.item[0].file[0];
+                if (targetFile.endsWith(generatePathFromRegistryPath(artifact.item[0].path[0], fileName))) {
+                    const propertiesBlock = artifact.item[0].properties?.[0];
+
+                    if (!propertiesBlock || !propertiesBlock.property) {
+                        return [];
+                    }
+
+                    return propertiesBlock.property.map((prop: any) => ({
+                        key: prop.$.key,
+                        value: prop.$.value
+                    }));
+                }
+            }
+        }
+
+        await window.showInformationMessage(
+            "Registry properties cannot be added to the selected resource.",
+            { modal: true }
+        );
+        return undefined;
+    }
 }
 
 export function getRepoRoot(projectRoot: string): string | undefined {
diff --git a/workspaces/mi/mi-extension/src/rpc-managers/mi-visualizer/rpc-manager.ts b/workspaces/mi/mi-extension/src/rpc-managers/mi-visualizer/rpc-manager.ts
index 69895973c6b..ffdbc8bb01c 100644
--- a/workspaces/mi/mi-extension/src/rpc-managers/mi-visualizer/rpc-manager.ts
+++ b/workspaces/mi/mi-extension/src/rpc-managers/mi-visualizer/rpc-manager.ts
@@ -193,10 +193,8 @@ export class MiVisualizerRpcManager implements MIVisualizerAPI {
     async reloadDependencies(): Promise<boolean> {
         return new Promise(async (resolve) => {
             const langClient = getStateMachine(this.projectUri).context().langClient!;
-            const projectDetails = await langClient?.getProjectDetails();
-            const projectName = projectDetails.primaryDetails.projectName.value;
             await langClient?.updateConnectorDependencies();
-            await extractCAppDependenciesAsProjects(projectName);
+            await extractCAppDependenciesAsProjects(this.projectUri);
             const loadResult = await langClient?.loadDependentCAppResources();
             if (loadResult.startsWith("DUPLICATE ARTIFACTS")) {
                 await window.showWarningMessage(
diff --git a/workspaces/mi/mi-extension/src/stateMachine.ts b/workspaces/mi/mi-extension/src/stateMachine.ts
index 965f513e858..d6da2af5966 100644
--- a/workspaces/mi/mi-extension/src/stateMachine.ts
+++ b/workspaces/mi/mi-extension/src/stateMachine.ts
@@ -7,7 +7,6 @@ import { extension } from './MIExtensionContext';
 import {
     DM_FUNCTION_NAME,
     EVENT_TYPE,
-    findOldProjects,
     HistoryEntry,
     MACHINE_VIEW,
     MachineStateValue,
@@ -31,7 +30,7 @@ import { DMProject } from './datamapper/DMProject';
 import { setupEnvironment } from './util/onboardingUtils';
 import { getPopupStateMachine } from './stateMachinePopup';
 import { askForProject } from './util/workspace';
-import { containsMultiModuleNatureInProjectFile, containsMultiModuleNatureInPomFile, extractNatureFromPomContent, findMultiModuleProjectsInWorkspaceDir } from './util/migrationUtils';
+import { containsMultiModuleNatureInProjectFile, containsMultiModuleNatureInPomFile, findMultiModuleProjectsInWorkspaceDir } from './util/migrationUtils';
 const fs = require('fs');
 
 interface MachineContext extends VisualizerLocation {
@@ -53,7 +52,7 @@ const stateMachine = createMachine<MachineContext>({
         initialize: {
             invoke: {
                 id: 'checkProject',
-                src: (context) => checkIfMiProject(context.projectUri),
+                src: (context) => checkIfMiProject(context.projectUri!),
                 onDone: [
                     {
                         target: 'environmentSetup',
@@ -413,17 +412,17 @@ const stateMachine = createMachine<MachineContext>({
                 const langClient = context.langClient!;
                 const viewLocation = context;
 
-                 if( context.view === MACHINE_VIEW.IdpConnectorSchemaGeneratorForm){
-                    if( context.documentUri ) {
+                if (context.view === MACHINE_VIEW.IdpConnectorSchemaGeneratorForm) {
+                    if (context.documentUri) {
                         const filePath = context.documentUri;
                         const fileContent = fs.readFileSync(filePath, 'utf8');
                         viewLocation.customProps = {
                             fileContent: fileContent,
-                        }; 
+                        };
                         viewLocation.view = MACHINE_VIEW.IdpConnectorSchemaGeneratorForm;
                     }
                     return resolve(viewLocation);
-                }   
+                }
                 if (context.view?.includes("Form") && !context.view.includes("Test") && !context.view.includes("Mock")) {
                     return resolve(viewLocation);
                 }
@@ -688,7 +687,7 @@ export function openView(type: EVENT_TYPE, viewLocation?: VisualizerLocation) {
         const stateMachine = getStateMachine(viewLocation?.projectUri);
         const state = stateMachine.state();
         if (state === 'initialize') {
-            const listener = (state) => {
+            const listener = (state: { value: { ready: string; }; }) => {
                 if (state?.value?.ready === "viewReady") {
                     stateMachine.service().send({ type: type, viewLocation: viewLocation });
                     stateMachine.service().off(listener);
@@ -705,7 +704,7 @@ export function openView(type: EVENT_TYPE, viewLocation?: VisualizerLocation) {
             return;
         }
 
-        if (workspaces.length > 1 && viewLocation?.view !== MACHINE_VIEW.Welcome ) {
+        if (workspaces.length > 1 && viewLocation?.view !== MACHINE_VIEW.Welcome) {
             askForPrj();
             async function askForPrj() {
                 const projectUri = await askForProject();
@@ -772,7 +771,7 @@ function updateProjectExplorer(location: VisualizerLocation | undefined) {
     }
 }
 
-async function checkIfMiProject(projectUri) {
+async function checkIfMiProject(projectUri: string) {
     log(`Detecting project in ${projectUri} - ${new Date().toLocaleTimeString()}`);
 
     let isProject = false, isOldProject = false, isOldWorkspace = false, displayOverview = true, view = MACHINE_VIEW.Overview, isEnvironmentSetUp = false;
@@ -790,25 +789,7 @@ async function checkIfMiProject(projectUri) {
 
         // If not found, check for .project files
         if (!isProject) {
-            const projectFiles = await vscode.workspace.findFiles(new vscode.RelativePattern(projectUri, '.project'), '**/node_modules/**', 1);
-
-            if (projectFiles.length > 0) {
-                if (await containsMultiModuleNatureInProjectFile(projectFiles[0].fsPath)) {
-                    isOldProject = true;
-                    log("Integration Studio project detected");
-                }
-            } else if (fs.existsSync(pomFilePath)) {
-                if (await containsMultiModuleNatureInPomFile(pomFilePath)) {
-                    isOldProject = true;
-                    log("Integration Studio project detected");
-                }
-            } else if (fs.existsSync(projectUri)) {
-                const foundOldProjects = await findMultiModuleProjectsInWorkspaceDir(projectUri);
-                if (foundOldProjects.length > 0) {
-                    isOldWorkspace = true;
-                    log("Integration Studio workspace detected");
-                }
-            }
+            ({ isOldProject, isOldWorkspace } = (await isOldProjectOrWorkspace(projectUri)) || { isOldProject: false, isOldWorkspace: false });
         }
     } catch (err) {
         console.error(err);
@@ -819,7 +800,8 @@ async function checkIfMiProject(projectUri) {
         // Check if the project is empty
         const files = await vscode.workspace.findFiles(new vscode.RelativePattern(projectUri, "src/main/wso2mi/artifacts/*/*.xml"), '**/node_modules/**', 1);
         if (files.length === 0) {
-            const config = vscode.workspace.getConfiguration('MI', projectUri);
+            let workspaceFolder = vscode.workspace.getWorkspaceFolder(vscode.Uri.file(projectUri));
+            const config = vscode.workspace.getConfiguration('MI', workspaceFolder);
             const scope = config.get<string>("Scope");
             switch (scope) {
                 case "integration-as-api":
@@ -880,7 +862,32 @@ async function checkIfMiProject(projectUri) {
     };
 }
 
-function findViewIcon(view) {
+export async function isOldProjectOrWorkspace(projectUri: any) {
+    let isOldProject: boolean = false, isOldWorkspace: boolean = false;
+    const projectFiles = await vscode.workspace.findFiles(new vscode.RelativePattern(projectUri, '.project'), '**/node_modules/**', 1);
+    const pomFilePath = path.join(projectUri, 'pom.xml');
+
+    if (projectFiles.length > 0) {
+        if (await containsMultiModuleNatureInProjectFile(projectFiles[0].fsPath)) {
+            isOldProject = true;
+            log("Integration Studio project detected");
+        }
+    } else if (fs.existsSync(pomFilePath)) {
+        if (await containsMultiModuleNatureInPomFile(pomFilePath)) {
+            isOldProject = true;
+            log("Integration Studio project detected");
+        }
+    } else if (fs.existsSync(projectUri)) {
+        const foundOldProjects = await findMultiModuleProjectsInWorkspaceDir(projectUri);
+        if (foundOldProjects.length > 0) {
+            isOldWorkspace = true;
+            log("Integration Studio workspace detected");
+        }
+    }
+    return isOldProject || isOldWorkspace ? { isOldProject, isOldWorkspace } : false;
+}
+
+function findViewIcon(view: any) {
     let icon = 'icon';
     switch (view) {
         case MACHINE_VIEW.ServiceDesigner:
diff --git a/workspaces/mi/mi-extension/src/swagger/server.ts b/workspaces/mi/mi-extension/src/swagger/server.ts
index 01922067e24..7154724b493 100644
--- a/workspaces/mi/mi-extension/src/swagger/server.ts
+++ b/workspaces/mi/mi-extension/src/swagger/server.ts
@@ -17,6 +17,7 @@
  */
 
 import axios, { Method } from "axios";
+import https from 'https';
 
 interface Request {
   url: string;
@@ -34,6 +35,7 @@ interface Response {
   headers?: Record<string, string>;
 }
 
+const httpsAgent = new https.Agent({ rejectUnauthorized: false });
 const CONNECTION_REFUSED = 'ECONNREFUSED';
 const EAI_AGAIN = 'EAI_AGAIN';
 export class SwaggerServer {
@@ -45,7 +47,8 @@ export class SwaggerServer {
         method: data.method,
         headers,
         url: data.url,
-        data: data.body
+        data: data.body,
+        httpsAgent
       })
         .then(function (response) {
           const responseData = response.data;
diff --git a/workspaces/mi/mi-extension/src/test-explorer/activator.ts b/workspaces/mi/mi-extension/src/test-explorer/activator.ts
index 0fda010bb25..cccc9e4b4e0 100644
--- a/workspaces/mi/mi-extension/src/test-explorer/activator.ts
+++ b/workspaces/mi/mi-extension/src/test-explorer/activator.ts
@@ -17,7 +17,7 @@
  */
 
 import path = require("path");
-import { TestController, tests, TestRunProfileKind, Uri, TestItem, ExtensionContext, commands, Range, Position, window } from "vscode";
+import { TestController, tests, TestRunProfileKind, Uri, TestItem, ExtensionContext, commands, Range, Position, window, workspace, WorkspaceEdit } from "vscode";
 import { runHandler } from "./runner";
 import { createTestsForAllFiles, testFileMatchPattern } from "./discover";
 import { getProjectName, getProjectRoot, startWatchingWorkspace } from "./helper";
@@ -137,6 +137,124 @@ export async function activateTestExplorer(extensionContext: ExtensionContext) {
         console.log('Update Test Case');
     });
 
+    commands.registerCommand(COMMANDS.DELETE_TEST_CASE, async (entry: TestItem) => {
+        const id = entry?.id;
+        if (!id || id.split('.xml/').length < 2) {
+            window.showErrorMessage('Test case id is not available');
+            return;
+        }
+        const fileUri = `${id.split('.xml/')[0]}.xml`;
+        const testCaseName = id.split('.xml/')[1];
+        
+        // Show confirmation dialog
+        const confirmation = await window.showWarningMessage(
+            `Are you sure you want to delete test case "${testCaseName}"?`,
+            { modal: true },
+            'Delete'
+        );
+        
+        if (confirmation !== 'Delete') {
+            return;
+        }
+
+        try {
+            const projectRoot = getProjectRoot(Uri.file(fileUri));
+            const langClient = await MILanguageClient.getInstance(projectRoot!);
+            const st = await langClient?.languageClient?.getSyntaxTree({
+                documentIdentifier: {
+                    uri: fileUri
+                },
+            });
+            
+            if (!st) {
+                window.showErrorMessage('Syntax tree is not available');
+                return;
+            }
+            
+            const unitTestsST: UnitTest = st?.syntaxTree["unit-test"];
+            const testCaseToDelete = unitTestsST?.testCases?.testCases.find((testCase) => testCase.name === testCaseName);
+            
+            if (!testCaseToDelete) {
+                window.showErrorMessage('Test case not found in syntax tree');
+                return;
+            }
+
+            // Delete the test case from the file by removing its XML content
+            const document = await workspace.openTextDocument(Uri.file(fileUri));
+            const edit = new WorkspaceEdit();
+            
+            // Calculate the range to delete (including the test case XML tags)
+            const startLine = testCaseToDelete.range.startTagRange.start.line;
+            const endLine = testCaseToDelete.range.endTagRange.end.line;
+            const startCharacter = testCaseToDelete.range.startTagRange.start.character;
+            const endCharacter = testCaseToDelete.range.endTagRange.end.character;
+            
+            const deleteRange = new Range(
+                new Position(startLine, startCharacter),
+                new Position(endLine, endCharacter)
+            );
+            
+            edit.delete(Uri.file(fileUri), deleteRange);
+            
+            const success = await workspace.applyEdit(edit);
+            if (success) {
+                await document.save();
+                window.showInformationMessage(`Test case "${testCaseName}" deleted successfully`);
+                
+                // Refresh the test explorer to update the UI
+                createTestsForAllFiles();
+            } else {
+                window.showErrorMessage('Failed to delete test case');
+            }
+        } catch (error) {
+            window.showErrorMessage(`Error deleting test case: ${error}`);
+            console.error('Delete test case error:', error);
+        }
+    });
+
+    commands.registerCommand(COMMANDS.DELETE_TEST_SUITE, async (entry: TestItem) => {
+        const id = entry?.id;
+        if (!id || !id.endsWith('.xml')) {
+            window.showErrorMessage('Test suite id is not available');
+            return;
+        }
+        
+        const fileUri = id;
+        const testSuiteName = getProjectName(Uri.file(fileUri));
+        
+        // Show confirmation dialog
+        const confirmation = await window.showWarningMessage(
+            `Are you sure you want to delete test suite "${testSuiteName}"?\nThis will delete the entire test suite file and all test cases within it.`,
+            { modal: true },
+            'Delete'
+        );
+        
+        if (confirmation !== 'Delete') {
+            return;
+        }
+
+        try {
+            const projectRoot = getProjectRoot(Uri.file(fileUri));
+            
+            // Delete the entire test suite file
+            const edit = new WorkspaceEdit();
+            edit.deleteFile(Uri.file(fileUri), { recursive: false, ignoreIfNotExists: true });
+            
+            const success = await workspace.applyEdit(edit);
+            if (success) {
+                window.showInformationMessage(`Test suite "${testSuiteName}" deleted successfully`);
+                
+                // Refresh the test explorer to update the UI
+                createTestsForAllFiles();
+            } else {
+                window.showErrorMessage('Failed to delete test suite file');
+            }
+        } catch (error) {
+            window.showErrorMessage(`Error deleting test suite: ${error}`);
+            console.error('Delete test suite error:', error);
+        }
+    });
+
     commands.registerCommand(COMMANDS.GEN_AI_TESTS, () => {
         openView(EVENT_TYPE.OPEN_VIEW, { view: MACHINE_VIEW.AITestGen });
     });
diff --git a/workspaces/mi/mi-extension/src/test-explorer/mock-services/activator.ts b/workspaces/mi/mi-extension/src/test-explorer/mock-services/activator.ts
index 278ea1d4744..bd319b8423c 100644
--- a/workspaces/mi/mi-extension/src/test-explorer/mock-services/activator.ts
+++ b/workspaces/mi/mi-extension/src/test-explorer/mock-services/activator.ts
@@ -21,6 +21,7 @@ export const mockSerivesFilesMatchPattern = '**/src/test/resources/mock-services
 import { TreeDataProvider, Event, EventEmitter, ExtensionContext, TreeItem, TreeItemCollapsibleState, workspace, RelativePattern, window, ThemeIcon, commands } from 'vscode';
 import { startWatchingWorkspace } from '../helper';
 import path = require('path');
+import fs = require('fs');
 import { COMMANDS } from '../../constants';
 import { EVENT_TYPE, MACHINE_VIEW } from '@wso2/mi-core';
 import { openView } from '../../stateMachine';
@@ -137,4 +138,44 @@ export function activateMockServiceTreeView(context: ExtensionContext): void {
 
         console.log('Update Mock Service');
     });
+
+    commands.registerCommand(COMMANDS.DELETE_MOCK_SERVICE, async (data: any) => {
+        if (data?.path) {
+            // Extract the mock service name from the file path
+            const mockServiceName = path.basename(data.path).split(".xml")[0];
+            
+            // Show confirmation dialog
+            const confirmation = await window.showWarningMessage(
+                `Are you sure you want to delete mock service "${mockServiceName}"?`,
+                { modal: true },
+                'Delete'
+            );
+            
+            if (confirmation !== 'Delete') {
+                return;
+            }
+            
+            try {
+                // Check if file exists before attempting deletion
+                if (fs.existsSync(data.path)) {
+                    // Delete the mock service file
+                    fs.unlinkSync(data.path);
+                    
+                    // Refresh the tree view to reflect the changes
+                    mockServiceTreeProvider.refresh();
+                    
+                    // Show success message
+                    window.showInformationMessage(`Mock service "${mockServiceName}" deleted successfully`);
+                    
+                    console.log('Deleted Mock Service:', data.path);
+                } else {
+                    console.warn('Mock service file not found:', data.path);
+                    window.showErrorMessage(`Mock service file not found: ${mockServiceName}`);
+                }
+            } catch (error) {
+                console.error('Error deleting mock service:', error);
+                window.showErrorMessage(`Failed to delete mock service "${mockServiceName}": ${error}`);
+            }
+        }
+    });
 }
diff --git a/workspaces/mi/mi-extension/src/test-explorer/runner.ts b/workspaces/mi/mi-extension/src/test-explorer/runner.ts
index ea533715bcd..3c5b08a67b6 100644
--- a/workspaces/mi/mi-extension/src/test-explorer/runner.ts
+++ b/workspaces/mi/mi-extension/src/test-explorer/runner.ts
@@ -20,7 +20,7 @@
  * Test explorer run and debug related funtions.
  */
 
-import { Uri, CancellationToken, TestItem, TestMessage, TestRunProfileKind, TestRunRequest, window, MarkdownString, TestRun, OutputChannel } from "vscode";
+import { Uri, CancellationToken, TestItem, TestMessage, TestRunProfileKind, TestRunRequest, window, MarkdownString, TestRun, OutputChannel, workspace } from "vscode";
 
 import { discoverTests, gatherTestItems } from "./discover";
 import { testController } from "./activator";
@@ -31,6 +31,7 @@ import { TestRunnerConfig } from "./config";
 import { ChildProcess } from "child_process";
 import treeKill = require("tree-kill");
 import { normalize } from "upath";
+import { MVN_COMMANDS } from "../constants";
 const fs = require('fs');
 const child_process = require('child_process');
 const readline = require('readline');
@@ -281,8 +282,10 @@ function printToOutput(runner: TestRun, line: string, isError: boolean = false)
 
 async function compileProject(projectRoot: string, printToOutput?: (line: string, isError: boolean) => void): Promise<void> {
     return new Promise<void>(async (resolve, reject) => {
-        const mvnCmd = process.platform === "win32" ? ".\\mvnw.cmd" : "./mvnw";
-        const testRunCmd = `${mvnCmd} compile`;
+        const config = workspace.getConfiguration('MI', Uri.file(projectRoot));
+        const mvnCmd = config.get("USE_LOCAL_MAVEN") ? "mvn" : (process.platform === "win32" ?
+            MVN_COMMANDS.MVN_WRAPPER_WIN_COMMAND : MVN_COMMANDS.MVN_WRAPPER_COMMAND);
+        const testRunCmd = mvnCmd + MVN_COMMANDS.COMPILE_COMMAND;
 
         let finished = false;
         const onData = (data: string) => {
@@ -311,9 +314,11 @@ async function compileProject(projectRoot: string, printToOutput?: (line: string
 
 async function runTests(testNames: string, projectRoot: string, triggerId: string, printToOutput?: (line: string, isError: boolean) => void): Promise<void> {
     return new Promise<void>(async (resolve, reject) => {
-        const mvnCmd = process.platform === "win32" ? ".\\mvnw.cmd" : "./mvnw";
+        const config = workspace.getConfiguration('MI', Uri.file(projectRoot));
+        const mvnCmd = config.get("USE_LOCAL_MAVEN") ? "mvn" : (process.platform === "win32" ?
+            MVN_COMMANDS.MVN_WRAPPER_WIN_COMMAND : MVN_COMMANDS.MVN_WRAPPER_COMMAND);
         const testLevel = triggerId.endsWith(".xml") ? "unitTest" : triggerId.includes(".xml") ? "testCase" : "testSuite";
-        const basicTestCmd = `${mvnCmd} test -DtestServerType=remote -DtestServerHost=${TestRunnerConfig.getHost()} -DtestServerPort=${TestRunnerConfig.getServerPort()} -P test`;
+        const basicTestCmd = `${mvnCmd + MVN_COMMANDS.TEST_COMMAND} -DtestServerHost=${TestRunnerConfig.getHost()} -DtestServerPort=${TestRunnerConfig.getServerPort()} -P test`;
 
         let testRunCmd = basicTestCmd;
         switch (testLevel) {
diff --git a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/components/ArtifactTest/MessageStore.ts b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/components/ArtifactTest/MessageStore.ts
index 0079228084c..35053c4c5ae 100644
--- a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/components/ArtifactTest/MessageStore.ts
+++ b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/components/ArtifactTest/MessageStore.ts
@@ -282,7 +282,7 @@ export class MessageStore {
                     type: 'input',
                     value: msName,
                 },
-                'Pre configured Profiles': {
+                'Pre Configured Profiles': {
                     type: 'combo',
                     value: 'ActiveMQ',
                 },
diff --git a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/components/Form.ts b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/components/Form.ts
index b2360630317..18824a1a15a 100644
--- a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/components/Form.ts
+++ b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/components/Form.ts
@@ -127,9 +127,9 @@ export class Form {
                     case 'combo': {
                         let parentDiv;
                         if (data.additionalProps?.nthValue !== undefined) {
-                            parentDiv = this.container.locator(`label:text("${key}")`).nth(data.additionalProps?.nthValue).locator('../../..');
+                            parentDiv = this.container.locator(`label:text-matches("${key}")`).nth(data.additionalProps?.nthValue).locator('../../..');
                         } else {
-                            parentDiv = this.container.locator(`label:text("${key}")`).locator('../../..');
+                            parentDiv = this.container.locator(`label:text-matches("${key}")`).locator('../../..');
                         }
                         await parentDiv.waitFor();
                         const input = parentDiv.locator('input[role="combobox"]');
diff --git a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/components/UnitTest.ts b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/components/UnitTest.ts
index ca1961ea51e..6fe8058406e 100644
--- a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/components/UnitTest.ts
+++ b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/components/UnitTest.ts
@@ -172,14 +172,14 @@ export class UnitTest {
             const propertiesParamManager = await form.getDefaultParamManager('Properties', 'Add Property', 'card-select-testCasePropertiesCard');
             const propertiesForm = await propertiesParamManager.getAddNewForm();
             await this.fillTestCasePropertyForm(propertiesForm, property);
-            await propertiesForm.submit('Save');
+            await propertiesForm.submit('Add');
         }
         console.log('Filling Test Case Assertions');
         for (const assertion of testCase.assertions ?? []) {
             const assertionsParamManager = await form.getDefaultParamManager('Assertions', 'Add Assertion', 'card-select-testCaseAssertionsCard');
             const assertionsForm = await assertionsParamManager.getAddNewForm();
             await this.fillTestCaseAssertionForm(assertionsForm, assertion);
-            await assertionsForm.submit('Save');
+            await assertionsForm.submit('Add');
         }
     }
 
@@ -219,8 +219,8 @@ export class UnitTest {
                     type: 'input',
                     value: property.name
                 },
-                'Property Scope*': {
-                    type: 'dropdown',
+                'Property Scope': {
+                    type: 'combo',
                     value: property.scope
                 },
                 'Property Value*': {
@@ -236,11 +236,11 @@ export class UnitTest {
         await form.fill({
             values: {
                 'Assertion Type': {
-                    type: 'dropdown',
+                    type: 'combo',
                     value: assertion.type
                 },
-                'Actual Expression*': {
-                    type: 'input',
+                '^Assertion$': {
+                    type: 'combo',
                     value: assertion.actualExpression
                 },
                 'Error Message*': {
diff --git a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/unitTestSuite.spec.ts b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/unitTestSuite.spec.ts
index 3a65da85662..01ee62c4bf4 100644
--- a/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/unitTestSuite.spec.ts
+++ b/workspaces/mi/mi-extension/src/test/e2e-playwright-tests/unitTestSuite.spec.ts
@@ -163,13 +163,13 @@ export default function createTests() {
               assertions: [
                 {
                   type: 'Assert Equals',
-                  actualExpression: 'var!=null',
-                  expectedValue: 'true',
+                  actualExpression: 'Payload',
+                  expectedValue: '{ "key": "value" }',
                   errorMessage: 'Assertion failed'
                 },
                 {
                   type: 'Assert Not Null',
-                  actualExpression: 'var==null',
+                  actualExpression: 'Status Code',
                   errorMessage: 'Assertion failed'
                 }
               ]
diff --git a/workspaces/mi/mi-extension/src/util/fileOperations.ts b/workspaces/mi/mi-extension/src/util/fileOperations.ts
index 6212cc32862..f4f6da17906 100644
--- a/workspaces/mi/mi-extension/src/util/fileOperations.ts
+++ b/workspaces/mi/mi-extension/src/util/fileOperations.ts
@@ -21,6 +21,7 @@ import * as fs from 'fs';
 import * as os from 'os';
 import axios from "axios";
 import * as path from 'path';
+import crypto from 'crypto';
 import { XMLParser, XMLBuilder } from "fast-xml-parser";
 import * as unzipper from 'unzipper';
 import { DownloadProgressData, ListRegistryArtifactsResponse, onDownloadProgress, Range, RegistryArtifact, UpdateRegistryMetadataRequest, ApplyEditResponse, RangeFormatRequest} from "@wso2/mi-core";
@@ -115,6 +116,22 @@ async function handleDownloadFile(projectUri: string, rawFileLink: string, defau
     progress.report({ message: "Download finished" });
 }
 
+/**
+ * Generates an MD5 hash for the given input string and returns its hexadecimal representation.
+ *
+ * @param input - The input string to hash.
+ * @returns The hexadecimal string representation of the MD5 hash, or `null` if an error occurs.
+ */
+export function getHash(input: string): string | null {
+    try {
+        const hash = crypto.createHash('md5');
+        hash.update(input);
+        return hash.digest('hex');
+    } catch (error) {
+        return null;
+    }
+}
+
 export function appendContent(path: string, content: string): Promise<boolean> {
     return new Promise((resolve) => {
         try {
@@ -1091,3 +1108,14 @@ export async function rangeFormat(req: RangeFormatRequest): Promise<ApplyEditRes
         resolve({ status: true });
     });
 }
+
+export function generatePathFromRegistryPath(registryPath: string, fileName: string): string {
+    if (registryPath.includes("/mi-resources/")) {
+        registryPath = registryPath.split("/mi-resources/")[1];
+    } else if (registryPath.includes("/config/")) {
+        registryPath = "conf/" + registryPath.split("/config/")[1];
+    } else if (registryPath.includes("/governance/")) {
+        registryPath = "gov/" + registryPath.split("/governance/")[1];
+    }
+    return path.join(registryPath.split("/").join(path.sep), fileName);
+}
diff --git a/workspaces/mi/mi-extension/src/util/importCapp.ts b/workspaces/mi/mi-extension/src/util/importCapp.ts
index 495f7bf1764..f56974908c1 100644
--- a/workspaces/mi/mi-extension/src/util/importCapp.ts
+++ b/workspaces/mi/mi-extension/src/util/importCapp.ts
@@ -80,7 +80,6 @@ interface RegistryCollection {
     properties: string;
 }
 
-
 export async function importCapp(params: ImportProjectRequest): Promise<ImportProjectResponse> {
     const { directory, open } = params;
     const source = params.source.replace(/\.car(?=\.zip$)/, '');
diff --git a/workspaces/mi/mi-extension/src/util/migrationUtils.ts b/workspaces/mi/mi-extension/src/util/migrationUtils.ts
index cddc33d9383..f5fe6835aec 100644
--- a/workspaces/mi/mi-extension/src/util/migrationUtils.ts
+++ b/workspaces/mi/mi-extension/src/util/migrationUtils.ts
@@ -29,6 +29,7 @@ import { extension } from '../MIExtensionContext';
 import { XMLParser, XMLBuilder } from "fast-xml-parser";
 import { updatePomForClassMediator, LATEST_MI_VERSION } from './onboardingUtils';
 import { setJavaHomeInEnvironmentAndPath } from '../debugger/debugHelper';
+import { MVN_COMMANDS } from "../constants";
 
 enum Nature {
     MULTIMODULE,
@@ -298,7 +299,7 @@ export async function generateProjectDirToResolvedPomMap(multiModuleProjectDir:
     }
     const resolvedPomContent = pomResolvedResult.content || '';
 
-    const projectRegex = /<project[\s\S]*?<\/project>/g;
+    const projectRegex = /<project [\s\S]*?<\/project>/g;
     let match;
     while ((match = projectRegex.exec(resolvedPomContent)) !== null) {
         const projectXml = match[0];
@@ -810,9 +811,11 @@ function extractXmlFromMavenOutput(output: string): string | null {
  * @returns A promise that resolves to the effective POM XML content as a string, or an empty string if extraction fails.
  */
 export async function getResolvedPomXmlContent(pomFilePath: string): Promise<PomResolutionResult> {
-    const mvnCmd = process.platform === "win32" ? ".\\mvnw.cmd" : "./mvnw";
-    const command = `${mvnCmd} -f "${pomFilePath}" help:effective-pom`;
     const pomDir = path.dirname(pomFilePath);
+    const config = workspace.getConfiguration('MI', Uri.file(pomDir));
+    const mvnCmd = config.get("USE_LOCAL_MAVEN") ? "mvn" : (process.platform === "win32" ?
+        MVN_COMMANDS.MVN_WRAPPER_WIN_COMMAND : MVN_COMMANDS.MVN_WRAPPER_COMMAND);
+    const command = `${mvnCmd} -f "${pomFilePath}" ${MVN_COMMANDS.GEN_POM_COMMAND}`;
     console.log(`Running command: ${command} in directory: ${pomDir}`);
 
     return new Promise((resolve, reject) => {
diff --git a/workspaces/mi/mi-extension/src/util/onboardingUtils.ts b/workspaces/mi/mi-extension/src/util/onboardingUtils.ts
index 92b657bce2e..d1b831903ac 100644
--- a/workspaces/mi/mi-extension/src/util/onboardingUtils.ts
+++ b/workspaces/mi/mi-extension/src/util/onboardingUtils.ts
@@ -1,3 +1,20 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
 import * as vscode from 'vscode';
 import * as path from 'path';
 import * as os from 'os';
@@ -68,6 +85,7 @@ export async function setupEnvironment(projectUri: string, isOldProject: boolean
 
         if (isMISet && isJavaSet) {
             const isUpdateRequested = await isServerUpdateRequested(projectUri);
+            await updateCarPluginVersion(projectUri);
             return !isUpdateRequested;
         }
         return isMISet && isJavaSet;
@@ -1348,3 +1366,28 @@ async function updateMI(projectUri: string, miVersion: string, latestUpdateVersi
         vscode.window.showErrorMessage(`Failed to update WSO2 Integrator: MI: ${error instanceof Error ? error.message : error}`);
     }
 }
+
+export async function updateCarPluginVersion(projectUri: string): Promise<void> {
+    const config = vscode.workspace.getConfiguration("MI");
+    const isUpdateCarPluginEnabled = config.get<boolean>('autoUpdateCarPlugin');
+    if (!isUpdateCarPluginEnabled) {
+        return;
+    }
+    const pomFiles = await vscode.workspace.findFiles(
+        new vscode.RelativePattern(projectUri, 'pom.xml'),
+        '**/node_modules/**',
+        1
+    );
+    if (pomFiles.length === 0) {
+        throw new Error('pom.xml not found in the specified project.');
+    }
+    const pomContent = await vscode.workspace.openTextDocument(pomFiles[0]);
+    const result = await parseStringPromise(pomContent.getText(), { explicitArray: false, ignoreAttrs: true });
+    const carPluginVersion = result.project.properties['car.plugin.version'];
+    if (!carPluginVersion || carPluginVersion === LATEST_CAR_PLUGIN_VERSION) {
+        return;
+    }
+    if(carPluginVersion < LATEST_CAR_PLUGIN_VERSION) {
+        await updateRuntimeVersionsInPom(result.project.properties['project.runtime.version']);
+    }
+}
diff --git a/workspaces/mi/mi-extension/src/util/swagger.ts b/workspaces/mi/mi-extension/src/util/swagger.ts
index d5d5cb66840..fbdb406de3b 100644
--- a/workspaces/mi/mi-extension/src/util/swagger.ts
+++ b/workspaces/mi/mi-extension/src/util/swagger.ts
@@ -291,15 +291,14 @@ export function generateSwagger(apiPath: string): Promise<SwaggerFromAPIResponse
         if (!projectUri) {
             return;
         }
-        const langClient = getStateMachine(projectUri).context().langClient!;
-        const response = await langClient.swaggerFromAPI({ apiPath: apiPath });
-        const generatedSwagger = response.swagger;
-
         const dirPath = path.join(projectUri, SWAGGER_REL_DIR);
         const swaggerPath = path.join(dirPath, path.basename(apiPath, path.extname(apiPath)) + '.yaml');
         if (!fs.existsSync(dirPath)) {
             fs.mkdirSync(dirPath, { recursive: true });
         }
+        const langClient = getStateMachine(projectUri).context().langClient!;
+        const response = await langClient.swaggerFromAPI({ apiPath: apiPath, ...(fs.existsSync(swaggerPath) && { swaggerPath: swaggerPath }) });
+        const generatedSwagger = response.swagger;
         fs.writeFileSync(swaggerPath, generatedSwagger);
         resolve({ generatedSwagger: generatedSwagger });
     });
diff --git a/workspaces/mi/mi-extension/src/util/template-engine/mustach-templates/KubernetesConfiguration.ts b/workspaces/mi/mi-extension/src/util/template-engine/mustach-templates/KubernetesConfiguration.ts
new file mode 100644
index 00000000000..4dd7631c6f1
--- /dev/null
+++ b/workspaces/mi/mi-extension/src/util/template-engine/mustach-templates/KubernetesConfiguration.ts
@@ -0,0 +1,121 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { render } from "mustache";
+
+export interface KeyValuePair {
+    key: string;
+    version: string;
+}
+
+export interface K8ConfigurationData {
+    name: string;
+    replicas: number;
+    targetImage: string;
+    ports: Array<{ port: number }>;
+    hasEnvValues: boolean;
+    hasPorts: boolean;
+}
+
+export function getKubernetesConfigurationTemplate() {
+    return `---
+apiVersion: "apps/v1"
+kind: "Deployment"
+metadata:
+  name: "{{name}}-deployment"
+spec:
+  replicas: {{replicas}}
+  selector:
+    matchLabels:
+      app: "integration"
+  strategy:
+    rollingUpdate:
+      maxSurge: 2
+      maxUnavailable: 0
+    type: "RollingUpdate"
+  template:
+    metadata:
+      labels:
+        app: "integration"
+    spec:
+      containers:
+      - name: "micro-integrator"
+        image: "{{targetImage}}"
+        imagePullPolicy: "Always"
+        {{#hasPorts}}
+        ports:
+        {{#ports}}
+            - containerPort: {{port}}
+              protocol: "TCP"
+        {{/ports}}
+        {{/hasPorts}}
+        {{#hasEnvValues}}
+        envFrom:
+        - configMapRef:
+            name: "env-data"
+        {{/hasEnvValues}}
+---
+apiVersion: "v1"
+kind: "Service"
+metadata:
+  name: "{{name}}-service"
+spec:
+  type: "ClusterIP"
+  selector:
+    app: "integration"
+  ports:
+  {{#ports}}
+    - name: "{{name}}-inboundport-{{port}}"
+      port: {{port}}
+      targetPort: {{port}}
+  {{/ports}}
+    - name: "{{name}}-management-http-port"
+      port: 9201
+      targetPort: 9201
+    - name: "{{name}}-pt-httpsport"
+      port: 8253
+      targetPort: 8253
+    - name: "{{name}}-pt-httpport"
+      port: 8290
+      targetPort: 8290
+    - name: "{{name}}-management-https-port"
+      port: 9164
+      targetPort: 9164
+`;
+}
+
+export function getKubernetesDataConfigurationTemplate() {
+    return `---
+apiVersion: "v1"
+kind: "ConfigMap"
+metadata:
+  name: "env-data"
+data:
+  {{#envValues}}
+    {{key}}: "{{value}}"
+  {{/envValues}}
+`;
+}
+
+export function getKubernetesDataConfiguration(data: KeyValuePair[]) {
+    return render(getKubernetesDataConfigurationTemplate(), { envValues: data });
+}
+
+export function getKubernetesConfiguration(data: K8ConfigurationData) {
+    return render(getKubernetesConfigurationTemplate(), data);
+}
diff --git a/workspaces/mi/mi-extension/src/util/templates.ts b/workspaces/mi/mi-extension/src/util/templates.ts
index 7376e6b02d3..87edad158aa 100644
--- a/workspaces/mi/mi-extension/src/util/templates.ts
+++ b/workspaces/mi/mi-extension/src/util/templates.ts
@@ -25,7 +25,7 @@ export function escapeXml(text: string) {
     .replace(/"/g, '&quot;');
 };
 
-export const LATEST_CAR_PLUGIN_VERSION = "5.3.3";
+export const LATEST_CAR_PLUGIN_VERSION = "5.4.2";
 
 export const rootPomXmlContent = (projectName: string, groupID: string, artifactID: string, projectUuid: string, version: string, miVersion: string, initialDependencies: string) => `<?xml version="1.0" encoding="UTF-8"?>
 <project xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd" xmlns="http://maven.apache.org/POM/4.0.0"
diff --git a/workspaces/mi/mi-extension/src/visualizer/activate.ts b/workspaces/mi/mi-extension/src/visualizer/activate.ts
index 3300bbb4885..a1d53917360 100644
--- a/workspaces/mi/mi-extension/src/visualizer/activate.ts
+++ b/workspaces/mi/mi-extension/src/visualizer/activate.ts
@@ -35,6 +35,7 @@ import { AiPanelWebview } from '../ai-panel/webview';
 import { MiDiagramRpcManager } from '../rpc-managers/mi-diagram/rpc-manager';
 import { log } from '../util/logger';
 import { CACHED_FOLDER, INTEGRATION_PROJECT_DEPENDENCIES_DIR } from '../util/onboardingUtils';
+import { getHash } from '../util/fileOperations';
 
 export function activateVisualizer(context: vscode.ExtensionContext, firstProject: string) {
     context.subscriptions.push(
@@ -219,8 +220,6 @@ export function activateVisualizer(context: vscode.ExtensionContext, firstProjec
             if (document.document.uri.fsPath.endsWith('pom.xml')) {
                 const projectUri = vscode.workspace.getWorkspaceFolder(document.document.uri)?.uri.fsPath;
                 const langClient = getStateMachine(projectUri!).context().langClient;
-                const projectDetails = await langClient?.getProjectDetails();
-                const projectName = projectDetails.primaryDetails.projectName.value;
                 
                 const confirmUpdate = await vscode.window.showInformationMessage(
                     'The pom.xml file has been modified. Do you want to update the dependencies?',
@@ -233,7 +232,7 @@ export function activateVisualizer(context: vscode.ExtensionContext, firstProjec
                     statusBarItem.text = '$(sync) Updating dependencies...';
                     statusBarItem.show();
                     await langClient?.updateConnectorDependencies();
-                    await extractCAppDependenciesAsProjects(projectName);
+                    await extractCAppDependenciesAsProjects(projectUri);
                     await langClient?.loadDependentCAppResources();
                     statusBarItem.hide();
                 }
@@ -326,17 +325,7 @@ export function activateVisualizer(context: vscode.ExtensionContext, firstProjec
             // Generate Swagger file for API files
             const apiDir = path.join(projectUri!, 'src', 'main', "wso2mi", "artifacts", "apis");
             if (document?.uri.fsPath.includes(apiDir)) {
-                const dirPath = path.join(projectUri!, SWAGGER_REL_DIR);
-                const swaggerOriginalPath = path.join(dirPath, path.basename(document.uri.fsPath, path.extname(document.uri.fsPath)) + '_original.yaml');
-                const swaggerPath = path.join(dirPath, path.basename(document.uri.fsPath, path.extname(document.uri.fsPath)) + '.yaml');
-                if (fs.readFileSync(document.uri.fsPath, 'utf-8').split('\n').length > 3) {
-                    if (fs.existsSync(swaggerOriginalPath)) {
-                        fs.copyFileSync(swaggerOriginalPath, swaggerPath);
-                        fs.rmSync(swaggerOriginalPath);
-                    } else {
-                        generateSwagger(document.uri.fsPath);
-                    }
-                }
+                generateSwagger(document.uri.fsPath);
             }
 
             if (currentView !== 'Connector Store Form' && document?.uri?.fsPath?.includes(artifactsDir) || currentView === MACHINE_VIEW.IdpConnectorSchemaGeneratorForm) {
@@ -346,18 +335,18 @@ export function activateVisualizer(context: vscode.ExtensionContext, firstProjec
     );
 }
 
-export async function extractCAppDependenciesAsProjects(projectName: string) {
+export async function extractCAppDependenciesAsProjects(projectUri: string | undefined) {
     try {
-        const dependenciesDir = path.join(CACHED_FOLDER, INTEGRATION_PROJECT_DEPENDENCIES_DIR);  
-        const dependencyDirs = fs.readdirSync(dependenciesDir, { withFileTypes: true })
-            .filter(dirent => dirent.isDirectory() && dirent.name.startsWith(projectName))
-            .map(dirent => dirent.name);
-
-        if (dependencyDirs.length === 0) {
+        if (!projectUri) {
+            return;
+        }
+        const dependenciesDir = path.join(CACHED_FOLDER, INTEGRATION_PROJECT_DEPENDENCIES_DIR);
+        const hashedProjectPath = getHash(projectUri);
+        const projectName = path.basename(projectUri);
+        const selectedDependencyDir = `${projectName}_${hashedProjectPath}`;
+        if (!fs.existsSync(path.join(dependenciesDir, selectedDependencyDir))) {
             return;
         }
-
-        const selectedDependencyDir = dependencyDirs[0];
         const downloadedDir = path.join(dependenciesDir, selectedDependencyDir, 'Downloaded');
         const extractedDir = path.join(dependenciesDir, selectedDependencyDir, 'Extracted');
         const carFiles = fs.readdirSync(downloadedDir).filter(file => file.endsWith('.car'));
diff --git a/workspaces/mi/mi-extension/webpack.config.js b/workspaces/mi/mi-extension/webpack.config.js
index df1e80e457a..43b76ae2cf5 100644
--- a/workspaces/mi/mi-extension/webpack.config.js
+++ b/workspaces/mi/mi-extension/webpack.config.js
@@ -71,7 +71,7 @@ module.exports = {
   plugins: [
       new webpack.DefinePlugin(envKeys),
   ],
-  devtool: 'nosources-source-map',
+  devtool: !process.env.CI ? "nosources-source-map" : undefined,
   infrastructureLogging: {
     level: "log",
   },
diff --git a/workspaces/mi/mi-rpc-client/src/rpc-clients/mi-diagram/rpc-client.ts b/workspaces/mi/mi-rpc-client/src/rpc-clients/mi-diagram/rpc-client.ts
index 123ce95bc48..91257b5ae5c 100644
--- a/workspaces/mi/mi-rpc-client/src/rpc-clients/mi-diagram/rpc-client.ts
+++ b/workspaces/mi/mi-rpc-client/src/rpc-clients/mi-diagram/rpc-client.ts
@@ -196,6 +196,9 @@ import {
     UpdateWsdlEndpointResponse,
     WriteContentToFileRequest,
     WriteContentToFileResponse,
+    WriteMockServicesRequest,
+    WriteMockServicesResponse,
+    GetMockServicesResponse,
     HandleFileRequest,
     HandleFileResponse,
     WriteIdpSchemaFileToRegistryRequest,
@@ -331,6 +334,8 @@ import {
     updateTestSuite,
     updateWsdlEndpoint,
     writeContentToFile,
+    writeMockServices,
+    getMockServices,
     handleFileWithFS,
     writeIdpSchemaFileToRegistry,
     getIdpSchemaFiles,
@@ -434,7 +439,20 @@ import {
     UpdateMediatorResponse,
     GetConnectorIconRequest,
     GetConnectorIconResponse,
-    getConnectorIcon
+    getConnectorIcon,
+    getValueOfEnvVariable,
+    getPomFileContent,
+    GetPomFileContentResponse,
+    getExternalConnectorDetails,
+    GetExternalConnectorDetailsResponse,
+    configureKubernetes,
+    ConfigureKubernetesRequest,
+    ConfigureKubernetesResponse,
+    isKubernetesConfigured,
+    UpdateRegistryPropertyRequest,
+    Property,
+    updatePropertiesInArtifactXML,
+    getPropertiesFromArtifactXML
 } from "@wso2/mi-core";
 import { HOST_EXTENSION } from "vscode-messenger-common";
 import { Messenger } from "vscode-messenger-webview";
@@ -710,6 +728,10 @@ export class MiDiagramRpcClient implements MiDiagramAPI {
         return this._messenger.sendRequest(writeContentToFile, HOST_EXTENSION, params);
     }
 
+    writeMockServices(params: WriteMockServicesRequest): Promise<WriteMockServicesResponse> {
+        return this._messenger.sendRequest(writeMockServices, HOST_EXTENSION, params);
+    }
+
     handleFileWithFS(params: HandleFileRequest): Promise<HandleFileResponse> {
         return this._messenger.sendRequest(handleFileWithFS, HOST_EXTENSION, params);
     }
@@ -1137,4 +1159,36 @@ export class MiDiagramRpcClient implements MiDiagramAPI {
     closePayloadAlert(): Promise<void> {
         return this._messenger.sendRequest(closePayloadAlert, HOST_EXTENSION);
     }
+  
+    getValueOfEnvVariable(params:string): Promise<string> { 
+        return this._messenger.sendRequest(getValueOfEnvVariable, HOST_EXTENSION, params);
+    }
+
+    getPomFileContent(): Promise<GetPomFileContentResponse> {
+        return this._messenger.sendRequest(getPomFileContent, HOST_EXTENSION);
+    }
+
+    getExternalConnectorDetails(): Promise<GetExternalConnectorDetailsResponse> {
+        return this._messenger.sendRequest(getExternalConnectorDetails, HOST_EXTENSION);
+    }
+
+    getMockServices(): Promise<GetMockServicesResponse> {
+        return this._messenger.sendRequest(getMockServices, HOST_EXTENSION);
+    }
+  
+    configureKubernetes(params: ConfigureKubernetesRequest): Promise<ConfigureKubernetesResponse> {
+        return this._messenger.sendRequest(configureKubernetes, HOST_EXTENSION, params);
+    }
+
+    isKubernetesConfigured(): Promise<boolean> {
+        return this._messenger.sendRequest(isKubernetesConfigured, HOST_EXTENSION);
+    }
+
+    updatePropertiesInArtifactXML(params: UpdateRegistryPropertyRequest): Promise<string> {
+        return this._messenger.sendRequest(updatePropertiesInArtifactXML, HOST_EXTENSION, params);
+    }
+
+    getPropertiesFromArtifactXML(params: string): Promise<Property[] | undefined> {
+        return this._messenger.sendRequest(getPropertiesFromArtifactXML, HOST_EXTENSION, params);
+    }
 }
diff --git a/workspaces/mi/mi-visualizer/src/MainPanel.tsx b/workspaces/mi/mi-visualizer/src/MainPanel.tsx
index 3be30461a8e..b8f29b64989 100644
--- a/workspaces/mi/mi-visualizer/src/MainPanel.tsx
+++ b/workspaces/mi/mi-visualizer/src/MainPanel.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, Suspense } from 'react';
 import { POPUP_EVENT_TYPE, PopupMachineStateValue, MACHINE_VIEW, Platform, VisualizerLocation } from '@wso2/mi-core';
 import { useVisualizerContext } from '@wso2/mi-rpc-client';
 import { ServiceDesignerView } from './views/ServiceDesigner';
@@ -55,8 +55,11 @@ import { TaskView } from './views/Diagram/Task';
 import { InboundEPView } from './views/Diagram/InboundEndpoint';
 import { Overview } from './views/Overview';
 import { DatamapperForm } from './views/Forms/DatamapperForm';
+import { DataMapperMigrationForm } from './views/Forms/DataMapperMigrationForm';
 import { ImportArtfactForm } from './views/Forms/ImportArtifactForm';
 import { IdpConnectorSchemaGenerateForm }from './views/Forms/IDPConnectorForm/IdpConnectorSchemaGenerateForm';
+import { KubernetesConfigurationForm } from "./views/Forms/KubernetesConfigurationForm";
+import { RegistryPropertyForm } from "./views/Forms/RegistryPropertyForm";
 
 const MainContainer = styled.div`
     display: flex;
@@ -240,6 +243,19 @@ const MainPanel = (props: MainPanelProps) => {
             case MACHINE_VIEW.DatamapperForm:
                 setViewComponent(<DatamapperForm path={visualizerState.documentUri} />);
                 break;
+            case MACHINE_VIEW.DataMapperMigrationForm:
+                setViewComponent(<DataMapperMigrationForm 
+                    path={visualizerState.documentUri}
+                    configName={visualizerState.customProps?.configName}
+                    migratedDmcPath={visualizerState.customProps?.migratedDmcPath}
+                    migratedInputSchemaPath={visualizerState.customProps?.migratedInputSchemaPath}
+                    migratedOutputSchemaPath={visualizerState.customProps?.migratedOutputSchemaPath}
+                    range={visualizerState.customProps?.range}
+                    documentUri={visualizerState.customProps?.documentUri}
+                    tsFilePath={visualizerState.customProps?.tsFilePath}
+                    description={visualizerState.customProps?.description}
+                />);
+                break;
             case MACHINE_VIEW.InboundEPForm:
                 setViewComponent(<InboundEPWizard
                     path={visualizerState.documentUri}
@@ -319,6 +335,12 @@ const MainPanel = (props: MainPanelProps) => {
             case MACHINE_VIEW.ImportArtifactForm:
                 setViewComponent(<ImportArtfactForm />);
                 break;
+            case MACHINE_VIEW.KubernetesConfigurationForm:
+                setViewComponent(<KubernetesConfigurationForm />);
+                break;
+            case MACHINE_VIEW.RegistryForm:
+                setViewComponent(<RegistryPropertyForm path={visualizerState.documentUri} />);
+                break;
             case MACHINE_VIEW.ConnectorStore:
                 setViewComponent(
                     <ConnectionWizard path={visualizerState.documentUri} />);
diff --git a/workspaces/mi/mi-visualizer/src/PopupPanel.tsx b/workspaces/mi/mi-visualizer/src/PopupPanel.tsx
index e5bd2d1127b..a64d1c5f08a 100644
--- a/workspaces/mi/mi-visualizer/src/PopupPanel.tsx
+++ b/workspaces/mi/mi-visualizer/src/PopupPanel.tsx
@@ -40,6 +40,7 @@ import { SequenceWizard } from './views/Forms/SequenceForm';
 import { RegistryResourceForm } from './views/Forms/RegistryResourceForm';
 import { TemplateWizard } from './views/Forms/TemplateForm';
 import { DatamapperForm } from './views/Forms/DatamapperForm';
+import { DataMapperMigrationForm } from './views/Forms/DataMapperMigrationForm';
 import { ManageConfigurables } from './views/Overview/ProjectInformation/ManageConfigurables';
 import { MessageStoreWizard } from './views/Forms/MessageStoreForm';
 import { DataServiceWizard } from './views/Forms/DataServiceForm/MainPanelForms';
@@ -154,6 +155,21 @@ const PopupPanel = (props: { formState: PopupMachineStateValue, handleClose?: ()
                 case MACHINE_VIEW.DatamapperForm:
                     setViewComponent(<DatamapperForm path={machineSate.projectUri} handlePopupClose={props.handleClose} isPopup={true} />);
                     break;
+                case MACHINE_VIEW.DataMapperMigrationForm:
+                    setViewComponent(<DataMapperMigrationForm 
+                        path={machineSate.customProps.path} 
+                        configName={machineSate.customProps.configName}
+                        migratedDmcPath={machineSate.customProps.migratedDmcPath}
+                        migratedInputSchemaPath={machineSate.customProps.migratedInputSchemaPath}
+                        migratedOutputSchemaPath={machineSate.customProps.migratedOutputSchemaPath}
+                        range={machineSate.customProps.range}
+                        documentUri={machineSate.customProps.documentUri}
+                        handlePopupClose={props.handleClose} 
+                        tsFilePath={machineSate.customProps.tsFilePath}
+                        isPopup={true}
+                        description={machineSate.customProps.description}
+                    />);
+                    break;
                 case MACHINE_VIEW.MessageStoreForm:
                     const dir = [machineSate.projectUri, "src", "main", "wso2mi", "artifacts", "messageStores"].join(machineSate.pathSeparator);
                     setViewComponent(<MessageStoreWizard onClose={props.handleClose} path={dir} isPopup={true} />);
diff --git a/workspaces/mi/mi-visualizer/src/constants/index.ts b/workspaces/mi/mi-visualizer/src/constants/index.ts
index 998837ad6ca..2d2b4942f42 100644
--- a/workspaces/mi/mi-visualizer/src/constants/index.ts
+++ b/workspaces/mi/mi-visualizer/src/constants/index.ts
@@ -24,6 +24,7 @@ export const MI_ARTIFACT_EDIT_BACKEND_URL = `/chat/artifact-editing`;
 export const MI_SUGGESTIVE_QUESTIONS_INITIAL_BACKEND_URL = `/suggestions/initial`;
 export const MI_SUGGESTIVE_QUESTIONS_BACKEND_URL = `/suggestions`;
 export const MI_UNIT_TEST_GENERATION_BACKEND_URL = `/unit-test/generate`;
+export const MI_UNIT_TEST_CASE_GENERATE_BACKEND_URL = `/unit-test/generate-case`;
 
 // MI Copilot Error Messages
 export const COPILOT_ERROR_MESSAGES = {
@@ -54,7 +55,8 @@ export const gitIssueUrl = "https://github.com/wso2/mi-vscode/issues";
 
 export const COMMANDS = {
     MIGRATE_PROJECT: "MI.migrateProject",
-    OPEN_PROJECT: "MI.openProject"
+    OPEN_PROJECT: "MI.openProject",
+    EDIT_K8_CONFIGURATION_COMMAND: 'MI.edit-k8-configuration'
 }
 
 // Actions for service designer
diff --git a/workspaces/mi/mi-visualizer/src/views/Forms/DataMapperMigrationForm.tsx b/workspaces/mi/mi-visualizer/src/views/Forms/DataMapperMigrationForm.tsx
new file mode 100644
index 00000000000..aeb1b904b84
--- /dev/null
+++ b/workspaces/mi/mi-visualizer/src/views/Forms/DataMapperMigrationForm.tsx
@@ -0,0 +1,435 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useEffect, useState } from "react";
+import { Button, FormView, FormActions, Typography } from "@wso2/ui-toolkit";
+import { useVisualizerContext } from "@wso2/mi-rpc-client";
+import { EVENT_TYPE, MACHINE_VIEW, IOType } from "@wso2/mi-core";
+import styled from "@emotion/styled";
+
+const MessageContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px 0;
+`;
+
+const InfoIcon = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    color: #0078d4;
+`;
+
+const DetailText = styled.div`
+    font-style: italic;
+    color: #666;
+    font-size: 14px;
+`;
+
+const ErrorMessage = styled.div`
+    color: #d73a49;
+    background-color: #ffeaea;
+    border: 1px solid #f5c6cb;
+    border-radius: 4px;
+    padding: 12px;
+    font-size: 14px;
+    margin-top: 16px;
+`;
+
+const LoadingContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    padding: 32px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    margin: 16px 0;
+`;
+
+const Spinner = styled.div`
+    border: 3px solid #f3f3f3;
+    border-top: 3px solid #0078d4;
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    animation: spin 1s linear infinite;
+
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+`;
+
+const LoadingText = styled.div`
+    font-size: 16px;
+    color: #0078d4;
+    font-weight: 500;
+`;
+
+const LoadingSubText = styled.div`
+    color: #666;
+    text-align: center;
+    font-size: 14px;
+`;
+
+export interface DataMapperMigrationFormProps {
+    path: string;
+    configName: string;
+    handlePopupClose?: () => void;
+    isPopup?: boolean;
+    migratedDmcPath?: string;
+    migratedInputSchemaPath?: string;
+    migratedOutputSchemaPath?: string;
+    range?: any;
+    documentUri?: string;
+    tsFilePath?: string;
+    description?: string;
+}
+
+export function DataMapperMigrationForm(props: DataMapperMigrationFormProps) {
+    const { rpcClient } = useVisualizerContext();
+    const [isLoading, setIsLoading] = useState(false);
+    const [isConverting, setIsConverting] = useState(false);
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+    const handleContinue = async () => {
+        setIsLoading(true);
+        setErrorMessage(null);
+        try {
+            // First create the DM files
+            const dmCreateRequest = {
+                dmLocation: "",
+                filePath: props.path,
+                dmName: props.configName
+            };
+
+            const createDMResponse = await rpcClient.getMiDataMapperRpcClient().createDMFiles(dmCreateRequest);
+
+            const projectRootResponse = await rpcClient.getMiDiagramRpcClient().getProjectRoot({ path: props.path });
+            const projectRoot = projectRootResponse.path;
+            if (!projectRoot) {
+                return;
+            }
+
+            if (createDMResponse && createDMResponse.success) {
+                // First, handle input schema if it exists
+                if (props.migratedInputSchemaPath) {
+                    try {
+                        const inputSchemaResponse = await rpcClient.getMiDiagramRpcClient().handleFileWithFS({
+                            fileName: props.migratedInputSchemaPath.split('/').pop() || props.migratedInputSchemaPath.split('\\').pop() || props.migratedInputSchemaPath,
+                            filePath: props.migratedInputSchemaPath,
+                            operation: 'read'
+                        });
+
+                        if (inputSchemaResponse.status && inputSchemaResponse.content) {
+                            const browseInputSchemaRequest = {
+                                documentUri: props.tsFilePath,
+                                content: inputSchemaResponse.content,
+                                ioType: IOType.Input,
+                                schemaType: "jsonschema",
+                                configName: props.configName,
+                                overwriteSchema: false
+                            };
+
+                            const inputResponse = await rpcClient.getMiDataMapperRpcClient().browseSchema(browseInputSchemaRequest);
+                        } else {
+                            console.error('Failed to read migrated input schema file');
+                            setErrorMessage('Failed to read the migrated input schema file.');
+                            return;
+                        }
+                    } catch (error) {
+                        console.error('Error reading migrated input schema file:', error);
+                        setErrorMessage('Failed to read the migrated input schema file.');
+                        return;
+                    }
+                }
+
+                // Then, handle output schema if it exists
+                if (props.migratedOutputSchemaPath) {
+                    try {
+                        const outputSchemaResponse = await rpcClient.getMiDiagramRpcClient().handleFileWithFS({
+                            fileName: props.migratedOutputSchemaPath.split('/').pop() || props.migratedOutputSchemaPath.split('\\').pop() || props.migratedOutputSchemaPath,
+                            filePath: props.migratedOutputSchemaPath,
+                            operation: 'read'
+                        });
+
+                        if (outputSchemaResponse.status && outputSchemaResponse.content) {
+                            const browseOutputSchemaRequest = {
+                                documentUri: props.tsFilePath,
+                                content: outputSchemaResponse.content,
+                                ioType: IOType.Output,
+                                schemaType: "jsonschema",
+                                configName: props.configName,
+                                overwriteSchema: false
+                            };
+
+                            const outputResponse = await rpcClient.getMiDataMapperRpcClient().browseSchema(browseOutputSchemaRequest);
+                        } else {
+                            console.error('Failed to read migrated output schema file');
+                            setErrorMessage('Failed to read the migrated output schema file.');
+                            return;
+                        }
+                    } catch (error) {
+                        console.error('Error reading migrated output schema file:', error);
+                        setErrorMessage('Failed to read the migrated output schema file.');
+                        return;
+                    }
+                }
+
+                // Fetch call to backend for DMC to TS conversion
+                try {
+                    let dmcContent = "";
+                    let tsFileContent = "";
+
+                    // Read DMC file content if path exists
+                    if (props.migratedDmcPath) {
+                        try {
+                            const dmcResponse = await rpcClient.getMiDiagramRpcClient().handleFileWithFS({
+                                fileName: props.migratedDmcPath.split('/').pop() || props.migratedDmcPath.split('\\').pop() || props.migratedDmcPath,
+                                filePath: props.migratedDmcPath,
+                                operation: 'read'
+                            });
+
+                            if (dmcResponse.status && dmcResponse.content) {
+                                dmcContent = dmcResponse.content;
+                            } else {
+                                console.error('Failed to read migrated DMC file');
+                                setErrorMessage('Failed to read the migrated DMC file.');
+                                return;
+                            }
+                        } catch (error) {
+                            console.error('Error reading migrated DMC file:', error);
+                            setErrorMessage('Failed to read the migrated DMC file.');
+                            return;
+                        }
+                    }
+
+                    // Read TS file content
+                    try {
+                        const tsResponse = await rpcClient.getMiDiagramRpcClient().handleFileWithFS({
+                            fileName: props.tsFilePath.split('/').pop() || props.tsFilePath.split('\\').pop() || props.tsFilePath,
+                            filePath: props.tsFilePath,
+                            operation: 'read'
+                        });
+
+                        if (tsResponse.status && tsResponse.content) {
+                            tsFileContent = tsResponse.content;
+                        } else {
+                            console.error('Failed to read TS file');
+                            setErrorMessage('Failed to read the TypeScript file.');
+                            return;
+                        }
+                    } catch (error) {
+                        console.error('Error reading TS file:', error);
+                        setErrorMessage('Failed to read the TypeScript file.');
+                        return;
+                    }
+
+                    setIsConverting(true);
+                    const backendRootUri = (await rpcClient.getMiDiagramRpcClient().getBackendRootUrl()).url;
+                    let token: any;
+                    try {
+                        token = await rpcClient.getMiDiagramRpcClient().getUserAccessToken();
+                    } catch (error) {
+                        rpcClient.getMiDiagramRpcClient().executeCommand({ commands: ["MI.openAiPanel"] }).catch(console.error);
+                        throw new Error("No access token.");
+                    }
+                    const fetchResponse = await fetch(`${backendRootUri}/data-mapper/dmc-to-ts`, {
+                        method: 'POST',
+                        headers: {
+                            "Content-Type": "application/json",
+                            Authorization: `Bearer ${token.token}`,
+                        },
+                        body: JSON.stringify({
+                            dmc_content: dmcContent,
+                            ts_file: tsFileContent
+                        })
+                    });
+
+                    if (!fetchResponse.ok) {
+                        console.error('Failed to convert DMC to TS:', fetchResponse.statusText);
+                        setErrorMessage('Failed to convert DataMapper configuration. Please try again.');
+                        return;
+                    }
+
+                    const conversionResult = await fetchResponse.json();
+
+                    // Check if conversion was successful and update the TS file
+                    if (conversionResult.event === 'dmc_to_ts_success' && conversionResult.mapping) {
+                        try {
+                            // Overwrite the TS file with the mapping content
+                            const writeResponse = await rpcClient.getMiDiagramRpcClient().handleFileWithFS({
+                                fileName: props.tsFilePath.split('/').pop() || props.tsFilePath.split('\\').pop() || props.tsFilePath,
+                                filePath: props.tsFilePath,
+                                operation: 'write',
+                                content: conversionResult.mapping
+                            });
+
+                            if (writeResponse.status) {
+                                // Format the written file using range format
+                                try {
+                                    await rpcClient.getMiDiagramRpcClient().rangeFormat({
+                                        uri: props.tsFilePath
+                                    });
+                                } catch (formatError) {
+                                    console.warn('Failed to format the TypeScript file, but file was written successfully:', formatError);
+                                }
+
+                                const configNameWithoutExtension = props.configName.endsWith('.dmc') ? props.configName.slice(0, -4) : props.configName;
+                                const values = {
+                                    description: props.description,
+                                    inputType: '',
+                                    name: `resources:datamapper/${configNameWithoutExtension}`,
+                                    outputType: ''
+                                };
+
+                                const edits = await rpcClient.getMiDiagramRpcClient().updateMediator({
+                                    mediatorType: 'datamapper',
+                                    values: values as Record<string, any>,
+                                    documentUri: props.documentUri,
+                                    range: props.range.startTagRange
+                                });
+                            }
+
+                            if (!writeResponse.status) {
+                                console.error('Failed to write converted mapping to TS file');
+                                setErrorMessage('Failed to save the converted DataMapper configuration.');
+                                return;
+                            }
+                        } catch (writeError) {
+                            console.error('Error writing converted mapping to TS file:', writeError);
+                            setErrorMessage('Failed to save the converted DataMapper configuration.');
+                            return;
+                        }
+                    } else {
+                        console.error('Conversion failed or invalid response:', conversionResult);
+                        setErrorMessage('DataMapper conversion failed. Please check the source files and try again.');
+                        return;
+                    }
+                } catch (fetchError) {
+                    console.error('Error calling DMC to TS conversion service:', fetchError);
+                    setErrorMessage('Failed to connect to the conversion service. Please try again.');
+                    return;
+                } finally {
+                    setIsConverting(false);
+                }
+
+                // Then open the DataMapper view
+                const state = await rpcClient.getVisualizerState();
+                if (state) {
+                    rpcClient.getMiVisualizerRpcClient().openView({
+                        type: EVENT_TYPE.OPEN_VIEW,
+                        location: {
+                            ...state,
+                            documentUri: props.tsFilePath,
+                            view: MACHINE_VIEW.DataMapperView
+                        }
+                    });
+                }
+
+                // Close the popup if successful
+                if (props.handlePopupClose) {
+                    props.handlePopupClose();
+                }
+            } else {
+                setErrorMessage('Failed to create DataMapper files. Please try again.');
+                console.error('Failed to create DataMapper files');
+            }
+        } catch (error) {
+            setErrorMessage('An error occurred while creating DataMapper files. Please try again.');
+            console.error('Error creating DataMapper files or opening DataMapper:', error);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleCancel = () => {
+        if (props.handlePopupClose) {
+            props.handlePopupClose();
+        }
+    };
+
+    const handleBackButtonClick = () => {
+        if (props.handlePopupClose) {
+            props.handlePopupClose();
+        } else {
+            rpcClient.getMiVisualizerRpcClient().goBack();
+        }
+    };
+
+    return (
+        <FormView title="DataMapper Migration Required" onClose={handleBackButtonClick}>
+            <MessageContainer>
+
+                <Typography variant="body1">
+                    This DataMapper has been identified as one from a migrated project.
+                    The configuration may need to be updated to work properly with the current version.
+                </Typography>
+
+                <DetailText>
+                    <strong>Config Name:</strong> {props.configName}
+                </DetailText>
+
+                <DetailText>
+                    <strong>File Path:</strong> {props.path}
+                </DetailText>
+
+                <Typography variant="body2">
+                    Do you want to continue opening the DataMapper? By continuing, the existing DataMapper file will be converted to the new format.
+                    This conversion process uses AI and may require you to review and update the configuration after opening.
+                </Typography>
+
+                {isConverting && (
+                    <LoadingContainer>
+                        <Spinner />
+                        <LoadingText>Converting DataMapper configuration...</LoadingText>
+                        <LoadingSubText>
+                            This may take a few moments.
+                        </LoadingSubText>
+                    </LoadingContainer>
+                )}
+
+                {errorMessage && (
+                    <ErrorMessage>
+                        {errorMessage}
+                    </ErrorMessage>
+                )}
+            </MessageContainer>
+
+            <FormActions>
+                <Button
+                    appearance="secondary"
+                    onClick={handleCancel}
+                    disabled={isLoading || isConverting}
+                >
+                    Cancel
+                </Button>
+                <Button
+                    appearance="primary"
+                    onClick={handleContinue}
+                    disabled={isLoading || isConverting}
+                >
+                    {isConverting ? 'Converting...' : isLoading ? 'Opening...' : 'Continue'}
+                </Button>
+            </FormActions>
+        </FormView>
+    );
+}
diff --git a/workspaces/mi/mi-visualizer/src/views/Forms/IDPConnectorForm/IdpConnectorSchemaGenerateForm.tsx b/workspaces/mi/mi-visualizer/src/views/Forms/IDPConnectorForm/IdpConnectorSchemaGenerateForm.tsx
index d0786a83a4c..0a76b26b9c5 100644
--- a/workspaces/mi/mi-visualizer/src/views/Forms/IDPConnectorForm/IdpConnectorSchemaGenerateForm.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Forms/IDPConnectorForm/IdpConnectorSchemaGenerateForm.tsx
@@ -137,16 +137,27 @@ export function IdpConnectorSchemaGenerateForm({ onClose, path,fileContent }: Id
                 });
 
                 if (fetchedIdpConnections && fetchedIdpConnections.length > 0) {
-                    const transformedIdpConnections = fetchedIdpConnections.map((conn: any) => {
-                        const getParam = (paramName: string) =>
-                            conn.parameters?.find((p: any) => p.name === paramName)?.value || ""; 
-                        return {
-                            name: conn?.name,
-                            apiKey: getParam("apiKey"),
-                            url: getParam("endpointUrl"),
-                            model: getParam("model")
-                        };
-                    });
+                    const transformedIdpConnections = await Promise.all(
+                        fetchedIdpConnections.map(async (conn: any) => {
+                            const getParam = async (paramName: string) => {
+                                const paramObj = conn.parameters?.find((p: any) => p.name === paramName);
+                                if (paramObj?.expression) {
+                                    const match = paramObj.expression.match(/^\$\{configs\.([^\}]+)\}$/);
+                                    if (match) {
+                                        return await rpcClient.getMiDiagramRpcClient().getValueOfEnvVariable(match[1]);
+                                    }
+                                    return paramObj.expression;
+                                }
+                                return paramObj?.value || "";
+                            };
+                            return {
+                                name: conn?.name,
+                                apiKey: await getParam("apiKey"),
+                                url: await getParam("endpointUrl"),
+                                model: await getParam("model")
+                            };
+                        })
+                    );
                     allConnections.push(...transformedIdpConnections);
                 }
                 
diff --git a/workspaces/mi/mi-visualizer/src/views/Forms/IDPConnectorForm/IdpHeaderSchemaGeneration.tsx b/workspaces/mi/mi-visualizer/src/views/Forms/IDPConnectorForm/IdpHeaderSchemaGeneration.tsx
index 530e2087ec2..622097b3469 100644
--- a/workspaces/mi/mi-visualizer/src/views/Forms/IDPConnectorForm/IdpHeaderSchemaGeneration.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Forms/IDPConnectorForm/IdpHeaderSchemaGeneration.tsx
@@ -62,7 +62,7 @@ export function IdpHeaderSchemaGeneration({
     return (
         <HeaderContainer>
             <Typography variant="h3">
-                {path.split("/").pop()?.replace(/\.json$/, "")}
+                {path.replace(/\\/g, "/").split("/").pop()?.replace(/\.json$/, "")}
             </Typography>
                 <RightSection>
                     { base64String && (
diff --git a/workspaces/mi/mi-visualizer/src/views/Forms/IDPConnectorForm/IdpHeaderTryout.tsx b/workspaces/mi/mi-visualizer/src/views/Forms/IDPConnectorForm/IdpHeaderTryout.tsx
index 6f767cb9c86..73bca0a9c12 100644
--- a/workspaces/mi/mi-visualizer/src/views/Forms/IDPConnectorForm/IdpHeaderTryout.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Forms/IDPConnectorForm/IdpHeaderTryout.tsx
@@ -78,7 +78,7 @@ export function IdpHeaderTryout({
     return (
         <HeaderContainer>
             <Typography variant="h3">
-                {path.split("/").pop()?.replace(/\.json$/, "")}
+                {path.replace(/\\/g, "/").split("/").pop()?.replace(/\.json$/, "")}
             </Typography>
             <RightSection>
                 {tryoutOutput !== "" && tryOutBase64String && (
diff --git a/workspaces/mi/mi-visualizer/src/views/Forms/IDPConnectorForm/SchemaEditorView.tsx b/workspaces/mi/mi-visualizer/src/views/Forms/IDPConnectorForm/SchemaEditorView.tsx
index 31767b5f89a..49f0b993317 100644
--- a/workspaces/mi/mi-visualizer/src/views/Forms/IDPConnectorForm/SchemaEditorView.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Forms/IDPConnectorForm/SchemaEditorView.tsx
@@ -306,7 +306,7 @@ export function SchemaEditorView({
     const handleFileWrite = (schema?: string, imageOrPdf?:string) => {
         rpcClient.getMiDiagramRpcClient().writeIdpSchemaFileToRegistry({
             fileContent: schema,
-            schemaName: path.split('/').pop()?.replace(/\.json$/, '') ?? '',
+            schemaName: path.replace(/\\/g, '/').split('/').pop()?.replace(/\.json$/, '') ?? '',
             imageOrPdf: imageOrPdf
         });
     };
diff --git a/workspaces/mi/mi-visualizer/src/views/Forms/KubernetesConfigurationForm.tsx b/workspaces/mi/mi-visualizer/src/views/Forms/KubernetesConfigurationForm.tsx
new file mode 100644
index 00000000000..6b8db01a52d
--- /dev/null
+++ b/workspaces/mi/mi-visualizer/src/views/Forms/KubernetesConfigurationForm.tsx
@@ -0,0 +1,217 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useEffect, useState } from "react";
+import { Button, FormActions, FormView, TextField } from "@wso2/ui-toolkit";
+import { useVisualizerContext } from "@wso2/mi-rpc-client";
+import { EVENT_TYPE, MACHINE_VIEW } from "@wso2/mi-core";
+import { yupResolver } from "@hookform/resolvers/yup"
+import * as yup from "yup";
+import { useForm } from "react-hook-form";
+import { ParamConfig, ParamManager } from "@wso2/mi-diagram";
+
+type InputsFields = {
+    name?: string;
+    replicas?: number;
+    targetImage?: string;
+};
+
+const initialConfiguration: InputsFields = {
+    name: "",
+    replicas: 1,
+    targetImage: ""
+};
+
+const schema = yup.object({
+    name: yup.string().required("Integration Name is required").matches(/^[a-z]([-a-z0-9]*[a-z0-9])?$/, "Invalid Integration Name"),
+    replicas: yup.number().required("Number of replicas is required"),
+    targetImage: yup.string().required("Target Image is required"),
+});
+
+export function KubernetesConfigurationForm() {
+    const { rpcClient } = useVisualizerContext();
+
+    const {
+        register,
+        reset,
+        formState: { errors },
+        handleSubmit,
+    } = useForm({
+        defaultValues: initialConfiguration,
+        resolver: yupResolver(schema),
+        mode: "onChange"
+    });
+
+    const envConfigs: ParamConfig = {
+        paramValues: [],
+        paramFields: [
+            {
+                id: 0,
+                type: "TextField",
+                label: "Name",
+                defaultValue: "",
+                placeholder: "name",
+                isRequired: true
+            },
+            {
+                id: 1,
+                type: "TextField",
+                label: "Value",
+                defaultValue: "",
+                placeholder: "value",
+                isRequired: true
+            }]
+    }
+    const [envs, setEnvs] = useState(envConfigs);
+
+    const portConfigs: ParamConfig = {
+        paramValues: [],
+        paramFields: [
+            {
+                id: 0,
+                type: "TextField",
+                label: "Port",
+                defaultValue: "",
+                placeholder: "port",
+                isRequired: true
+            }]
+    }
+    const [portsMap, setPorts] = useState(portConfigs);
+
+    const handlePortsOnChange = (params: any) => {
+        let i = 1;
+        const modifiedParams = {
+            ...params, paramValues: params.paramValues.map((param: any) => {
+                return {
+                    ...param,
+                    key: i++,
+                    value: param.paramValues[0].value
+                }
+            })
+        };
+        setPorts(modifiedParams);
+    };
+
+    const handleEnvsOnChange = (params: any) => {
+        const modifiedParams = {
+            ...params, paramValues: params.paramValues.map((param: any) => {
+                return {
+                    ...param,
+                    key: param.paramValues[0].value,
+                    value: param.paramValues[1].value,
+                }
+            })
+        };
+        setEnvs(modifiedParams);
+    };
+
+    useEffect(() => {
+        async function fetchData() {
+            try {
+                const response = await rpcClient?.getMiVisualizerRpcClient().getProjectDetails();
+                reset({
+                    "name": "",
+                    "replicas": 1,
+                    "targetImage": "{username}/" + response.buildDetails?.advanceDetails?.projectArtifactId?.value
+                        + ":" + response.primaryDetails?.projectVersion?.value
+                });
+            } catch (error) {
+                console.error("Error occurred while fetching project details:", error);
+            }
+        }
+        fetchData();
+    }, [rpcClient, reset]);
+
+    const openOverview = () => {
+        rpcClient.getMiVisualizerRpcClient().openView({ type: EVENT_TYPE.OPEN_VIEW, location: { view: MACHINE_VIEW.Overview } });
+    };
+
+    const handleBackButtonClick = () => {
+        rpcClient.getMiVisualizerRpcClient().goBack();
+    };
+
+
+    const handleCreateDeployment = async (values: InputsFields) => {
+
+        let ports: any = [];
+        portsMap.paramValues.map((param: any) => {
+            ports.push({ port: param.paramValues[0].value });
+        });
+
+        let envValues: any = [];
+        envs.paramValues.map((param: any) => {
+            envValues.push({ key: param.paramValues[0].value, value: param.paramValues[1].value });
+        });
+
+        const request = {
+            name: values.name,
+            replicas: values.replicas,
+            targetImage: values.targetImage,
+            ports: ports,
+            envValues: envValues,
+        };
+        const response = await rpcClient.getMiDiagramRpcClient().configureKubernetes(request);
+        if (response) {
+            rpcClient.getMiVisualizerRpcClient().openView({ type: EVENT_TYPE.OPEN_VIEW, location: { view: MACHINE_VIEW.Overview } });
+        }
+    }
+
+    return (
+        <FormView title="Kubernetes Configuration" onClose={handleBackButtonClick}>
+            <TextField
+                id='name'
+                label="Integration Name"
+                errorMsg={errors.name?.message}
+                required
+                {...register("name")}
+            />
+            <TextField
+                id='replicas'
+                label="Number of Replicas"
+                errorMsg={errors.replicas?.message}
+                required
+                {...register("replicas")}
+            />
+            <TextField
+                id='targetImage'
+                label="Target Image"
+                errorMsg={errors.targetImage?.message}
+                required
+                {...register("targetImage")}
+            />
+            <ParamManager
+                paramConfigs={portsMap}
+                readonly={false}
+                addParamText="Add Port"
+                onChange={handlePortsOnChange} />
+            <ParamManager
+                paramConfigs={envs}
+                readonly={false}
+                addParamText="Add Environment Variable"
+                onChange={handleEnvsOnChange} />
+            <FormActions>
+                <Button appearance="secondary" onClick={openOverview}>
+                    Cancel
+                </Button>
+                <Button onClick={handleSubmit(handleCreateDeployment)}>
+                    Create
+                </Button>
+            </FormActions>
+        </FormView>
+
+    );
+}
diff --git a/workspaces/mi/mi-visualizer/src/views/Forms/RegistryPropertyForm.tsx b/workspaces/mi/mi-visualizer/src/views/Forms/RegistryPropertyForm.tsx
new file mode 100644
index 00000000000..abdeb951653
--- /dev/null
+++ b/workspaces/mi/mi-visualizer/src/views/Forms/RegistryPropertyForm.tsx
@@ -0,0 +1,145 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com) All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useEffect, useState } from "react";
+import { Button, FormActions, FormView, TextField } from "@wso2/ui-toolkit";
+import { useVisualizerContext } from "@wso2/mi-rpc-client";
+import { EVENT_TYPE, MACHINE_VIEW } from "@wso2/mi-core";
+import { ParamConfig, ParamManager } from "@wso2/mi-diagram";
+import path from "path";
+
+export interface RegistryProps {
+    path: string;
+}
+
+export function RegistryPropertyForm(props: RegistryProps) {
+    const { rpcClient } = useVisualizerContext();
+    const registryResource = props.path ? path.basename(props.path) : "";
+
+    const propertyConfigs: ParamConfig = {
+        paramValues: [],
+        paramFields: [
+            {
+                id: 0,
+                type: "TextField",
+                label: "Key",
+                defaultValue: "",
+                placeholder: "Property Key",
+                isRequired: true
+            },
+            {
+                id: 1,
+                type: "TextField",
+                label: "Value",
+                defaultValue: "",
+                placeholder: "Property Value",
+                isRequired: true
+            }]
+    }
+    const [properties, setProperties] = useState(propertyConfigs);
+
+    useEffect(() => {
+        (async () => {
+            const response = await rpcClient?.getMiDiagramRpcClient().getPropertiesFromArtifactXML(props.path);
+            if (response === undefined) {
+                openOverview();
+            }
+            propertyConfigs.paramValues = [];
+            setProperties(propertyConfigs);
+            response.map((param: any) => {
+                setProperties((prev: any) => {
+                    return {
+                        ...prev,
+                        paramValues: [...prev.paramValues, {
+                            id: prev.paramValues.length,
+                            paramValues: [
+                                { value: param.key },
+                                { value: param.value }
+                            ],
+                            key: param.key,
+                            value: param.value,
+                        }
+                        ]
+                    }
+                });
+            });
+        })();
+    }, [props.path]);
+
+    const openOverview = () => {
+        rpcClient.getMiVisualizerRpcClient().openView({ type: EVENT_TYPE.OPEN_VIEW, location: { view: MACHINE_VIEW.Overview } });
+    };
+
+    const handleBackButtonClick = () => {
+        rpcClient.getMiVisualizerRpcClient().goBack();
+    };
+
+    const handlePropertiesOnChange = (params: any) => {
+        const modifiedParams = {
+            ...params, paramValues: params.paramValues.map((param: any) => {
+                return {
+                    ...param,
+                    key: param.paramValues[0].value,
+                    value: param.paramValues[1].value,
+                }
+            })
+        };
+        setProperties(modifiedParams);
+    };
+
+    const addRegistryProperties = async () => {
+
+        let propertyValues: any = [];
+        properties.paramValues.map((param: any) => {
+            propertyValues.push({ key: param.paramValues[0].value, value: param.paramValues[1].value });
+        });
+
+        const request = {
+            targetFile: props.path,
+            properties: propertyValues
+        };
+        const response = await rpcClient.getMiDiagramRpcClient().updatePropertiesInArtifactXML(request);
+        if (response) {
+            rpcClient.getMiVisualizerRpcClient().openView({ type: EVENT_TYPE.OPEN_VIEW, location: { view: MACHINE_VIEW.Overview } });
+        }
+    }
+
+    return (
+        <FormView title="Manage Properties" onClose={handleBackButtonClick}>
+            <TextField
+                id='name'
+                label="Registry Resource Name"
+                value={registryResource}
+                readOnly
+            />
+            <ParamManager
+                paramConfigs={properties}
+                readonly={false}
+                addParamText="Add Property"
+                onChange={handlePropertiesOnChange} />
+            <FormActions>
+                <Button appearance="secondary" onClick={openOverview}>
+                    Cancel
+                </Button>
+                <Button onClick={addRegistryProperties}>
+                    Update
+                </Button>
+            </FormActions>
+        </FormView>
+
+    );
+}
diff --git a/workspaces/mi/mi-visualizer/src/views/Forms/Tests/MockServices/MockServiceForm.tsx b/workspaces/mi/mi-visualizer/src/views/Forms/Tests/MockServices/MockServiceForm.tsx
index d8f543092d4..29b01d24cc8 100644
--- a/workspaces/mi/mi-visualizer/src/views/Forms/Tests/MockServices/MockServiceForm.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Forms/Tests/MockServices/MockServiceForm.tsx
@@ -140,14 +140,20 @@ export function MockServiceForm(props: MockServiceFormProps) {
                                 ]
                             });
                         }
+                        // Strip CDATA tags if they exist to prevent duplication
+                        const requestPayload = resource?.request?.payload?.textNode;
+                        const responsePayload = resource?.response?.payload?.textNode;
+                        const expectedRequestPayload = requestPayload?.startsWith("<![CDATA[") ? requestPayload.slice(9, -3) : requestPayload;
+                        const expectedResponsePayload = responsePayload?.startsWith("<![CDATA[") ? responsePayload.slice(9, -3) : responsePayload;
+                        
                         return {
                             subContext: resource?.subContext?.textNode,
                             method: resource?.method?.textNode,
                             requestHeaders,
-                            expectedRequestPayload: resource?.request?.payload?.textNode,
+                            expectedRequestPayload,
                             responseStatusCode: resource?.response?.statusCode?.textNode,
                             responseHeaders,
-                            expectedResponsePayload: resource?.response?.payload?.textNode
+                            expectedResponsePayload
                         }
                     });
                     setMockResources(resources);
@@ -155,7 +161,7 @@ export function MockServiceForm(props: MockServiceFormProps) {
                 reset({
                     name: fileName,
                     endpointName: mockService.serviceName?.textNode,
-                    servicePort: parseInt(mockService?.port?.textNode || '0'),
+                    servicePort: parseInt(mockService?.port?.textNode || '9090'),
                     serviceContext: mockService?.context?.textNode
                 });
                 setIsLoaded(true);
@@ -163,9 +169,8 @@ export function MockServiceForm(props: MockServiceFormProps) {
             }
 
             reset({
-                name: "",
                 endpointName: "",
-                servicePort: 0,
+                servicePort: 9090,
                 serviceContext: "/"
             });
             setIsLoaded(true);
@@ -283,6 +288,7 @@ export function MockServiceForm(props: MockServiceFormProps) {
                     name="endpointName"
                     filterType="endpoint"
                     path={props.filePath}
+                    required
                     errorMsg={errors.endpointName?.message.toString()}
                     {...register("endpointName")}
                 />
diff --git a/workspaces/mi/mi-visualizer/src/views/Forms/Tests/TestCaseForm.tsx b/workspaces/mi/mi-visualizer/src/views/Forms/Tests/TestCaseForm.tsx
index fc020b90653..274915875b2 100644
--- a/workspaces/mi/mi-visualizer/src/views/Forms/Tests/TestCaseForm.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Forms/Tests/TestCaseForm.tsx
@@ -19,19 +19,26 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { EVENT_TYPE, MACHINE_VIEW } from "@wso2/mi-core";
 import { ParamManager, ParamValue, getParamManagerFromValues, getParamManagerValues } from "@wso2/mi-diagram";
 import { useVisualizerContext } from "@wso2/mi-rpc-client";
-import { Button, ComponentCard, Dropdown, FormActions, FormView, ProgressIndicator, TextArea, TextField, Typography } from "@wso2/ui-toolkit";
+import { Button, ComponentCard, Dropdown, FormActions, FormView, ProgressIndicator, TextArea, TextField, Typography, Dialog, Icon } from "@wso2/ui-toolkit";
 import { useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
 import { TagRange } from '@wso2/mi-syntax-tree/lib/src';
+import * as path from "path";
 import * as yup from "yup";
 import { getTestCaseXML } from "../../../utils/template-engine/mustache-templates/TestSuite";
+import { ParameterManager } from "@wso2/mi-diagram";
+import { compareVersions } from "@wso2/mi-diagram/lib/utils/commons";
+import { getProjectRuntimeVersion } from "../../AIPanel/utils";
+import { MI_UNIT_TEST_CASE_GENERATE_BACKEND_URL } from "../../../constants";
 
 export enum TestSuiteType {
     API = "API",
     SEQUENCE = "Sequence"
 }
+
 interface TestCaseFormProps {
-    filePath?: string;
+    filePath?: string; // Path to the test suite file
+    artifactPath?: string; // Path to the artifact being tested
     range?: TagRange;
     testCase?: TestCaseEntry;
     testSuiteType: TestSuiteType;
@@ -40,6 +47,14 @@ interface TestCaseFormProps {
     onSubmit?: (values: any) => void;
 }
 
+interface UnitTestCaseApiResponse {
+    event: string;
+    error: string | null;
+    updated_test_file: string | null;
+    mock_services?: string[];
+    mock_service_names?: string[];
+}
+
 export interface TestCaseEntry {
     name: string;
     assertions?: string[][];
@@ -67,6 +82,145 @@ export function TestCaseForm(props: TestCaseFormProps) {
     const { rpcClient } = useVisualizerContext();
 
     const [isLoaded, setIsLoaded] = useState(false);
+    const [inputProperties, setInputProperties] = useState<any[]>([]);
+    const [assertions, setAssertions] = useState<any[]>([]);
+    const [showAIDialog, setShowAIDialog] = useState(false);
+    const [aiPrompt, setAiPrompt] = useState("");
+
+    // Form data configurations for ParameterManager
+    const inputPropertiesFormData = {
+        elements: [
+            {
+                type: "attribute",
+                value: {
+                    name: "propertyName",
+                    displayName: "Property Name",
+                    inputType: "string",
+                    required: true,
+                    helpTip: "",
+                },
+            },
+            {
+                type: "attribute",
+                value: {
+                    name: "propertyScope",
+                    displayName: "Property Scope",
+                    inputType: "combo",
+                    required: true,
+                    comboValues: ["default", "transport", "axis2", "axis2-client"],
+                    defaultValue: "default",
+                    helpTip: "",
+                },
+            },
+            {
+                type: "attribute",
+                value: {
+                    name: "propertyValue",
+                    displayName: "Property Value",
+                    inputType: "string",
+                    required: true,
+                    helpTip: "",
+                },
+            }
+        ],
+        tableKey: 'propertyName',
+        tableValue: 'propertyValue',
+        addParamText: 'Add Property',
+    };
+
+    // Helper function to create assertions form data based on version
+    const createAssertionsFormData = (useStringOrExpression: boolean, testSuiteType: TestSuiteType) => ({
+        elements: [
+            {
+                type: "attribute",
+                value: {
+                    name: "assertionType",
+                    displayName: "Assertion Type",
+                    inputType: "combo",
+                    required: false,
+                    comboValues: ["Assert Equals", "Assert Not Null"],
+                    defaultValue: "Assert Equals",
+                    helpTip: "",
+                },
+            },
+            {
+                type: "attribute",
+                value: {
+                    name: "actualExpressionType",
+                    displayName: "Assertion",
+                    inputType: "combo",
+                    required: true,
+                    comboValues: testSuiteType === TestSuiteType.SEQUENCE ? ["Payload", "Transport Header", "Custom"] : ["Payload", "Status Code", "Transport Header", "HTTP Version"],
+                    defaultValue: "Payload",
+                    helpTip: "",
+                },
+            },
+            {
+                type: "attribute",
+                value: {
+                    name: "transportHeader",
+                    displayName: "Transport Header",
+                    inputType: "string",
+                    required: true,
+                    helpTip: "",
+                    enableCondition: [
+                        {
+                            actualExpressionType: "Transport Header",
+                        }
+                    ]
+                },
+            },
+            {
+                type: "attribute",
+                value: {
+                    name: "actualExpression",
+                    displayName: "Expression",
+                    inputType: useStringOrExpression ? "stringOrExpression" : "string",
+                    required: true,
+                    helpTip: "",
+                    artifactPath: props.filePath,
+                    artifactType: props.testSuiteType,
+                    enableCondition: [
+                        {
+                            actualExpressionType: "Custom",
+                        }
+                    ],
+                    isUnitTest: true
+                },
+            },
+            {
+                type: "attribute",
+                value: {
+                    name: "expectedValue",
+                    displayName: "Expected Value",
+                    inputType: "codeTextArea",
+                    required: false,
+                    helpTip: "",
+                    enableCondition: [
+                        {
+                            assertionType: "Assert Equals",
+                        }
+                    ]
+                },
+            },
+            {
+                type: "attribute",
+                value: {
+                    name: "errorMessage",
+                    displayName: "Error Message",
+                    inputType: "string",
+                    required: true,
+                    helpTip: "",
+                },
+            }
+        ],
+        tableKey: 'assertionType',
+        tableValue: 'actualExpressionType',
+        addParamText: 'Add Assertion',
+    });
+
+    const [assertionsFormData, setAssertionsFormData] = useState(createAssertionsFormData(true, props.testSuiteType));
+
     const requestMethods = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS', 'TRACE', 'CONNECT'];
     const requestProtocols = ['http', 'https'];
     const isUpdate = !!props.testCase;
@@ -83,13 +237,10 @@ export function TestCaseForm(props: TestCaseFormProps) {
             requestMethod: !isSequence ? yup.string().oneOf(requestMethods).required("Resource method is required") : yup.string(),
             requestProtocol: !isSequence ? yup.string().oneOf(requestProtocols).required("Resource protocol is required") : yup.string(),
             payload: yup.string(),
-            properties: yup.mixed(),
         }),
-        assertions: yup.mixed(),
     });
 
     const {
-        control,
         handleSubmit,
         formState: { errors },
         register,
@@ -100,60 +251,23 @@ export function TestCaseForm(props: TestCaseFormProps) {
     });
 
     useEffect(() => {
-        (async () => {
-            const inputPropertiesFields = [
-                {
-                    "type": "TextField",
-                    "label": "Property Name",
-                    "defaultValue": "",
-                    "isRequired": true
-                },
-                {
-                    "type": "Dropdown",
-                    "label": "Property Scope",
-                    "defaultValue": "default",
-                    "isRequired": true,
-                    "values": ["default", "transport", "axis2", "axis2-client"]
-                },
-                {
-                    "type": "TextField",
-                    "label": "Property Value",
-                    "defaultValue": "",
-                    "isRequired": true
-                }
-            ];
+        const checkRuntimeVersion = async () => {
+            try {
+                const runtimeVersion = await getProjectRuntimeVersion(rpcClient);
+                const useStringOrExpression = runtimeVersion && compareVersions(runtimeVersion, "4.4.0") >= 0;
+                setAssertionsFormData(createAssertionsFormData(useStringOrExpression, props.testSuiteType));
+            } catch (error) {
+                console.error('Error getting runtime version:', error);
+                // Fallback to default configuration (stringOrExpression)
+                setAssertionsFormData(createAssertionsFormData(true, props.testSuiteType));
+            }
+        };
 
-            const assertionsFields = [
-                {
-                    type: "Dropdown",
-                    label: "Assertion Type",
-                    defaultValue: "Assert Equals",
-                    isRequired: false,
-                    values: ["Assert Equals", "Assert Not Null"]
-                },
-                {
-                    "type": "TextField",
-                    "label": "Actual Expression",
-                    "defaultValue": "",
-                    "isRequired": true
-                },
-                {
-                    "type": "TextArea",
-                    "label": "Expected Value",
-                    "defaultValue": "",
-                    "isRequired": false,
-                    "enableCondition": [
-                        { 0: "Assert Equals" }
-                    ]
-                },
-                {
-                    "type": "TextField",
-                    "label": "Error Message",
-                    "defaultValue": "",
-                    "isRequired": true,
-                }
-            ];
+        checkRuntimeVersion();
+    }, [rpcClient]);
 
+    useEffect(() => {
+        (async () => {
             if (isUpdate) {
                 const testCase = structuredClone(props?.testCase);
                 if (testCase.input?.payload?.startsWith("<![CDATA[")) {
@@ -168,18 +282,55 @@ export function TestCaseForm(props: TestCaseFormProps) {
                         return assertion;
                     });
                 }
-                testCase.input.properties = {
-                    paramValues: testCase.input.properties ? getParamManagerFromValues(testCase.input.properties, 0, 2) : [],
-                    paramFields: inputPropertiesFields
-                } as any;
                 testCase.input.requestProtocol = testCase?.input?.requestProtocol?.toLowerCase() ?? "http";
 
+                // Convert properties to new format
+                const properties = testCase.input.properties ?
+                    testCase.input.properties.map((prop: string[]) => ({
+                        propertyName: prop[0],
+                        propertyScope: prop[1] || "default",
+                        propertyValue: prop[2]
+                    })) : [];
+                // Helper function to determine actualExpressionType from actualExpression value
+                const getActualExpressionType = (actualExpression: string): string => {
+                    // if actualExpression starts with $trp, it's a transport header
+                    if (actualExpression.startsWith("$trp:")) {
+                        return "Transport Header";
+                    }
+                    switch (actualExpression) {
+                        case "$body":
+                            return "Payload";
+                        case "$statusCode":
+                            return "Status Code";
+                        case "$httpVersion":
+                            return "HTTP Version";
+                        default:
+                            return "Custom";
+                    }
+                };
+
+                // Convert assertions to new format
+                const assertionsData = testCase.assertions ?
+                    testCase.assertions.map((assertion: string[]) => ({
+                        assertionType: assertion[0],
+                        actualExpressionType: getActualExpressionType(assertion[1]),
+                        transportHeader: assertion[1]?.startsWith("$trp:") ? assertion[1].substring(5) : undefined,
+                        actualExpression: assertion[1],
+                        expectedValue: assertion[2] || "",
+                        errorMessage: assertion[3] || "",
+                    })) : [];
+
+                setInputProperties(properties);
+                setAssertions(assertionsData);
+
                 reset({
-                    ...testCase,
-                    assertions: {
-                        paramValues: testCase.assertions ? getParamManagerFromValues(testCase.assertions, 0) : [],
-                        paramFields: assertionsFields
-                    },
+                    name: testCase.name,
+                    input: {
+                        requestPath: testCase.input?.requestPath,
+                        requestMethod: testCase.input?.requestMethod,
+                        requestProtocol: testCase.input?.requestProtocol,
+                        payload: testCase.input?.payload || ""
+                    }
                 });
                 setIsLoaded(true);
                 return;
@@ -191,17 +342,11 @@ export function TestCaseForm(props: TestCaseFormProps) {
                     requestPath: !isSequence ? "/" : undefined,
                     requestMethod: !isSequence ? "GET" : undefined,
                     requestProtocol: !isSequence ? "http" : undefined,
-                    payload: "",
-                    properties: {
-                        paramValues: [],
-                        paramFields: inputPropertiesFields
-                    },
-                },
-                assertions: {
-                    paramValues: [],
-                    paramFields: assertionsFields
-                },
+                    payload: ""
+                }
             });
+            setInputProperties([]);
+            setAssertions([]);
             setIsLoaded(true);
         })();
     }, [props.filePath, props.testCase]);
@@ -219,8 +364,45 @@ export function TestCaseForm(props: TestCaseFormProps) {
     };
 
     const submitForm = async (values: any) => {
-        values.input.properties = getParamManagerValues(values.input.properties);
-        values.assertions = getParamManagerValues(values.assertions);
+        // Convert properties back to array format
+        values.input.properties = inputProperties.map(prop => [
+            prop.propertyName,
+            prop.propertyScope,
+            prop.propertyValue
+        ]);
+
+        // Convert assertions back to array format
+        values.assertions = assertions.map(assertion => {
+            // Handle actualExpression field - convert from JSON object to string
+            let actualExpression = assertion.actualExpression;
+            if(actualExpression === undefined){
+                switch (assertion.actualExpressionType) {
+                    case "Payload":
+                        actualExpression = "$body";
+                        break;
+                    case "Status Code":
+                        actualExpression = "$statusCode";
+                        break;
+                    case "Transport Header":
+                        const header = assertion.transportHeader;
+                        actualExpression = "$trp:" + header;
+                        break;
+                    case "HTTP Version":
+                        actualExpression = "$httpVersion";
+                        break;
+                }
+            }
+            if (typeof actualExpression === 'object' && actualExpression !== null) {
+                actualExpression = actualExpression.value;
+            }
+
+            return [
+                assertion.assertionType,
+                actualExpression,
+                assertion.expectedValue,
+                assertion.errorMessage,
+            ];
+        });
 
         if (props.onSubmit) {
             delete values.filePath;
@@ -233,6 +415,183 @@ export function TestCaseForm(props: TestCaseFormProps) {
         });
     }
 
+    const handleAIGeneration = async () => {
+        if (!aiPrompt.trim()) {
+            console.error("AI prompt is required");
+            return;
+        }
+
+        setIsLoaded(false);
+
+        try {
+            let token;
+            try {
+                token = await rpcClient.getMiDiagramRpcClient().getUserAccessToken();
+            } catch (error) {
+                console.error('User not signed in', error);
+                openSignInView();
+                return;
+            }
+
+            if (!token) {
+                openSignInView();
+                return;
+            }
+
+            const backendRootUri = (await rpcClient.getMiDiagramRpcClient().getBackendRootUrl()).url;
+            const url = backendRootUri + MI_UNIT_TEST_CASE_GENERATE_BACKEND_URL;
+
+            // Read the current test suite file directly
+            const testSuiteContent = await rpcClient.getMiDiagramRpcClient().handleFileWithFS({ 
+                filePath: props.filePath!, 
+                fileName: path.basename(props.filePath!),
+                operation: 'read' 
+            });
+            
+            // Extract test suite name from the file path
+            const testSuiteFileName = path.basename(props.filePath!, '.xml') || 'test-suite';
+            
+            // Use the artifact path for getting context
+            const artifactPath = props.artifactPath || props.filePath!;
+            const contextResponse = await rpcClient.getMiDiagramRpcClient().getSelectiveArtifacts({ path: artifactPath });
+            const context = [contextResponse];
+
+            const fullContextResponse = await rpcClient.getMiDiagramRpcClient().getWorkspaceContext();
+            const full_context = [fullContextResponse];
+
+            const pom_file_content = await rpcClient.getMiDiagramRpcClient().getPomFileContent();
+
+            const external_connector_details = await rpcClient.getMiDiagramRpcClient().getExternalConnectorDetails();
+
+            const mock_service_details = await rpcClient.getMiDiagramRpcClient().getMockServices();
+
+            let retryCount = 0;
+            const maxRetries = 2;
+            const fetchTestCaseGeneration = async (): Promise<Response> => {
+                const requestBody = JSON.stringify({
+                    context: context[0]?.artifacts || [],
+                    test_file_name: testSuiteFileName,
+                    test_suite_file: testSuiteContent?.content || '',
+                    test_case_description: aiPrompt,
+                    existing_mock_services: mock_service_details?.mockServices || [],
+                    existing_mock_service_names: mock_service_details?.mockServiceNames || [],
+                    num_suggestions: 1,
+                    full_context: full_context[0]?.context || [],
+                    pom_file: pom_file_content?.content || '',
+                    external_connectors: external_connector_details?.connectors || []
+                });
+
+                let response = await fetch(url, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Authorization': `Bearer ${token.token}`
+                    },
+                    body: requestBody,
+                });
+
+                if (response.status === 401) {
+                    // Retrieve a new token
+                    await rpcClient.getMiDiagramRpcClient().refreshAccessToken();
+                    const newToken = await rpcClient.getMiDiagramRpcClient().getUserAccessToken();
+
+                    // Make the request again with the new token
+                    response = await fetch(url, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Authorization': `Bearer ${newToken.token}`
+                        },
+                        body: requestBody,
+                    });
+                } else if (response.status === 404) {
+                    if (retryCount < maxRetries) {
+                        retryCount++;
+                        const delay = Math.pow(2, retryCount) * 1000; // Exponential backoff
+                        await new Promise(resolve => setTimeout(resolve, delay));
+                        return fetchTestCaseGeneration(); // Retry the request
+                    } else {
+                        openUpdateExtensionView();
+                        return response; // Exit the function if maximum retries reached
+                    }
+                }
+
+                if (!response.ok) {
+                    throw new Error('Failed to generate test case');
+                }
+                return response;
+            };
+
+            const response = await fetchTestCaseGeneration();
+            const responseBody = await response.clone().json();
+            console.log('Test case generation response body:', responseBody);
+            const data = await response.json() as UnitTestCaseApiResponse;
+            
+            if (data.event === "test_generation_success") {
+                // Update the test suite with the new content
+                if (data.updated_test_file) {
+                    // Extract XML from the response (remove markdown code blocks if present)
+                    let xmlContent = data.updated_test_file;
+                    const xmlMatch = xmlContent.match(/```xml\n([\s\S]*?)\n```/);
+                    if (xmlMatch) {
+                        xmlContent = xmlMatch[1];
+                    }
+                    
+                    const artifact = props.artifactPath || props.filePath!;
+                    rpcClient.getMiDiagramRpcClient().updateTestSuite({ 
+                        path: props.filePath, 
+                        content: xmlContent, 
+                        name: testSuiteFileName, 
+                        artifact 
+                    }).then(() => {
+                        // Close the dialog and open the updated test suite file
+                        setShowAIDialog(false);
+                        setAiPrompt("");
+                        
+                        // Open the updated test suite file instead of going back to overview
+                        rpcClient.getMiVisualizerRpcClient().openView({ 
+                            type: EVENT_TYPE.OPEN_VIEW, 
+                            location: { 
+                                view: MACHINE_VIEW.TestSuite, 
+                                documentUri: props.filePath 
+                            } 
+                        });
+                    });
+                }
+
+                // Handle mock services if they are provided
+                if (data.mock_services && data.mock_services.length > 0) {
+                    rpcClient.getMiDiagramRpcClient().writeMockServices({ 
+                        content: data.mock_services, 
+                        fileNames: data.mock_service_names || []
+                    });
+                }
+            } else {
+                throw new Error("Failed to generate test case: " + (data.error || "Unknown error"));
+            }
+
+        } catch (error) {
+            console.error('Error while generating test case:', error);
+        } finally {
+            setIsLoaded(true);
+            setShowAIDialog(false);
+            setAiPrompt("");
+        }
+    };
+
+    const openSignInView = () => {
+        rpcClient.getMiVisualizerRpcClient().openView({ type: EVENT_TYPE.OPEN_VIEW, location: { view: MACHINE_VIEW.LoggedOut } });
+    };
+
+    const openUpdateExtensionView = () => {
+        rpcClient.getMiVisualizerRpcClient().openView({ type: EVENT_TYPE.OPEN_VIEW, location: { view: MACHINE_VIEW.UpdateExtension } });
+    };
+
+    const handleAIDialogClose = () => {
+        setShowAIDialog(false);
+        setAiPrompt("");
+    };
+
     if (!isLoaded) {
         return <ProgressIndicator />;
     }
@@ -285,26 +644,10 @@ export function TestCaseForm(props: TestCaseFormProps) {
                 </div>
                 <Typography variant="body3">Editing of the properties of an input</Typography>
 
-                <Controller
-                    name="input.properties"
-                    control={control}
-                    render={({ field: { onChange, value } }) => (
-                        <ParamManager
-                            paramConfigs={value}
-                            readonly={false}
-                            addParamText="Add Property"
-                            onChange={(values) => {
-                                values.paramValues = values.paramValues.map((param: any) => {
-                                    const property: ParamValue[] = param.paramValues;
-                                    param.key = property[0].value;
-                                    param.value = property[2].value;
-                                    param.icon = 'query';
-                                    return param;
-                                });
-                                onChange(values);
-                            }}
-                        />
-                    )}
+                <ParameterManager
+                    formData={inputPropertiesFormData}
+                    parameters={inputProperties}
+                    setParameters={setInputProperties}
                 />
 
             </ComponentCard>
@@ -313,26 +656,10 @@ export function TestCaseForm(props: TestCaseFormProps) {
                 <Typography variant="h3">Assertions</Typography>
                 <Typography variant="body3">Editing of the properties of an assertion</Typography>
 
-                <Controller
-                    name="assertions"
-                    control={control}
-                    render={({ field: { onChange, value } }) => (
-                        <ParamManager
-                            paramConfigs={value}
-                            readonly={false}
-                            addParamText="Add Assertion"
-                            onChange={(values) => {
-                                values.paramValues = values.paramValues.map((param: any) => {
-                                    const property: ParamValue[] = param.paramValues;
-                                    param.key = property[0].value;
-                                    param.value = property[1].value;
-                                    param.icon = 'query';
-                                    return param;
-                                });
-                                onChange(values);
-                            }}
-                        />
-                    )}
+                <ParameterManager
+                    formData={assertionsFormData}
+                    parameters={assertions}
+                    setParameters={setAssertions}
                 />
 
             </ComponentCard>
@@ -344,10 +671,81 @@ export function TestCaseForm(props: TestCaseFormProps) {
                 >
                     {`${isUpdate ? "Update" : "Create"}`}
                 </Button>
+                {props.filePath && (
+                    <Button
+                        appearance="primary"
+                        onClick={() => setShowAIDialog(true)}
+                    >
+                        <Icon name="wand-magic-sparkles-solid" sx="marginRight:5px" />&nbsp;
+                        Generate Test Case with AI
+                    </Button>
+                )}
                 <Button appearance="secondary" onClick={handleGoBack}>
                     Cancel
                 </Button>
             </FormActions>
+
+            {/* AI Generation Dialog - Only render when filePath is defined */}
+            {props.filePath && (
+                <Dialog 
+                    isOpen={showAIDialog} 
+                    onClose={handleAIDialogClose}
+                    sx={{ 
+                        width: 'auto', 
+                        minWidth: '480px', 
+                        maxWidth: '600px',
+                        maxHeight: '80vh'
+                    }}
+                >
+                    <div style={{ 
+                        padding: '24px', 
+                        overflow: 'auto'
+                    }}>
+                        <div style={{ marginBottom: '20px' }}>
+                            <Typography variant="h3">
+                                Generate Test Case with AI
+                            </Typography>
+                        </div>
+                        <div style={{ 
+                            marginBottom: '20px', 
+                            color: 'var(--vscode-descriptionForeground)',
+                            lineHeight: '1.5'
+                        }}>
+                            <Typography variant="body3">
+                                Describe what kind of test case you want to generate. Be specific about the scenario, expected behavior, and any particular assertions you need.
+                            </Typography>
+                        </div>
+                        <div style={{ marginBottom: '24px' }}>
+                            <TextArea
+                                id="aiPrompt"
+                                label="Test Case Description"
+                                placeholder="Example: Generate a test case for a successful API call that validates the response status is 200 and the response body contains a valid user object with id, name, and email fields..."
+                                rows={6}
+                                value={aiPrompt}
+                                onChange={(e) => setAiPrompt(e.target.value)}
+                            />
+                        </div>
+                        <div style={{ 
+                            display: 'flex', 
+                            gap: '12px', 
+                            justifyContent: 'flex-end',
+                            paddingTop: '8px'
+                        }}>
+                            <Button appearance="secondary" onClick={handleAIDialogClose}>
+                                Cancel
+                            </Button>
+                            <Button 
+                                appearance="primary" 
+                                onClick={handleAIGeneration}
+                                disabled={!aiPrompt.trim()}
+                            >
+                                <Icon name="wand-magic-sparkles-solid" sx="marginRight:5px" />&nbsp;
+                                Generate
+                            </Button>
+                        </div>
+                    </div>
+                </Dialog>
+            )}
         </FormView>
     );
 }
diff --git a/workspaces/mi/mi-visualizer/src/views/Forms/Tests/TestSuiteForm.tsx b/workspaces/mi/mi-visualizer/src/views/Forms/Tests/TestSuiteForm.tsx
index d552248468a..31320b8da14 100644
--- a/workspaces/mi/mi-visualizer/src/views/Forms/Tests/TestSuiteForm.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Forms/Tests/TestSuiteForm.tsx
@@ -18,7 +18,7 @@
 
 import styled from "@emotion/styled";
 import { yupResolver } from "@hookform/resolvers/yup";
-import { EVENT_TYPE, MACHINE_VIEW, ProjectStructureArtifactResponse, GetSelectiveArtifactsResponse, GetUserAccessTokenResponse, ResourceType, RegistryArtifact, GetAvailableConnectorResponse } from "@wso2/mi-core";
+import { EVENT_TYPE, MACHINE_VIEW, ProjectStructureArtifactResponse, GetSelectiveArtifactsResponse, GetUserAccessTokenResponse, ResourceType, RegistryArtifact, GetAvailableConnectorResponse, GetWorkspaceContextResponse, GetPomFileContentResponse, GetExternalConnectorDetailsResponse, GetMockServicesResponse } from "@wso2/mi-core";
 import { useVisualizerContext } from "@wso2/mi-rpc-client";
 import { Button, ComponentCard, ContainerProps, ContextMenu, Dropdown, FormActions, FormGroup, FormView, Item, ProgressIndicator, TextField, Typography, Icon } from "@wso2/ui-toolkit";
 import { useEffect, useState } from "react";
@@ -49,6 +49,8 @@ interface UnitTestApiResponse {
     event: string;
     error: string | null;
     tests: string;
+    mock_services?: string[];
+    mock_service_names?: string[];
 }
 
 const cardStyle = {
@@ -203,17 +205,46 @@ export function TestSuiteForm(props: TestSuiteFormProps) {
                 context.push(response);
             });
 
+            var full_context: GetWorkspaceContextResponse[] = [];
+            await rpcClient?.getMiDiagramRpcClient()?.getWorkspaceContext().then((response: GetWorkspaceContextResponse) => {
+                full_context.push(response);
+            });
+
+            var pom_file_content: GetPomFileContentResponse;
+            await rpcClient?.getMiDiagramRpcClient()?.getPomFileContent().then((response: GetPomFileContentResponse) => {
+                pom_file_content = response;
+            });
+
+            var external_connector_details: GetExternalConnectorDetailsResponse;
+            await rpcClient?.getMiDiagramRpcClient()?.getExternalConnectorDetails().then((response: GetExternalConnectorDetailsResponse) => {
+                external_connector_details = response;
+            });
+
+            var mock_service_details: GetMockServicesResponse;
+            await rpcClient?.getMiDiagramRpcClient()?.getMockServices().then((response: GetMockServicesResponse) => {
+                mock_service_details = response;
+            });
+
             let retryCount = 0;
             const maxRetries = 2;
-
             const fetchUnitTests = async (): Promise<Response> => {
+                const requestBody = JSON.stringify({ 
+                    context: context[0].artifacts, 
+                    test_file_name: values.name, 
+                    num_suggestions: 1, 
+                    type: "generate_unit_tests" ,
+                    full_context: full_context[0].context,
+                    pom_file: pom_file_content.content,
+                    external_connectors: external_connector_details.connectors
+                });
+                
                 let response = await fetch(url, {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
                         'Authorization': `Bearer ${token.token}`
                     },
-                    body: JSON.stringify({ context: context[0].artifacts, test_file_name: values.name, num_suggestions: 1, type: "generate_unit_tests" }),
+                    body: requestBody,
                 });
 
                 if (response.status === 401) {
@@ -257,8 +288,25 @@ export function TestSuiteForm(props: TestSuiteFormProps) {
                     // Remove the Markdown code block delimiters
                     const cleanedXml = xml.map(xml => xml.replace(/```xml\n|```/g, ''));
                     rpcClient.getMiDiagramRpcClient().updateTestSuite({ path: props.filePath, content: cleanedXml[0], name: values.name, artifact }).then(() => {
-                        openOverview();
+                        // Calculate the file path for the newly created test suite
+                        let testSuiteFilePath = props.filePath;
+                        if (!testSuiteFilePath) {
+                            const testDir = path.join(projectUri, 'src', 'test', "wso2mi");
+                            testSuiteFilePath = path.join(testDir, `${values.name}.xml`);
+                        }
+                        
+                        // Open the newly created/updated test suite file
+                        rpcClient.getMiVisualizerRpcClient().openView({ 
+                            type: EVENT_TYPE.OPEN_VIEW, 
+                            location: { 
+                                view: MACHINE_VIEW.TestSuite, 
+                                documentUri: testSuiteFilePath 
+                            } 
+                        });
                     });
+                    if(data.mock_services && data.mock_services.length > 0) {
+                        rpcClient.getMiDiagramRpcClient().writeMockServices({ content: data.mock_services, fileNames:data.mock_service_names });
+                    }
                 } else {
                     console.error('No XMLs found in the response');
                 }
@@ -803,7 +851,16 @@ export function TestSuiteForm(props: TestSuiteFormProps) {
             setShowAddTestCase(false);
         };
         const availableTestCases = testCases.map((testCase) => testCase.name);
-        return <TestCaseForm onGoBack={goBack} onSubmit={onSubmit} testCase={currentTestCase} availableTestCases={availableTestCases} testSuiteType={getValues('artifactType') as TestSuiteType} />
+        const artifactType = getValues('artifactType') as TestSuiteType;
+        return <TestCaseForm 
+            onGoBack={goBack} 
+            onSubmit={onSubmit} 
+            filePath={props.filePath}
+            artifactPath={path.join(projectUri, getValues('artifact'))}
+            testCase={currentTestCase} 
+            availableTestCases={availableTestCases} 
+            testSuiteType={artifactType} 
+        />
     }
 
     if (showAddMockService) {
diff --git a/workspaces/mi/mi-visualizer/src/views/Overview/DeploymentStatus.tsx b/workspaces/mi/mi-visualizer/src/views/Overview/DeploymentStatus.tsx
index f6f533f6b72..36bdc780134 100644
--- a/workspaces/mi/mi-visualizer/src/views/Overview/DeploymentStatus.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Overview/DeploymentStatus.tsx
@@ -135,6 +135,7 @@ function DeploymentOption({
 
 interface DeploymentOptionsProps {
     handleDockerBuild: () => void;
+    handleConfigureKubernetes: () => void;
     handleCAPPBuild: () => void;
     handleRemoteDeploy: () => void;
     handleDeploy: (params: DeployProjectRequest) => void;
@@ -142,7 +143,7 @@ interface DeploymentOptionsProps {
     devantMetadata?: DevantMetadata;
 }
 
-export function DeploymentOptions({ handleDockerBuild, handleCAPPBuild, handleRemoteDeploy, handleDeploy, goToDevant, devantMetadata }: DeploymentOptionsProps) {
+export function DeploymentOptions({ handleDockerBuild, handleConfigureKubernetes, handleCAPPBuild, handleRemoteDeploy, handleDeploy, goToDevant, devantMetadata }: DeploymentOptionsProps) {
     const [expandedOptions, setExpandedOptions] = useState<Set<string>>(new Set(['cloud', 'devant']));
     const { rpcClient } = useVisualizerContext();
 
@@ -206,6 +207,15 @@ export function DeploymentOptions({ handleDockerBuild, handleCAPPBuild, handleRe
                 onDeploy={handleDockerBuild}
             />
 
+            <DeploymentOption
+                title="Configure Kubernetes Deployment"
+                description="Configure a Kubernetes deployment for your integration."
+                buttonText="Configure"
+                isExpanded={expandedOptions.has('kubernetes')}
+                onToggle={() => toggleOption('kubernetes')}
+                onDeploy={handleConfigureKubernetes}
+            />
+
             <DeploymentOption
                 title="Build CAPP"
                 description="Create an Integration Application (CApp) that runs on WSO2 Integrator: MI Server."
diff --git a/workspaces/mi/mi-visualizer/src/views/Overview/ProjectInformation/ProjectInformationForm.tsx b/workspaces/mi/mi-visualizer/src/views/Overview/ProjectInformation/ProjectInformationForm.tsx
index 93a55660ebd..47143ca5a96 100644
--- a/workspaces/mi/mi-visualizer/src/views/Overview/ProjectInformation/ProjectInformationForm.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Overview/ProjectInformation/ProjectInformationForm.tsx
@@ -89,6 +89,7 @@ export function ProjectInformationForm(props: ProjectInformationFormProps) {
         "unitTest-serverVersion": yup.string(),
         "unitTest-serverDownloadLink": yup.string(),
         "advanced-legacyExpressionSupport": yup.boolean(),
+        "advanced-useLocalMaven": yup.boolean(),
         "deployment-deployOnRemoteServer": yup.boolean(),
         "deployment-truststorePath": yup.string().when("deployment-deployOnRemoteServer", {
             is: true,
@@ -156,6 +157,7 @@ export function ProjectInformationForm(props: ProjectInformationFormProps) {
                 const response = await rpcClient?.getMiVisualizerRpcClient().getProjectDetails();
 
                 const isLegacyExpressionEnabled = await rpcClient.getMiVisualizerRpcClient().isSupportEnabled("LEGACY_EXPRESSION_ENABLED");
+                const useLocalMaven = await rpcClient.getMiVisualizerRpcClient().isSupportEnabled("USE_LOCAL_MAVEN");
                 let isRemoteDeploymentEnabled = await rpcClient.getMiVisualizerRpcClient().isSupportEnabled("REMOTE_DEPLOYMENT_ENABLED");
                 let pluginDetails = null;
                 if (isRemoteDeploymentEnabled) {
@@ -195,6 +197,7 @@ export function ProjectInformationForm(props: ProjectInformationFormProps) {
                     "unitTest-serverVersion": response.unitTest?.serverVersion?.value,
                     "unitTest-serverDownloadLink": response.unitTest?.serverDownloadLink?.value,
                     "advanced-legacyExpressionSupport": isLegacyExpressionEnabled,
+                    "advanced-useLocalMaven": useLocalMaven,
                     "deployment-deployOnRemoteServer": isRemoteDeploymentEnabled,
                     "deployment-truststorePath": pluginDetails ? pluginDetails.truststorePath : "",
                     "deployment-truststorePassword": pluginDetails ? pluginDetails.truststorePassword : "",
@@ -253,6 +256,11 @@ export function ProjectInformationForm(props: ProjectInformationFormProps) {
                     await rpcClient.getMiVisualizerRpcClient().updateProjectSettingsConfig({ configName: "LEGACY_EXPRESSION_ENABLED", value: isLegacyExpressionSupportEnabled });
                 }
 
+                if (field === "advanced-useLocalMaven") {
+                    let useLocalMaven = getValues("advanced-useLocalMaven");
+                    await rpcClient.getMiVisualizerRpcClient().updateProjectSettingsConfig({ configName: "USE_LOCAL_MAVEN", value: useLocalMaven });
+                }
+
                 const fieldValue = getValues(field as any);
                 const range = field.split('-').reduce((acc, key) => acc?.[key], projectDetails as any)?.range;
                 if (range) {
@@ -276,12 +284,9 @@ export function ProjectInformationForm(props: ProjectInformationFormProps) {
                 await rpcClient.getMiVisualizerRpcClient().updatePomValues({ pomValues: sortedChanges });
             }
             if (fieldsToAdd.length > 0) {
-                const newProperties = fieldsToAdd.map(field => {
+                const newProperties = fieldsToAdd.filter(field => fieldToPomPropertyMap[field]).map(field => {
                     const value = getValues(field as any);
                     const name = fieldToPomPropertyMap[field];
-                    if (!name) {
-                        return null; // Skip if no mapping found
-                    }
                     return { name, value: typeof value === "boolean" ? value.toString() : value };
                 });
                 if (newProperties.length > 0) {
@@ -624,7 +629,7 @@ export function ProjectInformationForm(props: ProjectInformationFormProps) {
                             />
                         </div>
                         <Typography variant="h1" sx={sectionTitleStyle} > Deployment </Typography>
-                        <div ref={divRefs["Deployment"]} id="Deployment" style={{ ...fieldGroupStyle, paddingBottom: 0 }}>
+                        <div ref={divRefs["Deployment"]} id="Deployment" style={fieldGroupStyle}>
                             <FormCheckBox
                                 label="Deploy to a remote server"
                                 description="Enables deploying to a remote server"
@@ -697,6 +702,14 @@ export function ProjectInformationForm(props: ProjectInformationFormProps) {
                                 sx={fieldStyle}
                                 {...register("advanced-legacyExpressionSupport")}
                             />
+                            <FormCheckBox
+                                label="Use Local Maven"
+                                description="Use locally installed Maven within the extension"
+                                descriptionSx={{ margin: "10px 0" }}
+                                control={control as any}
+                                sx={fieldStyle}
+                                {...register("advanced-useLocalMaven")}
+                            />
                         </div>
                     </div>
                     <div style={{ position: "sticky", bottom: 0, zIndex: 20005, height: 40, backgroundColor: "var(--vscode-editor-background)" }}>
diff --git a/workspaces/mi/mi-visualizer/src/views/Overview/index.tsx b/workspaces/mi/mi-visualizer/src/views/Overview/index.tsx
index 57d367c1542..70ec58e50ca 100644
--- a/workspaces/mi/mi-visualizer/src/views/Overview/index.tsx
+++ b/workspaces/mi/mi-visualizer/src/views/Overview/index.tsx
@@ -31,6 +31,7 @@ import { DeploymentOptions } from "./DeploymentStatus";
 import { useQuery } from "@tanstack/react-query";
 import { IOpenInConsoleCmdParams, CommandIds as PlatformExtCommandIds } from "@wso2/wso2-platform-core";
 import ProjectStructureView from "./ProjectStructureView";
+import { COMMANDS } from "../../constants";
 
 export interface DevantComponentResponse {
     org: string;
@@ -199,6 +200,15 @@ export function Overview(props: OverviewProps) {
         rpcClient.getMiDiagramRpcClient().buildProject({ buildType: "docker" });
     };
 
+    const handleConfigureKubernetes = async () => {
+        const conf = await rpcClient.getMiDiagramRpcClient().isKubernetesConfigured();
+        if (conf) {
+            await rpcClient.getMiDiagramRpcClient().executeCommand({ commands: [COMMANDS.EDIT_K8_CONFIGURATION_COMMAND] });
+        } else {
+            rpcClient.getMiVisualizerRpcClient().openView({ type: EVENT_TYPE.OPEN_VIEW, location: { view: MACHINE_VIEW.KubernetesConfigurationForm } });
+        }
+    };
+
     const handleCappBuild = () => {
         rpcClient.getMiDiagramRpcClient().buildProject({ buildType: "capp" });
     };
@@ -356,6 +366,7 @@ export function Overview(props: OverviewProps) {
                         <ProjectInfoColumn>
                             <DeploymentOptions
                                 handleDockerBuild={handleDockerBuild}
+                                handleConfigureKubernetes={handleConfigureKubernetes}
                                 handleCAPPBuild={handleCappBuild}
                                 handleRemoteDeploy={handleRemoteDeploy}
                                 handleDeploy={handleDeploy}
diff --git a/workspaces/wso2-platform/wso2-platform-extension/webpack.config.js b/workspaces/wso2-platform/wso2-platform-extension/webpack.config.js
index 52f0683d7af..0dbaf0a01bb 100644
--- a/workspaces/wso2-platform/wso2-platform-extension/webpack.config.js
+++ b/workspaces/wso2-platform/wso2-platform-extension/webpack.config.js
@@ -81,7 +81,7 @@ const extensionConfig = {
 			},
 		],
 	},
-	devtool: "source-map",
+	devtool: !process.env.CI ? "source-map" : undefined,
 	infrastructureLogging: {
 		level: "log",
 	},
diff --git a/workspaces/wso2-platform/wso2-platform-webviews/webpack.config.js b/workspaces/wso2-platform/wso2-platform-webviews/webpack.config.js
index 7a4d27a6618..3fc07286d9c 100644
--- a/workspaces/wso2-platform/wso2-platform-webviews/webpack.config.js
+++ b/workspaces/wso2-platform/wso2-platform-webviews/webpack.config.js
@@ -13,8 +13,8 @@ class RunTailwindCSSPlugin {
 module.exports = {
 	entry: "./src/index.tsx",
 	target: "web",
-	devtool: "source-map",
-	mode: "development",
+	devtool: !process.env.CI ? "source-map" : undefined,
+	mode: !process.env.CI ? "development" : "production",
 	output: {
 		path: path.resolve(__dirname, "build"),
 		filename: "main.js",